/* Perfusion Mind shared staged visual system.
 * Extracted from the exact approved Phase 2 homepage without intentional visual change.
 */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css') layer(vendor);

@layer vendor, reset, tokens, base, page-foundation, shell, components, utilities, motion, responsive, page-layout;

@layer tokens {
    /* --- PERFUSION MIND STAGED DESIGN TOKENS --- */
    :root {
      --pm-canvas: #08090a;
      --pm-canvas-warm: #0f0b0c;
      --pm-surface: #111315;
      --pm-surface-elevated: #17191c;
      --pm-surface-strong: #201516;
      --pm-border: rgba(255, 255, 255, 0.1);
      --pm-border-strong: rgba(224, 108, 107, 0.42);
      --pm-foreground: #f7f7f5;
      --pm-foreground-soft: #b8b6b5;
      --pm-foreground-muted: #888687;
      --pm-foreground-inverse: #090a0b;
      --pm-accent: #b83a39;
      --pm-accent-strong: #992d2d;
      --pm-accent-coral: #e06c6b;
      --pm-accent-soft: rgba(184, 58, 57, 0.12);
      --pm-success: #72b48d;
      --pm-warning: #e0b45f;
      --pm-error: #e06c6b;
      --pm-font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --pm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --pm-type-display: clamp(3.25rem, 6.2vw, 6.5rem);
      --pm-type-h1: clamp(2.8rem, 5.4vw, 5.5rem);
      --pm-type-h2: clamp(2.25rem, 4vw, 4.25rem);
      --pm-type-h3: clamp(1.2rem, 2vw, 1.55rem);
      --pm-type-body: 1rem;
      --pm-type-small: 0.875rem;
      --pm-space-1: 0.25rem;
      --pm-space-2: 0.5rem;
      --pm-space-3: 0.75rem;
      --pm-space-4: 1rem;
      --pm-space-5: 1.5rem;
      --pm-space-6: 2rem;
      --pm-space-7: 3rem;
      --pm-space-8: 4rem;
      --pm-space-9: 6rem;
      --pm-radius-sm: 0.75rem;
      --pm-radius-md: 1.25rem;
      --pm-radius-lg: 2rem;
      --pm-radius-pill: 999px;
      --pm-shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.32);
      --pm-shadow-accent: 0 20px 60px rgba(184, 58, 57, 0.22);
      --pm-content: 1240px;
      --pm-motion-fast: 160ms;
      --pm-motion-base: 260ms;
      --pm-ease: cubic-bezier(0.22, 1, 0.36, 1);

      /* Transitional aliases keep the untouched Phase 2 sections stable. */
      --primary-red: var(--pm-accent);
      --primary-red-glow: rgba(184, 58, 57, 0.36);
      --bg-dark: var(--pm-canvas);
      --bg-darker: #050607;
      --bg-elevated: var(--pm-surface-elevated);
      --text-primary: var(--pm-foreground);
      --text-secondary: var(--pm-foreground-soft);
      --text-muted: var(--pm-foreground-muted);
      --accent-readable: var(--pm-accent-coral);
      --border-subtle: var(--pm-border);
      --glow-red: var(--pm-shadow-accent);
    }
}

@layer shell {
    /* --- SHARED GLOBAL SHELL --- */
    nav {
      background: rgba(8, 9, 10, 0.76);
      border-bottom-color: rgba(255, 255, 255, 0.07);
      backdrop-filter: blur(18px) saturate(140%);
      transition: background var(--pm-motion-base) var(--pm-ease),
                  border-color var(--pm-motion-base) var(--pm-ease),
                  box-shadow var(--pm-motion-base) var(--pm-ease);
    }

    nav.scrolled {
      background: rgba(8, 9, 10, 0.94);
      border-bottom-color: var(--pm-border);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
    }

    .nav-container {
      width: min(100%, calc(var(--pm-content) + 64px));
      max-width: none;
      min-height: 76px;
      padding: 12px 32px;
    }

    .nav-logo {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      font-family: var(--pm-font-display);
      font-size: 1.24rem;
      font-weight: 800;
      letter-spacing: -0.045em;
    }

    .nav-logo::after,
    .nav-links a::after {
      display: none;
    }

    .nav-links {
      gap: 4px;
    }

    .nav-links a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 10px 12px;
      border-radius: var(--pm-radius-pill);
      color: var(--pm-foreground-soft);
      font-size: 0.86rem;
      font-weight: 600;
      transition: color var(--pm-motion-fast) ease,
                  background var(--pm-motion-fast) ease,
                  border-color var(--pm-motion-fast) ease;
    }

    .nav-links a:hover {
      color: var(--pm-foreground);
      background: rgba(255, 255, 255, 0.05);
    }

    .nav-links .nav-download {
      margin-left: 6px;
      padding-inline: 18px;
      border: 1px solid var(--pm-border-strong);
      background: var(--pm-accent-soft);
      color: var(--pm-foreground);
    }

    .nav-links .nav-download:hover {
      border-color: var(--pm-accent-coral);
      background: rgba(184, 58, 57, 0.2);
    }

    .nav-toggle {
      min-width: 44px;
      min-height: 44px;
      border-color: var(--pm-border);
      border-radius: var(--pm-radius-sm);
      transition: color var(--pm-motion-fast) ease,
                  background var(--pm-motion-fast) ease,
                  border-color var(--pm-motion-fast) ease;
    }

    .nav-toggle:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: var(--pm-border-strong);
    }

    /* --- SHARED GLOBAL FOOTER --- */
    footer {
      background: var(--bg-darker);
      border-top: 1px solid var(--border-subtle);
      padding: 60px 40px 40px;
      text-align: center;
    }

    .footer-content {
      max-width: 1400px;
      margin: 0 auto;
    }

    .social-links {
      margin-bottom: 40px;
    }

    .social-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--bg-elevated);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      text-decoration: none;
      margin: 0 10px;
      font-size: 1.3em;
      transition: all 0.3s ease;
    }

    .social-links a:hover {
      background: var(--primary-red);
      color: white;
      border-color: var(--primary-red);
      transform: translateY(-4px);
      box-shadow: var(--glow-red);
    }

    .footer-links {
      margin-bottom: 30px;
    }

    .footer-links a {
      color: var(--text-secondary);
      text-decoration: none;
      margin: 0 20px;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .footer-links a:hover {
      color: var(--primary-red);
    }

    .copyright {
      color: var(--text-muted);
      font-size: 0.9em;
      padding-top: 30px;
      border-top: 1px solid var(--border-subtle);
    }

    footer {
      padding: 0 40px;
      background: #08090a;
    }

    .footer-content {
      display: grid;
      grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.5fr);
      gap: 64px 80px;
      max-width: 1180px;
      margin: 0 auto;
      padding: 72px 0 36px;
      text-align: left;
    }

    .footer-brand .footer-wordmark {
      font-size: 1.25rem;
    }

    .footer-wordmark {
      color: var(--pm-foreground);
      font-weight: 800;
      letter-spacing: -0.035em;
      text-decoration: none;
    }

    .footer-wordmark-accent {
      color: var(--pm-accent-light);
    }

    .footer-brand p {
      max-width: 320px;
      margin-top: 18px;
      color: var(--pm-muted);
      font-size: 0.88rem;
      line-height: 1.7;
    }

    .footer-navigation {
      position: static;
      inset: auto;
      z-index: auto;
      display: grid;
      width: auto;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      transition: none;
    }

    .footer-navigation div {
      display: grid;
      align-content: start;
      gap: 11px;
    }

    .footer-navigation strong {
      margin-bottom: 5px;
      color: var(--pm-foreground);
      font-size: 0.74rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .footer-navigation a {
      color: var(--pm-muted);
      font-size: 0.86rem;
      text-decoration: none;
    }

    .footer-navigation a:hover {
      color: var(--pm-foreground);
    }

    .footer-bottom {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding-top: 28px;
      border-top: 1px solid var(--pm-border);
      color: var(--pm-muted);
      font-size: 0.78rem;
      line-height: 1.6;
    }

    .footer-bottom p {
      margin: 0;
    }
}

@layer components {
    .btn {
      min-height: 48px;
      padding: 14px 24px;
      border-radius: var(--pm-radius-pill);
      font-size: 0.94rem;
      font-weight: 700;
      line-height: 1.1;
      transition: transform var(--pm-motion-fast) ease,
                  color var(--pm-motion-fast) ease,
                  background var(--pm-motion-fast) ease,
                  border-color var(--pm-motion-fast) ease,
                  box-shadow var(--pm-motion-fast) ease;
    }

    .btn-primary {
      background: var(--pm-accent);
      box-shadow: 0 12px 32px rgba(184, 58, 57, 0.24);
    }

    .btn-primary::before {
      display: none;
    }

    .btn-primary:hover {
      background: #c64442;
      box-shadow: 0 16px 38px rgba(184, 58, 57, 0.3);
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.025);
      border-color: var(--pm-border);
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.065);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .pm-store-actions,
    .store-badges {
      justify-content: flex-start;
      gap: 12px;
    }

    .store-badges a {
      min-width: 44px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      border-radius: 9px;
    }

    .store-badges img {
      height: 48px;
      filter: brightness(0.96);
      transition: transform var(--pm-motion-fast) ease,
                  filter var(--pm-motion-fast) ease;
    }

    .store-badges img:hover {
      transform: translateY(-2px);
      filter: brightness(1);
    }

    .hero-visual-frame,
    .pm-product-frame {
      position: relative;
      width: min(100%, 510px);
      aspect-ratio: 1 / 1;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: clamp(28px, 4vw, 52px);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
        rgba(15, 11, 12, 0.62);
      box-shadow: var(--pm-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }

    /* Reusable shared component primitives extracted after homepage approval. */
    .pm-section-intro {
      max-width: 760px;
      display: grid;
      gap: var(--pm-space-4);
    }

    .pm-section-intro[data-align='center'] {
      margin-inline: auto;
      text-align: center;
    }

    .pm-callout-band {
      padding: clamp(24px, 4vw, 44px);
      border-block: 1px solid var(--pm-border);
      background: var(--pm-canvas-warm);
    }

    .pm-feature-card {
      padding: clamp(24px, 3vw, 36px);
      border: 1px solid var(--pm-border);
      border-radius: var(--pm-radius-md);
      background: var(--pm-surface);
    }

    .pm-accordion {
      border-bottom: 1px solid var(--pm-border);
    }

    .pm-accordion summary {
      min-height: 56px;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-weight: 700;
    }

    .pm-disclosure-callout {
      padding: var(--pm-space-5);
      border-left: 2px solid var(--pm-accent);
      background: var(--pm-accent-soft);
      color: var(--pm-foreground-soft);
    }
}

@layer utilities {
    #features,
    #exam-review,
    #showcase,
    #comparison,
    #faq {
      scroll-margin-top: 80px;
    }
}

@layer motion {
    /* --- SCROLL ANIMATIONS --- */
    .js .fade-in {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s ease;
    }

    .js .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
}

@layer responsive {
    @media (max-width: 768px) {
      .js .fade-in,
      .js .fade-in.visible {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }



    @media (max-width: 1050px) {
      .nav-toggle {
        display: inline-flex;
      }

      .nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 24px 22px;
        background: rgba(8, 9, 10, 0.98);
        border-bottom: 1px solid var(--pm-border);
        box-shadow: 0 24px 44px rgba(0, 0, 0, 0.42);
      }

      .js .nav-links {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity var(--pm-motion-fast) ease,
                    transform var(--pm-motion-fast) ease,
                    visibility var(--pm-motion-fast) ease;
      }

      .js .nav-links.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      html:not(.js) .nav-toggle {
        display: none;
      }

      html:not(.js) #navbar {
        position: static;
      }

      html:not(.js) .nav-container {
        flex-wrap: wrap;
      }

      html:not(.js) .nav-links {
        position: static;
        width: 100%;
        flex-flow: row wrap;
        justify-content: center;
        padding: 8px 0 12px;
        background: transparent;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
      }

      html:not(.js) .nav-links a {
        width: auto;
        flex: 1 1 auto;
        text-align: center;
      }

      html:not(.js) .nav-links .nav-download {
        align-self: center;
        margin: 0;
      }

      .nav-links a {
        width: 100%;
        min-height: 48px;
        padding: 12px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 0;
      }

      .nav-links .nav-download {
        width: auto;
        align-self: flex-start;
        margin: 10px 0 0;
        padding-inline: 18px;
        border: 1px solid var(--pm-border-strong);
        border-radius: var(--pm-radius-pill);
      }

    }

    @media (max-width: 1050px) {
      .footer-content {
        grid-template-columns: 1fr;
        gap: 44px;
      }

      .footer-navigation {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      footer {
        padding-inline: 20px;
      }

      .footer-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 22px;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }
}