@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --ink: #07120f;
  --paper: #f2f2e9;
  --paper-2: #e7e8dc;
  --acid: #b8ff5c;
  --mint: #99f6d0;
  --line: rgba(7,18,15,.16);
  --muted: #52615b;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; left: 1rem; top: -4rem; background: var(--acid); padding: .75rem 1rem; z-index: 100; }
.skip-link:focus { top: 1rem; }

.site-header { height: 82px; padding: 0 4.5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: rgba(242,242,233,.86); backdrop-filter: blur(18px); }
.brand { display: inline-flex; gap: .7rem; align-items: center; font: 700 1rem/1 var(--sans); letter-spacing: -.03em; }
.brand > span:last-child > span { color: #72817b; font-weight: 500; margin-left: .18rem; }
.brand-mark { position: relative; width: 26px; height: 28px; display: inline-block; }
.brand-mark i { position: absolute; left: 5px; width: 21px; height: 2px; background: var(--ink); transform-origin: left; border-radius: 5px; }
.brand-mark i:nth-child(1) { top: 3px; transform: rotate(90deg); width: 22px; }
.brand-mark i:nth-child(2) { top: 14px; transform: rotate(-31deg); }
.brand-mark i:nth-child(3) { top: 14px; transform: rotate(31deg); }
nav { display: flex; gap: 2.2rem; font: 500 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
nav a { transition: opacity .2s; }
nav a:hover { opacity: .5; }
.header-cta { background: var(--ink); color: white; padding: .78rem 1rem; font: 500 .76rem/1 var(--mono); display: flex; gap: 1.2rem; align-items: center; }
.header-cta span { color: var(--acid); }

main { padding: 0 4.5vw; }
.hero { min-height: calc(100vh - 82px); display: grid; grid-template-columns: 1.05fr .95fr; gap: 6vw; align-items: center; padding: 7vw 0 6vw; }
.eyebrow, .section-number { font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 2.2rem; }
.eyebrow span { width: 8px; height: 8px; background: #63d900; border-radius: 50%; box-shadow: 0 0 0 5px rgba(99,217,0,.12); }
h1 { font-size: clamp(4.5rem, 9.2vw, 9rem); line-height: .83; letter-spacing: -.085em; font-weight: 600; margin: 0; }
h1 em, h2 em { font-family: Georgia, serif; font-weight: 400; }
h1 em { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.hero-intro { max-width: 650px; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.65; margin: 2.8rem 0 2.2rem; }
.hero-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 1rem 1.2rem; font: 500 .8rem/1 var(--mono); text-transform: uppercase; }
.button-primary { background: var(--acid); min-width: 215px; }
.button span { font-size: 1.05rem; }
.text-link { font: 500 .8rem/1 var(--mono); border-bottom: 1px solid var(--ink); padding: .5rem 0; }

.lab-visual { background: var(--ink); color: white; min-height: 600px; padding: 1.4rem; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 0 28px 90px rgba(7,18,15,.16); }
.lab-visual::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px); background-size: 42px 42px; }
.visual-topline, .signal-row { z-index: 2; position: relative; display: flex; justify-content: space-between; align-items: center; font: 400 .63rem/1 var(--mono); letter-spacing: .07em; }
.visual-topline { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 1.2rem; }
.status { color: var(--acid); display: flex; align-items: center; gap: .5rem; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.orbit-stage { flex: 1; position: relative; min-height: 490px; }
.orbit { position: absolute; border: 1px solid rgba(184,255,92,.28); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.orbit-one { width: 300px; height: 300px; animation: spin 20s linear infinite; }
.orbit-two { width: 430px; height: 430px; border-style: dashed; animation: spin 32s linear infinite reverse; }
.orbit span { width: 9px; height: 9px; border-radius: 50%; background: var(--acid); position: absolute; left: 50%; top: -5px; box-shadow: 0 0 20px var(--acid); }
.core { width: 150px; height: 150px; border-radius: 50%; background: var(--acid); color: var(--ink); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-content: center; text-align: center; box-shadow: 0 0 80px rgba(184,255,92,.25); }
.core b { font-size: 3rem; line-height: .9; letter-spacing: -.08em; }
.core small { font: 500 .6rem/1 var(--mono); letter-spacing: .25em; margin-top: .4rem; }
.node { position: absolute; font: 500 .58rem/1 var(--mono); color: var(--acid); border: 1px solid rgba(184,255,92,.45); padding: .5rem; background: var(--ink); }
.node-ai { left: 11%; top: 25%; }.node-net { right: 7%; top: 33%; }.node-infra { left: 21%; bottom: 17%; }
.signal-row { border-top: 1px solid rgba(255,255,255,.2); padding-top: 1rem; gap: .8rem; }
.signal-row b { color: var(--acid); }
.signal-bars { display: flex; gap: 4px; flex: 1; align-items: center; }
.signal-bars i { width: 2px; height: 8px; background: rgba(184,255,92,.35); animation: pulse 1.6s ease-in-out infinite; }
.signal-bars i:nth-child(3n) { height: 15px; }.signal-bars i:nth-child(4n) { animation-delay: .3s; }.signal-bars i:nth-child(5n) { animation-delay: .7s; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes pulse { 50% { height: 26px; background: var(--acid); } }

.statement { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6vw 0; display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; }
.statement p { font-size: clamp(2.1rem, 4vw, 4.7rem); line-height: 1.12; letter-spacing: -.055em; margin: 0; max-width: 1200px; }
.statement strong { font-family: Georgia, serif; font-weight: 400; font-style: italic; }
.section-heading { padding: 8vw 0 3vw; display: grid; grid-template-columns: 2fr 1fr; gap: 5vw; align-items: end; }
h2 { font-size: clamp(2.7rem, 5vw, 5.5rem); line-height: .98; letter-spacing: -.065em; font-weight: 600; margin: 1.2rem 0 0; }
.section-heading > p { color: var(--muted); line-height: 1.7; font-size: 1rem; max-width: 430px; }
.focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.focus-card { padding: 2rem 2.4rem 2.5rem; min-height: 540px; border-right: 1px solid var(--line); display: flex; flex-direction: column; position: relative; transition: background .35s, color .35s; }
.focus-card:last-child { border-right: 0; }
.focus-card:hover { background: var(--ink); color: white; }
.focus-card:hover p { color: #aebbb6; }
.focus-card:hover li { border-color: rgba(255,255,255,.18); }
.card-index { font: 400 .65rem/1 var(--mono); }
.card-icon { height: 165px; width: 165px; margin: 3rem auto 2rem; position: relative; }
.ai-icon { border: 1px solid currentColor; border-radius: 50%; }
.ai-icon::before, .ai-icon::after, .ai-icon span { content: ""; position: absolute; inset: 28%; border: 1px solid currentColor; transform: rotate(45deg); }
.ai-icon::after { inset: 41%; background: var(--acid); border: 0; }
.ai-icon i, .ai-icon b { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--acid); top: 13%; left: 47%; }
.ai-icon b { top: 77%; left: 15%; }
.net-icon span, .net-icon i, .net-icon b, .net-icon em { position: absolute; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; }
.net-icon span { left: 58px; top: 5px; }.net-icon i { left: 5px; top: 105px; }.net-icon b { right: 5px; top: 105px; }
.net-icon::before, .net-icon::after { content: ""; position: absolute; height: 1px; width: 105px; background: currentColor; top: 80px; transform: rotate(61deg); left: 10px; }
.net-icon::after { transform: rotate(-61deg); left: 51px; }
.net-icon em { width: 12px; height: 12px; left: 77px; top: 73px; background: var(--acid); border: 0; }
.infra-icon { border: 1px solid currentColor; transform: skewY(-8deg); }
.infra-icon::before, .infra-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; top: 33%; box-shadow: 0 55px 0 currentColor; }
.infra-icon span, .infra-icon i, .infra-icon b { width: 8px; height: 8px; background: var(--acid); border-radius: 50%; position: absolute; right: 15px; top: 14px; }
.infra-icon i { top: 68px; }.infra-icon b { top: 124px; }
.focus-card h3 { font-size: 1.65rem; letter-spacing: -.04em; margin: 0 0 .8rem; }
.focus-card > p { color: var(--muted); line-height: 1.6; margin: 0 0 1.8rem; transition: color .35s; }
.focus-card ul { list-style: none; padding: 0; margin: auto 0 0; }
.focus-card li { border-top: 1px solid var(--line); padding: .7rem 0; font: 400 .68rem/1 var(--mono); text-transform: uppercase; }

.method-section { margin: 9vw -4.5vw 0; padding: 8vw 4.5vw; background: var(--ink); color: white; display: grid; grid-template-columns: 1fr 1.1fr; gap: 9vw; }
.method-copy { position: sticky; top: 130px; align-self: start; }
.method-copy h2 em { color: var(--acid); }
.method-copy > p { color: #a8b6b1; line-height: 1.8; max-width: 540px; font-size: 1.05rem; margin-top: 2rem; }
.method-steps { list-style: none; padding: 0; margin: 0; }
.method-steps li { display: grid; grid-template-columns: 70px 1fr; gap: 1rem; padding: 2rem 0 3rem; border-top: 1px solid rgba(255,255,255,.2); }
.method-steps li > span { font: 400 .67rem/1 var(--mono); color: var(--acid); }
.method-steps h3 { font-size: 2rem; margin: -.5rem 0 .65rem; }
.method-steps p { color: #a8b6b1; line-height: 1.6; max-width: 480px; margin: 0; }
.directions-section { padding-bottom: 8vw; }
.direction { border-top: 1px solid var(--line); display: grid; grid-template-columns: .3fr 1.25fr 1.2fr auto; gap: 2rem; padding: 2rem 0; align-items: center; }
.direction:last-child { border-bottom: 1px solid var(--line); }
.direction > span { font: 400 .65rem/1 var(--mono); }.direction h3 { font-size: 1.4rem; margin: 0; }.direction p { color: var(--muted); line-height: 1.6; margin: 0; }.direction i { font-style: normal; font-size: 1.2rem; }
.about-section { display: grid; grid-template-columns: 1.5fr .75fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 9vw; }
.about-card, .principles { background: var(--paper); padding: 4vw; }
.about-card h2 { max-width: 800px; }
.about-card p { font-size: 1.15rem; color: var(--muted); line-height: 1.8; max-width: 800px; }
.principles > p { font: 500 .65rem/1 var(--mono); margin: 0 0 3rem; }
.principles ul { list-style: none; padding: 0; margin: 0; }
.principles li { padding: 1.2rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.principles li span { font: 400 .6rem/1 var(--mono); color: var(--muted); display: inline-block; width: 45px; }
.contact-section { background: var(--acid); margin: 0 -4.5vw; padding: 6vw 4.5vw; display: flex; justify-content: space-between; align-items: end; gap: 3rem; }
.contact-section h2 { font-size: clamp(3.5rem, 7vw, 8rem); }
.button-dark { background: var(--ink); color: white; min-width: 220px; margin-bottom: .5rem; }
footer { background: var(--ink); color: white; padding: 2rem 4.5vw; display: flex; justify-content: space-between; align-items: center; font: 400 .65rem/1 var(--mono); }
footer .brand-mark i { background: white; } footer .brand > span:last-child > span { color: var(--acid); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .orbit, .signal-bars i { animation: none; } }

@media (max-width: 900px) {
  .site-header { padding: 0 5vw; }.site-header nav { display: none; }.header-cta { padding: .75rem; }.header-cta span { display: none; }
  main { padding: 0 5vw; }.hero { grid-template-columns: 1fr; padding: 12vw 0; }.lab-visual { min-height: 520px; }.orbit-stage { min-height: 410px; }.orbit-two { width: 360px; height: 360px; }.orbit-one { width: 250px; height: 250px; }
  .statement { grid-template-columns: 1fr; padding: 12vw 0; }.section-heading { grid-template-columns: 1fr; padding: 15vw 0 7vw; }
  .focus-grid { grid-template-columns: 1fr; }.focus-card { border-right: 0; border-bottom: 1px solid var(--line); min-height: 500px; }.focus-card:last-child { border-bottom: 0; }
  .method-section { grid-template-columns: 1fr; margin: 15vw -5vw 0; padding: 15vw 5vw; }.method-copy { position: static; }.direction { grid-template-columns: 40px 1fr auto; }.direction p { grid-column: 2 / 4; }.direction i { grid-column: 3; grid-row: 1; }
  .about-section { grid-template-columns: 1fr; margin-bottom: 15vw; }.about-card, .principles { padding: 8vw; }.contact-section { margin: 0 -5vw; padding: 12vw 5vw; flex-direction: column; align-items: start; }
  footer { padding: 2rem 5vw; flex-wrap: wrap; gap: 1.5rem; } footer > p:nth-child(2) { display: none; }
}

@media (max-width: 520px) {
  .header-cta { font-size: .63rem; }.brand { font-size: .88rem; }h1 { font-size: 24vw; }.hero-intro { margin-top: 2rem; }.hero-actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }.text-link { align-self: start; }
  .lab-visual { min-height: 430px; padding: 1rem; }.orbit-stage { min-height: 330px; }.orbit-two { width: 290px; height: 290px; }.orbit-one { width: 200px; height: 200px; }.core { width: 115px; height: 115px; }.core b { font-size: 2.3rem; }.node-infra { left: 7%; }.signal-row > span { display: none; }
  .focus-card { padding: 1.5rem; }.direction { gap: 1rem; }.direction h3 { font-size: 1.15rem; }.method-steps li { grid-template-columns: 45px 1fr; }
}