/* ============================================
   STRATAFORGE3 — Shared Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Core palette — locked to brand banner */
  --navy-deep: #14153E;
  --navy: #1E2068;
  --navy-light: #2B2D7E;
  --panel: #15163F;
  --panel-raised: #1B1C4C;
  --panel-border: #2E2F6E;
  --panel-border-soft: #24255A;

  --text-primary: #F6F5F2;
  --text-secondary: #ACADD4;
  --text-tertiary: #6F71A3;

  --orange: #FF8A3D;
  --orange-hi: #FFB85C;
  --crimson: #C2342A;
  --ember: #E2562E;

  --critical-bg: #3A1A1C;
  --critical-text: #F0917C;
  --critical-border: #5A2A2C;
  --high-bg: #3A2A14;
  --high-text: #EFB05C;
  --high-border: #5A4322;
  --watch-bg: #1C1D4E;
  --watch-text: #9FA1D6;
  --watch-border: #2E2F6E;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 55%, #0F1030 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
a{color:inherit; text-decoration:none;}
::selection{background: var(--crimson); color: #fff;}
img,svg{display:block; max-width:100%;}

:focus-visible{outline: 2px solid var(--orange-hi); outline-offset: 3px; border-radius: 4px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}
}

.wrap{max-width: 1080px; margin: 0 auto; padding: 0 32px;}

/* ---------- Ambient hex / node background (signature element) ---------- */
.ambient-hex{
  position: fixed; top: 0; right: 0; width: 620px; height: 620px;
  pointer-events: none; z-index: 0; opacity: 0.85;
}
.ambient-nodes{
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(172,173,212,0.10) 1px, transparent 1.4px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 900px 700px at 75% 10%, black 0%, transparent 70%);
}

