/* ============================================================
   TraceAdaptive Group — Brand Stylesheet (web/brand aesthetic)
   Dark-modern executive-military fusion.
   Edit tokens in :root and the whole site updates.
   Tagline: Precision in Complexity. Clarity in Action.
   ============================================================ */

:root {
  --charcoal: #1C1F24;     /* near-black, authority */
  --charcoal-2: #2A2E35;   /* raised panels on dark */
  --steel: #6B7B8D;        /* precision, neutral */
  --steel-light: #9AA7B4;
  --bronze: #B08D57;       /* elite, legacy accent */
  --bronze-light: #C8A571;
  --paper: #F7F5F1;        /* light section bg */
  --paper-2: #FFFFFF;
  --ink: #20242A;          /* body text on light */
  --line: #E2DCD2;
  --line-dark: #3A3F47;
  --max: 1100px;
  --display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper-2);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

h1,h2,h3,.brand,.btn,.eyebrow,.kicker,.nav-links a { font-family: var(--display); }
h1,h2,h3 { letter-spacing: .5px; line-height: 1.12; text-transform: uppercase; font-weight: 600; }

/* ---------- Header ---------- */
header.site { background: var(--charcoal); border-bottom: 3px solid var(--bronze); position: sticky; top: 0; z-index: 50; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--max); margin:0 auto; }
.brand { color:#fff; text-decoration:none; font-size:1.35rem; letter-spacing:1.5px; font-weight:600; text-transform:uppercase; }
.brand span { color: var(--bronze); }
.brand small { display:block; font-family:var(--body); font-size:.58rem; letter-spacing:3px; color:var(--steel-light); text-transform:uppercase; font-weight:500; margin-top:2px; }
.nav-links a { color:#D7DCE2; text-decoration:none; margin-left:24px; font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase; border-bottom:2px solid transparent; padding-bottom:3px; }
.nav-links a:hover,.nav-links a:focus { color:var(--bronze-light); border-bottom-color:var(--bronze); }

/* ---------- Hero (dark) ---------- */
.hero { background: var(--charcoal); color:#fff; padding: 96px 0 84px; position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; right:-120px; top:-80px; width:420px; height:420px; border:1px solid var(--line-dark); border-radius:50%; opacity:.5; }
.hero::before { content:""; position:absolute; right:-40px; top:0; width:300px; height:300px; border:1px solid var(--line-dark); border-radius:50%; opacity:.35; }
.hero .wrap { position:relative; z-index:2; }
.hero .eyebrow { color:var(--bronze-light); letter-spacing:4px; font-size:.8rem; text-transform:uppercase; margin-bottom:18px; }
.hero h1 { font-size:3.2rem; color:#fff; margin-bottom:22px; max-width:880px; }
.hero h1 em { color:var(--bronze-light); font-style:normal; }
.hero p.lede { font-size:1.2rem; color:var(--steel-light); max-width:640px; line-height:1.55; font-family:var(--body); }
.hero .cta-row { margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.tagline { color:var(--bronze-light); letter-spacing:3px; font-size:.8rem; text-transform:uppercase; margin-top:30px; font-family:var(--display); }

/* ---------- Sections ---------- */
section { padding:64px 0; }
section.dark { background:var(--charcoal); color:#fff; }
section.tint { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.eyebrow { color:var(--steel); letter-spacing:3px; font-size:.78rem; text-transform:uppercase; margin-bottom:12px; font-family:var(--display); }
section.dark .eyebrow { color:var(--bronze-light); }
h2 { font-size:2rem; color:var(--ink); margin-bottom:26px; position:relative; padding-bottom:14px; }
h2::after { content:""; position:absolute; left:0; bottom:0; width:64px; height:3px; background:var(--bronze); }
section.dark h2 { color:#fff; }
h3 { color:var(--bronze); font-size:1.15rem; margin-bottom:10px; letter-spacing:1px; }
section.dark h3 { color:var(--bronze-light); }
p { margin-bottom:16px; }
.muted { color:var(--steel); }
section.dark .muted { color:var(--steel-light); }

/* ---------- Product cards ---------- */
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.card { background:var(--paper-2); border:1px solid var(--line); border-top:4px solid var(--bronze); padding:26px; text-decoration:none; color:var(--ink); display:block; transition:transform .15s, box-shadow .15s; }
.card:hover,.card:focus { transform:translateY(-3px); box-shadow:0 10px 30px rgba(28,31,36,.1); }
.card .kicker { color:var(--steel); font-size:.72rem; letter-spacing:2px; text-transform:uppercase; }
.card.flagship { border-top-color:var(--bronze); background:var(--charcoal); color:#fff; grid-column:1 / -1; display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.card.flagship .kicker { color:var(--bronze-light); }
.card.flagship h3 { color:#fff; font-size:1.6rem; }
.card.flagship .fl-body { flex:1; min-width:260px; }
.card.flagship .fl-badge { font-family:var(--display); text-transform:uppercase; letter-spacing:2px; font-size:.72rem; color:var(--charcoal); background:var(--bronze-light); padding:6px 12px; display:inline-block; }
.card h3 { margin:8px 0 10px; text-transform:none; }
.card .more { color:var(--bronze); font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; margin-top:16px; display:inline-block; font-family:var(--display); }
.card.flagship .more { color:var(--bronze-light); }

/* ---------- Tier blocks (OPTICS) ---------- */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.tier { background:var(--charcoal-2); border-top:3px solid var(--bronze); padding:24px; }
.tier .t-name { font-family:var(--display); font-size:1.3rem; color:#fff; letter-spacing:1px; }
.tier .t-time { color:var(--bronze-light); font-size:.78rem; letter-spacing:2px; text-transform:uppercase; font-family:var(--display); margin:6px 0 12px; }
.tier p { color:var(--steel-light); font-size:.95rem; margin:0; }

/* ---------- Boxes ---------- */
.insight { background:var(--paper); border-left:4px solid var(--bronze); padding:18px 22px; margin:22px 0; }
section.dark .insight { background:var(--charcoal-2); }
.feature-list { list-style:none; margin:18px 0; }
.feature-list li { padding:9px 0 9px 26px; position:relative; border-bottom:1px solid var(--line); }
section.dark .feature-list li { border-color:var(--line-dark); }
.feature-list li::before { content:"▸"; color:var(--bronze); position:absolute; left:2px; }

/* ---------- Buttons / CTA ---------- */
.btn { display:inline-block; background:var(--bronze); color:#fff; text-decoration:none; padding:14px 30px; letter-spacing:1.5px; font-size:.85rem; text-transform:uppercase; border:2px solid var(--bronze); transition:background .15s,border-color .15s; }
.btn:hover,.btn:focus { background:var(--bronze-light); border-color:var(--bronze-light); }
.btn.ghost { background:transparent; color:#fff; border-color:var(--steel); }
.btn.ghost:hover { border-color:var(--bronze-light); color:var(--bronze-light); }
.cta-band { background:var(--charcoal); color:#fff; text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band h2::after { left:50%; transform:translateX(-50%); }
.price { font-size:1.05rem; color:var(--steel-light); margin:6px 0 24px; font-family:var(--display); letter-spacing:1px; }
.price .anchor { text-decoration:line-through; opacity:.55; margin-right:10px; }
.price .now { color:var(--bronze-light); }

/* ---------- Email capture ---------- */
.capture { background:var(--charcoal-2); border:1px solid var(--line-dark); padding:30px; max-width:560px; }
.capture .row { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.capture input { flex:1; min-width:200px; background:var(--charcoal); border:1px solid var(--line-dark); color:#fff; padding:13px 14px; font-family:var(--body); font-size:.95rem; }
.capture input:focus { outline:2px solid var(--bronze); }

/* ---------- Product hero ---------- */
.prod-hero { background:var(--charcoal); color:#fff; padding:72px 0 56px; }
.prod-hero .back { color:var(--steel-light); text-decoration:none; font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; font-family:var(--display); }
.prod-hero .back:hover { color:var(--bronze-light); }
.prod-hero h1 { font-size:2.6rem; color:#fff; margin:18px 0 16px; }
.prod-hero h1 em { color:var(--bronze-light); font-style:normal; }
.prod-hero .lede { color:var(--steel-light); font-size:1.15rem; max-width:660px; font-family:var(--body); }

/* ---------- Footer ---------- */
footer.site { background:var(--charcoal); border-top:3px solid var(--bronze); padding:38px 0; color:var(--steel-light); font-size:.85rem; }
footer.site .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; }
footer.site a { color:var(--steel-light); text-decoration:none; margin-right:18px; font-family:var(--display); letter-spacing:1px; font-size:.78rem; text-transform:uppercase; }
footer.site a:hover { color:var(--bronze-light); }
.foot-tag { color:var(--bronze-light); letter-spacing:2px; font-family:var(--display); text-transform:uppercase; font-size:.78rem; }

@media (max-width:760px){
  .hero h1{font-size:2.2rem;}
  .prod-hero h1{font-size:1.8rem;}
  .cards,.cards.three,.tiers{grid-template-columns:1fr;}
  .nav{flex-direction:column;gap:10px;align-items:flex-start;}
  .nav-links a{margin:0 18px 0 0;}
  .card.flagship{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}

/* ============================================================
   IMAGE INTEGRATION
   ============================================================ */

/* ---------- Hero with background image ---------- */
.hero.has-img {
  background:
    linear-gradient(180deg, rgba(28,31,36,.82) 0%, rgba(28,31,36,.88) 55%, rgba(28,31,36,.96) 100%),
    var(--charcoal);
  background-size: cover;
  background-position: center;
}
.hero.has-img::before, .hero.has-img::after { display:none; }

.prod-hero.has-img {
  background:
    linear-gradient(180deg, rgba(28,31,36,.78) 0%, rgba(28,31,36,.9) 100%),
    var(--charcoal);
  background-size: cover;
  background-position: center;
}

/* ---------- Fixed scrolling atmospheric background ---------- */
.bg-fixed {
  position: relative;
}
.bg-fixed::before {
  content:"";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: .1;
  z-index: 0;
  pointer-events: none;
}
.bg-fixed > * { position: relative; z-index: 1; }
/* mobile: fixed attachment is janky, soften */
@media (max-width: 760px){
  .bg-fixed::before { background-attachment: scroll; opacity:.06; }
}

/* ---------- Diagram / framed image blocks ---------- */
.figure {
  margin: 28px 0;
  border: 1px solid var(--line-dark);
  background: var(--charcoal-2);
  padding: 10px;
}
.figure img { width:100%; height:auto; display:block; }
.figure.light { border-color: var(--line); background: var(--paper-2); }
.figure figcaption {
  font-family: var(--display); text-transform:uppercase; letter-spacing:1.5px;
  font-size:.72rem; color: var(--steel); padding:12px 6px 4px; text-align:center;
}
section.dark .figure figcaption { color: var(--steel-light); }

/* full-bleed diagram (no frame, for the big system map) */
.figure.bare { border:none; background:transparent; padding:0; }

/* ---------- Card grid for the A4 reference cards ---------- */
.card-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.card-gallery a { display:block; border:1px solid var(--line-dark); background:var(--charcoal-2); transition:transform .15s, box-shadow .15s; }
.card-gallery a:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.35); }
.card-gallery img { width:100%; height:auto; display:block; }
@media (max-width:760px){ .card-gallery { grid-template-columns:repeat(2,1fr); } }

/* ---------- Split feature row (image + text) ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.split img { width:100%; height:auto; display:block; border:1px solid var(--line-dark); }
@media (max-width:760px){ .split { grid-template-columns:1fr; gap:20px; } }

/* bg-fixed on light/tint sections: lower opacity, lighter blend */
section.tint.bg-fixed::before { opacity: .05; }