:root { --bg:#0a0a0f; --surface:#12121a; --border:#2a2a45; --green:#00ff41; --blue:#00aaff; --amber:#ffb000; --red:#ff3355; --text:#e8e8f0; --text-dim:#8888a0; --text-muted:#555570; --radius:12px; --font-sans:system-ui,-apple-system,sans-serif; --font-mono:"SF Mono","Fira Code",Consolas,monospace; }
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; background:var(--bg); color:var(--text); font-family:var(--font-sans); overflow:hidden; user-select:none; }
  .slide { position:fixed; inset:0; display:none; flex-direction:column; justify-content:center; align-items:center; padding:5vh 6vw; }
  .slide.active { display:flex; }
  .slide-bg { position:absolute; inset:0; overflow:hidden; z-index:-1; }
  .slide-bg .grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,170,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,170,255,0.04) 1px, transparent 1px); background-size:4vh 4vh; }
  .content { position:relative; z-index:1; width:100%; max-width:90vw; }
  h1 { font-size:clamp(32px,5vw,80px); font-weight:900; line-height:1.1; letter-spacing:-0.05em; margin-bottom:1.2vh; }
  h1 .accent { color:var(--green); } h1 .red { color:var(--red); } h1 .amber { color:var(--amber); } h1 .blue { color:var(--blue); }
  h2 { font-size:clamp(24px,3.2vw,52px); font-weight:700; margin-bottom:1.5vh; letter-spacing:-0.03em; }
  h2 .accent { color:var(--green); } h2 .red { color:var(--red); } h2 .amber { color:var(--amber); } h2 .blue { color:var(--blue); }
  p.subtitle { font-size:clamp(14px,1.6vw,26px); color:var(--text-dim); line-height:1.6; max-width:80%; font-weight:300; }
  p.body { font-size:clamp(13px,1.4vw,22px); color:var(--text); line-height:1.6; max-width:85%; }
  .meta { font-family:var(--font-mono); font-size:clamp(10px,0.9vw,14px); color:var(--text-muted); margin-top:2vh; }
  .tag { display:inline-block; padding:0.4em 1.2em; border-radius:20px; font-family:var(--font-mono); font-size:clamp(10px,0.85vw,13px); font-weight:500; letter-spacing:0.03em; margin-bottom:1.2vh; }
  .tag-green { background:rgba(0,255,65,0.1); color:var(--green); border:1px solid rgba(0,255,65,0.2); }
  .tag-red { background:rgba(255,51,85,0.1); color:var(--red); border:1px solid rgba(255,51,85,0.2); }
  .tag-amber { background:rgba(255,176,0,0.1); color:var(--amber); border:1px solid rgba(255,176,0,0.2); }
  .tag-blue { background:rgba(0,170,255,0.1); color:var(--blue); border:1px solid rgba(0,170,255,0.2); }
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:2vh; width:100%; }
  .grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.8vh; width:100%; }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2vh 2vw; transition:all 0.3s; }
  .card h3 { font-size:clamp(13px,1.3vw,22px); font-weight:600; margin-bottom:0.6vh; }
  .card p { font-size:clamp(11px,1vw,16px); color:var(--text-dim); line-height:1.5; }
  .card .icon { font-size:clamp(24px,2.4vw,40px); margin-bottom:1vh; display:block; }
  .card .source { font-size:clamp(9px,0.7vw,12px); font-family:var(--font-mono); color:var(--text-muted); margin-top:1vh; display:block; }
  .stat-row { display:flex; gap:3vw; align-items:center; width:100%; justify-content:center; }
  .stat-big { text-align:center; flex:1; max-width:28%; }
  .stat-big .num { font-family:var(--font-mono); font-size:clamp(36px,5vw,80px); font-weight:700; line-height:1; margin-bottom:0.6vh; }
  .stat-big .num.red { color:var(--red); } .stat-big .num.green { color:var(--green); } .stat-big .num.amber { color:var(--amber); }
  .stat-big .label { font-size:clamp(11px,1.1vw,18px); color:var(--text-dim); line-height:1.4; }
  .shield-wrap { position:relative; width:16vh; height:16vh; margin-bottom:1.5vh; }
  .shield { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(40px,6vh,100px); }
  .shield.pulse { animation:pulse 2s ease-in-out infinite; }
  .shield.glow-green { box-shadow:0 0 6vh rgba(0,255,65,0.3); }
  @keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
  .final-cta { display:flex; gap:1.5vw; margin-top:2.5vh; justify-content:center; }
  .btn { display:inline-flex; align-items:center; gap:0.6vw; padding:1.2vh 2.4vw; border-radius:40px; font-family:var(--font-mono); font-size:clamp(11px,1vw,16px); font-weight:600; text-decoration:none; cursor:default; }
  .btn-green { background:var(--green); color:var(--bg); }
  .btn-outline { border:1px solid var(--border); color:var(--text); }
  .timeline { display:flex; flex-direction:column; gap:1.2vh; width:100%; max-width:80%; }
  .timeline-item { display:flex; gap:1.2vw; align-items:flex-start; }
  .timeline-dot { width:1.2vh; height:1.2vh; border-radius:50%; margin-top:0.6vh; flex-shrink:0; }
  .timeline-line { width:2px; flex:1; margin-left:0.5vh; min-height:1.5vh; }
  .timeline-content h4 { font-size:clamp(12px,1.3vw,22px); font-weight:600; margin-bottom:0.3vh; }
  .timeline-content p { font-size:clamp(11px,1vw,16px); color:var(--text-dim); line-height:1.5; }
  .nav { position:fixed; bottom:2.5vh; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:1.2vw; z-index:50; font-family:var(--font-mono); background:rgba(10,10,15,0.8); backdrop-filter:blur(12px); padding:1vh 1.8vw; border-radius:40px; border:1px solid var(--border); }
  .nav button { background:none; border:none; color:var(--text-dim); font-size:clamp(14px,1.2vw,20px); cursor:pointer; padding:0.4vh 0.8vw; border-radius:8px; transition:all 0.2s; font-family:var(--font-mono); }
  .nav button:hover { color:var(--green); background:var(--surface); }
  .nav .counter { color:var(--text-muted); font-size:clamp(10px,0.85vw,14px); min-width:4vw; text-align:center; }
  .nav .dot { width:0.7vh; height:0.7vh; border-radius:50%; background:var(--surface); transition:0.3s; }
  .nav .dot.active { background:var(--red); box-shadow:0 0 1vh var(--red); }
  .nav .dots { display:flex; gap:0.4vw; align-items:center; }
  .progress { position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg, var(--red), var(--blue)); z-index:60; transition:width 0.4s ease; }
  .msg-box { background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); padding:1.5vh 1.5vw; font-family:var(--font-mono); font-size:clamp(10px,0.8vw,13px); color:var(--text-dim); }
  .warn { background:rgba(255,51,85,0.08); border:1px solid rgba(255,51,85,0.2); border-radius:var(--radius); padding:1vh 1.5vw; }