/* =========================================================
   LeadHunter.uz — design system
   ========================================================= */

:root{
  --blue-50:  #eef7fd;
  --blue-100: #d9edfb;
  --blue-200: #b3dbf7;
  --blue-300: #7fc3f0;
  --blue-400: #4fb0ea;
  --blue-500: #2e9fe3;   /* brand */
  --blue-600: #1c86c9;
  --blue-700: #166aa1;
  --blue-800: #124f78;
  --blue-900: #0e3a58;

  --navy-900: #0a1f33;
  --navy-800: #102944;
  --navy-700: #16334f;

  --ink-900: #0d1b2a;
  --ink-700: #33475b;
  --ink-500: #5c7085;
  --ink-300: #8ea0b3;
  --ink-100: #eef2f6;

  --surface-0: #ffffff;
  --surface-1: #f7fafd;
  --surface-2: #eef4fa;

  --green-500: #21b573;
  --amber-500: #f2a93b;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 2px 8px rgba(14, 58, 88, .06);
  --shadow-md: 0 8px 24px rgba(14, 58, 88, .10);
  --shadow-lg: 0 20px 48px rgba(14, 58, 88, .14);
  --shadow-brand: 0 14px 34px rgba(46, 159, 227, .30);

  --container: 1200px;
  --header-h: 84px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Safety default for every inline icon SVG: sized in ems so it never
   explodes to its 300x150 intrinsic default. Any context that needs a
   different size overrides width/height explicitly (more specific rule). */
svg{ width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }

body{
  margin:0;
  font-family: "Inter","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color: var(--ink-900);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input, textarea{ font-family: inherit; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 480px){ .container{ padding: 0 18px; } }
.container--wide{ max-width: 1360px; }

section{ position: relative; }

.section-pad{ padding: 96px 0; }
@media (max-width: 900px){ .section-pad{ padding: 64px 0; } }
@media (max-width: 480px){ .section-pad{ padding: 48px 0; } }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  padding: 7px 16px;
  border-radius: 999px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background: var(--blue-500);
}

h1.h-hero{
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
h2.h-section{
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
h3.h-card{
  font-size: 21px;
  font-weight: 750;
  color: var(--ink-900);
}
p.lead{
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-500);
}

.text-center{ text-align:center; }
.grad-text{
  background: linear-gradient(100deg, var(--blue-500), var(--blue-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15.5px;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
  color:#fff;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(46,159,227,.4); }
.btn-ghost{
  background: transparent;
  color: var(--ink-900);
  border-color: rgba(13,27,42,.14);
}
.btn-ghost:hover{ border-color: var(--blue-500); color: var(--blue-600); background: var(--blue-50); }
.btn-light{
  background: #fff;
  color: var(--blue-700);
}
.btn-light:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-tg{
  background: linear-gradient(135deg,#38b7f2,#1b9de0);
  color:#fff;
  box-shadow: 0 10px 26px rgba(30,160,230,.35);
}
.btn-tg:hover{ transform: translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding: 11px 20px; font-size: 14px; }
.btn svg{ width:16px; height:16px; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky;
  top:0;
  z-index: 500;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(13,27,42,.06);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgba(14,58,88,.08); }

.header-inner{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 36px;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height: 30px; width:auto; max-width:none; object-fit:contain; }

.main-nav{ display:flex; align-items:center; gap: 2px; flex-shrink:0; }
.main-nav > li{ position:relative; }
.main-nav > li > a, .main-nav .nav-drop > button{
  display:flex; align-items:center; gap:6px;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-700);
  background:none; border:none;
  white-space:nowrap;
  transition: background .2s ease, color .2s ease;
}
.main-nav > li > a:hover,
.main-nav .nav-drop > button:hover,
.main-nav > li > a.active{
  background: var(--blue-50);
  color: var(--blue-700);
}
.nav-drop{ position:relative; }
.nav-drop svg{ transition: transform .25s var(--ease); width:12px; height:12px; }
.nav-drop:hover svg{ transform: rotate(180deg); }
.nav-drop-menu{
  position:absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 280px;
  background:#fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(13,27,42,.06);
  padding: 10px;
  opacity:0;
  visibility:hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{
  opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-700);
}
.nav-drop-menu a:hover{ background: var(--blue-50); color: var(--blue-700); }
.nav-drop-menu .dot{
  width: 34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size: 15px; flex: none;
  background: var(--blue-50); color: var(--blue-600);
}

.header-actions{ display:flex; align-items:center; gap: 16px; flex-shrink:0; }
.header-phone{
  font-weight:700; font-size: 15px; color: var(--ink-900); white-space:nowrap;
  padding-left:16px; border-left:1px solid var(--ink-100);
}
.header-phone span{ display:block; font-weight:500; font-size:12px; color: var(--ink-300); }
.header-btn-group{ display:flex; align-items:center; gap:10px; }

.burger{
  display:none;
  width: 44px; height:44px;
  border-radius: 12px;
  border: 1px solid rgba(13,27,42,.12);
  background:#fff;
  align-items:center; justify-content:center;
  flex-direction: column; gap:5px;
}
.burger span{ width:20px; height:2px; background: var(--ink-900); border-radius:2px; transition: all .25s var(--ease); }
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position: fixed; inset: var(--header-h) 0 0 0;
  background: #fff;
  z-index: 400;
  padding: 20px 24px 40px;
  overflow-y:auto;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 4px;
  font-size: 18px; font-weight:700;
  border-bottom: 1px solid var(--ink-100);
}
.mobile-nav .msub{ padding-left: 16px; }
.mobile-nav .msub a{ font-size:15px; font-weight:600; color: var(--ink-500); padding: 12px 4px; }
.mobile-nav .mob-cta{ margin-top: 24px; display:flex; flex-direction:column; gap:12px; }

@media (max-width: 1080px){
  .main-nav{ display:none; }
  .header-phone{ display:none; }
  .burger{ display:flex; }
  .header-actions .btn{ display:none; }
}
@media (max-width: 480px){
  .header-inner{ gap:8px; }
  .header-actions{ gap:6px; }
  .brand img{ height:24px; }
  .lang-switch-btn{ padding:5px 7px 5px 6px; gap:4px; }
  .lang-switch-btn .lc-code{ display:none; }
}
@media (max-width: 420px){
  .brand img{ height:22px; }
}
@media (max-width: 350px){
  .brand img{ height:19px; }
  .burger{ width:38px; height:38px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding: 88px 0 100px;
  overflow:hidden;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(46,159,227,.16), transparent 60%),
    radial-gradient(700px 460px at -5% 30%, rgba(46,159,227,.10), transparent 60%),
    var(--surface-0);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items:center;
}
.hero-grid > *{ min-width:0; }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.hero-badge{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--ink-100); box-shadow: var(--shadow-sm);
  padding: 9px 14px; border-radius: 999px; font-size:13.5px; font-weight:700; color: var(--ink-700);
}
.hero-badge .ic{ color: var(--green-500); }
.hero-badge .ic svg{ width:16px; height:16px; }
.hero h1{ margin-top:20px; }
.hero .lead{ margin-top: 20px; max-width: 540px; }
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.hero-stats{ display:flex; gap:34px; margin-top:44px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-size: 30px; font-weight:800; color: var(--ink-900); }
.hero-stat span{ font-size: 13.5px; color: var(--ink-500); font-weight:600; }

@media (max-width: 960px){
  .hero{ padding: 44px 0 56px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 40px; }
  .hero-visual{ width:100%; max-width: 480px; margin: 0 auto; }
  .hero .lead{ max-width: none; }
  .hero-stats{ gap:24px; }
}
@media (max-width: 480px){
  .hero-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px 12px; }
  .hero-stat b{ font-size:21px; }
  .hero-stat span{ font-size:11px; line-height:1.25; display:block; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
}

.hero-visual{ position:relative; }
.hero-visual .stage{
  position:relative;
  border-radius: var(--radius-xl);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(13,27,42,.06);
  background: #fff;
}
.hero-visual img{ width:100%; }
.float-card{
  position:absolute;
  background:#fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 14px 18px;
  display:flex; align-items:center; gap:12px;
  font-weight:700; font-size: 14px;
  animation: floaty 5s ease-in-out infinite;
}
.float-card .ic{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex:none;
}
.float-card .ic svg{ width:18px; height:18px; }
.float-card small{ display:block; font-weight:600; color: var(--ink-300); font-size:11.5px; }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
@media (max-width: 640px){
  .float-card{ padding: 8px 13px; font-size:12.5px; gap:7px; max-width: calc(62% - 8px); }
  .float-card .ic{ width:26px; height:26px; }
  .float-card small{ display:none; }
  .float-card{ top:-16px !important; left:-8px !important; }
}

/* ---------- FUNNEL ANIMATION (home hero) ---------- */
.funnel-card{
  background:#fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  border:1px solid rgba(13,27,42,.06); padding: 30px 26px 26px; position:relative; overflow:hidden;
}
.funnel-card::before{
  content:""; position:absolute; top:-90px; right:-90px; width:240px; height:240px; border-radius:50%;
  background: radial-gradient(circle, rgba(46,159,227,.16), transparent 70%); pointer-events:none;
}
.funnel-card-head{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color: var(--ink-500); margin-bottom:20px; position:relative; }
.funnel-card-head .fc-dot{ width:8px; height:8px; border-radius:50%; background: var(--green-500); box-shadow:0 0 0 4px rgba(33,181,115,.18); animation: fnPulseDot 2s ease-in-out infinite; flex:none; }
.board-online{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color: var(--green-500); background: rgba(33,181,115,.1); padding:5px 10px 5px 8px; border-radius:999px; }
.board-online i{ width:6px; height:6px; border-radius:50%; background: var(--green-500); animation: fnPulseDot 2s ease-in-out infinite; }

/* ---------- KANBAN BOARD ---------- */
.board-columns{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.board-col{
  background: var(--surface-1); border-radius:12px; padding:10px 7px 12px; min-height:150px; min-width:0; overflow:hidden;
  animation: boardColOn 12s linear infinite; transition: background .3s;
}
.board-col-head span{ min-width:0; }
.board-col:nth-child(2){ animation-delay:-2.28s; }
.board-col:nth-child(3){ animation-delay:-4.68s; }
.board-col:nth-child(4){ animation-delay:-7.68s; }
.board-col-head{ display:flex; align-items:center; justify-content:space-between; padding:0 3px; margin-bottom:9px; }
.board-col-head span{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color: var(--ink-300); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-col-head b{ font-size:11px; font-weight:800; color: var(--ink-500); background:#fff; border-radius:6px; padding:1px 6px; flex:none; margin-left:4px; }
.board-card{
  background:#fff; border-radius:9px; padding:9px 10px 8px; margin-bottom:7px;
  box-shadow: 0 1px 2px rgba(13,27,42,.05); border:1px solid rgba(13,27,42,.05);
}
.board-card b{ display:block; font-size:10px; font-weight:700; color: var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-card i{ display:block; margin-top:6px; height:3px; border-radius:3px; background: var(--ink-100); overflow:hidden; }
.board-card i::after{ content:""; display:block; height:100%; width:58%; background: linear-gradient(90deg, var(--blue-400), var(--blue-600)); border-radius:3px; }
.board-card.dim{ opacity:.5; }
.board-card.board-card--hi{ border-color: rgba(46,159,227,.35); box-shadow: 0 4px 12px rgba(46,159,227,.16); }
.board-card.board-card--hi i::after{ width:78%; }

.board-chip{
  position:absolute; top:-15px; height:32px; padding: 0 10px 0 4px; border-radius:10px;
  background:#fff; box-shadow: 0 10px 22px rgba(14,58,88,.22), 0 0 0 1px rgba(13,27,42,.06);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  animation: boardChipMove 12s linear infinite;
  z-index:3;
  transform-origin:center center;
}
.board-chip .fc-ava{
  width:22px; height:22px; border-radius:7px; flex:none;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-700)); color:#fff;
  font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.board-chip .fc-amt{ font-size:11px; font-weight:800; color: var(--ink-900); animation: boardAmtOut 12s linear infinite; }
.board-chip .fc-done{
  font-size:11px; font-weight:800; color: var(--green-500); display:flex; align-items:center; gap:4px;
  position:absolute; left:26px; right:10px; opacity:0; animation: boardDoneIn 12s linear infinite;
}
.board-chip .fc-done svg{ width:13px; height:13px; flex:none; }
.board-chip .fc-drag{
  position:absolute; right:-10px; top:-9px; width:23px; height:23px;
  filter: drop-shadow(0 3px 6px rgba(14,58,88,.4));
  opacity:0; z-index:4; pointer-events:none; transform-origin:20% 10%;
  animation: boardCursorGrab 12s linear infinite;
}
.board-chip .fc-drag svg{ width:100%; height:100%; display:block; }
.board-chip .fc-drag::after{
  content:""; position:absolute; left:0; top:2px; width:14px; height:14px; border-radius:50%;
  background: rgba(46,159,227,.28); z-index:-1; opacity:0;
  animation: boardCursorPulse 12s linear infinite;
}

.board-toast{
  position:absolute; top:-14px; right:18px; background:#fff; border-radius:14px; box-shadow: var(--shadow-md);
  padding:9px 14px 9px 10px; display:flex; align-items:center; gap:9px; white-space:nowrap; z-index:4;
  opacity:0; animation: boardToast 8s ease-in-out infinite;
}
.board-toast .ic{ width:30px; height:30px; border-radius:9px; background: var(--blue-50); color: var(--blue-600); display:flex; align-items:center; justify-content:center; flex:none; }
.board-toast .ic svg{ width:15px; height:15px; }
.board-toast b{ display:block; font-size:12.5px; }
.board-toast small{ display:block; font-size:10.5px; font-weight:600; color: var(--ink-300); margin-top:1px; }

.board-chart{
  position:absolute; left:-18px; bottom:-20px; background:#fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding:12px 14px; z-index:4; animation: floaty 5s ease-in-out infinite; animation-delay: .3s;
}
.board-chart b{ display:block; font-size:10px; font-weight:700; color: var(--ink-300); text-transform:uppercase; letter-spacing:.02em; margin-bottom:9px; white-space:nowrap; }
.board-bars{ display:flex; align-items:flex-end; gap:5px; height:34px; }
.board-bars i{ display:block; width:9px; border-radius:3px 3px 1px 1px; background: var(--ink-100); height: var(--h); animation: boardBarGrow .8s var(--ease) backwards; }
.board-bars i.hi{ background: linear-gradient(180deg, var(--blue-400), var(--blue-600)); }
.board-bars i:nth-child(1){ animation-delay:.05s; }
.board-bars i:nth-child(2){ animation-delay:.15s; }
.board-bars i:nth-child(3){ animation-delay:.25s; }
.board-bars i:nth-child(4){ animation-delay:.35s; }
.board-bars i:nth-child(5){ animation-delay:.45s; }

@keyframes fnPulseDot{ 0%,100%{ box-shadow:0 0 0 4px rgba(33,181,115,.18);} 50%{ box-shadow:0 0 0 8px rgba(33,181,115,.06);} }
@keyframes boardColOn{
  0%,16%{ background: var(--blue-50); box-shadow: inset 0 0 0 1.5px var(--blue-200); }
  24%,100%{ background: var(--surface-1); box-shadow: inset 0 0 0 0 transparent; }
}
@keyframes boardChipMove{
  0%,14%{ left:12.5%; transform: translateX(-50%) scale(1); opacity:1; }
  15%{ left:12.5%; transform: translateX(-50%) scale(1.12); opacity:1; }
  19%{ left:37.5%; transform: translateX(-50%) scale(1.12); opacity:1; }
  20%,34%{ left:37.5%; transform: translateX(-50%) scale(1); opacity:1; }
  35%{ left:37.5%; transform: translateX(-50%) scale(1.12); opacity:1; }
  39%{ left:62.5%; transform: translateX(-50%) scale(1.12); opacity:1; }
  40%,58%{ left:62.5%; transform: translateX(-50%) scale(1); opacity:1; }
  60%{ left:62.5%; transform: translateX(-50%) scale(1.12); opacity:1; }
  64%{ left:87.5%; transform: translateX(-50%) scale(1.12); opacity:1; }
  65%,92%{ left:87.5%; transform: translateX(-50%) scale(1); opacity:1; }
  97%,100%{ left:87.5%; transform: translateX(-50%) scale(1); opacity:0; }
}
@keyframes boardAmtOut{
  0%,79%{ opacity:1; }
  84%,92%{ opacity:0; }
  97%,100%{ opacity:1; }
}
@keyframes boardDoneIn{
  0%,79%{ opacity:0; transform: translateX(4px); }
  84%,92%{ opacity:1; transform: translateX(0); }
  97%,100%{ opacity:0; transform: translateX(4px); }
}
@keyframes boardCursorGrab{
  0%,13%{ opacity:0; transform: translate(4px,-4px) scale(.8); }
  14%{ opacity:1; transform: translate(4px,-4px) scale(1); }
  15%{ opacity:1; transform: translate(0,0) scale(.88); }
  18%{ opacity:1; transform: translate(0,0) scale(.88); }
  19%{ opacity:1; transform: translate(0,0) scale(1); }
  20%{ opacity:0; transform: translate(4px,-4px) scale(.8); }
  33%{ opacity:0; transform: translate(4px,-4px) scale(.8); }
  34%{ opacity:1; transform: translate(4px,-4px) scale(1); }
  35%{ opacity:1; transform: translate(0,0) scale(.88); }
  38%{ opacity:1; transform: translate(0,0) scale(.88); }
  39%{ opacity:1; transform: translate(0,0) scale(1); }
  40%{ opacity:0; transform: translate(4px,-4px) scale(.8); }
  58%{ opacity:0; transform: translate(4px,-4px) scale(.8); }
  60%{ opacity:1; transform: translate(4px,-4px) scale(1); }
  61%{ opacity:1; transform: translate(0,0) scale(.88); }
  63%{ opacity:1; transform: translate(0,0) scale(.88); }
  64%{ opacity:1; transform: translate(0,0) scale(1); }
  65%,100%{ opacity:0; transform: translate(4px,-4px) scale(.8); }
}
@keyframes boardCursorPulse{
  0%,13.5%{ opacity:0; transform:scale(.4); }
  15%{ opacity:1; transform:scale(1.6); }
  18%{ opacity:0; transform:scale(2); }
  33.5%{ opacity:0; transform:scale(.4); }
  35%{ opacity:1; transform:scale(1.6); }
  38%{ opacity:0; transform:scale(2); }
  58.5%{ opacity:0; transform:scale(.4); }
  60%{ opacity:1; transform:scale(1.6); }
  63%{ opacity:0; transform:scale(2); }
  100%{ opacity:0; transform:scale(.4); }
}
@keyframes boardToast{
  0%,4%{ opacity:0; transform: translateY(-8px); }
  10%,38%{ opacity:1; transform: translateY(0); }
  46%,100%{ opacity:0; transform: translateY(-8px); }
}
@keyframes boardBarGrow{
  0%{ transform: scaleY(0); }
  100%{ transform: scaleY(1); }
}
@media (max-width: 640px){
  .board-chart{ left:-10px; bottom:-16px; padding:9px 11px; }
  .board-chart b{ font-size:9px; margin-bottom:6px; }
  .board-bars{ height:26px; }
  .board-bars i{ width:7px; }
  .board-toast{ right:6px; top:-10px; padding:6px 10px 6px 7px; }
  .board-toast .ic{ width:22px; height:22px; }
  .board-toast .ic svg{ width:12px; height:12px; }
  .board-toast b{ font-size:11px; }
  .board-toast small{ display:none; }
}
@media (max-width: 480px){
  .board-col-head span{ font-size:8px; }
  .board-col-head b{ font-size:9.5px; padding:1px 5px; }
  .board-card{ padding:7px 8px 6px; }
  .board-card b{ font-size:8.5px; }
  .board-card.dim{ display:none; }
}
@media (max-width: 400px){
  .board-col-head span{ font-size:7px; }
  .board-columns{ gap:5px; }
  .board-col{ padding:8px 5px 10px; }
}

/* logo strip */
.logo-strip{ padding: 40px 0; border-top:1px solid var(--ink-100); border-bottom:1px solid var(--ink-100); }
.logo-strip .lbl{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-300); text-align:center; margin-bottom: 26px; }
.logo-strip-row{ display:flex; align-items:center; justify-content:center; gap: 20px; flex-wrap:wrap; }
.logo-strip-row .logo-chip{ display:flex; align-items:center; justify-content:center; height:56px; width:150px; background:#fff; border:1px solid var(--ink-100); border-radius: var(--radius-md); padding:10px 20px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.logo-strip-row .logo-chip:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.logo-strip-row .logo-chip img{ max-height: 26px; max-width: 108px; width:auto; height:auto; object-fit:contain; }

/* =========================================================
   PRODUCT GRID (home)
   ========================================================= */
.section-head{ max-width: 640px; margin: 0 auto 56px; }
.section-head.left{ margin: 0 0 48px; }

.product-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 1080px){ .product-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .product-grid{ grid-template-columns: 1fr;} }

.product-card{
  background:#fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display:flex; flex-direction:column; gap:16px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position:relative;
  overflow:hidden;
}
.product-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease);
}
.product-card:hover::before{ transform: scaleX(1); }
.product-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.product-card .pc-icon{
  width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff;
  box-shadow: 0 10px 22px -6px rgba(14,58,88,.35);
  transition: transform .3s var(--ease);
}
.product-card:hover .pc-icon{ transform: scale(1.08) rotate(-4deg); }
.product-card p{ color: var(--ink-500); font-size: 14.5px; line-height:1.55; }
.product-card .pc-link{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  font-weight:700; font-size: 14.5px; color: var(--blue-600);
}
.product-card .pc-link svg{ width:16px; height:16px; transition: transform .25s var(--ease); }
.product-card:hover .pc-link svg{ transform: translateX(4px); }

/* icon color variants */
.bg-amo{ background: linear-gradient(135deg,#7ed0f5,#2e9fe3); }
.bg-b24{ background: linear-gradient(135deg,#4fd1e8,#1587c9); }
.bg-ms{ background: linear-gradient(135deg,#5a7ff0,#2e50c9); }
.bg-ipt{ background: linear-gradient(135deg,#21c78a,#0e9d6b); }

/* =========================================================
   STEPS / PROCESS
   ========================================================= */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; counter-reset: step; position:relative; }
@media (max-width: 900px){ .steps{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr;} }
.steps::before{
  content:""; position:absolute; top:40px; left:12.5%; right:12.5%; height:2px;
  background: linear-gradient(90deg, var(--blue-300), var(--blue-500), var(--blue-300));
  opacity:.35; z-index:0;
}
@media (max-width: 900px){ .steps::before{ display:none; } }
.step{ position:relative; padding: 30px 24px 24px; background: var(--surface-1); border-radius: var(--radius-lg); transition: transform .3s var(--ease), box-shadow .3s var(--ease); z-index:1; }
.step:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step::before{
  counter-increment: step;
  content: counter(step);
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
  color:#fff; font-weight:800; font-size:17px;
  margin-bottom: 18px;
}
.step h3{ font-size:17px; margin-bottom:8px; }
.step p{ color: var(--ink-500); font-size:14.5px; line-height:1.55; }

/* =========================================================
   WHY US
   ========================================================= */
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 900px){ .why-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .why-grid{ grid-template-columns: 1fr;} }
.why-item{ display:flex; gap:16px; padding: 8px 0; transition: transform .3s var(--ease); }
.why-item:hover{ transform: translateX(4px); }
.why-item .ic{
  width:48px; height:48px; border-radius:14px; flex:none;
  background: var(--blue-50); color: var(--blue-600);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.why-item .ic svg{ width:22px; height:22px; }
.why-item:hover .ic{ background: var(--blue-600); color:#fff; transform: scale(1.06); }
.why-item h4{ font-size:16.5px; font-weight:750; margin-bottom:6px; }
.why-item p{ font-size:14px; color: var(--ink-500); line-height:1.5; }

/* =========================================================
   PRICING
   ========================================================= */
.price-note{
  display:flex; gap:12px; align-items:flex-start;
  background: var(--blue-50); border:1px solid var(--blue-100);
  border-radius: var(--radius-md); padding: 16px 20px; margin: 0 0 40px;
  font-size: 14px; color: var(--blue-800); line-height:1.55;
}
.price-note b{ color: var(--blue-900); }
.price-note svg{ flex:none; width:20px; height:20px; margin-top:1px; color: var(--blue-600); }

.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items:stretch; }
@media (max-width: 980px){ .pricing-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .pricing-grid{ grid-template-columns: 1fr;} }
.pricing-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 1100px){ .pricing-grid.cols-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .pricing-grid.cols-4{ grid-template-columns: 1fr;} }

.price-card{
  background:#fff; border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  padding: 32px 26px; display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position:relative;
}
.price-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card.featured{
  border: 2px solid var(--blue-500);
  box-shadow: var(--shadow-brand);
  background: linear-gradient(180deg, var(--blue-50) 0%, #fff 22%);
  transform: scale(1.02);
}
.price-card.featured:hover{ transform: translateY(-6px) scale(1.02); }
@media (max-width: 980px){ .price-card.featured{ transform:none; } .price-card.featured:hover{ transform: translateY(-6px); } }
.price-card .badge-pop{
  position:absolute; top:-13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
  color:#fff; font-size:12px; font-weight:800; letter-spacing:.03em;
  padding: 6px 16px; border-radius:999px; text-transform:uppercase;
  box-shadow: 0 8px 18px rgba(46,159,227,.35);
}
.price-card h3{ font-size:19px; font-weight:800; }
.price-card .price-sub{ font-size:13.5px; color: var(--ink-500); margin-top:4px; }
.price-card .price-amount{ margin: 22px 0 6px; display:flex; align-items:baseline; gap:6px; }
.price-card .price-amount b{ font-size: 34px; font-weight:800; color: var(--ink-900); }
.price-card .price-amount span{ font-size: 13.5px; color: var(--ink-500); font-weight:600; }
.price-card .price-from{ font-size:12.5px; color: var(--ink-300); margin-bottom: 20px; }
.price-feats{ display:flex; flex-direction:column; gap:12px; margin: 6px 0 26px; flex:1; }
.price-feats li{ display:flex; gap:10px; font-size:14px; color: var(--ink-700); line-height:1.4; }
.price-feats li svg{ flex:none; width:18px; height:18px; color: var(--green-500); margin-top:1px; }

/* =========================================================
   ADD-ONS & DISCOUNT BAND (tariff extras)
   ========================================================= */
.addon-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
@media (max-width: 900px){ .addon-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .addon-grid{ grid-template-columns:1fr; } }
.addon-card{ display:flex; align-items:flex-start; gap:14px; background:#fff; border:1px solid var(--ink-100); border-radius: var(--radius-md); padding:18px; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.addon-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.addon-card .ic{ width:42px; height:42px; border-radius:12px; background: var(--blue-50); color: var(--blue-600); display:flex; align-items:center; justify-content:center; font-size:19px; flex:none; }
.addon-card b{ display:block; font-size:14.5px; margin-bottom:3px; }
.addon-card span{ font-size:13px; color: var(--ink-500); font-weight:600; }

.discount-band{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:20px; }
.discount-card{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--ink-100); border-radius: var(--radius-md); padding:18px 26px; box-shadow: var(--shadow-sm); }
.discount-card .pct{ width:52px; height:52px; border-radius:50%; background: var(--blue-50); color: var(--blue-700); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex:none; }
.discount-card b{ display:block; font-size:14.5px; }
.discount-card span{ font-size:12.5px; color: var(--ink-500); }

/* =========================================================
   CALLFLOW PRICE CALCULATOR
   ========================================================= */
.cf-calc{
  max-width: 760px; margin: 44px auto 0; background:#fff;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  border: 1px solid var(--ink-100); padding: 8px;
}
.cf-calc-step{ display:flex; gap:18px; padding: 22px 24px; }
.cf-calc-step + .cf-calc-step{ border-top: 1px solid var(--ink-100); }
.cf-calc-num{
  flex:none; width:32px; height:32px; border-radius:10px;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
  color:#fff; font-weight:800; font-size:14.5px;
  display:flex; align-items:center; justify-content:center;
}
.cf-calc-body{ flex:1; min-width:0; }
.cf-calc-body h4{ font-size:15.5px; font-weight:750; margin-bottom:14px; }

.cf-users-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cf-stepper-group{ display:flex; align-items:center; border:1px solid var(--ink-100); border-radius:12px; overflow:hidden; }
.cf-stepper{ width:40px; height:40px; border:none; background: var(--surface-1); font-size:18px; font-weight:700; color: var(--blue-700); }
.cf-stepper:hover{ background: var(--blue-50); }
.cf-users-row input{
  width:60px; height:40px; border:none; border-left:1px solid var(--ink-100); border-right:1px solid var(--ink-100);
  text-align:center; font-size:16px; font-weight:800; color: var(--ink-900);
  -moz-appearance:textfield;
}
.cf-users-row input::-webkit-outer-spin-button, .cf-users-row input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cf-presets{ display:flex; gap:8px; flex-wrap:wrap; }
.cf-preset{ padding:9px 16px; border-radius:999px; border:1px solid var(--ink-100); background:#fff; font-weight:700; font-size:13.5px; color: var(--ink-700); transition: all .2s ease; }
.cf-preset:hover, .cf-preset.is-active{ background: var(--blue-50); border-color: var(--blue-300); color: var(--blue-700); }

.cf-radio-group{ display:flex; flex-direction:column; gap:10px; }
.cf-radio-card{
  display:flex; align-items:center; gap:14px; cursor:pointer;
  border:1.5px solid var(--ink-100); border-radius: var(--radius-md);
  padding: 14px 16px; transition: border-color .2s ease, background .2s ease;
  position:relative;
}
.cf-radio-card:hover{ border-color: var(--blue-300); }
.cf-radio-card.is-active{ border-color: var(--blue-500); background: var(--blue-50); }
.cf-radio-card input{ accent-color: var(--blue-600); width:17px; height:17px; flex:none; }
.cf-radio-text{ flex:1; display:flex; flex-direction:column; gap:2px; }
.cf-radio-text b{ font-size:14.5px; font-weight:750; }
.cf-radio-text small{ font-size:12.5px; color: var(--ink-500); font-weight:500; }
.cf-radio-price{ flex:none; text-align:right; font-size:16px; font-weight:800; color: var(--blue-700); display:flex; flex-direction:column; }
.cf-radio-price small{ font-size:11px; color: var(--ink-300); font-weight:600; }
.cf-discount-pill{ flex:none; background: var(--green-500); color:#fff; font-size:12.5px; font-weight:800; padding:5px 11px; border-radius:999px; }

.cf-calc-total{ background: var(--surface-1); border-radius: var(--radius-lg); padding: 22px 24px; margin: 8px 16px 16px; }
.cf-calc-breakdown{ font-size:13.5px; color: var(--ink-500); font-weight:600; margin-bottom:8px; }
.cf-calc-sum{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.cf-calc-sum span{ font-size:14px; color: var(--ink-700); font-weight:700; }
.cf-calc-sum b{ font-size:28px; font-weight:800; color: var(--ink-900); }
@media (max-width: 560px){
  .cf-calc-step{ flex-direction:column; padding:18px; }
  .cf-users-row{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   FAQ (accordion)
   ========================================================= */
.faq-list{ display:flex; flex-direction:column; gap: 14px; max-width: 820px; margin: 0 auto; }
.faq-item{ background: var(--surface-1); border-radius: var(--radius-md); overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 20px 24px; background:none; border:none; text-align:left;
  font-size: 16px; font-weight:700; color: var(--ink-900);
}
.faq-q .plus{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm); position:relative;
  transition: transform .3s var(--ease);
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background: var(--blue-600); border-radius:2px;
}
.faq-q .plus::before{ width:12px; height:2px; }
.faq-q .plus::after{ width:2px; height:12px; transition: transform .25s var(--ease); }
.faq-item.is-open .faq-q .plus::after{ transform: rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a-inner{ padding: 0 24px 22px; color: var(--ink-500); font-size: 14.5px; line-height:1.6; }

/* =========================================================
   LEAD FORM SECTION
   ========================================================= */
.lead-section{
  background: linear-gradient(135deg, var(--navy-900), var(--blue-800) 130%);
  border-radius: var(--radius-xl);
  padding: 56px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center;
  color:#fff;
  position:relative; overflow:hidden;
}
.lead-section > *{ min-width:0; }
.lead-section::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 90% 0%, rgba(255,255,255,.10), transparent 60%);
}
.lead-section .eyebrow{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color:#dff1fc; }
.lead-section .eyebrow::before{ background:#7fd4ff; }
.lead-section h2{ color:#fff; margin-top:16px; }
.lead-section p.lead{ color: rgba(255,255,255,.72); margin-top:14px; }
.lead-copy-points{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.lead-copy-points li{ display:flex; gap:10px; font-size:14.5px; color: rgba(255,255,255,.86); }
.lead-copy-points svg{ color:#7fe0b8; flex:none; width:18px; height:18px; margin-top:1px; }
.lead-form-wrap{
  background:#fff; border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-lg); color: var(--ink-900); min-height: 340px;
  display:flex; flex-direction:column; justify-content:center;
}
.lead-form-wrap .lf-fallback{ text-align:center; color: var(--ink-500); font-size:14px; padding: 20px 0; }
@media (max-width: 940px){
  .lead-section{ grid-template-columns:1fr; padding: 36px 22px; border-radius: var(--radius-lg); }
}

/* =========================================================
   PAGE HERO (inner pages)
   ========================================================= */
.page-hero{
  padding: 56px 0 46px;
  background: linear-gradient(180deg, var(--surface-1), #fff);
  border-bottom: 1px solid var(--ink-100);
}
.breadcrumbs{ display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--ink-300); font-weight:600; margin-bottom:18px; flex-wrap:wrap; }
.breadcrumbs a:hover{ color: var(--blue-600); }
.page-hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center; }
.page-hero-grid > *{ min-width:0; }
@media (max-width: 900px){ .page-hero-grid{ grid-template-columns:1fr; } }
.product-hero-logo{ display:flex; align-items:center; gap:14px; margin-bottom: 18px; }
.product-hero-logo img{ height: 34px; width:auto; }
.product-hero-visual{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); border:1px solid var(--ink-100); }

/* =========================================================
   FEATURE BLOCKS (alternating image/text)
   ========================================================= */
.feature-stack{ max-width: 800px; margin: 0 auto; text-align:center; }
.feature-stack .feature-list{ text-align:left; max-width:520px; margin-left:auto; margin-right:auto; }
.feature-stack .pill-tag{ display:inline-flex; }
.feature-stack + .feature-stack{ margin-top: 96px; }
@media (max-width: 900px){ .feature-stack + .feature-stack{ margin-top:56px; } }
.feature-media{ margin-top: 32px; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); border:1px solid var(--ink-100); position:relative; }
.feature-media--plain{ background:none; border:none; box-shadow:none; border-radius:0; overflow:visible; }
.feature-media--plain img{ filter: drop-shadow(0 24px 40px rgba(14,58,88,.16)); }

/* ---------- click-to-call annotation (amoCRM "call in one click") ---------- */
.call-hotspot{ position:absolute; width:0; height:0; z-index:4; }
.call-ring{
  position:absolute; left:0; top:0; width:36px; height:36px; margin:-18px 0 0 -18px;
  border-radius:50%; border:2px solid var(--blue-500); opacity:0;
  animation: callRing 4s ease-out infinite;
}
.call-ring--2{ animation-delay: .35s; border-color: var(--green-500); }
@keyframes callRing{
  0%,68%{ transform: scale(.3); opacity:0; }
  72%{ transform: scale(.4); opacity:.75; }
  92%{ transform: scale(1.9); opacity:0; }
  100%{ transform: scale(1.9); opacity:0; }
}
.call-cursor{
  position:absolute; left:0; top:0; width:30px; height:30px;
  filter: drop-shadow(0 4px 10px rgba(14,58,88,.4));
  animation: callClick 4s ease-in-out infinite;
}
.call-cursor svg{ width:100%; height:100%; display:block; }
@keyframes callClick{
  0%,58%{ transform: translate(26px,20px) scale(1); }
  70%{ transform: translate(2px,0px) scale(.8); }
  78%,90%{ transform: translate(2px,0px) scale(1); }
  100%{ transform: translate(26px,20px) scale(1); }
}
.call-tooltip{
  position:absolute; left:0; top:0; transform: translate(-14px,-46px);
  background: var(--ink-900); color:#fff; font-size:11.5px; font-weight:700;
  padding:6px 11px; border-radius:8px; white-space:nowrap;
  opacity:0; animation: callTooltip 4s ease-in-out infinite;
}
.call-tooltip::after{ content:""; position:absolute; left:20px; bottom:-4px; width:8px; height:8px; background: var(--ink-900); transform: rotate(45deg); }
@keyframes callTooltip{
  0%,66%{ opacity:0; transform: translate(-14px,-40px); }
  74%,90%{ opacity:1; transform: translate(-14px,-46px); }
  100%{ opacity:0; transform: translate(-14px,-40px); }
}

.call-callout{
  max-width: 460px; margin: -10px auto 0; display:flex; align-items:flex-start; gap:14px;
  background:#fff; border:1px solid var(--ink-100); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-md); position:relative;
}
.call-callout .cc-icon{
  width:42px; height:42px; border-radius:12px; flex:none; font-size:19px;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  animation: callPulseIcon 2s ease-in-out infinite;
}
.call-callout .cc-icon svg{ width:20px; height:20px; }
@keyframes callPulseIcon{ 0%,100%{ box-shadow:0 0 0 0 rgba(46,159,227,.35); } 50%{ box-shadow:0 0 0 8px rgba(46,159,227,0); } }
.call-callout b{ display:block; font-size:14.5px; }
.call-callout span{ display:block; font-size:12.5px; color: var(--ink-500); margin-top:3px; line-height:1.45; }
@media (max-width: 640px){ .call-callout{ margin-top:16px; } .call-hotspot{ transform: scale(.85); } }
.feature-list{ margin-top: 22px; display:flex; flex-direction:column; gap:14px; }
.feature-list li{ display:flex; gap:12px; font-size:15px; color: var(--ink-700); line-height:1.5; }
.feature-list li svg{ flex:none; width:20px; height:20px; color: var(--blue-600); margin-top:1px; }

/* =========================================================
   TESTIMONIALS / CASES
   ========================================================= */
.case-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
@media (max-width: 980px){ .case-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .case-grid{ grid-template-columns:1fr;} }
.case-card{
  background:#fff; border:1px solid var(--ink-100); border-radius: var(--radius-lg);
  padding: 28px; display:flex; flex-direction:column; gap:16px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.case-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.case-tag{ align-self:flex-start; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background: var(--blue-50); color: var(--blue-700); padding:6px 12px; border-radius:999px; }
.case-metrics{ display:flex; gap: 22px; }
.case-metrics b{ display:block; font-size:24px; font-weight:800; color: var(--blue-700); }
.case-metrics span{ font-size:12px; color: var(--ink-500); font-weight:600; }
.case-card p{ font-size:14.5px; color: var(--ink-500); line-height:1.55; }
.case-foot{ margin-top:auto; display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--ink-100); }
.case-avatar{ width:40px; height:40px; border-radius:50%; background: linear-gradient(135deg, var(--blue-400), var(--blue-700)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; flex:none; }
.case-foot b{ display:block; font-size:14px; }
.case-foot span{ font-size:12.5px; color: var(--ink-300); }

/* =========================================================
   TEAM / ABOUT
   ========================================================= */
.stat-band{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 900px){ .stat-band{ grid-template-columns: repeat(2,1fr); gap:16px;} }
@media (max-width: 420px){ .stat-band{ grid-template-columns: 1fr; } }
.stat-box{ text-align:center; padding: 30px 16px; background:var(--surface-1); border-radius: var(--radius-lg); }
.stat-box b{ display:block; font-size: 36px; font-weight:800; color: var(--blue-700); }
.stat-box span{ font-size:13.5px; color: var(--ink-500); font-weight:600; }

.value-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
@media (max-width: 700px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{ padding: 26px; border-radius: var(--radius-lg); background:#fff; border:1px solid var(--ink-100); }
.value-card .ic{ width:46px;height:46px;border-radius:13px; background:var(--blue-50); color:var(--blue-600); display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:14px; }
.value-card .ic svg{ width:22px; height:22px; }
.value-card h4{ font-size:16.5px; margin-bottom:6px; }
.value-card p{ font-size:14px; color:var(--ink-500); line-height:1.5; }

.partner-band{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.partner-badge{ display:flex; align-items:center; justify-content:center; gap:12px; background:#fff; border:1px solid var(--ink-100); border-radius: var(--radius-md); height:64px; width:170px; padding: 10px 22px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.partner-badge:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.partner-badge img{ max-height:28px; max-width:126px; width:auto; height:auto; object-fit:contain; }
.partner-badge b{ font-size:13.5px; }

/* =========================================================
   CONTACTS PAGE
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items:start; }
.contact-grid > *{ min-width:0; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ display:flex; gap:16px; padding: 22px; background:#fff; border:1px solid var(--ink-100); border-radius: var(--radius-md); margin-bottom:16px; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
@media (max-width: 480px){ .contact-card{ padding:16px; gap:12px; } .contact-card .ic{ width:40px; height:40px; font-size:18px; } .contact-card .ic svg{ width:19px; height:19px; } }
.contact-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.contact-card .ic{ width:48px; height:48px; border-radius:14px; background: var(--blue-50); color: var(--blue-600); display:flex; align-items:center; justify-content:center; font-size:21px; flex:none; }
.contact-card .ic svg{ width:22px; height:22px; }
.contact-card b{ display:block; font-size: 16px; margin-bottom:2px; }
.contact-card span{ font-size: 13.5px; color: var(--ink-500); }
.map-embed{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); border:1px solid var(--ink-100); height: 320px; margin-top: 8px; }
.map-embed iframe{ width:100%; height:100%; border:0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--navy-900); color: rgba(255,255,255,.78); padding: 72px 0 28px; position:relative; }
.site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--blue-400), var(--green-500), var(--blue-400)); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.10); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand img{ height:28px; filter: brightness(0) invert(1); margin-bottom:16px; }
.footer-brand p{ font-size:14px; line-height:1.6; color: rgba(255,255,255,.55); max-width:280px; }
.footer-col h5{ color:#fff; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14.5px; color: rgba(255,255,255,.62); transition: color .2s ease; }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:10px; margin-top: 18px; }
.footer-social a{ width:38px; height:38px; border-radius:10px; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition: background .2s ease; }
.footer-social a:hover{ background: var(--blue-500); }
.footer-bottom{ padding-top: 26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color: rgba(255,255,255,.42); }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }
[data-reveal="zoom"]{ transform: scale(.94) translateY(0); }
[data-reveal="zoom"].is-visible{ transform: scale(1) translateY(0); }
[data-reveal="left"]{ transform: translateX(-32px); }
[data-reveal="left"].is-visible{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(32px); }
[data-reveal="right"].is-visible{ transform: translateX(0); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .float-card{ animation:none; }
  html{ scroll-behavior:auto; }
  .board-chip, .board-col, .board-toast, .board-bars i, .fc-dot, .fc-drag, .fc-drag::after, .fc-amt, .fc-done, .board-online i{ animation:none !important; }
  .board-chip{ left:87.5%; transform: translateX(-50%) scale(1); }
  .fc-drag, .fc-drag::after{ opacity:0; }
  .fc-amt{ opacity:0; }
  .fc-done{ opacity:1; }
  .board-toast{ opacity:1; transform: translateY(0); }
  .board-bars i{ transform: scaleY(1); }
  .call-ring, .call-cursor, .call-tooltip, .call-callout .cc-icon{ animation:none !important; }
  .call-cursor{ transform: translate(2px,0px) scale(1); }
  .call-ring{ transform: scale(1.1); opacity:.4; }
  .call-tooltip{ opacity:1; transform: translate(-14px,-46px); }
}

/* =========================================================
   MISC
   ========================================================= */
.divider-soft{ height:1px; background: linear-gradient(90deg, transparent, var(--ink-100), transparent); margin: 0; }
.bg-surface{ background: var(--surface-1); }
.pill-tag{ display:inline-flex; padding:5px 12px; background: var(--blue-50); color: var(--blue-700); border-radius:999px; font-size:12.5px; font-weight:700; }

.sticky-cta{
  position: fixed; bottom: 20px; left:50%; transform: translateX(-50%);
  z-index: 300; display:none; gap:10px; align-items:center;
  background:#fff; box-shadow: var(--shadow-lg); border-radius:999px;
  padding: 10px; border: 1px solid var(--ink-100);
}
.sticky-cta.is-visible{ display:flex; }
@media (max-width: 700px){
  .sticky-cta{ left:16px; right:16px; transform:none; width:auto; justify-content:center; }
}

.lang-switch{ position:relative; flex-shrink:0; }
.lang-switch-btn{
  display:flex; align-items:center; gap:6px; background: var(--surface-1); border:1px solid transparent;
  border-radius:999px; padding:6px 10px 6px 8px; cursor:pointer; font-family:inherit;
  transition: background .15s ease, border-color .15s ease;
}
.lang-switch-btn:hover{ background: var(--ink-100); }
.lang-switch.is-open .lang-switch-btn{ background:#fff; border-color: var(--ink-100); box-shadow: var(--shadow-sm); }
.lang-switch-btn .lc-flag svg{ width:20px; height:14px; display:block; border-radius:2px; }
.lang-switch-btn .lc-code{ font-size:12.5px; font-weight:800; color: var(--ink-500); letter-spacing:.02em; }
.lang-switch-btn .lc-chevron{ display:flex; width:12px; height:12px; color: var(--ink-300); transition: transform .2s ease; }
.lang-switch-btn .lc-chevron svg{ width:100%; height:100%; }
.lang-switch.is-open .lang-switch-btn .lc-chevron{ transform: rotate(180deg); }

.lang-switch-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:172px; background:#fff;
  border-radius:14px; box-shadow: var(--shadow-lg); border:1px solid var(--ink-100); padding:6px;
  opacity:0; visibility:hidden; transform: translateY(-6px); pointer-events:none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index:400;
}
.lang-switch.is-open .lang-switch-menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.lang-switch-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  font-size:13.5px; font-weight:650; color: var(--ink-500); white-space:nowrap;
}
.lang-switch-item svg{ width:22px; height:15px; border-radius:2px; flex:none; display:block; }
.lang-switch-item:hover{ background: var(--surface-1); }
.lang-switch-item.active{ background: var(--blue-50, #eaf4fd); color: var(--blue-700); font-weight:800; }

.lang-switch--mobile{ margin: 4px 0 2px; }
.lang-switch--mobile .lang-switch-btn{ width:100%; justify-content:space-between; padding:10px 12px; }
.lang-switch--mobile .lang-switch-menu{
  position:static; margin-top:6px; box-shadow:none; border-color: var(--ink-100);
  opacity:1; visibility:visible; transform:none; pointer-events:auto; display:none;
}
.lang-switch--mobile.is-open .lang-switch-menu{ display:block; }
.lang-switch--mobile.is-open .lang-switch-btn .lc-chevron{ transform: rotate(180deg); }