/* ================================================================
   ORUKKA GLASSPAY — style.css
   Minimal · Light · Bright · Lux
   Display: Fraunces · Body: Inter · Data/HUD: Space Mono
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── Tokens ────────────────────────────────────────────── */
:root {
  --paper:   #FBFAF6;
  --paper2:  #F1ECE3;
  --paper3:  #E8E2D6;
  --ink:     #181815;
  --ink2:    #6F6B62;
  --ink3:    #A8A399;
  --line:    rgba(24,24,21,0.09);
  --line2:   rgba(24,24,21,0.16);
  --sage:    #2F5C42;
  --mint:    #4CAF7D;
  --mint-bg: rgba(76,175,125,0.1);
  --cognac:  #C17F4A;
  --cognac-bg: rgba(193,127,74,0.1);
  --card:    #FFFFFF;
  --shadow-sm: 0 2px 16px rgba(24,24,21,0.05);
  --shadow:    0 8px 40px rgba(24,24,21,0.07);
  --shadow-lg: 0 20px 70px rgba(24,24,21,0.1);
  --ff-display: 'Fraunces', serif;
  --ff-body: 'Inter', sans-serif;
  --ff-mono: 'Space Mono', monospace;
  --max: 1180px;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --r: 14px;
  --r-lg: 24px;
  --r-xl: 32px;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--ff-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-size:16px;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
section { padding:6.5rem 0; }
:focus-visible { outline:2px solid var(--sage); outline-offset:3px; }

/* ── Layout ────────────────────────────────────────────── */
.container { max-width:var(--max); margin:0 auto; padding:0 2rem; }

/* ── Typography ────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--ff-display); letter-spacing:-0.01em; color:var(--ink); }
h1 { font-size:clamp(3rem,7vw,6.4rem); font-weight:600; line-height:1.02; letter-spacing:-0.02em; }
h2 { font-size:clamp(2rem,4vw,3.4rem); font-weight:600; line-height:1.08; }
h3 { font-size:1.3rem; font-weight:600; }
.lead { font-size:1.1rem; color:var(--ink2); font-weight:300; line-height:1.8; }
.eyebrow {
  font-family:var(--ff-mono); font-size:0.72rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--sage);
  display:flex; align-items:center; gap:0.65rem; margin-bottom:1.1rem;
}
.eyebrow::before { content:''; display:block; width:22px; height:1px; background:var(--cognac); flex-shrink:0; }
.eyebrow--c { justify-content:center; }
.eyebrow--w { color:var(--mint); }
.eyebrow--w::before { background:rgba(255,255,255,0.3); }
.text-mint { color:var(--mint); }
.text-cognac { color:var(--cognac); }
.text-sage { color:var(--sage); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:var(--ff-body); font-weight:600; font-size:0.92rem;
  padding:0.95rem 1.9rem; border-radius:100px;
  cursor:pointer; transition:all 0.3s var(--ease); border:1px solid transparent; line-height:1;
}
.btn-dark { background:var(--ink); color:var(--paper); }
.btn-dark:hover { background:#000; box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--line2); }
.btn-outline:hover { border-color:var(--ink); background:var(--paper2); }
.btn-mint { background:var(--mint); color:#0E2A1C; }
.btn-mint:hover { background:#3F9A6B; box-shadow:0 8px 30px rgba(76,175,125,0.35); transform:translateY(-2px); }
.btn-lg { padding:1.1rem 2.4rem; font-size:0.98rem; }

/* ── Nav ───────────────────────────────────────────────── */
#nav {
  position:fixed; top:36px; left:0; right:0; z-index:200;
  background:rgba(251,250,246,0.85);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
  padding:1.4rem 0;
  transition:all 0.35s var(--ease);
}
#nav.scrolled { border-bottom-color:var(--line); padding:1rem 0; box-shadow:var(--shadow-sm); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav-logo { display:flex; align-items:center; gap:0.65rem; flex-shrink:0; }
.nav-logo-mark {
  width:34px; height:22px; border:1.6px solid var(--ink); border-radius:6px;
  position:relative; flex-shrink:0;
}
.nav-logo-mark::before, .nav-logo-mark::after {
  content:''; position:absolute; top:50%; width:7px; height:7px;
  border:1.6px solid var(--ink); border-radius:50%; transform:translateY(-50%);
}
.nav-logo-mark::before { left:2px; }
.nav-logo-mark::after { right:2px; }
.nav-logo-text { font-family:var(--ff-display); font-weight:600; font-size:1.08rem; letter-spacing:-0.01em; }
.nav-logo-text span { color:var(--mint); font-style:italic; }
.nav-links { display:flex; align-items:center; gap:2.4rem; }
.nav-links a { font-size:0.88rem; font-weight:500; color:var(--ink2); transition:color 0.2s; }
.nav-links a:hover { color:var(--ink); }
.nav-links--open {
  display:flex !important; flex-direction:column; position:absolute; top:100%; left:0; right:0;
  background:rgba(251,250,246,0.99); padding:1.5rem 2rem; gap:1.25rem;
  border-bottom:1px solid var(--line); box-shadow:var(--shadow);
}
.nav-right { display:flex; align-items:center; gap:0.75rem; flex-shrink:0; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-hamburger span { width:22px; height:1.5px; background:var(--ink); display:block; }

/* ── Hero ──────────────────────────────────────────────── */
#hero { padding-top:11.5rem; padding-bottom:0; position:relative; overflow:hidden; }
.hero-top { max-width:760px; margin-bottom:3.5rem; }
.hero-top .eyebrow { margin-bottom:1.5rem; }
.hero-title { margin-bottom:1.5rem; }
.hero-title em { font-style:italic; color:var(--sage); }
.hero-lead { max-width:480px; margin-bottom:2.25rem; }
.hero-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:0; }
.hero-actions .note { font-family:var(--ff-mono); font-size:0.74rem; color:var(--ink3); letter-spacing:0.04em; }
/* Hero image */
.hero-frame {
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  aspect-ratio:16/9; background:var(--paper2);
}
.hero-frame img { width:100%; height:100%; object-fit:cover; }
.hero-frame-caption {
  position:absolute; bottom:1.5rem; left:1.5rem;
  background:rgba(251,250,246,0.92); backdrop-filter:blur(12px);
  border-radius:100px; padding:0.6rem 1.3rem;
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--ff-mono); font-size:0.78rem; letter-spacing:0.04em; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.hero-frame-caption .dot { width:7px; height:7px; border-radius:50%; background:var(--mint); animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:0.35}}

