/* =========================================================================
   ScanOn — NFC Google-review cards. RTL Hebrew landing.
   Palette: white (60%) · navy #022658 (30%) · black (10%) · gold stars.
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
:root{
  --white:#ffffff;
  --paper:#f3f7fd;
  --paper-2:#e9f0fb;
  --navy:#022658;         /* brand primary */
  --navy-2:#093b9d;       /* card blue / brighter accent */
  --navy-deep:#04122b;    /* darkest */
  --ink:#0a1526;          /* near-black text */
  --black:#000000;
  --muted:#5a6b84;
  --gold:#fbbf24;
  --gold-2:#f59e0b;
  --line:rgba(2,38,88,.12);
  --line-2:rgba(2,38,88,.08);
  --card:#ffffff;

  --f-display:'Rubik',system-ui,sans-serif;
  --f-body:'Assistant',system-ui,sans-serif;

  --shell:1200px;
  --gutter:clamp(20px,5vw,64px);
  --r:18px;
  --r-lg:26px;
  --nav-h:74px;
  --ease:cubic-bezier(.22,1,.36,.58);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* 3D card */
  --cw:320px; --ch:339px; --ct:16px; --card-r:20px;
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  font-family:var(--f-body); background:var(--white); color:var(--ink);
  line-height:1.6; font-size:17px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none }
