/* =========================================================
   Simple Telecom — Design System "Pearl & Ink" v2
   Tokens → themes → base → components → sections
   Документация и витрина: system.html
   ========================================================= */

/* ---------- 1. TOKENS: primitives ---------- */
:root{
  /* palette */
  --pearl:#f3f2ee;
  --pearl-2:#e9e7e1;
  --white:#fcfcfa;
  --ink:#0b0b0c;
  --ink-2:#161618;
  --ink-3:#26262a;
  --gray-100:#cfcfd4;
  --gray-200:#b8b8c0;
  --gray-400:#9a9aa2;
  --gray-600:#66666c;
  --gray-800:#4a4a50;
  --pink:#ff8fd8;
  --cyan:#8fe9ff;
  --lilac:#c9b2ff;
  --lemon:#fff3a8;
  --holo:linear-gradient(115deg,var(--pink) 0%,var(--lemon) 22%,var(--cyan) 45%,var(--lilac) 68%,var(--pink) 100%);
  /* перламутр: мягкие переливы + бегущий белый блик (для текста) */
  --pearl-grad:linear-gradient(115deg,#f6f3ee 0%,#f3d6e7 14%,#fbf8f2 27%,#cfecef 40%,#f9f7f1 53%,#dcd2f5 66%,#fbefd6 80%,#f6f3ee 100%);
  --pearl-sheen:linear-gradient(105deg,transparent 38%,rgb(255 255 255 / .95) 50%,transparent 62%);
  --pearl-img:var(--pearl-sheen),var(--pearl-grad);
  --dur-pearl:7s;
  --alpha-ink-14:rgb(11 11 12 / .14);
  --alpha-white-12:rgb(255 255 255 / .12);
  --alpha-white-35:rgb(255 255 255 / .35);

  /* typography */
  --f-wide:"Russo One","Arial Black",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --fs-2xs:11px;   /* минимум: мета-метки */
  --fs-xs:12px;    /* mono-метки, kicker */
  --fs-sm:14px;    /* навигация, кнопки */
  --fs-base:16px;  /* текст */
  --fs-md:18px;    /* лид */
  --fs-lg:20px;    /* заголовок карточки */
  --fs-xl:24px;
  --fs-2xl:30px;
  --fs-3xl:clamp(34px,4.4vw,62px);  /* цифры статистики */
  --fs-4xl:clamp(34px,5.2vw,76px);  /* h2 */
  --fs-display:clamp(48px,10vw,168px); /* h1 */
  --fw-regular:400;--fw-semibold:600;--fw-bold:800;--fw-black:900;
  --lh-tight:.9;--lh-snug:1.05;--lh-body:1.55;
  --ls-mono:.12em;--ls-tight:-.02em;

  /* spacing: 4px base */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-7:28px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-15:60px;--sp-20:80px;
  --sp-section:clamp(80px,11vw,160px);
  --pad:clamp(16px,4vw,56px);
  --container:1320px;

  /* shape */
  --radius-sm:2px;--radius-md:4px;--radius-lg:6px;--radius-device:40px;--radius-full:999px;
  --border-w:1px;--border-w-strong:1.5px;
  --shadow-1:0 30px 50px -25px rgb(0 0 0 / .35);
  --shadow-2:0 30px 60px -20px rgb(0 0 0 / .35);

  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-instant:.15s;
  --dur-fast:.2s;
  --dur-base:.35s;
  --dur-slow:.6s;
  --dur-reveal:.9s;
  --dur-enter:1.1s;
  --dur-shimmer:4s;
  --dur-float:6s;
  --dur-orbit:14s;
  --dur-marquee:28s;

  /* ---------- 2. THEME: light (default) ---------- */
  --bg:var(--pearl);
  --surface:var(--white);
  --fg:var(--ink);
  --fg-2:var(--gray-800);
  --fg-mute:var(--gray-600);
  --border:var(--alpha-ink-14);
  --focus:var(--ink);
  --btn-bg:var(--ink);
  --btn-fg:var(--white);
}
.theme-ink,.section--ink,.footer,.ticker,.drop,.loader{
  --bg:var(--ink);
  --surface:var(--ink-2);
  --fg:var(--white);
  --fg-2:var(--gray-200);
  --fg-mute:var(--gray-400);
  --border:var(--alpha-white-12);
  --focus:var(--white);
  --btn-bg:var(--white);
  --btn-fg:var(--ink);
}

/* ---------- 3. BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-synthesis:none;scroll-padding-top:88px}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:var(--fs-base);line-height:var(--lh-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-mono);text-transform:uppercase}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.skip{position:fixed;left:var(--sp-4);top:var(--sp-4);z-index:200;padding:var(--sp-3) var(--sp-4);background:var(--ink);color:var(--white);transform:translateY(-200%);transition:transform var(--dur-fast)}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.svg-pink{stop-color:var(--pink)}.svg-cyan{stop-color:var(--cyan)}.svg-lilac{stop-color:var(--lilac)}.svg-lemon{stop-color:var(--lemon)}

/* ---------- 4. COMPONENTS ---------- */

/* 4.1 Holo text
   .holo-text        — градиентная заливка. Только на тёмном фоне или ≥ 48px с обводкой (--stroke)
   .holo-mark        — чернильный текст на голографической плашке. Для светлого фона. Контраст 9.5–17:1 */
@keyframes holoShift{to{background-position:300% 0}}
@keyframes pearl{0%{background-position:130% 0,0% 0}100%{background-position:-30% 0,100% 0}}
.holo-text{background-image:var(--pearl-img);background-size:300% 100%,220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pearl var(--dur-pearl) ease-in-out infinite alternate}
.holo-text--stroke{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.holo-mark{color:var(--ink);background-image:var(--pearl-img);background-size:300% 100%,220% 100%;box-shadow:inset 0 0 0 1px var(--alpha-ink-14);padding:0 .14em;margin-left:-.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:pearl var(--dur-pearl) ease-in-out infinite alternate}

/* 4.2 Kicker — надзаголовок секции */
.kicker{display:inline-block;font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--fg-mute);margin-bottom:var(--sp-5)}

/* 4.3 Button
   роли: --primary | --secondary · размеры: (md) | --lg
   состояния: :hover :active :focus-visible [disabled]/[aria-disabled] .is-loading */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:15px var(--sp-7);font-family:var(--f-mono);font-weight:var(--fw-semibold);font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;overflow:hidden;border-radius:var(--radius-sm);isolation:isolate;transition:transform var(--dur-base) var(--ease),background-color var(--dur-base),color var(--dur-base);cursor:pointer}
.btn>span{position:relative;z-index:2}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn--primary::before{content:"";position:absolute;inset:0;background:var(--holo);background-size:300%;transform:translateY(101%);transition:transform var(--dur-base) var(--ease);z-index:1}
.btn--primary:hover::before,.btn--primary:focus-visible::before{animation:holoShift var(--dur-shimmer) linear infinite}
.btn--primary:hover,.btn--primary:focus-visible{color:var(--ink)}
.btn--primary:hover::before,.btn--primary:focus-visible::before{transform:none}
.btn--secondary{border:var(--border-w-strong) solid var(--fg);color:var(--fg)}
.btn--secondary:hover,.btn--secondary:focus-visible{background:var(--fg);color:var(--bg)}
.btn--lg{padding:var(--sp-5) var(--sp-10)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none;cursor:not-allowed}
.btn.is-loading{pointer-events:none}
.btn.is-loading>span{opacity:.35}
.btn.is-loading::after{content:"";position:absolute;z-index:3;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 4.4 Foil — голографическая плёнка поверх карточки, реагирует на курсор (--mx/--my из main.js) */
.foil{position:absolute;inset:0;pointer-events:none;background:var(--holo);background-size:250% 250%;background-position:var(--mx,50%) var(--my,50%);mix-blend-mode:color-dodge;opacity:0;transition:opacity var(--dur-base)}
.foil::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 6px,var(--alpha-white-35) 6px 7px);mix-blend-mode:overlay}
.foil--print{mix-blend-mode:multiply;opacity:.4}
.foil--soft{mix-blend-mode:soft-light}

/* 4.5 Card — база + варианты --service | --statement | --cell */
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:var(--sp-7);background:var(--surface);color:var(--fg);border:var(--border-w) solid var(--border);border-radius:var(--radius-md);transform-style:preserve-3d;transition:box-shadow var(--dur-base),border-color var(--dur-base),background-color var(--dur-base)}
.card:hover .foil,.card:focus-within .foil{opacity:.45}
.card__title{font-family:var(--f-wide);font-weight:var(--fw-bold);font-size:var(--fs-2xl);line-height:var(--lh-snug);position:relative}
.card__text{color:var(--fg-2);position:relative}
.card__link{position:relative;align-self:flex-start;margin-top:var(--sp-6);padding-bottom:3px;font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;background:linear-gradient(var(--fg),var(--fg)) left bottom/0 1.5px no-repeat;transition:background-size var(--dur-base) var(--ease)}
.card__link::after{content:"";position:absolute;inset:-999px}          /* вся карточка кликабельна */
.card:hover .card__link,.card:focus-within .card__link{background-size:100% 1.5px}
.card:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.card:has(.card__link:focus-visible) .card__link{outline:none}
.card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto;color:var(--fg-mute)}
.card__tag{font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.14em;padding:var(--sp-1) var(--sp-2);background:var(--fg);color:var(--bg)}

.card--service{min-height:300px}
.card--service:hover,.card--service:focus-within{box-shadow:var(--shadow-1);border-color:var(--fg)}
.card--service .card__title{margin:var(--sp-15) 0 var(--sp-3)}

.card--statement{min-height:380px;padding:clamp(32px,4vw,56px)}
.card--statement .foil{mix-blend-mode:soft-light}
.card--statement:hover .foil{opacity:.5}
.card--statement .card__title{font-weight:var(--fw-black);font-size:clamp(40px,5vw,72px);line-height:.95;margin-bottom:auto}
.card--statement .card__text{margin-top:var(--sp-10);max-width:440px;font-size:var(--fs-md)}

.card--cell{border-radius:0;border-width:0 var(--border-w) var(--border-w) 0;background:transparent;padding:var(--sp-10) var(--sp-8) var(--sp-12)}
.card--cell::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--holo);background-size:300%;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease);animation:holoShift var(--dur-shimmer) linear infinite}
.card--cell:hover{background:var(--surface)}
.card--cell:hover::before{transform:scaleX(1)}
.card--cell .card__title{font-weight:var(--fw-semibold);font-size:var(--fs-lg);margin-bottom:var(--sp-3)}
.card__num{display:block;font-family:var(--f-wide);font-weight:var(--fw-black);font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--alpha-white-35);margin-bottom:var(--sp-8);transition:var(--dur-base)}
.card--cell:hover .card__num{background-image:var(--pearl-img);background-size:300% 100%,220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;animation:pearl 3s ease-in-out infinite alternate}

/* 4.6 Badge — иконка + текст в строке */
.badge{display:flex;gap:var(--sp-5);align-items:center;padding:var(--sp-6) 0;border-bottom:var(--border-w) solid var(--border);transition:padding var(--dur-base) var(--ease)}
.badge:hover{padding-left:var(--sp-3)}
.badge__ico{width:54px;height:54px;flex:none;display:grid;place-items:center;font-size:var(--fs-xl);background:var(--fg);color:var(--bg)}
.badge:hover .badge__ico{background:var(--holo);background-size:300%;color:var(--ink);animation:holoShift var(--dur-shimmer) linear infinite}
.badge__title{font-family:var(--f-wide);font-size:var(--fs-md);font-weight:var(--fw-semibold);margin-bottom:2px}
.badge__text{color:var(--fg-2);font-size:var(--fs-sm)}

