/* ============================================================
   Resal V2 — small custom layer on top of Tailwind + Flowbite.
   Only things that are awkward to express as utilities live here.
   ============================================================ */

/* Alpine cloak — avoid flash before Alpine initializes */
[x-cloak] { display: none !important; }

/* Cascadia Code — self-hosted variable fonts (Latin/Greek/Cyrillic + ligatures).
   Arabic codepoints fall through to IBM Plex Sans Arabic so Arabic shaping
   stays correct in mono-styled labels. */
@font-face {
  font-family: 'Cascadia Code';
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/cascadia/CascadiaCode-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Cascadia Code';
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
  src: url('/fonts/cascadia/CascadiaCode-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  --font-mono: "Cascadia Code", "IBM Plex Sans Arabic", ui-monospace, "Courier New", monospace;
  /* Easing tokens — two families:
     --ease-apple  : Apple panel-spring; slow-start heavy decelerate (nav panels, drawers)
     --ease-spring : quick-start spring decelerate; primary interactive motion (cards, reveals)
     --ease-bounce : slight overshoot; used for micro-interactions that need tactility */
  --ease-apple:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* ===== Body ambient: subtle brand orbs on paper ===== */
body {
  background-image:
    radial-gradient(ellipse 90% 55% at 8% 6%,  rgba(14, 67, 241, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 95% 22%, rgba(0, 217, 166, 0.055) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 50% 55%, rgba(27, 6, 223, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 95%, rgba(0, 217, 166, 0.04) 0%, transparent 55%);
  background-attachment: fixed;
}

/* Arabic legibility:
   1. Mono-styled labels need more weight (Plex Sans Arabic is thin at 400/500).
   2. Letter-spacing MUST be 0 for Arabic — Arabic letters join contextually
      (initial/medial/final/isolated forms) and any positive tracking shifts
      letters apart, breaking the connection. The Tailwind `tracking-*`
      utilities map to letter-spacing, so we override per-locale. */
/* ============================================================
   Arabic legibility — universal letter-spacing kill switch.
   Arabic letters join contextually (initial / medial / final / isolated).
   Any positive `letter-spacing` (or Tailwind `tracking-*`) shifts letters
   apart and breaks the connection. The whole site is `dir="rtl"` when
   Arabic; we nuke letter-spacing on every element under RTL so any future
   class — known or yet-to-be-written — is safe by default. Latin text
   under RTL renders fine without tracking.
   ============================================================ */
[dir="rtl"],
[dir="rtl"] * {
  letter-spacing: 0 !important;
}

/* Mono-styled labels still get a heavier weight (Plex Sans Arabic at 400/500
   reads thin against the page); override applies to anything mono-shaped. */
html[lang|="ar"] .font-mono,
html[lang|="ar"] [class*="font-mono"],
html[lang|="ar"] figcaption,
html[lang|="ar"] [class*="tag-bubble"],
html[lang|="ar"] .footer-col-title,
html[lang|="ar"] [class*="eyebrow"],
html[lang|="ar"] .eyebrow {
  font-weight: 600;
}

/* Selection */
::selection { background: rgba(14, 67, 241, 0.4); color: white; }

/* Focus-visible — duplicate removed; canonical rule at line ~114 below */

/* Staggered hero word reveal — triggered by .is-in on parent.
   Clip-path replaces overflow:hidden so we can keep the slide-up reveal
   AND let Arabic descenders (و، ي، ل، ن) escape the line-box at rest.
   Stage 1 (default): top + bottom hard-clip → hides spans translated below.
   Stage 2 (after .is-in settles): bottom opens, top stays clipped → descenders show.
   The clip transition is delayed past the longest word's slide so the open
   never reveals an in-flight span. */
#hero-headline .word {
  display: inline-block;
  margin-inline-end: 0.28em;
  vertical-align: baseline;
  padding-top: 0.14em;
  padding-bottom: 0.04em;
  line-height: 0.95;
  clip-path: inset(-0.05em -0.6em 0 -0.6em);
  transition: clip-path 0s 1.6s;
}
#hero-headline.is-in .word {
  clip-path: inset(-0.05em -0.6em -0.4em -0.6em);
}
#hero-headline .word:last-child { margin-inline-end: 0; }
#hero-headline .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-apple);
  transition-delay: calc(var(--i, 0) * 100ms);
  line-height: 0.95;
}
#hero-headline.is-in .word > span { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  #hero-headline .word { clip-path: inset(-0.05em -0.6em -0.4em -0.6em); transition: none; }
  #hero-headline .word > span { transform: none; transition: none; }
}

/* ===== Global focus rings (Phase 4.2) =====
   Browser default outlines look like 1995. We replace them with brand-blue
   on light surfaces and a soft white ring on dark surfaces. The ring only
   fires for keyboard navigation (`:focus-visible`), not on mouse clicks. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #0E43F1;
  outline-offset: 2px;
  border-radius: 4px;
}
[data-theme-section="dark"] :focus-visible,
.dark :focus-visible,
nav[data-theme="dark"] :focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}
/* Pill / round buttons: invisible offset means the ring sits right against
   the rounded edge — looks better than a square offset around a circle. */
.btn-press:focus-visible,
.tag-bubble:focus-visible,
[class*="rounded-full"]:focus-visible {
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  :focus-visible { transition: none !important; }
}

/* Reveal-on-scroll — richer intro: blur + scale + rise.
   The opacity:0 hide rule only kicks in once app.js has added `js-loaded`
   *and* wired the IntersectionObserver. Without JS the page is fully
   visible. Reduced-motion users skip the entire animation. The transform
   is gentler than the previous 36px/blur(10px) — Apple-bar polish. */
.js-loaded [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 800ms var(--ease-apple),
    transform 800ms var(--ease-apple);
  transition-delay: calc(var(--d, 0) * 100ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  will-change: auto; /* release compositor layer once settled */
}
/* Reduced-motion: skip the choreography entirely, regardless of JS state.
   This wins over `.js-loaded [data-reveal]` because of higher specificity
   via the @media wrapper and identical selector. */
@media (prefers-reduced-motion: reduce) {
  .js-loaded [data-reveal],
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Fluid cascade: direct children of a data-reveal section get a tiny additional stagger */
[data-reveal].is-in > * {
  animation: reveal-child-rise 1.1s var(--ease-apple) both;
}
[data-reveal].is-in > *:nth-child(1) { animation-delay: 120ms; }
[data-reveal].is-in > *:nth-child(2) { animation-delay: 220ms; }
[data-reveal].is-in > *:nth-child(3) { animation-delay: 320ms; }
[data-reveal].is-in > *:nth-child(4) { animation-delay: 420ms; }
[data-reveal].is-in > *:nth-child(5) { animation-delay: 520ms; }
[data-reveal].is-in > *:nth-child(6) { animation-delay: 620ms; }
[data-reveal].is-in > *:nth-child(7) { animation-delay: 720ms; }
[data-reveal].is-in > *:nth-child(8) { animation-delay: 820ms; }
[data-reveal].is-in > *:nth-child(9) { animation-delay: 920ms; }
[data-reveal].is-in > *:nth-child(10){ animation-delay: 1020ms; }
@keyframes reveal-child-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-in > * { animation: none; }
}

/* ===== Product card: idle blue depth + rich hover ===== */
.pc {
  position: relative;
  /* Idle state: subtle blue depth (always visible) */
  background:
    radial-gradient(ellipse at 85% 15%, rgba(14, 67, 241, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 100%, rgba(27, 6, 223, 0.07) 0%, transparent 55%),
    linear-gradient(155deg, oklch(0.15 0.035 265), oklch(0.12 0.03 265));
  transition:
    background 560ms var(--ease-spring),
    border-color 320ms ease,
    transform 480ms var(--ease-spring),
    box-shadow 480ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03);
}
.pc:hover,
.pc:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px -20px rgba(14,67,241,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  background:
    radial-gradient(ellipse at 80% 10%, rgba(14, 67, 241, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(27, 6, 223, 0.22) 0%, transparent 55%),
    linear-gradient(155deg, oklch(0.18 0.06 265), oklch(0.13 0.04 265)) !important;
}
.pc--featured:hover,
.pc--featured:focus-within {
  box-shadow: 0 24px 70px -18px rgba(27,6,223,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(27, 6, 223, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(14, 67, 241, 0.28) 0%, transparent 55%),
    linear-gradient(155deg, oklch(0.17 0.08 265), oklch(0.11 0.05 265)) !important;
}

/* ===== Logo swap (scroll-aware, driven by Alpine theme state) ===== */
.logo-white { display: inline-block; }
.logo-blue { display: none; }
nav[data-theme="light"] .logo-white { display: none; }
nav[data-theme="light"] .logo-blue  { display: inline-block; }

/* ============================================================
   Nav theming on light sections — overrides Tailwind utilities.
   Tailwind class specificity = 0-1-0; these rules need to win.
   `.nav-inherit-theme` is Nav.astro's top-bar container that
   scopes the override so descendants inside mega-panels/drawer
   (which stay dark regardless of section) aren't affected.
   ============================================================ */

/* Nav bar children: dim text → dark muted */
nav[data-theme="light"] .nav-inherit-theme .text-dim,
nav[data-theme="light"] .nav-inherit-theme button[aria-haspopup="true"] {
  color: rgba(10, 10, 46, 0.72);
}
nav[data-theme="light"] .nav-inherit-theme .text-dim:hover,
nav[data-theme="light"] .nav-inherit-theme button[aria-haspopup="true"]:hover,
nav[data-theme="light"] .nav-inherit-theme a:hover:not(.btn-press):not([href*="/contact"]) {
  color: rgba(10, 10, 46, 1);
}

/* hover:text-white utility should land on dark ink, not white */
nav[data-theme="light"] .nav-inherit-theme .hover\:text-white:hover {
  color: rgba(10, 10, 46, 1) !important;
}

/* White-border utilities → dark-border on light */
nav[data-theme="light"] .nav-inherit-theme .border-white\/10,
nav[data-theme="light"] .nav-inherit-theme .border-white\/15,
nav[data-theme="light"] .nav-inherit-theme .border-white\/20 {
  border-color: rgba(10, 10, 46, 0.12);
}

/* Burger icon (mobile menu toggle) */
nav[data-theme="light"] .nav-inherit-theme .lg\:hidden svg,
nav[data-theme="light"] .nav-inherit-theme .lg\:hidden i {
  color: rgba(10, 10, 46, 0.72);
}

/* Scroll shadow: lighter on light theme */
nav[data-theme="light"].shadow-\[0_8px_40px_-12px_rgba\(0\,0\,0\,0\.4\)\] {
  box-shadow: 0 8px 40px -16px rgba(10, 10, 46, 0.18);
}

/* CTA button stays brand-blue with white text in BOTH themes (intentional — it's a CTA) */

/* Mobile drawer stays dark in both themes — it's a full-screen overlay,
   not a bar over the page background. No override needed. */

/* ===== Product card corner icon (your V1 favorite, ported) ===== */
.pc-corner {
  position: absolute;
  inset-inline-end: -1.25rem;
  inset-block-end: -1.25rem;
  width: 9rem;
  height: 9rem;
  color: white;
  opacity: 0.07;
  stroke-width: 0.8;
  pointer-events: none;
  transition:
    opacity 420ms var(--ease-spring),
    transform 560ms var(--ease-spring);
  /* will-change only during hover — applied via parent hover selector below */
}
.pc:hover .pc-corner,
.pc:focus-within .pc-corner {
  will-change: transform, opacity;
  opacity: 0.28;
  transform: scale(1.3) translate(-0.75rem, -0.75rem) rotate(-6deg);
}
html[dir="rtl"] .pc:hover .pc-corner,
html[dir="rtl"] .pc:focus-within .pc-corner {
  transform: scale(1.3) translate(0.75rem, -0.75rem) rotate(6deg);
}

/* ===== Sexy glass-bubble "tags" (eyebrows + card labels) =====
   Single source of truth for the .tag-bubble pill. Variants
   (-blue, -teal, -dark, -light, -hot) live in lab.css and only set
   colours — never layout.
   The leading status-dot is a single ::before driven by --dot-rgb;
   variants override --dot-rgb so every pill pulses in its own colour. */
.tag-bubble {
  --dot-rgb: 14, 67, 241;          /* default = brand blue */
  display: inline-flex;
  align-items: center;
  align-self: flex-start;          /* never stretch in flex columns */
  width: fit-content;
  max-width: 100%;                 /* responsive: shrink below container */
  gap: 0.4rem;
  padding: 0.28rem 0.55rem;        /* compact pill — sits beside text, not CTA-sized */
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 2px 4px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  line-height: 1.25;               /* allow wrap height when text breaks */
  white-space: normal;             /* let long eyebrows wrap on mobile */
  overflow-wrap: anywhere;         /* break unbreakable strings if needed */
  margin-bottom: 0.25rem;
  transition: border-color 240ms ease, background 240ms ease;
}
@media (max-width: 480px) {
  .tag-bubble {
    font-size: 0.66rem;
    padding: 0.25rem 0.5rem;
    letter-spacing: 0.1em;
  }
}
.tag-bubble:hover { border-color: rgba(255,255,255,0.28); background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)); }

/* Status-dot — single rule, animated for every variant.
   Colour comes from --dot-rgb so each variant glows in its own hue.
   `translateY` corrects an ~1px optical lift (uppercase glyphs have no
   descenders, so the dot's geometric centre reads slightly above the
   text's visual centre). */
.tag-bubble::before {
  content: "";
  display: inline-block;            /* don't let flex stretch the box */
  align-self: center;               /* explicit, never inherits stretch */
  flex: 0 0 0.5rem;                 /* fixed basis; never grows or shrinks */
  width: 0.5rem;
  height: 0.5rem;
  aspect-ratio: 1 / 1;              /* belt-and-braces: width === height */
  border-radius: 50%;               /* exact circle, no over-rounding artifacts */
  background: rgb(var(--dot-rgb));
  animation: tag-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tag-bubble::before { animation: none; }
}

@keyframes tag-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(var(--dot-rgb), 0.7),
                          0 0 0 3px rgba(var(--dot-rgb), 0.12); }
  50%      { box-shadow: 0 0 18px rgba(var(--dot-rgb), 1),
                          0 0 0 6px rgba(var(--dot-rgb), 0.05); }
}

/* Light-section variant — keeps blue dot, swaps surface to white glass. */
.tag-bubble-light {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  border-color: rgba(10,10,46,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 6px rgba(10,10,46,0.06);
  color: rgba(10,10,46,0.82);
}

/* Hot variant — green dot. Surface gradient lives in lab.css. */
.tag-bubble-hot { --dot-rgb: 0, 240, 181; }

/* ===== Footer trust badges ===== */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid oklch(0.28 0.03 265);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color: rgba(255,255,255,0.9);
  transition: border-color 240ms ease, background 240ms ease, transform 320ms var(--ease-spring);
}
.trust-badge:hover {
  border-color: rgba(255,255,255,0.22);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  transform: translateY(-2px);
}
.trust-badge svg {
  color: #0E43F1;
  flex-shrink: 0;
}
.trust-badge-key {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: white;
  font-weight: 500;
  line-height: 1.1;
}
.trust-badge-sub {
  font-size: 0.7rem;
  color: oklch(0.55 0.015 265);
  line-height: 1.2;
  margin-top: 2px;
}

/* ===== Industry tile — brand-blue default, image reveal on hover ===== */
.ind-tile {
  position: relative;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(27, 6, 223, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(14, 67, 241, 0.08) 0%, transparent 55%),
    linear-gradient(155deg, #141948 0%, #0A0C2E 50%, #05061A 100%);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 180px;
  isolation: isolate;
  overflow: hidden;
  color: white;
}

/* Image reveal layer (uses --tile-img inline custom prop) */
.ind-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(14, 67, 241, 0.55) 0%, rgba(27, 6, 223, 0.85) 100%),
    var(--tile-img, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 520ms var(--ease-spring),
    transform 1100ms var(--ease-spring);
  z-index: -1;
}
.ind-tile:hover::before,
.ind-tile:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.ind-glyph {
  width: 1.35rem;
  height: 1.35rem;
  stroke-width: 1.5;
  color: rgba(255, 255, 255, 0.7);
  transition: color 260ms var(--ease-apple), transform 320ms var(--ease-spring);
}
.ind-tile:hover .ind-glyph,
.ind-tile:focus-visible .ind-glyph {
  color: white;
  transform: rotate(-4deg) scale(1.1);
}

.ind-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  transition: color 260ms var(--ease-apple);
  max-width: 26ch;
  margin: 0;
}
.ind-tile:hover .ind-desc,
.ind-tile:focus-visible .ind-desc { color: white; }

/* Ticker track in hero — using Tailwind's animation but with keyframe */
.animate-ticker-y {
  animation: ticker-y 12s linear infinite;
}
@keyframes ticker-y {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ===== Section aurora background texture (drop images into assets/bg/) ===== */
.section-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  contain: layout style; /* isolate from document flow; strict set per-element inline */
}
.section-bg--screen { mix-blend-mode: screen; }
.section-bg--overlay { mix-blend-mode: overlay; }
.section-bg--soft-mask {
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 85%);
}

/* Mega-menu decorative corner icon (minimal, tilted, blends into panel) */
.mega-menu-decor-icon {
  position: absolute;
  inset-block-end: -1.5rem;
  inset-inline-start: -1.5rem;
  width: 9rem;
  height: 9rem;
  color: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
}

/* ===== Hero glass card (21st.dev-inspired: whiter than bg for depth) =====
   Tilt follows the live cursor position via cardTilt3D() in app.js, which
   writes --tilt-x / --tilt-y / --tilt-lift on the element. CSS just consumes
   them — keeps the element compositor-friendly and SSR-safe.
   Direction is screen-relative, so the same handler works in LTR and RTL. */
