/* --- Base --- */
:root{
  --bg: #f7fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15,23,42,0.08);
  --sky: #339f73;
  --amber: #F59E0B;
  --red: #EF4444;
  --green: #10B981;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#F8FAFC, #F1F5F9 30%, #F8FAFC 100%);
}

.container{ width:min(1120px, 92vw); margin-inline:auto; }
a{ color:inherit; text-decoration:none }
p{ color:var(--muted); line-height:1.7 }
h1,h2,h3{ margin:0 0 .5rem 0 }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.1rem; border-radius:.9rem; border:1px solid transparent; font-weight:600; transition: all .2s ease; }
.btn-primary{ background: var(--sky); color:white; box-shadow: 0 8px 20px rgba(14,165,233,.25); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(14,165,233,.35) }
.btn-ghost{ border-color:var(--border); background:white }
.btn-ghost:hover{ background:#f8fafc }
.block{ display:block; width:100% }

/* Header */
.site-header{ position:sticky; top:0; z-index:30; backdrop-filter: saturate(1.2) blur(6px); background: rgba(255,255,255,.75); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0 }
.logo{ font-weight:800; letter-spacing:.1em; font-size:1.3rem }
.logo .fx{ color:var(--sky) }
.nav-links{ display:flex; gap:1.2rem }
.nav-links a{ color:#334155; font-weight:500 }
.nav-links a:hover{ color:#0f172a }

/* Hero */
.hero{ padding: 4.5rem 0 2rem 0 }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .9fr; gap:2rem; align-items:center }
.hero-copy h1{ font-size: clamp(32px, 5vw, 54px); line-height:1.05 }
.hero-copy .accent{ color:var(--sky) }
.lead{ margin:1rem 0 1.2rem }
.cta-row{ display:flex; gap:.8rem; flex-wrap:wrap }
.trust{ display:flex; gap:1.5rem; list-style:none; padding:0; margin:1rem 0 0 0; color:#334155 }
.trust li::before{ content:'•'; color:var(--sky); margin-right:.4rem }

.hero-cards{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem }
.fx-card{
  border:1px solid rgba(2,6,23,.06);
  border-radius:20px;
  padding:1rem;
  background:linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px rgba(2,6,23,.02) inset, 0 10px 30px rgba(2,6,23,.06), 0 4px 12px rgba(2,6,23,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fx-card:hover{ transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(2,6,23,.03) inset, 0 18px 46px rgba(2,6,23,.12), 0 8px 22px rgba(2,6,23,.08); border-color: rgba(2,6,23,.10); }
.fx-card.wide{ grid-column:1/3 }
.fx-card.gradient{ background: linear-gradient(160deg, #fff, #E0F2FE 55%, #fff); border-color: rgba(14,165,233,.25); }
.fx-card.glass{ background: rgba(255,255,255,.55); backdrop-filter: blur(14px); border-color: rgba(255,255,255,.7); box-shadow: 0 12px 34px rgba(2,6,23,.08); }
.fx-card.outline{ background:#fff; border:2px solid #E2E8F0; box-shadow:none }
.fx-card.elevated{ }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem; font-weight:600; color:#334155 }
.card-title{ font-size:1rem; margin-bottom:.25rem }
.pill{ font-size:.75rem; padding:.25rem .5rem; border-radius:.75rem; background:#f1f5f9; color:#0f172a }
.pill-warn{ background: rgba(245,158,11,.15); color:#92400e }
.pill-ok{ background: rgba(16,185,129,.14); color:#065f46 }

/* KPI + Spark */
.kpi .kpi-row{ display:flex; align-items:flex-end; gap:.6rem; margin:.2rem 0 .4rem 0 }
.kpi .kpi-num{ font-size:32px; font-weight:800; letter-spacing:-0.02em; color:#0f172a }
.kpi .kpi-sub{ color:#64748b; font-weight:600 }
.spark{ margin-top:.2rem; color:#339f73 }
.spark svg{ width:100%; height:28px }

/* Donut */
.donut .donut-wrap{ display:grid; place-items:center; padding:.25rem 0 .5rem 0 }
.donut svg{ width:96px; height:96px }
.donut circle.bg{ fill:none; stroke:#E2E8F0; stroke-width:3.5 }
.donut circle.meter{ fill:none; stroke:#339f73; stroke-width:3.5; stroke-linecap:round; transform: rotate(-90deg); transform-origin: 50% 50% }
.donut text{ font-size:8px; font-weight:800; fill:#0f172a }

/* Top Symbols */
.symbols .sym-row{ display:grid; grid-template-columns: 1fr 1fr auto; align-items:center; gap:.6rem; padding:.25rem 0 }
.symbols .meter{ height:8px; background:#E2E8F0; border-radius:999px; overflow:hidden }
.symbols .meter i{ display:block; height:100%; background:linear-gradient(90deg,#75ffc7,#339f73) }
.symbols .mini-link{ font-weight:700; color:#0EA5E9 }

/* Sections */
.section{ padding:4rem 0 }
.section.alt{ background:linear-gradient(180deg,#ffffff, #F8FAFC) }
.section-title{ font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 1.25rem }

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem }
.list{ padding:0; margin:0 0 1rem 0; list-style:none; color:var(--muted) }
.list li{ margin:.4rem 0 }

/* Integrations — mini cards */
.integrations{ display:grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap:12px }
@media(max-width:1024px){.integrations{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.integrations{grid-template-columns:1fr}}
.integration-card{ display:flex; align-items:flex-start; gap:10px; padding:14px; border-radius:16px; background:radial-gradient(120% 120% at 10% 0%, #fff 0%, #f8fbff 70%, #ffffff 100%); border:1px solid rgba(2,6,23,.08); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px rgba(2,6,23,.06); transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease }
.integration-card:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(2,6,23,.12); border-color:rgba(14,165,233,.25) }
.integration-card .icn{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#E6F4FE; color:#0EA5E9; box-shadow:0 6px 16px rgba(14,165,233,.18) inset; flex:0 0 auto }
.integration-card .icn svg{ width:22px; height:22px; fill:currentColor }
.integration-card .icn.tg{ background:#229ED9; color:#fff }
.integration-card .icn.wh{ background:#FDE68A; color:#92400e }
.integration-card .icn.csv{ background:#E2F5EA; color:#047857 }
.integration-card .txt h4{ margin:.1rem 0 .15rem 0; font-size:15px; font-weight:700; color:#0f172a }
.integration-card .txt p{ margin:0; font-size:13px; color:#475569; line-height:1.5 }

/* Steps, FAQ, Contact */
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
.step{ background:white; border:1px solid var(--border); border-radius:18px; padding:1rem; box-shadow: 0 8px 20px rgba(0,0,0,.04) }
.step-num{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background: #E0F2FE; color:#0369a1; font-weight:700; margin-bottom:.4rem }
.faq details{ border:1px solid var(--border); border-radius:14px; padding:.8rem 1rem; background:white; box-shadow: 0 8px 18px rgba(0,0,0,.03) }
.faq details+details{ margin-top:.6rem }
.faq summary{ cursor:pointer; font-weight:600; color:#0f172a }

/* Contact form */
.contact-form{ background:white; border:1px solid var(--border); border-radius:18px; padding:1rem; box-shadow: 0 8px 20px rgba(0,0,0,.04) }
.field{ display:flex; flex-direction:column; gap:.35rem }
.field input, .field textarea{ border:1px solid #E2E8F0; border-radius:.8rem; padding:.8rem .9rem; font: inherit; outline:none; transition: border-color .2s ease, box-shadow .2s ease; background:white }
.field input:focus, .field textarea:focus{ border-color:#93c5fd; box-shadow: 0 0 0 4px rgba(14,165,233,.10) }
.form-note{ color:#475569; margin:.6rem 0 0 0 }
.hp{ display:none !important }
.form-alert{ margin-top:.8rem; font-weight:600 }

/* Footer */
.site-footer{ padding:2rem 0; border-top:1px solid var(--border); background:rgba(255,255,255,.7); backdrop-filter: blur(6px) }
.footer{ display:grid; gap:.5rem; align-items:center; grid-template-columns: 1fr auto }
.footer-links{ display:flex; gap:1rem }
.small{ font-size:.85rem; color:#64748b }

/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:60 }
.modal.open{ display:flex }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.45); backdrop-filter: blur(2px) }
.modal-panel{ position:relative; width:min(720px, 92vw); max-height:86vh; overflow:auto; background:white; border-radius:18px; padding:1.2rem; box-shadow: 0 22px 60px rgba(2,6,23,.38); border:1px solid rgba(2,6,23,.10) }
.modal-title{ margin: .25rem 0 1rem 0; font-size:1.25rem }
.modal-close{ position:absolute; top:.5rem; right:.6rem; width:36px; height:36px; border-radius:999px; border:1px solid rgba(2,6,23,.12); background:#fff; cursor:pointer; font-size:22px; line-height:1; display:grid; place-items:center }
.modal-close:hover{ background:#f8fafc }

/* Floating Telegram Button */
.fab-telegram{ position: fixed; right: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 999px; background: #229ED9; display: grid; place-items: center; color: white; box-shadow: 0 8px 20px rgba(34,158,217,.35); z-index: 70 }
.fab-telegram svg{ width:48px; height:48px }
.fab-telegram:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(34,158,217,.5) }

/* Responsive */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr }
  .hero-cards{ grid-template-columns: 1fr }
  .fx-card.wide{ grid-column:auto }
  .grid-3{ grid-template-columns: 1fr 1fr }
  .steps{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
  .nav-links{ display:none }
  .grid-3, .grid-2{ grid-template-columns: 1fr }
}