/* ======================================================================
   ANA SƏHİFƏ — 3destate.pl üslubunda dizayn qatı (üç rəngli palitra)

   home.css-dən SONRA yüklənir və yalnız görünüşü dəyişir: HTML, i18n
   açarları və JS toxunulmaz qalır. Qatı söndürmək üçün index.html-dəki
   bir <link> sətrini silmək kifayətdir.

   Palitra — YALNIZ üç rəng (və onların şəffaflıqları / qarışıqları):
     · #0B3048 — dərin göy: mətn, tünd səthlər, gecə səması;
     · #F2F0E9 — krem: fon, açıq səthlər, gündüz səması;
     · #B9F12F — laym: vurğu, əsas düymə, işıqlı pəncərələr.
   Açıq mövzuda vurğu MƏTNİ göydür (laym kremin üstündə oxunmur), laym
   isə yalnız dolğu kimi işlənir. Tünd mövzuda vurğu laymdır.
   ====================================================================== */

:root {
  --pal-navy: #0B3048;
  --pal-cream: #F2F0E9;
  --pal-lime: #B9F12F;

  --bg: var(--pal-cream);
  --surface: var(--pal-cream);
  --surface2: color-mix(in srgb, var(--pal-navy) 5%, var(--pal-cream));
  --line: color-mix(in srgb, var(--pal-navy) 14%, var(--pal-cream));
  --ink: var(--pal-navy);
  --muted: color-mix(in srgb, var(--pal-navy) 70%, var(--pal-cream));
  --accent: var(--pal-navy);
  --accent-ink: var(--pal-cream);
  --accent-soft: rgba(11, 48, 72, .08);
  --ok: var(--pal-lime);
  --hold: color-mix(in srgb, var(--pal-navy) 35%, var(--pal-cream));
  --sold: var(--pal-navy);
  --stage: var(--pal-navy);
  --stage-ink: var(--pal-cream);
  --stage-muted: rgba(242, 240, 233, .66);

  --x-navy: var(--pal-navy);
  --x-band: color-mix(in srgb, var(--pal-navy) 5%, var(--pal-cream));
  --x-cta: var(--pal-lime);
  --x-cta-ink: var(--pal-navy);
  --x-lime: var(--pal-lime);
  --x-cyan: var(--pal-lime);
  --x-deep: var(--pal-navy);
  --x-shadow: 0 4px 40px rgba(11, 48, 72, .1);
  --x-shadow-hi: 0 16px 48px rgba(11, 48, 72, .18);
  color-scheme: light;

  --f-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Tünd mövzu: OS seçimi (data-theme="light" ilə ləğv olunur) və açıq
   data-theme="dark". Dəyərlər hər iki yerdə eynidir. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--pal-navy);
    --surface: color-mix(in srgb, var(--pal-cream) 11%, var(--pal-navy));
    --surface2: color-mix(in srgb, var(--pal-cream) 7%, var(--pal-navy));
    --line: color-mix(in srgb, var(--pal-cream) 18%, var(--pal-navy));
    --ink: var(--pal-cream);
    --muted: color-mix(in srgb, var(--pal-cream) 68%, var(--pal-navy));
    --accent: var(--pal-lime);
    --accent-ink: var(--pal-navy);
    --accent-soft: rgba(185, 241, 47, .14);
    --hold: rgba(242, 240, 233, .6);
    --sold: rgba(242, 240, 233, .22);
    --x-navy: var(--pal-cream);
    --x-band: color-mix(in srgb, var(--pal-cream) 9%, var(--pal-navy));
    --x-shadow: 0 0 0 1px rgba(242, 240, 233, .07), 0 18px 40px -18px rgba(11, 48, 72, .9);
    --x-shadow-hi: 0 0 0 1px rgba(242, 240, 233, .1), 0 24px 56px -20px rgba(11, 48, 72, .95);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--pal-navy);
  --surface: color-mix(in srgb, var(--pal-cream) 11%, var(--pal-navy));
  --surface2: color-mix(in srgb, var(--pal-cream) 7%, var(--pal-navy));
  --line: color-mix(in srgb, var(--pal-cream) 18%, var(--pal-navy));
  --ink: var(--pal-cream);
  --muted: color-mix(in srgb, var(--pal-cream) 68%, var(--pal-navy));
  --accent: var(--pal-lime);
  --accent-ink: var(--pal-navy);
  --accent-soft: rgba(185, 241, 47, .14);
  --hold: rgba(242, 240, 233, .6);
  --sold: rgba(242, 240, 233, .22);
  --x-navy: var(--pal-cream);
  --x-band: color-mix(in srgb, var(--pal-cream) 9%, var(--pal-navy));
  --x-shadow: 0 0 0 1px rgba(242, 240, 233, .07), 0 18px 40px -18px rgba(11, 48, 72, .9);
  --x-shadow-hi: 0 0 0 1px rgba(242, 240, 233, .1), 0 24px 56px -20px rgba(11, 48, 72, .95);
  color-scheme: dark;
}

body {
  font-size: 15px;
  line-height: 1.6;
  overflow-x: clip;
}

/* Referansın konteyneri 1440px-dir; bizim mətn sütunu bir az dar qalır,
   amma kənar boşluqları böyüyür. */
.wrap { max-width: 1240px; padding-inline: 32px }

/* ---------- düymələr ----------
   Həb, böyük hərf, Poppins 600. Əsas düymə narıncıdır və üstünə
   gələndə AĞA çevrilir — referansın imza hərəkəti. */
.btn {
  border-radius: 106px;
  padding: 12px 24px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  transition: background-color .12s ease-out, color .12s ease-out, box-shadow .12s ease-out, border-color .12s;
}
.btn:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.btn.primary {
  background: var(--x-cta);
  border-color: var(--x-cta);
  color: var(--x-cta-ink);
}
.btn.primary:hover {
  filter: none;
  background: #F2F0E9;
  border-color: #F2F0E9;
  color: var(--x-cta);
  box-shadow: 0 4px 16px rgba(11, 48, 72, 0.1);
}

/* ---------- naviqasiya ----------
   Yarımşəffaf ağ şüşə, 72px hündürlük; sürüşəndə altına kölgə düşür. */
.nav {
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 0;
  box-shadow: 0 16px 24px rgba(11, 48, 72, 0.08);
}
.nav .wrap { min-height: 72px; padding-block: 10px }
.logo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--x-navy);
}
.logo i {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 6px;
}
.nav nav { align-items: center; gap: 6px }
.nav nav a,
.nav nav button {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 106px;
}
.nav nav a:hover,
.nav nav button:hover {
  color: var(--accent);
  background: transparent;
}
.nav .cta {
  margin-left: 8px;
  padding: 10px 20px !important;
  background: var(--x-cta);
  color: var(--x-cta-ink) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.nav .cta:hover {
  background: #F2F0E9 !important;
  color: var(--x-cta) !important;
  filter: none;
  box-shadow: 0 4px 16px rgba(11, 48, 72, 0.12);
}
.lang-btn {
  border-radius: 106px;
  padding: 8px 12px;
  font-family: var(--f-body);
  border-color: var(--line);
}
.lang-menu { border-radius: 16px; border: 0; box-shadow: var(--x-shadow-hi) }
.lang-menu button { border-radius: 10px; font-family: var(--f-body) }

/* ======================================================================
   AÇILIŞ EKRANI
   Referansda başlıq kadrın SOL ALTINDADIR, üstündə isə sadə 40%
   qaraldıcı var. Bizim film eyni qalır, yalnız düzülüş dəyişir.
   ====================================================================== */
.film-hero {
  min-height: min(calc(70vh + 72px), 860px);
  align-content: end;
  text-align: left;
  padding-block: 120px 128px;
}
.film { background: var(--x-deep) }
.film-veil,
.film.is-light .film-veil {
  background:
    linear-gradient(to top, rgba(11, 48, 72, 0.78), rgba(11, 48, 72, 0.2) 55%, rgba(11, 48, 72, 0.25)),
    rgba(11, 48, 72, 0.28);
}
.film.is-light .film-veil { background-color: rgba(11, 48, 72, 0.45) }

.film-hero .hero-in { max-width: 1240px }
.hero h1,
.film-hero h1 {
  margin: 0 0 20px;
  max-width: 22ch;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.film-hero h1 em { color: var(--x-cyan) }
.hero p.lead,
.film-hero p.lead {
  margin: 0 0 32px;
  max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
}
.hero .actions { justify-content: flex-start; gap: 12px }
.hero .actions .btn { padding: 14px 28px; font-size: 14px }
.film-hero .btn:not(.primary) {
  background: #F2F0E9;
  border-color: #F2F0E9;
  color: var(--accent);
  backdrop-filter: none;
}
.film-hero .btn:not(.primary):hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.badge,
.film-hero .badge {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 106px;
}
.badge::before { background: var(--x-lime) }

/* Etibar sətri: sola düzlənmiş, rəqəmlər Space Grotesk. */
.trust { justify-content: flex-start; gap: 12px 48px; margin: 44px 0 0 }
.trust li { align-items: flex-start }
.trust b { font-family: var(--f-display); font-weight: 700; font-size: 32px }
.trust span,
.film-hero .trust span { font-family: var(--f-body); font-size: 13px }

/* Ekrandakı layihənin adı sağ alt küncə keçir — sol alt artıq başlığındır. */
.film-tag {
  left: auto;
  right: max(32px, calc((100% - 1240px) / 2 + 32px));
  bottom: 68px;
  font-family: var(--f-body);
  padding: 8px 14px;
  border-radius: 106px;
  background: rgba(242, 240, 233, 0.12);
  backdrop-filter: blur(6px);
}

/* ---------- rəqəm zolağı ----------
   Ağ kart açılış ekranının dibinə yarı minir: referansın "üzən panel"i. */
.facts {
  position: relative;
  z-index: 2;
  margin-top: -44px;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--x-shadow);
  padding: 8px 12px;
}
.facts div { padding: 20px 24px; border-left-color: var(--line) }
.facts div:first-child { padding-left: 24px }
.facts b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--accent);
}
.facts span { font-size: 13px }

/* ======================================================================
   BÖLMƏLƏR — növbələşən fon
   Bölmələr .wrap-ın içindədir; fon isə kənardan-kənara uzanmalıdır.
   Kölgə + clip-path hiyləsi fonu tam enə yayır, quruluşa toxunmur.
   ====================================================================== */
section.block { padding-block: 96px 96px }
#platforma,
#xidmetler,
#qiymet {
  background: var(--x-band);
  box-shadow: 0 0 0 100vmax var(--x-band);
  clip-path: inset(0 -100vmax);
}

.sh { margin-bottom: 40px; align-items: flex-end }
.eyebrow {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.sh h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.125;
  letter-spacing: -.01em;
  color: var(--x-navy);
  margin-top: 8px;
}
.sh p { color: var(--muted); font-size: 15px; max-width: 48ch }

/* ---------- kataloq kartları ---------- */
.proj {
  border: 0;
  border-radius: 16px;
  box-shadow: var(--x-shadow);
}
.proj:hover {
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: var(--x-shadow-hi);
}
.proj .thumb::after { background: linear-gradient(to top, rgba(11, 48, 72, 0.82), transparent) }
.proj .tech {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--x-lime);
  color: #0B3048;
  border-radius: 106px;
  padding: 5px 11px;
}
.proj .meta h3 { font-family: var(--f-display); font-weight: 700; font-size: 24px }
.proj .loc { font-family: var(--f-body) }
.proj > p { padding: 18px 22px 0; font-size: 14px }
.proj .feats { padding: 14px 22px 0 }
.feats li {
  border: 0;
  background: var(--surface2);
  color: var(--x-navy);
  font-weight: 500;
  padding: 4px 12px;
}
.proj .open {
  padding: 16px 22px 22px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
}
.sl-nav {
  width: 52px;
  height: 52px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--x-shadow);
}
.sl-nav:hover { background: var(--x-navy); transform: none }

/* ---------- platforma / ekosistem kartları ----------
   Referansın "ikon + mətn" kartı: ağ lövhə, 32px daxili boşluq.
   Ağ fonlu bölmədə (ekosistem) kart buz-mavisinə keçir ki, seçilsin. */
.eco { gap: 24px }
.eco-card {
  border: 0;
  border-radius: 16px;
  padding: 32px;
  background: var(--surface);
  box-shadow: var(--x-shadow);
  transition: transform .18s, box-shadow .18s;
}
.eco-card:hover { transform: translateY(-3px); box-shadow: var(--x-shadow-hi) }
#ekosistem .eco-card { background: var(--x-band); box-shadow: none }
#ekosistem .eco-card:hover { box-shadow: var(--x-shadow) }
/* Sıra nömrəsi kartın başında: ikon olmayan yerdə referansın ritmini verir. */
.eco { counter-reset: eco }
.eco-card::before {
  counter-increment: eco;
  content: counter(eco, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
}
.eco-card h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--x-navy);
}
.eco-card p { font-size: 14px }

/* ---------- xidmətlər ----------
   Xətlərlə bölünmüş cədvəldən ağ kart şəbəkəsinə keçir; ikon dairədədir. */
.services {
  border: 0;
  gap: 24px;
}
.svc,
.svc:not(:nth-child(3n+1)),
.svc:nth-child(even) {
  padding: 32px;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--x-shadow);
  gap: 10px;
}
.svc svg {
  box-sizing: content-box;
  width: 32px;
  height: 32px;
  padding: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  stroke: var(--accent);
  margin-bottom: 8px;
}
.svc h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--x-navy);
}
.svc p { font-size: 14px }

/* ---------- proses ---------- */
.steps { gap: 24px }
.step {
  border: 0;
  border-radius: 16px;
  padding: 32px 28px;
  background: var(--x-band);
}
.step .n {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 8px;
}
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--x-navy) }
.step .dur {
  align-self: flex-start;
  margin-top: auto;
  border: 0;
  padding: 4px 12px;
  border-radius: 106px;
  background: var(--surface);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
}
.step p { font-size: 14px }
.freebie {
  border: 0;
  border-radius: 16px;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--x-lime) 28%, var(--surface));
}
.formats code {
  font-family: var(--f-body);
  border-radius: 106px;
  border: 0;
  background: var(--x-band);
  padding: 5px 12px;
  color: var(--x-navy);
}

/* ---------- qiymət ----------
   Orta paket referansın "tünd" kartıdır: feruzə fon, ağ mətn. */
.plans { gap: 24px }
.plan {
  border: 0;
  border-radius: 16px;
  padding: 36px 32px;
  background: var(--surface);
  box-shadow: var(--x-shadow);
}
.plan h3 { font-family: var(--f-display); font-weight: 700; color: var(--x-navy) }
.plan .price { font-family: var(--f-display); font-weight: 700; font-size: 32px }
.plan.is-best {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--x-shadow-hi);
}
.plan.is-best h3,
.plan.is-best .price { color: #F2F0E9 }
.plan.is-best .note { color: rgba(242, 240, 233, 0.78) }
.plan.is-best li::before { border-color: var(--x-lime) }
.plan.is-best .btn.primary:hover { color: var(--x-cta) }
.plan .flag {
  background: var(--x-lime);
  color: #0B3048;
  font-family: var(--f-body);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 106px;
  padding: 5px 12px;
}
.wip, .soon { font-family: var(--f-body); border-radius: 106px }
.plan.is-best .wip,
.plan.is-best .soon { background: rgba(242, 240, 233, 0.18); color: #F2F0E9 }

/* ---------- əlaqə ----------
   Referansın "fon + mətn + düymə" bloku: dərin feruzə, ağ başlıq. */
.contact {
  margin-block: 96px;
  border-radius: 16px;
  padding: 64px;
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--x-deep);
  color: #F2F0E9;
}
.contact h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12 }
.contact p { color: rgba(242, 240, 233, 0.74) }
.crow {
  border-radius: 16px;
  padding: 16px 20px;
  background: rgba(242, 240, 233, 0.08);
  border-color: rgba(242, 240, 233, 0.14);
}
.crow small { font-family: var(--f-body); color: rgba(242, 240, 233, 0.6) }
.crow b { font-family: var(--f-body) }
.copy {
  border: 0;
  border-radius: 106px;
  padding: 8px 16px;
  background: var(--x-cta);
  color: #0B3048;
  font-family: var(--f-body);
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color .12s, color .12s;
}
.copy:hover { background: #F2F0E9; color: var(--x-cta) }

/* ---------- futer ----------
   Referans kimi tünd qrafit zolaq, kənardan-kənara. */
footer {
  border: 0;
  padding-block: 32px;
  color: rgba(242, 240, 233, 0.66);
  background: #0B3048;
  box-shadow: 0 0 0 100vmax #0B3048;
  clip-path: inset(0 -100vmax);
}
footer .by,
footer .by b { color: #F2F0E9 }

/* ---------- demo sorğusu ---------- */
.modal { border: 0; border-radius: 16px; box-shadow: var(--x-shadow-hi) }
.modal-in { padding: 36px 36px 30px }
.modal-in h2 { font-family: var(--f-display); font-weight: 700; color: var(--x-navy) }
.fld input,
.fld textarea {
  border-radius: 8px;
  background: var(--surface2);
  border-color: transparent;
}
.fld input:focus,
.fld textarea:focus { background: var(--surface) }

/* ---------- uyğunlaşma ---------- */
@media (max-width: 960px) {
  .facts { margin-top: -32px }
  .facts div:nth-child(3) { padding-left: 24px }
  .contact { padding: 40px }
}
@media (max-width: 680px) {
  .film-hero { min-height: min(82vh, 760px); padding-block: 96px 120px }
  .film-tag { right: 16px; left: auto; bottom: 48px }
  section.block { padding-block: 64px }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 16px }
  .nav .wrap { min-height: 60px }
  .nav .cta { margin-left: 0 }
  .facts { grid-template-columns: 1fr 1fr; padding: 4px }
  .facts div, .facts div:first-child, .facts div:nth-child(3) { padding: 16px }
  .facts b { font-size: 20px }
  .eco-card, .svc, .svc:not(:nth-child(3n+1)), .svc:nth-child(even), .plan { padding: 24px }
  .contact { padding: 28px 22px; margin-block: 64px }
  .trust { gap: 12px 28px }
  .trust b { font-size: 24px }
}

/* Slayder lentinə kölgə üçün yer: `overflow-x: auto` kənardakı hər
   şeyi kəsir, kartların yumşaq kölgəsi isə boz düzbucaq kimi qalırdı.
   Lent hər tərəfə 28px böyüyür, mənfi kənar isə onu yerində saxlayır. */
.projects {
  padding: 28px 28px 52px;
  margin: -28px -28px -52px;
  scroll-padding: 0 28px;
}
.sl-nav.prev { left: -26px }
.sl-nav.next { right: -26px }
@media (max-width: 600px) {
  .projects { padding: 20px 16px 28px; margin: -20px -16px -28px; scroll-padding: 0 16px }
}

/* ---------- mobil naviqasiya ----------
   Bölmə linklərini landing.css 760px-dən aşağı gizlədir; qalır loqo +
   CTA + dil. Üçü BİR sətirdədir, CTA isə yığcam həbdir. */
@media (max-width: 600px) {
  .nav .wrap { flex-wrap: nowrap; gap: 10px; padding-block: 10px }
  .nav nav { flex-wrap: nowrap; gap: 0 }
  .nav .cta { margin-left: 0; padding: 8px 14px !important; font-size: 11.5px !important; white-space: nowrap }
  .logo { font-size: 19px }
}

/* ======================================================================
   SATIŞ SƏHİFƏSİ (landing.css) — eyni dilə gətirilir
   landing.css-dən SONRA yüklənir. Bölmə fonları ağ / buz-mavisi
   növbələşir; kartlar çərçivəsizdir, ağ fonda buz-mavisi, mavi fonda ağ.
   ====================================================================== */

/* Növbələşən fon: landing-də bölmə sırası fərqlidir, ona görə yuxarıdakı
   (#platforma, #xidmetler, #qiymet) dəsti burada yenidən qurulur. */
.lp-hero ~ .wrap #platforma,
.lp-hero ~ .wrap #qiymet {
  background: none;
  box-shadow: none;
  clip-path: none;
}
.lp-hero ~ .wrap :is(#xarici, #teleb, #layiheler, #proses, #suallar) {
  background: var(--x-band);
  box-shadow: 0 0 0 100vmax var(--x-band);
  clip-path: inset(0 -100vmax);
}

/* Başlıqlar bütün bölmələrdə eynidir. */
.lp-split h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.125;
  letter-spacing: -.01em;
  color: var(--x-navy);
}
.lp-p { font-size: 16px }
:is(.lp-pain, .lp-results, .lp-feats, .lp-stage) h3 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--x-navy);
  letter-spacing: -.005em;
}

/* ---------- naviqasiya: referans kimi linklər loqonun YANINDA ----------
   Loqo → bölmələr → narıncı CTA həbi; dil seçimi sağ küncə itələnir. */
.nav nav { margin-left: 28px }
.nav .lang { margin-left: auto }

/* ---------- hero ----------
   Fon canvas-da çəkilən canlı şəhərdir (skyline.js): açıq mövzuda
   gündüz, tünd mövzuda gecə. Mətn mövzunun öz rəngindədir; sol tərəfə
   fon rəngində yumşaq pərdə düşür ki, binaların üstündə də oxunsun.
   Solda vəd + düymələr + birbaşa əlaqə, sağda canlı seçim. */
.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  min-height: min(calc(100svh - 72px), 880px);
  padding-block: 88px 170px;
  text-align: start;
  color: var(--ink);
}
/* Şəhər BÜTÜN səhifənin arxasında sabitdir (body-nin ilk uşağı).
   --veil skyline.js-dən gəlir: açılış ekranında 0, ondan sonra fon
   rəngində pərdə qalxır — şəhər bölmələrin arxasında zəif görünür. */
.lp-sky-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}
.lp-sky { position: absolute; inset: 0; display: block }
.lp-sky-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: var(--veil, 0);
}
/* Hero mətni binaların üstündə də oxunsun: sol tərəfdə yumşaq pərdə. */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 10%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 9%, color-mix(in srgb, var(--bg) 55%, transparent) 36%, transparent 62%);
  pointer-events: none;
}
/* Bölmə zolaqları da şəffafdır — fon səhifə boyu bir parça kimi axır. */
body { background: var(--bg) }
.lp-hero ~ .wrap :is(#xarici, #teleb, #layiheler, #proses, #suallar) {
  background: color-mix(in srgb, var(--x-band) 55%, transparent);
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--x-band) 55%, transparent);
}
.lp-call-wa { margin-top: 10px }
.lp-hero .lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: 56px;
}
.lp-hero .hero-in { max-width: none }
.lp-hero .badge {
  margin: 0 0 22px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-color: var(--line);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.lp-hero .badge::before { background: var(--pal-lime); box-shadow: 0 0 0 3px rgba(11, 48, 72, .12) }
.lp-hero h1 {
  max-width: 18ch;
  margin: 0 0 20px;
  color: var(--ink);
  font-size: clamp(32px, 3.9vw, 54px);
  line-height: 1.06;
  letter-spacing: -.015em;
}
/* Açıq mövzuda vurğu sətri laym MARKERLƏ alt-xətlənir (laym mətn kremdə
   oxunmur), tünd mövzuda isə sətrin özü laymdır. */
.lp-hero h1 em {
  font-style: normal;
  color: var(--ink);
  background: linear-gradient(transparent 62%, var(--pal-lime) 62%, var(--pal-lime) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:root[data-theme="dark"] .lp-hero h1 em { color: var(--pal-lime); background: none }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-hero h1 em { color: var(--pal-lime); background: none }
}
.lp-hero p.lead {
  max-width: 50ch;
  margin: 0 0 30px;
  color: var(--ink);
  opacity: .86;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
}
.lp-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start }
.lp-hero .btn:not(.primary) {
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border-color: var(--ink);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.lp-hero .btn:not(.primary):hover { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.btn.lg { padding: 15px 28px; font-size: 14px; border-radius: 106px }
.btn.primary.lg { box-shadow: 0 10px 30px -10px rgba(185, 241, 47, .7) }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--pal-lime) }

/* ---------- mövzu düyməsi (günəş / ay) ---------- */
.theme-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  margin-inline: auto 10px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, transform .3s;
}
.theme-btn:hover { background: var(--pal-lime); color: var(--pal-navy); border-color: var(--pal-lime) }
/* İstifadəçi mövzunu hələ seçməyibsə düymə yavaşca yanıb-sönür —
   tünd rejimin olduğunu göstərir. İlk klikdən sonra (landing.js) dayanır. */
.theme-btn:not(.is-seen) { animation: theme-btn-glow 2.4s ease-in-out infinite }
.theme-btn:not(.is-seen):hover { animation: none }
@keyframes theme-btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgb(185 241 47 / 0); border-color: var(--line) }
  50%      { box-shadow: 0 0 0 5px rgb(185 241 47 / .35), 0 0 16px 2px rgb(185 241 47 / .45); border-color: var(--pal-lime) }
}
.theme-btn svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity .3s, transform .4s }
.theme-btn .i-moon { opacity: 0; transform: rotate(-60deg) scale(.6) }
:root[data-theme="dark"] .theme-btn .i-sun { opacity: 0; transform: rotate(60deg) scale(.6) }
:root[data-theme="dark"] .theme-btn .i-moon { opacity: 1; transform: none }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { opacity: 0; transform: rotate(60deg) scale(.6) }
  :root:not([data-theme="light"]) .theme-btn .i-moon { opacity: 1; transform: none }
}
.nav .theme-btn + .lang { margin-left: 0 }

/* ---------- birbaşa əlaqə: zəng + WhatsApp + nömrə ---------- */
.lp-call {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.lp-call-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #F2F0E9;
  text-decoration: none;
  transition: transform .15s, filter .15s, box-shadow .15s;
}
.lp-call-ic svg { width: 20px; height: 20px }
.lp-call-ic.tel { background: var(--ink); color: var(--bg) }
.lp-call-ic.wa { background: var(--pal-lime); color: var(--pal-navy) }
.crow-acts .lp-call-ic.tel { background: var(--pal-cream); color: var(--pal-navy) }
.lp-call-ic:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 8px 20px -8px rgba(11, 48, 72, 0.5) }
.lp-call-no {
  margin-inline-start: 6px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  unicode-bidi: isolate;
}
.lp-call-no:hover { text-decoration: underline; text-decoration-color: var(--pal-lime); text-decoration-thickness: 3px }
.crow-acts { display: flex; align-items: center; gap: 8px; flex: none }
.crow-acts .lp-call-ic { width: 38px; height: 38px }
.crow-acts .lp-call-ic svg { width: 18px; height: 18px }

/* ---------- canlı seçim: bina şəklinin özü ---------- */
.lp-hero .lp-live {
  padding: 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: blur(16px);
  box-shadow: 0 40px 80px -24px rgba(11, 48, 72, 0.6);
  animation: none;
}
.lp-live-top { margin: 2px 4px 12px; font-family: var(--f-body); font-size: 12px; color: var(--muted) }
.lp-live-top .dot { background: var(--pal-lime); box-shadow: 0 0 0 3px rgba(185, 241, 47, .25); animation: none }
.lp-pick {
  position: relative;
  aspect-ratio: 640 / 520;
  border-radius: 14px;
  overflow: hidden;
  background: #F2F0E9;
}
.lp-pick-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100% }
#lpTowerFloors polygon { transition: fill .3s, stroke .3s }
#lpTowerFloors .band { fill: transparent; pointer-events: none }
#lpTowerFloors .u { fill: transparent; cursor: pointer }
#lpTowerFloors .u.s-sold { cursor: not-allowed }
#lpTowerFloors .u:hover { fill: rgba(242, 240, 233, 0.35) }
/* Seçilmiş mərtəbə feruzə zolaqdır, onun mənzilləri statusla rənglənir. */
#lpTowerFloors .is-floor .band { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--x-cyan); stroke-width: 2 }
#lpTowerFloors .is-floor .u.s-ok { fill: rgba(185, 241, 47, 0.62) }
#lpTowerFloors .is-floor .u.s-hold { fill: rgba(185, 241, 47, 0.62) }
#lpTowerFloors .is-floor .u.s-sold { fill: rgba(185, 241, 47, 0.6) }
#lpTowerFloors .fl .u.is-hot,
#lpTowerFloors .is-floor .u.is-hot {
  fill: #B9F12F;
  stroke: #F2F0E9;
  stroke-width: 3;
  animation: lp-hot 1.2s ease-in-out infinite;
}
@keyframes lp-hot { 50% { fill: #B9F12F } }

.lp-pick-tag {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 5px;
  border-radius: 106px;
  background: rgba(11, 48, 72, 0.78);
  backdrop-filter: blur(6px);
  font-size: 12px;
  color: #F2F0E9;
}
.lp-pick-tag b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--x-cyan);
  color: #0B3048;
  font-family: var(--f-display);
}
.lp-pick-tag i { font-style: normal; font-weight: 700; color: var(--x-lime) }

