/* ============================================================
   VAREQA — shared site design system
   Redesign v3 — "Bright, product-forward" direction (2026-07-27).
   Self-hosted fonts only (CSP blocks remote font/CDN hosts).
   Linked by every page: <link rel="stylesheet" href="/vareqa-site.css">
   ============================================================ */

/* ---------- @font-face (self-hosted: Manrope + Space Grotesk) ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/manrope-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/manrope-greek.woff2') format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/manrope-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/space-grotesk/space-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/space-grotesk/space-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/space-grotesk/space-grotesk-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;}

/* ---------- Design tokens ---------- */
:root{
  /* Surfaces */
  --dk-bg:#171139;         /* dark violet — dark sections */
  --footer-bg:#14102f;     /* footer, deepest violet */
  --nav-bg:rgba(251,250,255,0.86); /* nav bar, frosted light */
  --lt-bg:#fbfaff;         /* light section bg */
  --lt-bg2:#f4f1fe;        /* alt light bg (violet-tinted) */
  --grad-light:linear-gradient(180deg,#f4f1fe,#eff9dc); /* violet → pale lime, hero & feature sections */
  --card:#FFFFFF;
  --dk-card:#231c54;       /* card on dark */
  --dk-card2:rgba(255,255,255,0.05);

  /* Accent */
  --blue:#5b47e0;          /* Vareqa Violet — primary accent */
  --blue-bright:#4131b8;   /* pressed/hover state (darker) */
  --blue-dim:#7c68ea;      /* lighter violet, secondary use */
  --azure:#c9f24a;         /* Lime — emphasis on dark surfaces */
  --lime-ink:#5f7a0e;      /* readable ink-on-lime for pills/text */

  /* Ink (dark text on light) */
  --ink:#191733;
  --ink-70:rgba(25,23,51,0.72);
  --ink-65:rgba(25,23,51,0.65);
  --ink-50:rgba(25,23,51,0.50);
  --ink-30:rgba(25,23,51,0.32);
  --line:rgba(25,23,51,0.10);
  --line-2:rgba(25,23,51,0.16);

  /* Paper (light text on dark) */
  --paper:#f1eefb;
  --paper-70:rgba(241,238,251,0.72);
  --paper-50:rgba(241,238,251,0.52);
  --paper-35:rgba(241,238,251,0.35);
  --paper-30:rgba(241,238,251,0.30);
  --dk-line:rgba(241,238,251,0.10);
  --dk-line-2:rgba(241,238,251,0.16);

  /* Status */
  --amber:#B45309; --red:#d0574c; --teal:#0C7C8C;

  /* Radii */
  --r:11px; --r-lg:20px; --r-xl:26px;

  /* Shadows (violet-tinted, matching the new palette) */
  --shadow-card:0 20px 44px -28px rgba(46,33,112,0.45);
  --shadow-lg:0 34px 70px -32px rgba(46,33,112,0.5);
  --shadow-dark:0 30px 60px -30px rgba(10,7,30,0.6);

  /* Layout */
  --wrap:1160px;
  --nav-h:74px;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--ink);background:var(--lt-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;}
ul{list-style:none;padding:0;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;}
::selection{background:var(--azure);color:var(--ink);}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* ---------- Layout primitives ---------- */
.sec{padding:96px 24px;position:relative;overflow:hidden;}
.sec--dark{background:var(--dk-bg);color:var(--paper);}
.sec--dark::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 18% 12%,rgba(91,71,224,0.30),transparent 46%),radial-gradient(circle at 85% 92%,rgba(201,242,74,0.08),transparent 40%);pointer-events:none;}
.sec--light{background:var(--lt-bg);color:var(--ink);}
.sec--light2{background:var(--lt-bg2);color:var(--ink);}
.wrap{max-width:var(--wrap);margin:0 auto;position:relative;}
.wrap--center{text-align:center;display:flex;flex-direction:column;align-items:center;}

