/* Car‑Oké — Coming Soon (premium) */
:root{
  --bg:#07070c;
  --bg2:#0b0b12;
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.52);

  --pink:#ff3bd4;
  --magenta:#ff1fb7;
  --violet:#7c3cff;
  --blue:#31d6ff;

  --shadow: 0 30px 80px rgba(0,0,0,.55);
  --shadow2: 0 20px 60px rgba(0,0,0,.45);
  --radius: 22px;
  --radius2: 28px;
  --max: 1120px;

  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  --font2:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, rgba(124,60,255,.22), transparent 60%),
              radial-gradient(1000px 700px at 90% 30%, rgba(49,214,255,.18), transparent 55%),
              radial-gradient(900px 650px at 50% 100%, rgba(255,59,212,.16), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

/* premium grain */
body:before{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.25;
  pointer-events:none;
  z-index:0;
}

.fx{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.95;
}

.cursorGlow{
  position:fixed;
  width:520px; height:520px;
  left:-999px; top:-999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,59,212,.18), transparent 55%),
              radial-gradient(circle at 70% 60%, rgba(49,214,255,.12), transparent 52%),
              radial-gradient(circle at 40% 80%, rgba(124,60,255,.12), transparent 55%);
  filter: blur(10px);
  transform: translate(-50%,-50%);
  z-index:2;
  pointer-events:none;
}

a{color:inherit; text-decoration:none}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; font-size:.92em; color: rgba(255,255,255,.9)}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  margin: 12px auto 0;
  width: min(var(--max), calc(100% - 24px));
  border:1px solid rgba(255,255,255,.08);
  background: rgba(8,8,14,.55);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
}

.brand{display:flex; align-items:center; gap:10px}
.brandLogo{
  height:42px;
  width:auto;
  filter: drop-shadow(0 8px 18px rgba(255,59,212,.18));
  transform: translateZ(0);
}

.nav{
  display:flex; align-items:center; gap:16px;
  font-family:var(--font2);
  font-weight:500;
  font-size:14px;
  color: rgba(255,255,255,.80);
}
.nav a{opacity:.85}
.nav a:hover{opacity:1}

.hamburger{
  display:none;
  background:transparent;
  border:0;
  width:44px; height:44px;
  border-radius:12px;
  cursor:pointer;
}
.hamburger span{
  display:block;
  height:2px; width:20px;
  margin:5px auto;
  background:rgba(255,255,255,.9);
  border-radius:999px;
}

.hero{position:relative; z-index:10; padding: 42px 0 0}
.heroGrid{
  max-width:var(--max);
  margin: 0 auto;
  padding: 48px 20px 32px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  font-size:13px;
  font-family:var(--font2);
  color: rgba(255,255,255,.80);
}
.badgeDot{
  width:10px; height:10px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--blue), var(--pink));
  box-shadow: 0 0 0 6px rgba(255,59,212,.10), 0 0 25px rgba(49,214,255,.22);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(.92); filter:saturate(1.05)}
  50%{transform:scale(1.08); filter:saturate(1.25)}
}

h1{
  margin: 16px 0 10px;
  font-size: clamp(38px, 5vw, 62px);
  line-height:1.02;
  letter-spacing:-.03em;
}
.grad{
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
}
.grad:after{
  content:"";
  position:absolute; inset: -14px -18px -14px -18px;
  background: radial-gradient(240px 110px at 20% 60%, rgba(255,59,212,.22), transparent 60%),
              radial-gradient(220px 140px at 80% 40%, rgba(49,214,255,.18), transparent 60%);
  filter: blur(18px);
  z-index:-1;
  opacity:.75;
}

.lead{
  font-family:var(--font2);
  font-size: 17px;
  line-height:1.55;
  color: rgba(255,255,255,.80);
  max-width: 52ch;
  margin: 0 0 20px;
}
.lead .muted{display:block; margin-top:8px; color: rgba(255,255,255,.62)}

.ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin: 18px 0 18px}
.btn{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  padding: 12px 16px;
  border-radius: 16px;
  cursor:pointer;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.16); box-shadow: 0 22px 70px rgba(0,0,0,.28)}