/* ---------- NAV ---------- */
nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(20,21,62,0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--panel-border-soft);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:78px;}
.nav-mark{display:flex; align-items:center; gap:12px;}
.nav-mark svg{width:32px; height:32px; flex-shrink:0;}
.nav-mark .wordmark{font-family:var(--serif); font-weight:700; font-size:18px; letter-spacing:0.5px; color:var(--text-primary);}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{font-size:14px; font-weight:500; color:var(--text-secondary); transition:color .15s; position:relative;}
.nav-links a:hover{color:var(--text-primary);}
.nav-links a.active{color:var(--text-primary);}
.nav-links a.active::after{
  content:''; position:absolute; bottom:-26px; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--orange), var(--crimson));
}
.nav-cta{
  border:1px solid var(--panel-border); background:rgba(255,138,61,0.06); color:var(--text-primary);
  padding:10px 20px; border-radius:7px; font-size:14px; font-weight:600; cursor:pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.nav-cta:hover{border-color:var(--orange); background:rgba(255,138,61,0.14); transform:translateY(-1px);}
.nav-toggle{display:none;}
.mobile-cta-link{display:none;}

/* ---------- Page shell ---------- */
main{position:relative; z-index:1;}
.page-hero{padding: 76px 0 56px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size:12px; color: var(--orange-hi);
  letter-spacing:0.08em; margin-bottom:24px; text-transform:uppercase;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background: var(--orange); flex-shrink:0;}

h1{
  font-family: var(--serif); font-size: 50px; line-height:1.12; font-weight:700; letter-spacing:-0.5px;
  max-width: 760px;
}
h1 .accent{color: var(--text-tertiary); font-style:italic; font-weight:600;}
.page-sub{
  margin-top:22px; font-size:18px; line-height:1.65; color: var(--text-secondary);
  max-width: 600px;
}

h2{font-family: var(--serif); font-size: 32px; font-weight:700; letter-spacing:-0.3px; line-height:1.25;}
h3{font-family: var(--serif); font-size: 20px; font-weight:600; letter-spacing:-0.1px;}

section{padding: 76px 0;}
.section-head{max-width:600px; margin-bottom:44px;}
.kicker{
  font-family:var(--mono); font-size:11.5px; color:var(--orange); letter-spacing:0.08em;
  margin-bottom:14px; display:block; text-transform:uppercase;
}
.section-head p{margin-top:14px; color:var(--text-secondary); font-size:16px; line-height:1.7;}

hr.divider{border:none; border-top:1px solid var(--panel-border-soft); position:relative; z-index:1;}

/* ---------- Buttons ---------- */
.btn-primary{
  background: linear-gradient(135deg, var(--orange) 0%, var(--crimson) 100%);
  color:#1A0E04; font-weight:700; font-size:15px; padding:14px 28px; border-radius:8px;
  border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition: transform .15s, box-shadow .15s; font-family:var(--sans);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(226,86,46,0.32);}
.btn-secondary{
  border:1px solid var(--panel-border); color:var(--text-primary); background:rgba(255,255,255,0.02);
  font-weight:600; font-size:14.5px; padding:13px 26px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition: border-color .15s, background .15s;
}
.btn-secondary:hover{border-color:var(--orange); background:rgba(255,138,61,0.06);}
.btn-ghost{
  color: var(--text-secondary); font-size:14.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.btn-ghost:hover{color:var(--text-primary);}
.hero-row{display:flex; gap:16px; margin-top:36px; align-items:center; flex-wrap:wrap;}

/* ---------- Cards / panels ---------- */
.panel{
  background: var(--panel); border:1px solid var(--panel-border-soft); border-radius:14px;
}
.stat-strip{
  margin-top:48px; display:grid; grid-template-columns: repeat(3,1fr); gap:1px;
  background: var(--panel-border-soft); border:1px solid var(--panel-border-soft); border-radius:12px; overflow:hidden;
  max-width: 760px;
}
.stat-strip div{background: var(--panel); padding:22px 24px;}
.stat-strip .num{font-family:var(--mono); font-size:22px; font-weight:500; color:var(--text-primary);}
.stat-strip .label{font-size:12.5px; color:var(--text-tertiary); margin-top:5px;}

/* ---------- Surfaces grid (risk surfaces) ---------- */
.surfaces{display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background:var(--panel-border-soft); border:1px solid var(--panel-border-soft); border-radius:14px; overflow:hidden;}
.surface{background:var(--panel); padding:34px;}
.surface .si{
  width:40px; height:40px; border-radius:9px; background:var(--panel-raised); border:1px solid var(--panel-border);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.surface .si svg{width:19px; height:19px; stroke:var(--orange-hi);}
.surface h3{margin-bottom:9px;}
.surface p{font-size:14.5px; color:var(--text-secondary); line-height:1.65;}
.surface .num{font-family:var(--mono); font-size:12px; color:var(--text-tertiary); margin-bottom:10px; display:block;}

/* ---------- Scoring table ---------- */
.scoring-wrap{ padding: 40px; }
.scoring-formula{
  font-family:var(--mono); font-size:14.5px; color:var(--text-secondary);
  background:var(--panel-raised); border:1px solid var(--panel-border); border-radius:8px;
  padding:16px 20px; margin-bottom:32px; display:inline-block;
}
.scoring-formula b{color:var(--orange-hi); font-weight:500;}
table.score-table{width:100%; border-collapse:collapse; margin-top:8px;}
table.score-table th{
  text-align:left; font-size:11.5px; font-weight:500; color:var(--text-tertiary);
  text-transform:uppercase; letter-spacing:0.05em; padding:0 0 14px; border-bottom:1px solid var(--panel-border);
}
table.score-table td{padding:16px 16px 16px 0; border-bottom:1px solid var(--panel-border-soft); font-size:14.5px; vertical-align:top;}
table.score-table tr:last-child td{border-bottom:none;}
.bucket-pill{
  display:inline-block; padding:4px 13px; border-radius:20px; font-size:12.5px; font-weight:500;
  font-family:var(--mono);
}
.bucket-critical{background:var(--critical-bg); color:var(--critical-text); border:1px solid var(--critical-border);}
.bucket-high{background:var(--high-bg); color:var(--high-text); border:1px solid var(--high-border);}
.bucket-watch{background:var(--watch-bg); color:var(--watch-text); border:1px solid var(--watch-border);}
.score-range{font-family:var(--mono); color:var(--text-secondary); font-size:13.5px;}

/* ---------- Findings / sample report ---------- */
.demo-frame{ overflow: hidden; }
.demo-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid var(--panel-border-soft); background:var(--panel-raised);
}
.demo-titlebar .tl-left span{font-family:var(--mono); font-size:12.5px; color:var(--text-tertiary);}
.demo-titlebar .tl-tag{
  font-family:var(--mono); font-size:11px; color:var(--text-tertiary); border:1px solid var(--panel-border);
  padding:3px 9px; border-radius:5px;
}
.demo-body{padding:32px;}
.demo-summary{
  display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--panel-border-soft);
  border:1px solid var(--panel-border-soft); border-radius:10px; overflow:hidden; margin-bottom:32px;
}
.demo-summary div{background:var(--panel-raised); padding:18px 20px;}
.demo-summary .num{font-family:var(--mono); font-size:22px; font-weight:500;}
.demo-summary .lbl{font-size:12px; color:var(--text-tertiary); margin-top:4px;}
.demo-summary .num.c{color:var(--critical-text);}
.demo-summary .num.h{color:var(--high-text);}
.demo-summary .num.w{color:var(--watch-text);}

.finding{
  border:1px solid var(--panel-border-soft); border-radius:10px; padding:22px 24px; margin-bottom:14px;
  background: var(--panel-raised);
}
.finding:last-child{margin-bottom:0;}
.finding-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; flex-wrap:wrap;}
.finding-head h4{font-size:15.5px; font-weight:600; letter-spacing:-0.1px; font-family:var(--sans);}
.finding-tags{display:flex; gap:8px; align-items:center; flex-shrink:0;}
.finding-score{font-family:var(--mono); font-size:12px; color:var(--text-tertiary);}
.finding p{font-size:14px; color:var(--text-secondary); line-height:1.65;}
.finding .surface-tag{font-family:var(--mono); font-size:11px; color:var(--text-tertiary); margin-bottom:10px; display:block;}
.finding .fix{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--panel-border-soft);
  font-size:13px; color:var(--text-tertiary);
}
.finding .fix b{color:var(--text-secondary); font-weight:500;}

