/* Natural Algorithms — Carbon-style design system
   Reference: IBM Digital Asset Haven (Carbon Design System, Apache-2.0).
   IBM Plex, zero-radius geometry, 8px spacing grid, hard left alignment. */

:root{
  /* surfaces */
  --white:#ffffff;
  --layer-01:#f4f4f4;
  --layer-02:#e8e8e8;
  --border-subtle:#e0e0e0;
  --border-strong:#8d8d8d;

  /* text */
  --text-primary:#161616;
  --text-secondary:#525252;
  --text-helper:#6f6f6f;
  --text-on-color:#ffffff;

  /* interactive — Natural Algorithms blue in Carbon's role */
  --blue:#1464FF;
  --blue-hover:#0043ce;
  --blue-active:#002d9c;
  --blue-light:#d0e2ff;

  --font-sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  /* Carbon spacing scale */
  --s01:2px;  --s02:4px;  --s03:8px;  --s04:12px;
  --s05:16px; --s06:24px; --s07:32px; --s08:40px;
  --s09:48px; --s10:64px; --s11:80px; --s12:96px; --s13:160px;

  --max-w:1312px;
  --gutter:32px;
  --header-h:48px;
  --subnav-h:48px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--white);color:var(--text-primary);
  font-family:var(--font-sans);font-size:16px;line-height:1.5;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
::selection{background:var(--blue-light);color:var(--text-primary)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--layer-01)}
::-webkit-scrollbar-thumb{background:#c6c6c6}
a{color:inherit}
address{font-style:normal}
.link{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.link:hover{color:var(--blue-hover)}
.link:active{color:var(--blue-active)}
img{max-width:100%;display:block}

/* Carbon type scale — headings are LIGHT (300), never bold, never uppercase */
h1,h2,h3,h4{font-weight:400;letter-spacing:0;text-transform:none}
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);width:100%}
section{position:relative}

/* ─── Header (Carbon UI shell) ────────────────────── */
.masthead{position:sticky;top:0;z-index:100;background:var(--white)}
nav{height:var(--header-h);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center}
.nav-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);width:100%;
  height:100%;display:flex;align-items:center;gap:var(--s09);
}
.nav-logo{
  font-family:var(--font-sans);font-size:14px;font-weight:600;
  color:var(--text-primary);text-decoration:none;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;flex:none;
}
.nav-logo:hover{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:0;list-style:none;height:100%}
.nav-links a{
  display:flex;align-items:center;height:100%;padding:0 var(--s05);
  font-size:14px;font-weight:400;color:var(--text-secondary);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .11s cubic-bezier(.2,0,.38,.9),background .11s cubic-bezier(.2,0,.38,.9);
}
.nav-links a:hover{background:var(--layer-01);color:var(--text-primary)}
.nav-links a:active{background:var(--layer-02)}
.nav-links a[aria-current="page"]{color:var(--text-primary);border-bottom-color:var(--blue)}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* ─── Buttons — rectangular, icon pinned right ────── */
.btn-primary,.btn-secondary{
  position:relative;display:inline-flex;align-items:flex-start;
  min-height:48px;min-width:200px;padding:14px 64px 14px 16px;
  font-family:var(--font-sans);font-size:14px;font-weight:400;line-height:18px;
  text-decoration:none;border:1px solid transparent;
  transition:background .11s cubic-bezier(.2,0,.38,.9),color .11s cubic-bezier(.2,0,.38,.9),border-color .11s cubic-bezier(.2,0,.38,.9);
}
.btn-primary{background:var(--blue);color:var(--text-on-color)}
.btn-primary:hover{background:var(--blue-hover)}
.btn-primary:active{background:var(--blue-active)}
.btn-secondary{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-secondary:hover{background:var(--blue);color:var(--text-on-color)}
.btn-secondary:active{background:var(--blue-active);border-color:var(--blue-active);color:var(--text-on-color)}
.arw{position:absolute;right:16px;top:15px;font-size:16px;line-height:1}

/* ─── Sections ────────────────────────────────────── */
.sec{padding:var(--s12) 0}
.sec-alt{background:var(--layer-01)}
.sec-head{margin-bottom:var(--s10)}
.section-kicker{
  display:block;font-family:var(--font-sans);font-size:12px;font-weight:400;
  color:var(--text-helper);letter-spacing:.32px;margin-bottom:var(--s05);
}
.section-title{
  font-size:clamp(32px,4.2vw,54px);font-weight:300;line-height:1.15;
  letter-spacing:0;max-width:14ch;margin-bottom:var(--s07);
}
.section-title-wide{max-width:24ch}
.section-body{
  font-size:16px;line-height:1.5;color:var(--text-secondary);max-width:60ch;
}
.section-body + .section-body{margin-top:var(--s05)}
.section-divider{height:1px;background:var(--border-subtle)}

/* ─── Hero ────────────────────────────────────────── */
.hero{background:var(--layer-01);padding:var(--s10) 0 var(--s13)}
.crumb{
  font-size:14px;color:var(--text-secondary);margin-bottom:var(--s09);
  display:flex;gap:var(--s03);align-items:center;
}
.crumb a{color:var(--blue);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{color:var(--text-helper)}
.hero-headline{
  font-size:clamp(36px,5.2vw,54px);font-weight:300;line-height:1.15;
  letter-spacing:0;max-width:none;margin-bottom:var(--s12);
}
.hero-sub{
  font-size:20px;font-weight:400;line-height:1.4;color:var(--text-primary);
  max-width:46ch;margin-bottom:var(--s08);
}
.hero-actions{display:flex;align-items:stretch;gap:var(--s05);flex-wrap:wrap}

/* ─── Two-column (heading left / body right) ──────── */
.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter);align-items:start}
.two-col .section-title{margin-bottom:0}

/* ─── Feature columns ─────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:var(--s12)}
.strip-item{border-top:1px solid var(--text-primary);padding-top:var(--s05)}
.strip-lbl{font-size:12px;color:var(--text-helper);letter-spacing:.32px;margin-bottom:var(--s03)}
.strip-val{font-size:20px;font-weight:400;line-height:1.4}

/* ─── Tabs (Carbon) ───────────────────────────────── */
.tabs{display:flex;border-bottom:1px solid var(--border-subtle);margin-bottom:var(--s10);flex-wrap:wrap}
.tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font-family:var(--font-sans);font-size:14px;color:var(--text-secondary);
  padding:var(--s04) var(--s05);margin-bottom:-1px;cursor:pointer;text-align:left;
  transition:color .11s cubic-bezier(.2,0,.38,.9),border-color .11s cubic-bezier(.2,0,.38,.9);
}
.tab:hover{color:var(--text-primary);border-bottom-color:var(--border-strong)}
.tab[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--blue)}
.tab-panel{display:none;max-width:60ch}
.tab-panel[data-active]{display:block}
.tab-panel h3{font-size:20px;font-weight:400;margin-bottom:var(--s05)}
.tab-panel p{font-size:16px;line-height:1.5;color:var(--text-secondary)}
.tab-panel p + p{margin-top:var(--s05)}

/* ─── Numbered pipeline ───────────────────────────── */
.pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.pipe-step{border-top:1px solid var(--text-primary);padding-top:var(--s05)}
.pipe-num{font-family:var(--font-mono);font-size:12px;color:var(--text-helper);margin-bottom:var(--s07)}
.pipe-step h3{font-size:20px;font-weight:400;margin-bottom:var(--s04)}
.pipe-step p{font-size:16px;color:var(--text-secondary);line-height:1.5}
.pipe-bar{
  margin-top:var(--s10);padding:var(--s06) 0;border-top:1px solid var(--border-subtle);
  display:flex;justify-content:space-between;gap:var(--s06);flex-wrap:wrap;
}
.pipe-bar strong{font-weight:600;font-size:16px}
.pipe-bar span{font-family:var(--font-mono);font-size:12px;color:var(--text-helper)}

/* ─── Bordered fact list ──────────────────────────── */
.rows{border-top:1px solid var(--border-subtle)}
.rows div{
  padding:var(--s05) 0;border-bottom:1px solid var(--border-subtle);
  font-size:16px;line-height:1.5;color:var(--text-secondary);
}
.rows div strong{color:var(--text-primary);font-weight:600}

/* ─── Cards (Carbon tile) ─────────────────────────── */
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
.role{
  background:var(--layer-01);border:1px solid var(--border-subtle);
  padding:var(--s06);display:flex;flex-direction:column;
  transition:background .11s cubic-bezier(.2,0,.38,.9);
}
.role:hover{background:var(--layer-02)}
.role h3{font-size:20px;font-weight:400;margin-bottom:var(--s04)}
.role-meta{display:flex;gap:var(--s05);margin-bottom:var(--s06);flex-wrap:wrap}
.chip{font-family:var(--font-mono);font-size:12px;color:var(--blue);letter-spacing:.32px}
.chip-plain{color:var(--text-helper)}
.role-sum{font-size:16px;color:var(--text-secondary);margin-bottom:var(--s07);line-height:1.5}
.role-cols{display:grid;grid-template-columns:1fr;gap:var(--s07)}
.role-cols h4{
  font-size:12px;font-weight:400;color:var(--text-helper);
  letter-spacing:.32px;margin-bottom:var(--s04);
  padding-bottom:var(--s03);border-bottom:1px solid var(--border-subtle);
}
.role-cols ul{list-style:none}
.role-cols li{
  font-size:16px;color:var(--text-secondary);line-height:1.5;
  padding:var(--s03) 0;border-bottom:1px solid var(--border-subtle);
}
.role-cols li:last-child{border-bottom:0}
.role-foot{margin-top:auto;padding-top:var(--s07)}

/* ─── Contact / CTA ───────────────────────────────── */
.contact-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter);align-items:start}
.cta-panel{
  background:var(--layer-01);border:1px solid var(--border-subtle);
  padding:var(--s09);margin-top:var(--s10);
}
.cta-panel h3{font-size:28px;font-weight:300;margin-bottom:var(--s04)}
.cta-panel p{font-size:16px;color:var(--text-secondary)}

/* ─── Footer ──────────────────────────────────────── */
footer{border-top:1px solid var(--border-subtle);padding:var(--s09) 0}
.foot-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);
  display:flex;justify-content:space-between;gap:var(--s06);flex-wrap:wrap;
  font-size:14px;color:var(--text-helper);
}

/* ─── Responsive ──────────────────────────────────── */
@media(max-width:900px){
  :root{--gutter:16px}
  .nav-inner{gap:var(--s05)}
  .nav-links{display:none}
  .hero{padding:var(--s07) 0 var(--s11)}
  .hero-headline{margin-bottom:var(--s09)}
  .sec{padding:var(--s11) 0}
  .two-col,.strip,.pipe,.roles,.contact-row{grid-template-columns:1fr}
  .strip,.pipe{gap:var(--s07)}
  .two-col{gap:var(--s07)}
  .section-title{max-width:none}
  .btn-primary,.btn-secondary{width:100%}
  .cta-panel{padding:var(--s06)}
}
@media(min-width:901px){
  .role-cols{grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
}