:root { --cyan:#00afde; --cyan-dark:#008fb8; --orange:#f89e19; --ink:#082c3a; --navy:#063848; --paper:#fff; --mist:#eef9fc; --line:#ccecf4; --muted:#55717b; --shadow:0 22px 60px rgba(4,50,65,.14); --radius:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
img { display:block; max-width:100%; }
a { color:inherit; }
.wrap { width:min(1100px,calc(100% - 40px)); margin-inline:auto; }
header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(8,44,58,.08); backdrop-filter:blur(14px); }
.nav { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand img { width:244px; }
.back { font-weight:850; text-decoration-color:var(--orange); text-decoration-thickness:3px; text-underline-offset:5px; }
.hero { overflow:hidden; position:relative; padding:78px 0 82px; color:#fff; background:linear-gradient(126deg,var(--navy),var(--ink)); }
.hero::after { content:""; position:absolute; width:390px; height:390px; right:-120px; top:-180px; border:54px solid rgba(0,175,222,.16); border-radius:50%; }
.kicker { margin:0 0 11px; color:var(--orange); font-size:.82rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:0; max-width:880px; font-size:clamp(3rem,7vw,6rem); line-height:.92; letter-spacing:-.06em; }
.hero p:last-child { max-width:740px; margin:24px 0 0; color:#d3ebf1; font-size:1.14rem; }
main { padding:78px 0 88px; }
.lead { max-width:780px; margin:0 0 42px; color:var(--ink); font-size:1.3rem; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.card { padding:32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--mist); }
.card.accent { background:var(--orange); border-color:var(--orange); }
.card h2 { margin:0 0 10px; font-size:1.6rem; line-height:1.08; letter-spacing:-.025em; }
.card p { margin:0 0 20px; color:var(--muted); }
.card.accent p { color:#65420b; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:49px; padding:0 22px; border-radius:999px; background:var(--orange); color:var(--ink); font-weight:850; text-decoration:none; }
.button.dark { background:var(--navy); color:#fff; }
.button.outline { border:2px solid var(--cyan); background:#fff; }
.placeholder { margin-top:54px; padding:42px; border:2px dashed var(--cyan); border-radius:var(--radius); background:var(--mist); text-align:center; }
.placeholder h2 { margin:0 0 8px; font-size:clamp(1.7rem,4vw,2.7rem); line-height:1.05; }
.placeholder p { max-width:650px; margin:0 auto; color:var(--muted); }
.placeholder .button { margin-top:22px; }
.levels { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:38px 0; }
.level { padding:25px 18px; border-radius:20px; background:var(--cyan); text-align:center; }
.level strong { display:block; font-size:2rem; line-height:1; }
.level span { display:block; margin-top:8px; color:#214d5b; font-size:.9rem; font-weight:750; }
.steps { counter-reset:steps; display:grid; gap:16px; }
.step { position:relative; padding:30px 30px 30px 84px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 10px 30px rgba(4,50,65,.07); }
.step::before { counter-increment:steps; content:counter(steps); position:absolute; left:26px; top:27px; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--orange); font-weight:900; }
.step h2 { margin:0 0 7px; font-size:1.45rem; }
.step p { margin:0; color:var(--muted); }
.cta { margin-top:60px; padding:44px; border-radius:30px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cta h2 { margin:0; max-width:650px; font-size:clamp(2rem,4vw,3.4rem); line-height:1; letter-spacing:-.045em; }
footer { padding:32px 0; background:var(--ink); color:#b9d4db; text-align:center; }
footer a { color:#fff; }
@media(max-width:800px){ .grid,.levels{grid-template-columns:1fr 1fr}.cta{align-items:flex-start;flex-direction:column} }
@media(max-width:600px){ .wrap{width:min(100% - 26px,1100px)}.nav{min-height:72px}.brand img{width:185px}.back{font-size:.84rem}.hero{padding:54px 0 61px}main{padding:58px 0 68px}.grid,.levels{grid-template-columns:1fr}.card,.placeholder,.cta{padding:29px 25px}.step{padding:27px 24px 27px 76px}.step::before{left:22px;top:24px} }