section{padding:88px 0;scroll-margin-top:40px}
.sec-h{max-width:40em;display:flex;flex-direction:column;gap:14px;margin-bottom:44px}
.sec-h h2{font-size:clamp(2rem,4.2vw,3rem);font-weight:500}
.sec-h p{font-size:1.12rem;color:var(--muted)}

/* hero */
.hero{padding:72px 0 56px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto 45%;height:120%;background:radial-gradient(closest-side,color-mix(in srgb,var(--l2) 34%,transparent),transparent);z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(2.7rem,6.2vw,4.9rem);font-weight:500;line-height:1;letter-spacing:-.025em;margin:18px 0 22px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lead{font-size:1.22rem;color:var(--muted);max-width:32em}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .facts{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:26px;font-size:.92rem;color:var(--muted);font-weight:500;padding:0;list-style:none}
.hero .facts li{display:flex;align-items:center;gap:8px}
.hero .facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* hero product mock */
.mock{position:relative;margin-bottom:66px}
.mock-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.mock-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.mock-top b{font-family:var(--display);font-weight:600;font-size:1.15rem}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.mock-kpis div{padding:14px 20px;border-right:1px solid var(--line)}
.mock-kpis div:last-child{border-right:0}
.mock-kpis span{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mock-kpis b{font-family:var(--display);font-size:1.6rem;font-weight:600;line-height:1.2}
.mock-row{display:grid;grid-template-columns:34px minmax(0,1fr) 120px 40px;gap:12px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--line);font-size:.92rem}
.mock-row:last-child{border-bottom:0}
.mock-row .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.8rem;color:#14222B}
.mock-row b{display:block;font-weight:600;line-height:1.25}
.mock-row small{color:var(--muted);font-size:.8rem}
.mock-row i{height:8px;border-radius:8px;background:var(--line);overflow:hidden;display:block}
.mock-row i u{display:block;height:100%;border-radius:8px;background:var(--accent)}
.mock-row em{font-style:normal;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.mock-chip{position:absolute;left:-26px;bottom:-66px;background:var(--stage);color:var(--stage-ink);border-radius:12px;padding:12px 16px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);font-size:.9rem}
.mock-chip svg{width:30px;height:30px;flex:none}
.mock-chip b{display:block}
.mock-chip span{color:var(--stage-muted);font-size:.82rem}
.mock-note{position:absolute;right:14px;top:-12px;background:var(--sun);color:#14222B;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 10px}

/* numbers band */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.band div{padding:26px 20px;border-right:1px solid var(--line)}
.band div:last-child{border-right:0}
.band b{display:block;font-family:var(--display);font-weight:500;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.band span{color:var(--muted);font-size:.95rem}

/* why */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.why article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:12px}
.why .ic{width:44px;height:44px;border-radius:10px;background:var(--tint);display:grid;place-items:center;color:var(--accent)}
.why .ic svg{width:24px;height:24px}
.why h3{font-size:1.4rem}
.why p{color:var(--muted)}

/* curriculum: four rising steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.step .cap{background:var(--lv);color:var(--lvi);display:flex;align-items:flex-end;justify-content:space-between;padding:14px 18px;font-weight:600}
.step .cap b{font-family:var(--display);font-size:2.4rem;font-weight:500;line-height:.9}
.step .cap span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.step:nth-child(1) .cap{height:76px;--lv:var(--l1);--lvi:#14222B}
.step:nth-child(2) .cap{height:108px;--lv:var(--l2);--lvi:#14222B}
.step:nth-child(3) .cap{height:140px;--lv:var(--l3);--lvi:#FFFFFF}
.step:nth-child(4) .cap{height:172px;--lv:var(--l4);--lvi:#FFFFFF}
.step .body{padding:18px;display:flex;flex-direction:column;gap:8px}
.step h3{font-size:1.45rem}
.step p{color:var(--muted);font-size:.95rem}
.step .meta{font-size:.82rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

.calc .vatrow{margin-top:-10px;font-size:.95rem;font-variant-numeric:tabular-nums}
.calc .vatrow #p-incl{font-weight:600}

/* tutorial videos */
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.vid{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.vid video{display:block;width:100%;aspect-ratio:16/10;background:#0F2A33;object-fit:contain}
.vid figcaption{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px}
.vid figcaption b{font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1.15}
.vid .len{font-size:.85rem;font-weight:600;color:var(--muted);margin-top:4px}

/* teams: dark stage */
.stage{background:var(--stage);color:var(--stage-ink)}
.stage .eyebrow{color:var(--l2)}
.stage .sec-h p{color:var(--stage-muted)}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden}
.how li{padding:30px;border-right:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:10px}
.how li:last-child{border-right:0}
.how{list-style:none;margin:0;padding:0;counter-reset:h}
.how li::before{counter-increment:h;content:"0" counter(h);font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--l2)}
.how h3{font-size:1.4rem;color:#fff}
.how p{color:var(--stage-muted)}

/* included */
.inc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.inc div{padding:24px 24px 24px 0;border-bottom:1px solid var(--line)}
.inc h3{font-family:var(--body);font-size:1.02rem;font-weight:600;letter-spacing:0;margin-bottom:4px}
.inc p{color:var(--muted);font-size:.95rem}

/* pricing */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.price .l{padding:36px;display:flex;flex-direction:column;gap:18px}
.price .r{padding:36px;background:var(--tint);display:flex;flex-direction:column;gap:18px;justify-content:center}
.price .offer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:-8px}
.price .offer[hidden]{display:none}
.price .amount{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.calc .was{color:var(--muted);font-size:.95rem;margin-right:8px}
.price .amount b{font-family:var(--display);font-weight:500;font-size:4rem;line-height:1;font-variant-numeric:tabular-nums}
.price ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.price ul li{display:grid;grid-template-columns:22px 1fr;gap:8px}
.price ul li::before{content:"";width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 0a9 9 0 100 18A9 9 0 009 0zm-1.2 12.6L4.2 9l1.3-1.3 2.3 2.3 4.7-4.7 1.3 1.3-6 6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 0a9 9 0 100 18A9 9 0 009 0zm-1.2 12.6L4.2 9l1.3-1.3 2.3 2.3 4.7-4.7 1.3 1.3-6 6z'/%3E%3C/svg%3E") center/contain no-repeat}
.calc-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.calc input[type=range]{width:100%;accent-color:var(--accent)}
.calc .n{width:92px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.calc .total{font-family:var(--display);font-size:2.4rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}

/* faq and closing */
.faq{max-width:46em;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--muted);margin-top:10px;max-width:40em}
.close{text-align:center;padding:96px 0}
.close h2{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:500;max-width:16em;margin:0 auto 26px}
footer{border-top:1px solid var(--line);padding:40px 0 32px;color:var(--muted);font-size:.92rem;background:var(--surface)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:28px 40px;align-items:start}
footer .logo{display:inline-flex;margin-bottom:12px}
footer address{font-style:normal;line-height:1.6;color:var(--ink)}
.foot-reg{margin:0;display:grid;gap:12px}
.foot-reg dt{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.foot-reg dd{margin:2px 0 0;color:var(--ink);font-variant-numeric:tabular-nums}
.foot-end{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}
@media (max-width:760px){ footer .wrap{grid-template-columns:1fr} .foot-end{align-items:flex-start;text-align:left} }

@media (max-width:920px){
  section{padding:60px 0}
  .hero{padding:40px 0 48px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .mock-chip{left:12px}
  .band .wrap{grid-template-columns:repeat(2,1fr)}
  .band div:nth-child(2){border-right:0}
  .band div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .why,.inc,.vids{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how{grid-template-columns:1fr}
  .how li{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .how li:last-child{border-bottom:0}
  .price{grid-template-columns:1fr}
  .price .l,.price .r{padding:26px}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .step .cap{height:72px !important}
  .mock-row{grid-template-columns:34px minmax(0,1fr) 40px}
  .mock-row i{display:none}
  .mock-kpis div{padding:12px 14px}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }