/* ===================================================
   yukxidmeti.az — UI styles
   How to customize (quick):
   1) LOGO size => .brand-logo { width:160px; height:48px }  // Use @2x export 320×96
   2) BANNER height => .hero .bg-img { height:520px }        // Image slot 1920×520
   3) Section pattern (services/prices) => change --pattern-image or --pattern-opacity
   4) Footer gradient => change --footer-gradient
   =================================================== */
:root{
  --brand:#1976d2;
  --accent:#25D366;
  /* Pattern controls */
  --pattern-opacity: 1; /* 1 = visible, 0.5 = lighter, 0 = off */
  --pattern-size: 220px; /* pattern tile size */
  /* Default SVG pattern (truck, hook, box, price tag) — you can replace this data URL */
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%231976d2' stroke-width='2' opacity='.10'%3E%3Cpath d='M16 112h52v20H16zM68 112l10-10h16l10 10M28 132a6 6 0 1 0 0-12 6 6 0 0 0 0 12M60 132a6 6 0 1 0 0-12 6 6 0 0 0 0 12'/%3E%3Cpath d='M24 20l18-10 18 10v20l-18 10-18-10zM24 20v20M60 20v20'/%3E%3Cpath d='M120 14a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-8 8v24m0 0c0 8-6 14-14 14'/%3E%3Cpath d='M98 98l20-6 6 6-6 20-20 6-6-6zM112 100l6 6'/%3E%3C/g%3E%3C/svg%3E");
  /* Footer gradient control */
  --footer-gradient: linear-gradient(180deg,#e6f0ff 0%, #ffffff 75%);
}

html{ scroll-behavior:smooth }
body{ background:#ffffff; color:#0b1b33 }
.navbar{ background:#ffffff!important; box-shadow:0 2px 12px rgba(0,0,0,.04) }
.brand-logo{ width:160px; height:48px; background:#ffffff; border-radius:8px; display:inline-block }

/* HERO / Banner — показываем картинку полностью */
.hero{
  position: relative;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #eaf3ff;
}

/* ВАЖНО: убираем фикс. высоту и включаем aspect-ratio */
.hero .bg-img{
  width: 100%;
  aspect-ratio: 1920 / 520;                 /* держим пропорцию баннера */
  background-color: #eaf3ff;                /* фон для «полей», если будут */
  background-repeat: no-repeat;
  background-position: top center;          /* приоритет — «шапка» */
  background-size: contain;                 /* показываем картинку целиком */
  display: block;
}

/* Контент поверх баннера */
.hero .content{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}

/* Мобилка: заполняем блок целиком (без «пустых полей») */
@media (max-width: 576px){
  .hero .bg-img{
    background-size: cover;            /* заполняем всё */
    min-height: 300px;                 /* даём достаточную высоту */
  }
  /* по желанию — лёгкий градиент для читаемости текста */
  .hero .bg-img::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.25));
    pointer-events: none;
  }
}





/* Section patterned background */
.section-pattern{ position:relative; background:#f7f9fc }
.section-pattern::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:var(--pattern-opacity);
  background-size: var(--pattern-size) var(--pattern-size);
  background-repeat: repeat;
  background-image: var(--pattern-image);
}
.section-pattern > .container{ position:relative }

/* Service cards */
.service-card{ position:relative; display:flex; gap:.85rem; align-items:flex-start; padding:1rem;
  border-radius:1rem; border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             conic-gradient(from 180deg at 50% 50%, #e6eef8, #cfe3ff, #e6eef8) border-box;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease
}
.service-card:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,0,0,.12) }
.icon-bubble{ width:52px; height:52px; min-width:52px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(64% 64% at 30% 30%, #eaf3ff 0, #d8ecff 60%, #cde6ff 100%);
  box-shadow:inset 0 -2px 8px rgba(13,110,253,.08), 0 10px 24px rgba(13,110,253,.15);
  animation:breath 3.2s ease-in-out infinite
}
.icon-bubble svg{ width:26px; height:26px; color:var(--brand) }
.service-card h3{ margin:0 0 .25rem; font-size:1rem }
.service-card p{ margin:0; font-size:.9rem; color:#516174 }
@keyframes breath{
  0%{ transform:scale(1); box-shadow:0 10px 24px rgba(13,110,253,.12) }
  50%{ transform:scale(1.06); box-shadow:0 16px 32px rgba(13,110,253,.24) }
  100%{ transform:scale(1) }
}

/* FAB — appears with delay + pulse */
.fab-stack{ position:fixed; right:16px; bottom:16px; z-index:1030; display:flex; flex-direction:column; gap:.6rem;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .5s ease, transform .5s ease
}
.fab-stack.fab-show{ opacity:1; transform:translateY(0); pointer-events:auto }
.fab{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:999px; box-shadow:0 10px 25px rgba(0,0,0,.18) }
.fab-call{ background:#0d6efd; color:#fff }
.fab-wa{ background:var(--accent); color:#fff }

/* Burger + pulse */
.menu-toggler{ border:2px solid #d6e4ff!important; border-radius:999px!important; padding:.35rem .7rem!important; background:#f7faff!important }
.menu-toggler svg{ width:22px; height:22px }
.menu-pulse{ box-shadow:0 0 0 0 rgba(13,110,253,.45); animation:pulseBlue 1.8s infinite }

/* Language switch chips */
.lang-switch-nav{ display:flex; align-items:center; gap:.35rem; white-space:nowrap }
.lang-switch-nav a{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-weight:600; color:#0b1b33;
  padding:.3rem .6rem; border-radius:999px; border:1px solid #e6eef8; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease
}
.lang-switch-nav a .flag{ width:22px; height:16px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.06) }
.lang-switch-nav a.active{ background:#e9f2ff; box-shadow:0 0 0 4px rgba(13,110,253,.14) }
.lang-switch-nav a:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.12) }

/* Desktop nav pills + pulse once */
@media (min-width: 992px){
  .navbar .navbar-nav .nav-link{ border:1px solid #e6eef8; border-radius:999px; padding:.35rem .75rem; margin-left:.25rem;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease }
  .navbar .navbar-nav .nav-link:hover{ background:#f7faff; box-shadow:0 6px 16px rgba(0,0,0,.08), 0 0 0 4px rgba(13,110,253,.12); transform:translateY(-1px) }
  .navbar .navbar-nav .nav-link.active{ background:#e9f2ff; box-shadow:0 0 0 4px rgba(13,110,253,.12) }
  .navbar .navbar-nav.nav-pulse-once .nav-link{ animation:pulseBlue 1.6s ease-out 1 }
}

.nav-link.active{ color:#0d6efd!important; font-weight:600 }

/* Creator banner */
.creator-banner{ margin-top:2rem; border-radius:16px; padding:1rem 1.25rem; background:linear-gradient(90deg,#eef6ff,#f7fbff);
  border:1px solid #e6eef8; display:flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600
}
.creator-banner .pill{ padding:.25rem .65rem; border-radius:999px; background:#0d6efd; color:#fff;
  box-shadow:0 0 0 0 rgba(13,110,253,.45); animation:pulseBlue 2.2s infinite; transition:transform .2s ease, background .2s ease }
.creator-banner:hover .pill{ background:#0b5ed7; transform:translateY(-1px) }

/* Footer gradient */
footer{ background: var(--footer-gradient) }

/* Pulses */
@keyframes pulseBlue{
  0%{box-shadow:0 0 0 0 rgba(13,110,253,.45)}
  70%{box-shadow:0 0 0 12px rgba(13,110,253,0)}
  100%{box-shadow:0 0 0 0 rgba(13,110,253,0)}
}
@keyframes pulseGreen{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}
  70%{box-shadow:0 0 0 12px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}