:root{--ink:#0b1530;--blue:#2b4bdc;--sky:#e8eefc;--amber:#ffb020;--mute:#56628a;--w:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.55 "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink);background:#fff}
a{color:inherit}.sr{position:absolute;width:0;height:0;overflow:hidden}.center{text-align:center}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.ic{width:40px;height:40px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bar{background:var(--ink);color:#fff;text-align:center;padding:10px 16px;font-size:.92rem}.bar a{color:var(--amber);font-weight:700;text-decoration:none}
.nav{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid #dde3f3}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.4rem;letter-spacing:-.02em;text-decoration:none}.logo svg{width:30px;height:30px}
.nav nav{display:flex;gap:20px}.nav nav a{text-decoration:none;color:var(--mute);font-size:.95rem}.nav nav a:hover{color:var(--ink)}.go{margin-left:auto}
.btn{display:inline-block;border-radius:999px;padding:11px 24px;font-weight:700;text-decoration:none;border:2px solid var(--blue);background:var(--blue);color:#fff}
.btn.o{background:transparent;color:inherit;border-color:currentColor}.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.hero{background:linear-gradient(120deg,#0b1530 55%,#1a2f8f);color:#fff}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:20px;padding-top:56px;padding-bottom:56px;min-height:440px}
.new{display:inline-block;background:var(--amber);color:var(--ink);font-weight:800;font-size:.8rem;padding:4px 12px;border-radius:4px;letter-spacing:.06em}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.03em;margin:.4em 0}
.hero p{max-width:34em;color:#c9d4f5}.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-art{width:100%;max-width:380px;justify-self:center}
.w1{fill:none;stroke:#fff;stroke-width:6}.w2{fill:#0b1530}.route{fill:none;stroke:#7aa2ff;stroke-width:5;stroke-linecap:round}
.big{font:700 40px system-ui;fill:#fff}.sm{font:13px system-ui;fill:#9fb1d9}
.tiles{display:grid;grid-template-columns:repeat(5,1fr)}
.tile{padding:28px 20px;min-height:230px;background:#fff;border-bottom:1px solid #e3e8f6}.tile:nth-child(even){background:var(--sky)}
.tile h3{margin:.6em 0 .3em;font-size:1.15rem}.tile p{margin:0;color:var(--mute);font-size:.95rem}
.tagline{text-align:center;font-size:clamp(1.4rem,3vw,2rem);color:#6c78a0;max-width:700px;margin:72px auto 40px;line-height:1.35;padding:0 20px}
h2.center{font-size:1.1rem;margin:0 0 24px}
.devs{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 12px;text-align:center;max-width:800px;margin:0 auto 72px;padding:0 20px}
.dev span{display:block;font-size:.92rem;margin-top:8px}
.dev .ic{width:60px;height:60px;padding:12px;border-radius:50%;background:var(--sky)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:var(--w);margin:0 auto;padding:0 20px}
.card{position:relative;overflow:hidden;border-radius:6px;padding:40px;color:#fff;min-height:230px;display:flex;flex-direction:column;justify-content:center}
.card.wide{grid-column:1/-1;min-height:270px}
.c1{background:#0b1530}.c2{background:#2b4bdc}.c3{background:#17306e}.c4{background:#0f6b8f}.c5{background:var(--sky);color:var(--ink)}.c6{background:#1d2a55}
.card h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;margin:0 0 .4em;letter-spacing:-.02em}
.card p{margin:0 0 1em;max-width:30em}.card .btn{align-self:flex-start}
.card .ic{position:absolute;right:28px;bottom:20px;width:120px;height:120px;stroke:currentColor;opacity:.18}
.quote{max-width:var(--w);margin:72px auto;padding:36px 20px 0;border-top:1px solid #dde3f3;display:flex;justify-content:space-between;gap:20px}
.q{margin:0}.q p{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:600;margin:0;max-width:none}
.q cite{display:block;color:var(--mute);font-style:normal;margin-top:6px}
.dots{display:flex;flex-direction:column;gap:10px}
.dots button{width:14px;height:14px;border-radius:50%;border:0;background:#c3cbe6;padding:0;cursor:pointer}.dots button[aria-current=true]{background:var(--blue)}
.sub{background:#eceff7;padding:20px;text-align:center;font-size:.85rem;letter-spacing:.06em;color:var(--mute)}.sub .btn{margin-left:14px;letter-spacing:0;padding:8px 20px}
footer{padding:24px 20px 40px;text-align:center;color:var(--mute);font-size:.9rem}footer p{margin:.4em 0}footer a{margin:0 8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}.hero .wrap{grid-template-columns:1fr}.devs{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr}.nav nav{display:none}.card{padding:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.logo img{width:32px;height:32px;border-radius:8px}.hero-art{height:auto}
.card .art{position:absolute;right:20px;bottom:0;height:90%;width:auto;max-width:40%;pointer-events:none}.card .art~h2,.card .art~p{max-width:58%}.c3 .art{height:98%;bottom:-18px}
@media(max-width:900px){.card .art{opacity:.3;max-width:50%}.card .art~h2,.card .art~p{max-width:none}}
footer p:last-child a{margin:0}
