/* ==========================================================================
   Writovia Ghostwriting - Custom Theme (Obsidian Green)
   ========================================================================== */

:root {
    /* Obsidian Green Colors */
    --color-bg-base: #030303;
    --color-bg-surface: #0a0a0c;
    --color-bg-elevated: #121215;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #39e07a 0%, #00c957 100%);
    --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    --gradient-border: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02));

    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #a1a1aa;
    --color-text-accent: #39e07a;

    /* Fonts */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* UI metrics */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 999px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Glassmorphism */
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --glass-blur: blur(12px);
}

/* Reset & Base Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
    line-height: 1.2;
    font-weight: 600;
}

a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: var(--transition);
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-padding {
    padding: 5rem 0;
}

@media (min-width: 768px) {
    .section-padding {
        padding: 7rem 0;
    }
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 1.5rem;
}

/* Utilities */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass-panel {
    background: var(--gradient-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
    text-align: center;
}

.btn-primary {
    background: var(--gradient-primary);
    color: #000;
    box-shadow: 0 4px 15px rgba(57, 224, 122, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(57, 224, 122, 0.5);
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-full {
    width: 100%;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* ====================================================================
   HEADER — Floating Pill + Animated Glow Ring
   ==================================================================== */
@keyframes hdrGlowSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    padding: 0;
    /* subtle dark ambient strip */
    background: transparent;
}

/* Full-width frosted pill container */
.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    margin: 10px auto;
    max-width: 1160px;
    padding: 0 1.5rem;
    background: rgba(6, 14, 8, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 999px;
    /* Glow border via box-shadow instead of overflow:hidden trick */
    box-shadow:
        0 0 0 1.5px rgba(57, 224, 122, 0.22),
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(57, 224, 122, 0.08),
        inset 0 0 0 1px rgba(57, 224, 122, 0.1);
    /* No overflow:hidden — allows pseudo-elements to show outside */
    transition: box-shadow 0.4s ease;
}

/* Spinning conic border lives at z-index -1, BEHIND all content */
.header-inner::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            #39e07a 60deg,
            #00c957 90deg,
            transparent 150deg,
            transparent 360deg);
    animation: hdrGlowSpin 3.5s linear infinite;
    z-index: -1;
    opacity: 0.12;
}

/* Frosted inner fill — also behind content */
.header-inner::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    border-radius: 999px;
    background: rgba(6, 14, 8, 0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: -1;
}

/* header-glow-ring div is no longer used — animation is on .header-inner::before */

/* Logo */
.logo {
    text-decoration: none;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
    position: relative;
    z-index: 1;
}

.logo-dot {
    color: var(--color-text-accent);
}

/* Header phone CTA */
.header-phone-cta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    background: rgba(57, 224, 122, 0.1);
    border: 1px solid rgba(57, 224, 122, 0.25);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
    position: relative;
    z-index: 1;
}

.header-phone-cta i {
    color: var(--color-text-accent);
    font-size: 0.85rem;
    animation: phonePulse 2s ease-in-out infinite;
}

.header-phone-cta span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-phone-cta small {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-accent);
    opacity: 0.85;
}

.header-phone-cta:hover {
    background: rgba(57, 224, 122, 0.18);
    border-color: rgba(57, 224, 122, 0.5);
    box-shadow: 0 0 18px rgba(57, 224, 122, 0.18);
}

@keyframes phonePulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    40% {
        transform: scale(1.15) rotate(-12deg);
    }

    60% {
        transform: scale(1.1) rotate(12deg);
    }
}

/* Header actions (desktop) */
.header-actions {
    display: none;
    align-items: center;
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}

/* Hamburger */
.menu-toggle {
    background: rgba(57, 224, 122, 0.08);
    border: 1px solid rgba(57, 224, 122, 0.2);
    border-radius: 10px;
    color: #fff;
    font-size: 1.15rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background 0.25s;
}

.menu-toggle:hover {
    background: rgba(57, 224, 122, 0.18);
}

/* Mobile nav drawer */
.mobile-nav {
    display: none;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1.5rem 1.1rem;
    background: rgba(6, 14, 8, 0.96);
    border-top: 1px solid rgba(57, 224, 122, 0.1);
    animation: slideDown 0.25s ease;
}

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-phone-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text-accent);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(57, 224, 122, 0.1);
}

/* Desktop breakpoint */
@media (min-width: 992px) {
    .header-actions {
        display: flex;
    }

    .menu-toggle {
        display: none;
    }

    .mobile-nav {
        display: none !important;
    }

    .header-inner {
        height: 72px;
        padding: 0 2rem;
    }
}

/* ====================================================================
   FOOTER — Vibrant + Animated Top Glow Bar
   ==================================================================== */
@keyframes ftrBarScroll {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 400% 50%;
    }
}

.site-footer {
    position: relative;
    background: #020504;
    padding: 0;
    overflow: hidden;
}

/* Animated gradient top bar */
.footer-glow-bar {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,
            #39e07a, #00c957, #00ffaa, #39e07a, #00e5ff, #39e07a);
    background-size: 400% 100%;
    animation: ftrBarScroll 4s linear infinite;
    box-shadow: 0 0 18px rgba(57, 224, 122, 0.55),
        0 0 40px rgba(57, 224, 122, 0.2);
}

/* Main content grid */
.footer-inner {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.4fr;
    gap: 3rem;
    padding: 3.5rem 0 2.5rem;
}

/* Brand col */
.footer-brand .logo {
    text-decoration: none;
    display: inline-block;
}

.footer-tagline {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.48);
    line-height: 1.6;
    margin: 0.85rem 0 1.1rem;
    max-width: 300px;
}

.footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    background: rgba(57, 224, 122, 0.08);
    border: 1px solid rgba(57, 224, 122, 0.22);
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
    margin-bottom: 1.25rem;
}

.footer-phone i {
    color: var(--color-text-accent);
}

.footer-phone span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.footer-phone small {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-accent);
    opacity: 0.8;
}

.footer-phone:hover {
    background: rgba(57, 224, 122, 0.15);
    border-color: rgba(57, 224, 122, 0.45);
    box-shadow: 0 0 20px rgba(57, 224, 122, 0.15);
}

/* Trust pills */
.footer-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-trust-pills span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    padding: 0.3rem 0.7rem;
}

.footer-trust-pills i {
    color: var(--color-text-accent);
    font-size: 0.6rem;
}

/* Legal col */
.footer-col-title {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-accent);
    margin-bottom: 1.25rem;
}

.footer-legal-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-legal-links a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.2s, gap 0.2s;
}

.footer-legal-links a i {
    font-size: 0.55rem;
    color: var(--color-text-accent);
    opacity: 0.6;
}

.footer-legal-links a:hover {
    color: var(--color-text-accent);
    gap: 0.75rem;
}

.footer-legal-links a:hover i {
    opacity: 1;
}

/* CTA col */
.footer-cta-col p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* Pulsing CTA button */
.footer-cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: linear-gradient(135deg, #39e07a, #00c957);
    color: #020504;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.88rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.25s, box-shadow 0.25s;
    margin-bottom: 0.9rem;
    width: 100%;
    justify-content: center;
}

.footer-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(57, 224, 122, 0.4);
}

.footer-cta-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 2px solid rgba(57, 224, 122, 0.5);
    animation: ctaPulseRing 2s ease-out infinite;
    pointer-events: none;
}

@keyframes ctaPulseRing {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

.footer-cta-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    transition: color 0.2s;
}

.footer-cta-call i {
    color: var(--color-text-accent);
}

