/* ═══════════════════════════════════════════════════════════
   ZOTPA — Complete Stylesheet
   Dark mode · Mountain aesthetic · Electric accents
═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --bg:          #08080a;
  --bg-s:        #0f0f12;
  --bg-e:        #16161a;
  --glass:       rgba(255,255,255,0.04);
  --glass-b:     rgba(255,255,255,0.08);

  --txt:         #f2f2f4;
  --txt-2:       #9d9da8;
  --txt-3:       #4d4d5a;

  --cyan:        #00d4ff;
  --cyan-dim:    rgba(0,212,255,0.12);
  --cyan-glow:   rgba(0,212,255,0.25);
  --gold:        #f59e0b;
  --gold-dim:    rgba(245,158,11,0.12);
  --red:         #ef4444;

  --f-sans:      'Inter', system-ui, sans-serif;
  --f-serif:     'Instrument Serif', Georgia, serif;

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 100px;

  --ease:     cubic-bezier(0.4,0,0.2,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

  --nav-h: 68px;
  --sp:    clamp(72px, 9vw, 128px);
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img   { display: block; max-width: 100%; }
a     { color: inherit; text-decoration: none; }
button{ cursor: pointer; border: none; background: none; font: inherit; }
input { font: inherit; }

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

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease) var(--d, 0s),
              transform .65s var(--ease) var(--d, 0s);
}
.fade-up.visible { opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-up { transition: none !important; opacity:1 !important; transform:none !important; }
}

/* ── NAV ──────────────────────────────────────────────────── */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 5vw, 56px);
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}

#nav.scrolled {
  background: rgba(8,8,10,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: var(--glass-b);
}

/* ── Logo image (the ONLY place sizing is set) ── */
.nav-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity .15s ease;
}
.nav-logo-link:hover { opacity: .8; }

#nav-logo-img {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-links a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--txt-2);
  transition: color .15s ease;
  position: relative;
}
.nav-links a::after {
  content:'';
  position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background: var(--cyan);
  transition: width .25s var(--ease);
}
.nav-links a:hover { color: var(--txt); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  font-size: .8125rem; font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--glass-b);
  background: var(--glass);
  color: var(--txt);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.nav-cta:hover {
  background: var(--cyan-dim);
  border-color: var(--cyan-glow);
  transform: translateY(-1px);
}

/* ── HERO ──────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Background */
.hero-bg { position: absolute; inset:0; z-index:0; }

#hero-bg-img {
  width:100%; height:100%;
  object-fit: cover; object-position: center 38%;
  transform: scale(1.06);
  animation: bgZoom 22s ease-in-out infinite alternate;
}

@keyframes bgZoom {
  from { transform: scale(1.06) translateY(0); }
  to   { transform: scale(1.12) translateY(-1.5%); }
}

@media (prefers-reduced-motion: reduce) {
  #hero-bg-img { animation: none; }
}

.hero-overlay {
  position: absolute; inset:0;
  background:
    linear-gradient(to top,  #08080a 0%,  rgba(8,8,10,.15) 42%, transparent 68%),
    linear-gradient(to bottom, rgba(8,8,10,.55) 0%, transparent 28%),
    linear-gradient(105deg, rgba(8,8,10,.45) 0%, transparent 55%);
}

/* Particles */
.hero-particles { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-particles span {
  position: absolute; width:2px; height:2px; border-radius:50%;
  background: var(--cyan); opacity:0;
  animation: pFloat 9s ease-in-out infinite;
}
.hero-particles span:nth-child(1){ left:12%; top:28%; animation-delay:0s;   animation-duration:11s; }
.hero-particles span:nth-child(2){ left:28%; top:58%; animation-delay:2.1s; animation-duration:8s;  }
.hero-particles span:nth-child(3){ left:62%; top:22%; animation-delay:3.8s; animation-duration:13s; }
.hero-particles span:nth-child(4){ left:78%; top:52%; animation-delay:1.2s; animation-duration:9s;  }
.hero-particles span:nth-child(5){ left:48%; top:72%; animation-delay:4.4s; animation-duration:10s; }
.hero-particles span:nth-child(6){ left:88%; top:38%; animation-delay:5.5s; animation-duration:7s;  }
.hero-particles span:nth-child(7){ left:8%;  top:78%; animation-delay:2.8s; animation-duration:14s; }
.hero-particles span:nth-child(8){ left:38%; top:14%; animation-delay:6.2s; animation-duration:9s;  }

@keyframes pFloat {
  0%   { opacity:0; transform:translateY(0) scale(1); }
  20%  { opacity:.55; }
  80%  { opacity:.25; }
  100% { opacity:0; transform:translateY(-72px) scale(.4); }
}
@media (prefers-reduced-motion: reduce) { .hero-particles span { animation:none; } }

/* Hero content */
.hero-inner {
  position: relative; z-index: 2;
  text-align: center;
  padding: calc(var(--nav-h) + 32px) clamp(16px,5vw,40px) 80px;
  max-width: 800px;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
}

/* Badge */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan);
  padding: 6px 16px;
  border-radius: var(--r-full);
  border: 1px solid rgba(0,212,255,.3);
  background: rgba(0,212,255,.08);
  backdrop-filter: blur(8px);
  margin-bottom: 2rem;
}
.hero-badge-dot {
  width:6px; height:6px; border-radius:50%;
  background: var(--cyan);
  animation: dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(0,212,255,.5); }
  50%    { box-shadow: 0 0 0 6px rgba(0,212,255,0); }
}

