:root {
  --font-size: 16px;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #030213;
  --primary-foreground: #ffffff;
  --secondary: #f1f1f9;
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #b3b3b3;
  --radius: 0.625rem;
}

/* Custom keyframe animations */
@keyframes blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%       { transform: translate(20px, -50px) scale(1.1); }
  50%       { transform: translate(-20px, 20px) scale(0.9); }
  75%       { transform: translate(50px, 50px) scale(1.05); }
}

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

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(10px); }
}

.animate-blob {
  animation: blob 7s infinite;
}

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

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.animate-scroll-bounce {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* Section reveal animation */
.animate-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom utility classes not covered by Tailwind v3 CDN */

/* bg-background / text-foreground */
.bg-background { background-color: var(--background); }
.text-foreground { color: var(--foreground); }

/* Mix blend multiply (supported but ensure availability) */
.mix-blend-multiply { mix-blend-mode: multiply; }

/* Backdrop filter blur */
.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* supports-[backdrop-filter] polyfill - just always apply */
.bg-white\/80 { background-color: rgba(255,255,255,0.8); }
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-white\/20 { background-color: rgba(255,255,255,0.2); }
.bg-black\/30 { background-color: rgba(0,0,0,0.3); }
.bg-black\/40 { background-color: rgba(0,0,0,0.4); }
.bg-black\/80 { background-color: rgba(0,0,0,0.8); }

/* Gradient text */
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.text-transparent { color: transparent; }

/* Grid background patterns */
.bg-grid-hero {
  background-image: linear-gradient(to right, rgba(79,70,229,0.125) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(79,70,229,0.125) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}

.bg-grid-features {
  background-image: linear-gradient(to right, rgba(139,92,246,0.125) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(139,92,246,0.125) 1px, transparent 1px);
  background-size: 3rem 3rem;
  opacity: 0.2;
}

/* Radial gradient for pricing section */
.bg-radial-cyan {
  background: radial-gradient(ellipse at top, rgba(6,182,212,0.1) 0%, transparent 60%);
}

/* Aspect ratio */
.aspect-4\/3 { aspect-ratio: 4 / 3; }

/* Shadow utilities with color */
.shadow-cyan-500\/50 { --tw-shadow-color: rgba(6,182,212,0.5); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 10px 15px -3px rgba(6,182,212,0.5), 0 4px 6px -4px rgba(6,182,212,0.5); }
.shadow-cyan-500\/10 { --tw-shadow-color: rgba(6,182,212,0.1); }
.shadow-blue-500\/10 { --tw-shadow-color: rgba(59,130,246,0.1); }
.shadow-cyan-500\/20 { --tw-shadow-color: rgba(6,182,212,0.2); }

/* Opacity utilities */
.opacity-20 { opacity: 0.2; }

/* Transition-transform */
.group:hover .group-hover\:translate-x-1:hover,
.group:hover .group-hover\:translate-x-1 { transform: translateX(4px); }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:gap-2 { gap: 0.5rem; }

/* Hover state gradient overlay for portfolio cards */
.group:hover .group-hover\:from-cyan-500\/5 { --tw-gradient-from: rgba(6,182,212,0.05); }
.group:hover .group-hover\:to-blue-600\/5 { --tw-gradient-to: rgba(37,99,235,0.05); }

/* Opacity transitions */
.opacity-0 { opacity: 0; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* Translate utilities */
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* FAQ accordion */
.faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1.5rem;
}

.faq-item.open .faq-answer {
  max-height: 500px;
  padding: 0 1.5rem 1rem;
}

.faq-item .faq-chevron {
  transition: transform 0.3s ease;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

/* Portfolio image hover */
.portfolio-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.group:hover .portfolio-overlay {
  opacity: 1;
}

/* General transitions */
* { box-sizing: border-box; }

body {
  font-size: var(--font-size);
}

/* Focus ring */
input:focus, textarea:focus, select:focus {
  outline: none;
  ring: 2px solid #06b6d4;
  box-shadow: 0 0 0 2px rgba(6,182,212,0.5);
  border-color: transparent;
}

/* ── NAVBAR ─────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Default: transparent over dark hero */
#main-nav { background: transparent; }
#main-nav .nav-logo-text   { color: #ffffff; }
#main-nav .nav-link        { color: rgba(255,255,255,0.85); }
#main-nav .nav-link:hover  { color: #ffffff; background: rgba(255,255,255,0.08); }
#main-nav .nav-phone       { color: rgba(255,255,255,0.75); }
#main-nav .nav-phone:hover { color: #22d3ee; }
#main-nav .nav-burger-line { background: #ffffff; }
#main-nav .nav-burger-btn:hover { background: rgba(255,255,255,0.08); }

/* Mobile dropdown – dark style */
#main-nav .nav-mobile-menu   { background: rgba(10,18,36,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#main-nav .nav-mobile-border { border-color: rgba(255,255,255,0.08); }
#main-nav .nav-mobile-link   { color: rgba(255,255,255,0.82); }
#main-nav .nav-mobile-link:hover { color: #ffffff; background: rgba(255,255,255,0.05); }

/* Scrolled: frosted glass */
#main-nav.nav-scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 24px rgba(0,0,0,0.07);
}
#main-nav.nav-scrolled .nav-logo-text   { color: #111827; }
#main-nav.nav-scrolled .nav-link        { color: #4b5563; }
#main-nav.nav-scrolled .nav-link:hover  { color: #111827; background: rgba(0,0,0,0.04); }
#main-nav.nav-scrolled .nav-phone       { color: #4b5563; }
#main-nav.nav-scrolled .nav-phone:hover { color: #0891b2; }
#main-nav.nav-scrolled .nav-burger-line { background: #374151; }
#main-nav.nav-scrolled .nav-burger-btn:hover { background: rgba(0,0,0,0.05); }

/* Mobile dropdown – light style when scrolled */
#main-nav.nav-scrolled .nav-mobile-menu   { background: rgba(255,255,255,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#main-nav.nav-scrolled .nav-mobile-border { border-color: rgba(0,0,0,0.07); }
#main-nav.nav-scrolled .nav-mobile-link   { color: #374151; }
#main-nav.nav-scrolled .nav-mobile-link:hover { color: #111827; background: rgba(0,0,0,0.04); }

/* Burger → ✕ animation */
#main-nav.menu-open .nav-burger-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#main-nav.menu-open .nav-burger-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#main-nav.menu-open .nav-burger-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }