/* AEVRIX GROUP — reklam landing səhifələri.
   styles.css-dəki tokenlərin üzərinə qurulur (rəng, şrift, ease oradan gəlir).
   Məqsəd tək: ziyarətçini WhatsApp-a çatdırmaq. Naviqasiya qəsdən minimaldır. */

/* ── JS-siz fallback: skript yüklənməsə də mətn GÖRÜNMƏLİDİR ──
   styles.css-də .reveal{opacity:0} idi — reklam səhifəsində bu boş ekran deməkdir. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── minimal nav ── */
.lp-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem clamp(1.1rem, 4vw, 3rem);
  background: rgba(7, 7, 10, .85); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom: 1px solid var(--line);
}
.lp-nav-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); letter-spacing: .13em; font-size: .9rem; color: var(--ink); }
.lp-nav-brand em { font-style: normal; color: var(--gold); font-weight: 400; }
.lp-nav-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.lp-lang { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); border: 1px solid var(--line); padding: .35rem .7rem; transition: color .3s, border-color .3s; }
.lp-lang:hover { color: var(--gold-hi); border-color: var(--gold-dim); }
.lp-nav-cta { display: none; }
@media (min-width: 720px) { .lp-nav-cta { display: inline-flex; padding: .55rem 1.15rem; font-size: .78rem; } }

/* ── hero ── */
.lp-hero { position: relative; max-width: 1140px; margin: 0 auto; padding: clamp(3.2rem, 8vw, 6rem) clamp(1.1rem, 4vw, 3rem) clamp(2.4rem, 5vw, 3.6rem); }
.lp-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 460px; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 100% at 18% 0%, rgba(200, 168, 105, .16), transparent 70%);
}
.lp-badge {
  display: inline-block; font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-dim); padding: .42rem .9rem; margin-bottom: 1.6rem;
}
.lp-h1 { font-family: var(--serif); font-weight: 500; line-height: 1.06; letter-spacing: -.01em; font-size: clamp(2.2rem, 1rem + 5.4vw, 4.4rem); margin: 0 0 1.3rem; max-width: 17ch; }
.lp-h1 .gold { color: var(--gold-hi); font-style: italic; font-weight: 400; }
.lp-sub { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.65; color: var(--mut); max-width: 60ch; margin: 0 0 2.2rem; }
.lp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.lp-cta-note { font-size: .82rem; color: var(--mut); letter-spacing: .02em; }

/* ── sübut zolağı — ölçü cədvəli (ana səhifənin hero-stats dili) ── */
.lp-proof-strip {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(2.6rem, 6vw, 4rem);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) { .lp-proof-strip { grid-template-columns: repeat(4, 1fr); } }
.lp-proof-strip div { position: relative; padding: 1.4rem 1.2rem 1.4rem 1.2rem; text-align: left; }
.lp-proof-strip div::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 1rem; background: var(--line-strong); }
.lp-proof-strip b { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); color: var(--gold-hi); font-weight: 460; line-height: 1.1; }
.lp-proof-strip span { display: block; margin-top: .5rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }

/* ── bölmə başlığı ── */
/* landing-də axın sürətli olmalıdır — bölmə boşluğu ana saytdan qəsdən daha sıxdır */
.lp-sec { max-width: 1140px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 3.9rem) clamp(1.1rem, 4vw, 3rem); }
.lp-sec-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2.6rem; }
/* --gold-dim (#8a744a) kiçik mətndə 4.48:1 verir, WCAG AA 4.5:1 tələb edir.
   Qlobal token dəyişdirilmir (ana saytın dizaynına toxunmamaq üçün) — yalnız burada
   bir pillə açıq ton işlədilir: 5.6:1. */
.lp-sec-no { font-family: var(--mono); font-size: .78rem; color: var(--gold); letter-spacing: .26em; }
.lp-sec-no::before { content: '§ '; color: #9c8455; }
.lp-sec h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.5rem); margin: 0; letter-spacing: -.005em; }
.lp-rule { height: 1px; flex: 1; background: linear-gradient(90deg, var(--line), transparent); }

/* ── daxildir — indeks reyestri (kart şəbəkəsi deyil, ana saytın svc-index dili) ── */
.lp-grid { border-top: 1px solid var(--line); counter-reset: lpc; }
.lp-card {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: .35rem 1.25rem;
  align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid var(--line);
  position: relative; transition: padding-left .4s var(--ease);
}
@media (min-width: 860px) {
  .lp-card { grid-template-columns: 3.5rem minmax(0, .9fr) minmax(0, 1.6fr); gap: 1.5rem; }
}
.lp-card::before {
  counter-increment: lpc; content: counter(lpc, decimal-leading-zero);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; color: var(--faint); transition: color .3s;
}
.lp-card::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--gold); transition: width .55s var(--ease); }
.lp-card:hover { padding-left: .7rem; }
.lp-card:hover::before { color: var(--gold); }
.lp-card:hover::after { width: 100%; }
.lp-card h3 { font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); font-weight: 520; margin: 0; color: var(--ink); transition: color .3s; }
.lp-card:hover h3 { color: var(--gold-hi); }
.lp-card p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--mut); max-width: 34rem; }
@media (max-width: 859px) { .lp-card p { grid-column: 2; } }

