/* =====================================================================
   بيان | BAYAN — Business Analysis, Development & Consulting
   Design System  ·  Navy #0C243C  +  Gold #A8783C
   Vanilla CSS · Bilingual (AR-RTL / EN-LTR) · Motion-first · No frameworks
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Sora:wght@300;400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------- Tokens */
:root{
  /* Brand */
  --navy-950:#050f1b;
  --navy-900:#081a2c;
  --navy-850:#0a1f34;
  --navy:#0c243c;
  --navy-800:#0f2c48;
  --navy-700:#163b5e;
  --navy-600:#1e4c76;

  --gold:#a8783c;
  --gold-500:#b98a45;
  --gold-400:#c69a54;
  --gold-300:#d8b26a;
  --gold-200:#e7cd95;

  --cream:#f6f3ec;
  --cream-2:#efe9dd;
  --ink:#0c243c;
  --ink-soft:#3a4a5c;
  --muted:#69788a;

  --line:rgba(12,36,60,.10);
  --line-2:rgba(12,36,60,.16);
  --line-light:rgba(244,241,234,.14);

  --white:#ffffff;

  /* Gradients */
  --grad-gold:linear-gradient(100deg,#d8b26a 0%,#a8783c 55%,#8a6230 100%);
  --grad-gold-soft:linear-gradient(100deg,#e7cd95,#c69a54);
  --grad-navy:linear-gradient(160deg,#0f2c48 0%,#0a1f34 60%,#081a2c 100%);
  --sheen:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);

  /* Type */
  --font:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-num:'Sora','IBM Plex Sans Arabic',sans-serif;

  /* Rhythm */
  --container:1200px;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow:0 24px 60px -30px rgba(8,20,40,.55);
  --shadow-gold:0 22px 50px -24px rgba(168,120,60,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --nav-h:82px;
}

[lang="en"], html[dir="ltr"]{ --font-num:'Sora','IBM Plex Sans Arabic',sans-serif; }

/* ------------------------------------------------------------- Reset */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
input,textarea,select{ font-family:inherit; font-size:16px; }

/* Latin numerals in Latin font (owner rule) */
.num,time,.stat-num,.price,.slider-val{ font-family:var(--font-num); font-feature-settings:"tnum"; letter-spacing:-.01em; }
[dir="ltr"] body,[dir="ltr"] .en-font{ font-family:'Sora','IBM Plex Sans Arabic',sans-serif; }

/* ------------------------------------------------------------- Layout */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
section{ position:relative; }
.section{ padding:96px 0; }
.section-sm{ padding:64px 0; }
.bg-navy{ background:var(--navy); color:var(--cream); }
.bg-navy-deep{ background:var(--navy-950); color:var(--cream); }
.bg-cream{ background:var(--cream); }
.bg-cream-2{ background:var(--cream-2); }

/* ------------------------------------------------------------- Type */
h1,h2,h3,h4,h5{ line-height:1.22; font-weight:700; letter-spacing:-.01em; }
.display{ font-size:clamp(2.1rem,5.4vw,4rem); font-weight:700; line-height:1.14; }
.h-xl{ font-size:clamp(1.9rem,4vw,3rem); }
.h-lg{ font-size:clamp(1.5rem,3vw,2.2rem); }
.lead{ font-size:clamp(1.02rem,1.6vw,1.2rem); color:var(--ink-soft); }
.bg-navy .lead,.bg-navy-deep .lead{ color:rgba(246,243,236,.72); }
.text-gold{ color:var(--gold); }
.grad-text{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.center{ text-align:center; }

/* Eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--grad-gold); border-radius:2px; }
.eyebrow.center{ }
.bg-navy .eyebrow,.bg-navy-deep .eyebrow{ color:var(--gold-300); }

.section-head{ max-width:720px; margin-bottom:56px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin:16px 0 14px; }

/* ------------------------------------------------------------- Buttons */
.btn{
  --bg:var(--grad-gold);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px; font-weight:600; font-size:.98rem;
  color:var(--navy-950); background:var(--grad-gold);
  box-shadow:var(--shadow-gold); overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--sheen);
  transform:translateX(-120%); transition:transform .7s var(--ease); z-index:-1;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 28px 60px -20px rgba(168,120,60,.7); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(-1px); }
.btn svg{ width:19px; height:19px; }
.btn-ghost{
  color:var(--navy); background:transparent; box-shadow:none;
  border:1.5px solid var(--line-2);
}
.btn-ghost::after{ display:none; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); box-shadow:none; }
.bg-navy .btn-ghost,.bg-navy-deep .btn-ghost,.hero .btn-ghost{ color:var(--cream); border-color:rgba(216,178,106,.4); }
.bg-navy .btn-ghost:hover,.bg-navy-deep .btn-ghost:hover{ border-color:var(--gold-300); color:var(--gold-300); }
.btn-light{ background:var(--cream); color:var(--navy); box-shadow:0 20px 44px -24px rgba(0,0,0,.5); }
.btn-light:hover{ background:#fff; }
.btn-lg{ padding:17px 38px; font-size:1.02rem; }

/* Magnetic wrapper set via JS transform */
.magnetic{ transition:transform .25s var(--ease-out); }

/* ------------------------------------------------------------- Header */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:1000;
  display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.site-header.scrolled{
  height:70px; background:rgba(7,18,32,.82);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 40px -22px rgba(0,0,0,.7); border-bottom:1px solid var(--line-light);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:auto; transition:height .4s var(--ease); }
.site-header.scrolled .brand img{ height:44px; }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative; padding:10px 16px; font-weight:500; font-size:.96rem;
  color:rgba(246,243,236,.82); border-radius:10px; transition:color .25s var(--ease);
}
.nav a::before{
  content:""; position:absolute; inset-inline:16px; bottom:6px; height:2px;
  background:var(--grad-gold); border-radius:2px; transform:scaleX(0);
  transform-origin:center; transition:transform .35s var(--ease);
}
.nav a:hover,.nav a.active{ color:var(--gold-300); }
.nav a:hover::before,.nav a.active::before{ transform:scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap:12px; }
.lang-switch{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  border:1px solid var(--line-light); color:rgba(246,243,236,.9); font-weight:600; font-size:.85rem;
  transition:border-color .25s,color .25s, background .25s;
}
.lang-switch:hover{ border-color:var(--gold-300); color:var(--gold-300); }
.lang-switch svg{ width:16px; height:16px; }
.nav-actions .btn{ padding:11px 22px; }

.burger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line-light); position:relative; }
.burger span{ position:absolute; left:12px; right:12px; height:2px; background:var(--cream); border-radius:2px; transition:.3s var(--ease); }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:29px; }
body.menu-open .burger span:nth-child(1){ top:22px; transform:rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:999; background:var(--navy-950);
  display:flex; flex-direction:column; padding:110px 30px 40px;
  transform:translateX(100%); transition:transform .5s var(--ease); visibility:hidden;
}
[dir="ltr"] .drawer{ transform:translateX(-100%); }
body.menu-open .drawer{ transform:translateX(0); visibility:visible; }
.drawer a{ padding:16px 4px; font-size:1.3rem; font-weight:600; color:var(--cream); border-bottom:1px solid var(--line-light);
  opacity:0; transform:translateY(14px); }
