/* creed.click. Layout: role-first hero with the DC coin, evidence grid, incident case studies, a dark full-bleed pipeline band, contact. */
:root{
  --ink:#0B1117; --paper:#F7F8FA; --slate:#64748B; --green:#16A34A; --amber:#F59E0B;
  --bg:#F5F7FA; --fg:#0B1117; --muted:#556175; --line:#DDE2E9; --card:#FFFFFF; --off:#D3DAE3;
  --ok-bg:#E6F5EA; --ok-fg:#11793A;
  --display:"Newsreader", "Source Serif 4", Georgia, serif;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --t-s:13px; --t-m:16px; --t-l:20px; --t-xl:clamp(40px,6.2vw,74px);
  --gap:clamp(64px,9vw,112px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1117; --fg:#E8ECF1; --muted:#98A4B6; --line:#1F2A37; --card:#111922; --off:#2A3542;
  --ok-bg:#10301D; --ok-fg:#4ADE80; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B1117; --fg:#E8ECF1; --muted:#98A4B6; --line:#1F2A37; --card:#111922; --off:#2A3542; --ok-bg:#10301D; --ok-fg:#4ADE80; color-scheme:dark}

:lang(ru){--display:"Source Serif 4", Georgia, serif}
:lang(ja){--display:"Newsreader","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; --sans:"IBM Plex Sans","Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif}
:lang(zh-Hans){--display:"Newsreader","Songti SC","Noto Serif SC","SimSun",serif; --sans:"IBM Plex Sans","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
:lang(ja) body,:lang(zh-Hans) body{line-height:1.8;line-break:strict}
:lang(ja) h1,:lang(zh-Hans) h1,:lang(ja) h2,:lang(zh-Hans) h2{letter-spacing:0;max-width:16em}
:lang(ja) .eyebrow,:lang(zh-Hans) .eyebrow,:lang(ja) .stg .n,:lang(zh-Hans) .stg .n{letter-spacing:.02em}
:lang(de) p,:lang(de) li,:lang(de) .row{hyphens:auto}
h1{overflow-wrap:break-word;hyphens:auto}
:lang(ru) h1{font-size:clamp(34px,6.2vw,74px)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t-m)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:var(--off);text-underline-offset:3px}
a:hover{text-decoration-color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:20}
.skip:focus{left:12px}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .who{display:grid;line-height:1.2}
.brand b{font:600 17px/1.2 var(--display)}
.brand span{font:500 12px/1.3 var(--mono);color:var(--muted)}
.site-head nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.site-head nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:none;color:var(--muted);font-size:14px}
.site-head nav a:hover{color:var(--fg)}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;font:500 13px/1 var(--mono);color:var(--muted);border-radius:8px}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.lang ul{position:absolute;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(11,17,23,.14);min-width:200px}
.lang li a{display:flex;justify-content:space-between;gap:12px;min-height:40px;align-items:center;padding:0 12px;border-radius:8px;text-decoration:none;font-size:14px}
.lang li a:hover{background:color-mix(in srgb,var(--green) 9%,transparent)}
.lang li a[aria-current]{color:var(--ok-fg);font-weight:600}
.lang li a small{font:500 11px/1 var(--mono);color:var(--muted)}
@media (max-width:720px){.site-head nav a.sec{display:none}.brand span{display:none}}