.footer-cta-call:hover {
    color: var(--color-text-accent);
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.25rem 0;
    background: rgba(0, 0, 0, 0.25);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer-bottom p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

.footer-bottom-legal {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.footer-bottom-legal a {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom-legal a:hover {
    color: var(--color-text-accent);
}

.footer-bottom-legal span {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.7rem;
}

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

    .footer-brand {
        grid-column: 1/3;
    }
}

@media (max-width: 560px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem 0 1.5rem;
    }

    .footer-brand {
        grid-column: unset;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}


/* Hero Section */
.hero {
    position: relative;
    padding: 120px 0 60px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg-glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(57, 224, 122, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    z-index: -1;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

/* ---- Hero: Content (left) ---- */
.hero-content {
    position: relative;
    z-index: 1;
}

/* Trust pills row under subtitle */
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(57, 224, 122, 0.07);
    border: 1px solid rgba(57, 224, 122, 0.25);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
}

.trust-pill i {
    color: var(--color-text-accent);
}

/* ---- Hero: Form column (right) ---- */
.hero-form-col {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* The base border line — fades at top & bottom (half from each edge) */
.hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(57, 224, 122, 0.0) 10%,
            rgba(57, 224, 122, 0.5) 50%,
            rgba(57, 224, 122, 0.0) 90%,
            transparent 100%);
    border-radius: 2px;
    display: none;
    z-index: 0;
    /* sits behind form & text content */
    /* Only on desktop */
}

/* The traveling light bead */
.hero-content::after {
    content: '';
    position: absolute;
    top: 15%;
    right: -3px;
    width: 8px;
    height: 80px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(57, 224, 122, 0.0) 0%,
            rgba(57, 224, 122, 0.9) 50%,
            rgba(57, 224, 122, 0.0) 100%);
    border-radius: 50%;
    filter: blur(4px);
    box-shadow: 0 0 18px 6px rgba(57, 224, 122, 0.4),
        0 0 40px 12px rgba(57, 224, 122, 0.15);
    animation: borderBeadTravel 4s ease-in-out infinite;
    display: none;
    z-index: 0;
    /* sits behind form & text content */
    /* Only on desktop */
}

@media (min-width: 992px) {

    .hero-content::before,
    .hero-content::after {
        display: block;
    }
}

/* Traveling bead goes top → bottom → top, contained within bounds */
@keyframes borderBeadTravel {
    0% {
        top: 15%;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    50% {
        top: calc(75% - 80px);
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        top: 15%;
        opacity: 0;
    }
}

/* Green ambient glow on the left side of the border (light spills left) */
.hero-content::before {
    box-shadow: 4px 0 30px 0px rgba(57, 224, 122, 0.0),
        2px 0 0 0 rgba(57, 224, 122, 0.4);
}


.badge-glass {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.badge-glass i {
    color: var(--color-text-accent);
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

.hero-subtitle {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.hero-form-card {
    padding: 2rem;
    max-width: 450px;
}

.hero-form-card h3 {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.lead-form input,
.lead-form select,
.lead-form textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 0.875rem 1rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    outline: none;
    border-color: var(--color-text-accent);
    background: rgba(0, 0, 0, 0.5);
}

.lead-form select {
    appearance: none;
    cursor: pointer;
}

.lead-form select option {
    background: var(--color-bg-base);
    color: #fff;
}

.privacy-note {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 1rem;
    opacity: 0.7;
}

.privacy-note i {
    margin-right: 0.3rem;
}

/* Visual Elements */
.hero-visual {
    display: none;
    position: relative;
    height: 100%;
}

@media (min-width: 992px) {
    .hero-visual {
        display: block;
    }
}

/* Hero Book Image */
.hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    animation: customFloat 8s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-book-img {
    width: 110%;
    height: auto;
    display: block;
    object-fit: contain;
    /* Vignette fade so the image blends into the dark background */
    -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.95;
}

.hero-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Additional edge darkening for a seamless blend with the #030303 background */
    box-shadow: inset 0 0 100px 50px var(--color-bg-base);
    pointer-events: none;
    border-radius: var(--radius-lg);
}

/* Hero Form & Accessory */
.hero-form-wrapper {
    position: relative;
    max-width: 450px;
    z-index: 2;
}

.hero-manuscript-accessory {
    display: none;
    position: absolute;
    top: 50%;
    right: -360px;
    /* Pushed significantly further right to add more space from the form */
    transform: translateY(-50%) scale(0.65);
    transform-origin: left center;
    z-index: 1;
    /* Keep it below the form which is z-index 2, but visible on the right */
    pointer-events: none;
}

@media (min-width: 1200px) {
    .hero-manuscript-accessory {
        display: block;
        /* Only show accessory beside form on larger screens */
    }
}

/* Hero Manuscript Visual */
.floating-manuscript {
    position: relative;
    width: 320px;
    height: 420px;
    margin: 0 auto;
    animation: customFloat 8s ease-in-out infinite;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.manuscript-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-3 {
    transform: rotate(6deg) translate(20px, 15px);
    opacity: 0.4;
    background: rgba(57, 224, 122, 0.05);
    border-color: rgba(57, 224, 122, 0.2);
}

.page-2 {
    transform: rotate(3deg) translate(10px, 5px);
    opacity: 0.7;
}

.page-1 {
    transform: rotate(0deg);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.5);
    background: rgba(10, 10, 12, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.page-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-accent);
    margin-bottom: 2rem;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.page-title-skeleton {
    height: 24px;
    width: 80%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.page-line-skeleton {
    height: 10px;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.page-line-skeleton.short {
    width: 60%;
    margin-bottom: 2rem;
}

.author-signature {
    margin-top: auto;
    display: flex;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    align-items: center;
    gap: 1rem;
}

.signature-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
}

.signature-line::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 10%;
    width: 60%;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M5,15 Q20,0 40,10 T80,5 T95,15" fill="none" stroke="%23f0a500" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.7;
}

.stamp-confidential {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    border: 3px solid rgba(57, 224, 122, 0.15);
    color: rgba(57, 224, 122, 0.15);
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: 4px;
    border-radius: 8px;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes customFloat {
    0% {
        transform: translateY(0px) perspective(1000px) rotateY(-5deg);
    }

    50% {
        transform: translateY(-15px) perspective(1000px) rotateY(0deg);
    }

    100% {
        transform: translateY(0px) perspective(1000px) rotateY(-5deg);
    }
}

/* Restored Hero Book Image Setup */
.hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    animation: customFloat 8s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-book-img {
    width: 110%;
    /* Slightly larger for the mask */
    height: auto;
    display: block;
    object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.95;
}

.hero-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 100px 50px var(--color-bg-base);
    pointer-events: none;
    border-radius: var(--radius-lg);
}

.trust-floating-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 10;
    /* Always above the border pseudo-elements */
}

.trust-floating-badge i {
    color: var(--color-text-accent);
    margin-right: 0.5rem;
}

.float-anim-1 {
    top: 10%;
    right: 5%;
    animation: float 5s ease-in-out infinite alternate;
}

.float-anim-2 {
    bottom: 20%;
    left: -5%;
    animation: float 7s ease-in-out infinite alternate;
}

.float-anim-3 {
    animation: float 6s ease-in-out infinite alternate-reverse;
}

@keyframes float {
    0% {
        transform: translateY(0px) perspective(1000px) rotateY(-15deg);
    }

    50% {
        transform: translateY(-20px) perspective(1000px) rotateY(-13deg);
    }

    100% {
        transform: translateY(0px) perspective(1000px) rotateY(-15deg);
    }
}

/* Hooks */
.hook-section {
    padding: 5rem 1.5rem;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.accent-bg {
    background: linear-gradient(to right, rgba(57, 224, 122, 0.03), transparent);
}

.hook-icon {
    font-size: 2.5rem;
    color: var(--color-text-accent);
    margin-bottom: 1.5rem;
}

.hook-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .hook-title {
        font-size: 3rem;
    }
}

.hook-subtitle {
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* Services */
.section-header {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.service-card {
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(57, 224, 122, 0.3);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--color-text-accent);
    margin-bottom: 1.5rem;
}

.service-card h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

/* Inline Offer Blocks */
.inline-offer-block {
    margin-top: -2rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 10;
}

.offer-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(57, 224, 122, 0.2);
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .offer-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 2.5rem 3rem;
    }
}

.offer-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(57, 224, 122, 0.1);
    color: var(--color-text-accent);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.offer-badge.alert {
    background: rgba(255, 50, 50, 0.1);
    color: #ff5555;
}

.offer-text h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Process */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.process-step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .process-step {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }

    /* Alternate sides */
    .process-step:nth-child(even) {
        flex-direction: row-reverse;
    }
}

.step-number {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.05);
    -webkit-text-stroke: 1px rgba(57, 224, 122, 0.3);
}

.step-content {
    padding: 2rem;
    flex: 1;
}

/* Confidentiality */
.confidential-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 992px) {
    .confidential-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: #fff;
}

.check-list i {
    margin-top: 0.3rem;
}

.trust-badges {
    display: flex;
    gap: 1.5rem;
    color: rgba(255, 255, 255, 0.2);
}

.nda-mockup {
    padding: 3rem 2rem;
    background: #0f0f11;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.nda-header {
    text-align: center;
    font-family: var(--font-heading);
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2rem;
    letter-spacing: 2px;
}

.nda-line {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 1rem;
    border-radius: 4px;
    width: 100%;
}

.nda-line.short {
    width: 60%;
}

.nda-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    border: 3px solid rgba(57, 224, 122, 0.2);
    color: rgba(57, 224, 122, 0.2);
    padding: 1rem 2rem;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 8px;
    letter-spacing: 4px;
}

