:root{
  --bg:#050a18;--bg2:#0b1226;--accent:#13224a;
  --ink:#f5f8ff;--ink2:#aebbd8;--muted:#6e7e9e;
  --cyan:#22d3ee;--gold:#e8c87a;--shell:#e8f4ff;--shell2:#c9d9f0;--shell3:#9fb4d4;
  --head:'Playfair Display',Georgia,serif;--body:'Inter',system-ui,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}
.bg{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 90% at 80% 10%,rgba(34,211,238,.14),transparent 55%),radial-gradient(90% 80% at 10% 92%,rgba(232,200,122,.09),transparent 60%),linear-gradient(160deg,#050a18,#0a1224 55%,#050a18)}
.mesh{position:absolute;inset:-20%;background:conic-gradient(from 210deg at 70% 30%,rgba(34,211,238,.10),transparent 40%,rgba(232,200,122,.06),transparent 70%);filter:blur(40px);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(174,187,216,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,187,216,.08) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(75% 65% at 50% 45%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(75% 65% at 50% 45%,#000 30%,transparent 100%)}
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.07);z-index:20}
.progress span{display:block;height:100%;width:12.5%;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px rgba(34,211,238,.8)}
.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1.6rem clamp(1.2rem,4vw,3.4rem);z-index:15;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.brand{color:var(--ink2)}
.counter b{color:var(--cyan);font-weight:600}
#deck{position:relative;z-index:2;height:100vh}

.slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3.4rem,7vh,5.5rem) clamp(1.4rem,6vw,6rem);
  opacity:0;visibility:hidden;
  transform:translateY(26px) scale(.985);
  transition:opacity .65s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility .65s;
}
.slide.active{opacity:1;visibility:visible;transform:none}
.slide.leaving{opacity:0;transform:translateY(-26px) scale(.985)}
h1,h2{font-family:var(--head);font-weight:600;letter-spacing:-.01em;line-height:1.08}
h1{font-size:clamp(2.4rem,6vw,5.2rem)}
h1 em{font-style:italic;color:var(--gold)}
h2{font-size:clamp(1.6rem,3.4vw,2.9rem);max-width:22ch;margin-bottom:clamp(1.4rem,4vh,2.8rem)}
.eyebrow{font-size:.76rem;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.4rem}
.sub{margin-top:1.4rem;max-width:46ch;color:var(--ink2);font-weight:300;font-size:clamp(.95rem,1.35vw,1.12rem);line-height:1.65}
.hint{margin-top:2.4rem;font-size:.74rem;color:var(--muted);letter-spacing:.1em}
kbd{border:1px solid rgba(174,187,216,.3);border-radius:5px;padding:.1rem .4rem;font-family:var(--body);font-size:.7rem;color:var(--ink2)}
[data-layout="title"]{justify-content:center}
[data-layout="title"]::after{content:"";position:absolute;right:8%;top:24%;width:36vw;height:36vw;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.18),transparent 65%);filter:blur(30px);pointer-events:none}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2.4vw,1.6rem);max-width:1000px}
.stat{padding:clamp(1rem,2.4vw,1.9rem);border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(12px);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.stat:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.35);box-shadow:0 22px 50px -28px rgba(34,211,238,.8)}
.stat b{display:block;font-family:var(--head);font-size:clamp(1.9rem,4.2vw,3.4rem);color:var(--gold);line-height:1;margin-bottom:.6rem}
.stat span{font-size:clamp(.82rem,1.05vw,.95rem);color:var(--ink2);line-height:1.5}

.tl{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.6rem,1.6vw,1.2rem);position:relative;max-width:1180px}
.tl::before{content:"";position:absolute;left:0;right:0;top:1.45rem;height:1px;background:linear-gradient(90deg,rgba(34,211,238,.55),rgba(232,200,122,.45))}
.tl li{position:relative;padding-top:3.1rem;font-size:clamp(.78rem,.98vw,.9rem);color:var(--ink2);line-height:1.5}
.tl li::before{content:"";position:absolute;top:1.18rem;left:0;width:11px;height:11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(34,211,238,.14)}
.tl li b{display:block;font-family:var(--head);color:var(--gold);font-size:clamp(1.1rem,1.8vw,1.5rem);margin-bottom:.45rem}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2.2rem);max-width:1120px}
.col{padding:clamp(1.1rem,2.4vw,1.9rem);border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.col h3{font-family:var(--body);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:1.1rem}
.gain h3{color:var(--cyan)}.cost h3{color:var(--gold)}
.col ul{list-style:none;display:grid;gap:.85rem}
.col li{position:relative;padding-left:1.1rem;font-size:clamp(.82rem,1.05vw,.95rem);color:var(--ink2);line-height:1.5}
.col li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.gain li::before{background:var(--cyan)}.cost li::before{background:var(--gold)}
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.3rem);max-width:1000px}
.cell{padding:clamp(1.1rem,2.6vw,2rem);border-radius:20px;background:linear-gradient(150deg,rgba(34,211,238,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.09);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.cell:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.4);box-shadow:0 26px 54px -30px rgba(34,211,238,.85)}
.cell h3{font-family:var(--head);font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--ink);margin-bottom:.5rem}
.cell p{font-size:clamp(.8rem,1.02vw,.92rem);color:var(--ink2);line-height:1.55}

