/* RESET & ROOT */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --black: #080a0e;
    --black2: #0d1017;
    --black3: #131820;
    --black4: #1a2030;
    --lime: #b8ff3c;
    --lime2: #ceff72;
    --lime-dim: rgba(184, 255, 60, 0.08);
    --lime-glow: rgba(184, 255, 60, 0.2);
    --lime-border: rgba(184, 255, 60, 0.2);
    --white: #ffffff;
    --grey: #8892a0;
    --grey2: #5a6478;
    --grey3: #2e3648;
    --border: rgba(255, 255, 255, 0.07);
    --border2: rgba(255, 255, 255, 0.12);
    --shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
    --shadow2: 0 16px 64px rgba(0, 0, 0, 0.5);
    --green: #22c55e;
    --green-dim: rgba(34, 197, 94, 0.1);
    --orange: #ff8c00;
    --orange-dim: rgba(255, 140, 0, 0.1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none
}

/* ---- NAV ---- */
/* ---- NAV ---- */
.site-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(8, 10, 14, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 0 5%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-logo-mark svg {
    width: 16px;
    height: 16px;
}

.nav-brand-name {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.5px;
}

.nav-brand-name span {
    color: var(--lime);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.nav-menu a {
    font-size: 0.875rem;
    color: var(--grey);
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-weight: 400;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.nav-menu a:hover {
    background: var(--black3);
    color: var(--white);
}

.nav-menu a.active {
    color: var(--lime);
    font-weight: 500;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
}

.btn-ghost-nav {
    font-size: 0.875rem;
    color: var(--grey);
    text-decoration: none;
    padding: 0.45rem 1rem;
    border: 1px solid var(--border2);
    border-radius: 7px;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-ghost-nav:hover {
    color: var(--white);
    background: var(--black3);
}

.btn-nav-cta {
    font-size: 0.875rem;
    color: var(--black);
    text-decoration: none;
    padding: 0.5rem 1.2rem;
    border-radius: 7px;
    font-weight: 600;
    background: var(--lime);
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-nav-cta:hover {
    background: var(--lime2);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px var(--lime-glow);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--black2);
    border-bottom: 1px solid var(--border);
    padding: 1rem 5% 1.5rem;
    z-index: 199;
    flex-direction: column;
    gap: 0.3rem;
}

.mobile-menu a {
    font-size: 0.95rem;
    color: var(--grey);
    text-decoration: none;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    display: block;
}

.mobile-menu a:hover,
.mobile-menu a.active {
    background: var(--black3);
    color: var(--lime);
}

.mobile-menu .mob-cta {
    background: var(--lime);
    color: var(--black);
    text-align: center;
    margin-top: 0.5rem;
    font-weight: 600;
}

.mobile-menu.open {
    display: flex;
}

@media(max-width:900px) {
    .nav-menu {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .btn-ghost-nav {
        display: none;
    }
}

@media(max-width:480px) {
    .nav-brand-name {
        font-size: 1rem;
    }
}

/* ---- SHARED BUTTONS ---- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--lime);
    color: var(--black);
    padding: 0.9rem 2.2rem;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--lime2);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--lime-glow)
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--grey);
    padding: 0.9rem 1.8rem;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--border2);
    transition: all 0.2s;
}

.btn-outline:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.25)
}

/* ---- SHARED SECTION LABELS ---- */
.section-tag {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lime);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.section-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.section-sub {
    font-size: 1rem;
    color: var(--grey);
    line-height: 1.8;
    font-weight: 300;
}

/* ---- FOOTER ---- */
footer {
    background: var(--black2);
    border-top: 1px solid var(--border);
    padding: 5rem 5% 2.5rem
}

.footer-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-brand p {
    font-size: 0.85rem;
    color: var(--grey2);
    line-height: 1.7;
    margin-top: 1rem;
    max-width: 260px
}

.footer-col h4 {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey2);
    font-weight: 700;
    margin-bottom: 1.2rem;
    font-family: 'Syne', sans-serif;
}

.footer-col a {
    display: block;
    font-size: 0.875rem;
    color: var(--grey);
    text-decoration: none;
    margin-bottom: 0.7rem;
    transition: color 0.15s
}

.footer-col a:hover {
    color: var(--white)
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copy {
    font-size: 0.78rem;
    color: var(--grey2)
}

.footer-badges {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap
}

.footer-badge {
    font-size: 0.72rem;
    color: var(--grey2);
    border: 1px solid var(--border2);
    padding: 0.25rem 0.6rem;
    border-radius: 4px
}

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

@media(max-width:480px) {
    .footer-grid {
        grid-template-columns: 1fr
    }
}

/* ---- SCROLL REVEAL ---- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0)
}

.reveal-delay-1 {
    transition-delay: 0.1s
}

.reveal-delay-2 {
    transition-delay: 0.2s
}

.reveal-delay-3 {
    transition-delay: 0.3s
}

/* ---- SHARED NAV JS ---- */
/* (JS is in a shared <script> block at page bottom) */

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ---- ABOUT HERO ---- */
.about-hero {
    padding: 5.5rem 5% 5.5rem;
    position: relative;
    overflow: hidden;
}

.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 25%, transparent 100%);
    pointer-events: none;
}

.about-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -8%;
    width: 720px;
    height: 620px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.about-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(400px, 460px);
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    animation: blink-dot 2s infinite;
}

@keyframes blink-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.about-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.55rem, 4.4vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -2.4px;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    max-width: 660px;
}

.about-hero h1 em {
    color: var(--lime);
    font-style: normal;
}

.about-hero h1 span {
    color: var(--grey2);
}

.hero-copy {
    color: var(--grey);
    font-size: clamp(0.95rem, 1.6vw, 1.03rem);
    line-height: 1.82;
    font-weight: 300;
    max-width: 580px;
    margin-bottom: 2.3rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}


/* ---- ABOUT HERO PANEL ---- */
.about-panel {
    width: 100%;
    max-width: 460px;
    justify-self: end;
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.about-panel-head {
    padding: 0.9rem 1.1rem;
    background: var(--black3);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.panel-title {
    font-family: 'Syne', sans-serif;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.35;
}

.panel-status {
    color: var(--green);
    background: var(--green-dim);
    font-size: 0.66rem;
    font-weight: 800;
    padding: 0.18rem 0.55rem;
    border-radius: 50px;
    white-space: nowrap;
}

.about-panel-body {
    padding: 1.2rem;
}

.panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.panel-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
    min-width: 0;
}

.panel-code {
    color: var(--lime);
    font-family: 'Syne', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    margin-bottom: 0.55rem;
}

.panel-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 0.95rem;
    margin-bottom: 0.32rem;
}

.panel-card p {
    color: var(--grey);
    font-size: 0.74rem;
    line-height: 1.6;
}

.panel-card.wide {
    grid-column: 1/-1;
    background: linear-gradient(135deg, rgba(184, 255, 60, 0.06), var(--black3) 65%);
    border-color: var(--lime-border);
}


/* ---- ABOUT STATS STRIP ---- */
.stats-strip {
    padding: 3.5rem 5%;
    background: var(--lime);
}

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

.stat-item {
    padding: 1rem;
}

.stat-value {
    font-family: 'Syne', sans-serif;
    font-size: 2.7rem;
    font-weight: 800;
    color: var(--black);
    line-height: 1;
    letter-spacing: -2px;
}

.stat-label {
    margin-top: 0.45rem;
    color: rgba(8, 10, 14, 0.62);
    font-size: 0.82rem;
    font-weight: 700;
}


/* ---- ABOUT STORY ---- */
.story {
    padding: 7rem 5%;
    background: var(--black);
}

.story-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
    align-items: start;
}

.story-copy p {
    color: var(--grey);
    line-height: 1.9;
    font-size: 0.96rem;
    margin-bottom: 1.15rem;
}

.story-card {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 22px;
    padding: 2rem;
    box-shadow: var(--shadow);
}

.story-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.35rem;
    letter-spacing: -0.6px;
    margin-bottom: 1rem;
}

.story-list {
    display: grid;
    gap: 1rem;
}

.story-list-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0.9rem;
    align-items: start;
}

.story-code {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.story-list-item h4 {
    font-family: 'Syne', sans-serif;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.story-list-item p {
    color: var(--grey);
    font-size: 0.82rem;
    line-height: 1.65;
}


/* ---- ABOUT MISSION ---- */
.mission {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.mission-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.center-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 4rem;
}

.center-head .section-sub {
    margin: 0 auto;
}

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

.mission-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    transition: all 0.2s;
}

.mission-card:hover {
    border-color: var(--lime-border);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.mission-code {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 1.1rem;
}

.mission-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.12rem;
    margin-bottom: 0.5rem;
}

.mission-card p {
    color: var(--grey);
    font-size: 0.86rem;
    line-height: 1.75;
}


/* ---- ABOUT WHY SECTION ---- */
.why {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.why-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 5rem;
    align-items: center;
}

.why-copy p {
    color: var(--grey);
    line-height: 1.85;
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

.why-table {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.why-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    border-bottom: 1px solid var(--border);
}

.why-row:last-child {
    border-bottom: none;
}

.why-key {
    padding: 1rem 1.2rem;
    background: var(--black3);
    color: var(--lime);
    font-family: 'Syne', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    border-right: 1px solid var(--border);
}

.why-val {
    padding: 1rem 1.2rem;
    color: var(--grey);
    font-size: 0.86rem;
    line-height: 1.65;
}


/* ---- ABOUT VALUES ---- */
.values {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.values-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-top: 3.5rem;
}

.value-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
}

.value-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.18rem;
    margin-bottom: 0.5rem;
}

.value-card p {
    color: var(--grey);
    line-height: 1.75;
    font-size: 0.88rem;
}


/* ---- ABOUT TEAM ---- */
.team {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.team-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 3.5rem;
}

.team-card {
    background: var(--black2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    transition: all 0.2s;
}

.team-card:hover {
    border-color: var(--lime-border);
    transform: translateY(-3px);
}

.team-avatar {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    margin-bottom: 1.2rem;
}

.team-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.team-role {
    color: var(--lime);
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.8rem;
}

.team-card p {
    color: var(--grey);
    font-size: 0.86rem;
    line-height: 1.75;
}


/* ---- ABOUT CTA ---- */
.cta-section {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
    text-align: center;
}

.cta-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 4rem;
    background: var(--black3);
    border: 1px solid var(--lime-border);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.cta-inner::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(184, 255, 60, 0.07) 0%, transparent 65%);
}

.cta-inner h2 {
    position: relative;
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.cta-inner h2 em {
    color: var(--lime);
    font-style: normal;
}

.cta-inner p {
    position: relative;
    color: var(--grey);
    line-height: 1.8;
    max-width: 540px;
    margin: 0 auto 2.4rem;
}

.cta-btns {
    position: relative;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-note {
    position: relative;
    font-size: 0.78rem;
    color: var(--grey2);
    margin-top: 1.2rem !important;
    margin-bottom: 0 !important;
}


/* ---- ABOUT RESPONSIVE ---- */
@media(max-width:1100px) {

    .about-hero-inner,
    .story-inner,
    .why-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: 760px;
    }

    .about-panel {
        max-width: 100%;
        justify-self: stretch;
    }

    .about-hero h1 {
        font-size: clamp(2.55rem, 7vw, 4.15rem);
        max-width: 100%;
    }

    .hero-copy {
        max-width: 100%;
    }
}

@media(max-width:900px) {

    .mission-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {
    .stats-inner {
        grid-template-columns: 1fr 1fr;
    }

    .panel-grid {
        grid-template-columns: 1fr;
    }

    .panel-card.wide {
        grid-column: auto;
    }
}

@media(max-width:520px) {
    .stats-inner {
        grid-template-columns: 1fr;
    }

    .why-row {
        grid-template-columns: 1fr;
    }

    .why-key {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .cta-inner {
        padding: 3rem 1.5rem;
    }

    .about-hero {
        padding: 8.5rem 5% 4rem;
    }

    .about-hero h1 {
        letter-spacing: -2px;
    }
}

/* ---- READING PROGRESS BAR ---- */
#progress-bar {
    position: fixed;
    top: 68px;
    left: 0;
    z-index: 199;
    height: 3px;
    width: 0%;
    background: var(--lime);
    transition: width 0.1s linear;
    box-shadow: 0 0 10px var(--lime-glow);
}

/* ---- ARTICLE HERO ---- */
.article-hero {
    padding: 5rem 5% 2.5rem;
    background: var(--black);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.article-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 30%, transparent 100%);
    pointer-events: none;
}

.article-hero::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.06) 0%, transparent 65%);
    pointer-events: none;
}

.article-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.6rem;
    font-size: 0.8rem;
    color: var(--grey2);
}

.breadcrumb a {
    color: var(--grey2);
    transition: color 0.15s
}

.breadcrumb a:hover {
    color: var(--lime)
}

.breadcrumb-sep {
    color: var(--grey3)
}

.breadcrumb-current {
    color: var(--grey)
}

/* Category + read time pills */
.article-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem
}

.tag-pill {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 50px;
}

.tag-pill.lime {
    color: var(--lime);
    background: var(--lime-dim);
    border: 1px solid var(--lime-border)
}

.tag-pill.muted {
    color: var(--grey);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border2)
}

.article-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -2.5px;
    line-height: 1.06;
    margin-bottom: 1.2rem;
}

.article-hero h1 em {
    color: var(--lime);
    font-style: normal
}

.article-deck {
    font-size: 1.1rem;
    color: var(--grey);
    line-height: 1.85;
    font-weight: 300;
    margin-bottom: 2rem;
}

/* Author meta bar */
.author-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--border);
    /* border-bottom: 1px solid var(--border); */
}

.author-info {
    display: flex;
    align-items: center;
    gap: 0.9rem
}

.author-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--lime-border);
    flex-shrink: 0;
}

.author-name a {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 700
}

.author-meta {
    color: var(--grey2);
    font-size: 0.75rem;
    margin-top: 0.15rem
}

.article-stats {
    display: flex;
    gap: 1.2rem;
    align-items: center
}

.stat-item {
    font-size: 0.78rem;
    color: var(--grey2);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.stat-item svg {
    width: 13px;
    height: 13px;
    opacity: 0.6
}

/* ---- ARTICLE LAYOUT ---- */
.article-layout {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    padding: 4rem 15px 6rem;
    align-items: start;
}

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

/* ---- ARTICLE BODY TYPOGRAPHY ---- */
/* This block styles all content inside [ARTICLE BODY] */
.article-content {
    min-width: 0
}

.article-content img {
    max-width: 100%;
    border-radius: 10px;
}

.article-content h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    margin: 3rem 0 1rem;
    padding-top: 0.5rem;
    color: var(--white);
}

.article-content h2:first-child {
    margin-top: 0
}

.article-content h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 2.2rem 0 0.8rem;
    color: var(--white);
}

.article-content p {
    color: var(--grey);
    font-size: 1.01rem;
    line-height: 1.9;
    margin-bottom: 1.4rem;
    font-weight: 300;
}

.article-content strong {
    color: var(--white);
    font-weight: 600
}

.article-content a {
    color: var(--lime);
    border-bottom: 1px solid var(--lime-border);
    transition: border-color 0.15s;
}

.article-content a:hover {
    border-color: var(--lime)
}

/* Lists */
.article-content ul,
.article-content ol {
    color: var(--grey);
    font-size: 1rem;
    line-height: 1.85;
    margin: 0 0 1.4rem 1.4rem;
    font-weight: 300;
}

.article-content li {
    margin-bottom: 0.5rem
}

.article-content ul li::marker {
    color: var(--lime)
}

.article-content ol li::marker {
    color: var(--lime);
    font-weight: 700;
    font-family: 'Syne', sans-serif
}

/* Blockquote */
.article-content blockquote {
    margin: 2rem 0;
    padding: 1.4rem 1.6rem;
    background: var(--lime-dim);
    border-left: 3px solid var(--lime);
    border-radius: 0 12px 12px 0;
}

.article-content blockquote p {
    color: var(--white);
    font-size: 1.05rem;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 0;
    line-height: 1.75;
}

.article-content blockquote cite {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--lime);
    font-style: normal;
    font-weight: 700;
}

/* Inline code */
.article-content code {
    background: var(--black3);
    border: 1px solid var(--border2);
    color: var(--lime);
    font-family: 'Courier New', monospace;
    font-size: 0.87em;
    padding: 0.1em 0.45em;
    border-radius: 5px;
}

/* Code block */
.article-content pre {
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: 1.5rem;
    margin: 1.8rem 0;
    overflow-x: auto;
}

.article-content pre code {
    background: none;
    border: none;
    color: #ceff72;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1.7;
}

/* Callout / tip boxes */
.callout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
    margin: 2rem 0;
}

.callout-lime {
    border-color: var(--lime-border);
    background: var(--lime-dim)
}

.callout-orange {
    border-color: rgba(255, 140, 0, 0.25);
    background: rgba(255, 140, 0, 0.06)
}

.callout-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.callout-lime .callout-icon {
    background: var(--lime-dim);
    color: var(--lime)
}

.callout-orange .callout-icon {
    background: var(--orange-dim);
    color: var(--orange)
}

.callout-body p {
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--grey);
}

.callout-lime .callout-body p {
    color: rgba(255, 255, 255, 0.85)
}

.callout-body strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase
}

.callout-lime .callout-body strong {
    color: var(--lime)
}

.callout-orange .callout-body strong {
    color: var(--orange)
}

/* Step / numbered process block */
.steps {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0
}

.step {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0;
    position: relative;
}

.step::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 52px;
    bottom: 0;
    width: 1px;
    background: var(--border2);
}

.step:last-child::before {
    display: none
}

.step-num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--black3);
    border: 1px solid var(--border2);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
    margin-top: 2px;
}

.step.active .step-num {
    background: var(--lime-dim);
    border-color: var(--lime-border);
    color: var(--lime)
}

.step-body {
    padding: 0 0 2.5rem 1.4rem
}

.step-body h4 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--white);
}

.step-body p {
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.75
}

/* Data / metric table inside article */
.data-table,
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8rem 0;
    font-size: 0.9rem;
}

.data-table thead tr,
.article-content thead tr {
    border-bottom: 1px solid var(--border2)
}

.data-table th,
.article-content th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey2);
    font-weight: 700;
}

.data-table td,
.article-content td {
    padding: 0.9rem 1rem;
    color: var(--grey);
    border-bottom: 1px solid var(--border);
}

.data-table tr:last-child td,
.article-content tr:last-child td {
    border-bottom: none
}

.data-table tr:hover td,
.article-content tr:hover td {
    background: rgba(255, 255, 255, 0.02)
}

.data-table .highlight {
    color: var(--lime);
    font-weight: 700;
    font-family: 'Syne', sans-serif
}

/* Divider */
.article-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2.5rem 0;
}

/* ---- SIDEBAR ---- */
.article-sidebar {
    position: sticky;
    top: 104px;
}

@media(max-width:1020px) {
    .article-sidebar {
        position: static
    }
}

.toc-box {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.toc-label {
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey2);
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
}

.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 400px;
    overflow: auto;
}

.toc-list li a {
    display: block;
    font-size: 0.83rem;
    color: var(--grey);
    padding: 0.35rem 0.6rem;
    border-radius: 7px;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}

.toc-list li a:hover,
.toc-list li.active a {
    color: var(--lime);
    border-left-color: var(--lime);
    background: var(--lime-dim);
}

.toc-list .toc-sub a {
    font-size: 0.78rem;
    padding-left: 1.1rem;
    color: var(--grey2);
}

/* Sidebar CTA */
.sidebar-cta {
    background: var(--black3);
    border: 1px solid var(--lime-border);
    border-radius: 18px;
    padding: 1.4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sidebar-cta::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
}

.sidebar-cta-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.9rem;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    position: relative;
}

.sidebar-cta h4 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    position: relative;
}

.sidebar-cta p {
    color: var(--grey);
    font-size: 0.8rem;
    line-height: 1.65;
    margin-bottom: 1rem;
    position: relative;
}

.sidebar-cta .btn-primary {
    font-size: 0.82rem;
    padding: 0.7rem 1.2rem;
    width: 100%
}

/* Share bar below sidebar CTA */
.share-box {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    padding: 1.2rem 1.4rem;
    margin-top: 1.2rem;
}

.share-label {
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey2);
    font-weight: 700;
    margin-bottom: 0.8rem;
    display: block;
}

.share-btns {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.82rem;
    color: var(--grey);
    background: var(--black3);
    border: 1px solid var(--border);
    padding: 0.55rem 0.9rem;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
}

.share-btn:hover {
    color: var(--white);
    border-color: var(--border2)
}

.share-btn svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    flex-shrink: 0
}

/* ---- ARTICLE FOOTER SECTIONS ---- */

/* Author bio box */
.author-bio {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 20px;
    padding: 2rem;
    margin: 4rem 0 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

@media(max-width:580px) {
    .author-bio {
        flex-direction: column
    }
}

.bio-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--lime-dim);
    border: 2px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}

.bio-content h4 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.bio-role {
    color: var(--lime);
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    display: block
}

.bio-content p {
    color: var(--grey);
    font-size: 0.88rem;
    line-height: 1.75;
    margin-bottom: 0
}

/* Related articles */
.related-section {
    padding: 6rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.related-inner {
    max-width: 1100px;
    margin: 0 auto
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 2.5rem;
}

@media(max-width:900px) {
    .related-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:580px) {
    .related-grid {
        grid-template-columns: 1fr
    }
}

.rel-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.2s;
}

.rel-card:hover {
    transform: translateY(-4px);
    border-color: var(--lime-border);
    box-shadow: var(--shadow)
}

.rel-thumb {
    height: 140px;
    background:
        radial-gradient(circle at 20% 20%, rgba(184, 255, 60, 0.12), transparent 28%),
        radial-gradient(circle at 80% 60%, rgba(184, 255, 60, 0.08), transparent 32%),
        var(--black4);
    border-bottom: 1px solid var(--border);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rel-thumb-code {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
}

.rel-body {
    padding: 1.3rem
}

.rel-cat {
    font-size: 0.66rem;
    color: var(--lime);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem
}

.rel-body h4 {
    font-family: 'Syne', sans-serif;
    font-size: 0.98rem;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin-bottom: 0.5rem
}

.rel-body h4 a {
    color: var(--white)
}

.rel-body h4 a:hover {
    color: var(--lime)
}

.rel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--grey2);
    font-size: 0.74rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border)
}

.rel-footer a {
    color: var(--lime);
    font-weight: 800
}

/* Back to blog bar */
.back-bar {
    background: var(--black);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 5%;
}

.back-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.back-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--grey);
    font-size: 0.88rem;
    transition: color 0.15s;
}

.back-link:hover {
    color: var(--lime)
}

.back-link svg {
    width: 14px;
    height: 14px
}

.back-bar-share {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--grey2)
}

.share-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--black3);
    border: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    cursor: pointer;
}

.share-icon:hover {
    border-color: var(--lime-border);
    color: var(--lime)
}

.share-icon svg {
    width: 14px;
    height: 14px;
    color: var(--grey)
}

.share-icon:hover svg {
    color: var(--lime)
}

/* Mobile TOC toggle */
.mobile-toc-toggle {
    display: none;
    width: 100%;
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--grey);
    cursor: pointer;
    text-align: left;
    margin-bottom: 1.5rem;
    justify-content: space-between;
    align-items: center;
}

.mobile-toc-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s
}

.mobile-toc-toggle.open svg {
    transform: rotate(180deg)
}

@media(max-width:1020px) {
    .mobile-toc-toggle {
        display: flex
    }

    .toc-box.mobile-hidden {
        display: none
    }
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.6rem;
    font-size: 0.8rem;
    color: var(--grey2);
    position: relative;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
}

.breadcrumb a {
    color: var(--grey2);
    transition: color 0.15s;
}

.breadcrumb a:hover {
    color: var(--lime);
}

.breadcrumb-sep {
    color: var(--grey3);
}

.breadcrumb-current {
    color: var(--grey);
}

/* ============================================================
   BLOG PAGE
   ============================================================ */

/* ---- BLOG HERO ---- */
.blog-hero {
    padding: 5rem 5% 5rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 25%, transparent 100%);
    pointer-events: none;
}

.blog-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.blog-hero-inner {
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.blog-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1.03;
    margin-bottom: 1.4rem;
}

.blog-hero h1 em {
    color: var(--lime);
    font-style: normal;
}

.blog-hero h1 span {
    color: var(--grey2);
}


/* ---- HERO EYEBROW ---- */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    animation: blink-dot 2s infinite;
}

@keyframes blink-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.hero-copy {
    font-size: clamp(1rem, 2vw, 1.12rem);
    color: var(--grey);
    max-width: 680px;
    margin: 0 auto 2.4rem;
    line-height: 1.85;
    font-weight: 300;
}


/* ---- BLOG SEARCH BOX ---- */
.search-box {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
}

.search-code {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}

.search-box input::placeholder {
    color: var(--grey2);
}

.search-box button {
    background: var(--lime);
    color: var(--black);
    border: none;
    border-radius: 9px;
    padding: 0.65rem 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s;
}

.search-box button:hover {
    background: var(--lime2);
}


/* ---- BLOG CATEGORY BAR ---- */
.category-bar {
    padding: 1.5rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 68px;
    z-index: 100;
}

.category-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.category-inner::-webkit-scrollbar {
    height: 3px;
}

.category-inner::-webkit-scrollbar-thumb {
    background: var(--grey3);
    border-radius: 4px;
}

.category-pill {
    white-space: nowrap;
    color: var(--grey);
    font-size: 0.82rem;
    border: 1px solid var(--border2);
    padding: 0.45rem 0.9rem;
    border-radius: 50px;
    transition: all 0.15s;
    cursor: pointer;
    background: transparent;
    font-family: 'Inter', sans-serif;
}

.category-pill:hover,
.category-pill.active {
    color: var(--black);
    background: var(--lime);
    border-color: transparent;
}


/* ---- FEATURED BLOG ARTICLE ---- */
.featured-section {
    padding: 7rem 5%;
    background: var(--black);
}

.featured-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.featured-card {
    /* display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0; */
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.featured-content {
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.featured-content::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(184, 255, 60, 0.06) 0%, transparent 65%);
}

.article-meta {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    position: relative;
}

.meta-pill {
    font-size: 0.68rem;
    color: var(--lime);
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    padding: 0.18rem 0.55rem;
    border-radius: 50px;
    font-weight: 800;
}

.meta-pill.muted {
    color: var(--grey);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border2);
}

.featured-content h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -1.6px;
    margin-bottom: 1rem;
    position: relative;
}

.featured-content p {
    color: var(--grey);
    line-height: 1.85;
    font-size: 0.96rem;
    margin-bottom: 1.8rem;
    position: relative;
}

.author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
}

.author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 0.74rem;
}

.author-name {
    color: var(--white);
    font-size: 0.84rem;
    font-weight: 700;
}

.author-role {
    color: var(--grey2);
    font-size: 0.72rem;
}


/* ---- FEATURED VISUAL PANEL ---- */
.featured-visual {
    background: var(--black3);
    border-left: 1px solid var(--border);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-panel {
    width: 100%;
    background: var(--black4);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
}

.visual-head {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.visual-head strong {
    font-family: 'Syne', sans-serif;
    font-size: 0.82rem;
}

.visual-status {
    color: var(--green);
    background: var(--green-dim);
    font-size: 0.66rem;
    font-weight: 800;
    padding: 0.16rem 0.55rem;
    border-radius: 50px;
}

.visual-body {
    padding: 1rem;
}

.visual-row {
    display: grid;
    grid-template-columns: 50px 1fr 60px;
    gap: 0.8rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.visual-row:last-child {
    border-bottom: none;
}

.visual-code {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
}

.visual-row h4 {
    font-family: 'Syne', sans-serif;
    font-size: 0.82rem;
    margin-bottom: 0.1rem;
}

.visual-row p {
    color: var(--grey2);
    font-size: 0.7rem;
}

.visual-score {
    color: var(--lime);
    font-weight: 800;
    text-align: right;
    font-size: 0.8rem;
}


/* ---- ARTICLES SECTION ---- */
.articles-section {
    padding: 5rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.articles-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    margin-bottom: 3.5rem;
}

.section-head .section-sub {
    margin-top: 0.8rem;
}

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

.article-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-4px);
    border-color: var(--lime-border);
    box-shadow: var(--shadow);
}

.article-thumb {
    border-bottom: 1px solid var(--border);
}

.article-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-position: top;
    object-fit: cover;
}

.thumb-code {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.thumb-line {
    height: 8px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
}

.thumb-line+.thumb-line {
    margin-top: 8px;
}

.thumb-line.small {
    width: 52%;
}

.thumb-line.medium {
    width: 74%;
}

.thumb-line.full {
    width: 100%;
}

.article-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-category a {
    font-size: 0.68rem;
    color: var(--lime);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.7rem;
}

.article-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.14rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 0.7rem;
}

.article-card h3 a {
    color: var(--white);
}

.article-card h3 a:hover {
    color: var(--lime);
}

.article-card p {
    color: var(--grey);
    font-size: 0.84rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
    flex: 1;
}

.article-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    color: var(--grey2);
    font-size: 0.76rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.read-link {
    color: var(--lime);
    font-weight: 800;
}


/* ---- BLOG NEWSLETTER ---- */
.newsletter {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.newsletter-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 5rem;
    align-items: center;
}

.newsletter-copy p {
    color: var(--grey);
    line-height: 1.85;
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

.newsletter-box {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 22px;
    padding: 2rem;
    box-shadow: var(--shadow2);
}

.newsletter-box h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 0.7rem;
    letter-spacing: -0.6px;
}

.newsletter-box p {
    color: var(--grey);
    font-size: 0.9rem;
    line-height: 1.75;
    margin-bottom: 1.4rem;
}

.newsletter-form {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.newsletter-form input {
    flex: 1;
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    color: var(--white);
    outline: none;
    font-family: 'Inter', sans-serif;
}

.newsletter-form input::placeholder {
    color: var(--grey2);
}

.newsletter-form button {
    background: var(--lime);
    color: var(--black);
    border: none;
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.newsletter-note {
    font-size: 0.76rem !important;
    color: var(--grey2) !important;
    margin-bottom: 0 !important;
}


/* ---- BLOG GUIDES ---- */
.guides {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.guides-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 3.5rem;
}

.guide-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    transition: all 0.2s;
}

.guide-card:hover {
    transform: translateY(-3px);
    border-color: var(--lime-border);
}

.guide-code {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    margin-bottom: 1.1rem;
}

.guide-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.08rem;
    margin-bottom: 0.5rem;
}

.guide-card p {
    color: var(--grey);
    font-size: 0.86rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.guide-card a {
    color: var(--lime);
    font-size: 0.84rem;
    font-weight: 800;
}


/* ---- CENTER HEAD UTILITY USED ON BLOG ---- */
.center-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

.center-head .section-sub {
    margin: 0 auto;
}


/* ---- BLOG RESPONSIVE ---- */
@media(max-width:900px) {
    .featured-card {
        grid-template-columns: 1fr;
    }

    .featured-visual {
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .article-grid {
        grid-template-columns: 1fr 1fr;
    }

    .newsletter-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .guide-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:760px) {
    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media(max-width:580px) {
    .article-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:560px) {
    .newsletter-form {
        flex-direction: column;
    }
}

@media(max-width:520px) {
    .search-box {
        flex-direction: column;
        align-items: stretch;
    }

    .search-code {
        display: none;
    }
}

/* ---- READING PROGRESS ---- */
#progress-bar {
    position: fixed;
    top: 68px;
    left: 0;
    z-index: 199;
    height: 3px;
    width: 0%;
    background: var(--lime);
    transition: width 0.1s linear;
    box-shadow: 0 0 10px var(--lime-glow);
}

/* ---- LEGAL PAGE HERO ---- */
.legal-hero {
    padding: 5rem 5% 5rem;
    background: var(--black);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, black 30%, transparent 100%);
    pointer-events: none;
}

.legal-hero::after {
    content: '';
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.05) 0%, transparent 65%);
    pointer-events: none;
}

.legal-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 1.4rem;
}

.legal-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -2.5px;
    line-height: 1.06;
    margin-bottom: 1.2rem;
}

.legal-hero h1 em {
    color: var(--lime);
    font-style: normal
}

.legal-hero-sub {
    font-size: 1rem;
    color: var(--grey);
    line-height: 1.85;
    font-weight: 300;
    margin-bottom: 2rem;
}

.legal-meta-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.2rem 0;
    border-top: 1px solid var(--border);
}

.legal-meta-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--grey2);
}

.legal-meta-item svg {
    width: 13px;
    height: 13px;
    opacity: 0.5
}

.legal-meta-item strong {
    color: var(--grey);
    font-weight: 500
}

/* ---- LEGAL LAYOUT ---- */
.legal-layout {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 5rem;
    padding: 5rem 5% 7rem;
    align-items: start;
}

@media(max-width:1020px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 3rem
    }
}

/* ---- LEGAL CONTENT TYPOGRAPHY ---- */
.legal-content {
    min-width: 0
}

.legal-content section {
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 3rem;
}

.legal-content section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.legal-content h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.2;
    margin-bottom: 1.2rem;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    font-size: 0.72rem;
    font-weight: 800;
    font-family: 'Syne', sans-serif;
    flex-shrink: 0;
}

.legal-content h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 2rem 0 0.7rem;
    color: var(--white);
}

.legal-content p {
    color: var(--grey);
    font-size: 0.97rem;
    line-height: 1.9;
    margin-bottom: 1.2rem;
    font-weight: 300;
}

.legal-content p:last-child {
    margin-bottom: 0
}

.legal-content strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600
}

.legal-content a {
    color: var(--lime);
    border-bottom: 1px solid var(--lime-border);
    transition: border-color 0.15s;
}

.legal-content a:hover {
    border-color: var(--lime)
}

.legal-content ul,
.legal-content ol {
    color: var(--grey);
    font-size: 0.97rem;
    line-height: 1.85;
    margin: 0.8rem 0 1.2rem 1.4rem;
    font-weight: 300;
}

.legal-content li {
    margin-bottom: 0.5rem
}

.legal-content ul li::marker {
    color: var(--lime)
}

.legal-content ol li::marker {
    color: var(--lime);
    font-weight: 700;
    font-family: 'Syne', sans-serif
}

/* Definition list */
.legal-content dl {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 14px;
    overflow: hidden;
    margin: 1.4rem 0;
}

.legal-content dt {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--lime);
    padding: 0.9rem 1.2rem 0.2rem;
}

.legal-content dd {
    font-size: 0.9rem;
    color: var(--grey);
    line-height: 1.75;
    padding: 0 1.2rem 0.9rem;
    border-bottom: 1px solid var(--border);
}

.legal-content dd:last-child {
    border-bottom: none
}

/* Highlight box */
.legal-highlight {
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    border-radius: 14px;
    padding: 1.3rem 1.5rem;
    margin: 1.6rem 0;
}

.legal-highlight p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.93rem;
    line-height: 1.8;
    margin-bottom: 0;
}

.legal-highlight strong {
    color: var(--lime)
}

/* Contact card */
.contact-card {
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.4rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.contact-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card-icon svg {
    width: 16px;
    height: 16px
}

.contact-card-body strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.3rem
}

.contact-card-body p {
    font-size: 0.85rem;
    margin-bottom: 0
}

.contact-card-body a {
    color: var(--lime);
    font-weight: 600
}

/* ---- SIDEBAR ---- */
.legal-sidebar {
    position: sticky;
    top: 104px
}

@media(max-width:1020px) {
    .legal-sidebar {
        position: static
    }
}

.toc-box {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.toc-label {
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey2);
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
}

.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem
}

.toc-list li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--grey);
    padding: 0.35rem 0.6rem;
    border-radius: 7px;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}

.toc-list li a:hover,
.toc-list li.active a {
    color: var(--lime);
    border-left-color: var(--lime);
    background: var(--lime-dim);
}

.toc-num {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    background: var(--black3);
    border: 1px solid var(--border2);
    color: var(--grey2);
    font-size: 0.62rem;
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toc-list li.active .toc-num {
    background: var(--lime-dim);
    border-color: var(--lime-border);
    color: var(--lime)
}

.sidebar-doc-info {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.doc-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}

.doc-info-row:last-child {
    border-bottom: none
}

.doc-info-row span:first-child {
    color: var(--grey2)
}

.doc-info-row span:last-child {
    color: var(--white);
    font-weight: 600
}

.sidebar-links {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    padding: 1.4rem;
}

.sidebar-links-label {
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey2);
    font-weight: 700;
    margin-bottom: 0.9rem;
    display: block;
}

.sidebar-link-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.83rem;
    color: var(--grey);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    transition: color 0.15s;
}

.sidebar-link-item:last-child {
    border-bottom: none
}

.sidebar-link-item:hover {
    color: var(--lime)
}

.sidebar-link-item svg {
    width: 13px;
    height: 13px;
    opacity: 0.5;
    flex-shrink: 0
}

/* Mobile TOC */
.mobile-toc-toggle {
    display: none;
    width: 100%;
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--grey);
    cursor: pointer;
    text-align: left;
    margin-bottom: 1.5rem;
    justify-content: space-between;
    align-items: center;
}

.mobile-toc-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s
}

.mobile-toc-toggle.open svg {
    transform: rotate(180deg)
}

@media(max-width:1020px) {
    .mobile-toc-toggle {
        display: flex
    }

    .toc-box.mobile-hidden {
        display: none
    }
}

/* ---- READING PROGRESS ---- */
#progress-bar {
    position: fixed;
    top: 68px;
    left: 0;
    z-index: 199;
    height: 3px;
    width: 0%;
    background: var(--lime);
    transition: width 0.1s linear;
    box-shadow: 0 0 10px var(--lime-glow);
}

/* ---- LEGAL PAGE HERO ---- */
.legal-hero {
    padding: 5rem 5% 5rem;
    background: var(--black);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, black 30%, transparent 100%);
    pointer-events: none;
}

.legal-hero::after {
    content: '';
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.05) 0%, transparent 65%);
    pointer-events: none;
}

.legal-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 1.4rem;
}

.legal-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -2.5px;
    line-height: 1.06;
    margin-bottom: 1.2rem;
}

.legal-hero h1 em {
    color: var(--lime);
    font-style: normal
}

.legal-hero-sub {
    font-size: 1rem;
    color: var(--grey);
    line-height: 1.85;
    font-weight: 300;
    margin-bottom: 2rem;
}

.legal-meta-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.2rem 0;
    border-top: 1px solid var(--border);
}

.legal-meta-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--grey2);
}

.legal-meta-item svg {
    width: 13px;
    height: 13px;
    opacity: 0.5
}

.legal-meta-item strong {
    color: var(--grey);
    font-weight: 500
}

/* ---- LEGAL LAYOUT ---- */
.legal-layout {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 5rem;
    padding: 5rem 5% 7rem;
    align-items: start;
}

@media(max-width:1020px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 3rem
    }
}

/* ---- LEGAL CONTENT TYPOGRAPHY ---- */
.legal-content {
    min-width: 0
}

.legal-content section {
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 3rem;
}

.legal-content section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.legal-content h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.2;
    margin-bottom: 1.2rem;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    font-size: 0.72rem;
    font-weight: 800;
    font-family: 'Syne', sans-serif;
    flex-shrink: 0;
}

.legal-content h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 2rem 0 0.7rem;
    color: var(--white);
}

.legal-content h3:first-child {
    margin-top: 0
}

.legal-content p {
    color: var(--grey);
    font-size: 0.97rem;
    line-height: 1.9;
    margin-bottom: 1.2rem;
    font-weight: 300;
}

.legal-content p:last-child {
    margin-bottom: 0
}

.legal-content strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600
}

.legal-content a {
    color: var(--lime);
    border-bottom: 1px solid var(--lime-border);
    transition: border-color 0.15s;
}

.legal-content a:hover {
    border-color: var(--lime)
}

.legal-content ul,
.legal-content ol {
    color: var(--grey);
    font-size: 0.97rem;
    line-height: 1.85;
    margin: 0.8rem 0 1.2rem 1.4rem;
    font-weight: 300;
}

.legal-content li {
    margin-bottom: 0.5rem
}

.legal-content ul li::marker {
    color: var(--lime)
}

.legal-content ol li::marker {
    color: var(--lime);
    font-weight: 700;
    font-family: 'Syne', sans-serif
}

/* Definition list */
.legal-content dl {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 14px;
    overflow: hidden;
    margin: 1.4rem 0;
}

.legal-content dt {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--lime);
    padding: 0.9rem 1.2rem 0.2rem;
}

.legal-content dd {
    font-size: 0.9rem;
    color: var(--grey);
    line-height: 1.75;
    padding: 0 1.2rem 0.9rem;
    border-bottom: 1px solid var(--border);
}

.legal-content dd:last-child {
    border-bottom: none
}

/* Highlight boxes */
.legal-highlight {
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    border-radius: 14px;
    padding: 1.3rem 1.5rem;
    margin: 1.6rem 0;
}

.legal-highlight p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.93rem;
    line-height: 1.8;
    margin-bottom: 0
}

.legal-highlight strong {
    color: var(--lime)
}

.legal-warning {
    background: rgba(255, 140, 0, 0.06);
    border: 1px solid rgba(255, 140, 0, 0.25);
    border-radius: 14px;
    padding: 1.3rem 1.5rem;
    margin: 1.6rem 0;
}

.legal-warning p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.93rem;
    line-height: 1.8;
    margin-bottom: 0
}

.legal-warning strong {
    color: var(--orange)
}

/* Plan table */
.plan-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6rem 0;
    font-size: 0.9rem;
}

.plan-table thead tr {
    border-bottom: 1px solid var(--border2)
}

.plan-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey2);
    font-weight: 700;
}

.plan-table td {
    padding: 0.9rem 1rem;
    color: var(--grey);
    border-bottom: 1px solid var(--border)
}

.plan-table tr:last-child td {
    border-bottom: none
}

.plan-table tr:hover td {
    background: rgba(255, 255, 255, 0.02)
}

.plan-table .highlight {
    color: var(--lime);
    font-weight: 700;
    font-family: 'Syne', sans-serif
}

/* Contact card */
.contact-card {
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.4rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.contact-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card-icon svg {
    width: 16px;
    height: 16px
}

.contact-card-body strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.3rem
}

.contact-card-body p {
    font-size: 0.85rem;
    margin-bottom: 0
}

.contact-card-body a {
    color: var(--lime);
    font-weight: 600
}

/* ---- SIDEBAR ---- */
.legal-sidebar {
    position: sticky;
    top: 104px
}

@media(max-width:1020px) {
    .legal-sidebar {
        position: static
    }
}

.toc-box {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.toc-label {
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey2);
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
}

.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem
}

.toc-list li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--grey);
    padding: 0.35rem 0.6rem;
    border-radius: 7px;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}

.toc-list li a:hover,
.toc-list li.active a {
    color: var(--lime);
    border-left-color: var(--lime);
    background: var(--lime-dim)
}

.toc-num {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    background: var(--black3);
    border: 1px solid var(--border2);
    color: var(--grey2);
    font-size: 0.62rem;
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toc-list li.active .toc-num {
    background: var(--lime-dim);
    border-color: var(--lime-border);
    color: var(--lime)
}

.sidebar-doc-info {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.doc-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}

.doc-info-row:last-child {
    border-bottom: none
}

.doc-info-row span:first-child {
    color: var(--grey2)
}

.doc-info-row span:last-child {
    color: var(--white);
    font-weight: 600
}

.sidebar-links {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    padding: 1.4rem;
}

.sidebar-links-label {
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey2);
    font-weight: 700;
    margin-bottom: 0.9rem;
    display: block;
}

.sidebar-link-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.83rem;
    color: var(--grey);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    transition: color 0.15s;
}

.sidebar-link-item:last-child {
    border-bottom: none
}

.sidebar-link-item:hover {
    color: var(--lime)
}

.sidebar-link-item svg {
    width: 13px;
    height: 13px;
    opacity: 0.5;
    flex-shrink: 0
}

/* Mobile TOC */
.mobile-toc-toggle {
    display: none;
    width: 100%;
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--grey);
    cursor: pointer;
    text-align: left;
    margin-bottom: 1.5rem;
    justify-content: space-between;
    align-items: center;
}

.mobile-toc-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s
}

.mobile-toc-toggle.open svg {
    transform: rotate(180deg)
}

@media(max-width:1020px) {
    .mobile-toc-toggle {
        display: flex
    }

    .toc-box.mobile-hidden {
        display: none
    }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* ---- CONTACT HERO ---- */
.contact-hero {
    padding: 5rem 5% 5rem;
    position: relative;
    overflow: hidden;
}

.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 25%, transparent 100%);
    pointer-events: none;
}

.contact-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -8%;
    width: 720px;
    height: 620px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.contact-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 520px);
    gap: 4.5rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.contact-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 4.5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -2.4px;
    line-height: 1.05;
    margin-bottom: 1.4rem;
    max-width: 620px;
}

.contact-hero h1 em {
    color: var(--lime);
    font-style: normal;
}

.contact-hero h1 span {
    color: var(--grey2);
}


/* ---- CONTACT HERO POINTS ---- */
.hero-points {
    display: grid;
    gap: 0.8rem;
    margin-top: 2rem;
    max-width: 560px;
}

.hero-point {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--grey);
    font-size: 0.88rem;
    line-height: 1.6;
}

.hero-point span {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 2px;
}


/* ---- CONTACT FORM CARD ---- */
.contact-form-card {
    width: 100%;
    max-width: 520px;
    justify-self: end;
    background: linear-gradient(160deg, rgba(184, 255, 60, 0.05) 0%, var(--black2) 42%);
    border: 1px solid var(--border2);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: var(--shadow2);
    position: relative;
    overflow: hidden;
}

.contact-form-card::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -140px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.form-head {
    position: relative;
    margin-bottom: 1.8rem;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid var(--border);
}

.form-badge {
    display: inline-flex;
    color: var(--lime);
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.65rem;
    border-radius: 50px;
    margin-bottom: 0.8rem;
}

.form-head h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.55rem;
    letter-spacing: -0.8px;
    margin-bottom: 0.45rem;
}

.form-head p {
    color: var(--grey);
    font-size: 0.86rem;
    line-height: 1.7;
    max-width: 520px;
}

.contact-form {
    position: relative;
    display: grid;
    gap: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.form-group.full {
    grid-column: 1/-1;
}

.form-group label {
    color: var(--grey);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-width: 0;
    background: rgba(8, 10, 14, 0.72);
    border: 1px solid var(--border2);
    border-radius: 12px;
    color: var(--white);
    padding: 0.85rem 1rem;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    transition: all 0.15s;
}

.form-group select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--grey) 50%),
        linear-gradient(135deg, var(--grey) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 13px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.4rem;
}

.form-group textarea {
    min-height: 125px;
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--lime-border);
    background: rgba(8, 10, 14, 0.94);
    box-shadow: 0 0 0 4px rgba(184, 255, 60, 0.055);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--grey2);
}

.form-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.form-bottom p {
    color: var(--grey2);
    font-size: 0.74rem;
    line-height: 1.55;
}

.form-submit {
    white-space: nowrap;
    padding: 0.85rem 1.6rem;
}


/* ---- CONTACT OPTIONS ---- */
.contact-options {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.contact-options-inner {
    max-width: 1100px;
    margin: 0 auto;
}

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

.option-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    transition: all 0.2s;
}

.option-card:hover {
    border-color: var(--lime-border);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.option-code {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 1.1rem;
}

.option-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.12rem;
    margin-bottom: 0.5rem;
}

.option-card p {
    color: var(--grey);
    font-size: 0.86rem;
    line-height: 1.75;
    margin-bottom: 1.2rem;
}

.option-link {
    color: var(--lime);
    font-size: 0.84rem;
    font-weight: 800;
}


/* ---- RESPONSE STRIP ---- */
.response-strip {
    padding: 3.5rem 5%;
    background: var(--lime);
}

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

.response-item {
    padding: 1rem;
}

.response-value {
    font-family: 'Syne', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--black);
    line-height: 1;
    letter-spacing: -2px;
}

.response-label {
    margin-top: 0.45rem;
    color: rgba(8, 10, 14, 0.62);
    font-size: 0.82rem;
    font-weight: 700;
}


/* ---- SUPPORT SECTION ---- */
.support-section {
    padding: 7rem 5%;
    background: var(--black);
}

.support-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
    align-items: start;
}

.support-copy p {
    color: var(--grey);
    line-height: 1.85;
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

.support-panel {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.support-head {
    padding: 1rem 1.2rem;
    background: var(--black4);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.support-head strong {
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
}

.support-status {
    color: var(--green);
    background: var(--green-dim);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.18rem 0.55rem;
    border-radius: 50px;
}

.support-body {
    padding: 1.2rem;
}

.support-row {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}

.support-row:last-child {
    border-bottom: none;
}

.support-code {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.support-row h4 {
    font-family: 'Syne', sans-serif;
    font-size: 0.88rem;
    margin-bottom: 0.12rem;
}

.support-row p {
    color: var(--grey2);
    font-size: 0.72rem;
}

.support-time {
    color: var(--lime);
    font-weight: 800;
    font-size: 0.78rem;
    white-space: nowrap;
}


/* ---- CONTACT FAQ ---- */
.faq {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.faq-inner {
    max-width: 900px;
    margin: 0 auto;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3.5rem;
}

.faq-item {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
}

.faq-item h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    margin-bottom: 0.45rem;
}

.faq-item p {
    color: var(--grey);
    font-size: 0.9rem;
    line-height: 1.75;
}


/* ---- CONTACT RESPONSIVE ---- */
@media(max-width:1100px) {
    .contact-hero-inner {
        grid-template-columns: 1fr;
        max-width: 760px;
        gap: 3rem;
    }

    .contact-form-card {
        max-width: 100%;
        justify-self: stretch;
    }

    .contact-hero h1 {
        font-size: clamp(2.6rem, 7vw, 4.2rem);
        max-width: 100%;
    }

    .hero-copy,
    .hero-points {
        max-width: 100%;
    }

    .support-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media(max-width:900px) {
    .option-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {
    .response-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:680px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-bottom {
        grid-template-columns: 1fr;
    }

    .form-submit {
        width: 100%;
    }

    .contact-form-card {
        padding: 1.5rem;
    }

    .contact-hero {
        padding: 8.5rem 5% 4rem;
    }
}

@media(max-width:480px) {
    .response-inner {
        grid-template-columns: 1fr;
    }

    .support-row {
        grid-template-columns: 42px 1fr;
    }

    .support-time {
        grid-column: 2;
    }

    .contact-hero h1 {
        letter-spacing: -2px;
    }
}

/* ============================================================
   FEATURES PAGE
   ============================================================ */

/* ---- FEATURES HERO ---- */
.features-hero {
    min-height: 86vh;
    padding: 5rem 5% 5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.features-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, black 25%, transparent 100%);
    pointer-events: none;
}

.features-hero::after {
    content: '';
    position: absolute;
    top: -18%;
    right: -8%;
    width: 720px;
    height: 620px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.features-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.features-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1.03;
    margin-bottom: 1.5rem;
}

.features-hero h1 em {
    font-style: normal;
    color: var(--lime);
}

.features-hero h1 span {
    color: var(--grey2);
}


/* ---- FEATURE HERO CONSOLE ---- */
.feature-console {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.console-top {
    padding: 0.85rem 1.1rem;
    background: var(--black3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.console-dots {
    display: flex;
    gap: 0.4rem;
}

.cdot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.red {
    color: var(--red);
    font-weight: 800;
}

.cdot.red {
    background: #ef4444;
}

.yellow {
    background: #f59e0b;
}

.green-dot {
    background: #22c55e;
}

.console-title {
    font-size: 0.75rem;
    color: var(--grey2);
    font-family: 'Courier New', monospace;
}

.console-body {
    padding: 1.4rem;
}

.console-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.console-status h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    letter-spacing: -0.3px;
}

.live-pill {
    color: var(--green);
    background: var(--green-dim);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    white-space: nowrap;
}

.pipeline-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pipeline-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem;
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.pipeline-code {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: 'Syne', sans-serif;
}

.pipeline-row h4 {
    font-family: 'Syne', sans-serif;
    font-size: 0.86rem;
    margin-bottom: 0.12rem;
}

.pipeline-row p {
    font-size: 0.72rem;
    color: var(--grey);
    line-height: 1.45;
}

.pipeline-state {
    font-size: 0.64rem;
    color: var(--lime);
    border: 1px solid var(--lime-border);
    padding: 0.14rem 0.45rem;
    border-radius: 4px;
    font-weight: 800;
    white-space: nowrap;
}

.pipeline-state.orange {
    color: var(--orange);
    border-color: rgba(255, 140, 0, 0.2);
    background: var(--orange-dim);
}


/* ---- FEATURE NAV BAND ---- */
.feature-nav-band {
    padding: 1.5rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 68px;
    z-index: 100;
}

.feature-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.feature-nav-inner::-webkit-scrollbar {
    height: 3px;
}

.feature-nav-inner::-webkit-scrollbar-thumb {
    background: var(--grey3);
    border-radius: 4px;
}

.feature-nav-inner a {
    white-space: nowrap;
    color: var(--grey);
    font-size: 0.82rem;
    border: 1px solid var(--border2);
    padding: 0.45rem 0.9rem;
    border-radius: 50px;
    transition: all 0.15s;
}

.feature-nav-inner a:hover {
    color: var(--black);
    background: var(--lime);
    border-color: transparent;
}


/* ---- CORE FEATURES ---- */
.core-features {
    padding: 5rem 5%;
    background: var(--black);
}

.core-inner {
    max-width: 1100px;
    margin: 0 auto;
}

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

.feature-card {
    padding: 2rem;
    border-radius: 16px;
    background: var(--black2);
    border: 1px solid var(--border);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(184, 255, 60, 0.05) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.2s;
}

.feature-card:hover {
    border-color: var(--lime-border);
    background: var(--black3);
    transform: translateY(-3px);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 1.2rem;
    position: relative;
}

.feature-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
    color: var(--white);
    position: relative;
}

.feature-card p {
    font-size: 0.85rem;
    color: var(--grey);
    line-height: 1.75;
    position: relative;
}

.feature-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    list-style: none;
    position: relative;
}

.feature-list li {
    font-size: 0.78rem;
    color: var(--grey);
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.feature-list li::before {
    content: '✓';
    color: var(--lime);
    font-weight: 800;
    flex-shrink: 0;
}


/* ---- AHREFS SECTION ---- */
.ahrefs-section {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.ahrefs-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.ahrefs-copy h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 1rem;
}

.ahrefs-copy h2 em {
    color: var(--lime);
    font-style: normal;
}

.ahrefs-copy p {
    color: var(--grey);
    line-height: 1.85;
    font-size: 0.95rem;
    font-weight: 300;
    margin-bottom: 1.2rem;
}

.ahrefs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--orange-dim);
    border: 1px solid rgba(255, 140, 0, 0.25);
    color: var(--orange);
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
}

.ahrefs-bullets {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.6rem;
}

.ahrefs-bullet {
    display: flex;
    gap: 0.75rem;
    color: var(--grey);
    font-size: 0.88rem;
    line-height: 1.65;
}

.check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
}

.ahrefs-panel {
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.ahrefs-head {
    padding: 0.95rem 1.2rem;
    background: var(--black4);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ahrefs-head strong {
    font-family: 'Syne', sans-serif;
    font-size: 0.82rem;
}

.ahrefs-live {
    color: var(--green);
    font-size: 0.68rem;
    font-weight: 800;
    background: var(--green-dim);
    padding: 0.18rem 0.6rem;
    border-radius: 50px;
}

.ahrefs-table {
    width: 100%;
    border-collapse: collapse;
}

.ahrefs-table th,
.ahrefs-table td {
    padding: 0.75rem 0.8rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.74rem;
    text-align: left;
}

.ahrefs-table th {
    color: var(--grey2);
    background: var(--black4);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ahrefs-table td {
    color: var(--grey);
}

.ahrefs-table td.keyword {
    color: var(--white);
    font-weight: 500;
}

.ahrefs-table td.lime {
    color: var(--lime);
    font-weight: 800;
}

.ahrefs-table td.green {
    color: var(--green);
    font-weight: 800;
}

.ahrefs-table td.orange {
    color: #f59e0b;
    font-weight: 800;
}

.ahrefs-table td.red {
    color: var(--red);
    font-weight: 800;
}


/* ---- WORKFLOW ---- */
.workflow {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.workflow-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
    margin-top: 3.5rem;
}

.workflow-step {
    background: var(--black2);
    border-right: 1px solid var(--border);
    padding: 2rem 1.5rem;
    position: relative;
}

.workflow-step:last-child {
    border-right: none;
}

.workflow-num {
    font-family: 'Syne', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: var(--grey3);
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 1.2rem;
}

.workflow-step h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.workflow-step p {
    color: var(--grey);
    font-size: 0.83rem;
    line-height: 1.7;
}

.workflow-tag {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--lime);
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    padding: 0.16rem 0.5rem;
    border-radius: 4px;
}


/* ---- CONTENT ENGINE ---- */
.content-engine {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.content-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.content-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-top: 3.5rem;
}

.engine-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
}

.engine-card.large {
    grid-row: span 2;
}

.engine-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
}

.engine-card p {
    color: var(--grey);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.metric-box {
    background: var(--black4);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
}

.metric-box strong {
    display: block;
    font-family: 'Syne', sans-serif;
    color: var(--lime);
    font-size: 1.8rem;
    line-height: 1;
}

.metric-box span {
    font-size: 0.72rem;
    color: var(--grey2);
}


/* ---- CAPABILITIES ---- */
.capabilities {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.capabilities-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.capability-table {
    margin-top: 3.5rem;
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.cap-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
}

.cap-row:last-child {
    border-bottom: none;
}

.cap-cell {
    padding: 1.1rem 1.2rem;
    border-right: 1px solid var(--border);
}

.cap-cell:last-child {
    border-right: none;
}

.cap-head {
    background: var(--black4);
    color: var(--grey2);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.cap-title {
    color: var(--white);
    font-family: 'Syne', sans-serif;
    font-weight: 700;
}

.cap-cell p,
.cap-cell span {
    color: var(--grey);
    font-size: 0.82rem;
    line-height: 1.6;
}


/* ---- INTEGRATIONS ---- */
.integrations {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.integrations-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 3.5rem;
}

.integration-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.4rem 1rem;
    text-align: center;
    transition: all 0.2s;
}

.integration-card:hover {
    border-color: var(--lime-border);
    transform: translateY(-3px);
}

.integration-logo {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.8rem;
    font-family: 'Syne', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
}

.integration-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.integration-card p {
    font-size: 0.72rem;
    color: var(--grey2);
}


/* ---- FEATURES RESPONSIVE ---- */
@media(max-width:900px) {
    .features-hero-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ahrefs-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .workflow-grid {
        grid-template-columns: 1fr 1fr;
    }

    .workflow-step:nth-child(2) {
        border-right: none;
    }

    .workflow-step:nth-child(1),
    .workflow-step:nth-child(2) {
        border-bottom: 1px solid var(--border);
    }

    .content-layout {
        grid-template-columns: 1fr;
    }

    .integration-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:720px) {
    .cap-row {
        grid-template-columns: 1fr;
    }

    .cap-cell {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .cap-cell:last-child {
        border-bottom: none;
    }

    .cap-row.cap-head {
        display: none;
    }
}

@media(max-width:560px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .workflow-grid {
        grid-template-columns: 1fr;
    }

    .workflow-step {
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }

    .workflow-step:last-child {
        border-bottom: none;
    }

    .integration-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   HOW IT WORKS PAGE
   ============================================================ */

/* ---- HOW IT WORKS HERO ---- */
.hero {
    min-height: 88vh;
    padding: 5rem 5% 5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, black 25%, transparent 100%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    top: -18%;
    right: -8%;
    width: 720px;
    height: 620px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1.03;
    margin-bottom: 1.5rem;
}

.hero h1 em {
    color: var(--lime);
    font-style: normal;
}

.hero h1 span {
    color: var(--grey2);
}


/* ---- FLOW PANEL ---- */
.flow-panel {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.flow-top {
    padding: 0.85rem 1.1rem;
    background: var(--black3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.flow-dots {
    display: flex;
    gap: 0.4rem;
}

.fdot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.fdot.red {
    background: #ef4444;
}

.fdot.yellow {
    background: #f59e0b;
}

.fdot.green-dot {
    background: #22c55e;
}

.flow-title {
    font-size: 0.75rem;
    color: var(--grey2);
    font-family: 'Courier New', monospace;
}

.flow-body {
    padding: 1.4rem;
}

.flow-run {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.flow-run h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
}

.flow-live {
    font-size: 0.68rem;
    color: var(--green);
    background: var(--green-dim);
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    font-weight: 800;
    white-space: nowrap;
}

.flow-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.flow-step {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem;
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.flow-code {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
}

.flow-step h4 {
    font-family: 'Syne', sans-serif;
    font-size: 0.86rem;
    margin-bottom: 0.12rem;
}

.flow-step p {
    font-size: 0.72rem;
    color: var(--grey);
    line-height: 1.45;
}

.flow-status {
    font-size: 0.64rem;
    color: var(--lime);
    border: 1px solid var(--lime-border);
    padding: 0.14rem 0.45rem;
    border-radius: 4px;
    font-weight: 800;
    white-space: nowrap;
}

.flow-status.orange {
    color: var(--orange);
    border-color: rgba(255, 140, 0, 0.22);
    background: var(--orange-dim);
}


/* ---- OVERVIEW STRIP ---- */
.overview-strip {
    padding: 3.5rem 5%;
    background: var(--lime);
}

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

.overview-item {
    padding: 1rem;
}

.overview-num {
    font-family: 'Syne', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--black);
    line-height: 1;
    letter-spacing: -2px;
}

.overview-label {
    margin-top: 0.45rem;
    color: rgba(8, 10, 14, 0.62);
    font-size: 0.82rem;
    font-weight: 700;
}


/* ---- PROCESS SECTION ---- */
.process {
    padding: 7rem 5%;
    background: var(--black);
}

.process-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.process-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.process-card {
    display: grid;
    grid-template-columns: 90px 1fr 360px;
    gap: 2rem;
    align-items: center;
    background: var(--black2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.process-card::before {
    content: '';
    position: absolute;
    right: -120px;
    top: -120px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(184, 255, 60, 0.05) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.2s;
}

.process-card:hover {
    border-color: var(--lime-border);
}

.process-card:hover::before {
    opacity: 1;
}

.process-num {
    font-family: 'Syne', sans-serif;
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -3px;
    color: var(--grey3);
    position: relative;
}

.process-content {
    position: relative;
}

.process-content h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.35rem;
    margin-bottom: 0.55rem;
}

.process-content p {
    color: var(--grey);
    font-size: 0.92rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.process-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.process-tag {
    font-size: 0.68rem;
    color: var(--lime);
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    padding: 0.18rem 0.55rem;
    border-radius: 50px;
    font-weight: 800;
}

.process-tag.orange {
    color: var(--orange);
    background: var(--orange-dim);
    border-color: rgba(255, 140, 0, 0.22);
}

.process-preview {
    position: relative;
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
}

.preview-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
}

.preview-row:last-child {
    border-bottom: none;
}

.preview-label {
    color: var(--grey2);
}

.preview-value {
    color: var(--white);
    text-align: right;
    font-weight: 600;
}

.preview-value.lime {
    color: var(--lime);
}

.preview-value.green {
    color: var(--green);
}

.preview-value.orange {
    color: var(--orange);
}


/* ---- SETUP SECTION ---- */
.setup {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.setup-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
    align-items: start;
}

.setup-copy p {
    color: var(--grey);
    line-height: 1.85;
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

.setup-box {
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.setup-box-head {
    padding: 1rem 1.2rem;
    background: var(--black4);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.setup-box-head strong {
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
}

.setup-time {
    font-size: 0.68rem;
    color: var(--lime);
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    padding: 0.18rem 0.55rem;
    border-radius: 50px;
    font-weight: 800;
}

.setup-checks {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.setup-check {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem;
    background: var(--black2);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.check-code {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    font-family: 'Syne', sans-serif;
}

.setup-check h4 {
    font-family: 'Syne', sans-serif;
    font-size: 0.85rem;
    margin-bottom: 0.1rem;
}

.setup-check p {
    font-size: 0.72rem;
    color: var(--grey);
}

.check-status {
    color: var(--green);
    background: var(--green-dim);
    font-size: 0.64rem;
    font-weight: 800;
    padding: 0.14rem 0.5rem;
    border-radius: 50px;
    white-space: nowrap;
}


/* ---- LOGIC SECTION ---- */
.logic {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.logic-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.logic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 3.5rem;
}

.logic-card {
    background: var(--black2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    transition: all 0.2s;
}

.logic-card:hover {
    border-color: var(--lime-border);
    transform: translateY(-3px);
    background: var(--black3);
}

.logic-code {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    font-family: 'Syne', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.logic-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.logic-card p {
    color: var(--grey);
    font-size: 0.85rem;
    line-height: 1.75;
}


/* ---- TIMELINE SECTION ---- */
.timeline-section {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.timeline-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.timeline-box {
    margin-top: 3.5rem;
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
}

.timeline-row {
    display: grid;
    grid-template-columns: 150px 1fr 160px;
    border-bottom: 1px solid var(--border);
}

.timeline-row:last-child {
    border-bottom: none;
}

.timeline-cell {
    padding: 1rem 1.2rem;
    border-right: 1px solid var(--border);
}

.timeline-cell:last-child {
    border-right: none;
}

.timeline-head {
    background: var(--black4);
    color: var(--grey2);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.timeline-time {
    color: var(--lime);
    font-family: 'Syne', sans-serif;
    font-weight: 800;
}

.timeline-action {
    color: var(--white);
    font-weight: 600;
}

.timeline-detail {
    color: var(--grey);
    font-size: 0.84rem;
}

.timeline-status {
    color: var(--green);
    font-size: 0.8rem;
    font-weight: 800;
}


/* ---- HOW IT WORKS RESPONSIVE ---- */
@media(max-width:1000px) {
    .process-card {
        grid-template-columns: 70px 1fr;
    }

    .process-preview {
        grid-column: 2;
    }
}

@media(max-width:900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .setup-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .logic-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:768px) {
    .overview-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:720px) {
    .timeline-row {
        grid-template-columns: 1fr;
    }

    .timeline-head {
        display: none;
    }

    .timeline-cell {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .timeline-cell:last-child {
        border-bottom: none;
    }
}

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

    .process-preview {
        grid-column: auto;
    }

    .process-num {
        font-size: 3rem;
    }
}

@media(max-width:560px) {
    .logic-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:420px) {
    .overview-inner {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   HOME PAGE
   ============================================================ */

/* ---- HOME HERO ---- */
.home-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 5% 5rem;
    position: relative;
    overflow: hidden;
}

.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
    pointer-events: none;
}

.home-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.07) 0%, transparent 65%);
    pointer-events: none;
}

.home-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 6.5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1.03;
    margin-bottom: 1.6rem;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.6s ease 0.2s both;
}

.home-hero h1 em {
    font-style: normal;
    color: var(--lime);
}

.home-hero h1 .line-dim {
    color: var(--grey2);
}

.hero-sub {
    font-size: clamp(1rem, 2vw, 1.18rem);
    color: var(--grey);
    max-width: 580px;
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 2.8rem;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.6s ease 0.3s both;
}

.hero-ctas {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3.5rem;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.6s ease 0.4s both;
}


/* ---- HOME HERO PROOF ---- */
.hero-proof {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.6s ease 0.5s both;
}

.proof-avatars {
    display: flex;
}

.proof-avatars span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--black);
    background: var(--black3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--lime);
    margin-left: -8px;
}

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

.proof-text {
    font-size: 0.82rem;
    color: var(--grey);
}

.proof-text strong {
    color: var(--white);
}

.proof-divider {
    width: 1px;
    height: 24px;
    background: var(--border2);
}

.proof-rating {
    font-size: 0.82rem;
    color: var(--grey);
}

.proof-rating strong {
    color: var(--lime);
}


/* ---- LIVE TICKER ---- */
.live-ticker {
    position: relative;
    z-index: 1;
    margin-top: 4rem;
    width: 100%;
    max-width: 900px;
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 16px;
    overflow: hidden;
    animation: fadeUp 0.7s ease 0.5s both;
}

.ticker-header {
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--black3);
}

.ticker-dots {
    display: flex;
    gap: 0.4rem;
}

.t-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.t-dot-r {
    background: #ef4444;
}

.t-dot-y {
    background: #f59e0b;
}

.t-dot-g {
    background: #22c55e;
}

.ticker-title {
    font-size: 0.78rem;
    color: var(--grey2);
    font-family: monospace;
    margin-left: 0.4rem;
}

.ticker-live {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--green);
    font-weight: 600;
    background: var(--green-dim);
    padding: 0.18rem 0.6rem;
    border-radius: 50px;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: blink-dot 1.5s infinite;
}

.ticker-body {
    padding: 1.2rem 1.4rem;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    text-align: left;
}

.tk-row {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
    align-items: flex-start;
}

.tk-row:last-child {
    margin-bottom: 0;
}

.tk-time {
    color: var(--grey2);
    flex-shrink: 0;
    font-size: 0.72rem;
    margin-top: 1px;
}

.tk-step {
    color: var(--grey);
    flex: 1;
    line-height: 1.5;
}

.tk-step .hl {
    color: var(--lime);
    font-weight: 600;
}

.tk-step .hl-green {
    color: var(--green);
}

.tk-step .hl-white {
    color: var(--white);
}

.tk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.badge-ahrefs {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

.badge-ai {
    background: var(--lime-dim);
    color: var(--lime);
}

.badge-wp {
    background: rgba(33, 117, 155, 0.15);
    color: #21759b;
}

.badge-done {
    background: var(--green-dim);
    color: var(--green);
}

.tk-cursor {
    display: inline-block;
    width: 6px;
    height: 12px;
    background: var(--lime);
    animation: blink-cur 1s step-end infinite;
    vertical-align: middle;
    margin-left: 2px;
}

@keyframes blink-cur {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}


/* ---- LOGOS ---- */
.logos {
    padding: 3rem 5%;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--black2);
}

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

.logos-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey2);
    margin-bottom: 1.6rem;
    font-weight: 500;
}

.logos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    opacity: 0.4;
}

.logos-row span {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.05em;
}


/* ---- HOME STATS BAND ---- */
.stats-band {
    padding: 5rem 5%;
    background: var(--lime);
}

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

.stat-block {
    padding: 1.5rem;
}

.stat-num {
    font-family: 'Syne', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: var(--black);
    line-height: 1;
    letter-spacing: -2px;
}

.stat-unit {
    font-size: 1.4rem;
}

.stat-lbl {
    font-size: 0.82rem;
    color: rgba(8, 10, 14, 0.6);
    margin-top: 0.4rem;
    font-weight: 500;
}


/* ---- HOME PROBLEM SECTION ---- */
.problem {
    padding: 7rem 5%;
    background: var(--black);
}

.problem-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.pain-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pain-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.3rem 1.4rem;
    border-radius: 12px;
    background: var(--black2);
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}

.pain-item:hover {
    border-color: var(--border2);
}

.pain-ico {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.pain-item h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.25rem;
    font-family: 'Syne', sans-serif;
}

.pain-item p {
    font-size: 0.82rem;
    color: var(--grey);
    line-height: 1.65;
}

.pain-fix {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--lime);
    margin-top: 0.5rem;
    background: var(--lime-dim);
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
}


/* ---- HOME HOW SECTION ---- */
.how {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.how-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.how-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 4rem;
}

.pipeline-visual {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 1px solid var(--border2);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 3rem;
}

.pipe-step {
    padding: 2rem 1.4rem;
    background: var(--black3);
    border-right: 1px solid var(--border);
    position: relative;
    text-align: center;
    transition: background 0.2s;
}

.pipe-step:hover {
    background: var(--black4);
}

.pipe-step:last-child {
    border-right: none;
}

.pipe-num {
    font-family: 'Syne', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--grey2);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.pipe-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 1px solid var(--border2);
}

.pipe-icon.lime-bg {
    background: var(--lime-dim);
    border-color: var(--lime-border);
}

.pipe-step h3 {
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--white);
}

.pipe-step p {
    font-size: 0.75rem;
    color: var(--grey);
    line-height: 1.55;
}

.pipe-source {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.src-ahrefs {
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
}

.src-ai {
    background: var(--lime-dim);
    color: var(--lime);
}

.src-wp {
    background: rgba(33, 117, 155, 0.12);
    color: #21759b;
}

.src-sheets {
    background: rgba(34, 197, 94, 0.1);
    color: var(--green);
}

.src-n8n {
    background: rgba(255, 255, 255, 0.06);
    color: var(--grey);
}

.pipe-arrow {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lime);
    font-size: 1rem;
    z-index: 2;
    background: var(--black3);
    padding: 0 2px;
}


/* ---- HOME STEPS ROW ---- */
.steps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 0;
}

.step-card {
    padding: 2rem;
    border-radius: 14px;
    background: var(--black3);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.step-card:hover {
    border-color: var(--lime-border);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.step-num-lg {
    font-family: 'Syne', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: var(--grey3);
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -2px;
}

.step-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.step-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--white);
}

.step-card p {
    font-size: 0.85rem;
    color: var(--grey);
    line-height: 1.7;
}


/* ---- HOME FEATURES ---- */
.features {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.features-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.features-header {
    text-align: center;
    margin-bottom: 4rem;
}

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

.feat-card {
    padding: 2rem;
    border-radius: 16px;
    background: var(--black2);
    border: 1px solid var(--border);
    transition: all 0.2s;
    cursor: default;
}

.feat-card:hover {
    border-color: var(--lime-border);
    background: var(--black3);
    transform: translateY(-3px);
}

.feat-card.hero-feat {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(184, 255, 60, 0.06) 0%, var(--black2) 60%);
    border-color: var(--lime-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.fc-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
}

.feat-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--white);
}

.feat-card p {
    font-size: 0.85rem;
    color: var(--grey);
    line-height: 1.7;
}

.fc-ahrefs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.2);
    color: #ff8c00;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    margin-top: 0.8rem;
}


/* ---- HOME AHREFS MOCK ---- */
.ahrefs-mock {
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 12px;
    padding: 1.2rem;
    font-size: 0.78rem;
}

.mock-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.mock-row:last-child {
    border-bottom: none;
}

.mock-kw {
    flex: 1;
    color: var(--white);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.mock-vol {
    font-size: 0.7rem;
    color: var(--lime);
    font-weight: 700;
    min-width: 45px;
    text-align: right;
}

.mock-kd {
    font-size: 0.7rem;
    min-width: 28px;
    text-align: right;
    font-weight: 600;
}

.kd-low,
.kd-1 {
    color: var(--green);
}

.kd-med,
.kd-2 {
    color: #f59e0b;
}

.kd-high,
.kd-3 {
    color: var(--red);
}

.mock-opp {
    font-size: 0.65rem;
    color: var(--lime);
    background: var(--lime-dim);
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    font-weight: 700;
}


/* ---- HOME AHREFS SPOTLIGHT ---- */
.ahrefs-section {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.ahrefs-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.ahrefs-badge-big {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.25);
    color: #ff8c00;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
}

.ahrefs-content h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.ahrefs-content h2 em {
    font-style: normal;
    color: var(--lime);
}

.ahrefs-content p {
    font-size: 0.95rem;
    color: var(--grey);
    line-height: 1.85;
    font-weight: 300;
    margin-bottom: 1.2rem;
}

.ahrefs-bullets {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.ahrefs-bullet {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-size: 0.88rem;
    color: var(--grey);
    line-height: 1.6;
}

.ab-check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--lime);
    flex-shrink: 0;
    margin-top: 2px;
}


/* ---- KEYWORD TABLE ---- */
.kw-table-card {
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.kwt-header {
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--black4);
}

.kwt-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--white);
    font-family: 'Syne', sans-serif;
}

.kwt-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--green);
    background: var(--green-dim);
    padding: 0.2rem 0.55rem;
    border-radius: 50px;
}

.kwt-row {
    display: grid;
    grid-template-columns: 1fr 70px 55px 60px 70px;
    gap: 0;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    align-items: center;
    font-size: 0.75rem;
}

.kwt-row:last-child {
    border-bottom: none;
}

.kwt-head {
    background: var(--black4);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey2);
}

.kwt-kw {
    color: var(--white);
    font-weight: 500;
}

.kwt-vol {
    color: var(--lime);
    font-weight: 700;
    text-align: right;
}

.kwt-kd {
    text-align: center;
    font-weight: 700;
}

.kwt-traffic {
    color: var(--grey);
    text-align: right;
}

.kwt-action {
    text-align: right;
}

.kwt-btn {
    font-size: 0.65rem;
    background: var(--lime);
    color: var(--black);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
}

.kwt-skip {
    font-size: 0.65rem;
    color: var(--grey2);
    cursor: pointer;
}

.kwt-skip.red-text {
    color: var(--red);
}


/* ---- OUTPUT SECTION ---- */
.output-section {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.output-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.output-header {
    text-align: center;
    margin-bottom: 4rem;
}

.output-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.output-tab {
    padding: 0.55rem 1.2rem;
    border-radius: 7px;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--grey);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}

