*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lime);color:var(--bg);
  font-family:var(--mono);font-size:.8rem;padding:.7rem 1.1rem;border-radius:0 0 4px 0}
.skip:focus{left:0}
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--lime);z-index:60;
  box-shadow:0 0 10px var(--lime);transition:width .1s linear}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.08rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}

body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle,rgba(234,75,113,0.10) 1.4px,transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 110% 75% at 50% 0%,#000 25%,transparent 78%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);position:relative;z-index:1}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase}

nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(12px);
  background:var(--nav-bg);border-bottom:1px solid transparent;transition:border-color .3s}
nav.scrolled{border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:1rem clamp(1.25rem,4vw,2.5rem);
  display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-0.01em;display:flex;align-items:center;gap:.5rem}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a:not(.nav-cta){font-size:.9rem;color:var(--muted);transition:color .2s;position:relative}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-links a:not(.nav-cta).active{color:var(--ink)}
.nav-links a:not(.nav-cta).active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--lime);box-shadow:0 0 8px var(--lime);border-radius:2px}
.nav-cta{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bg)!important;background:var(--lime);padding:.6rem 1.1rem;border-radius:2px;
  font-weight:700;transition:transform .2s var(--ease),box-shadow .2s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(234,75,113,.30)}
@media(max-width:720px){.nav-links a:not(.nav-cta){display:none}}

.hero{padding:clamp(9.5rem,7rem + 9vw,13rem) 0 var(--space);position:relative}

.hero .reveal{opacity:0;transform:translateY(22px);animation:riseIn .85s var(--ease) forwards}
.hero .pill{animation-delay:.05s}
.hero h1{animation-delay:.15s}
.hero .lede{animation-delay:.28s}
.hero .cta-row{animation-delay:.4s;justify-content:flex-start;text-align:left}
.hero .editor{animation-delay:.52s}
.hero .metrics{animation-delay:.62s}
@keyframes riseIn{to{opacity:1;transform:none}}
.pill{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--green);
  border:1px solid var(--line-bright);border-radius:100px;padding:.45rem .9rem;margin-bottom:2rem}
.pill .live{width:7px;height:7px;border-radius:50%;background:var(--lime);position:relative}
.pill .live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--lime);animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
h1{font-family:var(--display);font-weight:800;line-height:0.98;letter-spacing:-0.03em;
  font-size:clamp(2.15rem,1.1rem + 6vw,6rem);max-width:14ch;margin-bottom:1.6rem;overflow-wrap:break-word}
h1 .accent{color:var(--lime);font-style:italic;position:relative}
.lede{font-size:clamp(1.1rem,1rem + 0.5vw,1.4rem);color:var(--muted);max-width:54ch;line-height:1.55;margin-bottom:2.5rem}
.lede b{color:var(--ink);font-weight:500}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn{font-family:var(--mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  padding:1rem 1.6rem;border-radius:3px;transition:transform .25s var(--ease),box-shadow .25s,background .25s;display:inline-flex;align-items:center;gap:.6rem}
.btn-primary{background:var(--lime);color:var(--bg)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(234,75,113,.32)}
.btn-ghost{border:1px solid var(--line-bright);color:var(--ink)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-3px)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translatex(4px)}

/* Hero two-column layout (v1.1): copy left, compact editor right at >=1024px */
.hero-inner{display:block}
@media(min-width:1024px){
  .hero-inner{display:grid;grid-template-columns:58fr 42fr;gap:clamp(2rem,2.5vw,3rem);align-items:center}
  /* Tighten vertical rhythm so copy/CTA (left) and the editor (right) both sit above the fold (HERO-08). Two-column only — single-column hero keeps its original scale. */
  .hero{padding:clamp(5rem,4rem + 2vw,6.5rem) 0 var(--space)}
  .hero h1{font-size:clamp(2.15rem,1rem + 3.2vw,4rem);margin-bottom:1.2rem}
  .hero .lede{margin-bottom:1.6rem}
}
@media(max-width:1023px){
  .hero .editor{display:none}
}

.editor{margin-top:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-strong)}
.ed-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .9rem;
  background:var(--bg-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ed-bar--bottom{border-bottom:none;border-top:1px solid var(--line);justify-content:flex-end}
.ed-bar .left{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.ed-dots{display:flex;gap:.4rem}
.ed-dots i{width:11px;height:11px;border-radius:50%;display:block}
.ed-tab{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:.28rem .6rem;font-size:.72rem}
.ed-bar .right{display:flex;align-items:center;gap:.85rem}
.ed-zoom{font-family:var(--mono);font-size:.7rem;color:var(--faint)}
.ed-run{font-family:var(--mono);font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--coral-strong);color:#fff;border:none;border-radius:6px;padding:.5rem .9rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.45rem;transition:transform .2s var(--ease),box-shadow .2s,filter .2s}
.ed-run:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(234,75,113,.4);filter:brightness(1.06)}
.ed-run:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.canvas{position:relative;height:clamp(300px,28vw,340px);overflow-x:auto;overflow-y:hidden;
  background-color:var(--canvas);
  background-image:radial-gradient(circle,var(--canvas-dot) 1.3px,transparent 1.3px);
  background-size:21px 21px}
.cv{position:relative;height:100%;min-width:460px}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wire{fill:none;stroke:var(--wire);stroke-width:2.5;transition:stroke .25s}
.wire.run{stroke:var(--coral)}
.pulse{fill:var(--coral)}

.gnode{position:absolute;width:80px;cursor:grab;user-select:none;z-index:2;touch-action:none;
  display:flex;flex-direction:column;align-items:center}
.gnode:active{cursor:grabbing}
.gnode .body{position:relative;width:52px;height:52px;border-radius:12px;background:var(--canvas-node);
  border:1.5px solid var(--canvas-border);display:grid;place-items:center;color:var(--coral);
  box-shadow:0 2px 7px rgba(20,20,30,.10);transition:box-shadow .25s,border-color .25s}
.gnode:hover .body{border-color:#cfcfd7;box-shadow:0 8px 20px rgba(20,20,30,.16)}
.gnode.run .body{border-color:var(--coral);box-shadow:0 0 0 2px rgba(234,75,113,.3),0 10px 24px rgba(234,75,113,.25)}
.gnode .body>svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.gnode.trigger .body{border-radius:26px 12px 12px 26px;background:var(--coral);border-color:var(--coral);color:#fff}

.gnode[data-n="validate"] .body{color:#3b82f6}
.gnode[data-n="process"]  .body{color:#7c5cfc}
.gnode[data-n="deliver"]  .body{color:#10b981}
.gnode[data-n="audit"]    .body{color:#f59e0b}
.gnode[data-n="fallback"] .body{color:#ea4b71}

.gnode .label{margin-top:8px;text-align:center;width:90px;pointer-events:none}
.gnode .label b{font-family:var(--body);font-weight:600;font-size:.76rem;color:var(--canvas-ink);display:block;line-height:1.18}
.gnode .label span{font-family:var(--mono);font-size:.58rem;color:var(--canvas-muted);display:block;margin-top:1px}

.gnode .io{position:absolute;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;
  background:var(--canvas-node);border:2px solid #b6b6c0;z-index:3}
.gnode .io.in{left:-5px}
.gnode .io.out{right:-5px}

.gnode .io.out-main{right:-5px;top:35%}
.gnode .io.out-err{right:-5px;top:67%;border-color:#e26b88}
.gnode.run .io{border-color:var(--coral)}
.gnode.run .io.out-err{border-color:#e26b88}        
.wire.err{stroke:#e88aa1;stroke-width:2;stroke-dasharray:5 5}
.errlabel{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.55rem;color:#d24d6e;
  background:#fdeef2;border:1px solid #f4c2cf;border-radius:100px;padding:.06rem .4rem;z-index:1;white-space:nowrap;pointer-events:none}

.gnode .check{position:absolute;top:-8px;right:-8px;width:19px;height:19px;border-radius:50%;background:#22c55e;
  display:grid;place-items:center;opacity:0;transform:scale(.3);transition:opacity .25s,transform .3s var(--ease);z-index:4;
  box-shadow:0 1px 4px rgba(0,0,0,.2)}
.gnode .check svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.gnode.done .check{opacity:1;transform:scale(1)}

.gnode .addbtn{position:absolute;left:80px;top:26px;transform:translateY(-50%);width:21px;height:21px;border-radius:6px;
  border:1.5px dashed #bcbcc4;color:#a6a6ae;display:grid;place-items:center;font-family:var(--body);font-size:15px;line-height:1;
  background:rgba(255,255,255,.6)}
.gnode .addbtn::before{content:"";position:absolute;left:-15px;top:50%;width:15px;height:2px;background:#cfcfd7}

.itembadge{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.56rem;color:#16a34a;
  background:#eafaf0;border:1px solid #b6e6c8;border-radius:100px;padding:.08rem .4rem;z-index:1;white-space:nowrap;
  opacity:0;transition:opacity .3s;pointer-events:none}
.itembadge.show{opacity:1}
.ed-hint{position:absolute;left:11px;bottom:9px;font-family:var(--mono);font-size:.63rem;color:#9a9aa2;
  background:rgba(255,255,255,.72);padding:.22rem .5rem;border-radius:5px;pointer-events:none;z-index:4}
@media(max-width:600px){.gnode{width:132px;padding:.5rem}.gnode .meta span{font-size:.56rem}}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:var(--space)}
.metric{background:var(--bg);padding:2rem 1.5rem;text-align:center}
.metric .n{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,1.5rem + 2.5vw,3.4rem);
  line-height:1;letter-spacing:-0.02em;background:linear-gradient(160deg,var(--ink),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.metric .l{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:.6rem}
@media(max-width:640px){.metrics{grid-template-columns:1fr}}

section{padding:var(--space) 0;position:relative}

section + section,.hero + section{padding-top:0}
.eyebrow{font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--lime);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--lime)}
h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.4rem + 3vw,3.4rem);letter-spacing:-0.025em;line-height:1.05;max-width:18ch;margin-bottom:1rem}
.sec-lede{color:var(--muted);max-width:56ch;font-size:1.08rem;margin-bottom:3.5rem}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media(max-width:760px){.svc-grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:2rem;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,background .35s}
.card::after{content:"";position:absolute;inset:0;border-radius:10px;padding:1px;background:linear-gradient(140deg,var(--lime),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.card:hover{transform:translateY(-5px);background:var(--surface-2)}
.card:hover::after{opacity:1}
.card .num{font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.card h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-0.01em;margin:.8rem 0 .7rem;display:flex;align-items:center;gap:.6rem}
.card p{color:var(--muted);font-size:.98rem;line-height:1.6}
.card .win{color:var(--ink);font-weight:600;font-size:1.06rem;line-height:1.4;margin:0 0 .55rem}
.card .tag{display:inline-block;margin-top:1.2rem;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--green);border:1px solid var(--line-bright);border-radius:100px;padding:.35rem .8rem}

.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media(max-width:760px){.work-grid{grid-template-columns:1fr}}
.work{border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:1.8rem;transition:border-color .3s,transform .3s var(--ease)}
.work:hover{border-color:var(--line-bright);transform:translateY(-4px)}
.work .st{font-family:var(--mono);font-size:.7rem;color:var(--lime);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:.45rem}
.work .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.work h3{font-family:var(--display);font-weight:700;font-size:1.4rem;margin:.9rem 0 .5rem;letter-spacing:-0.01em}
.work p{color:var(--muted);font-size:.95rem;line-height:1.55}
.work .result{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:.6rem}
.work .result .big{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--lime);letter-spacing:-0.02em}
.work .result .desc{font-size:.85rem;color:var(--muted)}
.work .stk{margin-top:1rem;font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.work .case-link{display:inline-block;margin-top:.85rem;font-family:var(--mono);font-size:.72rem;color:var(--green);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--duration-fast,150ms) var(--ease)}
.work .case-link:hover{border-color:var(--green)}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:0}}
.step{position:relative;padding:1.6rem 1.3rem;border-top:2px solid var(--line)}
.step.first{border-image:linear-gradient(90deg,var(--lime),var(--line)) 1}
.step .k{font-family:var(--mono);font-size:.74rem;color:var(--lime);counter-increment:s}
.step .k::before{content:"0" counter(s) " / "}
.step h4{font-family:var(--display);font-weight:700;font-size:1.15rem;margin:.6rem 0 .4rem}
.step p{font-size:.88rem;color:var(--muted);line-height:1.5}

.pattern{border:1px solid var(--line);border-radius:12px;background:
  radial-gradient(circle at 0% 0%,rgba(184,255,60,.06),transparent 50%),var(--surface);padding:clamp(2rem,1.5rem + 3vw,3.5rem)}
.pattern .q{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,1rem + 2vw,2.2rem);line-height:1.25;letter-spacing:-0.02em;max-width:24ch}
.pattern .q em{color:var(--lime);font-style:normal}
.pattern .by{margin-top:1.5rem;font-family:var(--mono);font-size:.8rem;color:var(--muted)}

.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:760px){.stack-grid{grid-template-columns:1fr}}
.stk-col h4{font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-size:.85rem;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:.4rem .75rem;background:var(--bg-2);transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--lime);color:var(--lime)}

.faq-grid{display:grid;gap:.8rem;max-width:820px}
details.faq{border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden;transition:border-color .3s}
details.faq[open]{border-color:var(--line-bright)}
details.faq summary{list-style:none;cursor:pointer;padding:1.3rem 1.5rem;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .pl{font-family:var(--mono);color:var(--lime);font-size:1.3rem;transition:transform .3s var(--ease);flex:0 0 auto}
details.faq[open] summary .pl{transform:rotate(45deg)}
details.faq .ans{padding:0 1.5rem 1.4rem;color:var(--muted);font-size:.97rem;line-height:1.65;max-width:64ch}
details.faq .ans b{color:var(--ink);font-weight:500}

.trust-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.5rem}
.trust-pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;color:var(--ink);
  border:1px solid var(--line);border-radius:100px;padding:.45rem .9rem;background:var(--surface)}
.trust-pill .d{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.trust-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2.6rem}
.tcard{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;transition:border-color .3s}
.tcard:hover{border-color:var(--line-bright)}
.tcard .ic{width:38px;height:38px;border-radius:9px;background:rgba(52,192,139,.12);color:var(--green);display:grid;place-items:center;flex:0 0 auto}
.tcard .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tcard b{font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--ink);display:block;margin-bottom:.25rem}
.tcard p{font-size:.85rem;color:var(--muted);line-height:1.5}

.persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
@media(max-width:760px){.persona-grid{grid-template-columns:1fr}}
.persona{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:1.8rem;transition:border-color .3s,transform .3s var(--ease)}
.persona:hover{border-color:var(--coral);transform:translateY(-4px)}
.persona .pic{width:42px;height:42px;border-radius:10px;background:rgba(234,75,113,.1);color:var(--coral);display:grid;place-items:center;margin-bottom:1.1rem}
.persona .pic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.persona h3{font-family:var(--display);font-weight:700;font-size:1.2rem;margin-bottom:.6rem}
.persona .quote{color:var(--muted);font-style:italic;font-size:.95rem;line-height:1.55;margin-bottom:1.2rem}
.persona .out{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--green);display:flex;align-items:center;gap:.4rem;transition:transform .25s var(--ease)}
.persona:hover .out{transform:translateX(4px)}

.calc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin-top:3rem}
@media(max-width:760px){.calc{grid-template-columns:1fr}}
.calc-inputs{padding:clamp(1.5rem,1rem + 2vw,2.5rem);display:flex;flex-direction:column;gap:1.7rem}
.calc-field .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
.calc-field label{font-size:.92rem;color:var(--ink);font-weight:500}
.calc-field .val{font-family:var(--mono);font-weight:700;color:var(--lime)}
.calc-field input[type=range]{width:100%;height:6px;border-radius:100px;background:var(--line-bright);-webkit-appearance:none;appearance:none;cursor:pointer;accent-color:var(--coral)}
.proc-btns,.period{display:flex;gap:.5rem}
.proc-btns button{flex:1;padding:.55rem;border-radius:7px;border:1px solid var(--line);background:var(--bg-2);color:var(--muted);font-family:var(--mono);font-size:.85rem;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.proc-btns button.on{background:var(--coral-strong);color:#fff;border-color:var(--coral-strong)}
.period{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:.2rem;gap:0}
.period button{padding:.45rem .9rem;border-radius:6px;border:none;background:transparent;color:var(--muted);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:background .2s,color .2s}
.period button.on{background:var(--coral-strong);color:#fff}
.calc-result{padding:clamp(1.5rem,1rem + 2vw,2.5rem);background:linear-gradient(160deg,var(--bg-2),var(--bg));display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.calc-result::after{content:"";position:absolute;top:-30%;right:-20%;width:60%;height:80%;background:var(--coral);opacity:.07;border-radius:50%;filter:blur(60px)}
.calc-result .lbl{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);position:relative}
.calc-result .big{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,1.5rem + 4vw,4rem);line-height:1;color:var(--coral);letter-spacing:-0.02em;margin:.35rem 0 .55rem;position:relative;font-variant-numeric:tabular-nums}
.bleed{position:relative;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;margin-bottom:1.3rem}
.bleed .bleed-l{color:var(--faint)}
.bleed-dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red);animation:bleedpulse 1.1s var(--ease) infinite}
@keyframes bleedpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}
@media(prefers-reduced-motion:reduce){.bleed-dot{animation:none}}
.calc-stat{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:.6rem;position:relative}
.calc-stat .k{font-size:.86rem;color:var(--muted)}
.calc-stat .v{font-family:var(--mono);font-weight:700;color:var(--ink)}
.calc-stat .v.coral{color:var(--lime)}
.calc-result .btn{margin-top:1.1rem;justify-content:center;position:relative}
.calc-magnet{margin-top:1.1rem;font-size:.82rem;color:var(--faint);position:relative}
.calc-magnet a{color:var(--green);border-bottom:1px solid transparent;transition:border-color .2s}
.calc-magnet a:hover{border-color:var(--green)}

.final{text-align:center;padding:0 0 clamp(3rem,2rem + 3vw,5rem)}
.final h2{margin:0 auto 1.2rem;max-width:20ch}
.final h2 em{color:var(--lime);font-style:italic}
.final p{color:var(--muted);max-width:48ch;margin:0 auto 2.5rem}
.final .cta-row{justify-content:center}
.note{margin-top:2rem;font-family:var(--mono);font-size:.76rem;color:var(--faint);max-width:44ch;margin-inline:auto;line-height:1.6}

footer{border-top:1px solid var(--line);padding:2.5rem 0;margin-top:var(--space)}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.foot-in .l{font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.foot-in a{color:var(--muted);font-size:.85rem;transition:color .2s;margin-left:1.4rem}
.foot-in a:hover{color:var(--lime)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .pill .live::after{display:none}
}

.hero-proof{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-bottom:2.2rem;
  font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.hero-proof span{display:inline-flex;align-items:center;gap:.5rem}
.hero-proof span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.hero-proof b{color:var(--ink);font-weight:700}
.hero .hero-proof{animation-delay:.34s}
.cta-micro{margin-top:1.1rem;font-family:var(--mono);font-size:.73rem;color:var(--faint);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cta-micro .g{color:var(--green)}
.hero .cta-micro{animation-delay:.48s}
.hero-case{display:inline-flex;align-items:center;gap:.5rem;width:fit-content;margin-top:1.2rem;
  font-size:.94rem;color:var(--muted);text-decoration:none;
  transition:color var(--duration-fast,.15s) var(--ease)}
.hero-case b{color:var(--ink);font-weight:700}
.hero-case .arr{color:var(--coral);transition:transform var(--duration-fast,.15s) var(--ease)}
.hero-case:hover{color:var(--ink)}
.hero-case:hover .arr{transform:translateX(3px)}
.hero .hero-case{animation-delay:.54s}

.about-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(1.5rem,1rem + 3vw,3.5rem);
  align-items:start;margin-top:1rem}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:2rem}.about-photo{max-width:280px}}
