@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root { --blue:#2454ff; --green:#caff00; --ink:#0a0a0a; --white:#fff; --off:#f4f2ea; --line:3px solid var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--off); color:var(--ink); font-family:Inter,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar, main, footer { max-width:1500px; margin:auto; }
.topbar { min-height:90px; padding:0 4vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:var(--line); }
.logo { display:flex; align-items:center; gap:12px; width:max-content; }
.logo span { width:45px; height:45px; display:grid; place-items:center; color:var(--white); background:var(--ink); border:2px solid var(--ink); font:400 17px/1 "Archivo Black",sans-serif; }
.logo b { font:600 10px/1.25 "IBM Plex Mono",monospace; letter-spacing:.08em; }
nav { display:flex; gap:38px; font:600 12px/1 "IBM Plex Mono",monospace; }
nav a { position:relative; }
nav a::after { content:""; width:0; position:absolute; left:0; bottom:-6px; border-bottom:2px solid var(--blue); transition:width .2s; }
nav a:hover::after { width:100%; }
.contact-pill { justify-self:end; padding:13px 17px; display:flex; gap:25px; color:var(--white); background:var(--blue); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font:600 11px/1 "IBM Plex Mono",monospace; }

.hero { min-height:755px; display:grid; grid-template-columns:1.15fr .85fr; border-bottom:var(--line); }
.hero-copy { padding:85px 4vw 70px; border-right:var(--line); }
.tag { display:inline-block; margin:0 0 35px; padding:8px 12px; background:var(--green); border:2px solid var(--ink); font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; transform:rotate(-1deg); }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:"Archivo Black",Impact,sans-serif; text-transform:uppercase; }
h1 { margin-bottom:48px; font-size:clamp(58px,7vw,105px); line-height:.83; letter-spacing:-.065em; }
mark { padding:0 .04em; color:var(--white); background:var(--blue); }
.intro-row { display:grid; grid-template-columns:1fr auto; gap:35px; align-items:end; }
.intro-row p { max-width:470px; margin:0; font-size:17px; line-height:1.6; }
.intro-row a { padding-bottom:8px; display:flex; gap:30px; border-bottom:2px solid var(--ink); font:600 11px/1 "IBM Plex Mono",monospace; }
.hero-board { min-height:620px; position:relative; overflow:hidden; background:var(--blue); }
.hero-board::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px); background-size:44px 44px; }
.board-label { position:absolute; left:30px; right:30px; top:30px; padding-bottom:12px; display:flex; justify-content:space-between; color:var(--white); border-bottom:2px solid var(--white); font:500 11px/1 "IBM Plex Mono",monospace; }
.board-label b { color:var(--green); }
.node { width:130px; height:130px; position:absolute; z-index:2; display:grid; place-content:center; text-align:center; background:var(--off); border:var(--line); border-radius:50%; box-shadow:8px 8px 0 var(--ink); animation:bob 5s ease-in-out infinite; }
.node span { margin-bottom:9px; font:500 10px/1 "IBM Plex Mono",monospace; }
.node b { font:400 17px/1 "Archivo Black",sans-serif; }
.n1 { left:9%; top:24%; }
.n2 { right:8%; top:43%; background:var(--green); animation-delay:-1.5s; }
.n3 { left:20%; bottom:9%; background:var(--white); animation-delay:-3s; }
.wire { height:3px; position:absolute; z-index:1; background:var(--ink); transform-origin:left; }
.w1 { width:61%; left:23%; top:38%; transform:rotate(21deg); }
.w2 { width:47%; left:29%; top:59%; transform:rotate(-27deg); }
.cross { position:absolute; color:var(--green); font:400 55px/1 "Archivo Black",sans-serif; }
.c1 { right:8%; top:19%; transform:rotate(14deg); }
.c2 { left:8%; bottom:6%; color:var(--white); }
.board-note { position:absolute; right:28px; bottom:30px; color:var(--white); text-align:right; font:600 10px/1.45 "IBM Plex Mono",monospace; }

.ticker { overflow:hidden; color:var(--white); background:var(--ink); border-bottom:var(--line); }
.ticker div { min-width:max-content; padding:17px 0; font:400 16px/1 "Archivo Black",sans-serif; letter-spacing:.04em; word-spacing:16px; }
.ticker i { color:var(--green); font-style:normal; }
.section { padding:120px 4vw; }
.section-id { font:600 11px/1 "IBM Plex Mono",monospace; letter-spacing:.05em; }
.about { display:grid; grid-template-columns:.55fr 1.45fr .65fr; gap:5vw; border-bottom:var(--line); }
.about h2,.focus h2,.method h2,.contact h2 { margin:0; font-size:clamp(44px,5vw,78px); line-height:.96; letter-spacing:-.045em; }
.about h2 em { color:var(--blue); font-style:normal; }
.about-main p { max-width:720px; margin:34px 0 0; font-size:18px; line-height:1.75; }
.about aside { min-height:270px; padding:25px; background:var(--green); border:var(--line); box-shadow:8px 8px 0 var(--ink); transform:rotate(2deg); }
.about aside span { display:block; padding-bottom:14px; border-bottom:2px solid var(--ink); font:600 9px/1 "IBM Plex Mono",monospace; }
.about aside b { display:block; margin:28px 0; font:400 22px/1.1 "Archivo Black",sans-serif; }
.mini-grid { width:90px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.mini-grid i { aspect-ratio:1; display:block; background:var(--ink); }
.mini-grid i:nth-child(2),.mini-grid i:nth-child(6),.mini-grid i:nth-child(8) { background:var(--white); }

.focus { background:var(--white); border-bottom:var(--line); }
.focus-heading { display:grid; grid-template-columns:.65fr 1.75fr; gap:4vw; }
.focus-grid { margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr); }
.tile { min-height:490px; padding:30px; position:relative; border:var(--line); }
.tile + .tile { border-left:0; }
.tile-blue { color:var(--white); background:var(--blue); }
.tile-green { background:var(--green); }
.tile-white { background:var(--off); }
.tile-no { font:600 11px/1 "IBM Plex Mono",monospace; }
.tile-symbol { height:190px; margin:35px 0 20px; position:relative; }
.rings i { width:125px; height:125px; position:absolute; border:3px solid var(--white); border-radius:50%; }
.rings i:nth-child(2) { left:55px; }
.rings i:nth-child(3) { left:27px; top:50px; background:var(--green); border-color:var(--ink); }
.blocks { display:grid; grid-template-columns:repeat(2,78px); grid-auto-rows:78px; gap:8px; }
.blocks i { display:block; border:3px solid var(--ink); background:var(--white); }
.blocks i:nth-child(2),.blocks i:nth-child(3) { border-radius:50%; background:var(--blue); }
.arrow { font:400 180px/.9 "Archivo Black",sans-serif; }
.tile h3 { margin-bottom:14px; font:400 25px/1 "Archivo Black",sans-serif; text-transform:uppercase; }
.tile p { max-width:360px; margin:0; line-height:1.6; }