/* FAQ Section */
.max-w-800 {
    max-width: 800px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    overflow: hidden;
    transition: var(--transition);
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    font-family: var(--font-heading);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-icon {
    color: var(--color-text-accent);
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 2rem;
    color: var(--color-text-secondary);
}

.faq-item.active .faq-question {
    color: var(--color-text-accent);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    padding-bottom: 1.5rem;
}

/* Reviews */
.reviews-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.review-card {
    padding: 2rem;
}

.stars {
    color: var(--color-text-accent);
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.review-text {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.review-author {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Final CTA */
.final-cta-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
}

@media (min-width: 992px) {
    .final-cta-wrapper {
        grid-template-columns: 1fr 1fr;
        padding: 4rem;
        gap: 4rem;
        align-items: center;
    }
}

.cta-info h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Footer */
.site-footer {
    background: #020202;
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.footer-brand p {
    margin-top: 1rem;
    max-width: 300px;
}

.footer-links h4 {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

.footer-links a {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--color-text-secondary);
}

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

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
}

/* Modals & Popups */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--color-bg-surface);
    padding: 2.5rem;
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: translateY(20px);
    transition: var(--transition);
    border: 1px solid rgba(57, 224, 122, 0.2);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.modal-header h2 {
    margin: 0.5rem 0;
}

/* Sticky Banner */
.sticky-banner {
    position: fixed;
    bottom: -100px;
    left: 1rem;
    right: 1rem;
    padding: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: var(--transition);
    border: 1px solid rgba(57, 224, 122, 0.3);
}

@media (min-width: 768px) {
    .sticky-banner {
        left: auto;
        right: 2rem;
        bottom: -150px;
        width: 350px;
    }
}

.sticky-banner.active {
    bottom: 1rem;
}

@media (min-width: 768px) {
    .sticky-banner.active {
        bottom: 2rem;
    }
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(57, 224, 122, 0.1);
    color: var(--color-text-accent);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.banner-text strong {
    display: block;
    color: #fff;
    font-size: 0.875rem;
}

.banner-text span {
    font-size: 0.75rem;
}

.banner-close {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* ===================================================
   PROMO BANNER STRIP
   =================================================== */
.promo-banner-strip {
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, #0d0d0d 0%, #001a0a 30%, #0d0d0d 100%);
    border-top: 2px solid rgba(57, 224, 122, 0.5);
    border-bottom: 2px solid rgba(57, 224, 122, 0.5);
    overflow: hidden;
    padding: 0;
    z-index: 10;
}

.promo-banner-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 200% at 50% 50%, rgba(57, 224, 122, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

/* Animated shimmer stripe */
.promo-banner-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(57, 224, 122, 0.06), transparent);
    animation: shimmerBanner 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmerBanner {
    0% {
        left: -60%;
    }

    100% {
        left: 120%;
    }
}

.promo-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    flex-wrap: wrap;
}

/* ---- Left: Pitch Ticker ---- */
.promo-pitch-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 300px;
    min-width: 0;
    overflow: hidden;
}

.promo-deal-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #39e07a 0%, #00c957 100%);
    color: #000;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.promo-ticker {
    overflow: hidden;
    height: 1.6rem;
    position: relative;
    flex: 1;
    mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}

.promo-ticker-track {
    display: flex;
    flex-direction: column;
    animation: tickerScroll 12s ease-in-out infinite;
}

.ticker-item {
    height: 1.6rem;
    line-height: 1.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    flex-shrink: 0;
}

.ticker-item strong {
    color: #39e07a;
}

@keyframes tickerScroll {
    0% {
        transform: translateY(0);
    }

    14% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-1.6rem);
    }

    34% {
        transform: translateY(-1.6rem);
    }

    40% {
        transform: translateY(-3.2rem);
    }

    54% {
        transform: translateY(-3.2rem);
    }

    60% {
        transform: translateY(-4.8rem);
    }

    74% {
        transform: translateY(-4.8rem);
    }

    80% {
        transform: translateY(-6.4rem);
    }

    94% {
        transform: translateY(-6.4rem);
    }

    100% {
        transform: translateY(0);
    }
}

/* ---- Center: Countdown ---- */
.promo-timer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.promo-timer-label {
    font-size: 0.7rem;
    color: rgba(57, 224, 122, 0.8);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: var(--font-heading);
    font-weight: 600;
}

.promo-countdown {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.promo-count-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(57, 224, 122, 0.3);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    min-width: 52px;
}

.promo-count-num {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: #39e07a;
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(57, 224, 122, 0.5);
}

.promo-count-unit {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-heading);
    font-weight: 700;
    margin-top: 0.1rem;
}

.promo-count-sep {
    font-size: 1.4rem;
    font-weight: 800;
    color: rgba(57, 224, 122, 0.6);
    font-family: var(--font-heading);
    line-height: 1;
    margin-bottom: 0.8rem;
}

/* ---- Right: CTA ---- */
.promo-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.promo-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #39e07a 0%, #00c957 100% 100%);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 20px rgba(57, 224, 122, 0.5), 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: pulseCta 2.5s ease-in-out infinite;
    white-space: nowrap;
}

.promo-cta-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 35px rgba(57, 224, 122, 0.7), 0 6px 20px rgba(0, 0, 0, 0.4);
    color: #000;
}

@keyframes pulseCta {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(57, 224, 122, 0.5), 0 4px 15px rgba(0, 0, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 40px rgba(57, 224, 122, 0.85), 0 4px 15px rgba(0, 0, 0, 0.4);
    }
}

.promo-cta-sub {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    white-space: nowrap;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .promo-banner-inner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.2rem 1rem;
    }

    .promo-pitch-wrap {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .promo-ticker {
        width: 100%;
        max-width: 320px;
    }
}

/* ==========================================================================
   BOOK SHOWCASE SECTION
   ========================================================================== */
.book-showcase-section {
    position: relative;
}

/* The main card — position:relative so border spans span inside it */
.book-showcase-card {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    /* tiny gap so border is visible */
    isolation: isolate;
}

/* ---- Animated Border Segments ---- */
/* Each .bsc-seg is a thin line that traces one side of the card.
   They're layered to create a continuous running-light effect. */
.bsc-seg {
    position: absolute;
    background: linear-gradient(90deg, transparent, #39e07a, transparent);
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
}

/* TOP: runs left to right */
.bsc-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #39e07a 50%, transparent 100%);
    animation: borderRunH 3s linear infinite;
}

/* BOTTOM: runs right to left */
.bsc-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #39e07a 50%, transparent 100%);
    animation: borderRunH 3s linear infinite reverse;
    animation-delay: -1.5s;
}

/* RIGHT: runs top to bottom */
.bsc-right {
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #39e07a 50%, transparent 100%);
    animation: borderRunV 3s linear infinite;
    animation-delay: -0.75s;
}

/* LEFT: runs bottom to top */
.bsc-left {
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #39e07a 50%, transparent 100%);
    animation: borderRunV 3s linear infinite reverse;
    animation-delay: -2.25s;
}

@keyframes borderRunH {
    0% {
        background-position-x: -100%;
    }

    100% {
        background-position-x: 200%;
    }
}

@keyframes borderRunV {
    0% {
        background-position-y: -100%;
    }

    100% {
        background-position-y: 200%;
    }
}

/* Use background-size for actual scroll effect */
.bsc-top,
.bsc-bottom {
    background-size: 60% 100%;
    background-repeat: no-repeat;
    animation: bscRunTop 3s linear infinite;
}

.bsc-bottom {
    animation: bscRunBottom 3s linear infinite;
    animation-delay: -1.5s;
}

.bsc-right {
    background-size: 100% 60%;
    background-repeat: no-repeat;
    animation: bscRunRight 3s linear infinite;
    animation-delay: -0.75s;
}

.bsc-left {
    background-size: 100% 60%;
    background-repeat: no-repeat;
    animation: bscRunLeft 3s linear infinite;
    animation-delay: -2.25s;
}

