/* ==========================================================
   FULL MOON WORKFLOWS
   PREMIUM DESIGN SYSTEM
   ========================================================== */


/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */

:root {

    --bg-primary: #06101d;
    --bg-secondary: #091827;
    --bg-tertiary: #0d2032;

    --surface: rgba(255, 255, 255, 0.045);
    --surface-strong: rgba(255, 255, 255, 0.075);
    --surface-hover: rgba(255, 255, 255, 0.095);

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.17);

    --text-primary: #f5f7f9;
    --text-secondary: #b9c4cf;
    --text-muted: #7f8d9b;

    --accent: #25d0c7;
    --accent-blue: #4c8cff;
    --accent-soft: rgba(37, 208, 199, 0.14);

    --success: #3bd89f;
    --warning: #f1c96b;

    --gradient-main:
        linear-gradient(
            135deg,
            #40e0d0 0%,
            #4c8cff 48%,
            #8f7cff 100%
        );

    --gradient-card:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );

    --shadow-soft:
        0 24px 70px rgba(0, 0, 0, 0.28);

    --shadow-card:
        0 20px 50px rgba(0, 0, 0, 0.22);

    --shadow-accent:
        0 0 60px rgba(37, 208, 199, 0.11);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 38px;

    --container: 1220px;

    --section-space: clamp(5rem, 9vw, 8.5rem);

    --transition-fast: 180ms ease;
    --transition-base: 320ms cubic-bezier(.22, 1, .36, 1);
    --transition-slow: 700ms cubic-bezier(.22, 1, .36, 1);
}


/* ==========================================================
   2. RESET
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(
            circle at 20% -10%,
            rgba(76, 140, 255, 0.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 10%,
            rgba(37, 208, 199, 0.08),
            transparent 28%
        ),
        var(--bg-primary);

    color: var(--text-primary);

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    color: inherit;
}

p,
h1,
h2,
h3,
h4 {
    margin-top: 0;
}

::selection {
    background: rgba(37, 208, 199, 0.30);
    color: white;
}


/* ==========================================================
   3. ACCESSIBILITY
   ========================================================== */

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;

    z-index: 9999;

    padding: 0.8rem 1rem;

    border-radius: 10px;

    background: white;
    color: #04111f;

    transform: translateY(-180%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid rgba(37, 208, 199, 0.78);
    outline-offset: 4px;
    border-radius: 6px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================
   4. GLOBAL LAYOUT
   ========================================================== */

.container {
    width: min(
        calc(100% - 2rem),
        var(--container)
    );

    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--section-space);
}

.section-heading {
    max-width: 780px;
    margin-bottom: 3rem;
}

.section-heading-wide {
    max-width: 900px;
}

.heading-with-action {
    max-width: none;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
}

.section-heading h2,
.founder-copy h2,
.workflow-feature-copy h2 {

    margin-bottom: 1.2rem;

    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );

    line-height: 1.06;

    letter-spacing: -0.045em;
}

.section-heading p,
.founder-copy p,
.workflow-feature-copy p {

    color: var(--text-secondary);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.15rem
        );
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 1rem;

    font-size: 0.74rem;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 800;

    color: var(--accent);
}

.eyebrow::before {
    content: "";

    width: 20px;
    height: 1px;

    background: var(--accent);
}


/* ==========================================================
   5. TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4 {
    color: var(--text-primary);
}

h3 {
    letter-spacing: -0.025em;
}

.gradient-text {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* ==========================================================
   6. BUTTONS
   ========================================================== */

.button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    min-height: 48px;

    padding:
        0.82rem
        1.25rem;

    border:
        1px solid
        transparent;

    border-radius: 999px;

    font-weight: 750;

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: #031218;

    background: var(--gradient-main);

    box-shadow:
        0 10px 35px
        rgba(37, 208, 199, 0.18);
}

.button-primary:hover {
    box-shadow:
        0 14px 44px
        rgba(37, 208, 199, 0.27);
}

.button-secondary {
    border-color: var(--border-strong);
    background: rgba(255,255,255,0.035);
    color: white;

    backdrop-filter: blur(12px);
}

.button-secondary:hover {
    background: rgba(255,255,255,0.07);
}

.button-large {
    min-height: 56px;
    padding-inline: 1.45rem;
}

.button-full {
    width: 100%;
}

.button-arrow {
    font-size: 1.1rem;
    transition: transform var(--transition-base);
}

.button:hover .button-arrow {
    transform:
        translate(2px, -2px);
}

.text-link {
    display: inline-flex;
    align-items: center;

    color: var(--accent);

    font-weight: 700;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.text-link:hover {
    color: white;
    transform: translateX(3px);
}


/* ==========================================================
   7. NAVIGATION
   ========================================================== */

.site-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    padding-block: 1rem;

    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        padding var(--transition-base),
        backdrop-filter var(--transition-base);
}

.site-header.is-scrolled {

    padding-block: 0.65rem;

    background:
        rgba(5, 14, 25, 0.76);

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    backdrop-filter:
        blur(18px)
        saturate(140%);
}

.nav-shell {

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 2rem;
}

.brand {

    display: inline-flex;
    align-items: center;

    gap: 0.8rem;
}

.brand-mark {

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(37, 208, 199, 0.20),
            rgba(76, 140, 255, 0.20)
        );

    border:
        1px solid
        rgba(255,255,255,0.12);

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.08);
}

.brand-copy {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.1;
}

.brand-tagline {
    margin-top: 0.25rem;

    color: var(--text-muted);

    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.primary-navigation {
    display: flex;
    align-items: center;

    gap: 1.45rem;

    font-size: 0.92rem;
    font-weight: 650;
}

.primary-navigation > a:not(.nav-cta) {
    color: var(--text-secondary);

    transition: color var(--transition-fast);
}

.primary-navigation > a:not(.nav-cta):hover {
    color: white;
}

.nav-cta {

    padding:
        0.7rem
        1.1rem;

    border-radius: 999px;

    background: rgba(255,255,255,0.06);

    border: 1px solid var(--border);

    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base);
}

.nav-cta:hover {
    background: rgba(255,255,255,0.10);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    background: rgba(255,255,255,0.05);

    border:
        1px solid
        var(--border);

    border-radius: 12px;
}

.nav-toggle-line {
    display: block;

    width: 20px;
    height: 1px;

    margin:
        4px
        auto;

    background: white;
}


/* ==========================================================
   8. HERO
   ========================================================== */

.hero-section {

    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding:
        9rem 0
        5rem;

    overflow: hidden;
}

.hero-grid-background {

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.35;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            transparent 80%
        );
}

.hero-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(10px);

    opacity: 0.3;

    pointer-events: none;
}

.hero-orb-one {

    width: 420px;
    height: 420px;

    top: 5%;
    left: -180px;

    background:
        radial-gradient(
            circle,
            rgba(37,208,199,0.25),
            transparent 68%
        );
}

.hero-orb-two {

    width: 520px;
    height: 520px;

    right: -200px;
    top: 12%;

    background:
        radial-gradient(
            circle,
            rgba(76,140,255,0.22),
            transparent 68%
        );
}

.hero-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, 0.95fr);

    align-items: center;

    gap: clamp(3rem, 6vw, 7rem);
}

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

.hero-badge {

    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    margin-bottom: 1.4rem;

    padding:
        0.55rem
        0.85rem;

    border-radius: 999px;

    border: 1px solid var(--border);

    background:
        rgba(255,255,255,0.04);

    color: var(--text-secondary);

    font-size: 0.8rem;
    font-weight: 650;
}

.hero-badge-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 18px
        rgba(59,216,159,0.8);
}

.hero-title {

    margin-bottom: 1.6rem;

    max-width: 850px;

    font-size:
        clamp(
            3rem,
            6vw,
            6.4rem
        );

    line-height: 0.98;

    letter-spacing: -0.065em;

    font-weight: 800;
}

.hero-description {

    max-width: 690px;

    margin-bottom: 2rem;

    color: var(--text-secondary);

    font-size:
        clamp(
            1rem,
            1.6vw,
            1.22rem
        );
}

.hero-actions {

    display: flex;
    flex-wrap: wrap;

    gap: 0.9rem;

    margin-bottom: 2rem;
}

.hero-trust-row {

    display: flex;
    flex-wrap: wrap;

    gap:
        0.65rem
        1.3rem;

    max-width: 800px;

    color: var(--text-muted);

    font-size: 0.76rem;
}

.hero-trust-row span {

    position: relative;

    padding-left: 1rem;
}

.hero-trust-row span::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0.65em;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--accent);
}


/* ==========================================================
   9. AUTOMATION VISUAL
   ========================================================== */

.hero-visual {

    position: relative;
    z-index: 2;
}

.automation-canvas {

    position: relative;

    min-height: 560px;

    padding: 1.4rem;

    border:
        1px solid
        rgba(255,255,255,0.11);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.02)
        );

    box-shadow:
        var(--shadow-soft),
        inset 0 1px 0 rgba(255,255,255,0.08);

    backdrop-filter:
        blur(24px);

    overflow: hidden;

    transform-style: preserve-3d;
}

.automation-canvas::before {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: 50%;
    top: 45%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37,208,199,0.11),
            transparent 65%
        );

    pointer-events: none;
}

.automation-status {

    position: absolute;

    top: 1.3rem;
    right: 1.3rem;

    display: flex;
    align-items: center;

    gap: 0.45rem;

    padding:
        0.48rem
        0.68rem;

    border-radius: 999px;

    background:
        rgba(4, 18, 27, 0.68);

    border:
        1px solid
        rgba(255,255,255,0.08);

    color: var(--text-secondary);

    font-size: 0.7rem;
    font-weight: 700;
}

.live-dot {

    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 16px
        rgba(59,216,159,0.8);
}

.workflow-node {

    position: absolute;

    display: flex;
    align-items: center;

    gap: 0.8rem;

    min-width: 215px;

    padding:
        0.92rem
        1rem;

    border-radius: 16px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    background:
        rgba(6, 16, 29, 0.80);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.24);

    backdrop-filter:
        blur(12px);
}

.workflow-node small {

    display: block;

    margin-bottom: 0.1rem;

    color: var(--text-muted);

    font-size: 0.67rem;
}

.workflow-node strong {

    font-size: 0.82rem;
    font-weight: 750;
}

.node-icon {

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 35px;
    height: 35px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(37,208,199,0.18),
            rgba(76,140,255,0.16)
        );

    color: var(--accent);

    font-size: 0.67rem;
    font-weight: 900;
}

.node-lead {
    top: 90px;
    left: 34px;
}

.node-ai {
    top: 205px;
    right: 28px;
}

.node-crm {
    top: 335px;
    left: 40px;
}

.node-booking {
    bottom: 50px;
    right: 34px;
}

.workflow-connector {

    position: absolute;

    width: 110px;
    height: 90px;

    border:
        1px dashed
        rgba(37,208,199,0.26);

    border-left: 0;
    border-bottom: 0;

    border-radius:
        0
        50px
        0
        0;

    pointer-events: none;
}

.connector-one {
    top: 135px;
    left: 230px;
}

.connector-two {
    top: 255px;
    right: 190px;

    transform:
        rotate(135deg);
}

.connector-three {
    bottom: 115px;
    left: 225px;
}

.workflow-connector span {

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 16px
        rgba(37,208,199,0.9);
}

.mini-notification {

    position: absolute;

    left: 50%;

    bottom: 18px;

    transform:
        translateX(-50%);

    display: flex;
    align-items: center;

    gap: 0.7rem;

    width: 72%;

    padding:
        0.8rem
        0.9rem;

    border-radius: 15px;

    border:
        1px solid
        rgba(59,216,159,0.18);

    background:
        rgba(4, 29, 25, 0.78);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.22);
}

.notification-check {

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background:
        rgba(59,216,159,0.15);

    color: var(--success);

    font-weight: 900;
}

.mini-notification strong {

    display: block;

    font-size: 0.78rem;
}

.mini-notification small {

    display: block;

    color: var(--text-muted);

    font-size: 0.66rem;
}


/* ==========================================================
   10. OUTCOME STRIP
   ========================================================== */

.outcome-strip {

    border-top:
        1px solid
        rgba(255,255,255,0.06);

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.015);
}

.outcome-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);
}

.outcome-item {

    padding:
        1.7rem
        1.2rem;

    border-right:
        1px solid
        rgba(255,255,255,0.06);
}

.outcome-item:last-child {
    border-right: 0;
}

.outcome-item strong {

    display: block;

    margin-bottom: 0.3rem;

    color: white;

    font-size: 0.92rem;
}

.outcome-item span {

    color: var(--text-muted);

    font-size: 0.74rem;
}


/* ==========================================================
   11. PREMIUM CARDS
   ========================================================== */

.premium-card,
.problem-card,
.process-card {

    position: relative;

    border:
        1px solid
        var(--border);

    background:
        var(--gradient-card);

    border-radius: var(--radius-lg);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.04);

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base);

    overflow: hidden;
}

.premium-card::before,
.problem-card::before,
.process-card::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0;

    background:
        radial-gradient(
            circle at var(--mouse-x, 50%)
            var(--mouse-y, 50%),
            rgba(37,208,199,0.09),
            transparent 42%
        );

    transition:
        opacity var(--transition-base);

    pointer-events: none;
}

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

.premium-card:hover,
.problem-card:hover,
.process-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(255,255,255,0.17);

    box-shadow:
        var(--shadow-card),
        var(--shadow-accent);
}


/* ==========================================================
   12. PROBLEM SECTION
   ========================================================== */

.problem-section {

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,0.015),
            transparent
        );
}

.problem-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 1rem;
}

.problem-card {

    min-height: 270px;

    padding: 1.6rem;

    display: flex;
    flex-direction: column;
}

.problem-number {

    margin-bottom: auto;

    color: var(--accent);

    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.problem-card h3 {

    margin-bottom: 0.8rem;

    font-size: 1.2rem;
}

.problem-card p {

    color: var(--text-secondary);

    font-size: 0.9rem;
}

.problem-result {

    margin-top: 1rem;

    color: var(--accent);

    font-size: 0.77rem;
    font-weight: 750;
}


/* ==========================================================
   13. SERVICES
   ========================================================== */

.service-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 1rem;
}

.service-card {

    min-height: 290px;

    padding: 1.55rem;
}

.card-topline {

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 3.5rem;
}

.card-index {

    color: var(--text-muted);

    font-size: 0.7rem;
    letter-spacing: 0.14em;
}

.card-arrow {

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: rgba(255,255,255,0.045);

    color: var(--text-secondary);

    transition:
        transform var(--transition-base),
        background var(--transition-base),
        color var(--transition-base);
}

.service-card:hover .card-arrow {

    transform:
        translate(2px, -2px);

    background:
        rgba(37,208,199,0.10);

    color: var(--accent);
}

.service-card h3,
.industry-card h3,
.demo-card h3,
.pricing-card h3 {

    margin-bottom: 0.8rem;

    font-size:
        clamp(
            1.18rem,
            2vw,
            1.5rem
        );
}

.service-card p,
.industry-card p,
.demo-card p {

    color: var(--text-secondary);

    font-size: 0.9rem;
}

.service-card .text-link {

    position: absolute;

    bottom: 1.5rem;
}


/* ==========================================================
   14. WORKFLOW FEATURE
   ========================================================== */

.workflow-feature-section {

    border-block:
        1px solid
        rgba(255,255,255,0.05);

    background:
        linear-gradient(
            135deg,
            rgba(76,140,255,0.045),
            rgba(37,208,199,0.025)
        );
}

.workflow-feature-grid {

    display: grid;

    grid-template-columns:
        0.95fr 1.05fr;

    align-items: center;

    gap: clamp(3rem, 7vw, 7rem);
}

.workflow-benefits {

    display: grid;

    gap: 0.65rem;

    margin-top: 2rem;

    color: var(--text-secondary);

    font-size: 0.88rem;
}

.workflow-benefits span {

    padding-bottom: 0.65rem;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}

.workflow-feature-panel {

    padding: 1rem;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-xl);

    background:
        rgba(255,255,255,0.025);
}

.workflow-list {

    list-style: none;

    margin: 0;
    padding: 0;
}

.workflow-step {

    display: grid;

    grid-template-columns:
        54px 1fr;

    align-items: center;

    gap: 1rem;

    min-height: 76px;

    padding:
        0.8rem
        1rem;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}

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

.workflow-number {

    color: var(--accent);

    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.workflow-copy {

    color: var(--text-secondary);

    font-size: 0.9rem;
}


/* ==========================================================
   15. INDUSTRIES
   ========================================================== */

.industry-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 1rem;
}

.industry-card {

    min-height: 250px;

    padding: 1.5rem;
}

.industry-card .text-link {

    position: absolute;

    bottom: 1.5rem;
}

.section-bottom-action {

    margin-top: 2rem;

    display: flex;
    justify-content: center;
}


/* ==========================================================
   16. DEMOS
   ========================================================== */

.demos-section {

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(37,208,199,0.025),
            transparent
        );
}

.demo-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 1rem;
}

.demo-card {

    min-height: 330px;

    padding: 1.5rem;
}

.demo-card-header {

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 0.5rem;

    margin-bottom: 3rem;
}

