/* ============================================================
   HELTON:LABS // OBSERVATORY  —  design system
   Void / observatory / terminal / cryptic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@200..700&family=Geist+Mono:wght@300..600&display=swap');

:root{
  /* --- void palette --- */
  --void:        #05060A;
  --void-2:      #080A11;
  --panel:       rgba(255,255,255,0.018);
  --panel-2:     rgba(255,255,255,0.030);
  --hairline:    rgba(231,232,236,0.10);
  --hairline-2:  rgba(231,232,236,0.18);

  --fg:          #E7E8EC;
  --fg-dim:      #A6ABB6;
  --muted:       #6B7280;
  --faint:       #3E4452;

  /* --- accents (same L/C, hue varies) --- */
  --sig-h: 195;
  --signal:      oklch(0.84 0.12 var(--sig-h));
  --signal-dim:  oklch(0.84 0.12 var(--sig-h) / 0.55);
  --signal-glow: oklch(0.84 0.13 var(--sig-h) / 0.18);
  --violet:      oklch(0.74 0.13 295);
  --violet-dim:  oklch(0.74 0.13 295 / 0.5);

  --danger:      oklch(0.70 0.16 28);

  /* --- type --- */
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- motion intensity (driven by tweaks) --- */
  --grain-opacity: 0.045;
  --star-density: 1;

  --maxw: 1240px;
  --ease: cubic-bezier(0.22,0.61,0.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--void);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-0.01em;
  font-feature-settings:"ss01","cv01";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--signal); color:var(--void); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* ---------- atmospheric layers (fixed) ---------- */
.fx-stars{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.fx-grad{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.84 0.12 var(--sig-h) / 0.06), transparent 60%),
    radial-gradient(90% 60% at 85% 110%, oklch(0.74 0.13 295 / 0.05), transparent 55%);
}
.fx-grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 5.2s steps(5) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-4%,3%); }
  40%{ transform:translate(3%,-5%); }
  60%{ transform:translate(-2%,4%); }
  80%{ transform:translate(4%,-2%); }
}
@media (prefers-reduced-motion: reduce){
  .fx-grain{ animation:none; }
}

/* ---------- shell ---------- */
.shell{ position:relative; z-index:2; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
@media (max-width:680px){ .wrap{ padding:0 20px; } }

/* ---------- hairline grid ticks ---------- */
.tickframe{ position:relative; }
.tickframe::before,.tickframe::after{
  content:""; position:absolute; width:9px; height:9px;
  border:1px solid var(--hairline-2);
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px) saturate(120%);
  background:linear-gradient(to bottom, rgba(5,6,10,0.82), rgba(5,6,10,0.42));
  border-bottom:1px solid var(--hairline);
}
.nav-in{
  max-width:var(--maxw); margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; gap:28px;
}
@media (max-width:680px){ .nav-in{ padding:12px 20px; gap:16px; } }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .mark{ width:26px; height:26px; flex:none; }
.brand .word{
  font-family:var(--mono); font-weight:500; font-size:14px;
  letter-spacing:0.16em; color:var(--fg);
}
.brand .word .colon{ color:var(--signal); }
.brand .word .blink{ animation:blink 1.4s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0.2; } }

.nav-links{ display:flex; gap:26px; margin-left:8px; }
.nav-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em;
  color:var(--fg-dim); text-transform:uppercase; position:relative; padding:4px 0;
  transition:color .25s var(--ease);
}
.nav-links a:hover{ color:var(--fg); }
.nav-links a.active{ color:var(--signal); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--signal); transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
@media (max-width:880px){ .nav-links{ display:none; } }

.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  color:var(--fg-dim); text-transform:uppercase;
  border:1px solid var(--hairline); border-radius:100px; padding:6px 12px;
  background:var(--panel);
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 var(--signal); animation:pulse 2.6s var(--ease) infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 oklch(0.84 0.12 var(--sig-h) / 0.55); }
  70%{ box-shadow:0 0 0 7px oklch(0.84 0.12 var(--sig-h) / 0); }
  100%{ box-shadow:0 0 0 0 oklch(0.84 0.12 var(--sig-h) / 0); }
}

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--hairline-2); border-radius:2px;
  color:var(--fg); background:var(--panel); cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ border-color:var(--signal); color:var(--signal); background:var(--signal-glow); }
.btn-solid{ background:var(--signal); color:var(--void); border-color:var(--signal); }
.btn-solid:hover{ background:transparent; color:var(--signal); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

/* ---------- section scaffolding ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--signal); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:"//"; color:var(--faint); }
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted);
}
.section{ padding:120px 0; position:relative; }
.section-line{ border:0; border-top:1px solid var(--hairline); margin:0; }

h1,h2,h3{ font-weight:500; letter-spacing:-0.03em; line-height:1.02; margin:0; }
.display{
  font-size:clamp(48px,9vw,128px); font-weight:300; letter-spacing:-0.045em; line-height:0.92;
}
.h-sec{ font-size:clamp(30px,4.6vw,58px); font-weight:300; letter-spacing:-0.035em; }
.lede{ font-size:clamp(17px,1.5vw,20px); color:var(--fg-dim); line-height:1.55; max-width:62ch; font-weight:350; }

/* ---------- decode text ---------- */
.decode{ cursor:default; }
.decode .scr{ color:var(--signal); }

/* ---------- specimen / dossier card ---------- */
.card{
  position:relative; display:block;
  border:1px solid var(--hairline); background:var(--panel);
  padding:26px 24px 22px; overflow:hidden;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(120% 100% at 0% 0%, var(--signal-glow), transparent 55%);
  transition:opacity .35s var(--ease);
}
.card:hover{ border-color:var(--hairline-2); background:var(--panel-2); }
.card:hover::before{ opacity:1; }
.card .cat{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--muted);
  display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;
}
.card .cat .price{ color:var(--signal); }
.card .ttl{ font-size:24px; font-weight:400; letter-spacing:-0.02em; margin-bottom:8px; }
.card .desc{ color:var(--fg-dim); font-size:14.5px; line-height:1.55; font-weight:350; }
.card .corner{ position:absolute; top:0; right:0; width:34px; height:34px;
  border-left:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.card .go{
  margin-top:20px; font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px;
  transition:color .25s var(--ease);
}
.card:hover .go{ color:var(--signal); }
.card:hover .go .arrow{ transform:translateX(3px); }
.card .go .arrow{ transition:transform .25s var(--ease); }

/* ---------- telemetry ticker ---------- */
.ticker{
  position:fixed; bottom:0; left:0; right:0; z-index:35; height:34px;
  border-top:1px solid var(--hairline);
  background:linear-gradient(to top, rgba(5,6,10,0.92), rgba(5,6,10,0.66));
  backdrop-filter:blur(10px);
  display:flex; align-items:center; overflow:hidden;
}
.ticker-track{ display:flex; align-items:center; gap:0; white-space:nowrap;
  animation:scroll-x 46s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }
.ticker-item{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--fg-dim);
  padding:0 26px; display:inline-flex; align-items:center; gap:9px;
}
.ticker-item .lbl{ color:var(--faint); }
.ticker-item .val{ color:var(--signal); }
.ticker-item::after{ content:"·"; color:var(--faint); margin-left:26px; }
body{ padding-bottom:34px; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--hairline); padding:60px 0 50px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
.foot h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 16px; font-weight:500; }
.foot a{ color:var(--fg-dim); font-size:14px; display:block; padding:5px 0; transition:color .2s; }
.foot a:hover{ color:var(--signal); }
.foot .copy{ font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:0.06em; }
.foot-legal{ display:flex; gap:22px; }
.foot-legal a{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-dim); padding:0; transition:color .2s; }
.foot-legal a:hover{ color:var(--signal); }

/* ---------- reveal on scroll ---------- */
.rise{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rise.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; } }
/* hard safety: never leave content stuck hidden if transitions don't paint */
body.force-visible .rise{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ---------- striped image placeholder ---------- */
.shot{
  position:relative; border:1px solid var(--hairline); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(231,232,236,0.03) 0 10px, transparent 10px 20px),
    var(--void-2);
  display:flex; align-items:center; justify-content:center;
}
.shot .lab{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--hairline); padding:7px 12px; background:rgba(5,6,10,0.6); }
.shot::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, var(--signal-glow) 50%, transparent 60%);
  opacity:0; transition:opacity .4s; }
.shot:hover::after{ opacity:1; }

/* ---------- screenshot carousel ---------- */
.carousel{ position:relative; }
.carousel-frame{ position:relative; height:clamp(280px,42vw,520px); border:1px solid var(--hairline);
  background:var(--void-2); overflow:hidden; }