/* ── Ticker strip ──────────────────────────────────────── */
.strip { background:var(--paper2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:1.1rem 0; }
.strip-inner { display:flex; width:max-content; animation:stripRun 36s linear infinite; }
@keyframes stripRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.si { font-family:var(--ff-mono); font-size:0.78rem; font-weight:400; letter-spacing:0.06em; white-space:nowrap; padding:0 2rem; color:var(--ink2); }
.si.mint { color:var(--sage); font-weight:700; }
.si.dot { color:var(--ink3); padding:0 0.4rem; }

/* ── How it works (Look / Confirm / Pay) ──────────────────── */
#how { background:var(--paper); }
.how-header { max-width:620px; margin-bottom:4rem; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.how-step { background:var(--card); padding:2.75rem 2.25rem; transition:background 0.3s; }
.how-step:hover { background:var(--paper2); }
.how-num { font-family:var(--ff-display); font-size:0.85rem; font-weight:600; letter-spacing:0.06em; color:var(--cognac); margin-bottom:1.5rem; font-variant-numeric:tabular-nums; }
.how-step h3 { margin-bottom:0.75rem; font-style:italic; }
.how-step p { font-size:0.92rem; color:var(--ink2); font-weight:300; line-height:1.75; }

/* ── Features ──────────────────────────────────────────── */
#features { background:var(--paper2); }
.features-header { max-width:620px; margin-bottom:4rem; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.feature-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:2.25rem 2rem; transition:all 0.35s var(--ease);
  display:flex; flex-direction:column;
}
.feature-card:hover { box-shadow:var(--shadow); transform:translateY(-4px); border-color:var(--line2); }
/* 5th card centers on its own row at desktop width */
.features-grid > .feature-card:nth-child(5) {
  grid-column:2 / span 1;
}
.feature-icon {
  width:46px; height:46px; border-radius:50%;
  background:var(--paper2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.4rem;
}
.feature-icon svg { width:21px; height:21px; }
.feature-card h3 { margin-bottom:0.6rem; }
.feature-card p { font-size:0.9rem; color:var(--ink2); font-weight:300; line-height:1.72; }
.feature-tag {
  display:inline-block; margin-top:1.1rem; font-family:var(--ff-mono);
  font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--sage); background:var(--mint-bg); border-radius:100px; padding:0.25rem 0.8rem;
}

/* ── Signature: Lens HUD demo (dark section) ──────────────── */
#hud {
  background:var(--ink); color:var(--paper);
  position:relative; overflow:hidden; padding:8rem 0;
}
.hud-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.hud-text h2 { color:var(--paper); margin-bottom:1.25rem; }
.hud-text h2 em { font-style:italic; color:var(--mint); }
.hud-lead { font-size:1.02rem; color:rgba(251,250,246,0.55); font-weight:300; line-height:1.85; max-width:440px; margin-bottom:2.25rem; }
.hud-states { display:flex; flex-direction:column; gap:0.9rem; }
.hud-state {
  display:flex; align-items:center; gap:0.9rem;
  padding:0.85rem 1.1rem; border-radius:100px;
  border:1px solid rgba(251,250,246,0.1); opacity:0.35; transition:opacity 0.4s, border-color 0.4s, background 0.4s;
  font-family:var(--ff-mono); font-size:0.82rem; letter-spacing:0.03em;
}
.hud-state.active { opacity:1; border-color:rgba(76,175,125,0.4); background:rgba(76,175,125,0.07); }
.hud-state-dot { width:8px; height:8px; border-radius:50%; background:rgba(251,250,246,0.25); flex-shrink:0; transition:background 0.4s; }
.hud-state.active .hud-state-dot { background:var(--mint); }
/* Visual: glasses with HUD overlay */
.hud-visual { display:flex; align-items:center; justify-content:center; }
.hud-glasses-wrap { position:relative; width:100%; max-width:480px; }
.hud-glasses-wrap svg { width:100%; height:auto; }
.hud-lens-content { font-family:var(--ff-mono); }
.hud-lens-line { fill:var(--mint); font-size:11px; opacity:0; transition:opacity 0.5s; }
.hud-lens-line.show { opacity:1; }
.hud-wave-bar { transform-box:fill-box; transform-origin:center; animation:hudWave 1.2s ease-in-out infinite; }
.hud-wave-bar:nth-child(2){animation-delay:0.15s} .hud-wave-bar:nth-child(3){animation-delay:0.3s}
.hud-wave-bar:nth-child(4){animation-delay:0.45s} .hud-wave-bar:nth-child(5){animation-delay:0.6s}
@keyframes hudWave{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}

/* ── Gallery ───────────────────────────────────────────── */
#gallery { background:var(--paper); }
.gallery-header { max-width:620px; margin-bottom:4rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:1.25rem; }
.gallery-item { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper2); box-shadow:var(--shadow-sm); position:relative; }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item--lg { grid-column:span 2; grid-row:span 2; aspect-ratio:4/3; }
.gallery-item--sm { aspect-ratio:1/1; }
.gallery-item--wide { grid-column:span 1; aspect-ratio:1/1; }
.gallery-caption {
  position:absolute; bottom:1rem; left:1rem; right:1rem;
  font-family:var(--ff-mono); font-size:0.72rem; letter-spacing:0.04em;
  color:var(--paper); background:rgba(24,24,21,0.55); backdrop-filter:blur(8px);
  border-radius:100px; padding:0.5rem 1rem; display:inline-flex; align-items:center; gap:0.5rem; width:fit-content;
}
.gallery-caption .dot { width:6px; height:6px; border-radius:50%; background:var(--mint); }

