/* ================================================
   SUMMITFLOW COACHING — Stylesheet
   Modern, static, zero-JS, mobile-first
   ================================================ */

@layer reset, base, layout, components, animations, utilities;

/* ================================================
   RESET
   ================================================ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    color-scheme: light only;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scrollbar-color: oklch(0.75 0.09 220) oklch(0.94 0.01 230);
  }

  body {
    min-block-size: 100dvb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  ul { list-style: none; }

  a {
    color: inherit;
    text-decoration: none;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
}

/* ================================================
   BASE — Variables & Typography
   ================================================ */
@layer base {
  :root {
    /* Brand Colors (oklch with hex fallback intent) */
    --c-primary:          oklch(0.22 0.07 230);    /* #00344C */
    --c-primary-dark:     oklch(0.15 0.06 230);
    --c-primary-mid:      oklch(0.30 0.08 230);
    --c-primary-light:    oklch(0.40 0.08 230);
    --c-secondary:        oklch(0.75 0.09 220);    /* #6EC1E4 */
    --c-secondary-light:  oklch(0.88 0.05 220);
    --c-accent:           oklch(0.70 0.16 120);    /* #93C01C */
    --c-accent-dark:      oklch(0.58 0.16 120);
    --c-yellow:           #DDDB00;
    --c-white:            oklch(1 0 0);
    --c-surface:          oklch(0.975 0.005 230);
    --c-surface-alt:      oklch(0.955 0.01 230);
    --c-text:             oklch(0.15 0.03 230);
    --c-text-muted:       oklch(0.48 0.04 230);
    --c-border:           oklch(0.88 0.02 230);
    --c-whatsapp:         oklch(0.58 0.17 145);

    /* Gradients */
    --g-hero: linear-gradient(135deg,
      oklch(0.15 0.06 230) 0%,
      oklch(0.22 0.07 230) 35%,
      oklch(0.28 0.08 220) 65%,
      oklch(0.18 0.07 230) 100%
    );
    --g-accent: linear-gradient(135deg, oklch(0.70 0.16 120), oklch(0.58 0.16 120));
    --g-card: linear-gradient(145deg, oklch(1 0 0), oklch(0.975 0.005 230));
    --g-section: linear-gradient(180deg, oklch(0.975 0.005 230), oklch(1 0 0));

    /* Spacing */
    --sp-2xs: 0.25rem;
    --sp-xs:  0.5rem;
    --sp-sm:  0.75rem;
    --sp-md:  1rem;
    --sp-lg:  1.5rem;
    --sp-xl:  2rem;
    --sp-2xl: 3rem;
    --sp-3xl: 4rem;
    --sp-4xl: 6rem;
    --sp-5xl: 8rem;

    /* Typography */
    --font: 'Onest', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Syncopate', sans-serif;
    --fs-xs:   clamp(0.75rem,  1.2vw, 0.875rem);
    --fs-sm:   clamp(0.875rem, 1.5vw, 0.95rem);
    --fs-base: clamp(1rem,     1.8vw, 1.1rem);
    --fs-lg:   clamp(1.125rem, 2vw,   1.25rem);
    --fs-xl:   clamp(1.25rem,  2.5vw, 1.5rem);
    --fs-2xl:  clamp(1.5rem,   3vw,   2rem);
    --fs-3xl:  clamp(2rem,     4vw,   2.75rem);
    --fs-hero: clamp(1.6rem,   3.5vw,   2.6rem);

    /* Radius */
    --r-sm:   0.5rem;
    --r-md:   0.875rem;
    --r-lg:   1.25rem;
    --r-xl:   2rem;
    --r-full: 9999px;

    /* Shadows */
    --sh-sm:  0 1px 4px oklch(0.15 0.03 230 / 0.08), 0 1px 2px oklch(0.15 0.03 230 / 0.05);
    --sh-md:  0 4px 16px oklch(0.15 0.03 230 / 0.10), 0 2px 6px oklch(0.15 0.03 230 / 0.07);
    --sh-lg:  0 12px 40px oklch(0.15 0.03 230 / 0.13), 0 4px 12px oklch(0.15 0.03 230 / 0.09);
    --sh-xl:  0 24px 64px oklch(0.15 0.03 230 / 0.18);
    --sh-glow:0 0 40px oklch(0.75 0.09 220 / 0.25);

    /* Transitions */
    --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --container-max: 1200px;
    --container-pad: clamp(1rem, 5vw, 2.5rem);
    --nav-h: 6.5rem;
    --section-py: clamp(4rem, 8vw, 7rem);
  }

  :target {
    scroll-margin-top: calc(var(--nav-h) + 1rem);
  }

  body {
    font-family: var(--font);
    font-size: var(--fs-base);
    color: var(--c-text);
    background-color: var(--c-white);
    line-height: 1.65;
  }

  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
  }

  h1, h2 {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  h3, h4, h5, h6 {
    font-family: var(--font);
    letter-spacing: -0.01em;
  }

  p { max-inline-size: 68ch; }
}

/* ================================================
   LAYOUT — Container, Grid, Section
   ================================================ */
@layer layout {
  .container {
    inline-size: min(var(--container-max), 100%);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .section {
    padding-block: var(--section-py);
  }

  .section--dark {
    background-color: var(--c-primary);
    color: var(--c-white);
  }

  .section--surface {
    background: var(--g-section);
  }

  .section-header {
    text-align: center;
    margin-block-end: clamp(2.5rem, 5vw, 4rem);

    & .section-tag {
      margin-block-end: var(--sp-lg);
    }

    & h2 {
      font-size: var(--fs-3xl);
      color: var(--c-primary);
      margin-block: var(--sp-sm) var(--sp-md);
    }
  }

  .section-tag {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-accent);
    background: oklch(0.70 0.16 120 / 0.10);
    padding: var(--sp-2xs) var(--sp-sm);
    border-radius: var(--r-full);
    border: 1px solid oklch(0.70 0.16 120 / 0.20);
  }

  .section-subtitle {
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
    margin-block-start: var(--sp-sm);
    max-inline-size: 60ch;
    margin-inline: auto;
  }
}

/* ================================================
   COMPONENTS
   ================================================ */
@layer components {

  /* ---- SKIP LINK ---- */
  .skip-link {
    position: fixed;
    inset-block-start: var(--sp-md);
    inset-inline-start: var(--sp-md);
    z-index: 999;
    padding: var(--sp-sm) var(--sp-lg);
    background: var(--c-accent);
    color: var(--c-white);
    border-radius: var(--r-md);
    font-weight: 600;
    transform: translateY(-150%);
    transition: transform var(--t-fast);

    &:focus-visible {
      transform: translateY(0);
      outline: 3px solid var(--c-white);
      outline-offset: 2px;
    }
  }

  /* ---- COOKIE BANNER ---- */

  .cookie-banner {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 500;
    background: var(--c-primary);
    color: var(--c-white);
    padding-block: var(--sp-lg);
    box-shadow: 0 -4px 30px oklch(0.15 0.03 230 / 0.3);
    border-block-start: 1px solid oklch(0.30 0.08 230);

    & .container {
      display: flex;
      align-items: center;
      gap: var(--sp-xl);
      flex-wrap: wrap;
    }

    & p {
      flex: 1;
      font-size: var(--fs-sm);
      color: var(--c-secondary-light);
      max-inline-size: none;

      & a {
        color: var(--c-accent);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
    }
  }

  .cookie-actions {
    display: flex;
    gap: var(--sp-sm);
    flex-shrink: 0;
    flex-wrap: wrap;
  }

  .cookie-banner.is-hidden { display: none; }

  /* ---- BUTTONS ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    padding: 0.75em 1.75em;
    /* UI/UX Pro Max: touch targets minimum 44px */
    min-block-size: 44px;
    min-inline-size: 44px;
    border-radius: var(--r-full);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition:
      background-color var(--t-fast),
      color var(--t-fast),
      border-color var(--t-fast),
      transform var(--t-fast),
      box-shadow var(--t-fast);
    text-align: center;
    white-space: nowrap;

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-md);
    }

    &:active { transform: translateY(0); }

    &:focus-visible {
      outline: 3px solid var(--c-accent);
      outline-offset: 3px;
    }
  }

  .btn-primary {
    background: var(--g-accent);
    color: var(--c-white);

    &:hover {
      background: linear-gradient(135deg, oklch(0.64 0.16 120), oklch(0.52 0.16 120));
      box-shadow: 0 8px 24px oklch(0.70 0.16 120 / 0.35);
    }
  }

  .btn-outline {
    background: transparent;
    border-color: var(--c-primary);
    color: var(--c-primary);

    &:hover {
      background: var(--c-primary);
      color: var(--c-white);
    }
  }

  .btn-outline-light {
    background: transparent;
    border-color: oklch(1 0 0 / 0.5);
    color: var(--c-white);

    &:hover {
      background: oklch(1 0 0 / 0.15);
      border-color: var(--c-white);
    }
  }

  .btn-whatsapp {
    background: var(--c-whatsapp);
    color: var(--c-white);
    font-size: var(--fs-base);
    padding: 0.8em 2em;

    &:hover {
      background: oklch(0.52 0.17 145);
      box-shadow: 0 8px 24px oklch(0.58 0.17 145 / 0.4);
    }
  }

  .btn-large {
    padding: 0.9em 2.25em;
    font-size: var(--fs-base);
  }

  .btn-full {
    inline-size: 100%;
  }

  /* ---- SITE HEADER ---- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 200;
    block-size: var(--nav-h);
    background: oklch(0.22 0.07 230 / 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-block-end: 1px solid oklch(0.30 0.08 230 / 0.5);
    box-shadow: 0 2px 24px oklch(0.10 0.05 230 / 0.4);
    transition:
      block-size 0.35s ease,
      background 0.35s ease,
      backdrop-filter 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease;

    &.site-header--scrolled {
      block-size: 4rem;

      .logo-img { block-size: 2.75rem; }
    }
  }

  .site-header--solid {
    background: oklch(0.22 0.07 230 / 0.92) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-block-end-color: oklch(0.30 0.08 230 / 0.5) !important;
    animation: none !important;
  }

  .menu-toggle-input { display: none; }

  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 100%;
    gap: var(--sp-xl);
  }

  /* Logo */
  .logo {
    display: flex;
    flex-shrink: 0;
  }

  .logo-img {
    block-size: 4rem;
    inline-size: auto;
    transition: block-size 0.35s ease;
  }

  /* Navigation */
  .site-header nav ul {
    display: flex;
    align-items: center;
    gap: var(--sp-xl);
  }

  .site-header nav a {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: oklch(0.90 0.03 220);
    padding-block: var(--sp-xs);
    position: relative;
    transition: color var(--t-fast);

    &::after {
      content: '';
      position: absolute;
      inset-block-end: -2px;
      inset-inline-start: 0;
      inline-size: 0;
      block-size: 2px;
      background: var(--c-accent);
      border-radius: var(--r-full);
      transition: inline-size var(--t-base);
    }

    &:hover {
      color: var(--c-white);
      &::after { inline-size: 100%; }
    }

    &:focus-visible {
      outline: 2px solid var(--c-accent);
      outline-offset: 4px;
      border-radius: 2px;
    }
  }

  .nav-cta {
    background: var(--g-accent) !important;
    color: var(--c-white) !important;
    padding: 0.45em 1.25em !important;
    border-radius: var(--r-full) !important;
    font-weight: 600 !important;
    transition: box-shadow var(--t-fast), transform var(--t-fast) !important;

    &::after { display: none !important; }

    &:hover {
      box-shadow: 0 4px 16px oklch(0.70 0.16 120 / 0.4) !important;
      transform: translateY(-2px) !important;
    }
  }

  /* Hamburger */
  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    cursor: pointer;
    padding: var(--sp-xs);
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
    flex-shrink: 0;

    &:hover { background: oklch(1 0 0 / 0.1); }
  }

  .hamburger-line {
    display: block;
    inline-size: 100%;
    block-size: 2px;
    background: var(--c-white);
    border-radius: var(--r-full);
    transition: transform var(--t-base), opacity var(--t-fast);
    transform-origin: center;
  }

  /* Mobile menu open state */
  .menu-toggle-input:checked ~ .nav-container .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle-input:checked ~ .nav-container .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .menu-toggle-input:checked ~ .nav-container .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---- HERO ---- */
  .hero {
    position: relative;
    margin-block-start: calc(-1 * var(--nav-h));
    min-block-size: 100dvb;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--g-hero);
    background-size: 300% 300%;
    animation: hero-gradient 14s ease infinite;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236EC1E4' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }

    /* Diagonal bottom edge — frontend-design: "Unexpected layouts. Asymmetry." */
    &::after {
      content: '';
      position: absolute;
      inset-block-end: -2px;
      inset-inline: 0;
      block-size: 100px;
      background: var(--c-white);
      clip-path: polygon(0 60%, 100% 0%, 100% 100%, 0% 100%);
    }

  }

  .hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--sp-3xl);
    padding-block: var(--sp-5xl) var(--sp-4xl);
    padding-inline: var(--container-pad);
    max-inline-size: var(--container-max);
    margin-inline: auto;
    inline-size: 100%;
  }

  .hero-text { text-align: left; }

  .hero-video {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px oklch(0 0 0 / 0.45);
    animation: fade-up 0.8s 0.4s both;

    & video {
      display: block;
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 16 / 9;
    }
  }

  .hero-eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-accent);
    background: oklch(0.70 0.16 120 / 0.15);
    border: 1px solid oklch(0.70 0.16 120 / 0.30);
    padding: var(--sp-2xs) var(--sp-md);
    border-radius: var(--r-full);
    margin-block-end: var(--sp-lg);
    animation: fade-up 0.8s 0.1s both;
  }

  .hero h1 {
    font-size: var(--fs-hero);
    color: var(--c-white);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-block-end: var(--sp-lg);
    animation: fade-up 0.8s 0.3s both;

    & em {
      font-style: normal;
      color: var(--c-yellow);
      -webkit-text-fill-color: var(--c-yellow);
    }
  }

  .hero-tagline {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-accent);
    margin-block-end: var(--sp-xl);
    animation: fade-up 0.8s 0.6s both;
  }

  .hero-subtitle {
    font-size: var(--fs-lg);
    color: oklch(0.88 0.04 220);
    max-inline-size: 600px;
    margin-block-end: var(--sp-md);
    line-height: 1.7;
    animation: fade-up 0.8s 0.5s both;
  }

  .hero-actions {
    display: flex;
    gap: var(--sp-md);
    flex-wrap: wrap;
    animation: fade-up 0.8s 0.7s both;
  }


/* ---- SERVICE CARDS ---- */
  .leistungen { background: var(--c-white); }

  .angebote { background: var(--c-white); }

  .angebote-pricing {
    margin-block-start: var(--sp-4xl);
    padding-block-start: var(--sp-4xl);
    border-block-start: 1px solid var(--c-border);
    background: var(--g-section);
    margin-inline: calc(var(--sp-xl) * -1);
    padding-inline: var(--sp-xl);
    border-radius: var(--radius-lg);
  }

  .contact-quote {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
    max-inline-size: 680px;
    margin-inline: auto;
    margin-block-end: var(--sp-3xl);
    padding: var(--sp-xl) var(--sp-2xl);
    border-inline-start: 3px solid var(--c-accent);
    background: var(--c-surface-alt);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;

    & p {
      font-size: var(--fs-lg);
      font-style: italic;
      color: var(--c-text);
      line-height: 1.65;
      max-inline-size: none;
    }

    & footer {
      display: flex;
      align-items: center;
      gap: var(--sp-md);
      background: none;
      padding: 0;
    }

    & img {
      inline-size: 2.75rem;
      block-size: 2.75rem;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    & cite {
      font-style: normal;
      font-weight: 600;
      font-size: var(--fs-sm);
      color: var(--c-primary);

      & span {
        display: block;
        font-weight: 400;
        color: var(--c-text-muted);
        font-size: var(--fs-xs);
      }
    }
  }

  .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-lg);
  }

  .card {
    background: var(--g-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-2xl) var(--sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    position: relative;
    overflow: hidden;
    transition:
      transform var(--t-base),
      box-shadow var(--t-base),
      border-color var(--t-base);
    contain: layout style paint;

    /* Colored top accent bar — distinctive detail per frontend-design skill */
    &::before {
      content: '';
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      block-size: 3px;
      background: linear-gradient(90deg, var(--c-secondary), var(--c-accent));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--t-base);
    }

    &:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg);
      border-color: var(--c-secondary);
      &::before { transform: scaleX(1); }
    }

    & h3 {
      font-size: var(--fs-xl);
      color: var(--c-primary);
    }

    & p {
      color: var(--c-text-muted);
      font-size: var(--fs-sm);
      line-height: 1.7;
      flex: 1;
    }
  }

  /* Staggered reveal — UI/UX Pro Max: choreographed motion */
  .card:nth-child(1) { animation-delay: 0ms; }
  .card:nth-child(2) { animation-delay: 80ms; }
  .card:nth-child(3) { animation-delay: 160ms; }
  .card:nth-child(4) { animation-delay: 240ms; }

  .card-icon {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    background: linear-gradient(135deg, oklch(0.22 0.07 230 / 0.08), oklch(0.75 0.09 220 / 0.12));
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    color: var(--c-primary);
    border: 1px solid oklch(0.22 0.07 230 / 0.1);
    transition: background var(--t-base), color var(--t-base);

    .card:hover & {
      background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
      color: var(--c-white);
      border-color: transparent;
    }
  }

  .card-link {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-accent-dark);
    align-self: flex-start;
    padding-block-end: 1px;
    border-block-end: 1px solid transparent;
    transition: border-color var(--t-fast), color var(--t-fast);

    &:hover {
      border-block-end-color: var(--c-accent);
      color: var(--c-accent);
    }

    &:focus-visible {
      outline: 2px solid var(--c-accent);
      outline-offset: 3px;
      border-radius: 2px;
    }
  }

  /* ---- ABOUT ---- */
  .about { background: var(--g-section); }

  .about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1.4fr;
    }
  }

  .about-image {
    display: flex;
    justify-content: center;
    align-self: flex-start;
  }

  .about-slideshow {
    inline-size: min(380px, 100%);
    aspect-ratio: 3 / 4;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    position: relative;
    overflow: hidden;
  }

  .slide {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    animation: slide-show 18s infinite;
    will-change: opacity;
    transform: translateZ(0);
  }

  .slide-1 { animation-delay:  0s; }
  .slide-2 { animation-delay:  3s; }
  .slide-3 { animation-delay:  6s; }
  .slide-4 { animation-delay:  9s; }
  .slide-5 { animation-delay: 12s; }
  .slide-6 { animation-delay: 15s; }

  .about-content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);

    & .section-tag { align-self: flex-start; }

    & h2 {
      font-size: var(--fs-3xl);
      color: var(--c-primary);
    }

    & p { color: var(--c-text-muted); }
  }

  .about-lead {
    font-size: var(--fs-lg) !important;
    color: var(--c-text) !important;
    font-weight: 500;
  }

  .about-stats {
    display: flex;
    gap: var(--sp-xl);
    flex-wrap: wrap;
    padding-block: var(--sp-lg);
    border-block: 1px solid var(--c-border);
    margin-block: var(--sp-sm);
  }

  .stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .stat-number {
    font-size: var(--fs-3xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    /* Gradient text on stats — frontend-design: color + depth */
    color: var(--c-yellow);
    -webkit-text-fill-color: var(--c-yellow);
    color: transparent;
  }

  .stat-label {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-weight: 500;
  }

  /* ---- TESTIMONIALS ---- */
  .testimonials { background: var(--c-primary); }

  .testimonials .section-header {
    & h2 { color: var(--c-white); }
    & .section-tag {
      color: var(--c-secondary);
      background: oklch(0.75 0.09 220 / 0.15);
      border-color: oklch(0.75 0.09 220 / 0.25);
    }
  }

  /* CSS-only radio slider */
  .testimonials-widget { position: relative; }

  .testimonials-track { position: relative; }

  .testimonial-card {
    display: block;
    background: oklch(0.28 0.07 230 / 0.7);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid oklch(0.40 0.06 230 / 0.4);
    border-radius: var(--r-xl);
    padding: var(--sp-3xl) var(--sp-2xl) var(--sp-2xl);
    max-inline-size: 720px;
    margin-inline: auto;
    text-align: center;
    position: relative;

    /* Large decorative open-quote — frontend-design: "Textures. Details." */
    &::before {
      content: '\201C';
      position: absolute;
      inset-block-start: -0.2em;
      inset-inline-start: 50%;
      transform: translateX(-50%);
      font-size: 8rem;
      line-height: 1;
      color: oklch(0.70 0.16 120 / 0.3);
      font-weight: 900;
      pointer-events: none;
    }

    & p {
      font-size: var(--fs-lg);
      color: oklch(0.92 0.03 220);
      line-height: 1.8;
      font-style: italic;
      max-inline-size: none;
      position: relative;
      z-index: 1;
    }

    & footer {
      margin-block-start: var(--sp-xl);
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-sm);
    }

    & .testimonial-avatar {
      inline-size: 64px;
      block-size: 64px;
      border-radius: var(--r-full);
      overflow: hidden;
      object-fit: cover;
      border: 3px solid var(--c-accent);
      display: block;
      flex-shrink: 0;
    }

    & cite {
      font-style: normal;
      font-weight: 600;
      color: var(--c-white);
      font-size: var(--fs-base);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2em;
    }

    & .testimonial-sport {
      font-weight: 400;
      font-size: var(--fs-sm);
      color: var(--c-accent);
    }
  }


  /* ---- PRICING ---- */
  .pricing {
    background: var(--g-section);
  }

  .pricing-intro {
    font-size: var(--fs-base);
    color: var(--c-text-muted);
    max-inline-size: 65ch;
    margin-inline: auto;
    margin-block-start: var(--sp-md);
    line-height: 1.7;
  }

  .pricing-subhead {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-text);
    text-align: center;
    margin-inline: auto;
    max-inline-size: 60ch;
    margin-block-start: var(--sp-lg);
    margin-block-end: var(--sp-xl);
  }


  /* Pricing grid */
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    align-items: start;

    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
      align-items: stretch;
    }
  }

  .pricing-card {
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-xl);
    position: relative;
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    contain: layout style paint;

    &:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg);
    }

    @media (min-width: 768px) {
      &:not(.pricing-card--popular) {
        margin-block-start: var(--sp-xl);
        transform: scale(0.96);
        &:hover { transform: scale(0.98) translateY(-4px); }
      }
    }
  }

  .pricing-card--popular {
    border-color: var(--c-primary);
    border-width: 2px;
    box-shadow: var(--sh-lg);

    @media (min-width: 768px) {
      transform: translateY(-16px);
      &:hover { transform: translateY(-22px); }
    }
  }

  .pricing-popular-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    background: var(--c-yellow);
    color: var(--c-primary);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 5px 12px;
    border-end-start-radius: var(--r-md);
    border-start-end-radius: var(--r-lg);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .pricing-card-inner {
    padding: var(--sp-2xl) var(--sp-xl);
    display: flex;
    flex-direction: column;
    block-size: 100%;
  }

  .pricing-tier {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-block-end: var(--sp-lg);
  }

  .pricing-price {
    display: flex;
    align-items: baseline;
    gap: var(--sp-xs);
    margin-block-end: var(--sp-2xs);
  }

  .price-amount {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--c-primary);
    line-height: 1;
  }

  .price-period {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
  }

  .pricing-billing {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-block-end: var(--sp-xl);
  }

  .pricing-features {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    flex: 1;

    & li {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-sm);
      font-size: var(--fs-sm);
      color: var(--c-text);
      line-height: 1.5;
    }
  }

  .check-icon {
    flex-shrink: 0;
    color: var(--c-accent);
    margin-block-start: 2px;
  }

  .pricing-divider {
    border: none;
    border-block-start: 1px solid var(--c-border);
    margin-block: var(--sp-xl);
  }

  .pricing-btn {
    inline-size: 100%;
    justify-content: center;
  }

  .pricing-desc {
    margin-block-start: var(--sp-md);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-align: center;
    line-height: 1.5;
  }

  /* ---- PARTNERS ---- */
  .partners {
    background: var(--c-surface);

    & .section-subtitle { max-inline-size: 80ch; }
  }

  .partner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-xl);
  }

  .partner-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--t-base), transform var(--t-base);

    &:hover {
      box-shadow: var(--sh-md);
      transform: translateY(-3px);
    }
  }

  .partner-header {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
  }

  .partner-logo-img {
    block-size: 70px;
    inline-size: 200px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
  }


  .partner-body {
    padding: var(--sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    flex: 1;

    & h3 {
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--c-text);
    }

    & p {
      font-size: var(--fs-sm);
      color: var(--c-text-muted);
      line-height: 1.65;
      flex: 1;
    }
  }

  .partner-badge {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-accent);
    background: oklch(0.70 0.16 120 / 0.12);
    border: 1px solid oklch(0.70 0.16 120 / 0.25);
    border-radius: var(--r-full);
    padding: 0.25em 0.75em;
    align-self: flex-start;
  }

  .partner-btn {
    align-self: flex-start;
    margin-block-start: var(--sp-xs);
  }

  /* ---- NEWS ---- */
  .news {
    background: var(--g-section);
    position: relative;

    & .section-tag {
      margin-block-end: var(--sp-lg);
    }
  }

  .section-cta {
    margin-block-start: var(--sp-2xl);
    text-align: center;
  }

  .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-lg);
  }

  .news-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base);
    contain: layout style paint;

    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--sh-lg);
    }
  }

  .news-image-placeholder {
    block-size: 200px;
    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      inset-block-end: -20px;
      inset-inline-start: -20px;
      inline-size: 100px;
      block-size: 100px;
      background: oklch(0.75 0.09 220 / 0.2);
      border-radius: 50%;
    }
  }

  .news-content {
    padding: var(--sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);

    & time {
      font-size: var(--fs-xs);
      color: var(--c-text-muted);
      font-weight: 500;
      letter-spacing: 0.05em;
    }

    & h3 {
      font-size: var(--fs-lg);
      color: var(--c-primary);
      line-height: 1.3;
    }

    & p {
      font-size: var(--fs-sm);
      color: var(--c-text-muted);
      line-height: 1.7;
    }
  }

  /* ---- CONTACT ---- */
  .contact {
    background: var(--c-white);
    position: relative;

    /* Accent block — visual interest per frontend-design skill */
    &::before {
      content: '';
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      inline-size: clamp(200px, 35vw, 500px);
      block-size: clamp(200px, 35vw, 500px);
      background: radial-gradient(circle, oklch(0.75 0.09 220 / 0.07) 0%, transparent 70%);
      pointer-events: none;
      border-radius: 50%;
      translate: 30% -30%;
    }
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);

    @media (min-width: 768px) {
      grid-template-columns: 1.3fr 1fr;
    }
  }

  .form-feedback {
    padding: var(--sp-lg) var(--sp-xl);
    border-radius: var(--radius-md);
    background: oklch(0.22 0.06 140 / 0.15);
    border: 1px solid var(--c-accent);
    color: var(--c-accent);
    font-weight: 500;

    &.form-feedback--error {
      background: oklch(0.22 0.06 30 / 0.15);
      border-color: oklch(0.65 0.18 30);
      color: oklch(0.65 0.18 30);
    }

    & p { max-inline-size: none; }
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    background: var(--c-surface);
    padding: var(--sp-2xl);
    border-radius: var(--r-xl);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);

    & label {
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--c-text);
    }

    & input,
    & textarea {
      padding: 0.7em 1em;
      border: 1.5px solid var(--c-border);
      border-radius: var(--r-md);
      background: var(--c-white);
      color: var(--c-text);
      font-size: var(--fs-base);
      transition: border-color var(--t-fast), box-shadow var(--t-fast);
      appearance: none;
      inline-size: 100%;

      &::placeholder { color: var(--c-text-muted); opacity: 0.7; }

      &:focus {
        outline: none;
        border-color: var(--c-secondary);
        box-shadow: 0 0 0 3px oklch(0.75 0.09 220 / 0.20);
      }

      &:focus-visible {
        border-color: var(--c-accent);
        box-shadow: 0 0 0 3px oklch(0.70 0.16 120 / 0.15);
      }
    }

    & textarea {
      resize: vertical;
      min-block-size: 130px;
    }
  }

  .form-field-error {
    font-size: var(--fs-sm);
    color: oklch(0.55 0.20 25);
    margin-block-start: 0.1em;
  }

  .form-group input.is-invalid,
  .form-group textarea.is-invalid {
    border-color: oklch(0.55 0.20 25);
    box-shadow: 0 0 0 3px oklch(0.55 0.20 25 / 0.15);
  }

  .form-feedback[hidden] { display: none; }

  .form-feedback {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    padding: 1em 1.25em;
    border-radius: var(--r-md);
    background: oklch(0.96 0.06 145);
    border: 1px solid oklch(0.80 0.12 145);
    color: oklch(0.38 0.12 145);
    animation: feedback-in 0.3s ease;

    & p {
      margin: 0;
      font-size: var(--fs-sm);
      font-weight: 500;
      line-height: 1.5;
    }

    & svg {
      flex-shrink: 0;
      margin-block-start: 0.1em;
    }

    &.form-feedback--error {
      background: oklch(0.96 0.06 25);
      border-color: oklch(0.80 0.12 25);
      color: oklch(0.45 0.18 25);
    }
  }

  @keyframes feedback-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xl);
  }

  .contact-whatsapp {
    background: linear-gradient(135deg, oklch(0.58 0.17 145 / 0.08), oklch(0.58 0.17 145 / 0.04));
    border: 1px solid oklch(0.58 0.17 145 / 0.20);
    border-radius: var(--r-xl);
    padding: var(--sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);

    & h3 {
      font-size: var(--fs-xl);
      color: var(--c-primary);
    }

    & p {
      font-size: var(--fs-sm);
      color: var(--c-text-muted);
    }
  }

  .contact-social {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);

    & h3 {
      font-size: var(--fs-xl);
      color: var(--c-primary);
    }
  }

  .social-links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
  }

  .social-link {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 0.6em 1em;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    background: var(--c-white);
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast);

    & svg { flex-shrink: 0; color: var(--c-primary); transition: color var(--t-fast); }

    &:hover {
      border-color: var(--c-primary);
      background: var(--c-primary);
      color: var(--c-white);
      transform: translateX(4px);
      & svg { color: var(--c-secondary); }
    }

    &:focus-visible {
      outline: 2px solid var(--c-accent);
      outline-offset: 3px;
    }
  }

  .contact-address {
    font-style: normal;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: 1.8;
    padding: var(--sp-lg);
    border-radius: var(--r-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);

    & strong { color: var(--c-text); }
    & a {
      color: var(--c-accent-dark);
      text-decoration: underline;
      text-underline-offset: 2px;

      &:hover { color: var(--c-accent); }
    }
  }

  /* ---- SITE FOOTER ---- */
  .prose {
    max-inline-size: 72ch;
    margin-inline: auto;

    & .section-tag {
      margin-block-end: var(--sp-lg);
    }

    & h1 {
      font-size: var(--fs-3xl);
      font-weight: 800;
      color: var(--c-primary);
      margin-block-end: var(--sp-xl);
    }

    & h2 {
      font-size: var(--fs-xl);
      font-weight: 700;
      color: var(--c-primary);
      margin-block-start: var(--sp-2xl);
      margin-block-end: var(--sp-md);
    }

    & h3 {
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--c-primary);
      margin-block-start: var(--sp-xl);
      margin-block-end: var(--sp-sm);
    }

    & p { margin-block-end: var(--sp-md); }

    & ul, & ol {
      padding-inline-start: var(--sp-lg);
      margin-block-end: var(--sp-md);
      display: flex;
      flex-direction: column;
      gap: var(--sp-xs);
    }

    & ul { list-style: disc; }
    & ul ul { list-style: circle; margin-block-start: var(--sp-xs); }
    & ol { list-style: decimal; }

    & a:not(.btn) { color: var(--c-accent-dark); text-decoration: underline; }

    & .prose-lead {
      font-size: var(--fs-xl);
      font-weight: 300;
      color: var(--c-text-muted);
      margin-block-end: var(--sp-xl);
    }

    & .prose-cta {
      display: flex;
      align-items: center;
      gap: var(--sp-xl);
      margin-block-start: var(--sp-3xl);
      padding-block-start: var(--sp-2xl);
      border-block-start: 1px solid var(--c-border);
      flex-wrap: wrap;
    }

    & .prose-price {
      font-size: var(--fs-2xl);
      font-weight: 800;
      color: var(--c-primary);

      & span {
        font-size: var(--fs-sm);
        font-weight: 400;
        color: var(--c-text-muted);
      }
    }

    & .prose-table {
      overflow-x: auto;
      margin-block: var(--sp-xl);

      & table {
        inline-size: 100%;
        border-collapse: collapse;
        font-size: var(--fs-sm);
      }

      & th {
        text-align: left;
        padding: var(--sp-sm) var(--sp-md);
        background: var(--c-primary);
        color: var(--c-white);
        font-weight: 600;
      }

      & td {
        padding: var(--sp-sm) var(--sp-md);
        border-block-end: 1px solid var(--c-border);
        vertical-align: top;
        line-height: 1.5;
      }

      & tr:nth-child(even) td { background: var(--c-surface-alt); }
    }

    & .prose-meta {
      font-size: var(--fs-sm);
      color: var(--c-text-muted);
      margin-block-end: var(--sp-2xl);
    }
  }

  /* ---- POST DETAIL ---- */
  .post-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    text-decoration: none;
    margin-block-end: var(--sp-2xl);
    transition: color var(--t-base);

    &:hover { color: var(--c-primary); }
  }

  .post-hero-image {
    inline-size: 100%;
    max-block-size: 480px;
    object-fit: cover;
    border-radius: var(--r-lg);
    margin-block-end: var(--sp-2xl);
  }

  .post-date {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-block-end: var(--sp-2xl);
  }

  .post-body {
    & h2 {
      font-size: var(--fs-xl);
      font-weight: 700;
      color: var(--c-primary);
      margin-block-start: var(--sp-2xl);
      margin-block-end: var(--sp-md);
    }

    & h3 {
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--c-primary);
      margin-block-start: var(--sp-xl);
      margin-block-end: var(--sp-sm);
    }

    & p { margin-block-end: var(--sp-md); line-height: 1.75; }

    & ul, & ol {
      padding-inline-start: var(--sp-lg);
      margin-block-end: var(--sp-md);
      display: flex;
      flex-direction: column;
      gap: var(--sp-xs);
    }

    & ul { list-style: disc; }
    & ol { list-style: decimal; }

    & a { color: var(--c-accent-dark); text-decoration: underline; }

    & strong { font-weight: 600; }

    & em { font-style: italic; }

    & img {
      inline-size: 100%;
      border-radius: var(--r-md);
      margin-block: var(--sp-xl);
    }

    & blockquote {
      border-inline-start: 3px solid var(--c-primary);
      padding-inline-start: var(--sp-lg);
      margin-block: var(--sp-xl);
      color: var(--c-text-muted);
      font-style: italic;
    }
  }

  .site-footer {
    background: var(--c-primary-dark);
    color: oklch(0.80 0.04 220);
    padding-block: var(--sp-4xl) var(--sp-xl);
    border-block-start: 1px solid oklch(0.20 0.06 230);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
    padding-block-end: var(--sp-2xl);
    border-block-end: 1px solid oklch(0.20 0.06 230);

    @media (min-width: 640px) {
      grid-template-columns: 2fr 1fr 1fr;
    }
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);

    & p {
      font-size: var(--fs-sm);
      color: oklch(0.60 0.04 220);
      line-height: 1.7;
      max-inline-size: 340px;
    }
  }

  .site-footer nav,
  .footer-legal {
    & h4 {
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--c-white);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-block-end: var(--sp-lg);
    }

    & ul {
      display: flex;
      flex-direction: column;
      gap: var(--sp-sm);
    }

    & a {
      font-size: var(--fs-sm);
      color: oklch(0.68 0.04 220);
      transition: color var(--t-fast);

      &:hover { color: var(--c-accent); }
      &:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }
    }
  }

  .footer-tools {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    margin-block-start: var(--sp-sm);
  }

  .footer-tools-label {
    font-size: var(--fs-xs);
    color: oklch(0.50 0.04 220);
    white-space: nowrap;
  }

  .footer-tp-logo {
    block-size: 1.75rem;
    inline-size: auto;
    filter: brightness(0) invert(1) opacity(0.6);
    transition: opacity var(--t-fast);

    &:hover { opacity: 1; filter: brightness(0) invert(1); }
  }

  .footer-coach-badge {
    block-size: 1.75rem;
    inline-size: auto;
    opacity: 0.7;
    transition: opacity var(--t-fast);

    &:hover { opacity: 1; }
  }

  .footer-bottom {
    padding-block-start: var(--sp-xl);
    text-align: center;

    & p {
      font-size: var(--fs-xs);
      color: oklch(0.50 0.04 220);
      max-inline-size: none;
    }
  }

  /* ---- WHATSAPP FLOAT ---- */
  .whatsapp-float {
    position: fixed;
    inset-block-end: var(--sp-xl);
    inset-inline-end: var(--sp-xl);
    z-index: 300;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    background: var(--c-whatsapp);
    border-radius: var(--r-full);
    display: grid;
    place-items: center;
    color: var(--c-white);
    box-shadow: var(--sh-lg);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    animation: whatsapp-pulse 3s ease-in-out infinite;

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 8px 30px oklch(0.58 0.17 145 / 0.5);
      animation-play-state: paused;
    }

    &:focus-visible {
      outline: 3px solid var(--c-white);
      outline-offset: 3px;
    }
  }

} /* end @layer components */

/* ================================================
   RESPONSIVE — Mobile Navigation
   ================================================ */
@media (max-width: 767px) {
  .hamburger { display: flex; }

  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-text { text-align: center; }

  .hero-actions { justify-content: center; }

  .partner-grid { grid-template-columns: 1fr; }

  .site-header nav {
    position: fixed;
    inset-block-start: var(--nav-h);
    inset-inline: 0;
    background: oklch(0.18 0.07 230 / 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--sp-xl) var(--container-pad);
    border-block-end: 1px solid oklch(0.30 0.08 230 / 0.5);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform var(--t-slow), opacity var(--t-base);
    pointer-events: none;
  }

  .menu-toggle-input:checked ~ .nav-container nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-header nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-md);
  }

  .site-header nav a {
    font-size: var(--fs-lg);
    padding-block: var(--sp-sm);
  }

  .nav-cta {
    margin-block-start: var(--sp-sm);
  }
}

/* ================================================
   ANIMATIONS
   ================================================ */
@layer animations {

  @keyframes hero-gradient {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
  }

  @keyframes slide-show {
    0%              { opacity: 0; }
    3%, 16.67%      { opacity: 1; }
    19.67%, 100%    { opacity: 0; }
  }

  @keyframes fade-up {
    from {
      opacity: 0;
      translate: 0 2rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes reveal {
    from {
      opacity: 0;
      translate: 0 3rem;
      scale: 0.95;
      filter: blur(6px);
    }
    to {
      opacity: 1;
      translate: 0 0;
      scale: 1;
      filter: blur(0px);
    }
  }


  @keyframes whatsapp-pulse {
    0%, 100% { box-shadow: 0 8px 24px oklch(0.58 0.17 145 / 0.3), 0 0 0 0 oklch(0.58 0.17 145 / 0.3); }
    50%       { box-shadow: 0 8px 24px oklch(0.58 0.17 145 / 0.3), 0 0 0 14px oklch(0.58 0.17 145 / 0); }
  }


  /* ---- SCROLL PROGRESS BAR ---- */
  .scroll-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 3px;
    inline-size: var(--scroll-pct, 0%);
    background: linear-gradient(90deg, var(--c-accent), oklch(0.65 0.15 200));
    z-index: 9999;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
  }

  /* ---- SCROLL REVEAL (IntersectionObserver fallback) ---- */
  .will-reveal {
    opacity: 0;
    translate: 0 2.5rem;
    filter: blur(4px);
    transition: opacity 0.65s ease, translate 0.65s ease, filter 0.65s ease;
  }

  .will-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  /* CSS Scroll-Driven Animations (Baseline 2024) */
  @supports (animation-timeline: view()) {
    .section-header {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }

    .card,
    .news-card,
    .pricing-card,
    .partner-card {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
    }

    .card:nth-child(2),
    .pricing-card:nth-child(2),
    .partner-card:nth-child(2) { animation-delay: 0.08s; }

    .card:nth-child(3),
    .pricing-card:nth-child(3),
    .partner-card:nth-child(3) { animation-delay: 0.16s; }

    .card:nth-child(4),
    .partner-card:nth-child(4) { animation-delay: 0.24s; }

    .about-content {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
    }

    .testimonials-widget,
    .contact-form,
    .contact-info {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 35%;
    }

    .pricing-subhead {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 25%;
    }
  }
}

/* ================================================
   UTILITIES
   ================================================ */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ================================================
   DARK MODE
   ================================================ */

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

  .hero { animation: none; }
  .whatsapp-float { animation: none; }
}

/* ================================================
   PRINT
   ================================================ */
@media print {
  .site-header,
  .whatsapp-float,
  .cookie-banner,
  .hamburger,

  body { color: #000; background: #fff; }
  a { text-decoration: underline; }
  .hero { min-block-size: auto; padding: 2rem; }
}