/* DC mark (header) */
.mark{flex:none;display:block}
.mark .bg{fill:var(--ink)}
.mark .track{fill:none;stroke:#1E2935;stroke-width:6}
.mark .ring{fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:100px 100px}
.mark .dc{fill:var(--paper);stroke:var(--paper);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:0}
.mark .acc{fill:var(--green);stroke:var(--ink);stroke-width:5}
.mark .rip{fill:none;stroke:var(--green);stroke-width:4;opacity:0}
.mark .acc,.mark .rip{transform-box:fill-box;transform-origin:center}

/* hero */
main{display:grid;gap:var(--gap);padding-block:clamp(40px,7vw,88px) 80px}
.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.75fr);gap:clamp(32px,6vw,88px);align-items:center}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr)}.hero .coin-stage{order:-1;justify-self:center}}
.status{display:inline-flex;align-items:center;gap:10px;background:var(--ok-bg);color:var(--ok-fg);font:500 14px/1.3 var(--sans);padding:9px 14px;border-radius:999px}
.led{width:9px;height:9px;border-radius:50%;background:var(--green);position:relative;flex:none}
.hero h1{font:600 var(--t-xl)/1.02 var(--display);letter-spacing:-.025em;margin:22px 0 18px;text-wrap:balance;max-width:16ch}
.hero .lede{font-size:clamp(17px,1.7vw,19px);color:var(--muted);margin:0;max-width:60ch}
.proofs{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.proofs li{padding:16px 18px 4px 0;display:grid;gap:6px;align-content:start}
.proofs li+li{padding-left:18px;border-left:1px solid var(--line)}
.proofs b{font:600 clamp(24px,2.6vw,32px)/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.proofs span{font-size:14px;color:var(--muted);line-height:1.45}
@media (max-width:640px){.proofs{grid-template-columns:minmax(0,1fr)}.proofs li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:10px;font:500 15px/1 var(--sans);text-decoration:none;border:1px solid var(--line)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.primary:hover{background:color-mix(in srgb,var(--fg) 86%,var(--green))}

/* coin: two embossed faces, an 18-layer reeded edge, a glint and a shadow driven by coin.js */
.coin-stage{perspective:760px;display:grid;justify-items:center;gap:10px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.coin{position:relative;width:clamp(220px,26vw,300px);aspect-ratio:1;border:0;padding:0;background:none;border-radius:50%;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));cursor:grab;-webkit-tap-highlight-color:transparent;outline-offset:10px}
.coin.is-grab{cursor:grabbing}
.coin .face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.coin .front{transform:translateZ(9px)}
.coin .back{transform:rotateY(180deg) translateZ(9px)}
.coin .face svg{width:100%;height:100%;display:block}
.coin .rim{position:absolute;inset:.4%;border-radius:50%;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.10) 50%,rgba(0,0,0,.45)),repeating-conic-gradient(#4A5869 0 1.1deg,#1A232E 1.1deg 2.2deg)}
.coin .rim:nth-of-type(1){transform:translateZ(-8.50px)}
.coin .rim:nth-of-type(2){transform:translateZ(-7.50px)}
.coin .rim:nth-of-type(3){transform:translateZ(-6.50px)}
.coin .rim:nth-of-type(4){transform:translateZ(-5.50px)}
.coin .rim:nth-of-type(5){transform:translateZ(-4.50px)}
.coin .rim:nth-of-type(6){transform:translateZ(-3.50px)}
.coin .rim:nth-of-type(7){transform:translateZ(-2.50px)}
.coin .rim:nth-of-type(8){transform:translateZ(-1.50px)}
.coin .rim:nth-of-type(9){transform:translateZ(-0.50px)}
.coin .rim:nth-of-type(10){transform:translateZ(0.50px)}
.coin .rim:nth-of-type(11){transform:translateZ(1.50px)}
.coin .rim:nth-of-type(12){transform:translateZ(2.50px)}
.coin .rim:nth-of-type(13){transform:translateZ(3.50px)}
.coin .rim:nth-of-type(14){transform:translateZ(4.50px)}
.coin .rim:nth-of-type(15){transform:translateZ(5.50px)}
.coin .rim:nth-of-type(16){transform:translateZ(6.50px)}
.coin .rim:nth-of-type(17){transform:translateZ(7.50px)}
.coin .rim:nth-of-type(18){transform:translateZ(8.50px)}
.coin .gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at var(--gx,35%) var(--gy,30%),rgba(255,255,255,.34),rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 58%),linear-gradient(115deg,rgba(255,255,255,0) calc(var(--gx,35%) - 18%),rgba(255,255,255,.10) var(--gx,35%),rgba(255,255,255,0) calc(var(--gx,35%) + 18%))}
.coin .back .gloss{background:radial-gradient(circle at var(--gxb,65%) var(--gy,30%),rgba(255,255,255,.30),rgba(255,255,255,.05) 32%,rgba(255,255,255,0) 58%)}
.coin-shadow{width:64%;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(11,17,23,.32),transparent);transform:translateX(var(--sx,0px)) scaleX(var(--sk,1));margin-top:6px}
.coin-hint{font:500 12px/1 var(--mono);color:var(--muted)}
.back-face text{font-family:var(--mono)}

