/* ══════════════════════════════════════════════════════════════
   S&Z PARTNERS — LIQUID CRYSTAL DESIGN SYSTEM
   Palette derived from the S&Z mark: ink navy + blue→ice gradient
   ══════════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root{
  /* brand — sampled from the logo */
  --ink:#101D26;
  --ink-deep:#0A141C;
  --navy:#132843;
  --blue:#2E6DB4;
  --blue-lt:#5B95D6;
  --sky:#B7D3E9;
  --ice:#DCEBF7;

  /* neutrals */
  --paper:#EEF2F7;
  --paper-2:#E3EAF3;
  --white:#FFFFFF;
  --tx:#101D26;
  --tx-2:#48596B;
  --tx-3:#7C8DA0;
  --line:rgba(16,29,38,.10);
  --line-2:rgba(16,29,38,.17);

  /* liquid glass */
  --g-bg:linear-gradient(152deg,rgba(255,255,255,.80),rgba(255,255,255,.46));
  --g-bg-solid:linear-gradient(152deg,rgba(255,255,255,.94),rgba(255,255,255,.72));
  --g-bd:rgba(255,255,255,.86);
  --g-blur:saturate(122%) blur(12px);
  --g-sh:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(19,40,67,.05),
    0 18px 40px -26px rgba(19,40,67,.26);
  --g-sh-hi:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 1px 2px rgba(19,40,67,.06),
    0 26px 54px -28px rgba(19,40,67,.3);

  /* type */
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  /* metrics */
  --maxw:1280px;
  --gut:40px;
  --sec:128px;
  --r-xl:20px;
  --r-lg:15px;
  --r-md:11px;
  --r-sm:8px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ── BASE ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  background:var(--paper);color:var(--tx);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;min-height:100%;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-weight:500;line-height:1.07;letter-spacing:-.025em}
h1{font-size:clamp(2.7rem,6.2vw,5.1rem);letter-spacing:-.035em}
h2{font-size:clamp(2.05rem,4.1vw,3.4rem);letter-spacing:-.03em}
h3{font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.018em}
p{text-wrap:pretty}

/* ── ATMOSPHERE (the light the glass refracts) ─────────────── */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field span{position:absolute;border-radius:50%;filter:blur(130px);opacity:.5}
.gl1{width:1000px;height:1000px;top:-420px;left:-260px;background:radial-gradient(circle,rgba(183,211,233,.85),rgba(183,211,233,0) 70%)}
.gl2{width:820px;height:820px;top:2%;right:-360px;background:radial-gradient(circle,rgba(46,109,180,.18),rgba(46,109,180,0) 70%)}
main,footer{position:relative;z-index:2}

/* ── PRIMITIVES ───────────────────────────────────────────── */
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%}
section{padding-block:var(--sec);scroll-margin-top:92px;position:relative}

.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.lede{font-size:clamp(1.04rem,1.3vw,1.2rem);line-height:1.62;color:var(--tx-2);max-width:60ch}

/* glass surface */
.glass{
  background:var(--g-bg);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-bd);
  box-shadow:var(--g-sh);
  border-radius:var(--r-lg);
  position:relative;
}
.glass-xl{border-radius:var(--r-xl)}
.glass-lift{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.glass-lift:hover{transform:translateY(-2px);box-shadow:var(--g-sh-hi)}
/* single hairline highlight across the top edge */
.glass::after{
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);padding:9px 15px 9px 16px;border-radius:100px;white-space:nowrap;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px -8px rgba(19,40,67,.24);
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}
.pill.amber{color:#7A4318}
.pill.amber::before{background:#C47828}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;font-weight:500;letter-spacing:-.005em;
  padding:15px 26px;border-radius:100px;position:relative;overflow:hidden;
  background:linear-gradient(168deg,#1D3A54,var(--ink));
  color:#fff;border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -14px rgba(16,29,38,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),filter .3s;
}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 36px -18px rgba(16,29,38,.6);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-glass{
  background:rgba(255,255,255,.66);color:var(--ink);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px -18px rgba(19,40,67,.4);
}
.btn-glass:hover{background:rgba(255,255,255,.86);filter:none}
.btn-sm{padding:11px 19px;font-size:14px}

.wa-float{
  position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:85;
  display:inline-flex;align-items:center;gap:9px;padding:12px 17px;border-radius:100px;
  background:#25D366;color:#082B18;font-size:14px;font-weight:600;
  border:1px solid rgba(255,255,255,.7);box-shadow:0 14px 34px -14px rgba(8,43,24,.6);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(8,43,24,.7)}
.wa-float::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 12px 0}
.skip:focus{left:0;top:0}

/* section heading block */
.sh{max-width:74ch;margin-bottom:60px}
.sh .eyebrow{display:block;margin-bottom:20px}
.sh h2{margin-bottom:22px;max-width:19ch}
.sh .lede{max-width:66ch}
.sh-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 72px;align-items:end;max-width:none}
.sh-split h2{margin-bottom:0}
.sh-split .lede{padding-bottom:5px}

/* ── HEADER ───────────────────────────────────────────────── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:padding .4s var(--ease),transform .35s var(--ease);transform:translate3d(0,0,0);will-change:transform}
.hdr-in{
  display:flex;align-items:center;gap:26px;height:60px;padding:0 12px 0 18px;
  border-radius:100px;position:relative;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(19,40,67,.04),0 10px 26px -22px rgba(19,40,67,.28);
  transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
  isolation:isolate;
}
.hdr.stuck{padding:10px 0}
.hdr.stuck .hdr-in{
  background:rgba(255,255,255,.8);
  border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(19,40,67,.06),0 14px 34px -22px rgba(19,40,67,.4);
}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:29px;height:auto}
.brand b{font-size:17.5px;font-weight:600;letter-spacing:-.025em}
.brand b span{font-weight:400;color:var(--tx-2)}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{font-size:14.5px;color:var(--tx-2);padding:9px 14px;border-radius:100px;transition:color .25s,background .25s}
.nav a:hover{color:var(--ink);background:rgba(16,29,38,.05)}
.burger{display:none;width:44px;height:44px;border-radius:100px;margin-left:auto;flex-shrink:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 20px -12px rgba(19,40,67,.4);}
.burger i{width:16px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

.sheet{
  position:fixed;top:88px;left:14px;right:14px;z-index:89;display:none;flex-direction:column;
  padding:12px;border-radius:var(--r-xl);max-height:calc(100dvh - 110px);overflow-y:auto;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 70px -30px rgba(19,40,67,.5);
}
.sheet{transform:translate3d(0,0,0)}
.sheet.open{display:flex}
.sheet a{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;border-radius:var(--r-md);font-size:19px;font-weight:500;letter-spacing:-.02em;transition:background .25s}
.sheet a:hover{background:rgba(16,29,38,.05)}
.sheet a .mono{color:var(--tx-3);font-size:10px}
.sheet .btn{margin-top:10px}

/* language + appearance controls */
.display-controls,.sheet-controls{display:flex;align-items:center;gap:7px}
.display-controls{flex-shrink:0}
.sheet-controls{justify-content:space-between;padding:5px 5px 11px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.lang-switch{display:flex;align-items:center;padding:3px;border-radius:100px;background:rgba(255,255,255,.54);border:1px solid rgba(255,255,255,.82)}
.lang-switch button{min-width:32px;height:28px;padding:0 8px;border-radius:100px;font:600 10px/1 var(--mono);letter-spacing:.08em;color:var(--tx-3)}
.lang-switch button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 2px 9px -5px rgba(16,29,38,.45)}
.theme-toggle{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:18px;line-height:1;color:var(--ink);background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.84)}
.theme-toggle:hover{background:rgba(255,255,255,.86)}
.sheet-controls .theme-toggle{width:38px;height:38px}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{padding-block:164px 100px;text-align:center}
.hero h1{margin:0 auto 28px;max-width:18ch}
.hero h1 em{font-style:normal;font-weight:400;color:var(--tx-2)}
.hero .lede{margin:0 auto 42px;max-width:60ch;font-size:clamp(1.04rem,1.35vw,1.22rem)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.hero-note{font-size:13px;color:var(--tx-3);letter-spacing:.01em}

/* masthead lockup */
.lockup{display:flex;flex-direction:column;align-items:center;margin-bottom:52px}
.lockup img{width:124px;height:auto}
.lockup .word{
  margin-top:20px;font-size:clamp(1.32rem,2.1vw,1.72rem);font-weight:700;
  letter-spacing:.055em;color:var(--ink);line-height:1;
}


/* system canvas */
.canvas{margin-top:84px;padding:22px}
.canvas-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:6px 10px 16px;border-bottom:1px solid var(--line);margin-bottom:18px;position:relative;z-index:1;
}
.canvas-bar .mono{color:var(--tx-3)}
.live{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--blue)}
.live b{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.canvas svg{width:100%;height:auto;position:relative;z-index:1}
.mobile-flow,.mobile-state,.schema-mobile{display:none}

.nd rect{fill:rgba(255,255,255,.82);stroke:rgba(16,29,38,.14);stroke-width:1;transition:fill .35s,stroke .35s}
.nd text{font-family:var(--sans);font-size:12.5px;font-weight:500;fill:var(--ink);letter-spacing:-.01em}
.nd .ix{font-family:var(--mono);font-size:9px;font-weight:500;fill:var(--tx-3);letter-spacing:.14em}
.nd:hover rect,.nd.key rect{fill:#fff;stroke:rgba(46,109,180,.5)}
.nd.key .ix{fill:var(--blue)}
.nd.hum rect{fill:rgba(255,247,238,.92);stroke:rgba(196,120,40,.45)}
.nd.hum .ix{fill:#B4700F}
.wire{fill:none;stroke:rgba(46,109,180,.42);stroke-width:1.3}
.wire-halo{fill:none;stroke:rgba(46,109,180,.11);stroke-width:6}
.wire-fb{fill:none;stroke:rgba(16,29,38,.16);stroke-width:1;stroke-dasharray:3 6}
.dot{fill:var(--blue)}
.dot-fb{fill:var(--tx-3)}
.drw{stroke-dasharray:1360;stroke-dashoffset:1360;animation:drw 2s var(--ease) .3s forwards}
.drw-fb{stroke-dasharray:1200;stroke-dashoffset:1200;animation:drw 2.4s var(--ease) 1.2s forwards}
@keyframes drw{to{stroke-dashoffset:0}}
.dot{
  offset-path:path('M100,71 L540,71 L540,201 L100,201 L100,331 L320,331');
  offset-rotate:0deg;animation:trav 7.5s linear infinite;opacity:0;
}
.dot:nth-of-type(1){animation-delay:2.1s}
.dot:nth-of-type(2){animation-delay:4.6s}
.dot:nth-of-type(3){animation-delay:7.1s}
@keyframes trav{0%{opacity:0;offset-distance:0%}4%{opacity:1}94%{opacity:1}100%{opacity:0;offset-distance:100%}}
.dot-fb{
  offset-path:path('M320,354 L320,382 Q320,390 328,390 L668,390 Q676,390 676,382 L676,28 Q676,20 668,20 L328,20 Q320,20 320,28 L320,48');
  animation:trav 11s linear 3.4s infinite;opacity:0;
}

/* ── SEGMENTED CONTROL (Apple-style) ──────────────────────── */
.seg{
  display:inline-flex;padding:5px;border-radius:100px;gap:4px;position:relative;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px -10px rgba(19,40,67,.28);
}
.seg button{
  padding:11px 22px;border-radius:100px;font-size:14px;font-weight:500;color:var(--tx-2);
  transition:color .3s,background .35s var(--ease),box-shadow .35s;white-space:nowrap;
}
.seg button[aria-selected="true"]{
  color:var(--ink);background:#fff;
  box-shadow:0 1px 2px rgba(19,40,67,.12),0 6px 14px -8px rgba(19,40,67,.28);
}
.seg button:hover:not([aria-selected="true"]){color:var(--ink)}

/* ── BEFORE / AFTER ───────────────────────────────────────── */
.ba-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.ba-head p{font-size:14px;color:var(--tx-3);max-width:44ch}
.stage{padding:30px;position:relative}
.scene{transition:opacity .55s var(--ease)}
.scene svg{width:100%;height:auto;position:relative;z-index:1}
.bx rect{fill:rgba(255,255,255,.8);stroke:rgba(16,29,38,.14)}
.bx text{font-family:var(--sans);font-size:11.5px;font-weight:500;fill:var(--tx-2)}
.bx.bad rect{fill:rgba(255,250,244,.85);stroke:rgba(196,120,40,.42);stroke-dasharray:4 4}
.bx.bad text{fill:#8A5A22}
.bx.good rect{fill:rgba(255,255,255,.94);stroke:rgba(46,109,180,.42)}
.bx.good text{fill:var(--navy)}
.core rect{fill:url(#coreGrad);stroke:rgba(46,109,180,.6);stroke-width:1.3}
.core text{fill:#fff;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em}
.ln{stroke:rgba(46,109,180,.4);stroke-width:1.1;fill:none}
.ln-bad{stroke:rgba(196,120,40,.4);stroke-width:1;stroke-dasharray:3 6;fill:none}
.legend{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:26px;padding:0 6px}
.legend li{list-style:none;font-size:14px;color:var(--tx-2);display:flex;gap:10px;align-items:baseline}
.legend li::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;transform:translateY(-2px);background:var(--blue)}
.legend.bad li::before{background:#C47828}

/* ── CAPABILITIES ─────────────────────────────────────────── */
.cap-seg{display:flex;gap:8px;overflow-x:auto;padding:5px;margin-bottom:26px;scrollbar-width:none}
.cap-seg::-webkit-scrollbar{display:none}
.cap-seg button{
  display:flex;align-items:center;gap:11px;flex-shrink:0;
  padding:13px 20px;border-radius:100px;font-size:14.5px;font-weight:500;color:var(--tx-2);
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  transition:color .3s,background .3s,box-shadow .3s;
}
.cap-seg button .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--tx-3);transition:color .3s}
.cap-seg button:hover{background:rgba(255,255,255,.85);color:var(--ink)}
.cap-seg button[aria-selected="true"]{
  color:#fff;background:linear-gradient(168deg,#1D3A54,var(--ink));border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px -12px rgba(16,29,38,.5);
}
.cap-seg button[aria-selected="true"] .n{color:var(--sky)}

.cap-panel{padding:44px 48px;display:none}
.cap-panel.on{display:block}
.cap-panel > div:first-child{max-width:74ch;margin-bottom:32px}
.cap-panel h3{margin-bottom:14px;font-size:clamp(1.4rem,2.1vw,1.9rem)}
.cap-panel > div > p{color:var(--tx-2);margin-bottom:0}
.schema{
  min-width:0;border-radius:var(--r-md);padding:22px;background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  margin-bottom:22px;
}
.schema svg{width:100%;height:auto}
.sb{fill:rgba(255,255,255,.9);stroke:rgba(16,29,38,.14)}
.sb-a{fill:rgba(46,109,180,.1);stroke:rgba(46,109,180,.45)}
.sb-h{fill:rgba(255,246,236,.95);stroke:rgba(196,120,40,.42)}
.st{font-family:var(--mono);font-size:9px;font-weight:500;fill:var(--tx-2);letter-spacing:.09em}
.st-a{fill:var(--blue)}
.st-h{fill:#8A5A22}
.sl{stroke:rgba(16,29,38,.2);stroke-width:1;fill:none}
.sl-a{stroke:rgba(46,109,180,.5);stroke-width:1;fill:none}
.outs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.outs li{list-style:none;background:rgba(255,255,255,.72);padding:16px 20px;font-size:14px;color:var(--tx-2);display:flex;gap:12px;align-items:flex-start}
.outs li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:9px}

/* ── CONSOLE ──────────────────────────────────────────────── */
.con{overflow:hidden}
.con-top{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;padding:17px 24px;border-bottom:1px solid var(--line);position:relative;z-index:1}
.con-top .ttl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2);white-space:nowrap;flex:0 1 auto;min-width:0}
.con-top .rt{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
.con-top .rt .btn{white-space:nowrap}
@media (max-width:1080px){
  .con-top .rt{margin-left:0;flex-wrap:wrap}
  .con-top{gap:12px 14px}
}
.con-body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);position:relative;z-index:1}
.con-log{border-right:1px solid var(--line);padding:6px 0}
.stp{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:14px;align-items:start;
  padding:14px 24px;border-bottom:1px solid rgba(16,29,38,.055);
  opacity:.34;transition:opacity .45s var(--ease),background .45s;
}
.stp:last-child{border-bottom:none}
.stp.done{opacity:1}
.stp.live{opacity:1;background:rgba(46,109,180,.06)}
.stp.hold{opacity:1;background:rgba(232,158,74,.09)}
.stp .ts{font-family:var(--mono);font-size:10.5px;color:var(--tx-3);padding-top:3px;min-width:60px}
.stp .ic{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);flex-shrink:0;margin-top:1px;
  display:grid;place-items:center;font-family:var(--mono);font-size:9px;color:var(--tx-3);
  transition:border-color .35s,color .35s,background .35s;
}
.stp.done .ic{border-color:rgba(46,109,180,.45);color:var(--blue);background:rgba(46,109,180,.1)}
.stp.hold .ic{border-color:rgba(196,120,40,.5);color:#B4700F;background:rgba(232,158,74,.16)}
.stp .tx b{display:block;font-weight:500;font-size:14.5px;letter-spacing:-.012em}
.stp .tx span{display:block;font-size:12.8px;color:var(--tx-3);margin-top:3px;line-height:1.5}
.stp .cf{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--tx-3);padding-top:4px;white-space:nowrap}
.stp.done .cf{color:var(--blue)}
.stp.hold .cf{color:#B4700F}

.con-side{padding:24px;display:flex;flex-direction:column;gap:16px}
.crd{border-radius:var(--r-md);padding:19px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.crd h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);margin-bottom:14px;font-weight:500}
.fld{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid rgba(16,29,38,.06);font-size:13.2px}
.fld:last-child{border-bottom:none}
.fld dt{color:var(--tx-3);flex-shrink:0}
.fld dd{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--tx-2);word-break:break-word}
.fld dd.wait{opacity:.4}
.fld dd.set{color:var(--blue);font-weight:500}
.gate{border-radius:var(--r-md);padding:18px;background:rgba(232,158,74,.13);border:1px solid rgba(196,120,40,.32)}
.gate .mono{display:block;color:#B4700F;margin-bottom:9px;font-size:10px}
.gate p{font-size:13.2px;color:#7A5220;line-height:1.52}
.gate.ok{background:rgba(46,109,180,.1);border-color:rgba(46,109,180,.32)}
.gate.ok .mono{color:var(--blue)}
.gate.ok p{color:var(--navy)}
.bar{height:3px;border-radius:3px;background:rgba(16,29,38,.09);overflow:hidden;margin-top:auto}
.bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--sky));transition:width .55s var(--ease)}