/* ---------- Process steps ---------- */
.process-list{}
.process-item{
  display:grid; grid-template-columns: 56px 1fr; gap:24px; padding:30px 0;
  border-bottom:1px solid var(--panel-border-soft);
}
.process-item:first-child{padding-top:0;}
.process-item:last-child{border-bottom:none; padding-bottom:0;}
.process-num{
  font-family:var(--mono); font-size:13px; color:var(--orange-hi); border:1px solid var(--panel-border);
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--panel-raised);
}
.process-item h4{font-family:var(--sans); font-size:17px; font-weight:600; margin-bottom:7px;}
.process-item .days{font-family:var(--mono); font-size:12px; color:var(--text-tertiary); margin-left:10px; font-weight:400;}
.process-item p{color:var(--text-secondary); font-size:14.5px; line-height:1.65;}

/* ---------- Pricing card ---------- */
.price-card{
  padding: 44px;
  display:grid; grid-template-columns: 1fr auto; gap:40px; align-items:center;
}
.price-left p{color:var(--text-secondary); font-size:15px; line-height:1.65; max-width:440px; margin-top:12px;}
.price-right{text-align:right;}
.price-amount{font-family:var(--mono); font-size:36px; font-weight:500; color:var(--text-primary); white-space:nowrap;}
.price-amount span{font-size:16px; color:var(--text-tertiary); font-weight:400;}
.price-note{font-size:12.5px; color:var(--text-tertiary); margin-top:6px;}

/* ---------- Bio / about ---------- */
.bio-grid{display:grid; grid-template-columns: 180px 1fr; gap:40px; align-items:start;}
.bio-avatar{
  width:180px; height:180px; border-radius:14px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--crimson) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:56px; font-weight:700; color:#1A0E04;
}
.bio-grid h3{font-size:24px; margin-bottom:4px;}
.bio-role{font-family:var(--mono); font-size:13px; color:var(--orange-hi); margin-bottom:16px; display:block;}
.bio-grid p{color:var(--text-secondary); font-size:15.5px; line-height:1.75; margin-bottom:14px;}
.bio-grid p:last-child{margin-bottom:0;}

