/* =================================================================
   RMA · Web · shared design system
   -----------------------------------------------------------------
   Tokens + component classes, kept tightly coherent with:
     - RMA 2026.html  (slide deck, source of visual DNA)
     - RMA Sitemap.html (IA brief — page sections, CTAs)

   Naming convention: kebab-case, BEM-ish.
   Sections of this file:
     1. Tokens & globals
     2. Layout primitives
     3. Header / footer
     4. Section anatomy (kicker, headline, etc.)
     5. Hero (display)
     6. Cards (platform, application, spec)
     7. KPI strip
     8. Process steps
     9. Industries grid
    10. Contact band (dark)
    11. Pills / checklist / chips
    12. Image placeholder
    13. Buttons / CTAs
    14. Form (inquiry)
   ================================================================= */


/* ----- 1. tokens & globals ---------------------------------------- */
:root{
  --bg:        #fafaf8;
  --bg-paper:  #f1efe9;
  --bg-deep:   #0d0d0d;

  --ink:       #0d0d0d;
  --ink-2:     #3a3a36;
  --ink-mute:  #84847d;

  --line:      #dcd9cf;
  --line-soft: #ebe8de;

  --card:      #ffffff;
  --card-line: #e4e1d6;

  --accent:    #FFC20E;
  --accent-ink:#1a1200;
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);

  --maxw: 1280px;
  --pad-x: clamp(24px, 4vw, 80px);

  --r-4: 4px;
  --r-6: 6px;
  --r-999: 999px;

  --t-fast: 140ms;
  --t-med:  220ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Jost', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
button{ font-family:inherit }
h1,h2,h3,h4,h5{
  margin:0; font-weight:600; letter-spacing:-.015em; text-wrap:balance;
}
p{ margin:0; text-wrap:pretty }

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


/* ----- 2. layout primitives --------------------------------------- */
.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.section{ padding: 96px 0 }
.section-tight{ padding: 64px 0 }
.section--paper{ background: var(--bg-paper) }
.section--deep { background: var(--bg-deep); color:#fafaf8 }


/* ----- 3. header / footer ----------------------------------------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .row{
  display:flex; align-items:center; justify-content:space-between;
  height: 72px; gap: 32px;
}
.logo{
  display:inline-flex; align-items:baseline; gap:6px;
  font-weight:800; letter-spacing:.18em; font-size:18px;
}
.logo .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  display:inline-block; transform:translateY(-1px);
}
.logo small{
  font-family:'JetBrains Mono', ui-monospace, monospace; font-weight:500;
  font-size:10px; letter-spacing:.18em; color:var(--ink-mute);
  margin-left:8px; padding-left:8px; border-left:1px solid var(--line);
  text-transform:uppercase;
}
.site-nav{
  display:flex; gap: 28px; align-items:center;
  font-size: 15px; font-weight:500;
}
.site-nav a{
  color: var(--ink-2);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.site-nav a:hover{ color: var(--ink); border-bottom-color: var(--accent) }
.site-nav a.is-current{ color: var(--ink); border-bottom-color: var(--accent) }

/* ---- RMA logo (real wordmark SVG) — shared across all pages ---- */
.logo--svg{ gap:10px }
.rma-mark{ display:inline-flex; align-items:center }
.rma-mark .rma-svg{ height:19px; width:auto; display:block }
.site-footer .rma-mark .rma-svg{ height:20px }

.header-cta{ display:flex; gap:10px; align-items:center }

/* ---- mobile nav (hamburger) — shared across all pages ---- */
.nav-toggle{ display:none; }
.nav-collapse{ display:flex; align-items:center; gap:32px; flex:1; justify-content:space-between; }
@media (max-width: 860px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin:0 -8px 0 0;
    background:transparent; border:0; cursor:pointer; color:var(--ink);
  }
  .nav-toggle-bars{ position:relative; display:block; width:22px; height:14px; }
  .nav-toggle-bars span{
    position:absolute; left:0; width:100%; height:2px; background:currentColor;
    border-radius:2px; transition:transform var(--t-med), opacity var(--t-fast);
  }
  .nav-toggle-bars span:nth-child(1){ top:0 }
  .nav-toggle-bars span:nth-child(2){ top:6px }
  .nav-toggle-bars span:nth-child(3){ top:12px }
  .site-header.is-open .nav-toggle-bars span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  .site-header.is-open .nav-toggle-bars span:nth-child(2){ opacity:0 }
  .site-header.is-open .nav-toggle-bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
  .nav-collapse{
    position:absolute; top:100%; left:0; right:0; z-index:49;
    display:none; flex:none; flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:8px 0 20px;
    box-shadow:0 26px 36px -26px rgba(0,0,0,.4);
  }
  .site-header.is-open .nav-collapse{ display:flex; }
  .nav-collapse .site-nav{ flex-direction:column; align-items:stretch; gap:0; font-size:17px; }
  .nav-collapse .site-nav a{ padding:15px 2px; border-bottom:1px solid var(--line); }
  .nav-collapse .site-nav a.is-current{ border-bottom-color:var(--line); color:var(--accent); }
  .nav-collapse .header-cta{ flex-direction:column; align-items:stretch; gap:12px; margin-top:18px; }
  .nav-collapse .header-cta .btn{ width:100%; height:50px; }
  .nav-collapse .lang-switch{ align-self:flex-start; }
}