@keyframes bscRunTop {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes bscRunBottom {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@keyframes bscRunRight {
    0% {
        background-position: 0 -100%;
    }

    100% {
        background-position: 0 200%;
    }
}

@keyframes bscRunLeft {
    0% {
        background-position: 0 200%;
    }

    100% {
        background-position: 0 -100%;
    }
}

/* ---- Inner deep green glow ---- */
.bsc-inner-glow {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 0 40px 8px rgba(57, 224, 122, 0.08),
        inset 0 0 80px 20px rgba(57, 224, 122, 0.05),
        inset 0 0 120px 40px rgba(57, 224, 122, 0.03);
    z-index: 1;
    pointer-events: none;
    animation: bscGlowPulse 4s ease-in-out infinite;
}

@keyframes bscGlowPulse {

    0%,
    100% {
        box-shadow:
            inset 0 0 40px 8px rgba(57, 224, 122, 0.08),
            inset 0 0 80px 20px rgba(57, 224, 122, 0.05),
            inset 0 0 120px 40px rgba(57, 224, 122, 0.03);
    }

    50% {
        box-shadow:
            inset 0 0 60px 12px rgba(57, 224, 122, 0.14),
            inset 0 0 100px 30px rgba(57, 224, 122, 0.09),
            inset 0 0 160px 60px rgba(57, 224, 122, 0.06);
    }
}

/* ---- Inner layout ---- */
.book-showcase-inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 3rem 2.5rem;
    background: rgba(10, 10, 12, 0.75);
    backdrop-filter: blur(8px);
    border-radius: calc(var(--radius-lg) - 2px);
}

@media (min-width: 992px) {
    .book-showcase-inner {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 4rem;
    }
}

/* ---- Left content ---- */
.bsc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

.bsc-title {
    font-size: 2.5rem;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .bsc-title {
        font-size: 3rem;
    }
}

.bsc-desc {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

.bsc-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.bsc-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #fff;
    font-size: 0.95rem;
    /* Green shadow on list items from the card glow */
    text-shadow: 0 0 8px rgba(57, 224, 122, 0.15);
}

.bsc-features i {
    color: var(--color-text-accent);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* ---- Dual CTAs ---- */
.bsc-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.bsc-cta-phone,
.bsc-cta-chat {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.bsc-cta-phone {
    background: linear-gradient(135deg, #39e07a, #00c957);
    color: #000;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(57, 224, 122, 0.3);
}

.bsc-cta-phone:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(57, 224, 122, 0.5);
}

.bsc-cta-chat {
    background: rgba(57, 224, 122, 0.08);
    border: 1px solid rgba(57, 224, 122, 0.3);
    color: #fff;
    font-weight: 600;
}

.bsc-cta-chat:hover {
    background: rgba(57, 224, 122, 0.15);
    border-color: rgba(57, 224, 122, 0.6);
    transform: translateY(-2px);
}

.bsc-cta-phone i,
.bsc-cta-chat i {
    font-size: 1.2rem;
}

.bsc-cta-phone span,
.bsc-cta-chat span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 1rem;
}

.bsc-cta-phone small,
.bsc-cta-chat small {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Right: Book image ---- */
.bsc-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bsc-image-wrap {
    position: relative;
    max-width: 400px;
    width: 100%;
}

.bsc-book-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    animation: customFloat 8s ease-in-out infinite;
    /* Deep green shadow on the image from the card glow */
    filter: drop-shadow(0 0 30px rgba(57, 224, 122, 0.25));
}

.bsc-img-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(ellipse 60% 60% at 50% 60%, rgba(57, 224, 122, 0.18), transparent 70%);
    pointer-events: none;
    animation: bscGlowPulse 4s ease-in-out infinite;
}

/* ---- Floating stat chips on the book image ---- */
.bsc-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(10, 10, 12, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(57, 224, 122, 0.35);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    font-family: var(--font-heading);
    box-shadow: 0 4px 16px rgba(57, 224, 122, 0.15);
}

.bsc-chip i {
    color: var(--color-text-accent);
    font-size: 0.85rem;
}

.bsc-chip-1 {
    top: 10%;
    left: -8%;
    animation: customFloat 6s ease-in-out infinite;
}

.bsc-chip-2 {
    bottom: 25%;
    left: -12%;
    animation: customFloat 7s ease-in-out infinite;
    animation-delay: -2s;
}

.bsc-chip-3 {
    top: 20%;
    right: -8%;
    animation: customFloat 5.5s ease-in-out infinite;
    animation-delay: -1s;
}

/* ---- Typewriter heading ---- */
.bsc-static-word {
    color: #fff;
}

.bsc-typewriter {
    color: var(--color-text-accent);
    font-style: italic;
}

.bsc-cursor {
    display: inline-block;
    color: var(--color-text-accent);
    font-weight: 300;
    animation: cursorBlink 0.85s step-end infinite;
    margin-left: 2px;
}

@keyframes cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ---- Feature blocks ---- */
.bsc-feat-grid {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-bottom: 2rem;
}

.bsc-feat-block {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(57, 224, 122, 0.04);
    border: 1px solid rgba(57, 224, 122, 0.1);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.bsc-feat-block:hover {
    background: rgba(57, 224, 122, 0.08);
    border-color: rgba(57, 224, 122, 0.25);
    transform: translateX(4px);
}

.bsc-feat-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(57, 224, 122, 0.1);
    border-radius: 10px;
    color: var(--color-text-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.bsc-feat-block strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.2rem;
    font-family: var(--font-heading);
}

.bsc-feat-block p {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   HOOK ENHANCED SECTION — "Your Story. Our Words."
   ========================================================================== */
.hook-enhanced-section {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
}

/* ---- Outer border: distinct counter-rotating glowing dots ---- */
.hes-outer-border {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hes-ob-seg {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(57, 224, 122, 0.7), transparent);
    border-radius: 4px;
}

.hes-ob-top {
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: hesObRunTop 5s linear infinite;
}

.hes-ob-bottom {
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: hesObRunBottom 5s linear infinite;
    animation-delay: -2.5s;
}

.hes-ob-right {
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(57, 224, 122, 0.7), transparent);
    background-size: 100% 40%;
    background-repeat: no-repeat;
    animation: hesObRunRight 5s linear infinite;
    animation-delay: -1.25s;
}

.hes-ob-left {
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(57, 224, 122, 0.7), transparent);
    background-size: 100% 40%;
    background-repeat: no-repeat;
    animation: hesObRunLeft 5s linear infinite;
    animation-delay: -3.75s;
}

@keyframes hesObRunTop {
    0% {
        background-position: -100% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes hesObRunBottom {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -100% 0
    }
}

@keyframes hesObRunRight {
    0% {
        background-position: 0 -100%
    }

    100% {
        background-position: 0 200%
    }
}

@keyframes hesObRunLeft {
    0% {
        background-position: 0 200%
    }

    100% {
        background-position: 0 -100%
    }
}

/* ---- Main layout ---- */
.hes-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 992px) {
    .hes-inner {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

/* ---- Gallery wrapper ---- */
.hes-gallery {
    position: relative;
}

/* ---- Single slide view ---- */
.hes-single-view {
    position: relative;
    height: 420px;
}

.hes-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease, filter 0.9s ease;
    filter: blur(8px);
    pointer-events: none;
}

.hes-slide.active {
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
}

/* The 3 image cards — CSS-designed, vibrant visual identities */
.hes-slide-img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.hes-img-a {
    background: url('../images/hs-writing.jpg') center/cover no-repeat;
}

.hes-img-a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3, 3, 3, 0.82) 0%, rgba(3, 3, 3, 0.25) 60%, transparent 100%);
}

.hes-img-b {
    background: url('../images/hs-legacy.jpg') center/cover no-repeat;
}

.hes-img-b::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3, 3, 3, 0.82) 0%, rgba(3, 3, 3, 0.22) 60%, transparent 100%);
}

.hes-img-c {
    background: url('../images/hs-idea.jpg') center/cover no-repeat;
}

.hes-img-c::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3, 3, 3, 0.82) 0%, rgba(3, 3, 3, 0.22) 60%, transparent 100%);
}

@keyframes hesIconFloat {

    0%,
    100% {
        transform: translate(-50%, -60%) translateY(0);
    }

    50% {
        transform: translate(-50%, -60%) translateY(-12px);
    }
}

/* Slide overlay text */
.hes-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hes-slide-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(57, 224, 122, 0.12);
    border: 1px solid rgba(57, 224, 122, 0.35);
    color: var(--color-text-accent);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    width: fit-content;
}

.hes-slide-overlay p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.4;
}

/* ---- Grid view ---- */
.hes-grid-view {
    display: none;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem;
    height: 420px;
}

.hes-grid-view.visible {
    display: grid;
}

.hes-grid-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.95);
    transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}

.hes-grid-item.arrived {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* Staggered delays */
.hgi-a {
    transition-delay: 0s;
}

.hgi-b {
    transition-delay: 0.12s;
}

.hgi-c {
    grid-column: span 2;
    transition-delay: 0.24s;
}

/* Infinite shimmer while in grid */
.hes-grid-item.arrived .hes-slide-img::before {
    animation: hesGridShimmer 3s ease-in-out infinite;
}

@keyframes hesGridShimmer {

    0%,
    100% {
        opacity: 0.13;
    }

    50% {
        opacity: 0.26;
    }
}

.hes-grid-item .hes-slide-img {
    height: 100%;
}

/* ---- Dots ---- */
.hes-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.hes-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(57, 224, 122, 0.25);
    transition: all 0.3s ease;
    cursor: pointer;
}

.hes-dot.active {
    background: var(--color-text-accent);
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(57, 224, 122, 0.5);
}

.hes-dot-grid {
    font-size: 0.85rem;
    color: rgba(57, 224, 122, 0.4);
    background: none;
    width: auto;
    height: auto;
}

.hes-dot-grid.active {
    color: var(--color-text-accent);
    width: auto;
    background: none;
}

/* ---- Right: Content ---- */
.hes-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

.hes-title {
    font-size: 2.4rem;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    color: #fff;
}

@media (min-width: 768px) {
    .hes-title {
        font-size: 3rem;
    }
}

.hes-typewriter-wrap {
    display: inline;
    color: var(--color-text-accent);
    font-style: italic;
}

.hes-typed-word {
    color: var(--color-text-accent);
}

.hes-cursor {
    display: inline-block;
    color: var(--color-text-accent);
    animation: cursorBlink 0.85s step-end infinite;
    margin-left: 1px;
}

.hes-desc {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 2rem;
}

/* ---- CTA Block with animated racing border ---- */
.hes-cta-block {
    position: relative;
    border-radius: var(--radius-md);
    padding: 2px;
}

.hes-cta-border {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    pointer-events: none;
    z-index: 0;
}

.hcb-seg {
    position: absolute;
    border-radius: 2px;
}

/* CTA border: bright racing dots, faster speed */
.hcb-top {
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, #39e07a 50%, transparent 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: hcbTop 1.8s linear infinite;
}

.hcb-bottom {
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, #39e07a 50%, transparent 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: hcbBottom 1.8s linear infinite;
    animation-delay: -0.9s;
}

.hcb-right {
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #39e07a 50%, transparent 100%);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    animation: hcbRight 1.8s linear infinite;
    animation-delay: -0.45s;
}

.hcb-left {
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #39e07a 50%, transparent 100%);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    animation: hcbLeft 1.8s linear infinite;
    animation-delay: -1.35s;
}

@keyframes hcbTop {
    0% {
        background-position: -100% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes hcbBottom {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -100% 0
    }
}

@keyframes hcbRight {
    0% {
        background-position: 0 -100%
    }

    100% {
        background-position: 0 200%
    }
}

@keyframes hcbLeft {
    0% {
        background-position: 0 200%
    }

    100% {
        background-position: 0 -100%
    }
}

.hes-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(57, 224, 122, 0.04);
    border-radius: calc(var(--radius-md) - 2px);
    padding: 1.25rem 1.5rem;
    flex-wrap: wrap;
}

.hes-cta-pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-text-accent);
    box-shadow: 0 0 0 0 rgba(57, 224, 122, 0.5);
    animation: hesPulseDot 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes hesPulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(57, 224, 122, 0.5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(57, 224, 122, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(57, 224, 122, 0);
    }
}

.hes-cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.hes-cta-text strong {
    color: #fff;
    font-size: 0.92rem;
    font-family: var(--font-heading);
}

.hes-cta-text span {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
}

.hes-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #39e07a, #00c957);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.88rem;
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(57, 224, 122, 0.35);
    transition: var(--transition);
}

.hes-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(57, 224, 122, 0.5);
}

/* ==========================================================================
   PREMIUM SERVICES + PRICING SECTION
   ========================================================================== */
.services-premium {
    position: relative;
}

/* ---- Heading ---- */
.sp-heading {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
}

.sp-heading-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(57, 224, 122, 0.4), transparent);
}

.sp-heading-center {
    text-align: center;
    flex-shrink: 0;
}

.sp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
}

.sp-title {
    font-size: 2.6rem;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .sp-title {
        font-size: 1.8rem;
        white-space: normal;
    }

    .sp-heading {
        flex-direction: column;
        gap: 1rem;
    }

    .sp-heading-line {
        width: 80%;
    }
}

.sp-subtitle {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    max-width: 560px;
    margin: 0 auto;
}

/* ---- Asymmetric Bento Grid ---- */
.sp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .sp-grid {
        /* Layout:  [TALL-LEFT] [WIDE-TOP] [WIDE-BOT] [TALL-RIGHT]
           Uses named areas for clean asymmetry */
        grid-template-columns: 280px 1fr 280px;
        grid-template-rows: auto auto;
        grid-template-areas:
            "c1 c2 c4"
            "c1 c3 c4";
    }

    #spc1 {
        grid-area: c1;
    }

    #spc2 {
        grid-area: c2;
    }

    #spc3 {
        grid-area: c3;
    }

    #spc4 {
        grid-area: c4;
    }
}

/* ---- Base Card ---- */
.sp-card {
    position: relative;
    background: rgba(12, 14, 16, 0.85);
    border: 1px solid rgba(57, 224, 122, 0.12);
    border-radius: var(--radius-lg);
    padding: 2rem;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(.22, .68, 0, 1.2),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
    /* Entrance state — set by JS class */
}

.sp-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(57, 224, 122, 0.35);
    box-shadow: 0 20px 60px rgba(57, 224, 122, 0.12);
}

/* ---- Card ambient glow ---- */
.sp-card-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(57, 224, 122, 0.07), transparent 70%);
    transition: opacity 0.4s ease;
    opacity: 0.7;
}

.sp-card:hover .sp-card-glow {
    opacity: 1.4;
}

/* ---- Entrance animations — start hidden ---- */
.sp-from-left {
    opacity: 0;
    transform: translateX(-80px);
}

.sp-from-right {
    opacity: 0;
    transform: translateX(80px);
}

.sp-from-top {
    opacity: 0;
    transform: translateY(-60px);
}

.sp-from-bottom {
    opacity: 0;
    transform: translateY(60px);
}

.sp-from-left.sp-visible,
.sp-from-right.sp-visible,
.sp-from-top.sp-visible,
.sp-from-bottom.sp-visible {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 0.7s cubic-bezier(.22, .68, 0, 1.2),
        transform 0.7s cubic-bezier(.22, .68, 0, 1.2);
}

/* ---- Promo tag ---- */
.sp-promo-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.25rem;
    font-family: var(--font-heading);
    background: rgba(57, 224, 122, 0.1);
    border: 1px solid rgba(57, 224, 122, 0.3);
    color: var(--color-text-accent);
}

.sp-tag-featured {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.3);
    color: #f0c040;
}

.sp-tag-hot {
    background: rgba(255, 80, 60, 0.1);
    border-color: rgba(255, 80, 60, 0.3);
    color: #ff7060;
}

/* ---- Icon ---- */
.sp-icon-wrap {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(57, 224, 122, 0.1);
    border: 1px solid rgba(57, 224, 122, 0.2);
    border-radius: 14px;
    font-size: 1.4rem;
    color: var(--color-text-accent);
    margin-bottom: 1.1rem;
    transition: var(--transition);
}

.sp-card:hover .sp-icon-wrap {
    background: rgba(57, 224, 122, 0.18);
    box-shadow: 0 0 20px rgba(57, 224, 122, 0.2);
}

/* ---- Content ---- */
.sp-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
    font-family: var(--font-heading);
}

.sp-card-desc {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

/* ---- Feature list ---- */
.sp-card-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
}

.sp-card-features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.8);
}

.sp-card-features i {
    color: var(--color-text-accent);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ---- Pricing ---- */
.sp-pricing {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.sp-price-original {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: line-through;
    font-family: var(--font-heading);
}

.sp-price-now {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-text-accent);
    font-family: var(--font-heading);
    line-height: 1;
}

.sp-price-label {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* ---- CTA Button with pulse ring ---- */
.sp-cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #39e07a, #00c957);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.88rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: visible;
    transition: var(--transition);
    width: 100%;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(57, 224, 122, 0.3);
}

.sp-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(57, 224, 122, 0.5);
}

/* The auto-pulse ring element */
.sp-cta-pulse {
    position: absolute;
    inset: -3px;
    border-radius: 50px;
    border: 2px solid rgba(57, 224, 122, 0.6);
    animation: spPulseRing 2s ease-out infinite;
    pointer-events: none;
}

.sp-cta-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50px;
    border: 1.5px solid rgba(57, 224, 122, 0.35);
    animation: spPulseRing 2s ease-out infinite;
    animation-delay: 0.5s;
}

@keyframes spPulseRing {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

/* ---- Wide card inner layout ---- */
.sp-card-wide-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

@media (min-width: 992px) {
    .sp-card-wide-inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
    }

    .sp-card-wide-left {
        flex: 1;
    }

    .sp-card-wide-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   PROMO + MEET SECTION
   ========================================================================== */
.meet-section {
    position: relative;
    overflow: hidden;
}

/* ---- Corner beam accents (unique border concept) ---- */
.ms-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 0;
}

.ms-corner::before,
.ms-corner::after {
    content: '';
    position: absolute;
    background: var(--color-text-accent);
    border-radius: 2px;
    animation: msCornerPulse 3s ease-in-out infinite;
}

.ms-corner::before {
    width: 100%;
    height: 3px;
}

.ms-corner::after {
    width: 3px;
    height: 100%;
}

.ms-corner-tl {
    top: 0;
    left: 0;
}

.ms-corner-tr {
    top: 0;
    right: 0;
    transform: scaleX(-1);
}

.ms-corner-bl {
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
}

.ms-corner-br {
    bottom: 0;
    right: 0;
    transform: scale(-1);
}

.ms-corner-tl::before,
.ms-corner-tl::after {
    animation-delay: 0s;
}

.ms-corner-tr::before,
.ms-corner-tr::after {
    animation-delay: 0.5s;
}

.ms-corner-bl::before,
.ms-corner-bl::after {
    animation-delay: 1s;
}

.ms-corner-br::before,
.ms-corner-br::after {
    animation-delay: 1.5s;
}

@keyframes msCornerPulse {

    0%,
    100% {
        opacity: 0.6;
        box-shadow: 0 0 6px rgba(57, 224, 122, 0.4);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 18px rgba(57, 224, 122, 0.9);
    }
}

/* ---- Scan lines ---- */
.ms-scanline {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(57, 224, 122, 0.08), transparent);
}

.ms-scan-h {
    width: 100%;
    height: 2px;
    top: 50%;
    animation: msScanH 8s linear infinite;
}

.ms-scan-v {
    top: 0;
    width: 2px;
    height: 100%;
    left: 50%;
    background: linear-gradient(to bottom, transparent, rgba(57, 224, 122, 0.06), transparent);
    animation: msScanV 10s linear infinite;
}

@keyframes msScanH {
    0% {
        top: -2px
    }

    100% {
        top: calc(100% + 2px)
    }
}