/* H1 tagline slot */
.hero-h1 {
  font-size: clamp(2.4rem, 7.5vw, 5.25rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  margin-bottom: 1.75rem;
  min-height: .5em; /* space reserved even when empty */
}

/* When tagline slot is empty, show a subtle divider */
#hero-tagline-slot:empty {
  display: block;
  height: 3px;
  width: clamp(80px, 20vw, 160px);
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.35), transparent);
  border-radius: 2px;
  margin: 0 auto 1rem;
  min-height: 3px;
}

/* Subtext */
.hero-sub {
  font-size: clamp(.95rem, 2.2vw, 1.1875rem);
  color: var(--txt-2);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 640px;
}
.hero-br { display: block; }

/* ── FORM (shared hero + waitlist) ── */
.hero-form {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field-wrap {
  position: relative;
}

.field-wrap input {
  width: 100%;
  padding: 13px 14px 13px 40px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-b);
  border-radius: var(--r-md);
  color: var(--txt);
  font-size: .9rem;
  outline: none;
  backdrop-filter: blur(12px);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.field-wrap input::placeholder { color: var(--txt-3); }
.field-wrap input:focus {
  border-color: var(--cyan);
  background: rgba(0,212,255,.05);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}
.field-wrap input.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

.field-icon {
  position: absolute; left:13px; top:50%; transform:translateY(-50%);
  color: var(--txt-3); display:flex; align-items:center; pointer-events:none;
  transition: color .15s ease;
}
.field-wrap input:focus ~ .field-icon { color: var(--cyan); }

.field-err {
  display: block;
  font-size: .72rem;
  color: var(--red);
  padding: 3px 4px 0;
  min-height: 1.1em;
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--cyan), #0099c8);
  color: #07070a;
  font-size: .9rem; font-weight: 700;
  border-radius: var(--r-md);
  position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
  width: 100%;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent);
  opacity:0; transition: opacity .15s ease;
}
.btn-primary:hover   { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,212,255,.3); }
.btn-primary:hover::before { opacity:1; }
.btn-primary:active  { transform: translateY(0); }

.btn-lg { padding: 15px 36px; font-size: 1rem; border-radius: var(--r-lg); }

.btn-arrow { transition: transform .15s ease; }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }

.btn-spin {
  display: none; width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,.25); border-top-color: #07070a;
  border-radius: 50%;
  animation: spin .55s linear infinite;
}
.btn-primary.loading .btn-label,
.btn-primary.loading .btn-arrow { display: none; }
.btn-primary.loading .btn-spin  { display: block; }
.btn-primary:disabled { opacity: .75; cursor: not-allowed; }

@keyframes spin { to { transform: rotate(360deg); } }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border: 1px solid var(--glass-b); border-radius: var(--r-md);
  font-size: .9rem; font-weight: 600; color: var(--txt);
  background: var(--glass); backdrop-filter: blur(10px);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.btn-ghost:hover {
  border-color: var(--cyan-glow);
  background: var(--cyan-dim);
  transform: translateY(-2px);
}

.hero-form-note {
  font-size: .72rem; color: var(--txt-3); text-align: center; margin-top: 4px;
}

/* Scroll cue */
.scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 2;
}
.scroll-line {
  display: block; width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  animation: scrollPulse 2.1s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%   { opacity:0; transform:scaleY(0); transform-origin:top; }
  50%  { opacity:1; transform:scaleY(1); }
  100% { opacity:0; transform:scaleY(1) translateY(14px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-line { animation:none; opacity:.4; } }

/* ── MARQUEE ─────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0,212,255,.055), rgba(0,212,255,.02));
  border-top: 1px solid var(--glass-b);
  border-bottom: 1px solid var(--glass-b);
  padding: 16px 0;
}
.marquee-inner {
  display: flex; align-items: center; gap: 1.25rem;
  white-space: nowrap; width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee-inner { animation-play-state: paused; }
.marquee-inner span {
  font-size: .75rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--txt-2);
}
.marquee-inner .dot { color: var(--cyan); font-size: .85rem; }

@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce) { .marquee-inner { animation: none; } }

/* ── SECTION COMMONS ─────────────────────────────────────── */
.section-wrap {
  max-width: 1180px; margin: 0 auto;
  padding: var(--sp) clamp(16px,5vw,56px);
}

.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: .875rem;
}

.section-h2 {
  font-size: clamp(1.9rem, 4.5vw, 3.25rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  margin-bottom: 1.1rem;
}
.section-h2 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  color: var(--cyan);
}

.section-sub {
  font-size: clamp(.95rem, 1.8vw, 1.0625rem);
  color: var(--txt-2); line-height: 1.72; max-width: 600px;
  margin-bottom: 3.25rem;
}

/* ── TRAVEL SECTION ──────────────────────────────────────── */
#travel { background: var(--bg); }

/* Bento grid */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 340px 270px;
  gap: 14px;
  margin-bottom: 3.5rem;
}

