/* ===== Foundations ===== */
:root{
  --bg:#000000;
  --bg-alt:#0a0a0c;
  --ink:#f5f5f7;
  --ink-dim:#a1a1a6;
  --ink-faint:#6e6e73;
  --accent1:#5b7cff;
  --accent2:#c084fc;
  --accent3:#4ce0c0;
  --line:rgba(255,255,255,.1);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block;max-width:100%}
section.section{padding:180px 24px}
h1,h2,h3{font-weight:600;letter-spacing:-.03em}

#stars{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.6;
}

/* ===== Reveal on scroll ===== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ===== Nav ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:rgba(0,0,0,.35);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, background .4s ease;
}
.nav.scrolled{
  background:rgba(0,0,0,.72);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;
}
.nav-logo{font-size:20px;letter-spacing:0;color:var(--ink);opacity:.9}
.nav-links{display:flex;gap:34px;font-size:13px;color:var(--ink-dim)}
.nav-links a{transition:color .25s ease}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  color:#000 !important;background:var(--ink);
  padding:6px 14px;border-radius:100px;font-weight:600;
}
.nav-cta:hover{background:#fff}
.nav-toggle{display:none;background:none;border:0;width:28px;height:20px;position:relative;cursor:pointer}
.nav-toggle span{position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.nav-toggle span:first-child{top:2px}
.nav-toggle span:last-child{bottom:2px}
.nav-mobile{
  display:none;flex-direction:column;gap:2px;
  background:rgba(0,0,0,.92);backdrop-filter:blur(20px);
  max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
}
.nav-mobile a{padding:16px 24px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-dim)}
.nav-mobile.open{max-height:500px}

/* ===== Hero ===== */
.hero{
  position:relative;z-index:1;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:140px 24px 60px;
  gap:60px;
}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:18px}
.eyebrow{
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero h1{
  font-size:clamp(56px,11vw,148px);
  line-height:.98;
  background:linear-gradient(180deg,#fff 40%,#9a9aa2);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-sub{font-size:clamp(18px,2.4vw,26px);color:var(--ink-dim);font-weight:400}
.scroll-cue{
  margin-top:30px;width:26px;height:42px;border:2px solid var(--ink-faint);
  border-radius:20px;display:flex;justify-content:center;padding-top:8px;
}
.scroll-cue span{width:4px;height:8px;background:var(--ink-dim);border-radius:4px;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(14px)}100%{opacity:0}}

.hero-visual{position:relative;width:100%;display:flex;justify-content:center}

/* ===== Phone visual ===== */
.phone{position:relative;width:220px;height:440px;animation:float 6s ease-in-out infinite}
.phone.small{width:170px;height:340px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}
.phone-glow{
  position:absolute;inset:-40px;border-radius:60px;
  background:radial-gradient(circle,rgba(91,124,255,.35),transparent 70%);
  filter:blur(20px);
}
.phone-body{
  position:relative;width:100%;height:100%;border-radius:46px;
  background:linear-gradient(160deg,#e9e9ee,#8f8fa3 45%,#c9c9d6);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.4);
  overflow:hidden;
  transition:background 1.2s ease;
}
#colorPhone .phone-body{
  background:linear-gradient(160deg,var(--c1,#e9e9ee),var(--c2,#8f8fa3) 60%);
}
.phone-sheen{
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 40%,transparent 60%);
  transform:translateX(-100%);
  animation:sheen 5s ease-in-out infinite;
}
@keyframes sheen{0%{transform:translateX(-120%)}45%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.phone-cam{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:12px;
  background:radial-gradient(circle at 35% 35%,#3a3a44,#0a0a0d 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.phone-ring{position:absolute;border:1px solid rgba(255,255,255,.15);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.r1{width:340px;height:340px;animation:spin 20s linear infinite}
.r2{width:440px;height:440px;animation:spin 30s linear infinite reverse}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ===== Sections ===== */
.section{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.section.dark{max-width:none;background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.dark > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}

.section-head h2{font-size:clamp(34px,5.5vw,64px);line-height:1.04;margin:14px 0 20px}
.section-head.center{text-align:center}
.lede{font-size:clamp(17px,1.6vw,21px);color:var(--ink-dim);max-width:640px}
.lede.center{margin:0 auto}
.section p + p{margin-top:16px;color:var(--ink-dim);font-size:16px;max-width:560px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:60px}
.split.reverse{grid-template-columns:1fr 1fr}
.split.reverse .split-text{order:1}
.split.reverse .split-visual{order:2}
.split-visual{display:flex;justify-content:center}

.stat-list{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.stat-list li{display:flex;align-items:baseline;gap:14px;color:var(--ink-dim);font-size:15px;border-top:1px solid var(--line);padding-top:14px}
.stat-list span{font-size:24px;font-weight:600;color:var(--ink);min-width:110px}

/* Orb (design section) */
.orb{
  width:min(320px,70vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff,#c9c9d6 30%,#6f6f85 65%,#1c1c22 100%);
  box-shadow:0 0 90px rgba(91,124,255,.35), inset -20px -20px 60px rgba(0,0,0,.4), inset 10px 10px 40px rgba(255,255,255,.3);
  animation:float 7s ease-in-out infinite;
}

/* Neural viz */
.neural-viz{margin-top:70px;max-width:800px;margin-inline:auto}
.neural-svg{width:100%;height:auto}
.neural-lines path{fill:none;stroke:url(#none);stroke-width:1.4}
.neural-lines path:nth-child(1){stroke:var(--accent1);opacity:.7}
.neural-lines path:nth-child(2){stroke:var(--accent2);opacity:.5}
.neural-node{fill:var(--ink)}

/* Hologrid (display section) */
.hologrid{
  position:relative;width:min(360px,80vw);aspect-ratio:1/1.1;
  background:
    linear-gradient(rgba(91,124,255,.18) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(91,124,255,.18) 1px,transparent 1px) 0 0/28px 28px;
  border-radius:24px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.holo-plane{
  width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(76,224,192,.5),rgba(91,124,255,.25) 55%,transparent 75%);
  filter:blur(2px);
  animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.08);opacity:1}}

/* Power */
.power-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:70px;background:var(--line);border-radius:20px;overflow:hidden}
.power-card{background:var(--bg-alt);padding:50px 24px;text-align:center}
.power-num{font-size:clamp(40px,6vw,64px);font-weight:700;background:linear-gradient(90deg,var(--accent1),var(--accent3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.power-num span{font-size:.5em}
.power-label{margin-top:8px;color:var(--ink-dim);font-size:14px}

/* Aria */
.aria-pulse{position:relative;width:260px;height:260px;display:flex;align-items:center;justify-content:center}
.aria-core{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#fff,var(--accent2) 60%,transparent 80%);box-shadow:0 0 60px var(--accent2);animation:pulse 3s ease-in-out infinite}
.aria-ring{position:absolute;inset:0;border:1px solid rgba(192,132,252,.35);border-radius:50%;animation:ringout 3s ease-out infinite}
.aria-ring.ring2{animation-delay:1.5s}
@keyframes ringout{0%{transform:scale(.3);opacity:1}100%{transform:scale(1);opacity:0}}

/* Quote */
.quote-section{padding:180px 24px;text-align:center;max-width:900px;margin:0 auto;position:relative;z-index:1}
.quote-section p{font-size:clamp(24px,4vw,42px);font-weight:300;font-style:italic;line-height:1.35;color:var(--ink)}
.quote-section cite{display:block;margin-top:26px;font-style:normal;color:var(--ink-faint);font-size:15px;letter-spacing:.04em}

/* Specs */
.specs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:60px;background:var(--line);border-radius:20px;overflow:hidden}
.spec{background:var(--bg-alt);padding:34px 26px}
.spec h3{font-size:15px;margin-bottom:10px;color:var(--ink)}
.spec p{font-size:14px;color:var(--ink-dim);line-height:1.5}

/* Colors / buy */
.colors-section{text-align:center;padding-bottom:220px}
.color-visual{margin:60px 0 40px;display:flex;justify-content:center}
.swatches{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.swatch{
  width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  background:linear-gradient(160deg,var(--c1),var(--c2));
  transition:transform .25s ease, border-color .25s ease;
}
.swatch:hover{transform:scale(1.15)}
.swatch.active{border-color:var(--ink)}
.color-name{margin-top:20px;color:var(--ink-dim);font-size:15px}
.buy-btn{
  display:inline-block;margin-top:34px;padding:14px 30px;border-radius:100px;
  background:var(--ink);color:#000;font-weight:600;font-size:15px;
  transition:transform .25s ease, background .25s ease;
}
.buy-btn:hover{transform:translateY(-2px);background:#fff}

/* Footer */
.footer{
  text-align:center;padding:60px 24px 80px;color:var(--ink-faint);
  font-size:13px;border-top:1px solid var(--line);position:relative;z-index:1;
}
.footer-sub{margin-top:6px}

/* ===== Responsive ===== */
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-mobile{display:flex}
  .split, .split.reverse{grid-template-columns:1fr;gap:50px}
  .split.reverse .split-text{order:2}
  .split.reverse .split-visual{order:1}
  .power-row{grid-template-columns:1fr}
  .specs-grid{grid-template-columns:1fr 1fr}
  section.section{padding:120px 20px}
}
@media (max-width:480px){
  .specs-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}