body.menu-open .drawer a{ animation:drawerIn .5s var(--ease) forwards; }
body.menu-open .drawer a:nth-child(1){ animation-delay:.08s } body.menu-open .drawer a:nth-child(2){ animation-delay:.14s }
body.menu-open .drawer a:nth-child(3){ animation-delay:.2s } body.menu-open .drawer a:nth-child(4){ animation-delay:.26s }
body.menu-open .drawer a:nth-child(5){ animation-delay:.32s } body.menu-open .drawer a:nth-child(6){ animation-delay:.38s }
.drawer a.active{ color:var(--gold-300); }
.drawer .drawer-foot{ margin-top:auto; display:flex; flex-direction:column; gap:14px; }
@keyframes drawerIn{ to{ opacity:1; transform:none; } }
/* Drawer only exists on mobile — prevents its off-screen fixed box from creating page overflow on desktop */
@media (min-width:901px){ .drawer{ display:none !important; } }

/* ------------------------------------------------------------- Hero */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 60px) 0 90px; overflow:hidden;
  background:var(--navy-950); color:var(--cream);
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform; }
.hero-bg .g1{ animation:glowDrift 16s ease-in-out infinite; }
.hero-bg .g2{ animation:glowDrift2 20s ease-in-out infinite; }
@keyframes glowDrift{ 50%{ transform:translate(-40px,50px) scale(1.12); } }
@keyframes glowDrift2{ 50%{ transform:translate(50px,-40px) scale(1.1); } }
.hero-bg .g1{ width:520px; height:520px; background:radial-gradient(circle,#1e4c76,transparent 70%); top:-120px; inset-inline-end:-100px; }
.hero-bg .g2{ width:460px; height:460px; background:radial-gradient(circle,#a8783c,transparent 70%); bottom:-160px; inset-inline-start:-120px; opacity:.35; }
.grid-overlay{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line-light) 1px,transparent 1px),linear-gradient(90deg,var(--line-light) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 75%);
  opacity:.5;
}
.hero .container{ position:relative; z-index:2; max-width:920px; text-align:center; }
.hero-copy .eyebrow{ margin-bottom:24px; }
.hero h1{ margin-bottom:24px; }
.hero .rotator{ color:var(--gold-300); display:inline-block; min-width:1ch; }
.hero p.lead{ max-width:620px; margin:0 auto 40px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; justify-content:center; }
.hero-stats{ display:flex; gap:48px; flex-wrap:wrap; justify-content:center; }
.hero-stats .hs{ text-align:center; }
.hero-stats .hs{ }
.hero-stats .stat-num{ font-size:2rem; font-weight:700; color:var(--gold-300); display:block; }
.hero-stats small{ color:rgba(246,243,236,.62); font-size:.85rem; }

/* Hero visual — ascending bars + arrow motif (echoes logo) */
.hero-visual{ position:relative; aspect-ratio:1/1; }
.hv-card{
  position:absolute; inset:6% 6%; border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(22,59,94,.5),rgba(8,20,40,.72));
  border:1px solid rgba(216,178,106,.28); backdrop-filter:blur(6px);
  box-shadow:var(--shadow),0 0 60px -20px rgba(168,120,60,.5); overflow:hidden;
}
.hv-card::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 72% 22%,rgba(168,120,60,.2),transparent 55%); }
.hv-card .hv-ring{ z-index:1; }
.hv-panel{ position:absolute; inset:13% 11%; z-index:2; display:flex; flex-direction:column; gap:16px; }
.hv-head{ display:flex; align-items:center; gap:7px; }
.hv-head span{ width:9px; height:9px; border-radius:50%; background:rgba(246,243,236,.22); }
.hv-head span:first-child{ background:var(--gold-300); }
.hv-titlebar{ flex:1; height:7px; border-radius:4px; margin-inline-start:8px;
  background:linear-gradient(90deg,rgba(246,243,236,.2),rgba(246,243,236,.03)); }