.bento-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 36px rgba(0,0,0,.55);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), z-index 0s;
  outline-offset: 3px;
}
.bento-card:focus-visible { outline: 2px solid var(--cyan); }

.bento-tall { grid-column:1; grid-row: 1 / span 2; }
.bento-wide { grid-column: 2 / span 2; grid-row:1; }
.bento-sm   { grid-column: auto; grid-row:2; }

.bento-card:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 20px 56px rgba(0,0,0,.75), 0 0 36px rgba(0,212,255,.07);
  z-index: 2;
}

.bento-img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .75s var(--ease);
}
.bento-card:hover .bento-img { transform: scale(1.07); }

.bento-fade {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,8,10,.95) 0%, rgba(8,8,10,.3) 50%, transparent 100%);
  transition: background .3s ease;
}
.bento-card:hover .bento-fade {
  background: linear-gradient(to top, rgba(8,8,10,.98) 0%, rgba(8,8,10,.5) 55%, transparent 100%);
}

.bento-body {
  position:absolute; bottom:0; left:0; right:0; padding:22px; z-index:2;
}

.bento-tag {
  display: inline-block;
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0,212,255,.12); border: 1px solid rgba(0,212,255,.25);
  padding: 3px 10px; border-radius: var(--r-full); margin-bottom: 9px;
}
.bento-tag-gold {
  color: var(--gold);
  background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25);
}

.bento-body h3 {
  font-size: clamp(1rem, 1.8vw, 1.375rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; margin-bottom: 7px;
}
.bento-body p {
  font-size: .82rem; color: var(--txt-2); line-height: 1.5;
  opacity:0; transform: translateY(5px);
  transition: opacity .3s ease, transform .3s ease;
}
.bento-card:hover .bento-body p { opacity:1; transform:translateY(0); }

.bento-meta {
  display:flex; align-items:center; gap:6px;
  font-size: .72rem; font-weight:600; color:var(--txt-3); margin-top:9px;
  opacity:0; transform:translateY(4px);
  transition: opacity .3s ease .05s, transform .3s ease .05s;
}
.bento-card:hover .bento-meta { opacity:1; transform:translateY(0); }
.msep { color: var(--cyan); }

.bento-shine {
  position:absolute; inset:0; pointer-events:none; z-index:3;
  opacity:0; transition: opacity .3s ease;
}
.bento-card:hover .bento-shine { opacity:1; }

/* Stats */
.stats {
  display: flex; align-items: center;
  padding: 36px 44px;
  background: var(--bg-e);
  border: 1px solid var(--glass-b); border-radius: var(--r-xl);
}
.stat { flex:1; text-align:center; }
.stat-num {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 900; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--txt), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-sfx { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight:800; color:var(--cyan); }
.stat-lbl {
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--txt-3); margin-top:6px;
}
.stat-lbl-accent { color:var(--cyan) !important; font-style:italic; }
.stat-divider { width:1px; height:56px; background:var(--glass-b); margin:0 20px; }

/* ── ENGINE SECTION ──────────────────────────────────────── */
#engine { position:relative; overflow:hidden; background:var(--bg-s); }

.engine-bg { position:absolute; inset:0; z-index:0; }
.engine-bg img { width:100%; height:100%; object-fit:cover; opacity:.07; }
.engine-bg-overlay {
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 65% 50%, rgba(0,212,255,.04) 0%, transparent 65%),
              linear-gradient(to right, var(--bg-s) 0%, transparent 45%, var(--bg-s) 100%);
}

.engine-wrap { position:relative; z-index:1; }
.engine-header { margin-bottom:3rem; }

.engine-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap: 14px; margin-bottom: 3rem;
}

.engine-card {
  display:flex; gap:15px; padding:22px;
  background: var(--glass); border:1px solid var(--glass-b); border-radius:var(--r-lg);
  backdrop-filter: blur(12px);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.engine-card:hover {
  border-color: rgba(0,212,255,.2);
  background: rgba(0,212,255,.04);
  transform: translateY(-4px);
}

.ec-icon {
  width:42px; height:42px; flex-shrink:0; border-radius:var(--r-sm);
  background: var(--cyan-dim); display:flex; align-items:center; justify-content:center;
  color: var(--cyan);
  transition: background .25s ease;
}
.engine-card:hover .ec-icon { background: rgba(0,212,255,.2); }

.ec-body h3 { font-size:.94rem; font-weight:700; letter-spacing:-.01em; margin-bottom:5px; }
.ec-body p  { font-size:.82rem; color:var(--txt-2); line-height:1.55; }

.engine-footer {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding: 28px 36px;
  background: linear-gradient(135deg, rgba(0,212,255,.06), transparent);
  border: 1px solid rgba(0,212,255,.15); border-radius: var(--r-xl);
}
.engine-quote {
  font-family: var(--f-serif); font-style:italic;
  font-size: clamp(.9rem, 1.8vw, 1.05rem); color: var(--txt-2); line-height:1.45;
}

/* ── WAITLIST SECTION ────────────────────────────────────── */
#waitlist { position:relative; overflow:hidden; background:var(--bg); }

.waitlist-glow { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.waitlist-glow span {
  position:absolute; border-radius:50%; background:var(--cyan);
  filter: blur(90px); opacity:.035;
  animation: glowDrift 22s linear infinite;
}
.waitlist-glow span:nth-child(1){ width:460px; height:460px; top:-100px; left:-80px; animation-duration:28s; }
.waitlist-glow span:nth-child(2){ width:340px; height:340px; bottom:-80px; right:-60px; animation-direction:reverse; animation-duration:32s; }
.waitlist-glow span:nth-child(3){ width:220px; height:220px; top:40%; left:55%; animation-duration:19s; background:var(--gold); }

@keyframes glowDrift {
  0%   { transform: rotate(0deg)   translateX(40px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) { .waitlist-glow span { animation:none; } }

.waitlist-wrap { position:relative; z-index:1; }
.waitlist-h2   { text-align:center; }

.waitlist-form {
  max-width: 520px; margin: 0 auto;
  display:flex; flex-direction:column; gap:10px;
}
.wf-row {
  display: grid; grid-template-columns: 1fr 1fr; gap:10px;
}
.wf-row:first-child { grid-template-columns: 1fr; }

.waitlist-form .field-wrap input {
  background: var(--bg-e);
  padding: 14px 14px 14px 42px;
  font-size:.95rem; border-radius:var(--r-md);
}

.form-note { font-size:.72rem; color:var(--txt-3); text-align:center; margin-top:4px; }

/* ── FOOTER ──────────────────────────────────────────────── */
#footer {
  background: var(--bg-s);
  border-top: 1px solid var(--glass-b);
  padding: 44px clamp(16px,5vw,56px);
}
.footer-inner {
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.footer-brand { display:flex; flex-direction:column; gap:5px; }

#footer-logo-img {
  height: 50px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-sub { font-size:.72rem; color:var(--txt-3); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { font-size:.875rem; color:var(--txt-2); transition:color .15s ease; }
.footer-links a:hover { color:var(--txt); }
.footer-copy { font-size:.72rem; color:var(--txt-3); }

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom:28px; left:50%;
  transform: translateX(-50%) translateY(80px);
  z-index:1000;
  display:flex; align-items:center; gap:10px;
  padding:13px 22px;
  background: var(--bg-e);
  border: 1px solid rgba(0,212,255,.3); border-radius: var(--r-full);
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 50px rgba(0,212,255,.08);
  backdrop-filter: blur(20px);
  font-size:.875rem; font-weight:500; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition: transform .5s var(--ease-spring), opacity .5s ease;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity:1; }

.toast-icon {
  width:22px; height:22px; border-radius:50%;
  background: var(--cyan); color:#07070a;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:900; flex-shrink:0;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .bento-tall { grid-column:1/span 2; grid-row:auto; height:280px; }
  .bento-wide { grid-column:1/span 2; grid-row:auto; height:230px; }
  .bento-sm   { grid-column:auto; height:210px; }

  .engine-grid { grid-template-columns:1fr 1fr; }
  .stats { padding:28px 20px; flex-wrap:wrap; gap:24px; }
  .stat-divider { display:none; }
  .stat { flex: 0 0 calc(50% - 12px); }
  .engine-footer { flex-direction:column; text-align:center; }
}

@media (max-width: 640px) {
  .hero-form-row { grid-template-columns: 1fr; }
  .wf-row { grid-template-columns:1fr; }

  .bento { grid-template-columns:1fr; }
  .bento-tall, .bento-wide, .bento-sm {
    grid-column:1; height:240px;
  }

  .engine-grid { grid-template-columns:1fr; }

  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-links { gap:.875rem; }

  .nav-links { display:none; }
  .hero-br   { display:none; }
}