/* Mənzil kartı şəklin sağ tərəfinə minir — B blokunun fasadı solda qalır. */
.lp-hero .lp-unit {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 37%;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(242, 240, 233, 0.96);
  color: #0B3048;
  box-shadow: 0 16px 40px -14px rgba(11, 48, 72, 0.45);
}
.lp-unit.is-new { animation: lp-unit-in .45s cubic-bezier(.2, .9, .3, 1.2) }
@keyframes lp-unit-in { from { opacity: .3; transform: translateY(-6px) } }
.lp-unit small, .lp-unit dt { color: #0B3048; font-family: var(--f-body) }
.lp-unit-no { font-family: var(--f-display); font-weight: 700; color: #0B3048; font-size: 22px }
.lp-hero .lp-unit dl { grid-template-columns: 1fr; gap: 2px; margin: 4px 0 2px }
.lp-hero .lp-unit dl div { display: flex; justify-content: space-between; gap: 8px }
.lp-hero .lp-unit dd { font-size: 13px }
.lp-unit-price { font-family: var(--f-display); font-weight: 700; color: #0B3048; font-size: 20px }
.lp-unit-btn {
  border-radius: 106px;
  background: var(--x-cta);
  color: #0B3048;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 8px 10px;
}
.lp-hero .lp-toast {
  inset-inline: 12px;
  bottom: 12px;
  border-radius: 14px;
  color: #0B3048;
}
.lp-toast .ic { background: #0B3048; color: #B9F12F }
.lp-toast-meta { font-family: var(--f-body) }

/* ---------- rəqəmlər: açılış ekranının dibinə minən kartlar ---------- */
.lp-trust-wrap { position: relative; z-index: 2; margin-top: -84px }
.lp-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  border: 0;
}
.lp-trust li {
  align-items: flex-start;
  gap: 8px;
  padding: 26px 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--x-shadow-hi);
  transition: transform .2s, box-shadow .2s;
}
.lp-trust li:hover { transform: translateY(-4px) }
.lp-trust b { font-size: 30px; color: var(--accent) }
.lp-trust span { font-size: 14px; color: var(--ink) }

@media (max-width: 1080px) {
  .lp-hero { padding-block: 64px 130px }
  .lp-hero .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px }
  .lp-hero .lp-live { max-width: 620px }
  .lp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
/* Altı bölmə linki + CTA 1100px-dən dar ekrana bir sətrə sığmır və menyu
   iki sətrə bölünürdü — orada mobil kimi yalnız loqo + CTA + dil qalır. */
@media (max-width: 1100px) {
  .nav nav a:not(.cta) { display: none }
  .nav nav { margin-left: auto }
  .nav .lang { margin-left: 0 }
}
@media (max-width: 600px) {
  .lp-hero { padding-block: 48px 112px }
  .lp-hero::before { background: linear-gradient(color-mix(in srgb, var(--bg) 70%, transparent), transparent 70%) }
  .lp-call-no { font-size: 18px }
  /* Dar ekranda kart şəkli örtməsin: şəklin ALTINA düşür. */
  .lp-pick { aspect-ratio: auto; overflow: visible; background: none }
  .lp-pick-svg { position: relative; height: auto; aspect-ratio: 640 / 520; border-radius: 14px }
  .lp-hero .lp-unit {
    position: static;
    width: auto;
    margin-top: 10px;
  }
  .lp-hero .lp-toast { bottom: auto; top: 54px }
  .lp-trust-wrap { margin-top: -72px }
  .lp-trust { gap: 12px }
  .lp-trust li { padding: 20px 16px }
  .lp-trust b { font-size: 24px }
}

/* ---------- problem ---------- */
.lp-pains { gap: 24px }
.lp-pain {
  border: 0;
  border-radius: 16px;
  padding: 32px;
  background: var(--x-band);
}
.lp-pain svg {
  width: 56px;
  height: 56px;
  padding: 14px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.lp-pain p { font-size: 14px }

.lp-vs { margin-top: 40px }
.lp-vs-col { border: 0; border-radius: 16px; padding: 32px }
.lp-vs-col h3 { font-family: var(--f-body); font-weight: 600; letter-spacing: .08em }
.lp-vs-col.old { background: var(--x-band) }
.lp-vs-col.new {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--x-shadow-hi);
}
.lp-vs-col.new h3 { color: var(--x-lime) }
.lp-vs-col.new li::before { background: var(--x-lime); color: #0B3048 }
.lp-vs-arrow {
  width: 48px;
  height: 48px;
  margin: auto;
  border-radius: 50%;
  background: var(--x-cta);
  color: #0B3048;
  font-size: 20px;
}

/* ---------- xarici alıcı / tələbat ---------- */
.lp-checks li::before { border-radius: 50% }
/* ---------- seçim → CRM axını ---------- */
.lp-stage {
  border: 0;
  border-radius: 16px;
  padding: 28px 24px 24px;
  background: var(--x-band);
}
.lp-stage.is-on {
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent), var(--x-shadow-hi);
}
.lp-stage-n {
  border: 0;
  background: var(--surface);
  color: var(--accent);
  font-family: var(--f-body);
  font-weight: 600;
  box-shadow: var(--x-shadow);
}
.lp-mini { border: 0; background: var(--surface) }
.lp-mini-3d { background: var(--x-deep) }
.lp-mini-card b { font-family: var(--f-display); color: var(--x-navy) }
.lp-mini-card em { border-radius: 106px; background: var(--x-cta); color: #0B3048; font-weight: 600 }
.lp-wire { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent) 0 6px, transparent 6px 12px) }

/* ---------- xaricdən alanlar: dünya xəritəsi ----------
   Nöqtəli quru ayrıca SVG-dir (assets/img/world-dots.svg), xətlər və
   şəhərlər isə eyni viewBox-dadır (1004×472). Xəritə qutusunun
   nisbəti eynidir, ona görə faizlə verilən yazılar nöqtənin üstünə
   düşür. Hamısı bir nöqtəyə — Batumidəki layihəyə — axır. */
.lp-world {
  position: relative;
  padding: 22px 22px 18px;
  border-radius: 20px;
  background:
    radial-gradient(70% 60% at 55% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--x-deep);
  color: #F2F0E9;
  box-shadow: var(--x-shadow-hi);
  overflow: hidden;
}
.lp-world-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.lp-world-head b { font-family: var(--f-display); font-size: 17px; color: #F2F0E9 }
.lp-world-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 106px;
  background: rgba(185, 241, 47, 0.12);
  color: var(--x-lime);
  font-size: 12px;
  font-weight: 600;
}
.lp-world-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--x-lime);
  animation: lp-blink 1.4s ease-in-out infinite;
}
.lp-world-map { position: relative; aspect-ratio: 1004 / 472 }
.lp-world-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.lp-world .land { opacity: .24 }
.lp-world .arcs path {
  fill: none;
  stroke: var(--x-cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 4 10;
  opacity: .85;
  animation: lp-dash 2.4s linear infinite;
}
.lp-world .arcs path:nth-child(2n) { stroke: var(--accent); animation-duration: 3.2s }
.lp-world .cities circle { fill: var(--x-lime) }
.lp-world .home .core { fill: var(--x-cta); stroke: #F2F0E9; stroke-width: 3 }
.lp-world .home .wave {
  fill: none;
  stroke: var(--x-cta);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: lp-wave 2.4s ease-out infinite;
}
.lp-world .home .w2 { animation-delay: 1.2s }
@keyframes lp-wave {
  from { transform: scale(1); opacity: .9 }
  to { transform: scale(4); opacity: 0 }
}
.lp-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  padding: 3px 9px;
  border-radius: 106px;
  background: rgba(242, 240, 233, 0.1);
  border: 1px solid rgba(242, 240, 233, 0.2);
  font-family: var(--f-body);
  font-size: 11px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.lp-pin.up { transform: translate(-50%, calc(-100% - 9px)) }
.lp-pin.down { transform: translate(-50%, 9px) }
.lp-pin.left { transform: translate(calc(-100% - 9px), -50%) }
.lp-pin.right { transform: translate(9px, -50%) }
.lp-pin.home {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform: translate(-50%, 13px);
  background: var(--x-cta);
  border: 0;
  color: #0B3048;
  font-weight: 600;
}
.lp-world-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(242, 240, 233, 0.1);
}
.lp-world .lp-globe-note {
  position: static;
  transform: none;
  padding: 0;
  background: none;
  box-shadow: none;
  text-align: start;
  white-space: normal;
}
.lp-world .lp-globe-note b { display: block; font-family: var(--f-display); font-size: 16px; color: #F2F0E9 }
.lp-world .lp-globe-note span { font-size: 12px; color: rgba(242, 240, 233, 0.6) }
.lp-langs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none }
.lp-langs li {
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(242, 240, 233, 0.08);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .lp-world { padding: 16px }
  .lp-pin:not(.home) { display: none }
  .lp-world-foot { flex-direction: column; align-items: flex-start }
}

/* ---------- tələbat: B blokunun istilik fasadı ----------
   Solda binanın siluetidir (dam, mərtəbələr, podium), pəncərələr
   baxış sayına görə soyuq feruzədən isti narıncıya keçir. Sağda
   şkala, ən çox baxılan üç mənzil və yekun rəqəmlər. */
.lp-heat {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: 28px;
  padding: 28px;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--x-shadow-hi);
}
.lp-heat-tower { display: flex; flex-direction: column }
.lp-heat-roof {
  height: 12px;
  margin-inline: calc(24px + 16%) 16%;
  border-radius: 8px 8px 0 0;
  background: var(--accent);
}
.lp-heat-body { display: grid; grid-template-columns: 24px minmax(0, 1fr) }
.lp-heat-floors {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  font-size: 10px;
  color: var(--muted);
}
.lp-heat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 8px;
  border-radius: 6px 6px 0 0;
  background: #0B3048;
}
.lp-heat-grid span {
  aspect-ratio: 1.25 / 1;
  border-radius: 2px;
  background: color-mix(in srgb, #B9F12F calc(var(--h, 0) * 1%), rgba(242, 240, 233, .16));
  transition: background .8s ease, box-shadow .8s;
}
.lp-heat-grid span.hot { box-shadow: 0 0 10px rgba(185, 241, 47, .75) }
.lp-heat-grid span.top { outline: 2px solid #F2F0E9; outline-offset: -1px }
.lp-heat-podium {
  display: grid;
  place-items: center;
  height: 26px;
  margin-inline-start: 24px;
  border-radius: 0 0 6px 6px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
}
.lp-heat-side { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.lp-heat-title { font-family: var(--f-display); font-size: 18px; color: var(--x-navy) }
.lp-heat-scale { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted) }
.lp-heat-scale i {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(11, 48, 72, .14), #B9F12F);
}
.lp-heat-cap {
  margin: 4px 0 -4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.lp-heat-top { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none }
.lp-heat-top li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--x-band);
  font-size: 13px;
}
.lp-heat-top b { font-family: var(--f-display); color: var(--x-navy) }
.lp-heat-top .bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden }
.lp-heat-top .bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #B9F12F);
  transition: width .8s ease;
}
.lp-heat-top em { font-style: normal; font-weight: 600; white-space: nowrap }
.lp-heat-top em small { font-weight: 400; color: var(--muted) }
.lp-heat .lp-heat-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 14px;
}
.lp-heat-stats b { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--accent) }
.lp-heat-stats span { font-size: 12px }
.lp-sample {
  border: 0;
  background: var(--x-lime);
  color: #0B3048;
  font-family: var(--f-body);
  font-weight: 600;
}
@media (max-width: 700px) {
  .lp-heat { grid-template-columns: minmax(0, 1fr); padding: 22px }
  .lp-heat-tower { width: min(100%, 220px); margin-inline: auto }
}