@keyframes msScanV {
    0% {
        left: -2px
    }

    100% {
        left: calc(100% + 2px)
    }
}

/* ---- Layout ---- */
.ms-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .ms-inner {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 4rem;
    }
}

/* ============================
   LEFT SIDE
   ============================ */
.ms-promo-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ---- Promo Card ---- */
.ms-promo-card {
    position: relative;
    background: linear-gradient(135deg, rgba(12, 14, 16, 0.95) 0%, rgba(0, 30, 10, 0.85) 100%);
    border: 1px solid rgba(57, 224, 122, 0.25);
    border-radius: var(--radius-lg);
    padding: 2rem;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(57, 224, 122, 0.06);
}

/* Animated shimmer overlay */
.ms-promo-shine {
    position: absolute;
    top: -60%;
    left: -30%;
    width: 60%;
    height: 200%;
    background: linear-gradient(105deg, transparent 40%, rgba(57, 224, 122, 0.06) 50%, transparent 60%);
    animation: msShine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes msShine {
    0% {
        left: -40%;
    }

    100% {
        left: 120%;
    }
}

.ms-promo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ms-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    background: rgba(57, 224, 122, 0.12);
    border: 1px solid rgba(57, 224, 122, 0.35);
    border-radius: var(--radius-full);
    color: var(--color-text-accent);
    font-family: var(--font-heading);
}

.ms-promo-countdown-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ms-countdown-val {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-accent);
    font-size: 0.85rem;
}

.ms-promo-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.6rem;
    font-family: var(--font-heading);
}

.ms-promo-desc {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.ms-promo-perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
}

.ms-promo-perks li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.ms-promo-perks i {
    color: var(--color-text-accent);
    font-size: 0.8rem;
}

/* Claim CTA */
.ms-claim-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(135deg, #39e07a, #00c957);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.92rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(57, 224, 122, 0.35);
    transition: var(--transition);
}

.ms-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(57, 224, 122, 0.55);
}

.ms-claim-pulse {
    position: absolute;
    inset: -3px;
    border-radius: 50px;
    border: 2px solid rgba(57, 224, 122, 0.65);
    animation: spPulseRing 2s ease-out infinite;
    pointer-events: none;
}

/* ---- Google Meet Card ---- */
.ms-meet-card {
    background: rgba(8, 10, 12, 0.9);
    border: 1px solid rgba(57, 224, 122, 0.15);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.ms-meet-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.ms-meet-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(57, 224, 122, 0.07);
    border: 1px solid rgba(57, 224, 122, 0.2);
    border-radius: 12px;
    flex-shrink: 0;
}

.ms-meet-header strong {
    display: block;
    color: #fff;
    font-size: 0.92rem;
    font-family: var(--font-heading);
    margin-bottom: 0.15rem;
}

.ms-meet-header span {
    font-size: 0.76rem;
    color: var(--color-text-secondary);
}

.ms-meet-label {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ms-meet-label i {
    color: var(--color-text-accent);
}

.ms-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ms-slot {
    padding: 0.55rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-heading);
    background: rgba(57, 224, 122, 0.05);
    border: 1px solid rgba(57, 224, 122, 0.15);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.ms-slot:hover {
    background: rgba(57, 224, 122, 0.12);
    border-color: rgba(57, 224, 122, 0.4);
    color: #fff;
}

.ms-slot.selected {
    background: rgba(57, 224, 122, 0.18);
    border-color: rgba(57, 224, 122, 0.7);
    color: var(--color-text-accent);
    box-shadow: 0 0 10px rgba(57, 224, 122, 0.2);
}

.ms-slot-selected {
    font-size: 0.75rem;
    color: var(--color-text-accent);
    min-height: 1.2em;
    margin-bottom: 0.75rem;
}

.ms-meet-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem;
    background: transparent;
    border: 1.5px solid rgba(57, 224, 122, 0.4);
    border-radius: 50px;
    color: var(--color-text-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: var(--transition);
}

.ms-meet-btn:hover {
    background: rgba(57, 224, 122, 0.08);
    border-color: rgba(57, 224, 122, 0.8);
    box-shadow: 0 0 16px rgba(57, 224, 122, 0.2);
}

/* ============================
   RIGHT SIDE — Rotating beam border
   ============================ */
.ms-right {
    position: relative;
}

.ms-content-border-wrap {
    position: relative;
    padding: 3px;
    /* gap for the rotating beam to show */
    border-radius: var(--radius-lg);
}

/* The rotating conic-gradient beam — lighthouse effect */
.ms-content-border-rotator {
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-lg);
    background: conic-gradient(from var(--ms-angle, 0deg),
            transparent 0deg,
            rgba(57, 224, 122, 0.9) 30deg,
            rgba(57, 224, 122, 0.3) 60deg,
            transparent 90deg,
            transparent 270deg,
            rgba(57, 224, 122, 0.3) 300deg,
            rgba(57, 224, 122, 0.9) 330deg,
            transparent 360deg);
    animation: msRotate 4s linear infinite;
    mask: conic-gradient(#fff 0 0);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 3px;
    z-index: 0;
}

@property --ms-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes msRotate {
    to {
        --ms-angle: 360deg;
    }
}

/* Fallback for browsers that don't support @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .ms-content-border-rotator {
        border: 2px solid rgba(57, 224, 122, 0.5);
        background: none;
        animation: bscGlowPulse 3s ease-in-out infinite;
    }
}

.ms-content-box {
    position: relative;
    z-index: 1;
    background: rgba(8, 10, 12, 0.92);
    border-radius: calc(var(--radius-lg) - 3px);
    padding: 2.5rem;
    backdrop-filter: blur(8px);
}

.ms-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

.ms-title {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    color: #fff;
}

@media (min-width: 768px) {
    .ms-title {
        font-size: 2.8rem;
    }
}

.ms-desc {
    color: var(--color-text-secondary);
    line-height: 1.75;
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* Stats */
.ms-stats-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.ms-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ms-stat-num {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--color-text-accent);
    line-height: 1;
}

.ms-stat-plus {
    font-size: 1.2rem;
}

.ms-stat-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ms-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
}

/* Trust avatars */
.ms-trust-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 2rem;
}

.ms-trust-row p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.ms-trust-row strong {
    color: #fff;
}

.ms-avatars {
    display: flex;
}

.ms-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(57, 224, 122, 0.15);
    border: 2px solid rgba(3, 3, 3, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-text-accent);
    font-family: var(--font-heading);
    margin-left: -8px;
}

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

.ms-av4 {
    background: rgba(57, 224, 122, 0.25);
    font-size: 0.8rem;
}

/* Right CTA */
.ms-right-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, #39e07a, #00c957);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(57, 224, 122, 0.35);
    transition: var(--transition);
}

.ms-right-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 35px rgba(57, 224, 122, 0.55);
}

/* ==========================================================================
   PROCESS PREMIUM — Animated Zigzag Timeline
   ========================================================================== */
.process-premium {
    position: relative;
}

.pp-heading {
    margin-bottom: 4rem;
}

.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
}

/* ---- Timeline container ---- */
.pp-timeline {
    position: relative;
    padding: 2rem 0 3rem;
    max-width: 960px;
    margin: 0 auto;
}

/* ---- Vertical line track + animated fill ---- */
.pp-line-track {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 4px;
    background: rgba(57, 224, 122, 0.08);
    border-radius: 4px;
    z-index: 0;
}

.pp-line-fill {
    width: 100%;
    height: 0%;
    /* grows via JS */
    background: linear-gradient(to bottom, #39e07a, #00c957);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(57, 224, 122, 0.5);
    transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Individual step row ---- */
.pp-step {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 3.5rem;
    z-index: 1;
}

/* Hidden / visible states */
.pp-step-hidden {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(.22, .68, 0, 1.2),
        transform 0.7s cubic-bezier(.22, .68, 0, 1.2);
}

.pp-step-left.pp-step-hidden {
    transform: translateX(-70px);
}

.pp-step-right.pp-step-hidden {
    transform: translateX(70px);
}

.pp-final-cta.pp-step-hidden {
    transform: translateY(50px);
}

.pp-step-visible,
.pp-final-cta.pp-step-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* Left step: card left, node right-of-center */
.pp-step-left {
    flex-direction: row;
    justify-content: flex-start;
}

.pp-step-left .pp-card {
    margin-right: calc(50% + 2.5rem);
    text-align: right;
}

.pp-step-left .pp-node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Right step: card right, node left-of-center */
.pp-step-right {
    flex-direction: row;
    justify-content: flex-end;
}

.pp-step-right .pp-card {
    margin-left: calc(50% + 2.5rem);
}

.pp-step-right .pp-node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ---- Node ---- */
.pp-node {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(57, 224, 122, 0.2), rgba(0, 0, 0, 0.5));
    border: 2px solid rgba(57, 224, 122, 0.6);
    border-radius: 50%;
    z-index: 2;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(57, 224, 122, 0.06);
}

.pp-node-final {
    background: radial-gradient(circle, rgba(57, 224, 122, 0.35), rgba(0, 0, 0, 0.5));
    border-color: var(--color-text-accent);
    box-shadow: 0 0 20px rgba(57, 224, 122, 0.4);
}

.pp-node-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--color-text-accent);
    z-index: 1;
}

