/* ===== BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#090E00;--surface:#1a1e14;--surface2:#242424;
  --text:#EEEEEE;--text-dim:#8a8a7a;--text-muted:#555548;
  --accent:#045C45;--accent2:#003B00;--green:#12A594;--red:#DC3E42;--yellow:#EF5F00;
  --radius:12px;--radius-sm:8px;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Geist',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh;width:100vw}

/* ===== AUDIO BAR ===== */
#audio-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:12px;
  padding:10px 24px;
  background:rgba(10,10,15,.92);backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.06);
}
#play-btn{
  width:40px;height:40px;border-radius:50%;border:none;
  background:var(--accent);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,background .2s;flex-shrink:0;
}
#play-btn:hover{transform:scale(1.08);background:var(--accent2)}
#progress-wrap{
  flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer;position:relative;
}
#progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;width:0;transition:width .1s linear}
#time-display{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:80px;text-align:center}
#slide-nav{display:flex;align-items:center;gap:8px}
#slide-nav button{
  width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.12);
  background:transparent;color:var(--text);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
#slide-nav button:hover{background:rgba(255,255,255,.08)}
#slide-counter{font-size:12px;color:var(--text-dim);min-width:40px;text-align:center}

/* ===== SLIDES ===== */
.slide{
  position:absolute;top:0;left:0;right:0;bottom:56px;
  opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.slide.active{opacity:1;transform:scale(1);pointer-events:auto}
.slide-bg-gradient{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(4,92,69,.12),transparent 70%);
}
.slide-bg-gradient.dark{background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(4,92,69,.08),transparent 70%)}
.slide-bg-gradient.accent{background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(0,59,0,.2),transparent 70%)}
.slide-content{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;padding:60px 80px 40px}
.center-content{align-items:center;justify-content:center;text-align:center}

/* ===== TYPOGRAPHY ===== */
.slide-heading{font-size:2.5rem;font-weight:700;margin-bottom:40px;letter-spacing:-.02em}
.hero-title{font-size:5rem;font-weight:900;letter-spacing:-.04em;background:linear-gradient(135deg,#fff,#DDFDC6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-top:20px}
.hero-sub{font-size:1.5rem;font-weight:300;color:var(--text-dim);margin-top:8px;letter-spacing:.05em;text-transform:uppercase}
.hero-tagline{font-size:1.1rem;color:var(--text-muted);margin-top:24px;font-weight:400}
.mega-text{font-size:5rem;font-weight:900;letter-spacing:-.04em}
.gradient-text{background:linear-gradient(135deg,var(--accent),var(--accent2),#F4FF7F);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.closing-title{font-size:4.5rem;font-weight:900;letter-spacing:-.03em}
.closing-sub{font-size:1.3rem;color:var(--text-dim);margin-top:24px;line-height:1.6}
.closing-cta{margin-top:48px}
.kylon-wordmark{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--accent);opacity:.5}
.kylon-logo{animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ===== ANIMATIONS ===== */
.fade-up{opacity:0;transform:translateY(20px);transition:opacity .6s .2s,transform .6s .2s}
.slide.active .fade-up{opacity:1;transform:translateY(0)}
.title-reveal > *{opacity:0;transform:translateY(30px)}
.slide.active .title-reveal > *{animation:revealUp .7s forwards}
.slide.active .title-reveal > *:nth-child(1){animation-delay:.1s}
.slide.active .title-reveal > *:nth-child(2){animation-delay:.3s}
.slide.active .title-reveal > *:nth-child(3){animation-delay:.5s}
.slide.active .title-reveal > *:nth-child(4){animation-delay:.7s}
@keyframes revealUp{to{opacity:1;transform:translateY(0)}}
.big-reveal h1{opacity:0;transform:scale(.8)}
.slide.active .big-reveal h1{animation:popIn .6s .2s forwards}
@keyframes popIn{to{opacity:1;transform:scale(1)}}
.closing-reveal > *{opacity:0;transform:translateY(30px)}
.slide.active .closing-reveal > *{animation:revealUp .7s forwards}
.slide.active .closing-reveal > *:nth-child(1){animation-delay:.1s}
.slide.active .closing-reveal > *:nth-child(2){animation-delay:.3s}
.slide.active .closing-reveal > *:nth-child(3){animation-delay:.5s}

/* ===== PARTICLES ===== */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particle{position:absolute;width:3px;height:3px;background:var(--accent);border-radius:50%;opacity:.3;animation:drift linear infinite}
@keyframes drift{0%{transform:translateY(0) translateX(0);opacity:.3}50%{opacity:.6}100%{transform:translateY(-100vh) translateX(50px);opacity:0}}

/* ===== SLIDE 2: SCENARIO ===== */
.scenario-flow{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:48px}
.scenario-step{text-align:center;opacity:0;transform:translateY(20px)}
.slide.active .scenario-step{animation:revealUp .5s forwards}
.slide.active .step-1{animation-delay:.3s}
.slide.active .step-2{animation-delay:.6s}
.slide.active .step-3{animation-delay:.9s}
.scenario-icon{
  width:80px;height:80px;border-radius:20px;
  background:var(--surface2);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
}
.ai-glow{box-shadow:0 0 30px rgba(0,59,0,.3);border-color:rgba(0,59,0,.3)}
.scenario-label{font-size:.9rem;color:var(--text-dim);font-weight:500}
.flow-arrow{font-size:2rem;color:var(--accent);opacity:0}
.slide.active .arrow-1{animation:revealUp .3s .5s forwards}
.slide.active .arrow-2{animation:revealUp .3s .8s forwards}

.route-channels{display:flex;justify-content:center;gap:24px;position:relative}
.channel-target{
  padding:16px 24px;border-radius:var(--radius);
  background:var(--surface);border:1px solid rgba(255,255,255,.06);
  text-align:left;min-width:180px;
  opacity:0;transform:translateY(20px);
}
.slide.active .ch-eng{animation:revealUp .4s 1.2s forwards}
.slide.active .ch-mkt{animation:revealUp .4s 1.4s forwards}
.slide.active .ch-sales{animation:revealUp .4s 1.6s forwards}
.ch-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
.ch-detail{display:block;font-size:.75rem;color:var(--text-muted);margin-top:4px;margin-left:16px}

/* ===== SLIDE 4: COMPARISON ===== */
.comparison{display:flex;align-items:stretch;gap:0;flex:1;min-height:0}
.compare-side{flex:1;padding:24px;display:flex;flex-direction:column;align-items:center}
.compare-label{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:16px}
.compare-divider{width:1px;background:rgba(255,255,255,.08);position:relative;display:flex;align-items:center;justify-content:center}
.vs-badge{
  position:absolute;width:36px;height:36px;border-radius:50%;
  background:var(--surface2);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:var(--text-dim);
}
.compare-verdict{margin-top:16px;font-size:.85rem;font-weight:600;padding:6px 16px;border-radius:20px}
.compare-verdict.bad{background:rgba(239,68,68,.12);color:#f87171}
.compare-verdict.good{background:rgba(16,185,129,.12);color:#34d399}

/* App Windows */
.app-windows{position:relative;width:100%;flex:1;min-height:200px}
.app-window{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:var(--surface);
  box-shadow:0 4px 24px rgba(0,0,0,.3);
}
.window-bar{
  display:flex;align-items:center;gap:6px;padding:8px 12px;
  background:var(--surface2);border-bottom:1px solid rgba(255,255,255,.06);
}
.dot{width:8px;height:8px;border-radius:50%}
.dot.red{background:#ff5f57}.dot.yellow{background:#febc2e}.dot.green{background:#28c840}
.window-title{font-size:.7rem;color:var(--text-muted);margin-left:8px;font-weight:500}
.window-body{padding:12px;font-size:.75rem}

.slack-mock{position:absolute;top:0;left:0;right:40px;z-index:1}
.slack-mock .window-body{display:flex;gap:8px;min-height:120px}
.sidebar-mini{width:80px;border-right:1px solid rgba(255,255,255,.06);padding-right:8px}
.ch-item{padding:3px 6px;font-size:.65rem;color:var(--text-dim);border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-item.active{background:rgba(4,92,69,.15);color:var(--accent)}
.ch-item.agent-item{color:var(--accent2)}
.sidebar-section{font-size:.55rem;color:var(--text-muted);text-transform:uppercase;margin:6px 0 3px;font-weight:600;letter-spacing:.05em}
.chat-area{flex:1;display:flex;flex-direction:column;gap:6px}
.msg-mini{display:flex;align-items:flex-start;gap:6px;font-size:.7rem;color:var(--text-dim);line-height:1.4}
.msg-mini.ai-msg{color:var(--accent)}
.msg-mini.bot{color:var(--text-muted);font-style:italic}
.avatar-mini{
  width:20px;height:20px;border-radius:5px;
  background:var(--surface2);display:flex;align-items:center;justify-content:center;
  font-size:.55rem;font-weight:700;flex-shrink:0;color:var(--text-muted);
}
.avatar-mini.human{background:rgba(16,185,129,.15);color:var(--green)}
.avatar-mini.ai{background:rgba(0,59,0,.2);color:var(--accent2)}

.chatgpt-mock{position:absolute;top:60px;right:0;left:60px;z-index:2;opacity:0}
.chatgpt-body{min-height:60px}
.notion-mock{position:absolute;top:120px;right:20px;left:40px;z-index:3;opacity:0}
.notion-body{min-height:50px}
.notion-line{font-size:.7rem;color:var(--text-dim);padding:2px 0}
.notion-line.dim{color:var(--text-muted);font-size:.65rem}

.slide.active .chatgpt-mock{animation:bounceIn .5s .6s forwards}
.slide.active .notion-mock{animation:bounceIn .5s 1s forwards}
@keyframes bounceIn{0%{opacity:0;transform:scale(.9) translateY(10px)}70%{transform:scale(1.02)}100%{opacity:1;transform:scale(1) translateY(0)}}

.jumping-arrows{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.jump-arrow{position:absolute;font-size:1.5rem;color:var(--red);opacity:0}
.slide.active .ja1{animation:jumpAnim .8s .8s forwards;top:30%;left:45%}
.slide.active .ja2{animation:jumpAnim .8s 1.2s forwards;top:50%;left:55%}
.slide.active .ja3{animation:jumpAnim .8s 1.6s forwards;top:40%;left:35%}
@keyframes jumpAnim{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(.5)}}

/* Kylon mock (comparison) */
.kylon-mock-wrap{flex:1;display:flex;align-items:stretch;width:100%}
.kylon-mock{width:100%}
.kylon-bar{background:rgba(4,92,69,.08)}
.kylon-body{display:flex;gap:0;min-height:200px}
.kylon-sidebar{border-right:1px solid rgba(255,255,255,.06)}
.kylon-chat{flex:1;padding:8px}

/* ===== SLIDE 5: FULL WORKSPACE DEMO ===== */
.workspace-demo{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.kylon-full{width:100%;max-width:900px;opacity:0;transform:translateY(20px)}
.slide.active .kylon-full{animation:revealUp .6s .3s forwards}
.full-demo{min-height:320px}
.sidebar-full{width:160px;padding:12px;border-right:1px solid rgba(255,255,255,.06)}
.ws-name{font-size:.75rem;font-weight:700;color:var(--text);margin-bottom:12px;padding:4px 6px}
.main-panel{flex:1;display:flex;flex-direction:column}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.panel-ch{font-weight:600;font-size:.85rem}
.panel-tabs{display:flex;gap:4px}
.ptab{font-size:.65rem;padding:4px 10px;border-radius:4px;color:var(--text-muted);cursor:pointer}
.ptab.active{background:rgba(4,92,69,.12);color:var(--accent)}
.chat-full{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.msg-full{display:flex;gap:10px;opacity:0;transform:translateX(-10px)}
.slide.active .msg-full{animation:msgSlide .4s forwards}
.slide.active .msg-full:nth-child(1){animation-delay:.5s}
.slide.active .msg-full:nth-child(2){animation-delay:.8s}
.slide.active .msg-full:nth-child(3){animation-delay:1.2s}
.slide.active .msg-full:nth-child(4){animation-delay:1.6s}
@keyframes msgSlide{to{opacity:1;transform:translateX(0)}}
.msg-avatar{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:700;flex-shrink:0;
}
.msg-avatar.human{background:rgba(16,185,129,.15);color:var(--green)}
.msg-avatar.ai-full{background:rgba(0,59,0,.2);color:var(--accent2)}
.msg-content{flex:1;min-width:0}
.msg-name{font-size:.7rem;font-weight:600;margin-bottom:3px}
.msg-name .msg-time{font-weight:400;color:var(--text-muted);margin-left:8px}
.ai-name{color:var(--accent2)}
.agent-badge{
  font-size:.5rem;padding:1px 6px;border-radius:3px;
  background:rgba(0,59,0,.15);color:var(--accent2);
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;
}
.msg-text{font-size:.75rem;color:var(--text-dim);line-height:1.5}
.msg-attachment{margin-top:8px}
.table-preview{
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);
  overflow:hidden;max-width:280px;
}
.tp-header{padding:8px 12px;background:var(--surface2);font-size:.65rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.06)}
.tp-row{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;font-size:.65rem;color:var(--text-dim);border-bottom:1px solid rgba(255,255,255,.04)}
.tp-tag{font-size:.55rem;padding:1px 8px;border-radius:3px;background:rgba(16,185,129,.12);color:var(--green);font-weight:600}
.tp-tag.med{background:rgba(245,158,11,.12);color:var(--yellow)}

/* ===== SLIDE 6: HUB ===== */
.hub-diagram{position:relative;width:600px;height:400px;margin:0 auto}
.hub-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.2rem;z-index:2;
}
.hub-pulse{
  position:absolute;inset:-10px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.8);opacity:0}}
.hub-node{
  position:absolute;text-align:center;
  opacity:0;transform:scale(.8);
}
.slide.active .hub-node{animation:nodeIn .4s forwards}
.slide.active .node-1{animation-delay:.3s;top:5%;left:10%}
.slide.active .node-2{animation-delay:.4s;top:5%;right:10%;left:auto}
.slide.active .node-3{animation-delay:.5s;top:60%;left:5%}
.slide.active .node-4{animation-delay:.6s;top:60%;right:5%;left:auto}
.slide.active .node-5{animation-delay:.7s;bottom:0;left:20%;top:auto}
.slide.active .node-6{animation-delay:.8s;bottom:0;right:20%;top:auto;left:auto}
.node-1{top:5%;left:10%}.node-2{top:5%;right:10%}
.node-3{top:60%;left:5%}.node-4{top:60%;right:5%}
.node-5{bottom:0;left:20%}.node-6{bottom:0;right:20%}
@keyframes nodeIn{to{opacity:1;transform:scale(1)}}
.node-icon{font-size:2rem;margin-bottom:4px}
.node-label{font-size:.75rem;color:var(--text-dim);font-weight:500}
.hub-lines{position:absolute;inset:0;z-index:0}
.hub-line{stroke:var(--accent);stroke-width:1;stroke-dasharray:4 4;opacity:0}
.slide.active .hub-line{animation:lineIn .5s forwards}
.slide.active .hl-1{animation-delay:.4s}.slide.active .hl-2{animation-delay:.5s}
.slide.active .hl-3{animation-delay:.6s}.slide.active .hl-4{animation-delay:.7s}
.slide.active .hl-5{animation-delay:.8s}.slide.active .hl-6{animation-delay:.9s}
@keyframes lineIn{to{opacity:.3}}
.connected-sub{font-size:1.1rem;color:var(--text-dim);line-height:1.6;margin-top:24px}

/* ===== SLIDE 7: TRUST ===== */
.trust-badges{display:flex;gap:24px;margin-bottom:32px}
.badge-card{
  padding:24px 32px;border-radius:var(--radius);
  background:var(--surface);border:1px solid rgba(255,255,255,.06);
  text-align:center;min-width:140px;
  opacity:0;transform:translateY(20px);
}
.slide.active .badge-card{animation:revealUp .5s forwards}
.slide.active .badge-card:nth-child(1){animation-delay:.2s}
.slide.active .badge-card:nth-child(2){animation-delay:.4s}
.slide.active .badge-card:nth-child(3){animation-delay:.6s}
.badge-icon{font-size:2rem;margin-bottom:8px}
.badge-name{font-weight:700;font-size:1rem;margin-bottom:4px}
.badge-detail{font-size:.75rem;color:var(--text-muted)}
.no-training{font-size:.9rem;color:var(--text-dim);margin-bottom:40px;font-style:italic}
.platforms-title{font-size:1rem;font-weight:600;color:var(--text-dim);margin-bottom:20px}
.platform-icons{display:flex;gap:32px;justify-content:center}
.platform-item{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);opacity:0;transform:translateY(10px)}
.platform-item span{font-size:.75rem;font-weight:500}
.slide.active .platform-item{animation:revealUp .4s forwards}
.slide.active .platform-item:nth-child(1){animation-delay:.8s}
.slide.active .platform-item:nth-child(2){animation-delay:.9s}
.slide.active .platform-item:nth-child(3){animation-delay:1s}
.slide.active .platform-item:nth-child(4){animation-delay:1.1s}
.coming-soon{position:relative}
.soon-tag{font-size:.5rem!important;padding:2px 6px;border-radius:3px;background:rgba(245,158,11,.12);color:var(--yellow);font-weight:600;text-transform:uppercase}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .slide-content{padding:40px 32px 24px}
  .hero-title{font-size:3rem}
  .mega-text,.closing-title{font-size:3rem}
  .comparison{flex-direction:column;gap:24px}
  .compare-divider{width:100%;height:1px;flex-direction:row}
  .hub-diagram{width:100%;max-width:400px;height:300px}
  .sidebar-full{width:120px}
}