/* ============ TOKENS ============ */
:root{
  --ink:#004AAD;
  --ink-deep:#00214F;
  --paper:#FBFCFE;
  --paper-dim:#E9EFF9;
  --blueline:#4A7FC0;
  --blueline-soft:rgba(0,74,173,.22);
  --chalk:#FFFFFF;
  --graphite:#0B1220;
  --graphite-soft:#48566A;
  --accent:#004AAD;
  --accent-deep:#00306E;
  --green:#004AAD;
  --rust:#0B1220;
  --font-display:'Fraunces',serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --radius:2px;
}
.on-dark{ --accent:#FFFFFF; --accent-deep:#FFFFFF; --blueline:rgba(255,255,255,.55); --blueline-soft:rgba(255,255,255,.22); --green:#FFFFFF; }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--graphite);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.section{padding:6.5rem 1.5rem;}
.section-tight{padding:4rem 1.5rem;}
.wrap{max-width:1180px; margin:0 auto;}
.wrap-narrow{max-width:840px; margin:0 auto;}
@media(max-width:900px){
  .section{padding:4.5rem 1.25rem;}
}

/* ============ TYPE ============ */
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.01em; color:var(--ink);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--chalk);}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:600;}
h3{font-size:1.35rem; font-weight:600;}
p{color:var(--graphite-soft); line-height:1.65; font-size:1.02rem;}
.on-dark p{color:#C9D6E4;}
.lede{font-size:1.15rem; line-height:1.6; color:var(--graphite-soft); max-width:640px;}
.on-dark .lede{color:#C9D6E4;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-deep);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.1rem;
}
.on-dark .eyebrow{color:var(--accent);}
.eyebrow::before{content:"◇"; font-size:.7rem;}
.tick{
  display:inline-block; width:1.4rem; height:1px; background:var(--blueline);
}

/* Blueprint corner brackets — the signature motif */
.blueprint-card{
  position:relative;
  border:1px solid var(--blueline-soft);
  background:var(--chalk);
  padding:2rem 1.75rem;
}
.blueprint-card::before,
.blueprint-card::after{
  content:"";
  position:absolute;
  width:14px; height:14px;
  border-top:1.5px solid var(--accent);
  border-left:1.5px solid var(--accent);
  top:-1px; left:-1px;
}
.blueprint-card::after{
  top:auto; left:auto; bottom:-1px; right:-1px;
  border-top:none; border-left:none;
  border-bottom:1.5px solid var(--accent);
  border-right:1.5px solid var(--accent);
}
.on-dark .blueprint-card{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.16); }

/* Blueprint grid texture for dark panels */
.grid-panel{
  background-color:var(--ink);
  background-image:
    linear-gradient(var(--blueline-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueline-soft) 1px, transparent 1px);
  background-size:42px 42px;
  background-position:center;
  position:relative;
}
.grid-panel::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 0%, var(--ink) 78%);
  pointer-events:none;
}
.grid-panel > *{ position:relative; z-index:1; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.9rem 1.5rem;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:#FFFFFF; font-weight:600; border:1px solid var(--ink-deep);}
.btn-primary:hover{ background:var(--accent-deep); }
.on-dark .btn-primary{ background:#FFFFFF; color:var(--ink-deep); border-color:#FFFFFF;}
.on-dark .btn-primary:hover{ background:var(--paper-dim); }
.btn-outline{ border-color:var(--blueline); color:var(--ink); }
.on-dark .btn-outline{ border-color:rgba(255,255,255,.55); color:var(--chalk); }
.btn-outline:hover{ border-color:var(--accent); }
.on-dark .btn-outline:hover{ border-color:#FFFFFF; }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,245,236,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--blueline-soft);
}
.nav{
  max-width:1280px; margin:0 auto; padding:1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.logo{
  display:flex; align-items:center; flex-shrink:0;
}
.logo img{ height:30px; width:auto; display:block; }
.nav-links{ display:flex; gap:1.7rem; align-items:center; }
.nav-links > li > a{
  font-size:.88rem; color:var(--graphite-soft); font-weight:500;
  transition:color .15s ease;
  display:flex; align-items:center; gap:.3rem;
}
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.nav-cta .btn{ padding:.65rem 1.15rem; }
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; }
.hamburger span{ width:22px; height:2px; background:var(--ink); display:block; }

/* Dropdown (desktop) */
.has-dropdown{ position:relative; }
.dropdown-caret{ font-size:.6rem; transition:transform .15s ease; }
.has-dropdown:hover .dropdown-caret{ transform:rotate(180deg); }
.dropdown-menu{
  position:absolute; top:calc(100% + .9rem); left:50%; transform:translateX(-50%);
  background:var(--paper); border:1px solid var(--blueline-soft);
  min-width:220px; padding:.5rem; box-shadow:0 12px 28px rgba(0,20,50,.12);
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:50;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown-menu li a{
  display:block; padding:.7rem .8rem; font-size:.86rem; color:var(--graphite-soft);
  border-left:2px solid transparent;
}
.dropdown-menu li a:hover{ color:var(--ink); border-left-color:var(--accent); background:var(--paper-dim); }

@media(max-width:900px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:2rem 1.5rem; gap:0; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links > li{ width:100%; }
  .nav-links > li > a{ font-size:1.1rem; padding:.9rem 0; width:100%; justify-content:space-between; border-bottom:1px solid var(--blueline-soft); }
  .dropdown-caret{ font-size:.75rem; }
  .dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible; box-shadow:none;
    border:none; border-left:2px solid var(--blueline-soft); background:transparent;
    min-width:0; margin:0 0 .5rem .6rem; padding:0; max-height:0; overflow:hidden;
  }
  .has-dropdown.mobile-open .dropdown-menu{ max-height:400px; }
  .dropdown-menu li a{ padding:.7rem .8rem; font-size:1rem; }
  .hamburger{ display:flex; }
}


/* ============ HERO ============ */
.hero{ padding:5rem 1.5rem 3rem; }
.hero-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center;
}
@media(max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(2.3rem,4.6vw,3.6rem); margin-bottom:1.4rem; }
.hero .lede{ margin-bottom:2rem; }
.trust-row{
  margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.6rem .5rem;
}
.trust-chip{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em;
  border:1px solid var(--blueline-soft); padding:.4rem .7rem;
  color:var(--graphite-soft); display:flex; align-items:center; gap:.4rem;
}
.trust-chip::before{ content:"✓"; color:var(--green); font-weight:700; }

/* Hero schematic visual */
.schematic{
  border:1px solid var(--blueline-soft);
  background:var(--ink);
  background-image:
    linear-gradient(var(--blueline-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueline-soft) 1px, transparent 1px);
  background-size:24px 24px;
  padding:1.4rem;
  position:relative;
}
.schematic-header{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:.68rem; color:var(--blueline); letter-spacing:.05em;
  margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px dashed var(--blueline-soft);
}
.schematic-header .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; margin-right:.4rem;}
.schem-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;
}
.schem-block{
  background:rgba(251,250,245,.04);
  border:1px solid var(--blueline-soft);
  padding:.85rem .6rem;
  text-align:left;
}
.schem-block .n{ font-family:var(--font-mono); font-size:.62rem; color:var(--accent); display:block; margin-bottom:.4rem;}
.schem-block .t{ font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--chalk); }
.schem-block .bar{ height:3px; background:var(--blueline-soft); margin-top:.55rem; position:relative; overflow:hidden;}
.schem-block .bar::after{ content:""; position:absolute; left:0; top:0; bottom:0; background:var(--accent); }
.schem-block:nth-child(1) .bar::after{width:78%;}
.schem-block:nth-child(2) .bar::after{width:54%;}
.schem-block:nth-child(3) .bar::after{width:94%;}
.schem-block:nth-child(4) .bar::after{width:63%;}
.schem-block:nth-child(5) .bar::after{width:41%;}
.schem-block:nth-child(6) .bar::after{width:88%;}
.schem-block:nth-child(7) .bar::after{width:70%;}
.schem-block.wide{ grid-column:span 3; display:flex; justify-content:space-between; align-items:center;}
.schem-block.wide .t{ font-size:.78rem; color:var(--blueline); }

/* ============ VALUE STRIP ============ */
.value-strip{ background:var(--paper-dim); border-top:1px solid var(--blueline-soft); border-bottom:1px solid var(--blueline-soft);}
.value-strip .kicker{ text-align:center; margin-bottom:2.5rem; }
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media(max-width:900px){ .value-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .value-grid{ grid-template-columns:1fr; } }
.value-item h4{ font-size:1.05rem; margin-bottom:.5rem; }
.value-item p{ font-size:.92rem; }
.value-item .idx{ font-family:var(--font-mono); font-size:.7rem; color:var(--accent-deep); display:block; margin-bottom:.7rem;}

/* ============ PROBLEM ============ */
.problem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;}
@media(max-width:900px){ .problem-grid{ grid-template-columns:1fr; } }
.pain-list{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.5rem; margin-top:1.5rem;}
.pain-list li{ font-size:.94rem; color:var(--graphite-soft); padding:.5rem 0; border-bottom:1px solid var(--blueline-soft); display:flex; gap:.6rem;}
.pain-list li::before{ content:"×"; color:var(--rust); font-weight:700; }
.solution-box{
  background:var(--ink); color:var(--chalk); padding:2.2rem;
  border-left:3px solid var(--accent);
}
.solution-box p:first-child{ font-family:var(--font-display); font-size:1.3rem; color:var(--chalk); line-height:1.4; margin-bottom:1rem;}
.solution-box p{ color:#C9D6E4; }

/* ============ SOLUTIONS CARDS ============ */
.solutions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem;}
@media(max-width:960px){ .solutions-grid{ grid-template-columns:1fr; } }
.solution-card{ display:flex; flex-direction:column; height:100%;}
.solution-card .tag{ font-family:var(--font-mono); font-size:.68rem; color:var(--accent-deep); letter-spacing:.06em; margin-bottom:.8rem;}
.solution-card h3{ margin-bottom:.7rem; }
.solution-card p{ font-size:.92rem; margin-bottom:1.2rem;}
.feat-list{ margin-bottom:1.6rem; flex-grow:1;}
.feat-list li{ font-size:.85rem; color:var(--graphite-soft); padding:.3rem 0; display:flex; gap:.5rem;}
.feat-list li::before{ content:"—"; color:var(--blueline); }
.card-cta{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink); font-weight:600; border-top:1px solid var(--blueline-soft); padding-top:1rem;}
.card-cta:hover{ color:var(--accent-deep); }

/* ============ MODULAR ARCHITECTURE (signature) ============ */
.modular-section{ text-align:center; }
.modular-section .eyebrow{ justify-content:center; }
.modular-section h2{ max-width:700px; margin:0 auto 1rem; }
.modular-section > .lede{ margin:0 auto 2.5rem; text-align:center;}
.assembly{
  max-width:960px; margin:0 auto; padding:2.5rem 1.5rem;
  border:1px solid var(--blueline-soft);
  background:rgba(255,255,255,.02);
}
.assembly-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0;
}
.assembly-block{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.03em;
  padding:.9rem 1.3rem; border:1px solid var(--blueline);
  color:var(--chalk); background:rgba(92,143,192,.08);
}
.assembly-block.core{ background:var(--accent); color:var(--ink-deep); border-color:var(--accent); font-weight:700;}
.assembly-block.result{ background:var(--ink-deep); border-color:var(--accent); color:var(--accent); font-weight:700;}
.assembly-plus{ font-family:var(--font-mono); color:var(--blueline); padding:0 .7rem; font-size:1rem;}
.assembly-eq{ font-family:var(--font-mono); color:var(--accent); padding:0 .9rem; font-size:1.1rem; font-weight:700;}
@media(max-width:760px){
  .assembly-row{ flex-direction:column; }
  .assembly-plus,.assembly-eq{ padding:.4rem 0; }
}

/* ============ PLUGIN MARKETPLACE ============ */
.plugin-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem;}
@media(max-width:960px){ .plugin-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .plugin-grid{ grid-template-columns:1fr; } }
.plugin-card .tag{
  font-family:var(--font-mono); font-size:.65rem; color:var(--blueline); letter-spacing:.06em;
  display:flex; justify-content:space-between; margin-bottom:.9rem;
}
.plugin-card h3{ font-size:1.15rem; margin-bottom:.5rem;}
.plugin-card p{ font-size:.88rem; margin-bottom:1rem;}
.plugin-card .meta{ font-size:.78rem; color:var(--graphite-soft); margin-bottom:1.2rem; font-family:var(--font-mono);}
.plugin-card .meta strong{ color:var(--ink); font-weight:600;}
.plugin-actions{ display:flex; gap:.9rem; border-top:1px solid var(--blueline-soft); padding-top:1rem;}
.plugin-actions a{ font-family:var(--font-mono); font-size:.75rem; font-weight:600;}
.plugin-actions a.buy{ color:var(--accent-deep);}
.plugin-actions a.view{ color:var(--graphite-soft);}

/* ============ SHOWCASE ============ */
.showcase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; margin-top:3rem;}
@media(max-width:900px){ .showcase-grid{ grid-template-columns:1fr; } }
.frame-wrap{ display:flex; gap:1.2rem; align-items:flex-end; }
.frame{ border:1px solid var(--blueline-soft); background:var(--chalk); overflow:hidden;}
.frame-desktop{ flex:1; }
.frame-mobile{ width:34%; }
.frame-bar{ background:var(--ink); display:flex; gap:.3rem; padding:.5rem .6rem;}
.frame-bar span{ width:6px; height:6px; border-radius:50%; background:var(--blueline-soft);}
.frame-body{ padding:.9rem; display:flex; flex-direction:column; gap:.5rem;}
.frame-body .row{ height:8px; background:var(--paper-dim);}
.frame-body .row.short{ width:55%;}
.frame-body .hero-block{ height:34px; background:var(--blueline-soft); margin-bottom:.4rem;}
.frame-body .gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; margin-top:.3rem;}
.frame-body .gallery div{ height:20px; background:var(--accent); opacity:.35;}
.showcase-caption{ font-family:var(--font-mono); font-size:.72rem; color:var(--graphite-soft); text-align:center; margin-top:.8rem;}

/* ============ DASHBOARD ============ */
.dash-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3rem;}
@media(max-width:900px){ .dash-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .dash-grid{ grid-template-columns:1fr; } }
.dash-card{
  border:1px solid var(--blueline-soft); padding:1.4rem 1.2rem;
  background:rgba(255,255,255,.02);
}
.dash-card .label{ font-family:var(--font-mono); font-size:.68rem; color:var(--blueline); letter-spacing:.06em; text-transform:uppercase;}
.dash-card .value{ font-family:var(--font-display); font-size:1.8rem; color:var(--chalk); margin-top:.5rem;}
.dash-note{ text-align:center; margin-top:2.5rem; font-family:var(--font-mono); font-size:.85rem; color:var(--accent); letter-spacing:.03em;}

/* ============ HOW IT WORKS ============ */
.steps-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; position:relative;}
@media(max-width:900px){ .steps-row{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .steps-row{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:2.5rem;}
.step .num{
  font-family:var(--font-mono); font-size:.85rem; color:var(--accent-deep);
  border:1px solid var(--accent); width:2.2rem; height:2.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.step h4{ font-size:1rem; margin-bottom:.5rem;}
.step p{ font-size:.88rem;}

/* ============ USER ROLES ============ */
.roles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3rem;}
@media(max-width:900px){ .roles-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .roles-grid{ grid-template-columns:1fr; } }
.role-card{ padding:1.5rem; border:1px solid var(--blueline-soft);}
.role-card .idx{ font-family:var(--font-mono); font-size:.68rem; color:var(--blueline);}
.role-card h4{ font-size:1.05rem; margin:.6rem 0 .4rem;}
.role-card p{ font-size:.87rem;}

/* ============ WHY US ============ */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem;}
@media(max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
.why-item{ padding:1.4rem 0; border-top:1px solid var(--blueline-soft);}
.why-item h4{ font-size:1rem; margin-bottom:.4rem;}
.why-item p{ font-size:.85rem;}

/* ============ TECH STRIP ============ */
.tech-badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem;}
.tech-badge{ font-family:var(--font-mono); font-size:.75rem; padding:.5rem .9rem; border:1px solid var(--blueline-soft); color:var(--graphite-soft);}
.security-callout{ margin-top:2.5rem; padding:1.6rem 2rem; border-left:3px solid var(--green); background:var(--paper-dim);}
.security-callout p{ font-family:var(--font-display); font-size:1.15rem; color:var(--ink); font-style:italic;}

/* ============ PRICING ============ */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; align-items:stretch;}
@media(max-width:960px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{ display:flex; flex-direction:column; padding:2.2rem 1.8rem;}
.price-card.featured{ background:var(--ink); border-color:var(--accent);}
.price-card.featured *{ color:var(--chalk);}
.price-card.featured .tier-tag{ color:var(--accent);}
.price-card.featured .btn-primary{ background:#FFFFFF; color:var(--ink-deep); border-color:#FFFFFF;}
.price-card.featured .btn-primary:hover{ background:var(--paper-dim); color:var(--ink-deep);}
.price-card.featured .btn-outline{ color:#FFFFFF; border-color:rgba(255,255,255,.55);}
.tier-tag{ font-family:var(--font-mono); font-size:.7rem; color:var(--accent-deep); letter-spacing:.06em; text-transform:uppercase;}
.price-card h3{ margin:.6rem 0 .3rem;}
.price-card .sub{ font-size:.85rem; color:var(--graphite-soft); margin-bottom:1.4rem;}
.price-list{ flex-grow:1; margin-bottom:1.6rem;}
.price-list li{ font-size:.88rem; padding:.4rem 0; border-bottom:1px solid var(--blueline-soft); display:flex; gap:.5rem;}
.price-list li::before{ content:"✓"; color:var(--green);}
.custom-banner{
  margin-top:2rem; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:1.8rem 2rem; border:1px dashed var(--blueline);
}
.custom-banner h4{ font-size:1.1rem; margin-bottom:.3rem;}
.custom-banner p{ font-size:.88rem;}

/* ============ LICENSING ============ */
.license-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.5rem;}
@media(max-width:900px){ .license-grid{ grid-template-columns:1fr; } }
.license-card h4{ font-size:1.05rem; margin-bottom:.5rem;}
.license-card p{ font-size:.87rem;}
.license-includes{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.6rem;}
.license-includes span{ font-family:var(--font-mono); font-size:.72rem; color:var(--graphite-soft); border:1px solid var(--blueline-soft); padding:.4rem .8rem;}

/* ============ TRANSFORMATION ============ */
.transform-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; margin-top:3rem;}
@media(max-width:760px){ .transform-grid{ grid-template-columns:1fr; } .transform-arrow{ transform:rotate(90deg); margin:0 auto;} }
.transform-col{ padding:1.8rem;}
.transform-col.before{ border:1px solid var(--blueline-soft); }
.transform-col.after{ border:1px solid var(--accent); background:rgba(232,145,45,.05);}
.transform-col h4{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; color:var(--graphite-soft);}
.transform-col.after h4{ color:var(--accent-deep);}
.transform-col li{ font-size:.9rem; padding:.4rem 0; color:var(--graphite-soft);}
.transform-arrow{ font-size:1.8rem; color:var(--accent); text-align:center;}

/* ============ CASE STUDIES ============ */
.case-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem;}
@media(max-width:760px){ .case-grid{ grid-template-columns:1fr; } }
.case-card h4{ font-size:1.1rem; margin-bottom:1rem;}
.case-row{ display:flex; justify-content:space-between; font-size:.85rem; padding:.55rem 0; border-bottom:1px solid var(--blueline-soft);}
.case-row .k{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; color:var(--blueline); letter-spacing:.05em;}
.case-row:last-child{ border-bottom:none;}

/* ============ TESTIMONIALS PLACEHOLDER ============ */
.testimonial-placeholder{
  text-align:center; padding:3.5rem 2rem; border:1px dashed var(--blueline-soft);
}
.testimonial-placeholder .eyebrow{ justify-content:center;}
.testimonial-placeholder p{ max-width:520px; margin:0 auto;}

/* ============ RESOURCES ============ */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.5rem;}
.tag-cloud a{
  font-size:.85rem; padding:.6rem 1.1rem; border:1px solid var(--blueline-soft); color:var(--graphite-soft);
  transition:border-color .15s ease, color .15s ease;
}
.tag-cloud a:hover{ border-color:var(--accent); color:var(--ink);}

/* ============ FAQ ============ */
.faq-item{ border-bottom:1px solid var(--blueline-soft);}
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.4rem 0; cursor:pointer; font-family:var(--font-display); font-size:1.05rem; color:var(--ink); font-weight:500;
}
.faq-q .plus{ font-family:var(--font-mono); color:var(--accent-deep); font-size:1.2rem; transition:transform .2s ease; flex-shrink:0;}
.faq-item.open .plus{ transform:rotate(45deg);}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{ padding-bottom:1.4rem; font-size:.92rem;}

/* ============ FINAL CTA ============ */
.final-cta{ text-align:center; }
.final-cta h2{ max-width:680px; margin:0 auto 1.2rem;}
.final-cta .lede{ margin:0 auto 2.2rem;}
.final-cta .btn-row{ justify-content:center; margin-bottom:1.5rem;}
.final-cta .footnote{ font-family:var(--font-mono); font-size:.8rem; color:var(--blueline);}

/* ============ FOOTER ============ */
footer{ background:var(--ink-deep); color:#9FB3C8; padding:4.5rem 1.5rem 2rem;}
.footer-grid{
  max-width:1180px; margin:0 auto; display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08);
}
@media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand h3{ color:var(--chalk); font-size:1.2rem; margin-bottom:.5rem;}
.footer-brand p{ font-size:.85rem; color:#9FB3C8; margin-bottom:1.5rem;}
.footer-col h5{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#6E8AA6; margin-bottom:1.1rem;}
.footer-col li{ padding:.4rem 0;}
.footer-col a{ font-size:.87rem; color:#9FB3C8; transition:color .15s ease;}
.footer-col a:hover{ color:var(--accent);}
.footer-bottom{
  max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.8rem; font-size:.8rem; color:#6E8AA6;
}
.footer-bottom .btn-outline{ font-size:.72rem; padding:.6rem 1.1rem;}

/* ============ MISC ============ */
::selection{ background:var(--accent); color:var(--ink-deep);}

/* ============ MULTI-PAGE ADDITIONS ============ */
.nav-links a.active{ color:var(--ink); font-weight:700; }
.nav-links a.active::after{ content:""; display:block; height:2px; background:var(--accent); margin-top:3px; }

/* Page header (sub-page hero, lighter than homepage hero) */
.page-header{ padding:5rem 1.5rem 4rem; }
.page-header .wrap{ max-width:820px; }
.breadcrumb{ font-family:var(--font-mono); font-size:.75rem; color:var(--graphite-soft); margin-bottom:1.2rem; letter-spacing:.03em;}
.breadcrumb a{ color:var(--accent);}
.breadcrumb span{ margin:0 .4rem;}

/* Article / resource cards */
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem;}
@media(max-width:900px){ .article-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .article-grid{ grid-template-columns:1fr; } }
.article-card{ display:flex; flex-direction:column; }
.article-card .cat{ font-family:var(--font-mono); font-size:.68rem; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.8rem;}
.article-card h3{ font-size:1.05rem; margin-bottom:.6rem; flex-grow:1;}
.article-card p{ font-size:.87rem; margin-bottom:1rem;}
.article-card .read{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink); font-weight:600; border-top:1px solid var(--blueline-soft); padding-top:.9rem;}

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:3rem; align-items:start;}
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-card{ padding:1.5rem 0; border-top:1px solid var(--blueline-soft);}
.contact-info-card:first-child{ border-top:none; padding-top:0; }
.contact-info-card .label{ font-family:var(--font-mono); font-size:.7rem; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:.4rem;}
.contact-info-card .val{ font-size:1.05rem; color:var(--ink); font-weight:600;}
.form-field{ margin-bottom:1.3rem; }
.form-field label{ display:block; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--graphite-soft); margin-bottom:.5rem;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--blueline-soft); background:var(--paper);
  padding:.8rem .9rem; font-family:var(--font-body); font-size:.92rem; color:var(--graphite);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.form-field textarea{ resize:vertical; min-height:110px;}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem;}
@media(max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* Team / about value cards */
.about-stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem;}
@media(max-width:900px){ .about-stat-row{ grid-template-columns:1fr 1fr; } }
.about-stat{ padding:1.6rem; border:1px solid var(--blueline-soft); text-align:center;}
.about-stat .n{ font-family:var(--font-display); font-size:2rem; color:var(--ink); font-weight:700;}
.about-stat .l{ font-family:var(--font-mono); font-size:.7rem; color:var(--graphite-soft); letter-spacing:.05em; text-transform:uppercase; margin-top:.4rem;}

.timeline{ margin-top:3rem; }
.timeline-item{ display:grid; grid-template-columns:120px 1fr; gap:1.5rem; padding:1.6rem 0; border-top:1px solid var(--blueline-soft);}
.timeline-item:first-child{ border-top:none;}
.timeline-item .yr{ font-family:var(--font-mono); font-size:.85rem; color:var(--accent); font-weight:600;}
.timeline-item h4{ font-size:1.02rem; margin-bottom:.4rem;}
.timeline-item p{ font-size:.88rem;}
@media(max-width:600px){ .timeline-item{ grid-template-columns:1fr; gap:.4rem;} }