/* ============================================
   Landing Page Styles
   Specific styles for the landing/home page
   ============================================ */

/* ------ Hero Section ------ */
.hero-section {
    /* Soft warm-white base. The dot-grid below adds personality without
       leaning on harsh gradients (frontend skill rule). */
    background: var(--gray-50);
    padding: 7rem 0 5rem;
    position: relative;
    overflow: hidden;
}

/* Subtle dot grid à la Vercel / Linear — defined as a CSS radial-gradient
   repeated on a 22px lattice. Stays very light (0.08 alpha) so text is
   never compromised. */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    z-index: 0;
    pointer-events: none;
}

/* Soft green halo anchoring the bottom-right of the hero. Brand colour
   reasserted as a visual signature (the logo green) without a heavy
   multi-stop gradient. */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -25%;
    right: -10%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--gray-900);
}

.hero-title .gradient-text {
    /* Single-family gradient — primary blue → blue-dark. No purple. */
    background: linear-gradient(135deg, var(--nexus-blue) 0%, var(--nexus-blue-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ------ Hero eyebrow chip (Slice L1) ------ */
/* Eyebrow uses the brand green — reinforces the logo identity and
   breaks the otherwise blue-heavy palette. */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    background: rgba(16, 185, 129, 0.1);
    color: #047857; /* --nexus-green darker shade for AA contrast */
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.hero-eyebrow i {
    font-size: 0.85rem;
    color: var(--nexus-green);
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Hero checklist — three honest claims that match the actual product. */
.hero-checklist {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.hero-checklist li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hero-checklist i {
    color: var(--nexus-green);
    font-size: 1rem;
}

/* ------ Hero product mockup (Slice L1) ------ */
.hero-mockup {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    /* Layered shadow: 1px crisp stroke + soft green-tinted halo
       (brand colour echo) + neutral drop. */
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 24px 60px -20px rgba(16, 185, 129, 0.25),
        0 12px 28px -12px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Subtle 3D tilt on large screens; reverts to flat on mobile. */
    transform: perspective(1600px) rotateY(-3deg) rotateX(1deg);
    transition: transform 0.5s ease;
}

.hero-mockup:hover {
    transform: perspective(1600px) rotateY(0deg) rotateX(0deg);
}

.hero-mockup-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.hero-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-mockup-dot--red    { background: #ef4444; }
.hero-mockup-dot--yellow { background: #f59e0b; }
.hero-mockup-dot--green  { background: #10b981; }

.hero-mockup-url {
    margin-left: 0.75rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    color: var(--gray-600);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-mockup-url i {
    color: var(--nexus-green);
    font-size: 0.7rem;
}

.hero-mockup-body {
    padding: 1.25rem 1.5rem 1.5rem;
    background: #fff;
}

.hero-mockup-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
}

.hero-mockup-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gray-600);
    border-radius: 0.375rem;
}

.hero-mockup-tab i {
    font-size: 0.85rem;
    color: var(--gray-400);
}

.hero-mockup-tab--active {
    background: var(--nexus-blue);
    color: #fff;
}

.hero-mockup-tab--active i {
    color: #fff;
}

.hero-mockup-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
}

.hero-mockup-section-header h4 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

.hero-mockup-section-header h4 i {
    color: var(--gray-500);
    font-size: 0.85rem;
}

.hero-mockup-count {
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.hero-mockup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.hero-mockup-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hero-mockup-card-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: space-between;
}

.hero-mockup-card h5 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-900);
}

.hero-mockup-card p {
    margin: 0;
    font-size: 0.72rem;
    color: var(--gray-500);
    line-height: 1.4;
}

.hero-mockup-card footer {
    display: flex;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: var(--gray-500);
    padding-top: 0.4rem;
    border-top: 1px solid var(--gray-100);
}

.hero-mockup-card footer span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.hero-mockup-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: rgba(37, 99, 235, 0.1);
    color: var(--nexus-blue);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

.hero-mockup-badge i {
    font-size: 0.65rem;
}

@media (max-width: 991.98px) {
    .hero-mockup {
        transform: none;
        margin-top: 2.5rem;
    }
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--gray-800);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.btn-hero-primary {
    background: linear-gradient(135deg, var(--nexus-blue) 0%, var(--nexus-blue-light) 100%);
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    text-decoration: none;
    display: inline-block;
}

.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
    color: white;
}

.btn-hero-secondary {
    border: 2px solid var(--gray-800);
    padding: 0.875rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    color: var(--gray-800);
    background: transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-hero-secondary:hover {
    background: var(--gray-800);
    color: white;
    transform: translateY(-2px);
}

/* ------ Trust Bar (Slice L5 — honest capability badges) ------ */
/* Lives between hero and personas. Visual rhythm:
   - Lighter vertical padding than personas/manifesto/pricing so it
     reads as a "transition band" rather than a full content section.
   - gray-50 base continues the unified canvas under the dark
     navbar / footer bookends — no halo, no dot grid here.
   - The 4 badges sit on white cards with a subtle border so they
     pop against the gray-50 without competing with the persona
     cards below (which carry coloured accents).
   Replaces the deleted fake-stats trust strip (purged in L0). */
.trust-bar-section {
    padding: 4rem 0 4.5rem;
    background: var(--gray-50);
    position: relative;
    border-top: 1px solid var(--gray-100);
}

.trust-bar-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2.5rem;
}

.trust-bar-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1.1rem;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.trust-bar-eyebrow i {
    font-size: 0.85rem;
    color: var(--nexus-green);
}

/* 4-up on desktop, 2x2 on tablet, stacked on mobile. */
.trust-bar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (max-width: 992px) {
    .trust-bar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .trust-bar-grid {
        grid-template-columns: 1fr;
    }
}

.trust-bar-item {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.625rem;
    padding: 1.5rem 1.25rem 1.6rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.trust-bar-item:hover {
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.14);
    transform: translateY(-2px);
}

/* Soft green icon chip — visual signature shared with the persona
   card icons. Keeps the brand identity consistent across L2/L5. */
.trust-bar-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    color: var(--nexus-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(16, 185, 129, 0.18);
}

.trust-bar-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.4rem;
    letter-spacing: -0.005em;
    line-height: 1.35;
}

.trust-bar-detail {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin: 0;
}

/* ------ Personas Section (Slice L2) ------ */
/* Replaces the prior 6-card generic-feature grid with three persona
   cards. Same gray-50 wash as the rest of the body; the cards do the
   visual work. Each card carries a single accent colour from the
   brand palette (blue/orange/green) — no rainbow, no purple. */
.personas-section {
    padding: 6rem 0;
    background: var(--gray-50);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

.section-subtitle {
    font-size: 1.125rem;
    text-align: center;
    color: var(--gray-500);
    margin-bottom: 3rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

.personas-header {
    margin-bottom: 0;
}

.personas-header .section-subtitle {
    margin-bottom: 3.5rem;
}

.personas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.persona-card {
    --persona-accent: var(--gray-700);
    --persona-accent-bg: var(--gray-100);

    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 2.25rem 1.75rem 2rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.persona-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -14px rgba(15, 23, 42, 0.2);
    border-color: var(--persona-accent);
}

/* 4px coloured bar at the top — quiet, doesn't pull attention from the
   headline but anchors the persona identity. */
.persona-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--persona-accent);
}

/* Per-persona accent colours — one from the brand palette each. */
.persona-card--builders {
    --persona-accent: var(--nexus-blue);
    --persona-accent-bg: rgba(37, 99, 235, 0.1);
}

.persona-card--marketers {
    --persona-accent: #d97706; /* warmer than --nexus-orange for AA on icon bg */
    --persona-accent-bg: rgba(245, 158, 11, 0.12);
}

.persona-card--ops {
    --persona-accent: var(--nexus-green);
    --persona-accent-bg: rgba(16, 185, 129, 0.1);
}

.persona-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.625rem;
    background: var(--persona-accent-bg);
    color: var(--persona-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
}

.persona-card-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--persona-accent);
    margin-bottom: 0.6rem;
}