.hero-glass-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 100%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 60px -20px rgba(0, 0, 0, 0.45);
  transform: perspective(1200px)
             rotateX(var(--tilt-x))
             rotateY(var(--tilt-y))
             translateY(var(--tilt-lift));
  transition: transform 220ms var(--ease-spring),
              border-color 320ms ease,
              box-shadow 320ms ease;
  will-change: transform;
}
.hero-glass-card:hover {
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 28px 80px -20px rgba(0, 0, 0, 0.55);
}
.hero-glass-card:hover .animate-ticker-y {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .hero-glass-card { transform: none; transition: none; }
}

/* ===== Hero headline: bottom-edge fade on the last word (21st.dev style) ===== */
#hero-headline .word:last-child > span {
  mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, 0.85) 92%, rgba(0, 0, 0, 0.6) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, 0.85) 92%, rgba(0, 0, 0, 0.6) 100%);
  padding-bottom: 0.12em;
}

/* ===== Bright glass ghost button (matches tag-bubble visibility on dark bg)
   Visibly subordinate to the primary white pill at rest (CTA hierarchy
   per Phase 4.3 + UX QA): label rendered at 78% opacity, full opacity
   on hover/focus. The chrome (background, border, shadow) stays so the
   button still reads as interactive. */
.btn-ghost-bright {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 6px rgba(0,0,0,0.20);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition:
    background 240ms ease,
    border-color 240ms ease,
    color 200ms ease,
    transform 280ms var(--ease-spring);
}
.btn-ghost-bright:hover,
.btn-ghost-bright:focus-visible {
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10));
  border-color: rgba(255,255,255,0.35);
  color: rgba(255, 255, 255, 1);
}

/* ===== Logo wall (trusted-by) — continuous marquee ===== */
.logo-wall-mask {
  overflow: hidden;
  padding-block: 22px; /* vertical room for scale(1.5) on 80px logo without clipping */
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.logo-wall-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: logo-wall-scroll 12s linear infinite;
}
.logo-wall-track:has(.logo-wall-item:hover) { animation-play-state: paused; }
.logo-wall-item {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 9999px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  background-clip: padding-box;
  filter: grayscale(100%);
  opacity: 0.55;
  transform: scale(1);
  transition:
    filter 360ms var(--ease-spring),
    opacity 360ms ease,
    transform 420ms var(--ease-spring);
  /* will-change applied dynamically by JS handler */
}
.logo-wall-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.5);
  will-change: transform;
}
/* Placeholder pill — when an editor adds a logo name without uploading the image,
   render the name in a circle styled to match the real logos so the marquee still
   reads as a row of partner marks (not a broken-image gap). */
.logo-wall-item--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.1;
  color: oklch(0.40 0.02 265);
  letter-spacing: 0;
  word-break: break-word;
}
@media (prefers-reduced-motion: reduce) {
  .logo-wall-item:hover { transform: none; }
}
@keyframes logo-wall-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
html[dir="rtl"] .logo-wall-track {
  animation-name: logo-wall-scroll-rtl;
}
@keyframes logo-wall-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-wall-track { animation: none; }
}

/* ===== ROI calculator ===== */
.roi-card {
  position: relative;
  border-radius: 1.5rem;
  background:
    radial-gradient(ellipse 60% 55% at 85% 0%, rgba(27, 6, 223, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 10% 100%, rgba(14, 67, 241, 0.18) 0%, transparent 55%),
    linear-gradient(155deg, #0A0A2E 0%, #08081F 55%, #050514 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  padding: 2rem;
  color: white;
}
@media (min-width: 768px) { .roi-card { padding: 3rem; } }
.roi-input {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  padding: 0.7rem 1rem;
  color: white !important;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  width: 100%;
  transition: border-color 200ms ease, background 200ms ease;
}
.roi-input:focus-visible { outline: none; border-color: rgba(14, 67, 241, 0.6); background: rgba(255, 255, 255, 0.08) !important; }
.roi-input[type="number"]::-webkit-inner-spin-button,
.roi-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.roi-input[type="number"] { -moz-appearance: textfield; }
.roi-input[type="range"] {
  padding: 0;
  background: transparent !important;
  border: 0;
  height: 6px;
  accent-color: #0E43F1;
}
.roi-label {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
  display: block;
}
.roi-output {
  background: rgba(14, 67, 241, 0.08);
  border: 1px solid rgba(14, 67, 241, 0.25);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}
.roi-output-value {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: white;
}

/* ===== Hero elegance layer — lower-intensity mega-panel aesthetic ===== */
.hero-elegance {
  background:
    radial-gradient(ellipse 55% 45% at 90% 0%, rgba(27, 6, 223, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 5% 100%, rgba(14, 67, 241, 0.10) 0%, transparent 55%);
  z-index: 0;
}
.hero-elegance::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.022) 1px, transparent 0);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 25%, transparent 75%);
  pointer-events: none;
}

/* ===== Mega-menu panel — elegant dark with subtle brand gradient ===== */
.mega-panel {
  background:
    radial-gradient(ellipse 60% 55% at 85% 0%, rgba(27, 6, 223, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 10% 100%, rgba(14, 67, 241, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(10, 10, 46, 0.5) 0%, transparent 70%),
    linear-gradient(155deg, #0A0A2E 0%, #08081F 55%, #050514 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
}
.mega-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.mega-panel > * { position: relative; z-index: 1; }

/* ===== Mega-menu motion — soft drawer drop with subtle bounce =====
   Panel uses ease-out-back (var(--ease-bounce)) for a hairline
   overshoot — feels alive without being cartoony. Children inherit the same
   curve, drop in from above with motion-blur fade for that "soft swell" feel. */
.mega-panel > div { transform-origin: top center; }
.mega-panel > div > * {
  animation: mega-fade 540ms var(--ease-bounce) both;
  animation-delay: 100ms;
}
.mega-panel > div > *:nth-child(2) { animation-delay: 150ms; }
.mega-panel > div > *:nth-child(3) { animation-delay: 200ms; }
.mega-panel > div > *:nth-child(4) { animation-delay: 250ms; }
.mega-panel > div > *:nth-child(5) { animation-delay: 300ms; }
.mega-panel > div > *:nth-child(6) { animation-delay: 350ms; }

.mega-panel > div > div > a,
.mega-panel > div > div > div.mega-item,
.mega-panel > div [class*="grid-cols"] > a,
.mega-panel > div [class*="grid-cols"] > div {
  animation: mega-fade 540ms var(--ease-bounce) both;
  animation-delay: 200ms;
}
.mega-panel > div [class*="grid-cols"] > a:nth-child(2),
.mega-panel > div [class*="grid-cols"] > div:nth-child(2) { animation-delay: 240ms; }
.mega-panel > div [class*="grid-cols"] > a:nth-child(3),
.mega-panel > div [class*="grid-cols"] > div:nth-child(3) { animation-delay: 280ms; }
.mega-panel > div [class*="grid-cols"] > a:nth-child(4),
.mega-panel > div [class*="grid-cols"] > div:nth-child(4) { animation-delay: 320ms; }
.mega-panel > div [class*="grid-cols"] > a:nth-child(n+5),
.mega-panel > div [class*="grid-cols"] > div:nth-child(n+5) { animation-delay: 360ms; }

@keyframes mega-fade {
  /* Drop from above (-10px) with motion blur. Top-down direction — children
     flow with the panel's downward drawer drop, not against it. */
  from {
    opacity: 0;
    transform: translateY(-10px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel > div > *,
  .mega-panel > div > div > a,
  .mega-panel > div > div > div.mega-item,
  .mega-panel > div [class*="grid-cols"] > a,
  .mega-panel > div [class*="grid-cols"] > div,
  .mobile-drawer > * {
    animation: none !important;
  }
}

/* ===== Mobile drawer — same Apple-standard cascade as the mega-panel ===== */
.mobile-drawer > * {
  animation: mega-fade 540ms var(--ease-bounce) both;
  animation-delay: 100ms;
}
.mobile-drawer > *:nth-child(2) { animation-delay: 140ms; }
.mobile-drawer > *:nth-child(3) { animation-delay: 180ms; }
.mobile-drawer > *:nth-child(4) { animation-delay: 220ms; }
.mobile-drawer > *:nth-child(5) { animation-delay: 260ms; }
.mobile-drawer > *:nth-child(6) { animation-delay: 300ms; }
.mobile-drawer > *:nth-child(7) { animation-delay: 340ms; }
.mobile-drawer > *:nth-child(n+8) { animation-delay: 380ms; }

/* ===== Mobile sub-menu (accordion) — height animates smoothly =====
   The grid-template-rows 0fr→1fr trick lets the parent drawer's height
   respond in real time as the sub-menu opens/closes. The whole drawer scales
   up/down naturally — no "puff" snap when closing. */
.mobile-submenu-grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms var(--ease-bounce);
}
.mobile-submenu-grid.is-open {
  grid-template-rows: 1fr;
}
.mobile-submenu-inner {
  overflow: hidden;
  min-height: 0;
}

/* Inner content fade + lift on open; reverse on close. Same curve as the
   drawer itself so the whole motion reads as one piece. */
.mobile-submenu {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(3px);
  transition:
    opacity 420ms var(--ease-bounce),
    transform 420ms var(--ease-bounce),
    filter 320ms ease;
}
.mobile-submenu.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Stagger child links — only fires while visible */
.mobile-submenu.is-visible > * {
  animation: mega-fade 540ms var(--ease-bounce) both;
  animation-delay: 80ms;
}
.mobile-submenu.is-visible > *:nth-child(2) { animation-delay: 120ms; }
.mobile-submenu.is-visible > *:nth-child(3) { animation-delay: 160ms; }
.mobile-submenu.is-visible > *:nth-child(4) { animation-delay: 200ms; }
.mobile-submenu.is-visible > *:nth-child(5) { animation-delay: 240ms; }
.mobile-submenu.is-visible > *:nth-child(6) { animation-delay: 280ms; }
.mobile-submenu.is-visible > *:nth-child(n+7) { animation-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .mobile-submenu-grid { transition: none !important; }
  .mobile-submenu { transition: none !important; }
  .mobile-submenu.is-visible > * { animation: none !important; }
}

/* ===== Mega-menu item (rich hover with icon tile + arrow) ===== */
.mega-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  transition:
    background 260ms var(--ease-apple),
    border-color 260ms var(--ease-apple),
    transform 320ms var(--ease-spring);
  overflow: hidden;
}
.mega-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(14, 67, 241, 0.16) 0%,
    rgba(27, 6, 223, 0.08) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
  z-index: -1;
}
.mega-item:hover,
.mega-item:focus-visible {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.10);
  transform: translateY(-1px);
}
.mega-item:hover::before,
.mega-item:focus-visible::before {
  opacity: 1;
}
.mega-item-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: oklch(0.76 0.01 265);
  transition:
    background 260ms ease,
    color 260ms ease,
    border-color 260ms ease,
    transform 320ms var(--ease-spring);
}
.mega-item:hover .mega-item-icon,
.mega-item:focus-visible .mega-item-icon {
  background: linear-gradient(135deg, rgba(14,67,241,0.5), rgba(27,6,223,0.25));
  border-color: rgba(14, 67, 241, 0.45);
  color: white;
  transform: rotate(-4deg) scale(1.05);
}
.mega-item-arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 260ms ease, transform 320ms var(--ease-spring), color 260ms ease;
  align-self: center;
}
.mega-item:hover .mega-item-arrow,
.mega-item:focus-visible .mega-item-arrow {
  opacity: 1;
  transform: translateX(0);
  color: #0E43F1;
}
html[dir="rtl"] .mega-item-arrow {
  transform: translateX(-6px);
}
html[dir="rtl"] .mega-item:hover .mega-item-arrow,
html[dir="rtl"] .mega-item:focus-visible .mega-item-arrow {
  transform: translateX(0);
}

/* ===== LIVENESS PATCHES ===== */

/* Patch 2: stats shimmer — single pass on count-up complete */
@keyframes stat-shimmer {
  0%   { color: inherit; text-shadow: none; }
  40%  { color: white; text-shadow: 0 0 28px rgba(255,255,255,0.22); }
  100% { color: inherit; text-shadow: none; }
}
.stat-shimmer { animation: stat-shimmer 900ms var(--ease-spring) both; }

/* Patch 3: product-card gradient sheen on hover */
.pc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg,
    transparent 35%,
    rgba(255, 255, 255, 0.055) 50%,
    transparent 65%);
  background-size: 250% 250%;
  background-position: 200% 200%;
  pointer-events: none;
  z-index: 0;
  transition: background-position 560ms var(--ease-spring), opacity 200ms ease;
  opacity: 0;
}
.pc:hover::after, .pc:focus-within::after {
  background-position: -20% -20%;
  opacity: 1;
}
html[dir="rtl"] .pc::after {
  background: linear-gradient(-125deg,
    transparent 35%,
    rgba(255, 255, 255, 0.055) 50%,
    transparent 65%);
  background-size: 250% 250%;
  background-position: -200% 200%;
}
html[dir="rtl"] .pc:hover::after, html[dir="rtl"] .pc:focus-within::after {
  background-position: 120% -20%;
}
.pc > * { position: relative; z-index: 1; }

