/* ==========================================================================
   Halal 360 — homepage
   Section order matches the page: base → nav → hero → sections → footer.
   ========================================================================== */

/* --- Reset & base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--t-body);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.02em;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

:focus-visible{outline:3px solid var(--green-500);outline-offset:3px;border-radius:6px}
.section--dark :focus-visible{outline-color:var(--green-300)}

.skip{
  position:absolute;left:var(--s-2);top:-100px;z-index:200;
  padding:12px 20px;border-radius:var(--r-sm);
  background:var(--green-700);color:#fff;font-weight:700;transition:top .2s var(--ease);
}
.skip:focus{top:var(--s-2)}

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

/* --- Layout primitives --------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.section--mint{background:var(--mint)}
.section--ivory{background:var(--ivory)}
.section--surface{background:var(--surface)}
.section--dark{background:var(--dark-bg);color:var(--ink-on-dark)}
.section--dark .lead,.section--dark .muted{color:var(--ink-2-on-dark)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-700);margin-bottom:var(--s-2);
}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--gold);border-radius:2px}
.section--dark .eyebrow{color:var(--green-300)}

.h2{font-size:var(--t-h2);max-width:19ch;text-wrap:balance}
.h2--wide{max-width:26ch}
.lead{font-size:var(--t-lead);color:var(--ink-2);max-width:56ch;margin-top:var(--s-2);line-height:1.6}
.muted{color:var(--ink-2)}
.center{text-align:center}
.center .h2,.center .lead{margin-inline:auto}
.center .eyebrow::before{display:none}

.sec-head{margin-bottom:var(--s-6)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-md);border:1px solid transparent;
  font-weight:700;font-size:var(--t-sm);letter-spacing:-.01em;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
  will-change:transform;
}
.btn svg{width:18px;height:18px;flex:none;transition:transform var(--dur-fast) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--green-700);color:#fff;box-shadow:0 6px 18px rgba(8,122,82,.26)}
.btn--primary:hover{background:var(--green-600);transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,122,82,.32)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--surface);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.section--dark .btn--ghost{color:var(--ink-on-dark);border-color:rgba(255,255,255,.22)}
.section--dark .btn--ghost:hover{background:rgba(255,255,255,.07)}
.btn--light{background:#fff;color:var(--green-900)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.btn:active{transform:translateY(0)}

/* Store buttons. Official Apple/Google badge art can be dropped into
   assets/img/badges/ and swapped in; until then these are branded, correctly
   labelled links rather than recreated store logos. */