/* timeline */
.timeline h2,.section-head h2{font:600 clamp(28px,3.4vw,40px)/1.1 var(--display);letter-spacing:-.015em;margin:0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.section-head p{margin:0;color:var(--muted)}
.tl{display:grid;grid-template-columns:24fr 26fr 6fr;gap:6px;margin-top:22px}
.tl .seg{display:grid;gap:10px;align-content:start;min-width:0}
.tl .seg i{display:block;height:10px;border-radius:5px;background:var(--off)}
.tl .seg:nth-child(2) i{background:var(--fg)}
.tl .seg:nth-child(3) i{background:var(--green)}
.tl .seg b{font:500 12px/1.2 var(--mono);color:var(--muted)}
.tl .seg span{font-size:14px;line-height:1.4}
@media (max-width:720px){.tl{grid-template-columns:minmax(0,1fr)}.tl .seg i{width:100%}}

.strip{display:flex;gap:3px;height:38px;align-items:flex-end;margin-top:22px}
.strip span{flex:1;height:100%;border-radius:2px;background:var(--green);transform-origin:bottom}
.tl{margin-top:12px}
.tl .seg i{display:none}

/* evidence: foldable cards. Opening one runs a small health check: the rail fills green, rows arrive in order and each dot passes. */
:root{interpolate-size:allow-keywords}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:stretch}
.card{grid-column:span 6;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
@media (max-width:900px){.card{grid-column:span 12}}
.card:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
.card[open]{border-color:color-mix(in srgb,var(--green) 45%,var(--line));box-shadow:0 18px 44px -24px rgba(11,17,23,.35)}
.card summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:22px 24px;min-height:44px}
.card summary::-webkit-details-marker{display:none}
.card .top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.card h3{font:600 22px/1.2 var(--display);margin:0}
.card .metric{font:500 13px/1.3 var(--mono);color:var(--ok-fg);background:var(--ok-bg);padding:4px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.card .tag{grid-column:1;font:500 12px/1.4 var(--mono);color:var(--muted)}
.toggle{grid-column:2;grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);position:relative;transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
.toggle::before,.toggle::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--fg);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s}
.toggle::after{transform:rotate(90deg)}
.card summary:hover .toggle{border-color:var(--green)}
.card[open] .toggle{transform:rotate(180deg);background:var(--green);border-color:var(--green)}
.card[open] .toggle::before,.card[open] .toggle::after{background:#fff}
.card[open] .toggle::after{transform:rotate(0deg)}
.card .body{padding:0 24px 22px 24px;position:relative}
.card .body::before{content:"";position:absolute;left:24px;top:0;bottom:22px;width:2px;border-radius:2px;background:var(--green);transform-origin:top;transform:scaleY(1)}
.card ul{margin:0;padding:0 0 0 22px;list-style:none;display:grid;gap:10px}
.card li{font-size:15px;line-height:1.5;padding-left:16px;position:relative;overflow-wrap:break-word}
.card li::before{content:"";position:absolute;left:-1px;top:.58em;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--card)}
.card li::after{content:"";position:absolute;left:-1px;top:.58em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--green);opacity:0}
.card .body::before{left:48px}
.card a{text-decoration-color:var(--green)}
@media (prefers-reduced-motion: no-preference){
  .card::details-content{block-size:0;overflow:clip;transition:block-size .5s cubic-bezier(.2,.8,.2,1),content-visibility .5s allow-discrete}
  .card[open]::details-content{block-size:auto}
  .card[open] .body::before{animation:rail .7s cubic-bezier(.4,0,.2,1) both}
  .card[open] li{animation:rowin .5s cubic-bezier(.2,.8,.2,1) both}
  .card[open] li::before{animation:dotpass .5s ease both}
  .card[open] li::after{animation:dotping .9s ease-out both}
  .card[open] li:nth-child(1),.card[open] li:nth-child(1)::before,.card[open] li:nth-child(1)::after{animation-delay:.12s}
  .card[open] li:nth-child(2),.card[open] li:nth-child(2)::before,.card[open] li:nth-child(2)::after{animation-delay:.26s}
  .card[open] li:nth-child(3),.card[open] li:nth-child(3)::before,.card[open] li:nth-child(3)::after{animation-delay:.4s}
  .card[open] li:nth-child(4),.card[open] li:nth-child(4)::before,.card[open] li:nth-child(4)::after{animation-delay:.54s}
  .card[open] .metric{animation:metricpop .6s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes rail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rowin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dotpass{0%{background:var(--off);transform:scale(.6)}60%{transform:scale(1.25)}100%{background:var(--green);transform:scale(1)}}
@keyframes dotping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@keyframes metricpop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}

/* cursor light: coin.js hands every card the pointer position in its own coordinates.
   The hovered card gets a soft green wash; the border of every card near the cursor lights up, so the light crosses the gaps. */
.card,.inc{--mx:-999px;--my:-999px}
.card summary,.inc summary{position:relative}
.card::before,.inc::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--green) 9%,transparent),transparent 65%)}
.card::after,.inc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx) var(--my),var(--green),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.card:hover::before,.inc:hover::before,.grid:hover .card::after,.pgrid:hover .card::after,.incs:hover .inc::after{opacity:1}
/* B: the hovered card leans toward the cursor, like the coin. C: its toggle is pulled toward the cursor, and hovering
   re-runs the health check: the metric pings on a closed card, the row dots ping in order on an open one. */
.card,.inc{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:border-color .3s,box-shadow .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.card.is-near,.inc.is-near{transition:border-color .3s,box-shadow .3s,transform .12s linear}
.toggle{translate:var(--tx,0px) var(--ty,0px);transition:transform .45s cubic-bezier(.2,.8,.2,1),translate .2s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
.card .metric,.inc .impact{position:relative}
.card .metric::after,.inc .impact::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--green);opacity:0;pointer-events:none}
@media (prefers-reduced-motion: no-preference) and (hover: hover){
  .card:not([open]):hover .metric::after,.inc:not([open]):hover .impact::after{animation:chipping 1.1s ease-out .05s 2 both}
  .card[open]:hover li::after{animation:hoverping .8s ease-out both}
  .card[open]:hover li:nth-child(2)::after{animation-delay:.12s}.card[open]:hover li:nth-child(3)::after{animation-delay:.24s}.card[open]:hover li:nth-child(4)::after{animation-delay:.36s}
  .inc[open]:hover .s-fix::after{animation:hoverping .8s ease-out both}
}
@keyframes chipping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.6)}}
@keyframes hoverping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@media (prefers-reduced-motion: reduce),(hover: none){.card::before,.card::after,.inc::before,.inc::after{display:none}.card,.inc{transform:none}.toggle{translate:none}}

