@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap");

* {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Sora", sans-serif;
}

body {
  background: #ffffff;
  color: #0f172a;
  min-height: 100vh;
}

/* Gradient text for hero */
.gradient-text-hero {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* FAQ accordion animations */
details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Button glow effects */
.btn-glow {
  box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
}

.btn-glow-orange {
  box-shadow: 0 4px 14px 0 rgba(249, 115, 22, 0.39);
}

/* Subtle background pattern */
.bg-pattern {
  background-image: radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.05) 1px, transparent 0);
  background-size: 40px 40px;
}

/* Process Section Animations */

/* Connector line animation */
@keyframes draw-line {
  0% {
    opacity: 0;
    width: 0%;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}

.animate-draw-line {
  animation: draw-line 2s ease-out forwards;
}

/* Process card hover effects */
.process-card {
  transition: all 0.3s ease;
}

.process-card:hover {
  transform: translateY(-4px);
}

/* Icon gradient backgrounds */
.icon-gradient-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.icon-gradient-purple {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}

.icon-gradient-green {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.icon-gradient-orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* Pulse animation for timeline dots */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Smooth expand animation */
.process-card .expanded-content {
  transition: max-height 0.5s ease-out, opacity 0.3s ease;
}

/* ===================================
   Material Design Symbols Utilities
   =================================== */

/* Base icon styles */
.material-icon {
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon variants */
.material-icon-rounded {
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-icon-sharp {
  font-family: "Material Symbols Sharp";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Fill variant */
.material-icon-filled {
  font-variation-settings: "FILL" 1;
}

/* Weight variants */
.material-icon-light {
  font-variation-settings: "wght" 300;
}

.material-icon-normal {
  font-variation-settings: "wght" 400;
}

.material-icon-medium {
  font-variation-settings: "wght" 500;
}

.material-icon-bold {
  font-variation-settings: "wght" 700;
}

/* Optical size variants */
.material-icon-opsz-sm {
  font-variation-settings: "opsz" 20;
}

.material-icon-opsz-md {
  font-variation-settings: "opsz" 24;
}

.material-icon-opsz-lg {
  font-variation-settings: "opsz" 40;
}

/* Grade/depth variants */
.material-icon-grad {
  font-variation-settings: "GRAD" 200;
}

/* Size utilities */
.material-icon-xs {
  font-size: 1rem; /* 16px */
}

.material-icon-sm {
  font-size: 1.25rem; /* 20px */
}

.material-icon-md {
  font-size: 1.5rem; /* 24px */
}

.material-icon-lg {
  font-size: 2rem; /* 32px */
}

.material-icon-xl {
  font-size: 2.5rem; /* 40px */
}

.material-icon-2xl {
  font-size: 3rem; /* 48px */
}

/* Spacing utilities for icon + text combinations */
.icon-with-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-with-text-sm {
  gap: 0.375rem;
}

.icon-with-text-lg {
  gap: 0.75rem;
}

/* ===================================
   Why Us Section - Split Screen Animations
   =================================== */

/* Fade in animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Base animation class */
.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.is-visible {
  opacity: 1;
}

/* Animation variants */
.fade-in-up.is-visible {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fade-in-left.is-visible {
  animation: fadeInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fade-in-right.is-visible {
  animation: fadeInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.scale-in.is-visible {
  animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Feature row hover effects */
.feature-row {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-row:hover {
  transform: translateY(-4px);
}

/* Icon container enhancements */
.icon-container {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-container:hover {
  transform: scale(1.08) rotate(2deg);
}

.icon-container:hover > div:first-child {
  box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.5);
}

/* Stat card hover */
.stat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border-color: #3b82f6;
}

/* Stagger animation delays */
.feature-row:nth-child(2) {
  animation-delay: 0ms;
}

.feature-row:nth-child(3) {
  animation-delay: 150ms;
}

.feature-row:nth-child(4) {
  animation-delay: 300ms;
}

.feature-row:nth-child(5) {
  animation-delay: 450ms;
}

/* Blob animation */
@keyframes blob {
  0%,
  100% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(10px, -15px) scale(1.05);
  }
  50% {
    transform: translate(-5px, 10px) scale(0.95);
  }
  66% {
    transform: translate(15px, 5px) scale(1.02);
  }
}

.animate-blob {
  animation: blob 4s ease-in-out infinite;
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Focus visible styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===================================
   Header Theme: Transparent ↔ Solid
   =================================== */

/* Transparent state (at top, over hero) */
#main-header[data-header-theme="transparent"] .nav-text { color: #0f172a; }
#main-header[data-header-theme="transparent"] .nav-text:hover { color: #3b82f6; }
#main-header[data-header-theme="transparent"] .logo-text { color: #0f172a; }
#main-header[data-header-theme="transparent"] .logo-text:hover { color: #3b82f6; }
#main-header[data-header-theme="transparent"] .mobile-icon { color: #334155; }
#main-header[data-header-theme="transparent"] #mobile-menu-btn:hover { background-color: rgba(241, 245, 249, 0.5); }

/* Solid state (after scroll) */
#main-header[data-header-theme="solid"] .nav-text { color: #475569; }
#main-header[data-header-theme="solid"] .nav-text:hover { color: #3b82f6; }
#main-header[data-header-theme="solid"] .logo-text { color: #0f172a; }
#main-header[data-header-theme="solid"] .logo-text:hover { color: #3b82f6; }
#main-header[data-header-theme="solid"] .mobile-icon { color: #334155; }
#main-header[data-header-theme="solid"] #mobile-menu-btn:hover { background-color: rgba(248, 250, 252, 1); }