/* 4.7 Tag — неинтерактивная метка */
.tag{display:inline-block;padding:var(--sp-2) var(--sp-3);border:var(--border-w) solid var(--fg);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* 4.8 Stat */
.stat{padding:var(--sp-7) var(--sp-5) 0 0}
.stat__num{font-family:var(--f-wide);font-weight:var(--fw-bold);font-size:var(--fs-3xl);line-height:1;margin-bottom:var(--sp-3)}
.stat__label{color:var(--fg-mute)}
.stat__text{color:var(--fg-2);font-size:var(--fs-sm);margin-top:var(--sp-2);max-width:240px}

/* 4.9 Heading */
.h2{font-family:var(--f-wide);font-weight:var(--fw-bold);font-size:var(--fs-4xl);line-height:1;letter-spacing:var(--ls-tight)}

/* ---------- 5. LOADER ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-content:center;justify-items:center;gap:var(--sp-7);transition:clip-path 1s var(--ease)}
.loader.is-done{clip-path:inset(0 0 100% 0)}
/* страховка: если JS не отработал, экран загрузки уходит сам через 4 с */
.loader{animation:loaderFailsafe 1s var(--ease) 4s forwards}
@keyframes loaderFailsafe{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.loader__mark{font-family:var(--f-wide);font-weight:var(--fw-black);font-size:clamp(64px,12vw,140px);line-height:1;display:flex;gap:.08em;color:var(--fg)}
.loader__mark span{display:inline-block;animation:xxPulse var(--dur-enter) var(--ease) infinite alternate}
.loader__mark span:last-child{animation:xxPulse var(--dur-enter) var(--ease) .25s infinite alternate,pearl 3s ease-in-out infinite alternate;background-image:var(--pearl-img);background-size:300% 100%,220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes xxPulse{from{transform:skewX(-12deg) translateY(4px);opacity:.5}to{transform:none;opacity:1}}
.loader__bar{width:min(320px,70vw);height:2px;background:var(--ink-3);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--holo);background-size:200%;transition:width var(--dur-fast) linear}
.loader__label{color:var(--fg-mute)}


/* ---------- 7. HEADER / NAV ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:50;isolation:isolate;display:flex;align-items:center;gap:var(--sp-8);padding:18px var(--pad);transition:background-color var(--dur-slow),padding var(--dur-slow),border-color var(--dur-slow);border-bottom:var(--border-w) solid transparent}
.header::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--pearl) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);opacity:0;transition:opacity var(--dur-slow)}
.header.is-scrolled{padding-block:var(--sp-3);border-color:var(--border)}
.header.is-scrolled::before,.page-inner .header::before{opacity:1}
.logo{display:flex;align-items:center;gap:var(--sp-3);color:var(--fg)}
.logo__icon{width:34px;height:34px}
.logo__text{font-family:var(--f-wide);font-weight:var(--fw-bold);font-size:15px;letter-spacing:.04em}
.logo__text b{font-weight:var(--fw-regular);margin-left:.35em}
.nav{display:flex;gap:6px;margin-left:auto}
.nav__link{position:relative;padding:var(--sp-2) 14px;font-weight:var(--fw-semibold);font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:6px}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--holo);background-size:200%;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease)}
.nav__link:hover::after,.nav__link.is-active::after,.nav__link[aria-expanded="true"]::after{transform:scaleX(1)}
.caret{width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-base)}
.nav__drop{position:relative}
.drop{position:absolute;top:calc(100% + 10px);left:-20px;display:flex;gap:var(--sp-10);padding:var(--sp-6) var(--sp-7);background:var(--bg);color:var(--fg);border-radius:var(--radius-md);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility var(--dur-base);min-width:380px}
.drop::before{content:"";position:absolute;inset:0;border-radius:var(--radius-md);padding:1px;background:var(--holo);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.nav__drop.is-open .drop{opacity:1;visibility:visible;transform:none}
.nav__drop.is-open .caret{transform:rotate(225deg)}
.drop__col{display:flex;flex-direction:column;gap:var(--sp-2)}
.drop__col .kicker{margin-bottom:6px}
.drop a{font-weight:var(--fw-semibold);transition:color var(--dur-fast),transform var(--dur-fast)}
.drop a:hover,.drop a:focus-visible{color:var(--cyan);transform:translateX(4px)}
.burger{display:none;width:40px;height:40px;position:relative}
.burger i{position:absolute;left:8px;right:8px;height:2px;background:var(--fg);transition:var(--dur-base)}
.burger i:first-child{top:15px}.burger i:last-child{top:23px}
.burger[aria-expanded="true"] i{background:var(--white)}
.burger[aria-expanded="true"] i:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:19px;transform:rotate(-45deg)}

/* ---------- 8. HERO ---------- */
.hero{position:relative;min-height:100svh;padding:140px var(--pad) var(--sp-20);display:flex;align-items:center;overflow:hidden;background:radial-gradient(120% 90% at 80% 20%,var(--white),var(--pearl) 60%)}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);opacity:.55}
.hero__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__lines .draw{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:1200;stroke-dashoffset:1200}
body.is-ready .hero__lines .draw{animation:draw 2.4s var(--ease) forwards}
body.is-ready .hero__lines .draw:nth-child(2){animation-delay:.3s}
body.is-ready .hero__lines .draw:nth-child(3){animation-delay:.6s}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto}
.hero__tag{display:inline-flex;align-items:center;gap:10px;padding:var(--sp-2) 14px;border:var(--border-w) solid var(--border);background:color-mix(in srgb,var(--white) 60%,transparent);margin-bottom:var(--sp-7)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--holo);background-size:300%;animation:holoShift 3s linear infinite,blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}
.hero__title{font-family:var(--f-wide);font-weight:var(--fw-black);font-size:var(--fs-display);line-height:.88;letter-spacing:var(--ls-tight);margin-bottom:44px}
.hero__title .line{display:block}
.outline{color:transparent;-webkit-text-stroke:2px var(--ink)}
.xx{font-size:.22em;vertical-align:top;margin-left:.2em;letter-spacing:.05em;display:inline-block;padding:.1em .25em;background:var(--ink);color:var(--white);transform:translateY(.4em)}
.glitch{display:inline-block;background-image:linear-gradient(105deg,var(--ink) 44%,#e9dff3 48%,#fff 50%,#d6eef0 52%,var(--ink) 56%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
body.is-ready .glitch{animation:inkSheen 6s var(--ease) 1s infinite}
@keyframes inkSheen{0%{background-position:100% 0}45%,100%{background-position:0% 0}}
.hero__row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-8);max-width:560px}
.hero__lead{max-width:520px;font-size:var(--fs-md);color:var(--fg-2)}
.hero__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hero__skin{position:absolute;right:max(var(--pad),calc(50% - 660px));top:50%;margin-top:-190px;z-index:1;perspective:900px}
.hero__scroll{position:absolute;left:50%;bottom:var(--sp-7);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--fg-mute);font-size:var(--fs-2xs)}
.hero__scroll i{width:1px;height:44px;background:linear-gradient(var(--ink),transparent);animation:scrollLine 1.8s var(--ease) infinite;transform-origin:top}
@keyframes scrollLine{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* skin inspect card */
.skin-card{position:relative;width:clamp(200px,18vw,260px);aspect-ratio:3/4;border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-2),inset 0 0 0 1px var(--alpha-ink-14);overflow:hidden;transform-style:preserve-3d;transition:transform var(--dur-instant) linear;animation:float var(--dur-float) ease-in-out infinite}
@keyframes float{50%{translate:0 -12px}}
.skin-card__body{position:relative;height:100%;padding:18px;display:flex;flex-direction:column}
.skin-card__id{font-size:var(--fs-2xs);color:var(--fg-mute)}
.skin-card__xx{font-family:var(--f-wide);font-weight:var(--fw-black);font-size:72px;line-height:1;margin-top:auto;letter-spacing:-.04em}
.skin-card__bars{display:flex;gap:var(--sp-1);margin:14px 0}
.skin-card__bars i{height:6px;flex:1;background:var(--ink)}
.skin-card__bars i:nth-child(2n){background:transparent;border:1px solid var(--ink)}
.skin-card__wm{font-family:var(--f-wide);font-weight:var(--fw-bold);font-size:var(--fs-xl);line-height:.95;letter-spacing:.02em}
.skin-card__float{position:absolute;right:18px;top:18px;font-size:var(--fs-2xs);padding:3px 6px;background:var(--ink);color:var(--white)}

/* ---------- 9. CHANNEL STRIP (под hero) ---------- */
.channels{background:var(--white);border-top:var(--border-w) solid var(--border)}
.channels__list{display:grid;grid-template-columns:repeat(7,1fr)}
.channels__item{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-2);border-right:var(--border-w) solid var(--border);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;transition:background-color var(--dur-base)}
.channels__item:last-child{border-right:0}
.channels__item:hover,.channels__item:focus-visible{background:var(--pearl)}
.channels__ico{width:28px;height:28px;display:grid;place-items:center;font-family:var(--f-wide);font-weight:var(--fw-black);font-size:var(--fs-sm);border:var(--border-w-strong) solid var(--ink)}
.channels__item:hover .channels__ico{background:var(--holo);background-size:300%;animation:holoShift var(--dur-shimmer) linear infinite}

/* ---------- 10. TICKER ---------- */
.ticker{background:var(--bg);color:var(--fg);overflow:hidden;padding:22px 0;border-block:1px solid var(--ink-3)}
.ticker__track{display:flex;gap:36px;width:max-content;animation:tick var(--dur-marquee) linear infinite;align-items:center}
.ticker span{font-family:var(--f-wide);font-weight:var(--fw-bold);font-size:clamp(22px,3vw,40px);text-transform:uppercase}
.ticker span:nth-of-type(3n+2){color:transparent;-webkit-text-stroke:1px var(--fg)}
.ticker em{font-style:normal;background-image:var(--pearl-img);background-size:300% 100%,220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-size:var(--fs-xl);animation:pearl var(--dur-pearl) ease-in-out infinite alternate}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- 11. SECTIONS ---------- */
.section{position:relative;padding:var(--sp-section) 0;overflow:hidden;background:var(--bg);color:var(--fg)}
.section--pearl{background:var(--pearl)}
.section__head{margin-bottom:clamp(48px,6vw,80px)}
.section__head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-10);flex-wrap:wrap}
.section__head--row p{max-width:380px;color:var(--fg-2)}

.split{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--sp-15);align-items:center}
.badges{display:flex;flex-direction:column;border-top:var(--border-w) solid var(--border)}

.why{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--border-w) solid var(--border);border-left:var(--border-w) solid var(--border)}

.reach__wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-15);align-items:center}
.reach__text p{margin:var(--sp-7) 0;max-width:520px;color:var(--fg-2);font-size:var(--fs-md)}
.reach__globe svg{width:100%;max-width:520px;display:block;margin:0 auto;overflow:visible}
.globe__base{fill:var(--white);stroke:var(--ink);stroke-width:1.5}
.globe__spin{fill:none;stroke:var(--ink);stroke-width:1;opacity:.45;transform-origin:200px 200px;animation:spinY var(--dur-orbit) linear infinite}
@keyframes spinY{to{transform:rotate(360deg)}}
.globe__orbit{fill:none;stroke-width:1.5;transform-origin:200px 200px;animation:spinY 9s linear infinite}
.globe__orbit--rev{animation-duration:16s;animation-direction:reverse;stroke:var(--ink)}
.globe__dot{fill:var(--ink)}
.globe__xx{font-family:var(--f-wide);font-weight:var(--fw-black);font-size:44px;fill:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(60px,8vw,110px);border-top:var(--border-w-strong) solid var(--fg)}

.mv{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}

.band{padding:clamp(60px,8vw,120px) 0;background:var(--pearl-2);text-align:center;position:relative;overflow:hidden}
.band .h2{margin-bottom:var(--sp-5)}
.band p{font-size:var(--fs-md);color:var(--fg-2)}
.band__xx{position:absolute;font-family:var(--f-wide);font-weight:var(--fw-black);font-size:28vw;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--border);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.features{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--sp-15);border-top:var(--border-w) solid var(--border)}
.feature{padding:var(--sp-6) var(--sp-5) 0 0;display:flex;flex-direction:column;gap:6px}
.feature b{font-family:var(--f-wide);font-weight:var(--fw-semibold)}
.feature span{color:var(--fg-2);font-size:var(--fs-sm)}

/* CTA */
.cta{position:relative;padding:clamp(100px,14vw,200px) 0;text-align:center;overflow:hidden;background:var(--white)}
.cta__holo{position:absolute;inset:-20% 0;background:radial-gradient(40% 60% at 20% 30%,color-mix(in srgb,var(--pink) 55%,transparent),transparent 70%),radial-gradient(45% 60% at 80% 70%,color-mix(in srgb,var(--cyan) 60%,transparent),transparent 70%),radial-gradient(35% 50% at 60% 20%,color-mix(in srgb,var(--lilac) 55%,transparent),transparent 70%),radial-gradient(35% 45% at 35% 85%,color-mix(in srgb,var(--lemon) 60%,transparent),transparent 70%);background-size:160% 160%;animation:ctaDrift var(--dur-orbit) ease-in-out infinite alternate}
@keyframes ctaDrift{0%{background-position:0% 0%}100%{background-position:100% 100%}}
.cta::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgb(0 0 0 / .035) 0 1px,transparent 1px 4px);pointer-events:none}
.cta__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cta__title{font-family:var(--f-wide);font-weight:var(--fw-black);font-size:clamp(30px,5vw,72px);line-height:1.02;letter-spacing:var(--ls-tight);margin-bottom:var(--sp-5)}
.cta p{font-size:var(--fs-md);margin-bottom:var(--sp-10);color:var(--fg)}

/* FOOTER */
.footer{background:var(--bg);color:var(--fg);padding-top:90px;overflow:hidden}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-10)}
.footer__note{color:var(--fg-mute);margin-top:14px}
.footer ul{display:flex;flex-direction:column;gap:var(--sp-2)}
.footer ul a{color:var(--gray-100);transition:color var(--dur-fast)}
.footer ul a:hover,.footer ul a:focus-visible{color:var(--cyan)}
.footer{container-type:inline-size}
/* ширина «SIMPLE TELECOM» в Russo One ≈ 9 × font-size → подгоняем под ширину подвала минус поля */
.footer__wm{padding:0 var(--pad);font-family:var(--f-wide);font-weight:var(--fw-black);font-size:calc((100cqi - 2 * var(--pad)) / 9.1);line-height:.8;white-space:nowrap;text-align:center;margin-top:var(--sp-20);background-image:var(--pearl-img);background-size:300% 100%,220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pearl 12s ease-in-out infinite alternate;opacity:.9}
.footer__bottom{display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;padding-block:var(--sp-7);border-top:var(--border-w) solid var(--border);color:var(--fg-mute);font-size:var(--fs-2xs)}
.footer__bottom nav{display:flex;gap:18px;flex-wrap:wrap}
.footer__bottom a:hover,.footer__bottom a:focus-visible{color:var(--fg)}


/* ---------- 12. CHANNEL PAGES ---------- */
.page-inner .header{border-color:var(--border)}
.crumbs{color:var(--fg-mute);margin-bottom:var(--sp-6);font-size:var(--fs-2xs)}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--fg)}
.ch-hero{position:relative;padding:140px 0 var(--sp-20);overflow:hidden;background:radial-gradient(120% 90% at 80% 20%,var(--white),var(--pearl) 60%)}
.ch-hero__wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;gap:var(--sp-15);align-items:center}
.ch-hero__text{container-type:inline-size;min-width:0}
.ch-hero__title{font-family:var(--f-wide);font-weight:var(--fw-black);font-size:min(150px,calc(100cqi / (var(--len,5) * .92)));line-height:.9;letter-spacing:var(--ls-tight);margin-bottom:var(--sp-3);white-space:nowrap}
.ch-hero__sub{font-family:var(--f-wide);font-weight:var(--fw-semibold);font-size:var(--fs-xl);margin-bottom:var(--sp-5)}
.ch-hero .hero__lead{margin-bottom:var(--sp-8)}
.ch-hero__device{display:flex;justify-content:center;perspective:1000px}

/* device mockup */
.device{position:relative;width:min(340px,100%);background:var(--white);border:var(--border-w-strong) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden;transform-style:preserve-3d;transition:transform var(--dur-instant) linear}
.device__bar{display:flex;justify-content:space-between;padding:var(--sp-2) var(--sp-4);background:var(--ink);color:var(--white);font-size:var(--fs-2xs)}
.chat__head,.call__who{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:var(--border-w) solid var(--border);position:relative}
.chat__avatar,.call__avatar{width:36px;height:36px;flex:none;display:grid;place-items:center;font-family:var(--f-wide);font-weight:var(--fw-black);background:var(--holo);background-size:300%;animation:holoShift var(--dur-shimmer) linear infinite;border-radius:var(--radius-full)}
.chat__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);min-height:260px;position:relative;background:var(--pearl)}
.bubble{align-self:flex-start;max-width:88%;padding:var(--sp-3) var(--sp-4);background:var(--white);border:var(--border-w) solid var(--border);border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 0;font-size:var(--fs-sm);line-height:1.45;position:relative}
.device .bubble{animation:bubbleIn var(--dur-slow) var(--ease) both}
.device .bubble:nth-child(2){animation-delay:.25s}
@keyframes bubbleIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
.bubble-media{height:120px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--holo);background-size:300%;animation:holoShift var(--dur-float) linear infinite;font-family:var(--f-wide);font-weight:var(--fw-black);font-size:48px}
.bubble-carousel{display:flex;gap:var(--sp-2);overflow:hidden}
.bubble-carousel__item{flex:0 0 42%;background:var(--white);border:var(--border-w) solid var(--border);border-radius:var(--radius-md);overflow:hidden;font-size:var(--fs-xs);display:flex;flex-direction:column}
.bubble-carousel__item i{height:70px;background:var(--holo);background-size:300%;animation:holoShift var(--dur-float) linear infinite}
.bubble-carousel__item:nth-child(2) i{animation-delay:-2s}
.bubble-carousel__item:nth-child(3) i{animation-delay:-4s}
.bubble-carousel__item b{padding:var(--sp-2) var(--sp-2) 0}
.bubble-carousel__item span{padding:var(--sp-1) var(--sp-2) var(--sp-2);color:var(--fg-mute)}
.bubble-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.bubble-actions span{padding:var(--sp-2) var(--sp-3);border:var(--border-w-strong) solid var(--ink);border-radius:var(--radius-full);font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;background:var(--white)}
.mail{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);position:relative}
.mail__subj{font-family:var(--f-wide);font-weight:var(--fw-semibold);font-size:var(--fs-md);line-height:1.2}
.mail__from{color:var(--fg-mute);font-size:var(--fs-2xs)}
.mail__hero{height:110px;margin:var(--sp-2) 0;display:grid;place-items:center;background:var(--ink);color:var(--white);font-family:var(--f-wide);font-weight:var(--fw-black);font-size:44px}
.mail .bubble{max-width:none;border-radius:var(--radius-md);background:var(--pearl);border:0}
.mail__btn{align-self:flex-start;margin-top:var(--sp-2);padding:var(--sp-3) var(--sp-5);background:var(--ink);color:var(--white);font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase}
.call{position:relative;padding-bottom:var(--sp-5)}
.call__who b{display:block}
.call__who .mono{font-size:var(--fs-2xs);color:var(--fg-mute)}
.wave{display:flex;align-items:center;gap:3px;height:80px;padding:0 var(--sp-5);margin:var(--sp-4) 0}
.wave i{flex:1;height:calc(var(--h) * 1%);background:var(--ink);border-radius:var(--radius-sm);animation:wave 1.2s var(--ease) infinite alternate;animation-delay:calc(var(--h) * -20ms)}
@keyframes wave{from{transform:scaleY(.35)}}
.call .bubble{margin:0 var(--sp-5);max-width:none;background:var(--pearl)}
.call__keys{display:flex;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-4)}
.call__keys span{width:44px;height:44px;display:grid;place-items:center;border:var(--border-w-strong) solid var(--ink);border-radius:var(--radius-full);font-family:var(--f-wide);font-weight:var(--fw-bold)}
.call__keys span:first-child{background:var(--holo);background-size:300%;animation:holoShift var(--dur-shimmer) linear infinite}

