/* ================================================================
   Uqualizer Landing Page Styles
   ================================================================ */

:root {
    --primary:      #6C63FF;
    --primary-dark: #5A52D5;
    --accent:       #00D4AA;
    --bg:           #0A0A0F;
    --bg-card:      #13131C;
    --bg-card2:     #1A1A26;
    --text:         #FFFFFF;
    --text-muted:   #8B8B9E;
    --text-dim:     #555566;
    --border:       #2A2A3A;
    --danger:       #FF6B6B;
    --warning:      #FFD700;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background:  var(--bg);
    color:       var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
}

/* ----------------------------------------------------------------
   BUG 6 FIX: Added .skip-link styles
   (used in HTML but was entirely missing from CSS)
   ---------------------------------------------------------------- */
.skip-link {
    position:        absolute;
    top:             -40px;
    left:            0;
    background:      var(--primary);
    color:           white;
    padding:         8px 16px;
    font-size:       14px;
    font-weight:     700;
    z-index:         9999;
    transition:      top 0.2s;
    text-decoration: none;
    border-radius:   0 0 8px 0;
}

.skip-link:focus {
    top: 0;
}

/* NAV */
.nav {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    z-index:         100;
    background:      rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(12px);
    border-bottom:   1px solid var(--border);
}

.nav-inner {
    max-width:       1100px;
    margin:          0 auto;
    padding:         0 24px;
    height:          64px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.nav-logo {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   20px;
    font-weight: 800;
}

.nav-logo-icon {
    width:           32px;
    height:          32px;
    background:      linear-gradient(135deg, var(--primary), var(--accent));
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     900;
    font-size:       16px;
}

/* BUG 13 FIX: Added color fallback before gradient-clip text block */
.nav-logo-text {
    color:                   var(--primary);
    background:              linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.nav-links {
    display:     flex;
    align-items: center;
    gap:         28px;
}

.nav-links a {
    color:           var(--text-muted);
    text-decoration: none;
    font-size:       14px;
    font-weight:     500;
    transition:      color 0.2s;
}

.nav-links a:hover { color: var(--text); }

.nav-cta {
    background:    var(--primary) !important;
    color:         white !important;
    padding:       8px 18px !important;
    border-radius: 8px;
    font-weight:   700 !important;
}

.nav-cta:hover {
    background: var(--primary-dark) !important;
    color:      white !important;
}

/* GRADIENT TEXT */
/* BUG 13 FIX: Added color fallback before gradient-clip block */
.gradient-text {
    color:                   var(--primary);
    background:              linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* BUTTONS */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 24px;
    border-radius:   10px;
    font-size:       14px;
    font-weight:     700;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    transition:      all 0.2s;
    font-family:     inherit;
}

.btn-primary {
    background: var(--primary);
    color:      white;
    box-shadow: 0 0 24px rgba(108, 99, 255, 0.3);
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 0 32px rgba(108, 99, 255, 0.5);
    transform:  translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color:      var(--text);
    border:     1px solid var(--border);
}

.btn-ghost:hover {
    border-color: var(--primary);
    color:        var(--primary);
}

.btn-lg   { padding: 16px 32px; font-size: 16px; border-radius: 12px; }
.btn-full { width: 100%; justify-content: center; }

/* BUG 5 FIX: Added disabled button styles for dark theme
   (used by "Mobile App - Coming Soon" <button disabled>) */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity:        0.4;
    cursor:         not-allowed;
    pointer-events: none;
    transform:      none;
    box-shadow:     none;
}

/* BUG 4 FIX: Added :focus-visible styles to all interactive elements */
.btn:focus-visible,
.nav-links a:focus-visible,
.footer-links a:focus-visible,
.price-card a:focus-visible {
    outline:        2px solid var(--primary);
    outline-offset: 3px;
    border-radius:  4px;
}

/* SECTIONS */
section { padding: 96px 24px; }

.section-inner {
    max-width:  1100px;
    margin:     0 auto;
    text-align: center;
}

.section-tag {
    display:        inline-block;
    background:     rgba(108, 99, 255, 0.15);
    color:          var(--primary);
    padding:        4px 16px;
    border-radius:  20px;
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom:  16px;
}

.section-title {
    font-size:     42px;
    font-weight:   800;
    line-height:   1.2;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size:   18px;
    color:       var(--text-muted);
    max-width:   600px;
    margin:      0 auto 48px;
    line-height: 1.7;
}

/* BUG 11 FIX: Added scroll-margin-top to all anchor-target sections
   so headings are not hidden behind the fixed 64px nav bar
   when navigated to via anchor link */
#features,
#how,
#pricing,
#download {
    scroll-margin-top: 64px;
}

/* HERO */
.hero {
    padding-top:    160px;
    padding-bottom: 96px;
    padding-left:   24px;
    padding-right:  24px;
}

.hero-inner {
    max-width:  900px;
    margin:     0 auto;
    text-align: center;
}

.hero-badge {
    display:       inline-block;
    background:    rgba(0, 212, 170, 0.15);
    color:         var(--accent);
    padding:       6px 16px;
    border-radius: 20px;
    font-size:     13px;
    font-weight:   600;
    margin-bottom: 24px;
}

.hero-title {
    font-size:     64px;
    font-weight:   800;
    line-height:   1.1;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size:   20px;
    color:       var(--text-muted);
    max-width:   580px;
    margin:      0 auto 40px;
    line-height: 1.7;
}

.hero-actions {
    display:         flex;
    gap:             16px;
    justify-content: center;
    margin-bottom:   40px;
    flex-wrap:       wrap;
}

.hero-proof {
    display:         flex;
    align-items:     center;
    gap:             12px;
    justify-content: center;
    font-size:       14px;
    color:           var(--text-muted);
}

.proof-avatars { display: flex; }

.avatar {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      var(--bg-card2);
    border:          2px solid var(--bg);
    margin-left:     -8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       11px;
    font-weight:     700;
    color:           var(--text-muted);
}

.proof-avatars .avatar:first-child { margin-left: 0; }

/* STATS */
.stats-section {
    padding:       0;
    background:    var(--bg-card);
    border-top:    1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stats-inner {
    max-width:             1100px;
    margin:                0 auto;
    padding:               64px 24px;
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   40px;
    text-align:            center;
}

/* BUG 1 FIX: Removed dead .stat-number-card {} rule.
   The HTML fix renamed all instances to .stat-item,
   so this selector is now an orphan. */


/* BUG 13 FIX: Added color fallback to .stat-number */
.stat-number {
    font-size:               48px;
    font-weight:             800;
    color:                   var(--primary);
    background:              linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.stat-desc {
    font-size:  14px;
    color:      var(--text-muted);
    margin-top: 8px;
}

/* FEATURES */
.features-section { background: var(--bg); }

.features-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   24px;
    text-align:            left;
    margin-top:            48px;
}

.feature-card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       28px;
    transition:    border-color 0.2s, transform 0.2s;
}

.feature-card:hover {
    border-color: var(--primary);
    transform:    translateY(-2px);
}

.feature-icon {
    width:           48px;
    height:          48px;
    background:      linear-gradient(135deg, var(--primary), var(--accent));
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    margin-bottom:   16px;
}

.feature-card h3 {
    font-size:     18px;
    font-weight:   700;
    margin-bottom: 10px;
}

.feature-card p {
    color:       var(--text-muted);
    font-size:   14px;
    line-height: 1.6;
}

.feature-tag {
    display:        inline-block;
    margin-top:     16px;
    background:     rgba(108, 99, 255, 0.15);
    color:          var(--primary);
    padding:        3px 12px;
    border-radius:  20px;
    font-size:      11px;
    font-weight:    700;
}

/* HOW IT WORKS */
.how-section { background: var(--bg-card); }

.steps-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             24px;
    margin-top:      48px;
    flex-wrap:       wrap;
}

.step-card {
    background:    var(--bg-card2);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       32px 24px;
    max-width:     240px;
    text-align:    center;
    flex:          1;
    min-width:     180px;
}

/* BUG 13 FIX: Added color fallback to .step-num */
.step-num {
    font-size:               48px;
    font-weight:             800;
    color:                   var(--primary);
    background:              linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    margin-bottom:           12px;
}

.step-card h3 {
    font-size:     16px;
    font-weight:   700;
    margin-bottom: 8px;
}

.step-card p {
    font-size: 13px;
    color:     var(--text-muted);
}

.step-arrow {
    font-size:   24px;
    color:       var(--border);
    font-weight: 700;
    flex-shrink: 0;
}

/* CONTENT TYPES */
.types-section { background: var(--bg); }

/* BUG 7 FIX: Replaced hardcoded repeat(6, 1fr) with auto-fill +
   minmax so the grid handles any number of cards (now 7) gracefully
   without orphaning the last card on its own row.
   BUG 8 FIX: The responsive overrides for types-grid are also
   removed below since auto-fill handles all breakpoints naturally. */
.types-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap:                   16px;
    margin-top:            48px;
}

.type-card {
    background:     var(--bg-card);
    border:         1px solid var(--border);
    border-radius:  12px;
    padding:        20px 12px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    transition:     all 0.2s;
    cursor:         default;
}

.type-card:hover {
    border-color: var(--primary);
    transform:    translateY(-2px);
}

.type-icon {
    width:           44px;
    height:          44px;
    background:      linear-gradient(135deg,
        rgba(108,99,255,0.3),
        rgba(0,212,170,0.3));
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    font-weight:     900;
    color:           var(--accent);
}

.type-name {
    font-size:   12px;
    font-weight: 700;
}

.type-lufs {
    font-size:   11px;
    color:       var(--accent);
    font-weight: 600;
}

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

.pricing-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    margin-top:            48px;
    align-items:           start;
}

.price-card {
    background:    var(--bg-card2);
    border:        1px solid var(--border);
    border-radius: 20px;
    padding:       36px 28px;
    position:      relative;
    text-align:    center;
}

.price-featured {
    border-color: var(--primary);
    box-shadow:   0 0 40px rgba(108, 99, 255, 0.2);
}

.price-badge {
    position:      absolute;
    top:           -14px;
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--primary);
    color:         white;
    padding:       4px 20px;
    border-radius: 20px;
    font-size:     12px;
    font-weight:   700;
    white-space:   nowrap;
}

.price-name {
    font-size:      16px;
    font-weight:    700;
    color:          var(--text-muted);
    margin-bottom:  12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-amount {
    font-size:     44px;
    font-weight:   800;
    margin-bottom: 24px;
    line-height:   1;
}

.price-unit {
    font-size:   14px;
    color:       var(--text-muted);
    font-weight: 400;
}

.price-list {
    list-style:    none;
    text-align:    left;
    margin-bottom: 28px;
}

.price-list li {
    padding:       8px 0;
    font-size:     14px;
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    gap:           8px;
}

.price-list li:last-child { border-bottom: none; }

/* BUG 2 + 3 FIX: Removed ::before pseudo-elements that injected
   "Y" / "N" characters. The HTML fix now provides explicit
   <span aria-hidden="true">✓</span> / <span aria-hidden="true">✗</span>
   elements in each <li>. Style those spans directly instead. */
.price-list li.yes > span {
    color:           var(--accent);
    font-weight:     900;
    font-size:       14px;
    width:           18px;
    flex-shrink:     0;
    text-align:      center;
}

.price-list li.no > span {
    color:           var(--text-dim);
    font-weight:     900;
    font-size:       14px;
    width:           18px;
    flex-shrink:     0;
    text-align:      center;
}

.price-list li.no { color: var(--text-dim); }

/* DOWNLOAD */
.download-section { background: var(--bg); text-align: center; }

.download-buttons {
    display:         flex;
    gap:             16px;
    justify-content: center;
    margin-top:      40px;
    flex-wrap:       wrap;
}

/* FOOTER */
.footer {
    background:  var(--bg-card);
    border-top:  1px solid var(--border);
    padding:     48px 24px;
}

.footer-inner {
    max-width:      1100px;
    margin:         0 auto;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px;
}

.footer-logo {
    font-size:   22px;
    font-weight: 800;
}

.footer-links {
    display:         flex;
    gap:             28px;
    flex-wrap:       wrap;
    justify-content: center;
}

.footer-links a {
    color:           var(--text-muted);
    text-decoration: none;
    font-size:       13px;
    transition:      color 0.2s;
}

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

.footer-copy {
    font-size: 12px;
    color:     var(--text-dim);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero-title    { font-size: 42px; }
    .section-title { font-size: 30px; }
    .features-grid { grid-template-columns: 1fr; }
    .stats-inner   { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid  { grid-template-columns: 1fr; }
    /* BUG 8 FIX: Removed hardcoded types-grid override —
       auto-fill handles it naturally */
    .steps-row     { flex-direction: column; }
    .step-arrow    { transform: rotate(90deg); }
}

@media (max-width: 600px) {
    .hero-title { font-size: 32px; }

    /* BUG 10 FIX: Shrink nav links instead of hiding them entirely.
       A proper hamburger menu will be wired up in scripts.js. */
    .nav-links a:not(.nav-cta) { font-size: 12px; }

    /* BUG 8 FIX: Removed hardcoded types-grid override —
       auto-fill handles it naturally */
    .hero-actions     { flex-direction: column; align-items: center; }
    .download-buttons { flex-direction: column; align-items: center; }
}

/* ANIMATIONS */
/* BUG 9 FIX: Added .animate-target base state (hidden by default).
   scripts.js will attach an IntersectionObserver that adds
   the .animate class when elements scroll into view. */
.animate-target {
    opacity: 0;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate {
    animation: fadeInUp 0.5s ease forwards;
}

/* BUG 12 FIX: Respect prefers-reduced-motion for users with
   vestibular disorders. Disables all animations and transitions,
   and turns off smooth scrolling which can cause motion sickness. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }

    html { scroll-behavior: auto; }

    .animate-target { opacity: 1; }
}