/* ── mərhələlər — tick-li cizgi zaman xətti (ana saytın steps dili) ── */
.lp-steps { display: grid; gap: 1.6rem; }
@media (min-width: 780px) {
  .lp-steps { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; position: relative; padding-top: 1.4rem; }
  .lp-steps::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
  .lp-step { border-top: 0; padding-top: 0; position: relative; }
  .lp-step::before { content: ''; position: absolute; top: -1.4rem; left: 0; width: 1px; height: .9rem; background: var(--line-strong); transition: background .4s, height .4s var(--ease); }
  .lp-step:hover::before { background: var(--gold); height: 1.4rem; }
}
.lp-step { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.lp-step b { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold); letter-spacing: .12em; font-weight: 400; }
.lp-step h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 560; margin: .5rem 0 .45rem; }
.lp-step p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--mut); }

/* ── real layihələr — redaksiya sıraları
   (landing + case-detalın "digər layihələr" bölməsi; case-index .cs-grid öz şəbəkəsini saxlayır) ── */
.lp-projects:not(.cs-grid) { border-top: 1px solid var(--line); }
.lp-projects:not(.cs-grid) .lp-project {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem 2rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
  position: relative; transition: padding-left .4s var(--ease);
}
@media (min-width: 860px) {
  .lp-projects:not(.cs-grid) .lp-project { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) auto; align-items: baseline; }
}
.lp-projects:not(.cs-grid) .lp-project::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--gold); transition: width .55s var(--ease); }
.lp-projects:not(.cs-grid) .lp-project:hover { padding-left: .7rem; background: none; }
.lp-projects:not(.cs-grid) .lp-project:hover::after { width: 100%; }
.lp-project b { display: block; font-family: var(--serif); font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem); font-weight: 500; color: var(--ink); margin-bottom: 0; transition: color .3s; }
.lp-projects:not(.cs-grid) .lp-project:hover b { color: var(--gold-hi); }
.lp-project p { margin: 0; font-size: .91rem; line-height: 1.62; color: var(--mut); max-width: 44rem; }
.lp-projects:not(.cs-grid) .cs-more { margin-top: 0; padding-top: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.lp-trust { font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #9c8455; margin: 0 0 1.4rem; }

/* ── FAQ: JS-siz native akkordeon ── */
.lp-faq { border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.6rem 1.25rem 0; position: relative;
  font-family: var(--serif); font-size: clamp(1rem, .95rem + .25vw, 1.14rem); color: var(--ink); transition: color .3s;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:hover { color: var(--gold-hi); }
.lp-faq summary::after {
  content: ''; position: absolute; right: .35rem; top: 50%; width: 10px; height: 10px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease);
}
.lp-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.lp-faq p { margin: 0; padding: 0 2.6rem 1.5rem 0; font-size: .95rem; line-height: 1.72; color: var(--mut); max-width: 78ch; }

/* ── yekun çağırış ── */
.lp-closer { position: relative; border: 1px solid var(--line); padding: clamp(2.2rem, 6vw, 4rem); text-align: center; overflow: hidden; }
.lp-closer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 130% at 50% 0%, rgba(200, 168, 105, .13), transparent 68%); }
.lp-closer h2 { position: relative; font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.7rem); margin: 0 0 1rem; }
.lp-closer p { position: relative; color: var(--mut); max-width: 56ch; margin: 0 auto 2rem; line-height: 1.68; }
.lp-closer .btn { position: relative; }
.lp-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; margin-top: 1.8rem; font-size: .86rem; color: var(--mut); }
/* mətn içindəki linklər yalnız rənglə seçilməməlidir (WCAG) — altdan xətt əlavə olunur */
.lp-contacts a { color: var(--gold); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.lp-contacts a:hover { color: var(--gold-hi); }

/* ── mobil yapışqan CTA: reklam trafikində ən böyük konvertasiya qazancı ── */
.lp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: .8rem; align-items: center; justify-content: center;
  padding: .7rem clamp(.8rem, 3vw, 1.4rem) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(7, 7, 10, .93); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-top: 1px solid var(--line);
}
.lp-sticky .btn { width: 100%; justify-content: center; padding: .85rem 1.2rem; }
@media (min-width: 720px) { .lp-sticky { display: none; } }
@media (max-width: 719px) { body { padding-bottom: 4.6rem; } }

