:root{
  --ink:#0B2545;
  --ink-soft:#13355E;
  --paper:#F3F7F9;
  --paper-panel:#FFFFFF;
  --teal:#00A896;
  --teal-deep:#028090;
  --signal:#FF6A3D;
  --danger:#E14B4B;
  --text-muted:#5A6B7A;
  --line:#DCE6EA;
  --radius:14px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  overflow:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}

.app{
  position:relative;
  width:100vw;height:100vh;
  display:flex;
}

/* ================= SIDEBAR ================= */
.sidebar{
  flex:0 0 280px;
  background:var(--ink);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:28px 22px;
  overflow-y:auto;
}
.sidebar-brand{
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.03em;
  margin-bottom:2px;
}
.sidebar-brand b{color:var(--teal);}
.sidebar > img{
  width:100%;
  border-radius:10px;
  display:block;
}
.sidebar-title{
  font-size:12px;color:rgba(255,255,255,.5);
  margin-bottom:26px;
  line-height:1.5;
}
.sidebar-progress{
  margin-bottom:22px;
}
.sidebar-progress .bar{
  height:5px;border-radius:3px;background:rgba(255,255,255,.12);
  overflow:hidden;margin-bottom:8px;
}
.sidebar-progress .bar i{
  display:block;height:100%;background:linear-gradient(90deg,var(--teal-deep),var(--teal));
  width:0%;transition:width .5s cubic-bezier(.4,0,.2,1);
}
.sidebar-progress .pct{font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.03em;}

.nav-list{list-style:none;margin:0;padding:0;flex:1;}
.nav-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 10px;border-radius:10px;
  cursor:default;
  margin-bottom:2px;
  transition:background .2s ease;
}
.nav-item.clickable{cursor:pointer;}
.nav-item.clickable:hover{background:rgba(255,255,255,.06);}
.nav-item .num{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  border:1.5px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.55);
  margin-top:1px;
  transition:all .3s ease;
}
.nav-item.done .num{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;}
.nav-item.current .num{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 0 0 4px rgba(0,168,150,.18);}
.nav-item .num svg{width:12px;height:12px;}
.nav-item .meta{flex:1;min-width:0;}
.nav-item .t{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:2px;}
.nav-item.locked .t{color:rgba(255,255,255,.4);}
.nav-item .s{font-size:11.5px;color:rgba(255,255,255,.45);line-height:1.4;}

.sidebar-foot{
  font-size:11px;color:rgba(255,255,255,.35);
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:16px;margin-top:16px;
}

/* ================= MAIN COLUMN ================= */
.main{
  flex:1;display:flex;flex-direction:column;min-width:0;
}

.topbar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:16px;
  padding:16px 44px;
  background:var(--paper-panel);
  border-bottom:1px solid var(--line);
}
.topbar .crumb{font-size:12.5px;color:var(--text-muted);}
.topbar .crumb b{color:var(--ink);}
.topbar .dots{display:flex;gap:6px;margin-left:auto;}
.topbar .dots span{
  width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:background .3s ease, transform .3s ease;
}
.topbar .dots span.on{background:var(--teal-deep);transform:scale(1.15);}
.topbar .time{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;}

.stage{position:relative;flex:1;overflow:hidden;}
.screen{
  position:absolute;inset:0;overflow-y:auto;
  padding:48px 56px 40px;
  opacity:0;visibility:hidden;transform:translateX(36px);
  transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.screen.current{opacity:1;visibility:visible;transform:translateX(0);z-index:2;}
.screen.leaving{transform:translateX(-36px);}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-deep);margin-bottom:14px;
  opacity:0;animation:riseIn .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.03s;
}
.eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--signal);animation:pulse 1.8s ease-in-out infinite;}

h1.headline{
  font-family:var(--serif);font-size:34px;line-height:1.15;margin:0 0 14px;max-width:760px;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.1s;
}
p.lede{
  font-size:15.5px;line-height:1.68;color:var(--text-muted);max-width:620px;margin:0 0 30px;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.2s;
}

@keyframes riseIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(1.5);}}

/* ---------------- scan hero ---------------- */
.scan-panel{
  position:relative;border:1px solid var(--line);background:var(--ink);border-radius:var(--radius);
  height:120px;margin-bottom:32px;overflow:hidden;max-width:900px;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.28s;
}
.scan-panel .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,168,150,.14) 1px, transparent 1px),linear-gradient(90deg, rgba(0,168,150,.14) 1px, transparent 1px);background-size:26px 26px;}
.scan-panel .silhouette{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66%;height:56%;border:1.5px dashed rgba(255,255,255,.22);border-radius:50px 50px 80px 80px/56px 56px 90px 90px;}
.scan-panel .sweep{position:absolute;top:0;bottom:0;width:110px;background:linear-gradient(90deg, rgba(0,168,150,0) 0%, rgba(0,168,150,.55) 50%, rgba(0,168,150,0) 100%);animation:sweep 3.2s ease-in-out infinite;animation-delay:.8s;}
.scan-panel .tag{position:absolute;left:18px;bottom:14px;color:rgba(255,255,255,.65);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;}
.scan-panel .tag b{color:var(--teal);font-weight:700;}
@keyframes sweep{0%{left:-130px;}55%{left:100%;}100%{left:100%;}}

/* ---------------- cards block ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;max-width:980px;margin-bottom:8px;}
.card{
  border:1px solid var(--line);background:var(--paper-panel);border-radius:12px;padding:18px 16px;
  opacity:0;transform:translateY(14px);animation:cardIn .5s cubic-bezier(.2,.7,.2,1) forwards;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card:hover{box-shadow:0 12px 26px rgba(11,37,69,.1);transform:translateY(-3px);border-color:var(--teal);}
.card .icon{width:36px;height:36px;border-radius:10px;background:rgba(0,168,150,.1);display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--teal-deep);}
.card .icon svg{width:19px;height:19px;}
.card h3{font-family:var(--serif);font-size:15.5px;margin:0 0 6px;}
.card p{font-size:12.5px;line-height:1.5;color:var(--text-muted);margin:0;}
@keyframes cardIn{to{opacity:1;transform:translateY(0);}}
.card:nth-child(1){animation-delay:.4s;} .card:nth-child(2){animation-delay:.5s;}
.card:nth-child(3){animation-delay:.6s;} .card:nth-child(4){animation-delay:.7s;}

/* ---------------- chips block ---------------- */
.block{margin-bottom:30px;max-width:900px;}
.block-radar{max-width:none;width:100%;}
.block-title{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-deep);margin:0 0 12px;opacity:0;animation:riseIn .5s ease forwards;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  border:1px solid var(--line);background:var(--paper-panel);border-radius:100px;
  padding:9px 16px;font-size:13px;color:var(--ink-soft);font-weight:600;
  opacity:0;transform:translateY(8px);animation:chipIn .45s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes chipIn{to{opacity:1;transform:translateY(0);}}
.chip:nth-child(1){animation-delay:.1s;} .chip:nth-child(2){animation-delay:.18s;}
.chip:nth-child(3){animation-delay:.26s;} .chip:nth-child(4){animation-delay:.34s;}
.chip:nth-child(5){animation-delay:.42s;}

