:root {
    --bg-main: #f3efe8;
    --bg-soft: #faf6ef;
    --surface: #fffdf9;
    --surface-dark: #132743;
    --line: #e5ddcf;

    --ink: #10233f;
    --ink-soft: #4f627d;
    --ink-muted: #74839b;

    --primary: #2a62f4;
    --primary-strong: #1f48b8;
    --cyan: #19b6aa;
    --orange: #f2a15f;
    --green: #1f9d75;

    --display-font: 'Space Grotesk', 'Helvetica Neue', sans-serif;
    --body-font: 'Manrope', 'Helvetica Neue', sans-serif;

    --radius-sm: 0.7rem;
    --radius-md: 1rem;
    --radius-lg: 1.35rem;
    --radius-xl: 1.8rem;
    --radius-pill: 999px;

    --shadow-soft: 0 14px 34px rgba(24, 35, 54, 0.08);
    --shadow-medium: 0 26px 52px rgba(21, 32, 51, 0.15);
    --shadow-glow: 0 0 0 1px rgba(42, 98, 244, 0.2), 0 16px 36px rgba(25, 182, 170, 0.2);

    --section-space: 6.3rem;
    --content-width: 1160px;

    --transition-fast: 160ms ease;
    --transition-base: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    font-size: 1.01rem;
    color: var(--ink);
    background:
        radial-gradient(circle at 6% 108%, rgba(242, 161, 95, 0.26), transparent 35%),
        radial-gradient(circle at 88% 0%, rgba(25, 182, 170, 0.22), transparent 38%),
        radial-gradient(circle at 52% 114%, rgba(42, 98, 244, 0.18), transparent 44%),
        linear-gradient(180deg, #fffdf8 0%, var(--bg-main) 56%, #e6dfd1 100%);
    line-height: 1.62;
    overflow-x: hidden;
}

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

button,
input {
    font: inherit;
}

.container {
    width: min(100%, var(--content-width));
    margin-inline: auto;
    padding-inline: 1.3rem;
}

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

.bg-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: -2;
}

.bg-orb-a {
    width: 360px;
    height: 360px;
    left: -140px;
    top: auto;
    bottom: -130px;
    background: rgba(242, 161, 95, 0.28);
}

.bg-orb-b {
    width: 500px;
    height: 500px;
    right: -170px;
    top: 6%;
    background: rgba(25, 182, 170, 0.24);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.82rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(42, 98, 244, 0.24);
    background: linear-gradient(145deg, rgba(42, 98, 244, 0.09), rgba(242, 161, 95, 0.11));
    color: var(--primary-strong);
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    font-weight: 700;
}

.section-head {
    max-width: 700px;
    margin-bottom: 2.7rem;
}

.section-head.center {
    margin-inline: auto;
    text-align: center;
}

.section-head h2 {
    margin-top: 0.95rem;
    font-family: var(--display-font);
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    line-height: 1.17;
    letter-spacing: -0.015em;
}

.section-head p {
    margin-top: 0.9rem;
    color: var(--ink-soft);
    font-size: 1.03rem;
    line-height: 1.72;
}

.btn {
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}

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

.btn-primary {
    padding: 0.9rem 1.35rem;
    background: linear-gradient(130deg, var(--primary), #4d7ef2 46%, var(--cyan));
    color: #ffffff;
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    box-shadow: 0 0 0 1px rgba(42, 98, 244, 0.26), 0 22px 42px rgba(42, 98, 244, 0.22);
}

.btn-outline,
.btn-ghost {
    padding: 0.9rem 1.3rem;
    border-color: var(--line);
    background: rgba(255, 253, 249, 0.88);
    color: var(--ink);
}

.btn-outline:hover,
.btn-ghost:hover {
    border-color: rgba(42, 98, 244, 0.3);
}

.btn-small {
    padding: 0.56rem 0.95rem;
    font-size: 0.86rem;
}

.btn-wide {
    width: 100%;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(11px);
    background: rgba(252, 248, 241, 0.78);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.topbar.is-scrolled {
    border-bottom-color: rgba(42, 98, 244, 0.14);
    box-shadow: 0 12px 24px rgba(30, 42, 65, 0.08);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.4rem;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.68rem;
    font-family: var(--display-font);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 0.58rem;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 0.78rem;
    background: linear-gradient(145deg, var(--primary), var(--cyan));
    box-shadow: 0 10px 22px rgba(42, 98, 244, 0.28);
}

.brand-text {
    font-size: 1.2rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.nav-links > a:not(.btn) {
    color: var(--ink-soft);
    font-size: 0.94rem;
    font-weight: 650;
    position: relative;
}

.nav-links > a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.36rem;
    width: 100%;
    height: 2px;
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
}

.nav-links > a:not(.btn):hover::after {
    transform: scaleX(1);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 0.28rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.85);
    padding: 0.45rem;
}

.menu-toggle span {
    width: 1.12rem;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
}

.mobile-menu {
    display: none;
    border-top: 1px solid rgba(42, 98, 244, 0.14);
    background: rgba(252, 248, 241, 0.95);
    padding: 1rem 1.3rem 1.2rem;
    flex-direction: column;
    gap: 0.78rem;
}

.mobile-menu a {
    font-weight: 700;
}

.theme-toggle {
    border: 1px solid rgba(42, 98, 244, 0.36);
    border-radius: var(--radius-pill);
    background: linear-gradient(145deg, rgba(42, 98, 244, 0.14), rgba(25, 182, 170, 0.15));
    color: var(--ink);
    padding: 0.42rem 0.68rem;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 20px rgba(42, 98, 244, 0.16);
    transition: transform var(--transition-fast), box-shadow var(--transition-base), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.theme-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(42, 98, 244, 0.2);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(42, 98, 244, 0.24), 0 12px 24px rgba(42, 98, 244, 0.2);
}

.theme-toggle-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #5f7cae;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.theme-toggle-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 800;
}

.theme-toggle-state {
    min-width: 2.2rem;
    text-align: center;
    padding: 0.12rem 0.34rem;
    border-radius: var(--radius-pill);
    background: rgba(16, 35, 63, 0.08);
    color: var(--primary-strong);
    font-size: 0.74rem;
    line-height: 1.1;
    letter-spacing: 0.05em;
    font-weight: 800;
}

.theme-toggle.is-dark .theme-toggle-dot {
    background: var(--cyan);
    box-shadow: 0 0 0 6px rgba(25, 182, 170, 0.18);
}

.theme-toggle.is-dark .theme-toggle-state {
    background: rgba(25, 182, 170, 0.22);
    color: #0c3a44;
}

.hero {
    padding-top: 2.9rem;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.8rem;
    align-items: center;
}

.hero-copy h1 {
    margin-top: 1rem;
    font-family: var(--display-font);
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 13.5ch;
}

.hero-copy h1 span {
    background: linear-gradient(130deg, var(--primary) 0%, var(--cyan) 88%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#hero-rotator {
    display: inline-block;
    min-width: 12ch;
}

.hero-subtitle {
    margin-top: 1rem;
    max-width: 60ch;
    color: var(--ink-soft);
    font-size: 1.03rem;
}

.persona-switch {
    margin-top: 1.35rem;
    padding: 0.25rem;
    display: inline-flex;
    gap: 0.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.8);
}

.switch-btn {
    border: 0;
    border-radius: var(--radius-pill);
    padding: 0.54rem 0.92rem;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 700;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.switch-btn.active {
    background: linear-gradient(130deg, var(--primary), #4d7ef2);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(42, 98, 244, 0.22);
}

.persona-panels {
    margin-top: 0.95rem;
}

.persona-panel {
    display: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.85);
    padding: 0.95rem;
}

.persona-panel.active {
    display: block;
    animation: panelIn 260ms ease;
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.persona-panel h2 {
    font-family: var(--display-font);
    font-size: 1.06rem;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.persona-panel ul {
    list-style: none;
    margin-top: 0.62rem;
    display: grid;
    gap: 0.4rem;
}

.persona-panel li {
    position: relative;
    padding-left: 1.18rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.52;
}

.persona-panel li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: linear-gradient(130deg, var(--cyan), var(--primary));
}

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

.trust-row {
    margin-top: 0.95rem;
    display: flex;
    gap: 0.54rem;
    flex-wrap: wrap;
}

.trust-row span {
    padding: 0.42rem 0.7rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.36;
}

.hero-stage {
    position: relative;
}

.command-card {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(140, 168, 214, 0.3);
    background:
        radial-gradient(circle at 0% 0%, rgba(242, 161, 95, 0.2), transparent 42%),
        linear-gradient(150deg, #12233f 0%, #1a2f52 52%, #21406c 100%);
    color: #eef3fb;
    padding: 1.15rem;
    box-shadow: var(--shadow-medium);
    animation: drift 7.4s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

.command-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #c7d4e8;
    font-size: 0.85rem;
}

.pulse-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    font-weight: 700;
}

.pulse-dot::before {
    content: '';
    width: 0.54rem;
    height: 0.54rem;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(0, 179, 126, 0.65);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    70% {
        box-shadow: 0 0 0 10px rgba(0, 179, 126, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 179, 126, 0);
    }
}

.signal-stack {
    margin-top: 0.95rem;
    display: grid;
    gap: 0.65rem;
}

.signal-card {
    border-radius: var(--radius-md);
    border: 1px solid rgba(154, 182, 236, 0.26);
    padding: 0.8rem;
}

.signal-contract {
    background: linear-gradient(145deg, rgba(242, 161, 95, 0.2), rgba(18, 35, 63, 0.52));
}

.signal-efficiency {
    background: linear-gradient(145deg, rgba(25, 182, 170, 0.2), rgba(18, 35, 63, 0.52));
}

.signal-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c1d2ea;
    font-weight: 800;
}

.signal-main {
    margin-top: 0.3rem;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.32;
}

.signal-sub {
    margin-top: 0.24rem;
    color: #d6e1f3;
    font-size: 0.84rem;
    line-height: 1.48;
}

.micro-timeline {
    margin-top: 0.82rem;
}

.timeline-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b8cbe8;
    font-weight: 700;
}

.timeline-events {
    list-style: none;
    margin-top: 0.62rem;
    display: grid;
    gap: 0.5rem;
    position: relative;
}

.timeline-events::before {
    content: '';
    position: absolute;
    left: 3.52rem;
    top: 0.38rem;
    bottom: 0.38rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(164, 186, 226, 0.42), rgba(164, 186, 226, 0.1));
}

.timeline-event {
    display: grid;
    grid-template-columns: 2.8rem 0.9rem 1fr;
    gap: 0.44rem;
    align-items: start;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(161, 186, 226, 0.18);
    background: rgba(18, 34, 60, 0.4);
    padding: 0.52rem;
    opacity: 0.46;
    transform: translateX(4px);
    transition: opacity var(--transition-base), transform var(--transition-base), border-color var(--transition-fast), background var(--transition-fast);
}

.timeline-time {
    font-family: var(--display-font);
    color: #acc6eb;
    font-size: 0.75rem;
    line-height: 1.3;
}

.timeline-dot {
    margin-top: 0.18rem;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    background: #8198c2;
}

.timeline-event p {
    color: #dde8f9;
    font-size: 0.82rem;
    line-height: 1.45;
}

.timeline-event.is-active {
    opacity: 1;
    transform: translateX(0);
    border-color: rgba(25, 182, 170, 0.45);
    background: rgba(16, 32, 58, 0.74);
}

.timeline-event.is-active .timeline-dot {
    background: var(--cyan);
    box-shadow: 0 0 0 0 rgba(25, 182, 170, 0.55);
    animation: timelinePing 760ms ease-out;
}

.timeline-event.is-done {
    opacity: 0.72;
}

.timeline-event.is-done .timeline-dot {
    background: var(--green);
}

@keyframes timelinePing {
    to {
        box-shadow: 0 0 0 9px rgba(25, 182, 170, 0);
    }
}

.story {
    padding-top: 2.8rem;
    padding-bottom: 2.6rem;
}

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

.story-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.9);
    padding: 1.05rem;
    box-shadow: var(--shadow-soft);
}

.story-card.before {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 127, 78, 0.12), transparent 36%),
        rgba(255, 255, 255, 0.9);
}

.story-card.after {
    background:
        radial-gradient(circle at 100% 0%, rgba(25, 182, 170, 0.13), transparent 38%),
        rgba(255, 255, 255, 0.94);
    border-color: rgba(42, 98, 244, 0.28);
}

.story-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.68rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.story-card.before .story-label {
    border: 1px solid rgba(255, 127, 78, 0.3);
    color: #8a3d1f;
    background: rgba(255, 127, 78, 0.12);
}

.story-card.after .story-label {
    border: 1px solid rgba(42, 98, 244, 0.24);
    color: var(--primary-strong);
    background: rgba(42, 98, 244, 0.1);
}

.story-list {
    list-style: none;
    margin-top: 0.72rem;
    display: grid;
    gap: 0.52rem;
}

.story-list li {
    position: relative;
    padding-left: 1.2rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.52;
}

.story-card.before .story-list li::before,
.story-card.after .story-list li::before {
    position: absolute;
    left: 0;
    top: 0.1rem;
    font-size: 0.86rem;
    font-weight: 800;
}

.story-card.before .story-list li::before {
    content: 'x';
    color: #d85f34;
}

.story-card.after .story-list li::before {
    content: '✓';
    color: var(--green);
}

.journey {
    padding-top: 2.4rem;
    padding-bottom: 2.8rem;
}

.journey-shell {
    --journey-progress: 0;
    --journey-edge: 2.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 100% 0%, rgba(25, 182, 170, 0.14), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(242, 161, 95, 0.12), transparent 42%),
        rgba(255, 255, 255, 0.93);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.journey-track {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.72rem;
    position: relative;
    padding: 1.6rem 0.95rem 0.95rem;
}

.journey-track::before,
.journey-track::after {
    content: '';
    position: absolute;
    top: 0.72rem;
    left: var(--journey-edge);
    height: 2px;
    border-radius: 999px;
}

.journey-track::before {
    width: calc(100% - (var(--journey-edge) * 2));
    background: rgba(126, 163, 255, 0.42);
}

.journey-track::after {
    width: calc((100% - (var(--journey-edge) * 2)) * var(--journey-progress));
    background: linear-gradient(90deg, var(--primary), var(--cyan));
    box-shadow: 0 0 18px rgba(25, 182, 170, 0.36);
    transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.journey-step {
    position: relative;
    border: 1px solid rgba(126, 163, 255, 0.24);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.84rem 0.76rem 0.72rem;
    min-height: 7.1rem;
    opacity: 0.5;
    transform: translateY(7px);
    transition: opacity var(--transition-base), transform var(--transition-base), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.journey-node {
    position: absolute;
    top: -1.2rem;
    left: 50%;
    width: 0.74rem;
    height: 0.74rem;
    border-radius: 50%;
    background: #8ba2ca;
    transform: translateX(-50%);
    border: 2px solid #f4f8ff;
}

.journey-time {
    font-family: var(--display-font);
    color: var(--primary-strong);
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    font-weight: 650;
}

.journey-copy {
    margin-top: 0.4rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.46;
}

.journey-step.is-active {
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(25, 182, 170, 0.42);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 24px rgba(10, 34, 79, 0.12);
}

.journey-step.is-active .journey-node {
    background: var(--cyan);
    box-shadow: 0 0 0 0 rgba(25, 182, 170, 0.56);
    animation: journeyPulse 760ms ease-out;
}

.journey-step.is-done {
    opacity: 0.8;
}

.journey-step.is-done .journey-node {
    background: var(--green);
}

@keyframes journeyPulse {
    to {
        box-shadow: 0 0 0 10px rgba(25, 182, 170, 0);
    }
}

.metrics {
    padding-top: 2.2rem;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.84rem;
}

.metric-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    box-shadow: var(--shadow-soft);
}

.metric-value {
    font-family: var(--display-font);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--primary-strong);
}

.metric-unit {
    margin-left: 0.18rem;
    font-size: 1rem;
    color: var(--ink-soft);
}

.metric-label {
    margin-top: 0.65rem;
    font-size: 0.93rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.engine {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(244, 236, 223, 0.62));
}

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

.engine-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 1.1rem;
    box-shadow: var(--shadow-soft);
}

.engine-card h3 {
    font-family: var(--display-font);
    font-size: 1.16rem;
    line-height: 1.28;
    letter-spacing: -0.008em;
}

.engine-card ul {
    list-style: none;
    margin-top: 0.7rem;
    display: grid;
    gap: 0.42rem;
}

.engine-card li {
    position: relative;
    padding-left: 1.18rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.52;
}

.engine-card li::before {
    content: '';
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0.5rem;
    background: linear-gradient(140deg, var(--primary), var(--cyan));
}

.flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.flow-step {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.88);
    padding: 1rem;
    box-shadow: var(--shadow-soft);
}

.step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--primary), var(--cyan));
    color: #ffffff;
    font-size: 0.9rem;
    font-family: var(--display-font);
    font-weight: 700;
}

.flow-step h3 {
    margin-top: 0.7rem;
    font-family: var(--display-font);
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -0.008em;
}

.flow-step p {
    margin-top: 0.45rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
}

.for-you-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}

.seduce-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(25, 182, 170, 0.11), transparent 44%),
        var(--surface);
    padding: 1.08rem;
    box-shadow: var(--shadow-soft);
}

.seduce-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.33rem 0.65rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(42, 98, 244, 0.24);
    color: var(--primary-strong);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.065em;
    font-weight: 700;
}

.seduce-card h3 {
    margin-top: 0.72rem;
    font-family: var(--display-font);
    font-size: 1.17rem;
    line-height: 1.32;
    letter-spacing: -0.008em;
}

.seduce-card p {
    margin-top: 0.5rem;
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.56;
}

.seduce-card .reality-note {
    margin-top: 0.78rem;
    padding-top: 0.72rem;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.5;
}

.faq {
    padding-top: 4.6rem;
}

.faq-shell {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.88);
    padding: 1.2rem;
    box-shadow: var(--shadow-soft);
}

.faq-shell h2 {
    font-family: var(--display-font);
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    margin-bottom: 0.85rem;
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.76rem 0.85rem;
    background: var(--surface);
}

.faq-item + .faq-item {
    margin-top: 0.56rem;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    color: var(--ink);
    padding-right: 1.1rem;
    position: relative;
    line-height: 1.38;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    color: var(--primary);
    font-size: 1.08rem;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    margin-top: 0.55rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.58;
}

.legal-hub {
    padding-top: 3.3rem;
    padding-bottom: 2.8rem;
}

.legal-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.legal-link-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(25, 182, 170, 0.12), transparent 40%),
        rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-soft);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.legal-link-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 0.3rem 0.62rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(42, 98, 244, 0.24);
    color: var(--primary-strong);
    background: rgba(42, 98, 244, 0.08);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.legal-link-card h3 {
    margin-top: 0.68rem;
    font-family: var(--display-font);
    font-size: 1.12rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.legal-link-card p {
    margin-top: 0.46rem;
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.55;
}

.legal-link-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

.signup {
    padding-top: 4.4rem;
}

.signup-shell {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(126, 163, 255, 0.3);
    background:
        radial-gradient(circle at 100% 0%, rgba(25, 182, 170, 0.2), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(242, 161, 95, 0.19), transparent 45%),
        #132743;
    color: #e9f1fc;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 1rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-medium);
}

.signup-copy h2 {
    margin-top: 0.9rem;
    font-family: var(--display-font);
    font-size: clamp(1.65rem, 3.5vw, 2.5rem);
    line-height: 1.14;
    letter-spacing: -0.012em;
}

.signup-copy p {
    margin-top: 0.75rem;
    color: #d3dfef;
    font-size: 0.98rem;
    line-height: 1.62;
}

.signup-form {
    border: 1px solid rgba(154, 182, 228, 0.34);
    border-radius: var(--radius-lg);
    background: rgba(15, 31, 54, 0.64);
    padding: 0.95rem;
}

.signup-form label,
.role-label {
    font-size: 0.89rem;
    font-weight: 700;
    color: #d8e3f4;
}

.signup-form input[type='email'] {
    margin-top: 0.45rem;
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid rgba(154, 182, 228, 0.42);
    background: rgba(14, 30, 52, 0.9);
    color: #ffffff;
    padding: 0.76rem 0.82rem;
}

.signup-form input[type='email']::placeholder {
    color: #97accf;
}

.signup-form input[type='email']:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(25, 182, 170, 0.2);
}

.role-label {
    margin-top: 0.76rem;
}

.role-switch {
    margin-top: 0.42rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.46rem;
}