/* ---------- Typography ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:0;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:0;color:var(--blue);line-height:1.5;margin-bottom:18px;background:rgba(91,71,224,0.12);padding:6px 14px;border-radius:999px;}
.eyebrow::after{display:none;}
.sec--dark .eyebrow{color:var(--ink);background:var(--azure);}
.eyebrow--center{justify-content:center;}
.eyebrow--center::before{display:none;}

.sec-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(30px,4.4vw,44px);line-height:1.1;letter-spacing:-0.03em;color:var(--ink);}
.sec--dark .sec-title{color:#fff;}
.em{font-style:normal;color:inherit;}

.lead{font-family:'Manrope',sans-serif;font-weight:400;font-size:17px;line-height:1.65;color:var(--ink-65);}
.sec--dark .lead,.hero--dark .lead{color:var(--paper-70);}

.sub{margin-top:16px;max-width:680px;font-size:17px;line-height:1.65;color:var(--ink-65);}
.sec--dark .sub{color:var(--paper-70);}

/* ---------- Hero ---------- */
.hero{padding:calc(var(--nav-h) + 70px) 24px 96px;position:relative;overflow:hidden;text-align:center;}
.hero--dark{background:var(--dk-bg);color:var(--paper);}
.hero--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(115% 90% at 84% -14%,rgba(91,71,224,0.35) 0%,transparent 52%),radial-gradient(80% 80% at -8% 118%,rgba(201,242,74,0.10) 0%,transparent 46%);pointer-events:none;}
.hero--dark::after{display:none;}
.hero--light{background:var(--lt-bg);color:var(--ink);}
.hero--light::before{content:"";position:absolute;inset:0;background:radial-gradient(115% 90% at 84% -14%,rgba(91,71,224,0.16) 0%,transparent 52%),radial-gradient(80% 80% at -8% 118%,rgba(201,242,74,0.16) 0%,transparent 46%);pointer-events:none;}
.hero--light .lead{color:var(--ink-65);}
.hero .wrap{display:flex;flex-direction:column;align-items:center;}
.hero-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(32px,5vw,46px);line-height:1.16;letter-spacing:-0.03em;color:var(--paper);margin-bottom:18px;}
.hero--light .hero-title{color:var(--ink);}
.hero-rule{width:48px;height:2px;margin:6px auto 26px;background:linear-gradient(90deg,transparent,var(--blue-dim),transparent);}
.hero .lead{max-width:720px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;letter-spacing:0;line-height:1;padding:16px 28px;border-radius:13px;border:1px solid transparent;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s;white-space:nowrap;}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-bright);border-color:var(--blue-bright);}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--ink);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.sec--dark .btn-ghost,.hero--dark .btn-ghost{background:transparent;border-color:rgba(255,255,255,0.30);color:rgba(255,255,255,0.9);}
.sec--dark .btn-ghost:hover,.hero--dark .btn-ghost:hover{border-color:#fff;color:#fff;}
.btn--sm{font-size:14px;font-weight:600;padding:11px 20px;border-radius:11px;}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:20px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid-top{margin-top:36px;}

.card{background:var(--card);border:1px solid rgba(25,23,51,0.06);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--shadow-card);}
.sec--dark .card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);box-shadow:none;}
.card-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;letter-spacing:-0.015em;line-height:1.25;color:var(--ink);margin-top:10px;}
.sec--dark .card-title{color:#fff;}
.card p{font-size:14.5px;line-height:1.58;color:var(--ink-65);margin-top:10px;}
.sec--dark .card p{color:var(--paper-70);}

.tag{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;letter-spacing:0.02em;text-transform:none;color:var(--blue);line-height:1.5;}
.tag--pill{padding:5px 11px;border-radius:999px;background:rgba(91,71,224,0.10);}
.sec--dark .tag{color:var(--azure);}
.sec--dark .tag--pill{background:rgba(201,242,74,0.12);}

/* ---------- Numbered steps ---------- */
.steps{display:grid;gap:18px;margin-top:36px;}
.step{display:flex;gap:20px;align-items:flex-start;}
.step-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px;line-height:1;color:var(--blue);opacity:.5;flex-shrink:0;min-width:54px;}
.sec--dark .step-num{color:var(--azure);}
.step-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;letter-spacing:-0.01em;color:var(--ink);}
.sec--dark .step-title{color:#fff;}
.step p{font-size:14.5px;line-height:1.58;color:var(--ink-65);margin-top:6px;}
.sec--dark .step p{color:var(--paper-70);}

/* ---------- Stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);}
.sec--dark .stats{background:transparent;border-color:rgba(255,255,255,0.12);}
.stat{padding:26px 24px;border-right:1px solid var(--line);}
.sec--dark .stat{border-color:rgba(255,255,255,0.12);}
.stat:last-child{border-right:none;}
.stat-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:38px;line-height:1;letter-spacing:-0.03em;color:var(--ink);}
.sec--dark .stat-num{color:#fff;}
.stat-num .unit{color:var(--blue);}
.sec--dark .stat-num .unit{color:var(--azure);}
.stat-lbl{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--ink-50);}
.sec--dark .stat-lbl{color:var(--paper-50);}

/* ---------- Card grid (modules / feature rows) ---------- */
.acc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px;border-top:none;}
.sec--dark .acc{border-color:transparent;}
.acc-item{border-bottom:none;background:var(--card);border:1px solid rgba(25,23,51,0.06);border-radius:var(--r-lg);box-shadow:var(--shadow-card);transition:transform .22s,box-shadow .22s;overflow:hidden;}
.acc-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.sec--dark .acc-item{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);box-shadow:none;}
.acc-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;background:none;border:0;padding:22px 22px 4px;cursor:pointer;text-align:left;color:inherit;}
.acc-head .tag{flex-shrink:0;}
.acc-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;letter-spacing:-0.01em;color:var(--ink);flex:1 1 100%;order:3;margin-top:6px;}
.sec--dark .acc-title{color:#fff;}
.acc-icon{display:none;}
.acc-body{display:block;padding:8px 22px 22px;font-size:14.5px;line-height:1.58;color:var(--ink-65);}
.sec--dark .acc-body{color:var(--paper-70);}
.acc-item.open .acc-body{display:block;}
@media (max-width:860px){.acc{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.acc{grid-template-columns:1fr;}}

/* ---------- Dark accent card (mirrors the mockup's rounded gradient blocks —
   used for "stats" / "defensibility" style content sitting on an otherwise
   light page, instead of a full-bleed dark section) ---------- */
.accent-sec{background:var(--lt-bg);}
.accent-card{max-width:1200px;margin:0 auto;background:radial-gradient(110% 120% at 80% -10%,#3a2ba0 0%,transparent 55%),radial-gradient(70% 90% at 0% 120%,#2f6d4a 0%,transparent 52%),linear-gradient(160deg,#211a4e,#14102f);border-radius:26px;padding:56px 48px;position:relative;overflow:hidden;}
.accent-card .eyebrow{background:rgba(201,242,74,0.14);color:var(--azure);}
.accent-card .sec-title{color:#fff;}
.accent-card .lead,.accent-card .sub{color:var(--paper-70);}
.accent-card .card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);box-shadow:none;}
.accent-card .card-title{color:#fff;}
.accent-card .card p{color:var(--paper-70);}
.accent-card .tag{color:var(--azure);}
.accent-card .stats{background:transparent;border-color:rgba(255,255,255,0.12);}
.accent-card .stat{border-color:rgba(255,255,255,0.12);}
.accent-card .stat-num{color:#fff;}
.accent-card .stat-lbl{color:var(--paper-50);}
/* legacy aliases kept so any page-specific stylesheet can reference either name */
.defense-sec,.stats-sec{background:var(--lt-bg);}
.defense-card,.stats-card2{max-width:1200px;margin:0 auto;background:radial-gradient(110% 120% at 80% -10%,#3a2ba0 0%,transparent 55%),linear-gradient(160deg,#211a4e,#14102f);border-radius:26px;padding:56px 48px;position:relative;overflow:hidden;}
.defense-card .eyebrow,.stats-card2 .eyebrow{background:rgba(201,242,74,0.14);color:var(--azure);}
.defense-card .sec-title,.stats-card2 .sec-title{color:#fff;}
.defense-card .lead,.stats-card2 .lead{color:var(--paper-70);}
.defense-card .stats,.stats-card2 .stats{background:transparent;border-color:rgba(255,255,255,0.12);}
.defense-card .stat,.stats-card2 .stat{border-color:rgba(255,255,255,0.12);}
.defense-card .stat-num,.stats-card2 .stat-num{color:#fff;}
.defense-card .stat-lbl,.stats-card2 .stat-lbl{color:var(--paper-50);}

/* Contact — light section mirroring the hero's violet/lime glow */
.contact-sec{background:var(--grad-light);}

/* Generic violet/lime glow — same treatment as the hero, reusable on any
   light section that should carry the "bright, product-forward" gradient
   instead of a flat fill. */
.glow-sec{background:radial-gradient(115% 90% at 84% -14%,#e7e0fd 0%,transparent 52%),radial-gradient(80% 80% at -8% 118%,#eef8d0 0%,transparent 46%),#fbfaff;}

/* ---------- Pricing tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px;}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);}
.tier--featured{border-color:var(--blue);box-shadow:0 26px 54px -26px rgba(91,71,224,0.45);}
.tier-name{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--blue);}
.tier-price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:40px;letter-spacing:-0.03em;color:var(--ink);margin-top:14px;}
.tier-price small{font-size:14px;font-weight:400;color:var(--ink-50);letter-spacing:0;}
.tier-desc{font-size:13.5px;color:var(--ink-65);margin-top:8px;line-height:1.55;}
.tier-list{margin-top:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.tier-list li{position:relative;padding-left:24px;font-size:14px;line-height:1.5;color:var(--ink-70);}
.tier-list li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);}
.tier .btn{margin-top:24px;width:100%;}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(20px,4vw,52px);background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(25,23,51,0.06);}
body{padding-top:var(--nav-h);}

.nav-logo{display:flex;align-items:center;gap:10px;}
/* Single-SVG brand lockup (mark + wordmark + tagline). Two colour variants:
   logo-lockup.svg (dark ink) on the light nav, logo-lockup-light.svg on the
   dark drawer and footer. */
.nav-logo-lockup{height:34px;width:auto;flex-shrink:0;display:block;}

.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;line-height:1.65;color:var(--ink-65);padding:9px 0 4px;transition:color .18s;border-bottom:2px solid transparent;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);border-bottom-color:var(--blue);}

.nav-cta{display:flex;align-items:center;gap:10px;}

/* Language selector (light nav) */
.lang-selector{position:relative;display:flex;align-items:center;}
.lang-btn{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line-2);border-radius:9px;padding:7px 12px;cursor:pointer;transition:all .2s;font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);}
.lang-btn:hover{border-color:var(--blue);}
.lang-btn svg{flex-shrink:0;transition:transform .2s;}
.lang-selector.open .lang-btn svg{transform:rotate(180deg);}
.lang-btn .lang-globe{color:var(--blue);}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px;min-width:230px;display:none;z-index:600;}
.lang-selector.open .lang-dropdown{display:block;}
.lang-dropdown-label{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-30);padding:4px 8px 8px;border-bottom:1px solid rgba(25,23,51,0.08);margin-bottom:6px;}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.lang-item{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer;transition:background .15s;}
.lang-item:hover{background:rgba(91,71,224,0.07);}
.lang-item.active{background:rgba(91,71,224,0.10);}
.lang-item-code{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;color:var(--blue);width:24px;flex-shrink:0;}
.lang-item-name{font-size:12px;color:var(--ink-70);}
.lang-item.active .lang-item-name{color:var(--ink);font-weight:600;}
.lang-output-note{font-size:11px;color:var(--ink-50);padding:8px 9px 4px;border-top:1px solid rgba(25,23,51,0.08);margin-top:6px;line-height:1.5;}
.lang-output-note strong{color:var(--blue);}
.ar-font{font-family:'Manrope',sans-serif;}

/* Mobile burger + drawer */
.nav-burger{display:none;width:36px;height:36px;background:transparent;border:1px solid var(--line-2);border-radius:9px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;transition:border-color .2s;}
.nav-burger:hover{border-color:var(--blue);}
.nav-burger span{display:block;width:16px;height:2px;background:var(--ink-65);border-radius:1px;}
body.nav-locked{overflow:hidden;}
.nav-drawer-overlay{position:fixed;inset:0;background:rgba(23,17,57,0.45);backdrop-filter:blur(4px);z-index:600;opacity:0;pointer-events:none;transition:opacity .25s;}
.nav-drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);background:var(--dk-bg);border-left:1px solid rgba(255,255,255,0.1);z-index:700;display:flex;flex-direction:column;padding:20px 24px 28px;transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;}
.nav-drawer.open{transform:translateX(0);}
.nav-drawer-overlay.open{opacity:1;pointer-events:auto;}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.1);}
.nav-drawer-brand{display:flex;align-items:center;gap:12px;}
.nav-drawer-close{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--paper);cursor:pointer;transition:background .2s;}
.nav-drawer-close:hover{background:rgba(255,255,255,0.12);}
.nav-drawer-links{display:flex;flex-direction:column;gap:2px;}
.nav-drawer-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 4px;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--paper);border-bottom:1px solid rgba(255,255,255,0.06);transition:color .2s;}
.nav-drawer-links a:hover{color:var(--azure);}
.nav-drawer-links a svg{color:var(--azure);flex-shrink:0;}
.nav-drawer-lang{margin-top:18px;}
.nav-drawer-lang-lbl{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:8px;}
.nav-drawer-lang-select{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:9px;padding:10px 12px;color:var(--paper);font-family:'Manrope',sans-serif;font-size:13px;cursor:pointer;}
.nav-drawer-lang-select:focus{outline:none;border-color:var(--azure);}
.nav-drawer-lang-select option{background:#171139;color:#f1eefb;}
.nav-drawer-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:24px;}
.nav-drawer-cta .btn{justify-content:center;width:100%;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--footer-bg);color:var(--paper);padding:56px clamp(24px,8vw,120px) 36px;}
.footer-grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr auto;gap:34px 24px;align-items:start;}
.footer-brand{display:flex;flex-direction:column;gap:14px;}
.footer-logo .nav-logo-lockup{height:40px;}
.footer-descriptor{font-size:12px;line-height:1.6;color:var(--paper-50);max-width:280px;}
.footer-links{display:flex;flex-wrap:wrap;gap:18px 26px;}
.footer-links a{font-size:14px;font-weight:500;color:var(--paper-70);transition:color .18s;}
.footer-links a:hover{color:var(--azure);}
.footer-cta{justify-self:end;}
.footer-legal{grid-column:1 / -1;font-size:12px;line-height:1.6;color:var(--paper-50);border-top:1px solid rgba(255,255,255,0.1);padding-top:24px;}
.footer-legal p{margin:0;}