.hv-graph{ flex:1; width:100%; min-height:0; overflow:visible; }
.hv-barsG rect{ transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); animation:hvBar 1.1s var(--ease) forwards; }
.hv-barsG rect:nth-child(1){animation-delay:.12s}.hv-barsG rect:nth-child(2){animation-delay:.2s}
.hv-barsG rect:nth-child(3){animation-delay:.28s}.hv-barsG rect:nth-child(4){animation-delay:.36s}
.hv-barsG rect:nth-child(5){animation-delay:.44s}.hv-barsG rect:nth-child(6){animation-delay:.52s}
.hv-barsG rect:nth-child(7){animation-delay:.6s}
.hv-area{ opacity:0; animation:hvArea 1.3s ease .8s forwards; }
.hv-line{ fill:none; stroke:url(#hvStroke); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:320; stroke-dashoffset:320; animation:draw 1.9s var(--ease) .5s forwards; }
.hv-tip{ transform-box:fill-box; transform-origin:center; animation:hvTip 1.9s ease-in-out 2.1s infinite; }
@keyframes hvBar{ to{ transform:scaleY(1); } }
@keyframes hvArea{ to{ opacity:1; } }
@keyframes hvTip{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.7); opacity:.4 } }
@media (prefers-reduced-motion:reduce){
  .hv-barsG rect{ transform:none; animation:none; }
  .hv-line{ stroke-dashoffset:0; animation:none; }
  .hv-area{ opacity:1; animation:none; }
  .hv-tip,.hero-bg .g1,.hero-bg .g2{ animation:none; }
}
.hv-ring{ position:absolute; inset:0; margin:auto; width:78%; height:78%; border-radius:50%;
  border:1.5px dashed rgba(216,178,106,.35); animation:spin 26s linear infinite; }
.hv-ring::before{ content:""; position:absolute; top:-6px; left:50%; width:11px; height:11px; border-radius:50%;
  background:var(--gold-300); transform:translateX(-50%); box-shadow:0 0 16px 3px rgba(216,178,106,.6); }
.hv-bars{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:12px; padding:0 22% 24%; }
.hv-bars i{ width:16%; background:var(--grad-gold); border-radius:8px 8px 3px 3px; transform-origin:bottom;
  animation:barGrow 2.4s var(--ease) forwards; opacity:.92; }
.hv-bars i:nth-child(1){ height:34%; animation-delay:.15s; }
.hv-bars i:nth-child(2){ height:56%; animation-delay:.3s; background:linear-gradient(160deg,#c69a54,#8a6230); }
.hv-bars i:nth-child(3){ height:80%; animation-delay:.45s; }
.hv-arrow{ position:absolute; inset:0; }
.hv-arrow svg{ position:absolute; width:60%; top:16%; left:20%; overflow:visible; }
.hv-arrow path{ fill:none; stroke:var(--gold-300); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:600; stroke-dashoffset:600; animation:draw 2.6s var(--ease) .5s forwards; }
.hv-chip{ position:absolute; padding:10px 15px; border-radius:12px; background:rgba(9,26,44,.85);
  border:1px solid var(--line-light); font-size:.78rem; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); }
.hv-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold-300); box-shadow:0 0 10px var(--gold-300); }
.hv-chip.c1{ top:8%; inset-inline-start:-6%; animation:float 5s ease-in-out infinite; }
.hv-chip.c2{ bottom:12%; inset-inline-end:-8%; animation:float 6s ease-in-out infinite .8s; }