.persona-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.persona-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--gray-100);
    padding-top: 1rem;
}

.persona-card-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.45rem 0;
    color: var(--gray-700);
    font-size: 0.93rem;
    line-height: 1.45;
}

.persona-card-bullets li i {
    color: var(--persona-accent);
    margin-top: 0.18rem;
    font-size: 1rem;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .personas-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ------ Manifesto Section (Slice L3 — replaces the comparison table) ------ */
/* Opinion cards instead of a feature-checkmark grid. Same gray-50 wash
   as the rest of the body; cards carry the visual weight. Each card
   states one architectural decision NovusPraxis has made (with a clear
   reference to a real shipped feature or an upcoming phase). */
.manifesto-section {
    padding: 6rem 0;
    background: var(--gray-50);
    position: relative;
    overflow: hidden;
}

/* Subtle dot grid — same idiom as hero + CTA so the body reads as one
   continuous canvas under the navbar / footer dark bookends. */
.manifesto-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    pointer-events: none;
}

.manifesto-section .container {
    position: relative;
    z-index: 1;
}

.manifesto-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.manifesto-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.manifesto-eyebrow i {
    color: var(--nexus-green);
    font-size: 0.85rem;
}

.manifesto-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 980px;
    margin: 0 auto;
}

.manifesto-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 2rem 2rem 1.85rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.manifesto-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(15, 23, 42, 0.2);
    border-color: rgba(16, 185, 129, 0.45);
}

.manifesto-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    background: rgba(16, 185, 129, 0.1);
    color: var(--nexus-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 1.1rem;
}

.manifesto-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
    margin: 0 0 0.85rem;
    letter-spacing: -0.005em;
}

.manifesto-card-accent {
    /* Sub-phrase in green that frames the opinion. */
    color: #047857;
}

.manifesto-card-body {
    color: var(--gray-700);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.manifesto-card-body strong {
    color: var(--gray-900);
    font-weight: 600;
}

.manifesto-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--nexus-blue);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: 1px;
}

@media (max-width: 767.98px) {
    .manifesto-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .manifesto-card {
        padding: 1.5rem;
    }
    .manifesto-card-title {
        font-size: 1.2rem;
    }
}

/* ------ Pricing Section ------ */
.pricing-section {
    padding: 5rem 0;
    background: var(--gray-50);
    position: relative;
    overflow: hidden;
}

/* Soft green halo anchoring the featured plan visually — keeps the
   pricing section connected to the brand identity used in hero / CTA
   without repeating the dot grid (the cards themselves carry the
   visual weight here). */
.pricing-section::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    height: 760px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.pricing-section .container {
    position: relative;
    z-index: 1;
}

/* Pricing header — matches manifesto/persona header rhythm so the
   page reads as one continuous editorial layout. */
.pricing-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem;
}

.pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.pricing-eyebrow i {
    font-size: 0.85rem;
    color: var(--nexus-green);
}

/* One-line tagline under each plan price — anchors the card with
   a persona ("who is this for?") before the feature list. Builds
   trust faster than feature lists alone. */
.pricing-tagline {
    color: var(--gray-600);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
    min-height: 2.6rem; /* Holds card heights aligned across the row */
}

/* "Soon" pill — honest signal that recurring tasks ship in Phase 3.
   Lying about the feature would be worse than flagging it. */
.pricing-soon {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    background: rgba(15, 23, 42, 0.06);
    color: var(--gray-600);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Footnote under the cards — reinforces "no lock-in" trust signal. */
.pricing-footnote {
    text-align: center;
    margin-top: 2.5rem;
    color: var(--gray-500);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pricing-footnote i {
    color: var(--nexus-green);
    font-size: 1rem;
}

.pricing-card {
    background: white;
    border-radius: 0.75rem;
    padding: 2.25rem 1.75rem;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--gray-200);
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.18);
    border-color: rgba(16, 185, 129, 0.4);
}

/* Featured plan — brand green identity instead of the generic blue
   highlight. Lifts visually with a tinted shadow + slightly thicker
   border so the user reads "this is the recommended pick". */
.pricing-card.featured {
    border: 1.5px solid var(--nexus-green);
    box-shadow:
        0 0 0 1px rgba(16, 185, 129, 0.18),
        0 18px 36px -16px rgba(16, 185, 129, 0.35);
}

.pricing-card.featured:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 1px rgba(16, 185, 129, 0.25),
        0 22px 42px -16px rgba(16, 185, 129, 0.45);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--nexus-green);
    color: white;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.pricing-plan {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pricing-price {
    font-size: 2.75rem;
    font-weight: 800;
    margin: 0.75rem 0 1.5rem;
    color: var(--gray-900);
    letter-spacing: -0.02em;
    line-height: 1;
}

.pricing-price .currency {
    font-size: 1.25rem;
    vertical-align: top;
    margin-right: 0.1rem;
    color: var(--gray-500);
}

.pricing-price .period {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-left: 0.15rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    /* Subtle separator from the price block above */
    border-top: 1px solid var(--gray-100);
    padding-top: 1.25rem;
}

.pricing-features li {
    padding: 0.5rem 0;
    color: var(--gray-700);
    font-size: 0.925rem;
    display: flex;
    align-items: center;
}

.pricing-features li::before {
    content: '\f26b'; /* bi-check-circle-fill from Bootstrap Icons */
    font-family: 'bootstrap-icons' !important;
    color: var(--nexus-green);
    margin-right: 0.6rem;
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}

/* ----- Pricing buttons — unified visual language ----- */
.btn-pricing {
    width: 100%;
    padding: 0.7rem 0.875rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 0.5rem;
    /* Lighter default than the previous dark-outline — feels less
       "Bootstrap default" and more in keeping with Linear / Stripe
       pricing buttons. */
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-800);
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    margin-top: 1rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-pricing:hover {
    border-color: var(--nexus-green);
    color: var(--nexus-green);
    background: rgba(16, 185, 129, 0.04);
    transform: translateY(-1px);
}

/* Featured CTA — solid brand green, matches navbar + hero-area
   accent so the single "recommended" call shares one identity. */
.btn-pricing.featured {
    background: var(--nexus-green);
    border-color: var(--nexus-green);
    color: white;
    box-shadow: 0 6px 18px -6px rgba(16, 185, 129, 0.5);
}

.btn-pricing.featured:hover {
    background: #0e9f6e;
    border-color: #0e9f6e;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(16, 185, 129, 0.6);
}

/* Trust Section CSS removed — fake stats deleted with the markup in Slice L0.
   Slice L5 ships an honest replacement (real claims + product visuals). */

/* ------ FAQ Section (Slice L4) ------ */
/* Visually quieter than the pricing/manifesto blocks on purpose —
   the eye needs a calm stretch between the dense pricing grid and
   the closing CTA. Same gray-50 base keeps the body unified, but
   no halo / no dot grid here. The green identity lives in the
   Q markers only. */
.faq-section {
    padding: 5rem 0 6rem;
    background: var(--gray-50);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--gray-100);
}

.faq-section .container {
    position: relative;
    z-index: 1;
    max-width: 1080px;
}

.faq-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem;
}

.faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.faq-eyebrow i {
    font-size: 0.85rem;
    color: var(--nexus-green);
}

/* 2-column grid on desktop, single column on mobile.
   No accordion: every answer is visible, no extra clicks. */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.faq-item {
    padding: 1.5rem 1.5rem 1.6rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.625rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.faq-item:hover {
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.14);
    transform: translateY(-2px);
}

.faq-question {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.55rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.faq-question i {
    color: var(--nexus-green);
    font-size: 1.05rem;
    line-height: 1.4;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.faq-answer {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.92rem;
    line-height: 1.6;
    /* Indent answer to align with question text after the icon */
    padding-left: 1.7rem;
}

/* ------ CTA Section ------ */
/* Light section that mirrors the hero's idiom (gray-50 base + dot grid +
   green halo). Per QA feedback we keep the body unified light all the
   way down and let the footer be the only dark "island". */
.cta-section {
    padding: 6rem 0;
    background: var(--gray-50);
    color: var(--gray-900);
    position: relative;
    overflow: hidden;
}

/* Same dot grid signature as the hero. */
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    pointer-events: none;
}

/* Soft green halo bottom-left — mirrors the hero's bottom-right halo
   so the page feels symmetric. */
.cta-section::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -10%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-card {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: rgba(16, 185, 129, 0.1);
    color: #047857; /* darker green for AA contrast on light bg */
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.cta-eyebrow i {
    font-size: 0.85rem;
    color: var(--nexus-green);
}

.cta-title {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

.cta-title-accent {
    /* Darker green shade so AA contrast holds on the light background. */
    color: #047857;
}

.cta-subtitle {
    font-size: 1.1rem;
    color: var(--gray-600);
    margin: 0 auto 2.25rem;
    max-width: 520px;
    line-height: 1.55;
}

.cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn-cta-primary {
    background: var(--nexus-green);
    border: 1px solid var(--nexus-green);
    color: #fff;
    padding: 0.85rem 1.6rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    /* Slightly softer shadow alpha than the dark-bg version — the
       light background already provides natural separation. */
    box-shadow: 0 6px 18px -6px rgba(16, 185, 129, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-cta-primary:hover,
.btn-cta-primary:focus {
    background: #0e9f6e;
    border-color: #0e9f6e;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(16, 185, 129, 0.55);
}

.btn-cta-secondary {
    color: var(--gray-700);
    font-weight: 500;
    text-decoration: none;
    padding: 0.85rem 0.25rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

.btn-cta-secondary:hover,
.btn-cta-secondary:focus {
    color: var(--nexus-blue);
    transform: translateX(2px);
}

/* Orphan .btn-cta rules from the pre-redesign version removed.
   The CTA section now uses .btn-cta-primary / .btn-cta-secondary
   exclusively. */

/* ------ Landing Page Navbar (Slice L1 — dark, matches footer) ------ */
/* Dark navbar (gray-900) intentionally mirrors the footer so the page
   feels bookended. Critical practical reason: the company logo is a
   green/white N + nodes design that disappears on a white surface but
   reads sharply against the dark wash. */
.landing-navbar {
    background: var(--gray-900);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    padding: 0.85rem 0;
}

/* Scrolled state — JS toggles .is-scrolled. */
.landing-navbar.is-scrolled {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.55);
}

.landing-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
}

.landing-navbar-logo {
    height: 44px;
    width: auto;
}

.landing-navbar-brand-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.landing-navbar .landing-navbar-link {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.landing-navbar .landing-navbar-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06);
}

.landing-navbar-signin {
    /* Sign in is a tertiary action — text-only, no border to keep the
       CTA the dominant visual call. */
    background: transparent !important;
}

.landing-navbar-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.14);
    margin: 0 0.5rem;
}

.landing-navbar-cta {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background: var(--nexus-green);
    border-color: var(--nexus-green);
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.25);
}

.landing-navbar-cta:hover,
.landing-navbar-cta:focus {
    background: #0e9f6e; /* slightly darker shade of --nexus-green */
    border-color: #0e9f6e;
    box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

.landing-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.18);
}

.landing-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.18rem rgba(16, 185, 129, 0.25);
}

.landing-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ------ Responsive Styles ------ */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.4rem;
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .hero-eyebrow {
        font-size: 0.75rem;
    }

    .hero-checklist {
        gap: 0.4rem 1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .pricing-price {
        font-size: 2.5rem;
    }

    .cta-title {
        font-size: 2rem;
    }

    .hero-mockup-grid {
        grid-template-columns: 1fr;
    }

    .hero-mockup-url {
        max-width: none;
    }
}

/* ------ Smooth Scroll ------ */
html {
    scroll-behavior: smooth;
}