/* ═══════════════════════════════════════════════════════
   ISPECTRA 2025 DESIGN SYSTEM — Custom Styles
   Light base · Dark hero/accent · Glass morphism
   This file is loaded ALONGSIDE Tailwind CDN in index.html
   ═══════════════════════════════════════════════════════ */

/* ─── Root tokens (mirror of @theme inline in Next.js globals.css) ─── */
:root {
  --color-primary-950: #030712;
  --color-primary-900: #0a1628;
  --color-primary-800: #0f1d32;
  --color-primary-700: #172a45;
  --color-primary-600: #1e3a5f;
  --color-primary-500: #2a4f7a;
  --color-primary-400: #3d6ba8;
  --color-primary-300: #5a8bc7;
  --color-primary-200: #8BB1DE;
  --color-primary-100: #BDD5F0;
  --color-primary-50:  #E8F1FA;

  --color-accent-800: #005A8C;
  --color-accent-700: #0077B6;
  --color-accent-600: #0096D1;
  --color-accent-500: #00B4D8;
  --color-accent-400: #38D9F5;
  --color-accent-300: #72E5FA;
  --color-accent-200: #A8EFFC;
  --color-accent-100: #D4F7FE;
  --color-accent-50:  #EDFCFE;

  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html {
  scroll-behavior: smooth;
  /* Offset so cross-page hash links (e.g. ./about/company.html#leadership)
     don't land hidden behind the fixed 64-68px header. */
  scroll-padding-top: 5rem;
}
body  { font-family: var(--font-sans); color: #1f2937; background: #fff; }

/* ─── Navbar responsiveness fix ───────────────────────────────────────
   Between lg (1024px) and xl (1280px) the desktop nav has 6 mega-menu
   triggers + Contact + search + CTA, which needs ~1250px to fit on one
   line. Tighten spacing/typography in that window so "About Us" and its
   neighbours stop overflowing or wrapping. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  nav[data-mega-nav]                       { gap: 0; font-size: 13px; }
  nav[data-mega-nav] .mega-nav-btn,
  nav[data-mega-nav] > a                   { padding-left: .5rem; padding-right: .5rem; }
  #header-bar a[href$="contact.html"].hidden.lg\:inline-flex {
    padding-left: .85rem; padding-right: .85rem; font-size: 12.5px;
  }
  /* The standalone search icon is redundant in this range — the mega
     menu's inner panel already exposes a full search bar. Reclaim that
     ~40px so the 6 mega items + Contact + CTA stay on one line. */
  #header-bar #search-btn                  { display: none; }
}
/* Below 1024px the entire desktop nav hides and the mobile accordion
   takes over — so we make sure the mobile menu's About Us section is
   never clipped at the bottom of the viewport. */
#mobile-menu                               { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ─── Mega menu panel hide rule ───────────────────────────────────────
   Mega/mobile panel divs carry both `hidden` and `grid` Tailwind
   utilities. In Tailwind's generated stylesheet `.grid` (display:grid)
   is emitted after `.hidden` (display:none), so without this override
   every panel stays visible at once when the mega menu opens — making
   hover appear "broken" on pages that don't already inline this rule
   (index.html and a handful of services/* pages). The `!important`
   matches the working pattern used by ai.html and the about/* pages. */
[data-mega-panel].hidden                   { display: none !important; }
[data-mobile-panel].hidden                 { display: none !important; }

/* ─── Mega menu drop-in animation ─────────────────────────────────────
   ai.html has this animation inline; the about/* pages (and others)
   don't, so their mega menu pops in instantly with no polish. Putting
   it in the shared stylesheet aligns every page with ai.html's feel. */
@keyframes mega-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#mega-menu-inner:not(.hidden) {
  animation: mega-drop .22s cubic-bezier(.22, 1, .36, 1) both;
}
.font-display, h1, h2, h3, h4 { font-family: var(--font-display); }

img { max-width: 100%; height: auto; }

/* ─── Layout container (mirror of React Container) ─── */
.ispec-container {
  width: 100%;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1280px;
}
@media (min-width: 640px) { .ispec-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .ispec-container { padding-left: 2rem; padding-right: 2rem; } }

/* ─── GRADIENT TEXT ─── */
.gradient-text {
  background: linear-gradient(135deg, #0077B6 0%, #00B4D8 50%, #0096D1 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gradient-text-light {
  background: linear-gradient(135deg, #38D9F5 0%, #72E5FA 30%, #c4b5fd 70%, #38D9F5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gradient-text-animated {
  background: linear-gradient(135deg, #00B4D8, #38D9F5, #a78bfa, #38D9F5, #00B4D8);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradient-shift 8s ease infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ─── GRID PATTERNS ─── */
.grid-bg-light {
  background-image:
    linear-gradient(rgba(0, 119, 182, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 119, 182, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.dot-pattern {
  background-image: radial-gradient(circle, #CBD5E1 1px, transparent 1px);
  background-size: 36px 36px;
}
.dot-pattern-sm {
  background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,0.15) 1px, transparent 0);
  background-size: 32px 32px;
}

/* ─── LIGHT CARDS ─── */
.card-light {
  background: white;
  border: 1px solid rgb(226, 232, 240);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-light:hover {
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.1);
  border-color: rgb(203, 213, 225);
  transform: translateY(-4px);
}

/* ─── ANIMATIONS ─── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.visible { animation: fade-up 0.7s cubic-bezier(.22,1,.36,1) forwards; }
.reveal[data-delay="1"].visible { animation-delay: 0.1s; }
.reveal[data-delay="2"].visible { animation-delay: 0.2s; }
.reveal[data-delay="3"].visible { animation-delay: 0.3s; }
.reveal[data-delay="4"].visible { animation-delay: 0.4s; }
.reveal[data-delay="5"].visible { animation-delay: 0.5s; }
.reveal[data-delay="6"].visible { animation-delay: 0.6s; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.animate-float { animation: float-y 6s ease-in-out infinite; }

@keyframes float-y-rev {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}
.animate-float-rev { animation: float-y-rev 7s ease-in-out infinite; }

@keyframes ping-slow {
  0%   { transform: scale(1);    opacity: 0.75; }
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping-slow { animation: ping-slow 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
@keyframes scroll-right {
  0%   { transform: translateX(-33.333%); }
  100% { transform: translateX(0); }
}
.scroll-left  { animation: scroll-left 55s linear infinite; width: max-content; }
.scroll-right { animation: scroll-right 55s linear infinite; width: max-content; }
.scroll-left:hover, .scroll-right:hover { animation-play-state: paused; }

@keyframes tech-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tech-marquee { animation: tech-scroll 40s linear infinite; width: max-content; }
.tech-marquee:hover { animation-play-state: paused; }

@keyframes word-rotate-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes word-rotate-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}
.word-enter { animation: word-rotate-in 0.5s cubic-bezier(.22,1,.36,1) forwards; }
.word-exit  { animation: word-rotate-out 0.5s cubic-bezier(.22,1,.36,1) forwards; }

@keyframes pipeline-dot {
  0%   { left: -2%; opacity: 1; }
  100% { left: 102%; opacity: 1; }
}
.pipeline-dot { animation: pipeline-dot 3.5s ease-in-out infinite; }

@keyframes scan-line {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}
.animate-scan { animation: scan-line 10s linear infinite; }

@keyframes pulse-ring {
  0%, 100% { transform: scale(1);   opacity: 0.4; }
  50%      { transform: scale(2.4); opacity: 0; }
}
.pulse-ring { animation: pulse-ring 3s ease-in-out infinite; }

@keyframes pulse-bg {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 0; }
}
.pulse-bg { animation: pulse-bg 1.6s ease-out infinite; }

@keyframes slow-rotate {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(12deg); }
}
.animate-slow-rotate { animation: slow-rotate 18s ease-in-out infinite; }

@keyframes drift-y {
  0%, 100% { transform: translateY(0); opacity: 0.18; }
  50%      { transform: translateY(-16px); opacity: 0.32; }
}
.animate-drift-y { animation: drift-y 9s ease-in-out infinite; }

@keyframes drift-y-rev {
  0%, 100% { transform: translateY(0); opacity: 0.14; }
  50%      { transform: translateY(14px); opacity: 0.26; }
}
.animate-drift-y-rev { animation: drift-y-rev 11s ease-in-out infinite; }

@keyframes drift-y-sm {
  0%, 100% { transform: translateY(0); opacity: 0.12; }
  50%      { transform: translateY(-12px); opacity: 0.22; }
}
.animate-drift-y-sm { animation: drift-y-sm 13s ease-in-out infinite; }

/* ─── Backdrop blur fallback ─── */
.backdrop-blur-fallback { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ─── Rotating hero word ─── */
.rotating-word-container {
  display: inline-block;
  position: relative;
  height: 1.15em;
  overflow: hidden;
  vertical-align: bottom;
  min-width: 12ch;
}
.rotating-word {
  display: inline-block;
  position: absolute;
  left: 0; top: 0;
}

/* ─── Mobile nav overlay ─── */
.mobile-nav-panel { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(100%); }
.mobile-nav-panel.open { transform: translateX(0); }
.mobile-nav-backdrop { transition: opacity 0.3s ease; opacity: 0; pointer-events: none; }
.mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* ─── Tab panels ─── */
[data-tab-panel] { display: none; }
[data-tab-panel].active { display: block; animation: fade-up 0.4s ease; }

/* ─── Testimonial slider ─── */
[data-slide] { display: none; }
[data-slide].active { display: block; animation: fade-up 0.5s ease; }

/* Testimonial carousel (React-style framer-motion analogue) */
@keyframes slide-in-soft {
  from { opacity: 0; transform: translateX(40px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
[data-testimonial-slide] { display: none; }
[data-testimonial-slide].active { display: block; }
[data-testimonial-slide].slide-in { animation: slide-in-soft 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ─── Number/text rendering ─── */
.tabular { font-variant-numeric: tabular-nums; }

/* ─── Focus visibility ─── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #0096D1;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── Utility: tiny scrollbar ─── */
.thin-scroll::-webkit-scrollbar { height: 4px; width: 4px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(56,217,245,0.3); border-radius: 4px; }

/* ─── Mobile: prevent horizontal overflow from decorative blobs ─── */
body, main { overflow-x: hidden; }

/* ─── Header scroll state ─── */
@media (min-width: 1024px) {
  #header-bar.header-scrolled {
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-bottom-color: #f1f5f9;
  }
}

/* ─── FAQ transitions ─── */
.faq-answer { transition: max-height 0.35s ease; }
.faq-icon { transition: transform 0.3s ease; }

/* ─── Pillar panels: ensure hidden class fully hides ─── */
[data-pillar-content].hidden { display: none !important; }
[data-testimonial-slide].hidden { display: none !important; }

/* ─── Mega menu panels: override default .grid so hidden wins ─── */
[data-mega-panel].hidden { display: none !important; }
[data-mobile-panel].hidden { display: none !important; }

/* ─── Desktop mega-menu trigger: active state ─── */
.mega-nav-btn.is-open { color: #0077B6; /* accent-700 */ }
.mega-nav-btn.is-open svg { transform: rotate(180deg); }

/* Indicator under trigger when open */
.mega-nav-indicator.scale-x-100 { transform: scaleX(1); }
.mega-nav-indicator.scale-x-0   { transform: scaleX(0); }

/* ─── Mobile accordion chevron ─── */
.mobile-acc-chev { transition: transform 0.3s ease; }
.mobile-acc-chev.open { transform: rotate(180deg); }

/* ─── Mega menu inner panel: entrance animation ─── */
@keyframes mega-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#mega-menu-inner:not(.hidden) {
  animation: mega-drop 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}