/* ==========================================================================
   Başlıq · naviqasiya · altlıq · səhifə blokları
   ========================================================================== */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-ink);padding:var(--sp-3) var(--sp-5);
  border-radius:0 0 var(--r-md) 0;font-weight:700;
}
.skip:focus{left:0}

/* ---------- başlıq ---------- */
.hdr{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--canvas) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t),background var(--t);
}
.hdr.stuck{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:var(--sp-5);height:72px}
.brand{display:flex;align-items:center;gap:var(--sp-3);flex:none;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-18);letter-spacing:-.03em;color:var(--text)}
.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);flex:none}
.brand-mark svg{width:19px;height:19px}
.brand b{font-weight:600;color:var(--accent)}
.hdr-act{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex:none}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);
  color:var(--text-2);transition:background var(--t-fast),color var(--t-fast)}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.icon-btn svg{width:19px;height:19px}

/* ---------- naviqasiya ---------- */
.nav{display:flex;align-items:center;gap:var(--sp-6);margin-left:var(--sp-4)}
.nav>a{font-size:var(--fs-14);font-weight:600;color:var(--text-2);
  transition:color var(--t-fast);white-space:nowrap}
.nav>a:hover{color:var(--text)}
.nav>a[aria-current="page"]{color:var(--accent)}
.nav-cta{display:none}
.only-sm{display:none}
.only-lg{display:inline-flex}

@media (max-width:980px){
  .nav{
    position:fixed;inset:72px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:var(--sp-4) var(--sp-5) var(--sp-8);
    background:var(--canvas);border-bottom:1px solid var(--line);
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity var(--t),transform var(--t);
    max-height:calc(100dvh - 72px);overflow-y:auto;
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav>a{padding:var(--sp-4) 0;border-bottom:1px solid var(--line);font-size:var(--fs-16)}
  .nav-cta{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
  .nav-cta .btn{width:100%;height:48px;font-size:var(--fs-15)}
  .only-lg{display:none}
  .only-sm{display:grid}
  body.nav-lock{overflow:hidden}
}

/* ---------- hero ---------- */
.hero{padding:var(--sp-24) 0 var(--sp-20);position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;
  background:
    radial-gradient(760px 520px at 12% 0%,rgba(120,88,220,.20) 0%,transparent 62%),
    radial-gradient(680px 460px at 88% 8%,rgba(70,92,200,.14) 0%,transparent 60%);
}
[data-theme="light"] .hero::before{
  background:
    radial-gradient(760px 520px at 12% 0%,rgba(76,52,199,.07) 0%,transparent 62%),
    radial-gradient(680px 460px at 88% 8%,rgba(76,52,199,.05) 0%,transparent 60%);
}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-16);align-items:center;position:relative}
.hero h1{margin-top:var(--sp-5)}
.hero .lede{margin-top:var(--sp-6)}
.hero-act{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-8)}
.hero-note{margin-top:var(--sp-5);font-size:var(--fs-13);color:var(--text-3)}
@media (max-width:980px){
  .hero{padding:var(--sp-16) 0 var(--sp-12)}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:var(--sp-12)}
  .hero-vis{order:-1}
}

/* ---------- bölmə başlığı ---------- */
.sec-head{max-width:62ch}
.sec-head .h2{margin-top:var(--sp-4)}
.sec-head .lede{margin-top:var(--sp-5)}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}
.sec-body{margin-top:var(--sp-12)}

/* ---------- bölünmüş blok ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center}
.split.rev>*:first-child{order:2}
@media (max-width:980px){
  .split{grid-template-columns:minmax(0,1fr);gap:var(--sp-10)}
  .split.rev>*:first-child{order:0}
}

/* ---------- addımlar ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8);counter-reset:s}
.step{counter-increment:s}
.step::before{
  content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
  font-family:var(--font-mono);font-size:var(--fs-14);font-weight:500;margin-bottom:var(--sp-4);
}
.step h3{font-size:var(--fs-16)}
.step p{margin-top:var(--sp-2);font-size:var(--fs-14);color:var(--text-2)}
@media (max-width:980px){.steps{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;gap:var(--sp-4);text-align:left;
  padding:var(--sp-5) 0;font-size:var(--fs-16);font-weight:700;letter-spacing:-.015em;color:var(--text);
}
.faq-q svg{width:18px;height:18px;margin-left:auto;flex:none;color:var(--text-3);transition:transform var(--t)}
.faq-i.open .faq-q svg{transform:rotate(45deg);color:var(--accent)}
.faq-a{display:none;padding:0 0 var(--sp-5);color:var(--text-2);font-size:var(--fs-15);max-width:72ch}
.faq-i.open .faq-a{display:block}

/* ---------- CTA ---------- */
.cta-box{
  background:var(--surface-2);border:1px solid var(--accent-line);border-radius:var(--r-2xl);
  padding:var(--sp-20) var(--sp-10);text-align:center;box-shadow:var(--glow);
}
.cta-box .lede{margin:var(--sp-5) auto 0}
.cta-box .hero-act{justify-content:center}
@media (max-width:640px){.cta-box{padding:var(--sp-12) var(--sp-5)}}

/* ---------- altlıq ---------- */
.ftr{border-top:1px solid var(--line);padding:var(--sp-16) 0 var(--sp-10);margin-top:var(--sp-8)}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-10)}
.ftr h4{font-size:var(--fs-13);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-4)}
.ftr ul{display:flex;flex-direction:column;gap:var(--sp-3)}
.ftr a{color:var(--text-2);font-size:var(--fs-14)}
.ftr a:hover{color:var(--text)}
.ftr-btm{display:flex;gap:var(--sp-5);justify-content:space-between;flex-wrap:wrap;
  margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--line)}
@media (max-width:820px){
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
  .ftr-brand{grid-column:1/-1}
}

/* ---------- forma ---------- */
.form{display:grid;gap:var(--sp-5);max-width:560px}
.field{display:grid;gap:var(--sp-2)}
.field label{font-size:var(--fs-13);font-weight:700;color:var(--text-2)}
.field .hint{font-size:var(--fs-12);color:var(--text-3)}
.input,.textarea,.select{
  width:100%;height:50px;padding:0 var(--sp-4);
  background:var(--surface-hi);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--fs-15);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.textarea{height:auto;min-height:120px;padding:var(--sp-4);resize:vertical;line-height:1.6;font-family:inherit}
.select{appearance:none;cursor:pointer;padding-right:var(--sp-10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b88a3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--line-strong)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input.bad,.textarea.bad{border-color:#ff7b72}
.err{font-size:var(--fs-12);color:#ff7b72;display:none}
.field.invalid .err{display:block}
.form-note{font-size:var(--fs-13);color:var(--text-3);line-height:1.6}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-16);align-items:start}
@media (max-width:980px){.contact-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-10)}}

/* ==========================================================================
   Responsiv — başlıq, hero, altlıq
   ========================================================================== */

/* ---------- başlıq ---------- */
@media (max-width:980px){
  /* Menyu açılanda arxa fon görünsün deyə şüşə effekti saxlanılır, amma
     siyahının öz fonu tam qeyri-şəffafdır — mətn üst-üstə düşməsin. */
  .nav{background:var(--canvas);box-shadow:var(--shadow-2,0 18px 40px rgba(0,0,0,.35))}
  .hdr-in{height:64px}
  .nav{inset:64px 0 auto;max-height:calc(100dvh - 64px)}
  /* Menyunun içindəki hər bənd ən azı 48px — barmaq üçün. */
  .nav>a{min-height:48px;display:flex;align-items:center}
}
@media (max-width:380px){
  .brand{font-size:var(--fs-16)}
  .brand-mark{width:30px;height:30px;border-radius:9px}
  .brand-mark svg{width:17px;height:17px}
  .hdr-in{gap:var(--sp-3)}
}

/* ---------- hero ---------- */
@media (max-width:640px){
  /* Vizual yuxarıda qalır (3D səhnə məhsulun üzüdür), amma başlıq, izah və
     düymələr birinci ekrana sığsın deyə hündürlüyü məhdudlaşdırılır. */
  .hero{padding:var(--sp-10) 0 var(--sp-12)}
  .hero-in{gap:var(--sp-8)}
  .hero-vis{max-height:248px;display:grid;place-items:center;overflow:visible}
  .hero-act{gap:var(--sp-3);margin-top:var(--sp-6)}
  .hero-act .btn{width:100%}
  .hero-note{margin-top:var(--sp-4)}
}
@media (max-height:520px) and (orientation:landscape){
  /* Eninə tutanda 3D səhnə bütün ekranı yeməsin. */
  .hero-in{grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center}
  .hero-vis{order:2;max-height:210px}
}

/* ---------- altlıq ---------- */
@media (max-width:820px){
  /* Sıx siyahı əvəzinə barmağa uyğun hündürlükdə bəndlər. */
  .ftr ul{gap:0}
  .ftr ul a{display:flex;align-items:center;min-height:44px}
  .ftr-btm{margin-top:var(--sp-10);gap:var(--sp-2)}
}
@media (max-width:520px){
  .ftr-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
  .ftr-btm{flex-direction:column;align-items:flex-start}
}

/* ---------- addımlar / bölünmüş bloklar ---------- */
@media (max-width:640px){
  .steps{gap:var(--sp-5)}
  .split{gap:var(--sp-8)}
  .cta-box{padding:var(--sp-10) var(--sp-5)}
}

/* ---------- forma ---------- */
@media (max-width:640px){
  /* iOS 16px-dən kiçik sahəyə toxunanda səhifəni özü böyüdür. */
  .input,.textarea,.select{font-size:16px}
  .input,.select{height:52px}
  .form{gap:var(--sp-4)}
}

/* ---------- mərkəzlənmiş başlıqlar ---------- */
@media (max-width:640px){
  /* Dar sütunda mərkəzlənmiş çoxsətirli mətnin hər iki kənarı dalğalanır və
     son sətir tək qalır; telefonda sola yığılmış mətn daha rahat oxunur.
     Bu qayda layout.css-dədir: `.sec-head.center` burada təyin olunub, ona
     görə base.css-dən verilən üstələmə kaskadda uduzurdu. */
  .sec-head.center{text-align:left;margin-left:0}
  .sec-head.center .lede{margin-left:0;margin-right:0}
}

@media (max-width:820px){
  /* Loqo da bir keçiddir — barmaq üçün tam hündürlük. */
  .brand{min-height:44px}
}

@media (max-width:820px){
  /* Siyahı içindəki keçidlər (məs. əlaqə e-poçtu) mətn hündürlüyündə qalırdı;
     telefonda barmaq üçün ən azı 44px lazımdır. */
  .tick a{display:inline-flex;align-items:center;min-height:44px}
}

@media (min-width:641px) and (max-width:980px){
  /* Planşetdə də səhnə yuxarıda qalır, amma başlıq birinci ekrana girsin. */
  .hero{padding:var(--sp-12) 0 var(--sp-16)}
  .hero-in{gap:var(--sp-10)}
  .hero-vis{max-height:330px;display:grid;place-items:center}
}