/* Fonts first – @import must be at the very top */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

/* webklar Design System - Light/Dark Theme Support */

@layer base {
  :root {
    /* Light Theme */
    --background: 0 0% 100%;
    --foreground: 0 0% 9%;

    --card: 0 0% 98%;
    --card-foreground: 0 0% 9%;

    --popover: 0 0% 98%;
    --popover-foreground: 0 0% 9%;

    /* Primary - Cyan-Blau */
    --primary: 198 93% 42%;
    --primary-foreground: 0 0% 98%;

    /* Secondary - Helles Grau */
    --secondary: 0 0% 94%;
    --secondary-foreground: 0 0% 9%;

    /* Muted */
    --muted: 0 0% 94%;
    --muted-foreground: 0 0% 40%;

    /* Accent */
    --accent: 0 0% 94%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 62% 50%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 88%;
    --input: 0 0% 88%;
    --ring: 198 93% 42%;

    --radius: 0.5rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);

    --sidebar-background: 0 0% 97%;
    --sidebar-foreground: 0 0% 9%;
    --sidebar-primary: 198 93% 42%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 0 0% 94%;
    --sidebar-accent-foreground: 0 0% 9%;
    --sidebar-border: 0 0% 88%;
    --sidebar-ring: 198 93% 42%;
    --chart-1: 198 93% 42%;
    --chart-2: 213 93% 50%;
    --chart-3: 0 0% 45%;
    --chart-4: 0 0% 35%;
    --chart-5: 0 0% 25%;
    --sidebar: 0 0% 97%;
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --spacing: 0.25rem;
    --font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --tracking-normal: 0em;
  }

  .dark {
    /* Dark Theme – original :root dark color scheme */
    --background: 0 0% 0%;
    --foreground: 0 0% 92%;

    --card: 0 0% 6%;
    --card-foreground: 0 0% 92%;

    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 92%;

    /* Primary - Subtle cyan accent */
    --primary: 180 40% 50%;
    --primary-foreground: 0 0% 3%;

    /* Secondary - Dark Gray */
    --secondary: 0 0% 12%;
    --secondary-foreground: 0 0% 92%;

    /* Muted - Medium Gray */
    --muted: 0 0% 45%;
    --muted-foreground: 0 0% 65%;

    /* Accent */
    --accent: 0 0% 10%;
    --accent-foreground: 0 0% 92%;

    --destructive: 0 62% 50%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 180 40% 50%;

    --radius: 0.5rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);

    --sidebar-background: 0 0% 3%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 200 98% 39%;
    --sidebar-primary-foreground: 204 100% 97%;
    --sidebar-accent: 215 24% 26%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 212 26% 83%;
    --sidebar-ring: 200 98% 39%;
    --chart-1: 198 93% 59%;
    --chart-2: 213 93% 67%;
    --chart-3: 215 20% 65%;
    --chart-4: 215 16% 46%;
    --chart-5: 215 19% 34%;
    --sidebar: 210 40% 98%;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.01em;
    position: relative; /* für Motion useScroll – Scroll-Container braucht nicht-static position */
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.04em;
    font-weight: 500;
  }

  h1 {
    font-weight: 500;
    letter-spacing: -0.05em;
  }
}

@layer components {
  /* Gemeinsamer Hintergrund für Problem- und Lösungs-Sektion */
  .section-problem-solution {
    background-color: hsl(var(--background));
  }

  /* Problem-Section Hintergrundbild: auf Handy maximale Breite, sonst 45% */
  .problem-section-bg {
    background-size: 45%;
  }
  @media (max-width: 768px) {
    .problem-section-bg {
      background-size: 100%;
    }
  }

  /* Lösung-Section Hintergrundbild: auf Handy maximale Breite, sonst 45% */
  .solution-section-bg {
    background-size: 45%;
  }
  @media (max-width: 768px) {
    .solution-section-bg {
      background-size: 100%;
    }
  }

  /* Was Sie bekommen (Values) Hintergrundbild: auf Handy maximale Breite, sonst 45% */
  .values-section-bg {
    background-size: 45%;
  }
  @media (max-width: 768px) {
    .values-section-bg {
      background-size: 100%;
    }
  }

  /* Leichter roter Tint auf Inhaltsblöcken der Problem-Sektion */
  .problem-section-tint {
    position: relative;
  }
  .problem-section-tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(239 68 68 / 0.06);
    pointer-events: none;
    border-radius: inherit;
  }

  /* Leichter blauer Tint auf dem Ergebnis-Block der Lösungs-Sektion */
  .solution-section-tint {
    position: relative;
  }
  .solution-section-tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(34 211 238 / 0.06);
    pointer-events: none;
    border-radius: inherit;
  }

  /* Minimal glass nav – theme-aware */
  .glass-nav {
    @apply backdrop-blur-xl border-b;
    background: hsl(var(--background) / 0.9);
    border-color: hsl(var(--border) / 0.5);
  }

  /* Card minimal */
  .card-minimal {
    @apply transition-all duration-500;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
  }
  .card-minimal:hover {
    border-color: hsl(var(--muted-foreground));
  }

  /* Text gradient - theme-aware */
  .text-gradient {
    background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Animated underline for links */
  .link-underline {
    @apply relative;
  }
  .link-underline::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-px scale-x-0 origin-right transition-transform duration-300;
    background: hsl(var(--foreground));
  }
  .link-underline:hover::after {
    @apply scale-x-100 origin-left;
  }

  /* Fade up on scroll */
  .fade-up {
    @apply opacity-0 translate-y-8 transition-all duration-700 ease-out;
  }
  .fade-up.visible {
    @apply opacity-100 translate-y-0;
  }

  /* Partner logo marquee */
  .marquee {
    @apply flex gap-16;
    animation: marquee 30s linear infinite;
  }

  /* Minimal project card – theme-aware */
  .project-card {
    @apply transition-all duration-500 overflow-hidden;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
  }
  .project-card:hover {
    border-color: hsl(var(--muted-foreground));
    transform: translateY(-4px);
  }

  /* Minimal button – theme-aware */
  .btn-minimal {
    @apply relative transition-all duration-300;
    background: hsl(var(--foreground));
    color: hsl(var(--background));
  }
  .btn-minimal:hover {
    background: hsl(var(--muted-foreground));
  }

  /* Outline button – theme-aware */
  .btn-outline {
    @apply relative transition-all duration-300 border;
    background: transparent;
    color: hsl(var(--foreground));
    border-color: hsl(var(--muted-foreground));
  }
  .btn-outline:hover {
    border-color: hsl(var(--foreground));
    background: hsl(var(--accent));
  }

  /* Custom CTA button (System-Demo) */
  .btn-wrapper {
    position: relative;
    display: inline-block;
    width: fit-content;
    flex-shrink: 0;
  }

  .btn {
    --border-radius: 24px;
    --padding: 4px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --button-color: #101010;
    --highlight-color-hue: 210deg;

    outline: none;
    user-select: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5em 1.1em;
    font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
    font-size: 1em;
    font-weight: 400;
    background-color: var(--button-color);
    overflow: hidden;
    box-shadow:
      inset 0px 1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 2px 2px rgba(255, 255, 255, 0.15),
      inset 0px 4px 4px rgba(255, 255, 255, 0.1),
      inset 0px 8px 8px rgba(255, 255, 255, 0.05),
      inset 0px 16px 16px rgba(255, 255, 255, 0.05),
      0px -1px 1px rgba(0, 0, 0, 0.02),
      0px -2px 2px rgba(0, 0, 0, 0.03),
      0px -4px 4px rgba(0, 0, 0, 0.05),
      0px -8px 8px rgba(0, 0, 0, 0.06),
      0px -16px 16px rgba(0, 0, 0, 0.08);
    border: solid 1px rgba(255, 255, 255, 0.13);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: box-shadow var(--transition), border var(--transition), background-color var(--transition);
    position: relative;
  }

  .btn::before {
    content: "";
    position: absolute;
    top: calc(0px - var(--padding));
    left: calc(0px - var(--padding));
    width: calc(100% + var(--padding) * 2);
    height: calc(100% + var(--padding) * 2);
    border-radius: calc(var(--border-radius) + var(--padding));
    pointer-events: none;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.4));
    z-index: -1;
    transition: box-shadow var(--transition), filter var(--transition);
    box-shadow:
      0 -8px 8px -6px transparent inset,
      0 -16px 16px -8px transparent inset,
      1px 1px 1px rgba(255, 255, 255, 0.13),
      2px 2px 2px rgba(255, 255, 255, 0.07),
      -1px -1px 1px rgba(0, 0, 0, 0.13),
      -2px -2px 2px rgba(0, 0, 0, 0.07);
  }

  .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(
      0deg,
      #fff,
      hsl(var(--highlight-color-hue), 100%, 70%),
      hsla(var(--highlight-color-hue), 100%, 70%, 0.5),
      8%,
      transparent
    );
    background-position: 0 0;
    opacity: 0;
    transition: opacity var(--transition), filter var(--transition);
  }

  .btn-letter {
    position: relative;
    display: inline-block;
    color: rgba(255, 255, 255, 0.33);
    animation: letter-anim 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transition: color var(--transition), text-shadow var(--transition), opacity var(--transition), transform var(--transition);
  }

  @keyframes letter-anim {
    50% {
      text-shadow: 0 0 3px rgba(255, 255, 255, 0.53);
      color: #fff;
    }
  }

  .btn-svg {
    flex-shrink: 0;
    height: 24px;
    width: 24px;
    fill: #e8e8e8;
    animation: flicker 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.5s;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
    transition: fill var(--transition), filter var(--transition), opacity var(--transition);
  }

  @keyframes flicker {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }

  .txt-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
    min-width: 0;
    padding-right: 6px;
  }

  .txt-width-helper {
    visibility: hidden;
    white-space: nowrap;
    font: inherit;
    word-spacing: -1em;
    pointer-events: none;
  }

  .txt-width-helper .btn-letter {
    animation: none;
  }

  .btn-letter-space {
    min-width: 0.25em;
  }

  .txt-1,
  .txt-2 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    word-spacing: -1em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
  }

  .txt-1 {
    animation: appear-anim 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .txt-2 {
    opacity: 0;
  }

  @keyframes appear-anim {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .btn:focus .txt-1 {
    animation: opacity-anim 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.8s;
  }

  .btn:focus .txt-2 {
    animation: opacity-anim 0.4s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
    animation-delay: 0.8s;
  }

  @keyframes opacity-anim {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .btn:focus .btn-letter {
    animation: focused-letter-anim 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards, letter-anim 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 0s, 1s;
  }

  @keyframes focused-letter-anim {
    0%,
    100% {
      transform: scale(1);
      filter: blur(0px);
    }
    50% {
      transform: scale(1.08);
      filter: blur(2px) brightness(150%)
        drop-shadow(0 0 8px hsl(var(--highlight-color-hue), 100%, 70%));
    }
  }

  .btn:focus .btn-svg {
    animation-duration: 1.2s;
    animation-delay: 0.2s;
  }

  .btn:focus::before {
    box-shadow:
      0 -8px 12px -6px rgba(255, 255, 255, 0.2) inset,
      0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.2) inset,
      1px 1px 1px rgba(255, 255, 255, 0.2),
      2px 2px 2px rgba(255, 255, 255, 0.07),
      -1px -1px 1px rgba(0, 0, 0, 0.13),
      -2px -2px 2px rgba(0, 0, 0, 0.07);
  }

  .btn:focus::after {
    opacity: 0.6;
    mask-image: linear-gradient(0deg, #fff, transparent);
    filter: brightness(100%);
  }

  .btn-letter:nth-child(1),
  .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; }
  .btn-letter:nth-child(2),
  .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; }
  .btn-letter:nth-child(3),
  .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; }
  .btn-letter:nth-child(4),
  .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; }
  .btn-letter:nth-child(5),
  .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; }
  .btn-letter:nth-child(6),
  .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; }
  .btn-letter:nth-child(7),
  .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; }
  .btn-letter:nth-child(8),
  .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; }
  .btn-letter:nth-child(9),
  .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; }
  .btn-letter:nth-child(10),
  .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; }
  .btn-letter:nth-child(11),
  .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; }
  .btn-letter:nth-child(12),
  .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; }
  .btn-letter:nth-child(13),
  .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; }
  .btn-letter:nth-child(14),
  .btn:focus .btn-letter:nth-child(14) { animation-delay: 1.04s; }
  .btn-letter:nth-child(15),
  .btn:focus .btn-letter:nth-child(15) { animation-delay: 1.12s; }
  .btn-letter:nth-child(16),
  .btn:focus .btn-letter:nth-child(16) { animation-delay: 1.2s; }
  .btn-letter:nth-child(17),
  .btn:focus .btn-letter:nth-child(17) { animation-delay: 1.28s; }
  .btn-letter:nth-child(18),
  .btn:focus .btn-letter:nth-child(18) { animation-delay: 1.36s; }
  .btn-letter:nth-child(19),
  .btn:focus .btn-letter:nth-child(19) { animation-delay: 1.44s; }
  .btn-letter:nth-child(20),
  .btn:focus .btn-letter:nth-child(20) { animation-delay: 1.52s; }
  .btn-letter:nth-child(21),
  .btn:focus .btn-letter:nth-child(21) { animation-delay: 1.6s; }
  .btn-letter:nth-child(22),
  .btn:focus .btn-letter:nth-child(22) { animation-delay: 1.68s; }
  .btn-letter:nth-child(23),
  .btn:focus .btn-letter:nth-child(23) { animation-delay: 1.76s; }
  .btn-letter:nth-child(24),
  .btn:focus .btn-letter:nth-child(24) { animation-delay: 1.84s; }
  .btn-letter:nth-child(25),
  .btn:focus .btn-letter:nth-child(25) { animation-delay: 1.92s; }
  .btn-letter:nth-child(26),
  .btn:focus .btn-letter:nth-child(26) { animation-delay: 2s; }
  .btn-letter:nth-child(27),
  .btn:focus .btn-letter:nth-child(27) { animation-delay: 2.08s; }
  .btn-letter:nth-child(28),
  .btn:focus .btn-letter:nth-child(28) { animation-delay: 2.16s; }
  .btn-letter:nth-child(29),
  .btn:focus .btn-letter:nth-child(29) { animation-delay: 2.24s; }
  .btn-letter:nth-child(30),
  .btn:focus .btn-letter:nth-child(30) { animation-delay: 2.32s; }
  .btn-letter:nth-child(31),
  .btn:focus .btn-letter:nth-child(31) { animation-delay: 2.4s; }
  .btn-letter:nth-child(32),
  .btn:focus .btn-letter:nth-child(32) { animation-delay: 2.48s; }
  .btn-letter:nth-child(33),
  .btn:focus .btn-letter:nth-child(33) { animation-delay: 2.56s; }
  .btn-letter:nth-child(34),
  .btn:focus .btn-letter:nth-child(34) { animation-delay: 2.64s; }
  .btn-letter:nth-child(35),
  .btn:focus .btn-letter:nth-child(35) { animation-delay: 2.72s; }

  .btn:active {
    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.7);
    background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
  }

  .btn:active::before {
    box-shadow:
      0 -8px 12px -6px rgba(255, 255, 255, 0.67) inset,
      0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.8) inset,
      1px 1px 1px rgba(255, 255, 255, 0.27),
      2px 2px 2px rgba(255, 255, 255, 0.13),
      -1px -1px 1px rgba(0, 0, 0, 0.13),
      -2px -2px 2px rgba(0, 0, 0, 0.07);
  }

  .btn:active::after {
    opacity: 1;
    mask-image: linear-gradient(0deg, #fff, transparent);
    filter: brightness(200%);
  }

  .btn:active .btn-letter {
    text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 0.9);
    animation: none;
  }

  .btn:hover {
    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.4);
  }

  .btn:hover::before {
    box-shadow:
      0 -8px 8px -6px rgba(255, 255, 255, 0.67) inset,
      0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.3) inset,
      1px 1px 1px rgba(255, 255, 255, 0.13),
      2px 2px 2px rgba(255, 255, 255, 0.07),
      -1px -1px 1px rgba(0, 0, 0, 0.13),
      -2px -2px 2px rgba(0, 0, 0, 0.07);
  }

  .btn:hover::after {
    opacity: 1;
    mask-image: linear-gradient(0deg, #fff, transparent);
  }

  .btn:hover .btn-svg {
    fill: #fff;
    filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
      drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.6));
    animation: none;
  }

  @media (max-width: 639px) {
    .btn {
      font-size: 0.9rem;
      padding: 0.5em 0.9em;
      gap: 0.4rem;
    }
    .btn-svg,
    .btn-icon {
      width: 20px;
      height: 20px;
    }
  }

  /* Shared primary button look – for all blue/primary buttons */
  .btn-primary-style {
    padding: 0.5em 1.1em;
    border-radius: 24px;
    box-shadow:
      inset 0px 1px 1px rgba(255, 255, 255, 0.25),
      inset 0px 2px 2px rgba(255, 255, 255, 0.2),
      0px 2px 4px rgba(0, 0, 0, 0.2),
      0px 4px 8px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      border 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-primary-style:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
      inset 0px 1px 1px rgba(255, 255, 255, 0.3),
      inset 0px 2px 2px rgba(255, 255, 255, 0.25),
      0px 2px 4px rgba(0, 0, 0, 0.2),
      0px 4px 8px rgba(0, 0, 0, 0.15);
  }

  /* Primary (blue) variant – same structure, blue color */
  .btn-primary {
    --button-color: hsl(198, 93%, 42%);
    --highlight-color-hue: 198deg;
    box-shadow:
      inset 0px 1px 1px rgba(255, 255, 255, 0.25),
      inset 0px 2px 2px rgba(255, 255, 255, 0.2),
      0px 2px 4px rgba(0, 0, 0, 0.2),
      0px 4px 8px rgba(0, 0, 0, 0.15);
    border: solid 1px rgba(255, 255, 255, 0.2);
  }

  .btn-primary::before {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
  }

  .btn-primary .btn-letter {
    color: rgba(255, 255, 255, 0.75);
  }

  @keyframes letter-anim-primary {
    0%, 100% {
      text-shadow: none;
      color: rgba(255, 255, 255, 0.75);
    }
    50% {
      text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.4);
      color: #fff;
    }
  }

  .btn-primary .btn-letter {
    animation: letter-anim-primary 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  /* Arrow icon (stroke-based) – same size and animation as .btn-svg */
  .btn-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #e8e8e8;
    animation: flicker 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.5s;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
    transition: color var(--transition), filter var(--transition), opacity var(--transition);
  }

  .btn:hover .btn-icon {
    color: #fff;
    filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
      drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.6));
    animation: none;
  }

  .btn:focus .btn-icon {
    animation-duration: 1.2s;
    animation-delay: 0.2s;
  }

  /* Stats number */
  .stat-number {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  /* Count-up with gradient – theme-aware */
  .count-up-text {
    background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 50%, hsl(var(--foreground)) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Grid line decoration – theme-aware */
  .grid-lines {
    background-image: 
      linear-gradient(hsl(var(--border)) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border)) 1px, transparent 1px);
    background-size: 80px 80px;
  }

  /* Horizontal divider – theme-aware */
  .divider {
    @apply w-full h-px;
    background: linear-gradient(90deg, transparent 0%, hsl(var(--border)) 50%, transparent 100%);
  }

  /* Label/Tag – theme-aware */
  .label-tag {
    @apply text-xs uppercase tracking-widest font-medium;
    color: hsl(var(--muted-foreground));
  }
}

@layer utilities {
  .shadow-soft {
    box-shadow: var(--shadow-sm);
  }
  .shadow-elevated {
    box-shadow: var(--shadow-md);
  }
  .shadow-floating {
    box-shadow: var(--shadow-lg);
  }
}

/* Keyframes */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.8s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}