::selection{ background:var(--navy); color:#fff }
:focus-visible{ outline:3px solid var(--navy-2); outline-offset:3px; border-radius:6px }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter) }
.shell--narrow{ max-width:820px }
.skip{ position:fixed; top:-60px; right:16px; z-index:2000; background:var(--navy); color:#fff; padding:10px 18px; border-radius:0 0 12px 12px; transition:top .25s }
.skip:focus{ top:0 }

/* ---------- Typography ---------- */
.h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(28px,4.6vw,46px); line-height:1.1; letter-spacing:-.01em; color:var(--navy) }
.h2--light{ color:#fff }
/* Signature underline — drawn via background-size (behind text, no stacking bug, stays put) */
.h2 .u{ white-space:nowrap; background-image:linear-gradient(rgba(251,191,36,.55),rgba(251,191,36,.55));
  background-repeat:no-repeat; background-position:100% 90%; background-size:0% .30em; padding:0 .05em .03em;
  transition:background-size .95s cubic-bezier(.5,0,.82,.35) }
.h2 .u.is-drawn{ background-size:100% .30em }
.h2 .hl{ color:var(--gold) }
.lede{ font-size:clamp(16px,2vw,20px); color:var(--muted); max-width:60ch; margin-top:16px; font-weight:500 }
.lede--light{ color:rgba(255,255,255,.78) }
.sec{ padding:clamp(64px,9vw,120px) 0; position:relative }
.sec-head{ margin-bottom:clamp(36px,5vw,60px) }
.sec-head--center{ text-align:center; margin-inline:auto }
.sec-head--center .lede{ margin-inline:auto }

/* ---------- Buttons ---------- */
.btn{
  --pad-y:14px; --pad-x:28px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-display); font-weight:600; font-size:15px; line-height:1;
  padding:var(--pad-y) var(--pad-x); border-radius:999px; white-space:nowrap;
  transition:transform .3s var(--ease-out), background .3s, color .3s, box-shadow .3s, border-color .3s;
  will-change:transform; position:relative; border:1.6px solid transparent;
}
.btn svg{ transition:transform .3s var(--ease-out) }
.btn--lg{ --pad-y:17px; --pad-x:34px; font-size:16.5px }
.btn--block{ width:100%; }
.btn--gold{ background:linear-gradient(135deg,#ffd54a,var(--gold-2)); color:var(--navy-deep); box-shadow:0 10px 26px -8px rgba(245,158,11,.6) }
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -8px rgba(245,158,11,.72) }
.btn--gold:hover svg{ transform:translateX(-4px) }
.btn--navy{ background:var(--navy); color:#fff; box-shadow:0 10px 26px -10px rgba(2,38,88,.55) }
.btn--navy:hover{ background:var(--navy-2); transform:translateY(-3px) }
.btn--ghost{ border-color:var(--line); color:var(--navy); background:rgba(255,255,255,.5) }
.btn--ghost:hover{ background:var(--navy); color:#fff; border-color:var(--navy) }
.btn--nav{ --pad-y:11px; --pad-x:22px; background:var(--navy); color:#fff; font-size:14.5px }
.btn--nav:hover{ background:var(--navy-2); transform:translateY(-2px) }

/* ---------- Nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nav-h); display:flex; align-items:center;
  transition:background .35s, box-shadow .35s, backdrop-filter .35s }
.nav.is-stuck{ background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 1px 0 var(--line-2), 0 10px 30px -20px rgba(2,38,88,.4) }
/* Drawer open: the navy drawer sits behind the nav, so knock the nav contents out to white.
   Must come after .is-stuck so it wins in both scroll states. */
.nav.is-open{ background:transparent; backdrop-filter:none; box-shadow:none }
.nav.is-open .brand__name{ color:#fff }
.nav.is-open .brand__name b{ color:var(--gold) }
.nav.is-open .brand__mark rect{ fill:#fff }
.nav.is-open .brand__mark path{ stroke:var(--navy) }
.nav.is-open .nav__burger span{ background:#fff }
.nav__in{ display:flex; align-items:center; gap:20px; width:100%; max-width:var(--shell); margin-inline:auto }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700 }
.brand__mark{ display:inline-flex; filter:drop-shadow(0 4px 10px rgba(2,38,88,.22)) }
.brand__name{ font-size:23px; letter-spacing:-.02em; color:var(--navy) }
.brand__name b{ font-weight:800; color:var(--navy-2) }
.brand--light .brand__name{ color:#fff } .brand--light .brand__name b{ color:var(--gold) }
.nav__links{ display:flex; gap:28px; margin-inline-start:auto; font-family:var(--f-display); font-weight:500; font-size:15.5px }
.nav__links a{ color:var(--ink); opacity:.82; position:relative; padding:6px 0; transition:opacity .25s }
.nav__links a::after{ content:""; position:absolute; right:0; bottom:0; height:2px; width:0; background:var(--navy-2); transition:width .3s var(--ease-out) }
.nav__links a:hover{ opacity:1 } .nav__links a:hover::after{ width:100% }
.nav .btn--nav{ margin-inline-start:4px }
.nav__burger{ display:none; width:44px; height:44px; border-radius:12px; position:relative; margin-inline-start:auto }
.nav__burger span{ position:absolute; left:11px; right:11px; height:2px; background:var(--navy); border-radius:2px; transition:transform .3s, opacity .3s }
.nav__burger span:first-child{ top:17px } .nav__burger span:last-child{ bottom:17px }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(5px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-5px) rotate(-45deg) }

.drawer{ position:fixed; inset:0; z-index:990; background:var(--navy); padding:calc(var(--nav-h) + 24px) var(--gutter) 40px;
  transform:translateX(-100%); transition:transform .55s var(--ease-out); display:flex; flex-direction:column }
.drawer.is-open{ transform:translateX(0) }
.drawer__links{ display:flex; flex-direction:column; gap:6px; font-family:var(--f-display); font-weight:600; font-size:24px }
.drawer__links a:not(.btn){ color:#fff; padding:16px 4px; border-bottom:1px solid rgba(255,255,255,.12) }
.drawer__links .btn{ margin-top:24px }

/* ---------- HERO ---------- */
.hero{ position:relative; background:linear-gradient(180deg,var(--paper) 0%,var(--white) 78%) }
.hero__bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.hero__bg::before{ content:""; position:absolute; top:-20%; left:50%; width:min(1100px,120vw); height:700px; transform:translateX(-50%);
  background:radial-gradient(60% 60% at 50% 40%, rgba(9,59,157,.14), transparent 70%) }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(2,38,88,.08) 1px, transparent 0); background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%); mask-image:linear-gradient(180deg,#000,transparent 82%); opacity:.7 }
.hero__stage{ min-height:100svh; display:flex; align-items:center; padding-top:var(--nav-h) }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(24px,4vw,56px); width:100%; padding-block:40px }
.hero__stars{ display:inline-flex; align-items:center; gap:5px; padding:7px 16px 7px 12px; background:rgba(255,255,255,.7); border:1px solid var(--line);
  border-radius:999px; font-family:var(--f-display); font-weight:600; font-size:13.5px; color:var(--navy); box-shadow:0 6px 20px -12px rgba(2,38,88,.5) }
.hero__stars span{ margin-inline-start:6px }
.hero__title{ font-family:var(--f-display); font-weight:900; font-size:clamp(34px,6vw,64px); line-height:1.04; letter-spacing:-.025em; color:var(--navy); margin-top:22px }
.hero__title .ln{ display:block; overflow:hidden }
.hero__title em{ font-style:normal; color:var(--navy-2); background-image:linear-gradient(rgba(251,191,36,.6),rgba(251,191,36,.6));
  background-repeat:no-repeat; background-position:100% 94%; background-size:0% .18em; padding-bottom:.03em;
  transition:background-size .9s cubic-bezier(.5,0,.82,.35) }
.hero__title em.is-drawn{ background-size:100% .18em }
.hero__lede{ font-size:clamp(16px,1.9vw,20px); color:var(--muted); max-width:52ch; margin-top:22px; font-weight:500 }
.hero__lede b{ color:var(--navy); font-weight:700 }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px }
.hero__trust{ display:flex; flex-wrap:wrap; gap:18px; margin-top:26px; list-style:none; font-weight:600; font-size:14.5px; color:var(--navy) }
.hero__trust li{ display:inline-flex; align-items:center; gap:7px }
.hero__trust svg{ color:#16a34a }

/* ---- 3D CARD ---- */
.hero__cardwrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; perspective:none }
.scene{ position:relative; width:var(--cw); height:var(--ch); perspective:1400px; perspective-origin:50% 40%;
  animation:scene-float 6s ease-in-out infinite }
.card3d{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(6deg) rotateY(-18deg); will-change:transform }
.face{ position:absolute; top:50%; left:50%; backface-visibility:hidden }
.face--front,.face--back{ width:var(--cw); height:var(--ch) }
.face--front img,.face--back img{ width:100%; height:100%; object-fit:cover; border-radius:var(--card-r);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04) }
.face--front{ transform:translate(-50%,-50%) translateZ(calc(var(--ct)/2)) }
.face--back{ transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--ct)/2)) }
.face--right,.face--left{ width:var(--ct); height:var(--ch); background:linear-gradient(90deg,var(--navy-deep),var(--navy) 45%,var(--navy-2)); border-radius:3px }
.face--right{ transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--cw)/2)) }
.face--left{ transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--cw)/2)) }
.face--top,.face--bottom{ width:var(--cw); height:var(--ct); background:linear-gradient(180deg,var(--navy-2),var(--navy) 50%,var(--navy-deep)); border-radius:3px }
.face--top{ transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--ch)/2)) }
.face--bottom{ transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--ch)/2)) }
.scene__shadow{ position:absolute; left:50%; bottom:-46px; width:74%; height:34px; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(2,38,88,.34), transparent 72%); filter:blur(8px); z-index:-1;
  animation:shadow-pulse 6s ease-in-out infinite }