.stores{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.storebtn{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 22px 12px 18px;border-radius:var(--r-md);
  background:#000;color:#fff;border:1px solid rgba(255,255,255,.18);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.storebtn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.storebtn svg{width:26px;height:26px;flex:none;fill:currentColor}
.storebtn span{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;opacity:.72;line-height:1.5}
.storebtn strong{display:block;font-size:1.0625rem;font-weight:700;line-height:1.18;letter-spacing:-.02em}
.section:not(.section--dark) .storebtn{border-color:transparent}

/* --- Navigation ---------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease);
}
.nav.is-stuck{
  background:rgba(247,249,246,.82);backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);border-bottom-color:var(--border);
}
.nav__inner{display:flex;align-items:center;gap:var(--s-4);width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.125rem;letter-spacing:-.03em;color:#fff}
.brand img{width:34px;height:34px;border-radius:50%}
.nav.is-stuck .brand{color:var(--ink)}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__links a{
  padding:9px 14px;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;
  color:rgba(255,255,255,.82);transition:color .2s var(--ease),background .2s var(--ease);
}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav.is-stuck .nav__links a{color:var(--ink-2)}
.nav.is-stuck .nav__links a:hover{color:var(--ink);background:var(--muted)}
.nav__cta{padding:11px 20px;border-radius:var(--r-sm);background:var(--green-700);color:#fff!important;font-weight:700;font-size:var(--t-sm)}
.nav__cta:hover{background:var(--green-600)!important}

.nav__toggle{
  display:none;margin-left:auto;width:44px;height:44px;padding:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm);cursor:pointer;place-items:center;
}
.nav.is-stuck .nav__toggle{background:var(--muted);border-color:var(--border-strong)}
.nav__toggle svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}
.nav.is-stuck .nav__toggle svg{stroke:var(--ink)}
.nav__toggle .i-close{display:none}
.nav__toggle[aria-expanded="true"] .i-open{display:none}
.nav__toggle[aria-expanded="true"] .i-close{display:block}

.nav__mobile{
  position:fixed;inset:var(--nav-h) 0 auto;z-index:99;
  background:rgba(247,249,246,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);padding:var(--s-2) var(--gutter) var(--s-4);
  display:grid;gap:2px;
  transform-origin:top;opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  visibility:hidden;max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
}
.nav__mobile.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.nav__mobile a{padding:14px 12px;border-radius:var(--r-sm);font-weight:600;color:var(--ink)}
.nav__mobile a:hover{background:var(--muted)}
.nav__mobile .btn{margin-top:var(--s-2);width:100%}

@media (max-width:960px){
  .nav__links{display:none}
  .nav__toggle{display:grid}
}

/* --- Phone mockup (shared) ----------------------------------------------- */
.phone{
  position:relative;width:100%;max-width:290px;aspect-ratio:9/20;
  background:linear-gradient(160deg,#2A332D,#141A16 42%,#202722);
  border-radius:44px;padding:9px;box-shadow:var(--sh-phone);
  flex:none;
}
.phone::after{ /* screen edge highlight */
  content:"";position:absolute;inset:0;border-radius:44px;
  border:1px solid rgba(255,255,255,.12);pointer-events:none;
}
.phone__screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:36px;background:var(--dark-surface);
}
.phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.phone__notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2;
  width:34%;height:22px;background:#0B0F0D;border-radius:var(--r-pill);
}
.phone--sm{max-width:210px;border-radius:34px;padding:7px}
.phone--sm,.phone--sm::after{border-radius:34px}
.phone--sm .phone__screen{border-radius:28px}
.phone--sm .phone__notch{height:16px;top:6px}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;background:var(--dark-bg);color:var(--ink-on-dark);
  padding-block:calc(var(--nav-h) + clamp(56px,7vw,104px)) clamp(64px,7vw,104px);
}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg::before{ /* emerald key light */
  content:"";position:absolute;width:min(1100px,120%);aspect-ratio:1;
  right:-14%;top:-38%;border-radius:50%;
  background:radial-gradient(circle,rgba(8,122,82,.55),rgba(8,122,82,.16) 42%,transparent 68%);
  filter:blur(24px);
}
.hero__bg::after{ /* cool fill from below-left */
  content:"";position:absolute;width:760px;aspect-ratio:1;left:-24%;bottom:-46%;border-radius:50%;
  background:radial-gradient(circle,rgba(32,164,99,.22),transparent 66%);filter:blur(30px);
}
/* Islamic geometry, deliberately near-invisible (~4%) */
.hero__pattern{
  position:absolute;inset:0;opacity:.045;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M60 0 120 60 60 120 0 60Z'/%3E%3Cpath d='M60 22 98 60 60 98 22 60Z'/%3E%3Cpath d='M0 0h120v120H0z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 78%);
}
.hero__inner{
  position:relative;display:grid;gap:clamp(40px,5vw,72px);align-items:center;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
}
.hero h1{font-size:var(--t-display);letter-spacing:-.035em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--green-300)}
.hero .lead{margin-top:var(--s-3);max-width:48ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.hero__note{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--ink-2-on-dark);display:flex;align-items:flex-start;gap:8px}
.hero__note svg{width:15px;height:15px;stroke:var(--green-300);stroke-width:2;fill:none;flex:none;margin-top:3px}
.hero__visual{display:flex;justify-content:center;position:relative}
.hero__visual .phone{max-width:308px}
.hero__ring{ /* scanning ring behind the device */
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(460px,116%);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(123,208,154,.24);
}
.hero__ring::before{
  content:"";position:absolute;inset:12%;border-radius:50%;
  border:1px dashed rgba(123,208,154,.18);
}
/* A lit point riding the outer ring. The ring itself is a plain circle, so
   rotating it only reads as motion once something sits on its edge. */
.hero__ring::after{
  content:"";position:absolute;top:-4px;left:50%;margin-left:-4px;
  width:8px;height:8px;border-radius:50%;background:var(--green-300);
  box-shadow:0 0 12px 2px rgba(123,208,154,.55);
}

/* --- Hero motion ---------------------------------------------------------
   Ambient loops only. The entrance and the scroll-linked zoom live in
   motion.js, because a CSS animation on these elements would out-rank the
   inline transforms GSAP writes. */
@keyframes orbit{to{rotate:360deg}}
@keyframes orbit-back{to{rotate:-360deg}}
@keyframes ping{
  0%{transform:translate(-50%,-50%) scale(.72);opacity:0}
  25%{opacity:.5}
  100%{transform:translate(-50%,-50%) scale(1.18);opacity:0}
}
@keyframes drift-a{to{transform:translate3d(-4%,5%,0) scale(1.07)}}
@keyframes drift-b{to{transform:translate3d(6%,-4%,0) scale(1.09)}}
@keyframes pan{to{background-position:120px 120px}}
@keyframes float{to{transform:translateY(-10px)}}

.hero__ring{animation:orbit 60s linear infinite;will-change:rotate}
.hero__ring::before{animation:orbit-back 45s linear infinite;will-change:rotate}
/* Radar sweep behind the device. Absolutely positioned, so it stays out of
   .hero__visual's flex flow and paints behind the phone. */
.hero__visual::before{
  content:"";position:absolute;top:50%;left:50%;z-index:0;
  width:min(460px,116%);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(123,208,154,.3);pointer-events:none;
  animation:ping 4.5s var(--ease-out) infinite;
}
.hero__visual .phone{animation:float 6s var(--ease) 1s infinite alternate;will-change:transform}

/* Transform only — re-running filter:blur() every frame is expensive, while
   moving the already-blurred layer stays on the compositor. */
.hero__bg::before{animation:drift-a 18s var(--ease) infinite alternate;will-change:transform}
.hero__bg::after{animation:drift-b 24s var(--ease) infinite alternate;will-change:transform}
.hero__pattern{animation:pan 60s linear infinite}

/* --- Trust strip --------------------------------------------------------- */
.trust{background:var(--dark-bg);color:var(--ink-on-dark);border-top:1px solid var(--dark-border);padding-block:var(--s-5)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.trust__item{display:flex;align-items:flex-start;gap:14px;color:var(--ink-on-dark)}
.trust__item svg{width:22px;height:22px;flex:none;margin-top:2px;stroke:var(--green-300);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.trust__item b{display:block;font-size:var(--t-sm);font-weight:700;letter-spacing:-.01em}
.trust__item span{display:block;font-size:var(--t-xs);color:var(--ink-2-on-dark)}

/* --- Split layout (text beside a device) --------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.split--flip .split__visual{order:-1}
.split__visual{display:flex;justify-content:center;position:relative}

/* --- Overlapping device cluster ------------------------------------------ */
.cluster{display:flex;justify-content:center;align-items:center;margin-top:var(--s-7);position:relative}
.cluster .phone{margin-inline:-22px}
.cluster .phone--sm{margin-top:52px;opacity:.96}
.cluster .phone:nth-child(2){z-index:3;position:relative}
/* Side devices start tucked behind the centre one and fan out on reveal. */
.cluster .phone--sm{transition:transform var(--dur-slow) var(--ease-out) .15s,opacity var(--dur-slow) var(--ease-out) .15s}
.cluster .phone:nth-child(1){transform:rotate(0) translateX(56px) scale(.94)}
.cluster .phone:nth-child(3){transform:rotate(0) translateX(-56px) scale(.94)}
.cluster.is-in .phone:nth-child(1){transform:rotate(-5deg)}
.cluster.is-in .phone:nth-child(3){transform:rotate(5deg)}

/* --- Numbered step timeline ---------------------------------------------- */
.steps{display:grid;gap:var(--s-1);counter-reset:step}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);padding:var(--s-3) 0;position:relative}
.step + .step{border-top:1px solid var(--border)}
.section--mint .step + .step{border-top-color:rgba(4,77,52,.09)}
.step__n{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--surface);color:var(--green-700);
  font-weight:800;font-size:var(--t-sm);border:1px solid var(--border-strong);
  transition:transform var(--dur-slow) var(--ease-out);transition-delay:inherit;
}
[data-stagger] > .step .step__n{transform:scale(.7)}
[data-stagger].is-in > .step .step__n{transform:scale(1)}
.step h3{font-size:1.0625rem;margin-bottom:6px;letter-spacing:-.015em}
.step p{color:var(--ink-2);font-size:var(--t-sm);max-width:46ch}

/* --- Cards --------------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s-4);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--border-strong)}
.card__icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--mint);margin-bottom:var(--s-3);
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.card:hover .card__icon{transform:scale(1.08) rotate(-4deg);background:var(--halal-bg)}
.card__icon svg{width:22px;height:22px;stroke:var(--green-700);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.0625rem;margin-bottom:8px;letter-spacing:-.015em}
.card p{color:var(--ink-2);font-size:var(--t-sm)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}

/* --- Status legend ------------------------------------------------------- */
.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);margin-top:var(--s-6)}
.legend__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-3)}
.legend__tag{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:700;margin-bottom:14px;
}
.legend__tag svg{width:14px;height:14px;stroke-width:2.4;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.legend__tag--halal{background:var(--halal-bg);color:#0E7A46}
.legend__tag--mushbooh{background:var(--mushbooh-bg);color:var(--mushbooh-ink)}
.legend__tag--haram{background:var(--haram-bg);color:#B32C2C}
.legend__tag--unknown{background:var(--muted);color:var(--ink-2)}
.legend__item p{font-size:var(--t-sm);color:var(--ink-2)}

/* --- Additive walkthrough ------------------------------------------------ */
.enum{display:grid;gap:var(--s-2)}
.enum__row{
  display:flex;align-items:center;gap:var(--s-3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px var(--s-3);
}
.enum__code{
  width:60px;height:60px;flex:none;border-radius:16px;display:grid;place-items:center;
  background:var(--mushbooh-bg);color:var(--mushbooh-ink);font-weight:800;font-size:.95rem;letter-spacing:-.02em;
}
.enum__row b{display:block;font-size:var(--t-sm);letter-spacing:-.01em}
.enum__sub{display:block;font-size:var(--t-xs);color:var(--ink-2);margin-top:2px}
.enum__arrow{display:grid;place-items:center;color:var(--ink-3)}
.enum__arrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;animation:bob 1.8s var(--ease) infinite alternate}
@keyframes bob{to{transform:translateY(5px)}}
.note{
  position:relative;overflow:hidden;display:flex;gap:14px;
  padding:var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 5px);
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);
}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.note svg{width:20px;height:20px;flex:none;stroke:var(--gold);stroke-width:1.9;fill:none;margin-top:2px}
.note p{font-size:var(--t-sm);color:var(--ink-2)}
.note b{color:var(--ink)}

/* --- Madhhab ------------------------------------------------------------- */
.schools{display:grid;gap:10px;margin-top:var(--s-4)}
.school{
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:rgba(255,255,255,.72);border:1px solid #EFE7D5;border-radius:var(--r-md);
}
.school__dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;position:relative}
.school__dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--gold);animation:halo 2.6s var(--ease-out) infinite;
}
.school:nth-child(2) .school__dot::after{animation-delay:.65s}
.school:nth-child(3) .school__dot::after{animation-delay:1.3s}
.school:nth-child(4) .school__dot::after{animation-delay:1.95s}
@keyframes halo{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.school b{font-size:var(--t-sm);letter-spacing:-.01em}
.school__desc{font-size:var(--t-xs);color:var(--ink-2);margin-left:auto;text-align:right}
.verse{
  max-width:34rem;padding:var(--s-5) var(--s-4) var(--s-4);
  background:rgba(255,255,255,.68);border:1px solid #EFE7D5;border-radius:var(--r-2xl);
  position:relative;
}
.verse::before{
  content:"";position:absolute;top:0;left:var(--s-4);right:var(--s-4);height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-out) .35s;
}
.verse.is-in::before{transform:scaleX(1)}
.verse__ar{
  font-family:'Scheherazade New',serif;font-size:clamp(2.1rem,1.5rem+2.4vw,3.4rem);
  line-height:1.95;direction:rtl;color:var(--green-900);font-weight:600;
}
.verse__en{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--ink-2);font-style:italic}
.verse__ref{margin-top:10px;font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}

