@import url('catppuccin.css');

/* ── Header ── */
[slot="header"] {
    border-bottom: 1px solid var(--wa-color-surface-border);
}

.nq-header-inner {
    max-inline-size: 72rem;
    margin-inline: auto;
    inline-size: 100%;
}

/* ── Footer ── */
[slot="footer"] {
    border-top: 1px solid var(--wa-color-surface-border);
}

/* ── Main content wrapper ── */
.nq-main {
    max-inline-size: 72rem;
    margin-inline: auto;
    inline-size: 100%;
    box-sizing: border-box;
    padding-block-start: 0 !important;
}

/* ─────────────────────────────────────────────
   ENTRANCE ANIMATIONS
   ───────────────────────────────────────────── */

@keyframes nq-fade-up {
    from {
        opacity: 0;
        translate: 0 20px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

.nq-animate {
    opacity: 0;
    animation: nq-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nq-animate-delay-1 { animation-delay: 0.08s; }
.nq-animate-delay-2 { animation-delay: 0.18s; }
.nq-animate-delay-3 { animation-delay: 0.30s; }
.nq-animate-delay-4 { animation-delay: 0.44s; }
.nq-animate-delay-5 { animation-delay: 0.58s; }

/* ─────────────────────────────────────────────
   SCROLL REVEAL
   ───────────────────────────────────────────── */

.nq-reveal {
    opacity: 0;
    translate: 0 28px;
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--nq-delay, 0ms),
        translate 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--nq-delay, 0ms);
}

/* Applied by wa-intersection-observer intersect-class to parent,
   or directly to the element itself */
.nq-revealed .nq-reveal,
.nq-reveal.nq-revealed {
    opacity: 1;
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .nq-animate,
    .nq-reveal {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        translate: 0 0 !important;
    }
}

/* ─────────────────────────────────────────────
   HERO SECTION
   ───────────────────────────────────────────── */

.nq-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    padding: var(--wa-space-4xl) var(--wa-space-l) var(--wa-space-3xl);
    box-sizing: border-box;
}

/* Radial brand-gold glow behind the logo */
.nq-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 40% at 50% 0%,
        color-mix(in oklab, var(--wa-color-brand-50) 18%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 480px) {
    .nq-hero {
        padding-inline: var(--wa-space-m);
    }
}

/* Logo squircle — bigger, bolder */
.nq-logo-squircle {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wa-border-radius-xl, 1.25rem);
    background: var(--wa-color-brand-50);
    color: #2d1f00;
    margin-inline: auto;
    flex-shrink: 0;
    box-shadow:
        0 0 0 6px color-mix(in oklab, var(--wa-color-brand-50) 20%, transparent),
        0 16px 48px color-mix(in oklab, var(--wa-color-brand-50) 35%, transparent);
    cursor: pointer;
    transition: scale 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease;
}

.nq-logo-squircle:hover {
    scale: 1.08;
    box-shadow:
        0 0 0 8px color-mix(in oklab, var(--wa-color-brand-50) 25%, transparent),
        0 20px 64px color-mix(in oklab, var(--wa-color-brand-50) 50%, transparent);
}

.nq-logo-squircle:active {
    scale: 0.95;
}

/* Hero heading — dramatic scale */
.nq-hero-heading {
    font-size: clamp(2.75rem, 7vw + 1rem, 5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

/* Brand gold word — glow treatment */
.nq-gold {
    color: var(--wa-color-brand-50);
    text-shadow: 0 0 40px color-mix(in oklab, var(--wa-color-brand-50) 50%, transparent);
}

/* ─────────────────────────────────────────────
   COMING SOON BADGE
   ───────────────────────────────────────────── */

.nq-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-xs);
    background: color-mix(in oklab, var(--wa-color-brand-50) 12%, var(--wa-color-surface-raised));
    border: 1px solid color-mix(in oklab, var(--wa-color-brand-50) 45%, transparent);
    border-radius: 999px;
    padding: var(--wa-space-xs) var(--wa-space-m);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wa-color-brand-50);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   SECTION UTILITIES
   ───────────────────────────────────────────── */

.nq-section {
    padding: var(--wa-space-3xl) var(--wa-space-l);
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .nq-section {
        padding-inline: var(--wa-space-m);
    }
}

.nq-section-heading {
    font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-align: center;
}

.nq-section-sub {
    text-align: center;
    color: var(--wa-color-text-quiet);
    max-inline-size: 48ch;
    margin-inline: auto;
    font-size: 1.0625rem;
}

/* ─────────────────────────────────────────────
   FEATURE CARDS
   ───────────────────────────────────────────── */

.nq-feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 60rem) {
    .nq-feature-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.nq-feature-card {
    cursor: default;
    text-align: center;
    transition: translate 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;

}

.nq-feature-card:hover {
    translate: 0 -6px;
    box-shadow: 0 12px 40px color-mix(in oklab, var(--wa-color-brand-50) 25%, transparent);
}

.nq-feature-icon {
    width: 3.75rem;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wa-border-radius-l);
    background: color-mix(in oklab, var(--wa-color-brand-50) 15%, transparent);
    border: 1px solid color-mix(in oklab, var(--wa-color-brand-50) 35%, transparent);
    font-size: 1.6rem;
    color: var(--wa-color-brand-50);
    margin-inline: auto;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   HOW IT WORKS — STEPS
   ───────────────────────────────────────────── */

.nq-steps {
    position: relative;
}

/* Vertical connector line */
.nq-steps::before {
    content: '';
    position: absolute;
    inset-inline-start: 1.625rem; /* centre of the 3.25rem number circle */
    top: 1.625rem;
    bottom: 1.625rem;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--wa-color-brand-50),
        color-mix(in oklab, var(--wa-color-brand-50) 20%, transparent)
    );
    pointer-events: none;
}

.nq-step {
    display: flex;
    gap: var(--wa-space-l);
    align-items: flex-start;
    position: relative;
}

.nq-step-number {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wa-color-brand-50);
    color: #2d1f00;
    font-weight: 900;
    font-size: 1.125rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px color-mix(in oklab, var(--wa-color-brand-50) 40%, transparent);
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────
   CTA / WAITLIST SECTION
   ───────────────────────────────────────────── */

.nq-cta-section {
    border-radius: var(--wa-border-radius-xl, 1rem);
    background: var(--wa-color-brand-50);
    padding: var(--wa-space-3xl) var(--wa-space-xl);
    text-align: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Subtle noise/depth pattern on the CTA */
.nq-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 60% at 50% 100%,
        color-mix(in oklab, #2d1f00 20%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.nq-cta-section .nq-section-heading,
.nq-cta-section .nq-section-sub,
.nq-cta-section strong {
    color: #2d1f00;
}

.nq-cta-section .nq-section-sub {
    color: color-mix(in oklab, #2d1f00 75%, transparent);
}

/* Override wa-badge inside the gold CTA */
.nq-cta-section wa-badge {
    --wa-color-brand-fill-loud: #2d1f00;
    --wa-color-brand-on-loud: var(--wa-color-brand-50);
}

/* Override wa-input and wa-button inside the gold CTA */
.nq-cta-section wa-input {
    --wa-color-surface-raised: rgba(255 255 255 / 0.3);
    --wa-color-surface-default: rgba(255 255 255 / 0.2);
    --wa-color-surface-border: rgba(45 31 0 / 0.35);
    --wa-color-text-normal: #2d1f00;
    --wa-color-text-quiet: color-mix(in oklab, #2d1f00 70%, transparent);
}

.nq-cta-section wa-input::part(label) {
    color: #2d1f00;
}

.nq-cta-section wa-button[type="submit"] {
    --wa-color-brand-fill-loud: #2d1f00;
    --wa-color-brand-on-loud: var(--wa-color-brand-50);
}

@media (max-width: 480px) {
    .nq-cta-section {
        padding-inline: var(--wa-space-m);
        border-radius: var(--wa-border-radius-l);
    }
}