.btn:active{transform: translateY(0px) scale(.99)}
.btn--primary{
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(255,59,212,.22), rgba(124,60,255,.22), rgba(49,214,255,.18));
  overflow:hidden;
}
.btnGlow{
  position:absolute;
  inset:-2px;
  background: radial-gradient(280px 120px at 20% 30%, rgba(255,59,212,.48), transparent 65%),
              radial-gradient(260px 140px at 80% 60%, rgba(49,214,255,.34), transparent 65%),
              linear-gradient(90deg, rgba(255,59,212,.10), rgba(49,214,255,.10));
  opacity:.0;
  transition: opacity .18s ease;
  z-index:-1;
}
.btn--primary:hover .btnGlow{opacity:1}
.btn--glass{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  font-weight:650;
}
.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.10);
  font-weight:650;
}
.btn--small{padding:10px 12px; border-radius:14px; font-size:13px}
.btn--full{width:100%}

.trustRow{display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 0}
.trustPill{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.74);
  font-family:var(--font2);
  font-size:13px;
}
.trustKey{opacity:.9}

.countdownWrap{
  margin-top: 18px;
  padding: 14px 14px 12px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow2);
}
.countdownLabel{
  font-family:var(--font2);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom:10px;
}
.countdown{display:flex; align-items:center; gap:10px}
.t{
  min-width: 70px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
}
.n{
  font-size:22px;
  font-weight:800;
  letter-spacing:.02em;
  background: linear-gradient(90deg, var(--pink), var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.l{
  margin-top:2px;
  font-family:var(--font2);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: rgba(255,255,255,.52);
}
.sep{opacity:.55; font-weight:800}
.countdownHint{margin-top:10px; font-family:var(--font2); font-size:12px; color: rgba(255,255,255,.50)}

.showcase{position:relative; padding: 8px}
.glassFrame{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: perspective(1200px) rotateX(6deg) rotateY(-8deg);
  transform-origin:center;
  animation: float 4.8s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform: perspective(1200px) rotateX(6deg) rotateY(-8deg) translateY(0)}
  50%{transform: perspective(1200px) rotateX(5deg) rotateY(-6deg) translateY(-6px)}
}

.frameTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  background: rgba(0,0,0,.22);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.dots{display:flex; gap:7px}
.dots span{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.12)}
.dots span:nth-child(1){background:rgba(255,59,212,.45)}
.dots span:nth-child(2){background:rgba(124,60,255,.45)}
.dots span:nth-child(3){background:rgba(49,214,255,.45)}
.frameTitle{
  font-family:var(--font2);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.68);
}
.signal{display:flex; align-items:center; gap:8px; font-family:var(--font2); font-size:12px; color: rgba(255,255,255,.70)}
.sigDot{
  width:8px; height:8px; border-radius:999px;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(49,214,255,.14), 0 0 25px rgba(49,214,255,.25);
  animation: pulse 1.8s ease-in-out infinite;
}

.frameBody{padding: 16px}
.stage{
  position:relative;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(400px 240px at 20% 30%, rgba(255,59,212,.18), transparent 62%),
    radial-gradient(360px 260px at 90% 45%, rgba(49,214,255,.12), transparent 62%),
    radial-gradient(300px 220px at 50% 110%, rgba(124,60,255,.14), transparent 60%),
    rgba(0,0,0,.18);
  overflow:hidden;
  padding: 18px 16px 14px;
  min-height: 320px;
}
.stageGlow{
  position:absolute; inset:-80px;
  background: conic-gradient(from 180deg, rgba(255,59,212,.0), rgba(255,59,212,.25), rgba(49,214,255,.18), rgba(124,60,255,.18), rgba(255,59,212,.0));
  filter: blur(28px);
  opacity:.5;
  animation: spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.mic3d{
  position:absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%,-50%);
  width: 140px;
  height: 220px;
  filter: drop-shadow(0 22px 60px rgba(255,59,212,.22));
}
.micHead{
  position:absolute; left:50%; top:14px;
  transform: translateX(-50%);
  width: 110px; height: 110px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.06) 55%, rgba(0,0,0,.25) 75%),
              linear-gradient(135deg, rgba(255,59,212,.30), rgba(49,214,255,.22), rgba(124,60,255,.22));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 12px 30px rgba(255,255,255,.05);
}
.micBody{
  position:absolute; left:50%; top: 98px;
  transform: translateX(-50%);
  width: 42px; height: 110px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
}
.micShine{
  position:absolute; left: 50%; top: 106px;
  transform: translateX(-50%);
  width: 10px; height: 96px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.0));
  opacity:.45;
}

.wave{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom: 34px;
  height: 84px;
  background:
    radial-gradient(60px 40px at 10% 50%, rgba(49,214,255,.35), transparent 70%),
    radial-gradient(60px 40px at 30% 50%, rgba(255,59,212,.35), transparent 70%),
    radial-gradient(60px 40px at 50% 50%, rgba(124,60,255,.35), transparent 70%),
    radial-gradient(60px 40px at 70% 50%, rgba(49,214,255,.35), transparent 70%),
    radial-gradient(60px 40px at 90% 50%, rgba(255,59,212,.35), transparent 70%);
  filter: blur(2px);
  opacity:.65;
  animation: wave 2.6s ease-in-out infinite;
}
@keyframes wave{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-6px)}
}

.miniCards{
  position:absolute;
  left: 14px; right: 14px; bottom: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.miniCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 10px 10px 9px;
  backdrop-filter: blur(10px);
  min-height: 70px;
}
.miniTitle{font-weight:800; font-size:13px}
.miniTxt{font-family:var(--font2); font-size:12px; color: rgba(255,255,255,.62); margin-top:4px}

.frameBottom{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: 12px 2px 0;
}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  padding: 8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-family:var(--font2);
  font-size:12px;
  color: rgba(255,255,255,.72);
}

.floatingNotes span{
  position:absolute;
  font-size: 22px;
  opacity:.55;
  filter: drop-shadow(0 10px 30px rgba(255,59,212,.25));
  animation: note 4.6s ease-in-out infinite;
}
.floatingNotes span:nth-child(1){left: 24px; top: 10px}
.floatingNotes span:nth-child(2){right: 18px; top: 26px; animation-duration:5.2s}
.floatingNotes span:nth-child(3){left: 44px; bottom: -4px; animation-duration:4.2s}
.floatingNotes span:nth-child(4){right: 36px; bottom: 18px; animation-duration:5.6s}
@keyframes note{
  0%,100%{transform: translateY(0) rotate(-6deg)}
  50%{transform: translateY(-10px) rotate(6deg)}
}

/* marquee */
.marquee{
  position:relative;
  z-index:5;
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.marqueeTrack{
  display:flex;
  gap: 26px;
  white-space:nowrap;
  padding: 12px 0;
  animation: marquee 16s linear infinite;
  font-family:var(--font2);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(255,255,255,.55);
}
@keyframes marquee{
  from{transform: translateX(0)}
  to{transform: translateX(-33.333%)}
}

/* sections */
.section{position:relative; z-index:10; padding: 76px 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sectionHead{margin-bottom: 24px}
.sectionHead h2{
  margin: 0 0 8px;
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -.02em;
}
.sectionHead p{margin:0; font-family:var(--font2); color: rgba(255,255,255,.70); max-width:72ch}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
  padding: 16px 16px 14px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.cardIcon{
  width: 34px; height: 34px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,59,212,.18), rgba(49,214,255,.14));
  border: 1px solid rgba(255,255,255,.14);
  font-weight:900;
  margin-bottom: 10px;
}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; font-family:var(--font2); color: rgba(255,255,255,.66); line-height:1.55; font-size:14px}

.split{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items:start;
}
.panel{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  padding: 18px 18px 16px;
}
.panel h3{margin:0 0 8px}
.panel p{margin:0 0 14px; font-family:var(--font2); color: rgba(255,255,255,.68); line-height:1.6}
.panelRow{display:flex; gap:10px; flex-wrap:wrap}

.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 14px 12px 12px;
  text-align:center;
  box-shadow: var(--shadow2);
}
.statN{
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(90deg, var(--pink), var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.statL{
  margin-top:4px;
  font-family:var(--font2);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,.54);
}
.quote{
  margin-top: 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  padding: 16px 16px 14px;
}
.quoteMark{
  font-size: 34px;
  line-height:1;
  opacity:.7;
  color: rgba(255,255,255,.7);
}
.quote p{margin: 6px 0 10px; font-family:var(--font2); color: rgba(255,255,255,.70); line-height:1.6}
.quoteBy{font-family:var(--font2); font-size:12px; color: rgba(255,255,255,.52)}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:center;
}

.phone{
  position:relative;
  max-width: 430px;
  margin: 0 auto;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.phoneTop{
  height: 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pill{
  width: 96px; height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.cam{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(49,214,255,.55);
  box-shadow: 0 0 0 7px rgba(49,214,255,.12);
}
.phoneScreen{
  padding: 18px 16px 16px;
  background:
    radial-gradient(420px 280px at 20% 20%, rgba(255,59,212,.22), transparent 60%),
    radial-gradient(380px 260px at 90% 40%, rgba(49,214,255,.16), transparent 60%),
    rgba(0,0,0,.18);
}
.screenBadge{
  display:inline-flex;
  padding: 8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-family:var(--font2);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.72);
}
.screenTitle{margin: 14px 0 4px; font-size: 30px; font-weight: 900; letter-spacing:-.02em}
.screenSub{font-family:var(--font2); color: rgba(255,255,255,.70); margin-bottom: 14px}

.screenSteps{display:grid; gap: 10px; margin: 14px 0 16px}
.screenStep{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-family:var(--font2);
  color: rgba(255,255,255,.78);
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--pink), var(--blue));
  box-shadow: 0 0 0 6px rgba(255,59,212,.10), 0 0 20px rgba(49,214,255,.18);
}
.screenHint{margin-top:10px; font-family:var(--font2); font-size:12px; color: rgba(255,255,255,.52)}
.phoneShadow{
  position:absolute; inset:-40px;
  background: radial-gradient(380px 240px at 50% 80%, rgba(255,59,212,.18), transparent 60%),
              radial-gradient(380px 240px at 50% 30%, rgba(49,214,255,.12), transparent 60%);
  filter: blur(34px);
  z-index:-1;
}

.bullets{display:grid; gap: 10px}
.bullet{
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px 14px 12px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
}
.bI{
  width:38px; height:38px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.bH{font-weight:900}
.bP{margin-top:4px; font-family:var(--font2); color: rgba(255,255,255,.66); line-height:1.55; font-size:14px}

.callout{
  margin-top: 10px;
  padding: 16px 16px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,59,212,.10), rgba(49,214,255,.08), rgba(124,60,255,.08));
  box-shadow: var(--shadow2);
}
.calloutTitle{font-weight: 900; margin-bottom: 6px}
.callout p{margin:0 0 12px; font-family:var(--font2); color: rgba(255,255,255,.70); line-height:1.6}

.accordion{display:grid; gap: 10px}
.qa{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.q{
  width:100%;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding: 16px 16px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.90);
  font-weight: 900;
  font-size: 15px;
  cursor:pointer;
  text-align:left;
}
.chev{
  width:10px; height:10px;
  border-right:2px solid rgba(255,255,255,.75);
  border-bottom:2px solid rgba(255,255,255,.75);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity:.8;
}
.qa[open] .chev,
.q[aria-expanded="true"] .chev{transform: rotate(-135deg)}
.a{
  padding: 0 16px 16px;
  font-family:var(--font2);
  color: rgba(255,255,255,.68);
  line-height:1.6;
  font-size:14px;
  max-height: 0;
  overflow:hidden;
  transition: max-height .22s ease;
}

.footerCta{
  margin-top: 22px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,59,212,.10), rgba(49,214,255,.08));
  box-shadow: var(--shadow);
}
.footerCtaInner{
  padding: 18px 18px;
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
}
.footerCtaTitle{font-weight: 900; font-size: 18px}
.footerCtaTxt{margin-top:4px; font-family:var(--font2); color: rgba(255,255,255,.70)}

.footer{
  position:relative;
  z-index:10;
  padding: 42px 0 60px;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.01);
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.1fr 1fr .8fr;
  gap: 14px;
  align-items:center;
}
.footLogo{height:38px; width:auto; opacity:.95}
.footTxt{margin-top:8px; font-family:var(--font2); color: rgba(255,255,255,.54); font-size:13px}
.footLinks{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; font-family:var(--font2); color: rgba(255,255,255,.64); font-size:14px}
.footLinks a:hover{color: rgba(255,255,255,.9)}
.footSocial{display:flex; gap:10px; justify-content:flex-end}
.soc{
  width:38px; height:38px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:grid; place-items:center;
  font-family:var(--font2);
  font-weight:700;
  color: rgba(255,255,255,.70);
}
.soc:hover{color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.16)}

.tiny{font-family:var(--font2); color: rgba(255,255,255,.55); font-size:12.5px; line-height:1.6}

/* modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:100;
}
.modal[aria-hidden="false"]{display:block}
.modalOverlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}
.modalCard{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(560px, calc(100% - 24px));
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(20,20,32,.88), rgba(8,8,14,.92));
  box-shadow: 0 40px 120px rgba(0,0,0,.65);
  overflow:hidden;
}
.modalCard--small{width: min(520px, calc(100% - 24px)); padding: 18px 18px 16px}
.modalClose{
  position:absolute;
  top: 10px; right: 10px;
  width: 44px; height: 44px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  cursor:pointer;
}
.modalClose:hover{border-color: rgba(255,255,255,.16)}
.modalHead{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modalBadge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-family:var(--font2);
  font-size:13px;
}
.modalHead h3{margin: 12px 0 6px; font-size: 22px; letter-spacing:-.01em}
.modalSub{margin:0; font-family:var(--font2); color: rgba(255,255,255,.68); line-height:1.55}

.form{padding: 16px 18px 18px}
.field{display:grid; gap: 8px; margin-bottom: 12px}
label{font-family:var(--font2); font-size:13px; color: rgba(255,255,255,.72)}
input,select{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  outline:none;
  font-family:var(--font2);
}
input::placeholder{color: rgba(255,255,255,.40)}
input:focus,select:focus{border-color: rgba(49,214,255,.35); box-shadow: 0 0 0 6px rgba(49,214,255,.12)}
.grid2form{display:grid; grid-template-columns: 1fr 1fr; gap: 10px}
.check{display:flex; gap:10px; align-items:flex-start}
.check input{width:18px; height:18px; margin-top:2px}

.formNote{
  margin-top: 10px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font2);
  font-size: 12.5px;
  color: rgba(255,255,255,.56);
}
.dotPulse{
  width: 10px; height: 10px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--pink), var(--blue));
  box-shadow: 0 0 0 7px rgba(255,59,212,.10), 0 0 20px rgba(49,214,255,.14);
  animation: pulse 1.8s ease-in-out infinite;
}

.formSuccess{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px 14px 12px;
}
.successTitle{font-weight: 900}
.successTxt{margin-top:4px; font-family:var(--font2); color: rgba(255,255,255,.70)}
.successActions{display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap}

.modalFoot{padding: 0 18px 16px}

@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr; padding-top: 26px}
  .showcase{max-width: 520px; margin: 0 auto}
  .glassFrame{transform: perspective(1200px) rotateX(4deg) rotateY(0deg)}
  .grid3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .footerGrid{grid-template-columns: 1fr; text-align:center}
  .footSocial{justify-content:center}
  .nav{display:none}
  .hamburger{display:block}
}

@media (prefers-reduced-motion: reduce){
  .glassFrame,.badgeDot,.sigDot,.marqueeTrack,.stageGlow,.wave,.floatingNotes span,.dotPulse{animation:none !important}
  .btn, .card{transition:none}
}


/* --- FINAL SIMPLIFIED LANDING OVERRIDES --- */
.topbar--simple{
  justify-content:center;
  padding: 18px 18px;
}
.brand--center{justify-content:center}
.brandLogo--xl{ height:58px; }
@media (max-width: 520px){
  .brandLogo--xl{height:54px}
}
.hero{padding-top: 18px}
.heroGrid{ padding-top: 34px; padding-bottom: 44px; }

.availabilityWrap{
  margin-top: 18px;
  padding: 16px 16px 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow2);
}
.availabilityPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-family: var(--font2);
  color: rgba(255,255,255,.80);
}
.availabilityDot{
  width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--pink), var(--blue));
  box-shadow: 0 0 0 6px rgba(255,59,212,.10), 0 0 25px rgba(49,214,255,.22);
  animation: pulse 1.8s ease-in-out infinite;
}
.availabilitySub{
  margin-top: 10px;
  font-family: var(--font2);
  font-size: 13px;
  color: rgba(255,255,255,.60);
  line-height:1.5;
}

/* Mobile: avoid overflow + clean stack */
@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr; padding-top: 26px; padding-bottom: 26px}
  h1{font-size: clamp(34px, 9vw, 52px)}
  .lead{font-size: 16px}
  .glassFrame{transform:none !important}
  .showcase{max-width: 560px; margin: 0 auto}
  .stage{min-height: 300px}
}
@media (max-width: 420px){
  .heroGrid{padding-left: 16px; padding-right: 16px}
  .miniCards{grid-template-columns: 1fr; gap: 8px}
  .stage{min-height: 340px}
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-top)){
  body{padding-top: env(safe-area-inset-top)}
}

/* === ULTRA SIMPLE + HUGE LOGO === */
.brandLogo--xl{
  height:110px !important;
}
@media(max-width:520px){
  .brandLogo--xl{height:88px !important;}
}

.heroGrid{gap:18px;}
@media(max-width:980px){
  .heroLeft{text-align:center;}
  .ctaRow{justify-content:center;}
}

/* === LAYOUT FIX: showcase on desktop right, on mobile below === */
.heroGrid{
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
}
.heroRight{display:block}
@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr;}
  .heroRight{margin-top: 14px;}
  .showcase{max-width: 560px; margin: 0 auto;}
}