/* ENGAGE — Readable text, vivid colour, motion & delight */

:root,
html {
  --text-primary: #ffffff;
  --text-body: #e4edf5;
  --text-secondary: #cdd9e5;
  --text-muted: #a8bdd0;
  --teal: #2dd4da;
  --teal-bright: #5eead4;
  --teal-dim: rgba(45, 212, 218, 0.14);
  --orange: #f59e42;
  --orange-dim: rgba(245, 158, 66, 0.14);
  --gold: #e8c170;
  --gold-light: #fde68a;
  --purple: #a78bfa;
  --blue: #60a5fa;
  --radius: 12px;
  --radius-lg: 20px;
}

body {
  color: #e4edf5 !important;
}

/* Site-wide readable body copy — beats pages.css & premium.css */
main p,
main li,
main .lead,
main .about-content p,
main .intro-content p,
main .service-detail-body p,
main .service-card-content p,
main .work-item p,
main .value-card p,
main .philosophy-item p,
main .process-step p,
main .contact-info p,
main .faq-answer-inner,
main .blog-card p,
main .case-content p,
main .testimonial-role,
main .stat-label,
main .service-detail-list li,
main .stack-visual-detail,
.footer-brand p,
.page-hero-content .lead,
.section-header .lead,
.hero-content .lead {
  color: #e4edf5 !important;
}

.lead {
  color: #d6e3ef !important;
  font-size: clamp(1.08rem, 1.8vw, 1.22rem) !important;
  line-height: 1.75 !important;
}

h1, h2, h3, h4, h5 {
  color: #ffffff !important;
}

.eyebrow,
.eyebrow--teal {
  color: #5eead4 !important;
}

.eyebrow::before {
  background: linear-gradient(90deg, var(--teal), var(--gold)) !important;
}

.text-gradient {
  background: linear-gradient(120deg, #fff 0%, var(--teal-bright) 40%, var(--gold-light) 80%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 10% 20%, rgba(45, 212, 218, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(245, 158, 66, 0.06) 0%, transparent 50%);
}

.hero-particles { display: block !important; opacity: 0.7; }

.hero-media img {
  animation: kenburns 22s ease-in-out infinite alternate !important;
  filter: saturate(1.1) !important;
}

.hero-overlay {
  background:
    linear-gradient(125deg, rgba(3, 5, 8, 0.88) 0%, rgba(3, 5, 8, 0.55) 50%, rgba(3, 5, 8, 0.82) 100%),
    radial-gradient(ellipse 70% 60% at 75% 30%, rgba(45, 212, 218, 0.15) 0%, transparent 55%) !important;
}

.hero-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  animation: orb-float 12s ease-in-out infinite;
}

.hero-orb--teal { width: 320px; height: 320px; background: var(--teal); top: 15%; right: 10%; }
.hero-orb--gold { width: 240px; height: 240px; background: var(--orange); bottom: 20%; left: 5%; animation-delay: -4s; }
.hero-orb--purple { width: 180px; height: 180px; background: var(--purple); top: 50%; left: 40%; animation-delay: -8s; opacity: 0.3; }

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -25px); }
}

@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.btn { border-radius: 100px !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--teal) 0%, #0ea5a9 50%, var(--gold) 100%) !important;
  border: none !important;
  color: #041018 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 24px rgba(45, 212, 218, 0.35) !important;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(45, 212, 218, 0.45) !important;
}

.btn-ghost { border-radius: 100px !important; border-color: rgba(45, 212, 218, 0.4) !important; }
.btn-ghost:hover { background: var(--teal-dim) !important; color: var(--teal-bright) !important; }

.nav-cta {
  border-radius: 100px !important;
  background: linear-gradient(135deg, var(--teal-dim), var(--orange-dim)) !important;
  color: var(--teal-bright) !important;
}

.stats-grid { border: none !important; gap: 1rem !important; background: transparent !important; }

.stat-card {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(145deg, var(--bg-elevated), var(--bg-surface)) !important;
  transition: transform 0.4s, box-shadow 0.4s !important;
}