/* Patch 1: hero cursor-follow orb — left/top are layout props; will-change can't accelerate them.
   The rAF lerp in app.js already keeps this smooth. Promote only opacity for the fade. */
.hero-cursor-orb { will-change: opacity; }

/* Patch 4: bento cursor spotlight */
.industries-bento-grid { position: relative; }
.ind-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    320px circle at
      calc(var(--spot-x, -9999px) - var(--tile-x, 0px))
      calc(var(--spot-y, -9999px) - var(--tile-y, 0px)),
    rgba(14, 67, 241, 0.12),
    transparent 65%);
  opacity: var(--spot-opacity, 0);
  pointer-events: none;
  z-index: 1;
  transition: opacity 320ms ease;
}
.ind-tile > * { position: relative; z-index: 2; }

/* ===== Nav pill active underline indicator ===== */
nav ul li > button[aria-expanded="true"],
nav ul li > a[aria-current="page"] {
  color: white;
}
nav ul li > button[aria-expanded="true"]::after,
nav ul li > a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  animation: nav-underline-in 220ms var(--ease-spring) both;
}
@keyframes nav-underline-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Footer nav: suppress the underline indicator on aria-current links inside footer columns */
.footer-col ul li > a[aria-current="page"]::after,
.footer-legal-links a[aria-current="page"]::after {
  display: none;
}
/* Keep current-page visual affordance via color instead */
.footer-col ul li > a[aria-current="page"],
.footer-legal-links a[aria-current="page"] {
  color: #0E43F1;
  font-weight: 600;
}

/* ===== CTA button press micro-interaction ===== */
.btn-press {
  transition:
    transform 120ms var(--ease-spring),
    box-shadow 120ms var(--ease-spring),
    background-color 200ms ease,
    color 200ms ease;
}
.btn-press:active {
  transform: scale(0.97);
  box-shadow: none;
}

/* ===== Aurora parallax backgrounds ===== */
[data-parallax] {
  /* will-change applied dynamically by JS handler */
}

/* ===== Trust cert cards: staggered reveal =====
   opacity:0 initial state only fires when JS has loaded (js-loaded on <html>).
   Without JS, cards render at full opacity — no blank trust section. */
.js-loaded .cert-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms var(--ease-apple),
    transform 800ms var(--ease-apple);
  transition-delay: calc(var(--cert-i, 0) * 100ms);
  will-change: opacity, transform;
}
.cert-card.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Platform capabilities list: staggered reveal =====
   opacity:0 initial state only fires when JS has loaded (js-loaded on <html>).
   Without JS, rows render at full opacity — no blank platform section. */
.js-loaded .cap-row {
  opacity: 0;
  transform: translateX(var(--cap-tx, 16px));
  transition:
    opacity 800ms var(--ease-apple),
    transform 800ms var(--ease-apple);
  transition-delay: calc(var(--cap-i, 0) * 100ms);
  will-change: opacity, transform;
}
html[dir="rtl"] .cap-row { --cap-tx: 16px; }
.cap-row.is-in {
  opacity: 1;
  transform: translateX(0);
}

/* ===== Section heading intro: fade + subtle rise ===== */
[data-reveal-heading] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 900ms var(--ease-apple),
    transform 900ms var(--ease-apple);
  transition-delay: calc(var(--d, 0) * 100ms);
  will-change: opacity, transform;
}
[data-reveal-heading].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Stats section: count wrapper fade ===== */
.stat-item {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 800ms var(--ease-apple),
    transform 800ms var(--ease-apple);
  transition-delay: calc(var(--stat-i, 0) * 100ms);
  will-change: opacity, transform;
}
.stat-item.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stat-shimmer,
  .pc::after,
  .ind-tile::after,
  .hero-cursor-orb { animation: none !important; transition: none !important; opacity: 0 !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #hero-headline .word > span { transform: none; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  [data-reveal-heading] { opacity: 1; transform: none; }
  .cert-card { opacity: 1; transform: none; }
  .cap-row { opacity: 1; transform: none; }
  .stat-item { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; will-change: auto; }
}