/* ---------- Design tokens ---------- */
:root{
  --bg:#ffffff;
  --bg-2:#f5fdfb;
  --bg-deep:#e9faf6;
  --surface:#ffffff;
  --surface-2:#f4f8fd;
  --surface-tint:#dfeaff;
  --ink:#0d1220;
  --ink-soft:#48566e;
  --muted:#67748c;
  --line:rgba(13,18,32,.10);
  --line-strong:rgba(13,18,32,.17);
  --accent:#1d4fd8;
  --accent-2:#3f7dff;
  --accent-soft:#7fa2ef;
  --accent-tint:#dce8ff;
  --on-accent:#f5f8ff;
  --steel:#5b6b8c;
  --teal-accent:#2dd9c4;

  /* pastel blue-white "panel" — hero / support / CTA */
  --panel-grad:
    radial-gradient(ellipse 65% 60% at 18% 8%,rgba(255,255,255,.95),transparent 55%),
    radial-gradient(ellipse 55% 50% at 88% 12%,rgba(196,219,255,.85),transparent 58%),
    radial-gradient(ellipse 60% 55% at 78% 85%,rgba(210,228,255,.7),transparent 60%),
    radial-gradient(ellipse 50% 50% at 8% 90%,rgba(225,236,255,.65),transparent 55%),
    linear-gradient(155deg,#fbfdff 0%,#eef4fd 38%,#e2ecfb 68%,#d6e4f8 100%);
  --panel-ink:#111a30;
  --panel-ink-soft:rgba(17,26,48,.68);
  --panel-line:rgba(20,40,80,.14);
  --glass-on-panel-bg:rgba(255,255,255,.5);
  --glass-on-panel-bg-strong:rgba(255,255,255,.72);
  --glass-on-panel-border:rgba(255,255,255,.85);
  --panel-btn-bg:var(--teal-accent);
  --panel-btn-ink:#04241d;
  --panel-shadow:0 32px 90px rgba(30,60,120,.16),0 2px 10px rgba(30,60,120,.08);
  --hero-obj-highlight:rgba(255,255,255,.98);
  --hero-obj-core:rgba(150,185,255,.55);
  --hero-obj-edge:rgba(60,110,210,.4);
  --hero-obj-shadow-in:rgba(40,80,160,.22);
  --hero-obj-shadow-out:rgba(30,60,130,.22);
  --podium-rim:conic-gradient(from 200deg,#a9c1e8,#ffffff,#a9c1e8,#7f9bc9,#dbe6f7,#a9c1e8);
  --podium-center:radial-gradient(ellipse,#c3d6f2,#eef4fd 70%);
  --podium-shadow:rgba(40,70,140,.25);

  /* glassmorphism on page background */
  --glass-bg:rgba(255,255,255,.56);
  --glass-bg-strong:rgba(255,255,255,.78);
  --glass-border:rgba(255,255,255,.7);
  --glass-blur:12px;
  --glow:rgba(45,217,196,.16);
  --glow-soft:rgba(45,217,196,.09);

  --shadow-sm:0 2px 10px rgba(15,25,60,.07);
  --shadow-md:0 20px 50px rgba(15,25,60,.12);
  --shadow-lg:0 32px 90px rgba(10,20,55,.20);
  --radius-s:14px;
  --radius-m:22px;
  --radius-l:32px;
  --font-ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#101727;
  --bg-2:#131c30;
  --bg-deep:#0b101c;
  --surface:#1a2336;
  --surface-2:#212b40;
  --surface-tint:#152852;
  --ink:#eef2ff;
  --ink-soft:#b6c1dc;
  --muted:#7c88a6;
  --line:rgba(238,243,255,.10);
  --line-strong:rgba(238,243,255,.18);
  --accent:#638dff;
  --accent-2:#8fb1ff;
  --accent-soft:#3d5a9e;
  --accent-tint:#16244a;
  --on-accent:#060a14;
  --steel:#8fa0c4;

  --panel-grad:radial-gradient(ellipse 60% 55% at 74% 32%,#425c86,transparent 62%),linear-gradient(165deg,#05070c 0%,#0d121e 26%,#161f30 50%,#202d42 74%,#2c3c53 100%);
  --panel-ink:#f4f8ff;
  --panel-ink-soft:rgba(244,248,255,.8);
  --panel-line:rgba(255,255,255,.16);
  --glass-on-panel-bg:rgba(255,255,255,.07);
  --glass-on-panel-bg-strong:rgba(255,255,255,.11);
  --glass-on-panel-border:rgba(255,255,255,.16);
  --panel-btn-bg:#ffffff;
  --panel-btn-ink:#0b1c63;
  --panel-shadow:0 32px 100px rgba(0,0,0,.5);
  --hero-obj-highlight:rgba(255,255,255,.95);
  --hero-obj-core:rgba(150,185,255,.16);
  --hero-obj-edge:rgba(255,255,255,.35);
  --hero-obj-shadow-in:rgba(6,16,60,.28);
  --hero-obj-shadow-out:rgba(4,10,40,.4);
  --podium-rim:conic-gradient(from 200deg,#8b97ab,#e8edf5,#8b97ab,#5b6474,#b9c2d2,#8b97ab);
  --podium-center:radial-gradient(ellipse,#1f283b,#151b2a 70%);
  --podium-shadow:rgba(0,0,0,.45);

  --glass-bg:rgba(255,255,255,.07);
  --glass-bg-strong:rgba(255,255,255,.12);
  --glass-border:rgba(255,255,255,.16);
  --glow:rgba(90,115,160,.5);
  --glow-soft:rgba(90,115,160,.26);

  --shadow-sm:0 2px 10px rgba(0,0,0,.3);
  --shadow-md:0 20px 50px rgba(0,0,0,.4);
  --shadow-lg:0 32px 100px rgba(0,0,0,.55);
  color-scheme:dark;
}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  background:
    radial-gradient(ellipse 60% 46% at 14% -6%,var(--glow),transparent 62%),
    radial-gradient(ellipse 52% 42% at 106% 16%,var(--glow),transparent 62%),
    radial-gradient(ellipse 55% 40% at 6% 64%,var(--glow-soft),transparent 65%),
    radial-gradient(ellipse 46% 36% at 96% 88%,var(--glow-soft),transparent 62%),
    linear-gradient(180deg,var(--bg),var(--bg-2) 55%,var(--bg-deep));
  font-family:var(--font-ui);font-size:17px;line-height:1.4;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background .4s ease,color .4s ease;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--accent);color:var(--on-accent)}
.container{width:100%;max-width:1320px;min-width:0;margin:0 auto;padding-inline:clamp(20px,4.5vw,56px);box-sizing:border-box}
/* on very large monitors max-width:1320px leaves huge empty margins on both
   sides, making the whole page read as small even though font-size is already
   at its clamp() ceiling — widen the column so big screens actually use the space */
@media(min-width:1600px){.container{max-width:1520px}}
@media(min-width:1900px){.container{max-width:1680px}}
@media(min-width:2200px){.container{max-width:1880px}}
/* opaque page-gradient background, reused on any section that must fully
   cover a sticky-stacked section behind it (see .screen sticky-stack rules) */
.products,.solutions,.process,.projects,.trust-strip,.news{
  background:transparent;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border:1px solid var(--glass-border);border-radius:99px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-accent);background:var(--glass-bg);backdrop-filter:blur(12px);
}
em{font-style:normal;color:var(--teal-accent)}
.screen{position:relative;min-height:calc(100vh / var(--page-zoom,1));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(80px,9vw,116px);overflow:hidden}
/* desktop: sticky-stacked screens — each screen sticks to the top and the next
   one slides up over it with a rounded leading edge, like cards stacking */
/* sticky screen-stacking removed: unreliable across browsers, replaced with
   simple scroll-reveal (.reveal / .reveal.visible) on normal document flow */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-stagger.visible > *{transition-delay:calc(var(--i,0) * 70ms)}

/* per-product-page entrance signature: each of the 5 product pages gets its
   own reveal motion (not just a different hero mockup) so scrolling through
   any one of them reads as distinct, not a re-skin of the same fade-up */
body.reveal-left .reveal{transform:translateX(-34px)}
body.reveal-left .reveal.visible{transform:none}
body.reveal-pop .reveal{transform:scale(.9);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
body.reveal-pop .reveal.visible{transform:none}
body.reveal-blur .reveal{transform:translateY(14px);filter:blur(8px)}
body.reveal-blur .reveal.visible{transform:none;filter:blur(0)}
body.reveal-right .reveal{transform:translateX(34px)}
body.reveal-right .reveal.visible{transform:none}

/* soft ambient glow behind a section's content */
.glow-field{position:absolute;inset:-10% -5%;z-index:0;pointer-events:none}
.glow-field i{position:absolute;border-radius:50%;filter:blur(60px);background:var(--glow)}
.glow-field i:nth-child(1){width:38vw;height:38vw;left:-8vw;top:6%;opacity:.6}
.glow-field i:nth-child(2){width:26vw;height:26vw;right:-4vw;bottom:8%;background:var(--glow-soft);opacity:.7}
.screen > .container{position:relative;z-index:2}

/* decorative diagonal-line hatch and dot clusters, bled onto/outside a
   card-grid corner "like a sticker" for texture — static (no animation
   cost), teal, bold enough to actually read from a normal viewing distance */
.deco-hatch{position:absolute;width:96px;height:78px;pointer-events:none;z-index:1;opacity:.8;transform:scale(1.6)}
.deco-hatch line{stroke:var(--teal-accent);stroke-width:2.4;stroke-linecap:round;opacity:.55}
.deco-dots{position:absolute;pointer-events:none;z-index:1;opacity:.8;transform:scale(1.5)}
.deco-dots circle{fill:var(--teal-accent)}
@media(max-width:900px){.deco-hatch,.deco-dots{display:none}}

/* rotated "sticker" shapes that overlap card/grid corners directly —
   meant to peek out from under a card edge, like something stuck on top */
.deco-sticker{position:absolute;z-index:1;pointer-events:none;opacity:.7}
.deco-sticker.plus{width:64px;height:64px}
.deco-sticker.plus i{position:absolute;background:var(--teal-accent);border-radius:6px;display:block}
.deco-sticker.plus i:first-child{left:50%;top:0;bottom:0;width:6px;margin-left:-3px}
.deco-sticker.plus i:last-child{top:50%;left:0;right:0;height:6px;margin-top:-3px}

/* filled circular "medal" badge with a checkmark — solid, not just an outline */
.deco-sticker.medal{width:64px;height:64px;border-radius:50%;background:var(--teal-accent);opacity:.85}
.deco-sticker.medal::before{content:'';position:absolute;width:10px;height:20px;border-right:4px solid #04241d;border-bottom:4px solid #04241d;left:22px;top:16px;transform:rotate(38deg)}

/* wavy squiggle line, drawn as an inline SVG child (path) */
.deco-sticker.squiggle{width:150px;height:24px}
.deco-sticker.squiggle svg{width:100%;height:100%}

/* bracket marks "[ ]" framing a piece of content */
.deco-sticker.bracket{width:150px;height:74px}
.deco-sticker.bracket i{position:absolute;top:0;bottom:0;width:16px;border:4px solid var(--teal-accent);border-radius:10px}
.deco-sticker.bracket i:first-child{left:0;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.deco-sticker.bracket i:last-child{right:0;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}

/* chevron ">" trail, three marks fading out */
.deco-sticker.chevron{width:100px;height:26px;display:flex;align-items:center;gap:14px}
.deco-sticker.chevron i{width:18px;height:18px;border-top:4px solid var(--teal-accent);border-right:4px solid var(--teal-accent);border-radius:0 4px 0 0;transform:rotate(45deg);display:block}
.deco-sticker.chevron i:nth-child(2){opacity:.6}
.deco-sticker.chevron i:nth-child(3){opacity:.32}

/* small "marking / scan code" tile — abstract data-matrix pattern, evokes
   product marking (маркировка) without depicting a real scannable code */
.deco-sticker.mark{width:70px;height:70px;border:2.5px solid var(--teal-accent);border-radius:14px;padding:9px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:3px;opacity:.75}
.deco-sticker.mark i{border-radius:1px;background:transparent;display:block}
.deco-sticker.mark i.on{background:var(--teal-accent)}

@media(max-width:900px){.deco-sticker{display:none}}

/* big soft ambient shapes sitting in the wide side margins beyond the
   1320px container on large screens — pure decoration, semi-transparent,
   kept far from content so they never fight for attention. Cheap: a
   radial-gradient / border, no filter:blur, no animation. */
.side-deco{position:absolute;top:20px;width:520px;height:520px;pointer-events:none;z-index:0;border-radius:50%;opacity:.9}
.side-deco.deco-blob{background:radial-gradient(circle,rgba(45,217,196,.5),transparent 68%)}
.side-deco.deco-ring{border:3px solid rgba(45,217,196,.55)}
.side-deco.deco-ring::after{content:'';position:absolute;inset:46px;border-radius:50%;border:2px solid rgba(45,217,196,.38)}
.side-deco.deco-ring::before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:var(--teal-accent);opacity:.7;top:12%;left:84%}
.side-deco.deco-dotgrid{background-image:radial-gradient(var(--teal-accent) 2.5px,transparent 3px);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 70%);mask-image:radial-gradient(circle,#000 0%,transparent 70%)}
.side-deco.deco-grid{border-radius:0;background-image:repeating-linear-gradient(0deg,rgba(45,217,196,.55) 0 2px,transparent 2px 32px),repeating-linear-gradient(90deg,rgba(45,217,196,.55) 0 2px,transparent 2px 32px);-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 72%);mask-image:radial-gradient(circle,#000 0%,transparent 72%)}
.side-deco.at-bottom{top:auto;bottom:20px}
.side-deco.left{left:clamp(-190px,-11vw,-80px)}
.side-deco.right{right:clamp(-190px,-11vw,-80px)}
.case-hero{overflow:clip}
.case-block:has(> .side-deco){overflow-x:clip}

/* a single signature accent paired with the hero's side-deco, unique per
   article so every page reads as deliberately different, not a template
   with only the hue swapped */
.side-signature{position:absolute;top:150px;z-index:0;pointer-events:none;opacity:.85;transform:scale(1.8)}
.side-signature svg{width:60px;height:60px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.side-signature.left{left:clamp(-40px,2vw,40px)}
.side-signature.right{right:clamp(-40px,2vw,40px)}
@media(max-width:1050px){.side-signature{display:none}}
@media(max-width:1050px){.side-deco{display:none}}

/* ---------- Ambient background blobs (sitewide) ----------
   Fixed behind everything, drifts slowly on its own so the page feels
   alive even without scrolling. Pure CSS transform/opacity animation
   (no JS, no scroll listener) so it costs nothing and never causes lag. */
.ambient-blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient-blobs .blob{position:absolute;border-radius:50%;opacity:.42;background:radial-gradient(circle,var(--teal-accent),transparent 70%);will-change:transform;transform:translateZ(0)}
.ambient-blobs .blob-1{width:560px;height:560px;top:-14%;left:-10%;animation:blobDrift1 14s ease-in-out infinite alternate}
.ambient-blobs .blob-2{width:460px;height:460px;top:38%;right:-12%;animation:blobDrift2 17s ease-in-out infinite alternate}
.ambient-blobs .blob-3{width:400px;height:400px;bottom:-14%;left:28%;animation:blobDrift3 11s ease-in-out infinite alternate}
@keyframes blobDrift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(220px,140px) scale(1.3)}}
@keyframes blobDrift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-200px,130px) scale(.8)}}
@keyframes blobDrift3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(170px,-110px) scale(1.25)}}
@media(max-width:700px){.ambient-blobs .blob{opacity:.22}}

/* about-page-only: graphite-to-tiffany radial gradient body background
   (bright centre fading to a dark graphite edge). */
body.tiffany-glow{
  background: radial-gradient(circle at 50% 38%, #2dd9c4 0%, #22504a 28%, #353a40 60%, #2b3035 100%);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 28px;
  border-radius:99px;font-weight:600;font-size:14.5px;white-space:nowrap;
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease,border-color .3s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
/* real press feedback for touch — :active fires on tap on every device, unlike
   :hover, which touch browsers otherwise "stick" on after the finger lifts */
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn-primary{background:var(--teal-accent);color:#04241d;box-shadow:0 16px 34px rgba(45,217,196,.28)}
.btn-primary b{font-weight:500;font-size:18px;transition:transform .3s}
.btn-ghost{border:1.5px solid var(--glass-border);color:var(--ink);background:var(--glass-bg);backdrop-filter:blur(14px)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-panel{background:var(--panel-btn-bg);color:var(--panel-btn-ink);box-shadow:0 16px 34px rgba(45,217,196,.28)}
.hero .btn-panel{
  position:relative;overflow:hidden;isolation:isolate;
  background:transparent;color:var(--hero-accent);
  border:1.5px solid var(--hero-accent);box-shadow:none;
}
.hero .btn-panel::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--hero-accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.btn-panel b{font-weight:500;font-size:18px;transition:transform .3s}
.btn-panel-ghost{border:1.5px solid var(--panel-line);color:var(--panel-ink);background:var(--glass-on-panel-bg);backdrop-filter:blur(14px)}

/* hover-only effects, gated so touchscreens never get a "stuck" hover state
   (the white-outline/lag the phone shows is Safari holding a :hover style
   after tap since there's no real mouse to leave) — desktop mouse still gets
   the full lift/glow, touch gets the :active press above instead */
@media(hover:hover) and (pointer:fine){
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(45,217,196,.4)}
  .btn-primary:hover b{transform:translateX(4px)}
  .btn-ghost:hover{border-color:var(--teal-accent);color:var(--teal-accent);transform:translateY(-3px)}
  .btn-dark:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .btn-panel:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(45,217,196,.38)}
  .hero .btn-panel:hover{transform:translateY(-3px);color:#04241d;box-shadow:0 16px 34px rgba(45,217,196,.3)}
  .hero .btn-panel:hover::before{transform:scaleX(1)}
  .btn-panel:hover b{transform:translateX(4px)}
  .btn-panel-ghost:hover{background:var(--glass-on-panel-bg-strong);transform:translateY(-3px)}
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;z-index:200;top:18px;left:50%;transform:translateX(-50%);
  width:min(1320px,calc(100% - 32px));height:74px;padding:0 10px 0 22px;
  display:flex;align-items:center;justify-content:space-between;
  border-radius:99px;border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);transition:box-shadow .4s,background .4s,border-color .4s,color .4s,top .4s;
}
.site-header.scrolled{box-shadow:var(--shadow-md);top:10px;background:var(--glass-bg-strong)}
/* light-perf: drop the real-time backdrop blur (recalculated every scroll frame)
   on pages where it's fighting a smooth-scroll library for frame budget —
   solid near-opaque background keeps the same look without the per-frame cost */
body.light-perf .site-header{background:rgba(255,255,255,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
body.light-perf .site-header.scrolled{background:rgba(255,255,255,.98)}
body.light-perf .ambient-blobs .blob{animation-play-state:paused}
body.dark-hero .site-header:not(.scrolled),
html.dark-hero .site-header:not(.scrolled){
  background:transparent;border-color:transparent;box-shadow:none;color:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.dark-hero .site-header:not(.scrolled) .icon-btn,
body.dark-hero .site-header:not(.scrolled) .burger,
html.dark-hero .site-header:not(.scrolled) .icon-btn,
html.dark-hero .site-header:not(.scrolled) .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.01em}
/* logo: three aligned layers (tiffany gear + word, silver circuits, silver 8) so each can animate on its own */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brand{--logo-h:58px}
.footer-brand .brand{--logo-h:70px}
.logo8{position:relative;display:block;height:var(--logo-h);aspect-ratio:1100/437;flex-shrink:0;isolation:isolate;}
.logo8 img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;pointer-events:none}
.logo8::before,.logo8::after{content:'';position:absolute;inset:0;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.logo8::before{z-index:2;-webkit-mask-image:url(../img/logo/logo-circuits.png);mask-image:url(../img/logo/logo-circuits.png);background-image:linear-gradient(90deg,transparent,rgba(0,245,225,.95) 50%,transparent);background-size:9% 100%;background-repeat:no-repeat;background-position:-14% 0;animation:logo8-signal 2s cubic-bezier(.45,0,.25,1) infinite}
.logo8::after{z-index:3;-webkit-mask-image:url(../img/logo/logo-shell.png);mask-image:url(../img/logo/logo-shell.png);background-image:conic-gradient(from var(--logo-a) at 27.4% 48.2%,transparent 0 68%,rgba(255,255,255,.3) 82%,rgba(255,255,255,.85) 94%,rgba(255,255,255,.3) 98%,transparent 100%);animation:logo8-sweep 2.8s linear infinite}
.logo8-eight{transform-origin:27.4% 49%;animation:logo8-flip 4.2s cubic-bezier(.45,0,.2,1) infinite}
@keyframes logo8-signal{0%{background-position:-14% 0}55%,100%{background-position:34% 0}}
@property --logo-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes logo8-sweep{to{--logo-a:360deg}}
@keyframes logo8-flip{0%{transform:perspective(260px) rotateY(0deg)}38%,100%{transform:perspective(260px) rotateY(360deg)}}
@media(max-width:700px){.brand{--logo-h:46px}.footer-brand .brand{--logo-h:58px}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.logo8::before,.logo8::after{display:none}.logo8-eight{animation:none}}

.header-tools{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:var(--surface-2);transition:.3s;
}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}
.icon-btn:hover{background:var(--teal-accent);border-color:var(--teal-accent);color:#04241d;transform:translateY(-2px)}
body.tiffany-glow{--accent:#2dd9c4;--accent-2:#4de8d6;--on-accent:#04241d}
.theme-toggle{
  width:64px;height:36px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--surface-2);position:relative;flex-shrink:0;transition:.3s;
}
.theme-toggle .knob{
  position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:var(--on-accent);
  transition:transform .4s cubic-bezier(.3,.9,.3,1.2);box-shadow:var(--shadow-sm);
}
.theme-toggle .knob svg{width:14px;height:14px}
:root[data-theme="dark"] .theme-toggle .knob{transform:translateX(28px)}
.theme-toggle .sun,.theme-toggle .moon{position:absolute;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--muted)}
.theme-toggle .sun{left:9px}
.theme-toggle .moon{right:9px}
.burger{
  height:46px;padding:0 18px 0 8px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--surface-2);display:flex;align-items:center;gap:9px;transition:.3s;margin-left:2px;
}
.burger-box{width:18px;height:12px;position:relative}
.burger-box i{position:absolute;left:0;right:0;height:1.6px;background:currentColor;border-radius:2px;transition:.3s}
.burger-box i:nth-child(1){top:0}
.burger-box i:nth-child(2){top:5px;width:70%}
.burger-box i:nth-child(3){bottom:0}
.burger-label{font-size:12.5px;font-weight:600}
.burger:hover{background:var(--teal-accent);border-color:var(--teal-accent);color:#04241d}
.burger > *{position:relative;z-index:2}
.site-header .icon-btn:not(:hover),.site-header .burger:not(:hover){background:transparent}

/* ---------------------------------- */
/* liquid glass — reusable refraction effect (SVG displacement + blur)   */
/* used on the burger button and modal cards; needs #c-liquid-glass-displacement svg filter in the page */
/* ---------------------------------- */
:root{
  --lg-blur:14px;--lg-overlay-color:255,255,255;--lg-opacity:0.05;
  --lg-highlight:rgba(255,255,255,.4);
}
.glass-liquid{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.glass-liquid::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  backdrop-filter:blur(var(--lg-blur));-webkit-backdrop-filter:blur(var(--lg-blur));
}
.glass-liquid::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:rgba(var(--lg-overlay-color),var(--lg-opacity));
  box-shadow:inset 0 0 0 1px var(--lg-highlight),inset 0 0 20px rgba(255,255,255,.12);
}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.glass-liquid::before{filter:none}}

/* menu overlay */
.menu-overlay{
  position:fixed;inset:0;z-index:300;
  background:#343c42;
  --panel-ink:#f4f8ff;--panel-ink-soft:rgba(244,248,255,.72);--panel-line:rgba(255,255,255,.14);
  opacity:0;visibility:hidden;transform:translateY(-14px);
  will-change:opacity,transform;
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.menu-overlay-scroll{position:relative;z-index:1;height:100%;overflow-y:auto;padding:24px clamp(20px,5vw,64px) 72px}
.menu-overlay.open{opacity:1;visibility:visible;transform:none}
.menu-top{display:flex;justify-content:space-between;align-items:center;padding-top:8px}
.menu-top span{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--panel-ink-soft)}
.menu-close{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--panel-ink)}
.menu-close b{font-size:24px;font-weight:400}
.menu-body{max-width:1320px;margin:6vh auto 0;display:grid;grid-template-columns:1.3fr .7fr;gap:6vw}
.menu-links{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;column-gap:48px}
.menu-links a{
  display:flex;align-items:flex-start;gap:18px;padding:24px 0;border-bottom:1px solid var(--panel-line);
  font-family:'Unbounded',var(--font-ui);
  font-size:clamp(28px,3.4vw,46px);font-weight:700;letter-spacing:-.02em;color:var(--teal-accent);transition:.3s;
}
.menu-links a small{font-family:var(--font-mono);font-size:12px;color:var(--panel-ink-soft);font-weight:400;margin-top:.65em}
.menu-links a:hover{padding-left:14px;filter:brightness(1.25)}
.menu-contact{align-self:end;padding-bottom:12px}
.menu-contact p{color:var(--panel-ink-soft);font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono)}
.menu-contact a{display:block;margin-top:16px;font-size:26px;font-weight:700;color:var(--panel-ink)}
.menu-contact span{display:block;margin-top:10px;color:var(--panel-ink-soft);font-size:14px}
.menu-social{display:flex;gap:10px;margin-top:26px}
.menu-social span{padding:8px 14px;border:1px solid var(--panel-line);border-radius:99px;font-size:12px;color:var(--panel-ink-soft)}

/* modals */
.modal{
  position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:20px;
  background:rgba(40,44,52,.55);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:.3s;
}
.modal.open{opacity:1;visibility:visible}
.modal-card{
  width:min(640px,100%);padding:clamp(28px,4vw,52px);border-radius:var(--radius-l);
  background:rgba(32,38,43,.97);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-lg);position:relative;
  transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.modal.open .modal-card{transform:none}