.about-photo{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--surface);aspect-ratio:4/5;box-shadow:var(--shadow-strong)}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;gap:.6rem;
  align-items:center;justify-content:center;color:var(--faint);font-family:var(--mono);
  font-size:.68rem;text-align:center;line-height:1.5;letter-spacing:.04em;
  background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 11px,var(--surface-2) 11px,var(--surface-2) 22px)}
.about-photo .ph svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.about-photo .badge{position:absolute;left:0;bottom:0;right:0;padding:.7rem .9rem;
  background:linear-gradient(0deg,var(--photo-veil),transparent);
  font-family:var(--mono);font-size:.68rem;color:#fff;display:flex;align-items:center;gap:.5rem}
.about-photo .badge .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.about-bio p{color:var(--muted);font-size:1.06rem;line-height:1.7;margin-bottom:1.1rem;max-width:56ch}
.about-bio p b{color:var(--ink);font-weight:600}
.about-bio .sig{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink);margin-top:.4rem}
.about-bio .sig span{display:block;font-family:var(--mono);font-weight:400;font-size:.72rem;color:var(--faint);margin-top:.2rem;text-transform:uppercase;letter-spacing:.06em}

.card .price{font-family:var(--mono);font-size:.82rem;color:var(--lime);font-weight:700;margin-top:1.2rem}
.card .price span{color:var(--faint);font-weight:400}

details.case{margin-top:1.3rem;border-top:1px solid var(--line);padding-top:.5rem}
details.case summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--lime);display:flex;align-items:center;gap:.5rem;padding:.5rem 0}
details.case summary::-webkit-details-marker{display:none}
details.case summary .pl{transition:transform .3s var(--ease)}
details.case[open] summary .pl{transform:rotate(90deg)}
.bar-row{display:flex;gap:.9rem;padding:.7rem 0;border-bottom:1px dashed var(--line);align-items:baseline}
.bar-row:last-child{border-bottom:none}
.bar-row .lab{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;flex:0 0 58px}
.bar-row.before .lab{color:var(--red)}
.bar-row.after .lab{color:var(--ice)}
.bar-row.resultr .lab{color:var(--green)}
.bar-row p{font-size:.88rem;color:var(--muted);line-height:1.5}

/* ── Phase 9: open-source credibility section ───────────────── */
.about-bio .about-cred{font-size:.98rem;border-left:2px solid var(--coral);
  padding-left:1rem;margin:.2rem 0 1.4rem;color:var(--muted)}

.repo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:3rem}
@media(max-width:900px){.repo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.repo-grid{grid-template-columns:1fr}}
.repo{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);padding:1.5rem;text-decoration:none;color:inherit;
  transition:border-color .3s,transform .3s var(--ease),background .3s}
.repo:hover{border-color:var(--line-bright);transform:translateY(-4px);background:var(--surface-2)}
.repo:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.repo-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.repo-name{font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--ink);
  word-break:break-word;transition:color .2s}
.repo:hover .repo-name{color:var(--lime)}
.repo-star{font-family:var(--mono);font-size:.74rem;color:var(--amber);flex:0 0 auto}
.repo-val{color:var(--muted);font-size:.92rem;line-height:1.55;margin:.8rem 0 1.1rem;flex:1 1 auto}
.repo-meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.repo-tag{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--lime);background:var(--coral-ghost);border-radius:5px;padding:.32rem .55rem}
.repo-lang{font-family:var(--mono);font-size:.7rem;color:var(--faint)}

.os-trust{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);padding:2rem}
.os-trust-head h3{font-family:var(--display);font-weight:700;font-size:1.5rem;
  letter-spacing:-0.01em;color:var(--ink);margin-bottom:.4rem}
.os-trust-head p{color:var(--muted);font-size:.96rem;line-height:1.6;max-width:62ch;margin-bottom:1.8rem}
.os-trust-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem 1.6rem}
@media(max-width:900px){.os-trust-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.os-trust-list{grid-template-columns:1fr}}
.os-trust-list li{display:flex;flex-direction:column;gap:.3rem;
  border-top:1px solid var(--line);padding-top:.9rem}
.os-trust-list b{font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--ink)}
.os-trust-list span{font-size:.84rem;color:var(--muted);line-height:1.5}
.os-trust-list code{font-family:var(--mono);font-size:.66rem;color:var(--green);margin-top:.15rem}