@keyframes barGrow{ from{ transform:scaleY(0); } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes float{ 50%{ transform:translateY(-14px); } }

.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(246,243,236,.5); font-size:.72rem; letter-spacing:.16em; }
.scroll-cue .mouse{ width:22px; height:36px; border:1.5px solid rgba(246,243,236,.4); border-radius:14px; position:relative; }
.scroll-cue .mouse::before{ content:""; position:absolute; top:7px; left:50%; width:3px; height:7px; background:var(--gold-300); border-radius:2px; transform:translateX(-50%); animation:wheel 1.8s ease-in-out infinite; }
@keyframes wheel{ 40%{ transform:translate(-50%,10px); opacity:.3; } }

/* --------------------------------------------------------- Trust marquee */
.marquee{ overflow:hidden; padding:26px 0; border-block:1px solid var(--line-light); background:var(--navy-900); }
.bg-cream .marquee,.marquee.light{ background:transparent; border-color:var(--line); }
.marquee-track{ display:flex; width:max-content; animation:marquee 48s linear infinite; will-change:transform; }
.marquee .item{ display:inline-flex; align-items:center; gap:12px; margin-inline-end:52px;
  color:rgba(246,243,236,.55); font-weight:600; font-size:1.02rem; white-space:nowrap; }
.marquee.light .item{ color:var(--muted); }
.marquee .item svg{ width:20px; height:20px; color:var(--gold); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
[dir="ltr"] .marquee-track{ animation-name:marquee-ltr; }
@keyframes marquee-ltr{ to{ transform:translateX(-50%); } }

/* ------------------------------------------------------------- Cards */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:34px 30px; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-gold);
  transform:scaleX(0); transform-origin:inline-start; transition:transform .5s var(--ease); }
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }
.bg-navy .card,.bg-navy-deep .card{ background:rgba(255,255,255,.03); border-color:var(--line-light); color:var(--cream); }
.bg-navy .card:hover,.bg-navy-deep .card:hover{ background:rgba(255,255,255,.055); }

.icon-badge{
  width:60px; height:60px; border-radius:16px; display:grid; place-items:center; margin-bottom:22px;
  background:linear-gradient(160deg,rgba(168,120,60,.16),rgba(168,120,60,.04));
  border:1px solid rgba(168,120,60,.28); color:var(--gold); position:relative;
  transition:transform .5s var(--ease);
}
.card:hover .icon-badge{ transform:rotate(-6deg) scale(1.06); }
.icon-badge svg{ width:28px; height:28px; stroke-width:1.6; }
.card h3{ font-size:1.24rem; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:.98rem; }
.bg-navy .card p,.bg-navy-deep .card p{ color:rgba(246,243,236,.7); }
.card .card-link{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:var(--gold); font-weight:600; font-size:.92rem; }
.card .card-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
[dir="rtl"] .card .card-link svg{ transform:scaleX(-1); }
.card:hover .card-link svg{ transform:translateX(4px); }
[dir="rtl"] .card:hover .card-link svg{ transform:scaleX(-1) translateX(4px); }
.card .idx{ position:absolute; top:22px; inset-inline-end:26px; font-family:var(--font-num); font-size:2.6rem; font-weight:700;
  color:var(--line-2); line-height:1; }
.bg-navy .card .idx{ color:rgba(246,243,236,.09); }

/* Feature list */
.flist{ display:grid; gap:14px; margin-top:8px; }
.flist li{ display:flex; align-items:flex-start; gap:12px; color:var(--ink-soft); }
.bg-navy .flist li,.bg-navy-deep .flist li{ color:rgba(246,243,236,.78); }
.flist .tick{ flex:none; width:22px; height:22px; margin-top:4px; border-radius:50%; display:grid; place-items:center;
  background:rgba(168,120,60,.14); color:var(--gold); }
.flist .tick svg{ width:13px; height:13px; stroke-width:2.5; }

/* ------------------------------------------------------- Stats band */
.stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:center; padding:30px 16px; border-inline-end:1px solid var(--line-light); }
.stat:last-child{ border:none; }
.stat .stat-num{ font-size:clamp(2.2rem,4vw,3.1rem); font-weight:700; color:var(--gold-300); line-height:1; display:block; }
.stat small{ display:block; margin-top:10px; color:rgba(246,243,236,.66); font-size:.92rem; }

/* --------------------------------------------------- Split / About */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.media-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,transparent 40%,rgba(12,36,60,.5)); }
.frame-badge{ position:absolute; inset-block-end:22px; inset-inline-start:22px; z-index:2;
  background:rgba(9,26,44,.9); border:1px solid var(--line-light); border-radius:16px; padding:16px 20px; color:var(--cream);
  display:flex; align-items:center; gap:14px; box-shadow:var(--shadow); }
.frame-badge .stat-num{ font-size:1.9rem; color:var(--gold-300); font-weight:700; }
.frame-badge small{ color:rgba(246,243,236,.7); font-size:.82rem; }

/* Values grid (about) */
.value{ padding:28px 26px; }
.value .icon-badge{ width:52px; height:52px; margin-bottom:18px; }
.value h3{ font-size:1.1rem; }

