/* ==========================================================================
   Эйва — styles.css
   Modern CSS 2026: @layer, Nesting, clamp(), color-mix(),
   scroll-driven animations, native <details> FAQ
   Light theme only
   ========================================================================== */

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

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

  html {
    scroll-behavior: smooth;
  }

  body {
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

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

  ul {
    list-style: none;
  }
}

/* ── BASE ── */
@layer base {
  :root {
    color-scheme: light only;

    /* Colors */
    --color-bg:          #FAFBFC;
    --color-bg-alt:      #F0FDFA;
    --color-surface:     #FFFFFF;
    --color-text:        #0F172A;
    --color-text-sec:    #64748B;
    --color-border:      #E2E8F0;
    --color-accent:      #0D9488;
    --color-accent-hover: color-mix(in srgb, var(--color-accent), black 15%);
    --color-accent-light: color-mix(in srgb, var(--color-accent), white 85%);
    --color-accent-dark:  color-mix(in srgb, var(--color-accent), black 60%);
    --color-cta-text:    #FFFFFF;

    /* Typography — fluid clamp() */
    --font-family: system-ui, sans-serif;
    --text-hero:   clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
    --text-h2:     clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --text-h3:     clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
    --text-body:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-small:  0.875rem;

    /* Spacing */
    --section-py: clamp(3rem, 2rem + 4vw, 5rem);

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-header: 0 1px 8px rgba(0,0,0,0.08);
  }

  html {
    background-color: #FAFBFC;
  }

  body {
    font-family: var(--font-family);
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
  }

  /* Force light theme even when browser/WebView requests dark mode */
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: light only;
      --color-bg:          #FAFBFC;
      --color-bg-alt:      #F0FDFA;
      --color-surface:     #FFFFFF;
      --color-text:        #0F172A;
      --color-text-sec:    #64748B;
      --color-border:      #E2E8F0;
    }

    html, body {
      background-color: #FAFBFC;
      color: #0F172A;
    }
  }
}

/* ── LAYOUT ── */
@layer layout {
  .container {
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

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

  .section-alt {
    background: var(--color-bg-alt);
  }

  .section__title {
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
  }

  .grid-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;

    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .grid-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
}

/* ── COMPONENTS ── */
@layer components {

  /* ── Buttons ── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 200ms ease, box-shadow 200ms ease, translate 200ms ease;

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

  .btn-primary {
    background: var(--color-accent);
    color: var(--color-cta-text);

    &:hover {
      background: var(--color-accent-hover);
      box-shadow: var(--shadow-md);
    }

    &:active {
      translate: 0 1px;
    }
  }

  .btn-white {
    background: #FFFFFF;
    color: var(--color-accent);

    &:hover {
      box-shadow: var(--shadow-md);
    }

    &:active {
      translate: 0 1px;
    }
  }

  .btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--text-small);
  }

  .btn-lg {
    padding: 1rem 2rem;
    font-size: var(--text-body);
  }

  /* ── Cards ── */
  .card {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: box-shadow 300ms ease;

    &:hover {
      box-shadow: var(--shadow-md);
    }

    .card__number {
      position: absolute;
      inset-block-start: -0.75rem;
      inset-inline-start: -0.75rem;
      inline-size: 2rem;
      block-size: 2rem;
      display: grid;
      place-items: center;
      background: var(--color-accent);
      color: #fff;
      font-size: var(--text-small);
      font-weight: 700;
      border-radius: 50%;
    }

    .card__icon {
      margin-inline: auto;
      margin-block-end: 1rem;
    }

    .card__title {
      font-size: var(--text-h3);
      font-weight: 600;
      line-height: 1.3;
      margin-block-end: 0.5rem;
    }

    .card__text {
      color: var(--color-text-sec);
      font-size: var(--text-small);
      line-height: 1.5;
    }
  }

  /* ── Icon circle ── */
  .icon-circle {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-accent);
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  /* ── Badge ── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-small);
    color: var(--color-text-sec);

    svg {
      color: var(--color-accent);
      flex-shrink: 0;
    }
  }

  /* ── Feature ── */
  .feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;

    .feature__icon {
      margin-block-start: 0.125rem;
    }

    .feature__title {
      font-size: var(--text-h3);
      font-weight: 600;
      line-height: 1.3;
      margin-block-end: 0.25rem;
    }

    .feature__text {
      color: var(--color-text-sec);
      font-size: var(--text-small);
      line-height: 1.5;
    }
  }

  /* ── FAQ (native <details>) ── */
  .faq-list {
    max-inline-size: 720px;
    margin-inline: auto;
  }

  .faq-item {
    border-block-end: 1px solid var(--color-border);

    summary {
      padding-block: 1.25rem;
      font-size: var(--text-body);
      font-weight: 600;
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      min-block-size: 44px;
      transition: color 200ms ease;

      &::after {
        content: "";
        inline-size: 20px;
        block-size: 20px;
        flex-shrink: 0;
        background: currentColor;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        opacity: 0.5;
        transition: rotate 300ms ease;
      }

      &::-webkit-details-marker {
        display: none;
      }

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

    &[open] summary::after {
      rotate: 180deg;
    }

    p {
      padding-block-end: 1.25rem;
      color: var(--color-text-sec);
      line-height: 1.6;
    }
  }

  /* ── Scroll-driven reveal animation ── */
  @keyframes reveal {
    from {
      opacity: 0;
      translate: 0 30px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

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

  @supports not (animation-timeline: view()) {
    .reveal {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      animation: none;
      opacity: 1;
    }
  }

  /* ── CTA pulse animation ── */
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13,148,136,0.4); }
    50% { box-shadow: 0 0 0 12px rgba(13,148,136,0); }
  }

  .hero .btn-primary {
    animation: pulse 3s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero .btn-primary {
      animation: none;
    }
  }
}

/* ── SECTIONS ── */
@layer sections {

  /* ── Header ── */
  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background: var(--color-bg);
    block-size: 64px;
    transition: box-shadow 300ms ease;

    &.scrolled {
      box-shadow: var(--shadow-header);
    }

    .header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      block-size: 100%;
    }

    .header__logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--color-text);
      text-decoration: none;
    }

    .header__logo-img {
      block-size: 52px;
      inline-size: auto;
      flex-shrink: 0;
      border-radius: 50%;
    }

    .header__logo-text {
      font-size: 1.35rem;
      font-weight: 700;
      color: #1a1a1a;
    }

    .header__right {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .header__phone {
      display: none;
      align-items: center;
      gap: 0.5rem;
      font-size: var(--text-small);
      color: var(--color-text-sec);
      text-decoration: none;
      min-block-size: 44px;

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

      @media (min-width: 640px) {
        display: inline-flex;
      }
    }
  }

  /* ── Hero ── */
  .hero {
    padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5rem);

    .hero__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 2rem;

      @media (min-width: 768px) {
        flex-direction: row;
        text-align: start;
        gap: 4rem;
      }
    }

    .hero__content {
      flex: 1;
    }

    .hero__title {
      font-size: var(--text-hero);
      font-weight: 700;
      line-height: 1.15;
      margin-block-end: 1rem;
    }

    .hero__subtitle {
      font-size: var(--text-body);
      color: var(--color-text-sec);
      margin-block-end: 1.5rem;
      max-inline-size: 480px;

      @media (max-width: 767px) {
        margin-inline: auto;
      }
    }

    .hero__discount {
      margin-block-start: 0.75rem;
      font-size: var(--text-small);
      color: var(--color-accent);
      font-weight: 600;
    }

    .hero__badges {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-block-start: 2rem;

      @media (max-width: 767px) {
        justify-content: center;
      }
    }

    .hero__illustration {
      flex: 0 0 auto;
      inline-size: clamp(240px, 35vw, 400px);

      @media (max-width: 767px) {
        inline-size: min(100%, 360px);
        order: -1;
      }

      img {
        inline-size: 100%;
        block-size: auto;
        object-fit: contain;
      }
    }
  }

  /* ── Stats ── */
  .stats {
    padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
    background: var(--color-bg-alt);

    .stats__inner {
      display: flex;
      justify-content: center;
      gap: clamp(2rem, 3vw, 4rem);
      flex-wrap: wrap;
    }

    .stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .stat__number {
      font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
      font-weight: 700;
      color: var(--color-accent);
      line-height: 1.2;
    }

    .stat__label {
      font-size: var(--text-small);
      color: var(--color-text-sec);
      margin-block-start: 0.25rem;
    }
  }

  /* ── CTA section ── */
  .cta {
    background: var(--color-accent);
    color: #FFFFFF;
    text-align: center;

    .cta__title {
      font-size: var(--text-h2);
      font-weight: 700;
      line-height: 1.2;
      margin-block-end: 1.5rem;
    }

    .cta__sub {
      margin-block-start: 1rem;
      font-size: var(--text-small);
      opacity: 0.9;
    }
  }

  /* ── Footer ── */
  .footer {
    background: #0F172A;
    color: #CBD5E1;
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);

    .footer__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;

      @media (min-width: 768px) {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 3rem;
      }
    }

    .footer__brand {
      font-size: 1.25rem;
      font-weight: 700;
      color: #FFFFFF;
      margin-block-end: 0.5rem;
    }

    .footer__desc {
      font-size: var(--text-small);
      line-height: 1.5;
    }

    .footer__heading {
      font-size: var(--text-small);
      font-weight: 600;
      color: #FFFFFF;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-block-end: 1rem;
    }

    .footer__links {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;

      a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--text-small);
        min-block-size: 44px;
        color: #CBD5E1;
        transition: color 200ms ease;

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

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

        svg {
          flex-shrink: 0;
          opacity: 0.7;
        }
      }
    }

    .footer__bottom {
      margin-block-start: 2.5rem;
      padding-block-start: 1.5rem;
      border-block-start: 1px solid rgba(255, 255, 255, 0.1);

      p {
        font-size: var(--text-small);
        opacity: 0.6;
        text-align: center;
      }
    }
  }
}

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

/* ── Colored feature icons (un-layered to override @layer) ── */
.grid-features .feature:nth-child(1) .icon-circle { background: color-mix(in srgb, #0D9488, transparent 85%); color: #0D9488; }
.grid-features .feature:nth-child(2) .icon-circle { background: color-mix(in srgb, #2563EB, transparent 85%); color: #2563EB; }
.grid-features .feature:nth-child(3) .icon-circle { background: color-mix(in srgb, #D97706, transparent 85%); color: #D97706; }
.grid-features .feature:nth-child(4) .icon-circle { background: color-mix(in srgb, #7C3AED, transparent 85%); color: #7C3AED; }
.grid-features .feature:nth-child(5) .icon-circle { background: color-mix(in srgb, #DB2777, transparent 85%); color: #DB2777; }
.grid-features .feature:nth-child(6) .icon-circle { background: color-mix(in srgb, #059669, transparent 85%); color: #059669; }