/* props, steps, faq, pager */
.ch-props{padding:0 0 var(--sp-section)}
.ch-props .stats{margin-top:0}
.stats--4{grid-template-columns:repeat(4,1fr)}
.stats--4 .stat__num{font-size:clamp(26px,3vw,40px)}
.why--4{grid-template-columns:repeat(4,1fr)}
.split--top{align-items:start}
.tags--lg{margin-top:var(--sp-8)}
.faq{border-top:var(--border-w) solid var(--border)}
.faq__item{border-bottom:var(--border-w) solid var(--border)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) 0;font-family:var(--f-wide);font-weight:var(--fw-semibold);font-size:var(--fs-md);line-height:1.3}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border:var(--border-w-strong) solid var(--fg);font-family:var(--f-mono);transition:transform var(--dur-base) var(--ease),background-color var(--dur-base)}
.faq__item[open] summary::after{transform:rotate(45deg);background:var(--holo);background-size:300%}
.faq__item p{padding:0 0 var(--sp-5);color:var(--fg-2);max-width:560px}
.channels__item.is-current{background:var(--ink);color:var(--white)}
.channels__item.is-current .channels__ico{border-color:var(--white)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);padding-block:var(--sp-12)}
.pager__link{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-6);border:var(--border-w) solid var(--border);border-radius:var(--radius-md);transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.pager__link b{font-family:var(--f-wide);font-size:var(--fs-2xl)}
.pager__link .mono{color:var(--fg-mute)}
.pager__link:hover,.pager__link:focus-visible{border-color:var(--fg);box-shadow:var(--shadow-1)}
.pager__link--next{text-align:right}

@media (max-width:1100px){
  .why--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .ch-hero__wrap{grid-template-columns:1fr}
  .stats--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .why--4{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager__link--next{text-align:left}
}


/* ---------- 13. MOTION FX (fx.js) ---------- */
/* typer */
.typer{display:inline-block;min-width:8.6ch;color:var(--fg);font-weight:var(--fw-semibold)}
.typer::after{content:"";display:inline-block;width:.6em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--holo);background-size:300%;animation:holoShift var(--dur-shimmer) linear infinite,caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}

/* directional reveal */
.reveal--left{transform:translateX(-60px)}
.reveal--right{transform:translateX(60px)}

/* phone stack */
.stack-sec{display:grid;grid-template-columns:1fr auto;gap:var(--sp-15);align-items:center}
.stack-sec__text .badges{margin-top:var(--sp-10)}
.stack-sec__device{display:flex;gap:var(--sp-6);align-items:center}
.stack-rail{display:flex;flex-direction:column;gap:var(--sp-5);font-size:var(--fs-2xs);color:var(--fg-mute)}
.stack-rail li{position:relative;padding-left:var(--sp-5);transition:color var(--dur-base)}
.stack-rail li::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border:var(--border-w-strong) solid var(--fg-mute);transition:background-color var(--dur-base),border-color var(--dur-base)}
.stack-rail li.is-on{color:var(--fg)}
.stack-rail li.is-on::before{border-color:var(--fg);background:var(--holo);background-size:300%}
.phone{position:relative;width:min(340px,78vw);aspect-ratio:9/18.5;display:flex;flex-direction:column;background:var(--pearl);border:10px solid var(--ink);border-radius:var(--radius-device);box-shadow:var(--shadow-2),0 0 0 1.5px var(--gray-400);overflow:hidden}
.phone .foil{z-index:5;opacity:.18}
.phone__island{position:absolute;top:8px;left:50%;width:90px;height:24px;margin-left:-45px;background:var(--ink);border-radius:var(--radius-full);z-index:6}
.phone__head{display:flex;align-items:center;gap:var(--sp-3);padding:44px var(--sp-4) var(--sp-3);background:var(--white);border-bottom:var(--border-w) solid var(--border)}
.phone__head b{display:block;font-size:var(--fs-sm)}
.phone__head .mono{font-size:var(--fs-2xs);color:var(--fg-mute)}
.phone__body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-3);background:repeating-linear-gradient(115deg,transparent 0 11px,var(--alpha-ink-14) 11px 12px),var(--pearl);background-blend-mode:normal;overflow:hidden}
.msg{position:relative;align-self:flex-start;max-width:86%;padding:var(--sp-3) var(--sp-3) var(--sp-5);background:var(--white);border:var(--border-w) solid var(--alpha-ink-14);border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 0;font-size:13px;line-height:1.4;box-shadow:0 6px 14px -8px rgb(0 0 0 / .25);opacity:0;transform:translateY(24px) scale(.94);transform-origin:left bottom;transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease),margin var(--dur-slow) var(--ease),max-height var(--dur-slow) var(--ease);max-height:0;margin-top:calc(var(--sp-2) * -1);padding-block:0;border-width:0}
.msg.is-shown{opacity:1;transform:none;max-height:260px;margin-top:0;padding-block:var(--sp-3) var(--sp-5);border-width:var(--border-w)}
.msg time{position:absolute;right:var(--sp-2);bottom:4px;font-family:var(--f-mono);font-size:10px;color:var(--fg-mute)}
.msg__ch{display:inline-block;margin-bottom:6px;padding:1px 6px;font-size:10px;background:var(--ink);color:var(--white)}
.msg__banner{position:relative;height:84px;margin:0 0 var(--sp-2);display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-3);background:var(--holo);background-size:300%;animation:holoShift var(--dur-float) linear infinite;font-family:var(--f-wide);font-weight:var(--fw-black)}
.msg__banner span{font-size:28px}
.msg__banner i{font-style:normal;font-size:22px;padding:2px 6px;background:var(--ink);color:var(--white)}
.msg__btn,.msg__btns span{display:block;margin-top:var(--sp-2);padding:6px;text-align:center;border:var(--border-w-strong) solid var(--ink);font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.msg__btns{display:flex;gap:6px}
.msg__btns span{flex:1}
.msg--out{align-self:flex-end;background:var(--ink);color:var(--white);border-radius:var(--radius-md) var(--radius-md) 0 var(--radius-md);transform-origin:right bottom}
.msg--out time{color:var(--gray-400)}
.phone__input{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);background:var(--white);border-top:var(--border-w) solid var(--border)}
.phone__input span{flex:1;padding:var(--sp-2) var(--sp-3);border:var(--border-w) solid var(--border);border-radius:var(--radius-full);font-size:var(--fs-2xs);color:var(--fg-mute)}
.phone__input i{width:30px;height:30px;display:grid;place-items:center;font-style:normal;font-size:12px;background:var(--ink);color:var(--white);border-radius:var(--radius-full)}