.carousel-frame::before,.carousel-frame::after{ content:""; position:absolute; width:10px; height:10px; z-index:6; pointer-events:none; }
.carousel-frame::before{ top:-1px; left:-1px; border:1px solid var(--hairline-2); border-right:0; border-bottom:0; }
.carousel-frame::after{ bottom:-1px; right:-1px; border:1px solid var(--hairline-2); border-left:0; border-top:0; }
.carousel-track{ display:flex; height:100%; transition:transform .55s var(--ease); will-change:transform; }
.carousel-slide{ flex:0 0 100%; height:100%; position:relative;
  background:repeating-linear-gradient(135deg, rgba(231,232,236,0.025) 0 10px, transparent 10px 20px); }
.carousel-slide image-slot{ display:block; width:100%; height:100%; color:var(--fg-dim); }
.car-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:7; width:42px; height:42px;
  border:1px solid var(--hairline-2); background:rgba(5,6,10,0.66); backdrop-filter:blur(8px);
  color:var(--fg); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.car-prev{ left:14px; } .car-next{ right:14px; }
.car-nav:hover{ border-color:var(--signal); color:var(--signal); background:rgba(5,6,10,0.85); }
.carousel-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.car-count{ font-family:var(--mono); font-size:12px; letter-spacing:0.12em; color:var(--muted); }
.car-count .car-i{ color:var(--signal); }
.carousel-dots{ display:flex; gap:9px; }
.car-dot{ width:8px; height:8px; border-radius:50%; border:1px solid var(--hairline-2); background:transparent;
  cursor:pointer; padding:0; transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.car-dot:hover{ border-color:var(--fg-dim); }
.car-dot.on{ background:var(--signal); border-color:var(--signal); }

/* ---------- legal / document layout ---------- */
.doc{ max-width:760px; }
.doc-meta{ display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint); margin-top:22px; }
.doc-meta .on{ color:var(--signal); }
.doc-sec{ padding:36px 0; border-bottom:1px solid var(--hairline); display:grid; grid-template-columns:54px 1fr; gap:22px; }
.doc-sec:last-child{ border-bottom:0; }
.doc-num{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--signal); padding-top:5px; }
.doc-sec h3{ font-size:22px; font-weight:400; letter-spacing:-0.02em; margin:0 0 14px; }
.doc-sec p{ color:var(--fg-dim); font-size:15px; line-height:1.7; font-weight:350; margin:0 0 14px; max-width:60ch; }
.doc-sec p:last-child{ margin-bottom:0; }
.doc-sec ul{ margin:0 0 14px; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.doc-sec li{ color:var(--fg-dim); font-size:14.5px; line-height:1.6; font-weight:350; padding-left:20px; position:relative; }
.doc-sec li::before{ content:"//"; position:absolute; left:0; color:var(--faint); font-family:var(--mono); font-size:11px; top:3px; }
.doc-sec a{ color:var(--signal); border-bottom:1px solid var(--signal-dim); }
.doc-sec strong{ color:var(--fg); font-weight:500; }
@media (max-width:560px){ .doc-sec{ grid-template-columns:1fr; gap:8px; } .doc-num{ padding-top:0; } }
.doc-callout{ border:1px solid var(--signal-dim); background:var(--signal-glow); padding:24px 26px; margin-top:34px; }
.doc-callout h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--signal); margin:0 0 10px; font-weight:500; }
.doc-callout p{ margin:0; color:var(--fg-dim); font-size:15px; line-height:1.7; font-weight:350; }
.doc-sub{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg); margin:18px 0 12px; font-weight:500; }
.doc-contact{ display:flex; flex-direction:column; gap:7px; font-family:var(--mono); font-size:13px; color:var(--fg-dim); }
.doc-contact span b{ color:var(--faint); font-weight:400; display:inline-block; width:90px; text-transform:uppercase; font-size:11px; letter-spacing:0.1em; }
.doc-contact a{ color:var(--signal); border-bottom:1px solid var(--signal-dim); }
/* per-product legal link row on dossiers */
.legal-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.legal-links a{ font-family:var(--mono); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--hairline); padding:8px 13px; transition:color .2s var(--ease), border-color .2s var(--ease); }
.legal-links a:hover{ color:var(--signal); border-color:var(--signal-dim); }