/* --------------------------------------------------- Methodology / process */
.process{ position:relative; }
.process-track{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; }
.process-track::before{ content:""; position:absolute; top:34px; inset-inline:6%; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent); opacity:.35; }
.step{ position:relative; text-align:center; }
.step .step-num{ width:68px; height:68px; margin:0 auto 20px; border-radius:20px; display:grid; place-items:center;
  background:var(--navy); color:var(--gold-300); font-family:var(--font-num); font-weight:700; font-size:1.4rem;
  border:1px solid var(--line-light); position:relative; z-index:2; box-shadow:var(--shadow); transition:transform .5s var(--ease); }
.step:hover .step-num{ transform:translateY(-6px); background:var(--grad-gold); color:var(--navy-950); }
.bg-cream .step .step-num{ background:#fff; color:var(--gold); border-color:var(--line); }
.bg-cream .step:hover .step-num{ background:var(--grad-gold); color:#fff; }
.step h4{ font-size:1.08rem; margin-bottom:8px; }
.step p{ font-size:.92rem; color:var(--ink-soft); }
.bg-navy .step p{ color:rgba(246,243,236,.68); }

/* --------------------------------------------------- Timeline (about) */
.timeline{ position:relative; max-width:820px; margin-inline:auto; }
.timeline::before{ content:""; position:absolute; inset-inline-start:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--gold),transparent); transform:translateX(-50%); opacity:.4; }
.tl-item{ position:relative; width:50%; padding:14px 40px 34px; }
.tl-item:nth-child(odd){ inset-inline-start:0; text-align:end; }
.tl-item:nth-child(even){ inset-inline-start:50%; }
.tl-item::before{ content:""; position:absolute; top:20px; width:16px; height:16px; border-radius:50%;
  background:var(--gold); border:3px solid var(--navy-950); box-shadow:0 0 0 4px rgba(168,120,60,.2); }
.bg-cream .tl-item::before{ border-color:var(--cream); }
.tl-item:nth-child(odd)::before{ inset-inline-end:-8px; }
.tl-item:nth-child(even)::before{ inset-inline-start:-8px; }
.tl-item .yr{ font-family:var(--font-num); font-weight:700; color:var(--gold); font-size:1.15rem; }
.tl-item h4{ margin:4px 0 6px; }
.tl-item p{ color:var(--ink-soft); font-size:.94rem; }
.bg-navy .tl-item p{ color:rgba(246,243,236,.7); }

/* --------------------------------------------------- Packages */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.plan{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:40px 32px; display:flex; flex-direction:column; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.plan:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.plan.featured{ background:var(--grad-navy); color:var(--cream); border-color:transparent; box-shadow:var(--shadow); }
.plan.featured::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% -10%,rgba(168,120,60,.3),transparent 55%); }
.plan .ribbon{ position:absolute; top:20px; inset-inline-end:-2px; background:var(--grad-gold); color:var(--navy-950);
  font-weight:700; font-size:.76rem; padding:7px 18px; border-radius:999px 0 0 999px; letter-spacing:.04em; }
.plan .plan-name{ font-size:1.2rem; font-weight:700; }
.plan .plan-desc{ color:var(--ink-soft); font-size:.9rem; margin:6px 0 22px; min-height:42px; }
.plan.featured .plan-desc{ color:rgba(246,243,236,.72); }
.plan .price{ font-size:2.7rem; font-weight:700; line-height:1; display:flex; align-items:baseline; gap:8px; }
.plan .price .cur{ font-size:1rem; font-weight:600; color:var(--gold); font-family:var(--font); }
.plan.featured .price .cur{ color:var(--gold-300); }
.plan .price small{ font-size:.85rem; color:var(--muted); font-family:var(--font); font-weight:500; }
.plan .divider{ height:1px; background:var(--line); margin:26px 0; }
.plan.featured .divider{ background:var(--line-light); }
.plan .flist{ margin-bottom:28px; flex:1; }
.plan .flist li{ font-size:.94rem; }
.plan.featured .flist li{ color:rgba(246,243,236,.85); }
.plan .btn{ width:100%; }
.plan.featured .btn-ghost{ color:var(--gold-300); border-color:var(--gold-300); }

/* Custom package slider */
.configurator{ background:var(--grad-navy); border-radius:var(--radius-lg); padding:48px; color:var(--cream);
  position:relative; overflow:hidden; box-shadow:var(--shadow); }
.configurator::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 90% 0%,rgba(30,76,118,.4),transparent 50%); }
.cfg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; position:relative; z-index:2; }
.cfg-head h3{ font-size:1.7rem; margin-bottom:10px; }
.slider-val{ font-size:clamp(2.4rem,5vw,3.4rem); font-weight:700; color:var(--gold-300); line-height:1; margin:18px 0 6px; }
.slider-val .cur{ font-size:1.1rem; color:var(--gold); font-family:var(--font); }
.tier-name{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
  background:rgba(168,120,60,.16); border:1px solid rgba(216,178,106,.4); color:var(--gold-300); font-weight:600; font-size:.9rem; }
.range-wrap{ margin:30px 0 6px; }
input[type="range"].range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:linear-gradient(90deg,var(--gold) var(--fill,30%),rgba(246,243,236,.16) var(--fill,30%));
  outline:none; cursor:pointer;
}
input[type="range"].range::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--grad-gold); border:3px solid var(--navy-950); box-shadow:0 4px 14px rgba(168,120,60,.6); cursor:grab; transition:transform .2s; }
input[type="range"].range::-webkit-slider-thumb:active{ transform:scale(1.15); cursor:grabbing; }
input[type="range"].range::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--gold);
  border:3px solid var(--navy-950); box-shadow:0 4px 14px rgba(168,120,60,.6); cursor:grab; }
.range-scale{ display:flex; justify-content:space-between; font-size:.8rem; color:rgba(246,243,236,.55); margin-top:12px; font-family:var(--font-num); }
.cfg-services{ display:grid; gap:12px; }
.cfg-services .svc{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-light); transition:.4s var(--ease); opacity:.4; }
.cfg-services .svc.on{ opacity:1; background:rgba(168,120,60,.12); border-color:rgba(216,178,106,.4); }
.cfg-services .svc .chk{ width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line-light); flex:none;
  display:grid; place-items:center; color:transparent; transition:.3s; }
.cfg-services .svc.on .chk{ background:var(--grad-gold); border-color:transparent; color:var(--navy-950); }
.cfg-services .svc .chk svg{ width:13px; height:13px; stroke-width:3; }
.cfg-services .svc span{ font-size:.92rem; }
.cfg-note{ margin-top:22px; font-size:.86rem; color:rgba(246,243,236,.6); }

/* Comparison table */
.compare{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; }
.compare th,.compare td{ padding:16px 20px; text-align:start; border-bottom:1px solid var(--line); font-size:.94rem; }
.compare thead th{ background:var(--navy); color:var(--cream); font-weight:600; }
.compare thead th.hi{ color:var(--gold-300); }
.compare tbody tr:last-child td{ border-bottom:none; }
.compare td.mid{ text-align:center; }
.compare .yes{ color:var(--gold); } .compare .no{ color:var(--line-2); }
.compare .yes svg,.compare .no svg{ width:20px; height:20px; margin-inline:auto; }

/* ------------------------------------------------------- Accordion / FAQ */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:14px; }
.acc{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .3s,box-shadow .3s; }
.acc.open{ border-color:rgba(168,120,60,.4); box-shadow:var(--shadow); }
.bg-navy .acc,.bg-navy-deep .acc{ background:rgba(255,255,255,.03); border-color:var(--line-light); }
.acc-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px;
  font-weight:600; font-size:1.05rem; text-align:start; }
.acc-q .plus{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(168,120,60,.12); color:var(--gold); transition:.4s var(--ease); }
.acc.open .acc-q .plus{ background:var(--grad-gold); color:var(--navy-950); transform:rotate(135deg); }
.acc-q .plus svg{ width:16px; height:16px; stroke-width:2.5; }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.acc-a p{ padding:0 26px 24px; color:var(--ink-soft); }
.bg-navy .acc-a p{ color:rgba(246,243,236,.72); }

/* ------------------------------------------------------- Sectors chips */
.sectors{ display:flex; flex-wrap:wrap; gap:12px; }
.sector-chip{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-weight:500; font-size:.92rem; transition:.35s var(--ease); }
.bg-navy .sector-chip{ background:rgba(255,255,255,.04); border-color:var(--line-light); color:var(--cream); }
.sector-chip:hover{ transform:translateY(-3px); border-color:var(--gold); color:var(--gold); box-shadow:var(--shadow); }
.sector-chip svg{ width:18px; height:18px; color:var(--gold); }

/* --------------------------------------------------------------- CTA */
.cta-band{ position:relative; overflow:hidden; }
.cta-inner{ position:relative; z-index:2; text-align:center; max-width:760px; margin-inline:auto; }
.cta-band .glow{ position:absolute; width:600px; height:600px; border-radius:50%; filter:blur(100px);
  background:radial-gradient(circle,rgba(168,120,60,.35),transparent 70%); top:-40%; left:50%; transform:translateX(-50%); z-index:1; }

