:root { color-scheme: dark; --ink:#080a09; --paper:#e9e8df; --muted:rgba(233,232,223,.58); --line:rgba(233,232,223,.16); --acid:#e96b24; --mint:#7ef4c8; --violet:#9381ff; --mx:50vw; --my:50vh; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; min-width:320px; min-height:100svh; overflow-x:hidden; background:radial-gradient(circle at 62% 52%,rgba(67,89,67,.11),transparent 32%),linear-gradient(135deg,#060807 0%,#0b0d0c 48%,#070807 100%); color:var(--paper); font-family:"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
body::before { position:fixed; inset:0; z-index:4; border:1px solid rgba(255,255,255,.08); content:""; pointer-events:none; }
.atmosphere,.grain,.cursor-light { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.atmosphere { z-index:0; opacity:.62; }
.grain { z-index:3; opacity:.06; background:repeating-radial-gradient(circle at 17% 23%,rgba(255,255,255,.5) 0 1px,transparent 1px 4px); background-size:7px 9px; mix-blend-mode:soft-light; }
.cursor-light { z-index:2; background:radial-gradient(380px circle at var(--mx) var(--my),rgba(233,107,36,.065),transparent 72%); }
.shell { position:relative; z-index:1; display:grid; grid-template-rows:auto 1fr auto; width:100%; min-height:100svh; padding:34px 42px 30px; }
.masthead,.footer { display:flex; align-items:center; justify-content:space-between; font-family:Consolas,monospace; font-size:10px; font-weight:400; letter-spacing:.17em; text-transform:uppercase; }
.masthead { padding-bottom:26px; border-bottom:1px solid var(--line); }
.wordmark,.status { display:flex; align-items:center; gap:12px; }
.brand-plaque { overflow:visible; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.brand-plaque img { display:block; width:clamp(132px,12vw,174px); height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.wordmark-mark { position:relative; display:grid; width:18px; height:18px; transform:rotate(45deg); place-items:center; }
.wordmark-mark::before { position:absolute; inset:2px; border:1px solid rgba(233,232,223,.76); content:""; }
.wordmark-mark i { position:absolute; width:1px; height:4px; background:var(--paper); }
.wordmark-mark i:first-child { transform:translateY(-5px); }
.wordmark-mark i:last-child { transform:translateY(5px); }
.status { color:var(--muted); }
.status-pulse { width:5px; height:5px; border-radius:999px; background:var(--acid); box-shadow:0 0 12px rgba(233,107,36,.8); animation:pulse 3.5s ease-in-out infinite; }
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); align-items:center; gap:clamp(24px,6vw,110px); padding:clamp(58px,8vw,120px) clamp(0px,2vw,32px); }
.hero-copy { position:relative; z-index:2; }
.eyebrow { margin:0 0 clamp(28px,4vw,52px); color:var(--muted); font-family:Consolas,monospace; font-size:10px; font-weight:300; letter-spacing:.2em; }
.eyebrow span { margin:0 8px; color:var(--acid); }
h1 { margin:0; font-size:clamp(68px,10vw,158px); font-weight:300; letter-spacing:-.075em; line-height:.74; }
.serif-line { display:block; margin-left:clamp(16px,6vw,96px); font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:400; letter-spacing:-.045em; line-height:1.02; }
.period { color:var(--acid); }
.statement { max-width:390px; margin:clamp(42px,5vw,76px) 0 0 clamp(18px,6vw,98px); padding-left:22px; border-left:1px solid rgba(233,107,36,.52); color:rgba(233,232,223,.66); font-size:clamp(13px,1.2vw,16px); font-weight:300; line-height:1.75; }
.object-wrap { position:relative; display:grid; width:min(39vw,520px); aspect-ratio:1; justify-self:center; place-items:center; }
.halo { position:absolute; width:72%; height:72%; border-radius:50%; background:conic-gradient(from 210deg,rgba(126,244,200,.12),rgba(147,129,255,.15),rgba(233,107,36,.22),rgba(126,244,200,.12)); filter:blur(34px); animation:breathe 8s ease-in-out infinite alternate; }
.orbit { position:absolute; border:1px solid rgba(233,232,223,.13); border-radius:50%; }
.orbit::after { position:absolute; top:50%; left:-3px; width:5px; height:5px; border-radius:50%; background:var(--acid); box-shadow:0 0 14px var(--acid); content:""; }
.orbit-one { width:89%; height:89%; transform:rotate(-18deg) scaleY(.45); animation:orbit-one 18s linear infinite; }
.orbit-two { width:104%; height:104%; transform:rotate(62deg) scaleY(.33); animation:orbit-two 25s linear infinite reverse; }
.orbit-two::after { background:var(--violet); box-shadow:0 0 14px var(--violet); }
.monolith { position:relative; width:44%; height:70%; overflow:hidden; transform:perspective(900px) rotateY(-8deg) rotateX(2deg); border:1px solid rgba(255,255,255,.17); border-radius:48% 48% 12% 12%/17% 17% 8% 8%; background:linear-gradient(105deg,rgba(255,255,255,.15),transparent 20%,transparent 63%,rgba(255,255,255,.08)),linear-gradient(180deg,#292f2a 0%,#101411 54%,#080a08 100%); box-shadow:inset 0 0 45px rgba(255,255,255,.05),inset -18px -20px 28px rgba(0,0,0,.38),0 40px 90px rgba(0,0,0,.65),0 0 60px rgba(126,244,200,.07); animation:float 7s ease-in-out infinite; }
.monolith::before { position:absolute; inset:8%; border:1px solid rgba(255,255,255,.045); border-radius:inherit; content:""; }
.monolith::after { position:absolute; right:18%; bottom:9%; left:18%; height:1px; background:linear-gradient(90deg,transparent,var(--acid),transparent); box-shadow:0 0 16px rgba(233,107,36,.5); content:""; }
.monolith-sheen { position:absolute; top:-30%; left:-70%; width:54%; height:150%; transform:rotate(12deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent); animation:sheen 9s ease-in-out infinite; }
.monolith-core { position:absolute; top:14%; left:50%; width:2px; height:2px; border-radius:50%; background:var(--mint); box-shadow:0 0 22px 8px rgba(126,244,200,.18); }
.coordinate { position:absolute; color:rgba(233,232,223,.35); font-family:Consolas,monospace; font-size:8px; letter-spacing:.18em; }
.coordinate-n { top:7%; right:14%; }
.coordinate-e { right:1%; bottom:22%; transform:rotate(90deg); }
.footer { gap:22px; padding-top:24px; border-top:1px solid var(--line); color:rgba(233,232,223,.42); font-weight:300; }
.footer p { margin:0; white-space:nowrap; }
.footer-rule { width:100%; height:1px; background:linear-gradient(90deg,var(--line),transparent 85%); }
.reveal { opacity:0; transform:translateY(13px); animation:reveal 1.1s cubic-bezier(.22,1,.36,1) forwards; }
.masthead { animation-delay:.05s; } .eyebrow { animation-delay:.2s; } h1.reveal { animation-delay:.32s; } .statement { animation-delay:.5s; } .object-wrap { animation-delay:.4s; } .footer { animation-delay:.65s; }
@keyframes reveal { to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100% { opacity:.4; transform:scale(.8); } 50% { opacity:1; transform:scale(1.12); } }
@keyframes breathe { from { transform:scale(.93) rotate(-8deg); opacity:.66; } to { transform:scale(1.08) rotate(7deg); opacity:1; } }
@keyframes float { 0%,100% { transform:perspective(900px) rotateY(-8deg) rotateX(2deg) translateY(0); } 50% { transform:perspective(900px) rotateY(-4deg) rotateX(-1deg) translateY(-12px); } }
@keyframes orbit-one { to { transform:rotate(342deg) scaleY(.45); } }
@keyframes orbit-two { to { transform:rotate(422deg) scaleY(.33); } }
@keyframes sheen { 0%,24% { left:-70%; } 56%,100% { left:125%; } }
@media (max-width:860px) {
  .shell { padding:24px 22px 22px; }
  .hero { grid-template-columns:1fr; align-content:center; gap:26px; padding:54px 0 34px; }
  h1 { font-size:clamp(64px,19vw,112px); }
  .serif-line { margin-left:8vw; }
  .statement { margin-top:38px; margin-left:8vw; }
  .object-wrap { position:absolute; top:50%; right:-21vw; z-index:-1; width:min(74vw,460px); transform:translateY(-43%); opacity:.45; }
  .object-wrap.reveal { animation-name:reveal-mobile; }
  .hero-copy { padding:20px 0; }
}
@media (max-width:540px) {
  .masthead { align-items:flex-start; }
  .status { max-width:112px; justify-content:flex-end; text-align:right; line-height:1.5; }
  .hero { padding-top:34px; }
  .eyebrow { max-width:230px; line-height:1.7; }
  .eyebrow span { display:none; }
  h1 { font-size:clamp(58px,18vw,86px); line-height:.79; }
  .statement { max-width:290px; margin-left:3vw; }
  .footer { align-items:flex-end; font-size:8px; line-height:1.5; }
  .footer-rule { display:none; }
  .footer p:last-child { text-align:right; }
}
@keyframes reveal-mobile { from { opacity:0; transform:translateY(-40%); } to { opacity:.45; transform:translateY(-43%); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } .cursor-light { display:none; } }