.modal-card > *{position:relative;z-index:2}
.modal-close{position:absolute;right:22px;top:18px;font-size:28px;color:#8b96b8;width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
.modal-close:hover{background:rgba(255,255,255,.08);color:#fff}
.modal-tag{font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-accent)}
.modal-card h2{margin-top:12px;font-size:30px;font-weight:700;color:#fff}
.search-form{display:flex;align-items:center;border-bottom:2px solid rgba(255,255,255,.15);margin-top:26px}
.search-form input{flex:1;border:0;background:none;outline:0;padding:16px 0;font-size:24px;color:#fff}
.search-form input::placeholder{color:#8b96b8}
.search-form button{color:var(--teal-accent);font-weight:600;font-size:16px}
.quick-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.quick-links span{font-size:14px;color:#8b96b8}
.quick-links a{font-size:15px;padding:10px 18px;border:1px solid rgba(255,255,255,.15);border-radius:99px;color:#c4cde6;transition:.3s}
.quick-links a:hover{border-color:var(--teal-accent);color:var(--teal-accent)}
.field{display:block;margin-top:18px;font-size:14px;color:#8b96b8}
.field input{display:block;width:100%;margin-top:8px;padding:16px 18px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-size:17px}
.field input::placeholder{color:#8b96b8}
.field input:focus{outline:2px solid var(--teal-accent);outline-offset:1px}
.modal-card .btn{width:100%;justify-content:center;margin-top:24px}
.modal-foot{margin-top:18px;text-align:center;font-size:14px;color:#8b96b8}
.modal-foot a{color:var(--teal-accent);font-weight:600}

/* ---------- Hero (full-bleed panel) ---------- */
.hero{
  position:relative;
  min-height:calc(100vh / var(--page-zoom,1));display:flex;align-items:center;
  padding-top:110px;padding-bottom:60px;
  background:
    radial-gradient(ellipse 70% 60% at 18% 0%,#454c53,transparent 62%),
    radial-gradient(ellipse 65% 55% at 88% 100%,#3f454b,transparent 58%),
    linear-gradient(165deg,#373c42 0%,#33383d 45%,#3c4147 100%);
  box-shadow:0 1px 0 var(--line-strong);
  overflow:hidden;
  --panel-ink:#f4f8ff;--panel-ink-soft:rgba(244,248,255,.75);--panel-line:rgba(255,255,255,.16);
  --glass-on-panel-bg:rgba(255,255,255,.08);--glass-on-panel-bg-strong:rgba(255,255,255,.14);--glass-on-panel-border:rgba(255,255,255,.2);
  --hero-accent:#2dd9c4;
}
.hero .container{width:100%}
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(36,42,47,.9),rgba(20,23,26,.55) 55%,transparent);
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 32% 26% at 50% 52%,rgba(18,21,24,.5),transparent 68%);
}
.code-type{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr;gap:0;overflow:hidden;pointer-events:none;
  mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.85) 6%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.85) 6%);
}
.code-type .col{position:relative;height:100%;padding:14px 14px;overflow:hidden}
.code-type .ln{display:block}
.code-type pre{
  font-family:var(--font-mono);font-size:clamp(11px,1.05vw,13px);line-height:1.85;color:#a6b0c3;margin:0;
  clip-path:inset(0 0 100% 0);
  animation:codeType 13s steps(44,end) infinite,codeFade 13s ease-in-out infinite;
}
.code-type .col:nth-child(2) pre{animation-delay:1.3s,1.3s}
.code-type .col:nth-child(3) pre{animation-delay:2.6s,2.6s}
.code-type .col:nth-child(4) pre{animation-delay:3.9s,3.9s}
.code-type .col:nth-child(5) pre{animation-delay:5.2s,5.2s}
.code-type .col:nth-child(6) pre{animation-delay:6.5s,6.5s}
.code-type .col:nth-child(7) pre{animation-delay:7.8s,7.8s}
.code-type .col:nth-child(8) pre{animation-delay:9.1s,9.1s}
.code-type .col:nth-child(9) pre{animation-delay:10.4s,10.4s}
.code-type .col:nth-child(10) pre{animation-delay:11.7s,11.7s}
.code-type .kw{color:var(--hero-accent)}
.code-type .fn{color:var(--hero-accent);opacity:.75}
.code-type .st,.code-type .ty{color:#a6b0c3}
.code-type .cm{color:#6b7690}
@keyframes codeType{
  0%{clip-path:inset(0 0 100% 0)}
  20%{clip-path:inset(0 0 0% 0)}
  100%{clip-path:inset(0 0 0% 0)}
}
@keyframes codeFade{
  0%{opacity:0}
  3%{opacity:1}
  62%{opacity:1}
  82%{opacity:0}
  100%{opacity:0}
}
.scroll-cue{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;color:#fff;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;transition:opacity .25s}
.scroll-cue:hover{opacity:1}
.scroll-cue .scroll-cue-ring{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  display:grid;place-items:center;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);transition:border-color .25s,background .25s}
.scroll-cue:hover .scroll-cue-ring{border-color:var(--teal-accent);background:rgba(45,217,196,.12)}
.scroll-cue svg{width:16px;height:16px;color:var(--teal-accent);animation:scrollCueBounce 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.scroll-cue svg{animation:none}}
@keyframes scrollCueBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:600px){.scroll-cue{bottom:20px}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.code-type pre{animation:none;clip-path:inset(0 0 0 0);opacity:.5}}
.hero-copy{position:relative;z-index:3}
.hero-copy h1{
  position:relative;
  font-family:'Unbounded',var(--font-ui);text-transform:uppercase;
  color:var(--hero-accent);
  font-size:clamp(30px,4.3vw,60px);line-height:1.2;letter-spacing:0;font-weight:800;
  opacity:0;transform:translateY(16px) scale(.97);
  text-shadow:0 0 30px rgba(45,217,196,.6),0 0 68px rgba(45,217,196,.35);
  animation:heroTitleIn 1s cubic-bezier(.2,.7,.2,1) forwards .35s;
  will-change:opacity,transform;
}
.hero-copy h1::after{
  content:'';position:absolute;inset:-30px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 55% 55% at 50% 50%,rgba(45,217,196,.4),transparent 70%);
  opacity:.5;
  animation:heroGlowPulse 4.5s ease-in-out infinite 1.4s;
  will-change:opacity;
}
@keyframes heroTitleIn{to{opacity:1;transform:none}}
@keyframes heroGlowPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* word-by-word reveal headline — the h1 itself is visible immediately (no
   whole-block fade), individual words are masked and animated in by GSAP;
   .word clips overflow so its inner span can slide up from below without
   ever being invisible if the script fails to run. A plain text-shadow on
   the h1 (or on the words) gets hard-clipped at each word's overflow:hidden
   edge — its blur is wider than the word's own tightly-fit box — showing up
   as a visible rectangle around every word. filter:drop-shadow() sidesteps
   this: it's computed from the h1's own composited pixels (each glyph is
   fully inside its box at rest, so nothing is actually clipped going in)
   and painted at the h1 level, which has no overflow:hidden of its own. */
.hero-copy h1.headline{opacity:1;transform:none;animation:none;text-shadow:none;filter:drop-shadow(0 0 15px rgba(45,217,196,.6)) drop-shadow(0 0 34px rgba(45,217,196,.35))}
.headline .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.headline .word > span{display:inline-block}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.hero-copy h1{opacity:1;transform:none;animation:none}.hero-copy h1::after{animation:none;opacity:.5}}
.hero-grid{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy{max-width:780px}
.hero-copy p.lead{margin:20px auto 0;max-width:520px;color:var(--panel-ink-soft);font-size:19px;line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.hero .eyebrow{margin-bottom:6px;background:var(--glass-on-panel-bg);border-color:var(--panel-line);color:var(--panel-ink)}

.marquee-wrap{
  position:relative;z-index:3;margin-top:clamp(36px,6vw,64px);padding-top:22px;
  border-top:1px solid var(--panel-line);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.marquee-track span{
  display:inline-flex;align-items:center;margin-right:14px;padding:9px 18px;border-radius:99px;
  background:var(--glass-on-panel-bg);border:1px solid var(--panel-line);
  font-family:var(--font-mono);font-size:12.5px;color:var(--panel-ink-soft);white-space:nowrap;
}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* trust strip — business types marquee on regular page bg */
.trust-strip{position:relative;z-index:2;padding-block:32px}
.trust-label{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.page-marquee{border-top:0;margin-top:0;padding-top:0}
.page-marquee .marquee-track span{background:#343c42;border-color:rgba(255,255,255,.08);color:#c4cde6;box-shadow:var(--shadow-sm)}

/* glass cluster on a podium — abstract 3D-glass hero object */
.hero-scene{position:relative;z-index:2;height:clamp(360px,38vw,470px);display:flex;align-items:center;justify-content:center}
.device{animation:deviceFloat 5s ease-in-out infinite}
@keyframes deviceFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(-1deg)}}
.device{
  position:relative;width:min(340px,86%);border-radius:28px;padding:16px;overflow:hidden;
  background:var(--glass-on-panel-bg-strong);backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--glass-on-panel-border);box-shadow:0 30px 70px rgba(4,10,40,.4);z-index:3;
}
.device:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.06) 22%,transparent 40%);
}
.device > *{position:relative;z-index:1}
.device-cam{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);margin:0 auto 12px}
.device-screen{
  border-radius:18px;background:var(--surface-2);color:var(--ink);padding:22px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.screen-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.screen-head .live{display:inline-flex;align-items:center;gap:6px;color:#1c8a4a}
.screen-head .live i{width:6px;height:6px;border-radius:50%;background:#1c8a4a;box-shadow:0 0 8px rgba(28,138,74,.6)}
.screen-items{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.screen-items li{display:flex;align-items:center;gap:11px;font-size:15px}
.screen-items .sq{width:30px;height:30px;border-radius:9px;flex-shrink:0}
.sq{background:var(--surface);border:1px solid var(--line-strong)}
.screen-items li span{flex:1;color:var(--ink-soft)}
.screen-items li b{font-weight:600;color:var(--ink)}
.screen-items li .tag{font-family:var(--font-mono);font-size:10px;background:rgba(214,60,60,.14);color:#c23b3b;padding:2px 6px;border-radius:6px;margin-right:6px}
.screen-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;padding-top:16px;border-top:1px dashed var(--line-strong)}
.screen-total span{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.screen-total strong{font-size:32px;font-weight:700;color:var(--ink)}
.screen-pay{
  margin-top:16px;width:100%;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--on-accent);font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:10px;
}
.screen-pay svg{width:16px;height:16px}
.device-foot{display:flex;justify-content:center;margin-top:12px}
.device-foot i{width:70px;height:4px;border-radius:99px;background:var(--line-strong)}

.receipt{
  position:absolute;z-index:2;right:2%;bottom:2%;width:132px;padding:16px 14px 22px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.55);border-radius:4px 4px 0 0;box-shadow:0 20px 40px rgba(4,10,40,.35);
  clip-path:polygon(0 0,100% 0,100% 96%,92% 100%,84% 96%,76% 100%,68% 96%,60% 100%,52% 96%,44% 100%,36% 96%,28% 100%,20% 96%,12% 100%,4% 96%,0 100%);
  transform:rotate(4deg);
}
.receipt b{display:block;font-family:var(--font-mono);font-size:10px;color:#3a4664;margin-bottom:8px}
.receipt i{display:block;height:2px;background:rgba(11,20,60,.18);border-radius:2px;margin-bottom:6px;opacity:.9}
.receipt i:nth-child(3){width:70%}
.receipt i:nth-child(5){width:55%}

.float-chip{
  position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);border-radius:16px;box-shadow:0 20px 40px rgba(4,10,40,.35);
  font-size:12.5px;font-weight:600;color:#101a33;backdrop-filter:blur(16px) saturate(1.4);
}
.float-chip .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.float-chip .ic svg{width:16px;height:16px}
.float-chip small{display:block;font-weight:400;color:#5c6a8c;font-size:10.5px}
.chip-pay{left:-4%;top:12%}
.chip-pay .ic{background:#dcf5e4;color:#1c8a4a}
.chip-scan{left:2%;bottom:8%}
.chip-scan .ic{background:rgba(45,217,196,.16);color:#0f6e56}
:root[data-theme="dark"] .chip-scan .ic{background:rgba(45,217,196,.16);color:var(--teal-accent)}
.chip-mark{right:-2%;top:8%}
.chip-mark .ic{background:#fde7c8;color:#b3690a}
:root[data-theme="dark"] .chip-mark .ic{background:#3a2a10;color:#f0b15c}
.pop-chip{animation:chipPop 6.2s ease-in-out infinite}
@keyframes chipPop{
  0%{opacity:0;transform:translateY(16px) scale(.82)}
  8%{opacity:1;transform:translateY(0) scale(1.05)}
  14%{transform:translateY(0) scale(1)}
  72%{opacity:1;transform:translateY(0) scale(1)}
  86%{opacity:0;transform:translateY(-12px) scale(.9)}
  100%{opacity:0;transform:translateY(-12px) scale(.9)}
}
.scroll-cue{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:clamp(34px,5vw,54px);color:var(--panel-ink-soft);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.scroll-cue i{width:26px;height:36px;border:1px solid var(--panel-line);border-radius:99px;position:relative}
.scroll-cue i:after{content:"";position:absolute;left:50%;top:7px;width:3px;height:3px;border-radius:50%;background:var(--accent);transform:translateX(-50%);animation:sc 1.8s infinite}
@keyframes sc{0%{transform:translate(-50%,0);opacity:0}30%{opacity:1}80%{transform:translate(-50%,14px);opacity:0}100%{opacity:0}}

/* ---------- Section heads ---------- */
.section-head{max-width:760px;position:relative;z-index:2}
.section-head h2{margin-top:16px;font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.03em;font-weight:700;font-family:'Unbounded',var(--font-ui)}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:19px;line-height:1.75;max-width:560px}

/* ---------- Glass card base ---------- */
.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);border:1px solid var(--glass-border)}

/* ---------- Products ---------- */
.product-grid{position:relative;z-index:2;margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.product-card{
  grid-column:span 1;padding:clamp(26px,2.6vw,38px);border-radius:var(--radius-l);
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(1.4);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:26px;transition:transform .35s,box-shadow .35s,border-color .35s,background .35s;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);background:var(--glass-bg-strong)}
.product-card.featured{grid-column:span 2;flex-direction:row;align-items:center;background:linear-gradient(120deg,var(--glass-bg-strong),var(--glass-bg))}
.product-card.featured .product-copy{flex:1}
.product-card.featured .product-visual{flex:1;max-width:420px}
.product-index{display:block;font-family:var(--font-mono);font-size:14px;color:var(--muted)}
.product-copy .tag{display:block;margin-top:10px;font-size:12px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.product-copy h3{margin-top:10px;font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.02em}
.product-copy p{margin-top:12px;color:var(--ink-soft);font-size:19px;line-height:1.75}
.product-copy .btn{margin-top:20px;height:44px;padding:0 20px;font-size:13px}
.product-visual{border-radius:20px;background:linear-gradient(160deg,rgba(16,28,64,.85),rgba(10,19,48,.85));backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);padding:18px;min-height:200px;color:#eef2ff}

/* ---------- Product showcase (open card + vertical tabs) ---------- */
.product-showcase{position:relative;z-index:2;margin:clamp(40px,5vw,60px) auto 0;max-width:1220px;display:flex;align-items:stretch;gap:14px}
.product-item{
  position:relative;min-height:500px;border-radius:var(--radius-l);overflow:hidden;background:#343c42;border:1px solid rgba(255,255,255,.06);
  flex:0 0 104px;width:104px;
  transition:flex-basis .9s cubic-bezier(.16,1,.3,1),width .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),background .5s ease;
}
.product-item.is-open{flex:1 1 72%;width:72%;background:#353b41}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.product-item,.item-tab,.item-open{transition:none}}

/* Content cross-fades are intentionally asymmetric: whichever layer is leaving
   fades out quickly so it never sits squished mid-resize, and whichever layer is
   arriving fades in only once the card has mostly settled into its new width. */
.item-tab{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 0;background:none;border:0;cursor:pointer;opacity:1;transition:opacity .45s ease .4s,background .25s ease}
.item-tab:hover{background:rgba(255,255,255,.04)}
.product-item.is-open .item-tab{opacity:0;pointer-events:none;transition:opacity .25s ease}
.tab-num{font-family:var(--font-mono);font-size:12px;color:var(--teal-accent);letter-spacing:.03em;white-space:nowrap}
.tab-name{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#fff;font-family:'Unbounded',var(--font-ui);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;flex:1;display:flex;align-items:center}

.item-open{position:absolute;inset:0;display:flex;align-items:stretch;gap:clamp(20px,3vw,40px);padding:clamp(28px,3vw,44px);opacity:0;pointer-events:none;transition:opacity .25s ease;min-width:680px}
.product-item.is-open .item-open{opacity:1;pointer-events:auto;transition:opacity .45s ease .4s}

.open-info{flex:1 1 0%;min-width:0;display:flex;flex-direction:column}
.open-num{font-family:var(--font-mono);font-size:13px;color:var(--teal-accent);opacity:.8}
.open-cat{margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-accent)}
.open-name{margin-top:10px;font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1.2;color:var(--teal-accent)}
.open-desc{margin-top:16px;color:#c4cde6;font-size:16px;line-height:1.7;max-width:40ch}
.open-link{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:10px;color:var(--teal-accent);font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.1em;width:fit-content;transition:gap .25s}
.open-link:hover{gap:16px}

.open-visual{flex:0 0 34%;max-width:320px;align-self:center;min-width:0;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:18px;color:#eef2ff;display:flex;flex-direction:column}

@media(max-width:900px){
  /* same accordion as desktop, just turned 90° — cards stack top-to-bottom and
     the open one grows taller instead of wider, so it still reads as "books"
     leaning open rather than a plain always-expanded list */
  .product-showcase{flex-direction:column;gap:12px;max-width:100%}
  .product-item{
    flex:0 0 64px;width:100%;min-height:0;position:relative;background:#343c42;
    transition:flex-basis .8s cubic-bezier(.16,1,.3,1),background .5s ease;
  }
  .product-item.is-open{flex:0 0 620px;background:#353b41}
  .item-tab{display:flex;flex-direction:row;align-items:center;gap:14px;padding:0 22px;height:64px}
  .item-tab .tab-name{writing-mode:horizontal-tb;transform:none;font-size:15px;flex:none}
  .item-open{position:absolute;inset:0;opacity:0;pointer-events:none;flex-direction:column;padding:22px;min-width:0;overflow-y:auto}
  .open-visual{margin-top:20px}
}

/* mini mock: POS screen (Кассир 5) */
.mock-pos{display:flex;flex-direction:column;height:100%;gap:14px}
.mock-pos .pos-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;color:#8b96b8}
.mock-pos .pos-head span:first-child{color:#fff;font-weight:600;font-size:12px}
.mock-pos .pos-sum{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.mock-pos .pos-sum span{font-size:12px;color:#8b96b8}
.mock-pos .pos-sum strong{font-size:26px;color:#fff}
.mock-pos .pos-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:90px}
.mock-pos .pos-btn{border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#eef2ff;font-size:12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:10px 12px}
.mock-pos .pos-btn span{font-family:var(--font-mono);color:var(--teal-accent);font-size:11px}
.mock-pos .pos-pay{margin-top:auto;padding:12px;border-radius:10px;background:var(--teal-accent);color:#04241d;font-weight:700;font-size:14px;text-align:center}

/* mini mock: android */
.mock-android{display:flex;flex-direction:column;height:100%}
.mock-android .m-status{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:#8b96b8}
.mock-android .m-status svg{width:12px;height:12px}
.mock-android .m-app{margin-top:12px;font-weight:700;font-size:13px;color:#fff}
.mock-android .m-tiles{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.mock-android .m-tiles div{border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:center;padding:10px;font-size:11px;color:#c4cde6}
.mock-android .m-tiles div b{display:block;color:#fff;font-size:13px;margin-bottom:2px}
.mock-android .m-nav{margin-top:8px;display:flex;justify-content:space-around;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.mock-android .m-nav span{width:20px;height:3px;border-radius:99px;background:rgba(255,255,255,.2)}
.mock-android .m-nav span.active{background:var(--teal-accent);width:28px}

/* mini mock: dashboard */
.mock-dash{display:flex;flex-direction:column;height:100%}
.mock-dash .m-chart{display:flex;align-items:flex-end;gap:7px;flex:1;min-height:90px}
.mock-dash .m-chart i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--teal-accent),rgba(45,217,196,.3))}
.mock-dash table{width:100%;margin-top:16px;border-collapse:collapse;font-size:12px}
.mock-dash td{padding:8px 0;border-top:1px solid rgba(255,255,255,.1);color:#c4cde6}
.mock-dash td:first-child{color:#fff}
.mock-dash td:last-child{text-align:right;font-family:var(--font-mono)}
.mock-dash .up{color:#6fe0a0}
.mock-dash .down{color:#ff8f8f}

/* mini mock: kiosk */
.mock-kiosk{display:flex;flex-direction:column;height:100%;gap:14px}
.mock-kiosk .m-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;color:#8b96b8}
.mock-kiosk .m-head .live{display:flex;align-items:center;gap:6px;color:#6fe0a0}
.mock-kiosk .m-head .live i{width:6px;height:6px;border-radius:50%;background:#6fe0a0;display:block}
.mock-kiosk .m-scan{flex:1;min-height:140px;border-radius:16px;background:rgba(255,255,255,.06);color:var(--teal-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.mock-kiosk .m-scan svg{width:44px;height:44px}
.mock-kiosk .m-scan .beam{position:absolute;left:10%;right:10%;height:2px;background:var(--teal-accent);animation:beam 2.2s ease-in-out infinite}
.mock-kiosk .m-scan p{font-size:13px;color:#c4cde6;margin:0}
.mock-kiosk .m-items{display:flex;flex-direction:column;gap:8px}
.mock-kiosk .m-items li{display:flex;align-items:center;gap:10px;font-size:12px;color:#c4cde6}
.mock-kiosk .m-items .sq{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.1);flex-shrink:0}
.mock-kiosk .m-items li b{margin-left:auto;color:#fff;font-weight:600}
.mock-kiosk .m-total{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px dashed rgba(255,255,255,.16)}
.mock-kiosk .m-total strong{font-size:18px;color:#fff}
@keyframes beam{0%,100%{top:10px}50%{top:52px}}

/* ---------- Solutions ---------- */
.solution-grid{position:relative;z-index:2;margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.solution-card{padding:28px 24px;border-radius:var(--radius-m);background:#343c42;border:1px solid rgba(255,255,255,.07);box-shadow:var(--shadow-sm);transition:.35s}
.solution-card:hover{transform:translateY(-5px);border-color:var(--teal-accent);box-shadow:var(--shadow-md);background:#374046}
.solution-card .ic{width:52px;height:52px;border-radius:15px;background:var(--teal-accent);color:#04241d;display:grid;place-items:center;margin-bottom:18px;box-shadow:0 12px 24px rgba(45,217,196,.25);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.solution-card:hover .ic{transform:rotate(-8deg) scale(1.08)}
.solution-card .ic svg{width:24px;height:24px}
.solution-card h3{font-size:19px;font-weight:700;letter-spacing:-.01em;color:#fff;font-family:'Unbounded',var(--font-ui)}
.solution-card p{margin-top:10px;font-size:16px;color:#a6b0c3;line-height:1.75}
.solution-card .stack{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.solution-card .stack span{font-family:var(--font-mono);font-size:10px;padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#8b96b8}

/* ---------- Process ---------- */
.process-grid{position:relative;z-index:2;margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(120px,auto);gap:16px}
.step{border-radius:var(--radius-m);border:1px solid rgba(255,255,255,.07);background:#343c42;padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s}
.step:hover{transform:translateY(-5px);border-color:var(--teal-accent);box-shadow:var(--shadow-md)}
.step-1{grid-column:span 3;grid-row:span 2}
.step-2{grid-column:span 3;grid-row:span 1}
.step-3{grid-column:span 2;grid-row:span 2}
.step-4{grid-column:span 4;grid-row:span 1}
.step .num{font-family:var(--font-mono);font-size:13px;color:var(--teal-accent)}
.step h3{margin-top:12px;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.01em;color:#fff;font-family:'Unbounded',var(--font-ui)}
.step p{margin-top:10px;color:#a6b0c3;font-size:16px;line-height:1.75}
.step-frag{margin-top:auto;padding-top:18px}
.frag-list{display:flex;flex-direction:column;gap:8px}
.frag-list div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#a6b0c3}
.frag-list div svg{width:14px;height:14px;color:var(--teal-accent);flex-shrink:0}
.frag-compare{display:flex;gap:8px}
.frag-compare span{flex:1;padding:10px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:11.5px;text-align:center;color:#8b96b8}
.frag-compare span.sel{background:rgba(45,217,196,.16);color:var(--teal-accent);border-color:var(--teal-accent);font-weight:600}
.frag-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.frag-bar i{display:block;height:100%;width:78%;border-radius:99px;background:var(--teal-accent);position:relative;overflow:hidden}
.frag-bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:barShine 2.8s ease-in-out infinite}
@keyframes barShine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(220%)}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.frag-bar i::after{animation:none}}
.frag-note{margin-top:10px;font-family:var(--font-mono);font-size:11px;color:#8b96b8}
.frag-chat{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.frag-chat .avatar{width:30px;height:30px;border-radius:50%;background:var(--teal-accent);flex-shrink:0}
.frag-chat span{font-size:12.5px;color:#a6b0c3}

/* animated "flow" line filling the section's leftover vertical space below the
   step grid: a static track with 4 checkpoints and a glowing dot travelling
   along it on a loop — ties the 01→04 steps together visually */
.flow-line{position:relative;z-index:2;height:2px;background:var(--line-strong);margin:clamp(48px,8vw,96px) 6px 0;border-radius:2px}
.flow-checkpoints{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center}
.flow-checkpoints span{width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--teal-accent)}
.flow-pulse{position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-7px;margin-left:-7px;border-radius:50%;background:var(--teal-accent);box-shadow:0 0 16px 3px rgba(45,217,196,.65);animation:flowPulse 3.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes flowPulse{0%{left:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.flow-pulse{animation:none;opacity:0}}
@media(max-width:900px){.flow-line{display:none}}

/* ---------- Support ---------- */
.support{
  background:transparent;
  overflow:hidden;
}
.support-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,60px);align-items:center}
.support-copy h2{margin-top:16px;font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-.03em;font-weight:700;color:var(--panel-ink);font-family:'Unbounded',var(--font-ui)}
.support-copy p{margin-top:18px;max-width:460px;color:var(--panel-ink-soft);font-size:19px;line-height:1.75}
.support-copy .btn{margin-top:28px}
.support-panel{position:relative;display:flex;flex-direction:column;gap:14px}
.support-card{padding:26px 28px;border-radius:var(--radius-l);background:#343c42;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 50px rgba(4,10,40,.15);display:flex;align-items:center;gap:20px}
.support-247{position:relative;font-family:var(--font-mono);font-weight:700;font-size:clamp(44px,5vw,64px);color:var(--teal-accent);letter-spacing:-.02em;line-height:1}
.support-247::after{content:'';position:absolute;inset:-18px;z-index:-1;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(45,217,196,.35),transparent 70%);opacity:.5;animation:supportGlow 4s ease-in-out infinite}
@keyframes supportGlow{0%,100%{opacity:.3}50%{opacity:.7}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.support-247::after{animation:none}}
.support-card .divider{width:1px;align-self:stretch;background:rgba(255,255,255,.12)}
.support-card .label{font-size:12.5px;color:#a6b0c3;line-height:1.5}
.support-card .label b{display:flex;align-items:center;color:#fff;font-size:14.5px;font-weight:700;margin-bottom:2px}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6fe0a0;margin-right:7px;position:relative;flex-shrink:0}
.live-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid #6fe0a0;opacity:.6;animation:liveDotPing 1.8s ease-out infinite}
@keyframes liveDotPing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.live-dot::after{animation:none}}
.support-row{display:flex;gap:14px}
.support-mini{flex:1;padding:18px;border-radius:18px;background:#343c42;border:1px solid rgba(255,255,255,.08);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s}
.support-mini:hover{transform:translateY(-4px);border-color:var(--teal-accent)}
.support-mini .avatars{display:flex}
.support-mini .avatars i{width:26px;height:26px;border-radius:50%;border:2px solid #343c42;background:linear-gradient(135deg,var(--teal-accent),#1c8f7f);margin-left:-8px}
.support-mini .avatars i:first-child{margin-left:0}
.support-mini p{margin-top:10px;font-size:12px;color:#a6b0c3}
.support-mini .chat-bubble{margin-top:12px;padding:10px 12px;border-radius:10px 10px 10px 2px;background:rgba(255,255,255,.06);font-size:11.5px;color:#fff}

/* full-width "barcode" seam between support and projects — a scan-head sweeps
   left/right over static bars, nodding to the marking/маркировка business without
   depicting a real scannable code. Only the head + glow animate (transform-cheap
   position sweep on two small elements), the 48 bars themselves are static */
.barcode-scan{position:relative;margin-top:clamp(56px,9vw,96px);height:64px;display:flex;align-items:center;overflow:hidden}
.barcode-bars{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}
.barcode-bars i{width:4px;height:20px;border-radius:2px;background:var(--teal-accent);opacity:.45;flex:0 0 auto}
.barcode-bars i:nth-child(2n){height:32px}
.barcode-bars i:nth-child(3n){height:14px}
.barcode-bars i:nth-child(5n){height:26px;opacity:.6}
.barcode-bars i:nth-child(7n){height:38px}
.barcode-bars i:nth-child(6n+1){height:24px}
.scan-glow{position:absolute;top:0;bottom:0;width:70px;left:0;transform:translateX(-50%);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(45,217,196,.22),transparent 72%);animation:scanSweep 3.6s ease-in-out infinite;pointer-events:none}
.scan-head{position:absolute;top:50%;left:0;width:2.5px;height:56px;transform:translate(-50%,-50%);background:var(--teal-accent);border-radius:2px;box-shadow:0 0 10px rgba(45,217,196,.55);animation:scanSweep 3.6s ease-in-out infinite;pointer-events:none}
@keyframes scanSweep{0%,100%{left:0%}50%{left:100%}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.scan-glow,.scan-head{animation:none;left:50%}}
@media(max-width:900px){.barcode-scan{display:none}}

/* ---------- Projects ---------- */
.project-grid{position:relative;z-index:2;margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:16px;min-height:520px}
.project-card{
  position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--glass-border);
  display:flex;flex-direction:column;justify-content:flex-end;padding:30px;color:#fff;
  box-shadow:var(--shadow-sm);transition:.4s;
}
.project-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.project-card.main{grid-row:1/3}
.project-photo{position:absolute;inset:0;display:grid;grid-template-columns:1.3fr 1fr;gap:2px}
.project-photo img{width:100%;height:100%;object-fit:cover}
.project-photo.single{display:block}
.project-photo .stack{display:grid;grid-template-rows:1fr 1fr;gap:2px}
.project-card.photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,10,25,.9),rgba(6,10,25,.2) 55%,rgba(6,10,25,.4));z-index:1}
.project-card.photo > *:not(.project-photo){position:relative;z-index:2}
.project-card small{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;opacity:.85}
.project-card h3{margin:12px 0;font-size:clamp(24px,2.6vw,38px);font-weight:700;letter-spacing:-.02em;max-width:520px;font-family:'Unbounded',var(--font-ui)}
.project-card span{font-size:13px;font-weight:600;color:var(--teal-accent)}
.project-card.ghost{background:linear-gradient(155deg,#2b333a,#343c42,#3d464c);justify-content:space-between}
.project-card.ghost.alt{background:linear-gradient(155deg,#182422,#1f322f,#214843)}
.project-card.ghost .tag-top{display:flex;justify-content:space-between;align-items:flex-start}
.project-card.ghost .ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);display:grid;place-items:center;transition:transform .4s cubic-bezier(.22,1,.36,1),background .3s}
.project-card.ghost:hover .ic{transform:rotate(-10deg) scale(1.1);background:var(--teal-accent)}
.project-card.ghost:hover .ic svg{stroke:#04241d}
.project-card.ghost .ic svg{width:20px;height:20px}

/* ---------- News ---------- */
.news{position:relative;overflow:hidden;padding-block:clamp(70px,7vw,100px)}
.news-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
.news-list{position:relative;z-index:2;margin-top:34px;border-radius:var(--radius-l);background:#343c42;border:1px solid rgba(255,255,255,.08);padding:0 clamp(16px,2.6vw,28px);overflow:hidden}
.news-item{border-bottom:1px solid rgba(255,255,255,.08)}
.news-item:last-child{border-bottom:0}
.news-item summary{display:grid;grid-template-columns:120px 140px 1fr 30px;align-items:center;gap:16px;padding:22px 4px;color:#fff;transition:.3s;cursor:pointer;list-style:none}
.news-item summary::-webkit-details-marker{display:none}
.news-item summary:hover{padding-left:12px;color:var(--teal-accent)}
.news-item summary:hover b{color:var(--teal-accent)}
.news-item time,.news-item .cat{font-family:var(--font-mono);font-size:13px;color:#8b96b8}
.news-item .cat{padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);width:fit-content;transition:background .3s,border-color .3s}
.news-item summary:hover .cat{background:rgba(45,217,196,.12);border-color:var(--teal-accent)}
.news-item h3{font-size:clamp(16px,1.6vw,20px);font-weight:600;letter-spacing:-.01em;font-family:'Unbounded',var(--font-ui)}
.news-item b{display:inline-block;font-size:18px;font-weight:400;color:#8b96b8;transition:transform .3s cubic-bezier(.22,1,.36,1),color .3s}
.news-item[open] summary b{transform:rotate(180deg)}
.news-item-body{padding:0 4px 26px;max-width:760px}
.news-item-body p{font-size:15.5px;line-height:1.7;color:#c4cde6}
.news-item-body p+p{margin-top:12px}
.news-item-body a{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--teal-accent);font-weight:700;font-size:14.5px}
.news-item-body .source-note{margin-top:14px;font-size:12.5px;color:#6b7690}
:where(a.news-item){display:grid;grid-template-columns:120px 140px 1fr 30px;align-items:center;gap:16px;padding:22px 4px;color:#fff;text-decoration:none;transition:.3s}
:where(a.news-item:hover){padding-left:12px;color:var(--teal-accent)}
:where(a.news-item:hover b){color:var(--teal-accent)}
:where(a.news-item:hover .cat){background:rgba(45,217,196,.12);border-color:var(--teal-accent)}
a.news-item h3{color:inherit}
.news-list a.news-item{color:#fff}
.news-list a.news-item:hover{color:var(--teal-accent)}
.news-list a.news-item b{color:#8b96b8}
.news-list a.news-item:hover b{color:var(--teal-accent)}

/* ==========================================================================
   News hub — fixed editorial palette (not a light/dark theme toggle).
   Per explicit request this page alternates dark and light SECTIONS the way
   an edited magazine page does, regardless of the sitewide data-theme state:
     graphite  #10171D  — featured block, case block, video block
     steel     #1B2630  — case block variant (slightly bluer than pure graphite)
     cool white #FFFFFF — regular/medium/compact cards, process card
     tiffany   #2DD9C4  — primary accent everywhere
     steel-blue #5B8CAE — secondary accent used sparingly in illustrations
   Colors below are hardcoded on purpose, not var(--surface)/var(--ink) —
   this page intentionally does not follow the sitewide theme switch.
   ========================================================================== */
.news-hero-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.news-hero-top .news-hero-copy{flex:1;min-width:280px}
.news-tabs-panel{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:18px;background:rgba(16,23,29,.05);border:1px solid rgba(16,23,29,.12);flex-shrink:0;max-width:100%}
:root[data-theme="dark"] .news-tabs-panel{background:rgba(244,248,251,.07);border-color:rgba(244,248,251,.14)}
.news-filter{white-space:nowrap;appearance:none;border:0;background:transparent;color:#4A5A68;padding:9px 18px;border-radius:99px;font-family:var(--font-ui);font-size:14.5px;font-weight:700;cursor:pointer;transition:background .3s,color .3s}
:root[data-theme="dark"] .news-filter{color:#9FB0C0}
.news-filter.is-active{background:#2DD9C4;color:#04241d}
@media(hover:hover) and (pointer:fine){.news-filter:not(.is-active):hover{color:#10171D}
  :root[data-theme="dark"] .news-filter:not(.is-active):hover{color:#F4F8FB}}

.is-filtered-out,.news-tile.is-filtered-out{display:none}
.news-tile.is-hiding{opacity:0;transform:scale(.96);transition:opacity .22s,transform .22s}

/* ---------- News: uniform materials grid — every tile is the same size and
   shape (photo cover + text), plain and readable like kkm.solutions' own
   news listing: no mixed sizes, no dark blocks here. .is-dark is kept only
   for the video card embedded inside an individual article page. ---------- */
.news-grid-uniform{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:980px){.news-grid-uniform{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.news-grid-uniform{grid-template-columns:1fr}}

.news-tile{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-l);text-decoration:none;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,opacity .3s}
.news-tile:hover{transform:translateY(-4px)}
.news-tile-cover{position:relative;aspect-ratio:3/2;flex-shrink:0;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,#2DD9C4 18%,#F4F8FB),#EAF4F3 85%)}
.news-tile-video-badge{position:absolute;z-index:3;top:14px;left:14px;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:#10171D;font-family:var(--font-mono);font-size:12.5px;font-weight:700;box-shadow:0 4px 14px rgba(16,23,29,.12)}
.news-tile-video-badge svg{width:11px;height:11px;fill:#2DD9C4}
.news-tile-play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(60px,17%,88px);aspect-ratio:1;border-radius:50%;background:#2DD9C4;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 38px rgba(45,217,196,.5);transition:transform .3s,box-shadow .3s}
.news-tile-cover .news-tile-play svg{position:static;inset:auto;width:58%;height:auto;fill:#04241d;margin:0;transform:none}
.news-tile-cover .news-tile-video-badge svg{position:static;inset:auto;width:11px;height:11px;transform:none}
.news-tile:hover .news-tile-play{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 16px 38px rgba(45,217,196,.6)}
.news-tile-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.news-tile-cover svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.news-tile:hover .news-tile-cover img,.news-tile:hover .news-tile-cover svg{transform:scale(1.06)}
.news-tile-body{flex:1;min-width:0;padding:22px;display:flex;flex-direction:column}
.news-tile-body .kicker{font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.news-tile-body time{font-family:var(--font-mono);font-size:13.5px}
.news-tile-body .cat{margin-top:10px;width:fit-content;padding:4px 11px;border-radius:99px;font-family:var(--font-mono);font-size:13px;font-weight:600}
.news-tile-body h3{margin-top:12px;font-weight:800;font-family:var(--font-ui);font-size:19px;line-height:1.32;letter-spacing:-.01em}
.news-tile-body p{margin-top:8px;font-size:15px;line-height:1.6;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.news-tile-body b{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px}

.news-tile.is-light{background:#FFFFFF;border:1px solid rgba(16,23,29,.10);box-shadow:0 2px 10px rgba(16,23,29,.06)}
.news-tile.is-light:hover{box-shadow:0 20px 50px rgba(16,23,29,.14)}
.news-tile.is-light .news-tile-body h3{color:#10171D}
.news-tile.is-light .news-tile-body p{color:#4A5A68}
.news-tile.is-light .news-tile-body time,.news-tile.is-light .news-tile-body .kicker{color:#6B7A88}
.news-tile.is-light .news-tile-body .cat{background:color-mix(in srgb,var(--news-accent,#2DD9C4) 12%,transparent);border:1px solid color-mix(in srgb,var(--news-accent,#2DD9C4) 30%,transparent);color:color-mix(in srgb,var(--news-accent,#2DD9C4) 75%,#10171D)}
.news-tile.is-light .news-tile-body b{color:color-mix(in srgb,var(--news-accent,#2DD9C4) 75%,#10171D)}

.news-tile.is-dark{background:#232d34;border:1px solid rgba(244,248,251,.08);box-shadow:0 20px 50px rgba(16,23,29,.25)}
.news-tile.is-dark:hover{box-shadow:0 28px 60px rgba(0,0,0,.4)}
.news-tile.is-dark .news-tile-body h3{color:#F4F8FB}
.news-tile.is-dark .news-tile-body p{color:#AEC0CC}
.news-tile.is-dark .news-tile-body time,.news-tile.is-dark .news-tile-body .kicker{color:#9FB0C0}
.news-tile.is-dark .news-tile-body .cat{background:rgba(45,217,196,.14);border:1px solid rgba(45,217,196,.35);color:#2DD9C4}
.news-tile.is-dark .news-tile-body b{color:#2DD9C4}

/* video tiles: play button + duration badge sit on the cover, same shell as
   every other tile so video reads as part of the grid rhythm, not a separate
   fenced-off block */
.news-tile-cover::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.3),transparent 55%);opacity:0;transition:opacity .3s}
.news-tile.is-video .news-tile-cover::after{opacity:1}
.news-tile-badge{position:absolute;z-index:3;top:14px;left:14px;padding:6px 13px;border-radius:99px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff;font-family:var(--font-mono);font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.news-tile-duration{position:absolute;z-index:3;bottom:14px;right:14px;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff;font-family:var(--font-mono);font-size:13px;font-weight:600}
.news-source-caption{margin-top:16px;padding:0 2px;font-size:13px;color:#8295A3}

/* legacy accordion styles (still used by the <details> pattern on some pages) */
.news-item{border-bottom:1px solid rgba(255,255,255,.08)}
.news-item:last-child{border-bottom:0}
.news-item summary{display:grid;grid-template-columns:120px 140px 1fr 30px;align-items:center;gap:16px;padding:22px 4px;color:#fff;transition:.3s;cursor:pointer;list-style:none}
.news-item summary::-webkit-details-marker{display:none}
.news-item summary:hover{padding-left:12px;color:var(--teal-accent)}
.news-item summary:hover b{color:var(--teal-accent)}
.news-item time,.news-item .cat{font-family:var(--font-mono);font-size:13px;color:#8b96b8}
.news-item .cat{padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);width:fit-content;transition:background .3s,border-color .3s}
.news-item summary:hover .cat{background:rgba(45,217,196,.12);border-color:var(--teal-accent)}
.news-item h3{font-size:clamp(16px,1.6vw,20px);font-weight:600;letter-spacing:-.01em;font-family:var(--font-ui)}
.news-item b{display:inline-block;font-size:18px;font-weight:400;color:#8b96b8;transition:transform .3s cubic-bezier(.22,1,.36,1),color .3s}
.news-item[open] summary b{transform:rotate(180deg)}
.news-item-body{padding:0 4px 26px;max-width:760px}
.news-item-body p{font-size:15.5px;line-height:1.7;color:#c4cde6}
.news-item-body p+p{margin-top:12px}
.news-item-body a{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--teal-accent);font-weight:700;font-size:14.5px}
.news-item-body .source-note{margin-top:14px;font-size:12.5px;color:#6b7690}

/* ---------- News: article page meta / related ---------- */
.news-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.news-breadcrumbs a{color:var(--muted);transition:color .3s}
.news-breadcrumbs a:hover{color:var(--news-accent,var(--teal-accent))}
.news-breadcrumbs span{color:var(--ink-soft)}
.news-article-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.news-article-meta .cat{padding:5px 12px;border-radius:99px;background:var(--glass-bg);border:1px solid var(--glass-border);font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--news-accent,var(--teal-accent))}
.news-article-meta time{font-family:var(--font-mono);font-size:14px;color:var(--muted)}
.article-cover{position:relative;overflow:hidden;margin:24px 0 8px;aspect-ratio:3/2;max-height:560px;border-radius:var(--radius-l);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--news-accent,var(--teal-accent)) 20%,var(--surface-2)),var(--surface-2) 80%)}
@media(max-width:560px){.article-cover{aspect-ratio:4/3;max-height:none}}
.article-cover.has-photo{display:block}
.article-cover.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-cover.is-scene svg{position:absolute;inset:0;width:100%;height:100%;color:var(--news-accent,var(--teal-accent))}
.article-cover::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 25% 15%,rgba(255,255,255,.5),transparent 60%);mix-blend-mode:overlay;pointer-events:none}
:root[data-theme="dark"] .article-cover::after{background:radial-gradient(ellipse 60% 50% at 25% 15%,rgba(255,255,255,.16),transparent 60%)}
.article-cover svg{position:relative;z-index:1;width:52%;height:52%;color:var(--news-accent,var(--teal-accent))}
.article-quote{position:relative;margin:26px 0;padding:6px 0 6px 26px;border-left:4px solid var(--news-accent,var(--teal-accent));font-size:22px;line-height:1.5;font-weight:700;color:var(--ink);max-width:100%}
.news-related{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);max-width:100%}
.news-related-label{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.news-related-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.news-related-item:last-child{border-bottom:0}
.news-related-item b{font-weight:500;font-size:13.5px;color:var(--muted);flex-shrink:0;font-family:var(--font-mono)}
@media(hover:hover) and (pointer:fine){.news-related-item:hover{color:var(--news-accent,var(--teal-accent))}}

/* per-category accent — set on <body> (article pages) or the card itself
   (index grid) so it reaches the hero, chips, video card, cover and related-
   news underline consistently, without touching the sitewide brand teal used
   for buttons/CTAs elsewhere. Default (no class) stays brand teal. */
body.news-cat-general,.news-cat-general{--news-accent:#f5a623}
body.news-cat-update,.news-cat-update{--news-accent:#2dd9c4}
body.news-cat-company,.news-cat-company{--news-accent:#5b8cff}
body.news-cat-useful,.news-cat-useful{--news-accent:#38bdf8}
body.news-cat-video,.news-cat-video{--news-accent:#ec4899}
body.news-cat-finance,.news-cat-finance{--news-accent:#8b7cf6}
body.news-cat-alcohol,.news-cat-alcohol{--news-accent:#e2574c}
body.news-cat-software,.news-cat-software{--news-accent:#6366f1}
body.news-cat-hardware,.news-cat-hardware{--news-accent:#b45309}
.side-deco.deco-blob{background:radial-gradient(circle,color-mix(in srgb,var(--news-accent,var(--teal-accent)) 70%,transparent),transparent 68%)}
.side-deco.deco-ring{border-color:color-mix(in srgb,var(--news-accent,var(--teal-accent)) 70%,transparent)}
.side-deco.deco-ring::after{border-color:color-mix(in srgb,var(--news-accent,var(--teal-accent)) 55%,transparent)}
.side-deco.deco-ring::before{background:var(--news-accent,var(--teal-accent))}
.side-deco.deco-dotgrid{background-image:radial-gradient(color-mix(in srgb,var(--news-accent,var(--teal-accent)) 85%,transparent) 2.5px,transparent 3px)}
.side-deco.deco-grid{background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--news-accent,var(--teal-accent)) 60%,transparent) 0 2px,transparent 2px 32px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--news-accent,var(--teal-accent)) 60%,transparent) 0 2px,transparent 2px 32px)}
.side-signature svg{color:var(--news-accent,var(--teal-accent))}
.news-lead{font-size:24px;line-height:1.55;color:var(--ink-soft);max-width:720px;margin-bottom:8px}
.news-article-body .case-body-text{font-size:21px;line-height:1.8}
.news-article-body .article-checklist li{font-size:19px}
.news-article-body .article-stat b{font-size:30px}
.news-article-body .article-stat span{font-size:16px}
.news-article-body .article-quote{font-size:22px}
.news-article-body .case-body-text h2{font-size:27px}
.news-article-body .article-help p{font-size:19px}
.news-article-body .article-help h2{font-size:24px}

/* structured long-form article — subheadings, numbered steps, source line,
   a distinct "how we help" block. Scoped to news articles only. */
.case-body-text h2{margin-top:42px;font-family:var(--font-ui);font-weight:800;font-size:24px;letter-spacing:-.01em;color:var(--ink)}
.case-body-text h2:first-child{margin-top:0}
.article-steps{margin:18px 0;display:flex;flex-direction:column;gap:14px;counter-reset:step}
.article-steps li{position:relative;display:flex;gap:16px;list-style:none;padding-left:0}
.article-steps li::before{counter-increment:step;content:counter(step);flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--news-accent,var(--teal-accent));color:#fff;font-family:var(--font-mono);font-weight:700;font-size:14px;display:grid;place-items:center}
.article-steps li span{padding-top:3px}
.article-steps li b{color:var(--ink);font-weight:700}
.article-risks{margin:18px 0;padding:20px 24px;border-radius:var(--radius-m);background:color-mix(in srgb,var(--news-accent,var(--teal-accent)) 8%,var(--surface-2));border:1px solid color-mix(in srgb,var(--news-accent,var(--teal-accent)) 25%,var(--line))}
.article-risks p{margin:0}
.article-risks p + p{margin-top:10px}
.article-help{margin:24px 0;padding:24px 26px;border-radius:var(--radius-m);background:#232d34;color:#F4F8FB}
.article-help h2{margin-top:0;color:#F4F8FB}
.article-help p{color:#C3D0DA;margin-top:8px}
.article-help .btn{margin-top:14px}
.article-source{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.article-source a{color:var(--news-accent,var(--teal-accent));text-decoration:underline}
.news-article-hero .news-lead{max-width:100%}
.article-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:22px 0}
.article-stat{padding:20px 22px;border-radius:var(--radius-m);background:var(--surface-2);border:1px solid var(--line)}
.article-stat b{display:block;font-family:var(--font-ui);font-weight:800;font-size:30px;color:var(--news-accent,var(--ink));line-height:1.2}
.article-stat span{display:block;margin-top:6px;font-size:15px;color:var(--muted);line-height:1.45}
.article-checklist{margin:20px 0;display:flex;flex-direction:column;gap:12px;max-width:none}
.article-checklist li{display:flex;align-items:flex-start;gap:12px;list-style:none;font-size:18px;line-height:1.6;color:var(--ink-soft)}
.article-checklist li i{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--news-accent,var(--teal-accent)) 16%,transparent);display:grid;place-items:center;margin-top:2px}
.article-checklist li i svg{width:13px;height:13px;fill:none;stroke:var(--news-accent,var(--teal-accent));stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.article-checklist li b{color:var(--ink);font-weight:700}

/* in-article video card — matches kkm.solutions' own pattern: a video linked
   at the point in the text it illustrates, not a separate gallery section.
   Fixed dark card regardless of site theme, same visual language as the
   news hub's .news-tile-video-badge play icon. */
/* large video hero — same footprint as .article-cover, used when a video
   needs to read as a primary block (first thing after the lead), not a
   small side-by-side strip card */
.article-cover.is-video,.article-video-hero{display:block;text-decoration:none}
.article-video-hero{position:relative;overflow:hidden;margin:24px 0 8px;aspect-ratio:3/2;max-height:560px;border-radius:var(--radius-l);background:#0e2529}
@media(max-width:560px){.article-video-hero{aspect-ratio:4/3;max-height:none}}
.article-video-hero img,.article-cover.is-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-video-hero::before,.article-cover.is-video::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 45%);pointer-events:none}
.article-video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:24px 0 8px}
.article-video-grid .article-video-hero{margin:0;aspect-ratio:4/3}
@media(max-width:700px){.article-video-grid{grid-template-columns:1fr}}
.article-cover-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-55%);width:88px;height:88px;border-radius:50%;background:#2DD9C4;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(45,217,196,.45);transition:transform .3s,box-shadow .3s}
.article-video-hero:hover .article-cover-play,.article-cover.is-video:hover .article-cover-play{transform:translate(-50%,-55%) scale(1.08);box-shadow:0 22px 50px rgba(45,217,196,.6)}
.article-cover-play svg{width:52px;height:52px;fill:#04241d;margin:0}
.article-cover-video-info{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:22px clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:6px}
.article-cover-video-title{font-family:var(--font-ui);font-weight:700;font-size:19px;line-height:1.4;color:#F4F8FB}
.article-cover-video-link{display:inline-flex;align-items:center;gap:6px;width:fit-content;font-family:var(--font-mono);font-size:14px;font-weight:600;color:#2DD9C4}

.article-video-card{display:flex;overflow:hidden;margin:22px 0;border-radius:var(--radius-m);text-decoration:none;background:#232d34;border:1px solid rgba(244,248,251,.08);box-shadow:0 14px 34px rgba(16,23,29,.18);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.article-video-card:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(16,23,29,.26)}
.article-video-cover{position:relative;flex:0 0 42%;aspect-ratio:16/10;overflow:hidden}
.article-video-cover svg{position:absolute;inset:0;width:100%;height:100%}
.article-video-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-video-cover::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 55%)}
.article-video-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#2DD9C4;display:grid;place-items:center;box-shadow:0 12px 28px rgba(45,217,196,.4);transition:transform .3s}
.article-video-card:hover .article-video-play{transform:translate(-50%,-50%) scale(1.08)}
.article-video-play svg{width:17px;height:17px;fill:#04241d;margin-left:2px}
.article-video-body{flex:1;min-width:0;padding:20px 24px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.article-video-title{font-family:var(--font-ui);font-weight:700;font-size:16.5px;line-height:1.4;color:#F4F8FB}
.article-video-link{display:inline-flex;align-items:center;gap:6px;width:fit-content;font-family:var(--font-mono);font-size:13.5px;font-weight:600;color:#2DD9C4}
@media(max-width:560px){.article-video-card{flex-direction:column}.article-video-cover{flex:none;aspect-ratio:16/9}}

/* news article reading layout — a moderate column, not the full sitewide
   container (that made the cover photo an absurdly short wide strip) and
   not a narrow centered island either (too much empty gutter either side) */
.case-hero.news-article-hero .container{max-width:1180px;margin-inline:auto}
.case-block.news-article-body{max-width:1180px;margin-inline:auto;float:none}
.news-article-hero h1{font-family:var(--font-ui);font-weight:800;letter-spacing:-.02em;font-size:clamp(32px,3.8vw,50px);max-width:100%}
.news-article-body .case-body-text,.news-article-body .news-related{max-width:100%!important}

/* ---------- Footer / CTA ---------- */
.cta-band{position:relative;overflow:hidden;background:transparent;color:var(--ink);padding-block:clamp(80px,9vw,116px);text-align:center}
.cta-band .eyebrow{position:relative;z-index:2;color:var(--teal-accent);margin-bottom:20px}
.cta-band h2{position:relative;z-index:2;font-size:clamp(34px,5vw,64px);letter-spacing:-.03em;font-weight:700;line-height:1.04;font-family:'Unbounded',var(--font-ui);color:var(--ink)}
.cta-band .btn-panel{position:relative;z-index:2;margin-top:32px;overflow:hidden;isolation:isolate}
.cta-band .btn-panel::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--teal-accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover) and (pointer:fine){
  .cta-band .btn-panel:hover::before{transform:scaleX(1)}
  .cta-band .btn-panel:hover{color:#04241d}
}
.site-footer{background:#2a3035;color:#eef2ff}
.footer-grid{padding-block:70px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;border-top:1px solid rgba(255,255,255,.1)}
.footer-brand p{margin-top:16px;color:#8b96b8;font-size:14px;max-width:220px;line-height:1.6}
.footer-col h4{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#8b96b8}
.footer-col a,.footer-col p{display:block;margin-top:14px;font-size:14.5px;color:#c4cde6}
.footer-col a:hover{color:var(--teal-accent)}
.footer-social{display:flex;gap:8px;margin-top:20px}
.footer-social span{padding:7px 13px;border:1px solid rgba(255,255,255,.14);border-radius:99px;font-size:12px;color:#a6b0c3}
.footer-bottom{padding:22px 0 36px;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#8b96b8}
.footer-bottom a{color:#c4cde6}

/* ---------- Case page ---------- */
.case-hero{padding-top:clamp(150px,16vw,190px);padding-bottom:60px;position:relative;overflow:hidden}
.case-hero:before{
  content:"";position:absolute;z-index:0;top:-10%;right:-6%;width:46vw;height:46vw;max-width:620px;max-height:620px;
  background:radial-gradient(circle,var(--glow),transparent 68%);opacity:.9;pointer-events:none;
}
.case-hero .container{position:relative;z-index:1}

/* about-page hero: giant muted year behind the copy + two overlapping,
   slightly tilted certificate photos that drift a little on scroll (own
   lightweight scroll listener, not GSAP's heavier effects scan) */
.hero-bigtext{
  position:absolute;z-index:0;top:50%;left:50%;
  font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(140px,26vw,420px);
  line-height:1;color:var(--teal-accent);opacity:.07;letter-spacing:-.02em;
  white-space:nowrap;pointer-events:none;user-select:none;
  animation:bigtextFloat 10s ease-in-out infinite;
}
.about-hero .case-hero-grid{align-items:flex-start}
.about-hero .case-hero-copy{position:relative;z-index:1;padding-top:clamp(20px,4vw,50px)}
@media(min-width:901px){
  .about-hero .case-hero-grid{position:relative}
  .about-hero .case-hero-copy{max-width:560px}
  .about-hero .case-hero-visual{position:absolute;top:0;right:0;min-height:0}
}
@media(min-width:901px){
  .product-hero .case-hero-grid{position:relative}
  .product-hero .case-hero-copy{max-width:520px}
  .product-hero .case-hero-visual{position:absolute;top:0;right:0;min-height:0}
}
.about-hero h1{text-shadow:0 4px 28px rgba(0,0,0,.55)}
.about-hero .lead{text-shadow:0 2px 16px rgba(0,0,0,.4);font-size:22px}
@keyframes bigtextFloat{
  0%,100%{transform:translate(-50%,-50%) translate(0,0) scale(1)}
  50%{transform:translate(-50%,-50%) translate(18px,-14px) scale(1.03)}
}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.hero-bigtext{animation:none}}
@media(max-width:900px){.hero-bigtext{font-size:clamp(90px,32vw,200px)}}

/* about-page certificate carousel: true 3D wheel, same math as the
   reference (rotateY spins each card around the stack's own axis,
   scaleY squishes it edge-on, translateX kicks it out of the middle,
   blur sells the depth) — JS only ever writes 3 numbers per card
   (--offset/--dir/--abs), CSS does 100% of the transform work. */
.cert-carousel-section{padding-top:56px}
.cert-carousel{position:relative;height:clamp(320px,38vw,440px);margin-top:32px;display:flex;align-items:center;justify-content:center}
.carousel-track{position:relative;width:clamp(190px,20vw,240px);aspect-ratio:3/4;perspective:1000px}
.carousel-card{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:hidden;
  box-shadow:0 24px 50px rgba(4,10,40,.3);border:6px solid #fff;background:#fff;
  cursor:pointer;transition:transform .45s ease-out,filter .45s ease-out,opacity .45s ease-out;
  transform:
    rotateY(calc(var(--offset,0) * 22deg))
    scaleY(calc(1 + var(--abs,0) * -0.32))
    translateX(calc(var(--dir,0) * -108px));
  filter:blur(calc(var(--abs,0) * 0.4rem));
  opacity:var(--op,1);z-index:var(--z,1);
}
.carousel-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:22px;line-height:1;
  color:var(--ink);cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center;
}
.carousel-arrow:hover{border-color:var(--teal-accent);color:var(--teal-accent)}
.carousel-prev{left:0}
.carousel-next{right:0}
@media(max-width:700px){.cert-carousel{height:280px}.carousel-arrow{width:38px;height:38px;font-size:18px}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.carousel-card{transition:none}}

/* about-page services: dark rounded rows, same card language as
   .support-card/.result-card elsewhere on the site — no full-bleed
   colour bands, so there's no hard seam between items, just normal
   stacked cards that fade up on scroll like everything else. */
.service-list{display:flex;flex-direction:column;gap:16px}
.service-row{display:flex;gap:24px;align-items:flex-start;padding:28px 30px;border-radius:var(--radius-l);background:#343c42;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 50px rgba(4,10,40,.15);color:#eef2ff;transition:transform .3s,box-shadow .3s,border-color .3s}
.service-row:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(4,10,40,.28);border-color:var(--teal-accent)}
.products-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:8px}
.product-tile{grid-column:span 2;position:relative;display:flex;flex-direction:column;padding:32px 28px;border-radius:22px;background:#343c42;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 50px rgba(4,10,40,.15);color:#eef2ff;text-decoration:none;transition:transform .35s,box-shadow .35s,border-color .35s}
.product-tile:nth-child(1),.product-tile:nth-child(2){grid-column:span 3}
.product-tile:hover{transform:translateY(-6px);border-color:var(--teal-accent);box-shadow:0 26px 60px rgba(4,10,40,.28)}
.product-tile-num{position:absolute;top:26px;right:28px;font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.28)}
.product-tile-icon{width:56px;height:56px;border-radius:16px;background:var(--teal-accent);color:#04241d;display:grid;place-items:center;margin-bottom:20px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.product-tile:hover .product-tile-icon{transform:rotate(-8deg) scale(1.08)}
.product-tile-icon svg{width:26px;height:26px}
.product-tile h3{font-size:22px;font-weight:800;font-family:'Unbounded',var(--font-ui)}
.product-tile-cat{display:block;margin-top:6px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-accent)}
.product-tile p{margin-top:14px;font-size:16px;line-height:1.65;color:#a6b0c3;flex:1}
.product-tile-more{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:#fff}
.product-tile-more b{transition:transform .3s}
.product-tile:hover .product-tile-more b{transform:translateX(4px)}
@media(max-width:900px){.products-grid{grid-template-columns:1fr 1fr}.product-tile{grid-column:span 1}.product-tile:nth-child(1),.product-tile:nth-child(2){grid-column:span 2}}
@media(max-width:600px){.products-grid{grid-template-columns:1fr}.product-tile,.product-tile:nth-child(1),.product-tile:nth-child(2){grid-column:span 1}}
.product-tile{min-width:0}
.product-tile h3{overflow-wrap:anywhere}
.service-num{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--teal-accent);flex-shrink:0;padding-top:4px}
.service-body h3{font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(19px,2.3vw,25px);line-height:1.2}
.service-body p{margin-top:10px;font-size:17px;line-height:1.7;color:#dbe2f7}
.partners-orbit{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.partner-chip{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid transparent;padding:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s;box-shadow:0 8px 20px rgba(4,10,40,.18)}
.partner-chip img{max-width:100%;max-height:100%;object-fit:contain}
.partner-chip:hover{transform:translateY(-4px) scale(1.06)}
.partner-chip.is-active{border-color:var(--teal-accent);box-shadow:0 10px 26px rgba(45,217,196,.35)}
.partner-detail{margin-top:26px;display:flex;align-items:center;gap:24px;padding:26px;border-radius:20px;background:linear-gradient(135deg,rgba(45,217,196,.14),rgba(255,255,255,.03));border:1px solid rgba(45,217,196,.28);transition:opacity .18s}
.partner-detail-logo{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:14px;padding:10px;flex:none}
.partner-detail-body h4{font-size:20px;font-weight:700;color:#eef2ff}
.partner-detail-body p{margin-top:6px;font-size:15.5px;color:#9aa4c2;line-height:1.55;max-width:640px}
.partner-detail-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px}
.partner-detail-site{color:var(--teal-accent);font-weight:700;font-size:14px;text-decoration:none}
.partner-detail-site:hover{text-decoration:underline}
.partner-detail-tel{color:#9aa4c2;font-size:14px;text-decoration:none}
.partner-detail-tel:hover{color:var(--teal-accent)}
@media(max-width:600px){.partner-chip{width:52px;height:52px;padding:9px}.partner-detail{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}}
@media(max-width:600px){.service-row{flex-direction:column;gap:10px;padding:22px}}
/* about-page hero visual: a static collage of the page's own real numbers
   (years on market, partner count, certificate count) — built just for
   this page instead of reusing the kassa-screen mockup from case pages,
   and deliberately not animated: one calm, confident visual moment. */
.stat-cluster{position:relative;width:100%;max-width:380px;height:320px;margin:0 auto}
.stat-card{position:absolute;padding:24px 26px;border-radius:20px;background:#fff;box-shadow:0 24px 50px rgba(4,10,40,.16);border:1px solid rgba(13,18,32,.06)}
.stat-card b{display:block;font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:52px;line-height:1;color:#0d1220}
.stat-card span{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:#4a5468;max-width:150px}
.stat-card-1{top:0;left:6%;transform:rotate(-6deg);z-index:3;background:var(--teal-accent);border-color:transparent}
.stat-card-1 b,.stat-card-1 span{color:#04241d}
.stat-card-2{top:112px;right:0;transform:rotate(5deg);z-index:2}
.stat-card-3{bottom:0;left:0;transform:rotate(-3deg);z-index:1}
@media(max-width:900px){.stat-cluster{max-width:320px;height:290px}}
@media(max-width:480px){.stat-cluster{max-width:280px;height:250px}.stat-card{padding:18px 20px}.stat-card b{font-size:40px}}

.case-hero-grid{display:flex;align-items:center;gap:clamp(30px,5vw,64px)}
.case-hero-copy{flex:1;min-width:0}
.case-hero-visual{position:relative;width:380px;flex-shrink:0;display:flex;align-items:center;justify-content:center;min-height:clamp(300px,32vw,380px)}
.case-hero-visual.wide{width:460px;min-height:clamp(340px,36vw,440px)}
.hero-photo-frame{width:100%;height:100%;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(4,10,40,.35)}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo-frame.light{background:#fff;display:flex;align-items:center;justify-content:center;padding:28px;box-shadow:0 20px 45px rgba(4,10,40,.1)}

/* equipment product detail — photo + buy box, like a real store page */
.equip-page-body{max-width:1180px;margin:0 auto}
.equip-detail{display:flex;gap:48px;align-items:flex-start;max-width:1180px;margin:0 auto}
.equip-detail-gallery{flex:1.3;min-width:0;display:flex;gap:16px}
.equip-detail-thumbs{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.equip-detail-thumbs button{width:60px;height:60px;padding:5px;border-radius:12px;border:1.5px solid var(--line);background:#fff;cursor:pointer;overflow:hidden;transition:border-color .2s}
.equip-detail-thumbs button img{width:100%;height:100%;object-fit:contain;display:block}
.equip-detail-thumbs button:hover{border-color:var(--teal-accent)}
.equip-detail-thumbs button.active{border-color:var(--teal-accent);border-width:2px}
.equip-detail-photo{position:relative;flex:1;min-width:0;max-width:600px;background:#fff;border-radius:20px;border:1px solid var(--line);box-shadow:0 16px 36px rgba(4,10,40,.08);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:26px;cursor:zoom-in}
.equip-detail-photo img{width:100%;height:100%;object-fit:contain;transition:transform .12s ease-out,opacity .28s ease,filter .28s ease}
.equip-detail-photo img.fading{opacity:0;filter:blur(2px)}

/* Обзор / Характеристики tabs, like the vc8bit.ru product pages */
.equip-tabs-nav{display:flex;gap:clamp(20px,4vw,40px);border-bottom:1px solid var(--line)}
.equip-tab-btn{padding:0 0 16px;background:none;border:none;border-bottom:2px solid transparent;font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s}
.equip-tab-btn:hover{color:var(--ink)}
.equip-tab-btn.active{color:var(--ink);border-color:var(--teal-accent)}
.equip-tab-panel{margin-top:32px}
.equip-tab-panel[hidden]{display:none}
.equip-gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:background .2s,border-color .2s,color .2s;z-index:2}
.equip-gallery-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
.equip-gallery-arrow:hover{background:var(--teal-accent);border-color:var(--teal-accent);color:#04241d}
.equip-gallery-arrow.prev{left:12px}
.equip-gallery-arrow.next{right:12px}
.equip-detail-buybox{flex:1;min-width:320px;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow-sm);position:sticky;top:110px}
.equip-detail-buybox-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.equip-detail-buybox .eyebrow{color:var(--teal-accent)}
.equip-like-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:border-color .2s,color .2s,background .2s;flex-shrink:0}
.equip-like-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.equip-like-btn:hover{border-color:#e0245e;color:#e0245e}
.equip-like-btn.active{background:#e0245e;border-color:#e0245e;color:#fff}
.equip-like-btn.active svg{fill:currentColor}
.equip-detail-buybox h1{margin-top:10px;font-size:clamp(24px,2.6vw,30px);font-family:'Unbounded',var(--font-ui);font-weight:800;color:var(--ink);line-height:1.2}
.equip-detail-buybox .lead{margin-top:12px;font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.equip-detail-sku{display:block;margin-top:14px;font-size:14px;color:var(--muted);font-family:var(--font-mono)}
.equip-detail-stock{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:14px;font-weight:600;padding:7px 14px;border-radius:99px}
.equip-detail-stock.in{color:#0a9b7f;background:rgba(10,155,127,.08);border:1px solid rgba(10,155,127,.25)}
.equip-detail-stock.low{color:#b7791f;background:rgba(183,121,31,.1);border:1px solid rgba(183,121,31,.28)}
.equip-detail-stock.order{color:#b45309;background:rgba(234,140,6,.13);border:1px solid rgba(234,140,6,.4)}
.equip-detail-price{margin-top:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.equip-detail-price b{font-family:'Unbounded',var(--font-ui);font-size:32px;font-weight:800;color:var(--ink)}
.equip-detail-price span{font-size:16px;color:var(--muted);text-decoration:line-through}
.equip-detail-qty-row{margin-top:20px;display:flex;gap:10px;align-items:stretch}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;flex-shrink:0}
.qty-stepper button{width:36px;height:100%;border:none;background:transparent;font-size:17px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.qty-stepper button:hover{background:var(--panel,#f3f5f8)}
.qty-stepper input{width:36px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);height:100%;text-align:center;font-family:var(--font-mono);font-size:14.5px;font-weight:700;color:var(--ink)}
.equip-detail-qty-row .btn-order{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;border-radius:12px;background:var(--teal-accent);color:#04241d;font-weight:800;font-size:15px;box-shadow:0 6px 16px rgba(45,217,196,.25);transition:transform .2s,box-shadow .2s,background .2s}
.equip-detail-qty-row .btn-order svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.1;flex-shrink:0;transition:transform .2s}
.equip-detail-qty-row .btn-order:hover{background:#04241d;color:var(--teal-accent);transform:translateY(-3px);box-shadow:0 14px 28px rgba(4,10,40,.22)}
.equip-detail-qty-row .btn-order:hover svg{transform:translateX(3px)}
.equip-detail-qty-row .btn-order:active{transform:translateY(-1px)}
.equip-detail-cta{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.equip-detail-phone{padding:13px;border-radius:12px;border:1px solid var(--line);text-align:center;font-size:15px;color:var(--ink-soft);transition:border-color .2s,box-shadow .2s,transform .2s}
.equip-detail-phone a{display:block;margin-top:2px;font-weight:700;color:var(--ink);font-size:16px;transition:color .2s}
.equip-detail-phone:hover{border-color:var(--teal-accent);box-shadow:0 10px 22px rgba(45,217,196,.18);transform:translateY(-2px)}
.equip-detail-phone:hover a{color:#0a9b7f}
.btn-buy1click{display:flex;align-items:center;justify-content:center;padding:14px;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;font-size:14px;box-shadow:0 6px 16px rgba(4,10,40,.18);transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn-buy1click:hover{background:var(--teal-accent);color:#04241d;transform:translateY(-3px);box-shadow:0 14px 28px rgba(45,217,196,.35)}
.btn-buy1click:active{transform:translateY(-1px)}
@media(max-width:900px){.equip-detail{flex-direction:column}.equip-detail-buybox{max-width:100%;position:static;width:100%}.equip-detail-gallery{max-width:100%}}
@media(max-width:520px){.equip-detail-gallery{flex-direction:column-reverse}.equip-detail-thumbs{flex-direction:row}.equip-detail-thumbs button{width:52px;height:52px}}
.hero-photo-frame.light img{object-fit:contain;width:100%;height:100%}
.case-body-text{font-size:21px;line-height:1.75;color:var(--ink-soft)}
.case-body-text p{margin-top:14px}
.case-body-text p b{color:var(--ink);font-weight:800}
.case-body-text p:first-child{margin-top:0}
/* dark "Кассир 5" screen inside the reused glass device shell, matching the
   graphite/teal palette instead of the shell's original light preview screen */
.case-hero-visual .device-screen{background:#2b333a;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.case-hero-visual .screen-head{color:#8b96b8}
.case-hero-visual .screen-head span:first-child{color:#fff;font-weight:600}
.case-hero-visual .screen-items .sq{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.case-hero-visual .screen-items li span{color:#c4cde6}
.case-hero-visual .screen-items li b{color:#fff}
.case-hero-visual .screen-total{border-top-color:rgba(255,255,255,.15)}
.case-hero-visual .screen-total span{color:#8b96b8}
.case-hero-visual .screen-total strong{color:#fff}
.case-hero-visual .screen-pay{background:var(--teal-accent);color:#04241d}
@media(max-width:900px){.case-hero-grid{flex-direction:column}.case-hero-visual{width:100%;max-width:380px;margin:8px auto 0}.case-hero-visual.wide{max-width:420px}}
.case-hero a.back{display:flex;width:fit-content;align-items:center;gap:8px;font-family:var(--font-mono);font-size:14px;color:var(--muted);margin-bottom:24px}
.case-hero .eyebrow{margin-bottom:18px}
.case-hero h1{margin-top:0}
.case-hero a.back:hover{color:var(--teal-accent)}
.equip-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px;color:var(--muted)}
.equip-breadcrumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;transition:color .2s}
.equip-breadcrumbs a:hover{color:var(--teal-accent)}
.equip-breadcrumbs a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.1}
.equip-breadcrumbs .sep{color:var(--ink-soft);opacity:.45;font-size:15px;line-height:1}
.equip-breadcrumbs .current{color:var(--ink);font-weight:700}
.case-hero h1{font-size:clamp(34px,4.2vw,54px);letter-spacing:-.03em;font-weight:800;max-width:1100px;font-family:'Unbounded',var(--font-ui)}
.case-hero p.lead{margin-top:18px;max-width:640px;font-size:19px;color:var(--ink-soft);line-height:1.75}
.case-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.case-meta div{padding:14px 18px;border-radius:14px;background:#343c42;border:1px solid rgba(255,255,255,.08)}
.case-meta div span{display:block;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#a6b0c3}
.case-meta div b{display:block;margin-top:6px;font-size:15px;font-weight:700;color:#fff}

.gallery-wrap{position:relative;margin-top:10px}
.gallery{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery figure{flex:0 0 auto;width:min(420px,78vw);scroll-snap-align:start;border-radius:var(--radius-m);overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-sm);background:#343c42}
.gallery figure img{width:100%;height:300px;object-fit:cover}
.gallery figure figcaption{padding:12px 16px;font-size:12.5px;color:#a6b0c3}
.gallery-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.gallery-nav button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:#343c42;color:#fff;display:grid;place-items:center;transition:.3s}
.gallery-nav button:hover{background:var(--teal-accent);border-color:var(--teal-accent);color:#04241d}
.gallery-nav button svg{width:18px;height:18px}

.case-cols{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,5vw,70px)}
.case-cols .section-head h2,.case-cols h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;font-family:'Unbounded',var(--font-ui)}

.case-block{position:relative;padding-block:clamp(50px,6vw,80px);border-top:1px solid var(--line)}
.case-block .section-head h2,.case-block h2{font-size:clamp(26px,3vw,38px);font-family:'Unbounded',var(--font-ui)}
.check-list{margin-top:8px;display:flex;flex-direction:column;gap:14px}
.check-list div{display:flex;align-items:flex-start;gap:12px;font-size:19px;color:var(--ink-soft);line-height:1.75}
.check-list div svg{width:20px;height:20px;color:var(--teal-accent);flex-shrink:0;margin-top:2px}
.soft-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.soft-tags a{display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:16px;background:#343c42;border:1px solid rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:16px;box-shadow:var(--shadow-sm)}
.soft-tags a svg{width:18px;height:18px;color:var(--teal-accent)}
.result-grid{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.result-card{padding:22px;border-radius:18px;background:#343c42;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s}
.result-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--teal-accent)}
.result-card b{display:block;font-family:var(--font-mono);color:var(--teal-accent);font-size:13px}
.result-card p{margin-top:10px;font-size:19px;color:#c4cde6;line-height:1.75}

/* equipment catalog — category tiles */
.equip-cat-grid{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.equip-cat-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;background:#343c42;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-sm);transition:transform .25s,border-color .25s}
.equip-cat-card:hover{transform:translateY(-3px);border-color:var(--teal-accent)}
.equip-cat-card .ic{flex:none;width:38px;height:38px;color:var(--teal-accent)}
.equip-cat-card .ic svg{width:100%;height:100%}
.equip-cat-card b{display:block;font-size:15px;font-weight:700;color:#fff;line-height:1.3}
.equip-cat-card span{display:block;margin-top:4px;font-family:var(--font-mono);font-size:12px;color:#8b96b8}
@media(max-width:900px){.equip-cat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.equip-cat-grid{grid-template-columns:1fr}}

/* equipment catalog — featured product cards, grouped by category */
.equip-group + .equip-group{margin-top:44px}
.equip-group-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.equip-group-head h3{display:inline-flex;align-items:center;background:var(--teal-accent);color:#04241d;padding:11px 24px;border-radius:99px;font-family:'Unbounded',var(--font-ui);font-size:clamp(17px,1.7vw,20px);font-weight:800;letter-spacing:-.01em;box-shadow:0 6px 16px rgba(45,217,196,.25)}
.equip-group-count{flex-shrink:0;font-family:var(--font-mono);font-size:14px;color:var(--muted);white-space:nowrap}
.equip-product-grid{margin-top:8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,380px));gap:20px}
.equip-product-card{position:relative;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column;text-decoration:none;overflow:hidden}
.equip-product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--teal-accent)}
.equip-product-card .photo{position:relative;aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.equip-product-card .photo img{width:100%;height:100%;object-fit:contain;padding:6px;transition:transform .4s}
.equip-product-card:hover .photo img{transform:scale(1.05)}
.equip-product-card .badges{padding:14px 16px 0;display:flex;gap:8px;flex-wrap:wrap}
.equip-product-card .badge-sale{font-family:var(--font-mono);font-size:13px;font-weight:800;padding:7px 14px;border-radius:99px;background:var(--teal-accent);color:#04241d;box-shadow:0 4px 12px rgba(45,217,196,.3)}
.equip-product-card .badge-stock{font-family:var(--font-mono);font-size:14px;font-weight:700;padding:7px 14px;border-radius:99px;background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);box-shadow:0 4px 10px rgba(4,10,40,.08)}
.equip-product-card .badge-stock.in{color:#0a9b7f;border-color:rgba(10,155,127,.35);background:rgba(10,155,127,.08)}
.equip-product-card .badge-stock.in{color:#0a9b7f;border-color:rgba(10,155,127,.3)}
.equip-product-card .body{padding:18px 20px 20px}
.equip-product-card .cat{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.equip-product-card h4{margin-top:10px;font-size:19px;font-weight:700;color:var(--ink);line-height:1.35;min-height:0}
.equip-product-card .price-row{margin-top:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.equip-product-card .price-now{font-family:'Unbounded',var(--font-ui);font-size:24px;font-weight:800;color:var(--ink)}
.equip-product-card .price-old{font-size:16px;color:var(--muted);text-decoration:line-through}
.equip-product-card .btn-buy{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;background:var(--panel, #f3f5f8);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:15px;transition:.25s}
.equip-product-card:hover .btn-buy{background:var(--teal-accent);border-color:var(--teal-accent);color:#04241d}
@media(max-width:560px){.equip-product-grid{grid-template-columns:1fr}.equip-product-card h4{min-height:0}}
.receipt-roles{display:flex;gap:8px;margin-bottom:14px;justify-content:center}
.receipt-role{padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.14);color:#c4cde6;font-size:12.5px;font-weight:700;cursor:pointer;transition:.25s}
.receipt-role:hover{border-color:var(--teal-accent)}
.receipt-role.active{background:var(--teal-accent);border-color:var(--teal-accent);color:#04241d}
.receipt-mock{position:relative;width:320px;background:#fff;border-radius:20px;padding:26px 24px 30px;box-shadow:0 30px 70px rgba(4,10,40,.22);font-family:var(--font-mono);color:#0d1220;overflow:hidden}
.receipt-mock::before{content:'';position:absolute;top:0;bottom:0;width:60px;background:linear-gradient(100deg,transparent,rgba(45,217,196,.35),transparent);animation:receiptSheen 3.2s ease-in-out infinite;z-index:1;pointer-events:none}
@keyframes receiptSheen{0%{left:-20%}100%{left:120%}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.receipt-mock::before{animation:none;display:none}}
.receipt-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;padding-bottom:10px}
.receipt-meta{display:flex;justify-content:space-between;font-size:10.5px;color:#8b96a3;padding-bottom:14px;border-bottom:1.5px dashed rgba(13,18,32,.15)}
.receipt-live{display:inline-flex;align-items:center;gap:6px;color:#0a9b7f;font-weight:600;font-size:11px}
.receipt-live i{width:6px;height:6px;border-radius:50%;background:#0a9b7f;animation:receiptPulse 1.6s ease-in-out infinite}
@keyframes receiptPulse{0%,100%{opacity:1}50%{opacity:.3}}
.receipt-lines{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.receipt-lines li{display:flex;justify-content:space-between;gap:10px;font-size:13px;opacity:0}
.reveal.visible .receipt-lines li{animation:receiptLine .5s ease forwards;animation-delay:calc(var(--d) * .35s + .2s)}
.receipt-lines li span{color:#4a5468}
.receipt-lines li b{font-weight:700;white-space:nowrap}
@keyframes receiptLine{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.receipt-total{display:flex;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1.5px dashed rgba(13,18,32,.15);font-size:15px;font-weight:800;opacity:0}
.reveal.visible .receipt-total{animation:receiptLine .5s ease forwards;animation-delay:1.6s}
.receipt-pay{margin-top:16px;text-align:center;background:var(--teal-accent);color:#04241d;border-radius:10px;padding:10px;font-size:12.5px;font-weight:700;letter-spacing:.02em;opacity:0}
.reveal.visible .receipt-pay{animation:receiptLine .5s ease forwards;animation-delay:1.85s}
.receipt-num{font-size:11px;color:#8b96a3;font-weight:600;margin-top:2px}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.receipt-lines li,.receipt-total,.receipt-pay{animation:none!important;opacity:1!important}.receipt-live i{animation:none}}
@media(max-width:900px){.receipt-mock{width:100%;max-width:340px;margin:0 auto}}
.stock-mock{width:460px;background:#343c42;border-radius:20px;padding:26px 28px;box-shadow:0 30px 70px rgba(4,10,40,.22);border:1px solid rgba(255,255,255,.08)}
.stock-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:#eef2ff}
.stock-live{display:inline-flex;align-items:center;gap:6px;color:var(--teal-accent);font-weight:600;font-size:11px}
.stock-live i{width:6px;height:6px;border-radius:50%;background:var(--teal-accent);animation:receiptPulse 1.6s ease-in-out infinite}
.stock-chart{margin-top:18px;display:flex;align-items:flex-end;gap:14px;height:110px}
.stock-chart i{flex:1;background:var(--teal-accent);border-radius:5px 5px 0 0;height:0;transform-origin:bottom}
.reveal.visible .stock-chart i{animation:stockGrow .7s ease forwards,stockPulse 2.4s ease-in-out .9s infinite;animation-delay:calc(var(--d) * .1s + .3s),calc(var(--d) * .15s + 1.1s)}
@keyframes stockPulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.08)}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.stock-chart i{animation:none!important;height:var(--h)}}
@keyframes stockGrow{to{height:var(--h)}}
.stock-rows{margin-top:20px;display:flex;gap:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.stock-rows li{flex:1;display:flex;flex-direction:column;gap:4px;font-size:13px;color:#c4cde6}
.stock-rows b.up{color:var(--teal-accent)}
.stock-rows b.down{color:#ff8a8a}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.stock-chart i{animation:none;height:var(--h)}}
@media(max-width:900px){.stock-mock{width:100%;max-width:360px;margin:0 auto}}
.phone-mock{position:relative;width:240px;background:#0d1220;border-radius:32px;padding:16px 14px;box-shadow:0 30px 70px rgba(4,10,40,.28);border:6px solid #0d1220;animation:phoneTilt 4.5s ease-in-out infinite;transform-style:preserve-3d}
@keyframes phoneTilt{0%,100%{transform:perspective(700px) rotateY(-6deg) rotateX(2deg)}50%{transform:perspective(700px) rotateY(6deg) rotateX(-1deg)}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.phone-mock{animation:none}}
.phone-mock::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:70px;height:18px;background:#0d1220;border-radius:0 0 12px 12px;z-index:2}
.phone-status{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#fff;padding:0 4px;font-weight:600}
.phone-status-icons{display:flex;align-items:center;gap:4px}
.phone-signal{display:flex;align-items:flex-end;gap:1.5px;height:8px}
.phone-signal i{width:2.5px;background:#fff;border-radius:1px}
.phone-signal i:nth-child(1){height:35%}
.phone-signal i:nth-child(2){height:60%}
.phone-signal i:nth-child(3){height:80%}
.phone-signal i:nth-child(4){height:100%}
.phone-battery{width:18px;height:9px;border:1.2px solid #fff;border-radius:2px;position:relative;padding:1.5px}
.phone-battery::after{content:'';position:absolute;right:-3px;top:2.5px;width:2px;height:4px;background:#fff;border-radius:0 1px 1px 0}
.phone-battery i{display:block;height:100%;width:75%;background:var(--teal-accent);border-radius:1px}
.phone-screen{margin-top:14px;background:rgba(255,255,255,.06);border-radius:12px;padding:12px;font-size:13px;font-weight:700;color:#fff;text-align:center}
.phone-tiles{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phone-tiles div{background:var(--teal-accent);color:#04241d;border-radius:10px;padding:12px 10px;font-size:12px;font-weight:700;opacity:0;transform:scale(.9);cursor:pointer;transition:transform .15s,background .15s;user-select:none}
.reveal.visible .phone-tiles div{animation:phoneTile .4s ease forwards;animation-delay:calc(var(--d) * .12s + .3s)}
.phone-tiles div:active{transform:scale(.94)}
.phone-tiles div.tapped{background:#04241d;color:var(--teal-accent)}
.phone-tiles div b{display:block;margin-top:4px;font-size:14px;font-weight:800}
@keyframes phoneTile{to{opacity:1;transform:scale(1)}}
.phone-total{margin-top:10px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.08);border-radius:10px;padding:10px 12px}
.phone-total span{font-size:10.5px;color:#8b96b8}
.phone-total strong{font-size:15px;color:#fff;font-weight:800}
.phone-nav{margin-top:12px;display:flex;justify-content:center;gap:8px}
.phone-nav span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.phone-nav span.active{background:var(--teal-accent)}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.phone-tiles div{animation:none;opacity:1;transform:none}}
@media(max-width:900px){.phone-mock{margin:0 auto}}
.kiosk-mock{--kiosk-accent:var(--teal-accent);position:relative;width:270px;background:#2a3036;border-radius:26px;padding:22px 20px 60px;box-shadow:0 30px 70px rgba(4,10,40,.28);border:1px solid rgba(255,255,255,.08);border-bottom:14px solid #242a2f;color:#eef2ff;transition:box-shadow .3s}
.kiosk-mock::after{content:'';position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);width:70px;height:28px;background:#242a2f;border-radius:0 0 10px 10px}
.kiosk-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700}
.kiosk-live{display:inline-flex;align-items:center;gap:6px;color:var(--kiosk-accent);font-weight:600;font-size:11px;transition:color .3s}
.kiosk-live i{width:6px;height:6px;border-radius:50%;background:var(--kiosk-accent);animation:receiptPulse 1.6s ease-in-out infinite;transition:background .3s}
.kiosk-scan{margin-top:16px;position:relative;background:rgba(255,255,255,.05);border:1.5px dashed rgba(255,255,255,.18);border-radius:14px;padding:22px 16px;text-align:center;overflow:hidden}
.kiosk-scan svg{width:40px;height:40px;color:var(--kiosk-accent);transition:color .3s}
.kiosk-scan p{margin-top:8px;font-size:12px;color:#a6b0c3}
.kiosk-beam{position:absolute;left:8%;right:8%;height:2px;background:var(--kiosk-accent);box-shadow:0 0 12px var(--kiosk-accent);animation:kioskBeam 1.8s ease-in-out infinite;transition:background .3s,box-shadow .3s}
@keyframes kioskBeam{0%,100%{top:16%}50%{top:78%}}
.kiosk-items{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.kiosk-items li{display:flex;justify-content:space-between;font-size:13px;color:#c4cde6}
.kiosk-total{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-weight:800}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.kiosk-beam{animation:none;top:50%}}
@media(max-width:900px){.kiosk-mock{width:100%;max-width:340px;margin:0 auto}}
.kiosk-swatches{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.kiosk-swatches span{font-size:12px;color:#a6b0c3;width:100%;text-align:center;margin-bottom:2px}
.kiosk-swatch{width:34px;height:34px;border-radius:50%;border:2.5px solid rgba(255,255,255,.5);cursor:pointer;padding:0;transition:transform .2s;flex:none}
.kiosk-swatch:hover{transform:scale(1.15)}
.kiosk-swatch.active{border-color:#fff;box-shadow:0 0 0 3px var(--swatch-color)}
/* icon-hero: a single large line-icon floating free (no card/panel), each
   product page gives it a different motion signature so nothing reads as
   a repeated "device mockup in a box" */
.icon-hero{position:relative;width:320px;height:320px;display:grid;place-items:center}
.icon-hero::before{content:'';position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,var(--teal-accent),transparent 70%);opacity:.28;filter:blur(30px)}
.icon-hero svg{position:relative;width:190px;height:190px;color:var(--teal-accent);stroke-width:1.1}
@media(max-width:900px){.icon-hero{width:220px;height:220px;margin:0 auto}.icon-hero svg{width:130px;height:130px}}

.icon-spin svg{animation:iconSpin 7s linear infinite}
@keyframes iconSpin{to{transform:rotate(360deg)}}

.icon-bounce svg{animation:iconBounce 2.2s ease-in-out infinite}
@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

.icon-pulse{position:relative}
.icon-pulse svg{animation:iconPulseScale 2.4s ease-in-out infinite}
@keyframes iconPulseScale{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.icon-pulse .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--teal-accent);animation:iconRing 2.4s ease-out infinite}
.icon-pulse .ring:nth-child(2){animation-delay:.8s}
@keyframes iconRing{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.3);opacity:0}}

.icon-sweep{overflow:hidden;border-radius:50%}
.icon-sweep::after{content:'';position:absolute;left:50%;top:50%;width:200%;height:3px;background:linear-gradient(90deg,transparent,var(--teal-accent),transparent);transform-origin:left center;animation:iconSweep 2.6s linear infinite}
@keyframes iconSweep{to{transform:rotate(360deg)}}

.icon-drift svg{animation:iconDrift 4.5s ease-in-out infinite}
@keyframes iconDrift{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(10px,-8px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.icon-hero svg,.icon-hero .ring,.icon-hero::after{animation:none!important}}

/* per-product hero stage compositions — each product gets its own layout
   so pages read as distinct scenes instead of "text left / mockup right" clones */
.hero-stage-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.hero-stage-center .case-hero-copy{max-width:660px}
.hero-stage-center .case-hero-copy .back,.hero-stage-center .case-hero-copy .lead{margin-left:auto;margin-right:auto}
.hero-stage-center .hero-counter{display:flex;flex-direction:column;align-items:center;gap:14px}

.hero-stage-panorama{display:flex;flex-direction:column;gap:36px}
.hero-stage-panorama .case-hero-copy{max-width:760px}
.hero-stage-panorama .stock-mock{width:100%;max-width:none}
.hero-stage-panorama .stock-chart{height:150px}

.hero-stage-mobile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;max-width:520px;margin:0 auto}
.hero-stage-mobile .case-hero-copy .back,.hero-stage-mobile .case-hero-copy .lead{margin-left:auto;margin-right:auto}
.hero-stage-mobile .phone-mock{margin-top:22px}

.hero-stage-scene{position:relative;padding:clamp(36px,6vw,64px) clamp(20px,5vw,64px);border-radius:32px;background:#232930;overflow:hidden}
.hero-stage-scene::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(45,217,196,.18),transparent 60%);pointer-events:none}
.hero-stage-scene .case-hero-copy{position:relative;max-width:620px;margin:0 auto;text-align:center}
.hero-stage-scene .case-hero-copy h1,.hero-stage-scene .case-hero-copy .lead{color:#fff}
.hero-stage-scene .case-hero-copy h1{overflow-wrap:anywhere;word-break:break-word}
.hero-stage-scene .case-hero-copy .eyebrow{color:var(--teal-accent)}
.case-body-text .eyebrow{color:var(--ink);font-weight:700;font-size:14px}
.hero-stage-scene .case-hero-copy .back{color:#a6b0c3}
.hero-stage-scene .kiosk-mock{position:relative;margin:32px auto 0}
@media(max-width:600px){.hero-stage-scene{padding:28px 16px;border-radius:22px}}

/* horizontal timeline — Кассир 5 "смена кассира" instead of a plain 2-col grid */
.timeline-flow{margin-top:8px;display:flex;gap:0}
.timeline-flow .tf-step{flex:1;min-width:0;position:relative;padding-right:18px}
.timeline-flow .tf-step::after{content:'';position:absolute;top:20px;right:6px;width:14px;height:2px;background:var(--line-strong)}
.timeline-flow .tf-step:last-child{padding-right:0}
.timeline-flow .tf-step:last-child::after{display:none}
.timeline-flow .tf-step b{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--teal-accent);color:#04241d;font-family:var(--font-mono);font-size:13px;font-weight:800}
.timeline-flow .tf-step p{margin-top:14px;font-size:17px;color:var(--ink-soft);line-height:1.6}
@media(max-width:900px){.timeline-flow{flex-direction:column;gap:22px}.timeline-flow .tf-step{padding-right:0;padding-left:0}.timeline-flow .tf-step::after{display:none}}

.scale-track{display:flex;align-items:center;margin-top:24px}
.scale-step{flex:1;text-align:center;position:relative;padding-top:22px}
.scale-step::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12)}
.scale-step.filled::before{background:var(--teal-accent)}
.scale-step::after{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:#343c42;border:3px solid rgba(255,255,255,.25)}
.scale-step.filled::after{border-color:var(--teal-accent);background:var(--teal-accent)}
.scale-step b{display:block;font-size:24px;font-weight:800;font-family:'Unbounded',var(--font-ui);color:var(--ink)}
.scale-step span{display:block;margin-top:4px;font-size:13px;color:var(--ink-soft)}
@media(max-width:600px){.scale-step b{font-size:18px}.scale-step span{font-size:11px}}
.server-mock{position:relative;width:320px;height:190px}
.server-lines{position:absolute;inset:0;width:100%;height:100%}
.server-lines path{fill:none;stroke:rgba(45,217,196,.35);stroke-width:1.5;stroke-dasharray:4 5}
.server-dot{fill:var(--teal-accent)}
.server-node{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--teal-accent);color:#04241d;border-radius:14px;padding:14px 20px;font-size:13px;font-weight:800;box-shadow:0 16px 34px rgba(45,217,196,.3);z-index:2}
.server-cashes{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between}
.cash-node{background:#343c42;color:#eef2ff;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;font-size:12px;font-weight:600;box-shadow:0 14px 30px rgba(4,10,40,.2)}
@media(max-width:900px){.server-mock{margin:0 auto}}
.spec-table-wrap{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table tr:last-child{border-bottom:none}
.spec-table tr:nth-child(even){background:var(--panel-tint,rgba(0,0,0,.02))}
.spec-table th{width:42%;text-align:left;padding:14px 20px;font-weight:600;color:var(--ink-soft)}
.spec-table td{padding:14px 20px;color:var(--ink);font-weight:700;font-family:var(--font-mono);font-size:14px}
@media(max-width:600px){.spec-table th,.spec-table td{padding:11px 14px;font-size:13.5px}}
.price-table-wrap{margin-top:20px;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.price-table{width:100%;border-collapse:collapse;font-size:15.5px}
.price-table th{text-align:left;padding:14px 20px;background:var(--teal-accent);color:#04241d;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.price-table th:last-child,.price-table td:last-child{text-align:right;white-space:nowrap}
.price-table td{padding:13px 20px;border-bottom:1px solid var(--line);color:var(--ink)}
.price-table td:last-child{font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:17px;color:#0a9b7f}
.price-table tr:last-child td{border-bottom:none}
.price-table tr:nth-child(even) td{background:var(--panel-tint,rgba(0,0,0,.015))}
.price-summary{margin-top:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-summary b{font-size:26px;font-weight:800;font-family:'Unbounded',var(--font-ui);color:var(--ink)}
.price-summary span{font-size:15px;color:var(--ink-soft)}
.price-note{margin-top:10px;font-size:15px;color:var(--ink-soft)}
@media(max-width:600px){.price-table{font-size:14px}.price-table th,.price-table td{padding:11px 14px}}

/* download page — featured file card + support contract comparison */
.download-card{display:flex;align-items:center;gap:24px;padding:clamp(20px,3vw,32px);border-radius:var(--radius-l);background:#262d33;color:#fff;text-decoration:none;transition:transform .3s,box-shadow .3s}
.download-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.download-card-icon{flex-shrink:0;width:56px;height:56px;border-radius:50%;background:var(--teal-accent);color:#04241d;display:flex;align-items:center;justify-content:center}
.download-card-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.2}
.download-card-body{flex:1;min-width:0}
.download-card-body .eyebrow{color:var(--teal-accent);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.download-card-body h3{margin-top:10px;font-size:clamp(18px,2vw,24px);font-weight:800;font-family:'Unbounded',var(--font-ui)}
.download-card-body p{margin-top:8px;font-size:15px;color:#a6b0c3;line-height:1.6}
.download-card-cta{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:13px 22px;border-radius:99px;background:var(--teal-accent);color:#04241d;font-weight:700;font-size:14.5px;white-space:nowrap}
@media(max-width:700px){.download-card{flex-direction:column;align-items:flex-start}.download-card-cta{width:100%;justify-content:center}}

.support-contracts{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.support-contract-card{border-radius:var(--radius-l);border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:clamp(20px,2.6vw,28px)}
.support-contract-card h3{margin-top:10px;font-size:clamp(18px,2vw,22px);font-weight:800;font-family:'Unbounded',var(--font-ui);color:var(--ink)}
.support-contract-cols{margin-top:18px;display:flex;flex-direction:column;gap:18px}
.support-contract-cols b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.support-contract-cols ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.support-contract-cols li{font-size:14.5px;line-height:1.55;color:var(--ink-soft);padding-left:18px;position:relative}
.support-contract-cols li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--teal-accent)}
@media(max-width:800px){.support-contracts{grid-template-columns:1fr}}
.about-why-list{display:flex;flex-direction:column}
.about-why-item{display:flex;align-items:center;gap:28px;padding:24px 4px;border-top:1px solid rgba(255,255,255,.12)}
.about-why-item:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.about-why-num{flex:none;width:88px;font-family:var(--font-mono);font-size:56px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--teal-accent);opacity:.6;transition:opacity .3s,color .3s,-webkit-text-stroke-color .3s}
.about-why-item:hover .about-why-num{opacity:1;color:var(--teal-accent);-webkit-text-stroke:0}
.about-why-text h3{font-size:26px;font-weight:700;color:#eef2ff}
.about-why-text p{margin-top:8px;font-size:19px;color:#c4cde6;line-height:1.6}
@media(max-width:600px){.about-why-item{gap:16px;padding:18px 2px}.about-why-num{width:54px;font-size:36px}.about-why-text h3{font-size:20px}.about-why-text p{font-size:17px}}

/* simple project cards — compact portfolio entries: photo, title, hashtag
   tags for the product/category, linking straight to that project's own page */
.simple-project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.simple-card{display:block;border-radius:20px;background:#343c42;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.simple-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--teal-accent)}
.simple-card-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:#2b333a}
.simple-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.simple-card:hover .simple-card-photo img{transform:scale(1.07)}
.simple-card-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,0) 55%,rgba(10,14,20,.85) 100%)}
.simple-card-body{padding:18px 20px 20px}
.simple-card h4{font-size:17px;line-height:1.35;font-weight:700;color:#fff}
.simple-card .tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.simple-card .tag{padding:5px 11px;border-radius:20px;background:rgba(45,217,196,.1);border:1px solid rgba(45,217,196,.25);color:var(--teal-accent);font-family:var(--font-mono);font-size:11px;letter-spacing:.01em}

.portfolio-link-row{position:relative;overflow:hidden;margin-top:48px;padding:40px;border-radius:var(--radius-l);background:#343c42;border:1px solid rgba(255,255,255,.08);text-align:center}
.portfolio-link-row .btn,.portfolio-link-row p{position:relative;z-index:2}
.portfolio-link-row .btn{font-size:17px;padding:18px 32px}
.portfolio-link-row p{margin-top:16px;color:#a6b0c3;font-size:14.5px}
@media(max-width:600px){.portfolio-link-row{padding:28px 20px}.portfolio-link-row .btn{width:100%;justify-content:center;white-space:normal;height:auto;line-height:1.4;text-align:center;font-size:15.5px;padding:16px 20px}}

/* case-page interactive polish */
.case-solution-wrap{display:flex;align-items:flex-start;gap:48px}
.case-solution-text{flex:1;min-width:0}
.case-solution-visual{width:300px;flex-shrink:0;position:sticky;top:120px}
@media(max-width:900px){.case-solution-wrap{flex-direction:column}.case-solution-visual{position:static;width:100%;max-width:360px;margin:8px auto 0}}

.sync-stack{position:relative;display:flex;flex-direction:column;gap:26px;padding:6px 0}
.sync-line{position:absolute;left:19px;top:32px;bottom:32px;width:3px;border-radius:2px;background:var(--line-strong);overflow:hidden}
.sync-line::after{content:'';position:absolute;left:0;top:-45%;width:100%;height:45%;border-radius:2px;background:linear-gradient(var(--teal-accent),#1c8f7f);animation:syncFlow 2.6s ease-in-out infinite;will-change:top}
.sync-card{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 18px 14px 50px;border-radius:16px;background:#343c42;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-sm);animation:syncFloat 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .35s);will-change:transform}
.sync-node{position:absolute;left:18px;top:50%;width:12px;height:12px;border-radius:4px;background:var(--teal-accent);transform:translateY(-50%);box-shadow:0 0 0 4px #343c42,0 0 14px var(--glow)}
.sync-card b{font-size:15px;font-weight:700;color:#fff}
.sync-card small{font-size:12.5px;color:#a6b0c3}
@keyframes syncFlow{0%{top:-45%}100%{top:100%}}

/* shared abstract hero visual — a soft glowing aura with floating glass fact
   chips, no photo or literal illustration; premium/SaaS-style hero treatment.
   Each case varies only the chip content, so the motion stays consistent
   and polished while the information is still case-specific. */
.aura-scene{position:relative;width:100%;height:clamp(300px,32vw,380px);display:flex;align-items:center;justify-content:center}
.aura-blob{position:absolute;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(45,217,196,.6),rgba(45,217,196,.04) 70%);filter:blur(4px);animation:auraFloat 7s ease-in-out infinite}
.aura-blob.b2{width:170px;height:170px;left:60%;top:56%;background:radial-gradient(circle at 60% 40%,rgba(45,217,196,.4),transparent 70%);animation:auraFloat 9s ease-in-out infinite reverse}
.aura-ring{position:absolute;width:230px;height:230px;border-radius:50%;border:1px solid rgba(45,217,196,.3);animation:auraFloat 8s ease-in-out infinite}
@keyframes auraFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12px,-14px) scale(1.05)}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.aura-blob,.aura-ring{animation:none}}

.info-chip{position:absolute;display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:16px;background:rgba(52,60,66,.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 44px rgba(4,10,40,.4);animation:chipFloat 4.5s ease-in-out infinite;white-space:nowrap}
.info-chip .ic{width:36px;height:36px;border-radius:11px;background:rgba(45,217,196,.16);color:var(--teal-accent);display:grid;place-items:center;flex-shrink:0}
.info-chip .ic svg{width:18px;height:18px}
.info-chip b{display:block;font-size:13px;font-weight:700;color:#fff}
.info-chip small{display:block;margin-top:2px;font-size:11px;color:#a6b0c3}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.info-chip{animation:none}}

/* organic morphing "blob" hero — a graphite shape whose border keeps flowing
   into a new asymmetric outline, with a simple flat illustration inside.
   No photo, no literal box/clock drawing — the blob shape itself is the
   whole point, and it never has to "look like" anything so it can't look
   crooked the way a hand-drawn object could. */
.blob-shape{
  position:relative;width:min(420px,94%);aspect-ratio:1.12;background:#343c42;
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  box-shadow:0 30px 70px rgba(4,10,40,.4);
  animation:blobMorph 10s ease-in-out infinite;
}
@keyframes blobMorph{
  0%,100%{border-radius:32% 68% 72% 28% / 40% 32% 68% 60%}
  25%{border-radius:68% 32% 24% 76% / 62% 68% 32% 38%}
  50%{border-radius:44% 56% 30% 70% / 72% 26% 74% 28%}
  75%{border-radius:74% 26% 60% 40% / 30% 66% 34% 70%}
}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.blob-shape{animation:none;border-radius:36% 64% 66% 34% / 44% 36% 64% 56%}}
.blob-illustration{position:relative;z-index:1;width:74%;height:auto;padding-bottom:6%}

/* Авокадо "Решение" visual — three status gauges instead of the sync-stack,
   reads as "these systems are connected" rather than an order pipeline */
.gauge-row{display:flex;gap:18px;justify-content:center;padding:10px 0}
.gauge{display:flex;flex-direction:column;align-items:center;gap:12px}
.gauge-track{position:relative;width:16px;height:150px;border-radius:9px;background:#343c42;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.gauge-fill{position:absolute;left:0;right:0;bottom:0;border-radius:9px;background:linear-gradient(var(--teal-accent),#1c8f7f);animation:gaugeRise 1.4s cubic-bezier(.2,.8,.2,1) both}
.gauge small{font-size:11.5px;color:#a6b0c3;text-align:center;max-width:70px}
@keyframes gaugeRise{from{height:0}}

/* Ринг hero — real storefront photo with a swinging "Честный знак" price tag,
   like a physical tag hanging off the frame — a genuine pendulum motion */
.swing-tag{position:absolute;top:-6px;right:12%;transform-origin:top center;animation:tagSwing 3.4s ease-in-out infinite;filter:drop-shadow(0 14px 20px rgba(4,10,40,.35))}
.swing-tag .string{width:2px;height:26px;margin:0 auto;background:rgba(255,255,255,.35)}
.swing-tag .card{margin-top:-2px;width:84px;background:#343c42;border:2px solid var(--teal-accent);border-radius:0 10px 10px 10px;padding:10px 12px;text-align:center}
.swing-tag .card b{display:block;font-family:'Unbounded',var(--font-ui);font-size:12.5px;color:#fff;line-height:1.2}
.swing-tag .card small{display:block;margin-top:4px;font-size:9.5px;color:#a6b0c3;letter-spacing:.02em}
.swing-tag .hole{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#2b333a;border:2px solid rgba(255,255,255,.35)}
@keyframes tagSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.swing-tag{animation:none;transform:rotate(-4deg)}}

/* Ринг "Решение" visual — a short progress checklist instead of the sync-stack */
.progress-list{display:flex;flex-direction:column;gap:14px}
.progress-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:#343c42;border:1px solid rgba(255,255,255,.08)}
.progress-item .ok{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--teal-accent);display:grid;place-items:center;color:#04241d}
.progress-item .ok svg{width:14px;height:14px}
.progress-item b{font-size:14.5px;font-weight:700;color:#fff}
@keyframes syncFloat{
  0%,100%{transform:perspective(900px) rotateY(calc(var(--i,0) * -1.6deg)) rotateX(2deg) translateX(calc(var(--i,0) * 9px)) translateY(0)}
  50%{transform:perspective(900px) rotateY(calc(var(--i,0) * -1.6deg)) rotateX(2deg) translateX(calc(var(--i,0) * 9px)) translateY(-7px)}
}
@media(max-width:900px){.sync-card{animation:none;transform:none}}
.gallery figure img{transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.06)}
.check-list div{transition:color .25s}
.check-list div svg{transition:transform .25s}
.check-list div:hover{color:var(--ink)}
.check-list div:hover svg{transform:scale(1.2)}
.soft-tags a{transition:transform .25s,box-shadow .25s,border-color .25s}
.soft-tags a:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--teal-accent)}
.case-cta{margin-top:20px}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .product-grid{grid-template-columns:1fr}
  .product-card.featured{grid-column:span 1;flex-direction:column}
  .product-card.featured .product-visual{max-width:none}
  .solution-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .step-1,.step-2,.step-3,.step-4{grid-column:span 1}
  .project-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .project-card.main{grid-row:auto;min-height:340px}
  .project-card{min-height:220px}
  .case-cols{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .screen{min-height:0;justify-content:flex-start;padding-block:clamp(56px,10vw,88px)}
  /* the hero stays full-screen on mobile (like the reference site) so it reads as
     a proper opening screen you scroll past, instead of shrinking to fit its
     two lines of content and letting the code background overlap the heading */
  .screen.hero{min-height:calc(100vh / var(--page-zoom,1));min-height:calc(100svh / var(--page-zoom,1));justify-content:center}
  .hero{padding-top:clamp(120px,20vw,150px)}
}
@media(max-width:860px){
  .support-grid{grid-template-columns:1fr}
  .float-chip{display:none}
  .receipt{right:4%}
  .chip-mark{display:none}
}
@media(max-width:720px){
  .site-header{width:calc(100% - 20px);padding:0 6px 0 16px}
  .burger-label{display:none}
  .burger{padding:0 12px}
  .menu-body{grid-template-columns:1fr;gap:8vw}
  .menu-links{grid-template-columns:1fr;grid-auto-flow:row}
  .menu-contact{display:none}
  .solution-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .news-item{grid-template-columns:1fr 26px}
  .news-item time,.news-item .cat{grid-row:1}
  .news-item .cat{grid-column:1}
  .news-item time{display:none}
  .news-item h3{grid-column:1/3}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;gap:10px}
  .result-grid{grid-template-columns:1fr}
  .case-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* headline sizes stay exactly as tuned for laptop/desktop screens (they
   already hit their clamp() ceiling around ~1400-1600px) — only on genuinely
   large external monitors, past the point where .container also widens
   (see the min-width:2200px rule near the top), do the biggest headings get
   an explicit size bump so the page doesn't read as small in the extra
   space. Placed last so it wins the cascade over the same-specificity base
   rules above at this breakpoint. */
@media(min-width:2200px){
  .hero-copy h1{font-size:78px}
  .section-head h2{font-size:80px}
  .support-copy h2{font-size:72px}
  .cta-band h2{font-size:80px}
  .case-hero h1{font-size:82px}
  .project-card h3{font-size:46px}
}

/* small-screen safety net: long words must wrap instead of widening the page */
@media(max-width:600px){
  .case-hero-grid{grid-template-columns:minmax(0,1fr)}
  .case-hero-copy,.case-hero-grid>*,.case-hero-visual{min-width:0;max-width:100%}
  .case-hero h1,.about-why-text h3,.about-why-text p,.equip-detail-buybox *,.support-row *{overflow-wrap:anywhere}
  .equip-detail-buybox,.support-panel,.support-card,.support-row,.about-why-text,.equip-group-count{min-width:0;max-width:100%}
}

/* tiffany hover for the header buttons on dark-hero pages (their glass state used to win over :hover) */
body.dark-hero .site-header:not(.scrolled) .icon-btn:hover,
body.dark-hero .site-header:not(.scrolled) .burger:hover,
html.dark-hero .site-header:not(.scrolled) .icon-btn:hover,
html.dark-hero .site-header:not(.scrolled) .burger:hover{background:var(--teal-accent);border-color:var(--teal-accent);color:#04241d}

/* news pages: diagonal-line decoration (replaces the double-ring one) */
.side-deco.deco-lines{border-radius:0;background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--news-accent,var(--teal-accent)) 55%,transparent) 0 2px,transparent 2px 22px);-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 70%);mask-image:radial-gradient(circle,#000 0%,transparent 70%)}

/* ============ Support page (sup-*) — circuit-trace motif, dark ============ */
.sup-hero{position:relative;padding:clamp(150px,16vw,190px) 0 clamp(30px,4vw,60px);overflow:clip}
.sup-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.sup-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;margin-top:30px}
.sup-status{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--ink-soft);max-width:34ch}
.sup-radar{position:relative;aspect-ratio:1;width:100%;max-width:520px;justify-self:center;display:grid;place-items:center}
.sup-radar .r{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--teal-accent) 55%,transparent);opacity:0;animation:supPing 5.4s ease-out infinite}
.sup-radar .r2{animation-delay:1.8s}.sup-radar .r3{animation-delay:3.6s}
.sup-radar::before{content:'';position:absolute;inset:12%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--teal-accent) 38%,transparent)}
.sup-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 78%,color-mix(in srgb,var(--teal-accent) 38%,transparent) 100%);-webkit-mask-image:radial-gradient(circle,transparent 0 26%,#000 27%);mask-image:radial-gradient(circle,transparent 0 26%,#000 27%);animation:supSpin 7s linear infinite}
.sup-orbit{position:absolute;inset:6%;animation:supSpin 11s linear infinite reverse}
.sup-orbit::before{content:'';position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--teal-accent);box-shadow:0 0 18px var(--teal-accent)}
.sup-247{position:relative;z-index:2;font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(64px,9vw,132px);line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:2px var(--teal-accent)}
.sup-247 em{font-style:normal;-webkit-text-stroke:0;color:var(--ink)}
@keyframes supPing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1);opacity:0}}
@keyframes supSpin{to{transform:rotate(360deg)}}

.sup-block{position:relative;padding-block:clamp(36px,5vw,72px)}
.sup-head{max-width:760px}
.sup-kicker{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-accent);margin-bottom:12px}

.sup-trace{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;position:relative}
.sup-trace::before{content:'';position:absolute;left:28px;right:28px;top:28px;height:2px;background:linear-gradient(90deg,var(--teal-accent),color-mix(in srgb,var(--teal-accent) 15%,transparent));opacity:.55}
.sup-trace::after{content:'';position:absolute;top:24px;left:28px;width:10px;height:10px;border-radius:50%;background:var(--teal-accent);box-shadow:0 0 16px var(--teal-accent);animation:supRun 6s ease-in-out infinite}
@keyframes supRun{0%{left:28px;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 38px);opacity:0}}
.sup-trace li{position:relative;padding-top:78px}
.sup-node{position:absolute;top:0;left:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--teal-accent);background:var(--surface);border:2px solid var(--teal-accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--teal-accent) 12%,transparent)}
.sup-trace h3{font-family:'Unbounded',var(--font-ui);font-size:18px;line-height:1.25}
.sup-trace p{margin-top:10px;color:var(--ink-soft);font-size:16px;line-height:1.6}

.sup-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:34px}
.sup-tile{position:relative;grid-column:span 2;padding:30px;border-radius:var(--radius-l);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);overflow:hidden;min-width:0;transition:border-color .3s,transform .35s}
.sup-tile.w3{grid-column:span 3}
.sup-tile::before{content:'';position:absolute;right:-25%;bottom:-55%;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--teal-accent) 24%,transparent),transparent 70%);opacity:0;transition:opacity .45s;pointer-events:none}
.sup-tile:hover{border-color:var(--teal-accent);transform:translateY(-4px)}
.sup-tile:hover::before{opacity:1}
.sup-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--teal-accent) 14%,transparent);color:var(--teal-accent);margin-bottom:20px}
.sup-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sup-tile h3{font-family:'Unbounded',var(--font-ui);font-size:19px;line-height:1.25}
.sup-tile ul,.sup-cols ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.sup-tile li,.sup-cols li{position:relative;padding-left:20px;color:var(--ink-soft);font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}
.sup-tile li::before,.sup-cols .yes li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:2px;border-radius:2px;background:var(--teal-accent)}
.sup-cols .no li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:2px;border-radius:2px;background:#ff8a7a}

.sup-contracts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px}
.sup-contract{padding:clamp(24px,3vw,38px);border-radius:var(--radius-l);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);min-width:0}
.sup-fee{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-accent)}
.sup-fee b{display:block;margin-top:8px;font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.02em;color:var(--ink);text-transform:none}
.sup-fee small{font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--ink-soft);margin-left:6px}
.sup-contract h3{margin-top:18px;font-family:'Unbounded',var(--font-ui);font-size:20px;line-height:1.25}
.sup-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:22px}
.sup-cols>div>b{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.sup-cols .yes>b{color:var(--teal-accent)}.sup-cols .no>b{color:#ff8a7a}
.sup-note{margin-top:22px;color:var(--ink-soft);font-size:14.5px;max-width:70ch}

.sup-contact{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 40px;padding:clamp(32px,5vw,64px);border-radius:var(--radius-l);border:1px solid color-mix(in srgb,var(--teal-accent) 45%,transparent);background:radial-gradient(120% 150% at 100% 0,color-mix(in srgb,var(--teal-accent) 20%,transparent),transparent 62%),rgba(255,255,255,.03);overflow:hidden}
.sup-contact p{margin-top:10px;color:var(--ink-soft);font-size:17px}
.sup-phone{font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(28px,4.4vw,58px);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;transition:color .25s}
.sup-phone:hover{color:var(--teal-accent)}

@media(max-width:980px){
  .sup-hero-grid{grid-template-columns:1fr}
  .sup-radar{max-width:340px;order:-1}
  .sup-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sup-tile,.sup-tile.w3{grid-column:span 1}
  .sup-tile.w3:first-child{grid-column:span 2}
  .sup-contracts{grid-template-columns:1fr}
}
@media(max-width:760px){
  .sup-trace{grid-template-columns:1fr;gap:6px}
  .sup-trace::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,var(--teal-accent),color-mix(in srgb,var(--teal-accent) 15%,transparent))}
  .sup-trace::after{display:none}
  .sup-trace li{padding:4px 0 26px 78px;min-height:56px}
  .sup-bento{grid-template-columns:1fr}
  .sup-tile,.sup-tile.w3,.sup-tile.w3:first-child{grid-column:span 1}
  .sup-cols{grid-template-columns:1fr}
  .sup-phone{white-space:normal}
}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.sup-radar .r,.sup-sweep,.sup-orbit,.sup-trace::after{animation:none}.sup-radar .r{opacity:.35;transform:none}}

/* ============ Case photo carousel (coverflow) + full-screen viewer ============ */
.gallery-wrap.has-pc{display:none}
.pc{position:relative;margin:34px auto 8px;max-width:1180px}
.pc-stage{position:relative;height:clamp(270px,40vw,520px);display:flex;align-items:center;justify-content:center;perspective:1300px;touch-action:pan-y;user-select:none;outline:none}
.pc-card{position:absolute;width:clamp(230px,54vw,660px);aspect-ratio:3/2;padding:0;border:0;border-radius:22px;overflow:hidden;background:#232d34;cursor:pointer;
  box-shadow:0 34px 70px rgba(4,10,40,.38);
  transform:translateX(calc(var(--off,0) * 46%)) translateZ(calc(var(--abs,0) * -160px)) rotateY(calc(var(--off,0) * -30deg)) scale(calc(1 - var(--abs,0) * .12));
  filter:blur(calc(var(--abs,0) * .32rem)) brightness(calc(1 - var(--abs,0) * .18));
  opacity:var(--op,1);z-index:var(--z,1);backface-visibility:hidden;will-change:transform;
  transition:transform .6s cubic-bezier(.22,1,.36,1),filter .6s,opacity .45s}
.pc-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pc-card.is-active::after{content:'';position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;background:rgba(10,18,24,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd9c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/22px no-repeat;backdrop-filter:blur(6px);transition:transform .3s}
.pc-card.is-active:hover::after{transform:scale(1.12)}
.pc-card:focus-visible{outline:3px solid var(--teal-accent);outline-offset:3px}
.pc-arrow{position:absolute;top:calc(clamp(270px,40vw,520px) / 2);transform:translateY(-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);cursor:pointer;z-index:50;transition:background .25s,color .25s,border-color .25s}
.pc-arrow svg{width:22px;height:22px}
.pc-arrow:hover{background:var(--teal-accent);border-color:var(--teal-accent);color:#04241d}
.pc-prev{left:4px}.pc-next{right:4px}
.pc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:20px;padding-inline:8px}
.pc-dots{display:flex;gap:8px;flex-wrap:wrap}
.pc-dot{width:10px;height:10px;border-radius:99px;border:0;padding:0;background:var(--line-strong);cursor:pointer;transition:width .35s,background .25s}
.pc-dot.on{width:30px;background:var(--teal-accent)}
.pc-hint{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft)}
.pc-hint b{color:var(--teal-accent);font-weight:700}
.lb{position:fixed;inset:0;z-index:700;display:none;align-items:center;justify-content:center;background:rgba(5,9,13,.93);backdrop-filter:blur(8px);touch-action:pan-y}
.lb.open{display:flex;animation:lbIn .3s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-fig{margin:0;max-width:min(94vw,1500px);display:flex;flex-direction:column;align-items:center;gap:14px}
.lb-img{max-width:100%;max-height:80vh;border-radius:14px;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6);transition:opacity .25s,transform .25s}
.lb-img.swap{opacity:.25;transform:scale(.985)}
.lb-cap{color:#cfd8e3;font-size:15px;text-align:center;max-width:70ch;min-height:1.4em}
.lb-close{position:absolute;top:20px;right:22px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:background .25s,color .25s}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s}
.lb-nav svg{width:24px;height:24px}
.lb-prev{left:clamp(10px,3vw,36px)}.lb-next{right:clamp(10px,3vw,36px)}
.lb-close:hover,.lb-nav:hover{background:var(--teal-accent);border-color:var(--teal-accent);color:#04241d}
.lb-count{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:#9fb0c0}
@media(max-width:700px){
  .pc-card{width:76vw;border-radius:16px;transform:translateX(calc(var(--off,0) * 54%)) translateZ(calc(var(--abs,0) * -120px)) rotateY(calc(var(--off,0) * -26deg)) scale(calc(1 - var(--abs,0) * .1))}
  .pc-arrow{width:42px;height:42px}
  .pc-hint{width:100%}
  .lb-nav{width:44px;height:44px}
  .lb-img{max-height:72vh}
}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){.pc-card,.lb-img{transition:none}.lb.open{animation:none}}
/* site search results */
.search-results{margin-top:18px;display:flex;flex-direction:column;gap:6px;max-height:min(46vh,420px);overflow:auto}
.search-results a{display:block;padding:12px 14px;border-radius:12px;color:#fff;border:1px solid transparent;transition:background .2s,border-color .2s}
.search-results a:hover,.search-results a:focus-visible{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.search-results b{display:block;font-weight:600}
.search-results span{display:block;font-size:14px;color:#8b96b8;margin-top:3px;line-height:1.4}
.search-empty{color:#8b96b8;font-size:15px;padding:8px 2px;margin:0}

/* ---- fix: decor glows are no longer cut off by their container ---- */
.case-hero,.case-hero.news-article-hero{overflow-x:clip;overflow-y:visible}
.case-block:has(> .side-deco),.case-block.news-article-body{overflow:visible}

/* ---- fix: Avokado gauges — equal column width, equal spacing ---- */
.gauge{width:84px}
.gauge small{max-width:84px}

/* ---- decor for equipment pages: soft teal glows + diagonal lines behind the content ---- */
body.light-perf #smooth-content,body.equip-page #smooth-content{position:relative}
body.light-perf #smooth-content::before,body.equip-page #smooth-content::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 520px at 96% 5%,rgba(45,217,196,.34),transparent 70%),
    radial-gradient(640px 640px at -5% 30%,rgba(45,217,196,.24),transparent 70%),
    radial-gradient(560px 560px at 104% 58%,rgba(45,217,196,.22),transparent 70%),
    radial-gradient(540px 540px at 0% 90%,rgba(45,217,196,.2),transparent 70%)}
body.light-perf #smooth-content::after,body.equip-page #smooth-content::after{content:'';position:absolute;left:-50px;top:300px;width:360px;height:360px;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(45,217,196,.42) 0 2px,transparent 2px 14px);
  -webkit-mask-image:radial-gradient(circle,#000 0%,transparent 70%);mask-image:radial-gradient(circle,#000 0%,transparent 70%)}
@media(max-width:900px){body.light-perf #smooth-content::after,body.equip-page #smooth-content::after{display:none}}


/* ---- reviews (landing) ---- */
.reviews{position:relative;padding-block:clamp(70px,8vw,110px)}
.reviews-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px;margin-bottom:clamp(30px,4vw,48px)}
.reviews-score{display:flex;align-items:center;gap:22px;padding:20px 28px;border-radius:var(--radius-l);background:#343c42;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-sm)}
.rv-big{font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(44px,5vw,60px);line-height:1;color:#fff}
.rv-stars{--p:100%;display:inline-block;font-size:22px;letter-spacing:3px;line-height:1;background:linear-gradient(90deg,#ffc542 var(--p),rgba(255,255,255,.24) var(--p));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.reviews-score small{display:block;margin-top:8px;color:#a6b0c3;font-size:14px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:1100px){.reviews-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.reviews-grid{grid-template-columns:1fr}.reviews-score{width:100%}}
.reviews-top .section-head{max-width:820px}
.rv-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:28px 28px 24px;border-radius:var(--radius-l);background:#343c42;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;overflow:hidden}
.rv-card::before{content:'\201C';position:absolute;right:18px;top:-8px;font-family:Georgia,serif;font-weight:700;font-size:130px;line-height:1;color:rgba(45,217,196,.18);pointer-events:none}
.rv-card:hover{transform:translateY(-4px);border-color:rgba(45,217,196,.45);box-shadow:var(--shadow-md)}
.rv-text{margin:0;color:#e3e9f0;font-size:16px;line-height:1.65;flex:1}
.rv-who{display:flex;align-items:center;gap:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.rv-ava{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-family:var(--font-ui);font-weight:700;font-size:18px;color:#04241d;background:linear-gradient(135deg,var(--teal-accent),#8ff0e2)}
.rv-ava img{width:100%;height:100%;object-fit:cover}
.rv-who b{display:block;color:#fff;font-size:16px}
.rv-who span:not(.rv-ava){display:block;color:#8e99ad;font-size:13px;margin-top:2px}
.rv-note{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;color:#8e99ad;font-size:13px}


/* ---- CTA: prominent consultation button + lead texts (landing) ---- */
.hero-lead{max-width:660px;margin:22px auto 0;text-align:center;color:rgba(244,248,251,.84);font-size:clamp(16px,1.5vw,19px);line-height:1.6}
.btn-cta{background:linear-gradient(135deg,#2dd9c4,#7ff0e1);color:#04241d;font-weight:700;font-size:clamp(16px,1.3vw,18px);height:auto;padding:19px 38px;box-shadow:0 18px 40px rgba(45,217,196,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-cta b{font-weight:600;font-size:20px;transition:transform .3s}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(45,217,196,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-cta:hover b{transform:translateX(4px)}
.cta-sub{flex-basis:100%;margin:6px 0 0;text-align:center;color:rgba(244,248,251,.72);font-size:14px;line-height:1.5}
.cta-lead{max-width:580px;margin:18px auto 0;color:var(--ink-soft);font-size:17px;line-height:1.6}
.cta-phone{display:block;margin-top:20px;font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--ink);letter-spacing:-.01em}
.cta-phone:hover{color:var(--teal-accent)}


/* CTA spacing tweak */
.cta-lead{margin:22px auto 32px;font-size:16px;opacity:.9}
.cta-band .btn-cta{margin-top:0}


/* ---- "Все проекты" button: prominent ---- */
a.btn.btn-ghost[href$="projects.html"],a.btn.btn-ghost[href="/projects/"]{height:auto;padding:18px 38px;font-size:16px;font-weight:700;color:#04241d;background:linear-gradient(135deg,#2dd9c4,#7ff0e1);border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 16px 36px rgba(45,217,196,.38),inset 0 1px 0 rgba(255,255,255,.5)}
a.btn.btn-ghost[href$="projects.html"]:hover,a.btn.btn-ghost[href="/projects/"]:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(45,217,196,.5),inset 0 1px 0 rgba(255,255,255,.5)}


/* ---- support hero: typography and spacing ---- */
.sup-hero a.back{display:flex;width:fit-content;align-items:center;gap:8px;font-family:var(--font-mono);font-size:14px;color:var(--muted);margin-bottom:26px}
.sup-hero a.back:hover{color:var(--teal-accent)}
.sup-hero .eyebrow{margin-bottom:20px}
.sup-hero h1{margin:0 0 24px;font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(34px,4.2vw,54px);line-height:1.12;letter-spacing:-.03em}
.sup-hero .lead{max-width:540px;margin:0;font-size:clamp(17px,1.45vw,19px);line-height:1.7;color:var(--ink-soft)}
.sup-cta{margin-top:36px}


/* hero-stage-scene h1 wrap fix: long product names must not break by letters */
.hero-stage-scene .case-hero-copy{max-width:820px}
.hero-stage-scene .case-hero-copy h1{overflow-wrap:break-word;word-break:normal;font-size:clamp(30px,3.7vw,50px)}

/* equipment pages: no gradient decor; product pages: centered column; hero word clipping (2026-10-05) */
body.light-perf #smooth-content::before,body.light-perf #smooth-content::after{display:none}


.headline .word{padding:.16em .12em .1em;margin:-.16em -.12em -.1em}

/* scroll performance: blocks with big shadows get their own compositor layer (2026-10-05) */
.service-row,.carousel-card,.stat-card,.partner-chip,.equip-product-card,.solution-card,.product-tile,.support-card,.equip-detail-photo,.hero-photo-frame,.ic,.badge-sale,.badge-stock,.article-video-card{will-change:transform}

/* scroll performance 2: no backdrop blur on small labels/chips (near-invisible, costly while scrolling); more shadowed cards on own layers (2026-10-06) */
.eyebrow,.news-tile-video-badge,.info-chip,.btn-ghost{backdrop-filter:none;-webkit-backdrop-filter:none}
.hero .eyebrow,.hero .btn-ghost{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.simple-card,.project-card,.device,.float-chip,.news-tile{will-change:transform}


/* big monitors (2026-10-06): page zoom (html.zoomed, set in the head script) already scales everything, so do not ALSO apply the >=1600/1900/2200px container widening and the 2200px headline bumps (they compound). Header pill follows the container width. */
.site-header{width:min(1320px,calc(100% - 32px))}
@media(min-width:1600px){.site-header{width:min(1520px,calc(100% - 32px))}}
@media(min-width:1900px){.site-header{width:min(1680px,calc(100% - 32px))}}
@media(min-width:2200px){.site-header{width:min(1880px,calc(100% - 32px))}}
:where(html.zoomed) .container{max-width:1320px}
:where(html.zoomed) .site-header{width:min(1320px,calc(100% - 32px))}
:where(html.zoomed.zv1600) .container{max-width:1520px}
:where(html.zoomed.zv1600) .site-header{width:min(1520px,calc(100% - 32px))}
:where(html.zoomed.zv1900) .container{max-width:1680px}
:where(html.zoomed.zv1900) .site-header{width:min(1680px,calc(100% - 32px))}
:where(html.zoomed.zv2200) .container{max-width:1880px}
:where(html.zoomed.zv2200) .site-header{width:min(1880px,calc(100% - 32px))}
:where(html.zoomed:not(.zv2200)) .hero-copy h1{font-size:clamp(30px,4.3vw,60px)}
:where(html.zoomed:not(.zv2200)) .section-head h2{font-size:clamp(36px,4.6vw,64px)}
:where(html.zoomed:not(.zv2200)) .support-copy h2{font-size:clamp(34px,4.4vw,56px)}
:where(html.zoomed:not(.zv2200)) .cta-band h2{font-size:clamp(34px,5vw,64px)}
:where(html.zoomed:not(.zv2200)) .case-hero h1{font-size:clamp(34px,4.2vw,54px)}
:where(html.zoomed:not(.zv2200)) .project-card h3{font-size:clamp(24px,2.6vw,38px)}
.equip-breadcrumbs{max-width:1180px;margin-inline:auto}

/* attention buttons: all projects / news / products / catalog / reviews — solid teal fill + soft pulsing ring (2026-10-06) */
a.btn.btn-ghost[href="/projects/"],a.btn.btn-ghost[href="/news/"],a.open-link[href="/products/"],a.open-link[href="/equipment/"]{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;height:auto;padding:18px 38px;border-radius:99px;font-family:var(--font-ui);font-size:16px;font-weight:700;letter-spacing:0;text-transform:none;color:#04241d;background:linear-gradient(135deg,#2dd9c4,#7ff0e1);border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 16px 36px rgba(45,217,196,.38),inset 0 1px 0 rgba(255,255,255,.5);width:fit-content;white-space:nowrap}
a.btn.btn-ghost[href="/projects/"]::after,a.btn.btn-ghost[href="/news/"]::after,a.open-link[href="/products/"]::after,a.open-link[href="/equipment/"]::after{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(45,217,196,.75);pointer-events:none;z-index:-1;animation:btnRing 2.6s ease-out infinite}
a.btn.btn-ghost[href="/projects/"]:hover,a.btn.btn-ghost[href="/news/"]:hover,a.open-link[href="/products/"]:hover,a.open-link[href="/equipment/"]:hover{transform:translateY(-3px);gap:16px;box-shadow:0 22px 46px rgba(45,217,196,.52),inset 0 1px 0 rgba(255,255,255,.5)}
@keyframes btnRing{0%{transform:scale(1);opacity:.85}65%,100%{transform:scale(1.14,1.5);opacity:0}}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){a.btn.btn-ghost[href="/projects/"]::after,a.btn.btn-ghost[href="/news/"]::after,a.open-link[href="/products/"]::after,a.open-link[href="/equipment/"]::after{animation:none;display:none}}
@media(max-width:600px){a.btn.btn-ghost[href="/projects/"],a.btn.btn-ghost[href="/news/"],a.open-link[href="/products/"],a.open-link[href="/equipment/"]{white-space:normal;text-align:center;justify-content:center;padding:16px 26px;font-size:15px}}



/* hero subline plate: readable over the code background (2026-10-06) */


/* back links ("← Все проекты", "← На главную"…): visible filled pill + soft pulse (2026-10-06) */
a.back,.case-hero a.back,.sup-hero a.back,.hero-stage-scene .case-hero-copy a.back{position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;width:fit-content;padding:16px 34px;border-radius:99px;font-family:var(--font-ui);font-size:18px;font-weight:700;letter-spacing:0;text-transform:none;color:#04241d;background:linear-gradient(135deg,#2dd9c4,#7ff0e1);box-shadow:0 14px 32px rgba(45,217,196,.4),inset 0 1px 0 rgba(255,255,255,.5);margin-bottom:30px;transition:transform .25s ease,box-shadow .25s ease}
a.back::after{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(45,217,196,.7);pointer-events:none;z-index:-1;animation:btnRing 2.6s ease-out infinite}
a.back:hover,.case-hero a.back:hover,.sup-hero a.back:hover{color:#04241d;transform:translateY(-2px);box-shadow:0 18px 36px rgba(45,217,196,.5),inset 0 1px 0 rgba(255,255,255,.5)}
@media(prefers-reduced-motion:reduce) and (min-width:99999px){a.back::after{animation:none;display:none}}

/* consultation page (2026-10-06) */
.consult-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-top:8px}
.consult-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:30px 32px;border-radius:24px;background:#343c42;color:#f4f8fb;box-shadow:0 18px 40px rgba(4,10,40,.16);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
a.consult-card:hover{transform:translateY(-4px);box-shadow:0 26px 52px rgba(4,10,40,.24)}
.consult-card-main{background:linear-gradient(135deg,#2dd9c4,#7ff0e1);color:#04241d}
.consult-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(45,217,196,.16);color:var(--teal-accent);margin-bottom:12px}
.consult-card-main .consult-ico{background:rgba(4,36,29,.14);color:#04241d}
.consult-ico svg{width:26px;height:26px}
.consult-label{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.12em;opacity:.8}
.consult-value{font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em}
.consult-value-sm{font-size:clamp(20px,2vw,26px)}
.consult-note{font-size:16px;opacity:.85}
.consult-link{width:fit-content;color:var(--teal-accent);opacity:1;font-weight:600;margin-top:6px}
.consult-cta{margin-top:48px;display:flex;justify-content:center}
@media(max-width:800px){.consult-grid{grid-template-columns:1fr}.consult-card{padding:24px}}

/* ===== 2026-10-06b: bigger breadcrumbs, scale line to 1000+, side decor on product pages, wider product blocks, glass hero subline ===== */
.equip-breadcrumbs{font-size:18px;gap:12px}
.equip-breadcrumbs a{padding:9px 18px;border-radius:99px;background:rgba(45,217,196,.16);color:#0a6a5d;font-weight:600}
.equip-breadcrumbs a:hover{background:var(--teal-accent);color:#04241d}
.equip-breadcrumbs a svg{width:17px;height:17px}
.equip-breadcrumbs .sep{font-size:22px;opacity:.6}
.equip-breadcrumbs .current{font-size:18px}
.news-breadcrumbs{font-size:16px;gap:12px}
.news-breadcrumbs a{padding:8px 16px;border-radius:99px;background:rgba(45,217,196,.16);color:#0a6a5d;font-weight:600;font-family:var(--font-ui)}
.news-breadcrumbs a:hover{background:var(--teal-accent);color:#04241d}
.news-breadcrumbs span{font-size:16px}
.scale-step:not(.filled)::before{background:linear-gradient(90deg,var(--teal-accent),rgba(45,217,196,.28))}
.scale-step:not(.filled)::after{border-color:var(--teal-accent);background:#fff}
.hero-copy .hero-lead{width:fit-content;max-width:min(680px,92%);margin:22px auto 0;padding:16px 30px;border-radius:20px;background:linear-gradient(135deg,rgba(45,217,196,.22),rgba(38,46,52,.86));border:1px solid rgba(45,217,196,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 30px rgba(8,12,16,.25);text-shadow:0 1px 8px rgba(0,0,0,.5);color:#f4f8fb}
body.equip-page .case-block .case-body-text{max-width:1240px!important}
body.equip-page .case-block .case-body-text p{font-size:19px;line-height:1.7}
body.equip-page main{position:relative}
body.equip-page main::before,body.equip-page main::after{content:'';position:absolute;top:0;bottom:0;width:130px;pointer-events:none;z-index:0;background-repeat:no-repeat}
body.equip-page main::before{left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='78' viewBox='0 0 110 90'%3E%3Cg stroke='%232dd9c4' stroke-width='2.4' stroke-linecap='round' opacity='.6'%3E%3Cline x1='6' y1='84' x2='26' y2='64'/%3E%3Cline x1='14' y1='84' x2='34' y2='64'/%3E%3Cline x1='22' y1='84' x2='42' y2='64'/%3E%3Cline x1='2' y1='66' x2='22' y2='46'/%3E%3Cline x1='10' y1='66' x2='30' y2='46'/%3E%3Cline x1='18' y1='66' x2='38' y2='46'/%3E%3Cline x1='26' y1='66' x2='46' y2='46'/%3E%3Cline x1='6' y1='48' x2='26' y2='28'/%3E%3Cline x1='14' y1='48' x2='34' y2='28'/%3E%3Cline x1='22' y1='48' x2='42' y2='28'/%3E%3Cline x1='30' y1='48' x2='50' y2='28'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74' viewBox='0 0 70 70'%3E%3Cg fill='%232dd9c4' opacity='.7'%3E%3Ccircle cx='6' cy='10' r='3'/%3E%3Ccircle cx='22' cy='6' r='2'/%3E%3Ccircle cx='38' cy='14' r='2.5'/%3E%3Ccircle cx='14' cy='26' r='2'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='50' cy='24' r='2'/%3E%3Ccircle cx='8' cy='44' r='2.5'/%3E%3Ccircle cx='26' cy='48' r='2'/%3E%3Ccircle cx='44' cy='44' r='3'/%3E%3Ccircle cx='60' cy='38' r='2'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 150 24'%3E%3Cpath d='M0,12 Q9,2 18,12 T36,12 T54,12 T72,12 T90,12 T108,12 T126,12 T144,12' fill='none' stroke='%232dd9c4' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 64 64'%3E%3Cg fill='%232dd9c4' opacity='.75'%3E%3Crect x='29' y='0' width='6' height='64' rx='3'/%3E%3Crect x='0' y='29' width='64' height='6' rx='3'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%232dd9c4' opacity='.6'%3E%3Ccircle cx='42' cy='42' r='38' stroke-width='3'/%3E%3Ccircle cx='42' cy='42' r='24' stroke-width='2' stroke-dasharray='4 7'/%3E%3C/g%3E%3Ccircle cx='42' cy='42' r='6' fill='%232dd9c4' opacity='.8'/%3E%3C/svg%3E");background-position:14px 520px,30px 1180px,4px 1820px,40px 2480px,20px 3100px}
body.equip-page main::after{right:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='28' viewBox='0 0 84 28'%3E%3Cg fill='none' stroke='%232dd9c4' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8,4 20,14 8,24' opacity='.8'/%3E%3Cpolyline points='34,4 46,14 34,24' opacity='.5'/%3E%3Cpolyline points='60,4 72,14 60,24' opacity='.28'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%232dd9c4' opacity='.6'%3E%3Ccircle cx='42' cy='42' r='38' stroke-width='3'/%3E%3Ccircle cx='42' cy='42' r='24' stroke-width='2' stroke-dasharray='4 7'/%3E%3C/g%3E%3Ccircle cx='42' cy='42' r='6' fill='%232dd9c4' opacity='.8'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 64 64'%3E%3Cg fill='%232dd9c4' opacity='.75'%3E%3Crect x='29' y='0' width='6' height='64' rx='3'/%3E%3Crect x='0' y='29' width='64' height='6' rx='3'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='78' viewBox='0 0 110 90'%3E%3Cg stroke='%232dd9c4' stroke-width='2.4' stroke-linecap='round' opacity='.6'%3E%3Cline x1='6' y1='84' x2='26' y2='64'/%3E%3Cline x1='14' y1='84' x2='34' y2='64'/%3E%3Cline x1='22' y1='84' x2='42' y2='64'/%3E%3Cline x1='2' y1='66' x2='22' y2='46'/%3E%3Cline x1='10' y1='66' x2='30' y2='46'/%3E%3Cline x1='18' y1='66' x2='38' y2='46'/%3E%3Cline x1='26' y1='66' x2='46' y2='46'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74' viewBox='0 0 70 70'%3E%3Cg fill='%232dd9c4' opacity='.7'%3E%3Ccircle cx='6' cy='10' r='3'/%3E%3Ccircle cx='22' cy='6' r='2'/%3E%3Ccircle cx='38' cy='14' r='2.5'/%3E%3Ccircle cx='14' cy='26' r='2'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='50' cy='24' r='2'/%3E%3Ccircle cx='8' cy='44' r='2.5'/%3E%3Ccircle cx='26' cy='48' r='2'/%3E%3Ccircle cx='44' cy='44' r='3'/%3E%3C/g%3E%3C/svg%3E");background-position:right 24px top 700px,right 30px top 1400px,right 40px top 2100px,right 14px top 2800px,right 30px top 3400px}
@media(max-width:1799px){body.equip-page main::before,body.equip-page main::after{display:none}}

/* hero-stage eyebrow readable on the dark card (2026-10-07) */
.hero-stage-scene .eyebrow,.product-hero .eyebrow{background:rgba(45,217,196,.16);border:1px solid rgba(45,217,196,.42);color:#7ff0e1}

/* news crumbs current item matches the chips (2026-10-07) */
.news-breadcrumbs span{font-family:var(--font-ui);font-weight:600;color:var(--ink)}

/* ruble signature icon removed on the digital-ruble news page (2026-10-07) */
.side-signature:has(path[d="M9 8h4a2.5 2.5 0 0 1 0 5H9m0-5v9m0-4h5"]){display:none}

/* wider section headings: no narrow columns (2026-10-07) */
.section-head{max-width:1500px}
.reviews-top .section-head{max-width:1000px}
.support-copy h2{font-size:clamp(30px,3.6vw,48px)}

/* lighter case carousel: no blur filter, flatter, smaller shadows (2026-10-07) */
.pc-card{box-shadow:0 14px 30px rgba(4,10,40,.26);transform:translateX(calc(var(--off,0) * 48%)) rotateY(calc(var(--off,0) * -14deg)) scale(calc(1 - var(--abs,0) * .1));filter:none;opacity:calc(var(--op,1) * (1 - var(--abs,0) * .4));transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s}
/* about page: wider title block (2026-10-07) */
@media(min-width:901px){.about-hero .case-hero-copy{max-width:820px}}

/* pause infinite animations of blocks that are off screen (2026-10-07) */
.is-offscreen,.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused!important}



/* animations always, for everyone: reduced-motion media blocks are disabled above (2026-10-07) */

/* modal-open freeze: while a modal / menu / lightbox is open (body.lock) pause the page behind it and use a dense dark overlay instead of heavy backdrop blur (2026-10-07) */
body.lock .modal,body.lock .menu-overlay,body.lock .lb{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.lock .modal{background:rgba(24,28,33,.94)}
body.lock .modal-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgb(32,38,43)}
body.lock #smooth-content,body.lock #smooth-content *,body.lock #smooth-content *::before,body.lock #smooth-content *::after{animation-play-state:paused!important}

/* ===== How we work: cards on home + step articles (2026-10-07) ===== */
.how{position:relative;padding-block:clamp(60px,7vw,100px)}
.how .section-head{max-width:1100px;margin-bottom:34px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.how-card{position:relative;display:flex;flex-direction:column;border-radius:24px;background:#343c42;color:#f4f8fb;overflow:hidden;text-decoration:none;box-shadow:0 18px 40px rgba(4,10,40,.16);transition:transform .3s ease,box-shadow .3s ease}
.how-card:hover{transform:translateY(-5px);box-shadow:0 26px 52px rgba(4,10,40,.26)}
.how-photo{display:block;aspect-ratio:4/3;overflow:hidden;background:#232930}
.how-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.how-card:hover .how-photo img{transform:scale(1.05)}
.how-num{position:absolute;top:14px;left:14px;padding:6px 14px;border-radius:99px;background:linear-gradient(135deg,#2dd9c4,#7ff0e1);color:#04241d;font-family:var(--font-mono);font-weight:800;font-size:14px;letter-spacing:.06em}
.how-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px;flex:1}
.how-card h3{font-family:'Unbounded',var(--font-ui);font-size:clamp(18px,1.5vw,22px);line-height:1.2;font-weight:700;color:#fff}
.how-card p{font-size:16px;line-height:1.55;color:rgba(244,248,251,.8)}
.how-more{margin-top:auto;padding-top:6px;font-weight:700;color:var(--teal-accent)}
@media(max-width:1000px){.how-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.how-grid{grid-template-columns:1fr}}
.how-figure{margin:0;border-radius:24px;overflow:hidden;background:#232930;box-shadow:0 18px 40px rgba(4,10,40,.16)}
.how-figure img{display:block;width:100%;max-height:560px;object-fit:cover}
.how-figure figcaption{padding:14px 20px;font-size:14px;color:var(--muted);background:var(--surface,#fff)}
.how-get{font-size:19px;line-height:1.6;max-width:900px}
.how-case{display:flex;flex-direction:column;gap:6px;padding:24px 28px;border-radius:20px;background:#343c42;color:#f4f8fb;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.how-case:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(4,10,40,.24)}
.how-case b{font-family:'Unbounded',var(--font-ui);font-size:20px;color:#fff}
.how-case span{font-size:16px;line-height:1.55;color:rgba(244,248,251,.82)}
.how-case em{font-style:normal;font-weight:700;color:var(--teal-accent);margin-top:4px}
.how-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.how-nav-a{display:flex;flex-direction:column;gap:4px;padding:18px 22px;border-radius:18px;background:rgba(45,217,196,.14);border:1px solid rgba(45,217,196,.35);color:var(--ink);text-decoration:none;transition:background .25s,transform .25s}
.how-nav-a:hover{background:rgba(45,217,196,.28);transform:translateY(-2px)}
.how-nav-a.next{text-align:right}
.how-nav-a small{font-family:var(--font-mono);font-size:13px;color:#0a6a5d;text-transform:uppercase;letter-spacing:.08em}
.how-nav-a b{font-size:18px;font-weight:700}
.how-related{margin-top:40px}
.how-related h3{font-size:20px;margin-bottom:14px}
.how-related-links{display:flex;flex-wrap:wrap;gap:12px}
.how-related-links a{padding:12px 22px;border-radius:99px;background:rgba(45,217,196,.16);color:#0a6a5d;font-weight:600;text-decoration:none;transition:background .25s}
.how-related-links a:hover{background:var(--teal-accent);color:#04241d}
@media(max-width:700px){.how-nav{grid-template-columns:1fr}.how-nav-a.next{text-align:left}}
/* home hero: longer headline needs a wider block and a bit smaller type */
.hero-copy{max-width:1040px}
.hero-copy h1.headline{font-size:clamp(26px,2.8vw,46px)}

/* hero-how compact: the 6 "how we work" cards live on the first (code) screen, small (2026-10-07) */
.hero{padding-bottom:110px}
.hero-how{position:relative;z-index:3;margin-top:30px}
.hero-how-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-bottom:18px;text-align:center}
.hero-how-head h2{margin:0;font-family:'Unbounded',var(--font-ui);font-size:clamp(18px,1.7vw,26px);font-weight:700;letter-spacing:-.01em;color:#f4f8fb;white-space:nowrap}
.hero-how-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.hero-how .how-card{border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:none}
.hero-how .how-card:hover{background:rgba(255,255,255,.12);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.hero-how .how-photo{aspect-ratio:16/10}
.hero-how .how-num{top:8px;left:8px;padding:3px 9px;font-size:12px}
.hero-how .how-body{padding:10px 12px 13px;gap:0}
.hero-how .how-card h3{font-size:clamp(12.5px,.95vw,15px);line-height:1.25}
.hero-how .how-card p,.hero-how .how-more{display:none}
@media(max-width:1100px){.hero-how-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.hero-how-grid{grid-template-columns:repeat(2,1fr)}.hero-how-head h2{white-space:normal}}

/* duo: only two products (Кассир 5, Торговое предприятие 7) — two equal open cards instead of the accordion; wider hero heading (2026-10-07) */
.product-showcase.duo{max-width:1320px;gap:24px}
.duo .product-item,.duo .product-item.is-open{flex:1 1 0;width:auto;min-height:520px;background:linear-gradient(160deg,#3b4248,#2f353a);transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}
.duo .product-item:hover{transform:translateY(-6px);border-color:rgba(45,220,195,.45);box-shadow:0 28px 60px rgba(4,10,40,.28)}
.duo .item-tab{display:none}
.duo .item-open{position:relative;inset:auto;opacity:1;pointer-events:auto;min-width:0;min-height:520px;height:100%}
.duo .open-visual{flex:0 0 clamp(230px,36%,300px)}
.hero-copy{max-width:1400px}
@media(max-width:900px){.product-showcase.duo{flex-direction:column}.duo .product-item,.duo .product-item.is-open{flex:none;min-height:0}.duo .item-open{flex-direction:column;min-height:0;overflow:visible}.duo .open-visual{max-width:none;flex:none;margin-top:20px}}

.duo .open-name{font-size:clamp(22px,1.9vw,28px)}

/* home2: tiffany outlined cards, big hero-how title, clickable duo products, home equipment catalog (2026-10-07) */
.hero-how-head{margin-bottom:24px}
.hero-how-head .hero-how-title{display:flex;align-items:center;justify-content:center;gap:24px;width:100%;margin:0;font-family:'Unbounded',var(--font-ui);font-size:clamp(26px,2.5vw,40px);font-weight:800;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;filter:drop-shadow(0 0 16px rgba(45,220,195,.45))}
.hero-how-title span{background:linear-gradient(90deg,#fff,#7ff0dd);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-how-title::before,.hero-how-title::after{content:'';flex:0 1 160px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#2ddcc3)}
.hero-how-title::after{transform:scaleX(-1)}
.hero-how .how-card{background:#2b3237;border:1.5px solid rgba(45,220,195,.6);box-shadow:0 0 0 1px rgba(45,220,195,.12),0 0 22px rgba(45,220,195,.28)}
.hero-how .how-card:hover{background:#323a40;border-color:#2ddcc3;box-shadow:0 0 0 1px rgba(45,220,195,.35),0 0 34px rgba(45,220,195,.5);transform:translateY(-5px)}
.screen.solutions .solution-card{border:1.5px solid rgba(45,220,195,.55);box-shadow:0 0 0 1px rgba(45,220,195,.1),0 0 22px rgba(45,220,195,.2),0 20px 50px rgba(4,10,40,.15)}
.screen.solutions .solution-card:hover{border-color:#2ddcc3;box-shadow:0 0 0 1px rgba(45,220,195,.3),0 0 34px rgba(45,220,195,.42),0 26px 60px rgba(4,10,40,.25)}
.screen.solutions .solution-card .stack span{background:rgba(45,220,195,.16);border:1px solid rgba(45,220,195,.55);color:#e8fffb}
.duo .product-item{cursor:pointer}
.duo .open-cat{font-size:13px}
.duo .open-name{font-size:clamp(28px,2.4vw,40px)}
.duo .open-desc{font-size:clamp(17px,1.35vw,21px);line-height:1.6;max-width:none;margin-top:20px}
.duo .open-link{margin-top:auto;padding:14px 24px;border-radius:999px;background:#2ddcc3;color:#04241d;font-weight:700;font-size:13px}
.duo .open-link::after{content:'';position:absolute;inset:0;z-index:1}
.eq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(36px,4vw,54px);max-width:1320px;margin-left:auto;margin-right:auto}
.eq-card{position:relative;display:flex;flex-direction:column;border-radius:26px;background:#343c42;border:1.5px solid rgba(45,220,195,.5);box-shadow:0 0 0 1px rgba(45,220,195,.1),0 0 22px rgba(45,220,195,.2),0 22px 50px rgba(4,10,40,.18);overflow:hidden;color:#eef2ff;text-decoration:none;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.eq-card:hover{transform:translateY(-6px);border-color:#2ddcc3;box-shadow:0 0 0 1px rgba(45,220,195,.3),0 0 34px rgba(45,220,195,.42),0 26px 60px rgba(4,10,40,.25)}
.eq-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 14px 0}
.eq-photos span{aspect-ratio:1/1;border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden}
.eq-photos img{width:100%;height:100%;object-fit:contain;padding:10px;display:block}
.eq-body{display:flex;flex-direction:column;flex:1;padding:22px 26px 28px}
.eq-count{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#2ddcc3}
.eq-card h3{margin-top:8px;font-family:'Unbounded',var(--font-ui);font-size:clamp(20px,1.6vw,26px);font-weight:800;line-height:1.2;color:#fff}
.eq-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px;color:#c4cde6;font-size:16px;line-height:1.4}
.eq-card li{position:relative;padding-left:20px}
.eq-card li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:#2ddcc3}
.eq-more{margin-top:auto;padding-top:22px;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#2ddcc3}
.eq-all{display:flex;justify-content:center;margin-top:34px}
@media(max-width:900px){.eq-grid{grid-template-columns:1fr}.eq-photos span{aspect-ratio:4/3}}
@media(max-width:600px){.hero-how-head .hero-how-title{white-space:normal;gap:12px}.hero-how-title::before,.hero-how-title::after{flex-basis:28px}}

/* home2b */
.duo .open-name{font-size:clamp(24px,1.75vw,30px);overflow-wrap:anywhere}
.duo .open-visual{flex:0 0 clamp(220px,32%,290px)}

/* home2c */
.eq-photos span{position:relative}
.eq-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px}

/* read1: readability — larger small text, stronger contrast; calmer hero cards; static background glow (2026-10-07) */
.eyebrow{font-size:14.5px;font-weight:600}
body:not(.tiffany-glow) .section-head .eyebrow,body:not(.tiffany-glow) .case-hero:not(.product-hero):not(.hero-stage-scene) .eyebrow,.eq-home .eyebrow{color:#0b7b6e}
.footer-col p,.footer-col a,.footer-brand p{font-size:16px}
.footer-col h4{font-size:14px}
.footer-social span{font-size:15px}
.burger-label{font-size:15px}
.footer-bottom span,.footer-bottom a{font-size:15px}
.btn,.btn-panel,.btn-primary,.btn-ghost,.btn-cta{font-size:16px}
.news-article-meta .cat,.news-article-meta time,.news-related-label,.news-related-item b,.news-item time,.news-item .cat,.article-source{font-size:15px}
.news-article-meta .cat{font-weight:700}
.news-related-label{color:#4a5870}
figcaption,.how-figure figcaption{font-size:15px}
.how-nav-a small{font-size:14.5px}
.pc-hint,.pc-hint b,.pc-num{font-size:14.5px}
.rv-note,.rv-note a{font-size:15px;color:#3d4a5c}
.equip-detail-sku,.equip-detail-stock,.equip-detail-cta a,.btn-buy1click,.equip-group-count,.badge-stock,.badge-sale{font-size:15px}
.equip-detail-stock.low{color:#9a3d00}
.equip-detail-stock.order{color:#5a4a00}
.article-cover-video-link{font-size:15px}
.result-card b{font-size:15px}
.stack span{font-size:13.5px}
.tag-row .tag{font-size:13.5px}
.product-tile-num,.open-num,.eq-count{font-size:14.5px}
.product-tile-cat,.open-cat,.open-link,.trust-label,.consult-label,.partner-detail-links a,.download-card-cta{font-size:14.5px}
.marquee-track span{font-size:15px}
.scroll-cue span{font-size:13.5px}
.sup-note{color:#3d4a5c;font-size:15px}
.sup-fee,.sup-contract .eyebrow{font-size:14.5px}
.project-card small,.project-card span{font-size:14.5px}
.receipt-role{font-size:14px}
.rv-meta,.rv-source,.review-meta{font-size:14px}
.hero-how-head .hero-how-title{filter:none}
.hero-how-title span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
.hero-how .how-card{box-shadow:none}
.hero-how .how-card:hover{box-shadow:0 0 0 1px rgba(45,220,195,.55)}
.ambient-blobs .blob{animation:none;will-change:auto;transform:none}

/* eqpages: category subtitle, "need another model" box, "not sure what to choose" trio (2026-10-07) */
.eq-sub{display:block;margin-top:10px;font-size:16px;line-height:1.5;color:#dfe8ef}
.equip-more{margin-top:34px;padding:34px 36px;border-radius:26px;background:linear-gradient(135deg,rgba(45,220,195,.22),rgba(255,255,255,.75));border:1.5px solid rgba(45,220,195,.55);display:flex;flex-direction:column;gap:12px;max-width:900px}
.equip-more h2{margin:0;font-family:'Unbounded',var(--font-ui);font-size:clamp(22px,2vw,30px);font-weight:800}
.equip-more p{margin:0;font-size:18px;line-height:1.6;color:#34425a}
.equip-more-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:8px}
.equip-more-phone{font-family:'Unbounded',var(--font-ui);font-weight:700;font-size:20px;color:#0d1220;text-decoration:none}
.help-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.help-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:32px 30px;border-radius:26px;text-decoration:none;min-height:300px;overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.help-card:hover{transform:translateY(-6px)}
.help-card h3{margin:0;font-family:'Unbounded',var(--font-ui);font-size:clamp(22px,1.8vw,28px);font-weight:800;line-height:1.2}
.help-card p{margin:0;font-size:18px;line-height:1.55}
.help-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin-bottom:10px}
.help-ic svg{width:30px;height:30px}
.help-more{margin-top:auto;font-family:var(--font-mono);font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.help-big{margin-top:auto;font-family:'Unbounded',var(--font-ui);font-size:clamp(22px,1.9vw,30px);font-weight:800}
.help-call{background:linear-gradient(150deg,#2ddcc3,#13b8a4);color:#04241d;box-shadow:0 22px 50px rgba(19,184,164,.35)}
.help-call .help-ic{background:rgba(255,255,255,.38);color:#04241d}
.help-call p{color:#06352d}
.help-form{background:#fff;border:2px solid #2ddcc3;color:#0d1220;box-shadow:0 18px 44px rgba(4,10,40,.1)}
.help-form .help-ic{background:#e6fbf7;color:#0b7b6e}
.help-form p{color:#3d4a5c}
.help-form .help-more{color:#0b7b6e}
.help-look{justify-content:flex-end;color:#fff;background:linear-gradient(180deg,rgba(13,18,32,.2),rgba(13,18,32,.9)),var(--bg) center/cover;box-shadow:0 22px 50px rgba(4,10,40,.3)}
.help-look p{color:#e6eef5}
.help-look .help-more{margin-top:10px;color:#7ff0e1}
@media(max-width:900px){.help-trio{grid-template-columns:1fr}.help-card{min-height:0}}

/* read2: news article text darker/heavier (scoped to news pages only) */
body[class*="news-cat"] .case-body-text{color:#2f3b52}
body[class*="news-cat"] .case-body-text > p,body[class*="news-cat"] .case-body-text > ul > li,body[class*="news-cat"] .case-body-text > ol > li{font-weight:500}
body[class*="news-cat"] .case-body-text p b{color:#0d1220}
body[class*="news-cat"] .news-lead{color:#2f3b52;font-weight:500}
.open-desc{color:#e3ebf5}

/* read3: last small labels (2026-10-07) */
.case-meta span{font-size:14px}
.equip-product-card .body .cat{font-size:14px}
.badges .badge-sale,.badges .badge-stock{font-size:14.5px}
.news-tile-body .cat,.news-tile-body time{font-size:14.5px}
.sup-status,.sup-kicker{font-size:14.5px}
.yes b,.no b{font-size:14px}
.how-num{font-size:13.5px}
.tag-row .tag{font-size:14px}
.sync-card small,.float-chip,.stock-head span,.screen-head span,.receipt-head span,.receipt-pay,.receipt-meta,.screen-pay,.stock-live,.receipt-live{font-size:13.5px}
li b.up,li b.down{font-size:14px}

/* fix1: contacts, footer, support hours, bigger text on dark blocks, news blob not hidden behind cover */
body[class*="news-cat"] section.container > .side-deco.deco-blob.right{right:-300px}
.sup-247.sup-hours{display:flex;flex-direction:column;align-items:center;-webkit-text-stroke:0;letter-spacing:0;color:inherit}
.sup-hours b{display:block;font-family:'Unbounded',var(--font-ui);font-weight:800;font-size:clamp(64px,9vw,128px);line-height:1;letter-spacing:-.03em;background:linear-gradient(135deg,#a8fff2,#2ddcc3 55%,#10a996);-webkit-background-clip:text;background-clip:text;color:transparent}
.sup-hours small{margin-top:14px;font-family:var(--font-mono);font-size:clamp(16px,1.5vw,22px);letter-spacing:.14em;text-transform:uppercase;color:#d5f3ee}
.support-card .label{font-size:16px}
.support-card .label b{font-size:17px}
.support-mini p{font-size:15.5px}
.support-mini .chat-bubble{font-size:15.5px}
.contacts-block{padding-top:10px;padding-bottom:40px}
.contacts-block h2{margin:0 0 22px;font-family:'Unbounded',var(--font-ui);font-size:clamp(24px,2.4vw,36px);font-weight:800}
.contacts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ct-card{display:flex;flex-direction:column;gap:6px;padding:26px 24px;border-radius:22px;background:#2b3237;border:1.5px solid rgba(45,220,195,.5);color:#fff;box-shadow:0 0 0 1px rgba(45,220,195,.08),0 18px 40px rgba(4,10,40,.18)}
.ct-label{font-family:var(--font-mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#2ddcc3}
.ct-card a,.ct-card b{font-size:19px;font-weight:700;color:#fff;text-decoration:none;line-height:1.35;overflow-wrap:anywhere}
.ct-card a:hover{color:#7ff0e1}
.ct-card small{font-size:15px;line-height:1.5;color:#c4cfdc;margin-bottom:6px}
@media(max-width:1100px){.contacts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.contacts-grid{grid-template-columns:1fr}}
.footer-grid{grid-template-columns:1fr 1.5fr 1.4fr;gap:40px}
.footer-brand p{color:#b3bdd2;max-width:280px}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-content:start}
.footer-nav h4{grid-column:1/-1}
.footer-col h4{color:#aab6cc}
.footer-col small{display:block;font-size:14px;color:#aab6cc;margin:2px 0 0}
.footer-bottom,.footer-bottom span{color:#aab6cc}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}}

/* read4: contrast of grey/teal small text on LIGHT pages only, last small paragraphs (2026-10-07) */
body:not(.tiffany-glow) .cta-band .eyebrow{color:#0b7b6e}
body:not(.tiffany-glow) .case-hero:not(.product-hero):not(.hero-stage-scene) .lead{color:#34425a;font-weight:500}
body:not(.tiffany-glow) .news-breadcrumbs a,body:not(.tiffany-glow) .equip-breadcrumbs a{color:#0b7b6e;font-weight:600}
.news-article-meta .cat,.news-tile-body .cat{color:color-mix(in srgb,var(--news-accent,#0b7b6e) 45%,#0d1220)}
.news-article-meta time,.news-related-item b,.news-tile-body time,.article-source,.news-related-label{color:#4a5870}
.how-related-links a{color:#0b7b6e}
.how-nav-a small{color:#3d4a5c}
.equip-group-count{color:#3d4a5c}
.badge-stock.in{color:#0a6a5f}
.trust-label{color:#0b7b6e}
.article-source,.price-note,.price-note a,.news-tile-body p,.download-card-body p,.partner-detail-body p,.consult-note,.soft-tags a,.how-case span,.price-summary span,.how-figure figcaption{font-size:16.5px}
.sync-card small,.pc-hint,.pc-foot span{font-size:15px}
.progress-item b{font-size:16px}
.ct-card small{font-size:16px}

/* read5: dark pages (about, support, knowledge, download): readable paragraphs and notes (2026-10-07) */
.sup-note{color:#cfdddb}
body.tiffany-glow .sup-block p,body.tiffany-glow .sup-block li,body.tiffany-glow .about-why-text p,body.tiffany-glow .case-hero .lead{color:#dbe7e8}
body.tiffany-glow .sup-tile li{font-size:16.5px;line-height:1.5}
body.tiffany-glow .sup-block p{font-size:16.5px}
body.tiffany-glow .about-why-text p{font-size:17px}

/* brandname: "Внедренческий центр" lettering left of the logo, signal sweep in sync with the logo; news list columns (2026-10-07) */
.brand-name{display:flex;flex-direction:column;gap:4px;margin-right:4px;font-family:'Unbounded',var(--font-ui);font-weight:700;font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:transparent;background:linear-gradient(100deg,#0e9a8b 0%,#22c9b4 38%,#c2fff6 50%,#22c9b4 62%,#0e9a8b 100%) 130% 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:brandNameSignal 2s cubic-bezier(.45,0,.25,1) infinite}
.brand-name b{font-weight:700}
.brand-name i{display:flex;justify-content:space-between;font-style:normal}
.brand-name s{text-decoration:none}
.footer-brand .brand-name{font-size:13px;gap:5px}
@keyframes brandNameSignal{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
@media(max-width:560px){.brand-name{display:none}}
.news-list a.news-item{grid-template-columns:130px minmax(190px,230px) 1fr 30px}

/* brandname2 */
.brand-name{font-size:13.5px;gap:5px}
.footer-brand .brand-name{font-size:15px}

/* contracts-move: wide third tile on /products/, link card on /support/ (2026-10-07) */
.products-grid .product-tile.product-tile-wide{grid-column:1 / -1}
.sup-linkcard{display:flex;flex-direction:column;gap:8px;padding:28px 30px;border-radius:24px;border:1.5px solid rgba(45,220,195,.5);background:rgba(255,255,255,.06);color:#fff;text-decoration:none;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}
.sup-linkcard:hover{transform:translateY(-4px);border-color:#2ddcc3;box-shadow:0 0 30px rgba(45,220,195,.3)}
.sup-linkcard b{font-family:'Unbounded',var(--font-ui);font-size:clamp(20px,1.9vw,28px);font-weight:800;line-height:1.2}
.sup-linkcard span:last-child{font-size:17px;line-height:1.5;color:#dbe7e8}

/* dogovory-page: light text on the dark contracts page (2026-10-07) */
.dogovory-page .case-hero h1{color:#fff}
.dogovory-page .case-hero .lead{color:#dbe7e8}
.dogovory-page .sup-fee b,.dogovory-page .sup-contract h3{color:#fff}
.dogovory-page .sup-fee small{color:#cfe0dd}
.dogovory-page .sup-contract li{color:#e3eded}
.dogovory-page .eyebrow{color:#7ff0e1}

/* brandname3: keep the breve of Й visible (background-clip clipped it) */
.brand-name b{display:block;line-height:1.35;padding-top:3px;margin-top:-3px}
.brand-name{overflow:visible}

/* brandname4: lettering lockup - small ВНЕДРЕНЧЕСКИЙ above, big outlined ЦЕНТР with a circuit trace + signal, in sync with the logo (2026-10-08) */
.brand-name{font-size:12px;gap:2px;margin-right:-4px;align-items:flex-start}
.brand-name b{font-size:1em;letter-spacing:.2em;line-height:1.3}
.brand-name i{display:flex;align-items:center;justify-content:flex-start;font-size:2.1em;line-height:1;letter-spacing:.06em;font-weight:800;-webkit-text-stroke:1.2px #22c9b4}
.brand-name i::after{content:'';flex:1 1 auto;min-width:16px;height:6px;margin-left:8px;background:radial-gradient(circle,#2ddcc3 0 2.6px,transparent 3px) right center/6px 6px no-repeat,linear-gradient(90deg,transparent 0,#d6fff9 50%,transparent 100%) -60% 50%/45% 2px no-repeat,linear-gradient(90deg,#22c9b4,rgba(34,201,180,.18)) 0 50%/100% 2px no-repeat;animation:brandTraceRun 2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes brandTraceRun{0%{background-position:right center,-60% 50%,0 50%}55%,100%{background-position:right center,160% 50%,0 50%}}
.footer-brand .brand-name{font-size:14px}

/* brandname5: ЦЕНТР = hollow outlined letters with a light sweep inside; ВНЕДРЕНЧЕСКИЙ keeps the sweep; each line has its own clip (2026-10-08) */
.brand-name{background:none;-webkit-background-clip:border-box;background-clip:border-box;animation:none;color:inherit}
.brand-name b{color:transparent;background:linear-gradient(100deg,#0e9a8b 0%,#22c9b4 38%,#c2fff6 50%,#22c9b4 62%,#0e9a8b 100%) 130% 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:brandNameSignal 2s cubic-bezier(.45,0,.25,1) infinite}
.brand-name i{color:transparent;background:linear-gradient(100deg,rgba(34,201,180,.04) 0%,rgba(34,201,180,.22) 38%,#d6fff9 50%,rgba(34,201,180,.22) 62%,rgba(34,201,180,.04) 100%) 130% 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:brandNameSignal 2s cubic-bezier(.45,0,.25,1) infinite;-webkit-text-stroke:1.3px #22c9b4}

/* bn1: chosen lettering "Внедренческий центр" (variant 1): two caps lines with a light sweep + thin line with a travelling dot, in sync with the logo (2026-10-08) */
.bn1{display:flex;align-items:center;gap:14px;margin-right:12px}
.bn1 .t{font:700 13px/1.3 'Unbounded',var(--font-ui);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:transparent;background:linear-gradient(100deg,#0e9a8b 0%,#22c9b4 38%,#9ff7ea 50%,#22c9b4 62%,#0e9a8b 100%) 130% 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:bn1Sig 2s cubic-bezier(.45,0,.25,1) infinite}
.bn1 .l{width:2px;height:38px;border-radius:2px;background:linear-gradient(#22c9b4,rgba(34,201,180,.15));position:relative;overflow:hidden}
.bn1 .l::after{content:"";position:absolute;left:0;right:0;height:12px;background:#d6fff9;animation:bn1Dot 2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes bn1Sig{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
@keyframes bn1Dot{0%{top:-14px}55%,100%{top:42px}}
.footer-brand .bn1 .t{font-size:15px}
.footer-brand .bn1 .l{height:46px}
@media(max-width:560px){.bn1{display:none}}

/* bn2: one-line lettering in the logo's own style: same wide bold caps and same teal diagonal gradient as "БИТ", bigger, with a thin grey circuit trace (rings) underneath that leads into the gear; signal in sync with the logo (2026-10-08) */
.bn2{display:flex;flex-direction:column;gap:5px;margin-right:6px;justify-content:center}
.bn2 .t{font:700 17px/1.1 'Unbounded',var(--font-ui);letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;color:transparent;background:linear-gradient(115deg,#0a9d93 0%,#18bfae 40%,#7ff0e1 52%,#18bfae 62%,#2dd9c8 100%) 130% 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:bn2Sig 2s cubic-bezier(.45,0,.25,1) infinite}
.bn2 .tr{position:relative;height:10px;margin-left:2px}
.bn2 .tr::before{content:"";position:absolute;left:6px;right:6px;top:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,#c3cad4,#9aa4b2)}
.bn2 .tr i{position:absolute;top:0;width:10px;height:10px;border-radius:50%;border:2px solid #aab3c0;background:rgba(255,255,255,.0);box-sizing:border-box}
.bn2 .tr i:nth-child(1){left:0}
.bn2 .tr i:nth-child(2){left:46%}
.bn2 .tr i:nth-child(3){right:0}
.bn2 .tr::after{content:"";position:absolute;top:3px;left:0;width:34px;height:4px;border-radius:3px;background:linear-gradient(90deg,transparent,#2dd9c8,#d6fff9,transparent);animation:bn2Run 2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes bn2Sig{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
@keyframes bn2Run{0%{left:-10%;opacity:0}12%{opacity:1}55%{left:100%;opacity:1}62%,100%{left:100%;opacity:0}}
.footer-brand .bn2 .t{font-size:20px}
@media(max-width:560px){.bn2{display:none}}

/* bn3: the FIRST lettering the user liked: small ВНЕДРЕНЧЕСКИЙ above, letter-spaced ЦЕНТР below (spacing a bit tighter than before); static gradient text (no repaint) and a cheap transform-only glint in sync with the logo - no lag (2026-10-08) */
.bn3{position:relative;display:flex;flex-direction:column;gap:4px;margin-right:10px;padding:2px 0;overflow:hidden;font-size:14px;font-family:'Unbounded',var(--font-ui);font-weight:700;text-transform:uppercase;white-space:nowrap}
.bn3 b,.bn3 i{font-size:1em;font-weight:700;font-style:normal;line-height:1.35;color:transparent;background:linear-gradient(100deg,#0a9d93 0%,#18bfae 55%,#2dd9c8 100%);-webkit-background-clip:text;background-clip:text}
.bn3 b{display:block;letter-spacing:.16em}
.bn3 i{display:flex;justify-content:space-between;width:82%;letter-spacing:0}
.bn3 s{text-decoration:none}
.bn3::after{content:"";position:absolute;top:0;bottom:0;left:0;width:26px;background:linear-gradient(90deg,transparent,rgba(190,255,248,.6),transparent);transform:translateX(-50px) skewX(-18deg);animation:bn3Glint 2s cubic-bezier(.45,0,.25,1) infinite;will-change:transform;pointer-events:none}
@keyframes bn3Glint{0%{transform:translateX(-50px) skewX(-18deg)}55%,100%{transform:translateX(230px) skewX(-18deg)}}
.footer-brand .bn3{font-size:16px}
@media(max-width:560px){.bn3{display:none}}

/* bn3b: ЦЕНТР letters a bit closer; glint fades out before the right edge and hands off to the logo's own signal (starts exactly when the logo signal starts) (2026-10-08) */
.bn3 i{width:74%}
.bn3::after{left:0;right:0;width:auto;background:linear-gradient(100deg,transparent 35%,rgba(190,255,248,.62) 50%,transparent 65%);opacity:0;transform:translateX(-100%);animation:bn3Glint2 2s cubic-bezier(.45,0,.25,1) -.76s infinite}
@keyframes bn3Glint2{0%{transform:translateX(-100%);opacity:0}8%{opacity:1}28%{transform:translateX(34%);opacity:1}38%,100%{transform:translateX(52%);opacity:0}}

/* bn3c: glint never reaches the right edge - its centre stops at ~88% of the width while it fades out completely, so it dissolves on the last letters instead of hitting a border; ends exactly when the logo's own signal starts (2026-10-08) */
.bn3::after{background:linear-gradient(100deg,transparent 33%,rgba(190,255,248,.62) 50%,transparent 67%);animation:bn3Glint3 2s cubic-bezier(.45,0,.25,1) -.64s infinite}
@keyframes bn3Glint3{0%{transform:translateX(-100%);opacity:0}8%{opacity:1}24%{transform:translateX(20%);opacity:1}32%{transform:translateX(38%);opacity:0}100%{transform:translateX(38%);opacity:0}}

/* hero-legible: the headline no longer mixes with the code - a soft dark scrim sits between the code and the text (the code animation itself is untouched), the teal glow is replaced by a dark shadow and the text is a little brighter (2026-10-08) */
.hero-copy::before{content:"";position:absolute;left:-110px;right:-110px;top:-34px;height:230px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 52% 50% at 50% 46%,rgba(18,24,27,.94) 0,rgba(18,24,27,.82) 48%,rgba(18,24,27,.45) 78%,rgba(18,24,27,0) 100%)}
.hero-copy h1.headline{color:#62f6e1;filter:drop-shadow(0 2px 2px rgba(6,10,12,.9)) drop-shadow(0 0 12px rgba(6,10,12,.7))}

/* bn3d: the glint is a soft blob (masked on all sides) so no light rectangle/box edges show around the lettering; hero: instead of a dark patch the code simply fades out softly under the headline (mask on the code layer, animation untouched) (2026-10-08) */
.bn3{overflow:visible}
.bn3::after{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 0,rgba(0,0,0,.5) 45%,transparent 72%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 0,rgba(0,0,0,.5) 45%,transparent 72%);background:linear-gradient(100deg,transparent 30%,rgba(190,255,248,.5) 50%,transparent 70%);top:-6px;bottom:-6px}
.hero-copy::before{display:none}
.code-type{-webkit-mask-image:radial-gradient(ellipse 42% 17% at 50% 31%,transparent 0,transparent 42%,#000 100%);mask-image:radial-gradient(ellipse 42% 17% at 50% 31%,transparent 0,transparent 42%,#000 100%)}
.hero-copy h1.headline{filter:drop-shadow(0 2px 2px rgba(6,10,12,.55))}

/* lead-form: feedback form "Обратная связь" (name, phone, e-mail, message, consent) on dark card (2026-10-08) */
.lead-card{margin-top:30px;margin-bottom:80px;padding:38px clamp(20px,4vw,60px) 42px;border-radius:26px;background:#2b3237;border:1.5px solid rgba(45,220,195,.5);color:#fff;box-shadow:0 0 0 1px rgba(45,220,195,.08),0 18px 40px rgba(4,10,40,.18)}
.lead-title{margin:0 0 8px;text-align:center;font:800 clamp(26px,3.2vw,42px)/1.15 'Unbounded',var(--font-ui);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.4px #2ddcc3;letter-spacing:.2em;padding-left:.2em}
.lead-sub{margin:0 0 26px;text-align:center;font-size:18px;line-height:1.5;color:#cfdddb}
.lead-form{max-width:780px;margin:0 auto;display:grid;gap:20px}
.lead-form label{display:block}
.lead-form label>span{display:block;margin-bottom:2px;font:700 14px/1.2 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:#a9bbc2}
.lead-form input[type=text],.lead-form input[type=tel],.lead-form input[type=email],.lead-form textarea{display:block;width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.3);border-radius:0;color:#fff;font:600 21px/1.4 var(--font-ui);padding:8px 2px 11px;outline:0;resize:vertical}
.lead-form input:focus,.lead-form textarea:focus{border-bottom-color:#2ddcc3}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:#6f8089;font-weight:500}
.lead-form label.lead-agree{display:flex;gap:12px;align-items:flex-start}
.lead-agree input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:#2ddcc3}
.lead-form label.lead-agree>span{display:block;margin:0;text-transform:none;letter-spacing:0;font:500 16px/1.45 var(--font-ui);color:#cfdddb}
.lead-btn{justify-self:center;margin-top:4px;padding:17px 46px;border:0;border-radius:10px;background:#4de8c6;color:#04241d;font:800 17px/1 var(--font-ui);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s}
.lead-btn:hover{background:#7ff0e1;transform:translateY(-2px)}
.lead-btn:disabled{opacity:.6;cursor:wait;transform:none}
.lead-status{margin:0;text-align:center;min-height:1.4em;font:600 17px/1.4 var(--font-ui)}
.lead-status.ok{color:#7ff0e1}
.lead-status.err{color:#ff9b8f}
.lead-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

/* footer-subscribe: подписка на новости в подвале + окошко (2026-10-08) */
.footer-subscribe{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding-block:26px;border-top:1px solid rgba(255,255,255,.1)}
.footer-subscribe p{margin:0;font:700 19px/1.4 var(--font-ui);color:#7ff0e1}
.sub-btn{padding:15px 34px;border:0;border-radius:10px;background:#4de8c6;color:#04241d;font:800 15px/1 var(--font-ui);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s}
.sub-btn:hover{background:#7ff0e1;transform:translateY(-2px)}
.sub-modal{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(8,12,14,.62)}
.sub-modal.open{display:flex}
.sub-box{position:relative;box-sizing:border-box;width:min(500px,100%);padding:36px 32px 32px;border-radius:22px;background:#2b3237;border:1.5px solid rgba(45,220,195,.5);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.sub-box h3{margin:0 0 10px;font:800 clamp(22px,4vw,28px)/1.2 'Unbounded',var(--font-ui);color:#2ddcc3;text-transform:uppercase}
.sub-text{margin:0 0 22px;font-size:17px;line-height:1.5;color:#cfdddb}
.sub-close{position:absolute;top:10px;right:14px;width:40px;height:40px;border:0;background:transparent;color:#cfdddb;font-size:32px;line-height:1;cursor:pointer}
.sub-close:hover{color:#fff}
.sub-form{max-width:none;margin:0}
@media(max-width:700px){.footer-subscribe{flex-direction:column;align-items:flex-start}.footer-subscribe p{font-size:17px}}

.footer-bottom{padding-inline:clamp(20px,4.5vw,56px)}

/* how-dim: код за шагами «Как мы работаем» тише (анимация не тронута), мягкий ореол под карточками (2026-10-08) */
.hero-how{isolation:isolate}
.hero-how::before{content:"";position:absolute;z-index:-1;inset:-34px -48px -30px;pointer-events:none;background:radial-gradient(ellipse 62% 66% at 50% 52%,rgba(50,58,63,.7) 0,rgba(50,58,63,.7) 56%,rgba(50,58,63,0) 100%)}

/* how-slides: слайды шагов показываются целиком (16:9, без обрезки и без увеличения при наведении) (2026-10-08) */
.hero-how .how-photo{aspect-ratio:16/9;background:#232930}
.hero-how .how-photo img{object-fit:contain}
.hero-how .how-card:hover .how-photo img{transform:none}

/* how-car: карусель слайдов шагов — центральный крупный, соседние меньше и приглушены, стрелки и точки (2026-10-08) */
.how-car{--hw:clamp(320px,44vw,680px);position:relative;margin-top:4px}
.how-car-view{position:relative;height:calc(var(--hw)*.5625 + 84px);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.how-slide{--d:0;--s:1;position:absolute;top:12px;left:50%;width:var(--hw);margin-left:calc(var(--hw)/-2);display:block;color:#fff;text-decoration:none;transform:translateX(calc(var(--d)*(var(--hw) + 28px))) scale(var(--s));transform-origin:50% 0;transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .55s ease}
.how-slide:not(:first-child){opacity:0}
.how-frame{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:#232930;border:1.5px solid rgba(45,220,195,.6);box-shadow:0 0 26px rgba(45,220,195,.22)}
.how-frame img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.how-cap{position:absolute;left:0;right:0;top:calc(100% + 14px);display:flex;align-items:center;justify-content:center;gap:12px;opacity:0;transition:opacity .4s ease;font:700 clamp(15px,1.3vw,19px)/1.2 'Unbounded',var(--font-ui);text-align:center}
.how-cap b{padding:3px 10px;border-radius:99px;background:#2ddcc3;color:#04241d;font-size:.78em}
.how-slide.active .how-cap{opacity:1}
.how-slide:focus-visible .how-frame{outline:3px solid #2ddcc3;outline-offset:3px}
.how-car-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
.how-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.how-btn svg{width:20px;height:20px}
.how-btn:hover{border-color:#2ddcc3;color:#2ddcc3}
.how-car-dots{display:flex;align-items:center;gap:8px}
.how-dot{width:11px;height:11px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.28);cursor:pointer;transition:width .3s ease,background .3s ease}
.how-dot.on{width:30px;background:#2ddcc3}
@media(max-width:700px){.how-car{--hw:min(84vw,520px)}.how-btn{width:42px;height:42px}}

/* code-around-how: код останавливается над «Как мы работаем» и продолжается под карточками; позиции ряда ставит скрипт (2026-10-08) */
.hero-how::before{display:none}
.code-type{grid-template-rows:var(--ct-r1,44%) var(--ct-r2,34%) 1fr}
.code-type .col:nth-child(n+6){grid-row:3}

/* cue-halo: подложка под «Листайте», чтобы код под карточками не лез на надпись (2026-10-08) */
.hero .scroll-cue{isolation:isolate}
.hero .scroll-cue::before{content:"";position:absolute;z-index:-1;inset:-22px -64px -14px;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(52,58,63,.96) 0,rgba(52,58,63,.96) 58%,rgba(52,58,63,0) 100%)}

/* step-hero: слайдер в шапке страниц шагов (как на CodePen MDJAmin/GgpdKPy): крупный слайд, текст слева, карточки следующих шагов справа внизу (2026-10-08) */
.step-hero{padding-top:clamp(104px,9vw,124px);padding-bottom:28px;position:relative}
.step-hero .back{display:inline-block;margin-bottom:14px}
.sx{--tw:clamp(104px,10.5vw,150px);--th:calc(var(--tw)*1.25);--px:clamp(22px,4.5vw,64px);position:relative;height:clamp(460px,66vh,600px);border-radius:24px;overflow:hidden;background:#232930;color:#fff;box-shadow:0 22px 50px rgba(8,12,14,.28);opacity:0;transition:opacity .4s ease}
.sx.ready{opacity:1}
.sx-stage{position:absolute;inset:0}
.sx-bg{position:absolute;inset:0;background-size:cover;background-position:60% center;opacity:0}
.sx-bg.on{opacity:1;z-index:1}
.sx-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(21,27,31,.9) 0,rgba(21,27,31,.72) 34%,rgba(21,27,31,.18) 66%,rgba(21,27,31,0) 100%),linear-gradient(0deg,rgba(21,27,31,.55) 0,rgba(21,27,31,0) 38%)}
.sx-copy{position:absolute;z-index:4;left:var(--px);top:50%;transform:translateY(-54%);width:min(47%,540px)}
.sx-slide{display:none}
.sx-slide.on{display:block}
.sx-kick{display:block;margin-bottom:12px;font:600 13px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#2ddcc3}
.sx-name{display:block;font:800 clamp(24px,3vw,42px)/1.12 'Unbounded',var(--font-ui);text-transform:uppercase;color:#fff}
.sx-des{display:block;margin:14px 0 22px;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:#e1ebe9}
.sx-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border:1.5px solid #2ddcc3;border-radius:99px;color:#2ddcc3;font:700 15px/1 var(--font-ui);text-decoration:none;background:rgba(21,27,31,.35);transition:background .25s,color .25s}
.sx-btn:hover{background:#2ddcc3;color:#04241d}
.sx-slide.on .sx-kick,.sx-slide.on .sx-name,.sx-slide.on .sx-des,.sx-slide.on .sx-btn{opacity:0;animation:sxIn 1s ease-in-out forwards}
.sx-slide.on .sx-des{animation-delay:.3s}
.sx-slide.on .sx-btn{animation-delay:.6s}
@keyframes sxIn{from{opacity:0;transform:translateY(70px);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}
.sx-ctrl{position:absolute;z-index:5;left:var(--px);bottom:26px;display:flex;align-items:center;gap:14px}
.sx-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);color:#fff;background:rgba(21,27,31,.35);transition:border-color .2s,color .2s,transform .2s}
.sx-arrow:hover{border-color:#2ddcc3;color:#2ddcc3;transform:scale(1.08)}
.sx-arrow svg{width:20px;height:20px}
.sx-count{min-width:70px;text-align:center;font:600 14px/1 var(--font-mono);letter-spacing:.1em;color:#e1ebe9}
.sx-thumbs{position:absolute;z-index:5;right:26px;bottom:26px;width:calc(var(--tw)*3 + 28px);height:var(--th)}
.sx-th{position:absolute;left:0;top:0;width:var(--tw);height:var(--th);border-radius:14px;background-size:cover;background-position:72% 38%;overflow:hidden;color:#fff;text-decoration:none;box-shadow:0 14px 30px rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.25);transform:translateX(calc(var(--i,0)*(var(--tw) + 14px)));opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.3,.7,.2,1),opacity .5s ease,border-color .2s}
.sx-th.vis{opacity:1;pointer-events:auto}
.sx-th:hover{border-color:#2ddcc3}
.sx-th::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,27,31,.85) 0,rgba(21,27,31,0) 55%)}
.sx-th b{position:absolute;z-index:1;left:9px;top:9px;padding:3px 8px;border-radius:99px;background:#2ddcc3;color:#04241d;font:800 11px/1 var(--font-mono)}
.sx-th span{position:absolute;z-index:1;left:10px;right:8px;bottom:9px;font:700 clamp(11px,.95vw,13px)/1.2 var(--font-ui)}
@media(max-width:860px){.sx{height:min(660px,calc(100svh - 140px));min-height:520px}.sx-copy{width:calc(100% - 2*var(--px))}.sx-shade{background:linear-gradient(90deg,rgba(21,27,31,.88),rgba(21,27,31,.6)),linear-gradient(0deg,rgba(21,27,31,.6),rgba(21,27,31,0) 40%)}.sx-thumbs{display:none}}
.how-more-row{display:flex;justify-content:center;margin-top:22px}
.how-more-btn{display:inline-flex;align-items:center;padding:13px 32px;border:1.5px solid #2ddcc3;border-radius:99px;color:#2ddcc3;font:700 16px/1 var(--font-ui);text-decoration:none;transition:background .25s,color .25s}
.how-more-btn:hover{background:#2ddcc3;color:#04241d}

/* step-calm: временные спокойные фоны слайдера (без фото). Когда будут настоящие фоны — удалить этот блок, картинки подставятся из разметки (2026-10-08) */
.sx{--g1:radial-gradient(ellipse 58% 72% at 78% 30%,rgba(45,217,196,.42),transparent 70%),radial-gradient(ellipse 48% 60% at 100% 100%,rgba(30,120,140,.40),transparent 72%),linear-gradient(135deg,#161c20 0,#222a2f 55%,#192026 100%);--g2:radial-gradient(ellipse 58% 72% at 72% 70%,rgba(45,200,215,.42),transparent 70%),radial-gradient(ellipse 48% 60% at 96% 6%,rgba(60,110,170,.40),transparent 72%),linear-gradient(135deg,#161c20 0,#222a2f 55%,#192026 100%);--g3:radial-gradient(ellipse 58% 72% at 84% 44%,rgba(60,220,170,.42),transparent 70%),radial-gradient(ellipse 48% 60% at 60% 100%,rgba(30,130,120,.40),transparent 72%),linear-gradient(135deg,#161c20 0,#222a2f 55%,#192026 100%);--g4:radial-gradient(ellipse 58% 72% at 66% 24%,rgba(45,190,220,.42),transparent 70%),radial-gradient(ellipse 48% 60% at 100% 80%,rgba(50,100,160,.40),transparent 72%),linear-gradient(135deg,#161c20 0,#222a2f 55%,#192026 100%);--g5:radial-gradient(ellipse 58% 72% at 80% 64%,rgba(70,215,190,.42),transparent 70%),radial-gradient(ellipse 48% 60% at 90% 0%,rgba(40,130,150,.40),transparent 72%),linear-gradient(135deg,#161c20 0,#222a2f 55%,#192026 100%);--g6:radial-gradient(ellipse 58% 72% at 74% 40%,rgba(45,217,196,.42),transparent 70%),radial-gradient(ellipse 48% 60% at 100% 100%,rgba(70,120,170,.40),transparent 72%),linear-gradient(135deg,#161c20 0,#222a2f 55%,#192026 100%)}
.sx-bg:nth-child(1),.sx-th:nth-child(1){background-image:var(--g1)!important}
.sx-bg:nth-child(2),.sx-th:nth-child(2){background-image:var(--g2)!important}
.sx-bg:nth-child(3),.sx-th:nth-child(3){background-image:var(--g3)!important}
.sx-bg:nth-child(4),.sx-th:nth-child(4){background-image:var(--g4)!important}
.sx-bg:nth-child(5),.sx-th:nth-child(5){background-image:var(--g5)!important}
.sx-bg:nth-child(6),.sx-th:nth-child(6){background-image:var(--g6)!important}

/* step-full: слайдер шагов на весь экран (фон = картинка), справа большие вертикальные карточки по центру, как в оригинале (2026-10-08) */
.step-hero{padding:0;--px:clamp(22px,6vw,110px)}
.step-hero>.container{max-width:none;padding:0;width:100%}
.step-hero .back{position:absolute;z-index:6;left:var(--px);top:112px;margin:0}
.sx{--th:clamp(250px,52vh,470px);--tw:calc(var(--th)*.8);--px:clamp(22px,6vw,110px);height:100vh;height:100svh;min-height:600px;border-radius:0;box-shadow:none}
.sx-copy{width:min(42%,560px);transform:translateY(-50%)}
.sx-thumbs{left:50%;right:auto;top:50%;bottom:auto;transform:translateY(-50%);width:0;height:var(--th)}
.sx-th{border-radius:20px;transform:translateX(calc(var(--i,0)*(var(--tw) + 20px)));background-position:50% 50%}
.sx-th b{left:12px;top:12px;font-size:12px}
.sx-th span{left:14px;bottom:14px;font-size:clamp(13px,1.1vw,16px)}
.sx-ctrl{bottom:40px}
@media(max-width:860px){.sx{height:100svh;min-height:560px}.sx-copy{width:calc(100% - 2*var(--px))}.step-hero .back{top:104px}}

/* step-dark: страницы шагов — один тёмный фон от слайдера до подвала, светлые тексты (2026-10-08) */
body.step-dark{background:#1a2025}
body.step-dark .case-block{background:transparent}
body.step-dark .case-block h2,body.step-dark .how-related h3{color:#fff}
body.step-dark .check-list div,body.step-dark .how-get{color:#dfe9e8}
body.step-dark .how-case{background:#242c32;border:1px solid rgba(45,220,195,.35)}
body.step-dark .how-case b{color:#fff}
body.step-dark .how-case span{color:#cfdddb}
body.step-dark .how-case em{color:#2ddcc3}
body.step-dark .how-nav-a{background:#242c32;border:1px solid rgba(255,255,255,.14);color:#fff}
body.step-dark .how-nav-a small{color:#9fb3b0}
body.step-dark .how-nav-a b{color:#fff}
body.step-dark .how-nav-a:hover{border-color:#2ddcc3}
body.step-dark .how-related-links a{background:rgba(255,255,255,.08);color:#2ddcc3;border:1px solid rgba(45,220,195,.35)}
body.step-dark .sx-shade{background:linear-gradient(0deg,#1a2025 0,rgba(26,32,37,0) 24%),linear-gradient(90deg,rgba(21,27,31,.9) 0,rgba(21,27,31,.72) 34%,rgba(21,27,31,.18) 66%,rgba(21,27,31,0) 100%)}

/* footer-compact: подвал ниже по высоте; фото под слайдером шагов не показывается никогда (2026-10-08) */
body.step-dark .how-figure{display:none!important}
.footer-grid{padding-block:32px 22px;gap:24px 32px;grid-template-columns:1fr 1.9fr 1.3fr}
.footer-nav{grid-template-columns:repeat(3,auto);column-gap:22px;justify-content:start}
.footer-col a,.footer-col p{margin-top:7px;line-height:1.35}
.footer-col h4{margin-bottom:2px}
.footer-col small{margin:1px 0 0;font-size:13px}
.footer-brand p{margin-top:8px;font-size:15px}
.footer-subscribe{padding-block:14px}
.footer-subscribe p{font-size:17px}
.sub-btn{padding:12px 26px}
.footer-bottom{padding-block:12px 18px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr;padding-block:26px 14px}.footer-nav{grid-template-columns:repeat(2,auto)}}


/* how-cards-new: карточки шагов на главной — новые картинки целиком, высота по форме кадра (554:467), без увеличения при наведении (2026-10-08) */
.hero-how .how-photo{aspect-ratio:554/467}
.hero-how .how-photo img{object-fit:cover}
.hero-how .how-card:hover .how-photo img{transform:none}

/* how-num-right: номер шага справа вверху, чтобы не закрывать логотип на картинке (2026-10-08) */
.hero-how .how-num{left:auto;right:8px}