:root { color-scheme:dark; --ink:#05070d; --panel:#0b1321; --line:rgba(157,207,240,.16); --blue:#20b8ff; --muted:#8fa6b9; --white:#eff8ff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ink); color:var(--white); font-family:'Space Grotesk',sans-serif; overflow-x:hidden; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 76% 4%,rgba(0,133,255,.13),transparent 27rem),linear-gradient(120deg,transparent 45%,rgba(0,121,226,.035)); z-index:-2; }
a { color:inherit; } .shell { width:min(1180px,calc(100% - 3rem)); margin:auto; }.top { min-height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { font:800 1rem 'Exo 2',sans-serif; letter-spacing:.12em; text-decoration:none; }.wordmark b { color:var(--blue); }.nav { display:flex; align-items:center; gap:1.45rem; }.nav a { color:#9db2c6; text-decoration:none; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }.nav a:hover,.nav a.active { color:white; }.menu { display:none; }
.eyebrow { margin:0 0 1.1rem; color:var(--blue); font-size:.68rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }.hero { min-height:calc(100svh - 77px); display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; padding:5.5rem 0; }.hero h1 { max-width:760px; margin:0; font:700 clamp(3rem,7vw,6.7rem)/.94 'Exo 2',sans-serif; letter-spacing:-.06em; }.hero h1 em { color:var(--blue); font-style:normal; }.lead { max-width:590px; margin:1.8rem 0 2rem; color:#b2c4d4; font-size:1.08rem; line-height:1.65; }.button { display:inline-flex; gap:.65rem; align-items:center; padding:.92rem 1.2rem; border:1px solid rgba(54,190,255,.7); background:#0b90d9; color:#fff; border-radius:3px; font-size:.73rem; font-weight:700; text-decoration:none; letter-spacing:.08em; text-transform:uppercase; transition:.2s; }.button:hover { background:#25baff; transform:translateY(-2px); }.button.ghost { background:transparent; border-color:var(--line); margin-left:.65rem; color:#d3e4f0; }.button.ghost:hover { border-color:var(--blue); }
.orb-wrap { position:relative; aspect-ratio:1; display:grid; place-items:center; }.orb { width:min(31vw,390px); aspect-ratio:1; position:relative; transform-style:preserve-3d; animation:spin 18s linear infinite; }.orb:before { content:''; position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle at 32% 25%,#a5efff 0 2%,#18aaff 13%,#064a96 43%,#020917 72%); box-shadow:inset -35px -30px 60px #000,0 0 70px rgba(0,152,255,.38); }.orb:after { content:''; position:absolute; inset:-15%; border:1px solid rgba(74,193,255,.45); border-radius:50%; transform:rotateX(68deg) rotateY(15deg); box-shadow:0 0 20px rgba(0,167,255,.25); }.orb i { position:absolute; inset:-5%; border:1px dashed rgba(77,193,255,.32); border-radius:50%; transform:rotateX(69deg) rotateY(-25deg); }.orb b { position:absolute; width:14px; aspect-ratio:1; background:#8eeaff; border-radius:50%; top:11%; left:71%; box-shadow:0 0 20px #23c7ff; }.orb-label { position:absolute; bottom:5%; padding:.6rem .8rem; border:1px solid var(--line); background:rgba(5,12,23,.78); color:#b7d7eb; font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; } @keyframes spin { to { transform:rotateY(360deg) rotateZ(360deg); } }
.section { padding:7rem 0; border-top:1px solid var(--line); }.section-head { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:3.3rem; }.section h2 { max-width:700px; margin:0; font:700 clamp(2.3rem,5vw,4.5rem)/1 'Exo 2',sans-serif; letter-spacing:-.05em; }.section-note { max-width:280px; color:var(--muted); line-height:1.55; font-size:.9rem; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }.card { min-height:230px; padding:1.65rem; background:linear-gradient(145deg,#0b1423,#070c15); position:relative; overflow:hidden; }.card:after { content:''; position:absolute; width:120px; height:120px; right:-50px; bottom:-55px; border:1px solid rgba(32,184,255,.25); border-radius:50%; }.num { color:var(--blue); font-size:.68rem; font-weight:700; letter-spacing:.12em; }.card h3 { margin:2.6rem 0 .65rem; font:600 1.35rem 'Exo 2',sans-serif; }.card p { margin:0; max-width:250px; color:var(--muted); font-size:.87rem; line-height:1.55; }.route { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:2.2rem 0; }.route p { margin:0; color:var(--muted); font-size:.9rem; }.route a { font-size:.76rem; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }.route a:hover { color:var(--blue); }
.page-hero { padding:7.4rem 0 5.4rem; max-width:860px; }.page-hero h1 { font:700 clamp(3.3rem,8vw,7.3rem)/.92 'Exo 2',sans-serif; letter-spacing:-.065em; margin:0; }.page-hero h1 span { color:var(--blue); }.page-hero p { color:#afc2d1; max-width:620px; font-size:1.08rem; line-height:1.65; margin:1.8rem 0 0; }
.split { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }.split > div { padding:2.4rem; }.split > div+div { border-left:1px solid var(--line); }.split h3 { margin:0 0 1rem; font:600 1.65rem 'Exo 2'; }.split p,.list li { color:var(--muted); line-height:1.6; }.list { margin:0; padding:0; list-style:none; }.list li { padding:.8rem 0; border-bottom:1px solid var(--line); }.list li:before { content:'↗'; color:var(--blue); margin-right:.7rem; }
.works { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }.work { min-height:270px; grid-column:span 4; padding:1.5rem; border:1px solid var(--line); background:linear-gradient(135deg,rgba(13,30,52,.9),rgba(5,8,15,.9)); display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; transition:.25s; }.work:nth-child(1),.work:nth-child(4) { grid-column:span 8; }.work:hover { border-color:var(--blue); transform:translateY(-4px); }.work .tag { color:var(--blue); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }.work h3 { font:600 1.7rem 'Exo 2'; margin:.65rem 0 0; }.quote-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.quote { padding:1.7rem; border:1px solid var(--line); background:rgba(12,23,39,.5); }.quote q { display:block; color:#dceaf4; line-height:1.55; font-size:1.02rem; }.quote cite { display:block; color:var(--blue); font-size:.7rem; font-style:normal; letter-spacing:.1em; text-transform:uppercase; margin-top:1.4rem; }
.contact { padding:5rem 0 7rem; }.contact h2 { font:700 clamp(3rem,7vw,6rem)/.95 'Exo 2'; letter-spacing:-.06em; max-width:800px; margin:0 0 2rem; }.contact h2 span { color:var(--blue); }.foot { border-top:1px solid var(--line); padding:1.6rem 0; display:flex; justify-content:space-between; color:#60798e; font-size:.7rem; }
@media(max-width:760px){.shell{width:min(100% - 2rem,1180px)}.nav{display:none}.menu{display:block;background:none;border:0;color:white;font-size:1.15rem}.hero{grid-template-columns:1fr; padding:4.3rem 0 2.5rem;gap:1.5rem}.orb-wrap{max-height:290px}.orb{width:240px}.section{padding:4.5rem 0}.section-head{display:block;margin-bottom:2rem}.section-note{margin-top:1rem}.cards,.quote-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.split>div+div{border-left:0;border-top:1px solid var(--line)}.works{grid-template-columns:1fr}.work,.work:nth-child(1),.work:nth-child(4){grid-column:span 1;min-height:210px}.page-hero{padding:5rem 0 3.5rem}.button.ghost{margin:.65rem 0 0}.foot{gap:1rem;flex-direction:column}.orb-label{bottom:0}}