.pp-node-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(57, 224, 122, 0.25);
    animation: ppNodeRing 3s ease-in-out infinite;
}

@keyframes ppNodeRing {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* ---- Card ---- */
.pp-card {
    background: rgba(10, 12, 14, 0.85);
    border: 1px solid rgba(57, 224, 122, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    min-width: 260px;
    max-width: 400px;
    width: 100%;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.pp-card:hover {
    border-color: rgba(57, 224, 122, 0.3);
    box-shadow: 0 8px 30px rgba(57, 224, 122, 0.08);
}

/* Featured card — step 3 */
.pp-card-featured {
    border-color: rgba(57, 224, 122, 0.35);
    background: linear-gradient(135deg, rgba(10, 12, 14, 0.92), rgba(0, 25, 8, 0.8));
    box-shadow: 0 4px 30px rgba(57, 224, 122, 0.08);
}

.pp-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(57, 224, 122, 0.08);
    border: 1px solid rgba(57, 224, 122, 0.15);
    border-radius: 10px;
    font-size: 1rem;
    color: var(--color-text-accent);
    margin-bottom: 0.75rem;
    /* For right-aligned left steps */
}

.pp-step-left .pp-card-icon {
    margin-left: auto;
}

.pp-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
}

.pp-card-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: 0.75rem;
}

.pp-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-accent);
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

/* ---- Inline CTA (step 3) ---- */
.pp-inline-cta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(57, 224, 122, 0.05);
    border: 1px dashed rgba(57, 224, 122, 0.2);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.pp-cta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-accent);
    box-shadow: 0 0 0 0 rgba(57, 224, 122, 0.5);
    animation: hesPulseDot 2s ease-in-out infinite;
    flex-shrink: 0;
}

.pp-inline-cta span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    flex: 1;
}

.pp-cta-link {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    border: 1px solid rgba(57, 224, 122, 0.4);
    transition: var(--transition);
}

.pp-cta-link:hover {
    background: rgba(57, 224, 122, 0.1);
}

/* ---- Final CTA card ---- */
.pp-final-cta {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.pp-final-cta-card {
    position: relative;
    text-align: center;
    background: linear-gradient(135deg, rgba(8, 12, 10, 0.95), rgba(0, 20, 6, 0.9));
    border: 1px solid rgba(57, 224, 122, 0.3);
    border-radius: var(--radius-lg);
    padding: 2.5rem 3rem;
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(57, 224, 122, 0.08);
}

.pp-final-cta-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(57, 224, 122, 0.1), transparent 70%);
    pointer-events: none;
}

.pp-final-icon {
    font-size: 2.5rem;
    color: var(--color-text-accent);
    margin-bottom: 1rem;
    display: block;
    animation: hesIconFloat 5s ease-in-out infinite;
}

.pp-final-cta-card h3 {
    font-size: 1.5rem;
    color: #fff;
    font-family: var(--font-heading);
    margin-bottom: 0.6rem;
}

.pp-final-cta-card p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 1.75rem;
    line-height: 1.6;
}

.pp-final-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pp-final-btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.75rem;
    background: linear-gradient(135deg, #39e07a, #00c957);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(57, 224, 122, 0.35);
    transition: var(--transition);
}

.pp-final-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(57, 224, 122, 0.55);
}

.pp-final-pulse {
    position: absolute;
    inset: -3px;
    border-radius: 50px;
    border: 2px solid rgba(57, 224, 122, 0.6);
    animation: spPulseRing 2s ease-out infinite;
    pointer-events: none;
}

.pp-final-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: transparent;
    border: 1.5px solid rgba(57, 224, 122, 0.35);
    border-radius: 50px;
    color: var(--color-text-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: var(--transition);
}

.pp-final-btn-secondary:hover {
    background: rgba(57, 224, 122, 0.08);
    border-color: rgba(57, 224, 122, 0.7);
}

/* ---- Mobile: stack vertically ---- */
@media (max-width: 767px) {
    .pp-line-track {
        left: 24px;
    }

    .pp-step {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 64px;
    }

    .pp-step-left .pp-card,
    .pp-step-right .pp-card {
        margin: 0;
        text-align: left;
        max-width: 100%;
    }

    .pp-step-left .pp-card-icon {
        margin-left: 0;
    }

    .pp-step-left .pp-node,
    .pp-step-right .pp-node {
        left: 24px;
        top: 0;
        transform: translateX(-50%);
        position: absolute;
    }

    .pp-step-left.pp-step-hidden {
        transform: translateY(40px);
    }

    .pp-step-right.pp-step-hidden {
        transform: translateY(40px);
    }
}

/* ==========================================================================
   PREMIUM 3-STEP LEAD FORM
   ========================================================================== */
.lf-section {
    position: relative;
    overflow: hidden;
    background: #020504;
}

/* ---- Canvas background ---- */
.lf-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* ---- Grid mesh overlay ---- */
.lf-grid-mesh {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(57, 224, 122, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 224, 122, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

/* ---- Dual rotating outer border beams ---- */
.lf-border-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.lf-beam {
    position: absolute;
    width: 200%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(57, 224, 122, 0.0) 30%,
            rgba(57, 224, 122, 0.8) 50%,
            rgba(57, 224, 122, 0.0) 70%,
            transparent 100%);
    filter: blur(1px);
}

.lf-beam-1 {
    top: 0;
    left: -100%;
    animation: lfBeamH 5s linear infinite;
}

.lf-beam-2 {
    bottom: 0;
    right: -100%;
    animation: lfBeamH 5s linear infinite reverse;
    animation-delay: -2.5s;
}

@keyframes lfBeamH {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ---- Layout ---- */
.lf-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 992px) {
    .lf-inner {
        grid-template-columns: 1fr 1.4fr;
        gap: 5rem;
        align-items: center;
    }
}

/* ============================  LEFT COPY  ============================ */
.lf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

.lf-title {
    font-size: 2.4rem;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .lf-title {
        font-size: 3rem;
    }
}

.lf-desc {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.lf-trust-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 2rem;
}

.lf-trust-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
}

.lf-trust-item i {
    color: var(--color-text-accent);
    font-size: 0.8rem;
}

.lf-social-proof {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.lf-social-proof p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.lf-social-proof strong {
    color: var(--color-text-accent);
}

.lf-sp-avatars {
    display: flex;
}

.lf-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.6);
    margin-left: -8px;
    font-family: var(--font-heading);
}

.lf-sp-avatars .lf-av:first-child {
    margin-left: 0;
}

/* ============================ RIGHT FORM CARD ============================ */
.lf-form-card {
    position: relative;
    padding: 3px;
    border-radius: var(--radius-lg);
}

/* Rotating conic-gradient border — same lighthouse technique */
.lf-card-rotator {
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-lg);
    background: conic-gradient(from var(--lf-rot, 0deg),
            transparent 0deg,
            rgba(57, 224, 122, 1) 20deg,
            rgba(57, 224, 122, 0.4) 50deg,
            transparent 80deg,
            transparent 260deg,
            rgba(57, 224, 122, 0.3) 290deg,
            rgba(57, 224, 122, 0.9) 340deg,
            transparent 360deg);
    animation: lfCardRotate 5s linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 3px;
    z-index: 0;
}

@property --lf-rot {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes lfCardRotate {
    to {
        --lf-rot: 360deg;
    }
}

.lf-card-inner {
    position: relative;
    z-index: 1;
    background: rgba(6, 9, 8, 0.96);
    border-radius: calc(var(--radius-lg) - 3px);
    padding: 2rem 2rem 2.25rem;
    overflow: hidden;
}

/* Grid glow inside card */
.lf-card-inner::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 200px;
    background: radial-gradient(ellipse, rgba(57, 224, 122, 0.08), transparent 70%);
    pointer-events: none;
}

/* ============================ STEP PROGRESS HEADER ============================ */
.lf-steps-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.lf-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.lf-si-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.4s ease;
}

.lf-step-indicator span {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
    white-space: nowrap;
}

.lf-step-indicator.active .lf-si-num {
    background: rgba(57, 224, 122, 0.15);
    border-color: rgba(57, 224, 122, 0.8);
    color: var(--color-text-accent);
    box-shadow: 0 0 14px rgba(57, 224, 122, 0.3);
}

.lf-step-indicator.done .lf-si-num {
    background: rgba(57, 224, 122, 0.2);
    border-color: rgba(57, 224, 122, 0.6);
    color: var(--color-text-accent);
}

.lf-step-indicator.active span,
.lf-step-indicator.done span {
    color: var(--color-text-accent);
}

/* Connector line */
.lf-step-connector {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 0.5rem;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1.1rem;
    /* offset for label below */
}

.lf-connector-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #39e07a, #00c957);
    border-radius: 2px;
    transition: width 0.6s ease;
    box-shadow: 0 0 6px rgba(57, 224, 122, 0.5);
}

