:root{
  --blue:#523493; --blue-dk:#3b2470; --sky:#a78bfa;
  --ink:#1a1035; --ink2:#2d2150; --slate:#5b5478; --muted:#9490a8;
  --light:#f7f5fd; --border:#e8e0f5; --white:#fff;
  --p:#523493; --p-xs:#f0ebfa; --p-sm:#e0d5f5;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* ══ HERO ══ */
.hero{
  background: var(--color-grad);
  padding:30px 60px 0;
  position:relative;
  overflow:hidden
}
.hero::before{
  content:'';position:absolute;top:-120px;right:-80px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,181,253,.18) 0%,transparent 65%);
  pointer-events:none
}
.hero::after{
  content:'';position:absolute;bottom:0;left:0;width:100%;height:160px;
  background:radial-gradient(ellipse 80% 60% at 50% 120%,rgba(196,181,253,.12) 0%,transparent 70%);
  pointer-events:none
}
.g{position:absolute;pointer-events:none}
.g1{top:22px;left:5%;width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-radius:4px;transform:rotate(20deg)}
.g2{top:70px;left:18%;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.g3{top:38px;right:34%;width:14px;height:14px;border:2px solid rgba(255,255,255,.14);transform:rotate(45deg)}
.g4{top:130px;left:4%;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}
.g5{top:50px;right:13%;width:12px;height:12px;border:2px solid rgba(255,255,255,.16);transform:rotate(15deg)}
.g6{bottom:110px;right:6%;width:15px;height:15px;border:2px solid rgba(255,255,255,.12);border-radius:4px;transform:rotate(30deg)}
.g7{top:100px;right:27%;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}
.g8{bottom:140px;left:28%;width:10px;height:10px;border:2px solid rgba(255,255,255,.1);transform:rotate(25deg)}

.hero-inner{max-width: 80vw;margin:0 auto;text-align:center;position:relative;z-index:1;padding-bottom:20px}
.h-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:100px;padding:5px 18px 5px 10px;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-bottom:22px
}
.h-badge-dot{width:6px;height:6px;border-radius:50%;background:#c4b5fd;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(1.7)}}
.hero h1{
  line-height: 2em;
  font-size:30px;font-weight:800;
  color:#fff;margin-bottom:16px;
}
.hero h1 em{font-style:normal;color:#c4b5fd}
.hero-sub{font-size:16px;color:rgba(255,255,255,.55);line-height:1.85;max-width:460px;margin:0 auto 36px}

.hero-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hp{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:8px 18px;color: white;}
.hp svg{width:13px;height:13px;fill:none;stroke:#c4b5fd;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hp span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82)}
.hp strong{font-family:'Space Grotesk',sans-serif;color:#fff;font-weight:800}
.hp a:hover{color: white;}
.hero-wave{line-height:0;margin-top:-1px}
.hero-wave svg{display:block;width:100%}


/* ── SECTION WRAPPER ── */
.page{max-width:80vw;margin:0 auto;padding:0 0px}

/* ── CARD TYPE SECTIONS ── */
.card-section{
  border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start
}
#universal, #category, #brand{
  padding:52px 0;
}
.card-section:last-of-type{border-bottom:none}
.card-section.flip{direction:rtl}
.card-section.flip > *{direction:ltr}

/* Visual side — natural flow, no overflow */
.cs-visual{display:flex;flex-direction:column;gap:10px}
.cs-card-wrap{width:100%}

/* Stylised card mockup */
.card-mockup{
  width:100%;
  aspect-ratio:1.586;
  border-radius:18px;
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  /* box-shadow:0 16px 40px rgba(0,0,0,.16),0 0 0 1.5px rgba(255,255,255,.08); */
  transition:transform .35s
}
.card-mockup:hover{transform:translateY(-3px) rotate(-.6deg)}
.cm-shine{position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.13) 0%,transparent 45%,rgba(255,255,255,.04) 80%,transparent 100%);pointer-events:none}
.cm-pattern{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 16px);pointer-events:none}
.cm-logo{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:800;color:rgba(255,255,255,.95);position:relative;z-index:1;letter-spacing:-.3px}
.cm-logo sub{font-size:8px;opacity:.6}
.cm-label{font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);position:relative;z-index:1;margin-top:2px}
.cm-chip{width:30px;height:20px;background:linear-gradient(135deg,#f5e642,#c9950c);border-radius:4px;position:relative;z-index:1;margin-top:14px}
.cm-bottom{display:flex;align-items:flex-end;justify-content:space-between;position:relative;z-index:1}
.cm-num{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:3px}
.cm-scope{text-align:right}
.cm-scope-num{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;color:#fff;line-height:1}
.cm-scope-lbl{font-size:8px;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-top:2px}

/* badge row — natural flow BELOW card, no absolute positioning */
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top: 11px;}
.float-badge{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:10px;padding:7px 11px;box-shadow:0 2px 10px rgba(0,0,0,.07);
  display:flex;align-items:center;gap:7px;flex:1;min-width:120px
}
.float-badge .fb-icon{width:24px;height:24px;display:grid;place-items:center;flex-shrink:0}
.float-badge .fb-text{font-size: 15px;font-weight:600;color:var(--ink2);line-height:1.3;margin-bottom: 0;}
.float-badge .fb-sub{font-size: 12.5px;color: gray;font-weight: 500;}
.fb-1,.fb-2,.fb-3{}

/* Text side */
.cs-text{}
.cs-type-label{    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    padding: 8px 40px 8px 40px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    background: var(--color-bg) !important;}
.cs-type-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cs-heading{font-family:'Space Grotesk',sans-serif;/* font-size:clamp(24px,2.6vw,36px); */font-weight:800;color:var(--ink);letter-spacing:-1px;line-height:1.1;margin-bottom:10px}
.cs-heading span{display:block}
.cs-intro{font-size: 15px;color:var(--slate);line-height:1.75;margin-bottom:20px}

/* Benefit grid — 2×2 horizontal */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ben-row{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;background: var(--color-bg);border: 1.5px solid var(--color-bg-border);transition:border-color .2s}
.ben-row:hover{border-color:var(--border)}
.ben-icon-wrap{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;margin-bottom:2px;background: var(--color-bg-border) !important;}
.ben-icon-wrap svg{width:16px;height:16px;stroke-width:1.75;fill:none;stroke:currentColor}
.ben-content{}
.ben-title{font-size: 16px;font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.3}
.ben-desc{font-size: 15px;color:var(--slate);line-height:1.55}

/* CTA link */
.cs-cta{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size: 15px;font-weight:700;text-decoration:none;color:var(--blue);transition:gap .2s}
.cs-cta:hover{gap:12px}
.cs-cta-arr{display:inline-block;transition:transform .2s}
.cs-cta:hover .cs-cta-arr{transform:translateX(4px)}

/* ── COMPARISON TABLE ── */
.compare-section{padding:56px 0}
.compare-label{font-size: 12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.compare-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.8vw,34px);font-weight:800;color:var(--ink);letter-spacing:-1px;margin-bottom:6px}
.compare-sub{font-size: 15px;color:var(--slate);line-height:1.7;margin-bottom:32px;max-width:560px}

.compare-table{width:100%;border-collapse:collapse;border-radius:20px;overflow:hidden;border:1.5px solid var(--border)}
.compare-table th{padding:18px 20px;font-size:12px;font-weight:700;letter-spacing:.5px;text-align:left;background: var(--color-bg);}
.compare-table th:first-child{color: var(--color-bg);font-weight:600;font-size:11px}
.compare-table th.col-u{background:linear-gradient(135deg,#1a1035,#3b2470);color:#fff}
.compare-table th.col-c{background:linear-gradient(135deg,#064e3b,#059669);color:#fff}
.compare-table th.col-b{background:linear-gradient(135deg,#431407,#c2410c);color:#fff}
.th-inner{display:flex;align-items:center;gap:8px}
.th-icon{font-size:16px}
.th-name{font-family:'Space Grotesk',sans-serif;font-size: 16px;font-weight:800;margin-bottom: 0;color: white;}
.th-sub{font-size: 12px;opacity:.7;font-weight:400;letter-spacing:.5px;display:block;margin-top:1px}

.compare-table td{padding:14px 20px;font-size: 15px;color:var(--ink2);border-top:1px solid var(--border);vertical-align:middle;text-align: center;}
.compare-table tr:hover td{background:rgba(82,52,147,.02)}
.compare-table td:first-child{font-weight:600;color:var(--slate);font-size: 14px;text-transform:uppercase;letter-spacing:.5px;background: var(--color-bg);}
.check{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;font-size:12px}
.chk-y{background:rgba(5,150,105,.1);color:#059669}
.chk-p{background:rgba(82,52,147,.1);color:#523493}
.chk-n{background:rgba(239,68,68,.07);color:#ef4444}
.chk-w{background:rgba(245,158,11,.08);color:#d97706}
td.center{text-align:center}

/* ── FAQ SECTION ── */
.faq-section{background: var(--color-bg);padding:80px 52px;border-top:1px solid var(--border)}
.faq-inner{max-width: 80vw;margin:0 auto}
.faq-label{font-size: 12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.faq-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.8vw,34px);font-weight:800;color:var(--ink);letter-spacing:-.8px;margin-bottom:40px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq-item{background:var(--white);border: 1.5px solid var(--color-bg-border);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .2s;height: fit-content;}
.faq-item:hover{border-color:rgba(82,52,147,.3)}
.faq-item.open{border-color:var(--blue)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;gap:12px}
.faq-q-text{font-size: 15px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom: 0;}
.faq-icon{width:28px;height:28px;border-radius:8px;background: var(--color-bg);border: 1px solid var(--color-bg-border);display:grid;place-items:center;font-size:12px;color:var(--slate);flex-shrink:0;transition:all .25s}
.faq-item.open .faq-icon{background: var(--color-grad);border-color:var(--blue);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s;opacity:0}
.faq-item.open .faq-a{max-height:200px;opacity:1}
.faq-a-inner{padding: 20px 18px;font-size: 15px;color:var(--slate);line-height:1.75;border-top:1px solid var(--border)}

/* ══════════════════════════════════
   RESPONSIVE — LAPTOP (≤ 1080px)
══════════════════════════════════ */
@media(max-width:1080px){
  .hero{padding:48px 36px 44px}
  .page{padding:0 36px}
  .card-section{gap:40px}
  .faq-section{padding:64px 36px}
}

/* ══════════════════════════════════
   RESPONSIVE — TABLET (≤ 820px)
══════════════════════════════════ */
@media(max-width:820px){
  /* Hero */
  .hero{padding:40px 28px 36px}
  .hero h1{letter-spacing:-1px}
  .hero-desc{font-size:14.5px}
  .anchor-pills{gap:8px}
  .ap{font-size:12px;padding:7px 14px}

  /* Page wrapper */
  .page{padding:0 28px}

  /* Card sections — stack vertically, remove RTL flip */
  .card-section{
    grid-template-columns:1fr;
    gap:32px;
    padding:44px 0
  }
  /* For flipped sections, reset direction so visual always comes first */
  .card-section.flip{direction:ltr}
  /* On tablet, put visual first, text second for all sections */
  .card-section.flip .cs-visual{order:-1}
  .card-section.flip .cs-text{order:1}

  /* Benefits 2×2 grid stays intact */
  .benefits{grid-template-columns:1fr 1fr;gap:12px}

  /* Comparison table — allow horizontal scroll */
  .compare-section{padding:44px 0}
  .compare-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:20px;
    border:1.5px solid var(--border)
  }
  .compare-table{
    border:none;
    border-radius:0;
    min-width:600px
  }

  /* FAQ */
  .faq-section{padding:56px 28px}
  .faq-grid{grid-template-columns:1fr;gap:12px}
}

/* ══════════════════════════════════
   RESPONSIVE — MOBILE (≤ 540px)
══════════════════════════════════ */
@media(max-width:540px){
  /* Hero */
  .hero{padding:32px 16px 28px}
  .h-tag{font-size:10px;letter-spacing:1px;padding:4px 12px}
  .hero h1{letter-spacing:-.6px;margin-bottom:12px}
  .hero-desc{font-size:14px;margin-bottom:28px}
  .anchor-pills{gap:7px}
  .ap{font-size:11.5px;padding:6px 12px;gap:6px}

  /* Page wrapper */
  .page{padding:0 16px}

  /* Card sections */
  .card-section{gap:24px;padding:36px 0}

  /* Card mockup — slightly smaller proportions on small screens */
  .cm-scope-num{font-size:16px}
  .cm-logo{font-size:13px}

  /* Badge row — stack into single column on very small screens */
  .badge-row{flex-direction:column;gap:8px}
  .float-badge{flex:unset;min-width:unset;width:100%}

  /* Benefits grid — single column on mobile */
  .benefits{grid-template-columns:1fr;gap:10px}
  .ben-row{padding:12px}

  /* Headings */
  .cs-heading{letter-spacing:-.6px}
  .cs-intro{/* font-size:13.5px; */}

  /* Comparison table */
  .compare-section{padding:36px 0}
  .compare-table{min-width:520px;font-size:12px}
  .compare-table th{padding:14px 14px}
  .compare-table td{padding:12px 14px;font-size:14px !important; color: black !important;}
  .th-name{font-size:13px}
  .compare-title{letter-spacing:-.6px}
  .compare-sub{font-size:13.5px}

  /* FAQ */
  .faq-section{padding:44px 16px}
  .faq-title{letter-spacing:-.5px;margin-bottom:28px}
  .faq-q{padding:15px 16px}
  .faq-q-text{/* font-size:13.5px; */}
  .faq-a-inner{padding:0 16px 15px;}
}

@media(max-width: 576px){
  .main,.faq-section {
        padding:70px 0;
    }
  .page,.faq-inner{
    padding: 0;
    max-width: 90vw;
  }
}