/* ── Specs ─────────────────────────────────────────────── */
#specs { background:var(--paper2); }
.specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.specs-text .lead { margin-top:1rem; margin-bottom:0; max-width:none; }
.specs-table { margin-top:2.25rem; width:100%; border-collapse:collapse; }
.specs-table tr { border-bottom:1px solid var(--line); }
.specs-table td { padding:1rem 0; vertical-align:top; font-size:0.92rem; }
.specs-table td:first-child { font-family:var(--ff-mono); font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink3); width:42%; }
.specs-table td:last-child { color:var(--ink); font-weight:400; }
.specs-card {
  background:var(--ink); color:var(--paper); border-radius:var(--r-xl);
  padding:3rem 2.5rem; position:relative; overflow:hidden;
}
.specs-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(251,250,246,0.08); border-radius:var(--r); overflow:hidden; margin-bottom:2rem; }
.specs-stat { background:rgba(251,250,246,0.03); padding:1.5rem; text-align:center; }
.specs-stat-num { font-family:var(--ff-display); font-size:2.1rem; font-weight:600; color:var(--mint); line-height:1; margin-bottom:0.3rem; }
.specs-stat-label { font-family:var(--ff-mono); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(251,250,246,0.4); }
.specs-cta { text-align:center; padding-top:1.5rem; border-top:1px solid rgba(251,250,246,0.08); }
.specs-price { font-family:var(--ff-display); font-size:2.6rem; font-weight:600; color:var(--paper); line-height:1; margin-bottom:0.25rem; }
.specs-price-sub { font-family:var(--ff-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(251,250,246,0.35); margin-bottom:1.5rem; }

/* ── Trust / guarantee strip ───────────────────────────── */
.trust-strip { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:3rem 0; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.trust-item { padding:0 2rem; text-align:center; border-right:1px solid var(--line); }
.trust-item:last-child { border-right:none; }
.trust-icon { font-size:1.5rem; margin-bottom:0.6rem; }
.trust-title { font-family:var(--ff-display); font-size:1rem; font-weight:600; font-style:italic; margin-bottom:0.25rem; }
.trust-desc { font-size:0.82rem; color:var(--ink2); font-weight:300; }

/* ── Family / ecosystem ────────────────────────────────── */
#family { background:var(--paper2); }
.family-header { max-width:620px; margin-bottom:3.5rem; }
.family-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.family-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:2rem 1.75rem; transition:all 0.3s var(--ease); position:relative; overflow:hidden;
}
.family-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.family-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.family-card.monesave::before { background:#7B5FE0; }
.family-card.wave::before { background:#00CFFF; }
.family-card.vow::before { background:var(--cognac); }
.family-card.ring::before { background:#C9A84C; }
.family-mark { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; font-size:1.15rem; }
.family-card.monesave .family-mark { background:rgba(123,95,224,0.1); }
.family-card.wave .family-mark     { background:rgba(0,207,255,0.1); }
.family-card.vow .family-mark      { background:var(--cognac-bg); }
.family-card.ring .family-mark     { background:rgba(201,168,76,0.12); }
.family-card h3 { font-size:1.05rem; margin-bottom:0.5rem; }
.family-card p { font-size:0.84rem; color:var(--ink2); font-weight:300; line-height:1.65; margin-bottom:1rem; }
.family-link { font-family:var(--ff-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:0.4rem; transition:gap 0.2s; }
.family-card:hover .family-link { gap:0.7rem; }

/* ── CTA ───────────────────────────────────────────────── */
#cta {
  background:var(--ink); color:var(--paper);
  text-align:center; padding:8rem 0; position:relative; overflow:hidden;
}
#cta::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(76,175,125,0.1), transparent 60%);
}
.cta-inner { position:relative; }
.cta-inner h2 { color:var(--paper); margin-bottom:1.25rem; }
.cta-inner h2 em { font-style:italic; color:var(--mint); }
.cta-inner > p { font-size:1.02rem; color:rgba(251,250,246,0.5); font-weight:300; max-width:480px; margin:0 auto 2.5rem; line-height:1.8; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cta-note { font-family:var(--ff-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(251,250,246,0.3); margin-top:1.75rem; }

/* ── Footer ────────────────────────────────────────────── */
#footer { background:var(--paper); padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; padding-bottom:3rem; border-bottom:1px solid var(--line); }
.footer-logo { display:flex; align-items:center; gap:0.65rem; margin-bottom:1.1rem; }
.footer-tagline { font-size:0.88rem; color:var(--ink2); font-weight:300; max-width:240px; line-height:1.7; }
.footer-col-title { font-family:var(--ff-mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink3); margin-bottom:1.1rem; }
.footer-links { display:flex; flex-direction:column; gap:0.7rem; }
.footer-links a { font-size:0.88rem; color:var(--ink2); transition:color 0.2s; }
.footer-links a:hover { color:var(--ink); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-family:var(--ff-mono); font-size:0.72rem; color:var(--ink3); letter-spacing:0.04em; }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { font-family:var(--ff-mono); font-size:0.72rem; color:var(--ink3); transition:color 0.2s; }
.footer-legal a:hover { color:var(--ink); }

/* ── Announcement bar ──────────────────────────────────── */
#announce {
  background:var(--ink); color:var(--paper);
  text-align:center; padding:0.7rem 0;
  font-family:var(--ff-mono); font-size:0.78rem; letter-spacing:0.02em;
  position:relative; z-index:210;
}
#announce a {
  color:var(--mint); font-weight:700; text-decoration:underline;
  text-decoration-color:rgba(76,175,125,0.4); text-underline-offset:3px;
  transition:text-decoration-color 0.2s;
}
#announce a:hover { text-decoration-color:var(--mint); }
#announce .sep { color:rgba(251,250,246,0.25); margin:0 0.6rem; }
@media(max-width:640px) {
  #announce { font-size:0.7rem; padding:0.6rem 1rem; }
  #announce .sep { display:block; height:0; margin:0; }
  #announce .sep::after { content:''; }
}

/* ── Sold-out / status badge ───────────────────────────── */
.status-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--ff-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  border-radius:100px; padding:0.45rem 1rem; border:1px solid var(--line2);
}
.status-badge .pip { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.status-badge.sold { color:var(--ink2); }
.status-badge.sold .pip { background:var(--ink3); }
.status-badge.open { color:var(--sage); border-color:rgba(76,175,125,0.35); background:var(--mint-bg); }
.status-badge.open .pip { background:var(--mint); animation:dotPulse 2s ease-in-out infinite; }
.status-badge.open.on-dark { color:var(--mint); border-color:rgba(76,175,125,0.3); background:rgba(76,175,125,0.08); }
.status-row { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin-bottom:1.5rem; }

/* ── CTA banner (mid-page) ─────────────────────────────── */
.cta-banner {
  background:var(--ink); color:var(--paper);
  border-radius:var(--r-xl); padding:3.5rem 3rem;
  display:flex; align-items:center; justify-content:space-between; gap:2.5rem;
  flex-wrap:wrap; position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 80% at 100% 50%, rgba(76,175,125,0.12), transparent 60%);
}
.cta-banner-text { position:relative; max-width:480px; }
.cta-banner-text h3 { font-family:var(--ff-display); font-size:1.6rem; font-weight:600; color:var(--paper); margin-bottom:0.6rem; font-style:italic; }
.cta-banner-text p { font-size:0.92rem; color:rgba(251,250,246,0.5); font-weight:300; line-height:1.7; }
.cta-banner-actions { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:0.85rem; flex-shrink:0; }
.cta-banner-actions .status-badge { color:var(--mint); border-color:rgba(76,175,125,0.3); background:rgba(76,175,125,0.08); }
.cta-banner-actions .status-badge .pip { background:var(--mint); animation:dotPulse 2s ease-in-out infinite; }

/* ── Sticky order bar ───────────────────────────────────── */
#sticky-order {
  position:fixed; left:0; right:0; bottom:0; z-index:190;
  background:rgba(24,24,21,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  color:var(--paper); padding:0.9rem 0;
  transform:translateY(110%); transition:transform 0.4s var(--ease);
  border-top:1px solid rgba(251,250,246,0.08);
}
#sticky-order.show { transform:translateY(0); }
.sticky-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.sticky-text { display:flex; align-items:center; gap:0.85rem; flex-wrap:wrap; }
.sticky-text strong { font-family:var(--ff-display); font-style:italic; font-size:1rem; font-weight:600; }
.sticky-text span { font-family:var(--ff-mono); font-size:0.74rem; color:rgba(251,250,246,0.45); }
@media(max-width:560px) {
  .sticky-text span { display:none; }
  .sticky-inner { justify-content:space-between; }
}


.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.revealed { opacity:1; transform:translateY(0); }
.r1{transition-delay:0.08s} .r2{transition-delay:0.16s} .r3{transition-delay:0.24s} .r4{transition-delay:0.32s} .r5{transition-delay:0.4s}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:1080px) {
  .how-grid { grid-template-columns:1fr; }
  .how-step:not(:last-child) { border-bottom:1px solid var(--line); }
  .features-grid { grid-template-columns:1fr 1fr; }
  .features-grid > .feature-card:nth-child(5) { grid-column:auto; }
  .hud-grid { grid-template-columns:1fr; gap:3.5rem; }
  .hud-visual { order:-1; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .gallery-item--lg { grid-column:span 2; }
  .specs-grid { grid-template-columns:1fr; gap:3rem; }
  .trust-grid { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .trust-item { border-right:none; }
  .family-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media(max-width:768px) {
  section { padding:4.5rem 0; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .features-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-item--lg { grid-column:span 1; aspect-ratio:4/3; }
  .family-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
}
@media(max-width:480px) {
  .container { padding:0 1.25rem; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .specs-card-grid { grid-template-columns:1fr 1fr; }
  .trust-grid { grid-template-columns:1fr; }
}