.site-footer{
  background: var(--bg-deep); color: #fafaf8;
  padding: 80px 0 32px;
}
.site-footer .grid{
  display:grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr; gap: 40px;
}
.site-footer h4{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
  font-weight:500; margin-bottom: 18px;
}
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.site-footer a{ color: rgba(255,255,255,.85); font-size: 15px }
.site-footer a:hover{ color: var(--accent) }
.site-footer .brand-blurb{ color: rgba(255,255,255,.65); font-size:15px; line-height:1.5; margin-top:8px; max-width:320px }
.site-footer .bottom{
  margin-top: 64px; padding-top: 24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.08em;
  color: rgba(255,255,255,.5); text-transform:uppercase;
}


/* ----- 4. section anatomy ----------------------------------------- */
.kicker{
  font-family:'JetBrains Mono', monospace; font-weight:500;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--accent);
  display:inline-flex; align-items:center; gap:8px;
}
.kicker:before{
  content:""; display:inline-block; width:18px; height:1.5px; background: var(--accent);
}
.section--deep .kicker{ color: var(--accent) }
.label{
  font-family:'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing:.14em; color: var(--ink-mute); text-transform:uppercase;
}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 48px; margin-bottom: 56px;
}
.section-head .col-l{ max-width: 720px }
.section-head .col-r{ max-width: 380px; padding-bottom: 6px }
.section-head h2{
  font-size: 56px; line-height: 1.04; font-weight:500; letter-spacing:-.02em;
  margin-top: 18px;
}
.section-head h2 .ac{ color: var(--accent) }
.section-head p{
  font-size: 17px; line-height: 1.5; color: var(--ink-2);
}

/* shared big numbers */
.num{ font-variant-numeric: tabular-nums }