/* ---------------- timeline block ---------------- */
.timeline{max-width:640px;position:relative;padding-left:0;border-left:none;}
.tl-item{position:relative;padding-left:44px;padding-bottom:24px;opacity:0;transform:translateY(10px);animation:riseIn .5s cubic-bezier(.2,.7,.2,1) forwards;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::after{
  content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:var(--line);
}
.tl-item:last-child::after{display:none;}
.tl-num{
  position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  background:var(--teal-deep);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;box-shadow:0 0 0 4px var(--paper);
}
.tl-num svg{width:15px;height:15px;}
.tl-item .tt{font-size:12.5px;color:var(--teal-deep);font-weight:700;margin-bottom:3px;}
.tl-item .tb{font-size:13.5px;color:var(--ink-soft);line-height:1.55;}
.tl-item:nth-child(1){animation-delay:.1s;} .tl-item:nth-child(2){animation-delay:.2s;}
.tl-item:nth-child(3){animation-delay:.3s;} .tl-item:nth-child(4){animation-delay:.4s;}

/* ---------------- list block ---------------- */
.plain-list{list-style:none;margin:0;padding:0;max-width:640px;}
.plain-list li{
  display:flex;gap:12px;align-items:flex-start;
  padding:9px 0;font-size:13.5px;color:var(--ink-soft);line-height:1.55;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(-8px);animation:slideRight .45s cubic-bezier(.2,.7,.2,1) forwards;
}
.plain-list li:last-child{border-bottom:none;}
.plain-list li .bullet{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  background:rgba(0,168,150,.12);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.plain-list li .bullet svg{width:10px;height:10px;}
@keyframes slideRight{to{opacity:1;transform:translateX(0);}}
.plain-list li:nth-child(1){animation-delay:.08s;} .plain-list li:nth-child(2){animation-delay:.16s;}
.plain-list li:nth-child(3){animation-delay:.24s;} .plain-list li:nth-child(4){animation-delay:.32s;}
.plain-list li:nth-child(5){animation-delay:.4s;} .plain-list li:nth-child(6){animation-delay:.48s;}

/* two lists side by side when both present */
.list-row{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:980px;}
@media (max-width:900px){.list-row{grid-template-columns:1fr;}}

/* ---------------- device (equipment illustration) block ---------------- */
.device-panel{
  display:flex;align-items:center;gap:16px;
  background:var(--ink);border-radius:var(--radius);padding:20px 22px;
  max-width:520px;margin-bottom:22px;
  opacity:0;animation:riseIn .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.15s;
}
.device-icon{
  position:relative;
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:rgba(0,168,150,.16);display:flex;align-items:center;justify-content:center;color:var(--teal);
}
.device-icon::after{
  content:"";position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 2px var(--ink);
  animation:pulse 1.8s ease-in-out infinite;
}
.device-icon svg{width:26px;height:26px;}
.device-label{font-family:var(--serif);font-size:15px;color:#fff;margin-bottom:3px;}
.device-note{font-size:12px;color:rgba(255,255,255,.55);line-height:1.5;}

/* ---------------- media block ---------------- */
.media-block{max-width:560px;margin:0 auto 30px;}
.media-block .frame{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.3s;
}
.media-block img{width:100%;height:auto;display:block;}
.media-block .cap{font-size:11.5px;color:var(--text-muted);margin-top:8px;font-style:italic;text-align:center;}

/* ---------------- stats block ---------------- */
.stats{display:flex;flex-wrap:wrap;gap:16px;max-width:900px;}
.stat-card{
  flex:1 1 220px;border:1px solid var(--line);background:var(--paper-panel);border-radius:12px;padding:20px;
  opacity:0;transform:translateY(12px);animation:riseIn .5s cubic-bezier(.2,.7,.2,1) forwards;
}
.stat-card .val{font-family:var(--serif);font-size:34px;color:var(--teal-deep);line-height:1;margin-bottom:6px;}
.stat-card .lab{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px;}
.stat-card .sub{font-size:11.5px;color:var(--text-muted);}
.stat-card .bar{height:5px;border-radius:3px;background:var(--line);margin-top:12px;overflow:hidden;}
.stat-card .bar i{display:block;height:100%;background:var(--teal);width:0;transition:width 1s cubic-bezier(.2,.7,.2,1);}
.stat-card:nth-child(1){animation-delay:.15s;} .stat-card:nth-child(2){animation-delay:.28s;} .stat-card:nth-child(3){animation-delay:.41s;}

.stats.compact{max-width:640px;}
.stats.compact .stat-card{flex:1 1 200px;padding:14px 16px;}
.stats.compact .stat-card .val{font-size:22px;margin-bottom:3px;}
.stats.compact .stat-card .lab{font-size:11.5px;}
.stats.compact .stat-card .sub{font-size:10.5px;}

/* ---------------- radar chart ---------------- */
.radar-wrap{max-width:900px;margin:0 auto 22px;}
.radar-frame{
  border:1px solid var(--line);background:var(--paper-panel);border-radius:var(--radius);
  padding:28px;opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.2s;
}
.radar-svg{width:100%;height:auto;display:block;max-height:520px;}
.radar-shape{
  transform-box:fill-box;
  transform-origin:50% 50%;
  opacity:0;transform:scale(.6);
  animation:radarIn .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.4s;
}
@keyframes radarIn{to{opacity:1;transform:scale(1);}}

/* ---------------- iconrow ---------------- */
.iconrow{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px;max-width:900px;}
.icon-pill{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);background:var(--paper-panel);border-radius:100px;
  padding:8px 16px 8px 8px;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  opacity:0;transform:translateY(8px);animation:chipIn .45s cubic-bezier(.2,.7,.2,1) forwards;
}
.icon-pill:nth-child(1){animation-delay:.1s;} .icon-pill:nth-child(2){animation-delay:.2s;}
.icon-pill:nth-child(3){animation-delay:.3s;} .icon-pill:nth-child(4){animation-delay:.4s;}
.ip-icon{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:rgba(0,168,150,.14);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;
}
.ip-icon svg{width:13px;height:13px;}

/* ================= QUIZ ================= */
.quiz-wrap{max-width:760px;}
.quiz-head{margin-bottom:24px;}
.quiz-q{
  border:1px solid var(--line);background:var(--paper-panel);border-radius:14px;
  padding:22px 24px;margin-bottom:18px;
  opacity:0;transform:translateY(14px);animation:riseIn .5s cubic-bezier(.2,.7,.2,1) forwards;
}
.quiz-q:nth-child(1){animation-delay:.05s;} .quiz-q:nth-child(2){animation-delay:.15s;} .quiz-q:nth-child(3){animation-delay:.25s;}
.quiz-q .qn{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:8px;}
.quiz-q .qt{font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:16px;line-height:1.45;}
.quiz-options{display:flex;flex-direction:column;gap:9px;}
.quiz-opt{
  display:flex;align-items:center;gap:12px;text-align:left;
  border:1.5px solid var(--line);background:var(--paper-panel);
  border-radius:10px;padding:11px 14px;font-size:13.5px;color:var(--ink-soft);
  cursor:pointer;font-family:var(--sans);
  transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.quiz-opt:hover:not(:disabled){border-color:var(--teal);}
.quiz-opt:active:not(:disabled){transform:scale(.99);}
.quiz-opt .letter{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-muted);
}
.quiz-opt[disabled]{cursor:default;}
.quiz-opt.correct{border-color:var(--teal-deep);background:rgba(0,168,150,.08);}
.quiz-opt.correct .letter{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;}
.quiz-opt.wrong{border-color:var(--danger);background:rgba(225,75,75,.06);}
.quiz-opt.wrong .letter{background:var(--danger);border-color:var(--danger);color:#fff;}
.quiz-opt.dim{opacity:.55;}

.quiz-feedback{
  margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.55;
  display:none;
}
.quiz-feedback.show{display:block;animation:riseIn .35s ease forwards;}
.quiz-feedback.ok{background:rgba(0,168,150,.08);color:var(--ink-soft);}
.quiz-feedback.bad{background:rgba(225,75,75,.07);color:var(--ink-soft);}
.quiz-feedback b{color:var(--ink);}

.quiz-summary{
  border:1px dashed var(--line);border-radius:12px;padding:16px 20px;
  display:flex;align-items:center;gap:14px;margin-top:6px;
  opacity:0;
}
.quiz-summary.show{opacity:1;animation:riseIn .4s ease forwards;}
.quiz-summary .score{font-family:var(--serif);font-size:22px;color:var(--teal-deep);}
.quiz-summary .txt{font-size:12.5px;color:var(--text-muted);}

/* ---------------- module complete micro-badge ---------------- */
.mini-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border-radius:100px;padding:8px 16px;font-size:12px;
  margin-top:18px;opacity:0;
}
.mini-badge.show{opacity:1;animation:riseIn .4s ease forwards;}
.mini-badge .dotgreen{width:7px;height:7px;border-radius:50%;background:var(--teal);}

/* ================= COURSE COMPLETE SCREEN ================= */
#course-complete{
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--ink);color:#fff;padding:40px;display:flex;
}
.done-badge{
  width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--teal), var(--teal-deep));
  display:flex;align-items:center;justify-content:center;margin-bottom:24px;
  transform:scale(0);animation:pop .55s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:.1s;
  box-shadow:0 0 0 10px rgba(0,168,150,.12);
}
.done-badge svg{width:34px;height:34px;}
.done-badge path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s ease forwards;animation-delay:.5s;}
@keyframes pop{to{transform:scale(1);}}
@keyframes draw{to{stroke-dashoffset:0;}}
#course-complete h2{font-family:var(--serif);font-size:30px;margin:0 0 12px;opacity:0;animation:riseIn .6s ease forwards;animation-delay:.35s;}
#course-complete p{color:rgba(255,255,255,.65);font-size:14.5px;max-width:460px;line-height:1.6;margin:0 0 26px;opacity:0;animation:riseIn .6s ease forwards;animation-delay:.45s;}
.final-score{
  display:flex;gap:28px;margin-bottom:28px;
  opacity:0;animation:riseIn .6s ease forwards;animation-delay:.55s;
}
.final-score .fs{text-align:center;}
.final-score .fs .n{font-family:var(--serif);font-size:26px;color:var(--teal);}
.final-score .fs .l{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:8px 16px;
  font-size:12px;letter-spacing:.03em;color:rgba(255,255,255,.75);
  opacity:0;animation:riseIn .6s ease forwards;animation-delay:.65s;
}
.status-pill .dot2{width:7px;height:7px;border-radius:50%;background:var(--teal);}