.output-tab:hover {
    border-color: var(--border2);
    color: var(--white);
}

.output-tab.active {
    background: var(--lime);
    color: var(--black);
    border-color: transparent;
    font-weight: 600;
}

.output-display {
    background: var(--black2);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.od-toolbar {
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--border);
    background: var(--black3);
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.od-dots {
    display: flex;
    gap: 0.4rem;
}

.od-title {
    font-size: 0.78rem;
    color: var(--grey2);
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.od-score {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lime);
}

.od-score-bar {
    width: 60px;
    height: 5px;
    background: var(--grey3);
    border-radius: 3px;
    overflow: hidden;
}

.od-score-fill {
    height: 100%;
    background: var(--lime);
    border-radius: 3px;
}


/* ---- ARTICLE PREVIEW ---- */
.article-preview {
    padding: 2rem;
    max-height: 380px;
    overflow-y: auto;
}

.article-preview::-webkit-scrollbar {
    width: 4px;
}

.article-preview::-webkit-scrollbar-track {
    background: transparent;
}

.article-preview::-webkit-scrollbar-thumb {
    background: var(--grey3);
    border-radius: 2px;
}

.ap-meta {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ap-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.ap-tag-kw {
    background: var(--lime-dim);
    color: var(--lime);
}

.ap-tag-wc {
    background: rgba(255, 255, 255, 0.06);
    color: var(--grey);
}

.ap-tag-si {
    background: var(--green-dim);
    color: var(--green);
}

.ap-tag-ahrefs {
    background: rgba(255, 140, 0, 0.1);
    color: #ff8c00;
}

.ap-h1 {
    font-family: 'Syne', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.2;
    color: var(--white);
    margin-bottom: 0.8rem;
}

.ap-intro,
.ap-p {
    font-size: 0.88rem;
    color: var(--grey);
    line-height: 1.75;
    margin-bottom: 1.2rem;
}

.ap-h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.5rem;
    margin-top: 1.2rem;
}

.ap-ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.ap-ul li {
    font-size: 0.85rem;
    color: var(--grey);
    display: flex;
    gap: 0.6rem;
    line-height: 1.6;
}

.ap-ul li::before {
    content: '→';
    color: var(--lime);
    flex-shrink: 0;
    font-weight: 700;
}

.ap-schema {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.8rem;
    font-size: 0.72rem;
    color: var(--grey);
    font-family: 'Courier New', monospace;
    line-height: 1.6;
    margin-top: 0.8rem;
}

.ap-schema .s-key {
    color: var(--lime);
}

.ap-schema .s-val {
    color: var(--green);
}


/* ---- WORDPRESS PANEL ---- */
.wp-panel {
    padding: 2rem;
}

.wp-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.wp-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wp-label {
    color: var(--grey2);
    min-width: 110px;
    font-size: 0.78rem;
    font-weight: 500;
}

.wp-val {
    color: var(--white);
    flex: 1;
}

.wp-val.lime {
    color: var(--lime);
}

.wp-val.grey {
    color: var(--grey);
}

.wp-val.green {
    color: var(--green);
}

.wp-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
}

.st-published {
    background: var(--green-dim);
    color: var(--green);
}

.st-scheduled {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.st-draft {
    background: rgba(255, 255, 255, 0.06);
    color: var(--grey);
}

.wp-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

.wp-btn {
    padding: 0.55rem 1.1rem;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    transition: all 0.15s;
}

.wp-btn-primary {
    background: var(--lime);
    color: var(--black);
}

.wp-btn-primary:hover {
    background: var(--lime2);
}

.wp-btn-secondary {
    background: var(--black4);
    color: var(--grey);
    border: 1px solid var(--border2);
}

.wp-btn-secondary:hover {
    color: var(--white);
}


/* ---- SHEETS PANEL ---- */
.sheets-panel {
    padding: 2rem;
}

.sheets-label {
    font-size: 0.72rem;
    color: var(--grey2);
    margin-bottom: 0.8rem;
}

.sh-table-wrap {
    overflow-x: auto;
}

.sh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.sh-table th {
    background: var(--black4);
    color: var(--grey2);
    padding: 0.5rem 0.6rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}

.sh-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
    color: var(--grey);
}

.sh-table tr:last-child td {
    border-bottom: none;
}

.sh-table td.green {
    color: var(--green);
    font-weight: 600;
}

.sh-table td.lime {
    color: var(--lime);
    font-weight: 600;
}

.sh-table td.white {
    color: var(--white);
}

.sheets-summary {
    margin-top: 1rem;
    padding: 0.8rem;
    background: var(--black3);
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--grey);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.sheets-summary strong {
    color: var(--white);
}

.sheets-summary strong.lime {
    color: var(--lime);
}

.sheets-summary strong.green {
    color: var(--green);
}


/* ---- TESTIMONIALS ---- */
.testi-section {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.testi-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.testi-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

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

.testi-card {
    background: var(--black3);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.8rem;
    transition: all 0.2s;
}

.testi-card:hover {
    border-color: var(--border2);
    transform: translateY(-3px);
}

.testi-stars {
    color: var(--lime);
    font-size: 0.82rem;
    letter-spacing: 3px;
    margin-bottom: 1rem;
}

.testi-text {
    font-size: 0.88rem;
    color: var(--grey);
    line-height: 1.75;
    margin-bottom: 1.2rem;
    font-style: italic;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.testi-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--lime);
    flex-shrink: 0;
}

.testi-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--white);
    font-family: 'Syne', sans-serif;
}

.testi-role {
    font-size: 0.72rem;
    color: var(--grey2);
}

.testi-result {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--lime-dim);
    color: var(--lime);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    margin-bottom: 0.8rem;
}


/* ---- HOME PRICING PREVIEW ---- */
.pricing-preview {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.pp-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.pp-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.pp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
}

.pp-card {
    background: var(--black2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    transition: all 0.2s;
    position: relative;
}

.pp-card:hover {
    box-shadow: var(--shadow2);
    transform: translateY(-3px);
}

.pp-card.featured {
    border-color: var(--lime-border);
    background: linear-gradient(160deg, rgba(184, 255, 60, 0.05) 0%, var(--black2) 70%);
}

.pp-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lime);
    color: var(--black);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 1rem;
    border-radius: 50px;
    white-space: nowrap;
}

.pp-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey2);
    margin-bottom: 0.7rem;
}

.pp-price {
    font-family: 'Syne', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--white);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.pp-price sup {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    font-weight: 700;
    letter-spacing: 0;
}

.pp-period {
    font-size: 0.8rem;
    color: var(--grey2);
    margin-bottom: 1.2rem;
}

.pp-cta {
    display: block;
    width: 100%;
    padding: 0.8rem;
    border-radius: 9px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    border: 1px solid var(--border2);
    color: var(--grey);
    background: transparent;
    margin-bottom: 1.2rem;
}

.pp-cta:hover {
    border-color: var(--border2);
    color: var(--white);
    background: var(--black3);
}

.pp-cta.lime {
    background: var(--lime);
    color: var(--black);
    border-color: transparent;
}

.pp-cta.lime:hover {
    background: var(--lime2);
}

.pp-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.pp-features li {
    font-size: 0.83rem;
    color: var(--grey);
    display: flex;
    gap: 0.55rem;
    line-height: 1.5;
    align-items: flex-start;
}

.pp-features li::before {
    content: '✓';
    color: var(--lime);
    font-weight: 800;
    flex-shrink: 0;
    font-size: 0.8rem;
    margin-top: 1px;
}

.pp-features li.dim {
    color: var(--grey3);
}

.pp-features li.dim::before {
    content: '—';
    color: var(--grey3);
}


/* ---- HOME RESPONSIVE ---- */
@media(max-width:900px) {

    .problem-inner,
    .ahrefs-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .pipeline-visual {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }

    .pipe-step {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .pipe-step:last-child {
        border-bottom: none;
    }

    .pipe-arrow {
        display: none;
    }

    .features-grid {
        grid-template-columns: 1fr 1fr;
    }

    .feat-card.hero-feat {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }

    .testi-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:768px) {
    .stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-row {
        grid-template-columns: 1fr;
    }

    .pp-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

@media(max-width:560px) {

    .features-grid,
    .testi-grid {
        grid-template-columns: 1fr;
    }

    .wp-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .wp-label {
        min-width: 0;
    }

    .wp-actions {
        flex-direction: column;
    }

    .od-toolbar {
        flex-wrap: wrap;
    }

    .od-title {
        flex-basis: 100%;
        order: 3;
        text-align: left;
    }
}

@media(max-width:420px) {
    .stats-inner {
        grid-template-columns: 1fr;
    }

    .home-hero h1 {
        letter-spacing: -2px;
    }

    .hero-proof {
        flex-direction: column;
    }

    .proof-divider {
        display: none;
    }
}


/* ---- HOME ANIMATION ---- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   PRICING PAGE
   ============================================================ */

/* ---- PRICING HERO ---- */
.pricing-hero {
    padding: 5rem 5% 5rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.pricing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 25%, transparent 100%);
    pointer-events: none;
}

.pricing-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.pricing-hero-inner {
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.pricing-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1.03;
    margin-bottom: 1.4rem;
}

.pricing-hero h1 em {
    color: var(--lime);
    font-style: normal;
}

.pricing-hero h1 span {
    color: var(--grey2);
}


/* ---- BILLING TOGGLE ---- */
.billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--black2);
    border: 1px solid var(--border2);
    padding: 0.35rem;
    border-radius: 12px;
    margin-top: 0.4rem;
}

.billing-toggle button {
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    background: transparent;
    color: var(--grey);
    font-weight: 700;
}

.billing-toggle button.active {
    background: var(--lime);
    color: var(--black);
}

.save-badge {
    font-size: 0.68rem;
    color: var(--lime);
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    padding: 0.16rem 0.45rem;
    border-radius: 50px;
    margin-left: 0.3rem;
}


/* ---- PRICING TRUST STRIP ---- */
.trust-strip {
    padding: 2.5rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

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

.trust-item {
    padding: 1rem;
}

.trust-value {
    font-family: 'Syne', sans-serif;
    color: var(--lime);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.trust-label {
    margin-top: 0.45rem;
    color: var(--grey);
    font-size: 0.8rem;
}


/* ---- PRICING CARDS ---- */
.pricing-section {
    padding: 7rem 5%;
    background: var(--black);
}

.pricing-inner {
    max-width: 1100px;
    margin: 0 auto;
}

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

.price-card {
    background: var(--black2);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 2rem;
    position: relative;
    transition: all 0.2s;
    overflow: hidden;
}

.price-card::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(184, 255, 60, 0.06) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.2s;
}

.price-card:hover {
    transform: translateY(-4px);
    border-color: var(--lime-border);
    box-shadow: var(--shadow2);
}

.price-card:hover::before {
    opacity: 1;
}

.price-card.featured {
    border-color: var(--lime-border);
    background: linear-gradient(160deg, rgba(184, 255, 60, 0.06) 0%, var(--black2) 70%);
    transform: translateY(-12px);
}

.popular-badge {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    background: var(--lime);
    color: var(--black);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.22rem 0.7rem;
    border-radius: 50px;
}

.plan-code {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    margin-bottom: 1.3rem;
    position: relative;
}

.plan-name {
    font-family: 'Syne', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    position: relative;
}

.plan-desc {
    color: var(--grey);
    font-size: 0.85rem;
    line-height: 1.65;
    min-height: 56px;
    margin-bottom: 1.4rem;
    position: relative;
}

.price {
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 0.25rem;
    position: relative;
}

.price sup {
    font-size: 1.15rem;
    color: var(--white);
    font-weight: 800;
    margin-top: 0.45rem;
}

.price span {
    font-family: 'Syne', sans-serif;
    font-size: 3.6rem;
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1;
}

.period {
    color: var(--grey2);
    font-size: 0.82rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.plan-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.plan-cta.btn-outline,
.plan-cta.btn-primary {
    padding: 0.85rem 1rem;
}

.plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: relative;
}

.plan-features li {
    color: var(--grey);
    font-size: 0.84rem;
    line-height: 1.5;
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.plan-features li::before {
    content: '✓';
    color: var(--lime);
    font-weight: 900;
    flex-shrink: 0;
}

.plan-features li.dim {
    color: var(--grey3);
}

.plan-features li.dim::before {
    content: '—';
    color: var(--grey3);
}

.plan-note {
    margin-top: 2rem;
    text-align: center;
    color: var(--grey2);
    font-size: 0.82rem;
}


/* ---- PRICING COMPARISON ---- */
.compare {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.compare-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.compare-table {
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.compare-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-cell {
    padding: 1rem 1.2rem;
    border-right: 1px solid var(--border);
    color: var(--grey);
    font-size: 0.84rem;
}

.compare-cell:last-child {
    border-right: none;
}

.compare-head {
    background: var(--black4);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: var(--grey2);
}

.compare-feature {
    color: var(--white);
    font-weight: 700;
    font-family: 'Syne', sans-serif;
}

.yes {
    color: var(--lime);
    font-weight: 800;
}

.no {
    color: var(--grey3);
    font-weight: 800;
}

.muted {
    color: var(--grey2);
}


/* ---- PRICING ADDONS ---- */
.addons {
    padding: 7rem 5%;
    background: var(--black);
    border-top: 1px solid var(--border);
}

.addons-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.addons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 3.5rem;
}

.addon-card {
    background: var(--black2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    transition: all 0.2s;
}

.addon-card:hover {
    border-color: var(--lime-border);
    transform: translateY(-3px);
    background: var(--black3);
}

.addon-code {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 1.1rem;
}

.addon-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.08rem;
    margin-bottom: 0.45rem;
}

.addon-card p {
    color: var(--grey);
    font-size: 0.86rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.addon-price {
    color: var(--lime);
    font-family: 'Syne', sans-serif;
    font-weight: 800;
}


/* ---- ROI SECTION ---- */
.roi {
    padding: 7rem 5%;
    background: var(--black2);
    border-top: 1px solid var(--border);
}

.roi-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
    align-items: center;
}

.roi-copy p {
    color: var(--grey);
    line-height: 1.85;
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

.roi-panel {
    background: var(--black3);
    border: 1px solid var(--border2);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow2);
}

.roi-head {
    padding: 1rem 1.2rem;
    background: var(--black4);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roi-head strong {
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
}

.roi-badge {
    font-size: 0.68rem;
    color: var(--green);
    background: var(--green-dim);
    padding: 0.18rem 0.55rem;
    border-radius: 50px;
    font-weight: 800;
}

.roi-body {
    padding: 1.2rem;
}

.roi-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.86rem;
}

.roi-line:last-child {
    border-bottom: none;
}

.roi-label {
    color: var(--grey);
}

.roi-value {
    color: var(--white);
    font-weight: 700;
}

.roi-value.lime {
    color: var(--lime);
}

.roi-value.green {
    color: var(--green);
}

.roi-total {
    margin-top: 1rem;
    padding: 1.1rem;
    border-radius: 14px;
    background: var(--lime);
    color: var(--black);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.roi-total span {
    font-size: 0.85rem;
    font-weight: 700;
}

.roi-total strong {
    font-family: 'Syne', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
}


/* ---- PRICING RESPONSIVE ---- */
@media(max-width:900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }

    .price-card.featured {
        transform: none;
    }

    .addons-grid {
        grid-template-columns: 1fr;
    }

    .roi-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

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

@media(max-width:760px) {
    .compare-table {
        overflow-x: auto;
    }

    .compare-row {
        min-width: 760px;
    }
}

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

    .pricing-hero h1 {
        letter-spacing: -2px;
    }

    .billing-toggle {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

    .billing-toggle button {
        width: 100%;
    }

    .roi-total {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-page {
    min-height: 100vh;
    padding: 9rem 5% 5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 25%, transparent 100%);
    pointer-events: none;
}

.login-page::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -8%;
    width: 720px;
    height: 620px;
    background: radial-gradient(ellipse, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.login-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr minmax(380px, 460px);
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.login-copy h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    font-weight: 800;
    letter-spacing: -2.8px;
    line-height: 1.04;
    margin-bottom: 1.5rem;
    max-width: 620px;
}

.login-copy h1 em {
    color: var(--lime);
    font-style: normal;
}

.login-points {
    display: grid;
    gap: 0.8rem;
    margin-top: 2rem;
    max-width: 560px;
}

.login-point {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--grey);
    font-size: 0.88rem;
    line-height: 1.6;
}

.login-point span {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 2px;
}


/* ---- LOGIN CARD ---- */
.login-card {
    width: 100%;
    background: linear-gradient(160deg, rgba(184, 255, 60, 0.05) 0%, var(--black2) 42%);
    border: 1px solid var(--border2);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: var(--shadow2);
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -140px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(184, 255, 60, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.login-card-head {
    position: relative;
    margin-bottom: 1.8rem;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid var(--border);
}

.login-badge {
    display: inline-flex;
    color: var(--lime);
    background: var(--lime-dim);
    border: 1px solid var(--lime-border);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.65rem;
    border-radius: 50px;
    margin-bottom: 0.8rem;
}

.login-card-head h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.6rem;
    letter-spacing: -0.8px;
    margin-bottom: 0.45rem;
}

.login-card-head p {
    color: var(--grey);
    font-size: 0.86rem;
    line-height: 1.7;
}

.login-form {
    position: relative;
    display: grid;
    gap: 1rem;
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.login-form-group label {
    color: var(--grey);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.forgot-link {
    color: var(--lime);
    font-size: 0.74rem;
    font-weight: 700;
}

.login-form-group input {
    width: 100%;
    background: rgba(8, 10, 14, 0.72);
    border: 1px solid var(--border2);
    border-radius: 12px;
    color: var(--white);
    padding: 0.9rem 1rem;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    transition: all 0.15s;
}

.login-form-group input:focus {
    border-color: var(--lime-border);
    background: rgba(8, 10, 14, 0.94);
    box-shadow: 0 0 0 4px rgba(184, 255, 60, 0.055);
}

.login-form-group input::placeholder {
    color: var(--grey2);
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.remember-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--grey);
    font-size: 0.8rem;
    cursor: pointer;
}

.remember-check input {
    accent-color: var(--lime);
}

.login-submit {
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 0.25rem;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--grey2);
    font-size: 0.74rem;
    margin: 0.35rem 0;
}

.login-divider::before,
.login-divider::after {
    content: '';
    height: 1px;
    background: var(--border);
    flex: 1;
}

.google-login {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    background: var(--black3);
    color: var(--white);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.google-login:hover {
    border-color: var(--lime-border);
    background: var(--black4);
}

.google-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--white);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.78rem;
}

.login-small-text {
    color: var(--grey);
    font-size: 0.82rem;
    text-align: center;
    margin-top: 0.5rem;
}

.login-small-text a {
    color: var(--lime);
    font-weight: 800;
}


/* ---- LOGIN RESPONSIVE ---- */
@media(max-width:980px) {
    .login-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: 640px;
    }

    .login-copy {
        text-align: center;
    }

    .login-copy h1,
    .hero-copy,
    .login-points {
        max-width: 100%;
    }

    .login-points {
        text-align: left;
    }
}

@media(max-width:520px) {
    .login-page {
        padding: 8.5rem 5% 4rem;
    }

    .login-card {
        padding: 1.5rem;
    }

    .login-copy h1 {
        letter-spacing: -2px;
    }

    .login-label-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

.paginator {
    text-align: center;
    margin-top: 20px;
}

.paginator ul.pagination li {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    background-color: var(--lime-glow);
    border: 1px solid var(--border);
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    border-radius: 50px;
    position: relative;
    font-weight: 600;
    font-size: 16px;
    position: relative;
}

.paginator ul.pagination li a {
    color: var(--white);
    font-size: 16px;
}

.paginator ul.pagination li:hover {
    background-color: var(--lime);
}

.paginator ul.pagination li:hover a {
    color: var(--black);
}

.paginator ul.pagination li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.paginator li.page-item.active {
    background-color: var(--lime);
    color: var(--black);
}

.paginator li.page-item.active {
    font-size: 16px !important;
}

.paginator .disabled:hover {
    background-color: var(--lime-glow) !important;
    border: 1px solid var(--border) !important;
}

.alert-success,
.alert-danger {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
}

/* Success Alert */
.alert-success {
    background-color: #e6f9f0;
    color: #1a7f5a;
    border-color: #b6efd5;
}

/* Error Alert */
.alert-danger {
    background-color: #fdecea;
    color: #b42318;
    border-color: #f5c2c7;
}