/* VisionPrompt Studio - Landing Page */
/* Optimized & Production Ready */

/* ============================================
   CSS VARIABLES
============================================ */
:root {
    /* Core Colors - Matching Tool UI */
    --bg-main: #0a0a0a;
    --bg-card: #141414;
    --bg-card-hover: #1a1a1a;
    --bg-darker: #000000;
    --bg-elevated: #1c1c1c;
    
    /* Accent Colors */
    --accent: #ffd93d;
    --yellow: #ffd93d;
    --accent-hover: #ffe066;
    --accent-glow: rgba(255, 217, 61, 0.3);
    --accent-subtle: rgba(255, 217, 61, 0.1);
    
    /* Text Colors */
    --text-main: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    --text-dark: #555555;
    
    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    --border-card: #222222;
    
    /* Metrics */
    --max-width: 1400px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-full: 100px;
    --nav-height: 70px;
    
    /* Fonts */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px var(--accent-glow);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

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

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   COOKIE BANNER (GDPR)
============================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 20px;
    z-index: 9999;
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cookie-content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.cookie-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    flex: 1;
    min-width: 250px;
}

.cookie-content a {
    color: var(--accent);
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 12px;
}

/* ============================================
   NAVIGATION
============================================ */
.vps-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(3, 3, 3, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    transition: var(--transition-normal);
}

.vps-nav.scrolled {
    background: rgba(3, 3, 3, 0.95);
    border-bottom-color: var(--accent-subtle);
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
}

.brand-icon {
    display: block;
    width: 34px;
    height: 26px;
    filter: drop-shadow(0 0 10px var(--accent-glow));
}

.brand-name {
    font-family: var(--font-display);
}

.nav-menu {
    display: flex;
    gap: 32px;
}

.nav-menu a {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
}

.nav-menu a:hover {
    color: var(--text-main);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: var(--transition-normal);
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.link-login {
    font-size: 0.9rem;
    color: var(--text-main);
    opacity: 0.8;
}

.link-login:hover {
    opacity: 1;
    color: var(--accent);
}

/* Mobile Nav Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-main);
    transition: var(--transition-fast);
}

/* ============================================
   BUTTONS
============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

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

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--accent);
    color: #000;
    padding: 12px 28px;
}

.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-glow);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    padding: 12px 28px;
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--text-main);
}

.btn-outline {
    background: transparent;
    color: var(--text-main);
    padding: 12px 28px;
    border: 1px solid var(--border);
}

.btn-outline:hover {
    background: var(--text-main);
    color: var(--bg-main);
}

.btn-sm {
    padding: 8px 18px;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 18px 40px;
    font-size: 1.1rem;
}

/* ============================================
   HERO SECTION
============================================ */
.vps-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding-top: var(--nav-height);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: url('gallery/images/futuristic-cityscape.webp') center/cover no-repeat;
    opacity: 0.4;
    z-index: 0;
    will-change: transform;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at center top, transparent 0%, var(--bg-main) 70%),
        linear-gradient(to bottom, transparent 50%, var(--bg-main) 100%);
    z-index: 1;
}

.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    padding: 40px 24px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.dot-live {
    width: 8px;
    height: 8px;
    background: #27ae60;
    border-radius: 50%;
    box-shadow: 0 0 12px #27ae60;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hero-title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 1.1;
    margin-bottom: 24px;
}

.hero-label {
    font-family: var(--font-mono);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: var(--accent);
    letter-spacing: 6px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.text-gradient {
    background: linear-gradient(180deg, #ffffff 0%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-sub {
    font-size: clamp(1rem, 2vw, 1.35rem);
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.hero-sub strong {
    color: var(--text-main);
}

.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: 48px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}

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

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-main);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ============================================
   TECH MARQUEE
============================================ */
.tech-marquee {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
    overflow: hidden;
    white-space: nowrap;
}

.track {
    display: inline-flex;
    align-items: center;
    animation: scroll 50s linear infinite;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
}

.track span {
    color: var(--text-dark);
    margin: 0 24px;
}

.track i {
    color: var(--accent);
    font-size: 0.4em;
    opacity: 0.5;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================
   USP SECTION - Enhanced
============================================ */
.usp-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--bg-main) 0%, var(--bg-card) 100%);
}

.usp-headline {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.usp-tagline {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.usp-headline h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 16px;
}

.usp-headline p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.usp-item {
    text-align: center;
    padding: 40px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: var(--transition-smooth);
}

.usp-item:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

.usp-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    border-radius: 16px;
    font-size: 1.4rem;
    color: var(--accent);
}

.usp-item h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.usp-item p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================
   HOW IT WORKS - Compact
============================================ */
.howto-section {
    padding: 80px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.howto-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.howto-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 32px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.step-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.step-content h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.step-content p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.howto-arrow {
    color: var(--accent);
    font-size: 1.2rem;
    opacity: 0.5;
}

/* ============================================
   SECTIONS - GENERAL
============================================ */
.vps-section {
    padding: 120px 0;
    position: relative;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section-header {
    margin-bottom: 60px;
}

.section-header.centered {
    text-align: center;
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

.section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 16px;
}

.section-header p {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 600px;
}

.section-header.centered p {
    margin: 0 auto;
}

/* ============================================
   TERMINAL SECTION - ENHANCED
============================================ */
.terminal-section {
    background: var(--bg-card);
}

.terminal-wrapper {
    max-width: 800px;
    margin: 0 auto 40px;
    background: #0d0d0d;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #1a1a1a;
    border-bottom: 1px solid var(--border);
}

.terminal-header .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.terminal-header .dot.red { background: #ff5f57; }
.terminal-header .dot.yellow { background: #febc2e; }
.terminal-header .dot.green { background: #28c840; }

.terminal-title {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.terminal-body {
    padding: 24px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 2;
}

.code-line {
    margin-bottom: 4px;
}

.c-purple { color: #c792ea; }
.c-blue { color: #82aaff; }
.c-yellow { color: #ffcb6b; }
.c-green { color: #c3e88d; }
.c-num { color: #f78c6c; }

/* Dynamic Typewriter Line */
.terminal-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--accent);
}

.prompt-char {
    color: var(--accent);
    font-weight: bold;
}

.cursor {
    display: inline-block;
    width: 10px;
    height: 18px;
    background: var(--accent);
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* DNA Strip Visualization */
.dna-strip {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 120px;
    align-items: center;
    justify-content: center;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    margin: 60px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.dna-bar {
    width: 4px;
    background: #222;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.dna-bar:hover {
    background: var(--accent);
    height: 100% !important;
    box-shadow: 0 0 10px var(--accent-glow);
}

.tech-description {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.tech-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--accent);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.tech-description h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.tech-description p {
    color: var(--text-muted);
}

.text-highlight {
    color: var(--accent);
    font-weight: 500;
}

/* ============================================
   GALLERY SECTION
============================================ */
.gallery-section {
    background: var(--bg-main);
    overflow: hidden;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
    gap: 16px;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    will-change: transform;
}

.gallery-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item.wide {
    grid-column: span 2;
}

.gallery-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-tag {
    display: inline-block;
    width: fit-content;
    padding: 4px 10px;
    background: var(--accent);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.gallery-overlay h4 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.gallery-overlay p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* ============================================
   BENTO GRID
============================================ */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.bento-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: var(--transition-smooth);
    min-height: 300px;
}

.bento-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-hover);
}

.card-large { grid-column: span 8; }
.card-medium { grid-column: span 6; }
.card-small { grid-column: span 4; }
.card-wide { grid-column: span 12; min-height: 120px; }

.card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    transition: var(--transition-smooth);
}

.bento-card:hover .card-bg {
    transform: scale(1.05);
    opacity: 0.25;
}

.card-content {
    position: relative;
    z-index: 2;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 60%);
}

.card-content.centered {
    align-items: center;
    justify-content: center;
    text-align: center;
    background: none;
}

.card-content.flex-row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: none;
}

.bento-card h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.bento-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.card-features {
    list-style: none;
    margin-top: 16px;
}

.card-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.card-features i {
    color: var(--accent);
    font-size: 0.75rem;
}

/* Badges */
.badge-core {
    display: inline-block;
    background: var(--text-main);
    color: #000;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.badge-new {
    display: inline-block;
    background: var(--accent);
    color: #000;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

/* Stat Card */
.stat-big {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
}

.stat-label {
    font-size: 1rem;
    color: var(--accent);
    font-weight: 500;
    margin-top: 8px;
}

.bg-black { background: #000; }
.bg-darker { background: #050505; }
.bg-gradient {
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--bg-card) 100%);
}

.icon-huge {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 16px;
}

.icon-glow {
    font-size: 1.5rem;
    color: var(--accent);
    filter: drop-shadow(0 0 10px var(--accent-glow));
}

/* Feature Pills */
.feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pill i {
    font-size: 0.9rem;
}

/* ============================================
   WORKFLOW SECTION
============================================ */
.flow-section {
    position: relative;
    padding: 120px 55px;
    overflow: hidden;
}

.visual-anchor {
    position: absolute;
    z-index: 0;
    opacity: 0.03;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15vw;
    color: var(--text-main);
    white-space: nowrap;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.visual-anchor.parallax-anchor {
    opacity: 0.05;
    font-size: 18vw;
    color: var(--accent);
    mix-blend-mode: soft-light;
    will-change: transform;
}

.workflow-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 60px;
}

.workflow-step {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    text-align: center;
    padding: 40px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
}

.step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--bg-main);
    padding: 8px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-full);
}

.step-icon {
    width: 80px;
    height: 80px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--accent);
}

.workflow-step h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.workflow-step p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.workflow-connector {
    display: flex;
    align-items: center;
    color: var(--accent);
    font-size: 1.5rem;
    opacity: 0.5;
}

/* ============================================
   PRICING SECTION
============================================ */
.pricing-section {
    background: var(--bg-card);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.price-card {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    transition: var(--transition-smooth);
    position: relative;
}

.price-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-5px);
}

.price-card.featured {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-subtle) 0%, var(--bg-main) 30%);
}

.price-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: var(--radius-full);
}

.price-head {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.price-amount {
    font-size: 3rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-main);
}

.price-decimal {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.price-period {
    font-size: 0.85rem;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.price-features {
    list-style: none;
    margin: 24px 0;
}

.price-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.price-features li:last-child {
    border-bottom: none;
}

.price-features li i {
    width: 20px;
    text-align: center;
}

.price-features li .fa-check {
    color: var(--accent);
}

.price-features li .fa-xmark {
    color: var(--text-dark);
}

.price-features li.disabled {
    color: var(--text-dark);
}

.price-card .btn {
    width: 100%;
    margin-top: 16px;
}

.pricing-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 40px;
}

/* ============================================
   FAQ SECTION
============================================ */
.faq-section {
    background: var(--bg-main);
}

.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
}

.faq-question:hover {
    color: var(--accent);
}

.faq-question i {
    font-size: 1rem;
    color: var(--accent);
    transition: var(--transition-fast);
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

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

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

.faq-answer p {
    padding: 0 0 24px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ============================================
   CTA SECTION
============================================ */
.cta-section {
    padding: 120px 24px;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-main) 100%);
    text-align: center;
}

.cta-content h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 16px;
}

.cta-content p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 32px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   FOOTER
============================================ */
.vps-footer {
    background: #000;
    padding: 80px 24px 40px;
    position: relative;
    overflow: hidden;
}

.laser-beam {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), #fff, var(--accent), transparent);
    box-shadow: 0 0 30px var(--accent-glow);
    animation: laserScan 4s linear infinite;
}

@keyframes laserScan {
    0% { left: -50%; }
    100% { left: 100%; }
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 16px;
    line-height: 1.6;
}

.footer-brand .copyright {
    margin-top: 24px;
    font-size: 0.8rem;
    color: var(--text-dark);
}

.footer-col h5 {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.footer-col a {
    display: block;
    color: var(--text-dark);
    font-size: 0.9rem;
    margin-bottom: 12px;
    transition: var(--transition-fast);
}

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

.footer-bottom {
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.trust-badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dark);
    font-size: 0.8rem;
}

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

/* ============================================
   ANIMATIONS
============================================ */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

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

/* ============================================
   FLOW SECTIONS - LAYOUT SPLIT
============================================ */
.layout-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 80px;
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
}

.layout-content {
    flex: 1;
    min-width: 300px;
    position: sticky;
    top: 100px;
}

.layout-visual {
    flex: 1.5;
    min-width: 300px;
    min-height: 60vh;
    background: #080808;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1;
    margin-bottom: 24px;
}

.content-text {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 16px;
}

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

.list-feature li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.list-feature li:last-child {
    border-bottom: none;
}

.list-feature li i {
    color: var(--accent);
    font-size: 0.8rem;
}

/* Mapping Grid Animation */

@keyframes gridFlow {
    0% { transform: perspective(600px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(600px) rotateX(60deg) translateY(60px); }
}

.mapping-label {
    position: absolute;
    border: 1px solid var(--accent);
    padding: 8px 12px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--radius-sm);
}

.mapping-label.light {
    border-color: var(--text-main);
    color: var(--text-main);
}

.mapping-status {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-main);
}

.status-locked {
    color: var(--accent);
}

/* Tool Blocks */
.tool-block {
    margin-bottom: 48px;
}

.tool-block h3 {
    font-size: 1.4rem;
    color: var(--text-main);
    margin-bottom: 12px;
}

.tool-block.coming-soon {
    opacity: 0.5;
}

.badge-soon {
    font-size: 0.65rem;
    background: var(--accent);
    color: #000;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    margin-left: 12px;
    vertical-align: middle;
}

/* ============================================
   STORY SECTION
============================================ */
.story-section {
    padding: 0;
}

.story-wrapper {
    height: 80vh;
    min-height: 600px;
    position: relative;
    background: #020202;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.node-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.node-point {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--text-main);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    z-index: 2;
}

.node-point.node-active {
    background: var(--accent);
    width: 20px;
    height: 20px;
    box-shadow: 0 0 30px var(--accent-glow);
}

.node-line {
    position: absolute;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    transform-origin: left center;
    z-index: 1;
}

.node-label {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--accent);
    margin-top: 20px;
    margin-left: -10px;
    letter-spacing: 1px;
}

.story-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
    padding: 0 24px;
}

.display-title {
    font-size: clamp(5rem, 15vw, 12rem);
    line-height: 0.85;
    font-weight: 700;
    margin: 16px 0 24px;
    background: linear-gradient(180deg, #fff 0%, #666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lead-text {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Story Features - Separated Container */
.story-features-container {
    background: #0a0a0a;
    padding: 80px 24px;
}







/* ============================================
   PRO BADGE
============================================ */
.pro-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent) 0%, #f0c000 100%);
    color: #000;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-right: 6px;
    vertical-align: middle;
}

.list-feature .pro-badge {
    margin-left: 0;
}

/* ============================================
   CHARACTER SECTION (SETCARD, STYLING, TEMPLATES)
============================================ */
.characters-section {
    background: var(--bg-card);
    padding: 120px 0;
}

.section-title.centered {
    text-align: center;
}

.content-text.centered {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 60px auto 0;
}

.character-grid.three-col {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
}

.character-card {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    transition: var(--transition-smooth);
}

.character-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

.character-card-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    border-radius: 50%;
    font-size: 1.8rem;
    color: var(--accent);
}

.character-card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.character-card > p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}





/* ============================================
   EXTRAS & COMING SOON
============================================ */
.extras-section {
    padding: 120px 0;
    background: var(--bg-main);
}

.extras-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.extra-item {
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition-smooth);
    position: relative;
}

.extra-item:hover {
    border-color: var(--border-hover);
    transform: translateY(-3px);
}

.extra-item.coming {
    opacity: 0.6;
}

.extra-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--accent);
    color: #000;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    letter-spacing: 1px;
}

.extra-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    border-radius: 12px;
    font-size: 1.2rem;
    color: var(--accent);
}

.extra-item h4 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.extra-item > p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.extra-tier {
    display: block;
    font-size: 0.75rem;
    color: var(--text-dark);
    margin-top: 8px;
}

.extra-tier.pro {
    color: var(--text-muted);
}

/* ============================================
   TESTIMONIALS
============================================ */
.testimonials-section {
    background: var(--bg-card);
    padding: 120px 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.testimonial-card {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: var(--transition-smooth);
}

.testimonial-card:hover {
    border-color: var(--accent);
}

.testimonial-stars {
    margin-bottom: 16px;
}

.testimonial-stars i {
    color: var(--accent);
    font-size: 0.9rem;
    margin-right: 2px;
}

.testimonial-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    background: var(--accent);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.author-info strong {
    display: block;
    font-size: 0.95rem;
}

.author-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================
   FOUNDER STORY SECTION
============================================ */
.story-founder-section {
    background: #141414;
    padding: 120px 0;
}

.founder-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
}

.founder-content .mono {
    margin-bottom: 16px;
}

.founder-text {
    margin: 32px 0;
}

.founder-text p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.founder-text p:last-child {
    margin-bottom: 0;
}

.founder-text strong {
    color: var(--accent);
}

.founder-signature {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-card);
}

.signature-info strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.signature-info span {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.founder-link {
    color: var(--accent);
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.founder-link:hover {
    text-decoration: underline;
}

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

.founder-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-large {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--text-main);
}

.brand-large.accent {
    color: var(--accent);
}

.brand-sub {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    letter-spacing: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.founder-tagline {
    margin-top: 24px;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.founder-subtagline {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 900px) {
    .founder-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .founder-visual {
        order: -1;
    }
}

/* ============================================
   DNA SECTION ENHANCED
============================================ */
.dna-section {
    background: var(--bg-main);
}

.layout-split.reverse {
    flex-direction: row-reverse;
}

.dna-visual {
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dna-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 100%;
    max-width: 400px;
}

.dna-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.dna-version {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent);
    background: var(--accent-subtle);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.dna-score {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.dna-areas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dna-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.area-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    width: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.area-bar {
    height: 8px;
    background: var(--accent);
    border-radius: 4px;
    transition: width 1s ease;
}

/* Story Features */
.story-features {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 40px 0;
}

.story-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.story-feature i {
    color: var(--accent);
}

/* CTA Note */
.cta-note {
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Footer Trust Badges */
.footer-trust {
    display: flex;
    gap: 16px;
    margin: 16px 0;
}

.footer-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-dark);
}

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

/* Button Ghost */
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    color: var(--text-main);
    border-color: var(--text-main);
}

/* Cookie Banner Enhanced */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 24px;
    z-index: 9999;
    animation: slideUp 0.4s ease;
}

.cookie-content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.cookie-text {
    flex: 1;
    min-width: 300px;
}

.cookie-text strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}

.cookie-text p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.cookie-text a {
    color: var(--accent);
}

.cookie-actions {
    display: flex;
    gap: 12px;
}
.roadmap-section {
    background: var(--bg-card);
}

.roadmap-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

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

.roadmap-item h3 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--text-main);
    margin: 0;
    transition: var(--transition-normal);
}

.roadmap-item.faded h3 {
    opacity: 0.4;
}

.roadmap-item.active h3 {
    color: var(--accent);
    text-shadow: 0 0 30px var(--accent-glow);
}

.roadmap-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.7;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1200px) {
    .card-large { grid-column: span 12; }
    .card-medium { grid-column: span 6; }
    .card-small { grid-column: span 6; }
}

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

@media (max-width: 768px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--bg-main);
        flex-direction: column;
        padding: 24px;
        gap: 16px;
        border-bottom: 1px solid var(--border);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .nav-actions .btn {
        display: none;
    }
    
    .hero-stats {
        gap: 24px;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .card-large,
    .card-medium,
    .card-small {
        grid-column: span 12;
    }
    
    .workflow-connector {
        display: none;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .trust-badges {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    
    /* Flow Sections Responsive */
    .layout-split {
        flex-direction: column;
        gap: 40px;
    }
    
    .layout-content {
        position: relative;
        top: 0;
    }
    
    .layout-visual {
        width: 100%;
        min-height: 300px;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    /* Story Nodes Responsive */
    .story-nodes-wrapper {
        height: auto;
        min-height: 80vh;
        padding: 80px 24px;
    }
    
    .display-title {
        font-size: 4rem;
    }
    
    /* Roadmap Responsive */
    .roadmap-item h3 {
        font-size: 1.5rem;
    }
    
    /* Gallery Responsive */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
    
    .gallery-item.large {
        grid-column: span 2;
        grid-row: span 1;
    }
    
    .gallery-item.wide {
        grid-column: span 2;
    }
    
    .gallery-overlay {
        opacity: 1;
    }
    
    /* USP Responsive */
    .usp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* How To Responsive */
    .howto-arrow {
        display: none;
    }
    
    .howto-steps {
        flex-direction: column;
    }
    
    /* Character Grid Responsive */
    .character-grid {
        grid-template-columns: 1fr;
    }
    
    .character-grid.three-col {
        grid-template-columns: 1fr;
    }
    
    /* Extras Grid Responsive */
    .extras-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Testimonials Responsive */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    /* DNA Section Responsive */
    .layout-split.reverse {
        flex-direction: column;
    }
    
    /* Story Features Responsive */
    
    .story-wrapper {
        min-height: 100vh;
        padding: 80px 0;
    }
    
    .display-title {
        font-size: 4rem;
    }
}

@media (max-width: 480px) {
    .hero-cta {
        flex-direction: column;
    }
    
    .hero-cta .btn {
        width: 100%;
    }
    
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .usp-grid {
        grid-template-columns: 1fr;
    }
    
    .extras-grid {
        grid-template-columns: 1fr;
    }
    
    .story-features {
        flex-direction: column;
        align-items: center;
    }
}

 /* FLUX 2.0 TEASER BANNER */
        .flux-banner {
            width: 100%;
            background: #050505;
            border-bottom: 1px solid #222;
            overflow: hidden;
            position: relative;
            padding: 80px 5%;
            display: flex; align-items: center; justify-content: center;
        }
        
        .flux-content {
            text-align: center;
            position: relative; z-index: 2;
        }
        
        .flux-glow {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 600px; height: 300px;
            background: var(--yellow);
            filter: blur(120px);
            opacity: 0.08;
            pointer-events: none;
        }

        .flux-badge {
            background: var(--yellow); color: #000; padding: 4px 12px; border-radius: 100px;
            font-family: 'JetBrains Mono'; font-size: 0.75rem; font-weight: 700;
            display: inline-block; margin-bottom: 20px;
        }
.split {
            display: flex; justify-content: space-between; gap: 80px; flex-wrap: wrap;
        }
        .col-text { flex: 1; min-width: 300px; position: sticky; top: 100px; height: fit-content; }
        .col-visual { flex: 1.5; min-width: 300px; }

        /* VISUALS */
        .visual-box {
            width: 100%; aspect-ratio: 16/9;
            background: #0a0a0a; border: 1px solid #222;
            position: relative; overflow: hidden;
        }
        
        /* Photo Edit UI Abstract */
        .edit-ui {
            position: absolute; inset: 20px; border: 1px dashed #333;
        }
        .edit-mask {
            position: absolute; top: 30%; right: 30%; width: 100px; height: 100px;
            background: rgba(255, 217, 61, 0.1); border: 1px solid var(--yellow);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            animation: morph 5s infinite ease-in-out;
        }
        @keyframes morph {
            0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
            50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
        }

        /* NanoBanana Abstract */
        .banana-grid {
            display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
            position: absolute; inset: 0; opacity: 0.2;
        }
        .banana-cell { background: #222; }
        .banana-cell.active { background: var(--yellow); animation: flash 2s infinite; }
        @keyframes flash { 0%, 100% { opacity: 0.1; } 50% { opacity: 1; } }


/* ============================================
   BRAND ACCENT (Name Fix)
============================================ */
.brand-accent {
    color: var(--accent);
}

/* ============================================
   PARALLAX GPU ACCELERATION FIX
============================================ */
.hero-bg,
.visual-anchor,
.parallax-item,
[data-parallax] {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.visual-anchor {
    transition: none; /* Remove transition for smooth parallax */
}

/* ============================================
   SCROLL ANIMATIONS (data-animate)
============================================ */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="fade-up"] {
    transform: translateY(30px);
}

[data-animate="fade-left"] {
    transform: translateX(-30px);
}

[data-animate="scale-in"] {
    transform: scale(0.95);
    opacity: 0;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ============================================
   CTA MODELS BADGES (New)
============================================ */
.cta-models {
    margin: 30px 0;
    text-align: center;
}

.cta-models-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-model-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.model-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.model-badge:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.model-badge.video {
    background: rgba(255, 217, 61, 0.05);
    border-color: rgba(255, 217, 61, 0.3);
    color: var(--accent);
}

/* ============================================
   TECH MARQUEE VIDEO MODELS
============================================ */
.track .video-model {
    color: var(--accent);
}

/* ============================================
   REDUCED MOTION ACCESSIBILITY
============================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-bg,
    .visual-anchor,
    .parallax-item,
    [data-parallax],
    [data-animate] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    [data-animate] {
        opacity: 1;
    }
    
    .scroll-indicator {
        animation: none;
    }
    
    .dot-live {
        animation: none;
    }
}


/* ============================================
   TAG-NEW FOR MARQUEE
============================================ */
.tag-new {
    background: linear-gradient(135deg, #ffd93d 0%, #ff6b6b 100%);
    color: #0a0a0a;
    font-size: 0.5em;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: super;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { 
        opacity: 1; 
        box-shadow: 0 0 4px rgba(255, 217, 61, 0.4);
    }
    50% { 
        opacity: 0.85; 
        box-shadow: 0 0 8px rgba(255, 217, 61, 0.6);
    }
}

/* ============================================
   HOWTO PIPELINE (6 Steps)
============================================ */
.howto-pipeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    margin-top: 60px;
}

.howto-section .howto-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    min-width: 140px;
    max-width: 160px;
    position: relative;
    transition: transform 0.3s ease;
    background: transparent;
    border: none;
    border-radius: 0;
}

.howto-section .howto-step:hover {
    transform: translateY(-8px);
}

.howto-section .howto-step.highlight {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.1) 0%, rgba(255, 107, 107, 0.1) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 217, 61, 0.3);
}

.howto-section .step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 2px solid rgba(255, 217, 61, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    transition: all 0.3s ease;
}

.howto-section .step-icon i {
    font-size: 1.25rem;
    color: #ffd93d;
}

.howto-section .howto-step:hover .step-icon {
    border-color: #ffd93d;
    box-shadow: 0 0 20px rgba(255, 217, 61, 0.3);
}

.howto-section .step-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.howto-section .step-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.howto-section .step-content p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    margin: 0;
}

/* Connector Line */
.howto-connector {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 217, 61, 0.2) 0%, rgba(255, 217, 61, 0.5) 50%, rgba(255, 217, 61, 0.2) 100%);
    margin-top: 52px;
    position: relative;
}