/* --------------------------------------------------------- Contact */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start; }
.contact-cards{ display:grid; gap:16px; }
.contact-card{ display:flex; align-items:center; gap:18px; padding:22px 24px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); transition:.4s var(--ease); }
.contact-card:hover{ transform:translateX(6px); border-color:rgba(168,120,60,.4); box-shadow:var(--shadow); }
[dir="ltr"] .contact-card:hover{ transform:translateX(-6px); }
.contact-card .ic{ flex:none; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(160deg,rgba(168,120,60,.16),rgba(168,120,60,.04)); border:1px solid rgba(168,120,60,.26); color:var(--gold); }
.contact-card .ic svg{ width:24px; height:24px; }
.contact-card .ct small{ color:var(--muted); font-size:.82rem; display:block; }
.contact-card .ct strong{ font-weight:600; font-size:1rem; }
.contact-card.wa{ background:linear-gradient(160deg,#0f2c48,#0a1f34); border-color:transparent; color:var(--cream); }
.contact-card.wa small{ color:rgba(246,243,236,.6); } .contact-card.wa .ic{ background:rgba(37,211,102,.16); border-color:rgba(37,211,102,.4); color:#25d366; }

.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow); }
.bg-navy .form-card{ background:rgba(255,255,255,.03); border-color:var(--line-light); }
.field{ margin-bottom:20px; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:9px; }
.field .req{ color:var(--gold); }
.field input,.field textarea,.field select{ width:100%; padding:14px 18px; border-radius:12px; border:1.5px solid var(--line-2);
  background:var(--cream); color:var(--ink); transition:border-color .25s,background .25s,box-shadow .25s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); background:#fff;
  box-shadow:0 0 0 4px rgba(168,120,60,.12); }
.field textarea{ min-height:130px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.form-note{ font-size:.84rem; color:var(--muted); margin-top:14px; }

/* Map */
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); height:340px; }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05); }

/* --------------------------------------------------------- Page hero (inner) */
.page-hero{ position:relative; padding:calc(var(--nav-h) + 70px) 0 70px; background:var(--navy-950); color:var(--cream); overflow:hidden; text-align:center; }
.page-hero .grid-overlay{ opacity:.35; }
.page-hero .glow{ position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(90px);
  background:radial-gradient(circle,rgba(30,76,118,.5),transparent 70%); top:-160px; inset-inline-end:-100px; }
.page-hero .container{ position:relative; z-index:2; }
.page-hero .breadcrumb{ display:inline-flex; gap:8px; font-size:.86rem; color:rgba(246,243,236,.55); margin-top:16px; }
.page-hero .breadcrumb a:hover{ color:var(--gold-300); }
.page-hero h1{ margin-top:14px; }
.page-hero p{ max-width:640px; margin:16px auto 0; color:rgba(246,243,236,.72); }

/* --------------------------------------------------------- Legal pages */
.legal{ display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; }
.legal-nav{ position:sticky; top:100px; display:grid; gap:6px; }
.legal-nav a{ padding:11px 16px; border-radius:10px; font-size:.92rem; color:var(--ink-soft); border-inline-start:2px solid transparent; transition:.25s; }
.legal-nav a:hover,.legal-nav a.active{ color:var(--gold); background:rgba(168,120,60,.07); border-color:var(--gold); }
.legal-body{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:44px; }
.legal-body h2{ font-size:1.4rem; margin:36px 0 14px; padding-top:10px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p,.legal-body li{ color:var(--ink-soft); margin-bottom:12px; }
.legal-body ul{ padding-inline-start:22px; margin-bottom:16px; }
.legal-body ul li{ list-style:disc; }
.legal-body .updated{ display:inline-block; padding:8px 16px; border-radius:999px; background:rgba(168,120,60,.1);
  color:var(--gold); font-size:.85rem; font-weight:600; margin-bottom:26px; }
.legal-note{ background:rgba(168,120,60,.08); border:1px solid rgba(168,120,60,.24); border-radius:12px; padding:18px 22px;
  color:var(--ink); margin:20px 0; display:flex; gap:14px; }
.legal-note svg{ flex:none; width:24px; height:24px; color:var(--gold); margin-top:2px; }

/* --------------------------------------------------------- Footer */
.site-footer{ background:var(--navy-950); color:var(--cream); padding:72px 0 0; position:relative; overflow:hidden; }
.site-footer .grid-overlay{ opacity:.25; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; position:relative; z-index:2; padding-bottom:50px; }
.footer-brand img{ height:64px; margin-bottom:20px; }
.footer-brand p{ color:rgba(246,243,236,.66); max-width:300px; font-size:.94rem; }
.footer-social{ display:flex; gap:12px; margin-top:22px; }
.footer-social a{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--line-light);
  color:rgba(246,243,236,.7); transition:.3s var(--ease); }
