:root{
  --ink:#121A26; --ink-2:#1B2738; --ink-3:#26344A;
  --paper:#F5F7FA; --paper-2:#E9EDF2; --white:#FFFFFF;
  --blue:#2D6CB5; --blue-soft:#7FA8D6; --signal:#E08A2B;
  --text:#1A2330; --muted:#5C6B7E; --muted-d:#9FB0C4;
  --line:#D8DEE7; --line-d:rgba(255,255,255,.12);
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:500}
.eyebrow.on-dark{color:var(--blue-soft)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(245,247,250,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .mark{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--ink)}
.brand .sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.menu{display:flex;gap:28px;align-items:center}
.menu a{font-size:.92rem;color:var(--muted);font-weight:500;transition:color .15s}
.menu a:hover,.menu a.active{color:var(--ink)}
.menu a.active{position:relative}
.menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-23px;height:2px;background:var(--signal)}
.menu .cta{font-weight:600;color:var(--ink);border:1px solid var(--line);padding:8px 16px;border-radius:7px;transition:all .15s}
.menu .cta:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.menu .cta.active::after{display:none}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:7px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* hero (home) */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--ink-3)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);background-size:46px 46px;opacity:.5;mask-image:radial-gradient(ellipse 80% 80% at 72% 30%,#000,transparent 75%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:84px 0 88px}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.07;letter-spacing:-.02em;margin:18px 0 0;color:#fff}
.hero h1 .hl{color:var(--signal)}
.hero p.lead{margin-top:22px;font-size:1.08rem;color:var(--muted-d);max-width:31em}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{font-weight:600;font-size:.96rem;padding:13px 22px;border-radius:8px;cursor:pointer;transition:all .15s;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:var(--signal);color:#1a1206}
.btn-primary:hover{background:#efa148}
.btn-ghost{border-color:var(--ink-3);color:#fff}
.btn-ghost:hover{border-color:var(--blue-soft);background:rgba(127,168,214,.08)}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* schematic */
.schema{position:relative;aspect-ratio:1/.92}
.schema svg{width:100%;height:100%;display:block;overflow:visible}
.node rect{fill:var(--ink-2);stroke:var(--ink-3);stroke-width:1.5;transition:stroke .25s}
.node text{font-family:var(--mono);font-size:11px;fill:#C7D2E0;letter-spacing:.03em}
.node.core rect{fill:#22344f;stroke:var(--signal)}
.node.core text{fill:#fff;font-weight:500}
.link{stroke:var(--ink-3);stroke-width:1.5}
.link.active{stroke:var(--blue-soft)}
.schema:hover .node rect{stroke:var(--blue-soft)}

/* page banner (inner pages) */
.banner{background:var(--ink);color:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--ink-3)}
.banner::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,var(--line-d) 1px,transparent 1px);background-size:46px 100%;opacity:.5;mask-image:linear-gradient(90deg,#000,transparent 70%)}
.banner-in{position:relative;padding:54px 0 50px}
.banner h1{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em;margin-top:12px;color:#fff}
.banner p{color:var(--muted-d);margin-top:12px;max-width:46em}

/* sections */
section{padding:78px 0}
.sec-head{max-width:48em}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(1.55rem,3vw,2.2rem);letter-spacing:-.015em;margin:14px 0 0;color:var(--ink)}
.sec-head p{margin-top:14px;color:var(--muted);font-size:1.04rem}
.lead-block{max-width:50em;font-size:1.08rem;color:var(--text)}
.lead-block strong{color:var(--ink)}

/* prose (rich content) */
.prose{max-width:52em}
.prose p{margin:0 0 16px;color:var(--text)}
.prose h3{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);margin:26px 0 12px}
.prose ul{list-style:none;margin:0 0 18px;padding:0}
.prose li{position:relative;padding-left:22px;margin-bottom:7px;color:var(--muted)}
.prose li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;background:var(--blue-soft);border-radius:2px;transform:rotate(45deg)}
.prose a{color:var(--blue);border-bottom:1px solid var(--blue-soft)}
.prose a:hover{color:var(--ink)}

/* module overview grid (home) */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.mod{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px;transition:transform .18s,box-shadow .18s,border-color .18s}
.mod:hover{transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(18,26,38,.18);border-color:var(--blue-soft)}
.mod .code{font-family:var(--mono);font-size:.72rem;color:var(--blue);letter-spacing:.08em}
.mod h3{font-family:var(--display);font-weight:600;font-size:1.14rem;margin:10px 0 8px;color:var(--ink)}
.mod p{font-size:.92rem;color:var(--muted)}

/* module detail layout */
.mod-layout{display:grid;grid-template-columns:230px 1fr;gap:48px;align-items:start}
.mod-nav{position:sticky;top:90px}
.mod-nav .label{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mod-nav a{display:block;font-size:.92rem;color:var(--muted);padding:7px 0 7px 14px;border-left:2px solid var(--line);transition:all .15s}
.mod-nav a:hover{color:var(--ink);border-color:var(--blue-soft)}
.mod-block{padding:34px 0;border-top:1px solid var(--line)}
.mod-block:first-child{border-top:none;padding-top:0}
.mod-block .code{font-family:var(--mono);font-size:.72rem;color:var(--blue);letter-spacing:.08em}
.mod-block h2{font-family:var(--display);font-weight:600;font-size:1.55rem;color:var(--ink);margin:8px 0 16px;letter-spacing:-.01em;scroll-margin-top:90px}

/* references */
.ref-cat{margin-top:18px}
.ref-cat:first-child{margin-top:0}
.cat-head{display:flex;align-items:baseline;gap:14px;margin:46px 0 22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cat-head:first-child{margin-top:0}
.cat-head h2{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--ink)}
.cat-head .num{font-family:var(--mono);font-size:.78rem;color:var(--signal)}
.ref-card{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:30px 30px;margin-bottom:18px;transition:border-color .15s,box-shadow .15s}
.ref-card:hover{border-color:var(--blue-soft);box-shadow:0 10px 26px -16px rgba(18,26,38,.2)}
.ref-card .rc-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.ref-card h3{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--ink)}
.ref-card .since{font-family:var(--mono);font-size:.72rem;color:var(--muted);white-space:nowrap}
.ref-card .desc{color:var(--muted);font-style:italic;margin-bottom:14px}
.ref-card .cover-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:18px 0 8px}
.ref-card ul{list-style:none;padding:0;margin:0 0 14px}
.ref-card li{position:relative;padding-left:20px;margin-bottom:6px;color:var(--text);font-size:.94rem}
.ref-card li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;background:var(--blue-soft);border-radius:2px;transform:rotate(45deg)}
.ref-card .web{font-family:var(--mono);font-size:.82rem;color:var(--blue)}
.ref-card .web:hover{color:var(--ink)}

/* download */
.dl-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:30px;display:flex;align-items:center;gap:24px;max-width:620px;flex-wrap:wrap}
.dl-ico{width:54px;height:54px;border-radius:11px;background:var(--ink);color:var(--signal);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.74rem;font-weight:500;flex-shrink:0}
.dl-meta{flex:1;min-width:180px}
.dl-meta h3{font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--ink)}
.dl-meta p{font-size:.9rem;color:var(--muted);margin-top:3px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:34px}
.contact-card .row{display:flex;flex-direction:column;gap:3px;padding:16px 0;border-top:1px solid var(--line)}
.contact-card .row:first-of-type{border-top:none;padding-top:0}
.contact-card .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact-card .v{font-size:1.05rem;color:var(--ink)}
.contact-card .v a{color:var(--blue)}
.contact-card .v a:hover{color:var(--ink)}

