/* ===================================================================
   styles.css  —  SLEEK • CLEAN • BOLD • MINIMAL • LUX
   - Fluid type via clamp()
   - Tokenized theming (HSL fallback, OKLCH upgrade)
   - Dark mode with color-scheme + [data-theme="dark"]
   - Container queries, subgrid-ready layouts
   - Reduced specificity via :where()
   - Accessible focus-visible, large tap targets
   - Motion-safe micro-interactions
   =================================================================== */

/* ---------- LAYERS (keep cascade predictable) ---------- */
@layer reset, tokens, base, components, utilities, themes;

/* =======================================================
   RESET
   ======================================================= */
@layer reset {
  /* Modern CSS reset (lightweight, no !important) */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
    padding: 0;
  }
  html:focus-within {
    scroll-behavior: smooth;
  }
  html,
  body {
    height: 100%;
  }
  body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  /* Provide visible focus only when keyboarding */
  :focus {
    outline: none;
  }
  :focus-visible {
    outline: none;
  }
}

/* =======================================================
   TOKENS (HSL fallback first, OKLCH upgrade inside @supports)
   ======================================================= */
@layer tokens {
  :root {
    /* ---------- Brand vibe */
    --brand-vibe: "SLEEK CLEAN BOLD MINIMAL LUX";

    /* ---------- Typography families */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
      "Helvetica Neue", sans-serif;
    --font-alt: "Poppins", var(--font-sans);
    --font-serif: ui-serif, Georgia, "Times New Roman", serif;

    /* ---------- Fluid type scale (Major Third-ish) */
    --step--2: clamp(0.74rem, 0.68rem + 0.15vw, 0.82rem);
    --step--1: clamp(0.88rem, 0.8rem + 0.2vw, 0.95rem);
    --step-0: clamp(1rem, 0.92rem + 0.35vw, 1.1rem);
    --step-1: clamp(1.2rem, 1.05rem + 0.6vw, 1.38rem);
    --step-2: clamp(1.44rem, 1.18rem + 0.95vw, 1.72rem);
    --step-3: clamp(1.73rem, 1.32rem + 1.45vw, 2.15rem);
    --step-4: clamp(2.07rem, 1.48rem + 2.2vw, 2.69rem);
    --step-5: clamp(2.49rem, 1.66rem + 3.3vw, 3.36rem);

    /* ---------- Spacing scale (refined) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* ---------- Radii & Shadows (subtle, GPU-friendly) */
    --radius-1: 6px;
    --radius-2: 10px;
    --radius-3: 14px;

    --shadow-1: 0 1px 3px hsl(0 0% 0% / 0.08), 0 1px 2px hsl(0 0% 0% / 0.06);
    --shadow-2: 0 6px 12px hsl(0 0% 0% / 0.1), 0 2px 4px hsl(0 0% 0% / 0.08);
    --shadow-3: 0 12px 24px hsl(0 0% 0% / 0.12), 0 6px 12px hsl(0 0% 0% / 0.1);

    /* ---------- Motion & Easing */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 120ms;
    --dur-med: 200ms;
    --dur-slow: 320ms;

    /* ---------- Romanian flag palette (HEX + HSL fallback) */
    --blue-hsl: 223 100% 25%; /* #002b7f approx */
    --yellow-hsl: 46 97% 54%; /* #fcd116 */
    --red-hsl: 351 78% 42%; /* #ce1126 */

    /* ---------- Neutral palette */
    --neutral-0-hsl: 0 0% 100%;
    --neutral-1-hsl: 210 20% 98%;
    --neutral-2-hsl: 210 17% 95%;
    --neutral-3-hsl: 210 16% 90%;
    --neutral-7-hsl: 210 10% 40%;
    --neutral-8-hsl: 210 11% 25%;
    --neutral-9-hsl: 210 12% 12%;

    /* ---------- Semantic (HSL fallback) */
    --primary-hsl: var(--blue-hsl);
    --accent-hsl: var(--red-hsl);
    --warn-hsl: 30 100% 44%;
    --ok-hsl: 145 50% 40%;
    --err-hsl: 3 78% 46%;
    --info-hsl: 210 80% 45%;

    /* Resolved color tokens using HSL fallback */
    --primary: hsl(var(--primary-hsl));
    --accent: hsl(var(--accent-hsl));
    --surface: hsl(var(--neutral-0-hsl));
    --surface-1: hsl(var(--neutral-1-hsl));
    --surface-2: hsl(var(--neutral-2-hsl));
    --surface-3: hsl(var(--neutral-3-hsl));
    --text-1: hsl(215 30% 16%); /* body text */
    --text-2: hsl(215 15% 38%); /* secondary */
    --text-3: hsl(215 10% 55%); /* muteds */

    --success: hsl(var(--ok-hsl));
    --warning: hsl(var(--warn-hsl));
    --error: hsl(var(--err-hsl));
    --info: hsl(var(--info-hsl));

    /* Gradients */
    --grad-brand: linear-gradient(
      90deg,
      hsl(var(--blue-hsl)),
      hsl(var(--yellow-hsl)),
      hsl(var(--red-hsl))
    );
    --grad-primary: linear-gradient(90deg, var(--primary), var(--accent));

    /* Focus ring */
    --focus-ring: 0 0 0 3px hsl(var(--blue-hsl) / 0.15);

    /* Accent color for form controls */
    accent-color: var(--primary);

    /* Enable dark-light awareness for built-in UA styling */
    color-scheme: light dark;
  }

  /* ---------- OKLCH upgrade (if supported) ---------- */
  @supports (color: oklch(0.5 0.1 0)) {
    :root {
      /* Approximations tuned for luxe contrast */
      --primary: oklch(0.47 0.12 258); /* deep royal blue */
      --accent: oklch(0.57 0.17 22); /* rich red */
      --surface: oklch(0.98 0.01 255);
      --surface-1: oklch(0.97 0.01 255);
      --surface-2: oklch(0.94 0.01 255);
      --surface-3: oklch(0.89 0.01 255);
      --text-1: oklch(0.25 0.03 255);
      --text-2: oklch(0.45 0.02 255);
      --text-3: oklch(0.6 0.02 255);
      --success: oklch(0.72 0.12 153);
      --warning: oklch(0.72 0.12 68);
      --error: oklch(0.62 0.2 26);
      --info: oklch(0.65 0.06 240);
      --grad-brand: linear-gradient(
        90deg,
        oklch(0.47 0.12 258),
        oklch(0.9 0.12 90),
        oklch(0.57 0.17 22)
      );
      --grad-primary: linear-gradient(90deg, var(--primary), var(--accent));
    }
  }
}

/* =======================================================
   BASE
   ======================================================= */
@layer base {
  html {
    font-size: 100%;
  }
  body {
    font-family: var(--font-sans);
    color: var(--text-1);
    background: var(--surface);
    overflow-x: hidden;
    font-size: var(--step-0);
  }

  /* Balanced headings for prettier wrapping (progressive) */
  :where(h1, h2, h3) {
    line-height: 1.2;
    text-wrap: balance;
  }
  :where(p, li, blockquote) {
    text-wrap: pretty;
  }

  /* Containers with container queries enabled */
  .container {
    inline-size: 100%;
    max-inline-size: 1400px;
    margin-inline: auto;
    padding-inline: 5%;
    container-type: inline-size; /* enables @container */
    container-name: layout;
  }

  /* Links & interactive */
  a {
    color: var(--primary);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  button,
  .btn,
  .cta-button {
    cursor: pointer;
  }

  /* Focus-visible styles (AA compliant) */
  :where(a, button, [role="button"], input, textarea, select):focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-1);
  }

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

/* =======================================================
   COMPONENTS (site structure kept, polished)
   ======================================================= */
@layer components {
  /* ---------- Header & Navigation ---------- */
  header {
    background: var(--surface);
    box-shadow: var(--shadow-1);
    position: fixed;
    inset-block-start: 0;
    inline-size: 100%;
    z-index: 1000;
    margin-block-start: 40px; /* For urgency banner */
    will-change: transform;
    transform: translateZ(0);
  }

  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-4);
    padding-inline: 5%;
    max-inline-size: 1400px;
    margin-inline: auto;
    gap: var(--space-4);
    position: relative; /* Added for mobile menu positioning */
  }

  .logo {
    font: 800 var(--step-2) / 1 var(--font-alt);
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    letter-spacing: 0.2px;
    z-index: 1001; /* Ensure logo stays above mobile menu */
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    list-style: none;
  }

  /* Mobile menu toggle button */
  .mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    z-index: 1001;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-1);
    position: absolute;
    left: 8px;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }

  .mobile-menu-toggle span:nth-child(1) {
    top: 14px;
  }

  .mobile-menu-toggle span:nth-child(2) {
    top: 22px;
  }

  .mobile-menu-toggle span:nth-child(3) {
    top: 30px;
  }

  .mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ---------- Hero (showcase) ---------- */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    padding-block: var(--space-9);
    padding-inline: 5%;
    overflow: hidden;
    background: linear-gradient(
      135deg,
      var(--primary) 0%,
      color-mix(in oklab, var(--primary), black 25%) 100%
    );
    color: white;
  }
  .hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    max-inline-size: 1200px;
    width: 100%;
    margin-inline: auto;
  }
  .hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 0;
  }
  .hero-title {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    margin-block-end: var(--space-4);
    font-weight: 900;
    line-height: 1.1;
  }
  .hero-subtitle {
    font-size: var(--step-1);
    margin-block-end: var(--space-6);
    color: var(--text-2);
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: white;
    padding: 0.85rem 1.2rem;
    border-radius: var(--radius-1);
    font-weight: 800;
    text-decoration: none;
    transition: transform var(--dur-med) var(--ease),
      background-color var(--dur-fast) var(--ease);
  }
  .hero-cta:hover {
    transform: translateY(-2px);
    background: color-mix(in oklab, var(--accent), black 8%);
  }
  .hero-image {
    order: 1;
    justify-self: center;
    max-width: 100%;
    height: auto;
    z-index: 0;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-block-start: var(--space-8);
    order: 1;
  }
  .stat-card {
    background: var(--surface-2);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-primary);
    border-radius: var(--radius-2);
    z-index: 1;
    transform: scale(1.1);
    transition: transform 0.4s var(--ease);
  }
  .stat-card:hover::before {
    transform: scale(1.15);
  }
  .stat-icon {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    margin-block-end: var(--space-3);
    position: relative;
    z-index: 2;
  }
  .stat-number {
    font-size: var(--step-2);
    font-weight: 800;
    margin-block-end: var(--space-1);
    position: relative;
    z-index: 2;
  }
  .stat-label {
    color: var(--text-2);
    font-size: var(--step--1);
    position: relative;
    z-index: 2;
  }

  /* ---------- Features (detailed showcase) ---------- */
  .features {
    padding: var(--space-9) 5%;
    background: var(--surface);
  }
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    max-inline-size: 1400px;
    margin-inline: auto;
    container-type: inline-size;
    container-name: features;
  }
  .feature-card {
    background: var(--surface);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    transition: transform var(--dur-med) var(--ease),
      box-shadow var(--dur-med) var(--ease),
      border-color var(--dur-fast) var(--ease);
    position: relative;
    overflow: hidden;
    will-change: transform;
  }
  .feature-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 4px;
    background: var(--grad-brand);
  }
  .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-3);
    border-color: color-mix(in oklab, var(--primary), white 70%);
  }
  .feature-icon {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    margin-block-end: var(--space-3);
  }
  .feature-title {
    font-size: var(--step-1);
    margin-block-end: var(--space-3);
    color: var(--text-1);
    font-weight: 800;
  }
  .feature-description {
    color: var(--text-2);
    margin-block-end: var(--space-4);
  }
  .feature-cta {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: white;
    padding: 0.85rem 1.2rem;
    border-radius: var(--radius-1);
    font-weight: 800;
    text-decoration: none;
    transition: transform var(--dur-med) var(--ease),
      background-color var(--dur-fast) var(--ease);
  }
  .feature-cta:hover {
    transform: translateY(-2px);
    background: color-mix(in oklab, var(--accent), black 8%);
  }

  /* ---------- Header & Navigation ---------- */
  header {
    background: var(--surface);
    box-shadow: var(--shadow-1);
    position: fixed;
    inset-block-start: 0;
    inline-size: 100%;
    z-index: 1000;
    margin-block-start: 40px; /* For urgency banner */
    will-change: transform;
    transform: translateZ(0);
  }

  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-4);
    padding-inline: 5%;
    max-inline-size: 1400px;
    margin-inline: auto;
    gap: var(--space-4);
    position: relative; /* Added for mobile menu positioning */
  }

  .logo {
    font: 800 var(--step-2) / 1 var(--font-alt);
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    letter-spacing: 0.2px;
    z-index: 1001; /* Ensure logo stays above mobile menu */
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    list-style: none;
  }

  /* Mobile menu toggle button */
  .mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    z-index: 1001;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-1);
    position: absolute;
    left: 8px;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }

  .mobile-menu-toggle span:nth-child(1) {
    top: 14px;
  }

  .mobile-menu-toggle span:nth-child(2) {
    top: 22px;
  }

  .mobile-menu-toggle span:nth-child(3) {
    top: 30px;
  }

  .mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ---------- Services ---------- */
  .services {
    padding: var(--space-9) 5%;
    background: var(--surface);
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
    max-inline-size: 1400px;
    margin-inline: auto;
    container-type: inline-size;
    container-name: services;
  }
  .service-card {
    background: var(--surface);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    transition: transform var(--dur-med) var(--ease),
      box-shadow var(--dur-med) var(--ease),
      border-color var(--dur-fast) var(--ease);
    position: relative;
    overflow: visible; /* Changed from clip to visible to ensure prices aren't trimmed */
    will-change: transform;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .service-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 4px;
    background: var(--grad-brand);
  }
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-3);
    border-color: color-mix(in oklab, var(--primary), white 70%);
  }
  .service-icon {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    margin-block-end: var(--space-3);
  }
  .service-title {
    font-size: var(--step-1);
    margin-block-end: var(--space-3);
    color: var(--text-1);
    font-weight: 800;
  }
  .service-features {
    list-style: none;
    margin-block-end: var(--space-4);
    flex: 1; /* Allows this to take available space, pushing price to bottom */
  }
  .service-features li {
    padding-block: 0.45rem;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .service-features li::before {
    content: "✓";
    color: var(--success);
    font-weight: 800;
    flex-shrink: 0;
  }
  .service-price {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem);
    font-weight: 900;
    color: var(--accent);
    margin-block-end: var(--space-3);
    padding-block: 0.5rem;
    width: 100%;
    text-align: left;
  }
  .service-price .from {
    font-size: var(--step--1);
    color: var(--text-3);
    font-weight: 400;
  }
  .service-card .cta-button {
    align-self: flex-start;
    margin-block-start: auto; /* Push button to bottom if needed */
  }

  /* ---------- Testimonials ---------- */
  .testimonials {
    padding: var(--space-9) 5%;
    background: var(--surface);
  }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 320px), 1fr)
    ); /* Improved responsive behavior */
    gap: var(--space-5);
    max-inline-size: 1200px;
    margin-inline: auto;
  }
  .testimonial {
    background: var(--surface-2);
    padding: var(--space-6);
    border-radius: var(--radius-2);
    position: relative;
    height: 100%; /* Ensure consistent height */
    display: flex;
    flex-direction: column;
  }

  /* Container adjustments */
  @container hero (max-width: 900px) {
    .hero-content {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Services ---------- */
  .services {
    padding: var(--space-9) 5%;
    background: var(--surface);
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
    max-inline-size: 1400px;
    margin-inline: auto;
    container-type: inline-size;
    container-name: services;
  }
  .service-card {
    background: var(--surface);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    transition: transform var(--dur-med) var(--ease),
      box-shadow var(--dur-med) var(--ease),
      border-color var(--dur-fast) var(--ease);
    position: relative;
    overflow: visible; /* Changed from clip to visible to ensure prices aren't trimmed */
    will-change: transform;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .service-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 4px;
    background: var(--grad-brand);
  }
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-3);
    border-color: color-mix(in oklab, var(--primary), white 70%);
  }
  .service-icon {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    margin-block-end: var(--space-3);
  }
  .service-title {
    font-size: var(--step-1);
    margin-block-end: var(--space-3);
    color: var(--text-1);
    font-weight: 800;
  }
  .service-features {
    list-style: none;
    margin-block-end: var(--space-4);
    flex: 1; /* Allows this to take available space, pushing price to bottom */
  }
  .service-features li {
    padding-block: 0.45rem;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .service-features li::before {
    content: "✓";
    color: var(--success);
    font-weight: 800;
    flex-shrink: 0;
  }
  .service-price {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem);
    font-weight: 900;
    color: var(--accent);
    margin-block-end: var(--space-3);
    padding-block: 0.5rem;
    width: 100%;
    text-align: left;
  }
  .service-price .from {
    font-size: var(--step--1);
    color: var(--text-3);
    font-weight: 400;
  }
  .service-card .cta-button {
    align-self: flex-start;
    margin-block-start: auto; /* Push button to bottom if needed */
  }

  /* ---------- Testimonials ---------- */
  .testimonials {
    padding: var(--space-9) 5%;
    background: var(--surface);
  }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 320px), 1fr)
    ); /* Improved responsive behavior */
    gap: var(--space-5);
    max-inline-size: 1200px;
    margin-inline: auto;
  }
  .testimonial {
    background: var(--surface-2);
    padding: var(--space-6);
    border-radius: var(--radius-2);
    position: relative;
    height: 100%; /* Ensure consistent height */
    display: flex;
    flex-direction: column;
  }

  /* ---------- Contact (Home section) ---------- */
  .contact {
    padding: var(--space-9) 5%;
    background: linear-gradient(
      135deg,
      var(--primary) 0%,
      color-mix(in oklab, var(--primary), black 25%) 100%
    );
    color: white;
    text-align: center;
  }
  .contact h2 {
    font-size: var(--step-3);
    margin-block-end: var(--space-3);
    font-weight: 900;
  }
  .contact p {
    max-inline-size: 70ch;
    margin-inline: auto;
  }
  .contact-options {
    display: flex;
    gap: var(--space-5);
    justify-content: center;
    flex-wrap: wrap;
    margin-block-start: var(--space-5);
  }
  .contact-option {
    background: color-mix(in oklab, white 12%, transparent);
    padding: var(--space-6);
    border-radius: var(--radius-2);
    min-inline-size: 280px;
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in oklab, white 24%, transparent);
    transition: transform var(--dur-med) var(--ease),
      background-color var(--dur-fast) var(--ease);
    will-change: transform;
  }
  .contact-option:hover {
    transform: translateY(-4px);
    background: color-mix(in oklab, white 20%, transparent);
  }
  .contact-option h3 {
    margin-block-end: var(--space-3);
    font-size: var(--step-0);
  }
  .contact-option a {
    color: white;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent);
    padding: 0.85rem 1.2rem;
    border-radius: var(--radius-1);
    margin-block-start: 0.8rem;
    transition: transform var(--dur-med) var(--ease),
      background-color var(--dur-fast) var(--ease);
  }
  .contact-option a:hover {
    transform: translateY(-2px);
    background: color-mix(in oklab, var(--accent), black 8%);
  }

  /* ---------- Contact Page ---------- */
  .contact-section {
    padding-block: var(--space-8);
    background: var(--surface);
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-6);
    container-type: inline-size;
    container-name: contact;
  }
  .contact-info,
  .contact-form-container {
    background: var(--surface);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    box-shadow: var(--shadow-1);
  }
  .contact-info h3,
  .contact-form-container h3 {
    font-size: var(--step-0);
    font-weight: 800;
    color: var(--text-1);
    margin-block-end: var(--space-4);
    position: relative;
  }
  .contact-info h3::after,
  .contact-form-container h3::after {
    content: "";
    position: absolute;
    inset-block-end: -0.5rem;
    inset-inline-start: 0;
    inline-size: 50px;
    block-size: 3px;
    background: var(--grad-primary);
    border-radius: 2px;
  }
  .contact-info .contact-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-start: 0;
  }
  .contact-info .contact-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: none;
    padding: 0;
    min-inline-size: auto;
    border: none;
    backdrop-filter: none;
  }
  .contact-option-icon {
    background: var(--surface-2);
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: var(--primary);
    flex-shrink: 0;
  }
  .contact-option-text h4 {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--text-1);
    margin-block-end: 0.25rem;
  }
  .contact-option-text p,
  .contact-option-text a {
    color: var(--text-2);
    font-size: var(--step--1);
    text-decoration: none;
  }
  .contact-option-text a:hover {
    color: var(--primary);
    text-decoration: underline;
  }
  .contact-info .contact-option a {
    background: none;
    padding: 0;
    color: var(--primary);
    margin: 0;
  }
  .contact-info .contact-option a:hover {
    text-decoration: underline;
  }

  .urgency {
    margin-block-start: var(--space-5);
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--radius-1);
    border-inline-start: 4px solid var(--primary);
  }
  .urgency p {
    font-size: var(--step--1);
    margin-block-end: 0.5rem;
  }
  .urgency .countdown {
    font-weight: 700;
    color: var(--primary);
  }

  /* Form */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
  }
  .form-group {
    margin-block-end: var(--space-4);
  }
  .form-group.full-width {
    grid-column: 1 / -1;
  }
  .form-label {
    display: block;
    margin-block-end: 0.5rem;
    font-weight: 600;
    color: var(--text-1);
    font-size: var(--step--1);
  }
  .form-input,
  .form-textarea {
    inline-size: 100%;
    padding: 0.85rem 1rem; /* Increased padding for better touch target */
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-1);
    font-size: var(--step-0);
    color: var(--text-2);
    background: var(--surface);
    transition: border-color var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease);
    -webkit-appearance: none; /* Fix iOS styling */
    appearance: none;
  }
  .form-input:focus,
  .form-textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    outline: none;
  }
  .form-textarea {
    resize: vertical;
    min-block-size: 120px;
  }
  .error-text {
    color: var(--error);
    font-size: 0.85rem;
    margin-block-start: 0.25rem;
    display: none;
  }
  .has-error .form-input,
  .has-error .form-textarea {
    border-color: var(--error);
  }
  .has-error .error-text {
    display: block;
  }

  /* Submit button and form response */
  .form-submit {
    background: var(--grad-primary);
    color: white;
    border: none;
    border-radius: var(--radius-1);
    padding: 1rem 2rem; /* Larger padding for better touch target */
    font-size: var(--step-0);
    font-weight: 800;
    transition: transform var(--dur-med) var(--ease),
      box-shadow var(--dur-med) var(--ease);
    min-height: 3.2rem; /* Ensure consistent height */
    touch-action: manipulation; /* Improve touch behavior */
  }
  .form-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
  .form-submit:active {
    transform: translateY(0);
  }
  .submit-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-block-start: var(--space-3);
    flex-wrap: wrap; /* Allow wrapping on small screens */
  }
  .submit-note {
    font-size: 0.85rem;
    color: var(--text-3);
    flex: 1;
    min-width: 170px; /* Ensure text has enough room */
  }

  /* ========== Mobile-specific contact improvements ========== */
  @media (max-width: 768px) {
    .contact-grid {
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }

    .contact-info {
      order: 2; /* Move contact info below form on mobile */
    }

    .contact-form-container {
      order: 1;
    }

    .form-grid {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .submit-group {
      flex-direction: column;
      align-items: flex-start;
    }

    .submit-note {
      margin-bottom: var(--space-3);
      width: 100%;
    }

    .form-submit {
      width: 100%; /* Full width button on mobile */
      justify-content: center;
    }

    .urgency {
      margin-block: var(--space-4);
      padding: var(--space-3);
    }

    .page-title {
      padding: var(--space-6) 5%;
    }
  }

  /* Extra small screens */
  @media (max-width: 480px) {
    .contact-info,
    .contact-form-container {
      padding: var(--space-4);
      border-radius: var(--radius-1);
    }

    .form-input,
    .form-textarea {
      padding: 0.75rem;
      font-size: 16px; /* Prevent iOS zoom on focus */
    }

    .form-label {
      margin-bottom: 0.3rem;
    }

    /* Improve form response visibility */
    .form-response {
      padding: 0.75rem;
      margin-block-start: 1rem;
      font-size: var(--step--1);
    }

    /* Ensure Cloudflare Turnstile fits */
    .cf-turnstile {
      transform: scale(0.9);
      transform-origin: left top;
      margin-block: var(--space-3);
    }
  }

  /* Container-first responsive */
  @container contact (max-width: 900px) {
    .contact-grid {
      grid-template-columns: 1fr;
    }
    .form-grid {
      grid-template-columns: 1fr;
    }
    .contact-info {
      order: 2;
    }
    .contact-form-container {
      order: 1;
    }
  }

  @container contact (max-width: 480px) {
    .form-grid {
      gap: var(--space-3);
    }
    .form-group {
      margin-block-end: var(--space-3);
    }
  }

  /* Hero responsive adjustments */
  @container hero (max-width: 900px) {
    .hero-content {
      grid-template-columns: 1fr;
    }
    .hero-text {
      order: 1;
    }
    .hero-stats {
      order: 2;
      margin-top: var(--space-5);
    }
  }
}

/* =======================================================
   UTILITIES (helpers, low specificity)
   ======================================================= */
@layer utilities {
  .max-w-70ch {
    max-inline-size: 70ch;
  }
  .text-center {
    text-align: center;
  }
  .sr-only {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* =======================================================
   THEMES (Dark mode via [data-theme="dark"])
   ======================================================= */
@layer themes {
  [data-theme="dark"] {
    color-scheme: dark;

    --surface: oklch(0.13 0.02 260 / 1);
    --surface-1: oklch(0.16 0.02 260 / 1);
    --surface-2: oklch(0.2 0.02 260 / 1);
    --surface-3: oklch(0.26 0.02 260 / 1);

    /* Text colors lifted for contrast */
    --text-1: oklch(0.92 0.02 260);
    --text-2: oklch(0.8 0.02 260);
    --text-3: oklch(0.7 0.02 260);

    /* Accents slightly brighter in dark */
    --primary: oklch(0.62 0.12 258);
    --accent: oklch(0.66 0.17 22);

    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--primary), white 70% / 30%);
  }

  /* Fallback dark if OKLCH unsupported */
  @supports not (color: oklch(0.5 0 0)) {
    [data-theme="dark"] {
      --surface: hsl(210 10% 10%);
      --surface-1: hsl(210 12% 12%);
      --surface-2: hsl(210 14% 16%);
      --surface-3: hsl(210 12% 22%);
      --text-1: hsl(0 0% 98%);
      --text-2: hsl(0 0% 78%);
      --text-3: hsl(0 0% 64%);
      --primary: hsl(223 100% 60%);
      --accent: hsl(351 80% 58%);
    }
  }
}

/* =======================================================
   RESPONSIVE (global MQ kept minimal; rely on @container)
   ======================================================= */
@layer components {
  /* Mobile menu styles for small screens */
  @media (max-width: 768px) {
    .mobile-menu-toggle {
      display: block;
    }

    .nav-links {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--surface);
      z-index: 1000;
      flex-direction: column;
      justify-content: center;
      padding: var(--space-8);
      gap: var(--space-6);
      transform: translateX(100%);
      transition: transform 0.3s var(--ease);
      box-shadow: none;
      margin-top: 0;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      overflow-y: auto;
    }

    .nav-links.active {
      transform: translateX(0);
      opacity: 1;
      pointer-events: all;
      visibility: visible;
    }

    .nav-links a {
      font-size: var(--step-1);
      padding: var(--space-3);
    }

    .nav-links .cta-button {
      margin-top: var(--space-4);
    }
  }

  /* Service cards layout fix for very small screens */
  @media (max-width: 380px) {
    .services-grid {
      grid-template-columns: 1fr;
    }

    .service-card {
      min-width: 0; /* Ensure it can shrink below min-content if needed */
    }

    .service-price {
      word-break: break-word; /* Prevent overflow on very small screens */
    }

    .cta-button,
    .btn {
      width: 100%;
      justify-content: center;
    }
  }

  /* Global fallbacks when container queries unavailable */
  @supports not (container-type: inline-size) {
    @media (max-width: 1024px) {
      .contact-grid {
        gap: var(--space-5);
      }
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }
    }

    @media (max-width: 768px) {
      .contact-grid {
        grid-template-columns: 1fr;
      }
      .form-grid {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .section-header h2 {
        font-size: var(--step-2);
      }
      .page-title h1 {
        font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
      }
    }

    @media (max-width: 576px) {
      .contact-option {
        min-inline-size: 100%;
      }
      .submit-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
      }
      .submit-note {
        margin-inline-end: 0;
      }
      .service-card {
        padding: var(--space-4);
      }
    }
  }

  /* Container-first responsive */
  @container contact (max-width: 900px) {
    .contact-grid {
      grid-template-columns: 1fr;
    }
    .form-grid {
      grid-template-columns: 1fr;
    }
    .contact-info {
      order: 2;
    }
    .contact-form-container {
      order: 1;
    }
  }

  @container contact (max-width: 480px) {
    .form-grid {
      gap: var(--space-3);
    }
    .form-group {
      margin-block-end: var(--space-3);
    }
  }

  /* Hero responsive adjustments */
  @container hero (max-width: 900px) {
    .hero-content {
      grid-template-columns: 1fr;
    }
    .hero-text {
      order: 1;
    }
    .hero-stats {
      order: 2;
      margin-top: var(--space-5);
    }
  }
}

/* =======================================================
   UTILITY FIXES FOR RESPONSIVE DESIGN
   ======================================================= */
@layer utilities {
  /* Ensure all images and media are responsive */
  img,
  video,
  svg {
    max-width: 100%;
    height: auto;
  }

  /* Ensure buttons never overflow containers */
  .btn,
  .cta-button {
    max-width: 100%;
    white-space: normal; /* Allow text to wrap */
  }

  /* Fix for iOS 100vh issue */
  .hero,
  .page-title {
    min-height: calc(100vh - 120px);
    min-height: calc((var(--vh, 1vh) * 100) - 120px);
    display: flex;
    align-items: center;
  }

  /* Better form handling on iOS */
  input,
  textarea,
  select,
  button {
    max-width: 100%;
  }

  /* Fix iOS form zoom issues */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"] {
      font-size: 16px; /* Prevents iOS zoom on input */
    }
  }
}