/* =========================================================
   VORA Wallet — stylesheet
   Design language taken from the Wallet-web prototype:
   pure-black ground, white-glass surfaces, violet/emerald
   glow orbs, Inter 800 at tight tracking.
   ========================================================= */

:root{
  /* ground */
  --bg:        #000000;
  --g-04:      rgba(255,255,255,.04);
  --g-06:      rgba(255,255,255,.06);
  --g-08:      rgba(255,255,255,.08);
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);

  /* ink — floors chosen so every size clears WCAG AA on glass */
  --t1:        #FFFFFF;
  --t2:        rgba(255,255,255,.76);
  --t3:        rgba(255,255,255,.60);
  --t4:        rgba(255,255,255,.52);

  /* accents */
  /* card surface — recipe matched to vorachain.com's .surface */
  --surface:        linear-gradient(rgba(30,30,38,.72), rgba(14,14,19,.84));
  --surface-line:   rgba(255,255,255,.08);
  --surface-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 44px -30px rgba(0,0,0,.95);
  --brand:          #6C3CFF;

  --violet:    #8B5CF6;
  --fuchsia:   #D946EF;
  --emerald:   #10B981;
  --mint:      #34D399;
  --blue:      #3B82F6;
  --indigo:    #6366F1;
  --amber:     #FBBF24;
  --orange:    #F97316;
  --cyan:      #22D3EE;

  /* type */
  /* Noto Sans Thai carries Latin as well as Thai, and it is the face the wallet and the
     walkthrough set their type in, so all three read as one product. */
  --sans: "Noto Sans Thai", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --shell:  1200px;
  --gutter: clamp(1.15rem, 4vw, 2rem);
  --sec-y:  clamp(4rem, 8vw, 6rem);
  --r:      16px;
  --r-lg:   24px;
  --r-xl:   32px;

  --ease: cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--t1);
  font-family:var(--sans);
  font-size:clamp(.95rem,.92rem + .18vw,1.02rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.04em; line-height:1.05; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.mint{ color:var(--mint); }

/* Display headings run violet into gold — the two halves of the coin mark.
   Every stop is opaque and checked against the black ground: the weakest,
   the violet midpoint, still clears 5:1, so this passes AA as normal text
   and not merely at display sizes. */
.fade-text{
  background:linear-gradient(100deg,
    #D9C8FF 0%,
    #A98BFF 26%,
    #8B5CFF 48%,
    #C79A6E 74%,
    #F0B90B 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

.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;
}

.skip-link{
  position:absolute; left:50%; top:-64px; transform:translateX(-50%);
  z-index:200; background:#fff; color:#000;
  padding:.7rem 1.2rem; border-radius:0 0 12px 12px; font-weight:700;
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:0; }

:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:6px; }

.ico{ width:17px; height:17px; flex:none; }

/* ---------- layout ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell--narrow{ max-width:820px; }

/* .section owns rhythm; modifiers only adjust it deliberately */
.section{ position:relative; padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(1.5rem,3vw,2.5rem); }
.section--faq{ padding-top:clamp(1.5rem,3vw,2.5rem); }

/* ---------- glow orbs ---------- */
.orb{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
}
.orb--violet{
  top:-5rem; left:0; width:min(600px,90vw); height:min(600px,90vw);
  background:radial-gradient(circle, rgba(139,92,246,.22), transparent 70%);
  filter:blur(70px);
}
.orb--emerald{
  top:15%; right:0; width:min(650px,95vw); height:min(650px,95vw);
  background:radial-gradient(circle, rgba(16,185,129,.16), transparent 70%);
  filter:blur(90px);
}
.orb--blue{
  top:55%; left:20%; width:min(480px,80vw); height:min(480px,80vw);
  background:radial-gradient(circle, rgba(59,130,246,.12), transparent 70%);
  filter:blur(80px);
}
.orb--soft{ opacity:.55; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(0,0,0,.85); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:68px; }

.brand{ display:inline-flex; align-items:center; gap:.55rem; }
/* the coin mark is already a circle with its own dark field */
.brand__mark{ width:30px; height:30px; flex:none; display:block; border-radius:50%; }
.brand__mark--sm{ width:22px; height:22px; }
.brand__text{ font-weight:800; font-size:1.2rem; letter-spacing:-.02em; white-space:nowrap; }
/* the name in the coin's gold, the product word left white */
.brand__text--gold{ color:#F0B90B; }

.nav__links{ display:flex; align-items:center; gap:.2rem; }
.nav__links > a{
  padding:.5rem .78rem; border-radius:10px;
  font-size:.9rem; font-weight:500; color:var(--t3);
  transition:color .2s var(--ease), background .2s var(--ease);
}
/* The gold CTA is an `a` in here too, and this rule's `background` shorthand wiped its
   gradient while the rule below kept its near-black ink — a dark pill with invisible
   text. It gets its own hover from .btn--gold. */
.nav__links > a:not(.nav__cta):hover{ color:var(--t1); background:var(--g-06); }
.nav__cta{ margin-left:.6rem; }
.nav__links > a.nav__cta{ color:#14100A; }

.nav__toggle{
  display:none; width:42px; height:42px; flex:none; padding:0;
  background:var(--g-06); border:1px solid var(--line);
  border-radius:11px; cursor:pointer; place-items:center;
}
.nav__toggle span{
  display:block; width:16px; height:1.7px; margin:3.2px auto;
  background:#fff; border-radius:2px;
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.25rem; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.92rem; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), background .25s var(--ease),
             border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--sm{ padding:.5rem 1rem; font-size:.86rem; }
.btn--lg{ padding:.92rem 1.6rem; font-size:.98rem; }

/* Primary action in VORA's gold. Ink is near-black, not white: gold is a
   light surface, and #F0B90B against black text clears AA at 11.6:1. */
.btn--gold{
  background:linear-gradient(102deg,#FFDC63 0%,#F0B90B 52%,#D89A06 100%);
  color:#14100A;
  box-shadow:0 6px 24px -10px rgba(240,185,11,.75);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 12px 32px -10px rgba(255,209,74,.9); }

.btn--glass{ background:var(--g-06); border-color:var(--line-2); color:var(--t1); }
.btn--glass:hover{ background:var(--g-08); border-color:rgba(255,255,255,.28); transform:translateY(-2px); }

.btn--violet{
  background:linear-gradient(102deg,#8B5CF6,#6C3CFF);
  color:#fff;
  box-shadow:0 8px 26px -10px rgba(108,60,255,.9);
}
.btn--violet:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(139,92,255,1); }

.learn{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:1rem; font-size:.86rem; font-weight:600; color:var(--t2);
  transition:color .2s var(--ease);
}
.learn::after{ content:"→"; transition:transform .22s var(--ease); }
.learn:hover{ color:#fff; }
.learn:hover::after{ transform:translateX(3px); }

/* =========================================================
   SHARED
   ========================================================= */
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem; border-radius:999px;
  background:var(--g-06); border:1px solid var(--line);
  font-size:.68rem; font-weight:700; letter-spacing:.09em; color:var(--t2);
  margin-bottom:1.6rem;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--t3); flex:none; }
.dot--mint{ background:var(--mint); box-shadow:0 0 0 3px rgba(52,211,153,.2); }

.tag{
  font-size:.66rem; font-weight:700; letter-spacing:.14em;
  color:var(--t3); margin-bottom:.7rem;
}
.tag--center{ text-align:center; }

.sec-head{ max-width:640px; margin:0 auto clamp(2.4rem,4.5vw,3.4rem); text-align:center; position:relative; z-index:1; }
/* Every section heading, the showcases' included, shares one size, so no heading on the
   page reads bigger than its neighbours. It is the showcases' scale: the larger one the
   sections had pushed "one recovery phrase" onto a third line. */
.sec-title,
.show__title{ font-size:clamp(1.9rem,1.2rem + 2.6vw,2.9rem); }
/* A product name that breaks across two lines reads as two things. The heading may wrap
   wherever it likes; the name it ends on may not. */
.sec-title .fade-text{ white-space:nowrap; }
.sec-title--left{ text-align:left; margin-bottom:2rem; }
.sec-sub{ color:var(--t3); margin-top:1.1rem; font-size:clamp(.95rem,.92rem + .2vw,1.05rem); }

/* the sprite element itself never renders */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* dimensional icon tile, per vorachain.com's .ico3d */
.ico3d{
  width:80px; height:80px; border-radius:14px; flex:none;
  display:grid; place-items:center;
  margin-bottom:1.25rem;
  background:rgba(108,60,255,.14);
  border:1px solid rgba(108,60,255,.34);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.ico3d > svg{ width:56px; height:56px; display:block; }
.ico3d--gold{ background:rgba(240,185,11,.15); border-color:rgba(240,185,11,.4); }

.glass:hover .ico3d{ background:rgba(108,60,255,.22); border-color:rgba(108,60,255,.46); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,6vw,5rem) clamp(3.5rem,7vw,6rem); }
.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,5vw,4rem); align-items:center;
}

.hero__title{ font-size:clamp(2.35rem,1.1rem + 5.2vw,4.15rem); }
.hero__sub{
  margin-top:1.4rem; color:var(--t3);
  font-size:clamp(1rem,.96rem + .3vw,1.12rem); max-width:33rem;
}
.hero__sub strong{ color:var(--t1); font-weight:700; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

.platforms{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.8rem; }
.platforms li{
  display:inline-flex; align-items:center; gap:.42rem;
  font-size:.8rem; font-weight:500; color:var(--t4);
}
.platforms svg{ width:15px; height:15px; }

/* ---------- the wallet on two phones ---------- */
.hero__device{ position:relative; display:flex; justify-content:center; }

/* The picture and the two badges share one box, so the badges stay in the corners the
   phones leave clear at every width, not at the edges of a wider column. */
.hero__stage{ position:relative; width:min(520px,100%); }
.hero__shot{ display:block; border-radius:24px; }
.hero__shot img{ display:block; width:100%; height:auto; }

/* floating proof badges */
.float{
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .7rem; border-radius:14px;
  background:rgba(14,14,14,.92); border:1px solid var(--line-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 16px 40px -18px rgba(0,0,0,1);
}
/* Above the left phone, and at the foot of the right one, clear of its tab bar. */
.float--gas{ left:0; top:3%; }
.float--conf{ right:0; bottom:-4%; }
.float__ic{ width:26px; height:26px; border-radius:9px; display:grid; place-items:center; flex:none; }
.float__ic svg{ width:15px; height:15px; }
.float__ic--mint{ background:rgba(52,211,153,.18); color:var(--mint); }
.float__ic--violet{ background:rgba(139,92,246,.22); color:#C4B0FD; }
.float__txt{ font-size:.68rem; color:var(--t3); line-height:1.3; }
.float__txt strong{ display:block; font-size:.8rem; color:#fff; font-weight:700; }

/* ---------- hero stat strip ---------- */
/* Raised stat cards. Same logic as the icons: a lit top bevel, a solid
   extruded body below the face, a catch-light along its edge, then a cast
   shadow on the ground — so the card reads as an object with thickness
   rather than a rectangle with a border. */
.statbar{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.65rem,1.4vw,1rem);
  /* The owner asked twice for more room above the cards: this is half as much again
     as the second cut (+10%), itself 10% over the first. */
  margin-top:clamp(5rem,10vw,7.5rem);
  /* room for the extrusion and its shadow to sit under the last row */
  padding-bottom:8px;
}
.statbar li{
  padding:1.55rem 1.1rem 1.4rem;
  text-align:center;
  border-radius:16px;
  /* The whole card is a soft violet: a light wash on the face, lighter at the
     top where the light falls, over a rim and an extruded side of the same
     violet. The wash is thin enough that the page still shows through it.
     An outer box-shadow is clipped out from under the border box, so the
     side face still shows below the card behind a see-through face. */
  background:linear-gradient(180deg, rgba(167,139,250,.16), rgba(124,92,255,.07));
  border:1px solid rgba(167,139,250,.26);
  box-shadow:
    inset 0 1px 0 rgba(221,211,255,.24),
    0 6px 0 -1px #2A2147,
    0 8px 0 -1px rgba(167,139,250,.42),
    0 28px 46px -22px rgba(0,0,0,1);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.statbar li:hover{
  transform:translateY(-3px);
  background:linear-gradient(180deg, rgba(167,139,250,.22), rgba(124,92,255,.1));
  border-color:rgba(167,139,250,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 9px 0 -1px #342859,
    0 11px 0 -1px rgba(196,176,253,.6),
    0 34px 54px -22px rgba(108,60,255,.55);
}
.statbar__fig{
  display:block; font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);
  font-weight:800; letter-spacing:-.04em;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.statbar__k{ display:block; font-size:.72rem; color:var(--t4); margin-top:.3rem; }

/* =========================================================
   GRIDS & CARDS
   ========================================================= */
.grid{ display:grid; gap:1rem; position:relative; z-index:1; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--stretch{ align-items:stretch; }

.glass{
  padding:clamp(1.4rem,2.3vw,1.75rem);
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--surface-line);
  box-shadow:var(--surface-shadow);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.glass:hover{
  transform:translateY(-4px);
  border-color:rgba(108,60,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 28px 54px -26px rgba(108,60,255,.48);
}
.glass h3{ font-size:1.08rem; margin:.15rem 0 .5rem; letter-spacing:-.025em; }
.glass p{ color:var(--t3); font-size:.9rem; }
.glass .tag{ margin:0 0 .35rem; }

/* =========================================================
   SHOWCASE — copy beside a device, sides alternating
   ========================================================= */
.show{ position:relative; overflow:hidden; padding-block:clamp(3.5rem,7vw,6rem); }
.show__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.show--flip .show__copy{ order:2; }
.show--flip .show__vis{ order:1; }

.eyebrow-ico{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:600; color:#C4B0FD;
  margin-bottom:1.05rem;
}
.eyebrow-ico svg{ width:16px; height:16px; flex:none; }

.show__body{
  color:var(--t3); margin-top:1.1rem; max-width:30rem;
  font-size:clamp(.97rem,.94rem + .2vw,1.06rem);
}
.show .btn{ margin-top:1.8rem; }
.show__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.show__actions .btn{ margin-top:0; }
.show__fine{ font-size:.76rem; color:var(--t4); margin-top:.9rem; }

.show__vis{ position:relative; display:flex; justify-content:center; }
/* The halo is each section's colour signature, so it has to carry across a
   black ground. The gradient does the softening itself — a long tail rather
   than a heavy blur — because six large blurred layers on one page is real
   jank on a low-end phone, and because the halo then still reads anywhere
   filter:blur() is unavailable. The small blur just takes off the banding. */
.show__glow{
  position:absolute; inset:-16% -10%; z-index:0;
  border-radius:50%; pointer-events:none; filter:blur(30px);
}
.show__glow--violet {
  background:radial-gradient(closest-side,
    rgba(139,92,246,.8), rgba(124,76,250,.46) 40%, rgba(108,60,255,.17) 64%, transparent 84%);
}

/* Every showcase shows the owner's own picture of the app, served as it is. */
.show__shot{ position:relative; z-index:1; display:block; width:100%; max-width:640px; height:auto; }

/* =========================================================
   THE WALKTHROUGH BAND — what used to be a grid of cards under
   "Explore the power of VORA Wallet". The cards are gone; the
   picture of the running prototype is the section now.
   ========================================================= */
/* --- the walkthrough, embedded and live. It loads inert: a wheel over an iframe scrolls
   the frame and not the page, and someone who only meant to scroll past should not get
   stuck on it. The button hands it the pointer. --- */
.tryframe{
  /* Tall enough for the whole device inside it. The walkthrough draws an 844px handset
     capped at 90% of the frame height, so anything under ~940px clips the buttons at the
     bottom of the screen — Import wallet was the first to go. */
  /* Wider than the shell: the walkthrough needs 1024px before it lays out in three
     columns, and everything it draws scales with the room it gets. */
  /* Inside the shell, so its edges sit exactly under the heading's. */
  position:relative; width:100%;
  height:clamp(460px,48vw,760px);
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--surface-shadow);
  background:#050308;
}
.tryframe iframe{
  /* Sized and scaled from main.js: the walkthrough is laid out at a fixed size and then
     shrunk to whatever the box is, so nothing is ever cropped. */
  position:absolute; top:0; left:0; width:100%; height:100%;
  transform-origin:top left;
  border:0;
}
/* A phone gets the wallet full-bleed inside the frame, so the box turns portrait. */
@media (max-width:640px){
  .tryframe{ height:min(165vw,680px); }
}


/* =========================================================
   DOWNLOAD
   ========================================================= */
.dl{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(1.3rem,2.2vw,1.6rem);
  border-radius:var(--r-lg);
  background:var(--g-04); border:1px solid var(--line);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.dl:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--g-08); }
.dl__ic{
  width:40px; height:40px; border-radius:12px; margin-bottom:1rem;
  display:grid; place-items:center;
  background:var(--g-08); border:1px solid var(--line); color:var(--t2);
}
.dl__ic svg{ width:20px; height:20px; }
.dl strong{ font-size:.96rem; font-weight:700; letter-spacing:-.02em; }
.dl em{ font-style:normal; font-size:.8rem; color:var(--t4); margin-top:.2rem; }

/* The one platform that exists carries the accent; the rest sit back and say "soon".
   Hover lifts only the live tile — a card that rises under the pointer promises a click. */
.dl--live{ border-color:rgba(240,185,11,.42); background:linear-gradient(180deg,rgba(240,185,11,.10),rgba(240,185,11,.03)); }
.dl--live .dl__ic{ color:#F0B90B; border-color:rgba(240,185,11,.38); }
.dl--soon{ opacity:.55; }
.dl--soon:hover{ transform:none; border-color:var(--line); background:var(--g-04); }


/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:grid; gap:.55rem; }
.qa{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--g-04);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.qa[open]{ border-color:var(--line-2); background:var(--g-06); }
.qa summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.05rem 3rem 1.05rem 1.2rem;
  font-weight:600; font-size:.98rem; letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:""; position:absolute; right:1.3rem; top:1.35rem;
  width:9px; height:9px;
  border-right:2px solid var(--t3); border-bottom:2px solid var(--t3);
  transform:rotate(45deg); transition:transform .28s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-135deg); top:1.5rem; }
.qa__body{ padding:0 1.4rem 1.2rem; }
.qa__body p{ color:var(--t3); font-size:.91rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ border-top:1px solid var(--line); padding-block:clamp(2.8rem,5vw,4rem) 2rem; }
.foot__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(2rem,4vw,3rem); }
.foot__tag{ color:var(--t4); font-size:.86rem; margin-top:1rem; max-width:22rem; }

/* Tiles carry their own colour in the sprite, so the anchor stays transparent —
   the same arrangement vorachain.com uses. 44px is also the touch-target floor. */
.social{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.social a{
  width:44px; height:44px; border-radius:13px;
  display:grid; place-items:center;
  transition:transform .25s var(--ease), filter .25s var(--ease);
}
.social a:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.social svg{ width:44px; height:44px; display:block; }
.foot__col{ display:flex; flex-direction:column; gap:.6rem; }
.foot__col h3{ font-size:.68rem; font-weight:700; letter-spacing:.14em; color:var(--t3); margin-bottom:.3rem; }
.foot__col a{ font-size:.88rem; color:var(--t3); width:fit-content; transition:color .2s var(--ease); }
.foot__col a:hover{ color:#fff; }

/* Copyright at one end, the address to write to at the other; they stack on a phone,
   where a single row would run the two into each other. */
.foot__bottom{
  margin-top:clamp(2.2rem,4vw,3rem); padding-top:1.5rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem; font-size:.78rem; color:var(--t4);
}
.foot__mail{ color:var(--t4); transition:color .2s var(--ease); }
.foot__mail:hover{ color:var(--t1); }

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(16px); }
[data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1040px){
  .hero__inner{ grid-template-columns:1fr; gap:3rem; }
  .hero__copy{ max-width:38rem; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .nav__toggle{ display:grid; }
  .nav__links{
    position:fixed; inset:68px 0 auto; z-index:99;
    flex-direction:column; align-items:stretch; gap:.15rem;
    padding:1rem var(--gutter) 1.5rem;
    background:rgba(0,0,0,.97);
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    /* pointer-events, not visibility alone, is what guarantees the closed
       drawer cannot swallow taps: visibility is transitioned, so it is
       briefly still "visible" while animating out. */
    pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav__links.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav__links > a{ padding:.85rem .6rem; font-size:1rem; }
  .nav__cta{ margin:.6rem 0 0; justify-content:center; padding:.85rem 1rem; }

  .statbar{ grid-template-columns:repeat(3,1fr); }

  /* stacked, the copy always reads before its device — the flip is
     a desktop-only zig-zag, not a reading order */
  .show__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .show--flip .show__copy{ order:1; }
  .show--flip .show__vis{ order:2; }
  .show__copy{ max-width:38rem; }
}

@media (max-width:680px){
  .grid--3,.grid--4{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .sec-head{ text-align:left; margin-inline:0; }
  .tag--center{ text-align:left; }
}

@media (max-width:560px){
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .statbar{ grid-template-columns:1fr; }

  /* Phones: a showcase's copy is centred over its picture, and its buttons stack full
     width, one to a row, as the hero's do. */
  .show__copy{ text-align:center; margin-inline:auto; }
  .show__body{ margin-inline:auto; }
  .show__actions{ flex-direction:column; align-items:stretch; }
  .show .btn{ width:100%; }
}

@media (max-width:420px){
  .foot__grid{ grid-template-columns:1fr; }
  /* Too narrow for badges over the picture: they follow it instead. */
  .float{ position:static; margin:.5rem auto 0; }
  .hero__stage{ display:flex; flex-direction:column; align-items:center; }
}

/* touch targets */
@media (pointer:coarse){
  .nav__links > a{ min-height:44px; display:flex; align-items:center; }
  .foot__col a{ min-height:34px; display:flex; align-items:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

@media print{
  .nav,.orb,.float{ display:none; }
  body{ background:#fff; color:#000; }
}