.role-option {
    border: 1px solid rgba(154, 182, 228, 0.4);
    border-radius: var(--radius-pill);
    background: rgba(14, 30, 52, 0.66);
    color: #d2ddef;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.56rem 0.62rem;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.role-option.active {
    border-color: transparent;
    background: linear-gradient(130deg, var(--cyan), #59cabf);
    color: #0f3440;
}

.signup-form .btn {
    margin-top: 0.86rem;
}

.form-note {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    text-align: center;
    color: #a7b9d6;
    line-height: 1.5;
}

.form-note a {
    color: #eaf4ff;
    text-decoration: underline;
    text-decoration-color: rgba(93, 215, 199, 0.75);
    text-underline-offset: 0.13rem;
    font-weight: 700;
}

.form-note a:hover {
    color: #ffffff;
}

.footer {
    padding-top: 2.3rem;
    padding-bottom: 1.45rem;
}

.footer-inner {
    border-top: 1px solid rgba(42, 98, 244, 0.14);
    padding-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.brand-footer .brand-text {
    color: var(--ink);
}

.footer-inner p {
    margin-top: 0.52rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.56;
}

.footer-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.footer-links a {
    color: var(--ink-soft);
    font-size: 0.91rem;
    font-weight: 600;
}

.footer-bottom {
    margin-top: 0.9rem;
    font-size: 0.84rem;
    color: var(--ink-muted);
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%) translateY(120px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-base), opacity var(--transition-base);
    z-index: 90;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-content {
    border: 1px solid rgba(42, 98, 244, 0.22);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    padding: 0.64rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: var(--shadow-soft);
    font-size: 0.92rem;
}

body[data-theme='dark'] {
    --bg-main: #0d1422;
    --bg-soft: #121b2c;
    --surface: #162235;
    --surface-dark: #0b1220;
    --line: #2a3a53;

    --ink: #eaf1ff;
    --ink-soft: #b7c4da;
    --ink-muted: #8f9eb8;

    --primary: #78a4ff;
    --primary-strong: #95b8ff;
    --cyan: #5dd7c7;
    --orange: #f2b37a;
    --green: #46c79d;

    --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.35);
    --shadow-medium: 0 26px 52px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 0 1px rgba(120, 164, 255, 0.28), 0 16px 36px rgba(93, 215, 199, 0.2);
}

body[data-theme='dark'] {
    background:
        radial-gradient(circle at 6% 108%, rgba(93, 215, 199, 0.2), transparent 34%),
        radial-gradient(circle at 92% -2%, rgba(120, 164, 255, 0.24), transparent 38%),
        radial-gradient(circle at 48% 114%, rgba(242, 179, 122, 0.16), transparent 44%),
        linear-gradient(180deg, #111b2d 0%, var(--bg-main) 58%, #090f1b 100%);
}

body[data-theme='dark'] .bg-orb-a {
    background: rgba(93, 215, 199, 0.28);
}

body[data-theme='dark'] .bg-orb-b {
    background: rgba(120, 164, 255, 0.3);
}

body[data-theme='dark'] .topbar {
    background: rgba(10, 17, 29, 0.82);
}

body[data-theme='dark'] .topbar.is-scrolled {
    border-bottom-color: rgba(120, 164, 255, 0.24);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

body[data-theme='dark'] .mobile-menu {
    border-top-color: rgba(120, 164, 255, 0.25);
    background: rgba(8, 14, 25, 0.95);
}

body[data-theme='dark'] .menu-toggle {
    background: rgba(11, 20, 35, 0.92);
}

body[data-theme='dark'] .theme-toggle {
    border-color: rgba(120, 164, 255, 0.48);
    background: linear-gradient(145deg, rgba(120, 164, 255, 0.2), rgba(93, 215, 199, 0.2));
    color: #f0f5ff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

body[data-theme='dark'] .theme-toggle.is-dark .theme-toggle-state {
    color: #06242b;
}

body[data-theme='dark'] .btn-outline,
body[data-theme='dark'] .btn-ghost {
    border-color: rgba(120, 164, 255, 0.36);
    background: rgba(16, 28, 46, 0.82);
    color: var(--ink);
}

body[data-theme='dark'] .persona-switch,
body[data-theme='dark'] .persona-panel,
body[data-theme='dark'] .trust-row span,
body[data-theme='dark'] .story-card,
body[data-theme='dark'] .metric-card,
body[data-theme='dark'] .engine-card,
body[data-theme='dark'] .flow-step,
body[data-theme='dark'] .seduce-card,
body[data-theme='dark'] .faq-shell,
body[data-theme='dark'] .faq-item,
body[data-theme='dark'] .toast-content {
    background: rgba(17, 28, 46, 0.86);
    border-color: rgba(120, 164, 255, 0.22);
}

body[data-theme='dark'] .story-card.before {
    background:
        radial-gradient(circle at 0% 0%, rgba(242, 179, 122, 0.16), transparent 36%),
        rgba(17, 28, 46, 0.88);
}

body[data-theme='dark'] .story-card.after {
    background:
        radial-gradient(circle at 100% 0%, rgba(93, 215, 199, 0.16), transparent 38%),
        rgba(17, 28, 46, 0.9);
}

body[data-theme='dark'] .engine {
    background: linear-gradient(180deg, rgba(12, 20, 35, 0.34), rgba(10, 16, 28, 0.72));
}

body[data-theme='dark'] .legal-link-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(93, 215, 199, 0.15), transparent 42%),
        rgba(17, 28, 46, 0.9);
    border-color: rgba(120, 164, 255, 0.22);
}

body[data-theme='dark'] .legal-link-tag {
    border-color: rgba(120, 164, 255, 0.34);
    background: rgba(120, 164, 255, 0.16);
    color: #c5d8ff;
}

body[data-theme='dark'] .journey-shell {
    background:
        radial-gradient(circle at 100% 0%, rgba(93, 215, 199, 0.18), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(120, 164, 255, 0.16), transparent 42%),
        rgba(14, 24, 40, 0.93);
}

body[data-theme='dark'] .journey-step {
    background: rgba(17, 28, 46, 0.88);
    border-color: rgba(120, 164, 255, 0.24);
}

body[data-theme='dark'] .journey-step.is-active {
    background: rgba(23, 39, 63, 0.95);
    border-color: rgba(93, 215, 199, 0.48);
}

body[data-theme='dark'] .signup-shell {
    border-color: rgba(120, 164, 255, 0.34);
    background:
        radial-gradient(circle at 100% 0%, rgba(93, 215, 199, 0.2), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(120, 164, 255, 0.18), transparent 45%),
        #0b1424;
}

body[data-theme='dark'] .signup-form {
    border-color: rgba(120, 164, 255, 0.36);
    background: rgba(9, 18, 32, 0.8);
}

body[data-theme='dark'] .signup-form input[type='email'],
body[data-theme='dark'] .role-option {
    border-color: rgba(120, 164, 255, 0.42);
    background: rgba(8, 16, 28, 0.88);
    color: #e9f1ff;
}

body[data-theme='dark'] .role-option.active {
    color: #06242b;
}

body[data-theme='dark'] .footer-inner {
    border-top-color: rgba(120, 164, 255, 0.2);
}

body[data-theme='dark'] .form-note,
body[data-theme='dark'] .signup-copy p {
    color: #bac8df;
}

body[data-theme='dark'] .command-card {
    border-color: rgba(120, 164, 255, 0.34);
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms ease, transform 620ms ease;
}

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

@media (max-width: 1080px) {
    .hero-grid,
    .signup-shell {
        grid-template-columns: 1fr;
    }

    .journey-shell {
        overflow-x: auto;
    }

    .journey-track {
        min-width: 860px;
    }

    .story-grid,
    .metrics-grid,
    .flow-grid,
    .legal-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .engine-grid,
    .for-you-grid {
        grid-template-columns: 1fr;
    }

    .hero-stage {
        max-width: 700px;
    }
}

@media (max-width: 900px) {
    :root {
        --section-space: 5rem;
    }

    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .theme-toggle {
        padding: 0.4rem 0.56rem;
    }

    .theme-toggle-label {
        display: none;
    }

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

    .hero {
        padding-top: 2.1rem;
    }

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

    .hero-actions .btn {
        flex: 1;
    }

    .footer-inner {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .container {
        padding-inline: 1rem;
    }

    .journey-track {
        min-width: 760px;
        gap: 0.56rem;
    }

    .journey-step {
        min-height: 6.6rem;
    }

    .story-grid,
    .metrics-grid,
    .flow-grid,
    .legal-hub-grid,
    .role-switch {
        grid-template-columns: 1fr;
    }

    .persona-switch {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .switch-btn {
        width: 100%;
    }

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

    .hero-actions .btn {
        width: 100%;
    }

    .timeline-event {
        grid-template-columns: 2.5rem 0.85rem 1fr;
    }

    .timeline-events::before {
        left: 3.18rem;
    }

    .toast {
        width: calc(100% - 1.2rem);
    }

    .toast-content {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}