/* ---------- BEAVER CRM lövhəsi ----------
   Tətbiq pəncərəsi kimi: feruzə → dərin göy başlıq, limon vurğu,
   hər sütunun öz rəngi (yeni / əlaqə / rezerv / satıldı). */
.lp-crm {
  margin-top: 40px;
  border: 0;
  border-radius: 20px;
  background: var(--surface2);
  box-shadow: var(--x-shadow-hi);
}
.lp-crm-bar {
  gap: 20px;
  padding: 14px 20px;
  border: 0;
  background: var(--pal-navy);
  box-shadow: inset 0 -1px 0 rgba(242, 240, 233, .1);
  color: #F2F0E9;
}
.lp-crm-dots { display: flex; gap: 6px }
.lp-crm-dots i { width: 10px; height: 10px; border-radius: 50% }
.lp-crm-dots i:nth-child(1) { background: #B9F12F }
.lp-crm-dots i:nth-child(2) { background: #F2F0E9 }
.lp-crm-dots i:nth-child(3) { background: rgba(242, 240, 233, .4) }
.lp-crm-logo { color: #F2F0E9 }
.lp-crm-logo i { color: var(--x-lime) }
.lp-crm-tabs { color: rgba(242, 240, 233, 0.7) }
.lp-crm-tabs b { color: #F2F0E9; border-bottom-color: var(--x-lime) }
.lp-crm-me {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--x-lime);
  color: #0B3048;
  font-size: 11px;
  font-weight: 700;
}
.lp-board { gap: 14px; padding: 20px }
.lp-col[data-col="new"] { --c: var(--pal-lime) }
.lp-col[data-col="talk"] { --c: color-mix(in srgb, var(--ink) 40%, transparent) }
.lp-col[data-col="hold"] { --c: color-mix(in srgb, var(--ink) 70%, transparent) }
.lp-col[data-col="sold"] { --c: var(--ink) }
.lp-col {
  border-radius: 12px;
  border-top: 3px solid var(--c);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(11, 48, 72, 0.06);
}
.lp-col h4,
.lp-col h4 em { font-family: var(--f-body); font-weight: 600 }
.lp-col h4 span,
.lp-col[data-col="new"] h4 span { color: var(--ink) }
.lp-col h4 em {
  padding: 0 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--ink);
}
.lp-lead,
.lp-lead.hold,
.lp-lead.sold {
  border: 0;
  border-inline-start: 3px solid var(--c);
  border-radius: 8px;
  background: var(--surface2);
}
.lp-lead b { font-family: var(--f-display); color: var(--x-navy) }
.lp-lead span { font-family: var(--f-body) }
.lp-lead.is-fresh { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent) }
.lp-crm-foot { border-top: 0; background: var(--surface); border-radius: 0 0 20px 20px }

/* ---------- nəticə ----------
   İkinci kart referansın feruzə "vurğu" kartıdır — ritm qırılır. */
.lp-results { gap: 24px }
.lp-results article {
  border: 0;
  border-radius: 16px;
  padding: 32px 28px;
  background: var(--x-band);
}
.lp-results .k {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -.02em;
}
.lp-results article:nth-child(2) { background: var(--accent) }
.lp-results article:nth-child(2) :is(h3, .k) { color: var(--accent-ink) }
.lp-results article:nth-child(2) p { color: color-mix(in srgb, var(--accent-ink) 80%, transparent) }

/* ---------- platforma: xətli cədvəl → kart qridi ---------- */
.lp-feats {
  gap: 24px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.lp-feats article {
  padding: 28px 24px;
  border: 0 !important;
  border-radius: 16px;
  background: var(--x-band);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.lp-feats article:hover { background: var(--surface); transform: translateY(-3px); box-shadow: var(--x-shadow-hi) }
.lp-feats svg {
  box-sizing: content-box;
  padding: 14px;
  border-radius: 50%;
  background: var(--accent-soft);
}

/* ---------- proses: mavi fonda kartlar ağdır ---------- */
.lp-hero ~ .wrap #proses .step { background: var(--surface); box-shadow: var(--x-shadow) }
.lp-hero ~ .wrap #proses .step .dur { background: var(--x-band) }

/* ---------- suallar ---------- */
.lp-faq { gap: 12px }
.lp-faq details { border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--x-shadow) }
.lp-faq details[open] { box-shadow: 0 0 0 2px var(--accent), var(--x-shadow) }
.lp-faq summary {
  padding: 22px 28px;
  align-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--x-navy);
}
.lp-faq summary::after {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 20px;
}
.lp-faq p { padding: 0 28px 24px }

/* ---------- əlaqə: landing.css-in `!important` fonunu əvəz edir ---------- */
.contact {
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--x-deep) !important;
}

