/* ===================================================================
   DzentAI — Product Tour player (cinematic auto-playing web "videos")
   Self-contained; links styles.css only for the Inter/Sora fonts.
   =================================================================== */
:root{
  --t-bg:#070b14; --t-bg2:#0c1526; --t-ink:#eaf1fb; --t-mut:#9fb0d0;
  --t-line:rgba(255,255,255,.10); --t-card:#101a2e;
  --sky:#38bdf8; --teal:#14b8a6; --mint:#2dd4bf; --gold:#febc2e;
  --grad:linear-gradient(100deg,#38bdf8,#14b8a6);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 700px at 70% -10%,#12213c 0,var(--t-bg) 60%);
  color:var(--t-ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
a{color:inherit}

/* ---- top chrome ---- */
.tour-top{
  position:fixed; inset:0 0 auto 0; height:60px; z-index:20;
  display:flex; align-items:center; gap:16px; padding:0 20px;
  background:linear-gradient(#070b14e6,#070b1400); backdrop-filter:blur(6px);
}
.tour-brand{display:flex; align-items:center; gap:9px; font-family:Sora,Inter,sans-serif; font-weight:800; letter-spacing:-.01em}
.tour-brand img{height:26px;width:auto}
.tour-top .spacer{flex:1}
.tour-lens{display:flex; gap:6px; background:#0d1626; border:1px solid var(--t-line); border-radius:999px; padding:4px}
.tour-lens button{
  border:0; background:transparent; color:var(--t-mut); font:inherit; font-size:12.5px; font-weight:700;
  padding:6px 12px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:.2s;
}
.tour-lens button:hover{color:var(--t-ink)}
.tour-lens button.on{background:var(--grad); color:#04121f}
.tour-exit{color:var(--t-mut); text-decoration:none; font-size:13px; font-weight:600; border:1px solid var(--t-line); padding:7px 13px; border-radius:9px}
.tour-exit:hover{color:var(--t-ink); background:#ffffff10}

/* ---- stage ---- */
.tour-stage{
  position:absolute; inset:60px 0 132px 0; display:flex; align-items:center; justify-content:center; padding:20px;
}
.scene{width:min(980px,94vw); animation:sfade .6s ease both}
@keyframes sfade{from{opacity:0; transform:translateY(14px) scale(.99)} to{opacity:1; transform:none}}

.scene__kicker{font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px}
.scene__title{font-family:Sora,Inter,sans-serif; font-weight:800; font-size:clamp(24px,4.4vw,44px); line-height:1.08; letter-spacing:-.02em; margin:0 0 8px}
.scene__title .hl{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* generic visual frame */
.viz{margin-top:22px; border:1px solid var(--t-line); border-radius:16px; background:linear-gradient(180deg,#0e1830,#0a1120);
  box-shadow:0 30px 80px -30px #000; overflow:hidden}
.viz__bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--t-line); background:#0b1322}
.viz__bar i{width:10px;height:10px;border-radius:50%;background:#33405a}
.viz__bar i:nth-child(1){background:#ff5f57}.viz__bar i:nth-child(2){background:#febc2e}.viz__bar i:nth-child(3){background:#28c840}
.viz__url{margin-left:8px; font:12px ui-monospace,Menlo,Consolas,monospace; color:#7f8db0}
.viz__body{padding:20px}

/* cards / rows */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.card{background:var(--t-card); border:1px solid var(--t-line); border-radius:12px; padding:14px 15px; animation:pop .5s both}
.card b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--t-mut); margin-bottom:5px}
.card span{font-size:15px; font-weight:600}
.card.hero-num span{font-family:Sora; font-size:30px; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.card.mint{background:rgba(20,184,166,.12); border-color:rgba(20,184,166,.34)} .card.mint b{color:var(--mint)}
.card.gold{background:rgba(254,188,46,.12); border-color:rgba(254,188,46,.36)} .card.gold b{color:var(--gold)}
.card.amber{background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.4)} .card.amber b{color:#fca5a5}
@keyframes pop{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.card:nth-child(2){animation-delay:.09s}.card:nth-child(3){animation-delay:.18s}.card:nth-child(4){animation-delay:.27s}.card:nth-child(5){animation-delay:.36s}

/* voice line */
.voice{display:flex; align-items:center; gap:11px; background:#0b1322; border:1px solid var(--t-line); border-radius:12px; padding:13px 16px; margin-bottom:14px}
.voice .mic{width:30px;height:30px;border-radius:50%; display:grid;place-items:center; background:rgba(56,189,248,.16); box-shadow:0 0 0 0 rgba(56,189,248,.5); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(56,189,248,.45)}100%{box-shadow:0 0 0 16px rgba(56,189,248,0)}}
.voice .txt{font-size:15px; color:#dbe6f7}

/* teeth strip */
.teeth{display:grid; grid-template-columns:repeat(16,1fr); gap:5px; margin-bottom:14px}
.teeth i{height:30px;border-radius:6px 6px 8px 8px; background:#0e1a30; border:1px solid var(--t-line)}
.teeth i.hit{background:var(--grad); border-color:transparent}

/* xray */
.xray{position:relative; height:150px; border-radius:12px; background:#080d16; border:1px solid var(--t-line); overflow:hidden; display:flex; align-items:center; gap:8px; padding:0 16px}
.xray .tooth{width:22px;height:96px;border-radius:6px;background:#cfd8e6;opacity:.85}
.bbox{position:absolute; border:2px solid var(--sky); border-radius:6px; box-shadow:0 0 0 2px rgba(56,189,248,.25); animation:pop .6s both}
.bbox span{position:absolute; top:-20px; left:-2px; font-size:10px; font-weight:800; color:#04121f; background:var(--sky); padding:1px 7px; border-radius:5px; white-space:nowrap}
.bbox.amber{border-color:var(--gold); box-shadow:0 0 0 2px rgba(254,188,46,.25)} .bbox.amber span{background:var(--gold)}

/* pipeline / arrow */
.pipe{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center}
.pipe .step{background:var(--t-card); border:1px solid var(--t-line); border-radius:12px; padding:12px 16px; font-weight:600; font-size:14px}
.pipe .arw{color:var(--mint); font-size:22px; font-weight:800}

/* network moat */
.net{display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap}
.net .hub{width:120px;height:120px;border-radius:50%; display:grid;place-items:center; text-align:center; font-weight:800; font-size:13px; background:radial-gradient(circle,#123 0,#0a1120 70%); border:2px solid var(--mint); box-shadow:0 0 40px -8px var(--teal)}
.net .node{background:var(--t-card); border:1px solid var(--t-line); border-radius:10px; padding:9px 13px; font-size:13px; color:var(--t-mut)}

/* roadmap timeline */
.road{display:grid; gap:12px}
.road .r{display:flex; gap:12px; align-items:flex-start; background:var(--t-card); border:1px solid var(--t-line); border-radius:12px; padding:12px 15px; animation:pop .5s both}
.road .r .when{font-family:Sora; font-weight:800; font-size:13px; color:var(--gold); min-width:88px}
.road .r .what{font-size:14px}
.road .r:nth-child(2){animation-delay:.1s}.road .r:nth-child(3){animation-delay:.2s}.road .r:nth-child(4){animation-delay:.3s}

/* stat band */
.band{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; text-align:center}
.band .s{background:var(--t-card); border:1px solid var(--t-line); border-radius:12px; padding:16px}
.band .s b{display:block; font-family:Sora; font-size:30px; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.band .s span{font-size:12.5px; color:var(--t-mut)}

/* cover / close scenes */
.cover{text-align:center}
.cover .logo{height:56px; margin-bottom:18px}
.cover .lede{font-size:clamp(15px,2.3vw,20px); color:var(--t-mut); max-width:760px; margin:12px auto 0; line-height:1.5}
.cover .cta{display:inline-flex; gap:10px; margin-top:26px; align-items:center}
.cover .cta a{background:var(--grad); color:#04121f; font-weight:800; text-decoration:none; padding:13px 22px; border-radius:11px; font-size:15px}
.cover .cta a.ghost{background:transparent; color:var(--t-ink); border:1px solid var(--t-line)}

/* ---- caption + controls ---- */
.tour-cap{
  position:fixed; left:0; right:0; bottom:72px; z-index:15; text-align:center; padding:0 24px; pointer-events:none;
}
.tour-cap .say{display:inline-block; max-width:900px; font-size:clamp(14px,2.1vw,18px); line-height:1.5; color:#eaf1fb;
  background:#0a1120cc; border:1px solid var(--t-line); border-radius:12px; padding:11px 18px; backdrop-filter:blur(4px)}

.tour-ctrl{position:fixed; left:0; right:0; bottom:0; z-index:20; height:64px; display:flex; align-items:center; gap:14px; padding:0 20px;
  background:linear-gradient(#070b1400,#070b14e6)}
.tour-ctrl button{border:1px solid var(--t-line); background:#0d1626; color:var(--t-ink); border-radius:9px; cursor:pointer; font:inherit;
  width:38px; height:38px; display:grid; place-items:center; font-size:15px}
.tour-ctrl button:hover{background:#ffffff12}
.tour-ctrl .play{width:44px;height:44px; background:var(--grad); color:#04121f; border:0; font-size:17px}
.tour-time{font:12.5px ui-monospace,Consolas,monospace; color:var(--t-mut); min-width:96px}
.tour-title{font-weight:700; font-size:13px; color:var(--t-mut); margin-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tour-progress{flex:1; height:6px; background:#16233c; border-radius:999px; overflow:hidden; position:relative}
.tour-progress .fill{position:absolute; inset:0 auto 0 0; width:0; background:var(--grad); border-radius:999px; transition:width .25s linear}
.tour-dots{display:flex; gap:5px}
.tour-dots i{width:8px;height:8px;border-radius:50%; background:#26344f; cursor:pointer}
.tour-dots i.on{background:var(--mint)}
.tour-dots i.done{background:#3a4d6e}

@media (max-width:640px){
  .tour-title,.tour-dots{display:none}
  .tour-cap{bottom:70px}
}
@media (prefers-reduced-motion:reduce){ .scene,.card,.road .r,.bbox{animation:none!important} }