.howto-connector::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid rgba(255, 217, 61, 0.5);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

/* Responsive: Stack on tablet/mobile */
@media (max-width: 1200px) {
    .howto-pipeline {
        gap: 8px;
    }
    
    .howto-connector {
        width: 24px;
    }
}

@media (max-width: 900px) {
    .howto-pipeline {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    
    .howto-section .howto-step {
        max-width: 280px;
    }
    
    .howto-connector {
        width: 2px;
        height: 30px;
        margin: 0;
        background: linear-gradient(180deg, rgba(255, 217, 61, 0.2) 0%, rgba(255, 217, 61, 0.5) 50%, rgba(255, 217, 61, 0.2) 100%);
    }
    
    .howto-connector::after {
        right: 50%;
        top: auto;
        bottom: -4px;
        transform: translateX(50%);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid rgba(255, 217, 61, 0.5);
        border-bottom: none;
    }
}

/* ============================================
   MODELS BANNER - Unified CTA
============================================ */
.models-banner {
    position: relative;
    padding: 120px 20px;
    background: #030303;
    overflow: hidden;
    text-align: center;
}

/* Dual Glow Effects */
.models-banner .models-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    pointer-events: none;
}

.models-banner .models-glow:first-of-type {
    top: -200px;
    left: 50%;
    transform: translateX(-70%);
    background: radial-gradient(circle, #ffd93d 0%, transparent 70%);
}

.models-banner .models-glow.secondary {
    bottom: -200px;
    right: 50%;
    transform: translateX(70%);
    background: radial-gradient(circle, #ff6b6b 0%, transparent 70%);
    opacity: 0.25;
}

.models-banner-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

/* Badge */
.models-badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.15) 0%, rgba(255, 107, 107, 0.15) 100%);
    border: 1px solid rgba(255, 217, 61, 0.3);
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ffd93d;
    margin-bottom: 24px;
}

.models-banner .section-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 50px;
    color: #fff;
}

/* Model Pills */
.model-pills {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto 50px;
}

.model-pill {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: left;
}

.model-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 217, 61, 0.3);
    transform: translateX(4px);
}

.model-pill.featured {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 217, 61, 0.2);
}

.model-pill.featured.banana {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.12) 0%, rgba(255, 107, 107, 0.05) 100%);
}

.pill-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 217, 61, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pill-icon i {
    font-size: 1.1rem;
    color: #ffd93d;
}

.pill-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pill-name {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.pill-stat {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.pill-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, #ffd93d 0%, #ffb347 100%);
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: 1px;
}

.pill-badge.hot {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #fff;
}

.pill-badge.video {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

/* Stats Row */
.models-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.models-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.models-stats .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.models-stats .stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

/* CTA Buttons */
.models-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.models-cta .btn {
    padding: 16px 32px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.models-cta .btn-primary {
    background: linear-gradient(135deg, #ffd93d 0%, #ffb347 100%);
    color: #0a0a0a;
    border: none;
}

.models-cta .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(255, 217, 61, 0.3);
}

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

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

/* Models Banner Responsive */
@media (max-width: 600px) {
    .models-banner {
        padding: 80px 16px;
    }
    
    .model-pill {
        padding: 14px 16px;
    }
    
    .pill-icon {
        width: 38px;
        height: 38px;
    }
    
    .models-stats {
        gap: 24px;
    }
    
    .stat-divider {
        display: none;
    }
    
    .models-cta {
        flex-direction: column;
    }
    
    .models-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   STUDIO LAB - Tech Stack & Badges
============================================ */

/* Tech Stack Pills */
.lab-tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 32px 0;
}

.tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 217, 61, 0.08);
    border: 1px solid rgba(255, 217, 61, 0.2);
    border-radius: 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.tech-pill i {
    color: #ffd93d;
    font-size: 0.75rem;
}

.tech-pill:hover {
    background: rgba(255, 217, 61, 0.15);
    border-color: rgba(255, 217, 61, 0.4);
}

/* Lab Badge */
.lab-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.1) 0%, rgba(255, 107, 107, 0.05) 100%);
    border: 1px solid rgba(255, 217, 61, 0.3);
    border-radius: 12px;
    margin-bottom: 30px;
}

.lab-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 217, 61, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lab-icon i {
    color: #ffd93d;
    font-size: 1.1rem;
}

.lab-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ffd93d;
}

/* Roadmap Teaser */
.lab-roadmap {
    margin-top: 40px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.roadmap-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.lab-roadmap .roadmap-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.lab-roadmap .roadmap-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lab-roadmap .roadmap-item i {
    width: 28px;
    height: 28px;
    background: rgba(255, 217, 61, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd93d;
    font-size: 0.8rem;
}

/* Lab Section Responsive */
@media (max-width: 768px) {
    .lab-tech-stack {
        justify-content: center;
    }
    
    .lab-badge {
        justify-content: center;
    }
    
    .lab-roadmap {
        text-align: left;
    }
}

/* ============================================
   STORY FEATURES GRID (Enhanced)
============================================ */
.story-features-container {
    max-width: var(--max-width);
    margin: 60px auto 0;
    padding: 0 24px;
}







/* ============================================
   GALLERY SECTION (Enhanced)
============================================ */
.gallery-section {
    padding: 120px 0;
    background: var(--bg-main);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
    gap: 16px;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.gallery-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item.wide {
    grid-column: span 2;
}

.gallery-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.08);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}


.gallery-overlay h4 {
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
}

/* Gallery Responsive */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }
    
    .gallery-item.large,
    .gallery-item.wide {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .gallery-overlay {
        opacity: 1;
    }
}

/* ============================================
   MODEL TICKER (Enhanced)
============================================ */
.model-ticker {
    display: inline-flex;
    align-items: center;
}

.model-ticker span {
    white-space: nowrap;
}

/* ============================================
   PROMPT OPTIMIZER - Two Column Layout Fix
============================================ */

/* Terminal inside layout-visual */
.optimizer-section .layout-visual {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.optimizer-section .terminal-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Enhanced Terminal Body */
.terminal-body {
    padding: 20px 24px;
    min-height: 180px;
}

.code-line {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.code-line.output {
    padding-left: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.c-gray { color: #666; }

/* DNA Preview Component */
.dna-preview {
    background: #141414;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 20px 24px;
}

.dna-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 16px;
}

.dna-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dna-bar {
    position: relative;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.dna-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--width, 50%);
    background: var(--color, var(--accent));
    opacity: 0.8;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.dna-bar span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 12px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
}

/* Layout Split Adjustments for Optimizer */
.optimizer-section .layout-split.reverse {
    padding: 0 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Remove old container wrapper if not needed */
.optimizer-section > .container {
    display: none; /* Hide old terminal container */
}

/* Responsive Adjustments */
@media (max-width: 900px) {
    .optimizer-section .layout-visual {
        order: -1; /* Terminal on top on mobile */
    }
    
    .dna-preview {
        padding: 16px 20px;
    }
    
    .dna-bar {
        height: 24px;
    }
}


/* ============================================
   VIEWPORT PREVIEW — 2-Column Pipeline
   Left: Text + Steps / Right: 3 Feature Cards
============================================ */

.vp-pipeline {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid var(--border);
    position: relative;
}

/* 2-Column Grid */
.vp-split {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 48px;
    align-items: start;
}

/* Left: Text Column */
.vp-text {
    padding-top: 8px;
}

.vp-tag {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    padding: 3px 8px;
    background: rgba(255, 217, 61, 0.12);
    color: var(--accent);
    border-radius: 4px;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 16px;
}

.vp-text h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 12px;
    line-height: 1.3;
}

.vp-text p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 28px;
}

/* Pipeline Steps */
.vp-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.vp-steps::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: linear-gradient(180deg, #4ecdc4, #ff6b9d, #ffd93d);
    opacity: 0.2;
}

.vp-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    position: relative;
    transition: all var(--transition-normal);
}

.vp-step:hover {
    transform: translateX(4px);
}

.vp-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.vp-step-dot i {
    font-size: 0.5rem;
}

.vp-step[data-step="depth"] .vp-step-dot {
    background: rgba(78, 205, 196, 0.12);
    border: 1px solid rgba(78, 205, 196, 0.25);
}
.vp-step[data-step="depth"] .vp-step-dot i { color: #4ecdc4; }

.vp-step[data-step="pose"] .vp-step-dot {
    background: rgba(255, 107, 157, 0.12);
    border: 1px solid rgba(255, 107, 157, 0.25);
}
.vp-step[data-step="pose"] .vp-step-dot i { color: #ff6b9d; }

.vp-step[data-step="preview"] .vp-step-dot {
    background: rgba(255, 217, 61, 0.12);
    border: 1px solid rgba(255, 217, 61, 0.25);
}
.vp-step[data-step="preview"] .vp-step-dot i { color: var(--accent); }

.vp-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vp-step-name {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.vp-step-desc {
    font-size: 0.7rem;
    color: var(--text-dark);
    line-height: 1.4;
}

/* Pipeline Result Box */
.vp-result {
    margin-top: 24px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

.vp-result i {
    color: var(--accent);
    font-size: 0.7rem;
    opacity: 0.6;
}

.vp-result span {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-dark);
    letter-spacing: 0.5px;
}

/* Right: 3 Feature Cards */
.vp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.vp-card {
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.vp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

.vp-card[data-feat="depth"]:hover {
    border-color: rgba(78, 205, 196, 0.25);
    box-shadow: 0 14px 40px rgba(78, 205, 196, 0.06);
}
.vp-card[data-feat="pose"]:hover {
    border-color: rgba(255, 107, 157, 0.25);
    box-shadow: 0 14px 40px rgba(255, 107, 157, 0.06);
}
.vp-card[data-feat="preview"]:hover {
    border-color: rgba(255, 217, 61, 0.25);
    box-shadow: 0 14px 40px rgba(255, 217, 61, 0.06);
}

/* Card Image Area */
.vp-card-visual {
    aspect-ratio: 3/4;
    position: relative;
    overflow: hidden;
}

.vp-card[data-feat="depth"] .vp-card-visual {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(78, 205, 196, 0.1) 0%, transparent 60%),
        linear-gradient(170deg, #0f1a19 0%, #0a0e0e 100%);
}

.vp-card[data-feat="pose"] .vp-card-visual {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255, 107, 157, 0.08) 0%, transparent 60%),
        linear-gradient(170deg, #1a0f14 0%, #0e0a0c 100%);
}

.vp-card[data-feat="preview"] .vp-card-visual {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 217, 61, 0.06) 0%, transparent 60%),
        linear-gradient(170deg, #161410 0%, #0e0d0a 100%);
}

.vp-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder */
.vp-card-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vp-card-ph i {
    font-size: 1.2rem;
    opacity: 0.05;
}

.vp-card-ph span {
    font-family: var(--font-mono);
    font-size: 0.4rem;
    color: rgba(255, 255, 255, 0.08);
    letter-spacing: 1px;
}

/* Depth scan-line animation */
.vp-card[data-feat="depth"] .vp-card-visual::after {
    content: '';
    position: absolute;
    top: -5%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #4ecdc4, transparent);
    opacity: 0.25;
    animation: vpDepthScan 4s ease-in-out infinite;
}

/* Pose pulse animation */
.vp-card[data-feat="pose"] .vp-card-visual::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 107, 157, 0.12);
    transform: translate(-50%, -50%);
    animation: vpPosePulse 3s ease-in-out infinite;
}

/* Preview shimmer animation */
.vp-card[data-feat="preview"] .vp-card-visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 217, 61, 0.03), transparent);
    animation: vpPreviewShimmer 5s ease-in-out infinite;
}

/* Card Footer */
.vp-card-label {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vp-card-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vp-card-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: vpDotPulse 2.5s ease-in-out infinite;
}

.vp-card[data-feat="depth"] .vp-card-dot { background: #4ecdc4; }
.vp-card[data-feat="pose"] .vp-card-dot { background: #ff6b9d; }
.vp-card[data-feat="preview"] .vp-card-dot { background: var(--accent); }

.vp-card-name span {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.vp-card-num {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    color: var(--text-dark);
    letter-spacing: 1px;
}

/* VP Animations */
@keyframes vpDepthScan {
    0%, 100% { top: -5%; opacity: 0; }
    10% { opacity: 0.25; }
    90% { opacity: 0.25; }
    100% { top: 105%; opacity: 0; }
}

@keyframes vpPosePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

@keyframes vpPreviewShimmer {
    0% { left: -50%; }
    50%, 100% { left: 150%; }
}

@keyframes vpDotPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* VP Responsive */
@media (max-width: 900px) {
    .vp-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 480px) {
    .vp-cards {
        grid-template-columns: 1fr 1fr;
    }
    .vp-cards .vp-card:last-child {
        grid-column: span 2;
        max-width: 60%;
        margin: 0 auto;
    }
}


/* ============================================
   KLING 3.0 TEASER — Unique Section
   Purple/violet gradient, standalone highlight
============================================ */

.kling-teaser {
    position: relative;
    padding: 100px 55px;
    overflow: hidden;
    background: #08060e;
}

/* Animated background glow */
.kling-bg-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 100%),
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(139, 92, 246, 0.06) 0%, transparent 100%);
    animation: kling-glow-shift 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes kling-glow-shift {
    0% { opacity: 0.6; transform: scale(1) translateX(0); }
    100% { opacity: 1; transform: scale(1.05) translateX(20px); }
}

.kling-inner {
    display: flex;
    align-items: center;
    gap: 64px;
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* ── Content Side ── */
.kling-content {
    flex: 1;
    min-width: 300px;
}

.kling-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(139, 92, 246, 0.7);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.kling-new-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4);
    animation: kling-badge-glow 2s ease-in-out infinite;
}

@keyframes kling-badge-glow {
    0%, 100% { box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 2px 24px rgba(99, 102, 241, 0.7); }
}

.kling-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.05;
    margin-bottom: 20px;
    color: var(--text-main);
}

.kling-gradient {
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 40%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kling-text {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 28px;
    max-width: 520px;
}

/* Tags */
.kling-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.kling-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition-fast);
}

.kling-tags span:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #fff;
}

.kling-tags span i {
    color: #818cf8;
    font-size: 0.65rem;
}

/* CTA */
.kling-cta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-kling {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
}

.btn-kling:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(99, 102, 241, 0.5);
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
}

.btn-kling i {
    transition: transform var(--transition-fast);
}

.btn-kling:hover i {
    transform: translateX(3px);
}

.kling-hint {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dark);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Media Side — Video Placeholder ── */
.kling-media {
    flex: 1.2;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.kling-video-placeholder {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #0f0a1f 0%, #1a1035 40%, #12082a 100%);
    border: 1px dashed rgba(99, 102, 241, 0.25);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.kling-play-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    border: 2px solid rgba(99, 102, 241, 0.3);
    color: rgba(139, 92, 246, 0.6);
    font-size: 1.2rem;
    animation: kling-play-pulse 2.5s ease-in-out infinite;
    z-index: 2;
}

@keyframes kling-play-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
    50% { transform: scale(1.08); box-shadow: 0 0 30px 10px rgba(99, 102, 241, 0.15); }
}

.kling-ph-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 1px;
    z-index: 2;
}

/* Animated shimmer across placeholder */
.kling-ph-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(99, 102, 241, 0.04) 37%,
        rgba(139, 92, 246, 0.08) 50%,
        rgba(99, 102, 241, 0.04) 63%,
        transparent 75%
    );
    background-size: 200% 100%;
    animation: kling-shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes kling-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Media Wrapper with Overlay ── */