/* footer */
footer{background:var(--ink);color:var(--muted-d);padding:70px 0 34px;border-top:1px solid var(--ink-3)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-grid h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:16px;font-weight:500}
.foot-brand .mark{font-family:var(--display);font-weight:700;font-size:1.4rem;color:#fff}
.foot-brand p{margin-top:10px;max-width:26em;font-size:.92rem}
.foot-grid a{color:#D5DEE9;font-size:.94rem;display:block;margin-bottom:8px;transition:color .15s}
.foot-grid a:hover{color:var(--signal)}
.foot-line{font-size:.92rem;margin-bottom:6px}
.legal{margin-top:50px;padding-top:24px;border-top:1px solid var(--ink-3);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted)}

@media(max-width:880px){
  .menu{display:none}
  .burger{display:flex}
  .menu.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 0}
  .menu.open a{padding:13px 28px;width:100%}
  .menu.open a.active::after{display:none}
  .menu.open .cta{margin:8px 28px;text-align:center}
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:56px 0 60px}
  .schema{max-width:400px}
  .modules{grid-template-columns:1fr}
  .mod-layout{grid-template-columns:1fr;gap:24px}
  .mod-nav{position:static;display:flex;flex-wrap:wrap;gap:8px}
  .mod-nav .label{width:100%}
  .mod-nav a{border-left:none;border:1px solid var(--line);border-radius:7px;padding:7px 12px}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}