/* ==========================================================================
   AIDIAD — ported verbatim from the design source (AIDIAD.dc.html)
   ========================================================================== */
:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F4F7F6;
  --text-primary: #1E293B;
  --text-muted: #64748B;
  --accent: #2563EB;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --success: #10B981;
  --border: #E2E8F0;
  --grad: linear-gradient(90deg, #2563EB, #10B981);
  --disp: "Space Grotesk", system-ui, sans-serif;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--success); }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #fff; }

@media (pointer: fine) {
  body { cursor: none; }
  a, button { cursor: none; }
}

@keyframes cll-spin { to { transform: rotate(360deg); } }
@keyframes cll-marq { to { transform: translateX(-50%); } }
@keyframes cll-marqR { to { transform: translateX(50%); } }
@keyframes cll-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cll-shimmer { to { background-position: 200% center; } }
@keyframes cll-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
[data-reveal].cll-in { opacity: 1; transform: none; }

.cll-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.cll-word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.cll-word.cll-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .cll-word > span { transform: none; }
}

@media (pointer: coarse) { [data-cursor] { display: none !important; } }

[data-team-card]:hover [data-team-img] { filter: grayscale(0) !important; }
[data-team-card]:hover [data-team-social] { opacity: 1 !important; transform: translateY(0) !important; }
[data-client]:hover { opacity: 1 !important; filter: grayscale(0) !important; color: var(--accent) !important; }
[data-work-card]:hover { transform: translateY(-6px); }
[data-svc-card]:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(37,99,235,.4); border-color: var(--accent) !important; }
[data-svc-card]:hover [data-svc-arrow] { transform: translateX(5px); }
[data-hub-row]:hover { padding-left: 22px !important; background: var(--bg-secondary) !important; }
[data-mega-item]:hover { background: var(--accent-soft) !important; }
[data-mega-item]:hover [data-mega-line] { transform: scaleY(1) !important; }
[data-blog-card] h3 { transition: color .25s; }
[data-blog-card]:hover h3 { color: var(--accent); }
[data-navlink]:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
[data-foot-link]:hover { color: #fff !important; }
[data-cta]:hover { background: var(--success) !important; }

@media (max-width: 960px) {
  [data-desktop-nav] { display: none !important; }
  [data-mobile-btn] { display: flex !important; }
  [data-mega-grid], [data-two-col], [data-work-grid], [data-price-grid], [data-rel-grid],
  [data-hub-grid], [data-case-grid], [data-post-grid], [data-contact-grid], [data-feat-post],
  [data-mega-cols], [data-ab-imgs], [data-proc-grid] { grid-template-columns: 1fr !important; }
  [data-svc-grid], [data-stats-grid], [data-blog-grid], [data-val-grid], [data-team-grid],
  [data-perk-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-case-side] { position: static !important; }
  [data-post-toc] { display: none !important; }
  [data-hub-preview] { display: none !important; }
}

@media (max-width: 600px) {
  [data-svc-grid], [data-proc-grid], [data-blog-grid], [data-val-grid], [data-perk-grid],
  [data-ab-imgs] { grid-template-columns: 1fr !important; }
  [data-stats-grid], [data-team-grid] { grid-template-columns: 1fr 1fr !important; }
}

/* ==========================================================================
   Header kontrastı — tünd fon üzərinə düşən elementlər
   JS (initHeaderContrast) hansı elementin altında tünd sahə olduğunu ölçüb
   .cll-on-dark sinfini əlavə edir. Məs. əlaqə səhifəsinin sağ tünd paneli.
   ========================================================================== */
[data-site-header] .cll-on-dark {
  color: #fff !important;
  transition: color .25s, background .25s;
}

/* header-in tünd CTA düyməsi tünd fonda görünmür → tərsinə çevrilir */
[data-site-header] [data-cta].cll-on-dark {
  background: #fff !important;
  color: var(--text-primary) !important;
}

/* mobil menyu düyməsinin xətləri */
[data-site-header] [data-mobile-btn].cll-on-dark span {
  background: #fff !important;
}

/* Sərhəddə kəsişən linklər — mətnin özü tam sərhəd nöqtəsində iki rəngə bölünür.
   JS linkin neçənci pikselində fonun dəyişdiyini hesablayıb gradient qurur.
   (mix-blend-mode işləmir, çünki fixed+z-index header ayrıca izolyasiya
   konteksti yaradır və blend səhifə ilə deyil, header-in şəffaf fonu ilə gedir.) */
[data-site-header] .cll-split {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  background-repeat: no-repeat;
}
[data-site-header] .cll-split:hover { opacity: .72; background-color: transparent !important; }

/* link hover fonu tünd səthdə daha yumşaq olsun */
[data-site-header] [data-navlink].cll-on-dark:hover {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
}

/* ==========================================================================
   MOBİL — header daşmasının qarşısı və menyu toggle
   ========================================================================== */

/* Heç bir halda səhifə üfüqi sürüşməsin */
html { overflow-x: hidden; }

/* Header elementləri lazım olanda kiçilə bilsin */
[data-site-header] > div { min-width: 0; }
[data-logo-link] { flex: 0 1 auto; min-width: 0; }

@media (max-width: 960px) {
  /* mega menyu yalnız hover ilə açılan desktop elementidir */
  [data-mega-panel] { display: none !important; }
}

@media (max-width: 600px) {
  /* CTA düyməsi mobil menyunun içində onsuz da var — header-də yer tutmasın */
  [data-site-header] [data-cta] { display: none !important; }
  /* loqo söz nişanı geniş olduğu üçün kiçildilir (740:80 nisbəti) */
  [data-logo-link] svg { height: 22px !important; }
}

/* Hamburger → X çevrilməsi */
[data-mobile-btn] span {
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .2s;
  transform-origin: center;
}
[data-mobile-btn][aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
[data-mobile-btn][aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Menyu açıqkən düymə üstdə qalsın */
[data-mobile-btn] { position: relative; z-index: 9002; }