/* ----- 5. hero ---------------------------------------------------- */
.hero{
  padding: 88px 0 96px;
  position: relative;
}
.hero .display{
  font-size: clamp(56px, 7vw, 104px);
  line-height: .98; font-weight: 500; letter-spacing: -.03em;
  margin-top: 24px;
}
.hero .display .ac{ color: var(--accent) }
.hero .lede{
  font-size: 22px; line-height: 1.45; color: var(--ink-2);
  max-width: 720px; margin-top: 36px;
}
.hero .cta-row{
  display: flex; gap: 14px; margin-top: 40px;
}
.hero .meta-row{
  margin-top: 72px; padding-top: 28px;
  border-top: 1px solid var(--line);
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.hero .meta .k{
  font-family:'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .14em; color: var(--ink-mute); text-transform:uppercase;
}
.hero .meta .v{
  font-size: 17px; color: var(--ink); font-weight:500; margin-top: 8px;
}

/* product hero — image on the right */
.product-hero{
  padding: 56px 0 80px;
}
.product-hero .breadcrumb{
  font-family:'JetBrains Mono', monospace; font-size:12px;
  letter-spacing:.08em; color:var(--ink-mute); text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin-bottom: 40px;
}
.product-hero .breadcrumb a{ color: var(--ink-2) }
.product-hero .breadcrumb a:hover{ color: var(--accent) }
.product-hero .breadcrumb .sep{ color: var(--line) }
.product-hero .grid{
  display: grid; grid-template-columns: 1.05fr 1.1fr; gap: 56px;
  align-items: stretch;
}
.product-hero h1{
  font-size: clamp(48px, 5.8vw, 80px); line-height:1.02;
  font-weight: 500; letter-spacing:-.02em;
}
.product-hero h1 .ac{ color: var(--accent) }
.product-hero .blurb{
  font-size: 20px; line-height: 1.5; color: var(--ink-2);
  max-width: 560px; margin-top: 28px;
}
.product-hero .key-specs{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 48px; border-top: 1px solid var(--line);
}
.product-hero .key-specs .k{
  padding: 22px 24px 22px 0; border-right: 1px solid var(--line);
}
.product-hero .key-specs .k:last-child{ border-right: none; padding-right: 0 }
.product-hero .key-specs .k:not(:first-child){ padding-left: 24px }
.product-hero .key-specs .lbl{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.12em; color:var(--ink-mute); text-transform:uppercase;
}
.product-hero .key-specs .val{
  font-size: 20px; font-weight:500; margin-top: 6px; letter-spacing: -.005em;
}


/* ----- 6. cards --------------------------------------------------- */
.cards-grid{ display:grid; gap: 24px }
.cards-grid--4{ grid-template-columns: repeat(4, 1fr) }
.cards-grid--3{ grid-template-columns: repeat(3, 1fr) }
.cards-grid--2{ grid-template-columns: repeat(2, 1fr) }

.card{
  background: var(--card); border:1px solid var(--card-line);
  border-radius: var(--r-6); padding: 28px 30px;
  display:flex; flex-direction:column; gap: 14px;
  transition: border-color var(--t-fast), transform var(--t-fast);
  position:relative;
  min-height: 380px;
}
.card.is-clickable{ cursor:pointer }
.card.is-clickable:hover{
  border-color: var(--accent);
  transform: translateY(-2px);
}
.card .crn{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--ink-mute);
  margin-bottom: 8px;
}
.card .crn .id{ color: var(--accent) }
.card h3{
  font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -.01em;
}
.card p{
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.card .checklist{ margin-top:auto }
.card .card-link{
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-family:'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .08em; color: var(--ink);
  display:inline-flex; align-items:center; gap:8px;
  text-transform:uppercase;
}
.card .card-link .arrow{ color: var(--accent); transition: transform var(--t-fast) }
.card.is-clickable:hover .card-link .arrow{ transform: translateX(4px) }

/* spec card — denser */
.spec-card{
  background: var(--card); border:1px solid var(--card-line);
  border-radius: var(--r-6); padding: 22px 24px;
  display:flex; flex-direction:column; gap: 8px;
}
.spec-card .lbl{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:.12em; color: var(--accent); text-transform:uppercase;
}
.spec-card .val{
  font-size: 19px; font-weight:500; line-height:1.2; letter-spacing:-.005em;
}
.spec-card .desc{
  font-size:13px; color: var(--ink-mute); line-height: 1.4;
}
.spec-grid{
  display:grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}

/* application teaser card */
.app-card{
  background: var(--card); border:1px solid var(--card-line);
  border-radius: var(--r-6); overflow:hidden;
  display:flex; flex-direction:column;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.app-card:hover{ border-color: var(--accent); transform: translateY(-2px) }
.app-card .ph{
  height: 200px; border-bottom: 1px solid var(--line-soft);
}
.app-card .body{ padding: 22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1 }
.app-card .meta-line{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.10em; text-transform:uppercase; color: var(--accent);
}
.app-card h3{ font-size: 22px; font-weight: 500; line-height:1.2; letter-spacing:-.005em }
.app-card p{ font-size:14px; color:var(--ink-2); line-height:1.5 }
.app-card .link{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft);
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
}


/* ----- 7. KPI strip ----------------------------------------------- */
.kpi-strip{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:0;
  border-top: 1px solid var(--line);
}
.kpi{
  padding: 36px 28px 36px 0;
  border-right: 1px solid var(--line);
  display:flex; flex-direction:column; gap: 12px;
}
.kpi:last-child{ border-right:none }
.kpi:not(:first-child){ padding-left: 28px }
.kpi .arrow{
  font-family:'JetBrains Mono', monospace; font-size:16px;
  color: var(--accent); font-weight: 500;
}
.kpi .v{
  font-size: 56px; line-height: .95; font-weight: 500;
  letter-spacing: -.025em;
}
.kpi .l{
  font-family:'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .1em; color: var(--ink-mute); text-transform:uppercase;
  margin-top: auto;
}
.ph-x{
  display:inline-block; padding: 0 7px; border:1px dashed var(--accent);
  color: var(--accent); font-size: .42em; font-family:'JetBrains Mono', monospace;
  letter-spacing: .06em; line-height: 1.8; vertical-align: middle; margin-left: 4px;
}
.kpi-note{
  margin-top: 32px; font-size: 13px; color: var(--ink-mute);
  max-width: 720px; line-height: 1.5;
}
.kpi-note .acc{ color: var(--accent) }


/* ----- 8. process steps ------------------------------------------- */
.steps{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 24px;
}
.steps .step{
  padding: 32px 28px 16px 0;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display:flex; flex-direction:column; gap: 12px;
}
.steps .step:last-child{ border-right: none; padding-right: 0 }
.steps .step:not(:first-child){ padding-left: 28px }
.steps .step .n{
  font-family:'JetBrains Mono', monospace; font-size:12px;
  letter-spacing:.12em; color:var(--accent); font-weight:500;
}
.steps .step h4{
  font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -.01em;
}
.steps .step p{
  font-size: 15px; line-height: 1.45; color: var(--ink-2);
}

/* control flow 6-column variant — used on product page */
.steps-6{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  margin-top: 24px;
}
.steps-6 .s{
  padding: 28px 20px 18px 0;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.steps-6 .s:last-child{ border-right:none; padding-right:0 }
.steps-6 .s:not(:first-child){ padding-left: 20px }
.steps-6 .s .n{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.12em; color:var(--accent); font-weight:500;
}
.steps-6 .s .name{
  font-size:18px; font-weight:500; margin-top:12px; line-height:1.2; letter-spacing:-.005em;
}
.steps-6 .s p{
  font-size:13px; color:var(--ink-mute); line-height:1.45; margin-top: 8px;
}


/* ----- 9. industries grid ----------------------------------------- */
.industries-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.ind-tile{
  background: var(--card); border: 1px solid var(--line);
  padding: 28px 30px;
  display:flex; flex-direction:column; gap:6px; min-height: 220px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.ind-tile:hover{ border-color: var(--accent); transform: translateY(-2px) }
.ind-tile .num{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.12em; color:var(--accent); margin-bottom: 18px;
}
.ind-tile h3{
  font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing:-.005em;
}
.ind-tile p{
  font-size: 14px; line-height: 1.5; color: var(--ink-mute);
  margin-top: auto; padding-top: 16px;
}


/* ----- 10. contact band (deep) ------------------------------------ */
.contact-band{
  background: var(--bg-deep); color: #fafaf8;
  padding: 112px 0;
}
.contact-band .tag{
  font-family:'JetBrains Mono', monospace; font-size:12px;
  letter-spacing:.18em; color: var(--accent); text-transform:uppercase;
}
.contact-band h2{
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1.02; font-weight: 500; letter-spacing: -.025em;
  margin-top: 22px; max-width: 1100px;
}
.contact-band h2 .ac{ color: var(--accent) }
.contact-band .row{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px; margin-top: 72px; padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.contact-band .col .k{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.14em; color: var(--accent); text-transform:uppercase;
}
.contact-band .col .v{
  font-size: 22px; font-weight: 500; margin-top: 10px; letter-spacing: -.005em;
}
.contact-band .col .sub{
  font-size: 14px; color: rgba(255,255,255,.6); margin-top: 4px;
}


/* ----- 11. pills / checklist / chips ------------------------------ */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border:1px solid var(--line); border-radius: var(--r-999);
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.05em;
  color: var(--ink-2); text-transform:uppercase; background: var(--bg);
}
.pill .d{ width:6px; height:6px; border-radius:50%; background: var(--accent) }
.section--deep .pill{ background: transparent; color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.18) }

.pill-row{ display:flex; gap:10px; flex-wrap: wrap }

.checklist{
  display:flex; flex-direction:column; gap: 10px;
  list-style:none; margin: 0; padding: 0;
}
.checklist li{
  font-size:15px; line-height:1.45; color: var(--ink-2);
  padding-left: 28px; position:relative;
}
.checklist li:before{
  content:""; position:absolute; left:0; top:11px;
  width:16px; height: 2px; background: var(--accent);
}
.section--deep .checklist li{ color: rgba(255,255,255,.85) }

.chip{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.05em; color: var(--ink-2);
  border: 1px solid var(--line); padding: 5px 10px; border-radius: var(--r-999);
  background: var(--bg);
}


/* ----- 12. image placeholder -------------------------------------- */
.img-ph{
  position: relative; overflow: hidden; border-radius: var(--r-4);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 22px,
      color-mix(in srgb, var(--ink) 5%, transparent) 22px 23px),
    var(--bg-paper);
  border: 1px solid var(--line);
}
.img-ph .tag{
  position:absolute; left: 16px; top: 16px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.10em; color: var(--ink-mute); text-transform:uppercase;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  padding: 4px 8px; border: 1px solid var(--line);
}
.img-ph .dim{
  position:absolute; right: 16px; bottom: 16px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color: var(--ink-mute); letter-spacing:.06em;
}


/* ----- 13. buttons / CTAs ----------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Jost', sans-serif; font-weight: 500;
  font-size: 15px; letter-spacing: 0;
  height: 46px; padding: 0 22px; border-radius: var(--r-4);
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor:pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover{ background: var(--ink); color: #fff }
.btn .arrow{ color: var(--accent); transition: transform var(--t-fast) }
.btn:hover .arrow{ transform: translateX(3px) }
.btn--primary{
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 600;
}
.btn--primary:hover{ background: #ffb500; color: var(--accent-ink); border-color: #ffb500 }
.btn--ghost{ border-color: var(--line); color: var(--ink-2) }
.btn--ghost:hover{ background: transparent; color: var(--ink); border-color: var(--ink) }
.btn--on-deep{ border-color: rgba(255,255,255,.3); color: #fff }
.btn--on-deep:hover{ background: #fff; color: var(--bg-deep); border-color:#fff }
.btn--sm{ height: 36px; padding: 0 14px; font-size: 13px }


/* ----- 14. table-ish matrix --------------------------------------- */
.matrix{
  width:100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line); border-radius: var(--r-4); overflow:hidden;
  background: var(--card);
  font-size: 14px;
}
.matrix th, .matrix td{
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left; vertical-align: middle;
}
.matrix thead th{
  background: var(--bg-paper);
  font-family:'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing:.10em; text-transform:uppercase; color: var(--ink-mute);
  font-weight: 500;
}
.matrix tbody tr:last-child td{ border-bottom: none }
.matrix tbody th{
  font-weight: 500; color: var(--ink); font-family:'Jost', sans-serif;
  background: var(--bg);
  font-size: 14px;
}
.matrix td.cell-yes:before{
  content:"●"; color: var(--accent); margin-right: 6px;
}
.matrix td.cell-no { color: var(--ink-mute) }
.matrix td.cell-no:before{
  content:"○"; color: var(--line); margin-right: 6px;
}
.matrix td.cell-best:before{
  content:"●"; color: var(--accent); margin-right: 6px;
}
.matrix td.cell-best{ font-weight: 500 }


/* ----- 15. blog / articles ----------------------------------------- */
.blog-hero{ padding: 56px 0 40px }
.blog-hero .breadcrumb{
  font-family:'JetBrains Mono', monospace; font-size:12px;
  letter-spacing:.08em; color:var(--ink-mute); text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin-bottom: 36px;
}
.blog-hero .breadcrumb a{ color: var(--ink-2) }
.blog-hero .breadcrumb a:hover{ color: var(--accent) }
.blog-hero .breadcrumb .sep{ color: var(--line) }
.blog-hero h1{
  font-size: clamp(40px, 5vw, 60px); line-height:1.05; font-weight:500; letter-spacing:-.02em;
  max-width: 820px;
}
.blog-hero .lede{ font-size:19px; line-height:1.5; color:var(--ink-2); max-width:640px; margin-top:22px }

.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.post-card{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--card-line);
  border-radius: var(--r-6); overflow:hidden; text-decoration:none; color:inherit;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.post-card:hover{ border-color:var(--accent); transform:translateY(-2px) }
.post-card .pc-thumb{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-paper); border-bottom:1px solid var(--card-line) }
.post-card .pc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--t-med) }
.post-card:hover .pc-thumb img{ transform:scale(1.04) }
.post-card .pc-body{ padding:26px 28px 30px; display:flex; flex-direction:column; gap:14px; flex:1 }
.post-card .pc-meta{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); display:flex; gap:10px; align-items:center;
}
.post-card .pc-meta .n{ color:var(--accent) }
.post-card h3{ font-size:23px; font-weight:500; line-height:1.22; letter-spacing:-.005em }
.post-card p{ font-size:14.5px; line-height:1.5; color:var(--ink-2); margin-top:-2px }
.post-card .pc-link{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft);
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; color:var(--ink);
}
.post-card .pc-link .arrow{ color:var(--accent); transition: transform var(--t-fast) }
.post-card:hover .pc-link .arrow{ transform:translateX(4px) }

.article-hero{ padding: 56px 0 8px }
.article-hero .meta-row{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute); margin-top:26px;
}
.article-hero .meta-row .sep{ color:var(--line) }
.article-hero h1{
  font-size: clamp(36px, 4.4vw, 54px); line-height:1.08; font-weight:500; letter-spacing:-.02em;
  max-width: 900px; margin-top:22px;
}
.article-hero .dek{ font-size:19px; line-height:1.5; color:var(--ink-2); max-width:720px; margin-top:20px }

.prose{ max-width: 760px; font-size:18px; line-height:1.7; color:var(--ink-2) }
.prose h2{
  font-size:30px; font-weight:500; letter-spacing:-.01em; color:var(--ink);
  margin: 56px 0 20px;
}
.prose h2:first-child{ margin-top:0 }
.prose p{ margin: 0 0 22px }
.prose strong{ color:var(--ink); font-weight:600 }
.prose ul, .prose ol{ margin:0 0 22px; padding-left:22px; display:flex; flex-direction:column; gap:10px }
.prose li{ line-height:1.55 }
.prose .pull{
  font-size:24px; line-height:1.4; font-weight:500; color:var(--ink);
  border-left:2px solid var(--accent); padding-left:28px; margin:44px 0;
}
.prose .note{
  font-size:15px; color:var(--ink-mute); border-top:1px solid var(--line); padding-top:18px; margin-top:56px;
}
.prose .matrix{ font-size:15px; margin: 8px 0 22px }
.prose .matrix td, .prose .matrix th{ padding:12px 16px }

.series-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:80px; padding-top:32px; border-top:1px solid var(--line);
}
.series-nav a{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  padding:22px 26px; border:1px solid var(--card-line); border-radius:var(--r-6);
  transition: border-color var(--t-fast);
}
.series-nav a:hover{ border-color:var(--accent) }
.series-nav .dir{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em; color:var(--accent); text-transform:uppercase;
}
.series-nav .t{ font-size:17px; font-weight:500; line-height:1.3 }
.series-nav .next{ text-align:right; align-items:flex-end }

/* ----- 16. article hero image + inline contact form --------------- */
.article-hero-img{
  margin-top:36px; border-radius:var(--r-6); overflow:hidden; border:1px solid var(--card-line);
  aspect-ratio:21/7; max-height:280px; background:var(--bg-paper);
}
.article-hero-img img{ width:100%; height:100%; object-fit:cover; display:block }

.contact-form-band{ background:var(--bg-deep); color:#fafaf8; padding:96px 0 }
.contact-form-band .cf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start }
.contact-form-band .tag{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.18em;
  color:var(--accent); text-transform:uppercase;
}
.contact-form-band h2{
  font-size:clamp(34px,3.6vw,46px); line-height:1.1; font-weight:500; letter-spacing:-.02em; margin-top:18px;
}
.contact-form-band p.sub{ font-size:17px; line-height:1.55; color:rgba(255,255,255,.65); margin-top:18px; max-width:440px }
.contact-form-band .cf-direct{ margin-top:32px; display:flex; flex-direction:column; gap:6px }
.contact-form-band .cf-direct a{ color:#fafaf8; font-size:16px }
.contact-form-band .cf-direct a:hover{ color:var(--accent) }
.contact-form-band .cf-direct .k{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.45); text-transform:uppercase;
}

