:root { --ink:#0d1114; --paper:#f4f4ef; --muted:#a8afb0; --line:rgba(244,244,239,.18); --accent:#a9f069; --blue:#95c9ff; --serif:Georgia, 'Times New Roman', serif; --sans:'Manrope',Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.page-shell { max-width:1440px; margin:auto; overflow:hidden; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 6vw; border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; letter-spacing:.1em; }
.wordmark span { display:grid; place-items:center; width:33px; height:33px; border:1px solid var(--paper); border-radius:50%; }
.wordmark i { display:block; width:5px; height:5px; border-radius:50%; background:var(--accent); }
nav { display:flex; gap:38px; color:var(--muted); font-size:12px; letter-spacing:.05em; } nav a:hover, .header-link:hover, .text-link:hover { color:var(--accent); }
.header-link { font-family:var(--mono); font-size:12px; color:var(--blue); } .header-link span, .button span { margin-left:12px; }
.hero { min-height:700px; display:grid; grid-template-columns:1.05fr .95fr; padding:104px 9vw 92px; gap:5vw; align-items:center; }
.eyebrow, .section-index, .card-code, .timeline-date, .mono-note, .visual-label { color:var(--muted); font-family:var(--mono); text-transform:uppercase; font-size:10px; letter-spacing:.14em; }
.pulse { display:inline-block; width:7px; height:7px; margin-right:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(169,240,105,.12); }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-weight:600; letter-spacing:-.07em; line-height:.96; } h1 { font-size:clamp(60px,8.2vw,122px); margin:34px 0; } h2 { font-size:clamp(43px,5.5vw,78px); margin:28px 0 47px; } h1 em,h2 em { color:var(--blue); font-family:var(--serif); font-weight:400; letter-spacing:-.08em; } h3 { letter-spacing:-.04em; line-height:1.04; }
.hero-intro { max-width:410px; color:var(--muted); font-size:16px; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:42px; }
.button { display:inline-flex; align-items:center; padding:16px 21px; font-size:12px; font-weight:700; letter-spacing:.02em; transition:transform .2s ease,background .2s ease; } .button:hover { transform:translateY(-3px); } .button-primary { background:var(--accent); color:var(--ink); } .button-light { background:var(--paper); color:var(--ink); }
.text-link { color:var(--muted); font-family:var(--mono); font-size:11px; } .text-link span { color:var(--accent); margin-left:7px; }
.hero-visual { position:relative; width:min(100%,460px); aspect-ratio:1; justify-self:end; border:1px solid var(--line); border-radius:50%; background:radial-gradient(circle at 50% 48%,#17232b 0%,#10171b 34%,transparent 35%),linear-gradient(135deg,rgba(149,201,255,.05),transparent 50%); }
.hero-visual::before,.hero-visual::after { content:''; position:absolute; inset:12%; border:1px solid rgba(169,240,105,.2); border-radius:50%; } .hero-visual::after { inset:28%; border-color:rgba(149,201,255,.25); }
.visual-label { position:absolute; z-index:2; } .label-top { top:11%; left:14%; } .label-bottom { bottom:12%; right:13%; color:var(--blue); }
.orbit { position:absolute; inset:5%; border:1px dashed rgba(244,244,239,.16); border-radius:50%; transform:rotate(-30deg); } .orbit-two { inset:18%; transform:rotate(56deg); border-color:rgba(149,201,255,.22); }
.visual-core { position:absolute; top:50%; left:50%; z-index:2; width:116px; height:116px; border:1px solid var(--accent); transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:var(--ink); box-shadow:0 0 50px rgba(169,240,105,.08); } .visual-core strong { font-size:32px; letter-spacing:-.08em; } .visual-core small { font-family:var(--mono); font-size:8px; line-height:1.2; text-align:center; color:var(--muted); margin-top:5px; }
.data-point { position:absolute; z-index:3; width:11px; height:11px; background:var(--accent); border-radius:50%; box-shadow:0 0 0 7px rgba(169,240,105,.12); } .data-point span { position:absolute; left:20px; top:-5px; font-family:var(--mono); font-size:10px; color:var(--muted); white-space:nowrap; } .point-one { top:24%; right:20%; } .point-two { bottom:25%; left:17%; background:var(--blue); box-shadow:0 0 0 7px rgba(149,201,255,.12); } .point-three { top:39%; left:11%; background:var(--paper); box-shadow:0 0 0 7px rgba(244,244,239,.1); }
.signal-strip { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 6vw; } .signal-strip>div { min-height:120px; padding:28px 30px; border-right:1px solid var(--line); } .signal-strip>div:last-child { border:0; } .strip-number { display:block; color:var(--accent); font-family:var(--mono); font-size:10px; margin-bottom:15px; } .signal-strip strong { display:block; font-size:14px; } .signal-strip small { color:var(--muted); font-size:12px; }
.section-grid { display:grid; grid-template-columns:24% 1fr; gap:5vw; padding:155px 9vw; } .section-index span { color:var(--accent); } .section-content { min-width:0; } .about-columns { display:grid; grid-template-columns:1.1fr .9fr; gap:6vw; } .about-columns p { color:var(--muted); max-width:430px; } .about-columns .large-copy { color:var(--paper); font-size:22px; line-height:1.4; letter-spacing:-.035em; }
.toolkit-section { padding:10px 9vw 155px; } .section-heading { display:grid; grid-template-columns:24% 1fr; gap:5vw; align-items:start; } .section-heading h2 { margin-top:0; } .toolkit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-left:calc(24% + 5vw); } .tool-card { min-height:320px; position:relative; padding:27px; border:1px solid var(--line); transition:border-color .25s ease,transform .25s ease; } .tool-card:hover { border-color:var(--blue); transform:translateY(-5px); } .tool-card.featured { background:var(--blue); color:var(--ink); border-color:var(--blue); } .tool-card.featured .card-code,.tool-card.featured p { color:#304553; } .tool-card h3 { font-size:31px; margin:78px 0 22px; } .tool-card p { max-width:210px; color:var(--muted); font-size:13px; } .card-mark { position:absolute; right:25px; bottom:22px; font-size:30px; font-weight:300; }
.section-heading-inline { display:flex; align-items:baseline; justify-content:space-between; gap:20px; } .section-heading-inline h2 { margin-top:0; } .timeline { border-top:1px solid var(--line); } .timeline-item { display:grid; grid-template-columns:115px 1fr; gap:40px; padding:31px 0; border-bottom:1px solid var(--line); } .timeline-date { color:var(--accent); padding-top:5px; } .timeline-item h3 { margin:0 0 5px; font-size:22px; } .timeline-item p { max-width:590px; color:var(--muted); font-size:14px; margin:9px 0 0; } .timeline-item .company { color:var(--blue); font-family:var(--mono); font-size:11px; margin:0; }
.contact-section { display:grid; grid-template-columns:24% 1fr 1fr; gap:5vw; margin:0 6vw; padding:92px 3vw; background:var(--blue); color:var(--ink); } .contact-corner { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; } .contact-section h2 { margin:27px 0 0; } .contact-section h2 em { color:var(--ink); } .contact-section .eyebrow { color:#304553; } .contact-section .pulse { background:var(--ink); box-shadow:none; } .contact-action { align-self:end; max-width:350px; } .contact-action p { color:#304553; font-size:14px; }
.site-footer { display:flex; justify-content:space-between; color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.05em; padding:30px 6vw; } .site-footer b { color:var(--accent); font-size:14px; margin:0 5px; } .site-footer a:hover { color:var(--accent); }
@media (max-width:800px) { .site-header { height:75px; padding:0 6vw; } nav { gap:16px; } .header-link { display:none; } .hero { min-height:auto; grid-template-columns:1fr; padding:78px 8vw 90px; gap:65px; } .hero-visual { justify-self:center; width:min(82vw,420px); } .signal-strip { grid-template-columns:1fr; margin:0 8vw; } .signal-strip>div { border-right:0; border-bottom:1px solid var(--line); min-height:0; padding:22px 20px; } .section-grid { grid-template-columns:1fr; gap:30px; padding:100px 8vw; } .about-columns { grid-template-columns:1fr; gap:25px; } .toolkit-section { padding:0 8vw 100px; } .section-heading { display:block; } .section-heading h2 { margin-top:28px; } .toolkit-grid { grid-template-columns:1fr; margin:0; } .tool-card { min-height:260px; } .tool-card h3 { margin-top:60px; } .section-heading-inline { display:block; } .section-heading-inline h2 { margin-bottom:17px; } .timeline-item { grid-template-columns:75px 1fr; gap:15px; } .timeline-item h3 { font-size:18px; } .contact-section { grid-template-columns:1fr; gap:40px; margin:0 6vw; padding:65px 8vw; } .contact-section h2 { font-size:49px; } .site-footer { flex-wrap:wrap; gap:14px; padding:25px 8vw; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }