@layer components {
  /* ══════════════════════════════════════════
     UTILITY: Gradient Text
  ══════════════════════════════════════════ */
  .gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ══════════════════════════════════════════
     HERO PLANES
  ══════════════════════════════════════════ */
  .hero__planes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .hero-plane {
    position: absolute;
    color: #60a5fa;
  }

  /* Contrail trail behind each plane via ::before */
  .hero-plane::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(to left, rgba(96, 165, 250, 0.5), transparent);
  }

  /* plane 1: mid-top, medium size, slow, ltr */
  .hero-plane--1 {
    top: 18%;
    width: 28px;
    opacity: 0.22;
    animation: plane-ltr 28s linear infinite;
    animation-delay: 0s;
  }
  .hero-plane--1::before { width: 80px; }

  /* plane 2: lower, smaller, faster, ltr */
  .hero-plane--2 {
    top: 55%;
    width: 18px;
    opacity: 0.14;
    animation: plane-ltr 20s linear infinite;
    animation-delay: -8s;
  }
  .hero-plane--2::before { width: 55px; }

  /* plane 3: upper area, rtl */
  .hero-plane--3 {
    top: 32%;
    width: 22px;
    opacity: 0.16;
    animation: plane-rtl 34s linear infinite;
    animation-delay: -14s;
  }
  .hero-plane--3::before {
    right: auto;
    left: 100%;
    background: linear-gradient(to right, rgba(96, 165, 250, 0.45), transparent);
    width: 65px;
  }

  /* plane 4: near bottom, tiny, very slow */
  .hero-plane--4 {
    top: 72%;
    width: 14px;
    opacity: 0.10;
    animation: plane-ltr 42s linear infinite;
    animation-delay: -20s;
  }
  .hero-plane--4::before { width: 40px; }

  /* plane 5: high up, large, ltr */
  .hero-plane--5 {
    top: 8%;
    width: 34px;
    opacity: 0.12;
    animation: plane-ltr 50s linear infinite;
    animation-delay: -35s;
  }
  .hero-plane--5::before { width: 100px; }

  /* ══════════════════════════════════════════
     GLASS CARD BASE
  ══════════════════════════════════════════ */
  .glass {
    background: var(--clr-glass-bg);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--clr-glass-border);
    border-radius: var(--radius-lg);
    transition: background var(--t-base), border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  }

  .glass:hover {
    background: var(--clr-glass-bg-hover);
    border-color: var(--clr-glass-border-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow-sm), var(--shadow-md);
  }

  /* ══════════════════════════════════════════
     BUTTONS
  ══════════════════════════════════════════ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.875rem 2rem;
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform var(--t-base), box-shadow var(--t-base), opacity var(--t-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
  }

  .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background var(--t-fast);
    border-radius: inherit;
  }

  .btn:hover::after {
    background: rgba(255, 255, 255, 0.07);
  }

  .btn:active {
    transform: scale(0.97);
  }

  .btn--primary {
    background: var(--gradient-accent);
    color: #fff;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
  }

  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.55);
  }

  .btn--ghost {
    background: var(--clr-glass-bg);
    color: var(--clr-text-muted);
    border: 1px solid var(--clr-glass-border);
    backdrop-filter: blur(12px);
  }

  .btn--ghost:hover {
    color: var(--clr-text);
    border-color: var(--clr-accent-1);
    transform: translateY(-2px);
  }

  .btn__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════════
     HERO SECTION
  ══════════════════════════════════════════ */
  .hero__eyebrow {
    margin-bottom: clamp(0.5rem, 1.5vh, 1rem);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-accent-3);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-full);
    background: rgba(99, 102, 241, 0.08);
  }

  .badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px #22d3ee;
    animation: pulse-dot 2s ease-in-out infinite;
  }

  .hero__title {
    font-size: clamp(2rem, 5vw + 1vh, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
  }

  .hero__subtitle {
    font-size: var(--text-base);
    color: var(--clr-text-muted);
    line-height: 1.65;
    max-width: 46ch;
    margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
  }

  .hero__rating {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
  }

  .stars {
    display: flex;
    gap: 2px;
    color: var(--clr-star);
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
  }

  .app-store-note {
    font-size: var(--text-xs);
    color: var(--clr-text-subtle);
  }

  /* ─── Phone Mockup ─── */
  .hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mockup-img {
    width: min(280px, 80vw);
    display: block;
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.25));
  }

  .mockup-img--tilted {
    animation: float-tilted 7s ease-in-out infinite;
    transform: rotate(6deg);
  }

  /* Larger mockup for desktop */
  @media (min-width: 768px) {
    .mockup-img {
      width: min(300px, 40vw);
    }
  }

  /* ══════════════════════════════════════════
     FEATURES SECTION
  ══════════════════════════════════════════ */
  .feature-card {
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    container-type: inline-size;
  }

  .feature-card__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }

  .feature-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--clr-text);
  }

  .feature-card__desc {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.7;
    flex: 1;
  }

  .feature-card__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--clr-accent-1);
    padding: var(--space-2xs) var(--space-sm);
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-full);
    width: fit-content;
  }

  /* ─── Radar icon animation ─── */
  .icon-radar {
    position: relative;
    width: 38px;
    height: 38px;
  }

  .icon-radar__ring {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(59, 130, 246, 0.35);
    border-radius: 50%;
  }

  .icon-radar__ring:nth-child(2) {
    inset: 25%;
    border-color: rgba(59, 130, 246, 0.5);
  }

  .icon-radar__sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
      from 0deg,
      rgba(59, 130, 246, 0.7) 0deg,
      rgba(59, 130, 246, 0.2) 50deg,
      transparent 70deg
    );
    animation: radar-spin 2.5s linear infinite;
  }

  .icon-radar__dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #22d3ee;
    border-radius: 50%;
    top: 30%;
    left: 55%;
    box-shadow: 0 0 6px #22d3ee;
    animation: blip 2.5s ease-in-out infinite;
  }

  /* ─── Plane icon animation ─── */
  .icon-plane {
    font-size: 28px;
    line-height: 1;
    animation: plane-fly 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(59,130,246,0.6));
  }

  /* ─── Passport icon animation ─── */
  .icon-passport {
    position: relative;
    width: 30px;
    height: 36px;
  }

  .icon-passport__book {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border-radius: 4px 8px 8px 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-passport__book::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
  }

  .icon-passport__stamp {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    border: 2px solid #22d3ee;
    border-radius: 50%;
    color: #22d3ee;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-bg);
    animation: stamp-pop 2s ease-in-out infinite;
  }

  /* ─── Bell / Notifications icon ─── */
  .icon-bell {
    font-size: 26px;
    line-height: 1;
    animation: bell-ring 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(99,102,241,0.6));
  }

  /* ══════════════════════════════════════════
     SOCIAL PROOF SECTION
  ══════════════════════════════════════════ */
  .social-proof__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
  }

  .stat-item {
    text-align: center;
  }

  .stat-item__number {
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: -0.04em;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
  }

  .stat-item__label {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    margin-top: var(--space-xs);
  }

  .review-card {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .review-card__stars {
    color: var(--clr-star);
    font-size: 1rem;
    letter-spacing: 0.1em;
  }

  .review-card__text {
    font-size: var(--text-base);
    color: var(--clr-text);
    line-height: 1.7;
    font-style: italic;
  }

  .review-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
  }

  .review-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
  }

  .review-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--clr-text);
  }

  .review-card__meta {
    font-size: var(--text-xs);
    color: var(--clr-text-subtle);
  }

  /* App Store Badge */
  .appstore-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    margin-top: var(--space-2xl);
  }

  .appstore-badge svg {
    width: 20px;
    height: 20px;
  }

  /* ══════════════════════════════════════════
     CTA SECTION
  ══════════════════════════════════════════ */
  .cta-section {
    position: relative;
    overflow: hidden;
  }

  .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 80% at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 70%),
      linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.04) 100%);
    pointer-events: none;
  }

  .cta-section__content {
    position: relative;
    z-index: 1;
  }

  .cta-section__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: var(--space-lg);
  }

  .cta-section__sub {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    line-height: 1.65;
    margin-bottom: var(--space-2xl);
    max-width: 44ch;
  }

  .cta-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
  }

  .cta-section__visual {
    display: flex;
    justify-content: center;
  }

  /* Second mockup — slightly tilted */
  .mockup-phone--tilted {
    animation: float-tilted 7s ease-in-out infinite;
    transform: rotate(6deg);
  }

  @media (max-width: 767px) {
    .cta-section__title {
      font-size: var(--text-2xl);
    }

    .cta-section__sub {
      font-size: var(--text-base);
      max-width: 100%;
      margin-inline: auto;
    }

    .cta-section__actions {
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    .cta-section__actions .btn {
      width: 100%;
      max-width: 320px;
    }

    .cta-section__visual .mockup-phone {
      width: min(200px, 55vw);
    }
  }

  /* ══════════════════════════════════════════
     FOOTER
  ══════════════════════════════════════════ */
  .footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
  }

  .footer__copy {
    font-size: var(--text-xs);
    color: var(--clr-text-subtle);
  }

  .footer__links {
    display: flex;
    gap: var(--space-xl);
  }

  .footer__links a {
    font-size: var(--text-xs);
    color: var(--clr-text-subtle);
    transition: color var(--t-fast);
  }

  .footer__links a:hover {
    color: var(--clr-accent-1);
  }

  /* ══════════════════════════════════════════
     STICKY CANCEL BAR
  ══════════════════════════════════════════ */
  .cancel-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: var(--space-md) var(--container-pad);
    background: linear-gradient(to top, rgba(5, 5, 15, 0.95) 0%, rgba(5, 5, 15, 0.7) 70%, transparent 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    pointer-events: none;
  }

  .cancel-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .cancel-bar__btn {
    font-size: var(--text-xs);
    color: var(--clr-text-subtle);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-fast);
    padding: var(--space-xs) var(--space-md);
  }

  .cancel-bar__btn:hover {
    color: var(--clr-text-muted);
  }

  /* ══════════════════════════════════════════
     REVEAL ON SCROLL
  ══════════════════════════════════════════ */
  [data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }

  [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  [data-reveal-delay="100"] { transition-delay: 100ms; }
  [data-reveal-delay="200"] { transition-delay: 200ms; }
  [data-reveal-delay="300"] { transition-delay: 300ms; }
  [data-reveal-delay="400"] { transition-delay: 400ms; }
  [data-reveal-delay="500"] { transition-delay: 500ms; }
}