/* ===== Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100vw;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  text-rendering: optimizeSpeed;
}

::selection {
  background: rgba(196, 30, 42, 0.3);
  color: #fff;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0A0A0F;
}
::-webkit-scrollbar-thumb {
  background: #1E1E2A;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C41E2A;
}

/* ===== Grid Background ===== */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ===== Hero Canvas Waves ===== */
#hero-waves {
  pointer-events: none;
}

/* ===== Service Card Hover ===== */
.service-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -15px rgba(196, 30, 42, 0.1);
}

/* ===== Smooth Section Transitions ===== */
section {
  position: relative;
  overflow-x: hidden;
}

.deferred-section {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

/* ===== Form Input Focus Glow ===== */
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(196, 30, 42, 0.1);
}

/* ===== Custom Select Arrow ===== */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ===== Nav Link Active State ===== */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #C41E2A, #B8860B);
  border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nav-link:hover::after {
  width: 100%;
}

/* ===== Animated Gradient Text ===== */
.gradient-text-anim {
  background: linear-gradient(90deg, #C41E2A, #ef4444, #B8860B, #ef4444, #C41E2A);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Hero Heading Glow ===== */
#home h1 {
  text-shadow: 0 0 40px rgba(196, 30, 42, 0.15);
  animation: headingGlow 3s ease-in-out infinite alternate;
}

@keyframes headingGlow {
  0% { text-shadow: 0 0 30px rgba(196, 30, 42, 0.1); }
  100% { text-shadow: 0 0 60px rgba(196, 30, 42, 0.25), 0 0 120px rgba(184, 134, 11, 0.1); }
}


/* ===== Stat Number Counter Animation ===== */
.stat-number {
  transition: transform 0.3s ease;
}
.stat-number.counted {
  animation: statPop 0.4s cubic-bezier(0.17, 0.67, 0.35, 1.3);
}

@keyframes statPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ===== Mobile Menu Items ===== */
.mobile-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  transition-delay: var(--delay, 0ms);
}

#mobile-menu.opacity-100 .mobile-item {
  transition-delay: var(--delay, 0ms);
}

/* ===== Team Card — Photo Always Fills Card ===== */
.team-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 420px !important;
  overflow: hidden !important;
}

.team-img-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.team-img-wrap .team-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(to top, #111118 0%, #111118 40%, rgba(17,17,24,0.6) 65%, transparent 100%) !important;
  transition: background 0.6s ease !important;
  pointer-events: none !important;
}

.team-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.team-info {
  position: relative !important;
  z-index: 2 !important;
  margin-top: auto !important;
  transition: all 0.5s ease !important;
}

/* Hover: reveal the full photo behind the text */
.group:hover .team-img-wrap .team-overlay {
  background: linear-gradient(to top, rgba(6,6,9,0.95) 0%, rgba(6,6,9,0.6) 40%, transparent 100%) !important;
}

.group:hover .team-photo {
  transform: scale(1.08) !important;
}

.group:hover .team-info h3,
.group:hover .team-info .team-desc {
  color: #fff !important;
}

/* ===== Social Icons ===== */
.social-icon svg {
  fill: #d1d5db;
  width: 16px;
  height: 16px;
  display: block;
}

.social-icon:hover svg {
  fill: #fff;
}

/* ===== Custom Cursor Trail (Desktop Only) ===== */
.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: #C41E2A;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: transform 0.1s ease, opacity 0.3s ease;
  mix-blend-mode: screen;
}
.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(196, 30, 42, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
  transform: translate(-50%, -50%);
}
.cursor-ring.hover {
  width: 56px;
  height: 56px;
  border-color: rgba(184, 134, 11, 0.6);
}

/* ===== Card Tilt 3D ===== */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}
.tilt-card .relative {
  transform: translateZ(20px);
}

/* ===== Image Skeleton Shimmer ===== */
.skeleton-shimmer {
  background: linear-gradient(90deg, #111118 25%, #1a1a25 50%, #111118 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.img-loaded {
  animation: imgFadeIn 0.5s ease forwards;
}
@keyframes imgFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Testimonials / Logos Carousel ===== */
.logo-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.logo-track {
  display: flex;
  gap: 3rem;
  animation: scrollLogos 25s linear infinite;
  width: max-content;
}
@keyframes scrollLogos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logo-track:hover {
  animation-play-state: paused;
}
.testimonial-card {
  flex-shrink: 0;
  width: 320px;
  background: rgba(17, 17, 24, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.testimonial-card:hover {
  border-color: rgba(196, 30, 42, 0.3);
  transform: translateY(-2px);
}

/* ===== Section Reveal on Scroll ===== */
.reveal-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal-section.revealed {
  opacity: 1;
  transform: translateY(0);
}
.stagger-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-child.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Parallax Layers ===== */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ===== Typewriter Cursor ===== */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: #C41E2A;
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: cursorBlink 0.7s step-end infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ===== Particles Canvas ===== */
#particles-canvas {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.4;
}

#particles-canvas,
#hero-waves,
.parallax-layer,
.morph-blob {
  will-change: transform;
}

/* ===== Progress Ring Stats ===== */
.stat-ring-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-ring-wrap svg {
  transform: rotate(-90deg);
}
.stat-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
}
.stat-ring-fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ===== Back-to-Top Button ===== */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(196, 30, 42, 0.3);
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(12px);
  color: #C41E2A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
  pointer-events: none;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:hover {
  background: #C41E2A;
  color: #fff;
  border-color: #C41E2A;
}

/* ===== Morphing Blob ===== */
.morph-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  will-change: transform, border-radius;
  animation: blobMorph 12s ease-in-out infinite alternate;
}
.morph-blob--red {
  background: radial-gradient(circle, #C41E2A 0%, transparent 70%);
}
.morph-blob--gold {
  background: radial-gradient(circle, #B8860B 0%, transparent 70%);
  animation-delay: -6s;
  animation-duration: 15s;
}
@keyframes blobMorph {
  0%   { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; transform: translate(0, 0) scale(1); }
  25%  { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; transform: translate(30px, -20px) scale(1.05); }
  50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translate(-20px, 20px) scale(0.95); }
  75%  { border-radius: 50% 40% 50% 60% / 40% 50% 60% 50%; transform: translate(15px, 10px) scale(1.02); }
  100% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; transform: translate(0, 0) scale(1); }
}

/* ===== Button Click Ripple ===== */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple .ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ===== Navbar Shrink + Blur on Scroll ===== */
#navbar {
  background: transparent;
  transition: all 0.4s ease;
}
#navbar.scrolled {
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(196, 30, 42, 0.15), 0 4px 30px rgba(0,0,0,0.3);
}
#navbar.scrolled .max-w-7xl {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ===== Scroll Snap Sections (Desktop) ===== */
@media (min-width: 768px) {
  html.snap-active {
    scroll-snap-type: y proximity;
  }
  html.snap-active section {
    scroll-snap-align: start;
  }
}

/* ===== SVG Line Drawing ===== */
.svg-draw path,
.svg-draw line,
.svg-draw circle,
.svg-draw polyline,
.svg-draw rect {
  stroke-dasharray: var(--path-length, 200);
  stroke-dashoffset: var(--path-length, 200);
  transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.svg-draw.drawn path,
.svg-draw.drawn line,
.svg-draw.drawn circle,
.svg-draw.drawn polyline,
.svg-draw.drawn rect {
  stroke-dashoffset: 0;
}

/* ===== Gradient Border Glow on Cards ===== */
.glow-border {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.glow-border::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  margin-left: -75%;
  margin-top: -75%;
  background: conic-gradient(
    #C41E2A, #B8860B, #C0C0C0, #C41E2A
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  animation: glowSpin 3s linear infinite;
  z-index: -2;
}
.glow-border::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: #111118;
  z-index: -1;
  pointer-events: none;
}
.glow-border:hover::before {
  opacity: 1;
}
@keyframes glowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Text Split / Reveal ===== */
.text-split {
  overflow: hidden;
}
.text-split .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%) rotateX(-80deg);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.text-split.revealed .char {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

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

  #particles-canvas,
  #hero-waves,
  .morph-blob,
  .parallax-layer,
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* ===== Responsive Tweaks ===== */

/* All mobile (< 768px) */
@media (max-width: 767px) {
  /* Team cards */
  .team-card {
    min-height: 340px !important;
  }

  /* Mobile menu responsive */
  #mobile-menu ul {
    max-width: 100% !important;
    padding: 0 1.5rem !important;
  }
  #mobile-menu .mobile-link {
    padding: 12px 20px !important;
  }
  #mobile-menu .mobile-link span {
    font-size: 16px !important;
  }
  #mobile-menu .mobile-link svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Extra-small screens (< 400px) */
@media (max-width: 399px) {
  /* Team cards smaller on tiny screens */
  .team-card {
    min-height: 300px !important;
  }

  /* Mobile menu compact */
  #mobile-menu .mobile-link {
    padding: 10px 16px !important;
    gap: 12px !important;
  }
  #mobile-menu .mobile-link span {
    font-size: 15px !important;
  }
}

/* Medium screens (641px – 1023px) */
@media (min-width: 641px) and (max-width: 1023px) {
  .team-card {
    min-height: 380px !important;
  }
}

/* Touch-device friendly: larger tap targets */
@media (hover: none) and (pointer: coarse) {
  a, button {
    min-height: 44px;
  }
  .nav-link {
    padding: 0.5rem 0;
  }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  #mobile-menu > div:last-child {
    padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
  }
  nav .max-w-7xl {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}