/* globe */
.globe{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto}
.globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.globe canvas:active{cursor:grabbing}
.globe__tag{position:absolute;left:0;top:var(--sp-4);display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);background:var(--ink);color:var(--white);font-size:var(--fs-2xs)}
.globe__tag i{width:8px;height:8px;border-radius:50%;background:var(--holo);background-size:300%;animation:holoShift 3s linear infinite,blink 1.4s steps(2) infinite}
.globe__hint{position:absolute;right:0;bottom:var(--sp-4);color:var(--fg-mute);font-size:var(--fs-2xs)}

@media (max-width:1100px){
  .stack-sec{grid-template-columns:1fr}
  .stack-sec__device{justify-content:center}
}
@media (max-width:560px){
  .stack-rail{display:none}
  .reveal--left,.reveal--right{transform:translateY(40px)}
}


/* ---------- 14. PRINTSTREAM ART: icons, SIM, decal ---------- */
.ico{width:24px;height:24px;display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;overflow:visible;
  stroke-dasharray:100;stroke-dashoffset:0}
/* стили внутри <use> сопоставляются с исходным <symbol> в спрайте */
.sprite .thin{stroke-width:1.2}
.sprite .holo{fill:url(#stHolo);stroke:none}
.ico--lg{width:40px;height:40px}
/* прорисовка линий: при появлении блока и при наведении */
@keyframes icoDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.reveal.is-in .ico,.is-drawn .ico,.channels__item:hover .ico,.badge:hover .ico,.card:hover .card__ico .ico{animation:icoDraw 1.1s var(--ease) both}
.reveal .ico{stroke-dashoffset:100}
.reveal.is-in .ico{stroke-dashoffset:0}
.channels__ico{width:40px;height:40px;border:0}
.channels__ico .ico{width:32px;height:32px}
.channels__item:hover .channels__ico{background:none;animation:none}
.channels__item.is-current .ico{color:var(--white)}
.badge__ico .ico{width:30px;height:30px}
.badge:hover .badge__ico .ico{color:var(--ink)}
.card__ico{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:auto;border:var(--border-w-strong) solid var(--fg);color:var(--fg);background:var(--surface)}
.card__ico .ico{width:28px;height:28px}
.card__top{gap:var(--sp-3)}
.stat__num--ico{height:clamp(34px,4.4vw,62px);display:flex;align-items:center}
.stat__num--ico .ico{width:clamp(34px,4.4vw,56px);height:clamp(34px,4.4vw,56px)}
.chat__avatar .ico{width:22px;height:22px;color:var(--ink)}
.ch-hero__kicker{display:inline-flex;align-items:center;gap:var(--sp-3)}
.ch-hero__kicker .ico{color:var(--fg)}

/* SIM illustration */
.skin-card--sim{width:clamp(220px,20vw,300px);aspect-ratio:3/4;background:none;box-shadow:none;overflow:visible}
.skin-card--sim .foil{inset:2.5% 6.7% 2.5% 6.7%;clip-path:polygon(0 0,76% 0,100% 16%,100% 100%,0 100%);opacity:.3;z-index:2}
.sim{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 30px 40px rgb(0 0 0 / .28))}
.sim__body{fill:var(--white);stroke:var(--ink);stroke-width:3}
.sim__panel{fill:var(--ink)}
.sim__wm{font-family:var(--f-wide);font-size:24px;fill:var(--white);letter-spacing:.04em}
.sim__xx{font-family:var(--f-wide);font-size:56px;fill:var(--ink)}
.sim__meta,.sim__float{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;fill:var(--gray-600)}
.sim__float{fill:var(--ink)}
.sim__bars rect{fill:var(--ink)}
.sim__bars .sim__bar--hollow{fill:none;stroke:var(--ink);stroke-width:1.5}
.sim__lines path,.sim__arrows,.sim__cross,.sim__contacts{fill:none;stroke:var(--ink);stroke-width:1.5}
.sim__contacts{stroke-width:2.5}
.sim__arrows{stroke-width:2.5;stroke-linecap:square}
.sim__lines path{stroke-dasharray:100;stroke-dashoffset:100}
.is-ready .sim__lines path,.is-drawn .sim__lines path{animation:icoDraw 2s var(--ease) forwards}
.sim__lines path:nth-child(2){animation-delay:.15s!important}
.sim__lines path:nth-child(3){animation-delay:.3s!important}
.sim__lines path:nth-child(4){animation-delay:.45s!important}
.sim__holo{animation:simHolo var(--dur-float) ease-in-out infinite alternate}
@keyframes simHolo{to{transform:translateY(-14px)}}
.sim__chip rect{animation:chipHue var(--dur-shimmer) linear infinite}
@keyframes chipHue{to{filter:hue-rotate(360deg)}}
.sim__sheen{animation:sheen 5s var(--ease) infinite;animation-delay:1.2s}
@keyframes sheen{0%{transform:skewX(-18deg) translateX(0)}35%,100%{transform:skewX(-18deg) translateX(560px)}}
.sim__arrows{animation:arrows 1.6s steps(3) infinite}
@keyframes arrows{0%{opacity:.25}50%{opacity:1}}
.sim__cross{transform-origin:240px 130px;animation:spinY 10s linear infinite}

/* decal pattern */
.section--decal::before{content:"";position:absolute;inset:0;background:url(img/pattern.svg) 0 0/240px 240px;opacity:.07;pointer-events:none}
.section--decal.section--ink::before,.section--decal.theme-ink::before{filter:invert(1);opacity:.09}
.section--decal>.container{position:relative}
.hero__grid{background-image:url(img/pattern.svg),linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:240px 240px,64px 64px,64px 64px}


/* ---------- 15. HUB · INDUSTRIES · API · FAQ · MODAL ---------- */
/* hub */
.hub{position:relative;padding:var(--sp-section) 0;background:var(--pearl-2);overflow:hidden}
.hub__head{text-align:center;max-width:760px;margin:0 auto clamp(40px,6vw,72px)}
.hub__head p{margin-top:var(--sp-5);color:var(--fg-2);font-size:var(--fs-md)}
.hub__stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(24px,8vw,140px);max-width:1080px;margin:0 auto}
.hub__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hub__wire{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 7;animation:wireFlow 1.2s linear infinite;opacity:.55}
.hub__wire--on{stroke:url(#hubGrad);stroke-width:2.5;stroke-dasharray:none;opacity:1}
@keyframes wireFlow{to{stroke-dashoffset:-22}}
.hub__pulse{fill:var(--ink)}
.hub__col{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--sp-4)}
.hub__col--left{align-items:flex-end}
.hub__col--right{align-items:flex-start}
.hub__chip{display:inline-flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);background:var(--white);border:var(--border-w-strong) solid var(--ink);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink);transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),background-color var(--dur-base)}
.hub__chip .ico{width:26px;height:26px}
.hub__chip:hover,.hub__chip:focus-visible,.hub__chip.is-live{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hub__chip.is-live{background:var(--holo);background-size:300%;animation:holoShift var(--dur-shimmer) linear infinite}
.hub__core{position:relative;z-index:2;width:clamp(170px,18vw,220px);aspect-ratio:1;display:grid;place-items:center}
.hub__ring{position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:50%;animation:ring 3s var(--ease) infinite;opacity:0}
.hub__ring:nth-child(2){animation-delay:1s}.hub__ring:nth-child(3){animation-delay:2s}
@keyframes ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.hub__card{position:relative;width:78%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-4);background:var(--white);border:var(--border-w-strong) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden;animation:float var(--dur-float) ease-in-out infinite}
.hub__card .mono{font-size:10px;position:relative}
.hub__card b{font-family:var(--f-wide);font-size:clamp(44px,5vw,64px);line-height:1;position:relative}
.hub__stat{display:flex;align-items:center;gap:6px}
.hub__stat i{width:8px;height:8px;border-radius:50%;background:var(--holo);background-size:300%;animation:holoShift 3s linear infinite,blink 1.4s steps(2) infinite}
.hub__stat em{font-style:normal;color:var(--ink);font-weight:var(--fw-semibold)}

/* industries */
.card--industry{min-height:260px}
.card--industry .card__title{font-size:var(--fs-xl);margin-top:var(--sp-12)}

/* api terminal */
.api{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--sp-15);align-items:center}
.api__text p{margin:var(--sp-6) 0 var(--sp-8);color:var(--fg-2);font-size:var(--fs-md);max-width:520px}
.api__steps{display:flex;flex-direction:column;gap:var(--sp-3)}
.api__steps li{display:flex;gap:var(--sp-4);align-items:center;padding:var(--sp-4) 0;border-top:var(--border-w) solid var(--border)}
.api__steps b{font-family:var(--f-wide);font-size:var(--fs-xl);background-image:var(--pearl-img);background-size:300% 100%,220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pearl var(--dur-pearl) ease-in-out infinite alternate}
.term{position:relative;background:#050506;border:var(--border-w) solid var(--border);border-radius:var(--radius-lg);box-shadow:0 40px 80px -30px rgb(0 0 0 / .8);overflow:hidden}
.term::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--holo);background-size:300%;animation:holoShift var(--dur-shimmer) linear infinite}
.term__bar{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-bottom:var(--border-w) solid var(--border)}
.term__dots{display:flex;gap:6px}
.term__dots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--gray-400)}
.term__tabs{display:flex;gap:2px;margin-left:auto}
.term__tabs button{padding:6px var(--sp-3);font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.08em;color:var(--fg-mute);border:var(--border-w) solid transparent}
.term__tabs button[aria-selected="true"]{color:var(--fg);border-color:var(--border);background:var(--ink-2)}
.term__code{margin:0;padding:var(--sp-5);min-height:250px;font-family:var(--f-mono);font-size:13px;line-height:1.7;color:var(--gray-100);white-space:pre-wrap;word-break:break-word}
.term__code .tk-k{color:var(--pink)}.term__code .tk-s{color:var(--lemon)}.term__code .tk-c{color:var(--gray-400)}.term__code .tk-u{color:var(--cyan)}
.term__code::after{content:"";display:inline-block;width:.6em;height:1.1em;vertical-align:-.2em;background:var(--holo);background-size:300%;animation:caret 1s steps(2) infinite}
.term__resp{margin:0 var(--sp-5) var(--sp-5);padding:var(--sp-4);border:var(--border-w) solid var(--border);border-left:3px solid var(--cyan);background:var(--ink-2);display:flex;flex-direction:column;gap:6px;animation:bubbleIn var(--dur-slow) var(--ease) both}
.term__resp .mono{font-size:var(--fs-2xs);color:var(--cyan)}
.term__resp code{font-family:var(--f-mono);font-size:12px;color:var(--gray-100);word-break:break-word}

/* faq home */
.faq__aside{margin-top:var(--sp-6);color:var(--fg-2)}
.link-btn{font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* submenu stagger */
.drop a{opacity:0;transform:translateY(6px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),color var(--dur-fast)}
.nav__drop.is-open .drop a,.drop a:focus-visible{opacity:1;transform:none}
.drop__col a:nth-of-type(1){transition-delay:.03s}.drop__col a:nth-of-type(2){transition-delay:.06s}.drop__col a:nth-of-type(3){transition-delay:.09s}
.drop__col a:nth-of-type(4){transition-delay:.12s}.drop__col a:nth-of-type(5){transition-delay:.15s}.drop__col a:nth-of-type(6){transition-delay:.18s}

/* modal */
.modal{margin:auto;padding:0;border:0;background:transparent;max-width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);width:100%;overflow:visible;color:var(--fg)}
.modal::backdrop{background:rgb(11 11 12 / .72);backdrop-filter:blur(6px)}
.modal[open]{animation:modalIn var(--dur-slow) var(--ease)}
.modal[open]::backdrop{animation:fadeIn var(--dur-base) ease}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.97)}}
@keyframes fadeIn{from{opacity:0}}
.modal__card{position:relative;max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(24px,4vw,44px);background:var(--white);border:var(--border-w-strong) solid var(--ink);border-radius:var(--radius-lg);box-shadow:8px 8px 0 var(--ink)}
.modal__card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--holo);background-size:300%;animation:holoShift var(--dur-shimmer) linear infinite}
.modal__card>.foil{opacity:.12}
.modal__close{position:absolute;right:var(--sp-4);top:var(--sp-4);width:40px;height:40px;display:grid;place-items:center;border:var(--border-w-strong) solid var(--ink);font-size:var(--fs-sm);z-index:2;transition:background-color var(--dur-fast),color var(--dur-fast)}
.modal__close:hover,.modal__close:focus-visible{background:var(--ink);color:var(--white)}
.modal__head,.form,.modal__done{position:relative}
.modal__title{font-family:var(--f-wide);font-size:clamp(28px,4vw,40px);line-height:1.05;margin-bottom:var(--sp-3);padding-right:var(--sp-12)}
.modal__lead{color:var(--fg-2);margin-bottom:var(--sp-6)}
.form{display:flex;flex-direction:column;gap:var(--sp-4)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.field{display:flex;flex-direction:column;gap:6px;border:0;min-width:0}
.field__label{font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--fg-mute)}
.field input,.field select,.field textarea{width:100%;padding:var(--sp-3);font:inherit;font-size:var(--fs-base);color:var(--fg);background:var(--pearl);border:var(--border-w-strong) solid var(--alpha-ink-14);border-radius:var(--radius-sm);transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:var(--white)}
.field__err{display:none;font-size:var(--fs-2xs);color:#a3171b}
.is-invalid input,.is-invalid+.field__err,.field.is-invalid .field__err{display:block}
.field.is-invalid input{border-color:#a3171b}
.form.is-consent-err .field__err--consent{display:block}
.chips-check{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chips-check label{position:relative;cursor:pointer}
.chips-check input{position:absolute;opacity:0;inset:0}
.chips-check span{display:inline-block;padding:var(--sp-2) var(--sp-3);border:var(--border-w-strong) solid var(--ink);font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;transition:background-color var(--dur-fast)}
.chips-check input:checked+span{background:var(--holo);background-size:300%}
.chips-check input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);color:var(--fg-2);cursor:pointer}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink);flex:none}
.form__submit{align-self:flex-start;margin-top:var(--sp-2)}
.modal__done{text-align:center;padding:var(--sp-8) 0}
.modal__done-xx{font-family:var(--f-wide);font-size:80px;line-height:1;background-image:var(--pearl-img);background-size:300% 100%,220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px var(--ink);animation:pearl 3s ease-in-out infinite alternate,popIn var(--dur-slow) var(--ease)}
@keyframes popIn{from{transform:scale(.5) rotate(-8deg);opacity:0}}
.modal__done h3{font-family:var(--f-wide);font-size:var(--fs-2xl);margin:var(--sp-4) 0 var(--sp-2)}
.modal__done p{color:var(--fg-2);margin-bottom:var(--sp-6)}
.modal__done a{text-decoration:underline}
body:has(.modal[open]){overflow:hidden}