/* --- Tools showcase (device row) ----------------------------------------- */
.showcase{display:flex;gap:var(--s-3);overflow-x:auto;padding:var(--s-2) var(--gutter) var(--s-4);
  margin-inline:calc(var(--gutter)*-1);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.showcase::-webkit-scrollbar{height:6px}
.showcase::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
.showcase__item{scroll-snap-align:center;flex:none;text-align:center}
.showcase[data-stagger] > .showcase__item{transform:translateY(20px) scale(.96)}
.showcase[data-stagger].is-in > .showcase__item{transform:none}
.showcase__item .phone{max-width:238px}
.showcase__item b{display:block;margin-top:var(--s-3);font-size:var(--t-sm);letter-spacing:-.01em}
.showcase__item span{display:block;font-size:var(--t-xs);color:var(--ink-2);margin-top:2px}
@media (min-width:1100px){
  .showcase{justify-content:center;overflow:visible;margin-inline:0;padding-inline:0}
}

/* --- Data sources -------------------------------------------------------- */
.source{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s-4)}
.source__badge{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--mint);color:var(--green-700);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.source h3{font-size:1.0625rem;margin-bottom:8px}
.source p{font-size:var(--t-sm);color:var(--ink-2)}

/* --- FAQ ----------------------------------------------------------------- */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--border)}
.faq__item{border-bottom:1px solid var(--border)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:22px 4px;background:none;border:0;cursor:pointer;text-align:left;
  font-weight:700;font-size:1.0625rem;letter-spacing:-.015em;color:var(--ink);
}
.faq__q:hover{color:var(--green-700)}
.faq__q svg{width:20px;height:20px;flex:none;stroke:var(--green-700);stroke-width:2;fill:none;stroke-linecap:round;transition:transform .3s var(--ease)}
.faq__q[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq__a{overflow:hidden;height:0;transition:height .32s var(--ease)}
.faq__a > div{padding:0 4px 24px;color:var(--ink-2);font-size:var(--t-sm);max-width:68ch}

/* --- Final CTA ----------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--dark-bg);color:var(--ink-on-dark)}
.cta__bg{position:absolute;inset:0;pointer-events:none}
.cta__bg::before{
  content:"";position:absolute;width:900px;aspect-ratio:1;left:-10%;bottom:-56%;border-radius:50%;
  background:radial-gradient(circle,rgba(8,122,82,.5),transparent 66%);filter:blur(30px);
  animation:drift-b 22s var(--ease) infinite alternate;will-change:transform;
}
.cta__inner{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,5vw,72px);align-items:center}
.cta h2{font-size:var(--t-h2);max-width:16ch;text-wrap:balance}
.cta .stores{margin-top:var(--s-5)}
.cta__visual{display:flex;justify-content:center}
.cta__visual .phone{max-width:250px;margin-bottom:calc(var(--section-y) * -.55);animation:float 7s var(--ease) infinite alternate}

/* --- Footer -------------------------------------------------------------- */
.footer{background:var(--dark-surface);color:var(--ink-2-on-dark);padding-block:var(--s-7) var(--s-4);font-size:var(--t-sm)}
.footer__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--s-5);padding-bottom:var(--s-6)}
.footer .brand{color:#fff;margin-bottom:var(--s-2)}
.footer__about{max-width:36ch;font-size:var(--t-sm)}
.footer h4{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-on-dark);margin-bottom:var(--s-2);font-weight:700}
.footer li + li{margin-top:10px}
.footer a:hover{color:var(--green-300)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);justify-content:space-between;align-items:center;
  padding-top:var(--s-4);border-top:1px solid var(--dark-border);font-size:var(--t-xs);
}
.footer__disclaimer{max-width:72ch;font-size:var(--t-xs);line-height:1.7;padding-bottom:var(--s-4);color:var(--ink-3);opacity:.85}

