/* mathalat-syaret.css — Production-grade build (CWV, A11y, EEAT-safe) */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700;900&display=swap');

:root {
    --gold: #C5A059;
    --gold-2: #D4AF37;
    --gold-soft: #F3E2B3;
    --bg: #000;
    --ink: #ffffff;
    --muted: #9ca3af;
    --radius-lg: 2rem;
    --shadow-gold: 0 10px 30px rgba(197,160,89,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Noto Kufi Arabic', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink);
    direction: rtl;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 6px;
}

.gold-text {
    background: linear-gradient(90deg, var(--gold-2), var(--gold-soft), #8E6D2F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    line-height: 1.6;
}

.icon-lucide {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--gold);
}
.icon-sm { width: 16px; height: 16px; }

/* ============= BREADCRUMB ============= */
.breadcrumb-nav { background:#0a0a0a; padding:14px 24px; border-bottom:1px solid rgba(197,160,89,.15); }
.breadcrumb-list { list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:13px; max-width:1280px; margin-inline:auto; }
.breadcrumb-list li { display:flex; align-items:center; gap:8px; color:var(--muted); }
.breadcrumb-list li + li::before { content:"/"; color:var(--gold); }
.breadcrumb-list a { color:#fff; text-decoration:none; }
.breadcrumb-list a:hover { color:var(--gold); }
.breadcrumb-list [aria-current="page"] { color:var(--gold); font-weight:700; }

/* ============= HERO SLIDER ============= */
.hero-swiper { width:100%; height:85vh; min-height:560px; }
.swiper-slide { position:relative; overflow:hidden; }

.slide-bg {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    transition: transform 8s ease-out;
    will-change: transform;
}
.swiper-slide-active .slide-bg { transform: scale(1.08); }

.slide-overlay {
    position:absolute; inset:0;
    background: linear-gradient(to left, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 50%, transparent 100%);
}

.slide-content > * {
    opacity:0; transform: translateY(30px);
    transition: opacity .8s ease-out, transform .8s ease-out;
}
.swiper-slide-active .slide-content h2 { opacity:1; transform:translateY(0); transition-delay:.25s; }
.swiper-slide-active .slide-content p  { opacity:1; transform:translateY(0); transition-delay:.45s; }
.swiper-slide-active .slide-content > div { opacity:1; transform:translateY(0); transition-delay:.6s; }

.swiper-button-next, .swiper-button-prev {
    color: var(--gold) !important;
    background: rgba(255,255,255,.06);
    width: 50px !important; height: 50px !important;
    border-radius: 50%;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(197,160,89,.25);
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 18px !important; font-weight: 700; }
.swiper-pagination-bullet { background: rgba(255,255,255,.4) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: var(--gold) !important; width: 28px; border-radius: 6px; }

/* ============= H1 SECTION ============= */
.cs-hero {
    position: relative;
    padding: 7rem 1.5rem 8rem;
    text-align: center;
    background: radial-gradient(circle at center, #1a160d 0%, #050505 70%);
}

.cs-pill {
    display: inline-block;
    padding: .55rem 1.25rem;
    border-radius: 999px;
    border: 1px solid rgba(197,160,89,.3);
    background: rgba(197,160,89,.06);
    color: var(--gold);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2rem;
}

.seo-hero-title {
    font-size: clamp(1.75rem, 4.5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.25;
    margin: 0 auto 2.5rem;
    max-width: 1100px;
}

.cs-lead {
    color: #cbd5e1;
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    line-height: 1.9;
    max-width: 56rem;
    margin: 0 auto 3.5rem;
}

/* ============= BUTTONS ============= */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    background: var(--gold);
    color: #000 !important;
    font-weight: 800;
    padding: 1rem 2.25rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    border: 0;
    cursor: pointer;
    line-height: 1.2;
}
.btn-gold:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-gold); }
.btn-gold:active { transform: translateY(0); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-weight: 700;
    padding: 1rem 2.25rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: background .3s ease, border-color .3s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--gold); }

/* ============= GLASS CARD ============= */
.glass-card {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(197,160,89,.12);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.glass-card:hover {
    border-color: rgba(197,160,89,.4);
    background: rgba(255,255,255,.04);
}

.cs-section-dark {
    background:#0a0a0a;
    border:1px solid rgba(255,255,255,.05);
    border-radius: 1.75rem;
    margin: 3rem auto;
}
.cs-divider { border-top: 1px solid rgba(255,255,255,.06); }

/* ============= INTERNAL LINK CARD ============= */
.internal-link-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    padding: 1.1rem .75rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(.85rem, 1.1vw, 1.05rem);
    text-align: center;
    transition: transform .3s, background .3s, border-color .3s, color .3s;
    min-height: 64px;
}
.internal-link-card:hover {
    transform: translateY(-4px);
    background: rgba(197,160,89,.08);
    border-color: var(--gold);
    color: var(--gold);
}

/* ============= PORTFOLIO ============= */
.portfolio-card {
    position: relative;
    height: 450px;
    border-radius: 2.5rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.6);
    isolation: isolate;
    background:#0a0a0a;
}
.portfolio-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.portfolio-card:hover img { transform: scale(1.08); }

.card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,.4) 40%, transparent 80%);
    opacity: .85;
}
.card-content {
    position: absolute; inset: 0;
    padding: 2rem;
    display: flex; flex-direction: column; justify-content: flex-end;
    text-align: right;
}
.card-loc { color: var(--gold); font-weight: 700; margin-bottom: .5rem; font-size: 14px; }
.card-title { color: #fff; font-size: 1.5rem; font-weight: 900; margin: 0 0 1rem; line-height: 1.4; }
.card-meta { display:flex; gap:1.25rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.1); flex-wrap:wrap; }
.card-meta span { display:inline-flex; align-items:center; gap:.4rem; color:#cbd5e1; font-size:12px; }

.portfolio-card-wide { display: none; }
@media (min-width: 1024px) { .portfolio-card-wide { display: block; } }

/* ============= TYPE CARDS ============= */
.cs-featured { border-color: rgba(197,160,89,.4); background: rgba(197,160,89,.05); }
.cs-type-img { width: 100%; height: 16rem; object-fit: cover; border-radius: 1rem; margin-bottom: 1.5rem; }

/* ============= STEPS / CHECKS ============= */
.cs-step { display:flex; gap:1rem; align-items:flex-start; }
.cs-step-num { color: var(--gold); font-weight: 900; font-size: 1.5rem; flex: 0 0 auto; }

.cs-checks { list-style: none; padding: 0; margin: 0; }
.cs-checks li { display:flex; gap:.75rem; align-items:flex-start; }
.cs-check { flex:0 0 24px; height:24px; display:inline-flex; align-items:center; justify-content:center; background:rgba(197,160,89,.1); border-radius:50%; }

.cs-bullet-list { list-style: none; padding: 0; margin: 0; }
.cs-bullet-list li { display:flex; gap:.75rem; align-items:flex-start; }
.cs-bullet { width:8px; height:8px; background: var(--gold); border-radius:50%; margin-top:.7rem; flex:0 0 auto; }

.cs-bordered { border-right: 4px solid var(--gold); }
@media (max-width: 768px) { .cs-bordered { border-right: 0; border-top: 4px solid var(--gold); } }

.cs-inline-link {
    display:inline-flex; align-items:center; gap:.5rem;
    color: var(--gold); font-weight: 700; text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: gap .3s, border-color .3s;
}
.cs-inline-link:hover { gap: 1rem; border-color: var(--gold); }

/* ============= BLOG CARDS ============= */
.cs-blog-card {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(197,160,89,.1);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
}
.cs-blog-card:hover { transform: translateY(-4px); border-color: rgba(197,160,89,.4); }
.cs-blog-media { position:relative; aspect-ratio: 16/10; overflow:hidden; background:#0a0a0a; }
.cs-blog-media img { width:100%; height:100%; object-fit:cover; transition: transform .7s; }
.cs-blog-card:hover .cs-blog-media img { transform: scale(1.06); }
.cs-blog-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.6), transparent 60%); }
.cs-blog-body { padding: 1.5rem; }
.cs-blog-meta { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; font-size:12px; }
.cs-blog-cat { background: var(--gold); color:#000; padding: 3px 10px; border-radius: 999px; font-weight: 800; }
.cs-blog-date { color: var(--muted); }
.cs-blog-title { font-size: 1.15rem; line-height: 1.6; margin: 0 0 1rem; font-weight: 800; }
.cs-blog-title a { color:#fff; text-decoration:none; }
.cs-blog-title a:hover { color: var(--gold); }
.cs-blog-more { color: var(--gold); font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.cs-empty { text-align:center; padding: 3rem 0; }

/* ============= FAQ ============= */
.faq-item { padding: 0; overflow: hidden; }
.faq-item[open] { border-color: rgba(197,160,89,.4); }
.faq-q {
    display:flex; align-items:center; justify-content:space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon { transition: transform .3s ease; flex: 0 0 auto; }
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-a { padding: 0 1.5rem 1.25rem; color: #cbd5e1; line-height: 1.8; }

/* ============= CTA ============= */
.cs-cta {
    padding: 6rem 1.5rem;
    text-align: center;
    background: linear-gradient(to bottom, transparent, #0a0a0a);
    border-top: 1px solid rgba(255,255,255,.05);
}
.cs-cta-icon { width: 56px; height: 56px; margin: 0 auto 2rem; color: var(--gold); }

/* ============= MOBILE STICKY ============= */
.mobile-sticky-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #000;
    border-top: 2px solid var(--gold);
    z-index: 9999;
    display: none;
    padding: 10px;
    gap: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,.9);
}
@media (max-width: 768px) { .mobile-sticky-bar { display: flex; } }

.sticky-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background .3s;
}
.sticky-btn.call { background: var(--gold); color: #000; }
.sticky-btn.call:hover { background: #d8b46a; }
.sticky-btn.whatsapp { background: rgba(37,211,102,.12); color: #fff; border: 1px solid #25d366; }
.sticky-btn.whatsapp:hover { background: rgba(37,211,102,.2); }

body { padding-bottom: 0; }
@media (max-width: 768px) { body { padding-bottom: 76px; } }

/* ============= RESPONSIVE TABLE ============= */
@media (max-width: 768px) {
    .responsive-table thead { display: none; }
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
    .responsive-table tr {
        margin-bottom: 1.25rem;
        background: rgba(255,255,255,.02);
        border: 1px solid rgba(197,160,89,.2);
        border-radius: 1rem;
        padding: .25rem;
    }
    .responsive-table td {
        text-align: left;
        padding: .75rem;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255,255,255,.06);
        gap: 1rem;
    }
    .responsive-table td:last-child { border-bottom: 0; }
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--gold);
        font-size: 13px;
    }
    .responsive-table td[data-label="الخامة"] {
        background: rgba(197,160,89,.1);
        margin: 0;
        padding: 1rem;
        border-radius: .8rem .8rem 0 0;
        justify-content: center;
        font-size: 1.05rem;
    }
    .responsive-table td[data-label="الخامة"]::before { display: none; }
}

/* ============= MOBILE FONT TWEAKS ============= */
@media (max-width: 768px) {
    .hero-swiper { height: 78vh; min-height: 520px; }
    .slide-content h2 { font-size: 1.85rem !important; line-height: 1.3 !important; }
    .slide-content p { font-size: .95rem !important; }
    .cs-hero { padding: 4.5rem 1rem 5rem; }
    .cs-pill { font-size: 12px; padding: .4rem .9rem; }
    .seo-hero-title { line-height: 1.3; }
    .cs-cta h2 { font-size: 2rem; }
    .cs-cta .btn-gold, .cs-cta .btn-ghost { font-size: 1rem !important; padding: .9rem 1.5rem !important; width: 100%; }
}

@media (max-width: 360px) {
    .seo-hero-title { font-size: 1.5rem; }
    .slide-content h2 { font-size: 1.5rem !important; }
    .btn-gold, .btn-ghost { font-size: .9rem; padding: .8rem 1rem; }
}

/* ============= A11Y / REDUCED MOTION ============= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .swiper-slide-active .slide-bg { transform: none; }
}

/* ============= PRINT ============= */
@media print {
    .hero-swiper, .mobile-sticky-bar, .swiper-button-next, .swiper-button-prev, .swiper-pagination { display: none !important; }
    .cs-hero { padding: 2rem 1rem; background: #fff; color: #000; }
    .glass-card, .portfolio-card, .cs-blog-card { background: #fff; border: 1px solid #ccc; color: #000; }
}


/* ============================================
   Comparison Between Car Shade Types
   Prefix: cs-compare- (conflict-safe)
   ============================================ */

.cs-compare-section {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6rem) 1rem;
    background:
        radial-gradient(1200px 600px at 80% 0%, rgba(197,160,89,.08), transparent 60%),
        radial-gradient(900px 500px at 10% 100%, rgba(197,160,89,.05), transparent 60%),
        #050505;
    direction: rtl;
    overflow: hidden;
    isolation: isolate;
}

.cs-compare-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(197,160,89,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(197,160,89,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    pointer-events: none;
    z-index: -1;
}

.cs-compare-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* HEADER */
.cs-compare-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
}

.cs-compare-eyebrow {
    display: inline-block;
    padding: .45rem 1.1rem;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #C5A059;
    background: rgba(197,160,89,.08);
    border: 1px solid rgba(197,160,89,.25);
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.cs-compare-title {
    font-size: clamp(1.6rem, 3.6vw, 2.75rem);
    font-weight: 900;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -.01em;
}

.cs-compare-gold {
    background: linear-gradient(90deg, #C5A059 0%, #F3E2B3 50%, #C5A059 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cs-compare-subtitle {
    color: #cbd5e1;
    font-size: clamp(.95rem, 1.2vw, 1.1rem);
    line-height: 1.85;
    margin: 0;
}

/* TABLE WRAP (DESKTOP) */
.cs-compare-table-wrap {
    position: relative;
    border-radius: 1.5rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border: 1px solid rgba(197,160,89,.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    box-shadow:
        0 30px 80px -20px rgba(0,0,0,.7),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.cs-compare-table-wrap::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197,160,89,.6), transparent);
    z-index: 2;
}

.cs-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #e5e7eb;
    font-size: 14px;
}

.cs-compare-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* TABLE HEADER */
.cs-compare-th {
    padding: 1.4rem 1rem;
    text-align: center;
    font-weight: 700;
    color: #f3f4f6;
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid rgba(197,160,89,.15);
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.4;
}

.cs-compare-th-feature {
    text-align: right;
    color: #C5A059;
    font-weight: 800;
    background: rgba(197,160,89,.04);
    width: 18%;
    min-width: 160px;
}

.cs-compare-th-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    position: relative;
}

.cs-compare-icon {
    width: 22px;
    height: 22px;
    color: #C5A059;
    flex: 0 0 auto;
}

.cs-compare-icon-sm { width: 14px; height: 14px; }

.cs-compare-th-featured {
    background: linear-gradient(180deg, rgba(197,160,89,.18), rgba(197,160,89,.06));
    border-bottom: 2px solid #C5A059;
    position: relative;
}

.cs-compare-th-featured::after {
    content: "";
    position: absolute;
    inset: 0;
    border-left: 1px solid rgba(197,160,89,.3);
    border-right: 1px solid rgba(197,160,89,.3);
    pointer-events: none;
}

.cs-compare-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: linear-gradient(135deg, #C5A059, #8E6D2F);
    color: #000;
    font-size: 11px;
    font-weight: 900;
    padding: .3rem .7rem;
    border-radius: 999px;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(197,160,89,.35);
    white-space: nowrap;
}

/* TABLE BODY */
.cs-compare-table tbody tr { transition: background .3s ease; }
.cs-compare-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.015); }
.cs-compare-table tbody tr:hover { background: rgba(197,160,89,.04); }

.cs-compare-row-label {
    padding: 1.1rem 1rem;
    text-align: right;
    font-weight: 700;
    color: #f3f4f6;
    background: rgba(197,160,89,.03);
    border-bottom: 1px solid rgba(255,255,255,.04);
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 64px;
}

.cs-compare-cell {
    padding: 1.1rem .75rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.04);
    vertical-align: middle;
}