.trust-label {

    display: inline-flex;

    padding:
        0.45rem
        0.65rem;

    border-radius: 999px;

    background:
        rgba(37,208,199,0.08);

    border:
        1px solid
        rgba(37,208,199,0.15);

    color: var(--accent);

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.live-indicator {

    display: inline-flex;
    align-items: center;

    gap: 0.38rem;

    color: var(--text-muted);

    font-size: 0.67rem;
}

.demo-meta {

    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 1rem;
}

.demo-meta span {

    padding:
        0.35rem
        0.5rem;

    border-radius: 7px;

    background:
        rgba(255,255,255,0.035);

    color: var(--text-muted);

    font-size: 0.64rem;
}

.demo-card .text-link {

    position: absolute;

    bottom: 1.5rem;
}

.demo-disclaimer {

    max-width: 700px;

    margin:
        2rem
        auto 0;

    text-align: center;

    color: var(--text-muted);

    font-size: 0.78rem;
}


/* ==========================================================
   17. PROCESS
   ========================================================== */

.process-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 1rem;
}

.process-card {

    min-height: 230px;

    padding: 1.4rem;
}

.process-number {

    display: inline-block;

    margin-bottom: 3rem;

    color: var(--accent);

    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.process-card h3 {

    margin-bottom: 0.6rem;

    font-size: 1.15rem;
}

.process-card p {

    color: var(--text-secondary);

    font-size: 0.84rem;
}


/* ==========================================================
   18. FOUNDER
   ========================================================== */

.founder-section {

    overflow: hidden;

    border-block:
        1px solid
        rgba(255,255,255,0.05);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.015),
            rgba(76,140,255,0.025)
        );
}

.founder-grid {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: clamp(3rem, 7vw, 7rem);

    align-items: center;
}

.founder-visual {

    position: relative;

    min-height: 500px;
}

.founder-monogram {

    position: absolute;

    inset:
        50%
        auto
        auto
        50%;

    transform:
        translate(-50%, -50%);

    display: grid;
    place-items: center;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(37,208,199,0.18),
            rgba(76,140,255,0.10),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid
        rgba(255,255,255,0.11);

    box-shadow:
        0 0 100px
        rgba(37,208,199,0.08);
}

.founder-monogram span {

    font-size: 3rem;
    font-weight: 850;
    letter-spacing: -0.06em;

    background: var(--gradient-main);

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
}

.founder-floating-card {

    position: absolute;

    min-width: 155px;

    padding:
        0.9rem
        1rem;

    border-radius: 15px;

    background:
        rgba(6,16,29,0.76);

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow-card);

    backdrop-filter:
        blur(15px);
}

.founder-floating-card small {

    display: block;

    margin-bottom: 0.15rem;

    color: var(--text-muted);

    font-size: 0.63rem;
}

.founder-floating-card strong {

    font-size: 0.8rem;
}

.founder-card-one {
    top: 45px;
    right: 15px;
}

.founder-card-two {
    bottom: 70px;
    left: 15px;
}

.founder-card-three {
    bottom: 30px;
    right: 5px;
}

.founder-intro {

    font-size: 1.14rem !important;

    color: white !important;
}


/* ==========================================================
   19. PRICING
   ========================================================== */

.pricing-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 1rem;
}

.pricing-card {

    min-height: 475px;

    padding: 1.5rem;

    display: flex;
    flex-direction: column;
}

.price {

    margin:
        1rem 0
        1.6rem;
}

.price-prefix {

    display: block;

    color: var(--text-muted);

    font-size: 0.68rem;
}

.price strong {

    display: block;

    font-size: 2.4rem;

    letter-spacing: -0.05em;
}

.feature-list {

    list-style: none;

    margin: 0;
    padding: 0;

    display: grid;

    gap: 0.65rem;

    color: var(--text-secondary);

    font-size: 0.82rem;
}

.feature-list li {

    position: relative;

    padding-left: 1rem;
}

.feature-list li::before {

    content: "•";

    position: absolute;

    left: 0;

    color: var(--accent);
}

.pricing-note {

    margin-top: 1rem;

    color: var(--text-muted);

    font-size: 0.7rem;
}

.pricing-card .button {

    margin-top: auto;
}

.commercial-note {

    max-width: 820px;

    margin:
        2rem
        auto 0;

    padding: 1rem 1.2rem;

    text-align: center;

    border-radius: 16px;

    border:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,0.025);

    color: var(--text-secondary);

    font-size: 0.8rem;
}


/* ==========================================================
   20. FAQ
   ========================================================== */

.faq-layout {

    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: clamp(3rem, 7vw, 6rem);

    align-items: start;
}

.faq-heading {

    position: sticky;

    top: 130px;
}

.faq-heading h2 {

    font-size:
        clamp(
            2rem,
            4vw,
            3.8rem
        );

    line-height: 1.08;

    letter-spacing: -0.045em;
}

.faq-heading p {

    color: var(--text-secondary);

    margin-bottom: 1.5rem;
}

.faq-list {

    border-top:
        1px solid
        var(--border);
}

.faq-item {

    border-bottom:
        1px solid
        var(--border);
}

.faq-question {

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    padding:
        1.5rem
        0;

    border: 0;

    background: transparent;

    text-align: left;

    cursor: pointer;

    font-weight: 750;
}

.faq-icon {

    font-size: 1.35rem;

    color: var(--accent);

    transition:
        transform var(--transition-base);
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows var(--transition-base);
}

.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    overflow: hidden;
}

.faq-answer p {

    padding-bottom: 1.5rem;

    margin: 0;

    color: var(--text-secondary);

    font-size: 0.9rem;
}


/* ==========================================================
   21. CTA
   ========================================================== */

.premium-cta {

    padding-top: 2rem;
}

.cta-panel {

    position: relative;

    overflow: hidden;

    min-height: 420px;

    display: flex;
    align-items: center;

    padding:
        clamp(
            2rem,
            6vw,
            5rem
        );

    border-radius: var(--radius-xl);

    border:
        1px solid
        rgba(255,255,255,0.11);

    background:
        linear-gradient(
            135deg,
            rgba(37,208,199,0.09),
            rgba(76,140,255,0.075),
            rgba(255,255,255,0.025)
        );

    box-shadow:
        var(--shadow-soft);
}

.cta-content {

    position: relative;
    z-index: 2;

    max-width: 760px;
}

.cta-content h2 {

    margin-bottom: 1rem;

    font-size:
        clamp(
            2.2rem,
            5vw,
            4.8rem
        );

    line-height: 1.02;

    letter-spacing: -0.055em;
}

.cta-content p {

    max-width: 620px;

    margin-bottom: 2rem;

    color: var(--text-secondary);
}

.button-row {

    display: flex;
    flex-wrap: wrap;

    gap: 0.8rem;
}

.cta-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(10px);

    pointer-events: none;
}

.cta-orb-one {

    width: 350px;
    height: 350px;

    top: -140px;
    right: -90px;

    background:
        radial-gradient(
            circle,
            rgba(37,208,199,0.20),
            transparent 65%
        );
}

.cta-orb-two {

    width: 400px;
    height: 400px;

    bottom: -240px;
    left: 20%;

    background:
        radial-gradient(
            circle,
            rgba(76,140,255,0.16),
            transparent 65%
        );
}


/* ==========================================================
   22. FOOTER
   ========================================================== */

.site-footer {

    margin-top: var(--section-space);

    padding:
        4rem
        0
        2rem;

    border-top:
        1px solid
        rgba(255,255,255,0.07);

    background:
        rgba(0,0,0,0.12);
}

.footer-grid {

    display: grid;

    grid-template-columns:
        2fr
        repeat(3, 1fr);

    gap: 3rem;
}

.footer-description {

    max-width: 360px;

    margin-top: 1rem;

    color: var(--text-secondary);

    font-size: 0.86rem;
}

.footer-founder {

    color: var(--text-muted);

    font-size: 0.72rem;
}

.footer-column {

    display: grid;

    align-content: start;

    gap: 0.7rem;
}

.footer-heading {

    margin-bottom: 0.4rem;

    font-size: 0.78rem;

    color: white;

    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.footer-column a {

    color: var(--text-muted);

    font-size: 0.8rem;

    transition:
        color var(--transition-fast);
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {

    display: flex;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 3rem;

    padding-top: 1.5rem;

    border-top:
        1px solid
        rgba(255,255,255,0.06);

    color: var(--text-muted);

    font-size: 0.67rem;
}


/* ==========================================================
   23. REVEAL STARTING STATES
   ========================================================== */

html.js [data-reveal] {

    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity 700ms
            cubic-bezier(.22, 1, .36, 1),

        transform 700ms
            cubic-bezier(.22, 1, .36, 1);
}

html.js [data-reveal].is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   24. PAGE TRANSITION + INTERACTION GLOW
   ========================================================== */

.page-transition {

    position: fixed;

    inset: 0;

    z-index: 9998;

    pointer-events: none;

    background: var(--bg-primary);

    transform:
        translateY(100%);

    transition:
        transform 550ms
        cubic-bezier(.76, 0, .24, 1);
}

.interaction-glow {

    position: fixed;

    z-index: -1;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.08;

    background:
        radial-gradient(
            circle,
            rgba(37,208,199,0.60),
            transparent 68%
        );

    transform:
        translate(
            -50%,
            -50%
        );

    transition:
        opacity 200ms ease;
}


/* ==========================================================
   25. RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

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

    .hero-content {
        max-width: 900px;
    }

    .hero-visual {
        max-width: 700px;
        width: 100%;
        margin-inline: auto;
    }

    .problem-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .service-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .industry-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .demo-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

    .pricing-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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


@media (max-width: 820px) {

    :root {
        --section-space: 5rem;
    }

    .site-header {
        padding-block: 0.8rem;
    }

    .primary-navigation {

        position: fixed;

        top: 72px;
        left: 1rem;
        right: 1rem;

        display: grid;

        gap: 0;

        padding: 0.6rem;

        border:
            1px solid
            var(--border);

        border-radius: 18px;

        background:
            rgba(5,14,25,0.96);

        backdrop-filter:
            blur(20px);

        box-shadow:
            var(--shadow-soft);

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-10px);

        transition:
            opacity var(--transition-base),
            transform var(--transition-base),
            visibility var(--transition-base);
    }

    .primary-navigation.is-open {

        opacity: 1;
        visibility: visible;

        transform:
            translateY(0);
    }

    .primary-navigation > a {

        padding:
            0.9rem
            1rem;

        border-radius: 10px;
    }

    .nav-toggle {
        display: block;
    }

    .brand-tagline {
        display: none;
    }

    .hero-section {

        min-height: auto;

        padding-top: 8rem;
    }

    .hero-title {
        font-size:
            clamp(
                3rem,
                13vw,
                5.2rem
            );
    }

    .hero-layout {
        gap: 3rem;
    }

    .automation-canvas {
        min-height: 510px;
    }

    .outcome-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .outcome-item {
        border-bottom:
            1px solid
            rgba(255,255,255,0.05);
    }

    .heading-with-action {
        display: block;
    }

    .section-link {
        margin-top: 1rem;
    }

    .workflow-feature-grid,
    .founder-grid,
    .faq-layout {

        grid-template-columns: 1fr;
    }

    .faq-heading {
        position: static;
    }

    .founder-visual {
        min-height: 430px;
    }

    .footer-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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


@media (max-width: 600px) {

    .container {
        width:
            min(
                calc(100% - 1.25rem),
                var(--container)
            );
    }

    .hero-section {
        padding-top: 7rem;
    }

    .hero-title {

        font-size:
            clamp(
                2.7rem,
                14vw,
                4.3rem
            );
    }

    .hero-actions,
    .button-row {

        display: grid;

        grid-template-columns: 1fr;
    }

    .hero-actions .button,
    .button-row .button {

        width: 100%;
    }

    .hero-trust-row {
        display: grid;
    }

    .automation-canvas {

        min-height: 540px;

        border-radius: 24px;
    }

    .workflow-node {

        min-width: 185px;

        padding:
            0.78rem
            0.8rem;
    }

    .node-lead {
        left: 15px;
    }

    .node-ai {
        right: 10px;
    }

    .node-crm {
        left: 12px;
    }

    .node-booking {
        right: 12px;
    }

    .mini-notification {
        width: 90%;
    }

    .problem-grid,
    .service-grid,
    .industry-grid,
    .demo-grid,
    .process-grid,
    .pricing-grid {

        grid-template-columns: 1fr;
    }

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

    .outcome-item {
        border-right: 0;
    }

    .process-card,
    .problem-card {
        min-height: 220px;
    }

    .founder-visual {
        min-height: 380px;
    }

    .founder-monogram {

        width: 200px;
        height: 200px;
    }

    .founder-floating-card {
        min-width: 130px;
    }

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

    .footer-bottom {
        display: grid;
    }
}


/* ==========================================================
   26. REDUCED MOTION
   ========================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

    html.js [data-reveal] {

        opacity: 1;

        transform: none;
    }

    .interaction-glow {
        display: none;
    }
}
/* ==========================================================
   INTERACTIVE DEMO SYSTEM — CELL 17
   ========================================================== */

.demo-lab-section {
    padding-top: 2rem;
}

.demo-lab-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.demo-lab-header h2 {
    margin-bottom: 0.7rem;
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.demo-lab-header p {
    max-width: 650px;
    margin: 0;
    color: var(--text-secondary);
}

.demo-environment-badge {
    flex: 0 0 auto;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(37, 208, 199, 0.24);
    border-radius: 999px;
    background: rgba(37, 208, 199, 0.07);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.demo-workspace {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1rem;
    align-items: start;
}

.demo-panel {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--gradient-card);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045),
        var(--shadow-card);
}

.demo-output-panel {
    position: sticky;
    top: 105px;
    min-height: 660px;
}

.demo-panel-heading {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.demo-panel-heading small {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.demo-panel-heading h3 {
    margin: 0.12rem 0 0;
    font-size: 1.25rem;
}

.demo-step-number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            rgba(37,208,199,0.14),
            rgba(76,140,255,0.13)
        );
    border: 1px solid rgba(255,255,255,0.09);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 900;
}

.demo-form {
    display: grid;
    gap: 1rem;
}

.demo-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.demo-field {
    display: grid;
    gap: 0.45rem;
}

.demo-field label {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
}

.demo-field input,
.demo-field textarea,
.demo-field select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.83rem 0.9rem;
    background: rgba(2, 11, 20, 0.62);
    color: var(--text-primary);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

.demo-field textarea {
    resize: vertical;
    min-height: 120px;
}

.demo-field input:hover,
.demo-field textarea:hover,
.demo-field select:hover {
    border-color: var(--border-strong);
}

.demo-field input:focus,
.demo-field textarea:focus,
.demo-field select:focus {
    outline: none;
    border-color: rgba(37, 208, 199, 0.55);
    box-shadow: 0 0 0 4px rgba(37, 208, 199, 0.08);
    background: rgba(2, 11, 20, 0.80);
}

.demo-errors {
    color: #ffb8b8;
    font-size: 0.75rem;
}

.demo-errors ul {
    margin: 0;
    padding: 0.9rem 1rem 0.9rem 2rem;
    border: 1px solid rgba(255, 110, 110, 0.18);
    border-radius: 12px;
    background: rgba(255, 90, 90, 0.06);
}

.demo-reset-button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    transition: color var(--transition-fast);
}

.demo-reset-button:hover {
    color: white;
}

.demo-empty-state {
    min-height: 500px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.demo-empty-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background:
        radial-gradient(
            circle,
            rgba(37,208,199,0.12),
            rgba(76,140,255,0.05)
        );
    color: var(--accent);
    font-size: 1.5rem;
}

.demo-empty-state h4 {
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
}

.demo-empty-state p {
    max-width: 380px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.demo-results {
    display: grid;
    gap: 0.8rem;
}

.demo-result-card {
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 15px;
    background: rgba(255,255,255,0.025);
}

.demo-result-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.demo-result-heading > span,
.demo-result-label {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.demo-intent-badge {
    padding: 0.38rem 0.58rem;
    border-radius: 999px;
    background: rgba(37,208,199,0.09);
    color: var(--accent);
    font-size: 0.65rem;
}

.demo-intent-badge[data-intent="Qualified"] {
    color: var(--success);
    background: rgba(59,216,159,0.09);
}

.demo-reason-list {
    display: grid;
    gap: 0.45rem;
}

.demo-reason-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 0.5rem;
    align-items: start;
}

.demo-reason-item span {
    color: var(--accent);
    font-size: 0.75rem;
}

.demo-reason-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.demo-message {
    margin: 0.7rem 0 0;
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.demo-crm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.demo-crm-item {
    padding: 0.7rem;
    border-radius: 10px;
    background: rgba(0,0,0,0.13);
}

.demo-crm-item small {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--text-muted);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.demo-crm-item strong {
    display: block;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.demo-small-copy {
    margin: 0.5rem 0 0.8rem;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.demo-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
}

.demo-slot-button {
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);
}

.demo-slot-button:hover,
.demo-slot-button.is-selected {
    border-color: rgba(37,208,199,0.38);
    background: rgba(37,208,199,0.08);
    color: white;
}

.demo-selected-slot {
    min-height: 1.2rem;
    margin-top: 0.65rem;
    color: var(--success);
    font-size: 0.7rem;
}

.demo-owner-card {
    border-color: rgba(59,216,159,0.13);
    background: rgba(59,216,159,0.025);
}

.demo-owner-notification {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 0.7rem;
    align-items: start;
    margin-top: 0.8rem;
}

.demo-owner-notification p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.demo-simulation-notice {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.65rem;
}


@media (max-width: 900px) {

    .demo-workspace {
        grid-template-columns: 1fr;
    }

    .demo-output-panel {
        position: static;
        min-height: auto;
    }

    .demo-lab-header {
        display: grid;
    }

    .demo-environment-badge {
        justify-self: start;
    }
}


@media (max-width: 600px) {

    .demo-form-grid,
    .demo-crm-grid,
    .demo-slot-grid {
        grid-template-columns: 1fr;
    }

    .demo-panel {
        border-radius: 20px;
    }
}
/* ==========================================================
   CONSULTATION CONVERSION SYSTEM — CELL 19
   ========================================================== */

.consultation-hero {
    position: relative;
    min-height: 100svh;
    padding: 9rem 0 6rem;
    overflow: hidden;
}

.consultation-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(520px, 1.15fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
}

.consultation-copy {
    position: sticky;
    top: 130px;
}

.consultation-title {
    margin-bottom: 1.5rem;
    font-size: clamp(3rem, 6vw, 5.7rem);
    line-height: .99;
    letter-spacing: -.06em;
}

.consultation-intro {
    max-width: 620px;
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.consultation-points {
    display: grid;
    gap: .8rem;
    margin-top: 2rem;
}

.consultation-points > div {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: .7rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.consultation-points span {
    color: var(--accent);
    font-size: .67rem;
    font-weight: 850;
}

.consultation-points p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .8rem;
}

.consultation-card {
    padding: clamp(1.3rem, 4vw, 2.3rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(22px);
}

.consultation-card-heading {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.consultation-card-heading small {
    display: block;
    color: var(--text-muted);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.consultation-card-heading h2 {
    margin: .1rem 0 0;
    font-size: 1.35rem;
}

.consultation-form {
    display: grid;
    gap: 1rem;
}

.form-grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-field {
    display: grid;
    gap: .4rem;
}

.form-field > label {
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 700;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    min-height: 48px;
    padding: .78rem .88rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(2,11,20,.60);
    color: var(--text-primary);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

.form-field textarea {
    min-height: 145px;
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: rgba(37,208,199,.55);
    background: rgba(2,11,20,.8);
    box-shadow: 0 0 0 4px rgba(37,208,199,.08);
}

.field-error {
    color: #ffb0b0;
    font-size: .67rem;
}

.form-status {
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    font-size: .76rem;
}

.form-status-error {
    border: 1px solid rgba(255,110,110,.18);
    background: rgba(255,90,90,.06);
    color: #ffc1c1;
}

.form-status-info {
    border: 1px solid rgba(37,208,199,.20);
    background: rgba(37,208,199,.06);
    color: var(--text-secondary);
}

.consent-field {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: .65rem;
    align-items: start;
    padding: .8rem 0;
}

.consent-field input {
    margin-top: .25rem;
}

.consent-field label {
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 700;
}

.consent-field small {
    display: block;
    margin-top: .25rem;
    color: var(--text-muted);
    font-size: .65rem;
}

.form-privacy-note {
    margin: 0;
    color: var(--text-muted);
    text-align: center;
    font-size: .64rem;
}

.honeypot-field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.contact-direct-card {
    margin-top: 3rem;
    padding: 1.5rem;
    display: grid;
    gap: .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--gradient-card);
}

.contact-direct-card a,
.contact-direct-card > span:not(.eyebrow) {
    color: var(--text-secondary);
}

.thank-you-section {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 8rem 1rem 4rem;
}

.thank-you-card {
    width: min(850px, 100%);
    padding: clamp(2rem, 6vw, 5rem);
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(
            145deg,
            rgba(37,208,199,.07),
            rgba(76,140,255,.05),
            rgba(255,255,255,.02)
        );
    box-shadow: var(--shadow-soft);
}

.thank-you-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    background: rgba(59,216,159,.11);
    border: 1px solid rgba(59,216,159,.20);
    color: var(--success);
    font-size: 1.6rem;
    font-weight: 900;
}

.thank-you-card h1 {
    max-width: 700px;
    margin: 0 auto 1rem;
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -.055em;
}

.thank-you-card > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--text-secondary);
}

.thank-you-next {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    margin: 2.3rem 0;
}

.thank-you-next div {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.thank-you-next strong {
    display: block;
    margin-bottom: .35rem;
    color: var(--accent);
    font-size: .67rem;
}

.thank-you-next span {
    color: var(--text-secondary);
    font-size: .73rem;
}

.thank-you-card .hero-actions {
    justify-content: center;
    margin-bottom: 0;
}


@media (max-width: 920px) {

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

    .consultation-copy {
        position: static;
    }
}


@media (max-width: 600px) {

    .consultation-hero {
        padding-top: 7rem;
    }

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

    .consultation-card {
        border-radius: 22px;
    }

    .thank-you-next {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   LEGAL AND ERROR PAGES — CELL 20
   ========================================================== */

.legal-layout {
    max-width: 900px;
}

.legal-content {
    display: grid;
    gap: 1rem;
}

.legal-content section {
    padding: clamp(1.3rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--gradient-card);
}

.legal-content h2 {
    margin-bottom: .75rem;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.legal-content p {
    margin-bottom: .8rem;
    color: var(--text-secondary);
    font-size: .92rem;
}

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

.error-code {
    margin-bottom: 1rem;
    font-size: clamp(4rem, 12vw, 8rem);
    line-height: .9;
    font-weight: 900;
    letter-spacing: -.08em;

    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* ==========================================================
   ADMIN SYSTEM — CELL 21
   ========================================================== */

.admin-login-section {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 8rem 1rem 4rem;
}

.admin-login-card {
    width: min(460px, 100%);
    padding: clamp(1.5rem, 5vw, 2.7rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--gradient-card);
    box-shadow: var(--shadow-soft);
}

.admin-lock {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 1.3rem;
    border-radius: 17px;
    color: var(--accent);
    background: rgba(37,208,199,.08);
    border: 1px solid rgba(37,208,199,.16);
}

.admin-login-card h1 {
    margin-bottom: .5rem;
    font-size: clamp(2.2rem, 5vw, 3.7rem);
    letter-spacing: -.05em;
}

.admin-login-card > p {
    color: var(--text-secondary);
}

.admin-login-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.admin-security-note {
    margin: 1rem 0 0 !important;
    color: var(--text-muted) !important;
    font-size: .65rem;
    text-align: center;
}

.admin-section {
    min-height: 100svh;
    padding: 8rem 0 5rem;
}

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

.admin-header h1 {
    margin-bottom: .3rem;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: -.055em;
}

.admin-header p {
    margin: 0;
    color: var(--text-secondary);
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.admin-stat-card {
    padding: 1.2rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--gradient-card);
}

.admin-stat-card small {
    display: block;
    margin-bottom: .6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .62rem;
}

.admin-stat-card strong {
    font-size: 2rem;
}

.admin-filter-bar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(150px, .8fr)
        minmax(150px, .8fr)
        auto;
    gap: .8rem;
    align-items: end;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.admin-filter-actions {
    display: flex;
    gap: .5rem;
}

.admin-table-shell {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--gradient-card);
}

.admin-table-scroll {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    text-align: left;
}

.admin-table th {
    color: var(--text-muted);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.admin-table td {
    color: var(--text-secondary);
    font-size: .76rem;
}

.admin-table td strong {
    display: block;
    color: var(--text-primary);
}

.admin-table td small {
    display: block;
    margin-top: .15rem;
    color: var(--text-muted);
}

.admin-status-badge {
    display: inline-flex;
    padding: .34rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: var(--text-secondary);
    font-size: .62rem;
    font-weight: 800;
}

.admin-status-badge[data-status="New"] {
    color: var(--accent);
    background: rgba(37,208,199,.08);
}

.admin-status-badge[data-status="Qualified"],
.admin-status-badge[data-status="Won"] {
    color: var(--success);
    background: rgba(59,216,159,.08);
}

.admin-empty-row {
    padding: 3rem !important;
    text-align: center !important;
    color: var(--text-muted) !important;
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: .72rem;
}


@media (max-width: 1000px) {

    .admin-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .admin-filter-bar {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}


@media (max-width: 650px) {

    .admin-header {
        display: grid;
        align-items: start;
    }

    .admin-stat-grid,
    .admin-filter-bar {
        grid-template-columns: 1fr;
    }

    .admin-filter-actions {
        flex-wrap: wrap;
    }
}
/* ==========================================================
   ADMIN LEAD DETAIL — CELL 22
   ========================================================== */

.admin-lead-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.admin-lead-link strong {
    transition: color var(--transition-fast);
}

.admin-lead-link:hover strong {
    color: var(--accent);
}

.admin-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(280px, .65fr);
    gap: 1rem;
    align-items: start;
}

.admin-detail-main,
.admin-detail-sidebar {
    display: grid;
    gap: 1rem;
}

.admin-detail-sidebar {
    position: sticky;
    top: 105px;
}

.admin-detail-card {
    padding: clamp(1.2rem, 3vw, 1.7rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--gradient-card);
}

.admin-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.admin-info-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));
    gap: .7rem;
}

.admin-info-grid > div {
    padding: .8rem;
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.admin-info-grid small,
.admin-timeline small {
    display: block;
    margin-bottom: .2rem;
    color: var(--text-muted);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.admin-info-grid strong,
.admin-timeline strong {
    display: block;
    color: var(--text-primary);
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.admin-long-copy {
    margin: .8rem 0 0;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

.admin-notes-form,
.admin-status-form {
    display: grid;
    gap: .8rem;
    margin-top: 1rem;
}

.admin-notes-form textarea,
.admin-status-form select {
    width: 100%;
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(2,11,20,.62);
    color: var(--text-primary);
}

.admin-notes-form textarea:focus,
.admin-status-form select:focus {
    outline: none;
    border-color: rgba(37,208,199,.50);
    box-shadow:
        0 0 0 4px
        rgba(37,208,199,.08);
}

.admin-timeline {
    display: grid;
    gap: .7rem;
    margin-top: 1rem;
}

.admin-timeline > div {
    padding-bottom: .7rem;
    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.admin-timeline > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}


@media (max-width: 900px) {

    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-detail-sidebar {
        position: static;
    }
}


@media (max-width: 600px) {

    .admin-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   LIGHT PREMIUM REDESIGN — CELL 27
   ========================================================== */


/* ----------------------------------------------------------
   GLOBAL PALETTE
   ---------------------------------------------------------- */

:root {
    --page-bg: #f8fafc;
    --surface: #ffffff;
    --surface-soft: #f3f7fb;
    --surface-warm: #fbfaf7;

    --text-primary: #0b1728;
    --text-secondary: #526071;
    --text-muted: #7c8898;

    --border: rgba(15, 32, 53, .10);

    --accent: #1769ff;
    --accent-2: #16b8aa;

    --navy: #071423;
    --navy-soft: #0c1d31;

    --gradient-main:
        linear-gradient(
            135deg,
            #1769ff,
            #16b8aa
        );

    --gradient-card:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(248,251,254,.98)
        );

    --shadow-soft:
        0 20px 50px rgba(15, 34, 58, .08);

    --shadow-card:
        0 12px 30px rgba(15, 34, 58, .07);
}


/* ----------------------------------------------------------
   BODY
   ---------------------------------------------------------- */

html,
body {
    background:
        #f8fafc !important;

    color:
        #0b1728 !important;
}


body::before {
    opacity: .12 !important;
}


/* ----------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------- */

.site-header,
.nav-shell,
.navbar {
    background:
        rgba(248,250,252,.88) !important;

    border-color:
        rgba(15,32,53,.08) !important;

    backdrop-filter:
        blur(18px);
}


.site-header.scrolled,
.nav-shell.scrolled {
    background:
        rgba(255,255,255,.94) !important;

    box-shadow:
        0 10px 30px
        rgba(15,34,58,.06) !important;
}


.site-logo,
.brand-name,
.nav-link {
    color:
        #0b1728 !important;
}


.nav-link:hover {
    color:
        #1769ff !important;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.hero-section,
.hero,
.home-hero {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(23,105,255,.11),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 28%,
            rgba(22,184,170,.08),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        ) !important;

    color:
        #0b1728 !important;
}


.hero-title,
.hero h1,
.hero-section h1 {
    color:
        #0b1728 !important;
}


.hero-copy,
.hero-subtitle,
.hero-section p {
    color:
        #536275 !important;
}


.gradient-text {
    background:
        linear-gradient(
            135deg,
            #1769ff,
            #16a89c
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    color:
        transparent !important;
}


/* ----------------------------------------------------------
   SECTIONS
   ---------------------------------------------------------- */

.section {
    background:
        transparent;
}


.section:nth-of-type(even) {
    background:
        #f4f7fa;
}


.section-heading h2,
.section-heading h1 {
    color:
        #0b1728 !important;
}


.section-heading p {
    color:
        #667487 !important;
}


.eyebrow {
    color:
        #1769ff !important;
}


/* ----------------------------------------------------------
   CARDS
   ---------------------------------------------------------- */

.service-card,
.industry-card,
.demo-card,
.pricing-card,
.feature-card,
.outcome-card,
.problem-card,
.founder-card,
.admin-detail-card,
.admin-stat-card,
.legal-content section,
.thank-you-card,
.admin-table-shell,
.admin-filter-bar {
    background:
        #ffffff !important;

    border:
        1px solid rgba(15,32,53,.09) !important;

    box-shadow:
        0 12px 32px
        rgba(15,34,58,.06) !important;

    color:
        #0b1728 !important;
}


.service-card:hover,
.industry-card:hover,
.demo-card:hover,
.pricing-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 20px 42px
        rgba(15,34,58,.10) !important;
}


.service-card h3,
.industry-card h3,
.demo-card h3,
.pricing-card h3,
.feature-card h3,
.outcome-card h3,
.problem-card h3 {
    color:
        #0b1728 !important;
}


.service-card p,
.industry-card p,
.demo-card p,
.pricing-card p,
.feature-card p,
.outcome-card p,
.problem-card p {
    color:
        #667487 !important;
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.button-primary {
    background:
        linear-gradient(
            135deg,
            #1769ff,
            #0f7fea
        ) !important;

    color:
        #ffffff !important;

    border:
        none !important;

    box-shadow:
        0 10px 24px
        rgba(23,105,255,.20) !important;
}


.button-primary:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(23,105,255,.28) !important;
}


.button-secondary {
    background:
        #ffffff !important;

    color:
        #0b1728 !important;

    border:
        1px solid
        rgba(15,32,53,.14) !important;

    box-shadow:
        0 5px 14px
        rgba(15,34,58,.04) !important;
}


.button-secondary:hover {
    border-color:
        rgba(23,105,255,.30) !important;

    color:
        #1769ff !important;
}


/* ----------------------------------------------------------
   WORKFLOW / DARK FEATURE SECTION
   Keep ONE intentional dark section
   ---------------------------------------------------------- */

.workflow-section,
.workflow-showcase,
.automation-process-section {
    background:
        linear-gradient(
            135deg,
            #071423,
            #0d2035
        ) !important;

    color:
        #ffffff !important;
}


.workflow-section h2,
.workflow-section h3,
.workflow-showcase h2,
.workflow-showcase h3 {
    color:
        #ffffff !important;
}


.workflow-section p,
.workflow-showcase p {
    color:
        rgba(255,255,255,.70) !important;
}


/* ----------------------------------------------------------
   WORKFLOW NODES
   ---------------------------------------------------------- */

.workflow-node {
    background:
        rgba(255,255,255,.07) !important;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    box-shadow:
        none !important;
}


.workflow-node.active {
    border-color:
        rgba(81,181,255,.55) !important;

    background:
        rgba(23,105,255,.14) !important;
}


/* ----------------------------------------------------------
   PRICING
   ---------------------------------------------------------- */

.pricing-section {
    background:
        #ffffff !important;
}


.pricing-card.featured,
.pricing-card.is-featured {
    border:
        1px solid
        rgba(23,105,255,.28) !important;

    box-shadow:
        0 20px 50px
        rgba(23,105,255,.10) !important;
}


/* ----------------------------------------------------------
   FAQ
   ---------------------------------------------------------- */

.faq-item {
    background:
        #ffffff !important;

    border:
        1px solid
        rgba(15,32,53,.09) !important;

    box-shadow:
        0 6px 18px
        rgba(15,34,58,.04) !important;
}


.faq-question {
    color:
        #0b1728 !important;
}


.faq-answer {
    color:
        #667487 !important;
}


/* ----------------------------------------------------------
   FORMS
   ---------------------------------------------------------- */

input,
select,
textarea {
    background:
        #ffffff !important;

    color:
        #0b1728 !important;

    border:
        1px solid
        rgba(15,32,53,.14) !important;
}


input::placeholder,
textarea::placeholder {
    color:
        #99a3af !important;
}


input:focus,
select:focus,
textarea:focus {
    border-color:
        rgba(23,105,255,.42) !important;

    box-shadow:
        0 0 0 4px
        rgba(23,105,255,.08) !important;
}


/* ----------------------------------------------------------
   ADMIN
   ---------------------------------------------------------- */

.admin-section,
.admin-login-section {
    background:
        #f8fafc !important;
}


.admin-login-card {
    background:
        #ffffff !important;

    border:
        1px solid
        rgba(15,32,53,.10) !important;

    box-shadow:
        0 22px 60px
        rgba(15,34,58,.10) !important;
}


.admin-header h1,
.admin-login-card h1 {
    color:
        #0b1728 !important;
}


.admin-table th {
    color:
        #6f7d8e !important;
}


.admin-table td {
    color:
        #526071 !important;
}


.admin-table td strong {
    color:
        #0b1728 !important;
}


/* ----------------------------------------------------------
   LEGAL
   ---------------------------------------------------------- */

.legal-content p {
    color:
        #5f6d7e !important;
}


/* ----------------------------------------------------------
   FINAL CTA
   Deliberate dark ending
   ---------------------------------------------------------- */

.final-cta,
.cta-section,
.site-cta {
    background:
        linear-gradient(
            135deg,
            #071423,
            #102b48
        ) !important;

    color:
        #ffffff !important;
}


.final-cta h2,
.cta-section h2,
.site-cta h2 {
    color:
        #ffffff !important;
}


.final-cta p,
.cta-section p,
.site-cta p {
    color:
        rgba(255,255,255,.72) !important;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.site-footer {
    background:
        #071423 !important;

    color:
        rgba(255,255,255,.74) !important;

    border-top:
        1px solid
        rgba(255,255,255,.08) !important;
}


.site-footer a {
    color:
        rgba(255,255,255,.78) !important;
}


.site-footer a:hover {
    color:
        #ffffff !important;
}


/* ----------------------------------------------------------
   REDUCE VISUAL GLOW / EYE FATIGUE
   ---------------------------------------------------------- */

.interaction-glow,
.cursor-glow,
.ambient-glow {
    opacity:
        .15 !important;
}


.card-glow,
.hero-glow {
    opacity:
        .18 !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    .site-header,
    .nav-shell,
    .navbar {
        background:
            rgba(255,255,255,.96) !important;
    }

}

/* ==========================================================
   FOUNDER AUTHORITY PROFILE — CELL 28
   ========================================================== */

.founder-authority-section {
    background: #ffffff;
}

.founder-authority-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, .8fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

.founder-authority-intro h2 {
    max-width: 760px;
    margin-bottom: 1.2rem;
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    letter-spacing: -.055em;
    line-height: .96;
}

.founder-lead {
    max-width: 720px;
    color: #344457;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.65;
}

.founder-authority-intro > p:not(.founder-lead) {
    max-width: 720px;
    color: #667487;
}

.founder-links {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.7rem;
}

.founder-facts-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));
    gap: .8rem;
}

.founder-fact-card {
    padding: 1.4rem;
    border: 1px solid rgba(15,32,53,.09);
    border-radius: 18px;
    background: #f7f9fc;
}

.founder-fact-card strong {
    display: block;
    margin-bottom: .3rem;
    color: #1769ff;
    font-size: clamp(2rem, 4vw, 3.1rem);
    letter-spacing: -.05em;
}

.founder-fact-card span {
    display: block;
    margin-bottom: .25rem;
    color: #0b1728;
    font-weight: 800;
}

.founder-fact-card small {
    color: #7c8898;
}

.founder-philosophy {
    max-width: 1000px;
    margin: clamp(4rem, 9vw, 8rem) auto;
    padding: clamp(1.8rem, 5vw, 4rem);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            #071423,
            #102d4b
        );
}

.founder-philosophy h3 {
    max-width: 900px;
    margin: .6rem 0 1rem;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 4rem);
    letter-spacing: -.045em;
    line-height: 1.05;
}

.founder-philosophy p {
    max-width: 820px;
    color: rgba(255,255,255,.7);
}

.founder-history-block,
.founder-education-block,
.founder-capabilities {
    margin-top: clamp(4rem, 8vw, 7rem);
}

.founder-career-grid,
.founder-education-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));
    gap: 1rem;
}

.founder-career-card,
.founder-education-card,
.founder-why-card {
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid rgba(15,32,53,.09);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 12px 30px
        rgba(15,34,58,.05);
}

.career-company,
.education-level {
    display: inline-flex;
    margin-bottom: .8rem;
    color: #1769ff;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.founder-career-card h3,
.founder-education-card h3,
.founder-why-card h3 {
    margin-bottom: .7rem;
    color: #0b1728;
}

.founder-career-card p,
.founder-education-card p,
.founder-why-card p {
    color: #667487;
}

.founder-education-card strong {
    display: block;
    margin-bottom: .7rem;
    color: #334357;
}

.career-tags,
.founder-skill-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

.career-tags span,
.founder-skill-cloud span {
    padding: .43rem .65rem;
    border: 1px solid rgba(23,105,255,.12);
    border-radius: 999px;
    background: rgba(23,105,255,.045);
    color: #33516f;
    font-size: .68rem;
    font-weight: 700;
}

.founder-capabilities {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgba(15,32,53,.08);
    border-radius: 24px;
    background: #f5f8fb;
}

.founder-why-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap: .8rem;
    margin-top: clamp(4rem, 8vw, 7rem);
}

.founder-why-card > span {
    display: inline-flex;
    margin-bottom: 1.2rem;
    color: #1769ff;
    font-size: .75rem;
    font-weight: 900;
}

.founder-cta-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: clamp(4rem, 8vw, 7rem);
    padding: clamp(1.7rem, 4vw, 3rem);
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            #edf4ff,
            #f3fbfa
        );
    border:
        1px solid
        rgba(23,105,255,.10);
}

.founder-cta-panel h2 {
    max-width: 720px;
    margin: .5rem 0;
    color: #0b1728;
}

.founder-cta-panel p {
    max-width: 720px;
    margin: 0;
    color: #667487;
}


/* ----------------------------------------------------------
   HOMEPAGE FOUNDER SNAPSHOT
   ---------------------------------------------------------- */

.founder-home-section {
    background: #f6f8fb;
}

.founder-home-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, .75fr);
    gap: clamp(2rem, 6vw, 5rem);
    padding: clamp(1.8rem, 5vw, 4rem);
    border: 1px solid rgba(15,32,53,.09);
    border-radius: 30px;
    background: #ffffff;
    box-shadow:
        0 22px 60px
        rgba(15,34,58,.07);
}

.founder-home-main h2 {
    max-width: 760px;
    margin: .5rem 0 1rem;
    color: #0b1728;
    font-size: clamp(2.2rem, 4.8vw, 4.6rem);
    letter-spacing: -.05em;
    line-height: 1;
}

.founder-home-main p {
    max-width: 720px;
    color: #667487;
}

.founder-home-stats {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));
    gap: .7rem;
}

.founder-home-stats > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 130px;
    padding: 1rem;
    border-radius: 16px;
    background: #f5f8fb;
}

.founder-home-stats strong {
    color: #1769ff;
    font-size: 1.5rem;
}

.founder-home-stats span {
    margin-top: .25rem;
    color: #697789;
    font-size: .72rem;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1000px) {

    .founder-authority-grid,
    .founder-home-card {
        grid-template-columns: 1fr;
    }

    .founder-why-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 700px) {

    .founder-facts-grid,
    .founder-career-grid,
    .founder-education-grid,
    .founder-home-stats,
    .founder-why-grid {
        grid-template-columns: 1fr;
    }

    .founder-cta-panel {
        display: grid;
    }
}

/* ==========================================================
   FULL MOON MEDIA POLISH - CELL 37
   ========================================================== */


.fmw-nav-logo-mark {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}


.fmw-trust-strip {
    padding: .8rem 0 1.4rem;
    background: #ffffff;
    border-bottom:
        1px solid rgba(15,32,53,.07);
}


