:root { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:#1b3350; background:#eef8fb; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 12% 24%,#d7fff1,transparent 30%),radial-gradient(circle at 88% 55%,#e7e7ff,transparent 32%),#eef8fb; }
a { color:inherit; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:12px; top:12px; z-index:10; padding:10px; background:white; }
.sp-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px max(24px,calc((100vw - 1180px)/2)); background:#102944; color:white; border-bottom:4px solid #ffce66; }
.sp-brand { display:flex; align-items:center; gap:10px; font-weight:850; text-decoration:none; }
.sp-brand img { object-fit:contain; }
.sp-header nav { display:flex; flex-wrap:wrap; gap:18px; }
.sp-header nav a { text-decoration:none; font-weight:700; }
.sp-header nav a:hover { text-decoration:underline; }
main { max-width:1280px; margin:auto; padding:28px 22px 70px; }
.sp-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(20px,4vw,48px); align-items:center; min-height:530px; padding:clamp(26px,5vw,70px); overflow:hidden; border-radius:28px; background:radial-gradient(circle at 17% 82%,#187da555,transparent 32%),linear-gradient(125deg,#0b2341,#184c71 62%,#216a85); color:white; box-shadow:0 24px 50px #15354d33; }
.sp-hero::before { content:""; position:absolute; width:440px; height:440px; border:60px solid #77e0ce20; border-radius:50%; left:-140px; bottom:-265px; z-index:-1; }
.sp-hero::after { content:""; position:absolute; width:200px; height:200px; border:3px dashed #fff5bc70; border-radius:50%; right:-70px; top:-70px; z-index:-1; animation:sp-orbit 24s linear infinite; }
.sp-kicker { margin:0 0 10px; color:#197b97; font-size:.76rem; font-weight:900; text-transform:uppercase; letter-spacing:.17em; }
.sp-hero .sp-kicker { color:#86f4d8; }
.sp-hero h1 { margin:0; font-size:clamp(3.6rem,8vw,7.4rem); line-height:.92; letter-spacing:-.075em; text-transform:uppercase; }
.sp-hero h1 span { display:block; color:#ffda75; }
.sp-hero-copy>p:not(.sp-kicker) { max-width:540px; margin:28px 0; font-size:clamp(1rem,2vw,1.25rem); line-height:1.7; color:#e8f7ff; }
.sp-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.sp-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 22px; border-radius:999px; background:#ffdc7c; color:#17344b; font-weight:900; text-decoration:none; box-shadow:0 6px 0 #d6a74b; transition:transform .2s,box-shadow .2s; }
.sp-button:hover { transform:translateY(-3px); box-shadow:0 9px 0 #d6a74b; }
.sp-text-link { color:#d7f7f4; font-weight:800; text-underline-offset:4px; }
.sp-poster { position:relative; margin:0; transform:rotate(3deg); }
.sp-poster img { display:block; width:100%; max-height:410px; object-fit:contain; border:8px solid #fff8e7; border-radius:9px; background:#fff8e7; box-shadow:13px 17px 0 #09253eaa,0 20px 35px #0005; }
.sp-poster figcaption { display:inline-block; margin:16px 0 0; padding:6px 12px; transform:rotate(-3deg); border-radius:6px; background:#ffdd80; color:#17344b; font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.sp-mission { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:-27px 26px 0; padding:16px; border:2px solid #85d7d7; border-radius:20px; background:#f7fffd; box-shadow:0 12px 30px #1b587427; }
.sp-mission>div { display:grid; grid-template-columns:34px 1fr; column-gap:9px; align-items:center; padding:12px 15px; border-radius:12px; background:#e8f7f5; }
.sp-mission>div:nth-child(2) { background:#fff5dc; }
.sp-mission>div:nth-child(3) { background:#ede8fa; }
.sp-mission-icon { grid-row:span 2; font-size:1.6rem; color:#177e97; }
.sp-mission strong { font-size:.72rem; letter-spacing:.11em; color:#21506a; }
.sp-mission span:last-child { font-size:.9rem; font-weight:700; }
.sp-team { padding:70px 6px 42px; }
.sp-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.sp-section-head>p { max-width:270px; margin:0; color:#526a7c; line-height:1.55; }
.sp-team h2,.sp-next h2 { margin:0; color:#173c62; font-size:clamp(2.1rem,4vw,3.5rem); line-height:1.1; letter-spacing:-.05em; }
.sp-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
.sp-grid article { position:relative; display:flex; flex-direction:column; min-width:0; min-height:282px; padding:21px; border:2px solid #9bd5db; border-bottom:7px solid #3f9caa; border-radius:14px; background:linear-gradient(155deg,#ffffff,#e5f6f6); box-shadow:0 8px 18px #244b6214; transition:transform .2s,box-shadow .2s; }
.sp-grid article:nth-child(2) { border-color:#aebcdb; border-bottom-color:#7088b7; background:linear-gradient(155deg,#fff,#e8eeff); }
.sp-grid article:nth-child(3) { border-color:#c8a5d8; border-bottom-color:#a66dbf; background:linear-gradient(155deg,#fff,#f4e9fb); }
.sp-grid article:nth-child(4) { border-color:#9bd4b0; border-bottom-color:#60a983; background:linear-gradient(155deg,#fff,#e6f8e9); }
.sp-grid article:nth-child(5) { border-color:#e4bc88; border-bottom-color:#c78d57; background:linear-gradient(155deg,#fff,#fff1e0); }
.sp-grid article:nth-child(even) { transform:translateY(18px); }
.sp-grid article:hover { transform:translateY(-7px); box-shadow:0 17px 25px #244b622b; }
.sp-grid article::before { content:"0" counter(sp-card); position:absolute; top:12px; right:13px; font-size:2rem; font-weight:950; line-height:1; color:#18364c1a; }
.sp-grid { counter-reset:sp-card; }
.sp-grid article { counter-increment:sp-card; }
.sp-symbol { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#d8f4f3; color:#167d98; font-size:1.7rem; }
.sp-grid h3 { margin:20px 0 7px; color:#153b63; font-size:1.3rem; line-height:1.1; }
.sp-grid h3 a { text-decoration:none; }
.sp-grid h3 a:hover,.sp-bio-link:hover { text-decoration:underline; }
.sp-grid p { margin:0; color:#4e6475; font-size:.92rem; line-height:1.55; }
.sp-bio-link { display:inline-block; align-self:flex-start; margin-top:auto; padding-top:15px; color:#17678e; font-weight:850; font-size:.9rem; }
.sp-rivals { margin-top:45px; padding:34px; border-radius:26px; background:radial-gradient(circle at 100% 0,#61477b,transparent 38%),#211d3c; color:white; }
.sp-rivals .sp-section-head { align-items:center; }
.sp-rivals .sp-kicker { color:#f7c4df; }
.sp-rivals h2,.sp-rivals .sp-section-head>p { color:#fff3fd; }
.sp-rivals .sp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sp-rivals .sp-grid article,.sp-rivals .sp-grid article:nth-child(2) { min-height:190px; transform:none; border-color:#b492c5; border-bottom-color:#9d70ad; background:linear-gradient(125deg,#fff9fe,#efe4f5); }
.sp-rivals .sp-grid article:hover { transform:translateY(-5px); }
.sp-rivals .sp-symbol { background:#eadbf2; color:#6f4a82; }
.sp-next { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:35px; padding:clamp(26px,4vw,45px); border-radius:24px; background:linear-gradient(110deg,#d0fff0,#fff0ba); }
.sp-next h2 { margin-bottom:8px; }
.sp-next p:last-child { margin-bottom:0; }
:focus-visible { outline:3px solid #f9b937; outline-offset:4px; }
@keyframes sp-orbit { to{transform:rotate(360deg)} }
@media(max-width:1040px) { .sp-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .sp-grid article:nth-child(even) { transform:none; } }
@media(max-width:700px) { .sp-header { flex-direction:column; align-items:flex-start; } .sp-hero { grid-template-columns:1fr; } .sp-poster { width:min(100%,500px); margin:auto; transform:rotate(1deg); } .sp-mission { grid-template-columns:1fr; margin:-20px 12px 0; } .sp-section-head { align-items:flex-start; flex-direction:column; } .sp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sp-rivals { padding:24px; } .sp-next { flex-direction:column; align-items:flex-start; } }
@media(max-width:470px) { .sp-grid,.sp-rivals .sp-grid { grid-template-columns:1fr; } .sp-grid article { min-height:0; } .sp-hero h1 { font-size:clamp(3rem,17vw,5rem); } }
@media(prefers-reduced-motion:reduce) { .sp-hero::after,.sp-grid article,.sp-button { animation:none; transition:none; } }