/*
 * VERTEX — fixes.css  v6 (final)
 * Loaded AFTER style.css — all rules have !important priority
 * =============================================================
 * 1. Floating WhatsApp only (call button hidden)
 * 2. Stats section — redesigned with big gradient numbers
 * 3. Partners — true infinite marquee
 * 4. Mobile responsiveness — comprehensive (all sections)
 * 5. DNA section — full text visible (no ellipsis)
 * 6. Form submit button styling
 * =============================================================
 */

/* =============================================================
   SECTION 1 — FLOATING BUTTONS
   ============================================================= */
.quantum-call-wrap { display: none !important; }

.whatsapp-btn {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  left: auto !important;
  z-index: 9900 !important;
  width: 64px !important;
  height: 64px !important;
}
html[lang="ar"] .whatsapp-btn {
  right: auto !important;
  left: 28px !important;
}

/* =============================================================
   SECTION 2 — STATS
   ============================================================= */
.section-stats {
  padding: 96px 0 !important;
  background: var(--bg-void) !important;
  position: relative;
  overflow: hidden;
}
.section-stats::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(124,58,237,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  border: 1px solid rgba(124,58,237,0.15) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: rgba(5,0,25,0.5) !important;
  backdrop-filter: blur(16px) !important;
}
.stat-card {
  padding: 56px 28px 44px !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(124,58,237,0.1) !important;
  border-radius: 0 !important;
  text-align: center !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background 0.35s ease !important;
}
.stat-card:last-child { border-right: none !important; }
.stat-card::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #00fff5, #7c3aed, #d946ef);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.stat-card:hover { background: rgba(15,0,55,0.55) !important; }
.stat-card:hover::before { transform: scaleX(1); }
.stat-number {
  font-size: clamp(52px, 6.5vw, 88px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #00fff5 0%, #7c3aed 50%, #d946ef 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 200% !important;
  animation: grad-shift 3s linear infinite !important;
  display: block !important;
}
.stat-label-en {
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(136,146,176,0.75) !important;
  display: block !important;
  margin-top: 6px !important;
  line-height: 1.3 !important;
}
.stat-label-ar {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(200,210,240,0.8) !important;
  display: block !important;
  line-height: 1.5 !important;
}
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; border-radius: 20px !important; }
  .stat-card:nth-child(2) { border-right: none !important; }
  .stat-card:nth-child(1), .stat-card:nth-child(2) { border-bottom: 1px solid rgba(124,58,237,0.1) !important; }
  .stat-number { font-size: clamp(44px, 10vw, 70px) !important; }
  .stat-card { padding: 44px 20px 36px !important; }
}
@media (max-width: 540px) {
  .stats-grid { border-radius: 16px !important; }
  .stat-card { padding: 36px 14px 28px !important; }
  .stat-number { font-size: clamp(36px, 12vw, 56px) !important; }
  .stat-label-en { font-size: 9px !important; }
  .stat-label-ar { font-size: 12px !important; }
}

/* =============================================================
   SECTION 3 — PARTNERS MARQUEE
   ============================================================= */
.section-partners {
  padding: 72px 0 !important;
  background: var(--bg-deep, #03001a) !important;
  border-top: 1px solid rgba(124,58,237,0.1) !important;
  border-bottom: 1px solid rgba(124,58,237,0.1) !important;
  overflow: hidden !important;
}
.partners-header { text-align: center !important; margin-bottom: 44px !important; }
.partners-ticker-wrap {
  position: relative !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%) !important;
}
.partners-ticker-wrap::before, .partners-ticker-wrap::after { display: none !important; }
.partners-ticker {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: partners-ltr 32s linear infinite !important;
  will-change: transform !important;
}
html[lang="ar"] .partners-ticker { animation-name: partners-rtl !important; }
.partners-ticker:hover { animation-play-state: paused !important; }
@keyframes partners-ltr { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes partners-rtl { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }
.ticker-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 7px !important;
  flex-shrink: 0 !important;
}
.partner-logo-card {
  flex-shrink: 0 !important;
  width: 200px !important;
  height: 96px !important;
  background: rgba(8,0,32,0.72) !important;
  border: 1px solid rgba(124,58,237,0.18) !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 18px !important;
  backdrop-filter: blur(10px) !important;
  transition: border-color 0.3s, transform 0.35s, box-shadow 0.3s !important;
}
.partner-logo-card:hover {
  border-color: rgba(0,255,245,0.45) !important;
  transform: translateY(-6px) scale(1.04) !important;
  box-shadow: 0 8px 32px rgba(0,255,245,0.1) !important;
}
.partner-logo-card svg { width: 100% !important; height: 100% !important; overflow: visible !important; }
@media (max-width: 768px) {
  .partners-ticker { animation-duration: 24s !important; }
  .partner-logo-card { width: 162px !important; height: 80px !important; border-radius: 14px !important; padding: 12px !important; }
}
@media (max-width: 479px) {
  .partners-ticker { animation-duration: 18s !important; }
  .partner-logo-card { width: 135px !important; height: 66px !important; border-radius: 12px !important; padding: 10px !important; }
}

/* =============================================================
   SECTION 4 — MOBILE RESPONSIVENESS
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
.ar-version, .en-version { overflow-wrap: break-word; word-break: break-word; }

@media (max-width: 640px) {

  /* ── NAV ── */
  .nav-logo { font-size: 18px !important; }
  .nav-cta { padding: 8px 14px !important; font-size: 10px !important; letter-spacing: 0.1em !important; }
  #lang-label { display: none !important; }
  #lang-toggle { padding: 7px 11px !important; }
  #theme-toggle { width: 34px !important; height: 34px !important; }

  /* ── HERO ── */
  .section-hero { min-height: 100svh !important; }
  .hero-content { padding: 0 clamp(20px,5vw,32px) !important; max-width: 100% !important; }
  .hero-eyebrow {
    font-size: 10px !important;
    padding: 6px 16px !important;
    max-width: 90vw !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .hero-title {
    font-size: clamp(38px, 11vw, 68px) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.02 !important;
    margin-bottom: 16px !important;
    white-space: normal !important;
  }
  html[lang="ar"] .hero-title {
    font-size: clamp(36px, 10.5vw, 64px) !important;
    line-height: 1.1 !important;
  }
  .hero-sub {
    font-size: 14.5px !important;
    line-height: 1.72 !important;
    margin-bottom: 32px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  html[lang="ar"] .hero-sub { font-size: 15px !important; }
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .btn-primary, .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 20px !important;
    font-size: 11px !important;
  }
  .hero-scroll { display: none !important; }

  /* ── SECTION TITLES ── */
  .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 10px !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .section-title {
    font-size: clamp(24px, 7.5vw, 44px) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 36px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }
  html[lang="ar"] .section-title {
    font-size: clamp(22px, 7vw, 40px) !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
  }

  /* ── DNA / PHILOSOPHY — FIX: show full text ── */
  .section-dna { padding: 80px 0 !important; }
  .dna-headline {
    font-size: clamp(28px, 8.5vw, 52px) !important;
    line-height: 1.1 !important;
    margin-bottom: 48px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  html[lang="ar"] .dna-headline { font-size: clamp(26px, 8vw, 48px) !important; }
  .dna-list { overflow: visible !important; }
  .dna-row {
    padding: 22px 0 !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: visible !important;
  }
  .dna-num {
    font-size: 10px !important;
    min-width: 24px !important;
    flex-shrink: 0 !important;
  }
  .dna-word {
    font-size: clamp(22px, 7vw, 42px) !important;
    letter-spacing: -0.02em !important;
    flex: 1 !important;
    /* CRITICAL: show all text, no cutting */
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    min-width: 0 !important;
  }
  .dna-tag { display: none !important; }

  /* ── SERVICES ── */
  .section-services { padding: 72px 0 !important; }
  .services-list { overflow: visible !important; }
  .svc-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 24px 0 !important;
    overflow: visible !important;
  }
  .svc-num { display: none !important; }
  .svc-name {
    font-size: clamp(18px, 5.5vw, 30px) !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  html[lang="ar"] .svc-name { font-size: clamp(17px, 5vw, 28px) !important; }
  .svc-desc { font-size: 13.5px !important; line-height: 1.65 !important; white-space: normal !important; }
  .svc-tags { flex-wrap: wrap !important; gap: 6px !important; }
  .svc-tag { font-size: 9px !important; padding: 3px 10px !important; }

  /* ── PIPELINE ── */
  .section-experience { padding: 72px 0 !important; }
  .exp-sub { font-size: 14px !important; white-space: normal !important; max-width: 100% !important; }
  .pipeline-svg { display: none !important; }
  .pl-nodes {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 18px 12px !important;
    margin-top: 0 !important;
    justify-content: center !important;
  }
  .pl-node {
    flex-direction: column !important;
    align-items: center !important;
    width: calc(33.33% - 10px) !important;
    gap: 8px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .pl-label {
    font-size: 9px !important;
    text-align: center !important;
    letter-spacing: 0.06em !important;
    white-space: normal !important;
  }
  .pl-dot { width: 11px !important; height: 11px !important; }

  /* ── WORK GALLERY ── */
  .section-work { padding: 72px 0 56px !important; }
  .work-gallery { padding: 0 clamp(16px,4vw,28px) !important; gap: 12px !important; }
  .work-card { flex: 0 0 clamp(256px,80vw,340px) !important; height: 380px !important; }
  .work-name { font-size: 20px !important; white-space: normal !important; }
  .work-desc { font-size: 13px !important; line-height: 1.6 !important; }

  /* ── WHY VERTEX ── */
  .section-why { padding: 72px 0 !important; }
  .why-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .why-card { padding: 32px 22px !important; }
  .why-icon { width: 44px !important; height: 44px !important; font-size: 20px !important; margin-bottom: 14px !important; }
  .why-name {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  html[lang="ar"] .why-name { font-size: clamp(15px, 4.5vw, 21px) !important; }
  .why-desc { font-size: 13.5px !important; line-height: 1.65 !important; white-space: normal !important; }

  /* ── TECHNOLOGY ── */
  .section-technology { padding: 72px 0 !important; }
  .tech-headline {
    font-size: clamp(26px, 8vw, 48px) !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  html[lang="ar"] .tech-headline { font-size: clamp(24px, 7.5vw, 44px) !important; }
  .tech-sub { font-size: 14px !important; margin-bottom: 40px !important; white-space: normal !important; }
  .tech-word { padding: 10px 16px !important; font-size: 11px !important; }

  /* ── TESTIMONIALS ── */
  .section-testimonials { padding: 72px 0 56px !important; }
  .testi-card { flex: 0 0 clamp(272px,84vw,360px) !important; padding: 28px 20px !important; }
  .testi-text { font-size: 14px !important; line-height: 1.75 !important; white-space: normal !important; }
  html[lang="ar"] .testi-text { font-size: 14.5px !important; }
  .testi-name { font-size: 14px !important; }
  .testi-role { font-size: 9.5px !important; }
  .testi-avatar { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  .testi-arrow { width: 44px !important; height: 44px !important; }

  /* ── CTA / FORM ── */
  .section-cta { padding: 80px 0 !important; }
  .cta-headline {
    font-size: clamp(28px, 9vw, 52px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }
  html[lang="ar"] .cta-headline { font-size: clamp(26px, 8.5vw, 48px) !important; }
  .cta-ar { font-size: 14px !important; margin-bottom: 32px !important; white-space: normal !important; }
  .cta-form { gap: 14px !important; }
  .cta-form-row { grid-template-columns: 1fr !important; gap: 14px !important; }
  .cta-input { padding: 14px 15px !important; font-size: 14px !important; border-radius: 10px !important; }
  .cta-label { font-size: 9.5px !important; }
  .btn-cta {
    width: 100% !important;
    justify-content: center !important;
    padding: 18px 22px !important;
    font-size: 13px !important;
    gap: 10px !important;
  }
  .cta-contacts { flex-direction: column !important; gap: 10px !important; align-items: center !important; }
  .cta-sep { display: none !important; }
  .cta-link { font-size: 13px !important; }

  /* ── FOOTER ── */
  .footer-top { grid-template-columns: 1fr !important; gap: 36px !important; padding: 52px 20px 40px !important; }
  .footer-cols { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-logo { font-size: 24px !important; }
  .footer-tagline { font-size: 13px !important; white-space: normal !important; }
  .footer-col-links a { font-size: 13px !important; }
  .footer-bottom-inner { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 14px !important; }
  .footer-copy { font-size: 10px !important; }
  .footer-badges { flex-wrap: wrap !important; justify-content: center !important; }
}

@media (max-width: 400px) {
  .footer-cols { grid-template-columns: 1fr !important; }
  .pl-node { width: calc(50% - 8px) !important; }
  .stats-grid { border-radius: 12px !important; }
  .stat-number { font-size: clamp(30px, 13vw, 46px) !important; }
  .stat-card { padding: 28px 10px 22px !important; }
}

/* ── LANDSCAPE PHONES ── */
@media (max-height: 500px) and (orientation: landscape) {
  .section-hero { min-height: 100svh !important; }
  .hero-title { font-size: clamp(24px, 6vh, 52px) !important; }
  .hero-sub { font-size: 13px !important; margin-bottom: 18px !important; }
  .hero-ctas { flex-direction: row !important; }
  .hero-scroll, .hero-orbit { display: none !important; }
}

/* ── TOUCH DEVICES ── */
@media (hover: none) and (pointer: coarse) {
  .whatsapp-btn, .btn-primary, .btn-ghost, .btn-cta, .nav-cta,
  .testi-arrow, .social-link, .testi-dot,
  #lang-toggle, #theme-toggle, .nav-menu-btn { cursor: pointer !important; }
  .whatsapp-btn { min-width: 44px !important; min-height: 44px !important; }
  .testi-arrow { min-width: 44px !important; min-height: 44px !important; }
  .work-card:hover,
  .why-card:hover,
  .tech-word:hover,
  .testi-card:hover,
  .partner-logo-card:hover { transform: none !important; box-shadow: none !important; }
}

/* =============================================================
   SECTION 5 — FORM SUBMIT BUTTON POLISH
   ============================================================= */
button.btn-cta {
  cursor: pointer !important;
  border: none !important;
  width: 100% !important;
}
button.btn-cta:disabled {
  opacity: 0.65 !important;
  pointer-events: none !important;
}

/* =============================================================
   SECTION 6 — GLOBAL TEXT OVERFLOW FIXES
   ============================================================= */
/* Remove any text clipping from previous CSS blocks */
.dna-word, .svc-name, .why-name, .tech-headline,
.hero-title, .cta-headline, .section-title, .work-name {
  text-overflow: unset !important;
  overflow: visible !important;
  white-space: normal !important;
}