/* ── altlıq ── */
.lp-foot { border-top: 1px solid var(--line); padding: 2.2rem clamp(1.1rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; font-size: .8rem; color: var(--mut); }
.lp-foot a { color: var(--mut); }
.lp-foot a:hover { color: var(--gold); }
.lp-foot-copy { margin-left: auto; }

/* ══════════ CASE STUDY SƏHİFƏLƏRİ ══════════
   Eyni fayl işlədilir ki, marketinq səhifələri bir CSS sorğusu ilə kifayətlənsin. */

.cs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.6rem; font-size: .78rem; letter-spacing: .04em; color: var(--mut); }
.cs-crumbs a { color: var(--mut); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.cs-crumbs a:hover { color: var(--gold-hi); }
.cs-crumbs span { color: var(--faint); }
.cs-crumbs b { color: var(--gold); font-weight: 500; }

.cs-hero { padding-top: clamp(2rem, 5vw, 3.4rem); }
.cs-h1 { max-width: 20ch; }
.cs-client { font-family: var(--mono); font-size: .82rem; letter-spacing: .06em; color: #9c8455; margin: 0 0 1.1rem; }

.cs-body { font-size: clamp(1rem, .96rem + .3vw, 1.14rem); line-height: 1.78; color: var(--ink); max-width: 74ch; margin: 0; }

/* qrafik: statik SVG, JS tələb etmir */
.cs-figure { margin: 0; border: 1px solid var(--line); padding: clamp(1rem, 3vw, 2rem); }
.cs-chart { display: block; width: 100%; height: auto; }
.cs-figure figcaption { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .82rem; letter-spacing: .04em; color: var(--mut); }

.cs-stack { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.cs-stack li { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--gold); border: 1px solid var(--line); padding: .45rem .85rem; transition: border-color .3s, color .3s; }
.cs-stack li:hover { border-color: var(--gold-dim); color: var(--gold-hi); }

/* layihə kartı — link kimi (yalnız case-index .cs-grid daxilində;
   landing-dəki .lp-projects reyestr sıraları yuxarıda ayrıca stillənir) */
.cs-grid { border: 1px solid var(--line); display: grid; gap: 1px; background: var(--line); }
@media (min-width: 860px) { .cs-grid { grid-template-columns: repeat(3, 1fr); } }
.cs-grid .lp-project.cs-link { display: flex; flex-direction: column; gap: .55rem; background: var(--bg); padding: clamp(1.5rem, 3vw, 2rem); transition: background .4s var(--ease); }
.cs-grid .lp-project.cs-link:hover { background: var(--panel); }
.cs-grid .lp-project b { color: var(--gold-hi); font-size: 1.15rem; }
.cs-tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #9c8455; }
.cs-link b { margin-bottom: 0; }
.cs-more { margin-top: auto; padding-top: .9rem; font-size: .8rem; letter-spacing: .08em; color: var(--gold); }
.cs-link:hover .cs-more { color: var(--gold-hi); }

/* case səhifələrində 3 metrik var (landing-də 4) — boş xana qalmasın */
.lp-proof-strip.cs-metrics { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 700px) { .lp-proof-strip.cs-metrics { grid-template-columns: repeat(3, 1fr); } }
.cs-metrics div { padding-inline: .7rem; }
.cs-metrics b { font-size: clamp(1.35rem, 1rem + 1.5vw, 2.3rem); }

/* ── toxunma hədəfi: WCAG 2.5.8 minimum 24×24 CSS piksel ──
   Altlıq, çörək qırıntısı və əlaqə linkləri 16–21 px hündürlükdə idi (audit tapdı):
   telefonda dəqiq toxunmaq çətindir. Vizual görünüş dəyişmir, yalnız toxunma sahəsi böyüyür. */
.lp-foot a,
.cs-crumbs a,
.lp-contacts a {
  display: inline-flex; align-items: center;
  min-height: 24px; padding-block: 2px;
}
.lp-contacts span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3em; min-height: 24px; }

/* ── çox dar ekranda nav: 4 dil linki + brend 320px-ə sığmalıdır ── */
@media (max-width: 430px) {
  .lp-nav { gap: .6rem; padding-left: .8rem; padding-right: .8rem; }
  .lp-nav-right { gap: .4rem; }
  .lp-lang { padding: .3rem .45rem; font-size: .68rem; letter-spacing: .05em; }
  .lp-nav-brand { font-size: .8rem; gap: .45rem; }
}

/* ── layihə filmi (case səhifəsi) ── */
.cs-video { margin: 0; border: 1px solid var(--line); padding: clamp(.6rem, 1.6vw, 1.2rem); }
.cs-video video { display: block; width: 100%; height: auto; background: #000; }
.cs-video figcaption { margin-top: .9rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }