/* ═══════════════════════════════════════════════════════════════
   SOLVAGENCE AGENCY — MOTION + RESPONSIVE v3
   ═══════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ───────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ── REVEAL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-xl) var(--ease-out),
              transform var(--dur-xl) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 80ms;  }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 260ms; }
.reveal-d4 { transition-delay: 380ms; }
.reveal-d5 { transition-delay: 520ms; }

/* ── GRADIENT TEXT ANIMATION ─────────────────────── */
.g-text-anim {
  background: var(--g-brand-text);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShift 5s ease infinite;
}

/* ── ANIMATED UNDERLINE ──────────────────────────── */
.a-underline { position: relative; display: inline-block; }
.a-underline::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--g-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-sm) var(--ease-out);
}
.a-underline:hover::after { transform: scaleX(1); }

/* ─────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-First Overrides
   Breakpoints: 1280 · 1024 · 768 · 480 · 380
   Covers: Android Chrome/Firefox, iOS Safari, Tablet Landscape/Portrait
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global base fixes (all screens) ────────────── */
html {
  -webkit-text-size-adjust: 100%;   /* Prevent iOS font-size inflation */
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;               /* Prevent horizontal scroll on Android */
  overscroll-behavior-y: none;      /* Prevent pull-to-refresh interfering */
}

/* iOS safe-area support (notch + home bar) */
.site-nav    { padding-left:  env(safe-area-inset-left);  padding-right: env(safe-area-inset-right); }
.container,
.container-md { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
#hero         { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.site-footer  { padding-bottom: env(safe-area-inset-bottom); }

/* svh fallback for hero — svh not supported on Android Chrome <108, iOS Safari <15.4 */
#hero { min-height: 100vh; }
@supports (min-height: 100svh) { #hero { min-height: 100svh; } }

/* Minimum touch target (WCAG 2.5.5) */
.btn, .nav-link, .drawer-link, .lang-btn, .nav-burger,
.acc-trigger, .method-step-btn, .footer-social { min-height: 44px; }
.lang-btn { min-width: 36px; }

/* Gradient text fallback for very old Android WebView */
@supports not (-webkit-background-clip: text) {
  .g-text, .g-text-anim,
  .hero-stat-val, .ai-metric-val { background: none; -webkit-text-fill-color: initial; color: var(--sv-teal-500); }
}

/* ── 1280px — Large tablet landscape / small laptop ── */
@media (max-width: 1280px) {
  .container, .container-md { padding: 0 40px; }
  .footer-cols  { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .cases-grid   { grid-template-columns: repeat(3, 1fr); }
  .tech-grid    { grid-template-columns: repeat(4, 1fr); }
  .ind-grid     { grid-template-columns: repeat(3, 1fr); }
  .assess-grid  { grid-template-columns: repeat(2, 1fr); }
  .ai-frame     { padding: 60px; }
  .footer-main  { grid-template-columns: 260px 1fr; gap: 60px; }
}

/* ── 1024px — Tablet landscape (iPad Pro, Android 10") ─ */
@media (max-width: 1024px) {
  .container, .container-md { padding: 0 32px; }
  .sec    { padding: 96px 0; }
  .sec-sm { padding: 64px 0; }

  /* Nav: hide links to avoid overflow */
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-actions .btn:not(.lang-toggle *) { display: none; }

  /* Splits → single column */
  .split-50, .split-40, .split-col { grid-template-columns: 1fr; gap: 48px; }
  .ai-frame { padding: 48px; }
  .ai-frame .split-50 { grid-template-columns: 1fr; gap: 40px; }

  /* Hero stats → 2 columns */
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat:nth-child(2) { border-right: none; }
  .hero-stat:nth-child(n+3) { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bd-subtle); }

  /* About visual */
  .about-visual-inner { padding: 32px; }

  /* Services */
  .svc-grid  { grid-template-columns: 1fr 1fr; }

  /* Cases → 2 columns at tablet */
  .cases-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Industries → 2 columns */
  .ind-grid { grid-template-columns: repeat(2, 1fr); }

  /* Assessments → 2 columns */
  .assess-grid { grid-template-columns: repeat(2, 1fr); }

  /* Method */
  .method-panel { padding: 32px; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* ── 768px — Tablet portrait / large phone (iPad mini, Pixel, Galaxy Tab) */
@media (max-width: 768px) {
  :root {
    --nav-h:      60px;
    --announce-h: 30px;
  }

  .container, .container-md { padding: 0 20px; }
  .sec    { padding: 72px 0; }
  .sec-sm { padding: 52px 0; }
  .sec-lg { padding: 90px 0; }
  .sec-xl { padding: 110px 0; }

  /* ── Nav ────────────────────────────────────────── */
  .nav-links { display: none; }
  .nav-actions .btn:not(.lang-toggle *) { display: none; }  /* hide Engage Us */
  .nav-burger { display: flex; }
  .nav-inner  { gap: 10px; padding: 0 16px; }
  .nav-brand-name { font-size: .8rem; letter-spacing: .14em; }
  .nav-brand-sub  { letter-spacing: .2em; }
  .nav-logo-img-wrap { width: 44px; height: 44px; }
  .nav-logo-img      { width: 36px; height: 36px; }
  .nav-logo          { gap: 10px; }

  /* ── Hero ───────────────────────────────────────── */
  .hero-h1    { font-size: clamp(2.8rem, 9vw, 5rem); letter-spacing: -.02em; }
  .hero-desc  { font-size: .9rem; max-width: 100%; }
  .hero-sub-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-actions { flex-wrap: wrap; gap: 10px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: 40px; padding-top: 32px; }
  .hero-stat  { padding: 0 20px; }
  .hero-stat:first-child { padding-left: 0; }
  .hero-stat-val  { font-size: 2.1rem; }
  .hero-eyebrow-row { gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
  .hero-divider-v   { display: none; }
  .hero-typewriter  { font-size: .72rem; }
  #hero { padding-bottom: 60px; }

  /* ── About ──────────────────────────────────────── */
  .about-visual-inner { padding: 24px; }
  .about-pillars      { grid-template-columns: 1fr; }

  /* ── Services ───────────────────────────────────── */
  .svc-grid   { grid-template-columns: 1fr; }
  .acc-trigger { padding: 18px 16px; }
  .acc-name   { font-size: .68rem; }
  .acc-icon   { width: 36px; height: 36px; font-size: .95rem; }

  /* ── AI spotlight ───────────────────────────────── */
  .ai-frame   { padding: 28px 20px; }
  .ai-frame-wm { display: none; }
  .ai-metrics { grid-template-columns: 1fr 1fr; gap: 1px; }
  .ai-metric  { padding: 24px 16px; }
  .ai-metric-val { font-size: 2.2rem; }

  /* ── Cases / Work ───────────────────────────────── */
  .cases-grid { grid-template-columns: 1fr !important; }
  .case-card  { min-height: auto; }

  /* ── Tech ───────────────────────────────────────── */
  .tech-grid  { grid-template-columns: repeat(3, 1fr); }
  .tech-logo  { padding: 16px 12px; font-size: .7rem; }

  /* ── Assessments ────────────────────────────────── */
  .assess-grid { grid-template-columns: 1fr; }
  .assess-card { padding: 24px 20px; }

  /* ── Methodology ────────────────────────────────── */
  .method-panel { padding: 24px 16px; }
  .method-panel-text { font-size: .85rem; }
  .method-dl   { flex-direction: column; gap: 8px; }

  /* ── Industries ─────────────────────────────────── */
  .ind-grid   { grid-template-columns: 1fr 1fr; }
  .ind-card   { padding: 22px 18px; }

  /* ── Compliance ─────────────────────────────────── */
  .comp-grid  { grid-template-columns: 1fr 1fr; }
  .comp-badge { padding: 14px 12px; }

  /* ── Why ────────────────────────────────────────── */
  .diff-item  { padding: 20px 16px; }
  .diff-item:hover { transform: none; }
  .engage-box { padding: 24px 20px; }

  /* ── CTA ────────────────────────────────────────── */
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { justify-content: center; }
  .cta-meta    { flex-direction: column; gap: 12px; margin-top: 28px; }
  .cta-h2      { font-size: clamp(2.2rem, 8vw, 3.5rem); }

  /* ── Contact ────────────────────────────────────── */
  .form-row    { grid-template-columns: 1fr; }
  .ci-grid     { grid-template-columns: 1fr; gap: 16px; }

  /* ── Footer ─────────────────────────────────────── */
  .footer-main { grid-template-columns: 1fr; gap: 36px; padding: 52px 0 40px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
  .footer-reg    { text-align: center; }
  .footer-brand-desc { font-size: .8rem; }

  /* ── Lang toggle ────────────────────────────────── */
  .lang-toggle { flex-shrink: 0; }
  .lang-btn    { padding: 6px 10px; font-size: .58rem; min-height: 36px; }
}

/* ── 480px — Small phone (iPhone SE, Galaxy A series) ── */
@media (max-width: 480px) {
  .container, .container-md { padding: 0 16px; }
  .sec    { padding: 60px 0; }
  .sec-sm { padding: 44px 0; }

  /* Hero */
  .hero-h1    { font-size: clamp(2.4rem, 10vw, 3.6rem); }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat  { border-right: none !important; border-top: 1px solid var(--bd-subtle); padding: 14px 0; }
  .hero-stat:first-child { border-top: none; }
  .hero-stat-val { font-size: 2rem; }

  /* About */
  .about-visual-inner { padding: 18px; }
  .about-badge-row    { gap: 6px; }
  .chip               { font-size: .58rem; padding: 4px 10px; }

  /* AI */
  .ai-metrics { grid-template-columns: 1fr; }
  .ai-metric  { padding: 20px 16px; }

  /* Industries */
  .ind-grid   { grid-template-columns: 1fr; }

  /* Tech */
  .tech-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Compliance */
  .comp-grid  { grid-template-columns: 1fr; }
  .comp-badge-icon { font-size: 1.3rem; }

  /* Footer */
  .footer-cols { grid-template-columns: 1fr; }
  .footer-socials { gap: 8px; }
  .footer-social  { width: 36px; height: 36px; }

  /* CTA */
  .cta-h2     { font-size: clamp(2rem, 9vw, 2.8rem); }
  .cta-meta   { align-items: flex-start; }

  /* Buttons full width on very small screens */
  .cta-actions .btn { padding: 14px 20px; font-size: .68rem; }
}

/* ── 380px — Very small phones (iPhone SE 1st gen, Galaxy A03, Moto E) ── */
@media (max-width: 380px) {
  :root {
    --nav-h:      56px;
    --announce-h: 28px;
  }
  .container, .container-md { padding: 0 14px; }
  .sec    { padding: 52px 0; }

  /* Nav — prevent any overflow */
  .nav-inner       { padding: 0 12px; gap: 8px; }
  .nav-logo-img-wrap { width: 38px; height: 38px; }
  .nav-logo-img      { width: 30px; height: 30px; }
  .nav-brand-name  { font-size: .72rem; letter-spacing: .1em; }
  .nav-brand-sub   { display: none; }  /* hide sub on tiny screens */
  .nav-logo        { gap: 8px; }
  .lang-btn        { padding: 5px 8px; font-size: .52rem; }

  /* Hero */
  .hero-h1         { font-size: clamp(2.1rem, 11vw, 3rem); }
  .hero-desc       { font-size: .85rem; }
  .hero-actions    { gap: 8px; }
  .hero-eyebrow-row { margin-bottom: 18px; }

  /* Section headings */
  .section-h2 { font-size: clamp(2rem, 9vw, 2.8rem); }

  /* Services accordion */
  .acc-trigger { padding: 16px 12px; }
  .acc-name    { font-size: .62rem; }

  /* CTA */
  .cta-h2 { font-size: clamp(1.8rem, 10vw, 2.4rem); }
}

/* ── Tablet portrait narrow (768–900px) ── */
@media (min-width: 481px) and (max-width: 900px) {
  .cases-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .svc-grid   { grid-template-columns: repeat(2, 1fr); }
  .assess-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet landscape (768–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .cases-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ind-grid   { grid-template-columns: repeat(3, 1fr); }
  .assess-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid  { grid-template-columns: repeat(4, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ── iOS-specific fixes ─────────────────────────── */
/* Fix for iOS Safari momentum scroll in drawers */
.nav-drawer { -webkit-overflow-scrolling: touch; }

/* Fix tap highlight on iOS */
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Fix for iOS input zoom (must be ≥16px font-size) */
.form-input, .form-select, .form-textarea {
  font-size: 16px !important;   /* prevents iOS auto-zoom on focus */
  border-radius: 0;              /* removes iOS default input rounding */
  -webkit-appearance: none;
  appearance: none;
}
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5468' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ── Android-specific fixes ──────────────────────── */
/* Fix for Android Chrome backdrop-filter fallback */
@supports not (backdrop-filter: blur(1px)) {
  .site-nav.is-scrolled { background: rgba(3,8,18,.97); }
  .nav-drawer           { background: rgba(3,8,18,.99); }
}

/* ── Print ──────────────────────────────────────── */
@media print {
  #page-loader, #cursor, #cursor-ring, #sv-canvas,
  .site-nav, .announce-bar, .nav-drawer,
  .hero-scroll, .marquee-shell, #cta { display: none; }
  body { background: #fff; color: #000; }
  section { padding: 40px 0; }
  .container, .container-md { padding: 0 40px; }
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track  { animation: none; }
  .hero-h1-word   { animation: none; opacity: 1; transform: none; }
  .scroll-line    { animation: none; }
  .reveal         { opacity: 1; transform: none; }
  .announce-track { animation: none; }
}

/* ── High contrast (Windows forced colors) ────── */
@media (forced-colors: active) {
  .btn-blue, .btn-teal  { background: ButtonFace; border: 1px solid ButtonText; }
  .g-text, .g-text-anim { -webkit-text-fill-color: initial; background: none; color: CanvasText; }
  .nav-logo-img-wrap     { border-color: ButtonText; }
}

/* ═══════════════════════════════════════════════════
   RTL (Arabic) — direction overrides
   ═══════════════════════════════════════════════════ */
[dir="rtl"] body { font-family: 'DM Sans', 'Segoe UI', Tahoma, Arial, sans-serif; }
[dir="rtl"] .section-eyebrow {
  border-left: none;
  border-right: 2px solid var(--sv-teal-500);
  flex-direction: row-reverse;
}
[dir="rtl"] .section-eyebrow-dot { order: 1; }
[dir="rtl"] .divider-line { margin-right: 0; margin-left: auto; }
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .nav-inner { flex-direction: row-reverse; }
[dir="rtl"] .nav-brand { text-align: right; }
[dir="rtl"] .nav-brand-name { letter-spacing: .05em; }
[dir="rtl"] .nav-actions { flex-direction: row-reverse; }
[dir="rtl"] .hero-eyebrow-row { flex-direction: row-reverse; }
[dir="rtl"] .hero-sub-row { flex-direction: row-reverse; }
[dir="rtl"] .hero-actions { flex-direction: row-reverse; }
[dir="rtl"] .hero-stat { padding-right: 36px; padding-left: 0; border-right: 1px solid var(--bd-subtle); border-left: none; }
[dir="rtl"] .hero-stat:first-child { padding-right: 0; border-right: none; }
[dir="rtl"] .hero-stat:last-child { border-right: 1px solid var(--bd-subtle); }
[dir="rtl"] .split-50, [dir="rtl"] .split-40, [dir="rtl"] .split-col { direction: rtl; }
[dir="rtl"] .about-badge-row { flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end; }
[dir="rtl"] .reg-block { flex-direction: row-reverse; }
[dir="rtl"] .pillar-name, [dir="rtl"] .pillar-text { text-align: right; }
[dir="rtl"] .acc-trigger { flex-direction: row-reverse; }
[dir="rtl"] .acc-trigger-left { flex-direction: row-reverse; }
[dir="rtl"] .acc-arrow { transform: rotate(0deg); }
[dir="rtl"] .acc-item.is-open .acc-arrow { transform: rotate(-45deg); }
[dir="rtl"] .svc-tags { flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end; }
[dir="rtl"] .ai-step { flex-direction: row-reverse; }
[dir="rtl"] .ai-step-num { text-align: right; }
[dir="rtl"] .method-content { text-align: right; }
[dir="rtl"] .method-step { flex-direction: row-reverse; }
[dir="rtl"] .method-dl { flex-direction: row-reverse; }
[dir="rtl"] .ind-tags { flex-direction: row-reverse; flex-wrap: wrap; }
[dir="rtl"] .assess-li { flex-direction: row-reverse; }
[dir="rtl"] .diff-item { flex-direction: row-reverse; }
[dir="rtl"] .diff-item:hover { transform: translateX(-4px); }
[dir="rtl"] .engage-item { flex-direction: row-reverse; }
[dir="rtl"] .cta-meta { flex-direction: row-reverse; flex-wrap: wrap; }
[dir="rtl"] .cta-meta-item { flex-direction: row-reverse; }
[dir="rtl"] .ci-item { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .ci-label, [dir="rtl"] .ci-val { text-align: right; }
[dir="rtl"] .form-row { direction: rtl; }
[dir="rtl"] .form-label { text-align: right; }
[dir="rtl"] .form-input, [dir="rtl"] .form-select, [dir="rtl"] .form-textarea { text-align: right; direction: rtl; }
[dir="rtl"] .footer-main { direction: rtl; }
[dir="rtl"] .footer-cols { direction: rtl; }
[dir="rtl"] .footer-col-links { align-items: flex-end; }
[dir="rtl"] .footer-link { flex-direction: row-reverse; padding-left: 0; }
[dir="rtl"] .footer-link:hover { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
[dir="rtl"] .footer-reg { text-align: left; }
[dir="rtl"] .footer-copy { text-align: right; }
[dir="rtl"] .footer-socials { flex-direction: row-reverse; }
[dir="rtl"] .section-desc { text-align: right; }
[dir="rtl"] .btn i { transition: transform var(--dur-xs); }
[dir="rtl"] .btn:hover i { transform: translateX(-4px); }
[dir="rtl"] .case-card-sector, [dir="rtl"] .case-card-title { text-align: right; }
[dir="rtl"] .cases-grid { direction: rtl; }
[dir="rtl"] .tech-grid { direction: rtl; }
[dir="rtl"] .comp-badge { flex-direction: row-reverse; }
[dir="rtl"] .ind-grid { direction: rtl; }
[dir="rtl"] .ind-card { text-align: right; }
[dir="rtl"] .assess-card { text-align: right; }
[dir="rtl"] .svc-card { text-align: right; }
[dir="rtl"] .quote-text { text-align: right; }
[dir="rtl"] .quote-attr { text-align: right; }
[dir="rtl"] .hero-desc { text-align: right; }
[dir="rtl"] .live-badge { flex-direction: row-reverse; }

/* RTL responsive */
@media (max-width: 768px) {
  [dir="rtl"] .hero-stat { border-right: none; padding-right: 0; }
  [dir="rtl"] .hero-actions { flex-wrap: wrap; }
  [dir="rtl"] .footer-bottom { flex-direction: column; }
  [dir="rtl"] .cta-meta { flex-direction: column; }
  [dir="rtl"] .hero-sub-row { flex-direction: column; }
}