:root{
  --steel:#34618C; --steel-deep:#1F3B54; --orange:#E07B2E; --orange-deep:#B85F1B;
  --ink:#243441; --muted:#5D6E7A; --paper:#EFF3F6; --surface:#FFFFFF;
  --line:#D7DEE5; --manila:#E7DBC3; --manila-line:#CDBE9C;
  --dark-line:#36577A; --dark-panel:#26496A; --dark-text:#C2D2DF; --dark-muted:#AFC4D7;
  --disp:'Archivo',sans-serif; --body:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--steel-deep);margin:0}
p{margin:0}
img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px}
.eyebrow{font-size:14px;font-weight:600;color:var(--steel);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:15px;padding:13px 22px;border-radius:7px;border:1.5px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-deep)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--steel-deep)}
.btn-ghost:hover{border-color:var(--steel);color:var(--steel)}
.dark .btn-ghost{border-color:var(--dark-line);color:#fff}
.dark .btn-ghost:hover{border-color:#9DBBD6}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(239,243,246,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:11px}
.brand svg,.brand-mark{display:block}
.brand-mark{width:40px;height:32px;object-fit:contain}
.brand-name{font-family:var(--disp);font-weight:800;font-size:24px;color:var(--steel-deep);letter-spacing:-.03em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--steel-deep)}
.nav-links .btn{padding:10px 18px;font-size:14px;color:#fff}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:7px;width:40px;height:40px;cursor:pointer;color:var(--steel-deep)}

/* sections */
.section{padding:88px 0;border-top:1px solid var(--line)}
.section.dark,.dark{background:var(--steel-deep);border-top:none;color:var(--dark-text)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .eyebrow{color:#9DBBD6}
.dark p{color:var(--dark-text)}
.lead-h{font-size:clamp(27px,3.3vw,40px);max-width:18em}
.lead-p{font-size:18px;color:var(--muted);max-width:38em;margin-top:18px}
.dark .lead-p{color:var(--dark-text)}

/* hero */
.hero{padding:74px 0 84px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
.hero h1{font-size:clamp(34px,4.6vw,56px)}
.hero .lede{font-size:19px;color:var(--muted);margin:24px 0 32px;max-width:34em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* proof readout */
.readout{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border:1px solid var(--dark-line);border-radius:10px;overflow:hidden;background:var(--dark-panel)}
.metric{padding:26px 24px;border-right:1px solid var(--dark-line)}
.metric:last-child{border-right:none}
.metric .num{font-family:var(--disp);font-weight:800;font-size:40px;color:#fff;line-height:1;letter-spacing:-.03em}
.metric .num .u{font-size:18px;color:var(--orange);margin-left:2px}
.metric .lab{font-size:13px;color:var(--dark-muted);margin-top:12px;line-height:1.45}
.source-note{font-size:13px;color:var(--dark-muted);margin-top:16px}

/* differentiator */
.diff{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.doclist{margin:8px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.doclist li{font-size:15px;color:var(--steel-deep);padding:10px 0;border-bottom:1px solid var(--line)}

/* platform cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:26px}
.card h3{font-size:19px;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--muted)}
.card .dest{font-size:13px;color:var(--steel);margin-top:16px;display:block;border-top:1px solid var(--line);padding-top:12px}
.card .dest b{font-weight:600;color:var(--steel-deep)}

/* fleet */
.fleet-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:44px}
.trust{display:flex;flex-direction:column;margin-top:30px}
.trust .t{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--dark-line);align-items:flex-start}
.trust .t .tk{font-family:var(--disp);font-weight:700;font-size:15px;color:#fff;min-width:128px}
.trust .t .td{font-size:14px;color:var(--dark-text)}

/* read panel (result list) */
.read{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 6px;box-shadow:0 18px 40px -26px rgba(31,59,84,.5)}
.field{display:grid;grid-template-columns:minmax(96px,auto) 1fr auto 18px;align-items:center;gap:12px;padding:10px 14px;font-family:var(--mono);font-size:13px;border-radius:5px;transition:background .3s}
.field+.field{border-top:1px solid var(--paper)}
.field .k{color:var(--muted);font-size:12px}
.field .v{color:var(--steel-deep);font-weight:500;justify-self:start}
.field-row{display:flex;flex-direction:column;gap:1px;justify-self:start}
.field .conf{font-size:11px;color:var(--steel);font-weight:500}
.tick{width:18px;height:18px;border-radius:50%;background:var(--steel);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
.field.flag{background:#FCEEDF}
.field.flag .tick{background:var(--orange)}
.field.flag .conf{color:var(--orange-deep)}
.field.flag .flagnote{font-size:11px;color:var(--orange-deep);font-weight:500}
.field.pending{opacity:0}
.field.anim{opacity:0;transform:translateX(8px);animation:fieldin .45s ease forwards}
@keyframes fieldin{to{opacity:1;transform:none}}
.field.active{background:#EAF0F5}
.field.flag.active{background:#F9DFC4}
.created{margin-top:8px;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--steel);padding:9px 14px;opacity:0;transition:opacity .4s}
.created.show{opacity:1}
.created .dotcheck{width:16px;height:16px;border-radius:50%;background:var(--steel);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px}
.created.held{color:var(--orange-deep)}
.created.held .dotcheck{background:var(--orange)}

/* specimen viewer */
.scene{position:relative}
.specimen{position:relative;background:var(--manila);border:1px solid var(--manila-line);border-radius:6px;padding:14px;box-shadow:0 18px 40px -22px rgba(31,59,84,.5);overflow:hidden;max-height:560px}
.hero .specimen{max-height:340px}
.specimen svg{display:block;width:100%;height:auto;transition:filter .5s ease,transform .5s ease}
.specimen .page{background:#fff}
.specimen.worse svg{filter:contrast(.78) brightness(1.03) blur(.7px) saturate(.6);transform:rotate(-2.2deg) scale(1.02)}
.specimen .grain{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.specimen.worse .grain{opacity:.5}
.specimen .box{fill:none;stroke:var(--steel);stroke-width:1.8;opacity:0;transition:opacity .3s}
.specimen .box.on{opacity:1}
.specimen .box.flag{stroke:var(--orange)}
.specimen .box.lit{fill:rgba(52,97,140,.12)}
.specimen .box.flag.lit{fill:rgba(224,123,46,.16)}
.scanline{position:absolute;left:0;right:0;height:2px;background:var(--orange);box-shadow:0 0 10px var(--orange);opacity:0;pointer-events:none}
.scanline.run{animation:scan 1.6s ease-in-out forwards}
@keyframes scan{0%{top:6%;opacity:1}100%{top:94%;opacity:0}}
.beam{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--steel)}
.beam .bar{height:2px;flex:1;background:var(--line)}
.dark .beam .bar{background:var(--dark-line)}
.beam .lbl{font-size:13px;font-weight:600;color:var(--steel);white-space:nowrap}
.dark .beam .lbl{color:#9DBBD6}

/* demo controls */
.demo-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 26px}
.tab{font-family:var(--body);font-weight:500;font-size:14px;color:var(--dark-text);background:transparent;border:1px solid var(--dark-line);border-radius:7px;padding:10px 16px;cursor:pointer;transition:all .15s}
.tab:hover{border-color:#9DBBD6}
.tab[aria-selected="true"]{background:#fff;color:var(--steel-deep);border-color:#fff}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.demo-controls{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:14px}
.switch{position:relative;width:44px;height:24px;background:var(--dark-line);border-radius:12px;border:none;cursor:pointer;transition:background .2s;flex:none}
.switch[aria-pressed="true"]{background:var(--orange)}
.switch span{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s}
.switch[aria-pressed="true"] span{transform:translateX(20px)}
.demo-note{font-size:13.5px;margin-top:22px;padding-left:16px;border-left:2px solid var(--orange)}
.demo-status{font-family:var(--mono);font-size:12px;color:#9DBBD6;margin-top:14px;min-height:18px}
.replay{background:none;border:none;color:#9DBBD6;font-size:13px;cursor:pointer;padding:0;text-decoration:underline}

/* case / quote */
.quote{border-left:3px solid var(--orange);padding:6px 0 6px 24px;font-size:20px;line-height:1.5;color:var(--steel-deep);max-width:36em;margin-top:40px}
.quote cite{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:14px}

/* lead form */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
form.lead{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:30px}
.dark form.lead{background:var(--dark-panel);border-color:var(--dark-line)}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.f label{font-size:13.5px;font-weight:600;color:var(--steel-deep)}
.dark .f label{color:#fff}
.f input,.f select,.f textarea{font-family:var(--body);font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);width:100%}
.f textarea{min-height:96px;resize:vertical}
.f input:focus,.f textarea:focus,.f select:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)}
.f .hint{font-size:12.5px;color:var(--muted)}
.dark .f .hint{color:var(--dark-muted)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-msg{margin-top:14px;font-size:14px;padding:12px 14px;border-radius:7px;display:none}
.form-msg.ok{display:block;background:#E3F1E7;color:#1E5B33}
.form-msg.err{display:block;background:#FCEEDF;color:var(--orange-deep)}
.dark .form-msg.ok{background:#274E3A;color:#CDEBD6}

/* subpage prose */
.page-head{padding:72px 0 40px}
.page-head h1{font-size:clamp(32px,4vw,48px);max-width:18em}
.page-head .lede{font-size:19px;color:var(--muted);margin-top:22px;max-width:36em}
.prose{padding:20px 0 96px}
.prose h2{font-size:26px;margin:52px 0 16px}
.prose h3{font-size:19px;margin:32px 0 10px}
.prose p{margin:0 0 16px;font-size:16.5px;max-width:42em}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;max-width:42em}
.prose li{margin-bottom:8px}
.prose table{border-collapse:collapse;width:100%;max-width:760px;margin:16px 0 24px;font-size:15px}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600;color:var(--steel-deep);background:#fff}
.prose .callout{background:#fff;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:8px;padding:18px 22px;margin:24px 0;max-width:42em}
.prose .meta{font-size:13.5px;color:var(--muted)}
.prose .cta-band{margin:48px 0 28px}
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 8px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px}
.stat .num{font-family:var(--disp);font-weight:800;font-size:34px;color:var(--steel-deep);letter-spacing:-.03em;line-height:1}
.stat .lab{font-size:13.5px;color:var(--muted);margin-top:10px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.ba > div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px}
.ba h4{font-size:15px;margin-bottom:12px;color:var(--muted)}
.ba ul{margin:0;padding-left:18px}
.ba li{font-size:15px;margin-bottom:6px}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:36px 0;counter-reset:step}
.flow .st{background:#fff;border:1px solid var(--line);padding:18px 16px;position:relative}
.flow .st:first-child{border-radius:10px 0 0 10px}.flow .st:last-child{border-radius:0 10px 10px 0}
.flow .st+.st{border-left:none}
.flow .st h4{font-size:15px;margin-bottom:6px}
.flow .st p{font-size:13.5px;color:var(--muted);margin:0}

/* cta band */
.cta-band{background:var(--steel-deep);border-radius:16px;padding:60px 56px;text-align:center}
.cta-band h2{color:#fff;font-size:clamp(28px,3.6vw,42px);max-width:16em;margin:0 auto}
.cta-band p{color:var(--dark-text);font-size:17px;max-width:40em;margin:20px auto 32px}

/* footer */
footer{padding:54px 0 60px;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot .tag{font-size:14px;color:var(--muted);margin-top:12px;max-width:28em}
.foot h4{font-size:13.5px;margin-bottom:12px;color:var(--steel-deep)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot li a{font-size:14px;color:var(--muted)}
.foot li a:hover{color:var(--steel)}
.foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media (max-width:880px){
  .hero-grid,.diff,.fleet-grid,.demo-grid,.book-grid,.ba{grid-template-columns:1fr;gap:40px}
  .readout{grid-template-columns:1fr 1fr}
  .metric:nth-child(2){border-right:none}.metric:nth-child(1),.metric:nth-child(2){border-bottom:1px solid var(--dark-line)}
  .cards,.stat-strip{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow .st{border-radius:0!important}.flow .st+.st{border-left:1px solid var(--line);border-top:none}
  .flow .st:first-child{border-radius:10px 10px 0 0!important}.flow .st:last-child{border-radius:0 0 10px 10px!important}
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 28px 22px;gap:16px}
  .nav-links.open{display:flex}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .section{padding:64px 0}.hero{padding:48px 0 60px}
  .cta-band{padding:44px 26px}
  .foot{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .doclist{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .field.anim{animation:none;opacity:1;transform:none}
  .scanline.run{animation:none}
  .specimen svg,.specimen .box,.field,.created{transition:none}
  html{scroll-behavior:auto}
}
