:root {
    /* Brand Gradient Colors */
    --c-cyan: #4AF0FF;
    --c-indigo: #6366F1;
    --c-purple: #A855F7;
    --c-pink: #EC4899;
    --c-orange: #F97316;

    --brand-gradient: linear-gradient(135deg, var(--c-cyan), var(--c-indigo), var(--c-purple), var(--c-pink), var(--c-orange));
    --brand-gradient-hover: linear-gradient(135deg, #71f3ff, #7f81f4, #b976f8, #ef6eac, #faa05b);

    /* Functional Colors */
    --c-profit: #22C55E;
    --c-loss: #EF4444;
    --c-warning: #F59E0B;

    /* Background & Surfaces */
    --bg-dark: #08080C;
    --surface-default: #111118;
    --surface-border: #1E1E2A;

    /* Text Colors */
    --text-primary: #F0EDE8;
    --text-secondary: rgba(240, 237, 232, 0.5);
    --text-tertiary: rgba(240, 237, 232, 0.25);

    /* Typography */
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Layout */
    --container-width: 1200px;
    --section-spacing: clamp(100px, 15vh, 160px);
}

/* Base Reset */
html {
    scroll-behavior: smooth;
}

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

html,
body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

/* Typography Base */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

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

/* Scroll Offset for Anchors */
[id] {
    scroll-margin-top: 100px;
}

/* Layout Utilities */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding-top: var(--section-spacing);
    padding-bottom: var(--section-spacing);
    position: relative;
    z-index: 10;
}

/* Background Atmosphere */
#noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
}

.orb-hero {
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    max-width: 100vw;
    background: radial-gradient(circle, var(--c-cyan) 0%, var(--c-purple) 100%);
}

.orb-portfolios {
    top: 40%;
    right: -10%;
    width: 600px;
    height: 600px;
    max-width: 80vw;
    background: radial-gradient(circle, var(--c-purple) 0%, var(--c-pink) 100%);
}

.orb-testimonials {
    bottom: 10%;
    left: -10%;
    width: 700px;
    height: 700px;
    max-width: 90vw;
    background: radial-gradient(circle, var(--c-pink) 0%, var(--c-orange) 100%);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
    padding: 16px 0;
}

.header.scrolled {
    background: rgba(8, 8, 12, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(30, 30, 42, 0.5);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.04em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Buttons */
.btn-sm {
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-lg {
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 18px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-gradient {
    background: var(--brand-gradient);
    color: #fff;
}

.btn-gradient:hover {
    background: var(--brand-gradient-hover);
    transform: scale(1.02);
}

.btn-gradient-glow {
    background: var(--brand-gradient);
    background-size: 200% auto;
    color: #fff;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-gradient-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--brand-gradient);
    background-size: 200% auto;
    border-radius: 999px;
    filter: blur(12px);
    opacity: 0.5;
    z-index: -1;
    transition: opacity 0.3s ease;
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

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

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

.btn-gradient-glow:hover {
    transform: scale(1.05);
    animation: gradient-flow 3s linear infinite;
}

.btn-gradient-glow:hover::before {
    opacity: 0.9;
    filter: blur(18px);
    animation: gradient-flow 3s linear infinite;
}

.tg-icon {
    width: 24px;
    height: 24px;
}

/* Section 1: Hero */
.hero-section {
    min-height: 115vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 10vh;
    position: relative;
}

#hero-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    /* Increased to stay above starfield */
    /* Fade out bottom edge slightly */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    pointer-events: none;
    margin-top: auto;
}

.hero-content.brand {
    opacity: 0;
    transition: opacity 1.5s ease;
}

.hero-content.brand.visible {
    opacity: 1;
    pointer-events: auto;
    /* Re-enable pointer events when visible */
}

.hero-title {
    font-size: clamp(40px, 6vw, 72px);
    color: #fff;
    margin-bottom: 16px;
    text-wrap: balance;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 4px 24px rgba(0, 0, 0, 0.25);
}

.gradient-word {
    background: linear-gradient(135deg, #6366F1 0%, #A855F7 40%, #EC4899 70%, #F97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.35));
}

.hero-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 40px;
    font-weight: 500;
}

.hero-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: auto;
}

.hero-micro {
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}

/* Ambient Background Animations */
.ambient-bg {
    position: absolute;
    inset: -50px;
    /* Expand slightly for parallax */
    overflow: hidden;
    z-index: 1;
    /* Above noise layer, below sphere */
    pointer-events: none;
    transition: transform 0.2s ease-out;
    /* Smooth parallax */
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    pointer-events: none;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: var(--base-opacity);
    }

    50% {
        opacity: calc(var(--base-opacity) * 0.3);
    }
}

.ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    animation: float-glow 15s infinite alternate ease-in-out;
}

.g1 {
    width: 400px;
    height: 400px;
    background: var(--c-cyan);
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.g2 {
    width: 500px;
    height: 500px;
    background: var(--c-purple);
    bottom: 20%;
    right: 15%;
    animation-delay: -5s;
}

@keyframes float-glow {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.1;
    }

    50% {
        transform: translate(50px, 30px) scale(1.1);
        opacity: 0.15;
    }

    100% {
        transform: translate(-30px, 50px) scale(0.9);
        opacity: 0.1;
    }
}

/* =========================================
   VERSION B: CANVAS NOISE BACKGROUND
   ========================================= */
.canvas-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

canvas#noiseCanvas {
    width: 100%;
    height: 100%;
    /* Upscale from lower resolution cleanly */
    image-rendering: auto;
}

/* =========================================
   MARKET DATA NOISE LAYER
   ========================================= */
#market-noise-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Above canvas background, below sphere */
    pointer-events: none;
    overflow: hidden;
    /* Mask out the center (around the sphere) */
    mask-image: radial-gradient(circle at 50% 50%, transparent 200px, black 350px);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 200px, black 350px);
}

/* Hide on mobile */
@media (max-width: 768px) {
    #market-noise-layer {
        display: none !important;
    }
}

.market-data-node {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
    white-space: nowrap;
    will-change: transform, opacity;
    user-select: none;
}

@keyframes drift-node {
    0% {
        transform: translate(0, 20px) rotate(var(--rotation));
        opacity: var(--base-opacity);
    }

    50% {
        transform: translate(var(--x-drift), 0) rotate(var(--rotation));
        opacity: calc(var(--base-opacity) * 0.5);
    }

    100% {
        transform: translate(0, -20px) rotate(var(--rotation));
        opacity: var(--base-opacity);
    }
}

/* Glassmorphism Cards */
.glass-card {
    background: var(--surface-default);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    padding: 24px 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Scroll Fade Animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Section 2: Social Proof Bar */
.social-proof-bar {
    border-top: 1px solid rgba(30, 30, 42, 0.5);
    border-bottom: 1px solid rgba(30, 30, 42, 0.5);
    margin-top: -8vh;
    /* Overlap slightly with hero bottom padding */
    position: relative;
    z-index: 10;
}

.social-proof-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    gap: 16px;
    overflow-x: auto;
}

.proof-item {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.proof-divider {
    width: 1px;
    height: 16px;
    background: rgba(240, 237, 232, 0.05);
}

/* --- STEP 3: Portfolio Construction (Donut & List) --- */
.infographic-portfolio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    column-gap: 16px;
    height: 100%;
    width: 100%;
    padding: 16px;
}

.portfolio-left {
    flex: 0 0 85px;
    display: flex;
    justify-content: center;
}

.donut-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.donut-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    /* Start from top */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.start-anim .donut-svg {
    animation: slowRotate 60s linear infinite;
}

@keyframes slowRotate {
    from {
        transform: rotate(-90deg);
    }

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

.donut-segment {
    fill: transparent;
    stroke-linecap: butt;
    transition: stroke-dashoffset 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Base dashoffset should match dasharray total (circumference ~251.32) */
.donut-segment {
    stroke-dashoffset: 251.32;
}

.start-anim .donut-segment {
    stroke-dashoffset: var(--offset, 0);
}

/* Individual segment offsets - logic to stack them */
/* Using inline offsets in HTML is cleaner, but we can also do it here if needed */
/* The dasharray approach in HTML is static, the offset is what we animate */

.donut-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.donut-num {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.donut-label {
    font-family: var(--font-mono);
    font-size: 7px;
    opacity: 0.3;
}

.portfolio-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.allocation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0 auto;
}

.alloc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 4px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.5s ease-out;
}

.start-anim .alloc-row {
    opacity: 1;
    transform: translateX(0);
}

.alloc-row .ticker {
    grid-area: 1 / 1;
    font-family: var(--font-mono);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.6);
    width: auto;
}

.alloc-row .weight {
    grid-area: 1 / 2;
    font-family: var(--font-mono);
    font-size: 8px;
    color: #fff;
    width: auto;
    text-align: right;
}

.alloc-bar {
    grid-area: 2 / 1 / 2 / 3;
    height: 4px;
    border-radius: 2px;
    width: 0;
    opacity: 0.85;
    transition: width 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.start-anim .alloc-bar {
    width: var(--w);
    transition-delay: calc(var(--d) + 0.2s);
}

.portfolio-footer {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 7px;
    color: rgba(255, 255, 255, 0.2);
    text-align: center;
    letter-spacing: 0.05em;
    padding-bottom: 2px;
}

/* Shared Typography Classes */
.section-badge {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.section-title {
    font-size: clamp(32px, 4vw, 48px);
    color: #fff;
    margin-bottom: 48px;
}

/* Section 3: How Our AI Models Work */
.how-it-works-section {
    position: relative;
    padding: var(--section-spacing) 0;
    background-color: #08080C;
    overflow: hidden;
}

.purple-bg-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
    position: relative;
    z-index: 1;
}

.section-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.section-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.how-pipeline {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    position: relative;
    z-index: 1;
}

.step-card {
    background: #111118;
    border: 1px solid #1E1E2A;
    border-radius: 16px;
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
}

.step-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15);
}

.step-card:nth-child(1) {
    --accent-rgb: 74, 240, 255;
}

.step-card:nth-child(3) {
    --accent-rgb: 168, 85, 247;
}

.step-card:nth-child(5) {
    --accent-rgb: 236, 72, 153;
}

.step-card:nth-child(7) {
    --accent-rgb: 249, 115, 22;
}

.infographic-area {
    height: 200px;
    background: #0d0d12;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.4s ease;
}

.step-card:hover .infographic-area {
    filter: brightness(1.15);
}

/* Infographic Placeholders */
.infographic-area.placeholder {
    background: linear-gradient(to bottom, #111118, rgba(16, 16, 24, 0.2));
}

.infographic-area.placeholder.purple {
    background: linear-gradient(135deg, #111118, rgba(168, 85, 247, 0.05));
}

.infographic-area.placeholder.pink {
    background: linear-gradient(135deg, #111118, rgba(236, 72, 153, 0.05));
}

.infographic-area.placeholder.orange {
    background: linear-gradient(135deg, #111118, rgba(249, 115, 22, 0.05));
}

.placeholder-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.step-content {
    padding: 24px 20px;
    flex-grow: 1;
}

.step-num {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 12px;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.step-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.step-desc {
    font-size: 13px;
    color: rgba(240, 237, 232, 0.5);
    line-height: 1.5;
    margin-bottom: 16px;
}

.step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    color: rgba(167, 139, 250, 0.6);
    background: rgba(167, 139, 250, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Connectors */
.step-connector {
    flex-grow: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    align-self: center;
    margin-top: 100px;
    position: relative;
    min-width: 20px;
    opacity: 0.3;
    animation: connectorPulse 4s infinite ease-in-out;
}

@keyframes connectorPulse {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.4;
    }
}

/* Specific connector gradients and glow */
.conn-1-2 {
    background: linear-gradient(to right, var(--c-cyan), var(--c-purple));
    filter: drop-shadow(0 0 4px rgba(74, 240, 255, 0.2));
}

.conn-2-3 {
    background: linear-gradient(to right, var(--c-purple), var(--c-pink));
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.2));
}

.conn-3-4 {
    background: linear-gradient(to right, var(--c-pink), var(--c-orange));
    filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.2));
}

.dot-flow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 1s ease;
}

.step-connector.is-visible .dot-flow {
    opacity: 1;
}

.dot-flow .dot {
    position: absolute;
    left: 0;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    animation: flowAcross 3.5s ease-in-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes flowAcross {
    0% {
        left: 0%;
        opacity: 0;
    }

    20% {
        opacity: 0.4;
    }

    80% {
        opacity: 0.4;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Step 1 Infographic - Widgets */
.infographic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    padding: 12px;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 40px rgba(74, 240, 255, 0.05);
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s ease;
}

.start-anim .infographic-grid {
    opacity: 1;
    transform: scale(1);
}

.mini-widget {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Candlestick Chart */
.candles-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cs-slot {
    position: absolute;
    top: 0;
    bottom: 0;
}

.cs-body {
    position: absolute;
    width: 4px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1px;
    transition: bottom 1.5s ease-in-out, height 1.5s ease-in-out, background-color 0.5s ease;
}

.cs-wick {
    position: absolute;
    width: 1px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1px;
    opacity: 0.7;
    transition: bottom 1.5s ease-in-out, height 1.5s ease-in-out, background-color 0.5s ease;
}

/* Line Chart Animation */
.mini-svg {
    width: 100%;
    height: 100%;
}

.line-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.start-anim .line-path {
    animation: drawPath 2.5s ease-out forwards;
}

.line-dot {
    opacity: 0;
    offset-path: path("M0,55 Q15,50 25,40 T45,35 T65,20 T85,15 T100,5");
}

.start-anim .line-dot {
    animation: moveAlongLine 8s ease-in-out infinite;
    animation-delay: 2.5s;
    /* After path draws */
}

@keyframes moveAlongLine {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    5%,
    95% {
        opacity: 0.8;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

.area-path {
    opacity: 0;
}

.start-anim .area-path {
    animation: fadeInArea 1s 1s ease-out forwards;
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInArea {
    to {
        opacity: 1;
    }
}

/* Table Animation */
.mini-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.table-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 8px;
    opacity: 0;
    transform: translateX(-10px);
}

.start-anim .table-row {
    animation: slideInRow 0.5s forwards, rowPulse 6s infinite ease-in-out;
    animation-delay: var(--d), calc(var(--d) + 2s);
}

.change {
    transition: opacity 0.4s ease, color 0.4s ease;
}

.change.pos {
    color: var(--c-profit) !important;
}

.change.neg {
    color: var(--c-loss) !important;
}

.change.updating-val {
    opacity: 0;
}

@keyframes tickerFlash {

    0%,
    94%,
    100% {
        color: inherit;
        opacity: 1;
    }

    97% {
        color: #fff;
        opacity: 1;
        filter: brightness(2);
    }
}

@keyframes rowPulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.9;
    }
}

.table-row .ticker {
    color: rgba(255, 255, 255, 0.6);
}

.table-row .change.pos {
    color: rgba(34, 197, 94, 0.6);
    transition: color 0.3s ease, opacity 0.3s ease;
}

.table-row .change.neg {
    color: rgba(239, 68, 68, 0.5);
    transition: color 0.3s ease, opacity 0.3s ease;
}

.table-row.updating {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.table-row .change.updating-val {
    opacity: 0;
    transform: translateY(2px);
}

@keyframes slideInRow {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Bar Chart Animation */
.mini-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.mini-bars .bar {
    height: 4px;
    width: 0;
    border-radius: 2px;
}

.start-anim .bar {
    animation: growBar 0.5s ease-out forwards;
    animation-delay: var(--d);
}

.bar.cyan {
    background: rgba(74, 240, 255, 0.4);
}

.bar.purple {
    background: rgba(168, 85, 247, 0.4);
}

.start-anim .bar:nth-child(1) {
    animation: growBar 0.5s forwards, barLive 4.2s infinite ease-in-out 0.5s;
}

.start-anim .bar:nth-child(2) {
    animation: growBar 0.5s forwards, barLive 3.7s infinite ease-in-out 0.8s;
}

.start-anim .bar:nth-child(3) {
    animation: growBar 0.5s forwards, barLive 4.5s infinite ease-in-out 1.1s;
}

.start-anim .bar:nth-child(4) {
    animation: growBar 0.5s forwards, barLive 3.9s infinite ease-in-out 1.4s;
}

.start-anim .bar:nth-child(5) {
    animation: growBar 0.5s forwards, barLive 4.1s infinite ease-in-out 1.7s;
}

@keyframes barLive {

    0%,
    100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(1.1);
    }
}

@keyframes growBar {
    to {
        width: var(--w);
    }
}

/* Fade Up items for scroll reveal */
.fade-up-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@keyframes pulseGlow {
    from {
        filter: brightness(1) drop-shadow(0 0 2px currentColor);
    }

    to {
        filter: brightness(1.5) drop-shadow(0 0 8px currentColor);
    }
}

/* Section 4: AI Portfolios */
.section-portfolios {
    position: relative;
    padding: 100px 0;
    background: #08080C;
    overflow: hidden;
}

.portfolios-bg-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.08) 50%, transparent 70%);
    filter: blur(200px);
    opacity: 0.06;
    z-index: 0;
    pointer-events: none;
}

.section-header-centered {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.section-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(240, 237, 232, 0.25);
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 16px;
    color: rgba(240, 237, 232, 0.5);
    margin-top: 12px;
}

.portfolio-hint {
    margin-top: 12px;
    font-size: 14px;
    color: rgba(240, 237, 232, 0.4);
}

.portfolio-hint .accent-link {
    color: var(--c-cyan);
    text-decoration: none;
    font-weight: 500;
    transition: filter 0.3s;
}

.portfolio-hint .accent-link:hover {
    filter: brightness(1.2);
    text-decoration: underline;
}

/* Portfolio Cards Shared */
.portfolio-card {
    position: relative;
    background: #111118;
    border: 1px solid #1E1E2A;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.portfolio-card[data-glow="purple"] {
    --card-glow-color: rgba(139, 92, 246, 0.18);
}

.portfolio-card[data-glow="cyan"] {
    --card-glow-color: rgba(6, 182, 212, 0.18);
}

.portfolio-card[data-glow="pink"] {
    --card-glow-color: rgba(236, 72, 153, 0.18);
}

.portfolio-card[data-glow="orange"] {
    --card-glow-color: rgba(249, 115, 22, 0.18);
}

.portfolio-card[data-glow="green"] {
    --card-glow-color: rgba(34, 197, 94, 0.18);
}

.portfolio-card[data-glow="indigo"] {
    --card-glow-color: rgba(99, 102, 241, 0.18);
}

.portfolio-card .card-inner {
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 3;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Accent Themes */
.accent-cyan-indigo {
    background: linear-gradient(90deg, #4AF0FF, #6366F1);
}

.accent-purple-pink {
    background: linear-gradient(90deg, #A855F7, #EC4899);
}

.accent-indigo-purple {
    background: linear-gradient(90deg, #6366F1, #A855F7);
}

.accent-cyan-blue {
    background: linear-gradient(90deg, #4AF0FF, #3B82F6);
}

.accent-orange-yellow {
    background: linear-gradient(90deg, #F97316, #F59E0B);
}

.accent-pink-purple {
    background: linear-gradient(90deg, #EC4899, #A855F7);
}

.accent-orange-red {
    background: linear-gradient(90deg, #F97316, #EF4444);
}

.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 40px var(--card-glow-color, transparent),
        0 20px 40px rgba(0, 0, 0, 0.3);
    filter: brightness(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-card:hover {
        transform: none;
    }
}

.risk-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    z-index: 4;
}

.risk-badge.low {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.risk-badge.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.risk-badge.med-high {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

.risk-badge.high {
    background: rgba(239, 68, 68, 0.20);
    color: #EF4444;
}

.featured-card .risk-badge {
    position: relative;
    top: auto;
    right: auto;
    display: inline-block;
    margin-bottom: 16px;
}

/* Featured Cards Layout */
.featured-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.featured-card {
    min-height: 360px;
}

#p-anti-inflation::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    border-radius: 20px;
}

#p-ai-software::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 15px 15px;
    pointer-events: none;
    border-radius: 20px;
}

.card-main {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.card-left {
    flex: 1;
}

.card-top-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.05em;
}

.badge-free {
    background: rgba(74, 240, 255, 0.15);
    color: #4AF0FF;
}

.badge-top {
    background: rgba(168, 85, 247, 0.15);
    color: #A855F7;
}

.featured-card .p-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    min-height: auto;
}

.p-performance {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 16px;
}

.p-performance .stat.pos {
    color: #22C55E;
}

.p-performance .stat.neg {
    color: #EF4444;
}

.p-performance .dot {
    opacity: 0.3;
}

.featured-card .p-desc {
    font-size: 14px;
    color: rgba(240, 237, 232, 0.6);
    line-height: 1.6;
    margin-bottom: 20px;
}

.comp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.c-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    text-transform: uppercase;
}

.card-right {
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.featured-sparkline {
    width: 140px;
    height: 60px;
}

.card-static-details {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-row .label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.detail-row .val {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

.p-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 800;
    color: #4AF0FF;
    text-decoration: none;
    transition: opacity 0.3s, transform 0.2s;
}

.p-link:hover {
    opacity: 0.8;
    transform: translateX(4px);
}

.p-link-purple {
    color: #A855F7;
}

.p-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Sparkline Draw Animation */
.spark-path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

.start-anim .spark-path {
    animation: drawSpark 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes drawSpark {
    to {
        stroke-dashoffset: 0;
    }
}

/* Live indicators */
.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 6px;
    animation: pulseLive 2s infinite ease-in-out;
}

.live-dot.pos {
    background: #22C55E;
}

.live-dot.neg {
    background: #EF4444;
}

@keyframes pulseLive {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.9);
    }

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

/* Compact Grid Layout */
.compact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.portfolios-footer-cta {
    margin-top: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-cta-text {
    font-size: 15px;
    color: rgba(240, 237, 232, 0.4);
    font-family: var(--font-main);
}

.btn-tg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
}

.compact-card {
    min-height: 200px;
}

.compact-card .card-inner {
    padding: 24px;
    gap: 12px;
}

.c-performance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    min-height: 36px;
}

.c-performance-row .p-performance {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 500;
}

.c-sparkline {
    width: 90px;
    height: 32px;
}

.glow-spark {
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.1));
}

.comp-tags-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.c-goal {
    font-size: 12px;
    color: rgba(240, 237, 232, 0.3);
    font-style: italic;
    margin-bottom: 12px;
}

.compact-card .p-link {
    margin-top: auto;
}

/* Bottom CTA */
.portfolios-cta {
    margin-top: 60px;
    text-align: center;
}

.cta-text {
    font-size: 14px;
    color: rgba(240, 237, 232, 0.4);
    margin-bottom: 24px;
}

.btn-outline-gradient {
    position: relative;
    display: inline-flex;
    padding: 1px;
    border-radius: 30px;
    background: var(--brand-gradient);
    text-decoration: none;
    transition: transform 0.3s;
}

.btn-outline-gradient span {
    display: block;
    background: #08080C;
    color: #fff;
    padding: 12px 32px;
    border-radius: 29px;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.3s;
}

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

.btn-outline-gradient:hover span {
    background: var(--brand-gradient);
}

/* Mobile Toggle Styles */
.mobile-toggle-wrapper {
    display: none;
}

.btn-toggle-portfolios {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 12px 32px;
    color: rgba(240, 237, 232, 0.5);
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-toggle-portfolios:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(240, 237, 232, 0.8);
}

.toggle-icon {
    font-size: 10px;
    transition: transform 0.3s ease;
}

/* Sparklines */
.featured-sparkline svg {
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.2));
}

#p-ai-software .featured-sparkline svg {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.2));
}

.c-sparkline {
    opacity: 0.8;
}

.start-anim .c-sparkline polyline {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: dash-loop 5s ease-in-out infinite;
}

@keyframes dash-loop {
    0% {
        stroke-dashoffset: 100;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    40% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    85% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    95% {
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 100;
        opacity: 0;
    }
}

/* Animations */
.fade-up-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fade-left-item {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fade-right-item {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.section-portfolios.start-anim .fade-up-item,
.section-portfolios.start-anim .fade-left-item,
.section-portfolios.start-anim .fade-right-item {
    opacity: 1;
    transform: translate(0, 0);
}

/* Utilities */
.text-center {
    text-align: center;
}

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

/* --- Section 5: Visual Explainer --- */
#process {
    margin-top: 120px;
    text-align: center;
    padding-bottom: 80px;
}

.process-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    margin-top: 60px;
}

.proc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 140px;
}

.proc-visual {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.proc-visual.chaos .dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.3;
}

/* Chaos Dots Positions */
.proc-visual.chaos .d1 {
    top: 20%;
    left: 30%;
}

.proc-visual.chaos .d2 {
    top: 40%;
    left: 70%;
}

.proc-visual.chaos .d3 {
    top: 70%;
    left: 40%;
}

.proc-visual.chaos .d4 {
    top: 30%;
    left: 80%;
}

.proc-visual.chaos .d5 {
    top: 60%;
    left: 20%;
}

.proc-visual.chaos .d6 {
    top: 80%;
    left: 60%;
}

.proc-visual.chaos .d7 {
    top: 15%;
    left: 65%;
}

.proc-visual.chaos .d8 {
    top: 45%;
    left: 15%;
}

/* Animation for Chaos */
#process.is-visible .proc-visual.chaos .dot {
    animation: jitter 4s infinite alternate;
}

@keyframes jitter {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(var(--jx, 5px), var(--jy, 5px));
    }
}

.proc-visual.chaos .dot:nth-child(1) {
    --jx: 8px;
    --jy: -4px;
    animation-delay: 0.1s;
}

.proc-visual.chaos .dot:nth-child(2) {
    --jx: -6px;
    --jy: 10px;
    animation-delay: 0.3s;
}

.proc-visual.chaos .dot:nth-child(3) {
    --jx: 10px;
    --jy: 6px;
    animation-delay: 0.5s;
}

.proc-visual.chaos .dot:nth-child(4) {
    --jx: -4px;
    --jy: -8px;
    animation-delay: 0.2s;
}

.proc-visual.chaos .dot:nth-child(5) {
    --jx: 5px;
    --jy: 9px;
    animation-delay: 0.4s;
}

.proc-visual.chaos .dot:nth-child(6) {
    --jx: -9px;
    --jy: -3px;
    animation-delay: 0.6s;
}

.filter-icon {
    width: 40px;
    height: 40px;
}

.signal-circle {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 20px #fff;
}

.proc-arrow {
    width: 60px;
    height: 2px;
}

.arrow-line {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    position: relative;
    overflow: hidden;
}

.arrow-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: arrowFlow 3s infinite linear;
}

@keyframes arrowFlow {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.proc-label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
}

.process-desc {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-tertiary);
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .process-flow {
        flex-direction: column;
        gap: 20px;
    }

    .proc-arrow {
        width: 2px;
        height: 40px;
    }

    .arrow-line {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    }

    .arrow-line::after {
        background: linear-gradient(180deg, transparent, #fff, transparent);
        animation: arrowFlowV 3s infinite linear;
    }
}

@keyframes arrowFlowV {
    0% {
        top: -100%;
    }

    100% {
        top: 100%;
    }
}

/* --- STEP 2: Multi-Model Analysis (Lanes) --- */
.infographic-lanes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    height: 100%;
    width: 100%;
    padding: 10px;
}

.lane {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.lane-header {
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.1em;
    opacity: 0.5;
    color: var(--accent);
}

.lane-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 8px;
}

/* Lane 1: Regime */
.status-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
    margin-bottom: 4px;
}

.start-anim .status-circle.bull {
    animation: pulseCircle 3s infinite ease-in-out;
}

@keyframes pulseCircle {

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

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

.status-text {
    font-family: var(--font-mono);
    font-size: 8px;
    color: rgba(34, 197, 94, 0.6);
}

/* Lane 2: Momentum */
.momentum-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.momentum-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6366F1, #A855F7);
    border-radius: 3px;
    transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.momentum-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: momentumShimmer 5s infinite;
}

@keyframes momentumShimmer {
    0% {
        left: -100%;
    }

    20%,
    100% {
        left: 100%;
    }
}

.start-anim .momentum-bar-fill {
    width: 78%;
}

.momentum-val {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(168, 85, 247, 0.6);
}

/* Lane 3: Risk */
.risk-meter {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}

.risk-bar {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.4s, box-shadow 0.4s;
}

.risk-bar.high {
    background: rgba(239, 68, 68, 0.1);
}

.risk-bar.med {
    background: rgba(245, 158, 11, 0.1);
}

.risk-bar.low {
    background: rgba(34, 197, 94, 0.1);
}

/* Sequence animation */
.risk-bar.high {
    transition-delay: 0s;
}

.risk-bar.med {
    transition-delay: 0.3s;
}

.risk-bar.low {
    transition-delay: 0.6s;
}

.start-anim .risk-bar.low.active {
    background: rgba(34, 197, 94, 0.4);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
    animation: riskGlow 4s infinite ease-in-out;
}

@keyframes riskGlow {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(34, 197, 94, 0.2);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
        filter: brightness(1.2);
    }
}

.risk-val {
    font-family: var(--font-mono);
    font-size: 8px;
    color: rgba(34, 197, 94, 0.6);
}

/* Shared: Falling Dots & Pulse Output */
.lane-dots {
    position: absolute;
    width: 100%;
    height: 20px;
}

.lane-dots.input {
    top: 0;
}

.lane-dots.output {
    bottom: 0;
    display: flex;
    justify-content: center;
}

.lane-dots .dot {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
}

.start-anim .lane-dots.input .dot {
    animation: flowDownIn var(--dur, 2s) infinite ease-in-out;
    left: var(--left);
    animation-delay: var(--delay);
}

/* Combined Signal Output (Card 2) */
.combined-signal-line {
    position: absolute;
    bottom: 25px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(to right, var(--c-cyan), var(--c-purple), var(--c-pink));
    opacity: 0.2;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.1);
}

.signal-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 8px #fff;
    animation: signalFlow 4s infinite linear;
    opacity: 0;
}

@keyframes signalFlow {
    0% {
        left: 0%;
        opacity: 0;
    }

    10%,
    90% {
        opacity: 0.8;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes flowDownIn {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    40% {
        opacity: 0.4;
    }

    80% {
        opacity: 0;
    }

    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}

.lane-dots .dot.pulse {
    position: relative;
    width: 4px;
    height: 4px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    opacity: 0.6;
}

.start-anim .lane-dots .dot.pulse {
    animation: pulseOutput 2s infinite ease-in-out;
}

@keyframes pulseOutput {

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

    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

/* --- STEP 3: Portfolio Construction (Donut & List) --- */



.start-anim .alloc-bar {
    width: var(--w);
    transition-delay: calc(var(--d) + 0.2s);
    animation: barMicroPulse 5s infinite ease-in-out;
    animation-delay: calc(var(--d) + 1.2s);
}

@keyframes weightShift {

    0%,
    90%,
    100% {
        transform: scaleX(1);
    }

    95% {
        transform: scaleX(1.03);
    }
}

@keyframes barMicroPulse {

    0%,
    100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(1.02);
    }
}

.portfolio-footer {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 7px;
    color: rgba(255, 255, 255, 0.2);
    text-align: center;
    letter-spacing: 0.05em;
    padding-bottom: 2px;
}

/* --- STEP 4: Direct to Telegram (Chat Mockup) --- */
.infographic-telegram {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.phone-frame {
    width: 180px;
    height: 180px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Telegram Typing Indicator */
.tg-typing {
    display: none;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    margin-top: 4px;
}

.tg-typing.active {
    display: flex;
}

.tg-typing span {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: tgTyping 1.4s infinite ease-in-out;
}

.tg-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.tg-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes tgTyping {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

.sparkline-dot {
    transition: transform 0.2s ease;
}

.sparkline-dot.pulse {
    animation: sparkPulse 2s infinite ease-in-out;
}

@keyframes sparkPulse {

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

    50% {
        transform: scale(1.8);
        opacity: 1;
        filter: brightness(1.5);
    }
}

.tg-header {
    height: 32px;
    background: rgba(74, 240, 255, 0.08);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.tg-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand-gradient);
    position: relative;
}

.tg-noti-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 5px;
    height: 5px;
    background: #ef4444;
    border-radius: 50%;
    border: 1px solid #111118;
    opacity: 0;
    transform: scale(0.5);
    animation: notiFlash 10s infinite;
}

@keyframes notiFlash {

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

    90% {
        opacity: 1;
        transform: scale(1.3);
    }

    95% {
        opacity: 0;
        transform: scale(1);
    }
}

.tg-header-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bot-name {
    font-family: var(--font-heading);
    font-size: 8px;
    font-weight: 700;
    color: #fff;
}

.online-indicator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #22C55E;
    animation: onlinePulse 3s infinite ease-in-out;
}

@keyframes onlinePulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 2px #22C55E;
    }

    50% {
        opacity: 0.5;
        box-shadow: 0 0 6px #22C55E;
    }
}

.sparkline-dot {
    opacity: 0;
    offset-path: path("M0,8 L5,7 L10,8 L15,5 L20,6 L25,3 L30,2");
    offset-distance: 100%;
}

.start-anim .sparkline-dot {
    opacity: 1;
    animation: sparkPulse 3s infinite ease-in-out;
    animation-delay: 2s;
}

@keyframes sparkPulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.3);
        filter: brightness(1.5);
    }
}

.tg-body {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msg-bubble {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px 12px 12px 2px;
    padding: 10px;
    max-width: 90%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.start-anim .msg-bubble.main-msg {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.start-anim .msg-bubble.mini-msg {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}

.msg-title {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.msg-line {
    font-family: var(--font-mono);
    font-size: 8px;
    margin-bottom: 2px;
}

.msg-line.pos {
    color: #22C55E;
}

.msg-line.neg {
    color: #EF4444;
}

.msg-line.dim {
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
    font-size: 7px;
}

.dot-green {
    color: #22C55E;
}

.mini-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.perf-text {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #22C55E;
    font-weight: 700;
}

.mini-sparkline {
    width: 30px;
    height: 10px;
}

.mini-sparkline path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}

.start-anim .mini-sparkline path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: drawSparklineSimple 4s ease-in-out infinite;
}

@keyframes drawSparklineSimple {
    0% {
        stroke-dashoffset: 40;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    80% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 40;
        opacity: 0;
    }
}

.msg-timestamp {
    font-family: var(--font-mono);
    font-size: 6px;
    color: rgba(255, 255, 255, 0.15);
    margin-top: 2px;
    margin-left: 4px;
}

.proc-visual {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    background: rgba(17, 17, 24, 0.5);
}

.proc-label {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 400;
}

/* Scatter Dots */
.chaos .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-secondary);
    position: absolute;
}

.d1 {
    top: 20%;
    left: 30%;
}

.d2 {
    top: 60%;
    left: 20%;
    background: var(--c-pink) !important;
}

.d3 {
    top: 30%;
    left: 70%;
}

.d4 {
    top: 70%;
    left: 60%;
}

.d5 {
    top: 50%;
    left: 80%;
    background: var(--c-cyan) !important;
}

.d6 {
    top: 80%;
    left: 40%;
}

.d7 {
    top: 15%;
    left: 50%;
}

.d8 {
    top: 40%;
    left: 45%;
}

.filter-icon {
    width: 32px;
    height: 32px;
}

.signal-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-gradient);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

.proc-arrow {
    flex-grow: 1;
    max-width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    position: relative;
}

.process-desc {
    font-size: 16px;
    color: var(--text-primary);
    max-width: 600px;
    margin: 0 auto;
}

/* Section 6: Anti-positioning */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
}

.compare-col {
    padding: 40px;
}

.compare-col.col-bad {
    border: 1px solid rgba(239, 68, 68, 0.1);
    border-right: none;
    border-radius: 16px 0 0 16px;
    background: rgba(17, 17, 24, 0.2);
}

.col-bad .compare-header {
    color: rgba(239, 68, 68, 0.6);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 24px;
}

.col-bad .compare-list li {
    color: var(--text-tertiary);
    text-decoration: line-through;
    margin-bottom: 16px;
    position: relative;
    padding-left: 24px;
}

.col-bad .compare-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: rgba(239, 68, 68, 0.4);
    text-decoration: none;
}

.col-good .compare-header {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    margin-bottom: 24px;
}

.col-good .compare-list li {
    color: #fff;
    margin-bottom: 16px;
    position: relative;
    padding-left: 28px;
    font-weight: 500;
}

.col-good .compare-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--c-profit);
}

.compare-list {
    list-style: none;
}

/* Section 7: Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.t-quote {
    font-size: 15px;
    line-height: 1.6;
    color: #fff;
    font-style: italic;
    margin-bottom: 24px;
    position: relative;
}

.t-author {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}

.t-context {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Section 8: Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto 32px auto;
}

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

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

.pricing-card {
    display: flex;
    flex-direction: column;
}

.premium-card {
    border-color: transparent !important;
}

.premium-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: var(--brand-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.best-badge {
    position: absolute;
    top: 0;
    right: 24px;
    background: var(--brand-gradient);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 0 0 8px 8px;
    font-weight: 500;
}

.tier-name {
    font-size: 28px;
    color: #fff;
    margin-bottom: 32px;
}

.tier-features {
    list-style: none;
    flex-grow: 1;
}

.tier-features li {
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding-left: 24px;
    position: relative;
    font-size: 15px;
}

.tier-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--text-tertiary);
}

.pricing-micro {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Section 9: Courses */
.courses-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.course-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.course-icon {
    font-size: 32px;
}

.course-title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 4px;
}

.course-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.course-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Section 10: FAQ */
.section-faq {
    position: relative;
    background: radial-gradient(ellipse at 50% 100%, rgba(88, 28, 135, 0.08) 0%, transparent 70%);
    overflow: hidden;
}

.faq-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.faq-left {
    grid-column: 1;
    grid-row: 1;
}

.faq-left .section-label {
    margin-bottom: 16px;
    display: block;
}

.faq-left .section-title {
    margin-bottom: 40px;
    text-align: left;
    font-size: clamp(32px, 4vw, 40px);
}

.faq-support-card-wrapper {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(236, 72, 153, 0.4));
    padding: 1px;
    border-radius: 17px;
    display: flex;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
}

.faq-support-card {
    border: none;
    border-radius: 16px;
    padding: 28px;
    background: #0a0a0f;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.faq-support-content h3 {
    font-size: 16px;
    color: #fff;
    margin-bottom: 4px;
    font-weight: 600;
}

.faq-support-content p {
    font-size: 13px;
    color: var(--text-tertiary);
}

.faq-support-btn {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.faq-support-btn:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.faq-list {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / span 2;
}

.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 0 24px;
    margin-bottom: 8px;
    transition: border-color 0.3s ease;
}

.faq-item.active {
    border-color: rgba(167, 139, 250, 0.3);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s;
}

.faq-icon {
    font-size: 20px;
    color: #6b7280;
    transition: transform 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding-top: 12px;
    padding-bottom: 24px;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.7;
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-item.active .faq-icon {
    transform: rotate(90deg);
    color: #a78bfa;
}

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

    .faq-left .section-title {
        text-align: center;
    }

    .faq-left .section-label {
        text-align: center;
    }

    .faq-support-card-wrapper {
        grid-column: 1;
        grid-row: auto;
        align-self: stretch;
        margin-top: 20px;
    }

    .faq-support-card {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .faq-left,
    .faq-list {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Section 11: Final CTA */
.final-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cta-title {
    font-size: clamp(40px, 5vw, 64px);
    color: #fff;
    margin-bottom: 40px;
}

.cta-micro {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 16px;
}


/* Metrics Bar Section */
.section-metrics {
    position: relative;
    padding: 64px 0;
    overflow: hidden;
}

.metrics-divider {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
}

.metrics-divider.top {
    top: 0;
}

.metrics-divider.bottom {
    bottom: 0;
}

.metrics-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.metrics-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1100px;
}

.metric-item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.metric-number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.1;
    white-space: nowrap;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Specific Stat Gradients */
.stat-1 {
    background: linear-gradient(90deg, #6B8FFF, #8B6CF6, #A855F7);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-2 {
    background: linear-gradient(90deg, #9B5CF6, #B44EF7, #C850E8);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-3 {
    background: linear-gradient(90deg, #C050E0, #D9569A, #F07840, #F5B830);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-4 {
    background: linear-gradient(90deg, #F09070, #F07845, #E86835);
    -webkit-background-clip: text;
    background-clip: text;
}

.metric-label {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(240, 237, 232, 0.35);
    line-height: 1.5;
    max-width: 180px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease-out;
}

.metric-item.is-visible .metric-label {
    opacity: 1;
    transform: translateY(0);
}

.metric-sep {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* Count-up specific */
.anim-scale {
    display: inline-block;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.start-anim .anim-scale {
    opacity: 1;
    transform: scale(1);
}

/* Mobile Responsiveness Overrides for Metrics */
@media (max-width: 1024px) {
    .metric-number {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .metrics-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px 0;
    }

    .metric-sep {
        display: none;
    }

    .metric-number {
        font-size: 28px;
    }

    .metric-item {
        position: relative;
    }

    /* Horizontal divider for mobile 2x2 */
    .section-metrics::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 10%;
        right: 10%;
        height: 1px;
        background: rgba(255, 255, 255, 0.06);
    }
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .how-pipeline {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        padding: 0 40px;
    }

    .step-card {
        width: 100%;
    }

    .step-connector {
        display: none;
    }

    .featured-row {
        flex-direction: column;
        gap: 24px;
    }

    .compact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .how-pipeline {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
        gap: 0;
        padding: 0 16px;
    }

    /* Section Header: Tighter on mobile */
    .how-it-works-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .how-it-works-section .section-header {
        margin-bottom: 32px;
        padding-top: 0;
    }

    .how-it-works-section .section-title {
        font-size: 28px;
        margin-bottom: 12px;
    }

    /* Always-on glowing borders for step cards on mobile */
    .step-card {
        border-color: rgba(var(--accent-rgb), 0.3);
        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15);
        transform: none;
        padding: 20px 16px 24px !important;
    }

    .infographic-area {
        height: 180px !important;
        overflow: hidden;
    }

    /* Internal card spacing */
    .step-num {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .step-title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .step-desc {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    /* Card 3 Specific: Bars longer and shifted */
    #step-3 .infographic-portfolio {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        column-gap: 20px;
        /* Reduced gap to move them closer */
        padding: 10px !important;
        width: 100%;
    }

    #step-3 .infographic-area {
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #step-3 .allocation-list {
        max-width: 160px;
        /* Longer bars */
        flex: 1;
    }

    #step-3 .portfolio-left {
        flex: 0 0 auto !important;
        margin-right: 10px;
        /* Push donut left slightly */
    }

    #step-3 .portfolio-right {
        flex: 1 !important;
        max-width: 180px;
    }

    #step-3 .portfolio-footer {
        text-align: center;
        margin-top: 12px;
        width: 100%;
    }

    /* Card 4 Specific: Expand chat mockup */
    #step-4 .phone-frame {
        width: 230px !important;
        height: 180px !important;
    }

    /* Each card keeps its accent color (odd children = cards, even = connectors) */
    .step-card:nth-child(1) {
        --accent-rgb: 74, 240, 255;
    }

    .step-card:nth-child(3) {
        --accent-rgb: 168, 85, 247;
    }

    .step-card:nth-child(5) {
        --accent-rgb: 236, 72, 153;
    }

    .step-card:nth-child(7) {
        --accent-rgb: 249, 115, 22;
    }

    /* Connector: tightened for mobile */
    .step-connector {
        display: block;
        width: 2px;
        height: 32px;
        margin: 8px auto !important;
        position: relative;
        opacity: 1;
        animation: none;
        border-radius: 2px;
    }

    /* Vertical pulse animation — mimics the desktop glow rhythm */
    @keyframes connectorPulseVertical {

        0%,
        100% {
            opacity: 0.5;
        }

        50% {
            opacity: 1;
        }
    }

    /* Colored gradient lines — vertical direction */
    .conn-1-2 {
        background: linear-gradient(to bottom, var(--c-cyan), var(--c-purple));
        box-shadow: 0 0 8px rgba(74, 240, 255, 0.6);
    }

    .conn-2-3 {
        background: linear-gradient(to bottom, var(--c-purple), var(--c-pink));
        box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
    }

    .conn-3-4 {
        background: linear-gradient(to bottom, var(--c-pink), var(--c-orange));
        box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
    }

    /* Hide dot-flow on mobile — simple line looks cleaner */
    .dot-flow {
        display: none;
    }


    /* AI Portfolios Section - Mobile Only (< 768px) */
    .portfolio-grid,
    .featured-row,
    .compact-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
    }

    /* "Show all" logic */
    .portfolio-card.mobile-hidden {
        display: none !important;
    }

    .mobile-toggle-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 24px 0 16px;
    }

    /* Animation for revealed cards */
    .mobile-visible-anim {
        display: flex !important;
        animation: cardAppear 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        opacity: 0;
    }

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

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

    /* Featured Cards Mobile Style */
    .featured-card {
        padding: 0 !important;
        /* Move padding to card-inner */
        width: 100% !important;
        min-height: auto !important;
    }

    .featured-card .card-inner {
        padding: 20px !important;
    }

    .featured-card .card-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .featured-card .card-left {
        width: 100%;
    }

    .featured-card .p-title {
        font-size: 24px;
        margin-bottom: 12px;
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        display: inline-block;
    }

    #p-anti-inflation .p-title {
        background: linear-gradient(90deg, #4AF0FF, #6366F1);
        -webkit-background-clip: text;
        background-clip: text;
    }

    #p-ai-software .p-title {
        background: linear-gradient(90deg, #A855F7, #EC4899);
        -webkit-background-clip: text;
        background-clip: text;
    }

    .featured-card .card-right {
        margin-top: 24px;
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .featured-sparkline {
        width: calc(100% + 40px) !important;
        height: 120px !important;
        margin-left: -20px;
        margin-right: -20px;
        overflow: visible;
    }

    .featured-sparkline svg {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

    /* Compact Cards Mobile Style */
    .compact-card {
        width: 100% !important;
        min-height: 0;
    }

    .compact-card .card-inner {
        padding: 16px;
    }

    .compact-card .c-performance-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
        margin-bottom: 8px;
    }

    .compact-card .c-sparkline {
        width: 140px !important;
        /* Fixed moderate width */
        height: 50px !important;
        /* Slightly taller (was 32px) */
        display: block !important;
        overflow: visible;
        margin-left: auto;
    }

    .compact-card .p-performance {
        font-size: 13px !important;
        flex-shrink: 0;
    }

    .social-proof-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
        padding: 24px 0;
        justify-content: center;
    }

    .proof-divider {
        display: none;
    }

    .proof-item {
        font-size: 10px;
        text-align: center;
        width: 100%;
    }

    .hero-title {
        font-size: clamp(32px, 8vw, 42px);
    }

    .compare-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .compare-col {
        padding: 24px;
        border-radius: 16px;
    }

    .compare-col.col-bad {
        border-right: 1px solid rgba(239, 68, 68, 0.1);
    }

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

    .pricing-grid,
    .courses-grid {
        grid-template-columns: 1fr;
    }
}

/* Accessibility: Support for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .dot-flow .dot,
    .start-anim .status-circle.bull,
    .momentum-bar-fill::after,
    .start-anim .risk-bar.low.active,
    .start-anim .lane-dots.input .dot,
    .start-anim .lane-dots .dot.pulse,
    .start-anim .donut-svg,
    .start-anim .alloc-bar,
    .online-indicator,
    .line-dot,
    .sparkline-dot,
    .start-anim .table-row,
    .start-anim .table-row .change,
    .step-connector,
    .signal-dot,
    .tg-noti-dot,
    .step-card,
    .infographic-area {
        animation: none !important;
        transition: none !important;
        filter: none !important;
        transform: none !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   FEATURES TABS SECTION
   ========================================================= */

.features-section {
    position: relative;
    padding: 100px 0;
    background-color: #08080C;
    overflow: hidden;
}

.features-bg-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.07) 0%, transparent 65%);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

.ftabs-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* ── Tab Bar ── */
.ftabs-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ftabs-wrap::-webkit-scrollbar {
    display: none;
}

.ftabs-bar {
    display: inline-flex;
    gap: 4px;
    background: #0f0f1a;
    border: 1px solid #1a1a2e;
    border-radius: 50px;
    padding: 4px;
    flex-shrink: 0;
}

.ftab {
    padding: 10px 22px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}

.ftab:hover:not(.active) {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
}

.ftab.active {
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    color: #fff;
    font-weight: 600;
}

/* ── Panel Container ── */
.ftab-panels {
    margin-top: 24px;
}

/* ── Individual Panel ── */
.ftab-panel {
    display: none;
}

.ftab-panel.active {
    display: block;
}

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

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

.ftab-panel.entering {
    animation: ftab-fade-in 0.25s ease forwards;
}

/* ── Panel Card Shell ── */
.ftab-content {
    background: #0f0f1a;
    border: 1px solid #1a1a2e;
    border-radius: 20px;
    padding: 48px;
    min-height: 420px;
    display: flex;
    gap: 48px;
    align-items: center;
}

/* ── Left: Text ── */
.ftab-left {
    flex: 0 0 45%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ftab-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.ftab-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 14px;
}

.ftab-desc {
    font-size: 16px;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 380px;
    margin-bottom: 24px;
}

.ftab-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.ftab-bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.4;
}

.fcheck {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.ftab-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ftag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    color: #64748b;
    background: #1a1a2e;
    padding: 4px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Right: Telegram Mockup ── */
.ftab-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tgf-frame {
    width: 280px;
    background: #1a1a1a;
    border-radius: 24px;
    border: 2px solid #2a2a3a;
    padding: 12px;
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.15);
}

.tgf-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 10px;
}

.tgf-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.tgf-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tgf-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.tgf-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #64748b;
    text-transform: lowercase;
    letter-spacing: 0.05em;
}

.tgf-status {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.tgf-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
}

.tgf-online {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #22C55E;
}