.scene__ripple{ position:absolute; inset:0; display:grid; place-items:center; z-index:-1 }
.scene__ripple span{ position:absolute; width:120px; height:120px; border:2px solid var(--navy-2); border-radius:50%; opacity:0;
  animation:ripple 3.4s ease-out infinite }
.scene__ripple span:nth-child(2){ animation-delay:1.13s } .scene__ripple span:nth-child(3){ animation-delay:2.26s }
.scene__hint{ margin-top:58px; display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-weight:600; font-size:13px;
  color:var(--muted); opacity:.9 }
.scene__hint svg{ animation:hint-bounce 1.8s ease-in-out infinite }

@keyframes scene-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes shadow-pulse{ 0%,100%{ opacity:.85; width:74% } 50%{ opacity:.55; width:64% } }
@keyframes ripple{ 0%{ opacity:.5; transform:scale(.5) } 100%{ opacity:0; transform:scale(2.4) } }
@keyframes hint-bounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }

/* ---------- Waves ---------- */
.wave{ line-height:0; background:transparent; position:relative; z-index:1; margin-bottom:-1px }
.wave svg{ display:block; width:100%; height:clamp(56px,8vw,116px) }
.wave--to-navy svg,.wave--from-navy svg{ fill:var(--navy) }
.wave--from-navy{ margin-top:-1px; margin-bottom:0 }

/* ---------- PROBLEM ---------- */
.sec--problem{ background:var(--white) }
.prob-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:clamp(36px,5vw,60px) }
.prob-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 28px; text-align:center;
  transition:transform .4s var(--ease-out), box-shadow .4s }
.prob-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -30px rgba(2,38,88,.5) }
.prob-num{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(40px,6vw,58px); line-height:1; color:var(--navy-2); letter-spacing:-.02em }
.prob-num small{ font-size:.5em; color:var(--gold-2); vertical-align:.35em; margin-inline-start:2px }
.prob-card p{ margin-top:14px; color:var(--muted); font-weight:500; font-size:16px }