/* ============================================================
   CONTACT FORM (preserved component, restyled to new system)
   ============================================================ */
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:40px;margin-top:36px;text-align:left;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);}
.contact-card::before{display:none;}
.sec--dark .contact-card{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);}
.contact-form-group{margin-bottom:16px;}
.contact-label{font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-65);display:block;margin-bottom:7px;}
.sec--dark .contact-label{color:var(--paper-70);}
/* An explicit line-height is load-bearing: without it a <select> resolves a
   different intrinsic line box than an <input>, so the two render 2px apart
   where they share a .contact-row. */
.contact-input{width:100%;background:var(--lt-bg);border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);font-family:'Manrope',sans-serif;font-size:14px;line-height:1.35;padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s;}
.sec--dark .contact-input{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.14);color:var(--paper);}
.contact-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(91,71,224,0.18);}
.contact-input::placeholder{color:var(--ink-30);}
.sec--dark .contact-input::placeholder{color:var(--paper-35);}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.contact-input option{background:#fff;color:#191733;}

/* Selects: drop the native control so the chevron matches the rest of the UI
   and sits clear of the border instead of jammed against it. */
select.contact-input{
  -webkit-appearance:none;appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23191733' stroke-opacity='0.5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px 12px;
  cursor:pointer;
}
.sec--dark select.contact-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f1eefb' stroke-opacity='0.7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* The unselected placeholder option reads as placeholder text, not a value. */
select.contact-input:has(option[value=""]:checked){color:var(--ink-30);}
.sec--dark select.contact-input:has(option[value=""]:checked){color:var(--paper-35);}
.contact-status{margin-top:14px;font-size:13px;line-height:1.6;text-align:center;color:var(--ink-65);min-height:20px;}
.sec--dark .contact-status{color:var(--paper-70);}
.contact-status.error{color:#c0392b;}
.contact-status.success{color:var(--lime-ink);}
.sec--dark .contact-status.success{color:var(--azure);}

/* ============================================================
   SCROLL / REVEAL
   ============================================================ */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--blue);z-index:1000;display:none;transition:width .08s linear;will-change:width;}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* ============================================================
   VAREQA DEMO POPUP (preserved, restyled)
   ============================================================ */
