/* =========================================================
 * BGA — Homepage (improved)
 * Two art directions switchable via [data-dir]:
 *   editorial (default) — Fraunces serif display, warm paper
 *   brand               — BGA Gothic display, brighter blue + cyan
 * Density via [data-density], hero variant via [data-hero]
 * ========================================================= */

/* ---- Brand display face (for [data-dir=brand]) ---- */
@font-face{font-family:"BGA Gothic";src:url("fonts/GOTHIC.TTF") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BGA Gothic";src:url("fonts/GOTHICI.TTF") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"BGA Gothic";src:url("fonts/GOTHICB.TTF") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"BGA Gothic";src:url("fonts/GOTHICBI.TTF") format("truetype");font-weight:700;font-style:italic;font-display:swap}

:root{
  /* neutrals — warm editorial side (default) */
  --paper:#FAFAF6; --paper-2:#F3F1EA; --sand:#EFEBE4; --sand-deep:#E3DDD2;
  --ink-900:#0E1726; --ink-800:#1C2636; --ink-700:#3B4558;
  --ink-600:#586173; --ink-500:#828C9B; --ink-400:#AFB6C1;
  --ink-300:#CFD4DE; --ink-200:#E4E7EE; --ink-100:#EAEDF2; --ink-50:#F4F5F8;

  /* brand accents */
  --accent:#2151F5; --accent-600:#1B46D6; --accent-50:#EEF2FF;
  --cyan:#34B6E4; --cyan-soft:#D8F1FB;
  --brand-ink:#0E1726;

  /* semantic */
  --ok:#157A4A; --warn:#A15F0D; --err:#B6321E;

  /* type families */
  --ff-display:'Fraunces', ui-serif, Georgia, serif;
  --ff-head:'Inter Tight', ui-sans-serif, system-ui;
  --ff-body:'Inter', ui-sans-serif, system-ui;
  --ff-label:'Inter Tight', ui-sans-serif, system-ui;  /* eyebrows / micro labels */
  --display-w:400;        /* display weight */
  --display-em-w:300;     /* italic accent weight */
  --label-tr:.14em;       /* eyebrow tracking */

  /* radius & spacing */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:26px;
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:80px; --s-10:104px;

  /* shadows */
  --sh-1:0 1px 2px rgba(14,23,38,.05), 0 1px 1px rgba(14,23,38,.04);
  --sh-2:0 14px 38px -18px rgba(14,23,38,.22), 0 2px 8px -4px rgba(14,23,38,.08);
  --sh-lift:0 28px 70px -24px rgba(14,23,38,.28);
  --hair:1px solid var(--ink-100);

  /* section rhythm (comfortable default) */
  --sec-pad:96px;

  --max:1240px; --gutter:28px;
}

/* ===== BRAND DIRECTION OVERRIDES ===== */
[data-dir="brand"]{
  --paper:#F5F2EB; --paper-2:#EFEADD; --sand:#ECE6D6; --sand-deep:#DED5C0;
  --ink-900:#0A0F2C; --ink-800:#141A3A; --ink-700:#33405E;
  --ink-600:#515C78; --ink-500:#7C879D; --ink-400:#A7AFC0;
  --ink-300:#C7CDDA; --ink-200:#DEE2EC; --ink-100:#E7E2D6; --ink-50:#EEE9DC;

  --accent:#0057FF; --accent-600:#0039D1; --accent-50:#E5EEFF;
  --cyan:#16B6E8; --cyan-soft:#C9EFFB;
  --brand-ink:#0A0F2C;

  --ff-display:'BGA Gothic','Century Gothic','Futura',ui-sans-serif,system-ui;
  --ff-body:'Inter Tight','Inter',ui-sans-serif,system-ui;
  --ff-label:'IBM Plex Mono', ui-monospace, monospace;
  --display-w:700;
  --display-em-w:400;
  --label-tr:.2em;
}

/* density */
[data-density="compact"]{ --sec-pad:74px; }

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{font-family:var(--ff-body); background:var(--paper); color:var(--ink-800); line-height:1.55; -webkit-font-smoothing:antialiased; font-size:16px}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
button{font-family:inherit; cursor:pointer; border:none; background:none; padding:0}
::selection{background:var(--accent); color:#fff}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
@media (max-width:720px){ :root{ --gutter:20px } }

/* shared type utilities */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-label); font-weight:500; font-size:12px; letter-spacing:var(--label-tr); text-transform:uppercase; color:var(--ink-500)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent); flex-shrink:0}
.eyebrow .ix{font-variant-numeric:tabular-nums; color:var(--accent)}
[data-dir="brand"] .eyebrow{font-size:11px}

.t-h2{font-family:var(--ff-display); font-weight:var(--display-w); font-size:clamp(30px,3.3vw,46px); line-height:1.08; color:var(--ink-900); letter-spacing:-.012em}
.t-h2 em{font-style:italic; font-weight:var(--display-em-w); color:var(--accent)}
[data-dir="brand"] .t-h2{letter-spacing:-.02em}
[data-dir="brand"] .t-h2 em{font-style:italic}

.lede{color:var(--ink-600); font-size:17px; line-height:1.55}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ff-head); font-weight:500; font-size:14.5px; line-height:1; padding:13px 22px; border-radius:var(--r-md); transition:transform .15s ease, background .18s ease, border-color .18s, box-shadow .18s; border:1px solid transparent; white-space:nowrap}
.btn--primary{background:var(--ink-900); color:#fff; box-shadow:var(--sh-1)}
.btn--primary:hover{background:var(--accent); transform:translateY(-1px); box-shadow:var(--sh-2)}
.btn--secondary{background:#fff; color:var(--ink-900); border-color:var(--ink-200)}
.btn--secondary:hover{border-color:var(--ink-900)}
.btn--ghost{background:transparent; color:var(--ink-900); padding-inline:10px}
.btn--ghost:hover{background:var(--ink-50)}
.btn--link{background:transparent; color:var(--accent); padding:0; font-family:var(--ff-head); font-weight:500; display:inline-flex; gap:7px; align-items:center}
.btn--link .u{border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom:1px}
.btn--link:hover .u{border-bottom-color:var(--accent)}
.btn--lg{padding:16px 28px; font-size:15.5px}
.btn--sm{padding:9px 16px; font-size:13px}
.btn--on-dark{background:#fff; color:var(--ink-900)}
.btn--on-dark:hover{background:var(--accent); color:#fff}
.btn[disabled]{opacity:.4; pointer-events:none}

/* reveal animation */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* =========================================================
   HEADER
   ========================================================= */
.site-head{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(180%) blur(14px); border-bottom:var(--hair)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; padding-block:15px; gap:24px}
.site-head .l{display:flex; align-items:center; gap:38px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--ff-display); font-weight:var(--display-w); font-size:20px; color:var(--ink-900); letter-spacing:-.01em}
.brand img.m{width:36px;height:36px;display:block;object-fit:contain}
.site-head nav{display:flex; gap:24px; font-family:var(--ff-head); font-size:14px; color:var(--ink-700)}
.site-head nav a{position:relative; padding-block:4px; transition:color .15s}
.site-head nav a:hover{color:var(--ink-900)}
.site-head nav a.active{color:var(--ink-900)}
.site-head nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-16px; height:2px; background:var(--accent)}
.site-head .r{display:flex; align-items:center; gap:14px}
.site-head .lang{display:flex; gap:2px; font-family:var(--ff-label); font-size:11.5px; letter-spacing:.06em; color:var(--ink-500)}
.site-head .lang span,.site-head .lang a{padding:4px 8px; border-radius:6px}
.site-head .lang .on{background:var(--ink-900); color:#fff}
.site-head .lang .soon{color:var(--ink-400); cursor:default}
@media (max-width:920px){ .site-head nav{display:none} .site-head .lang{display:none} }

/* burger button — hidden on desktop */
.nav-burger{display:none; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:transparent; border:var(--hair); border-radius:var(--r-md); cursor:pointer; flex:none; -webkit-tap-highlight-color:transparent}
.nav-burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-900); transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s}
body.mnav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.mnav-open .nav-burger span:nth-child(2){opacity:0}
body.mnav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:920px){ .nav-burger{display:flex} }
@media (max-width:480px){ .site-head .r .btn--sm{display:none} }

/* slide-out drawer */
.mnav-scrim{position:fixed; inset:0; z-index:40; background:color-mix(in srgb,var(--ink-900) 46%, transparent); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .3s ease}
body.mnav-open .mnav-scrim{opacity:1; pointer-events:auto}
.mnav{position:fixed; top:0; right:0; bottom:0; z-index:50; width:min(86vw,340px); background:var(--paper); border-inline-start:var(--hair); box-shadow:-18px 0 50px -24px rgba(10,15,44,.4); transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; padding:18px 22px calc(22px + env(safe-area-inset-bottom)); overflow-y:auto}
body.mnav-open .mnav{transform:none}
.mnav-top{display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:var(--hair)}
.mnav-close{width:38px; height:38px; border:var(--hair); border-radius:var(--r-md); background:transparent; color:var(--ink-700); font-size:15px; cursor:pointer; display:grid; place-items:center}
.mnav-links{display:flex; flex-direction:column; padding:14px 0; gap:2px}
.mnav-links a{display:flex; align-items:center; gap:14px; padding:15px 6px; font-family:var(--ff-display); font-weight:var(--display-w); font-size:21px; color:var(--ink-900); letter-spacing:-.01em; border-bottom:var(--hair)}
.mnav-links a:last-child{border-bottom:none}
.mnav-links a .ix{font-family:var(--ff-label); font-size:11px; font-weight:400; letter-spacing:.1em; color:var(--accent)}
.mnav-foot{margin-top:auto; padding-top:18px; border-top:var(--hair); display:flex; flex-direction:column; gap:16px}
.mnav-lang{display:flex; gap:4px; font-family:var(--ff-label); font-size:12px; letter-spacing:.06em; color:var(--ink-500)}
.mnav-lang span,.mnav-lang a{padding:6px 12px; border-radius:7px; border:var(--hair)}
.mnav-lang .on{background:var(--ink-900); color:#fff; border-color:var(--ink-900)}
.mnav-lang .soon{color:var(--ink-400); cursor:default}
.mnav-foot .btn{width:100%}

/* =========================================================
   HERO
   ========================================================= */
.hp-hero{position:relative; overflow:hidden; padding:64px 0 64px; border-bottom:var(--hair);
  background:
    radial-gradient(70% 90% at 8% 0%, color-mix(in srgb,var(--accent) 7%, transparent), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, var(--cyan-soft), transparent 55%),
    var(--paper);
}
.hero-skyline{position:absolute; left:0; right:0; bottom:0; height:230px; width:100%; color:var(--ink-900); opacity:.05; pointer-events:none}
.hero-skyline svg{width:100%; height:100%; display:block}
.hp-hero .grid{position:relative; display:grid; grid-template-columns:1.12fr .88fr; gap:60px; align-items:center}
.hp-hero h1.hero-h1{margin-top:20px; font-family:var(--ff-display); font-weight:var(--display-w); font-size:clamp(40px,4.9vw,68px); line-height:1.02; letter-spacing:-.02em; color:var(--ink-900)}
.hp-hero h1.hero-h1 em{font-style:italic; font-weight:var(--display-em-w); color:var(--accent)}
[data-dir="brand"] .hp-hero h1.hero-h1{letter-spacing:-.03em; line-height:.98}
.hp-hero .sub{margin-top:22px; font-size:18px; line-height:1.55; color:var(--ink-600); max-width:540px}
.hp-hero .cta-row{margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.hp-hero .proof{margin-top:38px; display:grid; grid-template-columns:repeat(3,auto); gap:0; border-top:var(--hair); padding-top:24px; width:fit-content}
.hp-hero .proof > div{padding-right:34px; margin-right:34px; border-right:var(--hair); position:relative}
.hp-hero .proof > div:last-child{border-right:none; margin-right:0; padding-right:0}
.hp-hero .proof .k{font-family:var(--ff-display); font-weight:var(--display-w); font-size:32px; color:var(--ink-900); line-height:1; letter-spacing:-.01em}
.hp-hero .proof .k em{font-style:italic; color:var(--accent); font-weight:var(--display-em-w)}
.hp-hero .proof .lb{font-size:12px; color:var(--ink-500); margin-top:8px; max-width:18ch; line-height:1.35}

/* HERO VISUAL — shared frame */
.hero-visual{position:relative; aspect-ratio:1/1.06; max-height:540px}
.hero-stage{position:absolute; inset:0; border-radius:var(--r-2xl); overflow:hidden; border:var(--hair);
  background:
    radial-gradient(circle at 28% 18%, color-mix(in srgb,var(--cyan) 28%, transparent), transparent 52%),
    linear-gradient(165deg, var(--sand) 0%, var(--sand-deep) 100%);
  box-shadow:var(--sh-2);
}
.hero-stage::after{content:""; position:absolute; inset:0; background-image:radial-gradient(var(--ink-900) .6px, transparent .6px); background-size:18px 18px; opacity:.05}

/* variant visibility */
.hero-variant{display:none; position:absolute; inset:0}
[data-hero="portrait"] .hero-variant.v-portrait{display:block}
[data-hero="chat"]     .hero-variant.v-chat{display:block}
[data-hero="status"]   .hero-variant.v-status{display:block}

/* ── VARIANT 1 · ПОРТРЕТ ── */
.hv-portrait{position:absolute; inset:0}
.hv-portrait > img{width:100%;height:100%;object-fit:cover; object-position:center 26%}
.hv-portrait .scrim{position:absolute; inset:0; background:linear-gradient(178deg, rgba(10,15,44,.20) 0%, transparent 30%, transparent 48%, rgba(10,15,44,.78) 100%)}
.hv-portrait .pill{position:absolute; left:18px; top:18px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:color-mix(in srgb,#fff 88%, transparent); backdrop-filter:blur(8px); color:var(--ink-900); border-radius:999px; padding:8px 14px; font-family:var(--ff-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; box-shadow:var(--sh-1)}
.hv-portrait .pill .d{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.hv-portrait .cred{position:absolute; right:18px; top:18px; background:color-mix(in srgb,var(--ink-900) 80%, transparent); backdrop-filter:blur(8px); color:#fff; border-radius:var(--r-lg); padding:13px 15px; text-align:center; box-shadow:var(--sh-2); min-width:96px}
.hv-portrait .cred .k{font-family:var(--ff-display); font-weight:var(--display-w); font-size:38px; line-height:1; letter-spacing:-.02em}
.hv-portrait .cred .k em{font-style:italic; color:var(--cyan); font-weight:var(--display-em-w)}
.hv-portrait .cred .t{font-family:var(--ff-head); font-size:11px; line-height:1.3; color:rgba(255,255,255,.82); margin-top:7px}
.hv-portrait .tag{position:absolute; left:22px; right:22px; bottom:24px; color:#fff}
.hv-portrait .tag .rule{width:34px;height:3px;border-radius:2px;background:var(--cyan); margin-bottom:13px}
.hv-portrait .tag .nm{font-family:var(--ff-display); font-weight:var(--display-w); font-size:27px; line-height:1.05; letter-spacing:-.01em}
.hv-portrait .tag .rl{font-family:var(--ff-head); font-size:13.5px; color:rgba(255,255,255,.85); margin-top:5px}

/* ── VARIANT 2 · ДИАЛОГ ── */
.hv-chatpanel{position:absolute; left:26px; right:26px; top:26px; bottom:58px; background:#fff; border-radius:var(--r-xl); border:var(--hair); box-shadow:var(--sh-lift); display:flex; flex-direction:column; overflow:hidden}
.hv-chatpanel .head{display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:var(--hair)}
.hv-chatpanel .head img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.hv-chatpanel .head .s{display:flex; flex-direction:column; line-height:1.3}
.hv-chatpanel .head .s b{font-family:var(--ff-head); font-weight:600; font-size:13.5px; color:var(--ink-900)}
.hv-chatpanel .head .s i{font-style:normal; font-size:11.5px; color:var(--ok); display:flex; align-items:center; gap:5px}
.hv-chatpanel .head .s i .on{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.hv-chatpanel .head .chan{margin-inline-start:auto; display:flex; gap:5px}
.hv-chatpanel .head .chan span{font-family:var(--ff-label); font-size:9.5px; letter-spacing:.06em; padding:3px 7px; border-radius:6px; background:var(--accent-50); color:var(--accent)}
.hv-chatpanel .body{flex:1; padding:14px 16px; display:flex; flex-direction:column; gap:8px; background:linear-gradient(180deg,var(--ink-50),#fff); overflow:hidden}
.hv-chatpanel .body .day{align-self:center; font-family:var(--ff-label); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); margin-bottom:2px}
.hv-chatpanel .b{max-width:84%; font-size:13px; line-height:1.45; padding:9px 12px; border-radius:13px}
.hv-chatpanel .b.them{align-self:flex-start; background:var(--ink-100); color:var(--ink-800); border-bottom-left-radius:4px}
.hv-chatpanel .b.me{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px}
.hv-chatpanel .foot{display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:var(--hair)}
.hv-chatpanel .foot .ph{flex:1; font-size:12.5px; color:var(--ink-400)}
.hv-chatpanel .foot .send{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:15px}
.v-chat .hv-sla{position:absolute; left:26px; bottom:18px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--ff-head); font-size:12px; color:var(--ink-700)}
.v-chat .hv-sla .d{width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.v-chat .dis{position:absolute; right:26px; bottom:20px; white-space:nowrap; font-size:10px; color:var(--ink-400)}
.hv-chatpanel .head .s b{white-space:nowrap}

/* ── VARIANT 3 · СВОДКА ── */
.hv-board{position:absolute; left:26px; right:26px; top:30px; bottom:30px; background:#fff; border-radius:var(--r-xl); border:var(--hair); box-shadow:var(--sh-lift); padding:20px; display:flex; flex-direction:column}
.hv-board .top{display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:16px; border-bottom:var(--hair)}
.hv-board .top .lb{font-family:var(--ff-label); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500)}
.hv-board .top .mo{font-family:var(--ff-display); font-weight:var(--display-w); font-size:22px; color:var(--ink-900); margin-top:4px; letter-spacing:-.01em}
.hv-board .acc{display:flex; align-items:center; gap:9px}
.hv-board .acc img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.hv-board .acc span{font-family:var(--ff-head); font-size:12px; font-weight:600; color:var(--ink-900); line-height:1.25; text-align:right}
.hv-board .acc span i{font-style:normal; font-weight:400; font-size:10.5px; color:var(--ink-500)}
.hv-board .tasks{list-style:none; margin:0; padding:16px 0; display:flex; flex-direction:column; gap:12px; border-bottom:var(--hair)}
.hv-board .tasks li{display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--ink-700)}
.hv-board .tasks li b{font-weight:600; color:var(--ink-900); white-space:nowrap}
.hv-board .tasks li .st{margin-inline-start:auto; font-size:12px; color:var(--ink-500); white-space:nowrap}
.hv-board .tasks li .ck{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;flex-shrink:0}
.hv-board .tasks li .ck.ok{background:var(--ok); color:#fff}
.hv-board .tasks li .ck.pend{background:var(--ink-100); color:var(--warn)}
.hv-board .deadline{margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--accent-50); border-radius:var(--r-md); padding:13px 15px}
.hv-board .deadline .dl-k{font-family:var(--ff-label); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-600)}
.hv-board .deadline .dl-v{font-family:var(--ff-head); font-weight:600; font-size:13.5px; color:var(--ink-900); margin-top:3px}
.hv-board .deadline .dl-r{font-family:var(--ff-display); font-weight:var(--display-w); font-size:19px; color:var(--accent); letter-spacing:-.01em; white-space:nowrap}
.hv-board .board-foot{margin-top:auto; display:flex; align-items:center; gap:12px; padding-top:16px}
.hv-board .board-foot .pics{display:flex}
.hv-board .board-foot .pics img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-inline-start:-9px}
.hv-board .board-foot .pics img:first-child{margin-inline-start:0}
.hv-board .board-foot span{font-family:var(--ff-head); font-size:12px; color:var(--ink-600)}
.hv-board .board-foot span b{color:var(--ink-900); font-weight:600}

@media (max-width:920px){
  .hp-hero{padding:44px 0 52px}
  .hp-hero .grid{grid-template-columns:1fr; gap:40px}
  .hero-visual{aspect-ratio:4/3; max-height:none}
  .hero-skyline{height:150px}
}
@media (max-width:560px){
  .hp-hero .proof{grid-template-columns:1fr; width:100%; gap:14px}
  .hp-hero .proof > div{border-right:none; padding-right:0; margin-right:0; padding-bottom:14px; border-bottom:var(--hair)}
  .hp-hero .proof > div:last-child{border-bottom:none; padding-bottom:0}
  .hv-status{display:none}
}

/* =========================================================
   CLIENTS (merged trust strip + social proof)
   ========================================================= */
.hp-clients{padding:var(--sec-pad) 0; border-bottom:var(--hair); background:var(--paper-2)}
.hp-clients .cl-head{
  display:grid; grid-template-columns:1.35fr .9fr; gap:40px; align-items:end;
  padding-bottom:34px; margin-bottom:34px; border-bottom:var(--hair);
}
.hp-clients .cl-head .t-h2{margin:14px 0 0}
.hp-clients .cl-lede{font-size:15px; color:var(--ink-600); max-width:38ch; margin:0; padding-bottom:5px}

/* two clearly-differentiated lists */
.cl-body{display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; align-items:start}
.cl-body .lbl{font-family:var(--ff-label); letter-spacing:var(--label-tr); text-transform:uppercase; font-size:11px; color:var(--ink-500); margin-bottom:18px}

/* Jurisdictions — credential strip: stacked, dot-led, NOT pills */
.jr-strip{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.jr-strip li{
  font-family:var(--ff-head); font-weight:500; font-size:16px; color:var(--ink-800);
  letter-spacing:.01em; padding:9px 0 9px 20px; position:relative; border-bottom:var(--hair);
}
.jr-strip li:last-child{border-bottom:0}
.jr-strip li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}

/* Sectors — the single pill cloud */
.cl-sectors .cf-bars{display:flex; flex-wrap:wrap; gap:9px}

/* =========================================================
   WHY (UTP band)
   ========================================================= */
.hp-why{padding:var(--sec-pad) 0; border-bottom:var(--hair); background:var(--paper)}
.hp-why .head{max-width:760px; margin-bottom:46px}
.hp-why .head .t-h2{margin-top:16px}
.hp-why .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.why-card{position:relative; padding:30px 28px 28px; border:var(--hair); border-radius:var(--r-lg); background:var(--paper); display:flex; flex-direction:column; gap:13px; overflow:hidden; transition:transform .2s, box-shadow .2s}
.why-card:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.why-card .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--accent-50); color:var(--accent)}
.why-card .ic svg{width:23px;height:23px}
.why-card h3{font-family:var(--ff-head); font-weight:600; font-size:18px; color:var(--ink-900); margin:0; letter-spacing:-.005em}
.why-card p{margin:0; color:var(--ink-600); font-size:14.5px; line-height:1.55}
.why-card .ix{position:absolute; top:20px; inset-inline-end:22px; font-family:var(--ff-label); font-size:11px; letter-spacing:.1em; color:var(--ink-300)}
@media (max-width:900px){ .hp-why .grid{grid-template-columns:1fr} }

/* =========================================================
   SERVICES
   ========================================================= */
.hp-services{padding:var(--sec-pad) 0; background:var(--sand); border-bottom:1px solid var(--sand-deep)}
.hp-services .h{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:50px; align-items:end}
.hp-services h2.t-h2{max-width:540px}
.hp-services .h .sub{color:var(--ink-600); font-size:16px; max-width:440px}
.hp-services .grid6{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--sand-deep); border:1px solid var(--sand-deep); border-radius:var(--r-lg); overflow:hidden}
.svc{background:var(--paper); padding:32px 30px 28px; display:flex; flex-direction:column; gap:12px; transition:background .2s ease; color:inherit; position:relative}
.svc:hover{background:#fff}
.svc:hover .arrow{transform:translateX(4px); color:var(--accent)}
.svc .top{display:flex; align-items:flex-start; justify-content:space-between}
.svc .ic{width:38px; height:38px; color:var(--ink-900); transition:color .2s}
.svc .ic svg{width:100%;height:100%}
.svc:hover .ic{color:var(--accent)}
.svc .n{font-family:var(--ff-label); font-variant-numeric:tabular-nums; font-size:12px; color:var(--ink-400); letter-spacing:.1em}
.svc h3{font-family:var(--ff-head); font-weight:600; font-size:19px; color:var(--ink-900); letter-spacing:-.006em; margin:2px 0 0}
.svc p{margin:0; color:var(--ink-600); font-size:14px; line-height:1.5}
.svc .foot{margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between}
.svc .price{font-family:var(--ff-head); font-size:12.5px; color:var(--ink-500)}
.svc .price b{font-family:var(--ff-display); font-weight:var(--display-w); color:var(--ink-900); font-size:15px}
.svc .arrow{font-family:var(--ff-head); font-size:15px; color:var(--ink-400); transition:transform .2s, color .2s}
@media (max-width:900px){ .hp-services .h{grid-template-columns:1fr; align-items:start} .hp-services .grid6{grid-template-columns:1fr} }

/* =========================================================
   TEAM
   ========================================================= */
.hp-team{padding:var(--sec-pad) 0; border-bottom:var(--hair); background:var(--paper)}
.hp-team .h{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; margin-bottom:48px}
.hp-team .h .sub{color:var(--ink-600); margin-top:16px; font-size:16px; max-width:560px}
.hp-team .h .meta{font-family:var(--ff-label); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); text-align:end; line-height:1.8}
.hp-team .grid{display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:20px}
.tm{position:relative; display:flex; flex-direction:column; gap:0; border:var(--hair); border-radius:var(--r-lg); overflow:hidden; background:var(--paper); transition:transform .2s, box-shadow .2s}
.tm:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.tm .ph{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--ink-100)}
.tm .ph.mono{display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg, var(--sand) 0%, var(--ink-100) 100%)}
.tm .ph.mono .ini{font-family:var(--ff-display); font-weight:var(--display-w); font-size:58px; line-height:1; color:var(--accent); letter-spacing:.01em}
.tm .ph.mono .soon{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-family:var(--ff-label); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500)}
.tm .ph img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease}
.tm:hover .ph img{transform:scale(1.04)}
.tm .info{padding:16px 18px 18px}
.tm .nm{font-family:var(--ff-display); font-weight:var(--display-w); font-size:18px; color:var(--ink-900); letter-spacing:-.005em}
.tm .rl{font-family:var(--ff-head); font-size:13px; color:var(--ink-600); margin-top:3px}
.tm .say{margin-top:9px; font-family:var(--ff-body); font-size:12.5px; line-height:1.5; color:var(--ink-600); text-wrap:pretty}
.tm .tg{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-family:var(--ff-label); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500)}
.tm .tg::before{content:""; width:5px;height:5px;border-radius:50%; background:var(--accent)}
/* featured CEO */
.tm--lead{grid-row:span 2; flex-direction:column}
.tm--lead .ph{aspect-ratio:auto; flex:1; min-height:300px}
.tm--lead .info{padding:22px 24px 24px}
.tm--lead .nm{font-size:24px}
.tm--lead .rl{font-size:14px}
.tm--lead .quote{margin-top:14px; font-family:var(--ff-display); font-style:italic; font-weight:var(--display-em-w); font-size:16px; line-height:1.45; color:var(--ink-700)}
[data-dir="brand"] .tm--lead .quote{font-family:var(--ff-body); font-style:normal; font-size:14.5px}
.tm .badge{position:absolute; top:12px; inset-inline-start:12px; background:color-mix(in srgb,var(--ink-900) 78%, transparent); color:#fff; backdrop-filter:blur(6px); font-family:var(--ff-label); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px}
@media (max-width:900px){
  .hp-team .h{grid-template-columns:1fr} .hp-team .h .meta{text-align:start}
  .hp-team .grid{grid-template-columns:1fr 1fr}
  .tm--lead{grid-row:span 1; grid-column:span 2}
  .tm--lead .ph{min-height:auto; aspect-ratio:16/10}
}
@media (max-width:560px){ .hp-team .grid{grid-template-columns:1fr} .tm--lead{grid-column:span 1} }

/* full team directory (вариант B) */
.team-dir{display:grid; grid-template-columns:repeat(4,1fr); background:var(--paper); border:var(--hair); border-radius:var(--r-lg); overflow:hidden}
.td-cell{background:var(--paper); padding:18px 18px; display:flex; align-items:center; gap:13px; box-shadow:inset -1px -1px 0 var(--ink-100); transition:background .15s}
.td-cell > div:last-child{min-width:0; display:flex; flex-direction:column; justify-content:center}
.td-cell:hover{background:#fff}
.td-av{width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--ink-100)}
.td-mono{width:48px; height:48px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--sand) 0%,var(--ink-100) 100%); color:var(--accent); font-family:var(--ff-display); font-weight:var(--display-w); font-size:18px; letter-spacing:.01em}
.td-cell.lead .td-av{outline:2px solid var(--accent); outline-offset:2px}
.td-nm{font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:var(--ink-900); line-height:1.2}
.td-tag{font-family:var(--ff-label); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-500); margin-top:4px}
.td-tag.acc{color:var(--accent)}
.td-cell.tech .td-mono{background:linear-gradient(150deg,var(--ink-800) 0%,var(--ink-900) 100%); color:#fff; font-family:var(--ff-head); font-weight:600; font-size:16px}
.td-cell.tech .td-tag{color:var(--cyan)}
.td-cell.support{background:var(--paper-2)}
.td-cell.support .td-mono{background:linear-gradient(150deg,var(--sand) 0%,var(--sand-deep) 100%); color:var(--ink-700)}
.team-note{margin-top:22px; font-family:var(--ff-body); font-size:14.5px; line-height:1.55; color:var(--ink-600); max-width:680px; text-wrap:pretty}
.team-note b{color:var(--ink-900); font-weight:600}
.team-family{margin-top:18px; font-family:var(--ff-display); font-weight:var(--display-w); font-size:clamp(20px,2vw,27px); line-height:1.22; color:var(--ink-900); letter-spacing:-.012em; max-width:560px; text-wrap:pretty}
@media (max-width:960px){ .team-dir{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .team-dir{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .team-dir{grid-template-columns:1fr} }

/* =========================================================
   PRICING WIZARD
   ========================================================= */
.hp-wizard{padding:var(--sec-pad) 0; background:var(--paper-2); border-bottom:var(--hair)}
.hp-wizard .h{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:44px; align-items:end}
.hp-wizard h2.t-h2{max-width:520px}
.hp-wizard .sub{color:var(--ink-600); max-width:460px; font-size:16px}
.wiz-shell{background:#fff; border:var(--hair); border-radius:var(--r-xl); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; min-height:520px; box-shadow:var(--sh-2)}
.wiz-pane{padding:38px 42px; border-inline-end:var(--hair); display:flex; flex-direction:column}
.wiz-progress{display:flex; gap:8px; margin-bottom:30px}
.wiz-progress .b{flex:1; height:4px; background:var(--ink-100); border-radius:2px}
.wiz-progress .b.active{background:var(--ink-900)}
.wiz-progress .b.done{background:var(--accent)}
.wiz-step{display:none}
.wiz-step.is-active{display:flex; flex-direction:column; gap:20px; flex:1; animation:wizFade .35s ease}
@keyframes wizFade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.wiz-step .lb{font-family:var(--ff-label); font-size:11px; letter-spacing:.12em; color:var(--ink-500); text-transform:uppercase}
.wiz-step .q{font-family:var(--ff-display); font-weight:var(--display-w); font-size:clamp(22px,2.1vw,29px); line-height:1.16; color:var(--ink-900); letter-spacing:-.005em; margin:0}
.wiz-step .q em{font-style:italic; font-weight:var(--display-em-w); color:var(--accent)}
.wiz-step .hint{color:var(--ink-600); font-size:14px; margin:-6px 0 0}
.wiz-options{display:flex; flex-direction:column; gap:9px}
.wiz-option{display:flex; align-items:flex-start; gap:13px; padding:15px 17px; border:1px solid var(--ink-200); border-radius:var(--r-md); cursor:pointer; transition:border-color .18s, background .18s; background:#fff}
.wiz-option:hover{border-color:var(--ink-400)}
.wiz-option input{margin-top:3px; accent-color:var(--accent); flex-shrink:0}
.wiz-option.is-sel{border-color:var(--ink-900); background:var(--paper)}
.wiz-option .tt{font-family:var(--ff-head); font-weight:500; font-size:15px; color:var(--ink-900); display:block}
.wiz-option .ds{font-size:13px; color:var(--ink-600); margin-top:3px; line-height:1.45; display:block}
.wiz-nav{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:28px; border-top:var(--hair)}
.wiz-nav .counter{font-family:var(--ff-head); font-size:13px; color:var(--ink-500); font-variant-numeric:tabular-nums}
.wiz-nav .actions{display:flex; gap:10px}
.wiz-result{padding:38px 42px; background:var(--sand); display:flex; flex-direction:column; gap:18px; position:relative}
.wiz-result .placeholder{display:flex; flex-direction:column; justify-content:center; height:100%; gap:14px; color:var(--ink-500)}
.wiz-result .placeholder .ic{font-family:var(--ff-display); font-size:64px; line-height:.9; color:var(--ink-300); font-style:italic}
.wiz-result .placeholder .tx{max-width:280px; font-size:15px; line-height:1.5}
.wiz-card{display:none; flex-direction:column; gap:20px; flex:1}
.wiz-card.is-active{display:flex}
.wiz-card .eyebrow2{font-family:var(--ff-label); font-size:11px; letter-spacing:.14em; color:var(--accent); text-transform:uppercase}
.wiz-card .plan{font-family:var(--ff-display); font-weight:var(--display-w); font-size:clamp(26px,2.5vw,34px); line-height:1.08; color:var(--ink-900); letter-spacing:-.01em}
.wiz-card .why{font-size:14.5px; color:var(--ink-700); line-height:1.55}
.wiz-card .why b{color:var(--ink-900); font-weight:600}
.wiz-card .addons{display:flex; flex-direction:column; gap:10px; padding:18px 20px; background:#fff; border:var(--hair); border-radius:var(--r-md)}
.wiz-card .addons .tt{font-family:var(--ff-label); font-size:11px; letter-spacing:.12em; color:var(--ink-500); text-transform:uppercase}
.wiz-card .addons ul{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none}
.wiz-card .addons li{display:flex; justify-content:space-between; gap:16px; font-size:13.5px; color:var(--ink-700); line-height:1.4; padding-top:8px; border-top:var(--hair)}
.wiz-card .addons li:first-child{padding-top:0; border-top:none}
.wiz-card .addons li .n{color:var(--ink-900); font-weight:500; flex:1}
.wiz-card .addons li .p{font-family:var(--ff-head); color:var(--ink-600); white-space:nowrap; font-variant-numeric:tabular-nums}
.wiz-card .note{font-size:12.5px; color:var(--ink-500); line-height:1.5; padding:14px 0; border-top:var(--hair); border-bottom:var(--hair)}
.wiz-card .cta{display:flex; flex-direction:column; gap:10px}
.wiz-card .cta .subnote{font-size:12px; color:var(--ink-500); text-align:center; font-family:var(--ff-head)}
@media (max-width:900px){
  .hp-wizard .h{grid-template-columns:1fr}
  .wiz-shell{grid-template-columns:1fr; min-height:0}
  .wiz-pane{padding:28px 22px; border-inline-end:none; border-bottom:var(--hair)}
  .wiz-result{padding:28px 22px}
  .wiz-result .placeholder{display:none}
}

/* =========================================================
   PLANS COMPARISON
   ========================================================= */
.hp-plans{padding:var(--sec-pad) 0; background:var(--paper); border-bottom:var(--hair)}
.hp-plans .h{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:50px}
.hp-plans h2.t-h2{max-width:520px}
.hp-plans .h .sub{color:var(--ink-600); font-size:16px; max-width:480px; margin:0; align-self:end}
.hp-plans .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.plan-card{background:#fff; border:var(--hair); border-radius:var(--r-lg); padding:32px 28px; display:flex; flex-direction:column; gap:18px; position:relative; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
.plan-card:hover{transform:translateY(-2px); border-color:var(--ink-300); box-shadow:var(--sh-2)}
.plan-card.featured{background:var(--ink-900); border-color:var(--ink-900)}
.plan-card.featured h3{color:#fff}
.plan-card.featured .price{color:#fff}
.plan-card.featured .feat li{color:#cfd4de}
.plan-card.featured .feat li::before{color:var(--cyan)}
.plan-card.featured .note{color:var(--ink-400); border-top-color:rgba(255,255,255,.14)}
.plan-card.featured .lb{color:var(--ink-400)}
.plan-card .tag{position:absolute; top:-12px; inset-inline-start:28px; background:var(--accent); color:#fff; font-family:var(--ff-label); font-size:11px; letter-spacing:.08em; padding:5px 12px; border-radius:999px; text-transform:uppercase}
.plan-card .lb{font-family:var(--ff-label); font-size:11px; letter-spacing:.14em; color:var(--ink-500); text-transform:uppercase}
.plan-card h3{font-family:var(--ff-head); font-weight:500; font-size:20px; color:var(--ink-900); margin:0}
.plan-card .price{font-family:var(--ff-display); font-weight:var(--display-w); font-size:44px; line-height:1; color:var(--ink-900); font-variant-numeric:tabular-nums; margin-top:4px}
.plan-card .price .cur{font-size:18px; color:var(--ink-500); margin-inline-start:6px; font-family:var(--ff-head)}
.plan-card .price .per{font-size:14px; color:var(--ink-500); margin-inline-start:8px; font-family:var(--ff-head)}
.plan-card.featured .price .cur, .plan-card.featured .price .per{color:var(--ink-400)}
.plan-card .feat{display:flex; flex-direction:column; gap:12px; margin:6px 0 0; padding:0; list-style:none}
.plan-card .feat li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-700); line-height:1.5}
.plan-card .feat li::before{content:"→"; color:var(--accent); font-family:var(--ff-display); line-height:1.5; flex-shrink:0}
.plan-card .note{font-size:13px; color:var(--ink-500); line-height:1.5; margin-top:auto; padding-top:20px; border-top:var(--hair)}
.plan-card .cta{align-self:flex-start}
@media (max-width:960px){ .hp-plans .grid{grid-template-columns:1fr} .hp-plans .h{grid-template-columns:1fr} }

/* =========================================================
   ADD-ONS PRICE TABLE
   ========================================================= */
.hp-addons{padding:var(--sec-pad) 0; background:var(--sand); border-bottom:1px solid var(--sand-deep)}
.hp-addons .intro{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:42px; align-items:end}
.hp-addons .intro h2.t-h2{max-width:480px}
.hp-addons .intro .sub{color:var(--ink-600); font-size:16px; margin:0; align-self:end}
.pr-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
.pr-chips button{font-family:var(--ff-head); font-size:13px; padding:8px 16px; border-radius:999px; border:1px solid var(--ink-200); background:#fff; color:var(--ink-700); transition:all .15s ease}
.pr-chips button:hover{border-color:var(--ink-900); color:var(--ink-900)}
.pr-chips button.on{background:var(--ink-900); color:#fff; border-color:var(--ink-900)}
.pr-table{width:100%; background:#fff; border:var(--hair); border-radius:var(--r-lg); border-collapse:separate; border-spacing:0; overflow:hidden}
.pr-table thead th{text-align:start; font-family:var(--ff-label); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); padding:18px 26px; background:var(--paper); border-bottom:var(--hair)}
.pr-table tbody td{padding:20px 26px; border-bottom:var(--hair); font-size:15px; color:var(--ink-700); vertical-align:top; line-height:1.5}
.pr-table tbody tr:last-child td{border-bottom:none}
.pr-table tbody tr:hover td{background:var(--ink-50)}
.pr-table .name{font-family:var(--ff-head); font-weight:500; color:var(--ink-900); font-size:15.5px}
.pr-table .name .sub{display:block; font-weight:400; color:var(--ink-600); font-size:13.5px; margin-top:4px; font-family:var(--ff-body)}
.pr-table .price{font-family:var(--ff-display); font-variant-numeric:tabular-nums; color:var(--ink-900); font-size:18px; white-space:nowrap}
.pr-table .when{font-size:13.5px; color:var(--ink-500); line-height:1.5; max-width:290px}
.hp-addons .foot-note{font-size:13px; color:var(--ink-500); margin-top:18px; line-height:1.55}
@media (max-width:900px){
  .hp-addons .intro{grid-template-columns:1fr}
  .pr-table thead{display:none}
  .pr-table tbody td{display:block; padding:4px 20px; border-bottom:none}
  .pr-table tbody td.name{padding-top:18px}
  .pr-table tbody td.when{padding-bottom:18px}
  .pr-table tbody tr{display:block; border-bottom:var(--hair)}
  .pr-table tbody tr:last-child{border-bottom:none}
  .pr-table .name{font-size:16px}
  .pr-table .price{margin-top:2px; font-size:20px}
}

/* =========================================================
   PROCESS + CHAT (dark)
   ========================================================= */
.hp-process{padding:var(--sec-pad) 0; background:var(--ink-900); color:#fff; position:relative; overflow:hidden}
[data-dir="brand"] .hp-process{background:#070B22}
.hp-process::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 85% 0%, color-mix(in srgb,var(--accent) 30%, transparent), transparent 55%); opacity:.5; pointer-events:none}
.hp-process .h{max-width:680px; position:relative}
.hp-process .h .eyebrow{color:var(--ink-400)}
.hp-process .h .eyebrow .dot{background:var(--cyan)}
.hp-process .h h2.t-h2{color:#fff; margin-top:16px}
.hp-process .h h2 em{color:var(--cyan)}
.hp-process .h .sub{color:#c2c9d6; max-width:560px; margin-top:16px; font-size:17px}
.hp-process .body{position:relative; margin-top:50px; display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:stretch}
.hp-process .step{display:grid; grid-template-columns:54px 1fr; gap:18px; padding:22px 0; border-top:1px solid rgba(255,255,255,.12)}
.hp-process .step:first-child{border-top:none}
.hp-process .step .n{font-family:var(--ff-display); font-weight:var(--display-w); font-size:26px; color:var(--cyan); font-variant-numeric:tabular-nums; line-height:1}
.hp-process .step h4{font-family:var(--ff-head); font-weight:600; font-size:18px; color:#fff; margin:0}
.hp-process .step p{color:#aab1bd; font-size:14.5px; margin:6px 0 0}
.chatbox{background:#0b1326; border:1px solid rgba(255,255,255,.09); border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column; height:clamp(440px,58vh,560px); box-shadow:var(--sh-lift)}
[data-dir="brand"] .chatbox{background:#0c1230}
.chatbox .cb-head{padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:12px; font-size:13px; color:#cfd4de; font-family:var(--ff-head)}
.chatbox .cb-head .av{width:34px;height:34px;border-radius:50%;overflow:hidden;background:#222; flex-shrink:0}
.chatbox .cb-head .av img{width:100%;height:100%;object-fit:cover}
.chatbox .cb-head .s{display:flex; flex-direction:column; flex:1; min-width:0}
.chatbox .cb-head .s b{color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chatbox .cb-head .s i{font-style:normal; font-size:11px; color:#4ec88a; display:inline-flex; align-items:center; gap:5px}
.chatbox .cb-head .s i::before{content:""; width:6px; height:6px; border-radius:50%; background:#4ec88a; box-shadow:0 0 0 0 rgba(78,200,138,.6); animation:onlinePulse 2s infinite}
@keyframes onlinePulse{0%{box-shadow:0 0 0 0 rgba(78,200,138,.55)}70%{box-shadow:0 0 0 5px rgba(78,200,138,0)}100%{box-shadow:0 0 0 0 rgba(78,200,138,0)}}
.chatbox .cb-head .chan{margin-inline-start:auto; display:flex; gap:6px; font-family:var(--ff-label); font-size:10px; letter-spacing:.06em; color:var(--ink-400)}
.chatbox .cb-head .chan span{padding:3px 8px; border:1px solid rgba(255,255,255,.14); border-radius:999px}
.chatbox .cb-body{padding:20px; display:flex; flex-direction:column; gap:11px; flex:1 1 auto; min-height:0; overflow-y:auto; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent}
.chatbox .cb-body::-webkit-scrollbar{width:6px}
.chatbox .cb-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:99px}
.chatbox .msg{max-width:82%; padding:10px 14px; border-radius:13px; font-size:14px; line-height:1.45; opacity:0; transform:translateY(10px) scale(.98); transition:opacity .42s ease, transform .42s cubic-bezier(.2,.8,.3,1); will-change:opacity,transform}
.chatbox .msg.show{opacity:1; transform:none}
.chatbox .msg.them{background:rgba(255,255,255,.07); color:#cfd4de; align-self:flex-start; border-top-left-radius:3px}
.chatbox .msg.me{background:var(--accent); color:#fff; align-self:flex-end; border-top-right-radius:3px}
.chatbox .msg .meta{display:block; margin-top:5px; font-family:var(--ff-label); font-size:9.5px; letter-spacing:.04em; opacity:.55; text-align:end}
.chatbox .msg.me .meta .tick{color:#bcd2ff}
.chatbox .day{align-self:center; font-family:var(--ff-label); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); background:rgba(255,255,255,.05); padding:3px 11px; border-radius:99px; margin:2px 0; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease}
.chatbox .day.show{opacity:1; transform:none}
.chatbox .typing{align-self:flex-start; background:rgba(255,255,255,.07); border-radius:13px; border-top-left-radius:3px; padding:13px 15px; display:flex; gap:5px; opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease}
.chatbox .typing.show{opacity:1; transform:none}
.chatbox .typing span{width:6px; height:6px; border-radius:50%; background:#8a93a6; animation:typb 1.1s infinite ease-in-out}
.chatbox .typing span:nth-child(2){animation-delay:.18s}
.chatbox .typing span:nth-child(3){animation-delay:.36s}
@keyframes typb{0%,60%,100%{transform:translateY(0); opacity:.45}30%{transform:translateY(-4px); opacity:1}}
@keyframes msgIn{to{opacity:1; transform:none}}
.chatbox .cb-foot{padding:13px 20px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px; font-family:var(--ff-label); font-size:11px; letter-spacing:.04em; color:var(--ink-400)}
.chatbox .cb-foot .dot{width:6px;height:6px;border-radius:50%;background:#4ec88a}
@media (max-width:900px){ .hp-process .body{grid-template-columns:1fr; gap:36px} }

/* =========================================================
   FINAL FORM
   ========================================================= */
.hp-form{padding:var(--sec-pad) 0; border-bottom:var(--hair); background:var(--paper)}
.hp-form .grid{display:grid; grid-template-columns:1.05fr 1fr; gap:72px; align-items:start}
.hp-form h2.t-h2{font-size:clamp(32px,3.6vw,50px); line-height:1.04; max-width:540px}
.hp-form .sub{margin-top:20px; color:var(--ink-600); font-size:17px; max-width:480px}
.hp-form .list{margin-top:32px; display:flex; flex-direction:column; gap:14px; list-style:none; padding:0}
.hp-form .list li{display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--ink-700)}
.hp-form .list li .b{color:var(--accent); font-family:var(--ff-display); font-size:18px; line-height:1.3; flex-shrink:0}
.hp-form .contact-row{margin-top:34px; display:flex; gap:22px; flex-wrap:wrap; padding-top:24px; border-top:var(--hair)}
.hp-form .contact-row .c{display:flex; flex-direction:column; gap:2px}
.hp-form .contact-row .c--full{flex-basis:100%; padding-top:18px; border-top:var(--hair); gap:4px}
.hp-form .contact-row .c .k{font-family:var(--ff-label); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500)}
.hp-form .contact-row .c .v{font-family:var(--ff-head); font-size:14.5px; color:var(--ink-900)}
.hp-form .contact-row .c a.tg-link{text-decoration:none; border-bottom:1px solid var(--ink-200); width:fit-content; transition:color .15s, border-color .15s}
.hp-form .contact-row .c a.tg-link:hover{color:var(--accent); border-color:var(--accent)}
.form-card{background:#fff; border:var(--hair); border-radius:var(--r-xl); padding:34px; box-shadow:var(--sh-2)}
.form-card h3{font-family:var(--ff-display); font-weight:var(--display-w); font-size:25px; line-height:1.2; color:var(--ink-900); letter-spacing:-.01em; margin:0}
.form-card .sub2{color:var(--ink-500); font-size:14px; margin-top:8px}
.form-card .f{display:flex; flex-direction:column; gap:16px; margin-top:24px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-family:var(--ff-label); font-size:11px; letter-spacing:.06em; color:var(--ink-500); text-transform:uppercase; font-weight:500}
.field label .opt{color:var(--ink-400); font-weight:400; letter-spacing:.02em}
.field .input{font-family:var(--ff-body); font-size:15px; padding:13px 15px; border-radius:var(--r-md); border:1px solid var(--ink-200); background:#fff; color:var(--ink-900); transition:border-color .15s, box-shadow .15s}
.field .input:focus{outline:none; border-color:var(--ink-900); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%, transparent)}
.field .textarea{resize:vertical; min-height:84px; line-height:1.5}
.field .select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23667' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer}
.phone-row{display:grid; grid-template-columns:minmax(120px,0.85fr) 1.6fr; gap:10px}
.check-group{display:flex; flex-direction:column; gap:11px; margin-top:2px}
.check{display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none}
.check input{position:absolute; opacity:0; width:0; height:0}
.check .box{width:21px; height:21px; flex-shrink:0; border:1px solid var(--ink-300); border-radius:6px; background:var(--ink-50); display:grid; place-items:center; transition:background .12s, border-color .12s}
.check .box::after{content:""; width:11px; height:7px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) scale(0); transform-origin:center; margin-top:-2px; transition:transform .12s ease-out}
.check input:checked ~ .box{background:var(--accent); border-color:var(--accent)}
.check input:checked ~ .box::after{transform:rotate(-45deg) scale(1)}
.check input:focus-visible ~ .box{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%, transparent)}
.check .lab{font-family:var(--ff-body); font-size:15px; color:var(--ink-800); text-transform:none; letter-spacing:0; font-weight:400; line-height:1.3}
.form-card .policy{font-size:12.5px; color:var(--ink-500); line-height:1.5; margin-top:4px}
.form-card .policy a{color:var(--ink-700); text-decoration:underline}
@media (max-width:900px){ .hp-form .grid{grid-template-columns:1fr; gap:40px} }
@media (max-width:480px){ .phone-row{grid-template-columns:1fr} }

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{background:var(--ink-900); color:#aab1bd; padding:68px 0 36px}
[data-dir="brand"] .site-foot{background:#070B22}
.site-foot .grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:46px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08)}
.site-foot h5{color:#fff; font-family:var(--ff-label); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px}
.site-foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px}
.site-foot ul a:hover{color:#fff}
.site-foot .brand{display:flex; align-items:center; gap:10px; font-family:var(--ff-display); font-weight:var(--display-w); font-size:22px; color:#fff; margin-bottom:16px}
.site-foot .brand img.m{width:34px;height:34px;display:block;object-fit:contain}
.site-foot .bio{color:#aab1bd; font-size:14px; line-height:1.6; max-width:330px}
.site-foot .legal{display:flex; justify-content:space-between; margin-top:26px; font-size:12.5px; color:#6b7385; gap:16px; flex-wrap:wrap}
.site-foot .disclaimer{margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:10px; max-width:760px}
.site-foot .disclaimer p{margin:0; font-size:12px; line-height:1.6; color:#6b7385}
.site-foot .requisites{margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:5px}
.site-foot .requisites .r-name{font-family:var(--ff-head); font-size:13px; color:#aab1bd}
.site-foot .requisites .r-line{font-size:12px; line-height:1.55; color:#6b7385}
@media (max-width:900px){ .site-foot .grid{grid-template-columns:1fr 1fr; gap:32px} }

/* =========================================================
 *  COMPETENCE LAYER  ·  [data-comp]
 *  Pairs each warmth signal with a competence anchor.
 *  data-comp="off" hides every .comp element (warm-only view).
 * ========================================================= */
[data-comp="off"] .comp{ display:none !important }

/* — hero credential chips — */
.hero-creds{ margin-top:24px; display:flex; flex-wrap:wrap; gap:9px }
.hero-creds .cc{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-label); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-600); background:var(--paper-2); border:var(--hair); border-radius:999px; padding:8px 13px 8px 11px; line-height:1 }
.hero-creds .cc svg{ width:14px; height:14px; color:var(--accent); flex:none }
.hero-creds .cc b{ color:var(--ink-900); font-weight:600; letter-spacing:.03em }

/* — why-card competence anchor — */
.why-card .anchor{ margin-top:auto; padding-top:14px; border-top:var(--hair); display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.4; color:var(--ink-600); text-wrap:pretty }
.why-card .anchor .b{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; background:var(--accent-50); color:var(--accent); flex:none; margin-top:-1px }
.why-card .anchor .b svg{ width:13px; height:13px }
.why-card .anchor b{ color:var(--ink-900); font-weight:600 }

/* — team: BGA Backoffice tech strip — */
.team-tech{ margin-top:24px; display:flex; align-items:center; gap:22px; padding:22px 26px; border-radius:var(--r-lg); background:linear-gradient(152deg,var(--ink-800) 0%,var(--ink-900) 100%); color:#fff; flex-wrap:wrap }
.team-tech .sq{ width:46px; height:46px; border-radius:11px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.07); color:var(--cyan); border:1px solid rgba(255,255,255,.1) }
.team-tech .sq svg{ width:24px; height:24px }
.team-tech .tx{ flex:1; min-width:280px }
.team-tech .tx .tt{ font-family:var(--ff-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:6px }
.team-tech .tx h4{ font-family:var(--ff-head); font-weight:600; font-size:16.5px; color:#fff; margin:0 0 6px; letter-spacing:-.005em }
.team-tech .tx p{ margin:0; font-size:13.5px; line-height:1.55; color:#aeb6c6 }
.team-tech .tx p b{ color:#e6eaf1; font-weight:500 }
.team-tech .meta{ flex:none; max-width:210px; padding-left:24px; border-left:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:10px }
.team-tech .meta .mi{ display:flex; align-items:center; gap:9px; font-family:var(--ff-label); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#cdd3de }
.team-tech .meta .mi svg{ width:14px; height:14px; color:var(--cyan); flex:none }
@media (max-width:760px){ .team-tech .meta{ max-width:none; padding-left:0; border-left:none; border-top:1px solid rgba(255,255,255,.1); padding-top:16px; width:100%; flex-direction:row; flex-wrap:wrap; gap:16px } }

/* =========================================================
 *  v2 BRIEF ADDITIONS
 * ========================================================= */

/* — WhatsApp button — */
.btn--wa{ background:#fff; color:var(--ink-900); border:1px solid var(--ink-200) }
.btn--wa svg{ width:19px; height:19px; color:#25D366; flex:none }
.btn--wa:hover{ border-color:#25D366; transform:translateY(-1px); box-shadow:var(--sh-2) }

/* — Telegram button — */
.btn--tg{ background:#fff; color:var(--ink-900); border:1px solid var(--ink-200) }
.btn--tg svg{ width:19px; height:19px; color:#229ED9; flex:none }
.btn--tg:hover{ border-color:#229ED9; transform:translateY(-1px); box-shadow:var(--sh-2) }
.hp-tech .btn--tg{ background:transparent; color:#fff; border-color:rgba(255,255,255,.25) }
.hp-tech .btn--tg:hover{ border-color:#229ED9 }

/* — hero trust badges — */
.hero-badges{ margin-top:20px; display:flex; flex-wrap:wrap; gap:18px }
.hero-badges .hb{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-600); font-family:var(--ff-head); font-weight:500 }
.hero-badges .hb .d{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none }

/* — CLIENTS eyebrow accent — */
.hp-clients .eyebrow .ix{ color:var(--accent); font-style:normal }
.proof-grid{ display:grid; grid-template-columns:.8fr 1fr 1fr; gap:18px }
.is-slot{ position:relative; border:1.5px dashed var(--ink-300); border-radius:var(--r-lg); background:color-mix(in srgb,var(--paper-2) 60%, transparent) }
.is-slot::after{ content:'СЛОТ'; position:absolute; top:12px; inset-inline-end:14px; font-family:var(--ff-label); font-size:9px; letter-spacing:.18em; color:var(--ink-400) }
.rating-slot{ padding:26px 24px; display:flex; flex-direction:column; justify-content:center; gap:8px }
.rating-slot .rs-top{ display:flex; align-items:center; gap:10px }
.rating-slot .stars{ color:#E8B22E; letter-spacing:2px; font-size:15px }
.rating-slot .g{ font-family:var(--ff-head); font-weight:600; font-size:13px; color:var(--ink-700) }
.rating-slot .rs-score{ font-family:var(--ff-display); font-weight:var(--display-w); font-size:38px; color:var(--ink-900); line-height:1 }
.rating-slot .rs-score span{ font-size:16px; color:var(--ink-400) }
.rating-slot .rs-sub{ font-size:12px; color:var(--ink-500) }
.review-slot{ padding:26px 24px; display:flex; flex-direction:column; gap:18px; justify-content:space-between }
.review-slot .q{ font-size:15px; line-height:1.5; color:var(--ink-600); text-wrap:pretty }
.review-slot .who{ display:flex; align-items:center; gap:12px }
.review-slot .who .av{ width:40px; height:40px; border-radius:50%; background:var(--sand-deep); border:1px dashed var(--ink-300); flex:none }
.review-slot .who b{ display:block; font-family:var(--ff-head); font-weight:600; font-size:14px; color:var(--ink-800) }
.review-slot .who i{ font-style:normal; font-size:12px; color:var(--ink-500) }
.logo-slots{ margin-top:18px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px }
.logo-slots .ls{ height:56px; border:1.5px dashed var(--ink-300); border-radius:var(--r-md); display:grid; place-items:center; font-family:var(--ff-label); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); background:color-mix(in srgb,var(--paper-2) 50%, transparent) }
@media (max-width:900px){ .proof-grid{ grid-template-columns:1fr } .logo-slots{ grid-template-columns:repeat(3,1fr) } }

/* real reviews masonry */
.reviews-masonry{ columns:3; column-gap:18px; margin-bottom:8px }
.reviews-masonry > *{ break-inside:avoid; margin:0 0 18px }
@media (max-width:980px){ .reviews-masonry{ columns:2 } }
@media (max-width:620px){ .reviews-masonry{ columns:1 } }
.review{ background:var(--paper); border:var(--hair); border-radius:var(--r-lg); padding:24px 24px 18px; box-shadow:var(--sh-1); display:flow-root }
.review .stars{ color:#E8B22E; letter-spacing:2px; font-size:13px; display:block; margin-bottom:13px }
.review blockquote{ margin:0 0 16px; font-size:14.5px; line-height:1.6; color:var(--ink-700); text-wrap:pretty }
.review figcaption{ display:flex; align-items:center; gap:11px; padding-top:14px; border-top:var(--hair) }
.review figcaption .av{ width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--ff-head); font-weight:600; font-size:15px; color:var(--ink-700); background:linear-gradient(150deg,var(--sand),var(--ink-100)) }
.review figcaption b{ display:block; font-family:var(--ff-head); font-weight:600; font-size:14px; color:var(--ink-900); line-height:1.2 }
.review figcaption i{ font-style:normal; font-size:12px; color:var(--ink-500); margin-top:2px; display:block }
/* client sectors — share breakdown */
.client-fields{ padding-top:30px; border-top:var(--hair) }
.client-fields .cf-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px }
.client-fields .lbl{ font-family:var(--ff-label); letter-spacing:.12em; text-transform:uppercase; font-size:11px; color:var(--ink-500) }
.client-fields .cf-note{ font-size:12.5px; color:var(--ink-500); font-style:italic }
/* client sectors — pill cloud */
.cf-bars{ display:flex; flex-wrap:wrap; gap:9px }
.cf-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-head); font-weight:500; color:var(--ink-700); font-size:13.5px; padding:8px 15px; border:var(--hair); border-radius:999px; background:var(--paper); white-space:nowrap }
.cf-tag:has(.cf-pct){ border-color:var(--accent); color:var(--ink-900) }
.cf-li{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:var(--hair) }
.cf-n{ font-size:14px; color:var(--ink-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cf-pct{ font-family:var(--ff-display); font-weight:var(--display-w); font-size:12.5px; line-height:1; color:var(--accent); letter-spacing:-.01em; padding:3px 7px; border-radius:999px; background:var(--accent-50) }
@media (max-width:860px){
  .hp-clients .cl-head{ grid-template-columns:1fr; gap:18px; align-items:start }
  .hp-clients .cl-lede{ padding-bottom:0 }
  .cl-body{ grid-template-columns:1fr; gap:36px }
}
@media (max-width:760px){ .cf-bars{ gap:8px } }

/* — REASSURANCE «уже бардак» — */
.hp-fix{ padding:var(--sec-pad) 0; background:var(--sand); border-bottom:1px solid var(--sand-deep) }
.fix-card{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; background:var(--paper); border:var(--hair); border-radius:var(--r-xl); padding:48px 50px; box-shadow:var(--sh-1); position:relative; overflow:hidden }
.fix-card::before{ content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--accent) }
.fix-card .fx-l .eyebrow{ color:var(--accent) }
.fix-card .fx-l .eyebrow .dot{ background:var(--accent) }
.fix-card .fx-l h2{ font-family:var(--ff-display); font-weight:var(--display-w); font-size:clamp(26px,2.8vw,36px); line-height:1.1; color:var(--ink-900); margin:14px 0 0; letter-spacing:-.015em }
.fix-card .fx-l p{ margin:16px 0 26px; color:var(--ink-600); font-size:16px; line-height:1.6; max-width:460px; text-wrap:pretty }
.fix-card .fx-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px }
.fix-card .fx-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-700); line-height:1.45 }
.fix-card .fx-list li svg{ width:20px; height:20px; color:var(--accent); flex:none; margin-top:1px }
@media (max-width:820px){ .fix-card{ grid-template-columns:1fr; gap:30px; padding:34px 28px } }

/* — TECH DIFFERENTIATOR — */
.hp-tech{ padding:var(--sec-pad) 0; background:var(--ink-900); color:#fff }
.hp-tech .grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
.hp-tech .eyebrow{ color:var(--cyan) }
.hp-tech .eyebrow .ix{ color:var(--cyan) }
.hp-tech h2{ font-family:var(--ff-display); font-weight:var(--display-w); font-size:clamp(28px,3vw,42px); line-height:1.08; color:#fff; margin:16px 0 0; letter-spacing:-.018em }
.hp-tech h2 em{ font-style:italic; font-weight:var(--display-em-w); color:var(--cyan) }
.hp-tech .lede{ margin:18px 0 28px; color:#aeb6c6; font-size:17px; line-height:1.6; max-width:520px }
.hp-tech .vs{ display:flex; flex-direction:column; gap:14px; margin-bottom:30px }
.hp-tech .vs .row{ display:flex; align-items:flex-start; gap:13px; font-size:14.5px; line-height:1.45; color:#cdd3de }
.hp-tech .vs .row b{ color:#fff; font-weight:600 }
.hp-tech .vs .row .ic{ width:26px; height:26px; border-radius:7px; background:rgba(52,182,228,.14); color:var(--cyan); display:grid; place-items:center; flex:none }
.hp-tech .vs .row .ic svg{ width:15px; height:15px }
.hp-tech .btn--wa{ background:transparent; color:#fff; border-color:rgba(255,255,255,.25) }
.hp-tech .btn--wa:hover{ border-color:#25D366 }
/* doc-recognition mock */
.bo-mock{ background:linear-gradient(160deg,#141d33,#0b1120); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xl); padding:24px; box-shadow:0 30px 80px -30px rgba(0,0,0,.6) }
.bo-mock .bo-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px }
.bo-mock .bo-top .t{ font-family:var(--ff-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan) }
.bo-mock .bo-top .st{ display:inline-flex; align-items:center; gap:7px; font-size:11px; color:#8fd9a8 }
.bo-mock .bo-top .st .pd{ width:7px; height:7px; border-radius:50%; background:#4EC88A; box-shadow:0 0 0 4px rgba(78,200,138,.18) }
.bo-doc{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-md); padding:18px 18px 14px; display:flex; flex-direction:column; gap:11px }
.bo-doc .dr{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:11px; border-bottom:1px solid rgba(255,255,255,.06) }
.bo-doc .dr:last-child{ border-bottom:none; padding-bottom:0 }
.bo-doc .dk{ font-size:12px; color:#7d8799; font-family:var(--ff-label); letter-spacing:.04em; text-transform:uppercase }
.bo-doc .dv{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:#eef2f8; font-weight:500 }
.bo-doc .dv .chk{ width:18px; height:18px; border-radius:5px; background:rgba(78,200,138,.16); color:#4EC88A; display:grid; place-items:center; flex:none }
.bo-doc .dv .chk svg{ width:11px; height:11px }
.bo-mock .bo-foot{ margin-top:14px; display:flex; align-items:center; gap:9px; font-size:12px; color:#8b94a6 }
@media (max-width:820px){ .hp-tech .grid{ grid-template-columns:1fr; gap:34px } }

/* — E-INVOICING TIMELINE — */
.hp-einv{ padding:var(--sec-pad) 0; background:var(--paper-2); border-bottom:var(--hair) }
.hp-einv .head{ max-width:680px; margin-bottom:42px }
.hp-einv .head .eyebrow .ix{ color:var(--accent); font-style:normal }
.hp-einv .head h2{ margin-top:16px }
.hp-einv .head p{ margin-top:14px; color:var(--ink-600); font-size:16px; line-height:1.6; max-width:600px }
.einv-line{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative }
.einv-line::before{ content:''; position:absolute; top:13px; inset-inline:7%; height:2px; background:var(--ink-200) }
.einv-step{ position:relative; padding:0 16px 0 0 }
.einv-step .node{ width:28px; height:28px; border-radius:50%; background:var(--paper); border:2px solid var(--ink-300); display:grid; place-items:center; position:relative; z-index:1; margin-bottom:18px }
.einv-step .node span{ width:9px; height:9px; border-radius:50%; background:var(--ink-300) }
.einv-step.hot .node{ border-color:var(--accent) }
.einv-step.hot .node span{ background:var(--accent) }
.einv-step .date{ font-family:var(--ff-display); font-weight:var(--display-w); font-size:19px; color:var(--ink-900); letter-spacing:-.01em }
.einv-step .date em{ font-style:italic; color:var(--accent); font-weight:var(--display-em-w) }
.einv-step .lbl{ margin-top:8px; font-size:13.5px; line-height:1.5; color:var(--ink-600); max-width:22ch; text-wrap:pretty }
.einv-step .tag{ display:inline-block; margin-top:10px; font-family:var(--ff-label); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--accent-50); padding:4px 9px; border-radius:999px }
.einv-cta{ margin-top:40px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:24px 28px; background:var(--paper); border:var(--hair); border-radius:var(--r-lg) }
.einv-cta .tx{ flex:1; min-width:280px; font-size:16px; color:var(--ink-800); line-height:1.5 }
.einv-cta .tx b{ color:var(--ink-900); font-weight:600 }
@media (max-width:820px){ .einv-line{ grid-template-columns:1fr; gap:22px } .einv-line::before{ display:none } .einv-step .lbl{ max-width:none } }

/* — WIZARD LEAD CAPTURE — */
.wiz-lead{ margin-top:16px; display:flex; flex-direction:column; gap:10px }
.wiz-lead .wiz-lead-lead{ margin:0 0 2px; font-size:13.5px; line-height:1.5; color:var(--ink-700); font-family:var(--ff-head) }
.wiz-lead .wl-row{ display:flex; gap:10px; flex-wrap:wrap }
.wiz-lead .input{ flex:1; min-width:130px; padding:12px 14px; border:1px solid var(--ink-200); border-radius:var(--r-md); font-family:var(--ff-body); font-size:14px; background:#fff; color:var(--ink-900) }
.wiz-lead .input:focus{ outline:none; border-color:var(--accent) }
.wiz-lead select.input{ flex:none; width:128px }

/* — CONTACT office slot — */
.office-slot{ margin-top:26px; height:170px; border:1.5px dashed var(--ink-300); border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:color-mix(in srgb,var(--paper-2) 60%, transparent); color:var(--ink-500); text-align:center; padding:16px }
.office-slot svg{ width:26px; height:26px; color:var(--ink-400) }
.office-slot .t{ font-size:13px; font-weight:500; color:var(--ink-600) }
.office-slot .s{ font-size:11.5px; color:var(--ink-500) }

/* — form WhatsApp quick action — */
.form-wa{ display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:18px; border:1px solid var(--ink-200); border-radius:var(--r-md); background:var(--paper-2) }
.form-wa .tx{ flex:1; font-size:13px; color:var(--ink-600); line-height:1.4 }
.form-wa .tx b{ color:var(--ink-900); display:block; font-size:14px; font-weight:600; margin-bottom:2px }
.form-wa-btns{ display:flex; flex-direction:column; gap:8px; flex:none }

/* — footer license slot — */
.site-foot .lic-slot{ display:inline-flex; gap:6px; align-items:center; color:#6b7385; font-size:12px }
.site-foot .lic-slot .pl{ border:1px dashed rgba(255,255,255,.18); border-radius:5px; padding:2px 8px; color:#8b93a3; font-family:var(--ff-label); letter-spacing:.05em }

/* — MOBILE STICKY CTA — */
.mobile-cta{ display:none }
@media (max-width:720px){
  .mobile-cta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--paper) 92%, transparent); backdrop-filter:blur(10px); border-top:var(--hair) }
  .mobile-cta .btn{ flex:1; padding:14px 12px; font-size:14px }
  body{ padding-bottom:74px }
}

/* — VERY NARROW SCREENS (≤360px) —
   Some fixed paddings + nowrap button labels set min-width floors wider than the
   viewport on small phones (≈320px), forcing horizontal scroll. Relax them on
   these widths so content fits. No effect at 361px+. */
@media (max-width:360px){
  :root{ --gutter:16px }
  .btn{ white-space:normal; text-align:center; text-wrap:balance }
  .btn--lg{ padding-inline:16px; font-size:14.5px }
  .form-card{ padding:24px 18px }
  .wiz-result, .wiz-pane{ padding-inline:18px }
  .fix-card{ padding-inline:20px }
  .einv-cta{ padding:20px 18px; flex-direction:column; align-items:flex-start }
  .einv-cta .tx{ min-width:0 }
  .mobile-cta{ gap:8px; padding-inline:12px }
  .mobile-cta .btn{ padding-inline:8px; min-width:0 }
}

/* — LANGUAGE HINT BAR —
   Non-intrusive top strip offering the visitor's browser language. Hidden by
   default; app.js reveals it (adds .is-on) only when the browser advertises a
   language we have a version for, and the visitor hasn't dismissed it. Sits
   above the sticky header in normal flow, so it never overlaps content. */
.lang-hint{
  display:none;
  background:var(--accent); color:#fff;
  font-family:var(--ff-body); font-weight:500; font-size:14px; line-height:1.4;
}
.lang-hint.is-on{ display:block }
.lang-hint .wrap{
  display:flex; align-items:center; gap:12px;
  padding-block:9px;
}
.lang-hint .lh-txt{ flex:1 1 auto; min-width:0 }
.lang-hint a.lh-go{
  flex:0 0 auto; color:#fff; font-weight:600; text-decoration:underline;
  text-underline-offset:2px;
}
.lang-hint a.lh-go:hover{ text-decoration:none }
.lang-hint .lh-close{
  flex:0 0 auto; appearance:none; background:transparent; border:0; cursor:pointer;
  color:#fff; opacity:.8; font-size:18px; line-height:1; padding:2px 4px;
}
.lang-hint .lh-close:hover{ opacity:1 }
.lang-hint[dir="rtl"] .wrap{ flex-direction:row-reverse }
@media (max-width:480px){
  .lang-hint{ font-size:13px }
  .lang-hint .wrap{ gap:8px; padding:8px 12px }
}