:root{
  --bg: #061C0B;
  --bg-2:#041E0B;
  --card:#0A2213;
  --text:#EAF7EE;
  --muted:#BEEFD2;
  --accent:#1BFF74; /* neon green */
  --accent-2:#17FF6E;
  --shadow: 0 0 40px rgba(27,255,116,.15);
  --radius:18px;
  --maxw: 1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text); background: radial-gradient(1200px 800px at 80% -10%, rgba(27,255,116,.08) 0%, rgba(27,255,116,0) 60%),
                      radial-gradient(800px 600px at -10% 30%, rgba(27,255,116,.06) 0%, rgba(27,255,116,0) 60%),
                      linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); padding:0 20px; margin:0 auto}

/* Header */
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background:rgba(6,28,11,.6); border-bottom:1px solid rgba(27,255,116,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px}
.logo{display:flex; align-items:center; gap:12px}
.logo img{height:30px; width:auto; display:block; filter:drop-shadow(0 0 12px rgba(27,255,116,.3))}
.logo span{font-weight:800; letter-spacing:.2px}
.menu{display:flex; align-items:center; gap:20px}
.menu a{opacity:.9}
.menu a:hover{opacity:1; color:var(--accent)}
.cta{
  padding:10px 16px; border-radius:12px; background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#041E0B; font-weight:700; box-shadow:0 0 0 2px rgba(27,255,116,.15) inset, var(--shadow);
}
.burger{display:none; background:transparent; border:1px solid rgba(27,255,116,.3); color:var(--text);
  padding:8px 10px; border-radius:10px}

/* === Мобільне меню: однакові відступи та drop-down === */
@media (max-width:920px){
  .menu{display:none}
  .burger{display:block}

  .menu.open{
    display:flex; position:absolute; left:16px; right:16px; top:68px;
    flex-direction:column; gap:8px; padding:12px;
    background:#0B2013; border:1px solid rgba(27,255,116,.15);
    border-radius:14px; box-shadow:var(--shadow)
  }

  /* однаковий вигляд для всіх пунктів */
  .menu.open a,
  .menu.open .dropbtn,
  .menu.open .cta{
    display:block; width:100%;
    padding:10px 12px; border-radius:10px; text-align:left;
  }
  .menu.open .cta{ text-align:center; }

  /* дропдаун у мобільному — статичний блок */
  .menu.open .dropdown{ width:100%; }
  .menu.open .dropdown-menu{
    position:static; display:none; margin-top:6px; width:100%; padding:6px 0; border-radius:10px;
  }
  .menu.open .dropdown.open .dropdown-menu{ display:block; }
}

/* Hero */
.hero{padding:96px 0 64px; position:relative; overflow:hidden}
.hero .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.kicker{color:var(--muted); text-transform:uppercase; letter-spacing:.18em; font-size:.8rem}
h1{font-size: clamp(32px, 5vw, 56px); line-height:1.05; margin:10px 0 16px}
.lead{font-size: clamp(16px, 2vw, 18px); opacity:.9; max-width:58ch}
.hero-cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.btn{
  padding:12px 18px; border-radius:12px; border:1px solid rgba(27,255,116,.25); background:#0A2213; color:var(--text)
}
.btn:hover{border-color:var(--accent); box-shadow:0 0 24px rgba(27,255,116,.2)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#061C0B; font-weight:700}

.panel{
  background:linear-gradient(180deg,#0A2213, #081F12);
  border:1px solid rgba(27,255,116,.15); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)
}
/* Simple generative SVG background (no text, no logo) */
.hero-art{
  aspect-ratio: 4 / 3; border-radius:var(--radius); overflow:hidden; position:relative
}
.hero-art svg{width:100%; height:100%; display:block}
.glow{
  position:absolute; inset:-60px; background: radial-gradient(closest-side, rgba(27,255,116,.22), transparent 70%);
  filter: blur(30px); pointer-events:none; animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.4} }

/* Sections */
section{padding:80px 0}
h2{font-size: clamp(26px, 3.8vw, 40px); margin:0 0 12px}
.muted{opacity:.8; max-width:65ch}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px}
.card{
  background:#0B2013; border:1px solid rgba(27,255,116,.15); border-radius:16px; padding:18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px
}
.chip{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--accent)}
.chip svg{width:18px; height:18px}
@media (max-width:1024px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .hero .grid{grid-template-columns:1fr} .cards{grid-template-columns:1fr} }

/* CTA */
.cta-band{
  background:linear-gradient(180deg,#0C2315,#081F12); border:1px solid rgba(27,255,116,.18);
  border-radius:20px; padding:32px; box-shadow:var(--shadow); display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap
}

/* Footer */
footer{padding:28px 0 60px; opacity:.9}
.foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot small{opacity:.7}

/* розмір лого у футері */
footer .logo img { height:150px; width:auto; }

/* футер в один ряд */
footer .foot{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; text-align:center;
}
footer .logo{ flex:1; display:flex; align-items:center; }
footer .socials{
  flex:1; display:flex; justify-content:center; gap:20px; margin:0;
}
footer .socials a{ color:var(--muted); transition: color .25s ease, transform .25s ease; }
footer .socials a:hover{ color:var(--accent); transform: translateY(-2px); }
footer .socials svg{ width:28px; height:28px; display:block; }
footer small{ flex:1; text-align:right; opacity:.7; white-space:nowrap; }

/* Dropdown base */
.dropdown{ position:relative; }
.dropbtn{
  background:transparent; border:none; color:inherit; font:inherit; cursor:pointer; opacity:.9; padding:0;
}
.dropbtn:hover{ opacity:1; color:var(--accent); }

/* hidden list */
.dropdown-menu{
  display:none; position:absolute; top:100%; left:0;
  background:#0B2013; border:1px solid rgba(27,255,116,.15); border-radius:10px;
  box-shadow:var(--shadow); min-width:220px; padding:10px 0; z-index:100;
}
.dropdown-menu a{ display:block; padding:10px 16px; color:var(--text); opacity:.85; }
.dropdown-menu a:hover{ background:rgba(27,255,116,.08); color:var(--accent); opacity:1; }

/* показувати при відкритті */
.dropdown.open .dropdown-menu{ display:block; }

/* Use-cases — cards with screenshots */
#use-cases { padding:72px 0; }
#use-cases .case-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:24px;
}
@media (max-width:1024px){ #use-cases .case-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  #use-cases .case-grid{ grid-template-columns:1fr; } }

#use-cases .case{
  background:#0B2013; border:1px solid rgba(27,255,116,.18); border-radius:16px;
  overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
#use-cases .case:hover{ transform: translateY(-2px); box-shadow:0 10px 30px rgba(27,255,116,.10); }
#use-cases .case .shot{ aspect-ratio: 4 / 3; background:#081F12; border-bottom:1px solid rgba(27,255,116,.12); overflow:hidden; }
#use-cases .case .shot img{ width:100%; height:100%; display:block; object-fit:cover; transform: translateZ(0); }
#use-cases .case .case-meta{ padding:14px 16px 16px; }
#use-cases h3{ margin:0 0 6px; font-size: clamp(16px, 2.2vw, 18px); }
#use-cases .case .case-meta p{ margin:0; opacity:.85; }

/* FAQ (accordion) */
#faq{ padding:80px 0; }
#faq h2{ margin:0 0 16px; }
.acc{ display:grid; gap:14px; }
.acc-item{
  background:#0B2013; border:1px solid rgba(27,255,116,.18); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); transition: box-shadow .2s ease, transform .2s ease;
}
.acc-item:hover{ box-shadow:0 12px 32px rgba(27,255,116,.10); transform: translateY(-1px); }
.acc-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; background:linear-gradient(180deg,#0C2315,#0A2013);
  color:var(--text); border:0; cursor:pointer; font-weight:600; text-align:left;
}
.acc-btn:hover{ color:var(--accent); }
.acc-icon{ position:relative; width:22px; height:22px; flex:0 0 22px; }
.acc-icon::before, .acc-icon::after{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; background:var(--accent);
  transform:translate(-50%,-50%); border-radius:2px;
}
.acc-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease; padding:0 22px; background:#0B2013; }
.acc-panel p{ margin:0 0 16px; opacity:.9; line-height:1.45; }
.acc-item.open .acc-panel{ max-height:300px; padding:0 22px 18px; }
.acc-item.open .acc-btn{ color:var(--accent); }
.acc-item.open .acc-icon::after{ opacity:0; }

@media (max-width:640px){
  .acc-btn{ padding:16px 18px; }
  .acc-panel{ padding:0 18px; }
  .acc-item.open .acc-panel{ padding:0 18px 16px; }
}

/* Менший заголовок для сторінки Google-відгуки */
.smaller-title { font-size: clamp(26px, 4vw, 44px); }

/* ===== Problems Section ===== */
#problems { padding: 80px 0 40px; }
#problems h2 { font-size: clamp(26px, 3.8vw, 40px); margin-bottom: 20px; color: var(--accent); }
.problem-list { list-style:none; padding-left:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.problem-list li{
  position:relative; padding-left:28px; line-height:1.5; color:var(--text); opacity:.9;
}
.problem-list li::before{
  content:"•"; position:absolute; left:0; color:var(--accent); font-size:20px; line-height:1;
}

/* ===== Solutions Section ===== */
#solutions { padding: 40px 0 60px; }
#solutions h2 { font-size: clamp(26px, 3.8vw, 40px); margin-bottom:8px; color: var(--accent); }
.solution-list{ list-style:none; padding-left:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.solution-list li{
  position:relative; padding-left:30px; line-height:1.5; color:var(--text); opacity:.95;
}
.solution-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; width:20px; display:inline-block;
}

/* ===== Case Studies ===== */
#case-studies { padding:72px 0; }
#case-studies h2 { font-size: clamp(26px, 3.8vw, 40px); margin-bottom:8px; color: var(--accent); }
#case-studies .case-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:24px;
}
@media (max-width:1024px){ #case-studies .case-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ #case-studies .case-grid{ grid-template-columns:1fr; } }
#case-studies .case{
  background:#0B2013; border:1px solid rgba(27,255,116,.18); border-radius:16px; padding:18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; transition: transform .18s ease, box-shadow .18s ease;
}
#case-studies .case:hover{ transform: translateY(-2px); box-shadow:0 10px 30px rgba(27,255,116,.10); }
#case-studies .shot img{ width:100%; border-radius:12px; display:block; }
#case-studies .case-meta h3{ margin:6px 0 4px; font-size: clamp(18px, 2.2vw, 20px); }
#case-studies .case-meta p{ opacity:.9; line-height:1.4; }

/* --- Дрібні мобільні вирівнювання --- */
@media (max-width: 768px) {
  .container, .hero.container, .form-wrap { padding-left:16px; padding-right:16px; }
  .hero .grid > div:first-child { padding-top:12px; }
  .form-card { margin-left:0; margin-right:0; }
}

/* щоб бургер не перекривався шарами і точно клікався */
.burger { position: relative; z-index: 60; }
/* === Компактні відступи на мобільних === */
@media (max-width: 640px){
  /* Герой-блок: менше «повітря» зверху/знизу */
  .hero{
    padding:56px 0 40px;
  }
  .hero .grid{
    gap:20px;               /* було 40px */
    grid-template-columns:1fr;
  }
  h1{
    margin:6px 0 10px;      /* було 10px 0 16px */
  }
  .lead{
    margin:0;               /* інколи браузер додає дефолтні відступи */
  }
  .hero-cta{
    margin-top:14px;        /* було 22px */
    gap:10px;
  }
  .hero-art{
    margin-top:10px;        /* трохи нижче від тексту */
  }

  /* Усі секції: зменшити базові вертикальні відступи */
  section{
    padding:56px 0;         /* було 80px 0 */
  }

  /* Карточки/сітки */
  .cards{ gap:14px; margin-top:18px; }
  #use-cases .case-grid,
  #case-studies .case-grid{ gap:16px; }

  /* Футер трохи компактніший */
  footer{ padding:22px 0 40px; }
}
/* === Компактний футер для мобільних === */
@media (max-width: 640px) {
  footer {
    padding: 32px 0 48px;
  }

  footer .foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  footer .logo {
    justify-content: center;
  }

  footer .socials {
    justify-content: center;
    gap: 18px;
  }

  footer small {
    text-align: center;
    flex: none;
    opacity: 0.75;
  }

  footer .logo img {
    height: 90px; /* менше лого — візуально пропорційно */
  }
}
/* === Fix top spacing and tighten layout === */

/* герою даємо запас, щоб не прилипав до хедера */
.hero {
  padding-top: 96px !important; /* було перекриття — тепер є дихання */
}

/* === Tablet (768–1200px) === */
@media (min-width:768px) and (max-width:1200px){
  .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  section {
    padding: 56px 0 !important;
  }

  .hero {
    padding-top: 100px !important;  /* компенсує header */
    padding-bottom: 48px !important;
  }

  .hero .grid {
    gap: 24px !important;
  }
}

/* === Mobile (до 767px) === */
@media (max-width:767px){
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section {
    padding: 48px 0 !important;
  }

  .hero {
    padding-top: 88px !important;   /* головне: простір під header */
    padding-bottom: 36px !important;
  }

  .hero .grid {
    gap: 20px !important;
  }

  h1 {
    margin: 8px 0 12px !important;
    line-height: 1.07 !important;
  }

  .cards {
    margin-top: 14px !important;
    gap: 12px !important;
  }

  /* компактніше перед футером */
  .cta-band {
    padding: 24px !important;
  }

  footer {
    padding-top: 20px !important;
  }
}

/* акуратна обробка картинки в hero */
.hero-art {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}