/* =========================================================================
   Valvix site — shared design system (style A1 «Карта серця»)
   Tokens · typography · buttons · cards · sections · grids · header ·
   mega menu · mobile menu · footer · page blocks
   ========================================================================= */
:root{
  --bg:#0a0f0b; --bg-2:#111a13; --bg-3:#0c140f; --card:#0d1510;
  --ink:#f3f1e9; --muted:rgba(243,241,233,.68); --faint:rgba(243,241,233,.44);
  --line:rgba(243,241,233,.12); --line-2:rgba(243,241,233,.2);
  --accent:#b6f03f; --accent-ink:#0b1208; --accent-soft:rgba(182,240,63,.1);
  --warn:#ffb547; --danger:#ff7a66; --ice:#8fd2ff;
  --c-field:#e2bb52; --c-tech:#b6f03f; --c-meteo:#8fd2ff; --c-gh:#ffcf8a; --c-bot:#7cf0c8; --c-people:#ffa38f;
  --serif:'Playfair Display',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
  --gutter:clamp(16px,4vw,56px); --ease:cubic-bezier(.2,.7,.2,1);
  --hdr-h:61px; --r:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 64px)}
/* i18n: both languages live in markup, CSS shows the active one */
html[lang="en"] l-uk,html[lang="uk"] l-en,html[lang="en"] [data-l="uk"],html[lang="uk"] [data-l="en"]{display:none!important}
/* .stk: both languages share one cell, so a label keeps the width of the longer one (header never shifts on switch) */
html[lang] .stk{display:inline-grid;justify-items:center}
html[lang] .stk>l-uk,html[lang] .stk>l-en{display:block!important;grid-area:1/1;white-space:nowrap}
html[lang="en"] .stk>l-uk,html[lang="uk"] .stk>l-en{visibility:hidden}
.ft-lang .stk{justify-items:start}
html[lang] .nav-b .stk>l-uk,html[lang] .nav-b .stk>l-en{display:inline-flex!important;align-items:center;gap:6px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{left:16px}
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- typography ---------- */
h1,h2{font-weight:600;letter-spacing:-.028em;line-height:1.02}
h1{font-size:clamp(42px,6.2vw,96px)}
h2{font-size:clamp(32px,4vw,58px)}
h2.xl{font-size:clamp(34px,4.7vw,70px)}
h3{font-size:21px;font-weight:600;letter-spacing:-.012em;line-height:1.25}
h4{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.lead{font-size:clamp(17px,1.45vw,21px);color:var(--muted);max-width:640px;line-height:1.55}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.4}
.eyebrow.acc{color:var(--accent)}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(182,240,63,.6)}70%{box-shadow:0 0 0 11px rgba(182,240,63,0)}100%{box-shadow:0 0 0 0 rgba(182,240,63,0)}}
.prose p{color:var(--muted);margin-top:14px;max-width:68ch}
.prose p:first-child{margin-top:0}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;line-height:1.3}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink);padding:5px 11px;border-radius:999px;background:var(--accent-soft);border:1px solid rgba(182,240,63,.25);white-space:nowrap;line-height:1.3}
.pill.ghost{background:rgba(243,241,233,.04);border-color:var(--line);color:var(--muted)}
.pill.warn{background:rgba(255,181,71,.09);border-color:rgba(255,181,71,.3);color:var(--warn)}
.pill .live{width:6px;height:6px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 26px;font-weight:600;font-size:16px;line-height:1.1;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s,border-color .25s;white-space:nowrap;border:0;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{box-shadow:0 10px 40px -8px rgba(182,240,63,.55)}
.btn.ghost{border:1px solid rgba(243,241,233,.34);color:var(--ink);background:rgba(10,15,11,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(243,241,233,.08)}
.btn.sm{padding:10px 18px;font-size:14px}
.btn .ar,.btn .i{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:15px}
.link .ar{transition:transform .25s var(--ease)}
.link:hover .ar{transform:translateX(3px)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- layout ---------- */
main{display:block}
.center{max-width:1320px;margin:0 auto;width:100%}
.narrow{max-width:860px;margin:0 auto;width:100%}
.sec{position:relative;padding:clamp(76px,9vw,124px) var(--gutter);overflow:hidden}
.sec.tight{padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(56px,6vw,84px)}
.sec.alt{background:var(--bg-2)}
.sec.glow{background:radial-gradient(1000px 520px at 78% 0%,rgba(182,240,63,.055),transparent 60%),linear-gradient(180deg,#0a0f0b,#0b110c)}
.sec.night{background:radial-gradient(1100px 600px at 82% 8%,#15261b 0%,transparent 60%),linear-gradient(#060907,#0a110c)}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:36px}
.shead h2{margin-top:12px}
.shead .lead{max-width:460px;font-size:16px}
.shead.col{flex-direction:column;align-items:flex-start;gap:0}
.shead.col .lead{max-width:640px;margin-top:16px;font-size:clamp(16px,1.3vw,19px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split>*,.g2>*,.g3>*,.g4>*{min-width:0}
.split.top{align-items:start}
.split.r{grid-template-columns:.9fr 1.1fr}
.split.l{grid-template-columns:1.1fr .9fr}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:48px}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.no-js .rv{opacity:1;transform:none}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.hdr-bar{display:flex;align-items:center;gap:34px;padding:18px var(--gutter);transition:padding .35s}
.hdr.solid,.hdr.open{background:rgba(10,15,11,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.hdr.solid .hdr-bar,.hdr.open .hdr-bar{padding-top:12px;padding-bottom:12px}
.hdr.open{background:#0b110c;-webkit-backdrop-filter:none;backdrop-filter:none}
.logo{font-weight:700;letter-spacing:.16em;font-size:16px;white-space:nowrap;line-height:1}
.logo b{color:var(--accent);font-weight:700}
.nav{display:flex;gap:4px;align-items:center}
.nav-b{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:999px;position:relative;transition:color .2s,background .2s;white-space:nowrap}
.nav-b .i{width:13px;height:13px;stroke-width:2.2;transition:transform .3s var(--ease);opacity:.7}
.nav-b:hover,.nav-b[aria-expanded="true"]{color:var(--ink)}
.nav-b[aria-expanded="true"]{background:rgba(243,241,233,.07)}
.nav-b[aria-expanded="true"] .i{transform:rotate(180deg)}
.nav-b.cur{color:var(--ink)}
.nav-b.cur::after{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;border-radius:2px;background:var(--accent)}
.hdr .right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14.5px}
.hdr .login{color:var(--muted);white-space:nowrap;transition:color .2s}.hdr .login:hover{color:var(--ink)}
.lsw{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px;flex:none}
.lsw button{border:0;background:none;color:var(--faint);font-size:12.5px;font-weight:700;letter-spacing:.06em;padding:5px 9px;border-radius:999px;line-height:1;transition:color .2s,background .2s}
.lsw button:hover{color:var(--ink)}
.lsw button[aria-pressed="true"]{background:var(--ink);color:var(--accent-ink)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:rgba(10,15,11,.3);align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.6px;background:var(--ink);border-radius:2px}
.burger span::before{top:-5px}.burger span::after{top:5px}

/* ---------- mega menu ---------- */
.mega{position:absolute;left:0;right:0;top:100%;padding:0 var(--gutter);background:#0b110c;border-bottom:1px solid var(--line);box-shadow:0 40px 80px -20px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--ease),visibility 0s linear .35s}
.mega.on{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease),visibility 0s}
.mega-dim{position:fixed;inset:0;z-index:45;background:rgba(4,7,5,.55);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.mega-dim.on{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.mp{max-width:1320px;margin:0 auto;padding:26px 0 0}
.mp-grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)) minmax(280px,340px);gap:28px}
.mp-col h5{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:0 0 10px 12px}
.mp-list{display:grid;gap:2px}
.mp-list.two{grid-template-columns:1fr 1fr}
.ml{display:grid;grid-template-columns:38px 1fr;gap:13px;align-items:start;padding:11px 12px;border-radius:16px;transition:background .25s}
.ml:hover,.ml:focus-visible{background:rgba(243,241,233,.05)}
.ml-i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(243,241,233,.04);border:1px solid var(--line);color:var(--muted);transition:color .25s,background .25s,border-color .25s,box-shadow .25s}
.ml-i .i{width:19px;height:19px}
.ml:hover .ml-i{color:var(--accent);background:var(--accent-soft);border-color:rgba(182,240,63,.3);box-shadow:0 0 18px rgba(182,240,63,.18)}
.ml b{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.ml small{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.ml .new{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-left:6px;vertical-align:1px}
/* tiles variant (solutions) */
.mp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mt{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:rgba(243,241,233,.02);transition:border-color .3s,background .3s,transform .35s var(--ease)}
.mt:hover,.mt:focus-visible{border-color:rgba(182,240,63,.4);transform:translateY(-2px)}
.mt-im{position:relative;aspect-ratio:16/7.4;overflow:hidden;background:#0d140f}
.mt-im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mt:hover .mt-im img{transform:scale(1.06)}
.mt-im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,15,11,.55))}
.mt-im .ph-mini{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent)}
.mt-im .ph-mini .i{width:30px;height:30px;stroke-width:1.4;filter:drop-shadow(0 0 6px rgba(182,240,63,.5))}
.mt-t{padding:10px 13px 12px}
.mt-t b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.mt-t small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px}
/* promo */
.promo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;border-radius:20px;overflow:hidden;border:1px solid var(--line);padding:20px;isolation:isolate;transition:border-color .3s}
.promo:hover{border-color:rgba(182,240,63,.4)}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease);transform:scale(var(--z,1))}
.promo:hover img{transform:scale(calc(var(--z,1) * 1.05))}
.promo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,15,11,.1) 0%,rgba(10,15,11,.55) 45%,rgba(10,15,11,.94) 100%)}
.promo .tag{margin-bottom:8px}
.promo b{display:block;font-size:19px;line-height:1.25;letter-spacing:-.01em;font-weight:600;max-width:20ch}
.promo .link{margin-top:12px;font-size:14px}
.mp-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px;padding:14px 12px 18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--faint)}
.mp-foot .link{font-size:13.5px}

/* ---------- mobile menu ---------- */
.mm{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,transform .4s var(--ease),visibility 0s linear .4s}
.mm.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s var(--ease),visibility 0s}
.mm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gutter);border-bottom:1px solid var(--line);flex:none}
.mm-x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:none;display:grid;place-items:center}
.mm-x .i{width:18px;height:18px}
.mm-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px var(--gutter) 24px;overscroll-behavior:contain}
.acc{border-bottom:1px solid var(--line)}
.acc-b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;padding:19px 2px;font-size:22px;font-weight:600;letter-spacing:-.015em;text-align:left;color:var(--ink)}
.acc-b .i{width:20px;height:20px;color:var(--faint);transition:transform .35s var(--ease)}
.acc-b[aria-expanded="true"] .i{transform:rotate(180deg);color:var(--accent)}
.acc-b .cur-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:10px;display:inline-block;vertical-align:4px}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.acc-p>div{overflow:hidden}
.acc-b[aria-expanded="true"]+.acc-p{grid-template-rows:1fr}
.acc-p .ml{padding:10px 4px;grid-template-columns:34px 1fr;gap:12px}
.acc-p .ml-i{width:34px;height:34px;border-radius:11px}
.acc-p .ml-i .i{width:17px;height:17px}
.acc-p .ml:hover{background:none}
.acc-p .all{display:inline-flex;margin:4px 4px 18px;font-size:14.5px}
.mm-foot{flex:none;padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:12px;background:var(--bg-3)}
.mm-foot .row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.mm-foot .lsw button{font-size:14px;padding:8px 14px}
.mm-foot .btns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.mm-foot .btn{padding:14px 16px;font-size:15px}
body.lock{overflow:hidden}

