:root{
  --ink:#172033; --muted:#64708a; --paper:#f5f7fb; --white:#fff;
  --navy:#10172b; --blue:#2667ff; --cyan:#17c3d6; --purple:#7c4dff;
  --coral:#ff5f6d; --amber:#ffb300; --green:#00a878; --pink:#e748b5;
  --shadow:0 18px 48px rgba(17,31,66,.14); --radius:22px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;background:#dfe5ef}
body{margin:0;font-family:"Inter Display","Inter","Lato","Segoe UI",Arial,sans-serif;color:var(--ink);background:#dfe5ef;-webkit-print-color-adjust:exact;print-color-adjust:exact}
a{color:inherit;text-decoration:none}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.webbar{position:fixed;z-index:20;right:24px;bottom:24px;display:flex;gap:10px}
.webbar a{background:var(--navy);color:white;border-radius:999px;padding:13px 18px;font-weight:800;box-shadow:var(--shadow)}
.document{width:80vw;max-width:1536px;margin:20px auto;box-shadow:0 10px 50px rgba(0,0,0,.18)}
.page{position:relative;width:100%;min-height:297mm;background:var(--paper);overflow:hidden;padding:15mm 15mm 14mm;page-break-after:always}
.page:last-child{page-break-after:auto}
.page:before,.page:after{content:"";position:absolute;border-radius:50%;filter:blur(.2px);pointer-events:none;opacity:.16}
.page:before{width:90mm;height:90mm;background:linear-gradient(135deg,var(--cyan),var(--purple));right:-38mm;top:-38mm}
.page:after{width:65mm;height:65mm;background:linear-gradient(135deg,var(--amber),var(--coral));left:-32mm;bottom:-34mm}
.content{position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.02em}
.brandmark{display:block;width:46px;height:46px;border-radius:12px;object-fit:contain;background:white;padding:2px;box-shadow:0 10px 24px rgba(71,95,255,.20)}
.brandtext small{display:block;color:var(--muted);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-top:1px}
.eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:900;color:var(--blue)}
h1,h2,h3,p{margin:0}
h1{font-size:35px;line-height:1.02;letter-spacing:-.045em}
h2{font-size:28px;line-height:1.05;letter-spacing:-.035em}
h3{font-size:15px;line-height:1.15}
.lead{font-size:14px;line-height:1.45;color:#e3e8f7;max-width:138mm}
.muted{color:var(--muted)}
.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:10mm}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#e9efff;color:var(--blue);font-size:10px;font-weight:900}
.hero{background:var(--navy);color:white;border-radius:28px;padding:13mm;min-height:74mm;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero:before{content:"";position:absolute;width:90mm;height:90mm;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(23,195,214,.82),rgba(124,77,255,.15) 55%,transparent 70%);right:-18mm;top:-26mm}
.hero .content{max-width:145mm}
.hero h1{margin:5mm 0 4mm}
.hero-actions{display:flex;gap:8px;margin-top:6mm;flex-wrap:wrap}
.hero-actions a{font-size:10px;font-weight:900;padding:8px 12px;border-radius:999px;background:white;color:var(--navy)}
.hero-actions a.secondary{background:rgba(255,255,255,.12);color:white;border:1px solid rgba(255,255,255,.2)}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;margin:8mm 0 5mm}
.section-title p{font-size:10px;color:var(--muted);max-width:75mm;text-align:right;line-height:1.35}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:5mm}
.path-card{border-radius:20px;background:white;padding:6mm;min-height:54mm;box-shadow:0 11px 28px rgba(28,51,98,.09);position:relative;overflow:hidden;border:1px solid rgba(30,57,110,.05)}
.path-card:before{content:"";position:absolute;width:34mm;height:34mm;border-radius:50%;right:-12mm;top:-13mm;background:var(--accent);opacity:.17}
.path-number{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--accent);color:white;font-size:12px;font-weight:950;margin-bottom:4mm}
.path-card h3{font-size:16px;margin-bottom:2.5mm;max-width:60mm}
.path-card p{font-size:10px;line-height:1.45;color:var(--muted);max-width:68mm}
.path-card .deadline{margin-top:4mm;font-size:11px;color:var(--ink);font-weight:900;display:flex;gap:7px;align-items:center}
.path-card .go{position:absolute;right:6mm;bottom:5mm;color:var(--accent);font-size:18px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;margin-top:6mm}
.quick{background:linear-gradient(180deg,#fff,#f7f9fd);border:1px solid #e7ecf5;border-radius:16px;padding:4.5mm;font-size:9.5px;line-height:1.3;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.quick span{color:var(--blue);font-size:16px}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7mm}
.page-title{display:flex;align-items:center;gap:4mm}.page-logo{display:block;width:15mm;height:15mm;object-fit:contain;border-radius:9px;background:white;padding:1mm;box-shadow:0 7px 18px rgba(28,51,98,.10)}
.page-head h2{margin-top:2mm;max-width:132mm}
.chapter{font-size:44px;line-height:.9;font-weight:950;color:rgba(28,44,82,.08)}
.summary-strip{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:3mm;margin-bottom:6mm}
.stat{background:white;border-radius:16px;padding:4.5mm;border:1px solid #e7ecf5;box-shadow:0 8px 20px rgba(28,51,98,.06)}
.stat strong{display:block;font-size:15px;margin-bottom:1mm}
.stat span{display:block;font-size:8.7px;line-height:1.3;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:850}
.panel{background:white;border-radius:20px;padding:6mm;box-shadow:0 10px 28px rgba(28,51,98,.08);border:1px solid #e8edf5;margin-bottom:5mm;break-inside:avoid}
.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:4mm}
.panel-title .tag{font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;padding:5px 8px;border-radius:999px;background:var(--tint);color:var(--accent)}
.timeline{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:3mm}
.event{background:var(--tint);border-radius:14px;padding:4mm;min-height:30mm;border-top:4px solid var(--accent)}
.event .date{display:block;font-size:12px;font-weight:950;color:var(--accent);line-height:1.05;margin-bottom:2mm}
.event p{font-size:8.7px;line-height:1.35;color:#46516a}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5mm}
.course-list{display:grid;grid-template-columns:1fr 1fr;gap:4mm;margin-bottom:6mm}
.course{background:linear-gradient(135deg,var(--accent),color-mix(in srgb, var(--accent) 65%, #111));color:white;border-radius:18px;padding:5mm;min-height:34mm;display:flex;align-items:center;gap:4mm;box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent)}
.course .course-icon{display:grid;place-items:center;width:34px;height:34px;background:rgba(255,255,255,.16);border-radius:12px;font-weight:950}
.course h3{font-size:13px;line-height:1.2}
.note{border-radius:16px;padding:4mm;background:#fff7df;border:1px solid #ffe3a0;color:#74510a;font-size:9px;line-height:1.4}
.actions{display:flex;align-items:center;justify-content:space-between;gap:5mm;margin-top:5mm;background:var(--navy);color:white;border-radius:20px;padding:5mm}
.action-links{display:flex;gap:2mm;flex-wrap:wrap}
.action-links a{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:8px 10px;background:rgba(255,255,255,.12);font-size:8.8px;font-weight:900;border:1px solid rgba(255,255,255,.13)}
.action-links a.primary{background:white;color:var(--navy)}
.qr{display:flex;align-items:center;gap:3mm;min-width:45mm;justify-content:flex-end}
.qr img{width:20mm;height:20mm;border-radius:6px;background:white;padding:2px}
.qr p{font-size:7.8px;line-height:1.25;color:#ccd4e8;max-width:22mm}
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4mm;margin:7mm 0}
.check{background:white;border:1px solid #e5ebf5;border-radius:18px;padding:5mm;display:flex;gap:4mm;align-items:flex-start;min-height:34mm}
.check b{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eaf8f3;color:var(--green);font-size:15px;flex:0 0 auto}
.check strong{display:block;font-size:11px;margin-bottom:1mm}.check p{font-size:8.8px;line-height:1.35;color:var(--muted)}
.contact{display:grid;grid-template-columns:1.25fr .75fr;gap:5mm;background:linear-gradient(135deg,var(--navy),#253464);color:white;border-radius:24px;padding:7mm;box-shadow:var(--shadow)}
.contact h3{font-size:18px;margin-bottom:3mm}.contact p{font-size:10px;line-height:1.5;color:#d5dcef}
.contact-links{display:grid;gap:2mm;align-content:center}
.contact-links a{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:9px 10px;font-size:9px;font-weight:850}
.link-matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:3mm;margin-top:5mm}
.link-matrix a{background:white;border:1px solid #e3e9f3;border-radius:14px;padding:4mm;font-size:9px;font-weight:850;display:flex;justify-content:space-between;align-items:center}
.footer{position:absolute;z-index:3;left:15mm;right:15mm;bottom:7mm;display:flex;justify-content:space-between;align-items:center;font-size:7.8px;color:#78839b}
.footer a{font-weight:850;color:#58657f}
.source-note{font-size:7.7px;line-height:1.35;color:#758198;margin-top:4mm}
.ribbon{position:absolute;right:-12mm;top:18mm;transform:rotate(40deg);background:var(--coral);color:white;padding:3mm 16mm;font-size:8px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
@page{size:A4;margin:0}
@media print{
  html,body{background:white}
  .document{width:auto;margin:0;box-shadow:none}
  .page{width:210mm;height:297mm;min-height:297mm}
  .webbar{display:none!important}
}
@media screen and (min-width:1200px){
  .document{width:80vw;max-width:1536px;margin:32px auto}
  .page{
    min-height:auto;
    aspect-ratio:210/297;
    padding:clamp(86px,5.6vw,108px) clamp(88px,5.9vw,113px) clamp(82px,5.3vw,102px);
    margin-bottom:32px;
  }
  .webbar{right:32px;bottom:32px;gap:14px}
  .webbar a{padding:17px 24px;font-size:16px}
  .brand{gap:16px;font-size:24px}
  .brandmark{width:74px;height:74px;border-radius:19px;padding:4px}
  .brandtext small{font-size:14px;letter-spacing:.14em;margin-top:3px}
  .eyebrow{font-size:15px;letter-spacing:.18em}
  h1{font-size:56px;line-height:1.02}
  h2{font-size:45px;line-height:1.05}
  h3{font-size:23px;line-height:1.16}
  .lead{font-size:22px;line-height:1.5;max-width:920px}
  .topline{margin-bottom:64px}
  .pill{gap:10px;padding:11px 17px;font-size:15px}
  .hero{border-radius:44px;padding:78px;min-height:470px}
  .hero:before{width:540px;height:540px;right:-110px;top:-160px}
  .hero .content{max-width:1050px}
  .hero h1{margin:30px 0 24px}
  .hero-actions{gap:13px;margin-top:37px}
  .hero-actions a{font-size:15px;padding:13px 19px}
  .section-title{margin:50px 0 31px}
  .section-title p{font-size:15px;max-width:580px;line-height:1.45}
  .path-grid{gap:31px}
  .path-card{border-radius:31px;padding:37px;min-height:330px}
  .path-card:before{width:205px;height:205px;right:-75px;top:-78px}
  .path-number{width:47px;height:47px;border-radius:15px;font-size:18px;margin-bottom:24px}
  .path-card h3{font-size:24px;margin-bottom:15px;max-width:86%}
  .path-card p{font-size:15px;line-height:1.5;max-width:88%}
  .path-card .deadline{margin-top:24px;font-size:17px;gap:11px}
  .path-card .go{right:37px;bottom:31px;font-size:28px}
  .quick-grid{gap:24px;margin-top:37px}
  .quick{border-radius:25px;padding:27px;font-size:15px;line-height:1.35}
  .quick span{font-size:25px}
  .page-head{margin-bottom:43px}
  .page-title{gap:24px}
  .page-logo{width:86px;height:86px;border-radius:14px;padding:6px}
  .page-head h2{margin-top:12px;max-width:980px}
  .chapter{font-size:70px}
  .summary-strip{gap:18px;margin-bottom:37px}
  .stat{border-radius:25px;padding:27px}
  .stat strong{font-size:23px;margin-bottom:6px}
  .stat span{font-size:13px;line-height:1.4}
  .panel{border-radius:31px;padding:37px;margin-bottom:31px}
  .panel-title{margin-bottom:24px}
  .panel-title .tag{font-size:13px;padding:8px 12px}
  .timeline{gap:18px}
  .event{border-radius:22px;padding:24px;min-height:180px;border-top-width:6px}
  .event .date{font-size:18px;margin-bottom:12px}
  .event p{font-size:14px;line-height:1.45}
  .two-col{gap:31px}
  .course-list{gap:24px;margin-bottom:37px}
  .course{border-radius:28px;padding:31px;min-height:210px;gap:24px}
  .course .course-icon{width:54px;height:54px;border-radius:18px;font-size:18px}
  .course h3{font-size:20px;line-height:1.25}
  .note{border-radius:25px;padding:24px;font-size:14px;line-height:1.5}
  .actions{gap:31px;margin-top:31px;border-radius:31px;padding:31px}
  .action-links{gap:12px}
  .action-links a{gap:8px;padding:12px 16px;font-size:14px}
  .qr{gap:18px;min-width:275px}
  .qr img{width:116px;height:116px;border-radius:10px;padding:5px}
  .qr p{font-size:12px;line-height:1.35;max-width:135px}
  .check-grid{gap:24px;margin:43px 0}
  .check{border-radius:28px;padding:31px;gap:24px;min-height:205px}
  .check b{width:45px;height:45px;border-radius:14px;font-size:23px}
  .check strong{font-size:17px;margin-bottom:7px}
  .check p{font-size:14px;line-height:1.45}
  .contact{gap:31px;border-radius:37px;padding:43px}
  .contact h3{font-size:28px;margin-bottom:18px}
  .contact p{font-size:16px;line-height:1.55}
  .contact-links{gap:12px}
  .contact-links a{border-radius:19px;padding:15px 17px;font-size:14px}
  .link-matrix{gap:18px;margin-top:31px}
  .link-matrix a{border-radius:22px;padding:24px;font-size:14px}
  .footer{left:clamp(88px,5.9vw,113px);right:clamp(88px,5.9vw,113px);bottom:48px;font-size:12px}
  .source-note{font-size:12px;line-height:1.45;margin-top:24px}
  .ribbon{right:-72px;top:110px;padding:18px 96px;font-size:12px}
}
@media screen and (max-width:900px){
  .document{width:100%;margin:0;box-shadow:none}
  .page{width:100%;min-height:auto;padding:28px 22px;margin-bottom:12px}
  .footer{position:relative;left:auto;right:auto;bottom:auto;margin-top:24px}
  .path-grid,.two-col,.course-list,.check-grid,.contact,.summary-strip{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr!important}
}