.demo-overlay{position:fixed;inset:0;z-index:900;background:rgba(15,11,36,0.78);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s;}
.demo-overlay.open{opacity:1;pointer-events:all;}
.demo-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);max-width:680px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-lg);}
.demo-hd{padding:24px 28px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.demo-eyebrow{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--blue);margin-bottom:5px;}
.demo-title{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:600;color:var(--ink);line-height:1.25;}
.demo-sub{font-size:12.5px;color:var(--ink-50);margin-top:3px;line-height:1.5;}
.demo-close{background:var(--lt-bg2);border:1px solid var(--line);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-50);font-size:15px;flex-shrink:0;transition:all .2s;}
.demo-close:hover{background:var(--line-2);color:var(--ink);}
.demo-body{padding:20px 28px 28px;}
.demo-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.demo-role-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:var(--lt-bg);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:all .18s;text-align:left;}
.demo-role-btn:hover{border-color:rgba(91,71,224,0.4);background:rgba(91,71,224,0.06);}
.demo-role-btn.active{border-color:var(--blue);background:rgba(91,71,224,0.10);}
.demo-role-name{font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;color:var(--ink);}
.demo-role-sector{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-30);}
.demo-role-arrow{color:var(--ink-30);flex-shrink:0;transition:color .18s;}
.demo-role-btn.active .demo-role-arrow{color:var(--blue);}
.demo-result{display:none;margin-top:4px;}
.demo-result.show{display:block;}
.demo-result-header{background:rgba(91,71,224,0.08);border:1px solid rgba(91,71,224,0.18);border-radius:var(--r);padding:18px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;}
.demo-score-val{font-family:'Space Grotesk',sans-serif;font-size:44px;font-weight:700;color:var(--blue);line-height:1;}
.demo-score-lbl{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-30);margin-top:4px;}
.demo-grade-pill{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--blue);background:rgba(91,71,224,0.12);border:1px solid rgba(91,71,224,0.3);padding:5px 14px;border-radius:999px;display:inline-block;}
.demo-grade-title{font-size:12px;color:var(--ink-50);margin-top:5px;font-style:normal;}
.demo-rationale{font-size:13.5px;color:var(--ink-70);line-height:1.72;margin-bottom:16px;padding:16px 18px;background:var(--lt-bg);border-radius:var(--r);border:1px solid var(--line);}
.demo-comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.demo-comp-card{background:var(--lt-bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;}
.demo-comp-label{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.demo-comp-item{font-size:12px;color:var(--ink-65);line-height:1.5;padding:4px 0;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:7px;}
.demo-comp-item:last-child{border-bottom:none;}
.demo-comp-dot{width:4px;height:4px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:5px;}
.demo-cta-bar{background:var(--lt-bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.demo-cta-txt{font-size:12.5px;color:var(--ink-50);line-height:1.5;}
.demo-cta-txt strong{color:var(--ink-70);}

/* ============================================================
   COOKIE BANNER (preserved, restyled)
   ============================================================ */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:none;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 22px;background:var(--dk-bg);color:var(--paper);border-top:1px solid rgba(255,255,255,0.12);box-shadow:0 -8px 30px rgba(0,0,0,.25);}
.cookie-banner.show{display:flex;}
.cookie-text{margin:0;font-size:13px;line-height:1.5;max-width:760px;color:var(--paper-70);}
.cookie-text a{color:var(--azure);text-decoration:underline;}
.cookie-actions{display:flex;gap:10px;flex:0 0 auto;}
.cookie-btn{font:600 13px/1 'Manrope',sans-serif;padding:11px 20px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;min-width:120px;}
.cookie-accept{background:var(--blue);color:#fff;}
.cookie-reject{background:transparent;color:var(--paper);border-color:rgba(255,255,255,0.35);}

/* ============================================================
   RTL
   ============================================================ */
[dir="rtl"] .eyebrow::after{margin-left:0;}
[dir="rtl"] .step{flex-direction:row-reverse;}
[dir="rtl"] .tier-list li{padding-left:0;padding-right:24px;}
[dir="rtl"] .tier-list li::before{left:auto;right:0;}
[dir="rtl"] .lang-dropdown{right:auto;left:0;}
[dir="rtl"] .nav-drawer{right:auto;left:0;border-left:0;border-right:1px solid rgba(255,255,255,0.1);transform:translateX(-100%);}
[dir="rtl"] .nav-drawer.open{transform:translateX(0);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-cta{justify-self:start;grid-column:1 / -1;}
  /* Six-item nav + language selector + CTA needs ~850px; collapse to the burger
     here so it never crowds on tablets and small laptop windows. */
  .nav-links{display:none;}
  .nav-cta .lang-selector{display:none;}
  .nav-cta .btn-primary{display:none;}
  .nav-burger{display:flex;}
}
@media (max-width:860px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tiers{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2n){border-right:none;}
  .scroll-progress{display:block;}
}
@media (max-width:600px){
  .sec{padding:64px 20px;}
  .hero{padding:calc(var(--nav-h) + 48px) 20px 64px;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .stat{border-right:none;border-bottom:1px solid var(--line);}
  .sec--dark .stat{border-color:rgba(255,255,255,0.12);}
  .contact-row{grid-template-columns:1fr;}
  .demo-comp-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cookie-actions{width:100%;}
  .cookie-btn{flex:1;min-width:0;}
}
@media (max-width:520px){
  .nav-logo-lockup{height:28px;}
}

@media (min-width:1025px){
  .footer-grid{grid-template-columns:1.4fr auto;align-items:center;}
  .footer-links{justify-self:end;}
}