/* ==========================================================================
   ZEON ACADEMY — base.css
   Dizayn ecomprofit.ru-dan 1:1 götürülüb.
   Yeganə fərq: yaşıl vurğu → ZEON loqosunun mavisi.
   Şrift: Poppins (ecommerce.az-dakı şrift) — Azərbaycan hərfləri tam dəstəklənir.
   ========================================================================== */

:root {
  /* ---- səthlər ---- */
  --white:      #FFFFFF;
  --paper:      #F2F4F8;   /* növbələşən bölmə fonu + soft düymə */
  --paper-card: #F5F7FA;   /* nav pill, üzən rozet */
  --paper-2:    #EEF1F6;

  /* ---- mətn ---- */
  --ink:        #171D2C;   /* başlıqlar */
  --ink-body:   #1F2636;   /* əsas mətn */
  --ink-muted:  #5C6577;   /* ikinci dərəcəli */
  --ink-dark:   #070B16;

  /* ---- xətlər ---- */
  --line:       #E2E5EC;
  --line-soft:  rgba(23, 29, 44, .06);
  --line-soft2: rgba(23, 29, 44, .08);

  /* ---- brend (ZEON loqosu) ---- */
  --brand-400:  #3D8BFF;
  --brand-500:  #0F62FE;
  --brand-600:  #0B4FD1;
  --brand-700:  #1E3B8B;
  --cyan:       #22D3EE;
  --brand-grad: linear-gradient(#3D8BFF, #0B4FD1);
  --brand-grad-soft: linear-gradient(#5B9DFF, #0F62FE);

  /* ---- semantik ---- */
  --ok:   #12A150;
  --bad:  #E0525F;

  /* ---- kölgələr (ecomprofit dəyərləri) ---- */
  --sh-soft:  inset 0 1px 0 0 #fff, 0 8px 20px -10px rgba(20, 30, 60, .25);
  --sh-card:  0 16px 44px -30px rgba(20, 30, 60, .5);
  --sh-price: 0 20px 50px -30px rgba(20, 30, 60, .4);
  --sh-mod:   0 14px 40px -30px rgba(20, 30, 60, .5);
  --sh-mod-open: 0 24px 55px -30px rgba(15, 98, 254, .4);
  --sh-faq:   0 14px 40px -28px rgba(20, 30, 60, .5);
  --sh-faq-open: 0 24px 50px -28px rgba(15, 98, 254, .35);
  --sh-brand: 0 14px 30px -12px rgba(15, 98, 254, .7);
  --sh-final: 0 40px 90px -50px rgba(20, 30, 60, .55);
  --sh-shot:  0 34px 60px -40px rgba(20, 30, 60, .55);
  --sh-pill:  inset 0 1px 0 0 rgba(255,255,255,.9), 0 10px 26px -18px rgba(20,30,60,.45);

  /* ---- ritm ---- */
  --shell: 1265px;
  --pad-x: 32px;
  --sec-y: 76px;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --e: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

::selection { background: var(--brand-500); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 8px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #C4CBD8; border-radius: 99px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }

/* ---------- tipoqrafiya ---------- */
h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 800; letter-spacing: -.03em; }

.h-hero {
  font-size: clamp(2.15rem, 4.2vw, 3.25rem);
  line-height: 1.04;
}
.h-sec {
  font-size: clamp(1.85rem, 3.7vw, 2.9rem);
  line-height: 1.1;
}
.h-sec--caps {
  font-size: clamp(1.85rem, 3.9vw, 3rem);
  line-height: .98;
  text-transform: uppercase;
}
h3 { font-size: 1.125rem; line-height: 1.55; }
h4 { font-size: 1rem; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; }

.lead {
  font-size: clamp(1rem, .35vw + .93rem, 1.125rem);
  line-height: 1.625;
  color: var(--ink-muted);
  font-weight: 400;
}
.small { font-size: .875rem; line-height: 1.6; color: var(--ink-muted); }
.tiny  { font-size: .8125rem; line-height: 1.55; color: var(--ink-muted); }

/* ---------- kicker (xətt + CAPS yazı) ---------- */
.kicker { display: flex; align-items: center; gap: 12px; }
.kicker::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--brand-600);
  flex: none;
}
.kicker span {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.kicker--center { justify-content: center; }

/* ---------- layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

section { position: relative; overflow: hidden; }
.sec { padding-block: var(--sec-y); }
.sec--paper { background: var(--paper); }
.sec--white { background: var(--white); }

/* fon işıqları */
.glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.glow--brand { background: rgba(15, 98, 254, .1); }
.glow--cyan  { background: rgba(34, 211, 238, .1); }
.glow--soft  { background: rgba(15, 98, 254, .07); }

.z1 { position: relative; z-index: 1; }

/* üst kənarda incə xətt-işıq */
.edge-glow::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 288px;
  background: linear-gradient(180deg, rgba(15, 98, 254, .045), transparent);
  pointer-events: none;
}

/* ---------- ŞƏKİL YERİ ---------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 20px;
  border: 1.5px dashed #C9D0DC;
  border-radius: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(15,98,254,.03) 0 10px, transparent 10px 20px),
    var(--paper);
  color: #98A0AE;
  text-align: center;
}
.ph__ico { width: 24px; height: 24px; opacity: .55; }
.ph__label { font-size: .8125rem; font-weight: 600; color: #7B8496; }
.ph__size  { font-size: .6875rem; color: #98A0AE; }
.ph--sq   { aspect-ratio: 1; }
.ph--4x5  { aspect-ratio: 4/5; }
.ph--16x9 { aspect-ratio: 16/9; }
.ph--9x16 { aspect-ratio: 9/16; }

/* ---------- scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--e) var(--d, 0s), transform .6s var(--e) var(--d, 0s);
}
[data-reveal='left']  { transform: translateX(-22px); }
[data-reveal='right'] { transform: translateX(22px); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- keyframes ---------- */
@keyframes float      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes floatSlow  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ripple     { from { transform: scale(.35); opacity: .65; } to { transform: scale(2.2); opacity: 0; } }
@keyframes sweep      { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes toastIn    { from { opacity: 0; transform: translateX(-115%); } to { opacity: 1; transform: none; } }
@keyframes toastOut   { to { opacity: 0; transform: translateX(-115%); } }
@keyframes barDown    { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes eq        { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

.anim-float      { animation: float 4.5s ease-in-out infinite; }
.anim-float-slow { animation: floatSlow 6s ease-in-out infinite; }

/* ---------- əlçatanlıq ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  padding: 11px 18px; border-radius: 12px;
  background: var(--brand-500); color: #fff; font-weight: 600;
  transform: translateY(-160%); transition: transform .2s var(--e);
}
.skip-link:focus { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .cursor, .cursor-dot { display: none !important; }
}