/* Kurban Intelligence Lab — responsive + motion rules.
   Layout hooks are explicit data-attributes set in the page templates
   (data-cols, data-stack, data-row, data-pad, …) — deterministic and
   independent of how the runtime serializes inline styles. Desktop
   rendering is untouched; overrides apply only inside media queries.
   Motion behaviors are driven by /site.js and respect reduced motion. */

/* The runtime hides the raw <x-dc> template via injected JS; with the
   deferred script that injection happens late, so guard it here too —
   this stylesheet is render-blocking and applies at first paint. */
x-dc{display:none!important}

/* ---------------- Cross-document page transitions ---------------- */
@view-transition{navigation:auto}
@keyframes kb-vt-out{to{opacity:0}}
@keyframes kb-vt-in{from{opacity:0;transform:translateY(10px)}}
::view-transition-old(root){animation:kb-vt-out .18s cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:kb-vt-in .32s cubic-bezier(.22,1,.36,1) both}

/* ---------------- Keynote headline reveal (words added by site.js) ---------------- */
.kb-w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.35em);animation:kb-word .7s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--kbi,0)*70ms)}
@keyframes kb-word{to{opacity:1;filter:blur(0);transform:none}}

/* ---------------- Scroll-aware navigation ---------------- */
header{transition:background-color .35s,border-color .35s}
header nav{transition:height .35s cubic-bezier(.22,1,.36,1)}
header nav img{transition:transform .35s cubic-bezier(.22,1,.36,1)}
header[data-kb-scrolled]{background:rgba(9,7,15,.9)!important;border-bottom-color:rgba(168,140,255,.24)!important}
header[data-kb-scrolled] nav{height:58px!important}
header[data-kb-scrolled] nav img{transform:scale(.88)}
[data-nav-links] a{position:relative}
[data-nav-links] a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,#c9a8ff,#a06bff);transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.22,1,.36,1)}
html[dir="rtl"] [data-nav-links] a::after{transform-origin:right center}
[data-nav-links] a:hover::after,
[data-nav-links] a[data-active="true"]::after{transform:scaleX(1)}

/* ---------------- Card spotlight (cursor-tracked glow, site.js sets vars) ---------------- */
@media (hover:hover) and (pointer:fine){
  [data-cols]:not([data-cols="stats"]):not([data-cols="footer"]) > *{position:relative}
  [data-cols]:not([data-cols="stats"]):not([data-cols="footer"]) > *::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;background:radial-gradient(240px circle at var(--kb-x,50%) var(--kb-y,50%),rgba(160,107,255,.13),transparent 70%);pointer-events:none}
  [data-cols]:not([data-cols="stats"]):not([data-cols="footer"]) > *:hover::after{opacity:1}
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .kb-w{opacity:1;filter:none;transform:none;animation:none}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ---------------- Navigation ---------------- */
[data-nav-burger]{display:none}
@media (max-width:920px){
  [data-nav-links]{display:none!important}
  [data-nav-burger]{display:inline-flex!important}
}
@media (max-width:560px){
  [data-nav-cta]{display:none!important}
}
[data-nav-panel]{position:fixed;top:72px;left:0;right:0;z-index:49;background:rgba(12,10,18,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(168,140,255,.16);display:flex;flex-direction:column;padding:14px 20px 22px;gap:4px}
[data-nav-panel] a{font-size:16px;padding:12px 10px;border-radius:10px;text-decoration:none;color:#d8d3e6}
[data-nav-panel] a:hover{background:rgba(168,140,255,.08);color:#fff}

/* ---------------- Structural grid collapse ---------------- */
@media (max-width:1024px){
  [data-cols="5"],[data-cols="4"],[data-cols="3"]{grid-template-columns:repeat(2,1fr)!important}
  [data-cols="footer"]{grid-template-columns:1fr 1fr!important}
}
@media (max-width:900px){
  [data-stack]{grid-template-columns:1fr!important}
  [data-row]{grid-template-columns:1fr!important;justify-items:start}
}
@media (max-width:640px){
  [data-cols="5"],[data-cols="4"],[data-cols="3"],[data-cols="2"],
  [data-cols="footer"],[data-form-row]{grid-template-columns:1fr!important}
  [data-cols="stats"]{grid-template-columns:repeat(2,1fr)!important}
  [data-hero-visual]{display:none!important}
  [data-pad]{padding:36px 22px!important}
  [data-foot]{padding:52px 20px 32px!important}
  section[style]{padding-left:20px!important;padding-right:20px!important}
}

/* ---------------- Fluid typography (phones/small tablets only) ---------------- */
@media (max-width:760px){
  h1{font-size:clamp(30px,8.4vw,44px)!important}
  h2{font-size:clamp(23px,6.4vw,32px)!important}
  h3{font-size:clamp(16px,4.8vw,20px)!important}
  [data-lede]{font-size:clamp(18px,5vw,22px)!important}
  [data-count]{font-size:clamp(30px,8vw,40px)!important}
}
@media (max-width:400px){
  h1{font-size:clamp(27px,8.8vw,34px)!important}
}

/* ---------------- Floating WhatsApp button ---------------- */
[data-wa-float]{position:fixed;bottom:22px;right:22px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(37,211,102,.4);transition:transform .2s}
[data-wa-float]:hover{transform:translateY(-3px) scale(1.05)}
[data-wa-float] svg{width:30px;height:30px;fill:#fff}
html[dir="rtl"] [data-wa-float]{right:auto;left:22px}

/* ---------------- RTL typography (Arabic pages) ---------------- */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] button,
html[dir="rtl"] span:not([dir="ltr"]){letter-spacing:0!important}