/* ── OUTCOMES ─────────────────────────────────────────────── */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:30px;align-items:center;
  padding:26px 18px;border-bottom:1px solid var(--line);border-radius:var(--r-md);
  transition:background .3s var(--ease);
}
.row:hover{background:rgba(255,255,255,.62)}
.row .n{font-family:var(--mono);font-size:10.5px;color:var(--tx-3);letter-spacing:.14em}
.row h3{margin-bottom:5px}
.row p{font-size:14px;color:var(--tx-3);max-width:66ch}
.row .m{text-align:right;flex-shrink:0}
.row .m span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}

/* ── METHOD ───────────────────────────────────────────────── */
.pipe{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.stg{padding:30px 26px;display:flex;flex-direction:column}
.stg .knob{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--tx-3);
  background:rgba(255,255,255,.8);border:1px solid var(--line-2);
  transition:background .5s var(--ease),color .5s,border-color .5s,box-shadow .5s;
}
.pipe.on .stg .knob{
  background:var(--navy);color:#fff;border-color:transparent;
  box-shadow:0 6px 14px -8px rgba(19,40,67,.5);
}
.pipe.on .stg:nth-child(2) .knob{transition-delay:.25s}
.pipe.on .stg:nth-child(3) .knob{transition-delay:.5s}
.pipe.on .stg:nth-child(4) .knob{transition-delay:.75s}
.stg .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.stg h3{margin-bottom:12px}
.stg p{font-size:14.2px;color:var(--tx-2)}
.stg ul{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);margin-top:auto}
.stg li{list-style:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--tx-3);padding:4px 0}

/* ── TECHNOLOGY ───────────────────────────────────────────── */
.tech{overflow:hidden}
.trow{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);border-bottom:1px solid var(--line);position:relative;z-index:1}
.trow:last-child{border-bottom:none}
.trow dt{
  padding:22px 26px;border-right:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-2);
  display:flex;align-items:center;gap:12px;
}
.trow dt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}
.trow dd{padding:17px 26px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--tx-2);
  padding:8px 14px;border-radius:100px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:color .3s,border-color .3s;
}
.chip:hover{color:var(--blue);border-color:rgba(46,109,180,.35)}

/* ── INDUSTRIES ───────────────────────────────────────────── */
.inds{border-top:1px solid var(--line)}
.ind{
  display:grid;grid-template-columns:auto minmax(0,.6fr) minmax(0,1fr);gap:30px;align-items:start;
  padding:28px 18px;border-bottom:1px solid var(--line);border-radius:var(--r-md);
  transition:background .3s var(--ease);
}
.ind:hover{background:rgba(255,255,255,.62)}
.ind .n{font-family:var(--mono);font-size:10.5px;color:var(--tx-3);padding-top:7px;letter-spacing:.14em}
.ind .uc{font-size:14px;color:var(--tx-2)}
.ind .uc b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);margin-bottom:6px;font-weight:500}
.fit{padding:34px 36px;margin-top:52px;display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,1fr);gap:34px;align-items:start;position:relative}
.fit > *{position:relative;z-index:1}
.fit p{font-size:14.6px;color:var(--tx-2)}
.fit p + p{margin-top:13px}
.fit-points{list-style:none;display:grid;gap:12px}
.fit-points li{font-size:14.6px;color:var(--tx-2);padding:0 0 12px 19px;border-bottom:1px solid var(--line);position:relative}
.fit-points li:last-child{border-bottom:0;padding-bottom:0}
.fit-points li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.fit-points b{color:var(--ink);font-weight:600}

/* ── CASE STUDIES ─────────────────────────────────────────── */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.case{padding:28px;display:flex;flex-direction:column;gap:18px;min-height:290px}
.case > *{position:relative;z-index:1}
.case .slot{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.case h3{font-size:1.1rem;font-weight:400;color:var(--tx-3)}
.case dl{border-top:1px solid var(--line);padding-top:17px;margin-top:auto;display:flex;flex-direction:column;gap:12px}
.case dt{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);margin-bottom:5px}
.case-note{padding:26px 30px;margin-top:22px;font-size:14.4px;color:var(--tx-2);max-width:88ch;position:relative}
.case-note span{position:relative;z-index:1}

/* ── FOUNDERS ─────────────────────────────────────────────── */
.fdrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.fdr{padding:32px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:start}
.fdr > *{position:relative;z-index:1}
.pt{
  width:170px;aspect-ratio:4/5;border-radius:var(--r-md);display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.92),rgba(228,238,247,.8));
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.pt .ini{font-size:44px;font-weight:500;letter-spacing:-.04em;color:rgba(16,29,38,.2)}
.fdr h3{font-size:clamp(1.3rem,1.9vw,1.65rem);margin-bottom:5px}
.fdr .role{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--blue)}
.fdr .bio{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:14.2px;color:var(--tx-2)}
.fdr .bio p + p{margin-top:11px}