.rules{list-style:none;display:grid;gap:clamp(.8rem,2vh,1.2rem);max-width:1000px;counter-reset:r}
.rules li{counter-increment:r;position:relative;padding:clamp(.9rem,2vw,1.5rem) clamp(1rem,2.4vw,1.8rem) clamp(.9rem,2vw,1.5rem) clamp(3.2rem,5vw,4.4rem);border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:clamp(1rem,2vw,1.6rem);top:50%;transform:translateY(-50%);font-family:var(--head);font-size:clamp(1.1rem,1.9vw,1.6rem);color:rgba(34,211,238,.6)}
.rules b{display:block;font-family:var(--head);font-size:clamp(1rem,1.6vw,1.3rem);margin-bottom:.3rem}
.rules span{font-size:clamp(.82rem,1.03vw,.93rem);color:var(--ink2);line-height:1.5}
blockquote{font-family:var(--head);font-style:italic;font-size:clamp(1.5rem,3.6vw,3rem);line-height:1.35;max-width:24ch;position:relative}
blockquote::before{content:"“";position:absolute;left:-.62em;top:-.3em;font-size:2.4em;color:rgba(34,211,238,.28);font-style:normal}
cite{display:block;margin-top:2rem;font-style:normal;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
[data-layout="quote"]{align-items:flex-start}

.closing{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(1rem,3vw,3rem)}
.closing h2{margin-bottom:.4rem;font-size:clamp(1.9rem,4.6vw,3.8rem);max-width:18ch}
.closing h2 em{font-style:italic;color:var(--gold)}
.btn{font-family:var(--body);font-size:.82rem;font-weight:500;letter-spacing:.02em;border-radius:999px;padding:.8rem 1.5rem;cursor:pointer;border:1px solid transparent;background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#04121f;margin-top:1.8rem;box-shadow:0 14px 36px -14px rgba(34,211,238,.75);transition:transform .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(34,211,238,.9)}
.robot-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.robot{position:relative;width:clamp(170px,17vw,230px);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:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff5d8,var(--gold));box-shadow:0 0 14px rgba(232,200,122,.85);animation:beacon 2.4s ease-in-out infinite}
@keyframes beacon{0%,100%{box-shadow:0 0 10px rgba(232,200,122,.6),0 0 22px rgba(232,200,122,.25)}50%{box-shadow:0 0 20px rgba(232,200,122,.95),0 0 44px rgba(232,200,122,.5)}}
.head{position:relative;height:clamp(112px,11vw,140px);border-radius:42px;background:linear-gradient(165deg,#f6fbff,#dfeaf7 46%,#b9cde4);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;align-items:center;justify-content:center}
.visor{position:relative;width:74%;height:58%;border-radius:24px;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(10px,1.1vw,14px);height:clamp(10px,1.1vw,14px);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:5px;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:4px}50%{height:16px}}

.torso{position:relative;margin:6px auto 0;width:58%;height:clamp(104px,10.5vw,132px);border-radius:32px;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:9px}
.panel{font-size:clamp(.66rem,.85vw,.8rem);font-weight:600;letter-spacing:.16em;color:#08243d;background:linear-gradient(135deg,#8be9fd,#22d3ee);border-radius:11px;padding:.36rem .95rem;box-shadow:0 0 16px rgba(34,211,238,.5),inset 0 -2px 6px rgba(0,60,90,.25)}
.core{width:clamp(22px,2.3vw,30px);height:clamp(22px,2.3vw,30px);border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#22d3ee 45%,#0e7490);box-shadow:0 0 16px rgba(34,211,238,.8);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(11px,1.1vw,15px);border-radius:999px;background:linear-gradient(180deg,#e6f1fc,#b4c9e0);box-shadow:inset -2px 0 5px rgba(120,150,190,.45)}
.arm-l{left:-22px;top:16px;height:clamp(50px,5.6vw,68px);transform-origin:50% 0;transform:rotate(-9deg);animation:swing 4.6s ease-in-out infinite}
.arm-r{right:-24px;top:-4px;height:clamp(82px,8.4vw,104px);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:-14px;transform:translateX(-50%);width:clamp(20px,2vw,26px);height:clamp(20px,2vw,26px);border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff,#cfdff0)}
.shadow{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);width:72%;height:14px;border-radius:50%;background:radial-gradient(ellipse,rgba(34,211,238,.32),transparent 70%);filter:blur(6px);animation:hoverGlow 4.6s ease-in-out infinite}
@keyframes hoverGlow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.7}50%{transform:translateX(-50%) scaleX(.86);opacity:.45}}
.bubble{position:relative;max-width:min(300px,30vw);padding:.8rem 1.1rem;border-radius:16px;background:rgba(18,32,64,.72);border:1px solid rgba(34,211,238,.34);backdrop-filter:blur(14px);font-size:clamp(.78rem,1vw,.9rem);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:none}
.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:caret .9s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.dots{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%);display:flex;gap:.6rem;z-index:20}
.dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(174,187,216,.28);transition:background .3s ease,transform .3s ease,width .3s ease}
.dots button:hover{background:rgba(34,211,238,.6);transform:scale(1.25)}
.dots button.on{background:var(--cyan);width:22px;border-radius:999px;box-shadow:0 0 12px rgba(34,211,238,.8)}
@media (max-width:980px){
  .stats,.bento{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr;gap:1rem}
  .tl::before{display:none}
  .tl li{padding-top:0;padding-left:1.9rem}
  .tl li::before{top:.35rem}
  .closing{grid-template-columns:1fr;text-align:center;gap:2rem}
  .closing h2{max-width:100%}
  .robot-wrap{order:-1}
  .bubble{max-width:80vw}
  .slide{overflow-y:auto}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}