.compare{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(14px,3vw,34px) }
.gcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:0 18px 44px -30px rgba(2,38,88,.5) }
.gcard--low{ opacity:.94 }
.gcard--high{ border-color:rgba(9,59,157,.35); box-shadow:0 26px 60px -30px rgba(9,59,157,.6) }
.gcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.gcard__name{ font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--navy) }
.gcard__pin{ width:26px; height:26px; border-radius:50%; background:var(--paper-2); position:relative; flex-shrink:0 }
.gcard__pin::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--muted); opacity:.4 }
.gcard__pin--on{ background:rgba(9,59,157,.14) } .gcard__pin--on::after{ background:var(--navy-2); opacity:1 }
.gcard__rate{ display:flex; align-items:center; gap:9px; margin-top:16px; flex-wrap:wrap }
.gcard__rate b{ font-family:var(--f-display); font-weight:800; font-size:30px; color:var(--ink) }
.gstars{ --fill:0; display:inline-block; width:104px; height:19px;
  background:
    linear-gradient(90deg,var(--gold) var(--fill,0%), #d9e0ec var(--fill,0%));
  -webkit-mask:repeat-x left center/20.8px 19px; mask:repeat-x left center/20.8px 19px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.1 4.7 1.4 6.8L12 17.8 5.9 21.2l1.4-6.8L2.2 9.7l6.9-.7z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.1 4.7 1.4 6.8L12 17.8 5.9 21.2l1.4-6.8L2.2 9.7l6.9-.7z'/%3E%3C/svg%3E") }
.gcard__cnt{ font-size:13.5px; color:var(--muted); font-weight:600 }
.gbar{ height:8px; border-radius:99px; background:var(--paper-2); margin-top:18px; overflow:hidden }
.gbar i{ display:block; height:100%; width:var(--w,50%); border-radius:99px; background:linear-gradient(90deg,var(--navy-2),var(--navy)) }
.gcard--low .gbar i{ background:#c3ccdb }
.gcard__tag{ margin-top:16px; font-family:var(--f-display); font-weight:600; font-size:13.5px; display:inline-flex; padding:6px 14px; border-radius:99px }
.gcard__tag--bad{ background:rgba(220,38,38,.1); color:#b91c1c }
.gcard__tag--good{ background:rgba(22,163,74,.12); color:#15803d }
.compare__arrow{ color:var(--navy-2); opacity:.6 }

/* ---------- HOW / navy ---------- */
.sec--navy{ background:var(--navy); color:#fff; position:relative; overflow:hidden }
.sec--navy::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0); background-size:36px 36px; opacity:.6 }
.sec--navy .shell{ position:relative; z-index:1 }
.steps{ position:relative; margin-top:14px }
.steps__line{ position:absolute; top:42px; left:16.66%; right:16.66%; height:3px; background:rgba(255,255,255,.14); border-radius:3px; overflow:hidden; z-index:0 }
.steps__line i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:right center; background:linear-gradient(90deg,var(--gold),#fff); border-radius:3px }
.steps__list{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:1 }
.step{ text-align:center; padding:0 14px; animation:step-float 5.5s ease-in-out infinite }
.step:nth-child(2){ animation-delay:.5s } .step:nth-child(3){ animation-delay:1s }
.step__node{ position:relative; width:84px; height:84px; margin:0 auto 22px }
.step__ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible }
.step__ring circle{ fill:rgba(255,255,255,.03); stroke:var(--gold); stroke-width:3; stroke-linecap:round }
.step__ic{ position:absolute; inset:12px; z-index:2; border-radius:50%; display:grid; place-items:center; color:var(--navy);
  background:linear-gradient(135deg,#fff,#e7eefb); box-shadow:0 12px 26px -12px rgba(0,0,0,.55) }
.step__badge{ position:absolute; top:0; inset-inline-start:0; z-index:3; width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; font-size:13px; color:var(--navy-deep); background:linear-gradient(135deg,#ffd54a,var(--gold-2)); box-shadow:0 5px 12px rgba(0,0,0,.35) }
.step h3{ font-family:var(--f-display); font-weight:700; font-size:20px; color:#fff }
.step p{ color:rgba(255,255,255,.72); margin-top:8px; font-weight:500; font-size:15.5px; max-width:32ch; margin-inline:auto }
@keyframes step-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-11px) } }
.no-js .steps__line i{ transform:scaleX(1) }

/* ---------- BENEFITS ---------- */
.sec--benefits{ background:var(--white) }
.ben-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.ben{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px;
  transition:box-shadow .4s, border-color .4s, background .4s; animation:card-float 6s ease-in-out infinite }
.ben:nth-child(2){ animation-delay:.5s } .ben:nth-child(3){ animation-delay:1s }
.ben:nth-child(4){ animation-delay:1.5s } .ben:nth-child(5){ animation-delay:.8s } .ben:nth-child(6){ animation-delay:1.3s }
.ben:hover{ border-color:rgba(9,59,157,.32); box-shadow:0 30px 60px -30px rgba(2,38,88,.6); background:#fff }
.ben__ic{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--navy-2),var(--navy)); box-shadow:0 12px 26px -14px rgba(9,59,157,.8) }
@keyframes card-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.ben h3{ font-family:var(--f-display); font-weight:700; font-size:20px; color:var(--navy); margin-top:20px }
.ben p{ color:var(--muted); margin-top:9px; font-weight:500; font-size:15.5px }

/* ---------- PRODUCT COLORS ---------- */
.sec--product{ background:linear-gradient(180deg,var(--white),var(--paper)) }
.product__in{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,5vw,64px) }
.product__pts{ list-style:none; margin:26px 0 30px; display:flex; flex-direction:column; gap:14px; font-weight:600; color:var(--navy) }
.product__pts li{ display:flex; align-items:center; gap:12px }
.dot{ width:16px; height:16px; border-radius:50%; flex-shrink:0; box-shadow:0 3px 8px rgba(0,0,0,.2) }
.dot--blue{ background:var(--navy-2) } .dot--black{ background:#1f1f1f } .dot--gold{ background:var(--gold) }
.product__cards{ position:relative; display:flex; align-items:center; justify-content:center; min-height:clamp(300px,40vw,440px) }
.pcard{ position:relative; flex:0 0 auto; width:clamp(150px,40%,210px); aspect-ratio:1000/1060; border-radius:20px; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(2,38,88,.6); transition:transform .55s var(--ease-out) }
.pcard img{ width:100%; height:100%; object-fit:cover; display:block }
.pcard--k{ transform:rotate(6deg) translateX(14%); z-index:1 }
.pcard--b{ transform:rotate(-5deg) translateX(-14%); z-index:2 }
.product__cards:hover .pcard--b{ transform:rotate(-8deg) translateX(-16%) translateY(-8px) }
.product__cards:hover .pcard--k{ transform:rotate(9deg) translateX(16%) translateY(-8px) }

/* ---------- WHY / stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:center }
.stat{ padding:20px }
.stat__num{ font-family:var(--f-display); font-weight:900; font-size:clamp(48px,7vw,76px); line-height:1; color:var(--gold); letter-spacing:-.02em; display:block }
.stat span{ display:block; margin-top:14px; color:rgba(255,255,255,.78); font-weight:500; font-size:16px; max-width:30ch; margin-inline:auto }
.stats__src{ text-align:center; margin-top:34px; font-size:13px; color:rgba(255,255,255,.5) }

/* ---------- FAQ ---------- */
.sec--faq{ background:var(--white) }
.faq{ display:flex; flex-direction:column; gap:12px }
.faq__item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .3s, box-shadow .3s }
.faq__item[open]{ border-color:rgba(9,59,157,.3); box-shadow:0 18px 40px -30px rgba(2,38,88,.5) }
.faq__item summary{ list-style:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--f-display); font-weight:600; font-size:17.5px; color:var(--navy) }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__x{ position:relative; width:20px; height:20px; flex-shrink:0 }
.faq__x::before,.faq__x::after{ content:""; position:absolute; top:50%; left:50%; width:14px; height:2px; border-radius:2px; background:var(--navy-2); transform:translate(-50%,-50%); transition:transform .3s var(--ease-out) }
.faq__x::after{ transform:translate(-50%,-50%) rotate(90deg) }
.faq__item[open] .faq__x::after{ transform:translate(-50%,-50%) rotate(0) }
.faq__a{ padding:0 24px 24px; color:var(--muted); font-weight:500; font-size:16px; max-width:70ch }
.faq__item[open] .faq__a{ animation:faq-in .4s var(--ease-out) }
@keyframes faq-in{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* ---------- ORDER ---------- */
.sec--order{ background:var(--navy); color:#fff; position:relative; overflow:hidden }
.sec--order::before{ content:""; position:absolute; top:-30%; inset-inline-start:-10%; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(9,59,157,.5),transparent 70%); pointer-events:none }
.order__in{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center }
.order__pts{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:12px; font-weight:600; color:#fff }
.order__pts li{ display:flex; align-items:center; gap:10px } .order__pts svg{ color:var(--gold) }
.order__form{ background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:clamp(26px,3vw,38px); box-shadow:0 40px 90px -40px rgba(0,0,0,.6) }
.order__ftitle{ font-family:var(--f-display); font-weight:800; font-size:22px; color:var(--navy); margin-bottom:20px }
.field{ display:block; margin-bottom:16px }
.field span{ display:block; font-weight:600; font-size:14px; color:var(--navy); margin-bottom:7px }
.field small{ color:var(--muted); font-weight:500 }
.field input{ width:100%; padding:14px 16px; border:1.6px solid var(--line); border-radius:13px; font:inherit; font-size:16px; background:var(--paper);
  transition:border-color .25s, background .25s }
.field input:focus{ outline:none; border-color:var(--navy-2); background:#fff }
.field input.invalid{ border-color:#dc2626; background:rgba(220,38,38,.04) }
.order__note{ margin-top:12px; font-size:14px; font-weight:600; min-height:1.2em; color:var(--navy-2) }
.order__alt{ margin-top:14px; font-size:14.5px; color:var(--muted); text-align:center }
.order__alt a{ color:var(--navy-2); font-weight:700; text-decoration:underline }

/* ---------- FOOTER ---------- */
.foot{ background:var(--navy-deep); color:#fff; padding:clamp(50px,7vw,80px) 0 30px }
.foot__in{ display:grid; grid-template-columns:1.6fr 1fr 1fr auto; gap:36px 24px; align-items:start }
.foot__brand p{ color:rgba(255,255,255,.6); margin-top:14px; max-width:34ch; font-weight:500; font-size:15px }
.foot__col h4{ font-family:var(--f-display); font-weight:700; font-size:15px; margin-bottom:14px; color:#fff }
.foot__col a{ display:block; color:rgba(255,255,255,.62); padding:5px 0; font-size:15px; transition:color .25s }
.foot__col a:hover{ color:#fff }
.foot__cta{ align-self:center }
.foot__base{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); font-size:13.5px }
.foot__base a{ color:rgba(255,255,255,.72); text-decoration:underline }

/* ---------- Sticky mobile CTA ---------- */
.mcta{ position:fixed; left:14px; right:14px; bottom:14px; z-index:900; display:none; align-items:center; justify-content:center; gap:10px;
  padding:16px; border-radius:999px; font-family:var(--f-display); font-weight:700; font-size:16px; color:var(--navy-deep);
  background:linear-gradient(135deg,#ffd54a,var(--gold-2)); box-shadow:0 16px 34px -12px rgba(245,158,11,.7);
  transform:translateY(160%); transition:transform .5s var(--ease-out) }
.mcta.is-on{ transform:translateY(0) }

/* ---------- Accessibility widget ---------- */
.a11y-btn{ position:fixed; inset-inline-start:18px; bottom:18px; z-index:950; width:52px; height:52px; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px -10px rgba(2,38,88,.7); transition:transform .3s }
.a11y-btn:hover{ transform:scale(1.06) }
.a11y-panel{ position:fixed; inset-inline-start:18px; bottom:80px; z-index:951; width:300px; max-width:calc(100vw - 36px);
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:0 30px 70px -30px rgba(2,38,88,.6);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.97); transform-origin:bottom left; transition:opacity .3s, transform .3s, visibility .3s }
.a11y-panel.is-open{ opacity:1; visibility:visible; transform:none }
.a11y-title{ font-family:var(--f-display); font-weight:800; font-size:18px; color:var(--navy); margin-bottom:14px }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; font-weight:600; font-size:14.5px; color:var(--ink) }
.a11y-seg{ display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:3px }
.a11y-chip{ padding:6px 12px; border-radius:8px; font-family:var(--f-display); font-weight:600; font-size:13px; color:var(--muted); transition:.2s }
.a11y-chip[aria-pressed="true"]{ background:var(--navy); color:#fff }
.a11y-reset{ width:100%; margin-top:12px; padding:11px; border-radius:11px; background:var(--paper); font-family:var(--f-display); font-weight:600; color:var(--navy); transition:.2s }
.a11y-reset:hover{ background:var(--paper-2) }
.a11y-statement{ display:block; text-align:center; margin-top:10px; font-size:13px; color:var(--muted); text-decoration:underline }

/* ---------- Reveal ---------- */
.will-rise{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) }
.will-rise.is-in{ opacity:1; transform:none }
.will-fade{ opacity:0; transition:opacity .8s var(--ease-out) }
.will-fade.is-in{ opacity:1 }
.will-rise:nth-child(2){ transition-delay:.06s } .will-rise:nth-child(3){ transition-delay:.12s }
.will-rise:nth-child(4){ transition-delay:.06s } .will-rise:nth-child(5){ transition-delay:.12s } .will-rise:nth-child(6){ transition-delay:.18s }

/* ---------- Accessibility state overrides ---------- */
[data-text="large"]{ font-size:19px }
[data-text="large"] .h2{ font-size:clamp(32px,5vw,50px) }
[data-contrast="high"]{ --muted:#1a2740; --line:rgba(2,38,88,.4) }
[data-contrast="high"] .lede,[data-contrast="high"] .ben p,[data-contrast="high"] .prob-card p{ color:#0a1526 }
[data-contrast="high"] .lede--light,[data-contrast="high"] .step p,[data-contrast="high"] .stat span{ color:#fff }
[data-links="on"] a:not(.btn):not(.brand){ text-decoration:underline }

/* ---------- Loader ---------- */
.loader{ position:fixed; inset:0; z-index:3000; background:var(--navy); display:grid; place-items:center;
  transition:transform .8s var(--ease-out), opacity .5s ease .3s }
.loader.is-done{ transform:translateY(-101%); opacity:0; pointer-events:none }
.loader__in{ display:flex; flex-direction:column; align-items:center; gap:18px }
.loader__mark{ position:relative; display:grid; place-items:center; width:48px; height:48px }
.loader__mark svg{ position:relative; z-index:2; filter:drop-shadow(0 10px 24px rgba(0,0,0,.4)) }
.loader__ring{ position:absolute; inset:0; margin:auto; width:48px; height:48px; border:2px solid rgba(255,255,255,.5); border-radius:14px; animation:loader-ring 1.8s ease-out infinite }
.loader__ring:nth-child(3){ animation-delay:.6s }
@keyframes loader-ring{ 0%{ transform:scale(1); opacity:.55 } 100%{ transform:scale(2.5); opacity:0 } }
.loader__name{ font-family:var(--f-display); font-weight:700; font-size:26px; color:#fff; letter-spacing:-.02em }
.loader__name b{ color:var(--gold) }
.loader__bar{ width:130px; height:4px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden }
.loader__bar i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#fff,var(--gold)) }
.no-js .loader{ display:none }

/* ---------- About / Meet ScanOn ---------- */
.sec--about{ background:var(--white) }
.about__in{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,64px); align-items:center }
.about__body{ color:var(--muted); margin-top:16px; font-weight:500; font-size:16.5px; max-width:56ch }
.about__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 30px }
.about__chips li{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--navy) }
.about__chips svg{ color:#16a34a }
.about__visual{ display:grid; place-items:center; min-height:340px; position:relative }
.tapcard{ position:relative; width:min(360px,86%); aspect-ratio:1/1; display:grid; place-items:center }
.tapcard__waves{ position:absolute; inset:0; display:grid; place-items:center }
.tapcard__waves span{ position:absolute; width:130px; height:130px; border:2px solid var(--navy-2); border-radius:50%; opacity:0; animation:ripple 3.6s ease-out infinite }
.tapcard__waves span:nth-child(2){ animation-delay:1.2s } .tapcard__waves span:nth-child(3){ animation-delay:2.4s }
.review-pop{ position:relative; z-index:2; width:min(290px,90%); background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px 20px; box-shadow:0 30px 70px -30px rgba(2,38,88,.5); animation:pop-float 5s ease-in-out infinite }
.review-pop__top{ display:flex; align-items:center; gap:12px }
.review-pop__g{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); flex-shrink:0 }
.review-pop__top b{ font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--navy); display:block }
.review-pop__top span{ font-size:12.5px; color:var(--muted) }
.review-pop__stars{ display:flex; gap:3px; margin-top:14px }
.review-pop__txt{ margin-top:8px; font-weight:600; color:var(--ink); font-size:15px }
.tapcard__phone{ position:absolute; bottom:4%; inset-inline-start:2%; z-index:3; width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--navy-2),var(--navy)); box-shadow:0 16px 30px -12px rgba(9,59,157,.7); animation:pop-float 5s ease-in-out infinite .6s }
@keyframes pop-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

/* ---------- Rank rise ---------- */
.rank{ max-width:640px; margin:clamp(30px,5vw,52px) auto 0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 30px 70px -40px rgba(2,38,88,.5); overflow:hidden }
.rank__bar{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); color:var(--muted); font-weight:600; font-size:14.5px }
.rank__bar svg{ color:var(--navy-2) }
.rank__src{ margin-inline-start:auto; font-family:var(--f-display); font-weight:700; color:var(--navy); opacity:.5 }
.rank__list{ list-style:none; padding:14px; display:flex; flex-direction:column; gap:10px; position:relative }
.rank__row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:var(--paper); border:1px solid transparent; will-change:transform; transition:opacity .5s ease .4s }
.rank__row--you{ background:#fff; border-color:rgba(9,59,157,.3); box-shadow:0 12px 30px -16px rgba(9,59,157,.5); position:relative; z-index:5 }
.rank__pin{ width:34px; height:34px; border-radius:11px; background:var(--paper-2); flex-shrink:0; position:relative }
.rank__pin::after{ content:""; position:absolute; inset:9px; border-radius:50%; background:var(--muted); opacity:.35 }
.rank__row--you .rank__pin{ background:rgba(9,59,157,.12) } .rank__row--you .rank__pin::after{ background:var(--navy-2); opacity:1 }
.rank__info{ flex:1; min-width:0 }
.rank__info b{ font-family:var(--f-display); font-weight:700; font-size:15.5px; color:var(--navy); display:block }
.rank__meta{ display:flex; align-items:center; gap:8px; margin-top:5px; font-size:13px; color:var(--muted); font-weight:600 }
.rank__badge{ font-family:var(--f-display); font-weight:700; font-size:12.5px; color:var(--navy-deep); background:linear-gradient(135deg,#ffd54a,var(--gold-2)); padding:6px 12px; border-radius:99px; opacity:0; transform:scale(.6); flex-shrink:0; transition:opacity .45s ease .5s, transform .45s var(--ease-out) .5s }
.rank.is-ranked .rank__badge{ opacity:1; transform:scale(1) }
.rank.is-ranked .rank__row:not(.rank__row--you){ opacity:.55 }
.rank__cap{ text-align:center; padding:8px 20px 22px; font-size:15px; color:var(--muted) }
.rank__cap-a{ color:var(--navy-2); font-weight:800 }
.rank.is-ranked .rank__cap-b{ text-decoration:line-through; opacity:.5 }
.no-js .rank__row--you{ order:-1 } .no-js .rank__badge{ opacity:1; transform:none }

/* ---------- Hover micro-motion ---------- */
.ben__ic,.step__ic{ transition:transform .45s var(--ease-out) }
.ben:hover .ben__ic{ transform:rotate(-6deg) scale(1.08) }
.step:hover .step__ic{ transform:translateY(-5px) }
.faq__item summary:hover{ color:var(--navy-2) }

/* ---------- Component responsive ---------- */
@media (max-width:900px){
  .about__in{ grid-template-columns:1fr; text-align:center }
  .about__chips{ justify-content:center } .about__body{ margin-inline:auto }
  .about__visual{ order:-1; min-height:300px }
  .rank__cap{ font-size:14px }
}

/* ---------- Legal pages ---------- */
.legal{ padding:calc(var(--nav-h) + 48px) 0 100px; min-height:70vh }
.legal__wrap{ max-width:760px }
.back-home{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:600; font-size:14.5px; color:var(--muted); transition:color .25s }
.back-home:hover{ color:var(--navy-2) }
.back-home svg{ transform:scaleX(-1) }
.legal__wrap h1{ font-family:var(--f-display); font-weight:800; font-size:clamp(28px,4.5vw,42px); color:var(--navy); margin-top:18px; letter-spacing:-.01em }
.legal__meta{ margin-top:10px; color:var(--muted); font-size:14px; font-weight:600 }
.legal__wrap > p{ margin-top:22px; color:var(--ink); font-size:16.5px; line-height:1.75 }
.legal__wrap h2{ font-family:var(--f-display); font-weight:700; font-size:21px; color:var(--navy); margin-top:38px; margin-bottom:12px }
.legal__wrap ul{ margin:0; padding-inline-start:22px; display:flex; flex-direction:column; gap:9px }
.legal__wrap li{ color:var(--ink); font-size:16px; line-height:1.7 }
.legal__wrap li::marker{ color:var(--gold-2) }
.legal__wrap p + p{ margin-top:12px }
.legal__wrap a{ color:var(--navy-2); font-weight:600; text-decoration:underline }
.legal__wrap strong{ color:var(--navy); font-weight:700 }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero__grid{ grid-template-columns:1fr; text-align:center; gap:10px; padding-block:20px }
  .hero__stars,.hero__cta{ justify-content:center }
  .hero__lede{ margin-inline:auto } .hero__trust{ justify-content:center }
  .hero__cardwrap{ order:-1; margin-bottom:10px }
  .hero__title{ margin-top:16px }
  .prob-grid,.steps__list,.ben-grid,.stats{ grid-template-columns:1fr 1fr }
  .steps__line{ display:none }
  .product__in,.order__in{ grid-template-columns:1fr }
  .product__copy{ order:1 } .product__cards{ order:2 }
  .compare{ grid-template-columns:1fr; gap:16px } .compare__arrow{ transform:rotate(-90deg); justify-self:center }
  .foot__in{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1 } .foot__cta{ grid-column:1 / -1; justify-self:start }
}
@media (max-width:640px){
  :root{ --cw:250px; --ch:265px; --ct:13px; --nav-h:66px }
  .nav__links{ display:none } .nav .btn--nav{ display:none } .nav__burger{ display:block }
  .prob-grid,.steps__list,.stats{ grid-template-columns:1fr }
  /* benefits stay 2-up on phones — 6 tiles read better as a tidy 2×3 grid */
  .ben-grid{ grid-template-columns:1fr 1fr; gap:12px }
  .ben{ padding:22px 13px }
  .ben__ic{ width:46px; height:46px; margin-inline:auto }
  .ben__ic svg{ width:21px; height:21px }
  .ben h3{ font-size:15.5px; margin-top:14px; line-height:1.25 }
  .ben p{ font-size:12.8px; margin-top:6px; line-height:1.5 }
  .prob-card,.ben,.step{ text-align:center }
  .steps__list{ gap:32px }
  .mcta{ display:flex } .a11y-btn{ bottom:84px }
  body.mcta-on .a11y-btn{ bottom:84px }
  .foot__in{ grid-template-columns:1fr } .foot__base{ justify-content:center; text-align:center }
  .hero__trust{ gap:12px 18px }
}

/* ---------- Reduced motion / no-JS ---------- */
.no-js .will-rise,.no-js .will-fade{ opacity:1; transform:none }
.no-js .scene__hint{ display:none }
@media (prefers-reduced-motion:reduce){
  .scene,.scene__shadow,.scene__ripple span,.scene__hint svg,.step,.ben,.review-pop,.tapcard__phone,.tapcard__waves span,.loader__ring{ animation:none !important }
  .will-rise,.will-fade{ opacity:1 !important; transform:none !important }
  .steps__line i{ transform:scaleX(1) !important }
}
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important }
[data-motion="off"] .will-rise,[data-motion="off"] .will-fade{ opacity:1 !important; transform:none !important }
[data-motion="off"] .steps__line i{ transform:scaleX(1) !important }
[data-motion="off"] .scene__hint{ display:none }