/* ===== Brag Systems — Design System ===== */

:root{
  --graphite:#1E2124;
  --graphite-2:#26292D;
  --graphite-3:#2F3236;
  --orange:#E59215;
  --cream:#F6F1E7;
  --silver:#A8AAA6;
  --oxide:#8B3A1F;
  --ink:#17191A;
  --border-soft:rgba(255,255,255,0.08);
  --border-soft-dark:rgba(23,25,26,0.1);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}

h1,h2,h3,h4{
  font-family:'Archivo',sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.08;
  margin:0;
}
h1{font-size:52px;}
h2{font-size:34px;}
h3{font-size:22px;}
h4{font-size:16px;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:16px;
  display:block;
}

.mono{font-family:'IBM Plex Mono',monospace;}

.btn{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:14px 28px;
  border-radius:3px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--orange);color:var(--graphite);}
.btn-primary:hover{background:#f0a133;}
.btn-outline{border-color:var(--silver);color:var(--cream);}
.btn-outline:hover{border-color:var(--cream);}
.btn-outline-dark{border-color:var(--graphite-3);color:var(--ink);}
.btn-outline-dark:hover{border-color:var(--ink);}

/* ===== Header ===== */
header{
  background:var(--graphite);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--border-soft);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  max-width:var(--max);
  margin:0 auto;
}
.brand-lockup{display:flex;align-items:center;gap:12px;}
.brand-lockup .wordmark{
  font-family:'Archivo',sans-serif;
  font-weight:800;
  font-size:20px;
  color:var(--cream);
  letter-spacing:-0.01em;
}
.brand-lockup .wordmark span{color:var(--orange);}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--silver);
  letter-spacing:0.02em;
}
.nav-links a:hover{color:var(--cream);}
.nav-links a.active{color:var(--orange);}
.nav-cta{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  background:var(--orange);
  color:var(--graphite);
  padding:10px 20px;
  border-radius:3px;
  letter-spacing:0.02em;
}
.nav-toggle{display:none;background:none;border:none;color:var(--cream);font-size:24px;cursor:pointer;}

@media (max-width:900px){
  .nav-links{
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--graphite);
    flex-direction:column;
    align-items:flex-start;
    padding:20px 32px;
    gap:18px;
    display:none;
    border-bottom:1px solid var(--border-soft);
  }
  .nav-links.open{display:flex;}
  .nav-cta{display:none;}
  .nav-toggle{display:block;}
}

/* ===== Hero ===== */
.hero{
  background:var(--graphite);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.hero-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:88px 32px 96px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.hero h1{color:var(--cream);margin-bottom:20px;}
.hero p.lead{color:var(--silver);font-size:17px;max-width:460px;margin-bottom:32px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}
.hero-diagram{width:100%;}

.hero-diagram-wrap{position:relative;width:100%;max-width:380px;margin:0 auto;aspect-ratio:1269/1299;}
.hero-diagram-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}

.dim-label{position:absolute;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--silver);white-space:nowrap;letter-spacing:0.03em;}
.dim-label.accent{color:var(--orange);}
.dim-vline{position:absolute;width:1px;background:var(--silver);}
.dim-vline.accent{background:var(--orange);}
.dim-hline{position:absolute;height:1px;background:var(--silver);}
.dim-tick-h{position:absolute;width:10px;height:1px;background:var(--silver);}
.dim-tick-h.accent{background:var(--orange);}
.dim-tick-v{position:absolute;height:10px;width:1px;background:var(--silver);}
@media (max-width:900px){
  .dim-label{font-size:9px;}
}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:56px 24px 64px;}
  h1{font-size:38px;}
  h2{font-size:26px;}
}

/* ===== Section rhythm ===== */
section{padding:88px 0;}
section.tight{padding:64px 0;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head p{color:var(--graphite-3);opacity:0.75;font-size:16px;}

.bg-graphite{background:var(--graphite);color:var(--cream);}
.bg-graphite .section-head p{color:var(--silver);opacity:1;}
.bg-cream{background:var(--cream);}
.bg-graphite-2{background:var(--graphite-2);color:var(--cream);}

/* ===== Value prop / founder ===== */
.value-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.value-grid p{font-size:17px;margin-bottom:18px;}
.value-grid .founder-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--orange);
  margin-top:20px;
}
@media (max-width:900px){.value-grid{grid-template-columns:1fr;gap:32px;}}

/* ===== Service pillars ===== */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border-soft);
  border:1px solid var(--border-soft);
}
.pillar{
  background:var(--graphite);
  padding:40px 32px;
}
.pillar .num{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--orange);
  display:block;
  margin-bottom:24px;
}
.pillar h3{color:var(--cream);margin-bottom:16px;}
.pillar ul{list-style:none;margin:0;padding:0;}
.pillar li{
  color:var(--silver);
  font-size:14px;
  padding:8px 0;
  border-top:1px solid var(--border-soft);
}
.pillar li:first-child{border-top:none;}
@media (max-width:900px){.pillars{grid-template-columns:1fr;}}

/* ===== Industries ===== */
.industry-tags{display:flex;flex-wrap:wrap;gap:12px;}
.industry-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  border:1px solid var(--graphite-3);
  color:var(--ink);
  padding:10px 18px;
  border-radius:3px;
  opacity:0.85;
}

/* ===== Stats strip ===== */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border-soft);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}
.stat{background:var(--graphite);padding:32px;text-align:left;}
.stat .num{
  font-family:'Archivo',sans-serif;
  font-weight:800;
  font-size:36px;
  color:var(--orange);
  display:block;
}
.stat .label{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--silver);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-top:8px;
  display:block;
}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr;}}

/* ===== CTA band ===== */
.cta-band{
  background:var(--graphite-2);
  border-top:2px solid var(--orange);
  border-bottom:1px solid var(--border-soft);
  color:var(--cream);
  padding:64px 0;
  text-align:center;
}
.cta-band h2{color:var(--cream);margin-bottom:16px;}
.cta-band p{max-width:520px;margin:0 auto 32px;font-size:16px;color:var(--silver);}

/* ===== Footer ===== */
footer{background:var(--graphite);color:var(--silver);padding:64px 0 32px;}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:48px;
}
.footer-grid h4{color:var(--cream);margin-bottom:18px;font-size:13px;text-transform:uppercase;letter-spacing:0.08em;font-family:'IBM Plex Mono',monospace;font-weight:500;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:10px;font-size:14px;}
.footer-grid li a:hover{color:var(--cream);}
.footer-bottom{
  border-top:1px solid var(--border-soft);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:13px;
  font-family:'IBM Plex Mono',monospace;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* ===== Divider motif (blueprint line) ===== */
.blueprint-divider{width:100%;height:auto;display:block;opacity:0.5;}