:root {
  --ink: #061216;
  --ink-2: #0a1e23;
  --ink-3: #10292e;
  --panel: rgba(5, 22, 27, 0.92);
  --panel-soft: rgba(8, 30, 35, 0.78);
  --gold: #d8aa5b;
  --gold-bright: #f1cf88;
  --gold-dim: #7d5825;
  --cyan: #31cadb;
  --cyan-soft: #79dbe4;
  --cream: #f5ead3;
  --text: #d8d4ca;
  --muted: #98a6a6;
  --green: #8ddf38;
  --line: rgba(216, 170, 91, 0.28);
  --shadow: 0 28px 70px rgba(0,0,0,.42);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--text); background:
  radial-gradient(circle at 15% 20%, rgba(49,202,219,.05), transparent 26rem),
  linear-gradient(180deg, #07191d 0%, #061216 38%, #08171a 100%); font-family: var(--sans); line-height: 1.65; }
body::before { content:""; position: fixed; inset: 0; pointer-events:none; opacity:.26; z-index:100; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.shell { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
.narrow { width: min(850px, 100%); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 999; background: var(--gold-bright); color:#111; padding:10px 16px; text-decoration:none; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(4,16,20,.9); backdrop-filter: blur(18px); border-bottom-color: var(--line); }
.nav-shell { min-height: 88px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand img { width:56px; height:58px; object-fit:cover; border-radius:50%; filter: drop-shadow(0 0 14px rgba(49,202,219,.12)); }
.brand-text { display:grid; line-height:1; text-transform:uppercase; letter-spacing:.22em; }
.brand-text strong { color:var(--cream); font-family:var(--serif); font-size:1.26rem; font-weight:600; letter-spacing:.18em; }
.brand-text span { color:var(--gold); font-size:.72rem; margin-top:7px; }
.site-nav { display:flex; align-items:center; gap:30px; }
.site-nav a { color:#c6cbc7; text-decoration:none; font-size:.79rem; text-transform:uppercase; letter-spacing:.13em; transition:color .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color:var(--gold-bright); }
.site-nav .nav-depot { border:1px solid rgba(49,202,219,.42); color:var(--cyan-soft); padding:9px 13px; border-radius:2px; }
.nav-toggle { display:none; background:none; border:0; width:40px; height:40px; padding:8px; }
.nav-toggle span:not(.sr-only) { display:block; height:1px; background:var(--gold-bright); margin:6px 0; }

.hero { min-height: 820px; position:relative; display:grid; align-items:center; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-bg { position:absolute; inset:0; background-image:url('../images/outpost-hero.jpg'); background-size:cover; background-position:center 45%; transform:scale(1.015); }
.hero-vignette { position:absolute; inset:0; background:
 linear-gradient(90deg, rgba(3,16,20,.94) 0%, rgba(3,16,20,.75) 38%, rgba(3,16,20,.18) 68%, rgba(3,16,20,.48) 100%),
 linear-gradient(180deg, rgba(3,14,17,.36), rgba(3,14,17,.12) 58%, #061216 100%); }
.hero::after { content:""; position:absolute; inset:24px; border:1px solid rgba(216,170,91,.2); pointer-events:none; }
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.55fr); gap:92px; align-items:end; padding-top:150px; padding-bottom:120px; }
.hero-copy { max-width:720px; }
.eyebrow { margin:0 0 15px; color:var(--cyan); text-transform:uppercase; letter-spacing:.2em; font-weight:700; font-size:.76rem; }
.spark { color:var(--gold-bright); margin-right:7px; }
h1,h2,h3 { color:var(--cream); font-family:var(--serif); font-weight:500; line-height:1.08; margin-top:0; }
h1 { font-size:clamp(3.9rem, 8vw, 7.3rem); letter-spacing:-.035em; margin-bottom:28px; text-shadow:0 8px 35px rgba(0,0,0,.42); }
h1 em { color:var(--gold-bright); font-weight:400; }
h2 { font-size:clamp(2.3rem, 4.2vw, 4.2rem); letter-spacing:-.025em; }
h3 { font-size:1.45rem; }
.hero-lede { max-width:680px; font-size:1.22rem; line-height:1.72; color:#e2e2d9; text-shadow:0 3px 20px #000; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:0 20px; text-decoration:none; text-transform:uppercase; letter-spacing:.11em; font-size:.76rem; font-weight:700; border:1px solid var(--line); position:relative; transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease; }
.button::before { content:""; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.04); pointer-events:none; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#07161a; background:linear-gradient(180deg, var(--gold-bright), #c78e39); border-color:#f8d997; box-shadow:0 12px 28px rgba(0,0,0,.24); }
.button-quiet { color:var(--cyan-soft); background:rgba(5,29,34,.78); border-color:rgba(49,202,219,.38); }
.hero-meta { display:flex; flex-wrap:wrap; gap:0; margin-top:35px; color:#abb7b6; text-transform:uppercase; letter-spacing:.09em; font-size:.7rem; }
.hero-meta span { display:inline-flex; align-items:center; padding-right:18px; margin-right:18px; border-right:1px solid rgba(216,170,91,.24); }
.hero-meta span:last-child { border:0; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(141,223,56,.55); margin-right:9px; }
.dispatch { align-self:end; background:linear-gradient(145deg, rgba(5,22,27,.95), rgba(5,22,27,.76)); border:1px solid rgba(216,170,91,.45); box-shadow:var(--shadow); padding:29px 30px; position:relative; }
.dispatch::after { content:""; position:absolute; inset:5px; border:1px solid rgba(216,170,91,.12); pointer-events:none; }
.dispatch-kicker { color:var(--cyan); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; margin:0 0 8px; font-weight:700; }
.dispatch h2 { font-size:2rem; margin-bottom:14px; }
.dispatch p { margin:0; color:#d3d4cd; }
.dispatch-rule { height:1px; margin:22px 0 18px; background:linear-gradient(90deg,var(--gold-dim),transparent); }
.dispatch .dispatch-note { color:#9db0ae; font-size:.83rem; }
.hero-scroll { position:absolute; z-index:3; bottom:25px; left:50%; transform:translateX(-50%); display:grid; place-items:center; color:#8fa1a0; text-transform:uppercase; letter-spacing:.18em; font-size:.62rem; }
.hero-scroll b { color:var(--gold); font-size:1.25rem; line-height:1; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateY(5px); } }

.section { padding:112px 0; position:relative; }
.section-intro { background:linear-gradient(180deg,#061216,#08191d); }
.section-intro .big-copy { color:#cdd2ce; font-family:var(--serif); font-size:clamp(1.3rem,2.3vw,1.85rem); line-height:1.65; }
.section-heading { display:grid; grid-template-columns:1.15fr .75fr; gap:60px; align-items:end; margin-bottom:50px; }
.section-heading h2 { margin-bottom:0; }
.section-heading > p { margin:0 0 12px; color:#9fb0ae; }
.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:30px 30px 34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(150deg,rgba(9,31,36,.67),rgba(5,19,23,.55)); position:relative; transition:background .3s ease, transform .3s ease; }
.feature-card:hover { background:linear-gradient(150deg,rgba(13,43,49,.85),rgba(6,23,28,.72)); transform:translateY(-3px); }
.feature-number { font-family:var(--serif); color:rgba(216,170,91,.64); font-size:.85rem; letter-spacing:.12em; margin-bottom:34px; }
.feature-card h3 { color:var(--gold-bright); }
.feature-card p { color:#aab6b4; margin-bottom:0; }

.launcher-section { overflow:hidden; background:
 radial-gradient(circle at 84% 45%, rgba(49,202,219,.07),transparent 24rem),
 linear-gradient(180deg,#07161a,#091d21); border-top:1px solid rgba(49,202,219,.08); border-bottom:1px solid var(--line); }
.launcher-grid { display:grid; grid-template-columns:.74fr 1.42fr; gap:70px; align-items:center; }
.launcher-copy h2 { margin-bottom:25px; }
.launcher-copy > p:not(.eyebrow) { color:#aebbb9; }
.check-list { list-style:none; padding:0; margin:26px 0; }
.check-list li { position:relative; padding:11px 0 11px 30px; border-bottom:1px solid rgba(216,170,91,.13); color:#d3d5d0; }
.check-list li::before { content:'✓'; position:absolute; left:0; color:var(--green); }
.text-link { color:var(--cyan-soft); text-decoration:none; text-transform:uppercase; letter-spacing:.11em; font-size:.74rem; font-weight:700; }
.launcher-frame { margin:0; padding:12px; border:1px solid rgba(216,170,91,.36); background:#041115; box-shadow:var(--shadow); position:relative; }
.launcher-frame::before { content:""; position:absolute; inset:5px; border:1px solid rgba(49,202,219,.08); pointer-events:none; }
.frame-label { padding:2px 4px 11px; color:#b9c2bd; text-transform:uppercase; letter-spacing:.11em; font-size:.66rem; }
.launcher-frame img { border:1px solid rgba(216,170,91,.22); }
.launcher-frame figcaption { padding:13px 5px 2px; color:#798b89; font-size:.72rem; }

.about-section { background:linear-gradient(180deg,#071519,#061216); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.about-card { border:1px solid var(--line); background:linear-gradient(145deg,rgba(9,29,34,.86),rgba(5,19,23,.69)); padding:40px; min-height:330px; position:relative; }
.about-card::before { content:""; position:absolute; width:60px; height:1px; top:0; left:40px; background:var(--cyan); box-shadow:0 0 14px rgba(49,202,219,.5); }
.about-card h2 { font-size:2.55rem; margin-bottom:20px; }
.about-card p:last-child { color:#a8b6b4; }

.depot-section { padding-top:30px; }
.depot-card { display:grid; grid-template-columns:90px 1fr auto; gap:32px; align-items:center; border:1px solid rgba(49,202,219,.25); background:linear-gradient(120deg,rgba(7,32,38,.92),rgba(5,20,24,.78)); padding:30px 34px; }
.depot-mark { width:74px; height:74px; border:1px solid var(--gold); display:grid; place-items:center; transform:rotate(45deg); color:var(--gold-bright); font:600 2rem var(--serif); box-shadow:inset 0 0 0 4px rgba(216,170,91,.08); }
.depot-mark span { transform:rotate(-45deg); }
.depot-card h2 { font-size:2rem; margin-bottom:10px; }
.depot-card p:not(.eyebrow) { margin:0; color:#9fb0ae; }
code { color:#a8e9ef; background:#031115; border:1px solid rgba(49,202,219,.16); padding:2px 6px; }

.legal-section { padding:62px 0 86px; }
.legal-card { border-top:1px solid var(--line); padding-top:34px; color:#7f8d8b; font-size:.77rem; }
.legal-card p { max-width:1040px; }
.site-footer { border-top:1px solid var(--line); background:#041013; }
.footer-inner { min-height:120px; display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:center; color:#70817e; font-size:.75rem; }
.footer-brand img { width:44px; height:46px; }
.footer-brand span { display:grid; }
.footer-brand strong { color:#c8b990; font-family:var(--serif); font-size:.95rem; font-weight:500; }
.footer-brand small { color:#5faab2; text-transform:uppercase; letter-spacing:.11em; font-size:.55rem; margin-top:3px; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero-scroll b{animation:none} }

@media (max-width: 980px) {
  .site-nav { position:absolute; top:78px; left:22px; right:22px; display:none; padding:20px; background:rgba(4,16,20,.98); border:1px solid var(--line); box-shadow:var(--shadow); }
  .site-nav.open { display:grid; gap:0; }
  .site-nav a { padding:13px 5px; border-bottom:1px solid rgba(216,170,91,.12); }
  .nav-toggle { display:block; }
  .hero { min-height:900px; }
  .hero-grid { grid-template-columns:1fr; gap:35px; padding-top:145px; }
  .hero-copy { max-width:760px; }
  .dispatch { max-width:520px; }
  .section-heading, .launcher-grid { grid-template-columns:1fr; gap:44px; }
  .launcher-frame { max-width:850px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .depot-card { grid-template-columns:70px 1fr; }
  .depot-card .button { grid-column:2; justify-self:start; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .footer-inner > p:first-of-type { display:none; }
}
@media (max-width: 680px) {
  .shell { width:min(100% - 30px,1180px); }
  .nav-shell { min-height:74px; }
  .brand img { width:45px; height:47px; }
  .brand-text strong { font-size:1.05rem; }
  .brand-text span { font-size:.62rem; }
  .hero { min-height:auto; }
  .hero::after { inset:10px; }
  .hero-bg { background-position:57% center; }
  .hero-vignette { background:linear-gradient(90deg,rgba(3,16,20,.92),rgba(3,16,20,.58)),linear-gradient(180deg,rgba(3,14,17,.34),#061216 100%); }
  .hero-grid { padding-top:135px; padding-bottom:110px; }
  h1 { font-size:clamp(3.35rem,17vw,5rem); }
  .hero-lede { font-size:1.04rem; }
  .hero-actions .button { width:100%; }
  .hero-meta { gap:9px 0; }
  .hero-meta span { width:50%; padding-right:10px; margin-right:0; border:0; }
  .dispatch { padding:24px 22px; }
  .section { padding:78px 0; }
  .section-heading { margin-bottom:34px; }
  .feature-grid, .about-grid { grid-template-columns:1fr; }
  .feature-card { min-height:230px; }
  .about-card { padding:31px 25px; min-height:0; }
  .depot-card { grid-template-columns:1fr; padding:27px 24px; }
  .depot-mark { width:58px; height:58px; }
  .depot-card .button { grid-column:auto; }
  .footer-inner { grid-template-columns:1fr; padding:30px 0; gap:16px; }
}