/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  padding:100px 40px 40px;
  overflow:hidden;
  display:grid;
  grid-template-rows: auto 1fr auto;
}

.hero__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}
.hero__vignette{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(16,16,16,.08) 100%);
}

.hero__label{
  position:relative; z-index:5;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-2);
  justify-self:center;
  margin-top:60px;
}
.hero__label .dot{
  width:6px; height:6px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 12px var(--lime);
  animation:pulse 2s var(--e-inout) infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.4); opacity:.5; } }

.hero__stage{
  position:relative; z-index:3;
  min-height: 640px;
  display:flex; align-items:center; justify-content:center;
  perspective: 2000px;
}

.hero__light{ position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.hero__light--violet{
  width:60vw; height:60vw; max-width:900px; max-height:900px;
  background: radial-gradient(circle, rgba(101,75,255,.35) 0%, rgba(101,75,255,0) 60%);
  top:-10%; left:50%; transform:translateX(-50%);
  animation: driftV 14s ease-in-out infinite alternate;
}
.hero__light--warm{
  width:40vw; height:40vw; max-width:600px; max-height:600px;
  background: radial-gradient(circle, rgba(199,255,58,.22) 0%, rgba(199,255,58,0) 60%);
  bottom:-10%; right:5%;
  animation: driftW 18s ease-in-out infinite alternate;
}
@keyframes driftV{ 0%{ transform:translate(-50%,0) } 100%{ transform:translate(-45%,20px) } }
@keyframes driftW{ 0%{ transform:translate(0,0) } 100%{ transform:translate(-30px,-20px) } }

.hero__floor{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%) perspective(800px) rotateX(75deg);
  width:120%; height:400px;
  background: linear-gradient(180deg, transparent 0%, rgba(16,16,16,.06) 50%, transparent 100%);
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(16,16,16,.06) 50%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(16,16,16,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(16,16,16,.05) 0 1px, transparent 1px 40px);
  transform-origin: bottom;
  opacity:.6;
  mask-image: radial-gradient(ellipse at center top, black 30%, transparent 70%);
}

.hero__reflection{
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  width:340px; height:60px;
  background:radial-gradient(ellipse, rgba(16,16,16,.35) 0%, transparent 70%);
  filter:blur(12px);
  z-index:2;
  animation: reflSway 6s var(--e-inout) infinite alternate;
}
@keyframes reflSway{ 0%{ width:340px; opacity:.7 } 100%{ width:380px; opacity:.55 } }

#hero-particles{
  position:absolute; inset:0; z-index:2; pointer-events:none;
}

/* Terminal */
.terminal-wrap{
  position:relative; z-index:4;
  width:min(360px, 42vw);
  height:520px;
  transform-style:preserve-3d;
  will-change: transform;
}
.terminal{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  animation: floatY 6s var(--e-inout) infinite alternate;
}
@keyframes floatY{
  0%{ transform: translateY(-6px) rotateX(-2deg) rotateY(-8deg); }
  100%{ transform: translateY(6px) rotateX(2deg) rotateY(8deg); }
}

/* Stand */
.terminal__stand{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%) translateZ(-30px);
  width:180px; height:220px;
}
.terminal__stand-neck{
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  width:14px; height:160px;
  background: linear-gradient(90deg, #202020, #3a3a3a 30%, #4a4a4a 50%, #2a2a2a 80%, #101010);
  border-radius:4px;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(0,0,0,.5);
}
.terminal__stand-base{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:160px; height:16px;
  background: linear-gradient(180deg, #2a2a2a, #101010);
  border-radius:50%;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.5);
}
.terminal__stand-shadow{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:180px; height:20px;
  background:radial-gradient(ellipse, rgba(0,0,0,.4), transparent 70%);
  filter:blur(6px);
}

/* Tablet */
.terminal__tablet{
  position:absolute; top:20px; left:50%;
  transform: translateX(-50%) translateZ(40px);
  width:280px; height:360px;
  transform-style:preserve-3d;
}
.terminal__bezel{
  position:absolute; inset:0;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 50%, #1e1e1e 100%);
  border-radius:24px;
  padding:14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 30px 60px -20px rgba(0,0,0,.6),
    0 60px 120px -40px rgba(101,75,255,.25);
}
.terminal__edge{
  position:absolute; inset:0; border-radius:24px;
  border:1px solid rgba(255,255,255,.04);
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 20%);
}
.terminal__screen{
  position:relative; width:100%; height:100%;
  background: linear-gradient(180deg, #0f0d1a 0%, #131018 50%, #0a0812 100%);
  border-radius:14px;
  overflow:hidden;
  padding:22px 20px 20px;
  display:flex; flex-direction:column;
  color:#F4F2EC;
  box-shadow: inset 0 0 40px rgba(101,75,255,.15), inset 0 0 0 1px rgba(255,255,255,.04);
}
.terminal__screen::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 0%, rgba(101,75,255,.22), transparent 60%);
  pointer-events:none;
}
.terminal__screen::after{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
  pointer-events:none; opacity:.6;
}
.ts__topbar{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; opacity:.6;
  position:relative; z-index:2;
}
.ts__body{ flex:1; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; margin:24px 0; }
.ts__welcome{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.28em; opacity:.5; margin-bottom:16px;
}
.ts__prompt{
  font-size:22px; line-height:1.15; font-weight:500; letter-spacing:-.02em;
}
.ts__cta{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:12px 16px; border-radius:100px;
  background:var(--violet); color:#fff;
  font-size:12px; font-weight:500;
  box-shadow: 0 8px 20px -6px rgba(101,75,255,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
.ts__foot{
  margin-top:12px; display:flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; opacity:.5;
  position:relative; z-index:2;
}
.ts__pulse{ width:5px; height:5px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); animation:pulse 2s var(--e-inout) infinite; }

/* Copy */
.hero__copy{
  position:relative; z-index:5;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:end;
  gap:40px;
  padding: 0 20px;
}
.hero__headline{
  grid-column:1 / -1;
  font-family:var(--f-sans);
  font-weight:500;
  font-size: clamp(56px, 9.5vw, 148px);
  line-height:.9;
  letter-spacing:-0.045em;
  margin:0;
  color:var(--ink);
}
.hero__headline--alt{ display:none; }
.hh{ display:block; overflow:hidden; }
.hh > span, .hh{ display:block; }
.hh.b{ text-align:center; }
.hh.c{ text-align:right; font-style:italic; font-family:var(--f-display); font-weight:400; }

.hero__sub{
  grid-column: 1 / 2;
  max-width:36ch; font-size:15px; line-height:1.5; color:var(--ink-2);
  margin:0; padding-top:20px;
}
.hero__actions{
  grid-column: 3 / 4;
  display:flex; gap:10px; justify-content:flex-end; padding-top:20px;
}

.hero__cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.28em; color:var(--warm-2);
  z-index:6;
}
.hero__cue i{
  width:1px; height:40px; background:linear-gradient(to bottom, var(--warm-2) 0%, transparent 100%);
  position:relative; overflow:hidden;
}
.hero__cue i::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:40%;
  background:var(--ink); animation:cue 2.5s var(--e-inout) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(250%) } }

/* Responsive */
@media (max-width:900px){
  .hero{ padding:80px 20px 30px; }
  .hero__label{ margin-top:30px; }
  .hero__copy{ grid-template-columns:1fr; }
  .hero__sub, .hero__actions{ grid-column:1; }
  .hero__actions{ justify-content:flex-start; }
  .hh.b, .hh.c{ text-align:left; }
  .terminal-wrap{ width:min(260px,60vw); height:400px; }
  .terminal__tablet{ width:220px; height:280px; }
  .hero__stage{ min-height:460px; }
}