/* incidents: foldable cases. Opening one replays it: the alarm pings amber, the rail runs from amber to green, the fix lands and the badge resolves. */
:root{--warn-bg:#FEF3C7;--warn-fg:#92400E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--warn-bg:#3A2A0A;--warn-fg:#FBBF24}}
:root[data-theme="dark"]{--warn-bg:#3A2A0A;--warn-fg:#FBBF24}
.incs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
@media (max-width:900px){.incs{grid-template-columns:minmax(0,1fr)}}
.inc{position:relative;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.inc:hover{border-color:color-mix(in srgb,var(--amber) 40%,var(--line))}
.inc[open]{border-color:color-mix(in srgb,var(--green) 45%,var(--line));box-shadow:0 18px 44px -24px rgba(11,17,23,.35)}
.inc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:20px 22px}
.inc summary::-webkit-details-marker{display:none}
.inc .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inc .kind{font:500 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.inc .res{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ok-fg);background:var(--ok-bg);padding:5px 7px;border-radius:5px}
.inc h3{grid-column:1;font:600 20px/1.25 var(--display);margin:0;text-wrap:balance}
.inc .impact{grid-column:1;justify-self:start;font:500 12.5px/1.3 var(--mono);color:var(--ok-fg);background:var(--ok-bg);padding:4px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.inc .toggle{grid-row:1 / span 3}
.inc summary:hover .toggle{border-color:var(--amber)}
.inc[open] .toggle{transform:rotate(180deg);background:var(--green);border-color:var(--green)}
.inc[open] .toggle::before,.inc[open] .toggle::after{background:#fff}
.inc[open] .toggle::after{transform:rotate(0deg)}
.inc .body{padding:0 22px 22px;position:relative}
.inc ol{list-style:none;margin:0;padding:0 0 0 26px;display:grid;gap:14px;position:relative}
.inc ol::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(var(--amber),var(--slate) 50%,var(--green));transform-origin:top}
.inc li{position:relative}
.inc li::before{content:"";position:absolute;left:-26px;top:3px;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 3px var(--card)}
.inc li::after{content:"";position:absolute;left:-26px;top:3px;width:10px;height:10px;border-radius:50%;box-sizing:border-box;border:1.5px solid;opacity:0}
.inc .s-det::before{background:var(--amber)}.inc .s-det::after{border-color:var(--amber)}
.inc .s-inv::before{background:var(--slate)}.inc .s-inv::after{border-color:var(--slate)}
.inc .s-fix::before{background:var(--green)}.inc .s-fix::after{border-color:var(--green)}
.inc li b{display:block;font:500 11.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.inc .s-fix b{color:var(--ok-fg)}
.inc li p{margin:0;font-size:15px;line-height:1.5;overflow-wrap:break-word}
@media (prefers-reduced-motion: no-preference){
  .inc::details-content{block-size:0;overflow:clip;transition:block-size .55s cubic-bezier(.2,.8,.2,1),content-visibility .55s allow-discrete}
  .inc[open]::details-content{block-size:auto}
  .inc[open]{animation:incres 1.3s ease both}
  .inc[open] ol::before{animation:rail 1s cubic-bezier(.4,0,.2,1) .05s both}
  .inc[open] li{animation:rowin .5s cubic-bezier(.2,.8,.2,1) both}
  .inc[open] .s-det{animation-delay:.08s}.inc[open] .s-inv{animation-delay:.38s}.inc[open] .s-fix{animation-delay:.68s}
  .inc[open] .s-det::after{animation:alarm .7s ease-out .1s 2 both}
  .inc[open] .s-fix::before{animation:fixpop .5s cubic-bezier(.2,.8,.2,1) .7s both}
  .inc[open] .s-fix::after{animation:dotping .9s ease-out .8s both}
  .inc[open] .res{animation:resolve 1.3s steps(1,end) both}
}
@keyframes incres{0%,45%{border-color:color-mix(in srgb,var(--amber) 70%,var(--line))}100%{border-color:color-mix(in srgb,var(--green) 45%,var(--line))}}
@keyframes alarm{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@keyframes fixpop{0%{transform:scale(0)}60%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes resolve{0%{color:var(--warn-fg);background:var(--warn-bg)}60%,100%{color:var(--ok-fg);background:var(--ok-bg)}}

/* pipeline band */
.band{background:var(--ink);color:#D6DEE8;padding-block:clamp(56px,8vw,96px)}
.band .section-head h2{color:#fff}
.band .section-head p{color:#8D9AAE}
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.stg{border:1.5px solid #2A3644;border-radius:12px;padding:14px;display:grid;gap:6px;align-content:start;background:#0F1720;min-width:0}
.stg .n{font:500 11px/1 var(--mono);color:#7F8DA3;text-transform:uppercase;letter-spacing:.08em}
.stg b{font-weight:600;color:#fff;font-size:15px;hyphens:auto;overflow-wrap:break-word}
.stg p{margin:0;font:12.5px/1.5 var(--mono);color:#A9B5C6;hyphens:auto;overflow-wrap:break-word}
.stg.ok,.stages .stg{border-color:var(--green)}
.ptrack{height:4px;border-radius:4px;background:var(--green);margin-top:18px}
.plog{font:13px/1.6 var(--mono);color:#A9B5C6;margin:16px 0 0}
.plog b{color:#4ADE80;font-weight:500}
.plat-head{margin:56px 0 18px}
.plat-head h3{font:600 clamp(22px,2.6vw,30px)/1.15 var(--display);color:#fff;margin:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;align-items:stretch}
.pgrid .card{grid-column:auto}
.band .card{--card:#0F1720;background:#0F1720;border-color:#2A3644;color:#D6DEE8}
.band .card:hover{border-color:color-mix(in srgb,var(--green) 45%,#2A3644)}
.band .card[open]{border-color:color-mix(in srgb,var(--green) 60%,#2A3644);box-shadow:0 18px 44px -24px rgba(0,0,0,.8)}
.band .card h3{color:#fff;font-size:20px}
.band .card .metric{color:#4ADE80;background:#10301D}
.band .card .toggle{grid-row:1;border-color:#2A3644}
.band .card .toggle::before,.band .card .toggle::after{background:#E8ECF1}
.band .card li{color:#C9D3E0;font-size:14.5px}
.band .card li::before{--off:#2A3644}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;border-top:1px solid var(--line);padding-top:36px}
.contact h2{font:600 clamp(28px,3.4vw,40px)/1.1 var(--display);margin:0 0 8px}
.contact p{margin:0;color:var(--muted);max-width:56ch}
.contact .links{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.contact{grid-template-columns:minmax(0,1fr)}}
.foot{font:500 12px/1.6 var(--mono);color:var(--muted)}

/* motion: opt-in only */
@media (prefers-reduced-motion: no-preference){
  /* header logo, live: the DC is inked then filled, the SLO ring closes, a status dot lands where it closes and pulses, then the cycle repeats */
  .mark.live .dc{animation:liveink 9s ease-in-out infinite}
  .mark.live .ring{transform:rotate(-90deg);animation:livering 9s cubic-bezier(.6,0,.2,1) infinite}
  .mark.live .acc{animation:livedot 9s cubic-bezier(.2,.8,.2,1) infinite}
  .mark.live .rip{animation:liverip 9s ease-out infinite}
  .mark.play .dc{stroke-dashoffset:1;fill:transparent;animation:trace 2.6s ease-in-out .2s forwards}
  .mark.play .ring{stroke-dashoffset:1;animation:ring 2.4s cubic-bezier(.6,0,.2,1) .5s forwards}
  .led::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);animation:ripple 2.2s ease-out infinite}
  .coin .front .dc{stroke-dashoffset:1;fill:transparent;animation:trace 2.8s ease-in-out .5s forwards}
  .coin .front .ring{stroke-dashoffset:1;animation:ring 2.6s cubic-bezier(.6,0,.2,1) .8s forwards}
  .strip span{animation:rise 4.5s ease-out infinite}
  .stages .stg{border-color:#2A3644;animation:stage 9s steps(1,end) infinite}
  .stages .stg:nth-child(2){animation-delay:1s}.stages .stg:nth-child(3){animation-delay:2s}.stages .stg:nth-child(4){animation-delay:3s}
  .stages .stg:nth-child(5){animation-delay:4s}.stages .stg:nth-child(6){animation-delay:5s}.stages .stg:nth-child(7){animation-delay:6s}
  .ptrack{transform-origin:left;animation:fill 9s linear infinite}
}
@keyframes trace{0%{stroke-dashoffset:1;fill:transparent}65%{stroke-dashoffset:0;fill:transparent}100%{stroke-dashoffset:0;fill:var(--paper)}}
@keyframes ring{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes liveink{0%{stroke-dashoffset:1;fill:transparent;opacity:1}24%{stroke-dashoffset:0;fill:transparent}32%,93%{stroke-dashoffset:0;fill:var(--paper);opacity:1}100%{stroke-dashoffset:0;fill:var(--paper);opacity:0}}
@keyframes livering{0%,26%{stroke-dashoffset:1;opacity:1}46%,93%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes livedot{0%,45%{transform:scale(0)}50%{transform:scale(1.45)}55%,93%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes liverip{0%,50%{opacity:0;transform:scale(1)}51%{opacity:.9;transform:scale(1)}66%{opacity:0;transform:scale(2.6)}67%{opacity:0;transform:scale(1)}70%{opacity:.8;transform:scale(1)}85%,100%{opacity:0;transform:scale(2.6)}}
@keyframes ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.8);opacity:0}}
@keyframes stage{0%{border-color:#2A3644;box-shadow:none}1%{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.18)}11%,100%{border-color:var(--green);box-shadow:none}}
@keyframes rise{0%{transform:scaleY(.12);opacity:.35}18%,100%{transform:scaleY(1);opacity:1}}
@keyframes fill{0%{transform:scaleX(0)}78%,100%{transform:scaleX(1)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.end{padding-block:64px 48px}

.strip span:nth-child(1){animation-delay:0ms}.strip span:nth-child(2){animation-delay:18ms}.strip span:nth-child(3){animation-delay:36ms}.strip span:nth-child(4){animation-delay:54ms}.strip span:nth-child(5){animation-delay:72ms}.strip span:nth-child(6){animation-delay:90ms}.strip span:nth-child(7){animation-delay:108ms}.strip span:nth-child(8){animation-delay:126ms}.strip span:nth-child(9){animation-delay:144ms}.strip span:nth-child(10){animation-delay:162ms}.strip span:nth-child(11){animation-delay:180ms}.strip span:nth-child(12){animation-delay:198ms}.strip span:nth-child(13){animation-delay:216ms}.strip span:nth-child(14){animation-delay:234ms}.strip span:nth-child(15){animation-delay:252ms}.strip span:nth-child(16){animation-delay:270ms}.strip span:nth-child(17){animation-delay:288ms}.strip span:nth-child(18){animation-delay:306ms}.strip span:nth-child(19){animation-delay:324ms}.strip span:nth-child(20){animation-delay:342ms}.strip span:nth-child(21){animation-delay:360ms}.strip span:nth-child(22){animation-delay:378ms}.strip span:nth-child(23){animation-delay:396ms}.strip span:nth-child(24){animation-delay:414ms}.strip span:nth-child(25){animation-delay:432ms}.strip span:nth-child(26){animation-delay:450ms}.strip span:nth-child(27){animation-delay:468ms}.strip span:nth-child(28){animation-delay:486ms}.strip span:nth-child(29){animation-delay:504ms}.strip span:nth-child(30){animation-delay:522ms}.strip span:nth-child(31){animation-delay:540ms}.strip span:nth-child(32){animation-delay:558ms}.strip span:nth-child(33){animation-delay:576ms}.strip span:nth-child(34){animation-delay:594ms}.strip span:nth-child(35){animation-delay:612ms}.strip span:nth-child(36){animation-delay:630ms}.strip span:nth-child(37){animation-delay:648ms}.strip span:nth-child(38){animation-delay:666ms}.strip span:nth-child(39){animation-delay:684ms}.strip span:nth-child(40){animation-delay:702ms}.strip span:nth-child(41){animation-delay:720ms}.strip span:nth-child(42){animation-delay:738ms}.strip span:nth-child(43){animation-delay:756ms}.strip span:nth-child(44){animation-delay:774ms}.strip span:nth-child(45){animation-delay:792ms}.strip span:nth-child(46){animation-delay:810ms}.strip span:nth-child(47){animation-delay:828ms}.strip span:nth-child(48){animation-delay:846ms}.strip span:nth-child(49){animation-delay:864ms}.strip span:nth-child(50){animation-delay:882ms}.strip span:nth-child(51){animation-delay:900ms}.strip span:nth-child(52){animation-delay:918ms}.strip span:nth-child(53){animation-delay:936ms}.strip span:nth-child(54){animation-delay:954ms}.strip span:nth-child(55){animation-delay:972ms}.strip span:nth-child(56){animation-delay:990ms}