.method { display:grid; grid-template-columns:.8fr 1.2fr; gap:7vw; border-bottom:var(--line); }
.method-title h2 { margin-top:35px; }
.method ol { margin:0; padding:0; list-style:none; border-top:var(--line); }
.method li { min-height:150px; display:grid; grid-template-columns:55px .65fr 1fr 25px; gap:25px; align-items:center; border-bottom:var(--line); }
.method li > span { font:600 11px/1 "IBM Plex Mono",monospace; }
.method li h3 { margin:0; font:400 23px/1 "Archivo Black",sans-serif; text-transform:uppercase; }
.method li p { margin:0; line-height:1.5; }
.method li b { color:var(--blue); font-size:30px; }

.contact { min-height:680px; position:relative; color:var(--white); background:var(--blue); border-bottom:var(--line); overflow:hidden; }
.contact::before { content:""; width:480px; height:480px; position:absolute; right:-90px; top:-100px; border:3px solid rgba(255,255,255,.55); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.1),0 0 0 140px rgba(255,255,255,.08); }
.contact-stamp { width:145px; height:145px; position:absolute; right:8%; bottom:10%; z-index:2; display:grid; place-content:center; text-align:center; color:var(--ink); background:var(--green); border:var(--line); border-radius:50%; box-shadow:7px 7px 0 var(--ink); font:600 10px/1.35 "IBM Plex Mono",monospace; transform:rotate(-9deg); }
.contact-stamp span { margin-top:9px; }
.contact-main { position:relative; z-index:1; }
.contact-main > p { font:600 11px/1 "IBM Plex Mono",monospace; }
.contact h2 { margin:32px 0 55px; font-size:clamp(70px,9vw,135px); }
.contact h2 mark { color:var(--ink); background:var(--green); }
.mail { display:flex; width:max-content; max-width:100%; gap:40px; padding-bottom:10px; border-bottom:3px solid var(--white); font:400 clamp(16px,2vw,26px)/1 "Archivo Black",sans-serif; overflow-wrap:anywhere; }
.contact-meta { max-width:650px; margin-top:90px; display:grid; grid-template-columns:.65fr 1.35fr; gap:40px; }
.contact-meta small,.contact-meta strong { display:block; }
.contact-meta small { margin-bottom:9px; color:var(--green); font:600 9px/1 "IBM Plex Mono",monospace; }
.contact-meta strong { font-size:13px; line-height:1.45; }
footer { min-height:115px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; gap:30px; font:500 10px/1.4 "IBM Plex Mono",monospace; }
footer p { margin:0; text-align:center; }

@keyframes bob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }
@media (max-width:980px) {
  nav { display:none; }
  .topbar { grid-template-columns:1fr auto; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { border-right:0; border-bottom:var(--line); }
  .hero-board { min-height:590px; }
  .about { grid-template-columns:1fr; }
  .about aside { max-width:380px; }
  .focus-heading,.method { grid-template-columns:1fr; }
  .focus-grid { grid-template-columns:1fr; }
  .tile + .tile { border-left:var(--line); border-top:0; }
}
@media (max-width:640px) {
  .topbar { min-height:76px; }
  .logo b { display:none; }
  .contact-pill { padding:11px; gap:12px; }
  .hero-copy { padding-top:60px; }
  h1 { font-size:clamp(54px,17vw,78px); }
  .intro-row { grid-template-columns:1fr; }
  .hero-board { min-height:510px; }
  .node { width:105px; height:105px; }
  .n1 { left:5%; }.n2 { right:4%; }.n3 { left:15%; }
  .section { padding:85px 5vw; }
  .about h2,.focus h2,.method h2 { font-size:43px; }
  .method li { padding:25px 0; grid-template-columns:35px 1fr 20px; }
  .method li p { grid-column:2/4; }
  .contact { padding-bottom:200px; }
  .contact h2 { font-size:clamp(62px,19vw,90px); }
  .mail { width:100%; font-family:"IBM Plex Mono",monospace; font-size:14px; gap:10px; justify-content:space-between; }
  .contact-meta { grid-template-columns:1fr; }
  .contact-stamp { right:7%; bottom:5%; }
  footer { padding:35px 5vw; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }