/* Landing page (index.html) — Apple-way light design built on the product
   design tokens (see css/tokens.css): #F2F2F7 bg, white 18px cards,
   accent #2F7CF6, HIG text opacities. Self-contained: no styles.css. */

:root{
  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;
  --surface-1: #FFFFFF;
  --surface-2: #F6F7FB;
  --app-bg: #F2F2F7;            /* product app background, used inside mockups */

  --border: rgba(0,0,0,0.08);
  --hairline: rgba(0,0,0,0.06);

  --text-1: rgba(0,0,0,0.92);
  --text-2: rgba(0,0,0,0.64);
  --text-3: rgba(0,0,0,0.44);

  --accent: #2F7CF6;
  --accent-press: #1E63D0;
  --green: #34C759;
  --red: #FF3B30;
  --amber: #FF9500;

  --shadow: 0 10px 30px rgba(0,0,0,0.10);
  --shadow-lift: 0 14px 36px rgba(0,0,0,0.14);
  --shadow-window: 0 24px 70px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.06);

  --radius-control: 12px;
  --radius-card: 18px;
  --radius-modal: 24px;

  --nav-bg: rgba(255,255,255,0.72);
  --seg-track: rgba(0,0,0,0.045);
  --seg-on: #FFFFFF;
  --grid-line: rgba(0,0,0,0.05);
  --chip-flat-bg: rgba(0,0,0,0.05);
  --deck: #C9CDD4;
  --deck-notch: #A9AEB8;
  --bezel: #2B2B2E;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* -------- dark theme (tokens mirror the product's css/tokens.css) -------- */
html[data-theme="dark"]{
  --bg: #0B0B0D;
  --bg-alt: #111114;
  --surface-1: #1C1C1E;
  --surface-2: #20232A;
  --app-bg: #0B0B0D;

  --border: rgba(255,255,255,0.08);
  --hairline: rgba(255,255,255,0.07);

  --text-1: rgba(255,255,255,0.92);
  --text-2: rgba(255,255,255,0.66);
  --text-3: rgba(255,255,255,0.45);

  --accent: #4A8DFF;
  --accent-press: #3B78E7;
  --green: #30D158;
  --red: #FF6961;
  --amber: #FFB340;

  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-lift: 0 14px 36px rgba(0,0,0,0.55);
  --shadow-window: 0 24px 70px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);

  --nav-bg: rgba(15,15,18,0.72);
  --seg-track: rgba(255,255,255,0.07);
  --seg-on: #2E2E33;
  --grid-line: rgba(255,255,255,0.07);
  --chip-flat-bg: rgba(255,255,255,0.08);
  --deck: #3A3D44;
  --deck-notch: #55585F;
  --bezel: #3A3A3F;
}
/* dark: refit hardcoded component colors */
html[data-theme="dark"] .pillv.up{background:rgba(52,199,89,0.16); color:#6FE39B;}
html[data-theme="dark"] .pillv.down{background:rgba(255,69,58,0.16); color:#FF9F9A;}
html[data-theme="dark"] .pillv.flat{background:var(--chip-flat-bg); color:var(--text-3);}
html[data-theme="dark"] .pillv.acc{background:rgba(74,141,255,0.18); color:#9BC0FF;}
html[data-theme="dark"] .med-pill.ok{background:rgba(52,199,89,0.16); color:#6FE39B;}
html[data-theme="dark"] .med-pill.warn{background:rgba(255,159,10,0.18); color:#FFC26B;}
html[data-theme="dark"] .med-pill.bad{background:rgba(255,69,58,0.16); color:#FF9F9A;}
html[data-theme="dark"] .trend.up{background:rgba(52,199,89,0.16); color:#6FE39B;}
html[data-theme="dark"] .trend.down{background:rgba(255,69,58,0.16); color:#FF9F9A;}
html[data-theme="dark"] .trend.flat{background:var(--chip-flat-bg); color:var(--text-3);}
html[data-theme="dark"] .dlt.up{color:#5AD97F;}
html[data-theme="dark"] .dlt.down{color:#FF7A70;}
html[data-theme="dark"] .seg span.on{box-shadow:none;}
html[data-theme="dark"] .vs-item .ic.no{background:var(--chip-flat-bg);}
html[data-theme="dark"] .vs-item .ic.yes{background:rgba(52,199,89,0.16); color:#6FE39B;}
html[data-theme="dark"] .vs-col.new{border-color:rgba(74,141,255,0.40); box-shadow:0 14px 36px rgba(0,0,0,0.45);}
html[data-theme="dark"] .plan.pop{border-color:rgba(74,141,255,0.45); box-shadow:0 14px 36px rgba(0,0,0,0.45);}
html[data-theme="dark"] .video-card{border:1px solid rgba(255,255,255,0.10);}
html[data-theme="dark"] .dark-mini{border-color:rgba(255,255,255,0.12);}
html[data-theme="dark"] .pain .ico.blue{background:rgba(74,141,255,0.14); color:#7FB0FF;}
html[data-theme="dark"] .pain .ico.red{background:rgba(255,69,58,0.14); color:#FF9F9A;}
html[data-theme="dark"] .pain .ico.green{background:rgba(52,199,89,0.16); color:#6FE39B;}
html[data-theme="dark"] .pain .ico.amber{background:rgba(255,159,10,0.16); color:#FFC26B;}
html[data-theme="dark"] .pain .ico.purple{background:rgba(122,90,248,0.18); color:#B3A0FF;}
html[data-theme="dark"] .t-blue{background:linear-gradient(135deg,#1B2A45,#20345A); color:#7FB0FF;}
html[data-theme="dark"] .t-red{background:linear-gradient(135deg,#3E1F1D,#4E2723); color:#FF9F9A;}
html[data-theme="dark"] .t-teal{background:linear-gradient(135deg,#15332B,#1A4136); color:#5FD3A9;}
html[data-theme="dark"] .t-purple{background:linear-gradient(135deg,#2A2347,#352C5C); color:#B3A0FF;}
html[data-theme="dark"] .t-amber{background:linear-gradient(135deg,#3D2C12,#4D3816); color:#FFC26B;}
/* dark: inline-SVG fills/strokes (attribute selectors, override presentation attrs) */
html[data-theme="dark"] svg g[stroke="rgba(0,0,0,0.05)"]{stroke:var(--grid-line);}
html[data-theme="dark"] svg rect[fill="#2B2B2E"]{fill:var(--bezel);}
html[data-theme="dark"] svg rect[fill="rgba(0,0,0,0.07)"]{fill:rgba(255,255,255,0.10);}
html[data-theme="dark"] svg path[fill="#C9CDD4"]{fill:var(--deck);}
html[data-theme="dark"] svg rect[fill="#A9AEB8"]{fill:var(--deck-notch);}

*{box-sizing:border-box}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-1);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, Arial, sans-serif;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
button{font:inherit;}
:focus-visible{outline:2px solid rgba(47,124,246,.5); outline-offset:3px; border-radius:10px;}
::selection{background:rgba(47,124,246,.18);}

.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 22px;}

/* ---------- nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline);
}
.nav .row{
  display:flex;
  align-items:center;
  gap:26px;
  height:52px;
}
.nav .logo{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:600;
  font-size:15px;
  letter-spacing:-0.01em;
  margin-right:auto;
}
.nav .logo img{width:20px; height:20px; border-radius:5px; display:block;}
.nav .links{display:flex; align-items:center; gap:22px;}
.nav .links a{
  font-size:13.5px;
  color:var(--text-2);
  transition:color .18s var(--ease);
}
.nav .links a:hover{color:var(--text-1);}
.nav .auth-link{font-size:13.5px; color:var(--text-2); transition:color .18s var(--ease);}
.nav .auth-link:hover{color:var(--text-1);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-primary{
  background:var(--accent);
  color:#fff;
  font-weight:500;
}
.btn-primary:hover{background:var(--accent-press);}
.btn-primary:active{transform:scale(0.98);}
.btn-secondary{
  background:var(--chip-flat-bg);
  color:var(--text-1);
  font-weight:500;
  border:1px solid var(--hairline);
}
.btn-secondary:hover{background:rgba(0,0,0,0.09);}
html[data-theme="dark"] .btn-secondary:hover{background:rgba(255,255,255,0.12);}
.btn-secondary:active{transform:scale(0.98);}
.btn-sm{padding:8px 16px; font-size:13.5px;}
.btn-lg{padding:14px 28px; font-size:16px;}

.link-arrow{
  color:var(--accent);
  font-size:16px;
  font-weight:400;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.link-arrow:hover{text-decoration:underline;}

/* burger (mobile) */
.burger{display:none;}

/* theme toggle (как в seller.proshe.ai) */
.theme-btn{
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background:transparent;
  color:var(--text-2);
  display:grid;
  place-items:center;
  cursor:pointer;
  flex:0 0 auto;
  transition:background-color .18s var(--ease), color .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.theme-btn:hover{background:var(--chip-flat-bg); color:var(--text-1);}
.theme-btn .sun{display:none;}
.theme-btn .moon{display:block;}
html[data-theme="dark"] .theme-btn .sun{display:block;}
html[data-theme="dark"] .theme-btn .moon{display:none;}

/* ---------- hero ---------- */
.hero{
  padding:118px 0 0;
  text-align:center;
}
.hero .eyebrow{
  display:inline-block;
  font-size:14px;
  font-weight:500;
  color:var(--accent);
  margin-bottom:14px;
}
.hero h1{
  margin:0 auto;
  max-width:820px;
  font-size:clamp(38px, 6.4vw, 72px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-0.03em;
  text-wrap:balance;
}
.hero .sub{
  margin:20px auto 0;
  max-width:600px;
  font-size:clamp(16px, 2vw, 19px);
  line-height:1.55;
  color:var(--text-2);
  letter-spacing:-0.01em;
  text-wrap:balance;
}
.hero .cta-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:30px;
  flex-wrap:wrap;
}
.hero .meta{
  margin-top:16px;
  font-size:13px;
  color:var(--text-3);
}

/* ---------- window mockups (product UI) ---------- */
.window{
  background:var(--app-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-modal);
  box-shadow:var(--shadow-window);
  overflow:hidden;
  text-align:left;
}
.window .chrome{
  display:flex;
  align-items:center;
  gap:7px;
  padding:11px 16px;
  background:var(--surface-1);
  border-bottom:1px solid var(--hairline);
}
.window .chrome i{width:11px; height:11px; border-radius:50%; display:block;}
.window .chrome i:nth-child(1){background:#FF5F57;}
.window .chrome i:nth-child(2){background:#FEBC2E;}
.window .chrome i:nth-child(3){background:#28C840;}
.window .chrome .addr{
  margin:0 auto;
  padding:4px 14px;
  border-radius:7px;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  color:var(--text-3);
  font-size:11.5px;
  max-width:280px;
  width:50%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.window .app{padding:18px;}

.hero-window{
  margin:56px auto 0;
  max-width:960px;
}

/* product topbar inside mockups */
.app .bar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.app .bar-title{font-size:15px; font-weight:600; letter-spacing:-0.01em;}
.seg{
  display:inline-flex;
  background:var(--seg-track);
  border-radius:10px;
  padding:2px;
  gap:2px;
}
.seg span{
  padding:4px 12px;
  border-radius:8px;
  font-size:11.5px;
  color:var(--text-2);
}
.seg span.on{
  background:var(--seg-on);
  color:var(--text-1);
  font-weight:500;
  box-shadow:0 1px 3px rgba(0,0,0,0.10);
}

/* KPI cards (like product kpi-card) */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-bottom:14px;
}
.kpi{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:13px 15px;
}
.kpi .k{font-size:10.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3);}
.kpi .v{font-size:19px; font-weight:600; letter-spacing:-0.02em; margin-top:5px; font-variant-numeric:tabular-nums;}
.kpi .d{font-size:11.5px; margin-top:3px; font-weight:500;}
.up{color:var(--green);}
.down{color:var(--red);}
.flat{color:var(--text-3);}

/* white card inside app */
.app-card{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:14px 16px;
}
.app-card .cap{font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:10px;}

/* apple-table (mock version of product table) */
.atable{width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px;}
.atable-wrap{
  border-radius:var(--radius-card);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  background:var(--surface-1);
}
.atable thead th{
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:left;
  padding:9px 12px;
  border-bottom:1px solid var(--border);
}
.atable td{
  padding:10px 12px;
  border-bottom:1px solid var(--hairline);
  color:var(--text-1);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.atable tbody tr:last-child td{border-bottom:0;}
.atable td.q{max-width:190px; overflow:hidden; text-overflow:ellipsis; font-weight:500;}
.atable td.mut{color:var(--text-3);}

.pillv{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
}
.pillv.up{background:rgba(52,199,89,0.12); color:#1E9E4A;}
.pillv.down{background:rgba(255,59,48,0.10); color:#D7261C;}
.pillv.flat{background:rgba(0,0,0,0.05); color:var(--text-3);}
.pillv.acc{background:rgba(47,124,246,0.10); color:#1E63D0;}

/* product thumbnails (mock product photos) */
.thumb{
  width:42px; height:42px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.thumb.sm{width:30px; height:30px; border-radius:8px;}
.t-blue{background:linear-gradient(135deg,#EAF2FF,#D6E5FE); color:#2F7CF6;}
.t-red{background:linear-gradient(135deg,#FFECE9,#FFDAD4); color:#E0453A;}
.t-teal{background:linear-gradient(135deg,#E2F7F0,#CDEFE3); color:#1FA37C;}
.t-purple{background:linear-gradient(135deg,#F1EBFF,#E3D9FE); color:#7A5AF8;}
.t-amber{background:linear-gradient(135deg,#FFF3DF,#FFE7C2); color:#C77800;}
.prod{display:flex; align-items:center; gap:10px; min-width:0;}
.prod .nm{
  font-weight:500;
  font-size:12.5px;
  color:var(--text-1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.prod .art{font-size:10.5px; color:var(--text-3); margin-top:1px;}

/* full-width screens */
.screen-full{margin-top:88px;}
.screen-full .copy{max-width:660px; margin-bottom:26px;}
.screen-full .copy .step,
.screen .copy .step{
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  margin-bottom:10px;
}
.screen-full .copy h3{
  margin:0 0 12px;
  font-size:clamp(22px, 2.6vw, 30px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-0.02em;
}
.screen-full .copy p{
  margin:0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-2);
}

/* positions filters mock */
.filters{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.f-search{
  flex:1;
  min-width:170px;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:8px 12px;
  font-size:12px;
  color:var(--text-3);
}
.f-select{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:8px 12px;
  font-size:12px;
  color:var(--text-2);
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.chipbar{display:flex; gap:6px; flex-wrap:wrap;}
.chipbar span{
  padding:6px 13px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:var(--surface-1);
  font-size:11.5px;
  color:var(--text-2);
}
.chipbar span.on{
  background:rgba(47,124,246,0.10);
  border-color:rgba(47,124,246,0.35);
  color:var(--accent);
  font-weight:500;
}

/* deepdive mock */
.dd-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.dd-cols{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:12px;}

/* steps */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:44px;
}
.stepc{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-modal);
  padding:28px 26px;
}
.stepc .n{
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(47,124,246,0.10);
  color:var(--accent);
  display:grid;
  place-items:center;
  font-weight:600;
  font-size:15px;
  margin-bottom:16px;
}
.stepc h3{margin:0 0 8px; font-size:16.5px; font-weight:600; letter-spacing:-0.01em;}
.stepc p{margin:0; font-size:13.5px; line-height:1.6; color:var(--text-2);}

.kpi-row.five{grid-template-columns:repeat(5, 1fr);}

/* positions mock */
.pos-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.pos-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.pos-name{
  font-size:13px;
  font-weight:600;
  letter-spacing:-0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.trend{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:600;
  padding:3px 9px;
  border-radius:999px;
}
.trend.up{background:rgba(52,199,89,0.12); color:#1E9E4A;}
.trend.flat{background:rgba(0,0,0,0.05); color:var(--text-3);}
.trend.down{background:rgba(255,59,48,0.10); color:#D7261C;}
.pos-med{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
}
.med-pill{
  font-size:15px;
  font-weight:700;
  padding:2px 11px;
  border-radius:999px;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.med-pill.ok{background:rgba(52,199,89,0.12); color:#1E9E4A;}
.med-pill.warn{background:rgba(255,149,0,0.14); color:#B36B00;}
.med-pill.bad{background:rgba(255,59,48,0.10); color:#D7261C;}
.pq{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--hairline);
  font-size:12.5px;
  color:var(--text-2);
}
.pq:last-child{border-bottom:0;}
.pq .q{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pq .r{display:flex; align-items:center; gap:9px; flex:0 0 auto;}
.dlt{font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums;}
.dlt.up{color:var(--green);}
.dlt.down{color:var(--red);}
.dlt.flat{color:var(--text-3);}
.pos-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11.5px;
  color:var(--text-3);
  white-space:nowrap;
}
.pos-status i{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--green);
  display:block;
}

/* task feed (подсказки) */
.task{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:11px 4px;
  border-bottom:1px solid var(--hairline);
  font-size:13px;
  line-height:1.5;
}
.task:last-child{border-bottom:0;}
.task .dot{flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:6px;}
.task .dot.red{background:var(--red);}
.task .dot.amber{background:var(--amber);}
.task .dot.green{background:var(--green);}
.task b{font-weight:600;}
.task .act{display:block; margin-top:3px; color:var(--accent); font-size:12.5px; font-weight:500;}

.kpi{min-width:0;}
.screen .kpi-row{grid-template-columns:repeat(2, 1fr);} /* narrow mock → 2×2 */

/* perks (детали: команда, тёмная тема, устройства) */
.perk-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:44px;
}
.perk{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-modal);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,0.03);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .perk:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift);}
}
.perk .txt{padding:26px 24px 20px;}
.perk h3{margin:0 0 8px; font-size:18px; font-weight:600; letter-spacing:-0.015em;}
.perk p{margin:0; font-size:13.5px; line-height:1.6; color:var(--text-2);}
.perk .vis{
  margin-top:auto;
  background:var(--app-bg);
  border-top:1px solid var(--hairline);
  padding:18px;
  min-height:196px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* team rows */
.team{display:flex; flex-direction:column; gap:8px; width:100%;}
.trow{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:8px 12px;
}
.tava{
  width:30px; height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:600;
  color:#fff;
  flex:0 0 auto;
}
.tava.a1{background:#2F7CF6;}
.tava.a2{background:#7A5AF8;}
.tava.a3{background:#1FA37C;}
.trow .tn{font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.trow .tr{margin-left:auto; flex:0 0 auto;}

/* dark theme mini */
.dark-mini{
  width:100%;
  background:#0B0B0D;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:14px;
}
.dark-mini .dbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.dark-mini .dtitle{color:rgba(255,255,255,0.92); font-size:12px; font-weight:600;}
.dark-mini .dseg{display:inline-flex; background:rgba(255,255,255,0.08); border-radius:8px; padding:2px; gap:2px;}
.dark-mini .dseg span{padding:3px 10px; border-radius:6px; font-size:10px; color:rgba(255,255,255,0.55);}
.dark-mini .dseg .on{background:#1C1C1E; color:rgba(255,255,255,0.92); font-weight:500;}
.dark-kpis{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.dkpi{
  background:#1C1C1E;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  padding:9px 11px;
}
.dkpi .k{font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,0.48);}
.dkpi .v{font-size:14px; font-weight:600; color:rgba(255,255,255,0.92); margin-top:3px; font-variant-numeric:tabular-nums;}
.dkpi .d{font-size:10px; margin-top:2px; font-weight:500;}

@media (max-width: 920px){
  .perk-grid{grid-template-columns:1fr;}
}

/* vs: старый способ / новый способ */
.vs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:44px;
}
.vs-col{
  border-radius:var(--radius-modal);
  padding:28px 26px;
  background:var(--surface-1);
  border:1px solid var(--hairline);
}
.vs-col.new{
  border-color:rgba(47,124,246,0.35);
  box-shadow:0 14px 36px rgba(47,124,246,0.10);
}
.vs-tag{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
}
.vs-col.new .vs-tag{color:var(--accent);}
.vs-col h3{
  margin:8px 0 14px;
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.02em;
}
.vs-item{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:13px 0;
  border-bottom:1px solid var(--hairline);
  font-size:14px;
  line-height:1.55;
  color:var(--text-2);
}
.vs-item:last-child{border-bottom:0; padding-bottom:2px;}
.vs-item .ic{
  flex:0 0 auto;
  width:22px; height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-top:1px;
}
.vs-item .ic.no{background:rgba(0,0,0,0.05); color:var(--text-3);}
.vs-item .ic.yes{background:rgba(52,199,89,0.12); color:#1E9E4A;}
.vs-item b{color:var(--text-1); font-weight:600;}
.vs-note{
  margin-top:26px;
  text-align:center;
  font-size:14px;
  color:var(--text-3);
}
@media (max-width: 920px){
  .vs-grid{grid-template-columns:1fr;}
}

/* lead modal */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,0.45);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.modal-overlay.on{display:flex;}
.modal{
  width:100%;
  max-width:440px;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-modal);
  box-shadow:var(--shadow-window);
  padding:32px 30px;
  position:relative;
  animation:modal-in .22s var(--ease) both;
}
@keyframes modal-in{from{opacity:0; transform:translateY(12px) scale(0.98);} to{opacity:1; transform:none;}}
.modal .close{
  position:absolute;
  top:16px; right:16px;
  width:30px; height:30px;
  border-radius:50%;
  border:0;
  background:var(--chip-flat-bg);
  color:var(--text-2);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.modal .close:hover{color:var(--text-1);}
.modal h3{margin:0 0 6px; font-size:22px; font-weight:700; letter-spacing:-0.02em;}
.modal .lead-sub{margin:0 0 22px; font-size:14px; line-height:1.55; color:var(--text-2);}
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:6px;}
.field input,
.field textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-control);
  background:var(--surface-2);
  color:var(--text-1);
  font:inherit;
  font-size:15px;
  padding:11px 13px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder{color:var(--text-3);}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(47,124,246,0.15);
}
.field textarea{resize:vertical; min-height:64px;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.modal .btn{width:100%; margin-top:6px;}
.modal .btn[disabled]{opacity:0.6; pointer-events:none;}
.modal-note{margin-top:14px; font-size:12px; color:var(--text-3); text-align:center;}
.modal-ok{text-align:center; padding:14px 0 6px;}
.modal-ok .ico{
  width:56px; height:56px;
  margin:0 auto 16px;
  border-radius:50%;
  background:rgba(52,199,89,0.14);
  color:#1E9E4A;
  display:grid;
  place-items:center;
}
html[data-theme="dark"] .modal-ok .ico{background:rgba(52,199,89,0.18); color:#6FE39B;}
.modal-ok h3{margin-bottom:8px;}
.modal-err{
  margin-top:12px;
  font-size:13px;
  color:var(--red);
  text-align:center;
  min-height:16px;
}

/* reviews */
.rev-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
  margin-top:44px;
}
.rev{
  grid-column:span 2;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-modal);
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,0.03);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .rev:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift);}
}
.rev:nth-child(4){grid-column:2 / span 2;}
.rev:nth-child(5){grid-column:4 / span 2;}
.rev .q{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:var(--text-2);
  letter-spacing:-0.005em;
  flex:1;
}
.rev .q b{color:var(--text-1); font-weight:600;}
.rev .who{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--hairline);
}
.rev .who .nm{font-size:13.5px; font-weight:600; color:var(--text-1);}
.rev .who .sub{font-size:12px; color:var(--text-3); margin-top:1px;}
.tava.a4{background:#C77800;}
.tava.a5{background:#E0453A;}
@media (max-width: 920px){
  .rev-grid{grid-template-columns:1fr;}
  .rev, .rev:nth-child(4), .rev:nth-child(5){grid-column:auto;}
}

/* footnote under plans */
.plans-foot{
  margin:18px auto 0;
  max-width:640px;
  text-align:center;
  font-size:12px;
  line-height:1.6;
  color:var(--text-3);
}

/* ---------- sections ---------- */
.section{padding:96px 0;}
.section.alt{background:var(--bg-alt);}
.sec-head{max-width:640px;}
.sec-head.center{margin:0 auto; text-align:center;}
.kicker{
  font-size:14px;
  font-weight:600;
  color:var(--accent);
  margin:0 0 10px;
}
.sec-head h2{
  margin:0;
  font-size:clamp(28px, 4.2vw, 48px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-0.025em;
  text-wrap:balance;
}
.sec-head .sub{
  margin:16px 0 0;
  font-size:17px;
  line-height:1.55;
  color:var(--text-2);
  letter-spacing:-0.01em;
}

/* pains */
.pain-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:44px;
}
.pain{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-modal);
  padding:28px 26px;
  box-shadow:0 1px 2px rgba(0,0,0,0.03);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .pain:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift);}
}
.pain .ico{
  width:44px; height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
}
.pain .ico.blue{background:rgba(47,124,246,0.10); color:var(--accent);}
.pain .ico.red{background:rgba(255,59,48,0.10); color:var(--red);}
.pain .ico.green{background:rgba(52,199,89,0.12); color:#1E9E4A;}
.pain .ico.amber{background:rgba(255,149,0,0.12); color:#C77800;}
.pain .ico.purple{background:rgba(122,90,248,0.10); color:#7A5AF8;}
.pain h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.015em;
}
.pain p{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-2);
  letter-spacing:-0.005em;
}

/* screens */
.screen{
  display:grid;
  grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
  margin-top:72px;
}
.screen:first-of-type{margin-top:56px;}
.screen.flip{grid-template-columns:minmax(0, 7fr) minmax(0, 4fr);}
.screen.flip .copy{order:2;}
.screen.flip .shot{order:1;}
.screen .copy .step{
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  margin-bottom:10px;
}
.screen .copy h3{
  margin:0 0 12px;
  font-size:clamp(22px, 2.6vw, 30px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-0.02em;
}
.screen .copy p{
  margin:0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-2);
}

/* video */
.video-card{
  margin:44px auto 0;
  max-width:940px;
  border-radius:var(--radius-modal);
  overflow:hidden;
  background:#0B0B0D;
  box-shadow:var(--shadow-window);
}
.video-card .ratio{
  position:relative;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
}
.video-card iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-card video, .video-card .video-el{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; background:#0B0B0D; display:block;}
.video-ph{text-align:center; color:#fff; padding:20px;}
.video-ph .play{
  width:68px; height:68px;
  margin:0 auto 16px;
  border-radius:50%;
  background:rgba(255,255,255,0.16);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
}
.video-ph .t{font-size:16px; font-weight:500;}
.video-ph .s{font-size:13px; margin-top:6px; color:rgba(255,255,255,0.55);}

/* case */
.case{max-width:840px; margin:0 auto; text-align:center;}
.case .quote{
  margin:0;
  font-size:clamp(21px, 3vw, 30px);
  line-height:1.35;
  font-weight:600;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.case .quote em{font-style:normal; color:var(--accent);}
.case .who{
  margin-top:24px;
  font-size:14px;
  color:var(--text-3);
}
.case-points{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:52px;
}
.case-points .cp{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:20px 22px;
  text-align:left;
}
.case-points .cp .t{font-size:15px; font-weight:600; letter-spacing:-0.01em;}
.case-points .cp .s{font-size:13.5px; color:var(--text-2); margin-top:6px; line-height:1.55;}

/* pricing */
.plans{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-top:44px;
}
.plan{
  position:relative;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-modal);
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,0.03);
}
.plan.pop{
  border-color:rgba(47,124,246,0.45);
  box-shadow:0 14px 36px rgba(47,124,246,0.12);
}
.plan .badge{
  position:absolute;
  top:-11px; left:50%;
  transform:translateX(-50%);
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  padding:4px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.plan .name{font-size:15px; font-weight:600;}
.plan .plan-tag{margin-top:3px; font-size:12.5px; color:var(--text-3); line-height:1.35;}
.plan .amount{
  margin-top:10px;
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.plan .amount small{font-size:.5em; font-weight:500; color:var(--text-3);}
.plan .plan-sec{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--hairline);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-3);
}
.plan ul{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.plan ul.plan-mods li{color:var(--text-3);}   /* модули — приглушённо (общие) */
.plan > ul:last-of-type{flex:1;}                /* лимиты тянут карту до равной высоты */
.plan li{
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size:13px;
  line-height:1.5;
  color:var(--text-2);
}
.plan li svg{flex:0 0 auto; margin-top:3px; color:var(--green);}
.plans-cta{
  margin-top:36px;
  text-align:center;
}
.plans-cta .note{margin-top:14px; font-size:13px; color:var(--text-3);}
.plans-common{
  margin:28px auto 0;
  max-width:640px;
  text-align:center;
  font-size:14px;
  line-height:1.6;
  color:var(--text-2);
}

/* ===== Пульс товаров (триаж-каталог) ===== */
.pulse-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.pcard{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-left:3px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:12px 14px;
}
.pcard.crit{border-left-color:var(--red);}
.pcard.warn{border-left-color:var(--amber);}
.pcard.ok{border-left-color:var(--green);}
.pcard .thumb{flex:0 0 auto;}
.pc-main{min-width:0; flex:1;}
.pc-nm{font-size:13.5px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pc-diag{
  margin-top:4px;
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pc-diag.red{color:var(--red);}
.pc-diag.amber{color:#C77800;}
html[data-theme="dark"] .pc-diag.amber{color:var(--amber);}
.pc-diag .dot{flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--text-3);}
.pc-diag .dot.red{background:var(--red);}
.pc-diag .dot.amber{background:var(--amber);}
.pc-diag .dot.green{background:var(--green);}
.pc-metric{flex:0 0 auto; text-align:right;}
.pc-metric .k{font-size:10px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3);}
.pc-metric .v{font-size:15px; font-weight:600; letter-spacing:-0.02em; margin-top:2px; font-variant-numeric:tabular-nums;}

/* ===== A/B-тест (спотлайт) ===== */
.ab-spot{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.ab-verdict{
  display:flex; align-items:center; gap:13px;
  background:linear-gradient(120deg, rgba(52,199,89,0.12), rgba(47,124,246,0.08));
  border:1px solid rgba(52,199,89,0.28);
  border-radius:var(--radius-card);
  padding:13px 16px;
  margin-bottom:14px;
}
.ab-trophy{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:rgba(52,199,89,0.16); color:#1E9E4A;
}
html[data-theme="dark"] .ab-trophy{background:rgba(52,199,89,0.20); color:#6FE39B;}
.ab-vt{font-size:15px; font-weight:700; letter-spacing:-0.01em;}
.ab-vs{margin-top:2px; font-size:12.5px; color:var(--text-2);}
.ab-vs b{color:var(--text-1); font-weight:700;}
.ab-cards{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px;}
.ab-card{
  position:relative;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:14px; text-align:center;
}
.ab-card.win{border-color:rgba(52,199,89,0.5); box-shadow:0 0 0 1px rgba(52,199,89,0.28) inset;}
.ab-badge{
  position:absolute; top:10px; right:10px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  color:#fff; background:var(--green);
  padding:3px 9px; border-radius:999px;
}
.ab-img{
  width:100%; aspect-ratio:3/4; max-height:132px;
  border-radius:12px; margin-bottom:10px;
  display:grid; place-items:center;
  font-size:34px; font-weight:800; letter-spacing:-0.02em; color:#fff;
}
.ab-img.a{background:linear-gradient(150deg,#8E9AAE,#6B7688);}
.ab-img.b{background:linear-gradient(150deg,#4A8DFF,#2F7CF6);}
.ab-cn{font-size:12px; color:var(--text-3);}
.ab-cm{margin-top:4px; font-size:13.5px; color:var(--text-2);}
.ab-cm b{font-size:17px; font-weight:700; color:var(--text-1); letter-spacing:-0.02em; font-variant-numeric:tabular-nums;}
.ab-feats{display:flex; flex-direction:column; gap:14px;}
.ab-feat{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:20px;
}
.ab-feat .ico{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; margin-bottom:14px;}
.ab-feat .ico.blue{background:rgba(47,124,246,0.10); color:var(--accent);}
.ab-feat .ico.purple{background:rgba(122,90,248,0.10); color:#7A5AF8;}
.ab-feat .ico.green{background:rgba(52,199,89,0.12); color:#1E9E4A;}
html[data-theme="dark"] .ab-feat .ico.blue{background:rgba(74,141,255,0.14); color:#7FB0FF;}
html[data-theme="dark"] .ab-feat .ico.purple{background:rgba(122,90,248,0.18); color:#B3A0FF;}
html[data-theme="dark"] .ab-feat .ico.green{background:rgba(52,199,89,0.16); color:#6FE39B;}
.ab-feat h3{margin:0 0 8px; font-size:17px; font-weight:600; letter-spacing:-0.01em;}
.ab-feat p{margin:0; font-size:13.5px; line-height:1.55; color:var(--text-2);}

/* footer */
.footer{
  border-top:1px solid var(--hairline);
  padding:28px 0 40px;
}
.footer .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--text-3);
}
.footer .brand{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text-2);}
.footer .brand img{width:16px; height:16px; border-radius:4px;}
.footer nav{display:flex; gap:18px;}
.footer nav a:hover{color:var(--text-1);}

/* mobile floating CTA */
.mcta{
  position:fixed;
  left:16px; right:16px;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  display:none;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.mcta.on{opacity:1; transform:none; pointer-events:auto;}
.mcta .btn{width:100%; box-shadow:0 14px 36px rgba(47,124,246,0.35);}

/* reveal on scroll */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .plans{grid-template-columns:repeat(2, 1fr);}
  .pain-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .kpi-row.five{grid-template-columns:repeat(2, 1fr);}
  .dd-cols{grid-template-columns:minmax(0, 1fr);}
  .screen, .screen.flip{grid-template-columns:1fr; gap:22px; margin-top:56px;}
  .screen.flip .copy{order:1;}
  .screen.flip .shot{order:2;}
  .case-points{grid-template-columns:1fr;}
  .kpi-row{grid-template-columns:repeat(2, 1fr);}
  .section{padding:72px 0;}
  .ab-spot{grid-template-columns:1fr; gap:22px;}
}
@media (max-width: 760px){
  .pain-grid{grid-template-columns:1fr;}
  .pos-grid{grid-template-columns:1fr;}
  .pulse-grid{grid-template-columns:1fr;}
  .atable-wrap{overflow-x:auto;}
  .nav .links{display:none;}
  .nav .row{height:50px; gap:14px;}
  .nav .logo{font-size:14px;}
  .nav .auth-link{font-size:13px;}
  .nav .btn-sm{padding:7px 13px; font-size:12.5px;}
  .hero{padding-top:96px;}
  .hero-window{margin-top:40px;}
  .window .app{padding:12px;}
  .atable td.mut, .atable th.mut{display:none;} /* hide SKU column */
  .mcta{display:block;}
}
@media (max-width: 480px){
  .kpi .v{font-size:15px;}
  .kpi{padding:10px 12px;}
  .hero .cta-row{gap:14px;}
  .plans{grid-template-columns:1fr;}
}