/* ==========================================================================
   GOOD FOOD · Аналітичний кабінет — дизайн-система v2
   База: фірмова айдентика 1gf.com.ua (червоний #E31B22 + жовтий #FFC525 на білому),
   виконання — сучасне: bento-сітка, скло, mesh-фон, мікровзаємодії, Inter/Raleway.
   ========================================================================== */

/* ---------- Шрифти (self-hosted, variable) ---------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/Inter.woff2') format('woff2');
}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Poppins-700.woff2') format('woff2');}

:root{
  /* --- Фірмові кольори платформи ASSAYO (teal/ink). Усередині кабінету
         перекриваються кольорами активної корпорації (інʼєкція в layout). --- */
  --brand-red:#0f766e;      /* primary — teal */
  --brand-red-2:#14b8a6;    /* accent  — bright teal */
  --brand-red-ink:color-mix(in srgb,var(--brand-red) 82%,#000);
  --brand-yellow:#2dd4bf;   /* secondary — teal-300 */
  --brand-yellow-2:#5eead4;
  --amber:#34d399;          /* emerald */
  /* --grad і похідні побудовані на змінних → підхоплюють колір активної корпорації */
  --grad:linear-gradient(135deg,var(--brand-red) 0%,var(--brand-red-2) 55%,var(--brand-yellow) 120%);
  --grad-soft:linear-gradient(135deg,color-mix(in srgb,var(--brand-red) 15%,transparent),color-mix(in srgb,var(--brand-yellow) 15%,transparent));

  /* --- Світла тема (за замовчуванням, як бренд-сайт) --- */
  --bg:#f3f5fa;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f6f8fc;
  --elev:#ffffff;
  --ink:#161b24;
  --ink-2:#3d4650;
  --muted:#7a8592;
  --line:#e7ebf2;
  --line-2:#dbe1ea;
  --glass:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.6);
  --ring:color-mix(in srgb,var(--brand-red) 22%,transparent);
  --ok:#1f9d57; --warn:#d98a1f; --err:#e11d2a; --info:#2f7fd6;

  --shadow-sm:0 1px 2px rgba(20,30,50,.06),0 2px 8px rgba(20,30,50,.06);
  --shadow:0 6px 16px rgba(20,30,50,.08),0 18px 40px rgba(20,30,50,.10);
  --shadow-lg:0 12px 28px rgba(20,30,50,.12),0 30px 60px rgba(20,30,50,.16);
  --shadow-brand:0 10px 26px color-mix(in srgb,var(--brand-red) 32%,transparent);

  --radius:20px; --radius-sm:14px; --radius-xs:11px;
  --header-h:64px;
  --maxw:1240px;
  --font:'Inter','Segoe UI',Roboto,-apple-system,Arial,sans-serif;
  --display:'Poppins','Inter','Segoe UI',Arial,sans-serif;
}

:root[data-theme="dark"]{
  --bg:#0d1016;
  --bg-2:#0a0d12;
  --panel:#141a22;
  --panel-2:#1b222c;
  --elev:#1e2732;
  --ink:#e9eef5;
  --ink-2:#aeb9c6;
  --muted:#7c8797;
  --line:#26303c;
  --line-2:#33404e;
  --glass:rgba(20,26,34,.66);
  --glass-brd:rgba(255,255,255,.08);
  --ring:color-mix(in srgb,var(--brand-red-2) 30%,transparent);
  --shadow-sm:0 2px 8px rgba(0,0,0,.30);
  --shadow:0 10px 30px rgba(0,0,0,.40);
  --shadow-lg:0 20px 50px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.55;
  background:var(--bg);
  background-image:
    radial-gradient(880px 520px at 92% -10%, color-mix(in srgb,var(--brand-red) 12%,transparent), transparent 60%),
    radial-gradient(760px 520px at -8% 6%, color-mix(in srgb,var(--brand-yellow) 14%,transparent), transparent 55%),
    radial-gradient(600px 600px at 55% 120%, rgba(255,138,42,.08), transparent 60%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em}
::selection{background:color-mix(in srgb,var(--brand-red) 22%,transparent)}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:8px}

/* ---------- Header (скло) ---------- */
.site-header{
  position:sticky;top:0;z-index:60;height:var(--header-h);
  display:flex;align-items:center;gap:16px;padding:0 22px;
  background:var(--glass);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand img{height:30px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}
.brand .sep{width:1px;height:26px;background:var(--line-2)}
/* монограма корпорації без власного логотипа — в її фірмових кольорах */
.corp-mono{width:32px;height:32px;border-radius:9px;display:inline-grid;place-items:center;color:#fff;
  font-family:var(--display);font-weight:700;font-size:15px;background:var(--grad);
  box-shadow:var(--shadow-brand);flex:0 0 auto}
.brand .tag{font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink-2);
  white-space:nowrap;letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:2px;margin-left:6px;flex:1;flex-wrap:wrap}
.nav a{
  padding:8px 14px;border-radius:11px;font-size:14px;color:var(--ink-2);font-weight:600;
  position:relative;transition:color .18s, background .18s;
}
.nav a:hover{background:var(--panel-2);color:var(--ink)}
.nav a.active{color:var(--ink)}
.nav a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px;
  background:var(--grad);box-shadow:0 2px 8px color-mix(in srgb,var(--brand-red) 40%,transparent);
}
.header-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.user-chip{display:flex;align-items:center;gap:11px;padding:5px 7px 5px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);box-shadow:var(--shadow-sm)}
.user-chip .u-name{font-size:13px;font-weight:650;line-height:1.1}
.user-chip .u-role{font-size:11px;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  color:#fff;background:var(--grad);font-size:14px;box-shadow:var(--shadow-brand);font-family:var(--display)}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:.18s;font-size:16px;box-shadow:var(--shadow-sm)}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-1px)}
.corp-switch{max-width:210px;padding:9px 12px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--ink);font-size:13px;font-weight:650;font-family:inherit;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:.16s}
.corp-switch:hover{border-color:var(--muted)}
.corp-switch:focus{outline:none;border-color:var(--brand-red);box-shadow:0 0 0 3px var(--ring)}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:30px 22px 70px;animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em}
.page-head .sub{color:var(--muted);font-size:14.5px;margin-top:6px}
.eyebrow{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;margin-bottom:6px}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font-weight:650;font-size:14px;
  cursor:pointer;transition:transform .16s, box-shadow .16s, border-color .16s;white-space:nowrap;
  font-family:inherit;overflow:hidden;box-shadow:var(--shadow-sm)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--muted)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px}
.btn-primary{border:none;color:#fff;background:var(--grad);box-shadow:var(--shadow-brand)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:hover{box-shadow:0 14px 32px color-mix(in srgb,var(--brand-red) 42%,transparent)}
.btn-accent{border:none;color:#4a3500;background:linear-gradient(135deg,var(--brand-yellow),var(--amber));
  box-shadow:0 8px 22px color-mix(in srgb,var(--brand-yellow) 34%,transparent)}
.btn-ghost{background:transparent;box-shadow:none}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:10px}
.btn-danger{color:#fff;background:var(--err);border:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-pad{padding:22px}
.grid{display:grid;gap:18px}

/* Bento-сітка кабінету: різні розміри для ієрархії */
.grid-docs{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-auto-rows:1fr}
.doc-card{display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.doc-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-red) 36%,transparent),color-mix(in srgb,var(--brand-yellow) 36%,transparent));
  -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 .22s;pointer-events:none}
.doc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.doc-card:hover::before{opacity:1}
.doc-card .cover{height:110px;position:relative;display:flex;align-items:flex-end;padding:15px;
  background:var(--grad-soft);border-bottom:1px solid var(--line);overflow:hidden}
.doc-card .cover::after{content:"";position:absolute;width:150px;height:150px;right:-30px;top:-60px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-red) 18%,transparent),transparent 70%)}
.doc-card .cover.k-товари{background:linear-gradient(135deg,rgba(227,27,34,.20),rgba(255,138,42,.10))}
.doc-card .cover.k-послуги{background:linear-gradient(135deg,rgba(47,127,214,.20),rgba(120,180,240,.08))}
.doc-card .cover .kind{position:relative;z-index:1;font-family:var(--display);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--panel);padding:6px 12px;
  border-radius:999px;border:1px solid var(--line-2);box-shadow:var(--shadow-sm)}
.doc-card .body{padding:17px 19px;display:flex;flex-direction:column;gap:9px;flex:1}
.doc-card h3{margin:0;font-size:17px;line-height:1.28;font-weight:750}
.doc-card .desc{font-size:13px;color:var(--ink-2);flex:1;line-height:1.5}
.doc-card .meta{display:flex;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.doc-card .meta .pill{background:var(--panel-2);border:1px solid var(--line);padding:4px 10px;border-radius:999px}
.doc-card .actions{display:flex;gap:9px;padding:15px 19px;border-top:1px solid var(--line);background:var(--panel-2)}

/* Featured (велика плитка bento) */
.doc-card.featured{grid-column:span 2}
.doc-card.featured .cover{height:150px}
.doc-card.featured h3{font-size:22px}
.doc-card.featured .desc{font-size:14px}
@media (max-width:720px){ .doc-card.featured{grid-column:span 1} }

/* ---------- Section ---------- */
.section-title{display:flex;align-items:center;gap:13px;margin:34px 0 16px}
.section-title h2{margin:0;font-size:19px;font-weight:800}
.section-title .count{font-size:12.5px;font-weight:600;color:var(--brand-red-ink);
  background:color-mix(in srgb,var(--brand-red) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-red) 20%,transparent);padding:2px 10px;border-radius:999px}
.section-title .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* ---------- KPI ---------- */
.kpi{display:flex;gap:14px;flex-wrap:wrap}
.kpi .k{position:relative;flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 18px;overflow:hidden;box-shadow:var(--shadow-sm)}
.kpi .k::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.kpi .k .v{font-family:var(--display);font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.kpi .k .l{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm)}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.data th,table.data td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line)}
table.data th{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  background:var(--panel-2);position:sticky;top:0;font-weight:700}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover{background:var(--panel-2)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.tag-role{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;display:inline-block}
.role-admin{background:rgba(227,27,34,.12);color:var(--brand-red);border:1px solid rgba(227,27,34,.28)}
.role-founder{background:rgba(255,184,77,.16);color:#b9791a;border:1px solid rgba(255,184,77,.4)}
.role-director{background:rgba(47,127,214,.12);color:#2f7fd6;border:1px solid rgba(47,127,214,.28)}
:root[data-theme="dark"] .role-founder{color:var(--brand-yellow-2)}
:root[data-theme="dark"] .role-director{color:#7dbaf0}
.badge{font-size:11.5px;font-weight:650;padding:3px 10px;border-radius:999px;display:inline-block;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}
.badge.on{background:rgba(31,157,87,.14);color:#1f9d57;border-color:rgba(31,157,87,.3)}
.badge.off{background:rgba(125,135,148,.14);color:var(--muted)}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.input,select,textarea{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--ink);font-size:14.5px;font-family:inherit;transition:border-color .16s, box-shadow .16s}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-red);box-shadow:0 0 0 3px var(--ring)}
textarea{resize:vertical;min-height:78px}
.hint{font-size:12px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}

/* ---------- Flash / Toast ---------- */
.flashes{position:fixed;top:calc(var(--header-h) + 16px);right:20px;z-index:90;display:flex;flex-direction:column;gap:10px;max-width:380px}
.flash{padding:13px 16px;border-radius:14px;font-size:14px;box-shadow:var(--shadow);border:1px solid var(--line-2);
  background:var(--glass);backdrop-filter:blur(10px);display:flex;gap:10px;align-items:flex-start;animation:slideIn .3s cubic-bezier(.2,.7,.2,1)}
.flash.success{border-left:4px solid var(--ok)} .flash.error{border-left:4px solid var(--err)}
.flash.info{border-left:4px solid var(--info)}
@keyframes slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:95;background:var(--elev);
  color:var(--ink);border:1px solid var(--line-2);padding:13px 22px;border-radius:14px;box-shadow:var(--shadow-lg);
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.28s;display:flex;gap:9px;align-items:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

/* ---------- Auth (login/setup) ---------- */
.auth-topbar{position:fixed;top:18px;right:20px;z-index:90;display:flex;align-items:center;gap:10px}
.auth-topbar .icon-btn{background:var(--panel);box-shadow:var(--shadow-sm)}
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-brand{position:relative;padding:56px;display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;overflow:hidden;
  background:
    radial-gradient(720px 460px at 22% 18%, color-mix(in srgb,var(--brand-yellow) 32%,transparent), transparent 62%),
    radial-gradient(680px 480px at 88% 96%, color-mix(in srgb,var(--brand-red-2) 30%,transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb,var(--brand-red) 55%,#000) 0%, color-mix(in srgb,var(--brand-red) 82%,#000) 46%, var(--brand-red) 100%)}
.auth-brand::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}
.auth-brand>*{position:relative;z-index:1}
.auth-brand .logo-lg{background:#fff;border-radius:18px;padding:20px 26px;align-self:flex-start;box-shadow:var(--shadow-lg)}
.auth-brand .logo-lg img{height:50px}
.auth-brand h2{font-family:var(--display);font-size:34px;line-height:1.16;margin:0 0 14px;max-width:16ch;font-weight:800;color:#fff}
.auth-brand p{color:rgba(255,255,255,.9);font-size:15.5px;max-width:46ch;margin:0;line-height:1.6}
.auth-brand .feat{display:flex;flex-direction:column;gap:13px;margin-top:24px}
.auth-brand .feat div{display:flex;gap:12px;align-items:center;font-size:14.5px;color:rgba(255,255,255,.95)}
.auth-brand .feat .dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(4px)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px;box-shadow:var(--shadow)}
.auth-card h1{font-size:25px;margin:0 0 4px;font-weight:800}
.auth-card .lead{color:var(--muted);font-size:14px;margin:0 0 22px}
.lock-note{margin-top:20px;font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center;
  padding:13px;border:1px dashed var(--line-2);border-radius:12px;background:var(--panel-2)}

/* ---------- Document viewer ---------- */
.viewer-bar{position:sticky;top:var(--header-h);z-index:50;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 22px;background:var(--glass);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.viewer-bar .doc-name{font-weight:750;font-size:15px;margin-right:auto;display:flex;align-items:center;gap:10px;min-width:0;font-family:var(--display)}
.viewer-bar .doc-name .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.viewer-frame{width:100%;height:calc(100vh - var(--header-h) - 60px);border:none;background:#fff;display:block}

/* ---------- Empty / error / misc ---------- */
.empty{text-align:center;padding:64px 20px;color:var(--muted)}
.empty>div:first-child{font-size:46px;margin-bottom:12px}
.error-page{min-height:72vh;display:grid;place-items:center;text-align:center}
.error-page .code{font-family:var(--display);font-size:92px;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-height:230px;overflow:auto;
  padding:13px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2)}
.checkgrid label{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:500;cursor:pointer}
.foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:860px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-brand{display:none}
  .split{grid-template-columns:1fr}
  .viewer-bar .doc-name .t{max-width:38vw}
  .nav{order:3;width:100%}
  .page-head h1{font-size:25px}
}
/* ============================ ЛЕНДИНГ ASSAYO ============================ */
.lp{min-height:100vh;display:flex;flex-direction:column}
.lp-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* header */
.lp-header{position:sticky;top:0;z-index:60;background:var(--glass);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
.lp-nav{height:70px;display:flex;align-items:center;gap:22px}
.lp-logo{display:flex;align-items:center;height:34px}
.lp-logo img{height:30px;width:auto}
.lp-navlinks{display:flex;gap:6px;margin-left:14px}
.lp-navlinks a{padding:8px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink-2);transition:.15s}
.lp-navlinks a:hover{background:var(--panel-2);color:var(--ink)}
.lp-actions{margin-left:auto;display:flex;align-items:center;gap:12px}

/* language switch */
.lang-switch{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--panel)}
.lang-switch a{padding:6px 12px;font-size:13px;font-weight:700;color:var(--muted);transition:.15s;letter-spacing:.02em}
.lang-switch a.on{background:var(--grad);color:#fff}
.lang-switch a:not(.on):hover{background:var(--panel-2);color:var(--ink)}

.btn-lg{padding:13px 24px;font-size:15.5px;border-radius:13px}

/* hero */
.lp-hero{position:relative;overflow:hidden;padding:64px 0 30px}
.lp-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.lp-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--brand-red) 25%,var(--line-2));
  background:color-mix(in srgb,var(--brand-red) 8%,var(--panel));color:var(--brand-red-ink);
  font-size:13px;font-weight:650;margin-bottom:22px}
.lp-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--brand-red-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-red-2) 25%,transparent)}
.lp-h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,54px);line-height:1.08;
  letter-spacing:-.02em;margin:0 0 18px;max-width:18ch}
.lp-h1 .accent{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.lp-lead{font-size:17.5px;color:var(--ink-2);line-height:1.6;max-width:52ch;margin:0 0 30px}
.lp-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.lp-stats{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.lp-stat .v{font-family:var(--display);font-size:26px;font-weight:700;color:var(--ink)}
.lp-stat .l{font-size:13px;color:var(--muted);max-width:16ch;margin-top:2px}

/* hero visual — превью аналітичного дашборда */
.lp-hero-visual{position:relative}
.lp-hero-visual::before{content:"";position:absolute;inset:-40px -20px;z-index:0;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-red) 22%,transparent),transparent 65%);filter:blur(10px)}
.lp-card{position:relative;z-index:1;background:var(--panel);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--shadow-lg);padding:22px;transform:perspective(1400px) rotateY(-9deg) rotateX(3deg)}
.lp-card .row1{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.lp-card .chip{font-size:11px;font-weight:700;color:var(--brand-red-ink);
  background:color-mix(in srgb,var(--brand-red) 12%,transparent);border:1px solid color-mix(in srgb,var(--brand-red) 20%,transparent);
  padding:4px 10px;border-radius:999px}
.lp-card .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.lp-card .kpi2{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.lp-card .kpi2 .kv{font-family:var(--display);font-weight:700;font-size:18px}
.lp-card .kpi2 .kl{font-size:10.5px;color:var(--muted);margin-top:1px}
.lp-chart{position:relative;height:150px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);
  padding:14px;display:flex;align-items:flex-end;gap:10px;overflow:hidden}
.lp-chart .bar{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand-red) 55%,transparent),color-mix(in srgb,var(--brand-red) 22%,transparent));animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.lp-chart svg{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);overflow:visible}
@keyframes grow{from{height:0;opacity:.3}to{opacity:1}}

/* sections */
.lp-section{padding:60px 0}
.lp-sec-head{text-align:center;max-width:620px;margin:0 auto 40px}
.lp-sec-head .eyebrow{justify-content:center;display:block}
.lp-sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,36px);letter-spacing:-.02em;margin:8px 0 0}
.lp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-feat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;transition:.2s;box-shadow:var(--shadow-sm)}
.lp-feat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.lp-feat .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;margin-bottom:14px;
  background:color-mix(in srgb,var(--brand-red) 12%,transparent);border:1px solid color-mix(in srgb,var(--brand-red) 20%,transparent)}
.lp-feat h3{font-family:var(--display);font-weight:600;font-size:18px;margin:0 0 7px}
.lp-feat p{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin:0}
.lp-feat.wide{grid-column:span 2}

/* steps */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.lp-step{position:relative;padding:26px 22px;background:var(--panel);border:1px solid var(--line);border-radius:18px}
.lp-step::before{counter-increment:step;content:counter(step);font-family:var(--display);font-weight:700;font-size:15px;
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;background:var(--grad);
  box-shadow:var(--shadow-brand);margin-bottom:14px}
.lp-step h3{font-family:var(--display);font-weight:600;font-size:17px;margin:0 0 6px}
.lp-step p{font-size:14px;color:var(--ink-2);line-height:1.5;margin:0}

/* CTA band */
.lp-cta{margin:20px 0 70px;border-radius:26px;overflow:hidden;position:relative;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-red) 60%,#000) 0%,var(--brand-red) 55%,var(--brand-red-2) 120%);
  padding:52px 40px;text-align:center}
.lp-cta::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px}
.lp-cta>*{position:relative;z-index:1}
.lp-cta h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,32px);margin:0 0 10px;color:#fff}
.lp-cta p{font-size:16px;color:rgba(255,255,255,.9);margin:0 0 24px}
.btn-on-teal{background:#fff;color:var(--brand-red-ink);border:none;box-shadow:0 10px 26px rgba(0,0,0,.22)}
.btn-on-teal:hover{box-shadow:0 14px 32px rgba(0,0,0,.3)}

/* footer */
.lp-footer{margin-top:auto;border-top:1px solid var(--line);padding:28px 0;background:var(--panel-2)}
.lp-footer-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.lp-footer .muted{font-size:13px;color:var(--muted);max-width:60ch}

@media (max-width:900px){
  .lp-hero-inner{grid-template-columns:1fr;gap:34px}
  .lp-hero-visual{order:-1}
  .lp-card{transform:none}
  .lp-features,.lp-steps{grid-template-columns:1fr}
  .lp-feat.wide{grid-column:span 1}
  .lp-navlinks{display:none}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}