/* --- Scroll reveal -------------------------------------------------------
   One base fade-up plus directional variants, so a section can arrive from
   the side it sits on rather than everything sliding up identically.
   is-in is added once by the observer in main.js and never removed. */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),
             filter var(--dur) var(--ease-out);
}
.reveal--left{transform:translateX(-28px)}
.reveal--right{transform:translateX(28px)}
.reveal--scale{transform:scale(.95)}
.reveal--blur{filter:blur(6px)}
.reveal.is-in{opacity:1;transform:none;filter:none}

/* Staggered container: the children carry the motion, main.js sets the
   per-child transition-delay. */
[data-stagger]{opacity:1;transform:none}
[data-stagger] > *{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
[data-stagger].is-in > *{opacity:1;transform:none}

/* --- GSAP-driven mode (motion.js) ----------------------------------------
   motion.js adds .has-motion to <html> and takes over the entrances, hero and
   cluster with per-frame inline writes; the transitions that would smooth
   those writes a second time are switched off here. */
.has-motion .reveal,.has-motion [data-stagger] > *,.has-motion .cluster .phone--sm{transition:none}
.has-motion [data-stagger] > .step .step__n{transform:none}
.has-motion .hero__visual{will-change:transform}

/* Masked line reveal for the hero headline: each word sits in a clipping span */
.has-motion .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.has-motion .hero h1 .w > span{display:inline-block;will-change:transform}

/* Scanner steps: the one in focus is inked, the rest recede */
.has-motion .step h3,.has-motion .step p{transition:color .45s var(--ease)}
.has-motion .step:not(.is-active) h3,.has-motion .step:not(.is-active) p{color:var(--ink-3)}
.has-motion .step__n{transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.has-motion .step.is-active .step__n{background:var(--green-700);color:#fff;border-color:var(--green-700);transform:scale(1.08)}
@media (min-width:1025px){
  .has-motion #scanner .split__visual{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start}
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .hero__inner,.cta__inner{grid-template-columns:1fr;text-align:center}
  .hero h1,.hero .lead,.cta h2,.cta .lead{margin-inline:auto}
  .hero__cta,.cta .stores,.hero__note{justify-content:center}
  .hero__visual{margin-top:var(--s-5)}
  .cta__visual .phone{margin-bottom:calc(var(--section-y) * -.42)}
  .split,.split--flip .split__visual{grid-template-columns:1fr;order:0}
  .split .h2,.split .lead{max-width:none}
  .legend{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
}
@media (max-width:768px){
  .trust__grid{grid-template-columns:repeat(2,1fr);gap:var(--s-3) var(--s-2)}
  .cluster .phone{margin-inline:-26px}
  .cluster .phone--sm{max-width:150px;margin-top:38px}
  .cluster .phone:nth-child(2){max-width:216px}
  .hero__visual .phone{max-width:252px}
  .grid-2{grid-template-columns:1fr}
  .enum__row{gap:var(--s-2);padding:14px var(--s-2)}
  .enum__code{width:50px;height:50px;font-size:.85rem}
  .school{flex-wrap:wrap;gap:8px}
  .school span{margin-left:0;flex-basis:100%;text-align:left}
}
@media (max-width:560px){
  /* Three devices cannot fit without clipping; the centre one carries it. */
  .cluster .phone--sm{display:none}
  .cluster .phone:nth-child(2){max-width:240px;transform:none}
  .grid-3,.legend{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:var(--s-4)}
  .btn,.storebtn{width:100%}
  .hero__cta,.stores{width:100%}
  .hero__visual .phone{max-width:228px}
  .cta__visual .phone{max-width:210px}
}

/* --- Motion & print ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  /* Ambient loops are removed outright rather than frozen on a mid-frame. */
  .hero__ring,.hero__ring::before,.hero__visual::before,.hero__visual .phone,
  .hero__bg::before,.hero__bg::after,.hero__pattern,.cta__bg::before,.cta__visual .phone,
  .enum__arrow svg,.school__dot::after{animation:none!important}
  .hero__visual::before{display:none}
  .reveal,[data-stagger] > *,.hero__inner *{opacity:1!important;transform:none!important;filter:none!important}
  .cluster .phone:nth-child(1){transform:rotate(-5deg)!important}
  .cluster .phone:nth-child(3){transform:rotate(5deg)!important}
  .verse::before{transform:none!important}
}