*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#000000;--red:#e04a5a;--redDim:rgba(224,74,90,.15);--redGlow:rgba(224,74,90,.3);--white:#F7F7F7;--green:#45FF00;--greenDim:rgba(69,255,0,.1);--text:#F7F7F7;--muted:#1a1a1a;--mutedText:#6b7a90;--serif:'Space Grotesk',sans-serif;--sans:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',monospace}
body{background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden;height:100vh;cursor:none;user-select:none}
/* Custom cursor */
#cursor{position:fixed;top:0;left:0;width:18px;height:18px;border:1.5px solid rgba(247,247,247,.6);background:transparent;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease,opacity .25s ease,border-color .2s ease;opacity:0}
#cursor.active{width:11px;height:11px;border-color:rgba(69,255,0,.5)}
/* Watermark */
#watermark{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;user-select:none;overflow:hidden}
#watermark img{width:70%;height:auto;max-height:70vh;object-fit:contain;opacity:0.045}
/* Grain overlay */
#grain{position:fixed;inset:0;pointer-events:none;z-index:997;opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");background-repeat:repeat;background-size:180px 180px}
/* Vignette */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.6) 100%)}
/* Ambient particles */
#particles{position:fixed;inset:0;pointer-events:none;z-index:0}
.particle{position:absolute;border-radius:50%;opacity:0;animation:particleFade 6s ease-in-out infinite}
@keyframes particleFade{0%,100%{opacity:0;transform:translateY(0) scale(0.5)}50%{opacity:1;transform:translateY(-30px) scale(1)}}
/* Radial ambient glow */
#ambient-glow{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.5s ease}
#ambient-glow.red{opacity:1;background:radial-gradient(ellipse at 50% 60%,rgba(255,51,68,.06) 0%,transparent 70%)}
#ambient-glow.white{opacity:1;background:radial-gradient(ellipse at 50% 60%,rgba(69,255,0,.03) 0%,transparent 70%)}
#ambient-glow.green{opacity:1;background:radial-gradient(ellipse at 50% 60%,rgba(69,255,0,.04) 0%,transparent 70%)}
#ambient-glow.split{opacity:1;background:radial-gradient(ellipse 55% 60% at 25% 50%,rgba(224,74,90,.16) 0%,transparent 75%),radial-gradient(ellipse 55% 60% at 75% 50%,rgba(69,255,0,.12) 0%,transparent 75%)}
#stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;z-index:1}
.stage-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;max-width:90%;transition:transform .6s ease,opacity .5s ease}
#stage.split-mode .stage-content{max-width:80%;flex-grow:0}
.stage-split{display:none;position:absolute;inset:0;flex-direction:row;align-items:center;justify-content:center;gap:0;padding:32px 24px;z-index:1}
#stage.split-mode .stage-split{display:flex}

.split-vs{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 16px;font-family:var(--serif);font-size:clamp(28px,4vw,48px);font-weight:300;color:var(--mutedText);letter-spacing:0.05em}
.stage-panel-left{flex:1;display:flex;justify-content:center;align-items:center;padding:0 8px;min-width:0}
.stage-panel-left .panel-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;max-width:100%;width:100%;padding:0 8px}
#stage.split-mode .stage-panel-left .panel-content{justify-content:space-between}
.stage-panel-right{flex:1;display:flex;justify-content:center;align-items:center;padding:0 8px;min-width:0;opacity:0}
#stage.split-mode .stage-panel-right{opacity:1}
.stage-panel-right .stage-content{max-width:100%;width:100%;align-self:center;padding:0 8px}
#stage.split-mode .stage-panel-right .stage-content{justify-content:flex-start}
.stage-panel-right{flex-direction:column;align-items:stretch}
.panel-right-top{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:0 8px}
.panel-right-top .stage-content{max-width:100%;width:100%}
#stage.split-mode.split-last-slide .stage-panel-right{justify-content:center;align-items:center}
#stage.split-mode.split-last-slide .panel-right-top{justify-content:center;flex:0 0 auto}
#stage.split-mode.split-last-slide .panel-right-top .stage-content{justify-content:center}
#stage.split-mode.split-last-slide .panel-right-top #narration{justify-content:center;max-width:none}
#stage.split-mode.split-last-slide .panel-right-top .stage-content{max-width:none}
.panel-narration{text-align:center;width:100%;max-width:100%;min-height:80px}
.panel-narration .narration-text{font-family:var(--sans);font-size:clamp(18px,2.5vw,24px);line-height:1.8;color:var(--white);font-weight:200;letter-spacing:0.02em;opacity:1;filter:none}
.panel-narration .highlight-red{color:var(--red);font-weight:500}

@media (max-width: 768px){
  #stage{padding:20px 10px}
  .stage-split{flex-direction:column;align-items:stretch;justify-content:space-between;gap:8px;padding:12px 8px}
  .stage-panel-left,.stage-panel-right{padding:0 2px}
  .stage-panel-left{justify-content:center;align-items:flex-start}
  .stage-panel-left .panel-content{gap:12px}
  .panel-right-top{padding:0 2px;justify-content:flex-end}
  .panel-right-top .stage-content{gap:12px}
  .stage-content>#narration{order:1}
  .stage-content>#cost-display{order:2}
  .split-vs{padding:2px 0;font-size:clamp(22px,7vw,32px)}
  .panel-narration{min-height:48px}
  #narration{min-height:48px}
  .panel-narration .narration-text,
  .panel-right-top .narration-text{font-size:16px;line-height:1.55}
  .narration-text{line-height:1.6}
  .narration-text.big{line-height:1.18}
  .panel-cost .cost-amount{font-size:clamp(34px,7vw,48px)}
  .panel-cost .cost-sub{margin-top:6px}
  .panel-cost .cost-annual{margin-top:4px}
  #phase-label{display:none}
  .stage-panel-left .panel-content>.panel-narration{order:1}
  .stage-panel-left .panel-content>.panel-cost{order:2}
  #stage.stage-last-slide{justify-content:center;align-items:center;padding-top:0;padding-bottom:20px}
  #stage.stage-last-slide .stage-content{justify-content:center}
  #stage.stage-last-slide #narration{justify-content:center}
  #stage.stage-last-slide .narration-text.big{font-size:32px;margin-bottom:40px}
}
.panel-cost{text-align:center;width:100%}
.panel-cost .cost-amount-row{display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap}
.panel-cost .cost-amount{font-family:var(--serif);font-size:clamp(40px,6vw,64px);font-weight:600;line-height:1.1}
.panel-cost .cost-label{font-family:var(--sans);font-size:12px;letter-spacing:2px;color:var(--mutedText);margin-top:0;opacity:.8}
.panel-cost .cost-sub{font-family:var(--sans);font-size:14px;font-weight:300;margin-top:10px}
.panel-cost .cost-annual{font-family:var(--mono);font-size:12px;letter-spacing:1px;margin-top:8px;opacity:.6}
#phase-label{position:absolute;top:6vh;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--mutedText);opacity:0;transition:opacity .5s ease;z-index:2}
#phase-label.visible{opacity:.9}
#phase-label.trad{color:rgba(224,74,90,.8)}
#phase-label.amazing{color:var(--green)}
#narration{text-align:center;width:100%;max-width:750px;min-height:80px}
.narration-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;flex-wrap:wrap}
.narration-line{display:none;height:2px;width:50%;max-width:280px;background:linear-gradient(to right,#45FF00,rgba(69,255,0,0));margin-top:10px;flex-shrink:0}
#narration.intro-step .narration-line{display:block}
#plans-line{margin-top:4px;font-family:var(--sans);font-size:12px;letter-spacing:1.5px;color:var(--green);text-transform:uppercase;display:none;}
#plans-line .plan-sep{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--green);margin:0 8px;vertical-align:middle}
.narration-text{font-family:var(--sans);font-size:clamp(18px,2.5vw,24px);line-height:1.8;color:var(--white);font-weight:200;letter-spacing:0.02em;opacity:0;filter:blur(5px)}
.narration-text.visible{opacity:1;filter:blur(0);transition:opacity .5s ease,filter .45s ease}
.narration-text.big{font-family:var(--serif);font-size:clamp(34px,5.5vw,64px);font-weight:300;line-height:1.15;letter-spacing:-0.025em;color:var(--white)}
.narration-text .highlight-red{color:var(--red);font-weight:500}
.narration-text .highlight-white{color:var(--green);font-weight:500}
.narration-text .highlight-green{color:var(--green);font-weight:500}
.typing-cursor{display:inline-block;width:1.5px;height:1.1em;background:var(--white);margin-left:3px;animation:blink .8s step-end infinite;vertical-align:text-bottom;opacity:.6}
@keyframes blink{50%{opacity:0}}
#cost-display{text-align:center;opacity:0;transform:translateY(10px);filter:blur(4px);height:0;overflow:hidden;min-height:0;transition:opacity .6s ease,filter .5s ease}
#cost-display.visible{opacity:1;transform:translateY(0);filter:blur(0);height:auto;transition:all .6s ease,filter .5s ease}
.cost-amount{font-family:var(--serif);font-size:clamp(40px,6vw,64px);font-weight:600;line-height:1.1;transition:color .4s ease}
.cost-amount.red{color:var(--red)}.cost-amount.white{color:var(--green)}.cost-amount.green{color:var(--green)}
.cost-amount-row{display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap}
.cost-label{font-family:var(--sans);font-size:12px;letter-spacing:2px;color:var(--mutedText);margin-top:0;opacity:.8}
.cost-sub{font-family:var(--sans);font-size:14px;font-weight:300;margin-top:10px;transition:color .4s ease}
.cost-sub.red{color:rgba(255,51,68,.7)}.cost-sub.green{color:var(--green)}.cost-sub.muted{color:var(--mutedText)}
.cost-annual{font-family:var(--mono);font-size:12px;letter-spacing:1px;margin-top:8px;opacity:.6;transition:color .4s ease}
.cost-annual.red{color:var(--red)}.cost-annual.white{color:var(--green)}
.cost-compare{font-family:var(--sans);font-size:13px;font-weight:300;margin-top:6px;color:var(--mutedText)}
.cost-compare .strikethrough{text-decoration:line-through;color:rgba(255,51,68,.5)}
#prompt{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:11px;letter-spacing:3px;color:var(--muted);opacity:0;transition:opacity .6s ease;text-transform:uppercase;white-space:nowrap}
#prompt.visible{opacity:.35}
#skip-btn{position:fixed;top:26px;right:28px;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:3px;color:rgba(247,247,247,.7);text-transform:uppercase;z-index:20;transition:color .3s ease,opacity .4s ease;background:none;border:none;padding:4px;opacity:0;pointer-events:none;touch-action:manipulation}
#skip-btn.visible{opacity:1;pointer-events:auto}
#skip-btn:hover{color:var(--white)}
@media (max-width: 768px){
  #skip-btn{top:auto;bottom:16px;right:16px;left:auto;transform:none;padding:12px 16px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;z-index:100}
}
@keyframes nudgeRight{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes nudgeLeft{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
@keyframes greenPulse{0%,100%{opacity:.45}50%{opacity:1}}
.nav-arrow{position:fixed;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;padding:28px 18px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.nav-arrow.visible{opacity:1;pointer-events:auto}
.nav-arrow svg{width:20px;height:40px;stroke:#45FF00;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-arrow.visible svg{animation:greenPulse 1.5s ease-in-out infinite}
.nav-arrow:hover svg{opacity:1;animation:none}
#nav-arrow-left{left:10px}
#nav-arrow-left.visible svg{animation:greenPulse 1.5s ease-in-out infinite,nudgeLeft 2s ease-in-out infinite}
#nav-arrow-right{right:10px}
#nav-arrow-right.visible svg{animation:greenPulse 1.5s ease-in-out infinite,nudgeRight 2s ease-in-out infinite}
/* Intro screen */
#intro-screen{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:1;transition:opacity 1s ease;pointer-events:auto}
#intro-screen.fade-out{opacity:0;pointer-events:none}
.intro-logo{display:flex;justify-content:center;align-items:center;opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease;height:clamp(100px,22vw,200px);width:78%;max-width:420px;overflow:hidden;line-height:0}
.intro-logo.show{opacity:1;transform:translateY(0)}
.intro-logo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.intro-sub{font-family:var(--sans);font-size:10px;letter-spacing:5px;color:var(--white);margin-top:-25px;text-transform:uppercase;font-weight:300;opacity:0;transition:opacity .8s ease .25s}
.intro-sub.show{opacity:.55}
#progress{position:fixed;bottom:0;left:0;height:2px;background:var(--red);transition:width .6s ease,background .6s ease;width:0%}
@media(max-width:640px){.narration-text{font-size:clamp(16px,4.5vw,20px)}}