/* ============================ STEP PANELS ============================ */
.lf-step-panel {
    display: none;
    animation: lfSlideIn 0.4s cubic-bezier(.22, .68, 0, 1.2) both;
}

.lf-step-panel.active {
    display: block;
}

.lf-success {
    display: none;
    text-align: center;
    padding: 2rem 0;
}

.lf-success.visible {
    display: block;
    animation: lfSlideIn 0.5s ease;
}

@keyframes lfSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lf-step-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lf-step-title>i {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(57, 224, 122, 0.1);
    border: 1px solid rgba(57, 224, 122, 0.2);
    border-radius: 12px;
    font-size: 1.1rem;
    color: var(--color-text-accent);
}

.lf-step-title h3 {
    font-size: 1.1rem;
    color: #fff;
    font-family: var(--font-heading);
    margin: 0 0 0.15rem;
}

.lf-step-title p {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Field grid — 2 col on wider screens */
.lf-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
    .lf-field-grid {
        grid-template-columns: 1fr;
    }
}

/* Field */
.lf-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.lf-field:last-child {
    margin-bottom: 0;
}

.lf-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-heading);
}

.lf-field label span {
    color: var(--color-text-accent);
}

/* Input wrap with icon prefix */
.lf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.lf-input-wrap>i {
    position: absolute;
    left: 0.85rem;
    font-size: 0.8rem;
    color: rgba(57, 224, 122, 0.5);
    pointer-events: none;
}

.lf-input-wrap input,
.lf-input-wrap select,
.lf-field textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.88rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lf-input-wrap input,
.lf-input-wrap select {
    padding: 0.65rem 0.85rem 0.65rem 2.4rem;
}

.lf-field textarea {
    padding: 0.7rem 0.9rem;
    resize: vertical;
    min-height: 80px;
}

.lf-input-wrap input:focus,
.lf-input-wrap select:focus,
.lf-field textarea:focus {
    outline: none;
    border-color: rgba(57, 224, 122, 0.55);
    box-shadow: 0 0 0 3px rgba(57, 224, 122, 0.1);
}

.lf-input-wrap select option {
    background: #0a0c0a;
}

/* Error text */
.lf-err {
    font-size: 0.72rem;
    color: #ff6b6b;
    min-height: 1rem;
    display: block;
}

.lf-err:empty {
    display: none;
}

.lf-input-wrap.error input,
.lf-input-wrap.error select {
    border-color: rgba(255, 80, 80, 0.6);
}

/* ============================ SERVICE TYPE CARDS ============================ */
.lf-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

@media (max-width: 480px) {
    .lf-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lf-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.8rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lf-type-card i {
    font-size: 1.1rem;
}

.lf-type-card:hover {
    border-color: rgba(57, 224, 122, 0.3);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(57, 224, 122, 0.05);
}

.lf-type-card.selected {
    border-color: rgba(57, 224, 122, 0.7);
    background: rgba(57, 224, 122, 0.12);
    color: var(--color-text-accent);
    box-shadow: 0 0 12px rgba(57, 224, 122, 0.15);
}

/* ============================ BUDGET CARDS ============================ */
.lf-budget-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.lf-budget-card {
    flex: 1;
    min-width: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.65rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lf-b-range {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    color: #fff;
}

.lf-b-label {
    font-size: 0.62rem;
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
}

.lf-budget-card:hover {
    border-color: rgba(57, 224, 122, 0.3);
    background: rgba(57, 224, 122, 0.05);
}

.lf-budget-card.selected {
    border-color: rgba(57, 224, 122, 0.7);
    background: rgba(57, 224, 122, 0.12);
    box-shadow: 0 0 12px rgba(57, 224, 122, 0.15);
}

.lf-budget-card.selected .lf-b-range {
    color: var(--color-text-accent);
}

.lf-budget-card.selected .lf-b-label {
    color: rgba(57, 224, 122, 0.8);
}

/* ============================ NAV BUTTONS ============================ */
.lf-nav-btns {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.lf-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--transition);
}

.lf-back-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.lf-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    background: linear-gradient(135deg, #39e07a, #00c957);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.88rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(57, 224, 122, 0.35);
    transition: var(--transition);
    margin-left: auto;
}

.lf-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(57, 224, 122, 0.5);
}

/* ---- Submit button ---- */
.lf-submit-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.75rem;
    background: linear-gradient(135deg, #39e07a, #00c957);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(57, 224, 122, 0.4);
    transition: var(--transition);
    margin-left: auto;
}

.lf-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(57, 224, 122, 0.6);
}

.lf-submit-pulse {
    position: absolute;
    inset: -3px;
    border-radius: 50px;
    border: 2px solid rgba(57, 224, 122, 0.7);
    animation: spPulseRing 2s ease-out infinite;
    pointer-events: none;
}

/* ============================ SUCCESS STATE ============================ */
.lf-success-icon {
    font-size: 3.5rem;
    color: var(--color-text-accent);
    margin-bottom: 1rem;
    animation: lfCheckPop 0.6s cubic-bezier(.22, .68, 0, 1.8);
}

@keyframes lfCheckPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.lf-success h3 {
    font-size: 1.6rem;
    color: #fff;
    font-family: var(--font-heading);
    margin-bottom: 0.75rem;
}

.lf-success p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.lf-success strong {
    color: #fff;
}

.lf-success-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-accent);
    font-family: var(--font-heading);
    padding: 0.5rem 1rem;
    background: rgba(57, 224, 122, 0.08);
    border: 1px solid rgba(57, 224, 122, 0.25);
    border-radius: 50px;
}

/* ==========================================================================
   PREMIUM TESTIMONIALS MARQUEE
   ========================================================================== */
.tm-section {
    position: relative;
    background: #020504;
    padding: 5rem 0 4rem;
    overflow: hidden;
}

.tm-heading {
    text-align: center;
    margin-bottom: 3.5rem;
}

.tm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 0.85rem;
    font-family: var(--font-heading);
}

.tm-section .section-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.tm-section .section-subtitle {
    max-width: 500px;
    margin: 0 auto 2rem;
}

/* Stats strip */
.tm-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50px;
    padding: 0.85rem 2rem;
    width: fit-content;
    margin: 0 auto;
}

.tm-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem;
}

.tm-stat-num {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--color-text-accent);
    line-height: 1;
    display: inline;
}

.tm-stat>span:nth-child(2) {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--color-text-accent);
    line-height: 1;
    display: inline;
    margin-left: -2px;
}

.tm-stat p {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0.3rem 0 0;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.tm-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .tm-stats {
        border-radius: 16px;
        padding: 1rem;
    }

    .tm-stat {
        padding: 0 1rem;
    }

    .tm-stat-divider {
        display: none;
    }
}

/* Marquee wrapper */
.tm-marquee-wrap {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Edge fades */
.tm-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 220px;
    pointer-events: none;
    z-index: 2;
}

.tm-fade-left {
    left: 0;
    background: linear-gradient(to right, #020504 0%, transparent 100%);
}

.tm-fade-right {
    right: 0;
    background: linear-gradient(to left, #020504 0%, transparent 100%);
}

@media (max-width: 600px) {
    .tm-fade {
        width: 60px;
    }
}

/* Row */
.tm-row {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.tm-track {
    display: flex;
    gap: 1.1rem;
    padding: 0.5rem 0;
    will-change: transform;
    flex-shrink: 0;
}

/* Keyframes */
@keyframes tmScrollLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes tmScrollRight {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* Pause whole row on hover */
.tm-row:hover .tm-track {
    animation-play-state: paused !important;
}

/* Card */
.tm-card {
    flex-shrink: 0;
    width: 320px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 1.35rem 1.4rem 1.2rem;
    transition: border-color 0.3s ease, background 0.3s ease,
        transform 0.3s ease, box-shadow 0.3s ease;
}

.tm-card:hover {
    border-color: rgba(57, 224, 122, 0.35);
    background: rgba(57, 224, 122, 0.045);
    transform: translateY(-4px);
    box-shadow: 0 14px 44px rgba(57, 224, 122, 0.09);
}

.tm-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.tm-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
}

.tm-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    color: #fff;
    margin: 0;
}

.tm-role {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    font-family: var(--font-heading);
}

.tm-stars {
    margin-left: auto;
    flex-shrink: 0;
    color: #f8c00c;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
}

.tm-quote {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
    margin: 0 0 0.85rem;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    overflow: hidden;
}

.tm-tag {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-accent);
    background: rgba(57, 224, 122, 0.08);
    border: 1px solid rgba(57, 224, 122, 0.2);
    border-radius: 50px;
    padding: 0.2rem 0.65rem;
}

/* Bottom CTA */
.tm-bottom-cta {
    text-align: center;
    padding: 3rem 1rem 0;
}

.tm-bottom-cta .btn {
    margin-bottom: 0.85rem;
}

.tm-bottom-cta p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    margin: 0;
}

.tm-bottom-cta p i {
    color: var(--color-text-accent);
    font-size: 0.7rem;
}