/* ── CLOSE (dark inversion) ───────────────────────────────── */
.close{
  margin:0 auto;max-width:1440px;border-radius:24px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#17334C 0%,var(--ink) 55%,var(--ink-deep) 100%);
  padding-block:104px;
}
.close::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 78% at 84% 4%,rgba(91,149,214,.28),transparent 66%);
}
.close::after{content:none}
.close-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:70px;align-items:start}
.close h2{color:#fff;margin:22px 0 22px;max-width:16ch}
.close .lede{color:rgba(255,255,255,.72);margin-bottom:34px}
.close .pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#DDEAF6}
.close .pill::before{background:var(--sky);box-shadow:0 0 0 3px rgba(183,211,233,.2)}
.close-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.close .btn{background:#fff;color:var(--ink);border-color:rgba(255,255,255,.6);box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
.close .btn-glass{background:rgba(255,255,255,.11);color:#fff;border-color:rgba(255,255,255,.24)}
.close .btn-glass:hover{background:rgba(255,255,255,.2)}
.facts{display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16)}
.facts div{flex:1 1 165px;padding:18px 24px 0 0;min-width:0}
.facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-bottom:7px}
.facts dd{font-size:14px;color:rgba(255,255,255,.82)}

/* form */
.form{
  padding:32px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 34px 70px -34px rgba(0,0,0,.6);
}
.form h3{color:#fff;margin-bottom:6px}
.form > p{font-size:13.4px;color:rgba(255,255,255,.6);margin-bottom:24px}
.f{margin-bottom:15px}
.f label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.f input,.f select,.f textarea{
  width:100%;padding:13px 15px;border-radius:9px;font-size:14.5px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  transition:border-color .25s,background .25s;
}
.f input::placeholder,.f textarea::placeholder{color:rgba(255,255,255,.35)}
.f select option{color:var(--ink);background:#fff}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.14)}
.f textarea{resize:vertical;min-height:94px}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form .btn{width:100%;margin-top:6px}
.fnote{font-size:12px;color:rgba(255,255,255,.5);margin-top:14px;line-height:1.55}
.fst{margin-top:14px;padding:12px 16px;border-radius:9px;font-size:13.4px;display:none;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#E7F1FA}
.fst.err{background:rgba(232,158,74,.18);border-color:rgba(232,158,74,.45);color:#FAE0C4}
.fst.on{display:block}

/* ── IMPRINT / LEGAL NOTICE ───────────────────────────────── */
.imp{padding:36px 40px}
.imp > *{position:relative;z-index:1}
.imp-toggle{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none}
.imp-toggle::-webkit-details-marker{display:none}
.imp-toggle > span:first-child{display:grid;gap:7px}
.imp-toggle strong{font-size:clamp(1.3rem,1.9vw,1.62rem);line-height:1.2}
.imp-toggle .mono{color:var(--tx-3)}
.imp-toggle .close-label{display:none}
.imp[open] .imp-toggle .open-label{display:none}
.imp[open] .imp-toggle .close-label{display:inline}
.imp-body{padding-top:28px}
.imp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.imp-head h2{font-size:clamp(1.3rem,1.9vw,1.62rem);margin-top:12px}
.imp-head .mono{color:var(--tx-3);padding-bottom:4px}
.imp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px}
.imp-grid > div{
  display:grid;grid-template-columns:minmax(0,176px) minmax(0,1fr);gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.imp-grid dt{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.imp-grid dd{font-size:14.2px;color:var(--tx)}
.imp-grid dd a{color:var(--blue);border-bottom:1px solid rgba(46,109,180,.35)}
.imp-note{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--tx-3);line-height:1.62;max-width:100ch}
.imp-note p + p{margin-top:11px}
.imp-note b{color:var(--tx-2);font-weight:500}
.imp-note a{color:var(--blue);border-bottom:1px solid rgba(46,109,180,.4)}
.imp-note .warn{
  margin-top:16px;padding:14px 16px;border-radius:var(--r-md);
  background:rgba(232,158,74,.11);border:1px solid rgba(196,120,40,.28);color:#8A5B22;
}
.imp-note .warn b{color:#7A4A15}
.imp-grid dd br{line-height:1.7}
@media (max-width:900px){
  .imp{padding:26px 22px}
  .imp-toggle{align-items:flex-end}
  .imp-toggle .mono{font-size:9px;text-align:right}
  .imp-grid{grid-template-columns:1fr;gap:0}
  .imp-grid > div{grid-template-columns:1fr;gap:5px;padding:13px 0}
}

/* ── FOOTER ───────────────────────────────────────────────── */
footer{padding:78px 0 36px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:44px;padding-bottom:52px}
.fbrand .brand{margin-bottom:18px}
.fbrand > p{font-size:13.6px;color:var(--tx-3);max-width:38ch}
.fbrand dl{margin-top:22px;font-size:13.4px}
.fbrand dt{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-top:14px;margin-bottom:5px}
.fbrand dd{color:var(--tx-2)}
.fbrand dd a{color:var(--blue)}
footer h4{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);margin-bottom:16px;font-weight:500}
footer nav li{list-style:none;padding:6px 0}
footer nav a{font-size:13.8px;color:var(--tx-2);transition:color .25s}
footer nav a:hover{color:var(--blue)}
.flegal{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.4px;color:var(--tx-3)}

/* ── MOTION ───────────────────────────────────────────────── */
.rv,.rv.in{opacity:1;transform:none}
.d1,.d2,.d3,.d4{transition-delay:0s}

/* The long page paints lower sections only as they approach the viewport. */
/* Removed 10 Aug 2026: this rule made the browser skip laying out every
   section below the hero until it was scrolled near, while pretending each
   was 760px tall. Real heights are 2-3x that, so the page reported itself
   7,100px shorter than it is and grew under the reader as they scrolled.
   Only 2,054 of 11,827 characters were rendered at load. First contentful
   paint was unchanged with it off, so it bought nothing. */

/* ── DARK APPEARANCE ─────────────────────────────────────── */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#F1F6FA;--ink-deep:#071019;--navy:#B9D5ED;
  --paper:#07111A;--paper-2:#0B1823;--white:#142431;
  --tx:#EDF5FB;--tx-2:#B6C6D4;--tx-3:#8195A7;
  --line:rgba(218,235,248,.10);--line-2:rgba(218,235,248,.17);
  --g-bg:linear-gradient(152deg,rgba(25,43,57,.88),rgba(12,27,39,.76));
  --g-bg-solid:linear-gradient(152deg,rgba(29,48,63,.96),rgba(14,29,41,.92));
  --g-bd:rgba(195,219,237,.14);
  --g-sh:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.22),0 18px 42px -28px rgba(0,0,0,.8);
  --g-sh-hi:inset 0 1px 0 rgba(255,255,255,.10),0 24px 54px -28px rgba(0,0,0,.86);
}
html[data-theme="dark"] body{background:var(--paper)}
html[data-theme="dark"] .field span{opacity:.24}
html[data-theme="dark"] .brand img,html[data-theme="dark"] .lockup img{filter:brightness(0) invert(1)}
html[data-theme="dark"] .hdr-in,html[data-theme="dark"] .hdr.stuck .hdr-in,html[data-theme="dark"] .sheet{background:rgba(12,27,39,.88);border-color:rgba(205,226,242,.15)}
html[data-theme="dark"] .lang-switch,html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .burger{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .lang-switch button[aria-pressed="true"]{background:#294258;color:#fff}
html[data-theme="dark"] .btn:not(.btn-glass){background:linear-gradient(168deg,#244964,#102231);color:#fff}
html[data-theme="dark"] .close .btn:not(.btn-glass){background:#fff;color:#101D26}
html[data-theme="dark"] .btn-glass,html[data-theme="dark"] .pill,html[data-theme="dark"] .seg,html[data-theme="dark"] .cap-seg button:not([aria-selected="true"]),html[data-theme="dark"] .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:var(--tx)}
html[data-theme="dark"] .seg button[aria-selected="true"]{background:#294258;color:#fff}
html[data-theme="dark"] .schema,html[data-theme="dark"] .outs li,html[data-theme="dark"] .row:hover,html[data-theme="dark"] .ind:hover,html[data-theme="dark"] .mobile-flow li,html[data-theme="dark"] .mobile-state.connected li,html[data-theme="dark"] .schema-mobile li,html[data-theme="dark"] .legend li{background:rgba(255,255,255,.055);border-color:rgba(218,235,248,.12)}
html[data-theme="dark"] .nd rect,html[data-theme="dark"] .bx.good rect,html[data-theme="dark"] .sb,html[data-theme="dark"] .stg .knob{fill:#142838;background:#142838;stroke:rgba(183,211,233,.24)}
html[data-theme="dark"] .nd text,html[data-theme="dark"] .bx.good text,html[data-theme="dark"] .st{fill:#E7F1F8}
html[data-theme="dark"] .pt{background:linear-gradient(168deg,#1B3142,#102230)}
html[data-theme="dark"] .f select option{background:#102230;color:#fff}
html[data-theme="dark"] .close{box-shadow:0 26px 70px -34px rgba(0,0,0,.9)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .drw,.drw-fb{stroke-dashoffset:0}
  .dot,.dot-fb{display:none}
  .pipe .stg .knob{background:var(--navy);color:#fff}
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1140px){
  :root{--gut:30px;--sec:104px}
  .outs{grid-template-columns:1fr}
  .con-body{grid-template-columns:1fr}
  .con-log{border-right:none;border-bottom:1px solid var(--line)}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .close-in{grid-template-columns:1fr;gap:44px}
  .cases{grid-template-columns:1fr;gap:16px}
  .case{min-height:0}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
  .fbrand{grid-column:1/-1}
  .close{border-radius:20px;margin-inline:14px}
}
@media (max-width:900px){
  .nav{display:none}
  .hdr-cta{display:none}
  .display-controls{display:none}
  .burger{display:flex}
  .sh-split{grid-template-columns:1fr;gap:20px;align-items:start}
  .fdrs{grid-template-columns:1fr}
  .fit{grid-template-columns:1fr;gap:18px}
  .trow{grid-template-columns:1fr}
  .trow dt{border-right:none;border-bottom:1px solid var(--line)}
  .ind{grid-template-columns:auto 1fr;gap:14px 22px}
  .ind .uc{grid-column:2}
  .row{grid-template-columns:auto 1fr;gap:12px 22px}
  .row .m{grid-column:2;text-align:left}
}
@media (max-width:640px){
  :root{--gut:16px;--sec:68px}
  body{font-size:16px}
  html{scroll-padding-top:72px}
  .hdr{padding:8px 0}
  .hdr.away{transform:translate3d(0,-120%,0)}
  .hdr-in{height:52px;padding:0 7px 0 13px;gap:14px}
  .brand{gap:8px}
  .brand img{width:25px}
  .brand b{font-size:15.5px}
  .burger{width:40px;height:40px}
  .sheet{top:70px;left:10px;right:10px;max-height:calc(100dvh - 84px)}
  .hero{padding-block:112px 54px}
  .hero-cta .btn,.close-cta .btn{width:100%}
  .canvas{margin-top:48px;padding:14px}
  .canvas .scroll{display:none}
  .mobile-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;list-style:none;counter-reset:flow;margin-top:4px}
  .mobile-flow li{counter-increment:flow;min-height:66px;padding:12px 12px 11px;border:1px solid rgba(46,109,180,.28);border-radius:12px;background:rgba(255,255,255,.72);font-size:13px;font-weight:500;line-height:1.25;display:flex;flex-direction:column;justify-content:center}
  .mobile-flow li::before{content:"0" counter(flow);font:500 9px/1 var(--mono);letter-spacing:.14em;color:var(--blue);margin-bottom:8px}
  .mobile-flow li.human{background:rgba(255,247,238,.92);border-color:rgba(196,120,40,.36)}
  .mobile-flow li.human::before{content:"05 · HUMAN";color:#A96310}
  .stage{padding:12px}
  .scene svg{display:none}
  .mobile-state{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none}
  .mobile-state li{min-height:54px;padding:10px 11px;border-radius:11px;border:1px dashed rgba(196,120,40,.4);background:rgba(255,250,244,.72);color:#7A4D1D;font-size:12.2px;line-height:1.25;display:flex;align-items:center}
  .mobile-state.connected li{border-style:solid;border-color:rgba(46,109,180,.3);background:rgba(255,255,255,.76);color:var(--navy)}
  .mobile-state.connected li.core-mobile{grid-column:1/-1;min-height:58px;justify-content:center;text-align:center;background:linear-gradient(168deg,#2E6DB4,#132843);border:0;color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
  .seg{width:100%}
  .seg button{flex:1;padding:11px 12px;font-size:13px}
  .ba-head{gap:14px;margin-bottom:16px}
  .ba-head p{font-size:12.8px;line-height:1.45}
  .legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;padding:0}
  .legend li{align-items:flex-start;min-height:58px;padding:11px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.58);font-size:12.2px;line-height:1.35;gap:8px}
  .legend li:nth-child(odd):last-child{grid-column:1/-1;min-height:48px}
  .legend li::before{margin-top:5px;transform:none}
  .cap-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:0;margin-bottom:16px}
  .cap-seg button{width:100%;min-height:54px;padding:10px 11px;white-space:normal;text-align:left;line-height:1.18;font-size:12.7px;gap:8px}
  .cap-seg button .n{font-size:8.5px}
  .cap-panel{padding:22px 16px}
  .cap-panel > div:first-child{margin-bottom:20px}
  .cap-panel h3{font-size:1.34rem;line-height:1.14}
  .cap-panel > div > p{font-size:14px;line-height:1.52}
  .schema{overflow:visible;padding:10px;margin-bottom:14px}
  .schema.has-mobile svg{display:none}
  .schema-mobile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;counter-reset:schema}
  .schema-mobile li{counter-increment:schema;min-height:48px;padding:9px;border:1px solid rgba(16,29,38,.12);border-radius:10px;background:rgba(255,255,255,.8);font:500 9px/1.3 var(--mono);letter-spacing:.04em;color:var(--tx-2);display:flex;align-items:center;gap:7px}
  .schema-mobile li::before{content:"0" counter(schema);color:var(--blue);font-size:8px;letter-spacing:.1em;flex:0 0 auto}
  .outs li{padding:13px 14px;font-size:12.8px;line-height:1.4}
  .pipe{grid-template-columns:1fr}
  .stg{padding:24px 22px}
  .stg ul{margin-top:16px}
  .con-side{padding:16px}
  .stp{grid-template-columns:auto 1fr;gap:8px 12px;padding:13px 16px}
  .stp .ic{display:none}
  .stp .cf{grid-column:2;padding-top:6px}
  .fdr{grid-template-columns:1fr;gap:22px;padding:24px}
  .pt{width:130px}
  .f2{grid-template-columns:1fr}
  .form{padding:22px}
  .close{border-radius:16px;margin-inline:8px;padding-block:64px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .facts div{flex:1 1 100%;padding-right:0}
  .fit{padding:24px 20px;margin-top:34px}
  .fit h3{font-size:1.35rem}
  .fit-points{gap:10px}
  .fit-points li{font-size:13.5px;line-height:1.48;padding-bottom:10px}
  .wa-float{display:none}
  .glass,.hdr-in,.sheet,.form{-webkit-backdrop-filter:saturate(115%) blur(7px);backdrop-filter:saturate(115%) blur(7px)}
  .dot,.dot-fb{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE PERFORMANCE — added 10 Aug 2026
   Purely additive: not one existing rule was modified. Delete this whole
   block and the file behaves exactly as it did before.

   Measured at 390px with a 6x CPU slowdown, 28 elements were compositing a
   live backdrop-filter simultaneously, plus two 1000px circles running
   filter:blur(130px) inside a position:fixed layer. A phone GPU re-rasterises
   every one of those on every scroll frame — that is what made the page feel
   heavy. Below 900px they are replaced with --g-bg-solid, the token this
   stylesheet already defines for exactly this purpose, so the panels look the
   same but nothing is blurred at runtime. Desktop is untouched.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* 28 live blurred layers -> 0. Every selector in this stylesheet that
     declares backdrop-filter is listed here, so none are missed. */
  .glass,.hdr-in,.sheet,.form,
  .pill,.btn-glass,.burger,.seg,.cap-seg button{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  /* NOTE: only the blur is removed. The translucent backgrounds are LEFT
     ALONE on purpose. Forcing them opaque broke the enquiry form, which is
     rgba(255,255,255,.1) with white text sitting inside the dark band -
     making it opaque turned it into a white panel with white text on it.
     Translucency itself is cheap; it was only ever the blur that cost. */

  /* the header and the mobile sheet sit over scrolling content, so without a
     blur behind them they need to be near-opaque or text shows through */
  .hdr-in,.hdr.stuck .hdr-in{background:rgba(255,255,255,.95)}
  .sheet{background:rgba(255,255,255,.98)}
  html[data-theme="dark"] .hdr-in,
  html[data-theme="dark"] .hdr.stuck .hdr-in,
  html[data-theme="dark"] .sheet{background:rgba(12,27,39,.96)}

  /* The atmosphere blobs live in a position:fixed, full-viewport layer and
     each runs filter:blur(130px). A fixed layer is re-composited on every
     scroll frame — on iOS that alone can halve the frame rate. The two
     circles are pre-baked into the body background instead: same look,
     no fixed layer, no runtime blur. */
  .field{display:none}
  body{
    background:
      radial-gradient(1000px 1000px at 240px -80px, rgba(183,211,233,.5), rgba(183,211,233,0) 70%),
      radial-gradient(820px 820px at calc(100% - 50px) 420px, rgba(46,109,180,.12), rgba(46,109,180,0) 70%),
      var(--paper);
    background-repeat:no-repeat;
    background-attachment:scroll;
  }
  html[data-theme="dark"] body{
    background:
      radial-gradient(1000px 1000px at 240px -80px, rgba(183,211,233,.13), rgba(183,211,233,0) 70%),
      radial-gradient(820px 820px at calc(100% - 50px) 420px, rgba(46,109,180,.1), rgba(46,109,180,0) 70%),
      var(--paper);
    background-repeat:no-repeat;
  }

  /* large shadow blur radii are fill-rate bound on phones */
  :root{
    --g-sh:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(19,40,67,.06),0 8px 18px -14px rgba(19,40,67,.22);
    --g-sh-hi:var(--g-sh);
  }
  html[data-theme="dark"]{
    --g-sh:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.22),0 10px 22px -16px rgba(0,0,0,.72);
    --g-sh-hi:var(--g-sh);
  }

  /* no hover state on a touch screen; this only ever cost a repaint */
  .glass-lift:hover{transform:none;box-shadow:var(--g-sh)}
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE: the closing CTA band — fixed 10 Aug 2026

   .close paints itself with
       linear-gradient(160deg,#17334C 0%, var(--ink) 55%, var(--ink-deep) 100%)
   In the light theme --ink is #101D26, so the band is the intended dark
   inversion. In the dark theme --ink flips to #F1F6FA — near white — so the
   middle 55% of the band turned pale and the white headline, lede and form
   labels sitting on it dropped to roughly 1.2:1 contrast, i.e. unreadable.

   The buttons already had a dark-theme correction; the band behind them did
   not. Pinning the gradient to literal values here so it cannot follow a
   token that inverts. Same visual intent: a deep navy panel, slightly lifted
   off the near-black page so it still reads as its own block.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .close{
  background:linear-gradient(160deg,#15304A 0%,#0E2132 55%,#07121C 100%);
}

/* Telegram · separator between the phone number and the Telegram link */
.ch-sep{opacity:.4;padding:0 4px}

/* ══════════════════════════════════════════════════════════════════════════
   TELEGRAM FLOATING BUTTON — added 10 Aug 2026

   Mirrors .wa-float exactly: same geometry, same hover, same status dot, and
   the same `display:none` below 640px — on a phone both bubbles are hidden
   and the header CTA plus the booking section carry the contact routes.
   It sits directly above the WhatsApp bubble rather than beside it, so it
   never competes for the same corner on a narrow tablet.

   Colour: Telegram's brand blue is #229ED9, which only reaches 3.0:1 against
   white text — below the 4.5:1 minimum for body-size text. Darkened to
   #17739F, which reads 5.26:1 and still reads unmistakably as Telegram.
   ══════════════════════════════════════════════════════════════════════════ */
.tg-float{
  position:fixed;
  right:max(18px,env(safe-area-inset-right));
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + 56px);
  z-index:85;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 17px;border-radius:100px;
  background:#17739F;color:#fff;font-size:14px;font-weight:600;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 28px -12px rgba(9,45,64,.6);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tg-float:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(9,45,64,.7)}
.tg-float::before{
  content:"";width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.28);
}
@media (max-width:640px){ .tg-float{display:none} }

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT BUBBLES — brand marks + matched sizing, 10 Aug 2026

   Two fixes:

   1. They were not the same size. Both had identical padding, but the pill
      width was driven by the label, and "WhatsApp" is a wider word than
      "Telegram" — 123.2px vs 115.2px. Both are now pinned to one width and
      the content is centred, so they line up exactly whatever the label says
      (including in German, where the labels stay these two words).

   2. The status dot is replaced with each service's own mark, which reads as
      a contact channel rather than a generic button. Inline SVG, so it costs
      no extra request and inherits the pill's text colour — no separate
      asset to keep in sync, and it stays crisp at any density.
   ══════════════════════════════════════════════════════════════════════════ */
.wa-float,.tg-float{
  width:152px;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  box-sizing:border-box;
}
/* the old status dot: the logo does that job now */
.wa-float::before,.tg-float::before{display:none}

.ch-ico{
  width:19px;height:19px;flex:0 0 19px;
  fill:currentColor;display:block;
}
/* the WhatsApp pill carries dark text on green, so its mark follows suit */
.wa-float .ch-ico{fill:#082B18}
.tg-float .ch-ico{fill:#fff}
/* Optical sizing, not mathematical: the WhatsApp mark is a filled circle and
   fills its 19px box edge to edge, while the Telegram plane is a diagonal
   shape with empty corners, so at the same box size it reads smaller. The
   plane gets 21px and a half-pixel nudge to sit on the same optical line. */
.tg-float .ch-ico{width:21px;height:21px;flex-basis:21px;transform:translateY(.5px)}

/* ══════════════════════════════════════════════════════════════════════════
   CLOSING CTA ROW — alignment fix, 10 Aug 2026

   Above 1140px the closing section splits into two columns, which leaves the
   button column 601px wide. The three buttons measure 208.6 + 175.9 + 286.6
   plus gaps = 696px, so the third wrapped onto its own line and every edge
   landed in a different place — a ragged right edge on row one and a short
   orphan underneath.

   They are now a two-column grid with the tertiary action spanning the full
   width, so all three share the same left and right edges and the row reads
   as one block. Below 1140px the column is wide enough for a single row and
   below 640px they are already full-width stacked, so neither is touched.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1141px){
  .close-cta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
  }
  .close-cta > :nth-child(3){grid-column:1 / -1}
  /* the buttons are anchors, so they need to fill the cell themselves */
  .close-cta > .btn{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   DIAGRAM LABELS — centred in their boxes, 10 Aug 2026

   The labels were left-aligned at a fixed 14-unit inset, which works only
   while every label is short. In German "Menschliche Freigabe" measures
   112.5 units inside a 130-unit box, leaving 14 units on the left and 3.5 on
   the right — the text ran up against the dashed border and read as though it
   had overflowed.

   Left-aligned labels in a symmetric radial diagram were never right anyway:
   the boxes sit on both sides of the core, so centring is what makes them
   look placed rather than accidental. Now no translation can crowd an edge —
   any extra length is shared evenly. The human-approval node was also widened
   130 -> 150 units, kept centred on x=350 so its connector did not move.
   ══════════════════════════════════════════════════════════════════════════ */
#s-after .bx text,
#s-after .core text,
#s-before .bx text{text-anchor:middle}