.stat-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--teal) !important;
  box-shadow: 0 16px 48px rgba(45, 212, 218, 0.15) !important;
}

.stat-card:nth-child(1) .stat-number { color: var(--teal-bright) !important; }
.stat-card:nth-child(2) .stat-number { color: var(--gold-light) !important; }
.stat-card:nth-child(3) .stat-number { color: var(--orange) !important; }
.stat-card:nth-child(4) .stat-number { color: var(--purple) !important; }

.marquee-wrap {
  opacity: 1 !important;
  background: linear-gradient(90deg, var(--bg-primary), var(--bg-surface), var(--bg-primary)) !important;
  border-block: 1px solid rgba(45, 212, 218, 0.15) !important;
}

.marquee-item .dot { background: var(--teal) !important; opacity: 1 !important; box-shadow: 0 0 8px var(--teal); }

.section-tint-teal { background: linear-gradient(180deg, rgba(45, 212, 218, 0.06) 0%, transparent 100%) !important; }
.section-tint-warm { background: linear-gradient(180deg, rgba(245, 158, 66, 0.06) 0%, transparent 100%) !important; }
.section-tint-purple { background: linear-gradient(180deg, rgba(167, 139, 250, 0.05) 0%, transparent 100%) !important; }

.logo-item {
  opacity: 0.55 !important;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  transition: all 0.35s ease !important;
}

.logo-item:hover {
  opacity: 1 !important;
  color: var(--teal-bright) !important;
  background: var(--teal-dim);
  transform: translateY(-2px);
}

.intro-image { border-radius: var(--radius-lg) !important; }
.intro-image-badge strong { color: var(--teal-bright) !important; }
.intro-feature { border-radius: var(--radius) !important; background: rgba(255,255,255,0.03) !important; }
.intro-feature:hover { background: var(--teal-dim) !important; border-color: var(--teal) !important; }
.intro-feature svg { color: var(--teal-bright) !important; }

.service-card {
  border-radius: var(--radius-lg) !important;
  transition: transform 0.5s, box-shadow 0.5s !important;
}

.service-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 60px rgba(45, 212, 218, 0.2) !important;
}

.service-card-link { color: var(--teal-bright) !important; }

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.bento-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  transition: transform 0.5s, box-shadow 0.4s;
  min-height: 200px;
}

.bento-item:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 200px;
  transition: transform 0.7s;
}

.bento-item:hover img { transform: scale(1.08); }

.bento-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(3, 5, 8, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.bento-item-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 0.35rem;
}

.bento-item h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; }
.bento-item p { font-size: 0.85rem !important; color: var(--text-secondary) !important; }

.bento-item--large { grid-column: span 7; grid-row: span 2; min-height: 400px; }
.bento-item--medium { grid-column: span 5; }
.bento-item--small { grid-column: span 4; }
.bento-item--wide { grid-column: span 8; }

.stack-visual-layer { border-radius: var(--radius) !important; }
.stack-visual-layer:nth-child(1) { border-left: 3px solid var(--teal) !important; background: linear-gradient(90deg, rgba(45,212,218,0.2), transparent) !important; }
.stack-visual-layer:nth-child(2) { border-left: 3px solid var(--blue) !important; background: linear-gradient(90deg, rgba(96,165,250,0.15), transparent) !important; }
.stack-visual-layer:nth-child(3) { border-left: 3px solid var(--orange) !important; background: linear-gradient(90deg, rgba(245,158,66,0.15), transparent) !important; }
.stack-visual-layer:nth-child(4) { border-left: 3px solid var(--gold) !important; background: linear-gradient(90deg, rgba(232,193,112,0.12), transparent) !important; }

.stack-visual-detail {
  border-radius: var(--radius) !important;
  color: var(--text-body) !important;
  background: linear-gradient(135deg, var(--bg-elevated), rgba(45, 212, 218, 0.05)) !important;
}

.philosophy-item {
  padding: 2rem !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-light) !important;
  background: var(--bg-elevated) !important;
  transition: transform 0.4s, box-shadow 0.4s !important;
}

.philosophy-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.philosophy-item:nth-child(1):hover { border-color: var(--teal) !important; }
.philosophy-item:nth-child(2):hover { border-color: var(--orange) !important; }
.philosophy-item:nth-child(3):hover { border-color: var(--purple) !important; }

.work-item-tag { background: var(--teal-dim) !important; color: var(--teal-bright) !important; }
.work-item-link { color: var(--gold-light) !important; }
.testimonial-quote { color: var(--text-primary) !important; }
.testimonial-author { color: var(--teal-bright) !important; }

.cta-banner-inner { border-radius: var(--radius-lg) !important; border-color: rgba(45, 212, 218, 0.2) !important; }
.cta-banner-glow { display: block !important; opacity: 0.25 !important; }

.page-hero-overlay {
  background: linear-gradient(180deg, rgba(3,5,8,0.5) 0%, rgba(3,5,8,0.88) 65%, var(--bg-deep) 100%) !important;
}

input, select, textarea { color: var(--text-primary) !important; }
.faq-question { color: var(--text-primary) !important; }
.faq-item.open .faq-question { color: var(--teal-bright) !important; }

.chat-launcher {
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--teal), #0ea5a9) !important;
  color: #041018 !important;
  animation: chat-pulse 3s ease-in-out infinite;
}

@keyframes chat-pulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(45, 212, 218, 0.4); }
  50% { box-shadow: 0 4px 40px rgba(45, 212, 218, 0.7); }
}

.process-step:hover { transform: translateY(-4px); border-color: var(--teal) !important; }
.value-card:hover { border-color: var(--teal) !important; background: var(--teal-dim) !important; }

@media (max-width: 1024px) {
  .bento-item--large, .bento-item--medium, .bento-item--small, .bento-item--wide {
    grid-column: span 12;
    grid-row: span 1;
    min-height: 220px;
  }
}

[data-theme="light"] {
  --text-primary: #0a1420;
  --text-body: #1e293b;
  --text-secondary: #334155;
  --text-muted: #475569;
}

[data-theme="light"] body {
  color: #1e293b !important;
}

[data-theme="light"] main p,
[data-theme="light"] main li,
[data-theme="light"] main .lead,
[data-theme="light"] main .about-content p,
[data-theme="light"] main .intro-content p,
[data-theme="light"] main .value-card p,
[data-theme="light"] main .philosophy-item p,
[data-theme="light"] .footer-brand p {
  color: #1e293b !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5 {
  color: #0a1420 !important;
}

[data-theme="light"] .lead {
  color: #334155 !important;
}

/* Reveal fallback when GSAP unavailable */
.no-gsap [data-reveal], .no-gsap .reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.no-gsap [data-reveal].visible, .no-gsap .reveal-up.visible {
  opacity: 1;
  transform: none;
}

.text-gold { color: var(--gold-light) !important; }
.text-teal { color: var(--teal-bright) !important; }

.logos-section {
  background: linear-gradient(180deg, transparent, rgba(45, 212, 218, 0.04), transparent) !important;
}

.logos-label { color: var(--text-secondary) !important; }

.services-preview { background: linear-gradient(180deg, rgba(245, 158, 66, 0.05) 0%, transparent 100%) !important; }

.service-detail {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: transform 0.5s, box-shadow 0.4s !important;
}

.service-detail:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(45, 212, 218, 0.12) !important;
}

.service-detail-img img { transition: transform 0.7s !important; filter: saturate(1.1) !important; }
.service-detail:hover .service-detail-img img { transform: scale(1.06) !important; }

.service-detail-list li { color: var(--text-body) !important; }
.service-detail-list li::before { color: var(--teal-bright) !important; }

.work-item {
  border-radius: var(--radius-lg) !important;
  transition: transform 0.5s, box-shadow 0.4s !important;
}

.work-item:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3) !important;
}

.work-item-image {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

.work-item-image img {
  transition: transform 0.7s !important;
  filter: saturate(1.08) !important;
}

.work-item:hover .work-item-image img { transform: scale(1.05) !important; }

.work-item-meta span {
  background: var(--teal-dim) !important;
  color: var(--teal-bright) !important;
  border-radius: 100px !important;
}

.tech-tag {
  background: linear-gradient(135deg, var(--teal-dim), rgba(167, 139, 250, 0.1)) !important;
  color: var(--text-body) !important;
  border: 1px solid rgba(45, 212, 218, 0.25) !important;
  transition: all 0.3s !important;
}

.tech-tag:hover {
  color: var(--teal-bright) !important;
  border-color: var(--teal) !important;
  transform: translateY(-2px);
}

.value-card {
  border-radius: var(--radius-lg) !important;
  background: var(--bg-elevated) !important;
  transition: transform 0.4s, box-shadow 0.4s, border-color 0.3s !important;
}

.value-icon {
  background: var(--teal-dim) !important;
  color: var(--teal-bright) !important;
}

.value-card:nth-child(2) .value-icon { background: var(--orange-dim) !important; color: var(--orange) !important; }
.value-card:nth-child(3) .value-icon { background: rgba(167, 139, 250, 0.15) !important; color: var(--purple) !important; }

.testimonial-card {
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(145deg, var(--bg-elevated), rgba(45, 212, 218, 0.04)) !important;
  border-color: rgba(45, 212, 218, 0.2) !important;
}

.testimonials { background: linear-gradient(180deg, rgba(167, 139, 250, 0.05) 0%, transparent 100%) !important; }

.testimonial-dot.active { background: var(--teal) !important; }

.process-step {
  border-radius: var(--radius-lg) !important;
  background: var(--bg-elevated) !important;
  transition: transform 0.4s, border-color 0.3s !important;
}

.process-step-num { color: var(--teal-bright) !important; }

.contact-section { background: linear-gradient(180deg, rgba(45, 212, 218, 0.04) 0%, transparent 100%) !important; }

.contact-method {
  border-radius: var(--radius) !important;
  transition: background 0.3s, border-color 0.3s !important;
}

.contact-method:hover {
  background: var(--teal-dim) !important;
  border-color: var(--teal) !important;
}

.contact-method-icon { color: var(--teal-bright) !important; }

.case-content h2, .case-content h3 { color: var(--text-primary) !important; margin-top: 2rem; }
.case-content p, .case-content li { color: var(--text-body) !important; }
.case-content a { color: var(--teal-bright) !important; }

.error-page {
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(45, 212, 218, 0.1) 0%, transparent 60%),
    var(--bg-deep) !important;
}

.error-code {
  background: linear-gradient(135deg, var(--teal), var(--gold)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.about-images img {
  border-radius: var(--radius) !important;
  transition: transform 0.5s !important;
}

.about-images img:hover { transform: scale(1.03); }

.page-hero-bg img { animation: kenburns 20s ease-in-out infinite alternate !important; }

.faq-item { border-radius: var(--radius) !important; }
.faq-item.open { border-color: var(--teal) !important; background: var(--teal-dim) !important; }

.blog-card {
  border-radius: var(--radius-lg) !important;
  transition: transform 0.4s, box-shadow 0.4s !important;
}

.blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(45, 212, 218, 0.15) !important;
}

.quote-wizard-step.active .quote-step-num {
  background: linear-gradient(135deg, var(--teal), var(--gold)) !important;
  color: #041018 !important;
}

/* Muted UI labels — still readable, not washed out */
.nav-links a,
.footer-col a,
.footer-col li,
.logos-label,
.work-item-meta span,
.blog-card-date,
.case-meta dt,
.contact-method strong,
.stat-label,
.intro-feature span,
.service-card-content p,
.bento-item p {
  color: #b8c9d8 !important;
}

.nav-links a:hover,
.footer-col a:hover {
  color: #5eead4 !important;
}

.footer-col h4 {
  color: #8fa8be !important;
}

.text-gold { color: #fde68a !important; }
.text-teal { color: #5eead4 !important; }

.faq-question { color: #ffffff !important; }
.faq-item.open .faq-question { color: #5eead4 !important; }

.testimonial-quote { color: #ffffff !important; }
.testimonial-author { color: #5eead4 !important; }

.work-item-link { color: #fde68a !important; }
.service-card-link { color: #5eead4 !important; }