/* ================= COURSE OVERVIEW SCREEN ================= */
#course-overview{
  background:var(--ink);color:#fff;
  display:flex;align-items:flex-start;justify-content:center;
  padding:56px 40px;
}
.ov-inner{max-width:760px;width:100%;text-align:center;}
.ov-logo{
  background:#fff;border-radius:12px;padding:14px 20px;max-width:320px;width:100%;
  margin:0 auto 28px;display:block;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.05s;
}
.ov-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);margin-bottom:16px;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.15s;
}
.ov-eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--signal);animation:pulse 1.8s ease-in-out infinite;}
.ov-title{
  font-family:var(--serif);font-size:38px;line-height:1.16;margin:0 0 16px;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.22s;
}
.ov-subtitle{
  font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.65);max-width:600px;margin:0 auto 30px;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.3s;
}
.ov-scan{margin:0 auto 34px;max-width:700px;height:110px;}
.ov-what{
  text-align:left;margin-bottom:34px;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.4s;
}
.ov-what .block-title{color:var(--teal);text-align:center;margin-bottom:16px;}
.ov-mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ov-mod{
  display:flex;align-items:flex-start;gap:12px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;
  background:rgba(255,255,255,.03);
}
.ov-num{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:rgba(0,168,150,.18);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
}
.ov-mod-t{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px;}
.ov-mod-s{font-size:11.5px;color:rgba(255,255,255,.5);line-height:1.4;}
.ov-begin{
  font-size:15px;padding:14px 30px;
  opacity:0;animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.5s;
}
.ov-begin svg{width:16px;height:16px;}

@media (max-width:700px){
  .ov-mod-grid{grid-template-columns:1fr;}
  .ov-title{font-size:28px;}
}

/* ================= CONTROLS ================= */
.controls{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:16px 44px;background:var(--paper-panel);border-top:1px solid var(--line);
}
.btn{
  appearance:none;border:none;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:600;
  padding:11px 22px;border-radius:9px;display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active:not(:disabled){transform:scale(.97);}
.btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 8px 18px rgba(2,128,144,.28);}
.btn-primary:hover:not(:disabled){box-shadow:0 10px 22px rgba(2,128,144,.38);}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--line);}
.btn-ghost:hover:not(:disabled){color:var(--ink);border-color:var(--ink);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.controls .spacer{flex:1;}
.progress-mini{font-size:12px;color:var(--text-muted);margin-right:18px;}

@media (max-width: 980px){
  .sidebar{display:none;}
  .cards{grid-template-columns:repeat(2,1fr);}
  h1.headline{font-size:27px;}
  .screen{padding:34px 24px 30px;}
  .topbar{padding:14px 22px;}
  .controls{padding:14px 22px;}
}