.footer-social a:hover{ background:var(--grad-gold); color:var(--navy-950); border-color:transparent; transform:translateY(-3px); }
.footer-social svg{ width:18px; height:18px; }
.footer-col h4{ font-size:1.02rem; margin-bottom:20px; color:var(--gold-300); }
.footer-col a{ display:block; padding:7px 0; color:rgba(246,243,236,.66); font-size:.94rem; transition:color .25s,padding-inline-start .25s; }
.footer-col a:hover{ color:var(--gold-300); padding-inline-start:6px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:12px; padding:8px 0; color:rgba(246,243,236,.66); font-size:.92rem; }
.footer-contact svg{ flex:none; width:18px; height:18px; color:var(--gold); margin-top:4px; }
.footer-bottom{ border-top:1px solid var(--line-light); padding:24px 0; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer-bottom p{ color:rgba(246,243,236,.55); font-size:.86rem; }
.footer-legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-legal a{ color:rgba(246,243,236,.6); font-size:.86rem; }
.footer-legal a:hover{ color:var(--gold-300); }
.footer-credit{ color:rgba(246,243,236,.4); font-size:.78rem; }
.footer-credit a{ color:var(--gold-300); }

/* Floating WhatsApp */
.wa-float{ position:fixed; inset-block-end:26px; inset-inline-end:26px; z-index:900; width:58px; height:58px; border-radius:50%;
  background:#25d366; display:grid; place-items:center; box-shadow:0 14px 34px -10px rgba(37,211,102,.7); color:#fff;
  transition:transform .3s var(--ease); }
.wa-float::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#25d366; opacity:.5; animation:pulse 2.2s ease-out infinite; z-index:-1; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }
@keyframes pulse{ to{ transform:scale(1.8); opacity:0; } }

/* Cookie banner */
.cookie{ position:fixed; inset-block-end:20px; inset-inline-start:20px; z-index:950; max-width:420px;
  background:var(--navy-900); border:1px solid var(--line-light); border-radius:16px; padding:22px 24px; color:var(--cream);
  box-shadow:var(--shadow); transform:translateY(140%); transition:transform .5s var(--ease); }
.cookie.show{ transform:none; }
.cookie h5{ font-size:1rem; margin-bottom:8px; color:var(--gold-300); }
.cookie p{ font-size:.86rem; color:rgba(246,243,236,.72); margin-bottom:16px; }
.cookie p a{ color:var(--gold-300); text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; }
.cookie-actions .btn{ padding:10px 20px; font-size:.86rem; }

/* --------------------------------------------------------- Reveal anim */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); } [data-reveal="left"].in{ transform:none; }
[data-reveal="right"]{ transform:translateX(40px); } [data-reveal="right"].in{ transform:none; }
/* Below wide desktops the side margins are < the reveal offset, so use vertical reveal to guarantee zero horizontal overflow */
@media (max-width:1300px){
  [data-reveal="left"],[data-reveal="right"]{ transform:translateY(30px); }
  [data-reveal="left"].in,[data-reveal="right"].in{ transform:none; }
}
[data-reveal="scale"]{ transform:scale(.94); } [data-reveal="scale"].in{ transform:none; }
[data-reveal-delay]{ transition-delay:var(--d,0s); }

/* Focus / clarity motif (echoes tagline) */
[data-clarity]{ filter:blur(10px); opacity:0; transition:filter 1s var(--ease-out), opacity 1s var(--ease-out); }
[data-clarity].in{ filter:blur(0); opacity:1; }

/* ------------------------------------------------------------- Responsive */
@media (max-width:1080px){
  .hero .container{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ max-width:440px; margin-inline:auto; width:100%; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
  .legal{ grid-template-columns:1fr; }
  .legal-nav{ position:static; grid-auto-flow:column; overflow-x:auto; padding-bottom:6px; }
  .legal-nav a{ white-space:nowrap; border-inline-start:none; border-bottom:2px solid transparent; }
  .legal-nav a.active{ border-color:var(--gold); }
}
@media (max-width:900px){
  .nav,.nav-actions .lang-switch,.nav-actions .btn{ display:none; }
  .burger{ display:block; }
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .split,.contact-grid,.cfg-grid{ grid-template-columns:1fr; gap:34px; }
  .process-track{ grid-template-columns:repeat(2,1fr); gap:30px; }
  .process-track::before{ display:none; }
  .pricing{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .stats-band{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border:none; }
  .timeline::before{ inset-inline-start:8px; }
  .tl-item{ width:100%; text-align:start !important; inset-inline-start:0 !important; padding-inline:36px 0; }
  .tl-item::before{ inset-inline-start:0 !important; inset-inline-end:auto !important; }
}
@media (max-width:640px){
  .section{ padding:70px 0; }
  .container{ padding-inline:18px; }
  .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .configurator{ padding:30px 22px; }
  .process-track{ grid-template-columns:1fr; }
  .stats-band{ grid-template-columns:1fr 1fr; gap:14px; }
  .stat{ padding:20px 10px; }
  .hero-stats{ gap:22px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .compare-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .compare{ min-width:560px; }
  .legal-body{ padding:28px 22px; }
  .cookie{ inset-inline:14px; max-width:none; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .wa-float{ inset-block-end:18px; inset-inline-end:18px; width:52px; height:52px; }
  .wa-float svg{ width:26px; height:26px; }
}
@media (max-width:380px){
  .display{ font-size:2rem; }
  .btn{ width:100%; }
  .hero-cta{ flex-direction:column; }
}

/* Safe-area for notched devices */
@supports(padding:max(0px)){
  .wa-float{ inset-block-end:max(18px,env(safe-area-inset-bottom)); }
  .drawer{ padding-bottom:max(40px,env(safe-area-inset-bottom)); }
}

/* Print (legal) */
@media print{
  .site-header,.site-footer,.wa-float,.cookie,.page-hero .glow{ display:none; }
  body{ background:#fff; }
}