.cf-form{ display:flex; flex-direction:column; gap:18px }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.cf-field{ display:flex; flex-direction:column; gap:8px }
.cf-field label{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.cf-field input, .cf-field textarea{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-4);
  color:#fafaf8; font-family:'Jost', sans-serif; font-size:16px; padding:13px 15px;
  outline:none; transition:border-color var(--t-fast), background var(--t-fast);
}
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:rgba(255,255,255,.3) }
.cf-field input:focus, .cf-field textarea:focus{ border-color:var(--accent); background:rgba(255,255,255,.09) }
.cf-field textarea{ resize:vertical; min-height:96px; font-family:'Jost', sans-serif }
.cf-hp{ position:absolute; left:-9999px; opacity:0 }
.cf-note{ font-size:13px; color:rgba(255,255,255,.4); margin-top:2px }
.cf-success{ display:none; flex-direction:column; gap:10px; text-align:left }
.cf-success.is-shown{ display:flex }
.cf-success .ok{ color:var(--accent); font-size:28px }
.cf-form.is-hidden{ display:none }

@media (max-width:860px){
  .contact-form-band .cf-grid{ grid-template-columns:1fr; gap:44px }
  .cf-row{ grid-template-columns:1fr }
}

/* ----- 17. cookie consent banner ----------------------------------- */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; max-width:960px; margin:0 auto; z-index:300;
  background:var(--ink); color:#fafaf8; border-radius:var(--r-6);
  padding:22px 26px; display:flex; gap:28px; align-items:center; justify-content:space-between;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
  transform:translateY(140%); opacity:0; transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s;
  pointer-events:none;
}
.cookie-banner.is-shown{ transform:translateY(0); opacity:1; pointer-events:auto }
.cookie-banner p{ font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.75); margin:0; max-width:560px }
.cookie-banner a{ color:#fafaf8; text-decoration:underline }
.cookie-banner a:hover{ color:var(--accent) }
.cookie-banner .cb-actions{ display:flex; gap:10px; flex-shrink:0 }
.cookie-banner .btn--sm{ height:40px }
@media (max-width:700px){
  .cookie-banner{ flex-direction:column; align-items:stretch; gap:16px; left:12px; right:12px; bottom:12px; padding:20px }
  .cookie-banner .cb-actions{ justify-content:stretch }
  .cookie-banner .cb-actions .btn{ flex:1 }
}

/* ----- responsive (light touch — these mockups target desktop) ---- */
@media (max-width: 1100px){
  .cards-grid--4{ grid-template-columns: repeat(2, 1fr) }
  .spec-grid{ grid-template-columns: repeat(2, 1fr) }
  .industries-grid{ grid-template-columns: repeat(2, 1fr) }
  .product-hero .grid{ grid-template-columns: 1fr }
  .hero .meta-row{ grid-template-columns: repeat(2, 1fr) }
  .section-head{ flex-direction: column; align-items: flex-start }
  .site-footer .grid{ grid-template-columns: 1fr 1fr }
  .post-grid{ grid-template-columns: 1fr 1fr }
  .site-footer .grid{ grid-template-columns: repeat(3,1fr) }
}
@media (max-width: 700px){
  .post-grid{ grid-template-columns: 1fr }
  .series-nav{ grid-template-columns: 1fr }
  .series-nav .next{ text-align:left; align-items:flex-start }
}