@media (max-width: 600px) {
  .lp-hero { padding-block: 72px 88px }
  .lp-pain,
  .lp-vs-col,
  .lp-results article { padding: 24px }
  .lp-vs-arrow { margin-block: 12px }
  .lp-faq summary { padding: 18px 20px; font-size: 16px }
  .lp-faq p { padding: 0 20px 20px }
}

/* Mavi fonda format nişanları ağ olmalıdır, yoxsa fonla birləşir. */
.lp-hero ~ .wrap #proses .formats code { background: var(--surface) }


/* ======================================================================
   home.css-dəki sabit rənglər — üç rəngli palitraya gətirilir
   (home.css news.html ilə ortaqdır, ona görə orada dəyişmir).
   ====================================================================== */
.wip { background: rgba(185, 241, 47, .22); color: var(--ink) }
.soon { background: var(--accent-soft); color: var(--ink) }
.proj .tech { background: rgba(11, 48, 72, .8); color: #F2F0E9 }
.proj .thumb::after { background: linear-gradient(to top, rgba(11, 48, 72, .85), transparent) }
.proj .meta, .proj .meta h3 { color: #F2F0E9 }
.proj .meta .loc { color: rgba(242, 240, 233, .78) }
.proj:hover { box-shadow: var(--x-shadow-hi) }
.sl-nav { box-shadow: var(--x-shadow) }
.modal { box-shadow: var(--x-shadow-hi) }
.modal::backdrop { background: rgba(11, 48, 72, .76) }
.modal-x:hover { background: var(--accent-soft) }
.modal-msg.is-ok { background: rgba(185, 241, 47, .22); color: var(--ink) }
.modal-msg.is-bad { background: rgba(11, 48, 72, .1); color: var(--ink); box-shadow: inset 3px 0 0 var(--ink) }