.cs-page { min-height: 100vh; overflow-x: hidden; background: #050816; color: #f8fbff; font-family: Inter, system-ui, sans-serif; }
.cs-wrap { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
.cs-hero { position: relative; padding: 128px 0 42px; overflow: hidden; border-bottom: 1px solid rgba(186,210,232,.12); background: radial-gradient(ellipse at 83% 30%,rgba(69,118,255,.17),transparent 34%),radial-gradient(ellipse at 20% 90%,rgba(45,202,214,.10),transparent 35%),linear-gradient(180deg,#091329,#050816); }
.cs-hero::before { content:""; position:absolute; width:640px; height:640px; right:-190px; top:-300px; border:1px solid rgba(126,240,255,.12); border-radius:50%; box-shadow:0 0 0 52px rgba(126,240,255,.025),0 0 0 118px rgba(196,181,253,.023); pointer-events:none; }
.cs-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(380px,.97fr); gap:52px; align-items:center; }
.cs-kicker { color:#9feaff; font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.cs-hero h1 { max-width:720px; margin:18px 0; font:700 clamp(44px,6.5vw,78px)/.96 "Space Grotesk",Inter,sans-serif; letter-spacing:-.06em; }
.cs-hero h1 span { color:transparent; background:linear-gradient(100deg,#fff 5%,#bbf4ff 52%,#b5a4ff); background-clip:text; -webkit-background-clip:text; }
.cs-hero p { max-width:620px; color:#c5d4e5; font-size:16px; line-height:1.8; }
.cs-hero-link { display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:12px 15px; border:1px solid rgba(126,240,255,.22); border-radius:12px; background:rgba(103,232,249,.07); color:#c7f6ff; font-size:12px; font-weight:800; }
.cs-mosaic { height:280px; display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:1fr 1fr; gap:10px; transform:rotate(-2deg); }
.cs-mosaic figure { position:relative; margin:0; overflow:hidden; border:1px solid rgba(209,228,246,.22); border-radius:18px; background:#101d32; box-shadow:0 24px 55px rgba(0,0,0,.35); }
.cs-mosaic figure:first-child { grid-row:span 2; }
.cs-mosaic img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.86) brightness(.74); }
.cs-mosaic figcaption { position:absolute; left:12px; bottom:11px; padding:6px 8px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(4,9,20,.72); color:#dff7ff; font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; backdrop-filter:blur(9px); }
.cs-work { padding:42px 0 96px; scroll-margin-top:100px; }
.cs-work-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }
.cs-work-head h2 { margin:8px 0 0; font:700 clamp(30px,4vw,44px)/1.05 "Space Grotesk",Inter,sans-serif; letter-spacing:-.045em; }
.cs-work-head p { max-width:460px; margin:0; color:#b9c9da; font-size:15px; line-height:1.7; }
.cs-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cs-card { overflow:hidden; border:1px solid rgba(186,210,232,.15); border-radius:22px; background:linear-gradient(145deg,rgba(13,25,45,.96),rgba(6,11,23,.98)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.cs-card:hover { transform:translateY(-4px); border-color:rgba(126,240,255,.36); box-shadow:0 22px 48px rgba(0,0,0,.24); }
.cs-photo { position:relative; aspect-ratio:1.72; margin:0; overflow:hidden; background:#0a1527; }
.cs-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.cs-card:hover .cs-photo img { transform:scale(1.035); }
.cs-photo::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(4,8,18,.66)); pointer-events:none; }
.cs-photo figcaption { position:absolute; z-index:1; right:12px; bottom:11px; color:rgba(239,248,255,.76); font-size:9px; }
.cs-photo figcaption a { text-decoration:underline; text-underline-offset:2px; }
.cs-copy { min-height:235px; display:flex; flex-direction:column; padding:23px 24px 22px; }
.cs-status { display:flex; align-items:center; gap:8px; color:#91e8f4; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.cs-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#5eead4; box-shadow:0 0 11px rgba(94,234,212,.5); }
.cs-copy h3 { margin:14px 0 9px; color:#f6f9ff; font:700 clamp(24px,2.7vw,31px)/1.05 "Space Grotesk",Inter,sans-serif; letter-spacing:-.04em; }
.cs-copy p { margin:0; color:#c1cfdf; font-size:15px; line-height:1.75; }
.cs-copy .cs-track { margin-top:auto; padding-top:18px; color:#8aa1bb; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.cs-footer-cta { margin-top:20px; padding:26px; border:1px solid rgba(126,240,255,.18); border-radius:20px; background:radial-gradient(ellipse at 90% 20%,rgba(106,112,240,.12),transparent 38%),linear-gradient(140deg,rgba(14,34,56,.8),rgba(9,13,28,.94)); }
.cs-footer-cta h2 { margin:0 0 8px; font:700 24px/1.1 "Space Grotesk",Inter,sans-serif; }
.cs-footer-cta p { margin:0; color:#bfd0e0; font-size:15px; line-height:1.65; }
@media(max-width:900px) { .cs-hero-grid { grid-template-columns:1fr; gap:34px; } .cs-mosaic { width:min(100%,600px); justify-self:center; } .cs-work-head { display:block; } .cs-work-head p { margin-top:12px; } }
@media(max-width:640px) { .cs-wrap { width:min(100% - 28px,1240px); } .cs-hero { padding:104px 0 30px; } .cs-mosaic { height:210px; gap:7px; } .cs-mosaic figure { border-radius:13px; } .cs-grid { grid-template-columns:1fr; gap:13px; } .cs-copy { min-height:0; padding:19px; } .cs-copy .cs-track { padding-top:14px; } .cs-work { padding:34px 0 70px; } }