:root{
  --font-1: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-2: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --accent: #d9083c;
  --accent-weak:#ff2d63;

  --text: #e8e8e8;
  --muted:#9aa3ae;
  --bg: #000;
  --panel:#0b0b0c;

  /* vertical padding budget inside hero (header + spacing + caption) */
  --hero-vpad: 220px;

  /* glassy borders */
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-1);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:#fff; text-decoration:none}
a:hover{color:#fff}

/* ===== Header ===== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 96px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 6vw, 90px);
  background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
  backdrop-filter: saturate(140%) blur(10px);
}
.header-left{display:flex; align-items:center; gap:28px}
.header-right{display:flex; align-items:center; margin-left:auto}
.logo{display:flex; align-items:center; gap:.75rem; color:#fff; font-family:var(--font-2); font-weight:700}
.logo-img {height: 48px; width: auto; display:block}

/* Nav */
.nav{display:flex; gap:22px; align-items:center}
.nav a{
  color:rgba(255,255,255,.82);
  font:700 13px/1 var(--font-2); letter-spacing:.22em; text-transform:uppercase;
}
.nav a:hover{color:#fff}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 20px; border-radius:999px; cursor:pointer;
  font:800 11px/1 var(--font-2); letter-spacing:.25em; text-transform:uppercase;
  border:1px solid #fff; color:#000; background:#fff;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  will-change: transform;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(180deg,#fff, #e8e8e8);
  color:#000; border-color:transparent;
  box-shadow: 0 10px 36px rgba(255,255,255,.12), inset 0 2px 0 rgba(255,255,255,.35);
}
.btn-ghost{background:transparent; color:#fff; border: none}

/* Pre-order button */
.btn-accent{
  background:#dc0000;
  color:#fff;
  border:none;
  border-radius:999px;
  height:50px;
  padding:0 26px;
  font:800 12px/1 var(--font-2);
  letter-spacing:.28em;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow:0 0 8px rgba(255,255,255,.25);
}
.btn-accent:hover{
  transform:translateY(-1px);
  box-shadow:0 0 14px rgba(255,255,255,.45);
}
.btn-lg{height:50px; padding:0 26px; font-size:12px; letter-spacing:.28em}

/* Mobile menu */
.menu-btn{display:none; background:transparent; border:0; color:#fff; font:700 12px var(--font-2); letter-spacing:.22em}
.menu-btn span{display:inline-block; padding:10px 0}
@media (max-width: 900px){
  .menu-btn{display:block}
  .nav{display:none}
  .nav.open{
    position:absolute; top:96px; inset-inline:0; display:flex; flex-direction:column;
    background:rgba(0,0,0,.94); padding:12px clamp(20px,6vw,48px) 18px; border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav.open a{padding:14px 0; border-top:1px solid rgba(255,255,255,.06)}
  .nav.open a:first-child{border-top:0}
}

/* ===== Hero ===== */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(1100px 520px at 72% 26%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 480px at 18% 74%, rgba(217,8,60,.14), transparent 60%),
    #000;
}
.hero::after{
  content:""; position:absolute; right:-120px; top:-120px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.12), rgba(255,255,255,.02) 55%, rgba(255,255,255,0) 70%);
  filter: blur(10px); opacity:.55; pointer-events:none;
}
.hero-inner{
  width:min(1200px, 92vw);
  display:grid; grid-template-columns: 1.05fr 1fr; align-items:center; gap:min(10vw, 96px);
  padding-top: 13vh;
}
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; gap:28px; padding-top: 18vh;}
}
.hero-copy{max-width: 56rem}
.title{
  margin:0 0 1rem 0;
  font-family:var(--font-2); font-weight:700; letter-spacing:-.04em; line-height:.92;
  font-size: clamp(56px, 15vw, 160px);
  text-shadow: 0 1px 40px rgba(255,255,255,.06);
}
.tagline{
  margin: 0 0 2rem 0; max-width: 60ch;
  font: 400 clamp(18px,2.1vw,28px)/1.5 var(--font-2); color:#ececec;
}
.cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.note{display:block; font:600 14px/1.4 var(--font-1); color:#fff}

/* ===== Phone container ===== */
.phone {
  --avail-h: calc(100svh - var(--hero-vpad));
  width: min(520px, 92vw, calc(var(--avail-h) * 0.5625));
  aspect-ratio: 9 / 16;
  margin: auto;
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:#000;
}
.demo-stage{position:relative; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#000}
.demo-frame{width:100%; height:100%; object-fit: contain; object-position:center center; display:block}
.demo-ui{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; pointer-events:none}
.demo-caption{margin:0 12px 56px; text-align:center; font:700 13px/1.35 var(--font-2); color:#f2f5ff; text-shadow:0 2px 16px rgba(0,0,0,.6)}
.scroll-hint{position:absolute; left:clamp(20px,6vw,60px); bottom:24px; transform:rotate(90deg); transform-origin:left bottom; color:#8b94a1; font:700 10px var(--font-2); letter-spacing:.4em; text-transform:uppercase; opacity:.65}

/* ===== Sections ===== */
.section{padding: clamp(56px, 10vw, 120px) 0; background:transparent}
.container{width: min(1400px, 94vw)}
.center{text-align:center}
.lead{font: 400 clamp(16px,1.9vw,22px)/1.6 var(--font-2); color:#e6e6e6; max-width: 70ch; margin-inline:auto}
.mt-16{margin-top:16px}
.mt-32{margin-top:32px}

.h2{
  font-family:var(--font-2); font-weight:800; letter-spacing:-.02em;
  font-size: clamp(28px,4.5vw,48px); margin:0 0 20px 0;
}

/* ===== Revamped ABOUT ===== */
.section.about{
  position: relative;
  padding-top: clamp(120px, 14vw, 220px);
  padding-bottom: clamp(120px, 14vw, 200px);
  overflow: hidden;
}
.about-bg{
  position:absolute; inset:-10% -10% -10% -10%; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 600px at 10% 20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 500px at 85% 60%, rgba(217,8,60,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
    transparent;
  filter: saturate(110%);
}
.about-container{
  position: relative;
  z-index: 1;
  width: min(1500px, 94vw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 80px);
}
@media (max-width: 1020px){
  .about-container{ grid-template-columns: 1fr; }
}
.about-sticky{ position: sticky; top: 112px; align-self: start; }
.about-title{
  margin: 0 0 clamp(10px, 1.5vw, 14px) 0;
  font-family: var(--font-2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(44px, 6.2vw, 84px);
  text-wrap: balance;
}
.about-lead{
  color: #f0f0f0;
  font: 500 clamp(18px, 2vw, 22px)/1.6 var(--font-2);
  max-width: 36ch;
  opacity: .92;
}
.about-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
}
@media (max-width: 820px){ .about-grid{ grid-template-columns: 1fr; } }
.about-card{
  position: relative; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(16px, 2vw, 22px); padding: clamp(22px, 2.8vw, 32px);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}
.about-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background: radial-gradient(1200px 400px at 0% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.about-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 34px 80px rgba(0,0,0,.6);
  border-color: var(--border-strong);
}
.badge{
  width: clamp(56px, 6vw, 72px); height: clamp(56px, 6vw, 72px);
  border-radius: 16px; display:flex; align-items:center; justify-content:center;
  font: 800 clamp(18px, 2.2vw, 22px)/1 var(--font-2); color:#fff;
  background: linear-gradient(180deg, var(--accent-weak), var(--accent));
  box-shadow: 0 10px 26px rgba(217,8,60,.40), 0 0 0 8px rgba(217,8,60,.18);
}
.card-body{align-self:center}
.card-title{ margin:0 0 6px 0; font: 800 clamp(20px, 2.6vw, 28px)/1.2 var(--font-2); letter-spacing: -.01em; }
.card-text{ margin:0; color:#e9e9e9; font: 500 clamp(16px, 1.8vw, 18px)/1.7 var(--font-2); opacity:.9; }

/* ===== Contact (legacy) ===== */
.contact-form{margin-top:20px}
.form-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 700px){ .form-row{grid-template-columns:1fr} }
input, textarea{
  width:100%; background:#0a0a0a; color:#fff; border:1px solid rgba(255,255,255,.16);
  border-radius:12px; padding:14px 16px; font:600 14px/1.4 var(--font-1);
}
textarea{resize:vertical}

/* ===== Footer ===== */
.footer{border-top:1px solid rgba(255,255,255,.06); padding:32px 0 48px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:20px}
.footer-nav{display:flex; gap:18px; flex-wrap:wrap}
.footer-left{display:flex; align-items:center; gap:14px}
.footer .logo-img{height:28px}
@media (max-width: 700px){ .footer-inner{flex-direction:column; align-items:flex-start} }

/* Accessibility & motion */
a:focus, button:focus{outline:2px solid #fff; outline-offset:3px}
@media (prefers-reduced-motion: reduce) {
  *{scroll-behavior:auto}
  .btn, .btn-accent, .about-card{transition:none}
}

/* Height tweaks so the phone fits on short screens */
@media (max-height: 720px){
  :root{ --hero-vpad: 200px; }
}
@media (max-height: 640px){
  :root{ --hero-vpad: 180px; }
}
@media (max-height: 568px){
  :root{ --hero-vpad: 160px; }
}

/* Smaller buttons on tiny phones */
@media (max-width: 480px){
  .btn, .btn-lg{ height: 44px; padding: 0 16px; font-size: 10.5px; letter-spacing: .18em; }
  .btn-accent{ height: 44px; padding: 0 16px; font-size: 11px; letter-spacing: .18em; box-shadow: 0 0 6px rgba(255,255,255,.18); }
  .header { height: 84px; }
  .logo-img { height: 40px; }
  .header-right { gap: 8px; }
}
@media (max-width: 360px){
  .btn, .btn-lg{ height: 42px; padding: 0 14px; font-size: 10px; letter-spacing: .16em; }
  .btn-accent{ height: 42px; padding: 0 14px; font-size: 10.5px; }
}

/* ===== Mobile/Small-Screen Fixes (About) ===== */
.section.about { padding-top: max(100px, 12vh, calc(84px + env(safe-area-inset-top))); }
@media (max-width: 1060px) {
  .about-container { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 28px); width: min(1200px, 94vw); }
  .about-sticky { position: static; top: auto; }
}
@media (max-width: 820px) {
  .about-title { font-size: clamp(36px, 8vw, 56px); line-height: 1.05; margin-bottom: 8px; }
  .about-lead { font: 500 clamp(16px, 2.6vw, 18px)/1.55 var(--font-2); max-width: 42ch; }
  .about-grid { grid-template-columns: 1fr; gap: clamp(12px, 3.5vw, 18px); }
  .about-card { grid-template-columns: auto 1fr; padding: clamp(16px, 3.6vw, 22px); border-radius: 16px;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 38px rgba(0,0,0,.52); }
  .badge{ width: clamp(42px, 8vw, 56px); height: clamp(42px, 8vw, 56px); border-radius: 12px;
    font: 800 clamp(16px, 3.6vw, 18px)/1 var(--font-2);
    box-shadow: 0 8px 20px rgba(217,8,60,.35), 0 0 0 6px rgba(217,8,60,.16); }
  .card-title{ font: 800 clamp(18px, 4.6vw, 22px)/1.25 var(--font-2); margin-bottom: 4px; }
  .card-text{ font: 500 clamp(14px, 3.8vw, 16px)/1.6 var(--font-2); }
}
@media (max-width: 600px){
  .section.about{ padding-top: max(84px, 10vh, calc(72px + env(safe-area-inset-top))); padding-bottom: clamp(72px, 16vh, 120px); }
  .about-card{ gap: 14px; border-radius: 14px; padding: 14px; }
  .badge{ width: 40px; height: 40px; border-radius: 10px; }
}
@media (max-height: 700px) and (max-width: 820px){
  .section.about{ padding-top: max(90px, 12vh); }
}

/* Make both Pre-Order buttons match the About badges */
#preorderNav,
#preorderCta{
  background: linear-gradient(180deg, var(--accent-weak), var(--accent));
  color: #fff;
  border: 0;
  box-shadow: 0 10px 26px rgba(217,8,60,.35), 0 0 0 6px rgba(217,8,60,.16);
}
#preorderNav:hover,
#preorderCta:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(217,8,60,.45), 0 0 0 6px rgba(217,8,60,.2);
}
#preorderNav:focus-visible,
#preorderCta:focus-visible{ outline: 2px solid var(--accent-weak); outline-offset: 3px; }

/* ===== Pre-Order section — ONLY inner widget spacing adjusted ===== */
.section.preorder{
  position: relative;
  padding-top: clamp(120px, 10vw, 160px);   /* unchanged vibe outside the card */
  padding-bottom: clamp(120px, 10vw, 160px);
}

.preorder-wrap{
  width: clamp(360px, 68rem, 92vw);
  margin-inline: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 36px 120px rgba(0,0,0,.60);
  padding: clamp(56px, 7vw, 96px);          /* MORE padding inside the widget */
  backdrop-filter: saturate(120%) blur(6px);
}

.preorder-head{
  text-align:center;
  margin-bottom: clamp(36px, 5vw, 64px);    /* more space under title area */
}
.preorder-title{
  margin:0;
  font-family: var(--font-2);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(44px, 6.4vw, 72px);
  line-height: 1.08;
}
.preorder-sub{
  margin: 18px auto 0;
  max-width: 64ch;
  color:#e6e6e6;
  font: 500 clamp(18px, 2.1vw, 22px)/1.75 var(--font-2);
  opacity:.96;
}

.preorder-form{ margin-top: clamp(20px, 2.6vw, 32px); }
.preorder-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 4vw, 56px);       /* wider column gap */
  row-gap: clamp(26px, 3.4vw, 42px);        /* taller row gap */
}

/* --- Fix "Anything we should know?" spacing/overlap --- */
.preorder-grid + .field{
  /* push the textarea block down from the two inputs row */
  margin-top: clamp(24px, 4vw, 40px);
}

/* give the label → textarea pair extra breathing room */
.preorder-grid + .field .field label,
.preorder-grid + .field label{
  display:block;
  margin-bottom: 12px;
}

/* make sure the textarea itself isn't pulling upward */
.preorder-form textarea{
  display:block;
  margin-top: 0;            /* cancel any UA margins */
  padding-top: 20px;        /* keep text away from the top edge */
}

/* optional: align the two top inputs’ bottoms so they don't crowd the label */
.preorder-grid{ align-items: end; }

@media (max-width: 900px){ .preorder-grid{ grid-template-columns: 1fr; } }

.field{
  display:flex;
  flex-direction:column;
  gap:16px;                                  /* more space label ↔ input */
}
.field label{
  font: 700 12px/1 var(--font-2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}

/* Larger, comfier controls */
.preorder-form input,
.preorder-form textarea{
  width: 100%;
  appearance: none;
  background: #0b0b0c;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 20px 22px;                        /* thicker padding inside fields */
  font: 600 16px/1.55 var(--font-1);
  min-height: 64px;                          /* bigger touch target */
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .06s ease;
}
.preorder-form textarea{
  resize: vertical;
  min-height: 240px;                         /* taller textarea */
}
.preorder-form input::placeholder,
.preorder-form textarea::placeholder{ color: #9aa3ae; }

.preorder-form input:focus,
.preorder-form textarea:focus{
  outline: none;
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 0 0 10px rgba(217,8,60,.18);
}

/* Action button area spaced further away */
.actions{
  display:flex; justify-content:center;
  margin-top: clamp(32px, 5vw, 56px);
}
.btn-pill{
  border-radius: 999px;
  padding-inline: 44px;
  height: 62px;
  font-size: 12px;
  letter-spacing: .24em;
}

.preorder .btn-primary{
  background: linear-gradient(180deg, var(--accent-weak), var(--accent));
  color: #fff; border: 0;
  box-shadow: 0 12px 30px rgba(217,8,60,.35), 0 0 0 6px rgba(217,8,60,.16);
}
.preorder .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(217,8,60,.5), 0 0 0 6px rgba(217,8,60,.2);
}

/* Phone tweaks: keep it airy but not oversized */
@media (max-width: 560px){
  .preorder-wrap{ border-radius: 24px; padding: 30px; }
  .preorder-title{ font-size: clamp(32px, 9vw, 42px); }
  .preorder-sub{ font-size: clamp(16px, 3.8vw, 18px); }
  .preorder-grid{ row-gap: 22px; column-gap: 24px; }
  .preorder-form input, .preorder-form textarea{
    border-radius: 16px; min-height: 58px; padding: 18px; font-size: 15px;
  }
  .preorder-form textarea{ min-height: 200px; }
  .btn-pill{ height: 58px; padding-inline: 36px; }
}

/* Short viewports (small laptops / landscape phones) */
@media (max-height: 720px){
  .section.preorder{
    padding-top: max(100px, 10vh);
    padding-bottom: max(100px, 10vh);
  }
}

@media (min-width: 981px){
  .phone.demo{
    transform: translateY(-100px); /* tweak: -24px to -60px if you want more/less */
  }
}

/* All-black scrollbar (Chrome/Edge/Safari) */
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-track {
  background: #000;      /* track */
}
*::-webkit-scrollbar-thumb {
  background: #000;      /* thumb */
  border-radius: 8px;
  border: 2px solid #000; /* keeps edges black too */
}
*::-webkit-scrollbar-corner {
  background: #000;
}

/* Firefox */
html {
  scrollbar-color: #000 #000;  /* thumb, track */
  scrollbar-width: auto;       /* or 'thin' if you prefer */
}

/* Smooth scroll for the whole page */
html { scroll-behavior: smooth; }

/* Keep anchors from hiding under the fixed header */
:root { --header-h: 96px; }          /* header height */
@media (max-width: 480px){ :root { --header-h: 84px; } }

main#top,
section[id] {
  scroll-margin-top: calc(var(--header-h) + 12px); /* little breathing room */
}

/* Center the footer content + add side padding so it isn't flush left */
.container { 
  width: min(1400px, 94vw);
  margin-inline: auto;                /* centers the container */
}
.footer .container {
  padding-inline: clamp(20px, 6vw, 90px); /* small margin on left/right */
}

/* Three-column layout: left logo, big centered email, right nav */
.footer {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 32px 0 48px;
}
.footer-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.footer-left{ justify-self: start; display:flex; align-items:center; gap:14px }
.footer-nav{ justify-self: end; display:flex; gap:18px; flex-wrap:wrap }
.footer .logo-img{ height:28px }

/* Big blocky email in the center */
.footer-center{ justify-self: center; text-align: center; }
.footer-email{
  font: 800 clamp(18px, 2.6vw, 28px)/1 var(--font-2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

/* Stack nicely on small screens */
@media (max-width: 700px){
  .footer-inner{
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .footer-left, .footer-nav, .footer-center{
    justify-self: center;
  }
}