/* ---------- Contact form ---------- */
.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:start;}
.contact-direct h3{margin-bottom:14px;}
.contact-direct p{color:var(--text-secondary); font-size:15px; line-height:1.7; margin-bottom:24px;}
.contact-email{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:15px;
  color:var(--orange-hi); padding:14px 20px; border:1px solid var(--panel-border); border-radius:8px;
  background:var(--panel);
}
.contact-email:hover{border-color:var(--orange);}
.form-panel{padding:36px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:8px;}
.form-group input, .form-group textarea{
  width:100%; background:var(--panel-raised); border:1px solid var(--panel-border); border-radius:8px;
  padding:12px 14px; color:var(--text-primary); font-family:var(--sans); font-size:14.5px;
  transition: border-color .15s;
}
.form-group input:focus, .form-group textarea:focus{outline:none; border-color:var(--orange);}
.form-group textarea{resize:vertical; min-height:110px;}
.form-note{font-size:12.5px; color:var(--text-tertiary); margin-top:14px; line-height:1.6;}

/* ---------- Closing CTA ---------- */
.cta-section{text-align:center; padding:96px 0;}
.cta-section h2{font-size:36px; max-width:560px; margin:0 auto;}
.cta-section p{color:var(--text-secondary); margin:18px auto 36px; max-width:480px; font-size:16.5px;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--panel-border-soft); padding:44px 0; position:relative; z-index:1;}
footer .footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; margin-bottom:32px;}
footer .fm{display:flex; align-items:center; gap:10px;}
footer .fm svg{width:24px; height:24px;}
footer .fm .wordmark{font-family:var(--serif); font-weight:700; font-size:16px;}
footer .fm .wordmark em{font-style:normal; color:var(--orange);}
footer .ftag{font-size:13px; color:var(--text-tertiary); margin-top:8px; max-width:280px; line-height:1.6;}
footer .fcols{display:flex; gap:64px;}
footer .fcol h5{font-family:var(--mono); font-size:11px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px;}
footer .fcol a{display:block; font-size:14px; color:var(--text-secondary); margin-bottom:10px; transition:color .15s;}
footer .fcol a:hover{color:var(--text-primary);}
footer .fbottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--panel-border-soft);}
footer .fbottom span{font-size:12.5px; color:var(--text-tertiary);}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  h1{font-size:36px;}
  h2{font-size:26px;}
  .nav-mark .wordmark{font-size:14px;}
  .nav-mark svg{width:26px; height:26px;}
  nav .nav-cta{display:none;}
  .nav-links a.active::after{display:none;}
  .nav-links a.active{color:var(--orange-hi);}
  .nav-links{position:fixed; top:78px; left:0; right:0; background:var(--navy-deep); flex-direction:column;
    align-items:flex-start; padding:24px 32px; gap:20px; border-bottom:1px solid var(--panel-border-soft);
    transform:translateY(-130%); transition:transform .25s ease; z-index:90; box-shadow:0 12px 24px rgba(0,0,0,0.3);}
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:flex; align-items:center; justify-content:center; width:40px; height:40px;
    background:transparent; border:1px solid var(--panel-border); border-radius:7px; cursor:pointer; color:var(--text-primary);}
  .mobile-cta-link{
    display:inline-flex; margin-top:4px; background: linear-gradient(135deg, var(--orange) 0%, var(--crimson) 100%);
    color:#1A0E04; font-weight:700; font-size:14.5px; padding:12px 22px; border-radius:8px;
  }
  .surfaces{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr;}
  .demo-summary{grid-template-columns:repeat(2,1fr);}
  .price-card{grid-template-columns:1fr; text-align:left;}
  .price-right{text-align:left;}
  .bio-grid{grid-template-columns:1fr;}
  .bio-avatar{width:110px; height:110px; font-size:36px;}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  section{padding:56px 0;}
  .page-hero{padding:56px 0 40px;}
  .wrap{padding:0 20px;}
  footer .footer-top{flex-direction:column;}
  footer .fcols{gap:40px;}
}