@font-face{font-family:'Fixel Text';font-weight:400;font-display:swap;src:url('/fonts/fixel-text-regular.woff2') format('woff2')}
@font-face{font-family:'Fixel Text';font-weight:500;font-display:swap;src:url('/fonts/fixel-text-medium.woff2') format('woff2')}
@font-face{font-family:'Fixel Text';font-weight:600;font-display:swap;src:url('/fonts/fixel-text-semibold.woff2') format('woff2')}
@font-face{font-family:'Fixel Text';font-weight:700;font-display:swap;src:url('/fonts/fixel-text-bold.woff2') format('woff2')}

:root{
  --ink:#0A0A0A; --ink-2:#2B2B30; --mute:#6B6B73; --mute-2:#9A9AA2; --line:rgba(10,10,20,.08); --line-2:rgba(10,10,20,.12);
  --paper:#FFFFFF; --wash:#F6F7F9;
  --steel:#3B7FA8; --wine:#A54463; --plum:#564B7D;
  --grad:linear-gradient(135deg,#3B7FA8,#A54463); --grad-h:linear-gradient(135deg,#2F6B90,#8C3752);
  --dark:#0E1018; --dark-2:#161A24; --dark-line:rgba(255,255,255,.09); --dark-mute:#9AA0AE;
  /* «дорога» тінь у дусі Stripe: дві м'які шарові тіні, холодний відтінок */
  --sh-xl:0 50px 100px -20px rgba(40,40,80,.25),0 30px 60px -30px rgba(0,0,0,.30);
  --sh-md:0 13px 27px -5px rgba(40,40,80,.20),0 8px 16px -8px rgba(0,0,0,.25);
  --sh-sm:0 2px 5px -1px rgba(40,40,80,.20),0 1px 3px -1px rgba(0,0,0,.25);
  --font:'Fixel Text',Verdana,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1180px; --gut:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-feature-settings:normal}
p{margin:0}
img{display:block;max-width:100%}
.wrap{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- вертикальні напрямні (як у Stripe) ---------- */
.guides{position:absolute;inset:0;pointer-events:none;z-index:0}
.guides .wrap{height:100%;display:grid;grid-template-columns:repeat(4,1fr)}
.guides i{border-left:1px dashed rgba(10,10,40,.06);height:100%}
.guides i:last-child{border-right:1px dashed rgba(10,10,40,.06)}
.guides i:first-child{border-left-style:solid}
main{position:relative}
main>section,main>div{position:relative;z-index:1}
.dirs{position:relative;z-index:5}

/* ---------- типографіка ---------- */
.kick{font:600 15px/1.4 var(--font);color:var(--steel);letter-spacing:0}
.h2{font:700 clamp(30px,3.6vw,46px)/1.12 var(--font);letter-spacing:-.025em;margin-top:12px;max-width:880px;text-wrap:pretty}
/* продовження заголовка — фірмовий градієнт (прохання 08.11 замість сірого) */
.h2 em{font-style:normal;background:linear-gradient(100deg,#3B7FA8,#564B7D 50%,#A54463);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:20px;font-size:19px;line-height:1.6;color:var(--mute);max-width:620px;text-wrap:pretty}
.sec{padding:128px 0}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;gap:4px;height:42px;padding:0 16px 0 20px;border-radius:999px;font:600 15px/1 var(--font);border:0;cursor:pointer;white-space:nowrap;transition:background .2s,box-shadow .2s,opacity .2s}
.btn .ar{display:inline-block;width:14px;height:10px;position:relative;margin-left:4px}
.btn .ar::before{content:"";position:absolute;left:0;top:4.25px;width:0;height:1.5px;background:currentColor;transition:width .15s var(--ease)}
.btn .ar::after{content:"";position:absolute;left:1px;top:1.5px;width:5px;height:5px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);transition:transform .15s var(--ease)}
.btn:hover .ar::before{width:9px}
.btn:hover .ar::after{transform:translateX(3px) rotate(45deg)}
.btn--pri{background:var(--grad);color:#fff;box-shadow:var(--sh-sm)}
.btn--pri:hover{background:var(--grad-h)}
.btn--ghost{background:transparent;color:var(--ink);padding-left:14px}
.btn--ghost:hover{opacity:.7}
.btn--light{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.btn--line{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);padding:0 18px}
.btn--line:hover{background:#fff}
.btn--sm{height:36px;font-size:14px;padding:0 12px 0 16px}
.cta-row{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center}
.cta-row span{font-size:14px;color:var(--mute)}
.dir__cta{margin-top:32px}
.tariff__go{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn--onDark{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.btn--onDark:hover{background:rgba(255,255,255,.16)}

/* ---------- шапка ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20}
.nav .wrap{display:flex;align-items:center;height:84px;gap:40px;max-width:none;padding:0 40px}
.logo{display:flex;align-items:center;gap:9px;font:700 22px/1 var(--font);letter-spacing:-.02em}
.logo svg{width:32px;height:32px}
.nav__links{display:flex;gap:32px;font-size:17px;font-weight:500;color:var(--ink-2)}
.nav__links a:hover{opacity:.6}
.nav__r{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav__r .btn{height:46px;font-size:16px;padding:0 20px 0 24px}
.nav__r .btn--line{padding:0 22px}
.nav__r .lang{display:flex;gap:2px;margin-right:6px;font-size:13px;font-weight:600}
.nav__r .lang a{padding:6px 8px;border-radius:8px;color:var(--mute)}
.nav__r .lang a.on{background:var(--ink);color:#fff}

/* ---------- хіро ---------- */
/* шапка як на нинішньому сайті (08.11, «візьми шапку з поточного сайту»): світлий пастельний
   фон зі скосом, два ромби по краях (stripe-pages.css .orbs), текст по центру, скрін під ним */
.hero{position:relative;padding-top:150px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,rgba(59,127,168,.16),rgba(86,75,125,.12),rgba(165,68,99,.14),rgba(59,127,168,.10),rgba(165,68,99,.16),rgba(59,127,168,.16));
  background-size:320% 320%;animation:heroFlow 18s ease-in-out infinite;clip-path:polygon(0 0,100% 0,100% 46%,0 78%)}
@keyframes heroFlow{0%{background-position:0% 40%}50%{background-position:100% 60%}100%{background-position:0% 40%}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}
.hero .wrap{position:relative;z-index:2}
.hero__txt{max-width:900px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero__pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-2);padding:6px 12px 6px 6px;border-radius:999px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(10,10,20,.08);backdrop-filter:blur(8px)}
.hero__pill b{white-space:nowrap;font-weight:600;color:#fff;background:var(--ink);border-radius:999px;padding:3px 9px;font-size:12px}
.hero h1{margin-top:26px;font:700 clamp(42px,6vw,80px)/1.02 var(--font);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.hero__sub{margin-top:26px;font-size:20px;line-height:1.55;color:var(--ink-2);max-width:640px;text-wrap:pretty}
.hero__cta{margin-top:34px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.hero__note{margin-top:18px;font-size:14px;color:var(--mute)}

/* скрін під заголовком, по центру; нижній край обрізається шапкою */
.hstage{position:relative;z-index:2;max-width:1120px;height:600px;margin:72px auto 0;padding:0 var(--gut)}
.win{position:absolute;border-radius:12px;background:#fff;box-shadow:var(--sh-xl);overflow:hidden}
.win__bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#F7F8FA;border-bottom:1px solid var(--line)}
.win__bar i{width:10px;height:10px;border-radius:50%;background:#DCDDE2}
.win__bar span{margin-left:14px;font:500 12px/1 var(--font);color:var(--mute-2);background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px 12px}
.win img{width:100%}
.hstage .win{left:var(--gut);right:var(--gut);top:0}
.phone{position:absolute;width:250px;border-radius:38px;padding:9px;background:#0E0E12;box-shadow:var(--sh-xl),inset 0 0 0 1.5px #2A2A30}
.phone img{border-radius:30px;width:100%;background:#fff}
.hstage .phone{left:-30px;top:150px;width:220px;z-index:2}
.hstage .toast{z-index:3}
.toast{position:absolute;display:flex;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:12px 16px 12px 12px;box-shadow:var(--sh-md);font-size:14px;font-weight:600;line-height:1.3;min-width:260px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.toast.on{opacity:1;transform:none}
.toast small{display:block;font-weight:400;color:var(--mute);font-size:13px;margin-top:2px}
.toast .ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--grad);color:#fff}
.toast .ic.g{background:#2F7A4F}
.toast .ic svg{width:17px;height:17px}

/* ---------- логотипи ---------- */
.logos{padding:8px 0 0}
.logos__cap{text-align:center;font-size:14px;color:var(--mute);padding-bottom:14px}

/* ---------- 08.11 правки: градієнтний фон вступу ---------- */
.glow{position:relative;overflow:hidden}
.glow::before{content:"";position:absolute;inset:-120px -10% 0;pointer-events:none;z-index:-1;
  background:radial-gradient(38% 30% at 12% 34%,rgba(59,127,168,.20),transparent 70%),
             radial-gradient(34% 28% at 88% 46%,rgba(165,68,99,.18),transparent 70%),
             radial-gradient(40% 30% at 55% 78%,rgba(86,75,125,.14),transparent 70%);
  filter:blur(20px);animation:glowMove 18s ease-in-out infinite alternate}
@keyframes glowMove{to{transform:translate3d(3%,2%,0) scale(1.06)}}
.intro{padding-top:88px;padding-bottom:16px}

/* ---------- інтеграції: кольорова стрічка, що рухається ---------- */
.marq{overflow:hidden;padding:8px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq__track{display:flex;gap:12px;width:max-content;animation:marq 60s linear infinite}
.marq--rev .marq__track{animation-direction:reverse;animation-duration:70s}
.marq:hover .marq__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.ipill{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-sm);font-size:15px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.ipill img{height:26px;width:26px;object-fit:contain;border-radius:6px}

/* ---------- плитки напрямків: 3 варіанти ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px}
/* бенто 08.11: подвійна рамка (лінія — біле поле — лінія), скрін у вікні браузера в правому нижньому куті */
.tile{position:relative;display:block;height:400px;border-radius:18px;overflow:hidden;padding:30px;background:linear-gradient(160deg,#fff 35%,#EEF3F8 75%,#F5E9EF);
  box-shadow:0 0 0 1px var(--line-2),0 0 0 8px rgba(255,255,255,.75),0 0 0 9px var(--line),var(--sh-md);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;border-radius:18px;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.tile:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line-2),0 0 0 8px rgba(255,255,255,.9),0 0 0 9px var(--line),var(--sh-xl)}
.tile:hover::after{opacity:1}
.tile--big{grid-column:span 2}
.tile__txt{position:relative;z-index:2;max-width:300px}
.tile__ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:var(--sh-sm)}
.tile__ic svg{width:20px;height:20px}
.tile h3{margin-top:18px;font:700 23px/1.2 var(--font);letter-spacing:-.02em}
.tile p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--mute)}
.tile__pr{margin-top:12px;font-size:14px;color:var(--mute)}
.tile__pr b{color:var(--ink);font-weight:600}
.tile__go{margin-top:18px;display:inline-flex;align-items:center;height:36px;padding:0 14px 0 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;transition:background .2s}
.tile:hover .tile__go{background:var(--grad)}
.tile__go .ar{display:inline-block;width:14px;height:10px;position:relative;margin-left:6px}
.tile__go .ar::before{content:"";position:absolute;left:0;top:4.25px;width:0;height:1.5px;background:currentColor;transition:width .15s var(--ease)}
.tile__go .ar::after{content:"";position:absolute;left:1px;top:1.5px;width:5px;height:5px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);transition:transform .15s var(--ease)}
.tile:hover .tile__go .ar::before{width:9px}
.tile:hover .tile__go .ar::after{transform:translateX(3px) rotate(45deg)}
.tile__shot{position:absolute;right:0;bottom:0;width:calc(100% - 300px - 60px);height:300px;border-radius:12px 0 0 0;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line-2),var(--sh-xl);transition:transform .5s var(--ease)}
.tile__shot .win__bar{height:28px}
.tile__shot img{width:880px;max-width:none}
.tile:hover .tile__shot{transform:translate(-6px,-6px)}
/* мала плитка: текст угорі, вікно — нижня половина */
.tile:not(.tile--big){display:flex;flex-direction:column;height:auto;min-height:400px;padding-bottom:0}
.tile:not(.tile--big) .tile__txt{max-width:none}
.tile:not(.tile--big) .tile__shot{position:relative;left:auto;right:auto;bottom:auto;flex:0 0 150px;width:auto;height:150px;margin:auto -30px 0 0}
.tile:not(.tile--big) .tile__shot img{width:620px}
.tile:not(.tile--big) .tile__go{display:none}

/* ---------- факти рядком ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px}
.fact{padding:0 24px 0 18px;position:relative}
.fact::before{content:"";position:absolute;left:0;top:4px;width:1px;height:22px;background:var(--grad)}
.fact b{display:block;font:700 34px/1.1 var(--font);letter-spacing:-.03em}
.fact span{display:block;margin-top:10px;font-size:15px;color:var(--mute);max-width:220px}

/* ---------- підменю напрямків ---------- */
.subnav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.subnav .wrap{display:flex;align-items:center;gap:4px;height:58px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a.t{position:relative;display:flex;align-items:center;gap:8px;height:58px;padding:0 14px;font-size:15px;font-weight:500;color:var(--mute);white-space:nowrap;transition:color .2s}
.subnav a.t svg{width:16px;height:16px}
.subnav a.t:hover,.subnav a.t.on{color:var(--ink)}
.subnav a.t::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(0);transition:transform .3s var(--ease)}
.subnav a.t.on::after{transform:scaleX(1)}
.subnav .btn{margin-left:auto;height:36px;font-size:14px}

/* ---------- напрямок ---------- */
.dir{padding:128px 0 0}
.dir .wrap{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.dir--flip .wrap{grid-template-columns:7fr 5fr}
.dir--flip .dir__txt{order:2}
.dir__ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:#fff;box-shadow:var(--sh-sm)}
.dir__ic svg{width:20px;height:20px}
.dir__txt .kick{margin-top:22px}
.dir__txt .h2{font-size:clamp(26px,2.6vw,34px);line-height:1.18}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:28px 28px;margin-top:40px}
.feat div{position:relative;padding-left:16px;font-size:15px;line-height:1.5;color:var(--mute)}
.feat div::before{content:"";position:absolute;left:0;top:3px;width:1px;height:18px;background:var(--grad)}
.feat b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.tariff{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tariff .t1{font-size:14px;color:var(--mute)}
.tariff .t1 b{display:block;font-size:17px;color:var(--ink);font-weight:600;margin-bottom:2px}
.tariff .lnk{display:inline-flex;align-items:center;font-weight:600;font-size:15px;color:var(--steel)}
.tariff .lnk .ar{display:inline-block;width:14px;height:10px;position:relative;margin-left:6px}
.tariff .lnk .ar::after{content:"";position:absolute;left:1px;top:1.5px;width:5px;height:5px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);transition:transform .15s var(--ease)}
.tariff .lnk:hover .ar::after{transform:translateX(3px) rotate(45deg)}

.dstage{position:relative;height:560px}
.dstage .win{top:0;left:0;width:820px}
.dir--flip .dstage .win{left:auto;right:0}
.dstage .phone{right:-40px;top:150px;width:220px}
.dir--flip .dstage .phone{right:auto;left:-40px}
.dstage .toast{z-index:3}
/* м'яке світло під екраном — замість кольорових плям */
.dstage::before{content:"";position:absolute;inset:60px -40px -20px 40px;background:radial-gradient(50% 50% at 50% 50%,rgba(59,127,168,.16),transparent 70%),radial-gradient(40% 40% at 80% 70%,rgba(165,68,99,.14),transparent 70%);filter:blur(30px);z-index:-1}

/* ---------- іграшка ---------- */
.toy{margin-top:56px;position:relative;border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--sh-xl)}
.toy canvas{display:block;width:100%;height:440px}
.toy__legend{position:absolute;left:20px;bottom:16px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--mute);pointer-events:none}
.toy__legend span{display:inline-flex;align-items:center;gap:6px}
.toy__legend i{width:8px;height:8px;border-radius:50%}

/* ---------- темна вставка ---------- */
.dark{background:var(--dark);color:#fff;padding:140px 0;overflow:hidden;position:relative}
.dark::before{content:"";position:absolute;left:-10%;right:-10%;top:-260px;height:520px;background:radial-gradient(40% 50% at 30% 50%,rgba(59,127,168,.35),transparent 70%),radial-gradient(35% 45% at 75% 50%,rgba(165,68,99,.30),transparent 70%);filter:blur(40px);pointer-events:none}
.dark .wrap{position:relative}
.dark .kick{color:#8FB8D3}
.dark .h2 em{background-image:linear-gradient(100deg,#8FB8D3,#B5A8E0 50%,#E58AA6)}
.dark .lead{color:var(--dark-mute)}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
.dcard{background:var(--dark-2);border-radius:14px;box-shadow:inset 0 0 0 1px var(--dark-line);padding:32px;position:relative;overflow:hidden}
.dcard h3{font:600 20px/1.3 var(--font);letter-spacing:-.01em}
.dcard p{margin-top:10px;color:var(--dark-mute);font-size:15px;line-height:1.6;max-width:440px}
.code{margin-top:28px;border-radius:10px;background:#0A0C12;box-shadow:inset 0 0 0 1px var(--dark-line);font:14px/1.75 var(--mono);color:#C9CED8;overflow-x:auto}
.code__bar{display:flex;gap:18px;padding:0 18px;height:38px;align-items:center;border-bottom:1px solid var(--dark-line);font:500 12px/1 var(--font);color:#7D8494}
.code__bar b{color:#fff;font-weight:500;position:relative;height:38px;display:flex;align-items:center}
.code__bar b::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad)}
.code pre{margin:0;padding:18px 20px;white-space:pre}
.code .c{color:#5E6573}.code .tg{color:#E58AA6}.code .a{color:#8FB8D3}.code .v{color:#B9D98C}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.steps div{font-size:14px;color:var(--dark-mute);line-height:1.5}
.steps em{font:600 12px/1 var(--mono);color:#8FB8D3;font-style:normal;display:block;margin-bottom:8px}
.steps b{display:block;color:#fff;font-weight:600;margin-bottom:3px}
.ilogos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
.ilogos span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;height:86px;border-radius:10px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--dark-line);font-size:12.5px;color:var(--dark-mute);transition:background .2s}
.ilogos span:hover{background:rgba(255,255,255,.07)}
.ilogos img{height:24px;width:auto;border-radius:5px}
.dcard--wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-bottom:0}
.dcard--wide .ph{position:relative;height:330px}
.dcard--wide .phone{width:210px;top:0;box-shadow:0 40px 80px -20px rgba(0,0,0,.6),inset 0 0 0 1.5px #2A2A30}
.dcard--wide .phone.p1{left:30px}
.dcard--wide .phone.p2{left:230px;top:50px}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:28px;border-top:1px solid var(--dark-line)}
.ladder div{padding:18px 16px 0 0}
.ladder b{display:block;font:700 24px/1.1 var(--font);letter-spacing:-.02em}
.ladder span{display:block;margin-top:6px;font-size:13px;color:var(--dark-mute);line-height:1.45}
.ladder i{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7D8494;font-style:normal;margin-bottom:10px}

/* ---------- ціни ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.plan{position:relative;background:linear-gradient(170deg,#fff 40%,#F3F6FA 80%,#F7EEF2);border-radius:20px;padding:30px 26px 28px;box-shadow:0 0 0 8px rgba(255,255,255,.8),0 0 0 9px var(--line),var(--sh-md);display:flex;flex-direction:column;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
/* жива градієнтна рамка — та сама, що в картки віджета (stripe-pages.css .wcard::before) */
.plan::after{content:"";position:absolute;inset:-2px;border-radius:22px;padding:2px;pointer-events:none;background:linear-gradient(120deg,#3B7FA8,#564B7D,#A54463,#3B7FA8);background-size:300% 300%;animation:wGrad 8s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.plan:hover{box-shadow:0 0 0 8px rgba(255,255,255,.9),0 0 0 9px var(--line),var(--sh-xl);transform:translateY(-3px)}
.plan h4{font:600 13px/1 var(--font);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.plan h3{margin-top:10px;font:700 22px/1.2 var(--font);letter-spacing:-.02em}
.plan .who{margin-top:8px;font-size:14px;color:var(--mute);min-height:42px;line-height:1.5}
.plan .pr{margin-top:22px;display:flex;align-items:baseline;gap:8px}
.plan .pr b{font:700 36px/1 var(--font);letter-spacing:-.03em}
.plan .pr span{font-size:13px;color:var(--mute);line-height:1.3}
.plan .seats{margin-top:8px;font-size:13px;color:var(--mute)}
.plan .btn{margin-top:22px;justify-content:center}
.plan ul{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:10px;font-size:14px;color:var(--ink-2)}
.plan li{position:relative;padding-left:24px;line-height:1.45}
.plan li::before{content:"";position:absolute;left:2px;top:4px;width:10px;height:5px;border:solid var(--steel);border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)}
.pnotes{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px}
.pnotes div{padding:0 20px 0 16px;position:relative;font-size:14px;color:var(--mute);line-height:1.5}
.pnotes div::before{content:"";position:absolute;left:0;top:3px;width:1px;height:18px;background:var(--grad)}
.pnotes b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:4fr 7fr;gap:64px}
.faq details{border-top:1px solid var(--line);padding:22px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;font-weight:600;font-size:18px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;color:var(--mute);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--mute);font-size:16px;line-height:1.65;max-width:640px}

/* ---------- фінальний заклик ---------- */
.final{padding:120px 0 128px;background:var(--wash);border-top:1px solid var(--line)}
.final .wrap{display:grid;grid-template-columns:6fr 6fr;gap:64px;align-items:center}
.final .hero__cta{margin-top:32px}
.final__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fcard{background:#fff;border-radius:14px;padding:26px;box-shadow:0 0 0 1px var(--line),var(--sh-sm)}
.fcard .dir__ic{width:36px;height:36px}
.fcard h3{margin-top:18px;font:600 17px/1.3 var(--font)}
.fcard p{margin-top:8px;font-size:14px;color:var(--mute);line-height:1.55}

/* Футер — як на нинішньому сайті (landing.css .footer) */
.footer{position:relative;padding:64px 0 24px;background:linear-gradient(180deg,#1A2E42 0%,#233B54 100%);color:#fff;isolation:isolate;overflow:hidden;font-size:14px}
.footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(50% 70% at 15% 0%,rgba(61,107,133,.28),transparent 65%),radial-gradient(45% 60% at 90% 100%,rgba(139,58,79,.18),transparent 70%)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:40px;margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.10)}
.footer__brand{max-width:320px}
.footer__logo{display:inline-block;margin-bottom:14px;font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff}
.footer__logo span{color:#A8C8E0}
.footer__about{margin:0 0 20px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.80)}
.footer__socials{display:flex;gap:8px}
.footer__social{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.10);transition:background .2s,color .2s,transform .15s}
.footer__social:hover{background:var(--grad);color:#fff;transform:translateY(-2px)}
.footer__app{margin-top:16px}
.footer__col-title{margin-bottom:16px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.footer__links,.footer__contacts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.footer__links{gap:10px}
.footer__links a{font-size:14.5px;color:rgba(255,255,255,.82);transition:color .15s}
.footer__links a:hover{color:#fff}
.footer__contacts{gap:12px;margin-bottom:20px}
.footer__contacts li{display:flex;align-items:center;gap:10px;font-size:14.5px}
.footer__c-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:rgba(255,255,255,.08);color:#A8C8E0;border:1px solid rgba(255,255,255,.10)}
.footer__contacts a{color:#fff;font-weight:500}
.footer__contacts a:hover{color:#A8C8E0}
.footer__c-hours{color:rgba(255,255,255,.68)}
.footer__cta{display:inline-flex;align-items:center;padding:10px 18px;border-radius:10px;background:var(--grad);color:#fff;font-weight:600;font-size:14px;transition:transform .15s,box-shadow .2s}
.footer__cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(61,107,133,.25)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.55)}
.footer__legal{display:flex;gap:18px;flex-wrap:wrap}
.footer__legal a{color:rgba(255,255,255,.55)}
.footer__legal a:hover{color:#fff}

/* ---------- поява при прокрутці ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- переваги: чого немає в інших ---------- */
.adv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px}
.acard{position:relative;border-radius:18px;padding:30px;background:linear-gradient(160deg,#fff 40%,#F3F6FA 80%,#F7EEF2);box-shadow:0 0 0 1px var(--line-2),0 0 0 8px rgba(255,255,255,.8),0 0 0 9px var(--line),var(--sh-md);overflow:hidden}
.acard--big{grid-column:span 2}
.acard h3{margin-top:18px;font:700 22px/1.25 var(--font);letter-spacing:-.02em}
.acard p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--mute)}
.acard__logo{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-sm)}
.acard__logo img{width:26px;height:26px}
.acard__note{margin-top:18px;display:inline-flex;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--plum);background:rgba(86,75,125,.08)}
.acard--shot{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;padding-right:0;padding-bottom:0}
.acard--shot .acard__txt{padding-bottom:30px}
.acard__img{align-self:end;border-radius:12px 0 0 0;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line-2),var(--sh-xl)}
.acard__img img{display:block;width:100%}
.acard__logos{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.acard__logos span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14px;font-weight:600}
.acard__logos img{width:22px;height:22px;object-fit:contain;border-radius:5px}
.acard__list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;color:var(--ink-2)}
.acard__list li{position:relative;padding-left:22px;line-height:1.45}
.acard__list li::before{content:"";position:absolute;left:2px;top:5px;width:10px;height:5px;border:solid var(--steel);border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)}
@media (max-width:1100px){.adv__grid{grid-template-columns:1fr 1fr}.acard--big,.adv__grid>.acard:first-child{grid-column:span 2}}
@media (max-width:1320px){.nav .wrap{gap:24px;padding:0 28px}.nav__links{gap:22px}.nav__r .lang{display:none}}
@media (max-width:1180px){.nav__lg{display:none}}
@media (max-width:400px){.logo{font-size:17px!important;gap:7px}.logo svg{width:26px!important;height:26px!important}.nav__r{gap:6px}.nav__burger{width:36px;height:36px}.nav__burger i:first-child{top:13px}.nav__burger i:last-child{top:21px}}
@media (max-width:960px){.nav__links{display:none}}@media (max-width:420px){.nav__lg{display:none}}
@media (max-width:720px){.adv__grid{grid-template-columns:1fr;gap:24px}.acard--big,.adv__grid>.acard:first-child{grid-column:auto}.acard--shot{grid-template-columns:1fr;padding-right:24px}.acard--shot .acard__txt{padding-bottom:0}.acard__img{margin-right:-24px}.acard{padding:24px}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.toast{transition:none}}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .hstage{height:480px}
  .hstage .phone{left:0}
  .dir .wrap,.dir--flip .wrap{grid-template-columns:1fr;gap:48px}
  .dir--flip .dir__txt{order:0}
  .dstage{margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));padding:0 var(--gut);height:520px}
  .dstage .win,.dir--flip .dstage .win{left:var(--gut);right:auto}
  .dstage .phone,.dir--flip .dstage .phone{left:auto;right:var(--gut)}
  .plans{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .dgrid,.dcard--wide{grid-template-columns:1fr}
  .final .wrap,.faq{grid-template-columns:1fr;gap:40px}
}
@media (max-width:720px){
  :root{--gut:16px}
  body{font-size:16px}
  .nav__r .btn--line{display:none}
  .nav .wrap{gap:8px;padding:0 var(--gut);height:72px}
  .logo{font-size:19px}  .logo svg{width:28px;height:28px}
  .nav__r .btn{height:36px;font-size:14px;padding:0 12px 0 16px}
  .hero__pill{font-size:13px}
  .hero{padding-top:118px}
  .hero__sub{font-size:18px}
  .hstage{margin-top:48px;height:340px}
  .hstage .win{right:auto;width:620px}
  .hstage .phone{left:auto;right:8px;top:90px;width:170px;border-radius:30px;padding:7px}
  .hstage .phone img{border-radius:24px}
  .hstage .toast{display:none}
  .tiles{grid-template-columns:1fr;gap:24px}
  .tile,.tile--big{grid-column:auto;height:auto;padding:24px 24px 0}
  .tile .tile__shot,.tile:not(.tile--big) .tile__shot{position:relative;left:auto;right:auto;width:auto;height:180px;margin:24px -24px 0 0}
  .tile .tile__go{display:inline-flex}
  .ipill{height:44px;font-size:14px}
  .facts,.pnotes{grid-template-columns:1fr 1fr;gap:32px 0}
  .sec,.dir{padding-top:88px}
  .sec{padding-bottom:88px}
  .feat{grid-template-columns:1fr;gap:20px}
  .dstage{height:400px}
  .dstage .win{width:600px}
  .dstage .phone,.dir--flip .dstage .phone{width:150px;top:120px;border-radius:28px;padding:7px}
  .dstage .phone img{border-radius:22px}
  .dstage .toast{display:none}
  .plans{grid-template-columns:1fr}
  .dark{padding:96px 0}
  .dcard{padding:24px}
  .steps,.ladder{grid-template-columns:1fr 1fr;gap:16px}
  .ilogos{grid-template-columns:repeat(3,1fr)}
  .dcard--wide .ph{height:280px}
  .dcard--wide .phone{width:160px}
  .dcard--wide .phone.p2{left:170px}
  .final__cards{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .subnav .btn{display:none}
  .toy canvas{height:340px}
}


/* ===== сторінки: меню напрямків, тарифи, напрямки ===== */
/* 08.11: спільне для всіх сторінок сайту (меню, внутрішні сторінки, тарифи). Підключається після stripe-site.css */

/* випадне меню «Напрямки» */
.dd{position:relative}
.dd__t{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.dd__t .chev{width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.dd:hover .chev,.dd:focus-within .chev{transform:rotate(225deg) translate(-2px,0)}
.dd__p{position:absolute;left:-24px;top:100%;margin-top:14px;width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1px var(--line),var(--sh-xl);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility .2s;z-index:50}
.dd__p::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd:hover .dd__p,.dd:focus-within .dd__p{opacity:1;visibility:visible;transform:none}
.dd__p a{display:grid;grid-template-columns:36px 1fr;gap:2px 12px;align-items:start;padding:12px;border-radius:10px;transition:background .15s}
.dd__p a:hover{background:var(--wash);opacity:1}
.dd__p .tile__ic{width:36px;height:36px;grid-row:span 2}
.dd__p .tile__ic svg{width:18px;height:18px}
.dd__p b{font-weight:600;font-size:15px;color:var(--ink)}
.dd__p small{font-size:13px;color:var(--mute);line-height:1.4}
.dd__p a.all{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:14px;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;font-size:14px;font-weight:600;color:var(--steel)}
.nav__links a.on,.nav__links .dd__t.on{color:var(--ink);font-weight:600}

/* хіро внутрішньої сторінки */
.hero--page h1{font-size:clamp(40px,5vw,64px);line-height:1.04}
.crumbs{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:500;color:var(--ink-2);margin-bottom:22px}
.crumbs a{opacity:.7}.crumbs a:hover{opacity:1}
.crumbs span{opacity:.4}
.hero--page h1{margin-top:20px}
.hero--short{padding-bottom:72px}
.hero--short::before{clip-path:polygon(0 0,100% 0,100% 70%,0 100%)}

/* «Що входить» — рамка з галочками */
.incl{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);border-radius:18px;background:#fff;
  box-shadow:0 0 0 1px var(--line-2),0 0 0 8px rgba(255,255,255,.75),0 0 0 9px var(--line),var(--sh-md);overflow:hidden}
.incl div{padding:26px 26px 26px 60px;position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px;color:var(--mute);line-height:1.5}
.incl div:nth-child(3n){border-right:0}
.incl div::before{content:"";position:absolute;left:24px;top:28px;width:20px;height:20px;border-radius:6px;background:var(--grad)}
.incl div::after{content:"";position:absolute;left:30px;top:33px;width:8px;height:4px;border:solid #fff;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)}
.incl b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}

/* ціна напрямку — широка картка в рамці */
.pwide{margin-top:56px;display:grid;grid-template-columns:5fr 7fr;border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px var(--line-2),0 0 0 8px rgba(255,255,255,.75),0 0 0 9px var(--line),var(--sh-xl)}
.pwide__l{padding:40px;background:linear-gradient(160deg,#fff 30%,#EEF3F8 75%,#F5E9EF);border-right:1px solid var(--line)}
.pwide__l h4{font:600 13px/1 var(--font);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.pwide__l h3{margin-top:12px;font:700 28px/1.2 var(--font);letter-spacing:-.02em}
.pwide__l .pr{margin-top:26px;display:flex;align-items:baseline;gap:10px}
.pwide__l .pr b{font:700 52px/1 var(--font);letter-spacing:-.04em}
.pwide__l .pr span{font-size:14px;color:var(--mute);line-height:1.35}
.pwide__l .seats{margin-top:12px;font-size:14px;color:var(--mute)}
.pwide__l .hero__cta{margin-top:28px}
.pwide__r{padding:40px}
.pwide__r h5{margin:0 0 18px;font-size:15px;font-weight:600}
.pwide__r ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;font-size:15px;color:var(--ink-2)}
.pwide__r li{position:relative;padding-left:24px;line-height:1.45}
.pwide__r li::before{content:"";position:absolute;left:2px;top:5px;width:10px;height:5px;border:solid var(--steel);border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)}
.pwide__r .alt{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--mute);line-height:1.6}
.pwide__r .alt a{color:var(--steel);font-weight:600}
.pwide + .pwide{margin-top:40px}

/* інші напрямки внизу сторінки */
.others{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.others .tile{height:auto}
.others .tile p{min-height:0}

/* ---------- сторінка тарифів ---------- */
.calc{margin-top:72px;display:grid;grid-template-columns:5fr 7fr;border-radius:18px;overflow:hidden;background:var(--dark);color:#fff;box-shadow:var(--sh-xl);position:relative}
.calc::before{content:"";position:absolute;inset:-40% -10% auto 30%;height:120%;background:radial-gradient(40% 40% at 40% 50%,rgba(59,127,168,.45),transparent 70%),radial-gradient(35% 35% at 70% 50%,rgba(165,68,99,.4),transparent 70%);filter:blur(40px);pointer-events:none}
.calc>*{position:relative}
.calc__l{padding:40px;border-right:1px solid var(--dark-line)}
.calc__l .kick{color:#8FB8D3}
.calc__l h3{margin-top:10px;font:700 28px/1.2 var(--font);letter-spacing:-.02em}
.calc__l p{margin-top:12px;color:var(--dark-mute);font-size:15px;line-height:1.6}
.calc__r{padding:40px;display:grid;gap:26px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:0;cursor:pointer;font:600 14px/1 var(--font);color:#C9CED8;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--dark-line);border-radius:999px;padding:10px 14px;transition:background .2s,color .2s}
.seg button.on{background:var(--grad);color:#fff;box-shadow:none}
.calc .lbl{display:block;font-size:13px;font-weight:600;color:var(--dark-mute);margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.range{display:flex;align-items:center;gap:16px}
.range input{flex:1;accent-color:#A54463}
.range output{font:700 22px/1 var(--font);min-width:90px;text-align:right}
.calc__sum{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--dark-line)}
.calc__sum b{font:700 54px/1 var(--font);letter-spacing:-.04em}
.calc__sum span{display:block;color:var(--dark-mute);font-size:14px;margin-top:8px;line-height:1.5}
.cmp{margin-top:56px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 0 0 8px rgba(255,255,255,.75),0 0 0 9px var(--line),var(--sh-md)}
.cmp__scroll{overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;font-size:15px;min-width:880px}
.cmp th,.cmp td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left;width:32%;color:var(--ink-2)}
.cmp thead th{background:#fff;vertical-align:bottom;padding-top:26px;padding-bottom:18px}
.cmp thead b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.cmp thead small{display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--mute)}
.cmp th.hl{background:linear-gradient(180deg,#E6EEF6,#F7F2F5);box-shadow:inset 0 3px 0 #3B7FA8}
.cmp th.hl b{color:var(--steel)}
.cmp tr.grp td{background:var(--wash);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);text-align:left}
.cmp .y{display:inline-block;width:20px;height:20px;border-radius:6px;background:var(--grad);position:relative;vertical-align:middle}
.cmp .y::after{content:"";position:absolute;left:6px;top:6px;width:8px;height:4px;border:solid #fff;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)}
.cmp .n{color:var(--mute-2)}
.cmp td.hl{background:rgba(59,127,168,.06)}

@media (max-width:1100px){
  .incl{grid-template-columns:1fr 1fr}
  .incl div:nth-child(3n){border-right:1px solid var(--line)}
  .incl div:nth-child(2n){border-right:0}
  .pwide,.calc{grid-template-columns:1fr}
  .pwide__l,.calc__l{border-right:0;border-bottom:1px solid var(--line)}
  .calc__l{border-bottom-color:var(--dark-line)}
  .others{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .incl{grid-template-columns:1fr}
  .incl div{border-right:0!important}
  .pwide__l,.pwide__r,.calc__l,.calc__r{padding:26px}
  .pwide__r ul{grid-template-columns:1fr}
  .others{grid-template-columns:1fr}
  .calc__sum b{font-size:42px}
}

/* ---------- ромби з нинішнього сайту (nisha.css, ідея Вікторії 16.08): два ромби
   йдуть назустріч, проходять один крізь одного й розходяться. Тут — поверх живого градієнта. */
.orbs{position:absolute;left:0;right:0;top:0;height:760px;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;width:480px;height:480px;top:110px;rotate:45deg;border-radius:3%;mix-blend-mode:multiply;filter:blur(2px);opacity:.62}
.orb-a{left:8%;background:linear-gradient(135deg,#E3AFBE,#EFC79C 55%,#DDB7CB);animation:orbL 16s cubic-bezier(.5,0,.5,1) infinite alternate}
.orb-b{right:8%;background:linear-gradient(135deg,#AFC6E4,#C4B0DE 55%,#A9CBDD);animation:orbR 16s cubic-bezier(.5,0,.5,1) infinite alternate}
/* розходяться за край → сходяться і проходять одне крізь одного за центр */
@keyframes orbL{from{translate:-230px 0}to{translate:190px 0}}
@keyframes orbR{from{translate:230px 0}to{translate:-190px 0}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}
@media (max-width:720px){.orb{width:300px;height:300px;top:80px}.orb-a{left:-20px;animation-name:orbLm}.orb-b{right:-20px;animation-name:orbRm}}
@keyframes orbLm{from{translate:-90px 0}to{translate:80px 0}}
@keyframes orbRm{from{translate:90px 0}to{translate:-80px 0}}

/* ---------- Віджет у тарифах: виділена картка з живою градієнтною рамкою ---------- */
.wcard{position:relative;margin-top:56px;display:grid;grid-template-columns:6fr 3fr 3fr;border-radius:20px;background:#fff;
  box-shadow:0 0 0 8px rgba(255,255,255,.8),0 0 0 9px var(--line),var(--sh-xl)}
.wcard::before{content:"";position:absolute;inset:-2px;border-radius:22px;padding:2px;z-index:0;pointer-events:none;
  background:linear-gradient(120deg,#3B7FA8,#564B7D,#A54463,#3B7FA8);background-size:300% 300%;animation:wGrad 8s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes wGrad{to{background-position:300% 0}}
.wcard>*{position:relative;z-index:1}
.wcard__l{padding:36px;border-right:1px solid var(--line);background:linear-gradient(160deg,#fff 30%,#EEF3F8 75%,#F5E9EF);border-radius:20px 0 0 20px}
.wcard__badge{position:absolute;top:36px;right:36px;font:600 12px/1 var(--font);color:#fff;background:var(--grad);padding:7px 11px;border-radius:999px}
.wcard__l h3{margin-top:18px;font:700 32px/1.1 var(--font);letter-spacing:-.03em}
.wcard__l p{margin-top:10px;font-size:15px;color:var(--mute);line-height:1.55;max-width:440px}
.wcard__l ul{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;font-size:14px;color:var(--ink-2)}
.wcard__l li{position:relative;padding-left:22px;line-height:1.45}
.wcard__l li::before{content:"";position:absolute;left:2px;top:4px;width:10px;height:5px;border:solid var(--steel);border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)}
.wcard__p{padding:36px 28px;display:flex;flex-direction:column}
.wcard__p--team{border-left:1px solid var(--line);background:linear-gradient(180deg,rgba(59,127,168,.05),rgba(165,68,99,.05));border-radius:0 20px 20px 0}
.wcard__p h4{font:600 13px/1 var(--font);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.wcard__p .pr{margin-top:18px;display:flex;align-items:baseline;gap:8px}
.wcard__p .pr b{font:700 44px/1 var(--font);letter-spacing:-.04em}
.wcard__p .pr span{font-size:13px;color:var(--mute);line-height:1.3}
.wcard__p .seats{margin-top:12px;font-size:13px;color:var(--mute);line-height:1.5}
.wcard__p .btn{margin-top:auto;justify-content:center}
.wcard__p .seats{margin-bottom:24px}
.plans__cap{margin-top:56px;font-size:15px;font-weight:600;color:var(--ink-2)}
.plans__cap + .plans{margin-top:20px}
@media (max-width:1100px){
  .wcard{grid-template-columns:1fr 1fr}
  .wcard__l{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);border-radius:20px 20px 0 0}
  .wcard__p--team{border-radius:0 0 20px 0}
}
@media (max-width:720px){
  .wcard{grid-template-columns:1fr}
  .wcard__l{padding:26px}
  .wcard__l ul{grid-template-columns:1fr}
  .wcard__badge{position:static;display:inline-block;margin-top:14px}
  .wcard__p{padding:26px}
  .wcard__p--team{border-left:0;border-top:1px solid var(--line);border-radius:0 0 20px 20px}
}


/* ===== поп-апи заявок з футера (fragments/landing/request-modals.html; правила скопійовані з landing.css) ===== */
.lead-modal,.req-modal{--text:var(--ink);--text-secondary:var(--mute);--bg:#F5F6F8;--surface:#fff;--border:var(--line-2);--error:#C0392B;--danger-light:#FDECEA;--success:#2E8B57;--font-body:var(--font);--primary:var(--steel)}
.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--sh-sm);justify-content:center}
.btn--primary:hover{background:var(--grad-h)}
.contact-form__row{display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;}
.contact-field{display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;}
.contact-field label{font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);}
.contact-field .req{color: var(--error);}
.contact-field input,
.contact-field select,
.contact-field textarea{padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 0.94rem; color: var(--text); background: var(--surface); transition: border-color .2s, box-shadow .2s; width: 100%;}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61, 107, 133, .12);}
.contact-field textarea{resize: vertical; min-height: 100px;}
.contact-radio{display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 0.92rem; color: var(--text); transition: border-color .2s, background .2s, box-shadow .2s;}
.contact-radio:hover{border-color: var(--primary);}
.contact-radio input[type="radio"]{width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; margin: 0;}
.contact-radio:has(input:checked){border-color: var(--primary); background: rgba(61, 107, 133, .06); box-shadow: 0 0 0 3px rgba(61, 107, 133, .08);}
.contact-consent{display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin: 6px 0 20px; cursor: pointer;}
.contact-consent input{flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); cursor: pointer;}
.contact-consent a{color: var(--primary); text-decoration: none; border-bottom: 1px solid rgba(61, 107, 133, .3);}
.contact-consent a:hover{border-bottom-color: var(--primary);}
.lead-modal{position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px;}
.lead-modal[hidden]{display: none;}
.req-modal{position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px;}
.req-modal[hidden]{display: none;}
.contact-field__label{font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);}
.contact-field__radios{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;}
.lead-modal__backdrop{position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); animation: lead-fade-in .18s ease-out;}
.lead-modal__body{position: relative; background: var(--bg, #fff); border-radius: 16px; padding: 40px 32px 32px; max-width: 440px; width: 100%; text-align: center; box-shadow: 0 24px 64px -12px rgba(15, 23, 42, .35); animation: lead-pop-in .22s cubic-bezier(.16,1,.3,1);}
.lead-modal__close{position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s;}
.lead-modal__close:hover{background: rgba(15, 23, 42, .06); color: var(--text);}
.lead-modal__close svg{width: 18px; height: 18px;}
.lead-modal__icon{width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(12, 123, 92, .12); color: var(--success, #0c7b5c);}
.lead-modal__icon svg{width: 32px; height: 32px;}
.lead-modal__title{margin: 0 0 10px; font-size: 1.5rem; font-weight: 700; color: var(--text);}
.lead-modal__text{margin: 0 0 24px; color: var(--text-secondary); line-height: 1.5;}
.lead-modal__text strong{color: var(--text); font-weight: 700;}
.lead-modal__ok{min-width: 160px;}
.req-modal__backdrop{position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); animation: lead-fade-in .18s ease-out;}
.req-modal__body{position: relative; background: var(--bg, #fff); border-radius: 16px; padding: 32px 32px 28px; max-width: 520px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 24px 64px -12px rgba(15, 23, 42, .35); animation: lead-pop-in .22s cubic-bezier(.16,1,.3,1);}
.req-modal__close{position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s;}
.req-modal__close:hover{background: rgba(15, 23, 42, .06); color: var(--text);}
.req-modal__close svg{width: 18px; height: 18px;}
.req-modal__title{margin: 0 0 6px; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text);}
.req-modal__lead{margin: 0 0 22px; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55;}
.req-form__submit{width: 100%; justify-content: center; margin-top: 4px;}
.req-form__submit svg{width: 16px; height: 16px;}
@keyframes lead-fade-in{from{opacity: 0;}to{opacity: 1;}}
@keyframes lead-pop-in{from{opacity: 0; transform: translateY(8px) scale(.96);}to{opacity: 1; transform: translateY(0) scale(1);}}
.req-form__error,
.contact-form__error{margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--danger-light); border: 1px solid var(--error); color: var(--error); font-size: 0.92rem;}
.req-modal--callback .req-modal__body{max-width: 640px; padding: 34px 36px 28px;}
.req-modal--callback .req-modal__title{font-size: 1.35rem; line-height: 1.3; margin: 0 0 22px;}
.cb-row{display: flex; gap: 0; margin-bottom: 6px; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color .15s, box-shadow .15s;}
.cb-row:focus-within{border-color: var(--text); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);}
.cb-phone{flex: 1; border: 0; padding: 14px 18px; font-size: 1rem; font-family: var(--font-body); color: var(--text); background: var(--surface); min-width: 0;}
.cb-phone:focus{outline: none;}
.cb-submit{border-radius: 0; padding: 14px 22px; font-size: 0.98rem; white-space: nowrap;}
.cb-hint{font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 16px 4px;}
.contact-consent--compact{font-size: 0.78rem; margin: 0;}
.contact-consent--compact input{width: 16px; height: 16px;}
@media (max-width: 560px){.cb-row{flex-direction: column;}.cb-submit{border-radius: 0;}}
@media (max-width: 900px){.contact-form__row{grid-template-columns: 1fr; gap: 0;}}
.field-err{display: none; font-size: 0.8rem; line-height: 1.35; color: var(--error);}
.field-err:not(:empty){display: block;}
.contact-field input.has-err,
.contact-field select.has-err,
.contact-field textarea.has-err{border-color: var(--error);}
.cb-row.has-err{border-color: var(--error);}
.contact-consent.has-err{color: var(--error);}
.hp{position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;}

/* ===== футер з fragments/landing/chrome :: footer ===== */
.footer .container{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.footer__col-title a{color:inherit}
.footer__col-title a:hover{color:#fff}

/* ===== мобільне меню (≤960px пункти ховаються в «бургер») ===== */
.nav__burger{display:none;position:relative;flex:none;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}
.nav__burger i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s var(--ease)}
.nav__burger i:first-child{top:15px}
.nav__burger i:last-child{top:23px}
.nav--open .nav__burger i:first-child{transform:translateY(4px) rotate(45deg)}
.nav--open .nav__burger i:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:960px){
  .nav__burger{display:block}
  .nav--open .nav__links{display:flex;position:absolute;top:68px;left:var(--gut);right:var(--gut);z-index:30;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100vh - 90px);overflow:auto;padding:10px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-xl)}
  .nav--open .nav__links>a,.nav--open .dd__t{padding:12px;font-size:16px;border-radius:10px}
  .nav--open .dd__t .chev{display:none}
  .nav--open .dd__p{position:static;margin:0 0 6px;width:auto;grid-template-columns:1fr;padding:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .nav--open .dd__p::before{display:none}
}

/* ---------- напрямки рядками на головній (варіант 5, 11.11.2026) ---------- */
.dl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-2)}
.dl{margin-top:52px;border-top:1px solid var(--line-2)}
.dl--w{--c:#3B7FA8;--t:rgba(59,127,168,.08)}
.dl--tr{--c:#6A4FA0;--t:rgba(106,79,160,.08)}
.dl--z{--c:#B8862A;--t:rgba(184,134,42,.10)}
.dl--all{--c:#A54463;--t:rgba(165,68,99,.08)}
.dl-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--c,var(--plum));color:#fff;box-shadow:var(--sh-sm)}
.dl-ic svg{width:20px;height:20px}
.dl-ic--grad{background:var(--grad)}
.dl-nm{display:flex;gap:14px;align-items:center;min-width:0}
.dl-nm b{display:block;font:700 19px/1.2 var(--font);letter-spacing:-.01em}
.dl-nm small{display:block;font-size:13px;color:var(--mute);margin-top:3px}
.dl-r{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr) minmax(0,190px) 36px;gap:24px;align-items:center;padding:24px 16px;border-bottom:1px solid var(--line-2);transition:background .2s}
.dl-r:hover{background:var(--t)}
.dl-ds{font-size:15px;line-height:1.5;color:var(--ink-2)}
.dl-pr{text-align:right;font-size:14px;color:var(--mute)}
.dl-pr b{color:var(--c);font-size:15px;font-weight:600}
.dl-go{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--c);transition:background .2s,color .2s}
.dl-go svg{width:16px;height:16px}
.dl-r:hover .dl-go{background:var(--c);color:#fff;box-shadow:none}
.dl-r:focus-visible{outline:2px solid var(--c);outline-offset:-2px}
/* розгорнутий рядок техпідтримки */
.dl-hd{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:36px;margin:-1px -16px 18px;padding:36px 0 0 36px;border-radius:22px;overflow:hidden;background:var(--dark);color:#fff;box-shadow:var(--sh-xl)}
.dl-hd::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 320px at 0% 100%,rgba(59,127,168,.38),transparent 70%),radial-gradient(520px 320px at 100% 0%,rgba(165,68,99,.32),transparent 70%)}
.dl-hd>*{position:relative}
.dl-hd .dl-nm b{font-size:26px;color:#fff}
.dl-hd .dl-nm small{color:var(--dark-mute)}
.dl-hd ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.dl-hd li{display:flex;gap:10px;font-size:15.5px;line-height:1.45;color:#E6E8EE}
.dl-hd li svg{width:18px;height:18px;flex:none;color:#7FD1A2;margin-top:2px}
.dl-hd__foot{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;margin-top:24px;padding-bottom:36px;font-size:14px;color:var(--dark-mute)}
.dl-hd__foot b{color:#fff;font-weight:600}
.dl-more{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:15px;color:#fff}
.dl-more:hover{opacity:.75}
.dl-hd__win{position:relative;align-self:end;height:340px;border-radius:12px 0 0 0;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line-2),var(--sh-xl)}
.dl-hd__win img{width:100%;height:calc(100% - 34px);object-fit:cover;object-position:30% top}
.dl-badge{position:absolute;right:18px;bottom:18px;display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:10px 14px 10px 10px;box-shadow:0 0 0 1px var(--line),var(--sh-md);font:600 13.5px/1.3 var(--font);color:var(--ink)}
.dl-badge small{display:block;font-weight:400;font-size:12.5px;color:var(--mute)}
.dl-badge__ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--grad);color:#fff;flex:none}
.dl-badge__ic svg{width:16px;height:16px}
@media (max-width:1100px){
  .dl-r{grid-template-columns:minmax(0,1fr) auto 36px;gap:12px 18px}
  .dl-ds{grid-column:1/-1;grid-row:2}
  .dl-hd{grid-template-columns:minmax(0,1fr);gap:0;padding:28px 0 0 24px}
  .dl-hd__txt{padding-right:24px}
  .dl-hd__win{height:280px}
}
@media (max-width:720px){
  .dl-hd{margin-inline:0}
  .dl-hd .dl-nm b{font-size:22px}
  .dl-r{grid-template-columns:minmax(0,1fr) 36px;padding:20px 8px}
  .dl-pr{grid-column:1/-1;grid-row:3;text-align:left}
  .dl-go{grid-column:2;grid-row:1}
  .dl-hd__win{height:230px}
  .dl-badge{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){.dl-r,.dl-go{transition:none}}