/* ================================================================
   MOOVING — GLOBANT-INSPIRED DESIGN SYSTEM v4.0
   White-dominant · Bold type · Cyan #63EFF8 + Orchid #C67AD0
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── 1. TOKENS ── */
:root {
  --cyan:         #63EFF8;   /* brand color — decorative only */
  --orchid:       #C67AD0;   /* brand color — decorative only */
  --cyan-dark:    #0A8A96;   /* dark cyan for text on white */
  --orchid-dark:  #7B2F8E;   /* dark orchid for text on white */
  --grad:         linear-gradient(135deg, #0A8A96 0%, #7B2F8E 100%); /* dark grad for text */
  --grad-btn:     linear-gradient(135deg, #0CBBC8 0%, #9040AA 100%); /* richer grad for buttons */
  --grad-soft:    linear-gradient(135deg, rgba(99,239,248,0.12) 0%, rgba(198,122,208,0.12) 100%);
  --ink:          #080C1E;
  --ink-mid:      #1A1F3A;
  --muted:        #111827;
  --bg:           #FFFFFF;
  --bg-soft:      #F7F8FC;
  --bg-card:      #FFFFFF;
  --border:       #D1D5DB;
  --border-hover: #9040AA;
  --shadow-sm:    0 4px 12px rgba(10,14,35,0.12);
  --shadow-md:    0 12px 40px rgba(10,14,35,0.15);
  --shadow-lg:    0 20px 60px rgba(10,14,35,0.18);
  --radius:       16px;
  --radius-sm:    8px;
  --t:            all 0.28s cubic-bezier(0.4,0,0.2,1);

  /* Legacy overrides */
  --black-primary:   #0A0E23;
  --black-secondary: #2D3250;
  --purple-deep:     #0A0E23;
  --purple:          #C67AD0;
  --light-blue:      #63EFF8;
  --cyan-var:        #63EFF8;
  --yellow:          #63EFF8;
  --orange:          #C67AD0;
  --red:             #EF4444;
  --slate:           #F7F8FC;
  --charcoal:        #0A0E23;
  --steel:           #6B7280;
  --border-light:    #E8EAF0;
  --light-gray:      #ffffff;
  --light-grey:      #6B7280;
  --grey:            #E8EAF0;
  --white-smoke:     #F7F8FC;
  --turquoise:       #63EFF8;
  --orchid-var:      #C67AD0;
}

/* ── 2. GLOBAL RESET & TYPOGRAPHY ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2,
.heading-style-h3, .heading-style-h4,
.heading-style-h5, .heading-style-h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--ink) !important;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

p, li, span, div, a,
.text-size-medium, .text-size-small,
.text-block, .text-block-2, .text-block-3,
.text-block-4, .heading-7 {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* ── 3. NAVBAR — White, minimal ── */
.navbar-component {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border) !important;
  min-height: 4.5rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 1px 20px rgba(10,14,35,0.06) !important;
}

.navbar-link {
  color: var(--ink-mid) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
  transition: var(--t) !important;
}
.navbar-link:hover { color: var(--ink) !important; background: var(--bg-soft) !important; }
.navbar-link.w--current {
  color: var(--ink) !important;
  font-weight: 700 !important;
  position: relative !important;
}
.navbar-link.w--current::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px;
  background: var(--grad);
  border-radius: 2px;
}

.navbar-menu { background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; }
.navbar-menu.is-page-height-tablet { background: var(--bg) !important; }
.menu-icon-line-top,
.menu-icon-line-middle,
.menu-icon-line-bottom { background-color: var(--ink) !important; }

/* ── 4. BUTTONS ── */
.btn-primary-glow {
  display: inline-block !important;
  background: var(--grad-btn) !important; /* richer saturated gradient for buttons */
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em !important;
  padding: 14px 32px !important;
  border-radius: 100px !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(144,64,170,0.35) !important;
  transition: var(--t) !important;
  text-decoration: none !important;
}
.btn-primary-glow:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 40px rgba(144,64,170,0.5) !important;
  color: #fff !important;
  filter: brightness(1.08) !important;
}

.btn-enterprise {
  display: inline-block !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 12px 26px !important;
  border-radius: 100px !important;
  border: 1.5px solid var(--border) !important;
  transition: var(--t) !important;
  text-decoration: none !important;
}
.btn-enterprise:hover {
  border-color: var(--orchid) !important;
  color: var(--orchid) !important;
  background: rgba(198,122,208,0.04) !important;
}

/* Navbar contact button */
.navbar-component .btn-enterprise {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
.navbar-component .btn-enterprise:hover {
  background: var(--ink-mid) !important;
  color: #fff !important;
}

/* ── 5. HERO — Full-bleed photo + dark overlay ── */
.hero-photo {
  position: relative !important;
  overflow: hidden !important;
  min-height: 88vh !important;
  display: flex !important;
  align-items: center !important;
  background: var(--ink) !important;
}
.hero-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg,
    rgba(10,14,35,0.72) 0%,
    rgba(10,14,35,0.55) 60%,
    rgba(99,239,248,0.08) 100%);
  z-index: 1;
}
.hero-photo > img.hero-bg {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; z-index: 0 !important;
  transform: scale(1.03);
  transition: transform 8s ease;
}
.hero-photo > .hero-content {
  position: relative !important; z-index: 2 !important;
  width: 100% !important;
}
.hero-photo h1 { color: #fff !important; }

/* Gradient overline */
.hero-photo .hero-overline {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: block;
}

/* ── 6. SECTION SYSTEM ── */
body { background: var(--bg) !important; }

.section-dark {
  background: var(--ink) !important;
  color: rgba(255,255,255,0.88) !important;
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6 {
  color: #fff !important;
}

.section-light {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
.section-light h1, .section-light h2, .section-light h3,
.section-light h4, .section-light h5, .section-light h6 {
  color: var(--ink) !important;
}
.section-light .text-size-medium { color: #111827 !important; }

.section-soft {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
}
.section-cobalt {
  background: var(--ink) !important;
  color: #fff !important;
}
.section-cobalt h1, .section-cobalt h2, .section-cobalt h3,
.section-cobalt h4, .section-cobalt h5, .section-cobalt h6 {
  color: #fff !important;
}

/* ── 7. CARDS / GLASS PANEL ── */
.glass-panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 2.5rem !important;
  transition: var(--t) !important;
  color: var(--ink) !important;
  display: flex !important;
  flex-direction: column !important;
}
.glass-panel:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-4px) !important;
}
.glass-panel h3, .glass-panel h4, .glass-panel h5,
.glass-panel h6 { color: var(--ink) !important; }
.glass-panel p, .glass-panel li { color: #111827 !important; }

/* ── Fix: --light-blue (#63EFF8) is illegible on white — override to dark cyan in light sections ── */
.section-light [style*="color: var(--light-blue)"],
.section-soft [style*="color: var(--light-blue)"],
.glass-panel [style*="color: var(--light-blue)"] {
  color: #0A8A96 !important; /* dark cyan, readable on white */
  -webkit-text-fill-color: #0A8A96 !important;
}

/* Override opacity on card text — opacity washes out legibility */
.glass-panel p[style*="opacity"],
.bento-item p[style*="opacity"],
.glass-panel ul[style*="opacity"],
.bento-item ul[style*="opacity"] {
  opacity: 1 !important;
  color: #111827 !important;
}

/* Headings inside cards — always near-black */
.glass-panel h3[style*="color: var(--charcoal)"],
.glass-panel h4[style*="color: var(--charcoal)"],
.bento-item h3[style*="color: var(--charcoal)"],
.bento-item h4[style*="color: var(--charcoal)"] {
  color: #080C1E !important;
}

/* --steel inline overrides in light sections → push to near-black */
.section-light [style*="color: var(--steel)"],
.section-soft [style*="color: var(--steel)"],
.glass-panel [style*="color: var(--steel)"] {
  color: #111827 !important;
}
.section-dark .glass-panel, .section-cobalt .glass-panel {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.88) !important;
}
.section-dark .glass-panel:hover, .section-cobalt .glass-panel:hover {
  border-color: var(--cyan) !important;
  background: rgba(99,239,248,0.06) !important;
}
.section-dark .glass-panel h3, .section-dark .glass-panel h4,
.section-cobalt .glass-panel h3, .section-cobalt .glass-panel h4 {
  color: #fff !important;
}
.section-dark .glass-panel p, .section-cobalt .glass-panel p {
  color: rgba(255,255,255,0.65) !important;
}

/* Gradient top-border card accent */
.glass-panel::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--grad);
  border-radius: var(--radius) var(--radius) 0 0;
  margin: -2.5rem -2.5rem 2rem;
}

/* ── 8. TYPOGRAPHY SCALE ── */
.heading-style-h1 {
  font-size: clamp(2.8rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
}
.heading-style-h2 {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
}
.heading-style-h3 {
  font-size: clamp(1.5rem, 3vw, 2.4rem) !important;
  font-weight: 700 !important;
}
.heading-style-h4 {
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  font-weight: 700 !important;
}
.heading-style-h5 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--orchid) !important;
}

/* Gradient text utility — uses dark gradient for white bg legibility */
.text-color-gradiernt,
.text-grad {
  background: var(--grad) !important; /* dark cyan #0A8A96 → dark orchid #7B2F8E */
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}

/* Body text */
.text-size-medium {
  color: #111827 !important;
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.text-size-small { font-size: 0.875rem !important; color: #111827 !important; }

p, li, .paragraph, .paragraph-2, .paragraph-3,
.paragraph-4, .paragraph-5, .paragraph-6,
.paragraph-7, .paragraph-8, .paragraph-9,
.paragraph-10, .paragraph-11, .paragraph-12,
.paragraph-13, .paragraph-14, .paragraph-15,
.paragraph-16, .paragraph-17 {
  color: #111827 !important;
}

/* ── 9. OVERLINE / EYEBROW ── */
.overline,
[style*="letter-spacing: 0.1em"],
[style*="letter-spacing: 0.15em"] {
  background: var(--grad) !important; /* dark cyan→orchid — readable on white */
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ── 10. STATS ── */
.stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(2.8rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  background: var(--grad) !important; /* dark gradient = visible on white */
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.stat-label {
  font-size: 0.72rem !important;
  color: #111827 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
}
.stat-description { color: #111827 !important; font-size: 0.875rem !important; }

/* ── 11. BENTO GRID ── */
.bento-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 1.5rem !important;
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.bento-item { border-radius: var(--radius) !important; }

@media (max-width: 991px) {
  .span-3, .span-4, .span-5, .span-6,
  .span-7, .span-8 { grid-column: span 12; }
}

/* ── 12. LOGO STRIP ── */
.logo-image {
  filter: grayscale(1) brightness(0.5) !important;
  opacity: 0.5 !important;
  transition: all 0.3s !important;
  max-height: 2.8rem !important;
}
.logo-image:hover {
  filter: grayscale(0) brightness(1) !important;
  opacity: 1 !important;
}

/* ── 13. TAGS ── */
.tag, .tag-cobalt, .tag-teal, .tag-amber {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--grad-soft) !important;
  color: var(--orchid) !important;
  border: 1px solid rgba(198,122,208,0.2) !important;
}

/* ── 14. SECTION SEPARATOR ── */
.section-separator {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--grad);
  border-radius: 2px;
  margin: 1.25rem 0;
}

/* ── 15. TEAM SECTION ── */
.section-team {
  background: var(--bg-soft) !important;
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}
.section-team h2, .section-team h3,
.section-team h4 { color: var(--ink) !important; }

.image-2, .image-3, .image-4 {
  border-radius: var(--radius) !important;
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}
.image-2:hover, .image-3:hover, .image-4:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(198,122,208,0.18) !important;
}

.bold-text, .bold-text-2, .bold-text-3 {
  color: var(--ink) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.text-block, .text-block-2, .text-block-3 {
  color: var(--muted) !important;
  font-size: 0.875rem !important;
}

/* ── 16. FOOTER ── */
.footer-component {
  background: var(--ink) !important;
  border-top: none !important;
}
.footer-link, .footer-social-link {
  color: rgba(255,255,255,0.45) !important;
  transition: color 0.2s !important;
}
.footer-link:hover, .footer-social-link:hover {
  color: var(--cyan) !important;
}
.footer-credit-text, .text-block-5 { color: rgba(255,255,255,0.3) !important; }
.text-weight-semibold { color: rgba(255,255,255,0.9) !important; }
.line-divider { background: rgba(255,255,255,0.08) !important; }
.footer-description { color: rgba(255,255,255,0.5) !important; }

.footer-component h2, .footer-component h3,
.footer-component h4, .footer-component h5,
.footer-component h6 { color: #fff !important; }

/* ── 17. BENEFIT / FEATURE ITEMS ── */
.benefit-item, .feature-item {
  color: var(--muted) !important;
}
.benefit-item.is-black {
  background: var(--ink) !important;
}
.is-black, .is-black-lite {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
}

/* ── 18. SECTION PADDING ── */
.padding-section-large {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
  box-shadow: none !important;
  color: inherit !important;
  opacity: 1 !important;
}
.padding-section-medium {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* ── 19. DATA NODES (IA page) ── */
.node {
  background: var(--grad-soft) !important;
  border: 1px solid rgba(99,239,248,0.3) !important;
  color: var(--ink-mid) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 100px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}
.node.magenta {
  background: rgba(198,122,208,0.1) !important;
  border-color: var(--orchid) !important;
  color: var(--orchid) !important;
}
.connector {
  height: 1.5px !important;
  width: 28px !important;
  background: var(--grad) !important;
  opacity: 0.4 !important;
}

/* ── 20. GRADIENT BG ACCENT SECTIONS ── */
.section-grad-hero {
  background: linear-gradient(135deg, rgba(99,239,248,0.08) 0%, rgba(198,122,208,0.08) 100%) !important;
}

/* Decorative blob (optional) */
.grad-blob {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.grad-blob.cyan { background: rgba(99,239,248,0.15); }
.grad-blob.orchid { background: rgba(198,122,208,0.12); }

/* ── 21. FORM INPUTS ── */
.form-input {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-size: 1rem !important;
  padding: 0.875rem 1rem !important;
  transition: border-color 0.2s !important;
}
.form-input:focus {
  border-color: var(--orchid) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(198,122,208,0.12) !important;
}

/* ── 22. TESTIMONIAL / FAQ ── */
.testimonial-content {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}
.faq-accordian {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}
.faq-icon { color: var(--orchid) !important; }

/* ── 23. SECTION CTA ── */
.section-cta {
  background: var(--ink) !important;
  background-image: none !important;
}

/* ── 24. MISC UTILITY ── */
.button-text-block {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 100px !important;
}
.button-alternate {
  border-color: rgba(255,255,255,0.3) !important;
  color: #fff !important;
}
.button-alternate:hover { border-color: var(--cyan) !important; color: var(--cyan) !important; }
.gradient-box { background: var(--orchid) !important; }
.gradient-box.top { background: var(--cyan) !important; }
.cta-gradient { background: var(--orchid) !important; }

/* ── 25. ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform: translateY(28px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.animate-in { animation: fadeUp 0.55s cubic-bezier(0.4,0,0.2,1) both; }

/* ── 26. RESPONSIVE ── */
@media (max-width: 767px) {
  .hero-photo { min-height: 70vh !important; }
  .padding-section-large { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .glass-panel { padding: 1.75rem !important; }
  .glass-panel::before { margin: -1.75rem -1.75rem 1.5rem; }
}
@media (max-width: 479px) {
  .hero-photo { min-height: 60vh !important; }
  .heading-style-h1 { font-size: 2.5rem !important; }
  .stat-value { font-size: 2.5rem !important; }
}