/* ---------- page hero ---------- */
.phero{position:relative;isolation:isolate;min-height:88vh;min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px var(--gutter) 84px;overflow:hidden}
.phero.sm{min-height:66vh;min-height:66svh;padding-bottom:64px}
.phero .media{position:absolute;inset:0;z-index:-2;background:#0a0f0b}
.phero .media img{width:100%;height:100%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.14) translate(-1%,-1%)}}
.phero .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,15,11,.86) 0%,rgba(10,15,11,.5) 46%,rgba(10,15,11,.08) 80%),linear-gradient(180deg,rgba(10,15,11,.7) 0%,rgba(10,15,11,.05) 28%,rgba(10,15,11,.2) 58%,rgba(10,15,11,.97) 100%)}
.phero h1{margin:18px 0 22px;max-width:15ch}
.phero .lead{max-width:600px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--faint);margin-bottom:22px}
.crumbs a{color:var(--muted);transition:color .2s}.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--ink)}
.hero-pulse{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) 22px;z-index:1;pointer-events:none}
/* ECG pulse (VS-110): the beat stays at the centre and writes the trace, which runs off to the left and fades.
   VX.pulse builds it into every .ecg. One beat is 240 viewBox units wide, --p pixels on screen, and lasts --t.
   The strip is 21 beats wide and its 11th beat starts at the centre, so moving it by one beat (100% / 21) loops seamlessly;
   10 beats on each side cover the max-width. */