.cs-compare-cell-featured {
    background: rgba(197,160,89,.06);
    box-shadow: inset 1px 0 0 rgba(197,160,89,.25), inset -1px 0 0 rgba(197,160,89,.25);
    position: relative;
}

.cs-compare-pill {
    display: inline-block;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.cs-compare-pill-best {
    background: linear-gradient(135deg, rgba(197,160,89,.22), rgba(197,160,89,.1));
    color: #F3E2B3;
    border-color: rgba(197,160,89,.45);
}

.cs-compare-pill-good {
    background: rgba(197,160,89,.1);
    color: #C5A059;
    border-color: rgba(197,160,89,.25);
}

.cs-compare-pill-mid {
    background: rgba(255,255,255,.05);
    color: #cbd5e1;
    border-color: rgba(255,255,255,.1);
}

.cs-compare-pill-low {
    background: rgba(255,255,255,.03);
    color: #9ca3af;
    border-color: rgba(255,255,255,.08);
}

.cs-compare-text {
    display: inline-block;
    color: #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* CTA */
.cs-compare-cta { margin-top: clamp(2rem, 4vw, 3rem); }

.cs-compare-cta-inner {
    background: linear-gradient(135deg, rgba(197,160,89,.12), rgba(197,160,89,.03));
    border: 1px solid rgba(197,160,89,.25);
    border-radius: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

.cs-compare-cta-inner::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 200px;
    height: 100%;
    background: radial-gradient(ellipse at right, rgba(197,160,89,.18), transparent 70%);
    pointer-events: none;
}

.cs-compare-cta-text { flex: 1 1 320px; min-width: 0; }
.cs-compare-cta-title { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 900; color: #fff; margin: 0 0 .5rem; line-height: 1.4; }
.cs-compare-cta-desc { color: #cbd5e1; font-size: 14px; line-height: 1.7; margin: 0; }
.cs-compare-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.cs-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.4rem;
    border-radius: .8rem;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cs-compare-btn-primary {
    background: linear-gradient(135deg, #C5A059, #8E6D2F);
    color: #000 !important;
    box-shadow: 0 8px 24px rgba(197,160,89,.3);
}
.cs-compare-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(197,160,89,.45); }

.cs-compare-btn-ghost {
    background: rgba(255,255,255,.04);
    color: #fff;
    border-color: rgba(255,255,255,.12);
}
.cs-compare-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #C5A059; }

/* MOBILE: switch to card layout */
.cs-compare-mobile { display: none; }

@media (max-width: 768px) {

    .cs-compare-table-wrap { display: none; }

    .cs-compare-mobile {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .cs-compare-mcard {
        position: relative;
        padding: 1.5rem 1.25rem 1.25rem;
        background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
        border: 1px solid rgba(197,160,89,.18);
        border-radius: 1.25rem;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow:
            0 20px 50px -20px rgba(0,0,0,.6),
            inset 0 1px 0 rgba(255,255,255,.04);
        overflow: hidden;
    }

    .cs-compare-mcard::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(197,160,89,.5), transparent);
    }

    .cs-compare-mcard-featured {
        background: linear-gradient(180deg, rgba(197,160,89,.1), rgba(197,160,89,.02));
        border-color: rgba(197,160,89,.45);
        box-shadow:
            0 25px 60px -20px rgba(197,160,89,.25),
            inset 0 1px 0 rgba(197,160,89,.15);
    }
    .cs-compare-mcard-featured::before {
        background: linear-gradient(90deg, transparent, #C5A059, transparent);
        height: 2px;
    }

    .cs-compare-mcard-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        background: linear-gradient(135deg, #C5A059, #8E6D2F);
        color: #000;
        font-size: 10.5px;
        font-weight: 900;
        padding: .3rem .65rem;
        border-radius: 999px;
        letter-spacing: .02em;
        box-shadow: 0 4px 12px rgba(197,160,89,.4);
        z-index: 2;
    }

    .cs-compare-mcard-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba(197,160,89,.18);
    }

    .cs-compare-mcard-featured .cs-compare-mcard-head { border-bottom-color: rgba(197,160,89,.35); }

    .cs-compare-mcard-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        background: linear-gradient(135deg, rgba(197,160,89,.18), rgba(197,160,89,.04));
        border: 1px solid rgba(197,160,89,.3);
        border-radius: 14px;
        color: #C5A059;
    }

    .cs-compare-mcard-featured .cs-compare-mcard-icon {
        background: linear-gradient(135deg, rgba(197,160,89,.3), rgba(197,160,89,.1));
        border-color: #C5A059;
    }

    .cs-compare-mcard-title-wrap { flex: 1 1 auto; min-width: 0; }

    .cs-compare-mcard-title {
        font-size: 1.25rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 .2rem;
        line-height: 1.3;
    }

    .cs-compare-mcard-featured .cs-compare-mcard-title {
        background: linear-gradient(90deg, #fff 0%, #F3E2B3 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .cs-compare-mcard-sub {
        display: block;
        font-size: 12px;
        color: #C5A059;
        font-weight: 700;
        line-height: 1.4;
    }

    .cs-compare-mcard-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .15rem;
    }

    .cs-compare-mcard-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .7rem 0;
        border-bottom: 1px solid rgba(255,255,255,.04);
    }

    .cs-compare-mcard-list li:last-child { border-bottom: 0; padding-bottom: 0; }

    .cs-compare-mcard-label {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: 13px;
        font-weight: 700;
        color: #cbd5e1;
        flex: 0 0 auto;
    }

    .cs-compare-mcard-value { text-align: left; flex: 0 1 auto; max-width: 55%; }

    /* 414px */
    @media (max-width: 414px) {
        .cs-compare-mcard { padding: 1.25rem 1rem; }
        .cs-compare-mcard-title { font-size: 1.1rem; }
        .cs-compare-mcard-icon { width: 46px; height: 46px; }
        .cs-compare-mcard-icon .cs-compare-icon { width: 20px; height: 20px; }
        .cs-compare-mcard-list li { padding: .6rem 0; }
        .cs-compare-mcard-label { font-size: 12.5px; }
        .cs-compare-mcard-sub { font-size: 11.5px; }
    }

    /* 375px */
    @media (max-width: 375px) {
        .cs-compare-mcard { padding: 1.1rem .9rem; border-radius: 1.1rem; }
        .cs-compare-mcard-head { gap: .75rem; padding-bottom: .85rem; margin-bottom: .85rem; }
        .cs-compare-mcard-icon { width: 42px; height: 42px; border-radius: 12px; }
        .cs-compare-mcard-icon .cs-compare-icon { width: 18px; height: 18px; }
        .cs-compare-mcard-title { font-size: 1rem; }
        .cs-compare-mcard-label { font-size: 12px; gap: .35rem; }
        .cs-compare-mcard-label .cs-compare-icon { width: 14px; height: 14px; }
    }

    /* 360px */
    @media (max-width: 360px) {
        .cs-compare-mcard-list li { gap: .65rem; }
        .cs-compare-mcard-value { max-width: 50%; }
    }

    /* 320px */
    @media (max-width: 320px) {
        .cs-compare-mcard { padding: 1rem .75rem; }
        .cs-compare-mcard-title { font-size: .95rem; }
        .cs-compare-mcard-sub { font-size: 11px; }
        .cs-compare-mcard-label { font-size: 11.5px; }
    }

    /* CTA refinements for mobile */
    .cs-compare-cta-inner { padding: 1.25rem; }
    .cs-compare-cta-actions { width: 100%; }
    .cs-compare-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-compare-table tbody tr,
    .cs-compare-btn,
    .cs-compare-mcard { transition: none !important; }
}