:root { --ink:#101723; --panel:#172131; --red:#d81e24; --blue:#1179e8; --paper:#f7f8fa; --muted:#aab5c4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:Manrope,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header, main, footer { width:min(1180px, calc(100% - 40px)); margin:auto; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.03em; }
.brand img { width:32px; height:32px; object-fit:contain; }.brand span { white-space:nowrap; }
nav { display:flex; gap:27px; color:#c6cfda; font-size:.9rem; font-weight:700; } nav a:hover { color:#fff; }
.hero { min-height:650px; position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; overflow:hidden; }
.grid-glow { position:absolute; inset:0 -15vw 0 38%; pointer-events:none; opacity:.82; background:radial-gradient(circle at 68% 42%,rgba(17,121,232,.25),transparent 28%),linear-gradient(90deg,transparent 0 49%,rgba(255,255,255,.035) 50%,transparent 51%),linear-gradient(0deg,transparent 0 49%,rgba(255,255,255,.035) 50%,transparent 51%); background-size:auto,44px 44px,44px 44px; mask-image:linear-gradient(90deg,transparent,#000 27%,#000 85%,transparent); }
.hero-copy,.build-card { position:relative; z-index:1; }.eyebrow { color:#8fa2b9; font:500 .71rem/1.4 "DM Mono",monospace; letter-spacing:.16em; margin:0 0 17px; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(2.8rem,6vw,5.6rem); letter-spacing:-.073em; line-height:.96; margin-bottom:28px; } h1 em { color:#fff; font-style:normal; text-shadow:4px 4px 0 var(--red); }
.intro { max-width:590px; color:#c0ccda; font-size:1.1rem; line-height:1.7; }.actions { margin-top:33px; display:flex; gap:12px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; gap:20px; padding:15px 19px; font-size:.88rem; font-weight:800; border:1px solid rgba(255,255,255,.2); }.button-primary { background:var(--red); border-color:var(--red); box-shadow:8px 8px 0 rgba(17,121,232,.68); }.button-primary:hover { transform:translate(2px,2px); box-shadow:5px 5px 0 rgba(17,121,232,.68); }.button-quiet:hover { background:rgba(255,255,255,.09); }
.build-card { background:linear-gradient(145deg,#1b2a3d,#111923); border:1px solid rgba(137,180,232,.42); padding:25px; box-shadow:16px 16px 0 rgba(216,30,36,.65); transform:rotate(1.2deg); }.card-label { font:500 .72rem "DM Mono",monospace; color:#d5e7fb; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.17); letter-spacing:.1em; }.card-label span { display:inline-block; width:8px; height:8px; margin-right:9px; background:var(--red); }.stack-item { display:flex; gap:17px; align-items:center; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1); font-weight:700; }.stack-item b,.number { color:var(--blue); font:500 .75rem "DM Mono",monospace; }.build-card p { margin:19px 0 0; color:#a8bdd2; font-size:.76rem; line-height:1.5; }
.statement { padding:115px 0 95px; border-top:1px solid rgba(255,255,255,.13); } h2 { font-size:clamp(2.3rem,4vw,4rem); line-height:1.02; letter-spacing:-.06em; }.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:53px; }.principle-grid article { padding:25px 0; border-top:3px solid var(--red); }.principle-grid article:nth-child(2) { border-color:var(--blue); }.principle-grid article:nth-child(3) { border-color:#d9e3ef; }.principle-grid h3 { font-size:1.1rem; margin:14px 0 10px; }.principle-grid p,.section-heading>p { color:#aab7c6; line-height:1.65; font-size:.92rem; }
.series { padding:95px 0; border-top:1px solid rgba(255,255,255,.13); }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; }.section-heading>p { max-width:340px; margin-bottom:8px; }.series-grid { display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:15px; margin-top:35px; }.series-card { min-height:300px; padding:25px; display:flex; flex-direction:column; background:#1a2432; border:1px solid rgba(255,255,255,.1); }.series-card.featured { background:linear-gradient(135deg,#1f3047,#182333 60%,#452025); }.tag { color:#8ebeea; font:500 .68rem "DM Mono",monospace; letter-spacing:.1em; }.series-card h3 { margin:35px 0 14px; font-size:1.55rem; letter-spacing:-.04em; }.series-card p { color:#b4c2d2; font-size:.88rem; line-height:1.65; }.arrow { color:#fff; margin-top:auto; font:500 .78rem "DM Mono",monospace; }
.cta { margin:36px auto 90px; padding:70px clamp(24px,7vw,90px); text-align:center; background:var(--red); position:relative; overflow:hidden; }.cta:after { content:""; position:absolute; width:380px; height:380px; right:-130px; top:-220px; border:48px solid rgba(255,255,255,.16); transform:rotate(40deg); }.cta .eyebrow { color:#ffd7d7; }.cta h2 { position:relative; z-index:1; margin-bottom:30px; }.cta .button-primary { background:var(--ink); border-color:var(--ink); box-shadow:7px 7px 0 var(--blue); position:relative; z-index:1; }
footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px 0 42px; color:#8d9caf; font-size:.75rem; border-top:1px solid rgba(255,255,255,.13); } footer .brand { color:white; } footer .brand img { width:24px; height:24px; } footer a:last-child { color:#d4e8ff; font-weight:800; }
@media (max-width:760px) { .site-header { height:72px; }.site-header nav { display:none; }.hero { grid-template-columns:1fr; gap:42px; padding:86px 0 80px; }.build-card { max-width:430px; }.principle-grid,.series-grid { grid-template-columns:1fr; }.statement,.series { padding:70px 0; }.section-heading,footer { align-items:flex-start; flex-direction:column; }.cta { margin-bottom:55px; }.grid-glow { inset:0 -40vw 0 0; } }