:root { --ink:#edf4f5; --ink-deep:#07111f; --muted:#91a2b3; --line:#263a4d; --paper:#07111f; --surface:#0d1c2d; --blue:#8097ff; --cyan:#86dfd0; --orange:#ffc477; --white:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { position:relative; min-height:100vh; margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
body::before,body::after { content:''; position:fixed; z-index:0; width:430px; height:430px; border-radius:50%; pointer-events:none; filter:blur(105px); opacity:.16; } body::before { top:8%; left:-175px; background:rgba(75,105,255,.34); } body::after { right:-190px; bottom:7%; background:rgba(75,202,176,.24); }
a { color:inherit; text-decoration:none; } .site-noise { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); } .site-header,main,.site-footer { position:relative; z-index:1; }
.shell { width:min(1180px,calc(100% - 64px)); margin:0 auto; } .site-header { display:flex; align-items:center; justify-content:space-between; height:92px; }.brand { display:flex; align-items:center; gap:11px; color:var(--ink); font-family:'Space Grotesk'; font-weight:600; letter-spacing:-.04em; }.brand-mark { display:flex; align-items:flex-end; gap:3px; width:19px; height:20px; }.brand-mark i { display:block; width:5px; border-radius:5px; background:var(--blue); transform:rotate(28deg); }.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:19px;background:var(--orange)}.brand-mark i:nth-child(3){height:15px;background:var(--cyan)}.main-nav { display:flex; align-items:center; gap:35px; color:var(--muted); font-size:13px; }.main-nav a{transition:color .2s}.main-nav a:hover,.main-nav .nav-active{color:var(--ink)}.main-nav span{margin-left:4px;font-size:15px}
.hero { min-height:600px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; padding:35px 0 85px; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 25px; color:var(--blue); text-transform:uppercase; letter-spacing:.12em; font:500 10px 'DM Mono',monospace; }.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(255,196,119,.14); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:'Space Grotesk',sans-serif; letter-spacing:-.065em; } h1 { max-width:620px; margin-bottom:28px; font-size:clamp(60px,7vw,98px); line-height:.92; font-weight:600; } h1 em,h2 em{color:var(--blue);font-style:normal}.hero-lede{max-width:405px;color:var(--muted);font-size:16px;line-height:1.65;margin-bottom:32px}.hero-actions{display:flex;align-items:center;gap:27px}.button{display:inline-flex;align-items:center;gap:25px;min-height:48px;padding:0 18px 0 22px;border-radius:100px;font-size:13px;font-weight:600;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(128,151,255,.2)}.button-primary{background:var(--blue);color:var(--ink-deep)}.button-primary span{font-size:20px;font-weight:400}.text-link{font-size:13px;font-weight:600}.text-link span{color:var(--blue);font-size:17px;margin-left:7px}
.hero-visual{position:relative;min-height:455px;border:1px solid rgba(149,177,197,.12);border-radius:25px;background:#102236;overflow:hidden}.hero-visual:before{content:"";position:absolute;inset:17px;border:1px solid rgba(200,220,228,.17);border-radius:19px}.orb{position:absolute;border-radius:50%;mix-blend-mode:screen}.orb-large{width:230px;height:230px;left:26%;top:28%;background:rgba(255,180,95,.68)}.orb-one{width:160px;height:160px;left:49%;top:14%;background:rgba(96,126,255,.8)}.orb-two{width:125px;height:125px;left:11%;top:57%;background:rgba(91,210,190,.78)}.orbit{position:absolute;border:1px solid rgba(199,220,230,.27);border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:410px;height:175px;left:4%;top:34%}.orbit-two{width:325px;height:155px;left:17%;top:37%;transform:rotate(57deg)}.molecule{position:absolute;color:#d3e1e6;opacity:.56}.molecule-one{left:5%;top:9%;width:142px}.molecule-two{right:2%;bottom:10%;width:157px}.visual-label{position:absolute;font:10px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#a5b6c0}.visual-label span{color:var(--blue);margin-right:8px}.label-top{top:43px;left:46px}.label-bottom{bottom:37px;right:42px}.hero-index{position:absolute;bottom:26px;left:32px;right:32px;display:flex;justify-content:space-between;color:#8fa3ae;font:10px 'DM Mono',monospace}
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;white-space:nowrap}.ticker-track{display:flex;justify-content:space-around;gap:35px;align-items:center;animation:drift 24s linear infinite;color:#a8b8c3;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.ticker b{font-size:17px;color:var(--orange);font-weight:400}@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-20%)}}
.approach{padding:130px 0 135px}.section-intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:55px}.section-intro .eyebrow{align-self:flex-start}.section-intro h2{font-size:54px;line-height:1;max-width:490px;margin:0}.section-intro h2 span{color:#71869a}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{position:relative;display:flex;min-height:275px;flex-direction:column;padding:25px 27px 22px;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;color:var(--ink-deep);isolation:isolate;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,background-color .32s cubic-bezier(.22,1,.36,1),color .28s ease,border-color .22s ease}.feature-card>:not(.card-shape){position:relative;z-index:1}.feature-card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(0,0,0,.28)}.feature-card:active,.feature-card.is-pressed{transform:translateY(0) scale(.985);background:#8097ff;color:var(--ink-deep);border-color:#b7c3ff;box-shadow:0 10px 24px rgba(0,0,0,.3)}.feature-card:focus-visible{outline:3px solid rgba(128,151,255,.62);outline-offset:4px}.feature-card-organic{background:#a95750}.feature-card-inorganic{background:#3e6598}.feature-card-physical{background:#665a9c}.feature-card-analytical{background:#197b79}.feature-card-biochem{background:#4c8a63}.feature-card-quiz{background:#4267e8;color:#f7f9ff}.feature-card p{max-width:230px;color:rgba(7,17,31,.76);font-size:13px;line-height:1.55;margin-bottom:0}.feature-card-quiz p{color:rgba(247,249,255,.78)}.feature-number{color:rgba(7,17,31,.68);font:11px 'DM Mono',monospace}.feature-card-quiz .feature-number{color:rgba(247,249,255,.7)}.feature-card h3{font-size:28px;letter-spacing:-.05em;margin:60px 0 12px}.feature-link{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:18px;border-top:1px solid rgba(7,17,31,.28);font:10px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em}.feature-card-quiz .feature-link{border-top-color:rgba(255,255,255,.35)}.feature-link b{font-size:18px;font-weight:400}
.card-shape{position:absolute;z-index:0;display:block;color:#ffd79a;opacity:.78;pointer-events:none;transition:transform .32s ease,opacity .28s ease,color .28s ease}.feature-card:hover .card-shape{opacity:.96;transform:translate(-3px,3px) rotate(4deg)}.feature-card:active .card-shape,.feature-card.is-pressed .card-shape{color:#0d1c2d;opacity:.38}.card-shape-square{top:22px;right:23px;width:51px;height:51px;border:2px solid currentColor;transform:rotate(18deg)}.card-shape-grid{top:22px;right:22px;width:72px;height:64px;background-image:radial-gradient(currentColor 1.5px,transparent 1.7px);background-size:12px 12px}.card-shape-ring{top:18px;right:25px;width:61px;height:61px;border:2px solid currentColor;border-radius:50%;box-shadow:13px 11px 0 -9px currentColor}.card-shape-cross{right:26px;bottom:31px;width:62px;height:62px}.card-shape-cross::before,.card-shape-cross::after{content:'';position:absolute;top:30px;left:0;width:62px;height:2px;background:currentColor}.card-shape-cross::after{transform:rotate(90deg)}.card-shape-diamond{top:27px;right:27px;width:48px;height:48px;border:2px solid currentColor;transform:rotate(45deg)}.card-shape-orbit{right:18px;bottom:30px;width:82px;height:38px;border:2px solid currentColor;border-radius:50%;transform:rotate(-25deg)}.card-shape-orbit::after{content:'';position:absolute;top:12px;left:34px;width:8px;height:8px;border-radius:50%;background:currentColor}
.atlas-preview{border-top:1px solid var(--line);padding:105px 0 125px;display:grid;grid-template-columns:1fr 1.25fr;gap:90px}.atlas-heading h2{font-size:54px;line-height:1;margin-bottom:25px}.atlas-heading .eyebrow{margin-bottom:28px}.atlas-note{max-width:260px;color:var(--muted);font-size:14px;line-height:1.6}.chapter-list{border-top:1px solid var(--line)}.chapter-row{display:grid;grid-template-columns:45px 1fr auto;gap:15px;align-items:center;border-bottom:1px solid var(--line);padding:24px 4px;transition:padding .2s,color .2s,background-color .25s}.chapter-row:hover{padding-left:10px;color:var(--blue);background:rgba(128,151,255,.06)}.chapter-code,.chapter-meta{font:10px 'DM Mono',monospace;text-transform:uppercase}.chapter-code{color:var(--blue)}.chapter-meta{color:#899eae}.chapter-meta b{font-size:18px;color:var(--ink);font-weight:400;margin-left:18px}.chapter-muted{color:#708294}.site-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:26px 0 35px;color:#718496;font:10px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:780px){.shell{width:calc(100% - 36px)}.site-header{height:75px}.main-nav{gap:14px;font-size:11px}.main-nav a:not(.nav-active){display:none}.hero{display:block;padding:60px 0 50px}.hero-visual{margin-top:58px;min-height:360px}.hero-lede{font-size:15px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:245px}.feature-card h3{margin-top:48px}.section-intro{display:block}.section-intro h2,.atlas-heading h2{font-size:43px}.approach{padding:85px 0}.atlas-preview{display:block;padding:75px 0 90px}.chapter-list{margin-top:55px}.chapter-row{grid-template-columns:32px 1fr}.chapter-meta{grid-column:2}.site-footer{font-size:9px;gap:15px;line-height:1.5}.site-footer span:last-child{text-align:right}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.feature-card-organic{background:var(--orange)}
body::before,body::after{display:none}
.ambient-lights{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ambient-spot{position:absolute;left:var(--spot-x,50%);top:var(--spot-y,50%);width:var(--spot-size,280px);height:var(--spot-size,280px);border-radius:50%;background:var(--spot-color,rgba(90,120,255,.07));filter:blur(var(--spot-blur,95px));opacity:.92;transform:translate(-50%,-50%);transition:left 7.5s cubic-bezier(.22,1,.36,1),top 7.5s cubic-bezier(.22,1,.36,1),width 7.5s ease,height 7.5s ease,background 7.5s ease,filter 7.5s ease}
@media(prefers-reduced-motion:reduce){.ambient-spot{transition:none}}
.feature-card-biochem{background:#4fb9a7}
.feature-card-analytical{background:#b26791}