.fmw-trust-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0,1fr));
    gap: .65rem;
}


.fmw-trust-item {
    padding: .85rem 1rem;
    border-radius: 14px;
    background: #f6f9fc;
    border:
        1px solid rgba(15,32,53,.065);
}


.fmw-trust-item strong {
    display: block;
    margin-bottom: .16rem;
    color: #0b1728;
    font-size: .78rem;
}


.fmw-trust-item span {
    display: block;
    color: #728094;
    font-size: .68rem;
    line-height: 1.4;
}


/* Hero CTA prominence */

.hero .button-primary,
.hero-section .button-primary,
.home-hero .button-primary {
    min-height: 54px;
    padding:
        .95rem 1.35rem !important;
    box-shadow:
        0 16px 36px
        rgba(23,105,255,.25) !important;
}


.site-header .button,
.nav-shell .button,
.navbar .button {
    border-color:
        rgba(23,105,255,.18) !important;
}


.site-header .button:hover,
.nav-shell .button:hover,
.navbar .button:hover {
    background:
        #1769ff !important;
    color:
        #ffffff !important;
}


/* Media section */

.fmw-media-showcase {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(23,105,255,.08),
            transparent 34%
        ),
        #f4f7fa;
}


.fmw-media-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, .6fr);
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;
}


.fmw-media-heading h2 {
    max-width: 760px;
    margin: .4rem 0 0;
    color: #0b1728;
    font-size:
        clamp(2.2rem, 5vw, 4.8rem);
    letter-spacing: -.05em;
    line-height: .98;
}


.fmw-media-heading p {
    max-width: 540px;
    margin: 0;
    color: #667487;
    line-height: 1.75;
}


.fmw-media-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.22fr)
        minmax(320px, .78fr);
    gap: 1rem;
    align-items: stretch;
}


.fmw-media-video-wrap {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    border-radius: 26px;
    border:
        1px solid rgba(15,32,53,.09);
    background: #ffffff;
    box-shadow:
        0 20px 48px
        rgba(15,34,58,.08);
}


.fmw-media-video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
}


.fmw-media-live {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem;
    border-radius: 999px;
    color: #ffffff;
    background:
        rgba(7,20,35,.82);
    backdrop-filter: blur(10px);
    font-size: .68rem;
    font-weight: 800;
}


.fmw-media-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2be0c5;
    box-shadow:
        0 0 0 5px
        rgba(43,224,197,.12);
}


.fmw-media-stack {
    display: grid;
    gap: 1rem;
}


.fmw-visual-card {
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    border:
        1px solid rgba(15,32,53,.09);
    box-shadow:
        0 12px 32px
        rgba(15,34,58,.055);
}


.fmw-visual-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-bottom:
        1px solid rgba(15,32,53,.06);
}


.fmw-visual-card > div {
    padding: 1.3rem;
}


.fmw-visual-card span {
    color: #1769ff;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}


.fmw-visual-card h3 {
    margin: .45rem 0 .55rem;
    color: #0b1728;
    font-size: 1.25rem;
}


.fmw-visual-card p {
    margin: 0;
    color: #697789;
    line-height: 1.65;
}


/* More breathing room */

.section {
    padding-top:
        clamp(4.2rem, 8vw, 7.5rem);
    padding-bottom:
        clamp(4.2rem, 8vw, 7.5rem);
}


/* Less glow, more editorial depth */

.card-glow,
.hero-glow,
.interaction-glow,
.cursor-glow {
    opacity: .08 !important;
}


/* Mobile */

@media (max-width: 1000px) {

    .fmw-trust-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .fmw-media-heading,
    .fmw-media-grid {
        grid-template-columns: 1fr;
    }

    .fmw-media-video-wrap,
    .fmw-media-video {
        min-height: 400px;
    }
}


@media (max-width: 620px) {

    .fmw-trust-grid {
        grid-template-columns: 1fr 1fr;
    }

    .fmw-trust-item:last-child {
        grid-column: 1 / -1;
    }

    .fmw-media-video-wrap,
    .fmw-media-video {
        min-height: 280px;
    }
}

/* ==========================================================
   FMW NAV BRAND SUBTITLE - CELL 37C
   ========================================================== */

.fmw-brand-subtitle {
    display: block;
    margin-top: .08rem;
    color: #758397;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.fmw-nav-logo-mark {
    flex: 0 0 auto;
}

@media (max-width: 700px) {
    .fmw-brand-subtitle {
        font-size: .5rem;
        letter-spacing: .08em;
    }
}

/* ==========================================================
   GLOBAL SEO + REGIONAL LANDING PAGES - CELL 38
   ========================================================== */


.global-seo-section {
    background: #ffffff;
}


.global-seo-heading {
    max-width: 880px;
}


.global-seo-heading h2,
.region-section-heading h2,
.region-proof h2,
.region-cta-box h2 {
    margin: .55rem 0 1rem;
    color: #0b1728;
    font-size:
        clamp(2.1rem, 4.5vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.045em;
}


.global-seo-heading p,
.region-section-heading p,
.region-proof-copy p {
    color: #667487;
    line-height: 1.8;
}


.global-seo-services {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap: .8rem;
    margin-top: 2.25rem;
}


.global-seo-services > a,
.region-service-card {
    display: block;
    padding: 1.35rem;
    border-radius: 20px;
    border:
        1px solid rgba(15,32,53,.09);
    background: #f7f9fc;
    text-decoration: none;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.global-seo-services > a:hover,
.region-service-card:hover {
    transform: translateY(-4px);
    border-color:
        rgba(23,105,255,.22);
    box-shadow:
        0 18px 40px
        rgba(15,34,58,.08);
}


.global-seo-services span,
.region-service-card span {
    color: #1769ff;
    font-size: .67rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}


.global-seo-services h3,
.region-service-card h3 {
    margin: .5rem 0 .65rem;
    color: #0b1728;
    font-size: 1.12rem;
}


.global-seo-services p,
.region-service-card p {
    margin: 0;
    color: #697789;
    font-size: .82rem;
    line-height: 1.65;
}


.global-market-box {
    display: grid;
    grid-template-columns:
        minmax(220px,.55fr)
        minmax(0,1.45fr);
    gap: 1.5rem;
    align-items: center;
    margin-top: 1rem;
    padding: 1.4rem;
    border-radius: 22px;
    background: #0b1728;
}


.global-market-box h3 {
    margin: .25rem 0 0;
    color: #ffffff;
}


.global-market-links,
.region-market-links,
.region-industry-links {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}


.global-market-links a,
.region-market-links a,
.region-industry-links a {
    padding: .62rem .82rem;
    border-radius: 999px;
    border:
        1px solid rgba(255,255,255,.11);
    background:
        rgba(255,255,255,.075);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
}


.region-page {
    background: #ffffff;
}


.region-hero {
    padding-top:
        clamp(7rem, 10vw, 10rem);
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(23,105,255,.09),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f6f9fc
        );
}


.region-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,.82fr);
    gap:
        clamp(2rem, 5vw, 5rem);
    align-items: center;
}


.region-hero-copy h1 {
    max-width: 820px;
    margin: .6rem 0 1.1rem;
    color: #0b1728;
    font-size:
        clamp(3rem, 6vw, 6.5rem);
    line-height: .93;
    letter-spacing: -.06em;
}


.region-hero-copy > p {
    max-width: 740px;
    color: #687789;
    line-height: 1.8;
}


.region-lead {
    color: #34465a !important;
    font-size:
        clamp(1.05rem, 1.7vw, 1.3rem);
}


.region-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}


.region-hero-visual img {
    display: block;
    width: 100%;
    border-radius: 24px;
    border:
        1px solid rgba(15,32,53,.08);
    box-shadow:
        0 24px 60px
        rgba(15,34,58,.09);
}


.region-services {
    background: #ffffff;
}


.region-section-heading {
    max-width: 850px;
    margin-bottom: 2rem;
}


.region-service-grid {
    display: grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap: .8rem;
}


.region-industries {
    background: #f5f8fb;
}


.region-industry-links a {
    background: #ffffff;
    border:
        1px solid rgba(15,32,53,.09);
    color: #24384f;
}


.region-proof {
    background: #ffffff;
}


.region-proof-grid {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,.65fr);
    gap: 3rem;
    align-items: start;
}


.region-proof-copy {
    padding: 1.4rem;
    border-radius: 20px;
    background: #f7f9fc;
    border:
        1px solid rgba(15,32,53,.08);
}


.region-proof-copy p:first-child {
    margin-top: 0;
}


.region-proof-copy p:last-child {
    margin-bottom: 0;
}


.region-markets {
    background: #0b1728;
}


.region-markets h2 {
    color: #ffffff;
}


.region-markets .eyebrow {
    color: #77b1ff;
}


.region-market-links a {
    background:
        rgba(255,255,255,.07);
}


.region-final-cta {
    background: #ffffff;
}


.region-cta-box {
    padding:
        clamp(2rem, 5vw, 4.5rem);
    border-radius: 30px;
    background:
        linear-gradient(
            135deg,
            #eef5ff,
            #f5fbfa
        );
    border:
        1px solid rgba(23,105,255,.1);
}


.region-cta-box p {
    max-width: 700px;
    color: #607084;
    line-height: 1.75;
}


@media (max-width: 1000px) {

    .global-seo-services,
    .region-service-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .region-hero-grid,
    .region-proof-grid,
    .global-market-box {
        grid-template-columns: 1fr;
    }


    .region-hero-visual {
        max-width: 760px;
    }
}


@media (max-width: 620px) {

    .global-seo-services,
    .region-service-grid {
        grid-template-columns: 1fr;
    }


    .region-hero-copy h1 {
        font-size:
            clamp(2.7rem, 14vw, 4.5rem);
    }


    .region-actions {
        flex-direction: column;
    }


    .region-actions .button {
        width: 100%;
        justify-content: center;
    }
}