@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import "tailwindcss";

html {
  font-size: 115%; /* Slightly increase base text size globally */
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', sans-serif;
  overflow-x: clip;
}

/* ── Custom Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-background-light);
}
:is(.dark) ::-webkit-scrollbar-track {
  background: var(--color-background-dark);
}
::-webkit-scrollbar-thumb {
  background: #a1a1aa; /* zinc-400 */
}
::-webkit-scrollbar-thumb:hover {
  background: #71717a; /* zinc-500 */
}
:is(.dark) ::-webkit-scrollbar-thumb {
  background: #3f3f46; /* zinc-700 */
}
:is(.dark) ::-webkit-scrollbar-thumb:hover {
  background: #52525b; /* zinc-600 */
}

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary: #0D0D0D;
  --color-accent: #C3F53C;
  --color-background-light: #FAFAFA;
  --color-background-dark: #050505;

  --radius-2xl: 1.5rem;
  --radius-3xl: 2.5rem;
}

/* ── Floating blob keyframes ─────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(3deg); }
  66%       { transform: translateY(8px) rotate(-2deg); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(-3deg); }
}

@layer utilities {


  /* ── Scroll progress bar ─────────────────────────────────── */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-accent);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 9997;
    pointer-events: none;
  }

  /* ── Hero floating blobs ─────────────────────────────────── */
  .hero-blob-1 {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(195, 245, 60, 0.18) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
    filter: blur(40px);
    opacity: 0.55;
  }
  :is(.dark .hero-blob-1) { opacity: 0.85; }

  .hero-blob-2 {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(195, 245, 60, 0.12) 0%, transparent 70%);
    animation: float-slow 12s ease-in-out infinite;
    animation-delay: -4s;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.45;
  }
  :is(.dark .hero-blob-2) { opacity: 0.65; }

  .glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
  }

  :is(.dark .glass-nav) {
    background: rgba(13, 13, 13, 0.7);
  }

  .badge-green {
    background-color: #C3F53C;
  }

  /* ── Premium hover: button spring scale ─────────────────── */
  .btn-scale {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    will-change: transform;
  }
  .btn-scale:hover { transform: scale(1.05); }
  .btn-scale:active { transform: scale(0.97); }

  /* ── Premium hover: card lift ──────────────────── */
  .card-lift {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
  .card-lift:hover {
    transform: translateY(-6px);
  }

  /* ── Premium hover: image zoom ──────────────────────────── */
  .img-zoom { overflow: hidden; }
  .img-zoom img {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
  .img-zoom:hover img { transform: scale(1.06); }

  /* ── Premium hover: animated underline for nav links ────── */
  .link-underline { position: relative; }
  .link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .link-underline:hover::after { width: 100%; }

  /* ── Service row: smooth arrow color on hover ───────────── */
  .service-arrow {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .service-arrow[data-active] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
  }

  /* ── Overlay card: desktop-only section stacking ────────── */
  /* No effect on mobile — purely a md+ progressive enhancement */
  @media (min-width: 768px) {
    .overlay-card {
      margin-top: -4rem;
      position: relative;
      border-radius: 2.5rem 2.5rem 0 0;
    }

    :is(.dark .overlay-card) {
      /* removed shadow */
    }

    /* Subtle lime hairline at the top seam */
    .overlay-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(195, 245, 60, 0.22),
        transparent
      );
      pointer-events: none;
    }
  }

  /* ── Parallax background layer ───────────────────────── */
  .parallax-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* ── FAQ toggle button ──────────────────────────────────── */
  .faq-btn {
    transition: background-color 0.3s ease, border-color 0.3s ease,
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .faq-btn[data-open] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transform: rotate(45deg);
    color: white;
  }
}