.tgf-chat {
    background: #0d0d14;
    border-radius: 12px;
    padding: 12px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Chat Bubbles ── */
.tgf-msg {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 12px;
    max-width: 90%;
}

.tgf-msg.user {
    align-self: flex-end;
    background: #7c3aed;
    color: #fff;
    border-radius: 12px 12px 2px 12px;
}

.tgf-msg.bot {
    align-self: flex-start;
    background: #1e1e2e;
    color: rgba(240, 237, 232, 0.85);
    border-radius: 12px 12px 12px 2px;
    width: 100%;
}

/* ── Stock list (Tab 1) ── */
.tgf-line {
    font-size: 11px;
    color: rgba(240, 237, 232, 0.65);
    margin-bottom: 6px;
}

.tgf-stocks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.tgf-srow {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tgf-srow:last-child {
    border-bottom: none;
}

.tgf-tick {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
    min-width: 36px;
}

.tgf-co {
    font-size: 9px;
    color: rgba(240, 237, 232, 0.3);
    flex: 1;
}

.tgf-score-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tgf-sdot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tgf-sdot.green {
    background: #22C55E;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.7);
}

.tgf-sdot.yellow {
    background: #F59E0B;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.7);
}

.tgf-sc {
    font-size: 10px;
    font-weight: 600;
}

.tgf-sc.green {
    color: #22C55E;
}

.tgf-sc.yellow {
    color: #F59E0B;
}

.tgf-hint {
    font-size: 10px;
    color: rgba(240, 237, 232, 0.3);
    margin-top: 4px;
}

/* ── News list (Tab 2) ── */
.tgf-news {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.tgf-nrow {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 10px;
    color: rgba(240, 237, 232, 0.6);
    line-height: 1.4;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tgf-nrow:last-child {
    border-bottom: none;
}

.tgf-ndot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

.tgf-ndot.green {
    background: #22C55E;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.7);
}

.tgf-ndot.red {
    background: #EF4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.7);
}

.tgf-change {
    font-size: 10px;
    color: rgba(240, 237, 232, 0.5);
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tgf-pos {
    color: #22C55E;
    font-weight: 600;
}

/* ── Keyboard buttons (Tab 3) ── */
.tgf-kbd {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.tgf-kbtn {
    flex: 1;
    padding: 7px 4px;
    border-radius: 8px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(240, 237, 232, 0.45);
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    cursor: default;
}

.tgf-kbtn.sel {
    background: #7c3aed;
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}

/* ── Courses (Tab 4) ── */
.tgf-crs {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tgf-crs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(240, 237, 232, 0.75);
    gap: 6px;
}

.tgf-free {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    color: #22C55E;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.tgf-pbar {
    height: 4px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 99px;
    overflow: hidden;
}

.tgf-pfill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #06b6d4);
    border-radius: 99px;
}

.tgf-plbl {
    font-size: 9px;
    color: rgba(240, 237, 232, 0.35);
}

.tgf-plbl.muted {
    color: rgba(240, 237, 232, 0.18);
}

.tgf-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 0;
}

/* ── DARK REPORT CARD (Tab 2) ── */
.dark-report-card {
    background: #0a0a12;
    border: 1px solid #1a1a2e;
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.drc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drc-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drc-icon {
    font-size: 18px;
}

.drc-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
}

.drc-subtitle {
    color: #64748b;
    font-size: 12px;
    margin-top: 2px;
}

.drc-header-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.drc-badge {
    border: 1px solid #1a1a2e;
    color: #94a3b8;
    font-size: 10px;
    font-family: var(--font-mono);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.drc-divider {
    height: 1px;
    background: #1a1a2e;
    margin: 14px 0;
}

.drc-snapshot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.drc-label {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.drc-label.uppercase {
    text-transform: uppercase;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-10 {
    margin-bottom: 10px;
}

.drc-value {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    margin-top: 4px;
}

.drc-value.green {
    color: #22c55e;
}

.drc-movers {
    text-align: left;
}

.drc-mover-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.drc-ticker.drc-mono {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: #ffffff;
}

.drc-change {
    font-size: 13px;
    font-weight: 700;
}

.drc-change.green {
    color: #22c55e;
}

.drc-change.red {
    color: #ef4444;
}

.drc-summary {
    background: #080810;
    border: 1px solid #1a1a2e;
    border-radius: 8px;
    padding: 14px;
    border-left: 3px solid #7c3aed;
    text-align: left;
}

.drc-summary-text {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 8px;
}

.drc-summary-text b {
    color: #ffffff;
}

.drc-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.drc-footer-text {
    color: #64748b;
    font-size: 11px;
}

/* ── DARK COURSE CARDS (Tab 4) ── */
.course-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.course-dark-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #1a1a2e;
    text-align: left;
    background: #0f0f1a;
}

.course-dark-card.ai-card {
    border-color: #2d1b69;
}

.cdc-header {
    padding: 18px 20px 14px;
}

.course-dark-card.ai-card .cdc-header {
    background: linear-gradient(135deg, #1a0a3a 0%, #0d0d1a 100%);
}

.course-dark-card.basics-card .cdc-header {
    background: linear-gradient(135deg, #0a2a1a 0%, #0d0d1a 100%);
}

.cdc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cdc-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cdc-emoji {
    font-size: 20px;
}

.cdc-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
}

.cdc-badge {
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 20px;
}

.cdc-badge.purple {
    background: #7c3aed;
}

.cdc-badge.green {
    background: #059669;
}

.cdc-meta {
    color: #94a3b8;
    font-size: 12px;
    margin-top: 6px;
}

.cdc-body {
    padding: 14px 20px;
    background: #0f0f1a;
}

.cdc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.cdc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cdc-dot.purple-cyan {
    background: linear-gradient(#7c3aed, #06b6d4);
}

.cdc-dot.green-cyan {
    background: linear-gradient(#059669, #06b6d4);
}

.cdc-text {
    color: #94a3b8;
    font-size: 12px;
}

/* ── DARK AI SEARCH (Tab 1) ── */
.ai-search-card {
    background: #0a0a12;
    border: 1px solid #1a1a2e;
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.asc-search-bar {
    background: #080810;
    border: 1px solid #7c3aed;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.asc-icon {
    font-size: 14px;
    opacity: 0.6;
}

.asc-text {
    color: #94a3b8;
    font-size: 13px;
    flex-grow: 1;
}

.asc-cursor {
    color: #7c3aed;
    font-weight: 700;
    animation: asc-blink 1s step-end infinite;
}

@keyframes asc-blink {
    50% {
        opacity: 0;
    }
}

.asc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #1a1a2e;
}

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

.asc-ticker {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: #ffffff;
}

.asc-name {
    color: #64748b;
    font-size: 12px;
    margin-left: 8px;
}

.asc-score-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.asc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

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

.asc-dot.yellow {
    background: #eab308;
}

.asc-score {
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
}

.asc-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.asc-footer-text {
    color: #64748b;
    font-size: 11px;
}

.asc-dot-grad {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(#7c3aed, #06b6d4);
    margin-right: 6px;
}

/* ── DARK PORTFOLIO PICKER (Tab 3) ── */
.portfolio-picker-card {
    background: #0a0a12;
    border: 1px solid #1a1a2e;
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.ppc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ppc-badge {
    border: 1px solid #1a1a2e;
    color: #94a3b8;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
}

.ppc-progress-track {
    width: 100%;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}

.ppc-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #7c3aed, #06b6d4);
    border-radius: 2px;
}

.ppc-question-box {
    background: #080810;
    border: 1px solid #1a1a2e;
    border-radius: 10px;
    padding: 16px;
}

.ppc-question {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
}

.ppc-answers {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.ppc-answer {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    background: #0f0f1a;
    border: 1px solid #1a1a2e;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

.ppc-answer.selected {
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    color: #ffffff;
    font-weight: 700;
    border: none;
}

.ppc-result-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #080810;
    border: 1px solid #1a1a2e;
    border-radius: 10px;
    padding: 14px;
}

.ppc-circle-grad {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(#7c3aed, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ppc-shield {
    font-size: 18px;
}

.ppc-result-info {
    display: flex;
    flex-direction: column;
}

.ppc-suggested-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    margin: 2px 0;
}

.ppc-suggested-meta {
    color: #94a3b8;
    font-size: 11px;
}

.ppc-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.ppc-footer-right.green {
    color: #22c55e;
}

/* ━━━ RESPONSIVE ━━━ */

@media (max-width: 900px) {
    .ftab-content {
        flex-direction: column;
        padding: 32px;
        gap: 32px;
        min-height: unset;
    }

    .ftab-left {
        flex: none;
        width: 100%;
    }

    .ftab-right {
        width: 100%;
    }

    .ftab-desc {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .features-section {
        padding: 60px 0;
    }

    .ftab-content {
        padding: 24px;
        gap: 24px;
    }

    .ftab-title {
        font-size: 22px;
    }

    .ftab-desc {
        font-size: 14px;
    }

    .tgf-frame {
        width: 100%;
        max-width: 280px;
    }
}

/* --- Live Simulation Extras --- */
.donut-segment {
    transition: stroke-width 0.5s ease-in-out, filter 0.5s ease-in-out !important;
}

.donut-segment.pulse {
    stroke-width: 14 !important;
    filter: brightness(1.2) !important;
}

/* --- Final Premium CTA Section --- */
.premium-cta-section {
    position: relative;
    padding: 100px 20px;
    background-color: #08080f;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.premium-cta-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(ellipse 900px 500px at 50% 50%,
            rgba(124, 58, 237, 0.12) 0%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.cta-container {
    position: relative;
    z-index: 1;
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.cta-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.cta-heading {
    color: #ffffff;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0;
    letter-spacing: -0.02em;
}

.cta-gradient-text {
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.cta-subheading {
    font-size: 16px;
    color: #94a3b8;
    max-width: none;
    margin: 16px auto 40px auto;
    line-height: 1.6;
}

.premium-card {
    background: linear-gradient(135deg, #0f0b1e 0%, #130d24 100%);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 24px;
    padding: 40px 48px;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.1),
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(139, 92, 246, 0.08) inset;
    margin: 0 auto 32px auto;
    max-width: 680px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.card-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.card-badge {
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-block;
}

.card-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.card-header-right {
    display: flex;
    align-items: center;
}

.card-social-proof {
    font-size: 13px;
    color: #6b7280;
}

.features-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 24px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.check-square {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #a78bfa;
    font-size: 12px;
    font-weight: 800;
}

.feature-text {
    color: white;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    padding-top: 2px;
}

.card-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin: 28px 0;
}

.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #ec4899, #06b6d4);
    background-size: 200% 200%;
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    box-shadow: 0 8px 40px rgba(124, 58, 237, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 50px rgba(124, 58, 237, 0.5);
    animation: buttonShimmer 2s infinite linear;
}

.cta-tg-icon {
    width: 20px;
    height: 20px;
    display: block;
}

@keyframes buttonShimmer {
    0% {
        background-position: 0% 50%
    }

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

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

.cta-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #4b5563;
    margin-top: 24px;
}

.trust-icon {
    font-size: 14px;
}

.trust-dot {
    margin: 0 4px;
}

@media (max-width: 768px) {
    .premium-cta-section {
        padding: 60px 20px;
    }

    .cta-heading {
        font-size: 36px;
    }

    .cta-subheading {
        font-size: 16px;
    }

    .premium-card {
        padding: 24px 20px;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .card-social-proof {
        display: none;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .cta-button {
        height: 52px;
    }

    .premium-cta-bg-glow {
        width: 100%;
        height: 400px;
    }
}

/* Testimonials Section Styles */
/* Testimonials Carousel Styles */
.section-testimonials {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.testimonials-carousel-wrapper {
    position: relative;
    margin-top: 60px;
    width: 100%;
}



.testimonials-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 0 30px 0;
    cursor: grab;
    user-select: none;
    /* prevent text selection during drag */
    position: relative;

    /* Full bleed logic */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    /* Reliable padding + snap alignment */
    padding-left: max(40px, calc((100vw - 1200px) / 2 + 40px));
    padding-right: max(40px, calc((100vw - 1200px) / 2 + 40px));
    scroll-padding-left: max(40px, calc((100vw - 1200px) / 2 + 40px));
}

@media (max-width: 1248px) {
    .testimonials-carousel {
        padding-left: 40px;
        padding-right: 40px;
        scroll-padding-left: 40px;
    }
}


.testimonials-carousel::-webkit-scrollbar {
    display: none;
}

.testimonials-carousel.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.testimonial-card {
    background: #111118;
    border: 1px solid #1E1E2A;
    border-radius: 20px;
    padding: 32px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    flex: 0 0 380px;
    min-height: 210px;
    /* equalises card height across different quote lengths */
    scroll-snap-align: start;
}

.t-quote {
    color: #e2e8f0;
    font-size: 15px;
    line-height: 1.6;
    position: relative;
    padding-left: 16px;
    border-left: 2px solid rgba(255, 255, 255, 0.05);
    font-style: normal;
    font-weight: 400;
    /* Clamp long quotes to 5 lines */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.t-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.t-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.t-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}

.t-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grad-purple {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.grad-cyan {
    background: linear-gradient(135deg, #06b6d4, #7c3aed);
}

.grad-indigo {
    background: linear-gradient(135deg, #6366F1, #A855F7);
}

.grad-orange {
    background: linear-gradient(135deg, #F97316, #F59E0B);
}

.grad-cyan-blue {
    background: linear-gradient(135deg, #4AF0FF, #3B82F6);
}

.t-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.t-username {
    color: white;
    font-weight: 600;
    font-size: 16px;
    font-family: var(--font-heading);
}

.t-desc {
    color: rgba(240, 237, 232, 0.4);
    font-size: 13px;
    font-family: var(--font-mono);
}

.t-quote {
    color: #e2e8f0;
    font-size: 15px;
    line-height: 1.6;
    position: relative;
    padding-left: 16px;
    border-left: 2px solid rgba(255, 255, 255, 0.05);
    font-style: normal;
    font-weight: 400;
}

/* Carousel Navigation Footer (Arrows + Dots) */
.carousel-controls-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 20px;
}

.carousel-control {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    padding: 0;
}

.carousel-control svg {
    width: 20px;
    height: 20px;
}

.carousel-control:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.05);
}

.carousel-control.prev,
.carousel-control.next {
    position: static;
    transform: none;
}

.carousel-control:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .carousel-control {
        display: none;
        /* Hide arrows on small mobile */
    }
}

/* ── Progress bar indicator ── */
.carousel-progress-track {
    flex: 1;
    max-width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}

.carousel-progress-fill {
    height: 100%;
    width: 20%;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    border-radius: 99px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
}

/* Hide old dots */
.carousel-nav {
    display: none;
}

/* Remove old .carousel-control.prev/.next positioning that conflicts */
.carousel-control.prev,
.carousel-control.next {
    position: static;
    transform: none;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 85vw;
    }

    .carousel-progress-track {
        max-width: 140px;
    }
}

/* MOCKUP CAPTION */
.mockup-caption {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: rgba(226, 232, 240, 0.7);
    font-family: var(--font-mono);
}

/* LIVE BADGE */
.badge-live {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    margin-left: 8px;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.3);
    animation: pulse-live 2s infinite ease-in-out;
}

@keyframes pulse-live {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* PERFORMANCE META & TOOLTIP */
.p-perf-meta {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.7);
    margin-top: 6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    cursor: help;
    font-family: var(--font-mono);
}

.perf-tooltip-icon {
    font-size: 13px;
    color: rgba(226, 232, 240, 0.9);
}

.perf-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 240px;
    background: #1A1A24;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #F8FAFC;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    margin-bottom: 8px;
    font-family: var(--font-main);
}

.p-perf-meta:hover .perf-tooltip {
    opacity: 1;
    visibility: visible;
}


/* MOCKUP CAPTION */
.mockup-caption {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: rgba(226, 232, 240, 0.7);
    font-family: var(--font-mono);
}

/* LIVE BADGE */
.badge-live {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    margin-left: 8px;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.3);
    animation: pulse-live 2s infinite ease-in-out;
}

@keyframes pulse-live {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* PERFORMANCE META & TOOLTIP */
.p-perf-meta {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.7);
    margin-top: 6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    cursor: help;
    font-family: var(--font-mono);
}

.perf-tooltip-icon {
    font-size: 13px;
    color: rgba(226, 232, 240, 0.9);
}

.perf-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 240px;
    background: #1A1A24;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #F8FAFC;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    margin-bottom: 8px;
    font-family: var(--font-main);
}

.p-perf-meta:hover .perf-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ========================================= */
/* FOOTER                                    */
/* ========================================= */
.site-footer {
    background-color: #0a0a0f;
    padding-top: 64px;
    padding-bottom: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 10;
}

.footer-grid {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-bottom: 64px;
}

.footer-brand-col {
    max-width: 300px;
}

.footer-tagline {
    color: rgba(226, 232, 240, 0.85);
    font-size: 15px;
    margin-top: 16px;
    margin-bottom: 12px;
}

.footer-disclaimer {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

.footer-links-wrapper {
    display: flex;
    gap: 80px;
    justify-content: center;
}

.footer-col-title {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px;
    color: #4b5563;
    margin-bottom: 24px;
    font-weight: 600;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: #9ca3af;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 32px;
    color: #6b7280;
    font-size: 13px;
    display: flex;
    justify-content: center;
}

/* ABOUT PAGE STYLES */
.about-page {
    background: #0a0a0f;
}

.about-header {
    padding: 120px 0 60px;
    text-align: center;
}

.back-link {
    display: inline-block;
    color: #9ca3af;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 24px;
    transition: color 0.2s;
}

.back-link:hover {
    color: #ffffff;
}

.about-title {
    font-size: 48px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.about-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 120px;
    color: #cbd5e1;
    font-size: 17px;
    line-height: 1.8;
}

.about-content p {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 48px;
    }

    .footer-links-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }

    .footer-brand-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-links-contact a {
        justify-content: center;
    }
}

/* ========================================= */
/* CONTACT ICONS                             */
/* ========================================= */
.footer-links-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.footer-links-contact a:hover .footer-contact-icon {
    opacity: 1;
}

/* ========================================= */
/* MODALS                                    */
/* ========================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 10, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.modal-content {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 48px;
    max-width: 680px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.3s ease;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

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

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    font-size: 22px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    line-height: 1;
    padding: 0;
}

.modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.modal-title {
    font-size: 28px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    padding-right: 40px;
}

.modal-body {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.8;
}

.modal-body p {
    margin-bottom: 18px;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-body .accent-link {
    color: #a78bfa;
    text-decoration: none;
    transition: color 0.2s;
}

.modal-body .accent-link:hover {
    color: #c4b5fd;
}

/* ========================================= */
/* COOKIE BANNER                             */
/* ========================================= */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    right: 24px;
    max-width: 420px;
    background: rgba(15, 15, 20, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    transform: translateY(120%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner.active {
    transform: translateY(0);
}

.cookie-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.cookie-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.cookie-icon svg {
    width: 20px;
    height: 20px;
    color: #818cf8;
}

.cookie-text {
    flex: 1;
}

.cookie-text h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.cookie-text p {
    color: #94a3b8;
    font-size: 13.5px;
    line-height: 1.5;
}

.cookie-actions {
    display: flex;
    gap: 12px;
}

.btn-cookie-accept {
    flex: 1;
    background: #fff;
    color: #000;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cookie-accept:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}

.btn-cookie-settings {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cookie-settings:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

@media (max-width: 640px) {
    .cookie-banner {
        left: 16px;
        right: 16px;
        bottom: 80px;
        /* Сдвинул выше, чтобы не перекрывать Sticky CTA на мобилках */
        padding: 20px;
        max-width: none;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .cookie-banner {
        max-width: 360px;
        bottom: 32px;
        left: 32px;
    }
}

/* ========================================= */
/* COMPACT CARD FONT FIX                     */
/* ========================================= */

/* Title: match featured-card p-title style */
.compact-card .c-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text-primary);
    margin-bottom: 4px;
}

/* Stats row: tighter, cleaner */
.compact-card .p-performance {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Sparkline: fill available space instead of fixed 90px */
.compact-card .c-performance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.compact-card .c-sparkline {
    flex: 1;
    width: auto !important;
    min-width: 60px;
    max-width: 140px;
    height: 32px;
}

/* Description: match large card text */
.compact-card .c-desc {
    font-size: 13px;
    color: rgba(240, 237, 232, 0.75);
    line-height: 1.5;
    margin-bottom: 10px;
}

/* ========================================= */
/* COMPARISON SECTION                        */
/* ========================================= */
.section-comparison {
    background-color: #0d0b1a;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Override title font for comparison section - needs to fit 3 short lines */
.section-comparison .section-title {
    font-size: clamp(22px, 4vw, 48px);
    line-height: 1.25;
    margin-bottom: 20px;
}

.muted-not {
    color: #6b7280;
    font-weight: 400;
}

.comp-subtitle {
    max-width: 600px;
    margin: 0 auto 60px;
    font-size: 16px;
    line-height: 1.6;
}

.comp-table-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    background: #08080c;
    overflow: hidden;
}

.comp-table {
    display: flex;
    flex-direction: column;
}

.comp-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.comp-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.comp-row:not(.comp-header-row):hover {
    background: rgba(255, 255, 255, 0.03);
}

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

.comp-cell {
    padding: 24px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}

.comp-ft-label {
    text-align: left;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    padding-left: 32px;
}

.comp-header-row .comp-cell {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 32px;
    padding-bottom: 32px;
}

.comp-col-denoise {
    background: rgba(139, 92, 246, 0.04);
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comp-header-row .comp-col-denoise {
    background: rgba(139, 92, 246, 0.07);
}

.denoise-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    padding: 8px 20px;
    border-radius: 30px;
    position: relative;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3);
    letter-spacing: normal;
    text-transform: none;
}

/* Icons styling */
.icon-x {
    color: #4b5563;
    font-weight: bold;
    font-size: 16px;
}

.icon-partial {
    color: #d97706;
    font-weight: bold;
    font-size: 18px;
}

.icon-check {
    color: #22c55e;
    font-weight: 900;
    font-size: 18px;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.comp-bottom-note {
    text-align: center;
    color: #4b5563;
    font-size: 13px;
    margin-top: 40px;
    line-height: 1.6;
}

.comp-mobile-note {
    display: none;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 6px;
    font-weight: 400;
}

@media (max-width: 1100px) {
    .comp-row {
        grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
    }

    .comp-ft-label {
        padding-left: 24px;
        font-size: 13px;
    }
}

@media (max-width: 900px) {
    .section-comparison .section-title {
        font-size: clamp(26px, 5vw, 40px);
    }

    .comp-row {
        grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
    }

    .comp-ft-label {
        font-size: 13px;
        padding-left: 20px;
    }

    .comp-cell {
        padding: 16px 8px;
    }

    .denoise-badge {
        padding: 6px 14px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .section-comparison .section-title {
        font-size: clamp(24px, 4.5vw, 36px);
        margin-bottom: 24px;
    }

    .comp-subtitle {
        font-size: 14px;
        margin-bottom: 40px;
    }

    /* Hide ONLY Signal Groups (4th child), keep ETFs and Screeners */
    .comp-row>.comp-col-competitor:nth-child(4) {
        display: none;
    }

    /* Feature | ETFs | Screeners | DeNoise */
    .comp-row {
        grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    }

    .comp-header-row .comp-cell {
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 11px;
    }

    .comp-ft-label {
        padding-left: 16px;
        font-size: 14px;
    }

    .comp-col-denoise {
        padding: 0 12px;
    }
}

@media (max-width: 550px) {
    .section-comparison .section-title {
        font-size: clamp(20px, 6vw, 24px);
    }

    /* Hide Screeners (3rd child) as well, keep only ETFs */
    .comp-row>.comp-col-competitor:nth-child(3) {
        display: none;
    }

    /* Keep ETFs column visible */
    .comp-row>.comp-col-competitor:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Feature | ETFs | DeNoise — balance widths so Feature doesn't take 90% */
    .comp-row {
        grid-template-columns: 2fr 1fr 1.3fr;
    }

    .comp-cell {
        padding: 16px 8px;
    }

    .comp-header-row .comp-cell {
        font-size: 11px;
    }

    .comp-ft-label {
        padding-left: 12px;
        padding-right: 8px;
        font-size: 13px;
    }

    .denoise-badge {
        padding: 6px 14px;
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .section-comparison .section-title {
        font-size: 20px;
    }

    .comp-subtitle {
        font-size: 13px;
        margin-bottom: 24px;
        padding: 0 8px;
    }

    /* Feature | ETFs | DeNoise — tighter for very small screens */
    .comp-row {
        grid-template-columns: 2fr 0.8fr 1.2fr;
    }

    .comp-cell {
        padding: 12px 4px;
    }

    .comp-header-row .comp-cell {
        padding-top: 16px;
        padding-bottom: 16px;
        font-size: 10px;
    }

    .comp-ft-label {
        padding-left: 8px;
        padding-right: 4px;
        font-size: 12px;
    }

    .comp-col-denoise {
        padding: 0;
    }

    .denoise-badge {
        padding: 4px 10px;
        font-size: 11px;
    }

    .icon-check,
    .icon-x,
    .icon-partial {
        font-size: 14px;
    }
}

/* ========================================================================= */
/* PREMIUM CONSTANT UI POLISH ADDITIONS                                      */
/* ========================================================================= */

/* Radial heading glows */
.hero-content::before,
.how-it-works-section .section-header::before,
.section-portfolios .section-header-centered::before,
.features-section .section-header::before,
.section-testimonials .section-header-centered::before,
.faq-left::before,
.premium-cta-section .cta-content::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 200px;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

.how-it-works-section .section-header,
.section-portfolios .section-header-centered,
.features-section .section-header,
.section-testimonials .section-header-centered,
.faq-left,
.premium-cta-section .cta-content {
    position: relative;
}

/* Ensure text sits above the glow */
.hero-content>*,
.how-it-works-section .section-header>*,
.section-portfolios .section-header-centered>*,
.features-section .section-header>*,
.section-testimonials .section-header-centered>*,
.faq-left>*,
.premium-cta-section .cta-content>* {
    position: relative;
    z-index: 1;
}

/* Theme-specific glow colors */
.hero-content::before {
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.07) 0%, transparent 70%);
}

.how-it-works-section .section-header::before {
    background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
}

.section-portfolios .section-header-centered::before {
    background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.06) 0%, transparent 70%);
}

.features-section .section-header::before {
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.07) 0%, transparent 70%);
}

.section-testimonials .section-header-centered::before {
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
}

.faq-left::before {
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
}

.premium-cta-section .cta-content::before {
    background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
}

/* Comparison table DeNoise vertical accent glow */
.comparison-col.highlight {
    position: relative;
}

.comparison-col.highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(139, 92, 246, 0.05) 20%, rgba(139, 92, 246, 0.08) 50%, rgba(139, 92, 246, 0.05) 80%, transparent);
    pointer-events: none;
    z-index: 0;
}

.comparison-col.highlight>* {
    position: relative;
    z-index: 1;
}

/* ========================================================================= */
/* MOBILE STICKY BOTTOM CTA                                                  */
/* ========================================================================= */

.mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    background: rgba(8, 8, 12, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 90;
    transform: translateY(100%);
    /* Hidden by default */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: none;
    /* Desktop hidden */
}

.mobile-sticky-cta.visible {
    transform: translateY(0);
}

.mobile-sticky-cta .btn-gradient {
    width: 100%;
    text-align: center;
    padding: 14px;
    font-size: 16px;
    border-radius: 999px;
    display: block;
}

@media (max-width: 768px) {
    .mobile-sticky-cta {
        display: block;
    }

    /* Prevent mobile zoom-out glitch caused by absolute glows wider than the screen */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }

    .hero-content::before,
    .how-it-works-section .section-header::before,
    .section-portfolios .section-header-centered::before,
    .features-section .section-header::before,
    .section-testimonials .section-header-centered::before,
    .faq-left::before,
    .premium-cta-section .cta-content::before {
        max-width: 100%;
        width: 100%;
    }

    /* Adjust header horizontal margins for tight mobile screens */
    .header-inner {
        padding: 0 16px;
    }

    .brand-logo {
        font-size: 20px;
    }

    .header-inner .btn-sm {
        padding: 8px 14px;
        font-size: 13px;
    }

    .hero-content {
        padding: 0 16px;
    }

    .hero-section {
        min-height: 115vh;
        padding-bottom: 10vh;
    }

    .social-proof-bar {
        position: relative;
        margin-top: 0;
        border-top: 1px solid rgba(139, 92, 246, 0.2);
        border-bottom: none;
        background: rgba(10, 8, 20, 0.98);
        padding: 0;
    }

    /* Gradient bridge bleeding up into the canvas area */
    .social-proof-bar::before {
        content: "";
        position: absolute;
        top: -60px;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to bottom, transparent 0%, rgba(10, 8, 20, 0.95) 100%);
        pointer-events: none;
        z-index: 2;
    }

    /* 2×2 grid layout for the 4 stat items */
    .social-proof-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 0;
        padding: 0;
        overflow-x: visible;
    }

    /* Hide the old divider elements — grid handles spacing */
    .proof-divider {
        display: none;
    }

    /* Each cell */
    .proof-item {
        padding: 14px 8px;
        text-align: center;
        font-size: 10px;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.75);
        font-weight: 600;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        width: auto;
    }

    /* Remove right border from right column */
    .proof-item:nth-child(2n) {
        border-right: none;
    }

    /* Remove bottom border from last row */
    .proof-item:nth-child(3),
    .proof-item:nth-child(4) {
        border-bottom: none;
    }

    /* ========================================= */
    /* EVERY TOOL YOU NEED (TABS) MOBILE FIX     */
    /* ========================================= */

    .ftabs-wrap {
        justify-content: flex-start !important;
        margin-top: 32px !important;
        padding: 4px 0 16px !important;
        position: relative;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

    .ftabs-bar {
        padding: 4px 16px !important;
        gap: 8px !important;
        background: rgba(15, 15, 26, 0.7) !important;
        backdrop-filter: blur(10px);
        margin: 0 auto;
    }

    .ftab {
        padding: 8px 18px !important;
        font-size: 13px !important;
    }

    .ftab-panels {
        margin-top: 16px !important;
    }

    .ftab-content {
        flex-direction: column !important;
        padding: 32px 20px !important;
        gap: 32px !important;
        min-height: auto !important;
        text-align: center;
    }

    .ftab-left {
        flex: 1 !important;
        align-items: center !important;
        text-align: center;
    }

    .ftab-title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .ftab-desc {
        font-size: 15px !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    .ftab-bullets {
        align-items: flex-start;
        text-align: left;
        display: inline-flex;
        max-width: 290px;
        margin-bottom: 24px !important;
    }

    .ftab-right {
        width: 100% !important;
        display: flex;
        justify-content: center;
    }

    .tgf-frame {
        width: 100% !important;
        max-width: 300px !important;
        box-shadow: 0 10px 40px rgba(124, 58, 237, 0.15);
    }

    /* Vertical dot animation for step connectors on mobile */
    @keyframes flowDown {
        0% {
            top: 0%;
            opacity: 0;
        }

        20% {
            opacity: 0.9;
        }

        80% {
            opacity: 0.9;
        }

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