/* =================================================================
   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) }

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

.site-footer{
  background: var(--bg-deep); color: #fafaf8;
  padding: 80px 0 32px;
}
.site-footer .grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
}
.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 }


/* ----- 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 }
}