.ecg{position:relative;height:46px;max-width:3800px;margin-inline:auto;--p:200px;--t:1.25s;pointer-events:none}
.ecg::before{content:"";position:absolute;left:50%;right:0;top:calc(57.142857% - .75px);height:1.5px;background:linear-gradient(90deg,rgba(243,241,233,.14),rgba(243,241,233,.14) 84%,rgba(243,241,233,0))}
.ecg-lay{position:absolute;left:0;right:0;top:-14px;bottom:-14px;overflow:hidden}
.ecg-lay svg{position:absolute;top:14px;left:50%;height:calc(100% - 28px);width:calc(var(--p) * 21);margin-left:calc(var(--p) * -10);overflow:visible;animation:ecg-run var(--t) linear infinite;will-change:transform}
.ecg-lay path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ecg-base{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 50%,transparent 50%);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 50%,transparent 50%)}
.ecg-base path{stroke:rgba(243,241,233,.14);stroke-width:1.5}
.ecg-glow{-webkit-mask-image:linear-gradient(90deg,transparent 16%,#000 50%,transparent 50%);mask-image:linear-gradient(90deg,transparent 16%,#000 50%,transparent 50%)}
.ecg-glow path{stroke:var(--accent);stroke-width:2.2;filter:drop-shadow(0 0 6px rgba(182,240,63,.8))}
/* the head is as tall as the line, so translateY(%) follows the trace in viewBox units (1 unit = 1/70) */
.ecg-head{position:absolute;left:50%;top:0;width:0;height:100%;animation:ecg-beat var(--t) linear infinite;will-change:transform}
.ecg-head i{position:absolute;left:-4.5px;top:calc(57.142857% - 4.5px);width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(182,240,63,.16),0 0 14px 2px rgba(182,240,63,.85)}
.ecg-head i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:ecg-ring var(--t) linear infinite}
@keyframes ecg-run{to{transform:translateX(calc(-100% / 21))}}
/* the vertices of one beat (VX.pulse): time = x/240, offset = (y-40)/70 */
@keyframes ecg-beat{0%,37.5%{transform:translateY(0)}43.333%{transform:translateY(-8.571%)}47.5%,51.667%{transform:translateY(0)}55%{transform:translateY(17.143%)}59.167%{transform:translateY(-45.714%)}63.333%{transform:translateY(28.571%)}67.5%,74.167%{transform:translateY(0)}81.667%{transform:translateY(-14.286%)}89.167%,100%{transform:translateY(0)}}
@keyframes ecg-ring{0%,59%{opacity:0;transform:scale(1)}59.167%{opacity:.85;transform:scale(1);animation-timing-function:cubic-bezier(.2,.7,.3,1)}88%,100%{opacity:0;transform:scale(3.4)}}
.phero.pulse{padding-bottom:120px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
/* Motion pause (VS-044): one round button on the first screen stops every moving thing on the site (html.still at the end).
   site.js builds it into [data-vx="still"], or else into the bottom-right corner of the first .phero (marked .still-host),
   where its centre sits on the pulse line's baseline (22px padding + 3/7 of the 46px line). */
.still-b{position:relative;flex:none;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(10,15,11,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--muted);transition:color .2s,border-color .2s}
.still-b::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.still-b:hover{color:var(--ink);border-color:rgba(243,241,233,.42)}
.still-b[aria-pressed="true"]{color:var(--accent);border-color:rgba(182,240,63,.42)}
.still-b:focus-visible{border-radius:50%}
.still-b svg{width:12px;height:12px;fill:currentColor}
.still-b[aria-pressed="true"] .sb-pause,.still-b:not([aria-pressed="true"]) .sb-play{display:none}
.phero>.still-b{position:absolute;right:var(--gutter);bottom:24px;z-index:2}
.phero.still-host .ecg::before{right:48px}
@media (max-width:760px){.phero.still-host:not(.pulse){padding-bottom:76px}}   /* on phones the hero text runs edge to edge */

/* ---------- sub navigation (in-page) ---------- */
.subnav{position:sticky;top:var(--hdr-h);z-index:30;background:rgba(10,15,11,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.subnav-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px var(--gutter);max-width:calc(1320px + 2 * var(--gutter));margin:0 auto}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{flex:none;font-size:14px;color:var(--muted);padding:7px 14px;border-radius:999px;border:1px solid transparent;transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--ink);border-color:rgba(182,240,63,.35);background:var(--accent-soft)}
.subnav .cta{margin-left:auto;color:var(--accent);font-weight:600}

/* ---------- cards ---------- */
.card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(243,241,233,.045),rgba(243,241,233,.015));padding:26px;transition:border-color .3s,background .3s,transform .4s var(--ease)}
a.card:hover,.card.hov:hover{border-color:rgba(182,240,63,.35);transform:translateY(-3px)}
.card h3{margin:14px 0 8px}
.card p{font-size:15px;color:var(--muted);line-height:1.55}
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(182,240,63,.22);flex:none}
.ico .i{width:22px;height:22px;stroke-width:1.7}
.ico.c2{--c:var(--c-meteo);background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);border-color:color-mix(in srgb,var(--c) 28%,transparent)}
.card .more{margin-top:16px}
.feat{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start}
.feat h4{margin-bottom:4px}
.feat p{font-size:15px;color:var(--muted);line-height:1.5}
/* library card (A1) */
.lc{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:rgba(243,241,233,.02);transition:border-color .3s,background .3s,transform .4s var(--ease)}
.lc:hover{border-color:rgba(243,241,233,.3);background:rgba(243,241,233,.05);transform:translateY(-3px)}
.lim{position:relative;aspect-ratio:16/9.2;overflow:hidden;background:#0d140f}
.lim img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.lc:hover .lim img{transform:scale(1.06)}
.lim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,15,11,.35))}
.lim.art2{display:grid;place-items:center;background:radial-gradient(80% 90% at 50% 20%,#15241a,#0c130e)}
.lim.art2 svg{width:70%;height:76%;filter:drop-shadow(0 0 5px rgba(182,240,63,.35))}
.lim.art2::after{display:none}
.lim.prod{background:#e2e0e1}
.lim.prod img{object-fit:contain;padding:8px;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.lim.sens{background:#e2e0e1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);padding:6px 14px}
.lim.sens img{object-fit:contain;padding:2px;width:100%;height:100%;min-height:0;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.lim.prod::after,.lim.sens::after{display:none}
.lim.dark img{object-position:84% 72%}
.lt{padding:16px 20px 20px;flex:1;display:flex;flex-direction:column}
.lt small{font-size:12px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.lt h3{font-size:19px;margin:5px 0 6px}
.lt p{font-size:14px;color:var(--muted);line-height:1.5}
.lt .meta{margin-top:auto;padding-top:14px;display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--faint)}
.lc .arr{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(10,15,11,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--accent);font-size:16px;border:1px solid var(--line);transition:transform .3s var(--ease),background .3s,color .3s;z-index:1}
.lc:hover .arr{transform:translateX(3px);background:var(--accent);color:var(--accent-ink)}
.lc .badge-new{position:absolute;left:14px;top:14px;z-index:1}
.lc .badge-new.warn{background:rgba(24,18,8,.88)}
.lc.soon{pointer-events:none}
.lc.soon .lim img{filter:grayscale(.6) brightness(.7)}

/* ---------- stats (A1) ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats.c3{grid-template-columns:repeat(3,1fr)}
.stat{padding:30px 24px 30px 0}
.stat+.stat{padding-left:28px;border-left:1px solid var(--line)}
.stat b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(40px,4.6vw,70px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b small{font-size:.5em;margin-left:4px;color:var(--muted)}
.stat span{display:block;margin-top:12px;color:var(--muted);font-size:15px;max-width:240px;line-height:1.45}
.stats.glass{border:1px solid var(--line);border-radius:22px;background:rgba(10,15,11,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.stats.glass .stat{padding:20px 22px}
.stats.glass .stat b{font-size:clamp(30px,3vw,44px)}
.stats.glass .stat span{font-size:13.5px;margin-top:8px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px;counter-reset:st;position:relative}
.step{position:relative;padding:24px 22px 24px;border-radius:22px;border:1px solid var(--line);background:rgba(243,241,233,.025)}
.step .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--accent);border:1px solid rgba(182,240,63,.35);background:var(--accent-soft)}
.step h4{margin:16px 0 6px;font-size:17.5px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.5}
.step .when{display:block;margin-top:12px;font-size:12.5px;color:var(--faint);letter-spacing:.04em}
.steps.line .step::after{content:"";position:absolute;top:44px;right:-17px;width:18px;height:1px;background:linear-gradient(90deg,rgba(182,240,63,.5),transparent)}
.steps.line .step:last-child::after{display:none}
/* vertical timeline */
.vsteps{display:grid;gap:0;position:relative}
.vstep{display:grid;grid-template-columns:52px 1fr;gap:20px;padding-bottom:28px;position:relative}
.vstep::before{content:"";position:absolute;left:25px;top:52px;bottom:4px;width:1px;background:linear-gradient(180deg,rgba(182,240,63,.45),rgba(243,241,233,.08))}
.vstep:last-child::before{display:none}
.vstep .n{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--accent);border:1px solid rgba(182,240,63,.35);background:radial-gradient(circle at 30% 30%,#1c2c18,#0f170f)}
.vstep h4{font-size:19px;margin:12px 0 6px}
.vstep p{color:var(--muted);font-size:15.5px;line-height:1.55;max-width:62ch}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;cursor:pointer;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);transition:background .25s,border-color .25s,transform .35s var(--ease)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);border-radius:2px;transition:transform .35s var(--ease)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .pm{background:var(--accent);border-color:var(--accent)}
.faq details[open] summary .pm::before,.faq details[open] summary .pm::after{background:var(--accent-ink)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq summary:hover{color:#fff}
.faq .ans{padding:0 50px 24px 2px;color:var(--muted);font-size:16px;line-height:1.6;max-width:820px}
.faq-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(32px,6vw,96px);align-items:start}
.faq-wrap .side{position:sticky;top:calc(var(--hdr-h) + 80px)}
.faq-wrap .side p{color:var(--muted);margin-top:16px;max-width:380px}

/* ---------- quote / testimonials ---------- */
.quote{display:grid;grid-template-columns:120px 1fr;gap:40px;align-items:center;max-width:1100px}
.qava{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#24361f,#111a13);border:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:42px;color:var(--accent);position:relative}
.qava::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(182,240,63,.2)}
.quote blockquote{font-family:var(--serif);font-size:clamp(22px,2.3vw,32px);line-height:1.36;letter-spacing:-.005em}
.quote cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:15px;color:var(--muted)}
.quote cite b{color:var(--ink);font-weight:600}
.tcard{display:flex;flex-direction:column;gap:18px;padding:26px;border-radius:22px;border:1px solid var(--line);background:rgba(243,241,233,.03)}
.tcard q{font-family:var(--serif);font-size:19px;line-height:1.45;quotes:"«" "»" "“" "”"}
html[lang="en"] .tcard q{quotes:"“" "”" "‘" "’"}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.tcard .ava{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--c-people);background:rgba(255,163,143,.1);border:1px solid rgba(255,163,143,.25);flex:none}
.tcard .who b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.tcard .who small{display:block;font-size:13px;color:var(--muted);line-height:1.35}
.sample{position:absolute;right:16px;top:16px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(255,181,71,.35);border-radius:999px;padding:3px 8px}
.tcard{position:relative}
.tcard:has(.sample){padding-top:50px}

/* ---------- CTA band ---------- */
.cta{position:relative;isolation:isolate;text-align:center;padding:clamp(100px,13vw,170px) var(--gutter);overflow:hidden;display:flex;flex-direction:column;align-items:center}
.cta .media{position:absolute;inset:0;z-index:-2}
.cta .media img{width:100%;height:100%;object-fit:cover;animation:kb 30s ease-in-out infinite alternate}
.cta .shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(10,15,11,.5),rgba(10,15,11,.92) 72%),linear-gradient(180deg,rgba(10,15,11,.95),transparent 30%)}
.cta h2{max-width:16ch;margin:18px auto 22px}
.cta .lead{margin:0 auto}
.cta .actions{justify-content:center}

/* ---------- photo placeholder ---------- */
.ph{position:relative;overflow:hidden;border-radius:22px;background:radial-gradient(120% 90% at 30% 0%,#1a2b1d 0%,#0e1610 62%);border:1px dashed rgba(182,240,63,.3);isolation:isolate;min-height:180px}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(243,241,233,.07) 1px,transparent 1.3px);background-size:16px 16px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.ph .art{position:absolute;inset:12% 12% 40%;display:grid;place-items:center}
.ph .art svg{width:100%;height:100%;max-height:220px;overflow:visible;filter:drop-shadow(0 0 6px rgba(182,240,63,.35))}
.ph .art .ln{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ph .art .th{fill:none;stroke:var(--accent);stroke-width:1.1;opacity:.5;stroke-linecap:round}
.ph .art .soft{fill:rgba(182,240,63,.07)}
.ph .art .dot{fill:var(--accent)}
.ph .cap{position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(10,15,11,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line)}
.ph .cap .i{width:18px;height:18px;color:var(--accent);margin-top:2px}
.ph .cap b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.ph .cap small{display:block;font-size:12px;color:var(--faint);line-height:1.4;margin-top:2px}
.ph.photo{border-style:solid;border-color:var(--line)}
.ph.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.ph.photo::before{display:none}
.ph.photo .cap .tmp{color:var(--warn)}

/* ---------- product tile ---------- */
.prod{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:rgba(243,241,233,.025);transition:border-color .3s,transform .4s var(--ease)}
.prod:hover{border-color:rgba(182,240,63,.35);transform:translateY(-3px)}
.prod-im{position:relative;aspect-ratio:4/3;background:#e2e0e1;display:grid;place-items:center;overflow:hidden}
.prod-im img{width:84%;height:84%;object-fit:contain;transition:transform .9s var(--ease);-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent);mask-image:radial-gradient(closest-side,#000 74%,transparent)}
.prod-im img.mul{mix-blend-mode:multiply}
.prod:hover .prod-im img{transform:scale(1.06)}
.prod-im .cat{position:absolute;left:12px;top:12px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#24301f;background:rgba(255,255,255,.75);border-radius:999px;padding:4px 9px}
.prod-t{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-t h4{font-size:16.5px}
.prod-t p{font-size:13.5px;color:var(--muted);line-height:1.5}
.prod-t .chiprow{margin-top:auto;padding-top:8px;gap:6px}
.prod-t .chiprow span{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--muted)}

/* ---------- filters / search ---------- */
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(243,241,233,.025);color:var(--muted);font:500 14.5px/1 var(--sans);transition:color .25s,border-color .25s,background .25s}
.fchip .i{width:16px;height:16px}
.fchip small{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.fchip:hover{border-color:rgba(182,240,63,.5);color:var(--ink)}
.fchip[aria-pressed="true"]{color:var(--ink);border-color:rgba(182,240,63,.5);background:var(--accent-soft)}
.fchip[aria-pressed="true"] .i{color:var(--accent)}
.search{position:relative;max-width:640px}
.search .i{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--faint);pointer-events:none;z-index:1}
.search input{width:100%;height:62px;border-radius:999px;border:1px solid var(--line-2);background:rgba(10,15,11,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:0 120px 0 56px;font-size:17px;color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:rgba(182,240,63,.6);box-shadow:0 0 0 4px rgba(182,240,63,.12)}
.search kbd{position:absolute;right:20px;top:50%;transform:translateY(-50%);font:600 12px/1 var(--sans);color:var(--faint);border:1px solid var(--line-2);border-radius:7px;padding:5px 8px}
.empty{display:none;text-align:center;padding:60px 20px;border:1px dashed var(--line-2);border-radius:22px;color:var(--muted)}
.empty.on{display:block}
.empty b{display:block;color:var(--ink);font-size:20px;margin-bottom:6px}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-size:13px;color:var(--muted);font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;border-radius:14px;border:1px solid var(--line-2);background:rgba(10,15,11,.55);padding:14px 16px;font-size:16px;color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1e9' stroke-opacity='.6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.fld select option{background:#0d1510;color:var(--ink)}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:rgba(182,240,63,.6);box-shadow:0 0 0 4px rgba(182,240,63,.12)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);cursor:pointer;transition:border-color .25s,background .25s;font-size:14.5px;line-height:1.35}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label .dotc{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);margin-top:1px;transition:border-color .25s,box-shadow .25s}
.seg label small{display:block;color:var(--faint);font-size:12.5px;margin-top:2px}
.seg label:has(input:checked){border-color:rgba(182,240,63,.55);background:var(--accent-soft)}
.seg label:has(input:checked) .dotc{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 9px var(--accent)}
.seg label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.form-note{font-size:13px;color:var(--faint)}
.form-note.err{color:var(--danger,#ff7a66);font-size:14px}
.form-ok{display:none;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:16px;background:var(--accent-soft);border:1px solid rgba(182,240,63,.3)}
.form-ok.on{display:flex}
.form-ok .i{width:22px;height:22px;color:var(--accent);margin-top:2px}
.form-ok b{display:block}
.form-ok span{color:var(--muted);font-size:14.5px}

/* ---------- frame (embeds, screens) ---------- */
.frame{position:relative;border-radius:26px;border:1px solid var(--line);background:#0a110c;overflow:hidden;box-shadow:0 50px 120px -30px rgba(0,0,0,.6)}
.frame iframe{display:block;width:100%;height:100%;border:0;background:#0a110c}
.screen{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0c130e;box-shadow:0 40px 100px -24px rgba(0,0,0,.6)}
.screen img{width:100%;height:100%;object-fit:cover}

/* line-art (A1) */
.art .ln,.la .ln{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.art .th,.la .th{fill:none;stroke:var(--accent);stroke-width:1.1;stroke-linecap:round;opacity:.55}
.art .lf,.la .lf{fill:none;stroke:rgba(243,241,233,.26);stroke-width:1.3;stroke-linecap:round}
.art .soft,.la .soft{fill:rgba(182,240,63,.06)}
.art .dot,.la .dot{fill:var(--accent)}
.la .led{fill:var(--accent);animation:led 1.8s ease-in-out infinite}
@keyframes led{50%{opacity:.25}}
.la{filter:drop-shadow(0 0 5px rgba(182,240,63,.3))}

/* ---------- machines bento (A1) ---------- */
.bento{display:grid;grid-template-columns:1.32fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:clamp(560px,calc(100vh - 240px),680px)}
.bot{position:relative;border:1px solid var(--line);border-radius:24px;background:radial-gradient(120% 80% at 50% 0%,#132016 0%,#0c130e 62%);overflow:hidden;display:flex;flex-direction:column;transition:border-color .35s}
.bot::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 38%,rgba(182,240,63,.09),transparent 70%);opacity:0;transition:opacity .5s}
.bot:hover{border-color:rgba(182,240,63,.34)}
.bot:hover::before{opacity:1}
.bot.big{grid-row:span 2}
.bot .art{position:relative;flex:1;min-height:0;background-image:radial-gradient(rgba(243,241,233,.075) 1px,transparent 1.3px);background-size:18px 18px;background-position:center;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.bot .art svg{position:absolute;left:5%;top:6%;width:90%;height:94%;overflow:visible;filter:drop-shadow(0 0 5px rgba(182,240,63,.28))}
.bot .txt{position:relative;padding:0 22px 20px}
.bot .tag{margin-bottom:8px}
.bot h3{font-size:20px}
.bot.big h3{font-size:30px;letter-spacing:-.02em}
.bot p{font-size:14px;color:var(--muted);line-height:1.45;margin-top:5px}
.bot.big p{font-size:16px;max-width:460px}
.bot .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;list-style:none}
.bot .meta li{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--muted)}
.bot .id{position:absolute;right:18px;top:16px;font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:6px 10px;z-index:1}
.art .lf2{fill:none;stroke:rgba(243,241,233,.14);stroke-width:1.1}
.art .led{fill:var(--accent);animation:led 1.8s ease-in-out infinite}
.art .txtsvg{font:600 11px var(--sans);fill:var(--accent);letter-spacing:.06em}
.a-spin{transform-box:fill-box;transform-origin:center;animation:spin 2.4s linear infinite}
.a-spin.f{animation-duration:1.3s}
@keyframes spin{to{transform:rotate(360deg)}}
.a-gnd{animation:gnd 1s linear infinite}
@keyframes gnd{to{stroke-dashoffset:-16}}
.a-sig path{animation:sig 1.8s ease-out infinite}
.a-sig path:nth-child(2){animation-delay:.3s}.a-sig path:nth-child(3){animation-delay:.6s}
@keyframes sig{0%,100%{opacity:.15}40%{opacity:1}}
.a-link{animation:gnd .8s linear infinite}
.a-drop{animation:drop 1.1s ease-in infinite;opacity:0}
@keyframes drop{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(58px);opacity:0}}
.a-seed{animation:seed 1.2s ease-in infinite;opacity:0}
@keyframes seed{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(14px);opacity:0}}
.a-bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.a-blade{transform-box:fill-box;transform-origin:center;animation:blade .16s linear infinite}
@keyframes blade{50%{transform:scaleX(-1)}}
.a-puff{animation:puff 2.4s ease-out infinite;opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.7}100%{opacity:0;transform:translate(-18px,-40px) scale(1.8)}}
.a-l1{animation:las 3.2s linear infinite;opacity:0}
.a-l2{animation:las 3.2s linear 1.6s infinite;opacity:0}
@keyframes las{0%,4%{opacity:0}6%,22%{opacity:1}26%,100%{opacity:0}}
.a-w1,.a-w2{transform-box:fill-box;transform-origin:bottom center;animation:weed 3.2s ease infinite}
.a-w2{animation-delay:1.6s}
@keyframes weed{0%,20%{transform:scale(1);opacity:1}30%,80%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
.a-flash{transform-box:fill-box;transform-origin:center;animation:flash 3.2s linear infinite;opacity:0}
.a-flash.b{animation-delay:1.6s}
@keyframes flash{0%,18%{opacity:0;transform:scale(.4)}22%{opacity:1;transform:scale(1.3)}30%,100%{opacity:0;transform:scale(.4)}}
.a-leg1,.a-leg2,.a-arm1,.a-arm2{transform-box:fill-box;transform-origin:top center;animation:leg 1s ease-in-out infinite}
.a-leg2,.a-arm1{animation-direction:reverse}
@keyframes leg{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
.a-arm1,.a-arm2{animation-name:arm}
@keyframes arm{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.a-crate{animation:crate .5s ease-in-out infinite alternate}
@keyframes crate{to{transform:translateY(-2px)}}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr;height:auto}.bot.big{grid-row:auto;grid-column:span 2;height:440px}.bot{height:340px}}
@media (max-width:760px){.bento{display:flex;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scroll-padding:0 var(--gutter);gap:12px;scrollbar-width:none}.bento::-webkit-scrollbar{display:none}.bot,.bot.big{flex:0 0 86%;height:440px;scroll-snap-align:start}.bot.big h3{font-size:22px}.bot.big p{font-size:14.5px}.bot .meta{display:none}}

/* ---------- footer ---------- */
.ft{position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg),#070b08);padding:72px var(--gutter) 34px;font-size:14.5px;color:var(--muted);overflow:hidden}
.ft::before{content:"";position:absolute;left:50%;top:-1px;width:min(900px,90%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(182,240,63,.45),transparent)}
.ft-top{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;padding-bottom:44px;border-bottom:1px solid var(--line)}
.ft-brand .logo{font-size:20px;color:var(--ink)}
.ft-brand p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,36px);line-height:1.2;color:var(--ink);margin-top:18px;max-width:18ch;letter-spacing:-.01em}
.ft-brand p em{font-weight:500}
.ft-act{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.ft-act .actions{margin-top:0;justify-content:flex-end}
.ft-lang{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--faint)}
.ft-map{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;padding:44px 0}
.ft-map h6{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:14px}
.ft-map h6 a:hover{color:var(--accent)}
.ft-map ul{list-style:none;display:grid;gap:9px}
.ft-map li a{transition:color .2s;line-height:1.4;display:inline-block}
.ft-map li a:hover{color:var(--ink)}
.ft-mid{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ft-contacts{display:flex;gap:10px 28px;flex-wrap:wrap}
.ft-contacts a{display:inline-flex;align-items:center;gap:9px;transition:color .2s}
.ft-contacts a:hover{color:var(--ink)}
.ft-contacts .i{width:17px;height:17px;color:var(--accent)}
.soc{display:flex;gap:8px}
.soc a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.soc a:hover{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.soc .i{width:17px;height:17px}
.ft-bot{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:22px;font-size:13px;color:var(--faint)}
.ft-bot nav{display:flex;gap:20px;flex-wrap:wrap}
.ft-bot nav a:hover{color:var(--ink)}

/* ---------- prototype note (bottom-left, like A1) ---------- */
.dn{position:fixed;left:16px;bottom:16px;z-index:40;font-family:var(--sans)}
.dn>button{background:#fff;color:#111;border:0;border-radius:999px;padding:10px 16px;font-weight:600;font-size:13px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.dn .box{display:none;position:absolute;bottom:52px;left:0;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 120px);overflow:auto;background:#fff;color:#1a1a1a;border-radius:18px;padding:20px 22px;font-size:14px;line-height:1.55;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.dn.open .box{display:block}
.dn h4{font-size:16px;margin-bottom:6px;color:#111}
.dn ul{padding-left:18px;margin:8px 0 12px}
.dn li{margin-bottom:4px}
.dn a{color:#3f6f00;font-weight:600}
.dn>button .dn-i{display:inline-block;font-family:Georgia,serif;font-style:italic;font-weight:700;margin-right:6px}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .hdr-bar{gap:22px}
  .nav-b{padding:8px 9px;font-size:14px}
  .hdr .right{gap:14px}
  .ft-map{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .nav,.hdr .login,.hdr .right .lsw{display:none}
  .burger{display:inline-flex}
  .hdr .right{gap:10px}
  .mega,.mega-dim{display:none}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps.line .step::after{display:none}
}
@media (max-width:980px){
  .shead{flex-direction:column;align-items:flex-start;gap:16px}
  .split,.split.r,.split.l{grid-template-columns:1fr}
  .faq-wrap{grid-template-columns:1fr;gap:20px}
  .faq-wrap .side{position:static}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:1fr 1fr}
  .stats.c3{grid-template-columns:1fr 1fr 1fr}
  .stats:not(.c3) .stat:nth-child(3){border-left:0;padding-left:0}
  .stats:not(.c3) .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .ft-top{grid-template-columns:1fr;align-items:start}
  .ft-act{align-items:flex-start}
  .ft-act .actions{justify-content:flex-start}
}
@media (max-width:760px){
  body{font-size:16px}
  .hdr-bar{padding-top:14px;padding-bottom:14px;gap:12px}
  .hdr .right .btn{padding:9px 15px}
  .phero{min-height:86svh;padding:112px var(--gutter) 56px}
  .phero.sm{min-height:0;padding-top:120px}
  .phero.pulse{padding-bottom:96px}
  .ecg{--p:140px}
  .ecg-glow{-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 50%,transparent 50%);mask-image:linear-gradient(90deg,transparent 4%,#000 50%,transparent 50%)}
  .ecg-head i{left:-4px;top:calc(57.142857% - 4px);width:8px;height:8px}
  .phero .shade{background:linear-gradient(180deg,rgba(10,15,11,.62) 0%,rgba(10,15,11,.25) 26%,rgba(10,15,11,.55) 56%,rgba(10,15,11,.97) 100%)}
  .phero h1{margin:16px 0 18px}
  .crumbs{margin-bottom:16px;font-size:13px}
  .actions{gap:10px;margin-top:26px}
  .actions .btn{padding:14px 20px;font-size:15px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .g4.keep2,.g3.keep2{grid-template-columns:1fr 1fr;gap:10px}
  .steps{grid-template-columns:1fr}
  .card{padding:22px;border-radius:22px}
  .stats.c3{grid-template-columns:1fr}
  .stats.c3 .stat+.stat{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .stat{padding:22px 12px 22px 0}
  .stat+.stat{padding-left:16px}
  .stats:not(.c3) .stat:nth-child(3){padding-left:0}
  .stat span{font-size:14px}
  .stats.glass .stat{padding:16px 16px}
  .stats.glass.c3 .stat+.stat{padding-left:16px}
  .quote{grid-template-columns:1fr;gap:20px}
  .qava{width:76px;height:76px;font-size:26px}
  .qava::after{inset:-5px}
  .faq summary{font-size:16.5px;padding:18px 2px}
  .faq .ans{padding-right:8px;font-size:15px}
  .form{grid-template-columns:1fr}
  .seg{grid-template-columns:1fr}
  .search input{height:56px;font-size:16px;padding-right:20px}
  .search kbd{display:none}
  .cta h2{font-size:clamp(34px,10vw,48px)}
  .cta .actions .btn{width:100%}
  .ft{padding-top:56px;padding-bottom:96px}
  .ft-map{grid-template-columns:1fr 1fr;gap:28px 18px}
  .ft-map ul{gap:8px}
  .ft-mid{flex-direction:column;align-items:flex-start}
  .lt{padding:14px 16px 16px}
  .lt h3{font-size:17px}
  .vstep{grid-template-columns:44px 1fr;gap:14px}
  .vstep .n{width:44px;height:44px;font-size:19px}
  .vstep::before{left:21px;top:44px}
  .vstep h4{margin-top:9px;font-size:17.5px}
  .subnav-in{padding:8px var(--gutter)}
  .subnav a{font-size:13.5px;padding:6px 12px}
  .subnav .cta{display:none}
  .dn>button{width:42px;height:42px;padding:0;display:grid;place-items:center;font-size:15px}
  .dn>button .dn-t{display:none}
  .dn>button .dn-i{margin:0}
}
@media (max-width:380px){
  .hdr .right .btn{padding:8px 12px;font-size:13px}
  .logo{font-size:14.5px}
}
/* Still (VS-044): site.js sets html.still before first paint from the visitor's choice (the pause button),
   or from the system "reduce motion" setting when there is none. Without JS the system setting alone decides. */
html.still *,html.still *::before,html.still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.still{scroll-behavior:auto}
html.still .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.no-js *,html.no-js *::before,html.no-js *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.no-js{scroll-behavior:auto}
  html.no-js .rv{opacity:1;transform:none}
}