/* parallax */
[data-parallax]{will-change:transform}

@media (max-width:1100px){
  .api{grid-template-columns:1fr}
}
@media (max-width:860px){
  .hub__stage{grid-template-columns:1fr;justify-items:center;gap:var(--sp-8)}
  .hub__col{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
  .hub__col--left{order:1}.hub__core{order:2}.hub__col--right{order:3}
  .hub__wires{display:none}
}
@media (max-width:560px){
  .form__grid{grid-template-columns:1fr}
  .hub__chip{padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2)}
}


/* ---------- 16. LANGUAGE SWITCH ---------- */
.lang{display:flex;border:var(--border-w-strong) solid var(--fg);font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.08em}
.lang>*{padding:6px var(--sp-2);line-height:1}
.lang [aria-current]{background:var(--fg);color:var(--bg)}
.lang a{transition:background-color var(--dur-fast)}
.lang a:hover,.lang a:focus-visible{background:var(--holo);background-size:300%;color:var(--ink)}
@media (max-width:860px){.lang{margin-left:auto}.lang+.header__cta+.burger,.lang~.burger{margin-left:var(--sp-3)}}


/* ---------- 17. COMPANY · CONTACT · NEWS ---------- */
.ch-hero__wrap--solo{grid-template-columns:minmax(0,860px)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card--contact{min-height:260px}
.card--contact .card__title{margin-top:var(--sp-10)}
.card--contact .card__link{text-transform:none;letter-spacing:0;font-size:var(--fs-sm)}
.empty{max-width:640px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);padding:var(--sp-12) var(--sp-6);background:var(--white);border:var(--border-w-strong) solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.empty__xx{font-family:var(--f-wide);font-size:96px;line-height:1;background-image:var(--pearl-img);background-size:300% 100%,220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px var(--ink);animation:pearl var(--dur-pearl) ease-in-out infinite alternate}
.empty p{color:var(--fg-2);max-width:480px}
@media (max-width:1100px){.cards--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards--4{grid-template-columns:1fr}}


/* ---------- 18. LEGAL PAGES ---------- */
.legal__wrap{display:grid;grid-template-columns:260px minmax(0,760px);gap:clamp(32px,6vw,80px);align-items:start}
.legal__aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:var(--sp-6)}
.legal__toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;border-left:var(--border-w-strong) solid var(--ink)}
.legal__toc a{display:block;padding:6px 0 6px var(--sp-4);font-size:var(--fs-sm);color:var(--fg-2);transition:color var(--dur-fast),background-color var(--dur-fast)}
.legal__toc a:hover,.legal__toc a:focus-visible{color:var(--fg);background:var(--white)}
.legal__other{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.legal__doc{background:var(--white);border:var(--border-w-strong) solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:clamp(24px,4vw,56px)}
.legal__draft{margin:0 0 var(--sp-5);padding:var(--sp-3) var(--sp-4);border:var(--border-w-strong) solid var(--ink);background-image:var(--pearl-img);background-size:300% 100%,220% 100%;animation:pearl var(--dur-pearl) ease-in-out infinite alternate;font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.legal__updated{color:var(--fg-mute);margin-bottom:var(--sp-8)}
.legal__sec{padding:var(--sp-6) 0;border-top:var(--border-w) solid var(--border)}
.legal__sec h2{font-family:var(--f-wide);font-size:var(--fs-xl);line-height:1.2;margin-bottom:var(--sp-4)}
.legal__sec p{color:var(--fg-2);margin-bottom:var(--sp-3);max-width:68ch}
mark.ph{background:#fff2b3;color:var(--ink);padding:0 .2em;border-bottom:2px dashed #b58a00;font-weight:var(--fw-semibold)}
.check a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:960px){.legal__wrap{grid-template-columns:1fr}.legal__aside{position:static}}

/* REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none}
.tilt.revealed{transition:transform var(--dur-instant) linear,box-shadow var(--dur-base),border-color var(--dur-base),background-color var(--dur-base);transition-delay:0s}
.hero__title .line.reveal{transform:translateY(60%) skewY(4deg);clip-path:inset(0 0 100% 0);transition:transform var(--dur-enter) var(--ease),clip-path var(--dur-enter) var(--ease),opacity var(--dur-slow);transition-delay:var(--d,0s)}
.hero__title .line.reveal.is-in{transform:none;clip-path:inset(-20% -10% -20% -10%)}

/* RESPONSIVE */
@media (hover:hover){
  .nav__drop:hover .drop{opacity:1;visibility:visible;transform:none}
  .nav__drop:hover .drop a{opacity:1;transform:none}
  .nav__drop:hover .caret{transform:rotate(225deg)}
}
@media (max-width:1100px){
  .hero__skin{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .channels__list{grid-template-columns:repeat(4,1fr)}
  .channels__item:nth-child(4){border-right:0}
  .channels__item:nth-child(-n+4){border-bottom:var(--border-w) solid var(--border)}
}
@media (max-width:860px){
  .nav{--fg:var(--white);--bg:var(--ink);position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:flex-start;padding:100px var(--pad);background:var(--ink);color:var(--white);gap:var(--sp-2);transform:translateY(-100%);visibility:hidden;transition:transform var(--dur-slow) var(--ease),visibility var(--dur-slow);z-index:-1}
  .nav.is-open{transform:none;visibility:visible}
  .nav__link{font-family:var(--f-wide);font-size:var(--fs-2xl);padding:6px 0}
  .nav__link::after{left:0;right:0}
  .drop{position:static;opacity:1;visibility:visible;transform:none;background:none;padding:6px 0 10px;min-width:0;gap:var(--sp-6)}
  .drop::before{display:none}
  .drop a{opacity:1;transform:none}
  .header__cta{display:none}
  .hero__lines{display:none}
  .burger{display:block;margin-left:auto}
  .split,.reach__wrap,.mv{grid-template-columns:1fr}
  .stats,.features{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cards,.why{grid-template-columns:1fr}
  .hero__actions .btn{flex:1}
  .outline{-webkit-text-stroke:1.5px var(--ink)}
  .channels__list{grid-template-columns:repeat(3,1fr)}
  .channels__item{border-bottom:var(--border-w) solid var(--border)}
  .channels__item:nth-child(4){border-right:var(--border-w) solid var(--border)}
  .channels__item:nth-child(3n){border-right:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .loader{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero__title .line.reveal{clip-path:none;transform:none}
  .hero__lines .draw{stroke-dashoffset:0}
  .reveal--left,.reveal--right{transform:none}
  .ico,.reveal .ico,.sim__lines path{stroke-dashoffset:0}
  .drop a{opacity:1;transform:none}
  [data-parallax]{transform:none!important}
  .msg{opacity:1;transform:none;max-height:none;margin-top:0;padding-block:var(--sp-3) var(--sp-5);border-width:var(--border-w)}
}