:root {
  --bg: #050505;
  --panel: #0b0b0b;
  --panel-2: #111;
  --text: #f4f4f4;
  --muted: #a4a4a4;
  --line: rgba(255,255,255,.14);
  --bright-line: rgba(255,255,255,.3);
  --mono: "Share Tech Mono", monospace;
  --sans: "Inter", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.scanline { position: fixed; inset: 0; pointer-events: none; z-index: 19; background: linear-gradient(to bottom, transparent 50%, rgba(255,255,255,.012) 50%); background-size: 100% 4px; }
.site-header { position: fixed; top: 0; left: 0; right: 0; height: 82px; z-index: 15; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; border-bottom: 1px solid transparent; transition: .3s; }
.site-header.scrolled { background: rgba(5,5,5,.86); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--bright-line); font: 700 12px var(--mono); clip-path: polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%); }
.brand strong, .brand small { display:block; line-height: 1; }
.brand strong { letter-spacing: .28em; font-size: 14px; }
.brand small { margin-top: 5px; color: var(--muted); font: 10px var(--mono); letter-spacing: .35em; }
.main-nav { display: flex; gap: 28px; }
.main-nav a { color: #c7c7c7; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.main-nav a:hover { color:#fff; }
.menu-toggle { display:none; border:0; background:none; font: 12px var(--mono); letter-spacing:.15em; cursor:pointer; }
.hero { position: relative; min-height: 100svh; display:flex; align-items:center; overflow:hidden; border-bottom: 1px solid var(--line); }
.hero-bg { position:absolute; inset:0; background:url('assets/atlas-banner.png') center/cover no-repeat; transform:scale(1.035); animation: breathe 12s ease-in-out infinite alternate; }
.hero-vignette { position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 43%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.88) 100%), linear-gradient(0deg, #050505 0%, transparent 36%); }
.hero-content { position:relative; z-index:2; padding-top: 70px; }
.terminal-tag, .section-kicker { font: 12px var(--mono); letter-spacing:.16em; color:#d4d4d4; }
.terminal-tag { display:inline-flex; padding:9px 12px; border:1px solid var(--bright-line); background:rgba(0,0,0,.42); }
.eyebrow { margin: 36px 0 8px; font: 12px var(--mono); letter-spacing:.34em; color:#b3b3b3; }
.hero h1 { margin:0; font-size:clamp(88px, 17vw, 230px); letter-spacing:-.075em; line-height:.77; font-weight:800; text-shadow:0 0 40px rgba(255,255,255,.08); }
.hero h1 span { -webkit-text-stroke: 2px #fff; color:transparent; }
.hero-copy { max-width:680px; margin:40px 0 30px; font-size:clamp(18px,2vw,24px); line-height:1.55; color:#dadada; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { min-height:60px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--bright-line); background:transparent; cursor:pointer; text-transform:uppercase; font: 12px var(--mono); letter-spacing:.14em; transition:.2s; }
.button.primary { background:#f1f1f1; color:#050505; flex-direction:column; align-items:flex-start; min-width:260px; }
.button.primary small { margin-top:5px; opacity:.65; letter-spacing:.08em; }
.button:hover { transform:translateY(-2px); border-color:#fff; }
.button.primary:hover { background:#fff; }
.hero-meta { margin-top:50px; display:flex; gap:34px; flex-wrap:wrap; color:#bdbdbd; font:11px var(--mono); letter-spacing:.08em; }
.hero-meta b { color:#fff; margin-right:7px; }
.scroll-cue { position:absolute; bottom:26px; right:4vw; z-index:2; writing-mode:vertical-rl; font:10px var(--mono); letter-spacing:.2em; color:#888; }
.section { padding:120px 0; }
.section-kicker { margin-bottom:24px; color:#858585; }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
h2 { font-size:clamp(40px,5vw,72px); line-height:1.02; letter-spacing:-.045em; margin:0; }
.prose { color:#bdbdbd; font-size:18px; line-height:1.8; }
.prose p:first-child { margin-top:0; }
.dark-section { background:#090909; border-block:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:1.35fr .65fr; gap:70px; align-items:end; margin-bottom:55px; }
.section-head p { margin:0; color:#aaa; line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feature-card { min-height:270px; padding:34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.02),transparent); transition:.25s; }
.feature-card:hover { background:#111; transform:translateY(-3px); }
.feature-card > span { color:#777; font:11px var(--mono); }
.feature-card h3 { margin:72px 0 14px; font-size:22px; }
.feature-card p { margin:0; color:#999; line-height:1.65; }
.protocol-panel { display:grid; grid-template-columns:.85fr 1.15fr; border:1px solid var(--line); background:#080808; }
.protocol-copy { padding:58px; border-right:1px solid var(--line); }
.protocol-copy p { color:#aaa; line-height:1.7; max-width:480px; }
.text-link { display:inline-block; margin-top:25px; font:12px var(--mono); letter-spacing:.08em; border-bottom:1px solid #777; padding-bottom:6px; }
.protocol-list > div { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:30px 36px; border-bottom:1px solid var(--line); color:#b8b8b8; line-height:1.55; }
.protocol-list > div:last-child { border-bottom:0; }
.protocol-list b { font:12px var(--mono); color:#fff; }
.atlas-section { border-block:1px solid var(--line); background: radial-gradient(circle at 22% 50%, #181818 0, #080808 34%, #050505 68%); }
.atlas-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.atlas-portrait { position:relative; }
.atlas-portrait img { width:100%; display:block; border:1px solid var(--line); filter:contrast(1.08); }
.reticle { position:absolute; inset:7%; border:1px solid rgba(255,255,255,.16); border-radius:50%; animation:spin 28s linear infinite; }
.reticle:before,.reticle:after { content:""; position:absolute; background:rgba(255,255,255,.26); }
.reticle:before { width:110%; height:1px; top:50%; left:-5%; }
.reticle:after { height:110%; width:1px; left:50%; top:-5%; }
.atlas-lead { font:16px var(--mono); letter-spacing:.07em; color:#ddd; margin:26px 0; }
.atlas-copy > p:not(.atlas-lead) { color:#aaa; line-height:1.75; }
blockquote { margin:35px 0; padding:24px 0 24px 26px; border-left:1px solid #fff; font-size:22px; line-height:1.5; }
.system-lines { display:grid; gap:10px; font:11px var(--mono); color:#999; }
.system-lines b { display:inline-block; width:90px; color:#fff; }
.connect-panel { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.connect-panel > div:first-child p { color:#aaa; line-height:1.75; max-width:470px; }
.connect-actions { border-top:1px solid var(--line); }
.connection-row { width:100%; min-height:96px; display:flex; align-items:center; justify-content:space-between; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; padding:0 8px; transition:.2s; }
.connection-row:hover { padding-left:18px; background:#0d0d0d; }
.connection-row small,.connection-row strong { display:block; }
.connection-row small { margin-bottom:7px; color:#777; font:10px var(--mono); letter-spacing:.16em; }
.connection-row strong { font-size:18px; }
.connection-row em { font-style:normal; color:#aaa; font:11px var(--mono); }
.footer { min-height:130px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; color:#777; font:10px var(--mono); letter-spacing:.12em; }
.footer strong,.footer span { display:block; }
.footer strong { color:#fff; margin-bottom:8px; }
.footer-status { text-align:center; color:#aaa; }
.footer-status i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; animation:pulse 1.6s infinite; }
.footer > div:last-child { text-align:right; }
.toast { position:fixed; left:50%; bottom:28px; z-index:30; transform:translate(-50%,20px); opacity:0; padding:13px 18px; background:#f3f3f3; color:#050505; font:12px var(--mono); pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.reveal { animation: reveal .8s both; }
.delay-1 { animation-delay:.15s; }.delay-2 { animation-delay:.3s; }.delay-3 { animation-delay:.45s; }.delay-4 { animation-delay:.6s; }
@keyframes reveal { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes breathe { from{transform:scale(1.02)} to{transform:scale(1.06)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse { 50%{opacity:.35;box-shadow:0 0 3px #fff} }
@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .main-nav { position:absolute; top:82px; left:0; right:0; display:none; flex-direction:column; gap:0; background:rgba(5,5,5,.96); border-bottom:1px solid var(--line); }
  .main-nav.open { display:flex; }
  .main-nav a { padding:18px 5vw; border-top:1px solid var(--line); }
  .hero-bg { background-position:58% center; }
  .intro-grid,.section-head,.protocol-panel,.atlas-grid,.connect-panel { grid-template-columns:1fr; }
  .intro-grid,.section-head,.atlas-grid,.connect-panel { gap:38px; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .protocol-copy { border-right:0; border-bottom:1px solid var(--line); }
  .atlas-portrait { max-width:620px; }
}
@media (max-width: 600px) {
  .wrap { width:min(100% - 28px,1180px); }
  .site-header { height:70px; padding-inline:18px; }
  .main-nav { top:70px; }
  .hero-content { padding-top:80px; }
  .hero h1 { font-size:clamp(82px,27vw,142px); }
  .hero-copy { font-size:17px; margin-top:30px; }
  .hero-actions .button { width:100%; }
  .hero-meta { gap:14px 24px; }
  .section { padding:84px 0; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:225px; }
  .feature-card h3 { margin-top:50px; }
  .protocol-copy { padding:36px 25px; }
  .protocol-list > div { grid-template-columns:40px 1fr; padding:25px 22px; }
  .connect-panel { gap:30px; }
  .connection-row strong { font-size:15px; }
  .footer { grid-template-columns:1fr; text-align:center; gap:18px; padding:34px 0; }
  .footer > div:last-child { text-align:center; }
  .scroll-cue { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}