:root{
  --bg:#050a18;
  --bg-2:#0b1226;
  --ink:#f5f8ff;
  --ink-2:#aebbd8;
  --muted:#6e7e9e;
  --cyan:#22d3ee;
  --gold:#e8c87a;
  --shell:#e8f4ff;
  --shell-2:#c9d9f0;
  --shell-3:#9fb4d4;
  --head:'Playfair Display', Georgia, serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.stage{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(34,211,238,.16), transparent 58%),
    radial-gradient(90% 80% at 12% 88%, rgba(232,200,122,.10), transparent 60%),
    linear-gradient(160deg,#050a18 0%,#0a1224 55%,#050a18 100%);
}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.glow-a{width:46vw;height:46vw;right:-8vw;top:-10vw;background:radial-gradient(circle,rgba(34,211,238,.55),transparent 70%);animation:drift 18s ease-in-out infinite alternate}
.glow-b{width:38vw;height:38vw;left:-10vw;bottom:-14vw;background:radial-gradient(circle,rgba(232,200,122,.35),transparent 70%);animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3vw,3vw,0) scale(1.12)}}
.grid{
  position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(174,187,216,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(174,187,216,.09) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(70% 60% at 50% 45%,#000 35%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 35%,transparent 100%);
}

.layout{
  position:relative;z-index:2;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:clamp(1rem,4vw,4rem);
  padding:clamp(1.5rem,5vw,6rem);
}
.eyebrow{
  font-size:clamp(.7rem,1.1vw,.82rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:clamp(1rem,2vw,1.6rem);
}
.copy h1{
  font-family:var(--head);
  font-weight:600;
  font-size:clamp(2.2rem,5.4vw,4.6rem);
  line-height:1.06;
  letter-spacing:-.01em;
}
.copy h1 em{font-style:italic;color:var(--gold)}
.lede{
  margin-top:clamp(1rem,2vw,1.6rem);
  font-size:clamp(.95rem,1.4vw,1.15rem);
  font-weight:300;
  color:var(--ink-2);
  max-width:34ch;
  line-height:1.6;
}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.4rem,3vw,2.4rem)}
.btn{
  font-family:var(--body);font-size:.86rem;font-weight:500;letter-spacing:.02em;
  border-radius:999px;padding:.85rem 1.5rem;cursor:pointer;
  border:1px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#04121f;box-shadow:0 12px 34px -12px rgba(34,211,238,.7);display:inline-flex;align-items:center;gap:.55rem}
.btn-primary:hover{box-shadow:0 18px 42px -14px rgba(34,211,238,.85)}
.btn-primary .dot{width:7px;height:7px;border-radius:50%;background:#04121f;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:var(--ink-2);backdrop-filter:blur(8px)}
.btn-ghost:hover{color:var(--ink);border-color:rgba(34,211,238,.45)}
.hint{margin-top:1rem;font-size:.72rem;color:var(--muted);letter-spacing:.08em}
kbd{font-family:var(--body);font-size:.68rem;border:1px solid rgba(174,187,216,.3);border-radius:5px;padding:.12rem .38rem;color:var(--ink-2)}

.robot-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.4rem)}
.robot{position:relative;width:clamp(190px,20vw,270px);margin-top:2.2rem;animation:float 4.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(.6deg)}}
.antenna{position:absolute;left:50%;top:-30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.antenna .stem{width:5px;height:22px;border-radius:3px;background:linear-gradient(#dfeaf8,#a9bdd8)}
.antenna .ball{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff5d8,var(--gold));box-shadow:0 0 16px rgba(232,200,122,.9),0 0 34px rgba(232,200,122,.45);animation:beacon 2.4s ease-in-out infinite}
@keyframes beacon{0%,100%{box-shadow:0 0 12px rgba(232,200,122,.7),0 0 26px rgba(232,200,122,.3)}50%{box-shadow:0 0 22px rgba(232,200,122,1),0 0 48px rgba(232,200,122,.55)}}
.head{position:relative;height:clamp(118px,12vw,152px);border-radius:44px;background:linear-gradient(165deg,#f6fbff 0%,#dfeaf7 46%,#b9cde4 100%);box-shadow:inset 0 -10px 22px rgba(120,150,190,.35),inset 0 8px 14px rgba(255,255,255,.9),0 26px 50px -22px rgba(34,211,238,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.visor{position:relative;width:74%;height:58%;border-radius:26px;background:linear-gradient(160deg,#0a1428,#101d38);box-shadow:inset 0 0 24px rgba(34,211,238,.28),0 2px 0 rgba(255,255,255,.55);display:flex;align-items:flex-start;justify-content:center;gap:14%;padding-top:12%}
.eye{width:clamp(11px,1.2vw,15px);height:clamp(11px,1.2vw,15px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8fbff,var(--cyan));box-shadow:0 0 12px rgba(34,211,238,.95);animation:blink 5.5s infinite}
.eye:nth-child(2){animation-delay:.06s}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.wave{position:absolute;bottom:9%;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;gap:4px;height:26%}
.wave i{width:3px;height:6px;border-radius:2px;background:rgba(34,211,238,.28);transition:background .3s ease}
.robot.speaking .wave i{background:var(--cyan);box-shadow:0 0 8px rgba(34,211,238,.8);animation:talk .7s ease-in-out infinite}
.robot.speaking .wave i:nth-child(2){animation-delay:.1s}
.robot.speaking .wave i:nth-child(3){animation-delay:.2s}
.robot.speaking .wave i:nth-child(4){animation-delay:.3s}
.robot.speaking .wave i:nth-child(5){animation-delay:.15s}
.robot.speaking .wave i:nth-child(6){animation-delay:.25s}
.robot.speaking .wave i:nth-child(7){animation-delay:.05s}
@keyframes talk{0%,100%{height:5px}50%{height:18px}}
.cheek{position:absolute;bottom:16%;width:16%;height:7%;border-radius:999px;background:rgba(232,200,122,.5);filter:blur(1px)}
.cheek-l{left:7%}.cheek-r{right:7%}

.neck{width:16%;height:14px;margin:6px auto 0;border-radius:8px;background:linear-gradient(#a9bdd8,#8296b5);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.torso{position:relative;margin:0 auto;width:58%;height:clamp(112px,11.5vw,146px);border-radius:34px;background:linear-gradient(165deg,#f6fbff,#d5e4f5 55%,#aec4dd);box-shadow:inset 0 -8px 18px rgba(120,150,190,.35),inset 0 8px 12px rgba(255,255,255,.85),0 22px 40px -24px rgba(34,211,238,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.panel{font-family:var(--body);font-size:clamp(.7rem,.9vw,.86rem);font-weight:600;letter-spacing:.16em;color:#08243d;background:linear-gradient(135deg,#8be9fd,#22d3ee);border-radius:12px;padding:.4rem 1.05rem;box-shadow:0 0 18px rgba(34,211,238,.55),inset 0 -2px 6px rgba(0,60,90,.25)}
.core{width:clamp(26px,2.6vw,34px);height:clamp(26px,2.6vw,34px);border-radius:50%;background:radial-gradient(circle at 38% 32%,#ffffff,#22d3ee 45%,#0e7490);box-shadow:0 0 18px rgba(34,211,238,.85);animation:core 3s ease-in-out infinite}
@keyframes core{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
.arm{position:absolute;width:clamp(12px,1.2vw,16px);border-radius:999px;background:linear-gradient(180deg,#e6f1fc,#b4c9e0);box-shadow:inset -2px 0 5px rgba(120,150,190,.45)}
.arm-l{left:-24px;top:14px;height:clamp(58px,6vw,76px);transform-origin:50% 0;transform:rotate(-9deg);animation:swing 4.6s ease-in-out infinite}
.arm-r{right:-26px;top:-6px;height:clamp(88px,9vw,112px);transform-origin:50% 100%;transform:rotate(30deg);animation:wave 1.7s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(26deg)}50%{transform:rotate(48deg)}}
@keyframes swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-16deg)}}
.hand{position:absolute;left:50%;top:-16px;transform:translateX(-50%);width:clamp(22px,2.2vw,28px);height:clamp(22px,2.2vw,28px);border-radius:50%;background:radial-gradient(circle at 36% 30%,#ffffff,#cfdff0)}
.legs{display:flex;justify-content:center;gap:16%;margin-top:4px}
.legs span{width:14%;height:clamp(30px,3vw,42px);border-radius:8px 8px 12px 12px;background:linear-gradient(#a9bdd8,#8296b5);box-shadow:inset 0 -4px 8px rgba(0,0,0,.2)}
.shadow{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:74%;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(34,211,238,.35),transparent 70%);filter:blur(6px);animation:hoverGlow 4.6s ease-in-out infinite}
@keyframes hoverGlow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.75}50%{transform:translateX(-50%) scaleX(.86);opacity:.5}}

.bubble{
  position:relative;
  max-width:min(320px,34vw);
  padding:.9rem 1.15rem;
  border-radius:18px;
  background:rgba(18,32,64,.72);
  border:1px solid rgba(34,211,238,.34);
  backdrop-filter:blur(14px);
  font-size:clamp(.82rem,1.05vw,.95rem);
  line-height:1.45;
  color:#dff6ff;
  box-shadow:0 18px 40px -22px rgba(34,211,238,.75);
  opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.bubble.show{opacity:1;transform:translateY(0) scale(1)}
.bubble::after{
  content:"";position:absolute;left:50%;bottom:-9px;margin-left:-9px;
  width:18px;height:18px;background:rgba(18,32,64,.72);
  border-right:1px solid rgba(34,211,238,.34);border-bottom:1px solid rgba(34,211,238,.34);
  transform:rotate(45deg);
}
.caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--cyan);animation:blinkCaret .9s steps(1) infinite}
@keyframes blinkCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (max-width:900px){
  body{overflow:auto}
  .layout{grid-template-columns:1fr;text-align:center;padding:clamp(2rem,8vw,3rem) 1.4rem;gap:2.5rem}
  .lede{margin-inline:auto}
  .actions,.hint{justify-content:center}
  .copy h1{font-size:clamp(2rem,8vw,3rem)}
  .bubble{max-width:78vw;margin-inline:auto}
  .robot{width:190px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}