.kling-media-wrapper {
    position: relative;
    width: 100%;
    max-width: 560px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Text Overlay Layer */
.kling-overlay-text {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.kling-overlay-text span {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(99, 102, 241, 0.3);
    line-height: 1.15;
}

/* Actual video/gif styles */
.kling-video {
    width: 100%;
    display: block;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: 0 8px 40px rgba(99, 102, 241, 0.15);
}


/* ── Responsive ── */
@media (max-width: 900px) {
    .kling-teaser {
        padding: 60px 24px;
    }

    .kling-inner {
        flex-direction: column;
        gap: 40px;
    }

    .kling-media {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .kling-title {
        font-size: 2rem;
    }

    .kling-tags {
        flex-direction: column;
    }

    .kling-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
/* ============================================
   LANDING 2026-10 — product mockups and new sections
   Every UI element is an HTML/CSS rebuild of the app (no screenshots, no photos
   of people). Colors: VPS tokens (--accent yellow, --bg-card, --border) plus the
   app's status-chip domain colors passed in as --c / --domain.
   Scroll-driven motion only where supported; off under reduced motion.
   ============================================ */

/* Shared mockup surface */
.mk-caption {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
    font: 500 0.72rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--text-muted); text-align: center;
}
.mk-caption i { color: var(--accent); }
.mk-figure svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* 2.5D mapping visual — the original minimal tags, extended in the same style.
   Deliberately abstract: labels only, no product mechanics on a public page. */
.map-tag {
    position: absolute; z-index: 2; padding: 8px 12px; border-radius: 4px; border: 1px solid #fff;
    font-family: var(--font-mono); font-size: 0.7rem; color: #fff; background: rgba(0, 0, 0, 0.7);
    animation: map-float 7s ease-in-out infinite;
}
.map-tag--accent { border-color: var(--accent); color: var(--accent); }
.map-tag--dim { border-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.5); animation-delay: -2s; }
.map-tag--cast { border-color: rgba(123, 198, 164, 0.8); color: #7bc6a4; animation-delay: -4s; }
@keyframes map-float { 50% { translate: 0 -5px; } }
.map-status { width: fit-content; padding: 5px 9px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.72rem; color: #fff; background: rgba(0, 0, 0, 0.7); }
.map-status span { color: var(--accent); }
.map-status--view { font-size: 0.65rem; color: var(--accent); }
@media (max-width: 560px) {
    .map-tag { font-size: 0.6rem; padding: 6px 8px; }
    .map-status { font-size: 0.6rem; }
}

/* Refine: compare + bar */
.visual-box--mock { display: grid; place-items: center; padding: 32px 24px; aspect-ratio: auto; min-height: 280px; }
.mk-refine { width: 100%; max-width: 560px; display: grid; gap: 14px; }
.mk-compare { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-hover); }
.mk-scene { position: absolute; inset: 0; display: grid; place-items: end center; }
.mk-scene--before { background: radial-gradient(ellipse 80% 40% at 50% 100%, #3a2c1e, transparent 70%), linear-gradient(#3b4250, #6d6a64 62%, #8a7558 63%, #5b4a37); filter: saturate(0.5) brightness(0.8); }
.mk-scene--after {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 210, 122, 0.8), transparent 30%),
        radial-gradient(ellipse 80% 40% at 50% 100%, #6b4423, transparent 70%),
        linear-gradient(#f0a35e, #e9c48a 62%, #c98d52 63%, #8a5a33);
    clip-path: inset(0 0 0 var(--split, 50%));
}
@property --split { syntax: '<percentage>'; initial-value: 50%; inherits: true; }
@keyframes mk-split { 0%, 100% { --split: 32%; } 50% { --split: 68%; } }
.mk-compare { animation: mk-split 6s ease-in-out infinite; }
.mk-figure { width: 16%; height: 72%; margin-bottom: 6%; color: rgba(10, 10, 10, 0.82); }
.mk-scene--after .mk-figure { color: #2b1c12; filter: drop-shadow(-6px 0 8px rgba(255, 190, 110, 0.5)); }
.mk-divider {
    position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; translate: -1px 0; background: var(--accent); z-index: 2;
}
.mk-divider i {
    position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; font-size: 0.7rem; color: #111; background: var(--accent);
}
.mk-tag { position: absolute; top: 10px; z-index: 2; padding: 4px 8px; border-radius: 6px; font: 600 0.6rem/1 var(--font-mono); color: #fff; background: rgba(0, 0, 0, 0.6); }
.mk-tag--l { left: 10px; }
.mk-tag--r { right: 10px; color: #111; background: var(--accent); }
.mk-refinebar {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px; border-radius: var(--radius-md);
    background: rgba(20, 20, 20, 0.9); border: 1px solid var(--border-hover);
}
.mk-refinebar span {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px;
    font-size: 0.8rem; color: var(--text-secondary); background: #171717; border: 1px solid var(--border-hover);
}
.mk-refinebar span.is-active { color: #111; background: var(--accent); border-color: var(--accent); }


/* (2026-10 mockups trimmed to abstract tags on owner request) */
/* Scene Status bar inside the mapping visual — named blocks only, no counts or controls */
.map-statusbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px 28px;
    background: linear-gradient(180deg, rgba(8, 9, 9, 0.8), transparent);
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
}
.map-statusbar-label { color: var(--text-main); margin-right: 4px; }
.map-pill {
    padding: 5px 9px; border-radius: 4px; color: var(--c); background: rgba(0, 0, 0, 0.7);
    border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
    animation: map-pill-in 0.8s ease both;
}
.map-pill:nth-child(3) { animation-delay: 0.15s; }
.map-pill:nth-child(4) { animation-delay: 0.3s; }
.map-pill:nth-child(5) { animation-delay: 0.45s; }
@keyframes map-pill-in { from { opacity: 0; translate: 0 6px; } }
@media (max-width: 560px) {
    .map-statusbar { flex-wrap: nowrap; gap: 5px; }
    .map-statusbar-label { display: none; }
    .map-pill { padding: 4px 6px; }
}

/* Navigation: keep labels and the brand on one line */
.nav-menu a, .brand-name { white-space: nowrap; }
.nav-actions { margin-left: 20px; }
.nav-container > .brand { margin-right: 28px; flex: none; }

/* How it works: short points per step and one outcome line */
.howto-section .howto-step { max-width: 280px; }
.step-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.step-points li {
    position: relative; padding-left: 18px; font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary);
}
.step-points li::before {
    content: ''; position: absolute; left: 4px; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.howto-outcome {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center;
    margin: 48px auto 0; max-width: 720px; padding: 14px 22px; border-radius: var(--radius-full);
    font-size: 0.95rem; color: var(--text-main); background: var(--accent-subtle); border: 1px solid rgba(255, 217, 61, 0.3);
}
.howto-outcome i { color: var(--accent); }

/* Hero call to action (Attention → Action in one step) */
.hero-content .hero-cta { margin: 36px 0 0; }

/* Feature overview: PRO tiles get a quiet accent edge */
.extras-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.extra-item h4 { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.extra-item.is-pro { border-color: rgba(255, 217, 61, 0.22); background: linear-gradient(180deg, rgba(255, 217, 61, 0.05), transparent 45%), var(--bg-card); }
.extra-item.is-pro:hover { border-color: rgba(255, 217, 61, 0.5); }
/* Feature overview: the core and the PRO toolkit read as two groups. */
.lp-tier { margin-top: 32px; }
.lp-tier-head { display: flex; align-items: center; gap: 4px; margin: 0 0 16px; font: 500 0.8rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.lp-tier .extras-grid { display: flex; flex-wrap: wrap; margin: 0; }
.lp-tier .extra-item { flex: 1 1 min(100%, 200px); }
.lp-tier--pro { padding: clamp(16px, 3vw, 28px); border: 1px solid rgba(255, 217, 61, 0.35); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 217, 61, 0.07), transparent 40%); }
.lp-tier--pro .lp-tier-head { color: var(--accent); }
.lp-tier--pro .extra-item { flex-basis: min(100%, 230px); }

/* Prompt DNA: one shot, three versions, the recipe behind it */
.dna-visual { display: grid; place-items: center; padding: 32px; min-height: 0; }
.dna-card {
    width: 100%; max-width: 520px; display: grid; gap: 18px; padding: 22px;
    border-radius: var(--radius-lg); background: rgba(10, 10, 10, 0.9); border: 1px solid var(--border-hover);
    box-shadow: var(--shadow-lg);
}
.dna-path { font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dna-path span { color: var(--text-dark); }
.dna-path i { font-size: 0.55rem; color: var(--text-dark); }
.dna-versions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dna-version { margin: 0; display: grid; gap: 8px; }
.dna-thumb {
    display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background-size: cover; background-position: center;
    border: 1px solid var(--border-hover); transition: transform var(--transition-smooth), border-color var(--transition-normal);
}
.dna-version:nth-child(1) .dna-thumb { filter: grayscale(0.85) contrast(0.95) brightness(0.8); background-position: 30% 50%; }
.dna-version:nth-child(2) .dna-thumb { filter: saturate(0.7) hue-rotate(-12deg) brightness(0.9); background-position: 50% 50%; }
.dna-version.is-current .dna-thumb { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 30px -12px var(--accent-glow); }
.dna-version:hover .dna-thumb { transform: translateY(-3px); }
.dna-version figcaption { font: 600 0.68rem/1 var(--font-mono); color: var(--text-muted); text-align: center; }
.dna-version.is-current figcaption { color: var(--accent); }
.dna-recipe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 14px; border-top: 1px solid var(--border); }
.dna-recipe span { font: 600 0.66rem/1 var(--font-mono); color: var(--accent); margin-right: 4px; }
.dna-recipe em {
    font: 500 0.62rem/1 var(--font-mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 8px; border-radius: 4px; color: var(--text-secondary); border: 1px solid var(--border-hover);
}
.dna-restore {
    justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-full);
    font-size: 0.78rem; color: var(--accent); border: 1px solid rgba(255, 217, 61, 0.45); background: var(--accent-subtle);
}

/* Scene Composer steps: one accent per role */
.vp-step[data-step="composer"] .vp-step-dot { background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.3); }
.vp-step[data-step="composer"] .vp-step-dot i { color: #a78bfa; }
.vp-step[data-step="agents"] .vp-step-dot { background: rgba(78, 205, 196, 0.12); border: 1px solid rgba(78, 205, 196, 0.25); }
.vp-step[data-step="agents"] .vp-step-dot i { color: #4ecdc4; }
.vp-step[data-step="optimizer"] .vp-step-dot { background: rgba(255, 217, 61, 0.12); border: 1px solid rgba(255, 217, 61, 0.25); }
.vp-step[data-step="optimizer"] .vp-step-dot i { color: var(--accent); }
.vp-step[data-step="control"] .vp-step-dot { background: rgba(98, 207, 227, 0.12); border: 1px solid rgba(98, 207, 227, 0.3); }
.vp-step[data-step="control"] .vp-step-dot i { color: #62cfe3; }

/* Showcase: tall tiles and lazy video tiles */
.gallery-grid { grid-auto-flow: dense; }
.gallery-item.tall { grid-row: span 2; }
.gallery-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0a0a0a; transition: transform 0.6s ease; }
.gallery-item--video:hover .gallery-video { transform: scale(1.05); }
.gallery-item--video .gallery-overlay { pointer-events: none; }
.gallery-tag i { font-size: 0.6rem; margin-right: 4px; }

/* Scroll-driven entrances */
@supports (animation-timeline: view()) {
    .faq-item, .mk-refine, .dna-card {
        animation: vps-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }
}
@keyframes vps-rise { from { opacity: 0; translate: 0 36px; } }

@media (prefers-reduced-motion: reduce) {
    .map-tag, .map-pill, .mk-compare,
    .faq-item, .mk-refine, .dna-card { animation: none; }
}

/* Inactive footer entry for pages that do not exist yet (shared by the landing page and the pricing page). */
.coming-soon-link { opacity: 0.4; pointer-events: none; cursor: default; position: relative; }
.coming-soon-link::after { content: 'Coming Soon'; font-size: 0.6rem; background: rgba(255,107,0,0.2); color: #ff8c00; padding: 2px 6px; border-radius: 3px; margin-left: 6px; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }

/* LANDING 2026-11: chapter bands, compare slider, camera views */
.lp-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 10001; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.lp-band { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(580px, 94vh, 880px); background: var(--bg-darker); }
.lp-band-media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.lp-band-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-band-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.05) 26%, rgba(10, 10, 10, 0.62) 58%, rgba(10, 10, 10, 0.97) 100%); }
.lp-band--portrait .lp-band-media { inset: 70px 0 -18% 0; }
.lp-band--portrait .lp-band-shade { background: linear-gradient(180deg, rgba(10, 10, 10, 0.75) 0%, rgba(10, 10, 10, 0) 16%, rgba(10, 10, 10, 0.1) 40%, rgba(10, 10, 10, 0.68) 66%, rgba(10, 10, 10, 0.97) 100%); }
.lp-band-content { width: 100%; padding-block: clamp(56px, 8vw, 104px); }
.lp-eyebrow { margin: 0 0 18px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.lp-band h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; color: var(--text-main); }
.lp-band-line { max-width: 580px; margin: 22px 0 0; font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.86); }
.lp-band-actions { justify-content: flex-start; margin-top: 30px; }
.lp-band--final { min-height: clamp(640px, 100vh, 960px); }
.lp-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.lp-values h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; color: var(--text-main); }
.lp-values p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }

.lp-compare-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-compare-tabs button { flex: 1 1 auto; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-hover); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: 0.85rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.lp-compare-tabs button:hover { color: var(--text-main); border-color: var(--accent); }
.lp-compare-tabs button.is-active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
.lp-compare-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lp-card-media { margin: -8px -8px 20px; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-elevated); }
.lp-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 0.6s ease; }
.character-card:hover .lp-card-media img { transform: scale(1.04); }

.lp-compare-wrap { display: grid; gap: 14px; width: 100%; max-width: 640px; margin-inline: auto; }
.lp-compare { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); border: 1px solid var(--border-hover); background: var(--bg-card); touch-action: pan-y; --p: 50%; }
.lp-compare img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.lp-compare .compare-after { clip-path: inset(0 0 0 var(--p)); }
.lp-compare-bar { position: absolute; top: 0; bottom: 0; left: var(--p); z-index: 2; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.lp-compare-bar::after { content: '\21C6'; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #000; transform: translate(-50%, -50%); }
.lp-compare input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.lp-compare:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.lp-compare:focus-within .lp-compare-bar::after { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }
.lp-compare-label { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 9px; border-radius: 4px; background: rgba(0, 0, 0, 0.72); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-main); pointer-events: none; }
.lp-compare-label--right { left: auto; right: 12px; color: var(--accent); }

.lp-storyboard { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(var(--max-width), 90%); margin: 0 auto 48px; }
.lp-storyboard figure { margin: 0; }
.lp-storyboard img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.lp-storyboard figcaption { margin-top: 8px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-muted); }


@media (max-width: 768px) {
    .lp-values { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
    .lp-storyboard { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
    .lp-storyboard figure { scroll-snap-align: start; }
    .lp-band-media { inset: -6% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-band-media,     .lp-card-media img { transition: none; }
}

/* LANDING 2026-11: new features, main cast, founder */
.lp-new { padding-block: clamp(64px, 9vw, 120px); }
.lp-compare--wide { aspect-ratio: 16 / 9; border: 0; border-radius: 0; }
.lp-compare--wide img { object-position: 50% 50%; }
.lp-new-head { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; padding-bottom: 20px; border-bottom: 1px solid var(--accent); }
.lp-new-head h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--text-main); }
.lp-new-flag { flex: none; padding: 7px 12px; border-radius: 4px; background: var(--accent); color: #000; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; }
.lp-feature { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: 28px; }
.lp-feature--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.lp-feature--reverse .lp-feature-media { order: 2; }
.lp-feature-media { overflow: hidden; border: 1px solid rgba(255, 217, 61, 0.45); border-radius: var(--radius-lg); box-shadow: 0 0 60px var(--accent-subtle); }
.lp-feature-film { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-card); }
.lp-feature-caption { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 9px; border-radius: 4px; background: rgba(0, 0, 0, 0.72); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-main); pointer-events: none; }
.lp-feature-tag { display: block; margin-bottom: 14px; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.lp-feature-copy h3 { margin: 0 0 14px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.05; color: var(--text-main); }
.lp-feature-copy p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--text-secondary); }
@media (max-width: 992px) {
        .lp-feature, .lp-feature--reverse { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .lp-feature--reverse .lp-feature-media { order: 0; }
}

/* LANDING 2026-11: true media ratios, compose stage, pose */
.lp-feature--portrait { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.lp-feature--portrait .lp-feature-media { width: 100%; max-width: 440px; justify-self: center; }
#galleryGrid { display: block; column-count: 3; column-gap: 16px; }
#galleryGrid .gallery-item { width: 100%; margin-bottom: 16px; aspect-ratio: var(--ratio, 3 / 4); break-inside: avoid; }
.lp-compose { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.lp-compose-view { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border-hover); background: var(--bg-card); }
.lp-compose-view img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.lp-compose-view img.is-on { opacity: 1; }
.lp-compose-readout { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lp-compose-orbit { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 110px; height: 110px; border-radius: 50%; background: rgba(8, 9, 9, 0.72); }
.lp-compose-orbit svg { display: block; width: 100%; height: 100%; }
.lp-compose-cam { transform-origin: 64px 64px; transition: transform 0.7s ease; }
.lp-compose--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
/* 3D viewport: the studio's cube with its plates. Each plate faces the camera it was made from
   and shows only from that side, as in the 3D scene. */
.lp-cube { aspect-ratio: 1; container-type: inline-size; background: radial-gradient(circle at 50% 55%, rgba(255, 217, 61, 0.08), transparent 62%), var(--bg-card); }
.lp-cube-space { --s: 56cqw; position: absolute; inset: 0; display: grid; place-items: center; padding-top: 6cqw; perspective: 130cqw; }
.lp-cube-scene { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.9s ease; }
.lp-cube-face, .lp-cube-plate { position: absolute; display: block; }
.lp-cube-face { inset: 0; display: grid; place-items: start center; padding-top: 6px; transform-style: preserve-3d; border: 1px solid rgba(255, 217, 61, 0.45); background: rgba(255, 217, 61, 0.025); }
.lp-cube-face b { font: 500 0.6rem/1.2 var(--font-mono); letter-spacing: 0.1em; color: rgba(255, 217, 61, 0.75); backface-visibility: hidden; }
.lp-cube-face--front { transform: translateZ(calc(var(--s) / 2)); }
.lp-cube-face--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.lp-cube-face--right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.lp-cube-face--left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.lp-cube-face--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.lp-cube-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(rgba(255, 217, 61, 0.2) 1px, transparent 1px) 0 0 / 12.5% 12.5%, linear-gradient(90deg, rgba(255, 217, 61, 0.2) 1px, transparent 1px) 0 0 / 12.5% 12.5%, rgba(255, 217, 61, 0.04); }
.lp-cube-plate { left: 17%; top: 9%; width: 66%; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--accent); backface-visibility: hidden; }
.lp-cube-plate img { position: static; opacity: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-cube-plate--side { transform: rotateY(90deg); }
/* The side photo is shot wider: zoomed so the person matches the front plate in size and height. */
.lp-cube-plate--side img { transform: scale(1.48); transform-origin: 44% 15%; }
.lp-compose-copy .section-title { margin-bottom: 12px; }
.lp-compose-copy h3 { margin: 0 0 14px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.1; color: var(--accent); }
.lp-compose-copy p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--text-secondary); }
.lp-compose-views { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lp-compose-views button { min-height: 44px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; background: rgba(0, 0, 0, 0.7); color: var(--text-secondary); font: 500 0.75rem/1.4 var(--font-mono); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.lp-compose-views button:hover { border-color: var(--accent); color: var(--text-main); }
.lp-compose-views button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.lp-compose-views button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-pose-frame { max-width: 420px; margin-inline: auto; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border-hover); }
.lp-pose-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 992px) {
    #galleryGrid { column-count: 2; }
    .lp-compose, .lp-compose--reverse, .lp-feature--portrait { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    #galleryGrid { column-count: 1; }
    .lp-compose-orbit { width: 84px; height: 84px; }
    #mapping > .container, [id="3d-viewport"] > .container { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-compose-view img, .lp-compose-cam, .lp-cube-scene { transition: none; }
}

/* LANDING 2026-11: one sub-info style in every category */
.list-feature { margin: 22px 0 0; padding: 0; }
.list-feature li { align-items: flex-start; }
.list-feature li::before { content: '\f00c'; flex: none; font-family: 'Font Awesome 6 Free'; font-size: 0.8rem; font-weight: 900; line-height: 1.7; color: var(--accent); }
.step-points li { padding-left: 22px; }
.step-points li::before { content: '\f00c'; top: 0; left: 0; width: auto; height: auto; border-radius: 0; background: none; font-family: 'Font Awesome 6 Free'; font-size: 0.72rem; font-weight: 900; line-height: 1.7; color: var(--accent); }
.character-card .list-feature { margin-top: 12px; text-align: left; }
.lp-list-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.lp-list-columns li:last-child { border-bottom: 1px solid var(--border); }
@media (max-width: 640px) {
    .lp-list-columns { grid-template-columns: minmax(0, 1fr); }
}