body {
    margin: 0;
    padding: 0;
    background-color: #060608; 
    
    
    background-image: 
        
        radial-gradient(circle at 0% 10%, rgba(0, 242, 254, 0.12) 0%, transparent 35%),
        
        radial-gradient(circle at 100% 35%, rgba(112, 0, 255, 0.12) 0%, transparent 40%),
        
        radial-gradient(circle at -10% 70%, rgba(0, 242, 254, 0.08) 0%, transparent 35%),
        
        radial-gradient(circle at 110% 95%, rgba(112, 0, 255, 0.1) 0%, transparent 40%);
        
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

@font-face {
    font-family: 'Lexend Deca';
    src: url('LexendDeca-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


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

html {
    scroll-behavior: smooth;
}

:where(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
    border-radius: 6px;
}

:root {
    --gradient-flow: linear-gradient(90deg, #2563eb, #7000ff, #ffffff, #7000ff, #2563eb);
    --bg-main: #0a0a0c;
    --bg-surface: #121216;
    --bg-card: #181820;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --accent-cyan: #00f0ff;
    --accent-purple: #7000ff;
    --border-color: #262631;
    
    
    --gradient-animation: linear-gradient(90deg, #2563eb, #7000ff, #ffffff, #7000ff, #2563eb);
    --font-titles: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Lexend Deca', sans-serif;
}


@keyframes textShine {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}

@keyframes flow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

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


.gradient-text {
    background: var(--gradient-flow);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flow 3s linear infinite;
}


.logo-text {
    font-family: var(--font-titles);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: var(--gradient-flow);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flow 3s linear infinite;
}


.btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-align: center;
}


.btn-primary, .btn-card-platinum {
    background: var(--gradient-flow);
    background-size: 200% auto;
    animation: flow 3s linear infinite;
    color: #fff;
    border: none;
}


.hero-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 3px;         
    color: var(--accent-cyan);
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.9;
    text-align: center;
}

.gradient-text {
    display: inline-block;      
    white-space: nowrap;        
    
    
    background: var(--gradient-flow);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flow 3s linear infinite;
    filter: drop-shadow(0 0 15px rgba(112, 0, 255, 0.3));
}


.game-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 900px) {
    .game-logo-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 560px) {
    .game-logo-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0; }
    .game-logo-item { padding: 18px; border-radius: 16px; }
}


.how-it-works {
    padding-bottom: 160px; 
}


.how-container {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 60px;
    padding: 100px 0;
}


.how-video-container {
    position: relative;
    z-index: 1;
    flex: 1;
}

.how-video-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(112, 0, 255, 0.12) 0%, transparent 70%);
    z-index: -1;
}


.safety-section {
    padding: 60px 0 120px;
}

.safety-badge {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 35px;
    max-width: 900px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.safety-badge:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(0, 255, 135, 0.2);
}

.safety-icon {
    width: 64px;
    height: 64px;
    background: rgba(0, 255, 135, 0.1); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ff87;
    flex-shrink: 0;
}

.safety-icon svg {
    width: 32px;
    height: 32px;
}


.how-section {
    border-top: 1px solid var(--border-color); 
    padding: 100px 0;
}


.games-section {
    border-top: 1px solid var(--border-color); 
    padding: 160px 0;
    background-color: rgba(0, 0, 0, 0.1);
}


.safety-section {
    border-top: 1px solid rgba(255, 255, 255, 0.03); 
    padding: 80px 0 140px;
}


.safety-text {
    text-align: left;
}

.safety-text h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: white;
}

.safety-text p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}


@media (max-width: 768px) {
    .how-container, .safety-badge {
        flex-direction: column;
        text-align: center;
    }
    .safety-text {
        text-align: center;
    }
}


.games-section {
    padding: 140px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.03); 
    background-color: rgba(0, 0, 0, 0.2); 
}


.games-section .section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 15px;
    font-weight: 800;
}

.games-section .section-subtitle {
    margin-bottom: 70px; 
}


.game-logo-item {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.game-logo-item img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    
    filter: grayscale(100%) brightness(1.5) opacity(0.5);
    transition: all 0.4s ease;
}


.game-logo-item:hover {
    border-color: var(--accent-cyan);
    background-color: rgba(0, 240, 255, 0.02);
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.1);
}

.game-logo-item:hover img {
    filter: grayscale(0%) brightness(1) opacity(1);
    transform: scale(1.1);
}


.game-logo-item.placeholder {
    border: 2px dashed var(--border-color);
    background: transparent;
    color: var(--text-muted);
}

.game-logo-item.placeholder:hover {
    border-color: var(--accent-purple);
    color: white;
}

.game-logo-item.placeholder span {
    font-size: 2.5rem;
    font-weight: 800;
}


.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


.steps-container {
    position: relative;
    padding: 40px 0;
}


.steps-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(112, 0, 255, 0.2), transparent);
    z-index: 0;
}

.steps-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    position: relative;
    z-index: 1;
}

.step-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 50px 30px;
    border-radius: 16px;
    position: relative;
    overflow: hidden; 
    transition: all 0.3s ease;
}

.step-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1);
}


.step-number {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 8rem;
    font-weight: 900;
    color: white;
    opacity: 0.03; 
    line-height: 1;
    pointer-events: none;
}


.hero-main-title {
    font-size: clamp(3rem, 10vw, 5.5rem); 
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 25px;
    text-align: center;
    letter-spacing: -2px;
    color: #ffffff;             
}


.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(112, 0, 255, 0.1); 
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--accent-cyan); 
    border: 1px solid rgba(112, 0, 255, 0.2);
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}


.hero-main-title {
    font-size: clamp(2.8rem, 9vw, 5.2rem); 
    line-height: 1.1;
    margin-bottom: 30px;
}


.feature-card-item h3 {
    margin-top: 5px;
}


.gradient-text {
    background: var(--gradient-flow);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flow 3s linear infinite;
    filter: drop-shadow(0 0 15px rgba(112, 0, 255, 0.3)); 
}


.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 40px;        
    line-height: 1.6;
    text-align: center;
}


.feature-card-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 40px 32px;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.feature-card-item:hover {
    border-color: var(--accent-purple);
    transform: translateY(-8px);
    background-color: rgba(112, 0, 255, 0.03); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(112, 0, 255, 0.15);
}


.features, .how-it-works, .games-section, .faq-section, .pricing {
    padding: 140px 0; 
}

.hero {
    padding: 180px 0 140px; 
}


.hero-main-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #ffffff;             
    margin-top: 0;
    margin-bottom: 35px;
    text-align: center;
    opacity: 1;                 
}


@media (max-width: 480px) {
    .hero-main-title {
        font-size: 1.3rem;
    }
}


.hero-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.btn-primary:hover, .btn-card-platinum:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(112, 0, 255, 0.3);
}


h1, h2, h3, .tier-name, .price, .hero-eyebrow {
    font-family: var(--font-titles);
}

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

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

.tier-logo {
    
    width: 400px;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.3)); 
    transition: transform 0.3s ease;
    object-fit: contain;
    
    
    mix-blend-mode: screen; 
}


.tier-name {
    text-align: center;          
    font-size: 3.5rem;           
    font-weight: 700;            
    margin-bottom: 15px;         
    
    
    font-family: inherit;        
    text-transform: capitalize;  
}


.tier-logo {
    width: 300px;
    height: 300px;                
    display: block;
    margin: 0 auto 20px auto;
    
    
    border-radius: 20px;         
    object-fit: cover;           
    background-color: #111;      
}


.btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}


.grid {
    display: grid;
    gap: 32px;
}


.navbar {
    background-color: rgba(10, 10, 12, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 70px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}


.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    text-decoration: none;
}

.logo img {
    height: 40px;
    width: auto;
    display: block;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.logo:hover img {
    transform: scale(1.05);
}


.logo-text {
    font-family: var(--font-titles);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    
    background: linear-gradient(90deg, #2563eb, #7000ff, #ffffff, #7000ff, #2563eb);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 5s linear infinite;
}


@keyframes textShine {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    margin-left: 32px;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--accent-cyan);
}


.hero {
    padding: 160px 0 100px;
    background: radial-gradient(circle at 80% 20%, rgba(112, 0, 255, 0.15), transparent 50%),
                radial-gradient(circle at 10% 80%, rgba(0, 240, 255, 0.08), transparent 40%);
}


.badge {
    background-color: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--accent-cyan);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 24px;
}


.hero-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 540px;
    margin: 0 auto
}

.hero-actions {
    display: flex;
    gap: 16px;
}


.btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-align: center;
}


.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 240, 255, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

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


.stat-value.up { color: #00ff87; }
.stat-value.down { color: var(--accent-cyan); }


.section-title {
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 64px;
}


.features {
    padding: 100px 0;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}

.feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.feature-card-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 40px 32px;
    border-radius: 10px;
    transition: border-color 0.2s ease;
}

.feature-card-item:hover {
    border-color: var(--accent-cyan);
}

.feature-card-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.feature-card-item p {
    color: var(--text-muted);
    font-size: 15px;
}


.how-it-works {
    padding: 100px 0;
    border-top: 1px solid var(--border-color);
}

.steps-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.step-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 40px 32px;
    border-radius: 10px;
    position: relative;
}

.step-number {
    font-family: var(--font-titles);
    font-size: 14px;
    font-weight: 800;
    color: var(--accent-cyan);
    background-color: rgba(0, 240, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
}

.step-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.step-card p {
    color: var(--text-muted);
    font-size: 15px;
}


.games-section {
    padding: 80px 0;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}


.pricing {
    padding: 100px 0;
    border-top: 1px solid var(--border-color); 
}

.pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
}

.price-card {
    background-color: var(--bg-surface);
    border: 1px solid #222;
    border-radius: 16px;
    background: #111; 
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.price-card.popular {
    border-color: var(--accent-purple);
    box-shadow: 0 16px 32px rgba(112, 0, 255, 0.15);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-purple);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.tier-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.price {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 16px;
}

.price-period {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
}

.tier-desc {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 32px;
    min-height: 44px;
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin-bottom: 32px;
}

.tier-features {
    list-style: none;
    margin-bottom: 40px;
    flex-grow: 1;
}

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

.tier-features li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent-cyan);
    font-weight: 700;
}

.price-card .btn {
    width: 100%;
}

.btn-card-free {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}
.btn-card-free:hover { background-color: rgba(255,255,255,0.05); }

.btn-card-silver {
    background-color: var(--text-main);
    color: #000;
    font-weight: 700;
}
.btn-card-silver:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,255,255,0.15); }


.btn-card-platinum:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(112,0,255,0.3); }


.faq-section {
    padding: 100px 0;
    background-color: var(--bg-main);
    border-top: 1px solid var(--border-color);
}

.faq-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 50px;
    font-size: 16px;
}

.faq-accordion-wrapper {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px; 
}


html {
    interpolate-size: allow-keywords; 
}


.faq-section {
    padding: 100px 0;
    background-color: var(--bg-main);
}

.faq-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 50px;
    font-size: 16px;
}

.faq-accordion-wrapper {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


.faq-item:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.1);
}

.faq-item[open] {
    border-color: var(--accent-purple);
}


.faq-item summary {
    padding: 24px;
    font-family: var(--font-heading, sans-serif);
    font-weight: 600;
    font-size: 17px;
    color: var(--text-main);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

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


.faq-icon {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.35s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    color: var(--accent-purple);
}


.faq-item::details-content {
    height: 0;
    overflow: clip; 
    transition: 
        height 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
        content-visibility 0.35s cubic-bezier(0.25, 1, 0.5, 1) allow-discrete;
}

.faq-item[open]::details-content {
    height: auto; 
}


.faq-answer {
    padding: 0 24px 24px 24px;
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

.faq-answer strong {
    color: var(--text-main);
}


.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


.faq-item:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.1);
}


.faq-item summary {
    padding: 24px;
    font-family: var(--font-heading, sans-serif);
    font-weight: 600;
    font-size: 17px;
    color: var(--text-main);
    list-style: none; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}


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


.faq-icon {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.3s ease, color 0.3s ease;
}


.faq-item[open] {
    border-color: var(--accent-purple);
}

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    color: var(--accent-purple);
}


.faq-answer {
    padding: 0 24px 24px 24px;
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

.faq-answer strong {
    color: var(--text-main);
}


.footer {
    border-top: 1px solid var(--border-color);
    padding: 40px 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.footer-links {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color .2s ease;
}

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


@media (max-width: 968px) {
    .hero-subtitle {
        max-width: 500px;
        margin: 0 auto 20px auto;
    }
}


.how-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 80px 0;
}


.how-text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;  
}

.how-title {
    font-family: var(--font-heading, sans-serif);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 15px 0; 
}

.how-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    margin: 0 0 30px 0; 
    font-style: italic;
}


.how-video-container {
    flex: 1.2; 
    display: flex;
    justify-content: center;
}


.tos-section { padding: 100px 0; background-color: var(--bg-main); border-top: 1px solid var(--border-color); }
.tos-content { 
    max-width: 800px; 
    margin: 40px auto 0; 
    color: var(--text-muted); 
    line-height: 1.8; 
    background: var(--bg-card); 
    padding: 40px; 
    border-radius: 12px; 
    border: 1px solid var(--border-color);
}
.tos-content h3 { color: var(--text-main); margin-top: 24px; margin-bottom: 8px; font-size: 18px; }
.tos-content p { margin-bottom: 16px; }


.tos-content h3 {
    font-family: var(--font-heading, sans-serif); 
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 5px;
}


section,
header,
main,
.games-section,
.how-section,
.safety-section,
.faq-section,
.tos-section {
    background: transparent !important;
    background-color: transparent !important;
}


.tos-content {
    background-color: #111115 !important;
    border: 1px solid var(--border-color) !important;
}

/* Surface colour only - locking the border here used to override
   .faq-item:hover and .faq-item[open], killing both states. */
.faq-item {
    background-color: #111115;
}


:root {
    
    --buy-now-bg: #8B5CF6;        
    --buy-now-hover: #7C3AED;     

    
    --cart-bg: rgba(139, 92, 246, 0.1); 
    --cart-hover-bg: rgba(139, 92, 246, 0.2); 
    --cart-border: #8B5CF6;      
    --cart-text: #ffffff;        
}


#embed-modal [class*="rainbow-button"] {
    background: var(--buy-now-bg) !important;
    background-color: var(--buy-now-bg) !important;
    border-color: var(--buy-now-bg) !important;
}

#embed-modal [class*="rainbow-button"]:hover {
    background-color: var(--buy-now-hover) !important;
    border-color: var(--buy-now-hover) !important;
}


#embed-modal button[outline],
#embed-modal [class*="btn-outline"] {
    background: var(--cart-bg) !important;
    background-color: var(--cart-bg) !important;
    border: 1px solid var(--cart-border) !important;
    color: var(--cart-text) !important;
}

#embed-modal button[outline]:hover,
#embed-modal [class*="btn-outline"]:hover {
    background-color: var(--cart-hover-bg) !important;
    border-color: var(--cart-border) !important;
}


#embed-modal .dark [class*="rainbow-button"],
#embed-modal.dark [class*="rainbow-button"],
#embed-modal .dark [class*="rainbow-button"] span,
#embed-modal.dark [class*="rainbow-button"] span,
#embed-modal button[outline] *,
#embed-modal [class*="btn-outline"] * {
    color: #ffffff !important;
}


#embed-modal:not(.dark) [class*="rainbow-button"],
#embed-modal:not(.dark) [class*="rainbow-button"] span {
    color: #0d0c10 !important; 
}


#embed-modal [class*="close"] svg path,
#embed-modal svg path {
    stroke: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}

#embed-modal [class*="close"] {
    opacity: 1 !important;
    color: #ffffff !important;
}


:root {
    --mx: 50vw;
    --my: 30vh;
    --hero-progress: 0;
    --step-progress: 0;
    --ease-out-expo: cubic-bezier(.16,1,.3,1);
}

html {
    scroll-padding-top: 86px;
}

body {
    background-color: #050509;
    background-image: radial-gradient(circle at 10% 15%, rgba(0,240,255,.08), transparent 35rem), radial-gradient(circle at 90% 65%, rgba(112,0,255,.10), transparent 38rem);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.navbar {
    top: 14px;
    width: min(1180px, calc(100% - 28px));
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(7,7,13,.62);
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.navbar.scrolled {
    background: rgba(7,7,13,.84);
    border-color: rgba(111,89,255,.22);
    box-shadow: 0 24px 80px rgba(0,0,0,.4), 0 0 50px rgba(91,60,255,.08);
}

.nav-container {
    height: 64px;
}

.nav-links a {
    position: relative;
    padding: 10px 2px;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 3px;
    height: 1px;
    background: linear-gradient(90deg, #00eaff, #7c3cff);
    transition: right .3s var(--ease-out-expo);
}

.nav-links a:hover::after {
    right: 0;
}

.cinematic-hero {
    display: block !important;
    justify-content: initial !important;
    align-items: initial !important;
    height: 430vh;
    min-height: 3000px;
    padding: 0;
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-bottom: none;
    background: #050509;
}

.hero-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
}

.cinematic-stage {
    height: 100%;
    max-width: 1500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1600px;
    transform-style: preserve-3d;
}

#optrix-space {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -4;
    opacity: .72;
}

.hero-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    background-image: linear-gradient(rgba(123,91,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,227,255,.055) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.8) 38%, rgba(0,0,0,.15) 82%, transparent 100%);
    transform-origin: center 85%;
    transform: perspective(700px) rotateX(68deg) translateY(calc(32vh - var(--hero-progress) * 18vh)) scale(1.8);
    opacity: calc(.18 + var(--hero-progress) * .45);
}

.hero-orb {
    position: absolute;
    top: 0;
    width: 50vw;
    height: 100%;
    z-index: -2;
    filter: blur(18px);
    pointer-events: none;
}

.hero-orb-cyan {
    left: -12vw;
    background: radial-gradient(circle, rgba(0,235,255,.16), transparent 62%);
    transform: translate3d(calc(var(--hero-progress) * 18vw), calc(var(--hero-progress) * -6vh), 0);
}

.hero-orb-purple {
    left: 58vw;
    background: radial-gradient(circle, rgba(113,42,255,.20), transparent 62%);
    transform: translate3d(calc(var(--hero-progress) * -20vw), calc(var(--hero-progress) * 8vh), 0);
}

.hero-copy {
    position: absolute;
    z-index: 7;
    width: min(960px, calc(100% - 36px));
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, calc(-50% - var(--hero-progress) * 46vh), 80px) scale(calc(1 - var(--hero-progress) * .17));
    opacity: clamp(0, calc(1 - var(--hero-progress) * 2.5), 1);
    filter: blur(calc(var(--hero-progress) * 8px));
}

.hero-main-title {
    font-size: clamp(3.6rem, 8.6vw, 8.7rem);
    line-height: .88;
    letter-spacing: -.075em;
    max-width: 1200px;
    margin: 0 auto 26px;
    text-wrap: balance;
    font-weight: 900;
}

.hero-main-title .gradient-text {
    white-space: normal;
}

.hero-subtitle {
    max-width: 720px;
    font-size: clamp(1rem, 1.45vw, 1.22rem);
    line-height: 1.7;
    margin: 0 auto 34px;
}

.hero-actions {
    justify-content: center;
}

.badge {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 0 45px rgba(0,236,255,.06);
}

.btn {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.btn::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 170%;
    top: -35%;
    left: -110px;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transition: left .65s var(--ease-out-expo);
}

.btn:hover::before {
    left: calc(100% + 30px);
}

.app-visual-wrap {
    position: absolute;
    left: 50%;
    top: 51%;
    width: min(920px, 62vw);
    aspect-ratio: 1.56;
    z-index: 6;
    transform-style: preserve-3d;
    transform: translate3d(-50%, calc(-42% + (1 - var(--hero-progress)) * 32vh), 0) scale(clamp(.22, calc(.22 + var(--hero-progress) * .95), 1.06));
    opacity: clamp(0, calc((var(--hero-progress) - .10) * 4.5), 1);
    will-change: transform, opacity;
}

.optrix-app-shell {
    position: absolute;
    inset: 6%;
    border-radius: 26px;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateX(calc(15deg - var(--hero-progress) * 14deg)) rotateY(calc(-23deg + var(--hero-progress) * 23deg)) rotateZ(calc(2deg - var(--hero-progress) * 2deg));
    background: linear-gradient(145deg, rgba(20,22,34,.98), rgba(5,6,12,.98));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 90px 160px rgba(0,0,0,.72), 0 0 90px rgba(90,52,255,.20), inset 0 1px 0 rgba(255,255,255,.12);
    will-change: transform;
}

.optrix-app-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(130deg, rgba(0,237,255,.62), transparent 25%, transparent 68%, rgba(123,61,255,.70));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}

.app-topbar {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.app-nav-item.active {
    background: linear-gradient(90deg, rgba(0,229,255,.10), rgba(118,55,255,.11));
    color: white;
    box-shadow: inset 0 0 0 1px rgba(92,103,255,.16);
}


.scan-light {
    position: absolute;
    inset: -35% -10%;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 42%, rgba(0,239,255,.08) 48%, rgba(255,255,255,.13) 50%, rgba(113,67,255,.08) 52%, transparent 58%);
    transform: translateX(calc(-45% + var(--hero-progress) * 90%));
    mix-blend-mode: screen;
}

.screen-reflection {
    position: absolute;
    width: 45%;
    height: 160%;
    top: -30%;
    left: -20%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);
    transform: rotate(18deg) translateX(calc(var(--hero-progress) * 145%));
    pointer-events: none;
}

.app-glow {
    position: absolute;
    inset: -14%;
    background: radial-gradient(circle, rgba(93,55,255,.26), rgba(0,231,255,.08) 32%, transparent 68%);
    filter: blur(25px);
    transform: translateZ(-80px) scale(calc(.8 + var(--hero-progress) * .28));
    opacity: calc(.35 + var(--hero-progress) * .6);
}

.orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(109,82,255,.16);
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.orbit::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00eaff;
    box-shadow: 0 0 22px #00eaff;
    left: 12%;
    top: 14%;
}

.orbit-one {
    width: 112%;
    height: 76%;
    transform: translate(-50%,-50%) rotateX(67deg) rotateZ(calc(12deg + var(--hero-progress) * 90deg));
}

.orbit-two {
    width: 92%;
    height: 112%;
    transform: translate(-50%,-50%) rotateY(68deg) rotateZ(calc(-18deg - var(--hero-progress) * 75deg));
    border-color: rgba(0,229,255,.12);
}

.orbit-three {
    width: 74%;
    height: 102%;
    transform: translate(-50%,-50%) rotateY(-66deg) rotateZ(calc(52deg + var(--hero-progress) * 60deg));
}

.hero-scenes {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    visibility: hidden;
}

.hero-ready .hero-scenes {
    visibility: visible;
}

.hero-scenes {
    --stage-app: min(920px, 62vw);
    --stage-gap: clamp(44px, 3.75vw, 72px);
    --stage-clear: calc((var(--stage-app) * .4664 + var(--stage-gap)) * .9375);
    --stage-gutter: 24px;
    --stage-gutter-rail: 46px;
    --stage-room-l: calc((50vw - var(--stage-gutter)) * .9375 - var(--stage-clear));
    --stage-room-r: calc((50vw - var(--stage-gutter-rail)) * .9375 - var(--stage-clear));
}

.hero-scene {
    position: absolute;
    left: auto;
    right: calc(50% + var(--stage-clear));
    top: 50%;
    width: min(330px, var(--stage-room-l));
    transform: translate3d(-35px,-50%,100px);
    opacity: 0;
    filter: blur(10px);
    transition: opacity .35s ease, transform .55s var(--ease-out-expo), filter .45s ease;
}

.hero-scene:nth-child(2) {
    left: calc(50% + var(--stage-clear));
    right: auto;
    width: min(300px, var(--stage-room-r));
    text-align: right;
    transform: translate3d(35px,-50%,100px);
}

.hero-scene:nth-child(3) {
    left: auto;
    right: calc(50% + var(--stage-clear));
}

.hero-scene.active {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,-50%,100px);
}

.hero-scene span {
    display: block;
    color: #00eaff;
    font-size: 10px;
    letter-spacing: .23em;
    font-weight: 800;
    margin-bottom: 10px;
}

.hero-scene strong {
    display: block;
    font-family: var(--font-titles);
    font-size: clamp(1.9rem, 3.4vw, 4.35rem);
    overflow-wrap: break-word;
    line-height: .92;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.scene-fps strong,
.scene-network strong {
    font-size: clamp(1.9rem, 2.9vw, 3.25rem);
}

.hero-scene p {
    margin-top: 16px;
    max-width: 100%;
    color: rgba(255,255,255,.48);
    font-size: 13px;
}

.hero-scene:nth-child(2) p {
    margin-left: auto;
}

.scene-stat {
    margin-top: 24px;
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    backdrop-filter: blur(12px);
}

.scene-stat b {
    font-size: 20px;
    background: linear-gradient(90deg, #00eaff, #9862ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.scene-stat em {
    font-style: normal;
    font-size: 8px;
    letter-spacing: .15em;
    color: rgba(255,255,255,.42);
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.32);
    font-size: 8px;
    letter-spacing: .22em;
    font-weight: 800;
    z-index: 9;
    opacity: clamp(0, calc(1 - var(--hero-progress) * 4), 1);
}

.scroll-cue div {
    width: 22px;
    height: 34px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.2);
    position: relative;
}

.scroll-cue i {
    width: 3px;
    height: 7px;
    background: #00eaff;
    border-radius: 3px;
    position: absolute;
    top: 6px;
    left: 8px;
    animation: scrollPulse 1.7s ease-in-out infinite;
}

.hero-progress {
    position: absolute;
    z-index: 10;
    right: 16px;
    top: 50%;
    width: 2px;
    height: 150px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.07);
    overflow: hidden;
}

.hero-progress i {
    display: block;
    height: calc(var(--hero-progress) * 100%);
    width: 100%;
    background: linear-gradient(#00eaff, #7b3cff);
    box-shadow: 0 0 14px #6d42ff;
}

@keyframes scrollPulse {
    0%,100% { transform: translateY(0); opacity: .35; }
    50% { transform: translateY(12px); opacity: 1; }
}

.features {
    position: relative;
    z-index: 12;
    margin-top: -18vh;
    padding-top: 210px;
    isolation: isolate;
}

/* The scrim that hides the pinned cinematic app behind the Features heading.
   It lives on a pseudo-element because `section { background: transparent !important }`
   further up the sheet wins over any background set on .features itself. */
.features::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(5,5,9,.96) 170px, #07070b 100%);
}

.feature-grid, .pricing-grid {
    perspective: 1200px;
}

.feature-card-item, .step-card, .game-logo-item, .price-card, .safety-badge, .how-video-container {
    transform-style: preserve-3d;
}

/* PERF: promote only while the pointer is actually tilting the card, instead of
   keeping ~15 permanent compositor layers alive for the whole page lifetime. */
.feature-card-item:hover, .game-logo-item:hover, .price-card:hover, .how-video-container:hover {
    will-change: transform;
}

.feature-card-item {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 35px 80px rgba(0,0,0,.25);
}

.feature-card-item::after, .price-card::after, .game-logo-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(350px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(84,209,255,.12), transparent 45%);
    transition: opacity .25s ease;
}

.feature-card-item:hover::after, .price-card:hover::after, .game-logo-item:hover::after {
    opacity: 1;
}

.feature-icon, .step-number, .tier-logo {
    transform: translateZ(28px);
}

.feature-card-item h3, .price-card .tier-name {
    transform: translateZ(20px);
}

.section-reveal .section-title, .section-reveal .how-title {
    transition: transform .9s var(--ease-out-expo), opacity .8s ease, filter .8s ease;
}

.section-reveal:not(.section-visible) .section-title, .section-reveal:not(.section-visible) .how-title {
    opacity: 0;
    filter: blur(9px);
    transform: translateY(36px) scale(.97);
}

.reveal-3d {
    opacity: 0;
    transform: translate3d(0,45px,0) rotateX(8deg) scale(.97);
    filter: blur(5px);
    transition: opacity .8s ease, transform 1s var(--ease-out-expo), filter .8s ease;
}

.reveal-3d.visible-3d {
    opacity: 1;
    transform: translate3d(0,0,0) rotateX(0) scale(1);
    filter: blur(0);
}

.steps-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(var(--step-progress) * 100%);
    height: 2px;
    z-index: 0;
    background: linear-gradient(90deg, #00eaff, #6f40ff, #a76bff);
    box-shadow: 0 0 18px rgba(69,95,255,.5);
    transform: translateY(-50%);
    pointer-events: none;
}

.step-card {
    position: relative;
    z-index: 2;
}

.step-card.active-step .step-number {
    color: white;
    text-shadow: 0 0 22px rgba(0,234,255,.6);
    transform: translateZ(28px) scale(1.07);
}

.game-logo-grid {
    perspective: 1400px;
}

.game-logo-item {
    position: relative;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0,0,0,.22);
}

.game-logo-item.visible-3d:nth-child(2n) {
    transition-delay: .06s;
}

.game-logo-item.visible-3d:nth-child(3n) {
    transition-delay: .12s;
}

.how-section {
    overflow: hidden;
    position: relative;
}

.how-section::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    top: 50%;
    right: -300px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(105,58,255,.14), transparent 65%);
    pointer-events: none;
}

.how-video-container {
    border-radius: 24px;
    box-shadow: 0 45px 110px rgba(0,0,0,.42), 0 0 80px rgba(79,55,255,.08);
}

.optrix-promo-video {
    display: block;
    width: 100%;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.09);
}

.price-card {
    position: relative;
    overflow: visible;
}

.price-card::after {
    border-radius: inherit;
}

.price-card.popular {
    box-shadow: 0 35px 100px rgba(73,44,255,.20), 0 0 0 1px rgba(119,83,255,.18);
}

.safety-badge {
    overflow: hidden;
    position: relative;
}

.safety-badge::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    left: -90px;
    top: -90px;
    background: radial-gradient(circle, rgba(0,255,135,.12), transparent 67%);
}

/* Short desktop viewports (1366x768, 1280x720): the hero block was taller than
   the space between the floating navbar and the scroll cue, so the badge ended up
   behind the nav. Scale the stack against viewport height as well as width.
   1920x1080 and 1600x900 are above this threshold and stay exactly as they were. */
@media (min-width: 821px) and (max-height: 800px) {
    .hero-copy .badge { margin-bottom: 14px; }
    .hero-eyebrow { margin-bottom: 10px; }
    .hero-main-title {
        font-size: clamp(2.8rem, min(8.6vw, 12.8vh), 8.7rem);
        margin-bottom: 18px;
    }
    .hero-subtitle {
        font-size: clamp(.95rem, 1.3vw, 1.1rem);
        margin-bottom: 22px;
    }
    .hero-actions { margin-top: 0; }
}

@media (max-width: 1100px) {
    .cinematic-hero { height: 390vh; }
    .app-visual-wrap { width: min(700px, 62vw); }
    .hero-scenes { --stage-app: min(700px, 62vw); }
}

/* Under ~1200px the side columns can no longer clear both the app and the viewport
   edge, so the cinematic text moves to the centred bottom band the site already
   uses on small screens. Flat transform: the z=100px lift used to magnify the band
   ~6.7% about the stage centre, which pushed it past both viewport edges. */
@media (max-width: 1200px) {
    .hero-scenes {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 0 20px 90px;
    }
    .hero-scene,
    .hero-scene:nth-child(2),
    .hero-scene:nth-child(3) {
        left: 20px;
        right: 20px;
        top: auto;
        bottom: 8vh;
        width: auto;
        max-width: 560px;
        margin-inline: auto;
        text-align: center;
        transform: translate3d(0, 20px, 0);
    }
    .hero-scene.active { transform: translate3d(0, 0, 0); }
    .hero-scene p,
    .hero-scene:nth-child(2) p { margin-left: auto; margin-right: auto; margin-top: 12px; max-width: 52ch; font-size: 12.5px; }
    .hero-scene strong,
    .scene-fps strong,
    .scene-network strong { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
    .scene-stat { margin-top: 16px; }

    /* Stack instead of overlap: the app takes the upper band, the copy the lower
       one, so the scene text never sits on top of the dashboard. */
    .app-visual-wrap {
        top: 33%;
        width: min(64vh, 76vw);
    }
}

@media (max-width: 820px) {
    .navbar { top: 8px; width: calc(100% - 16px); }
    .nav-links { display: none; }
    .cinematic-hero { height: 330vh; min-height: 2400px; }
    .hero-sticky { min-height: 620px; }
    .hero-main-title { font-size: clamp(3.1rem, 15vw, 5.7rem); }
    .hero-copy { width: calc(100% - 46px); }
    .app-visual-wrap { width: 106vw; top: 38%; }
    .optrix-app-shell { inset: 10%; border-radius: 20px; }
    .hero-scene, .hero-scene:nth-child(2), .hero-scene:nth-child(3) { bottom: 7vh; max-width: 520px; }
    .hero-scene strong, .scene-fps strong, .scene-network strong { font-size: clamp(2rem, 9vw, 3.2rem); }
    .scene-stat { margin-top: 12px; }
    .scroll-cue { bottom: 18px; }
    .hero-progress { right: 8px; }
    .features { margin-top: -10vh; padding-top: 160px; }
}

@media (max-width: 820px) and (max-height: 700px) {
    .hero-copy .badge { margin-bottom: 10px; }
    .hero-eyebrow { margin-bottom: 8px; }
    .hero-main-title { font-size: clamp(2.2rem, 9.5vw, 3.3rem); margin-bottom: 14px; }
    .hero-subtitle { font-size: .88rem; margin-bottom: 16px; }
    .hero-actions { margin-top: 0; gap: 10px; }
    .scroll-cue { display: none; }
}

@media (max-width: 560px) {
    .cinematic-hero { height: 300vh; min-height: 2200px; }
    .hero-main-title { letter-spacing: -.06em; }
    .hero-subtitle { font-size: .93rem; }
    .hero-actions { flex-direction: column; align-items: stretch; width: min(310px, 100%); margin-inline: auto; }
    .app-visual-wrap { width: 132vw; top: 41%; }
    .app-topbar { height: 35px; }
    .hero-scene, .hero-scene:nth-child(2), .hero-scene:nth-child(3) { bottom: 7vh; }
    .hero-scene p { display: none; }
    .scene-stat { padding: 6px 9px; }
    .scene-stat b { font-size: 15px; }
    .hero-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .cinematic-hero { height: 160vh; min-height: 1200px; }
    .hero-copy { opacity: 1; filter: none; }
    .optrix-app-shell { transform: none; }
    .orbit, .scan-light, .screen-reflection, .hero-grid { display: none; }
    .reveal-3d, .section-reveal:not(.section-visible) .section-title,
    .section-reveal:not(.section-visible) .how-title { opacity: 1; filter: none; transform: none; }
}


.features {
    border-top: none !important;
}

.hero-copy .badge,
.hero-copy .hero-eyebrow,
.hero-copy .hero-main-title,
.hero-copy .hero-subtitle,
.hero-copy .hero-actions {
    opacity: 0;
    animation: heroEntrance .9s var(--ease-out-expo) forwards;
}

.hero-copy .badge { animation-delay: .08s; }
.hero-copy .hero-eyebrow { animation-delay: .14s; }
.hero-copy .hero-main-title { animation-delay: .20s; }
.hero-copy .hero-subtitle { animation-delay: .31s; }
.hero-copy .hero-actions { animation-delay: .40s; }

@keyframes heroEntrance {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(.975);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

.price-card.standard,
.price-card.silver,
.price-card.premium {
    background: #111;
}

.price-card.standard {
    border-color: rgba(100, 82, 255, .24);
    box-shadow: 0 35px 95px rgba(35, 51, 255, .10), 0 0 48px rgba(179, 58, 255, .08);
}

.price-card.silver {
    border-color: rgba(215, 222, 235, .20);
    box-shadow: 0 35px 95px rgba(214, 221, 236, .09), 0 0 42px rgba(238, 242, 250, .06);
}

.price-card.premium,
.price-card.premium.popular {
    background: #111;
    border-color: rgba(79, 163, 255, .54);
    box-shadow: 0 35px 105px rgba(22, 104, 255, .16), 0 0 58px rgba(62, 177, 255, .11), 0 0 0 1px rgba(96, 182, 255, .10);
}

.price-card.standard .tier-logo {
    filter: drop-shadow(0 0 12px rgba(78, 107, 255, .42)) drop-shadow(0 0 24px rgba(186, 55, 255, .22));
}

.price-card.silver .tier-logo {
    filter: drop-shadow(0 0 12px rgba(235, 239, 247, .34)) drop-shadow(0 0 24px rgba(173, 184, 204, .17));
}

.price-card.premium .tier-logo {
    filter: drop-shadow(0 0 13px rgba(78, 178, 255, .43)) drop-shadow(0 0 26px rgba(38, 126, 255, .22));
}

.price-card.standard:hover {
    box-shadow: 0 38px 105px rgba(35, 51, 255, .15), 0 0 62px rgba(179, 58, 255, .12);
}

.price-card.silver:hover {
    box-shadow: 0 38px 105px rgba(214, 221, 236, .13), 0 0 56px rgba(238, 242, 250, .09);
}

.price-card.premium:hover,
.price-card.premium.popular:hover {
    box-shadow: 0 40px 115px rgba(22, 104, 255, .21), 0 0 72px rgba(62, 177, 255, .15), 0 0 0 1px rgba(96, 182, 255, .13);
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy .badge,
    .hero-copy .hero-eyebrow,
    .hero-copy .hero-main-title,
    .hero-copy .hero-subtitle,
    .hero-copy .hero-actions {
        opacity: 1;
        animation: none !important;
        transform: none;
        filter: none;
    }
}

.optrix-app-shell {
    border-radius: 19px;
    background: #09070f;
    border-color: rgba(139, 74, 255, .34);
    box-shadow: 0 90px 160px rgba(0,0,0,.72), 0 0 95px rgba(91,43,255,.23), inset 0 1px 0 rgba(255,255,255,.11);
}

.optrix-app-shell::before {
    background: linear-gradient(130deg, rgba(0,237,255,.48), transparent 19%, transparent 72%, rgba(141,55,255,.72));
}

.app-topbar {
    height: 29px;
    padding: 0 8px 0 10px;
    background: #17151d;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.app-window-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.88);
    font-size: 8px;
    font-weight: 600;
}

.app-window-title img {
    width: 13px;
    height: 13px;
    object-fit: cover;
    border-radius: 3px;
}

.window-actions {
    height: 100%;
    display: flex;
    align-items: stretch;
    margin-right: -8px;
}

.window-actions span {
    width: 30px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    line-height: 1;
}

.window-actions span:last-child {
    font-size: 14px;
}

.app-body.app-body-real {
    height: calc(100% - 29px);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 195px;
    background: #08060f;
}

.app-icon-rail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid rgba(129,66,224,.32);
    background: #08070e;
    padding: 13px 5px 9px;
    position: relative;
}

.rail-brand {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 17px;
}

.rail-brand img {
    width: 31px;
    height: 31px;
    object-fit: cover;
    border-radius: 7px;
    filter: drop-shadow(0 0 8px rgba(84,67,255,.42));
}

.rail-nav,
.rail-bottom {
    display: grid;
    gap: 6px;
    width: 100%;
}

.rail-bottom {
    margin-top: auto;
    padding-bottom: 12px;
}

.app-icon-rail .app-nav-item {
    width: 38px;
    height: 34px;
    padding: 0;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: rgba(224,216,255,.62);
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.app-icon-rail .app-nav-item svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-icon-rail .app-nav-item:nth-child(4) svg {
    fill: currentColor;
    stroke: none;
}

.app-icon-rail .app-nav-item.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(124,52,255,.23), rgba(88,34,180,.16));
    border-color: rgba(150,87,255,.63);
    box-shadow: inset 2px 0 0 #9b58ff, 0 0 18px rgba(102,48,255,.09);
}

.rail-online {
    position: absolute;
    left: 11px;
    bottom: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3ef292;
    box-shadow: 0 0 10px rgba(62,242,146,.55);
}

.real-dashboard {
    min-width: 0;
    padding: 12px 10px 9px 15px;
    display: grid;
    grid-template-rows: 94px 78px minmax(0, 1fr);
    gap: 9px;
    background: radial-gradient(circle at 54% 88%, rgba(74,26,133,.07), transparent 42%), #08060f;
}

.app-panel {
    border: 1px solid rgba(125,55,224,.54);
    background: linear-gradient(150deg, rgba(27,10,49,.94), rgba(18,7,35,.96));
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.sync-card {
    display: grid;
    grid-template-columns: 57px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
}

.sync-ring {
    width: 48px;
    height: 48px;
    border: 5px solid #8148d8;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    line-height: 1;
    box-shadow: 0 0 20px rgba(120,66,220,.13);
}

.sync-ring span {
    font-size: 25px;
    font-weight: 500;
    transform: translateY(1px);
}

.sync-ring small {
    margin-top: 2px;
    font-size: 5px;
    font-weight: 800;
}

.sync-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.sync-copy strong {
    color: #fff;
    font-size: 16px;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.sync-copy > span {
    font-size: 8px;
    color: rgba(255,255,255,.88);
}

.sync-copy small {
    font-size: 7px;
    color: #fff;
}

.profile-button {
    border: 1px solid rgba(218,184,255,.38);
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 8px;
    padding: 12px 12px;
    background: linear-gradient(135deg, #7c3cf0, #b44aff);
    box-shadow: 0 8px 20px rgba(125,53,246,.17), inset 0 1px 0 rgba(255,255,255,.25);
}

.hardware-row {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.hardware-card {
    padding: 10px 11px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hardware-card small,
.panel-kicker,
.system-load-head small {
    font-size: 6px;
    color: #fff;
    font-weight: 800;
}

.hardware-card strong {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.1;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hardware-card span {
    margin-top: 5px;
    font-size: 6.5px;
    color: rgba(255,255,255,.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.optimization-board {
    min-height: 0;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    padding: 9px;
    gap: 8px;
    overflow: hidden;
}

.orb-area {
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-kicker {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.optimization-orb {
    width: 180px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    background:
        radial-gradient(ellipse at 48% 52%, rgba(255,255,255,.22) 0 4%, rgba(171,137,255,.20) 10%, rgba(86,52,147,.19) 28%, rgba(19,11,39,.12) 48%, transparent 68%),
        radial-gradient(circle at center, rgba(78,33,143,.24), rgba(9,7,17,.08) 62%, transparent 64%);
    box-shadow: inset 0 0 40px rgba(101,54,183,.16), 0 0 45px rgba(105,48,205,.12);
}

.optimization-orb::before,
.optimization-orb::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(151,82,255,.78);
    inset: 17px;
    transform: rotate(28deg) scaleY(.62);
    box-shadow: 0 0 10px rgba(125,64,255,.18);
}

.optimization-orb::after {
    border-color: rgba(72,187,255,.48);
    transform: rotate(92deg) scaleX(.58);
}

.orb-halo {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(141,73,255,.5);
}

.halo-a { transform: rotate(-18deg) scaleY(.77); }
.halo-b { transform: rotate(54deg) scaleY(.52); border-style: dashed; opacity: .65; }
.halo-c { transform: rotate(118deg) scaleX(.64); border-color: rgba(81,202,255,.42); }

.orb-node {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #68deff;
    box-shadow: 0 0 9px #68deff, 0 0 18px rgba(104,222,255,.55);
}

.node-a { left: 14%; top: 55%; background: #a54cff; box-shadow: 0 0 10px #a54cff; }
.node-b { right: 10%; top: 49%; }
.node-c { left: 29%; bottom: 23%; }
.node-d { right: 26%; bottom: 25%; background: #9f4cff; box-shadow: 0 0 10px #9f4cff; }

.orb-core {
    position: relative;
    z-index: 2;
    display: grid;
    text-align: center;
    text-shadow: 0 3px 18px rgba(0,0,0,.9);
}

.orb-core strong {
    font-size: 27px;
    line-height: 1;
    letter-spacing: -.05em;
}

.orb-core span {
    color: #a77cff;
    font-size: 7px;
    font-weight: 700;
    margin-top: 5px;
}

.system-load-panel {
    min-height: 0;
    padding: 10px 13px;
    border: 1px solid rgba(131,69,224,.62);
    border-radius: 10px;
    background: rgba(28,9,50,.74);
    display: grid;
    grid-template-rows: auto repeat(3, 1fr);
    gap: 3px;
}

.system-load-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.system-load-head span {
    font-size: 5.5px;
    font-weight: 800;
}

.load-item {
    min-height: 0;
    display: grid;
    grid-template-columns: 67px 1fr;
    align-items: center;
    gap: 8px;
}

.mini-load-ring {
    --load: 27%;
    width: 59px;
    height: 59px;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
    background: conic-gradient(#9a53ff 0 var(--load), rgba(203,180,255,.25) var(--load) 100%);
    border: 1px solid rgba(200,157,255,.42);
    box-shadow: 0 5px 0 rgba(0,0,0,.22), inset 0 0 16px rgba(255,255,255,.04);
}

.mini-load-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #0b0812;
    border: 1px solid rgba(157,92,255,.33);
}

.mini-load-ring::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    right: 1px;
    top: 50%;
    background: #63e7ff;
    box-shadow: 0 0 7px #63e7ff;
}

.cpu-ring { --load: 27%; }
.gpu-ring { --load: 10%; }
.ram-ring { --load: 58%; }

.mini-load-ring strong {
    position: relative;
    z-index: 1;
    font-size: 13px;
    letter-spacing: -.04em;
}

.load-item > div:last-child {
    display: grid;
    gap: 2px;
}

.load-item > div:last-child strong {
    font-size: 13px;
    color: #fff;
}

.load-item > div:last-child span {
    font-size: 8px;
    color: #fff;
}

.ai-sidebar {
    min-width: 0;
    padding: 12px 9px 9px;
    border-left: 1px solid rgba(126,56,226,.42);
    background: #08060f;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: hidden;
}

.ai-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7px;
}

.ai-heading > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ai-heading strong {
    font-size: 12px;
    line-height: 1;
}

.ai-heading span {
    max-width: 107px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 6.5px;
    color: rgba(255,255,255,.88);
}

.ai-heading b {
    white-space: nowrap;
    border: 1px solid rgba(148,77,255,.68);
    background: rgba(94,27,181,.37);
    border-radius: 6px;
    padding: 4px 5px;
    font-size: 5px;
    font-weight: 800;
}

.ai-intro,
.chat-bubble {
    border: 1px solid rgba(132,60,226,.57);
    border-radius: 8px;
    background: rgba(51,13,79,.78);
    padding: 7px 8px;
    color: #fff;
    font-size: 7px;
    line-height: 1.42;
}

.ai-intro {
    margin-top: 1px;
    min-height: 57px;
    background: linear-gradient(145deg, rgba(45,11,73,.88), rgba(35,8,59,.78));
}

.chat-bubble {
    display: grid;
    gap: 4px;
}

.user-bubble {
    margin-left: 15px;
    background: rgba(87,25,126,.82);
}

.chat-bubble small {
    font-size: 5.5px;
    color: #d697ff;
    font-weight: 700;
}

.chat-bubble span {
    font-size: 7.5px;
    line-height: 1.42;
}

.chat-bubble button,
.ai-quick-grid button {
    color: #fff;
    font: inherit;
    border: 1px solid rgba(131,74,219,.45);
    background: rgba(19,15,31,.9);
    border-radius: 6px;
}

.chat-bubble button {
    width: max-content;
    margin-top: 2px;
    padding: 6px 7px;
    font-size: 6.5px;
}

.ai-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: auto;
}

.ai-quick-grid button {
    min-height: 35px;
    padding: 5px;
    font-size: 6px;
    line-height: 1.25;
}

.ai-composer {
    display: grid;
    grid-template-columns: 1fr 39px;
    gap: 5px;
    height: 38px;
}

.ai-composer > span {
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(141,73,237,.67);
    background: rgba(21,12,35,.85);
}

.ai-composer button {
    border: 1px solid rgba(222,194,255,.26);
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-size: 7px;
    background: linear-gradient(145deg, #a24df1, #7b38ec);
}

@media (max-width: 1100px) {
    .app-body.app-body-real { grid-template-columns: 42px minmax(0,1fr) 170px; }
    .real-dashboard { padding: 10px 8px 8px 11px; grid-template-rows: 82px 69px minmax(0,1fr); gap: 7px; }
    .sync-copy strong { font-size: 13px; }
    .hardware-card strong { font-size: 8.5px; }
    .optimization-orb { width: 150px; }
    .load-item { grid-template-columns: 55px 1fr; }
    .mini-load-ring { width: 49px; height: 49px; }
    .load-item > div:last-child strong { font-size: 11px; }
    .ai-sidebar { padding-inline: 7px; }
}

@media (max-width: 820px) {
    .app-body.app-body-real { grid-template-columns: 36px minmax(0,1fr) 145px; }
    .app-icon-rail { padding: 9px 3px 6px; }
    .rail-brand { width: 27px; height: 27px; margin-bottom: 9px; }
    .rail-brand img { width: 24px; height: 24px; }
    .app-icon-rail .app-nav-item { width: 29px; height: 27px; }
    .app-icon-rail .app-nav-item svg { width: 12px; height: 12px; }
    .real-dashboard { padding: 7px 6px; grid-template-rows: 69px 57px minmax(0,1fr); gap: 6px; }
    .sync-card { grid-template-columns: 43px 1fr auto; padding: 7px; gap: 6px; }
    .sync-ring { width: 38px; height: 38px; border-width: 4px; }
    .sync-ring span { font-size: 19px; }
    .sync-copy strong { font-size: 10px; }
    .sync-copy > span { font-size: 5.5px; }
    .sync-copy small { font-size: 5px; }
    .profile-button { padding: 8px; font-size: 5.5px; }
    .hardware-card { padding: 6px; }
    .hardware-card small { font-size: 4.5px; }
    .hardware-card strong { margin-top: 4px; font-size: 6.5px; }
    .hardware-card span { font-size: 4.5px; }
    .optimization-board { padding: 6px; gap: 5px; }
    .optimization-orb { width: 116px; }
    .orb-core strong { font-size: 19px; }
    .system-load-panel { padding: 6px 8px; }
    .load-item { grid-template-columns: 43px 1fr; gap: 5px; }
    .mini-load-ring { width: 39px; height: 39px; }
    .mini-load-ring::before { inset: 6px; }
    .mini-load-ring strong { font-size: 9px; }
    .load-item > div:last-child strong { font-size: 8px; }
    .load-item > div:last-child span { font-size: 5px; }
    .ai-sidebar { padding: 7px 5px 5px; gap: 4px; }
    .ai-heading strong { font-size: 8px; }
    .ai-heading span { font-size: 4.5px; max-width: 76px; }
    .ai-heading b { font-size: 3.5px; padding: 3px; }
    .ai-intro, .chat-bubble { padding: 5px; font-size: 4.5px; border-radius: 5px; }
    .chat-bubble span { font-size: 5px; }
    .chat-bubble button { font-size: 4px; padding: 4px; }
    .ai-quick-grid { gap: 3px; }
    .ai-quick-grid button { min-height: 26px; font-size: 4px; }
    .ai-composer { grid-template-columns: 1fr 28px; height: 27px; gap: 3px; }
    .ai-composer button { font-size: 4.5px; }
}

@media (max-width: 560px) {
    .app-topbar { height: 22px; }
    .app-window-title { font-size: 5px; gap: 4px; }
    .app-window-title img { width: 9px; height: 9px; }
    .window-actions span { width: 20px; font-size: 6px; }
    .app-body.app-body-real { height: calc(100% - 22px); grid-template-columns: 30px minmax(0,1fr); }
    .ai-sidebar { display: none; }
    .real-dashboard { grid-template-rows: 55px 48px minmax(0,1fr); padding: 5px; gap: 4px; }
    .app-icon-rail .app-nav-item { width: 24px; height: 23px; }
    .rail-nav, .rail-bottom { gap: 3px; }
    .sync-card { grid-template-columns: 33px 1fr auto; padding: 5px; }
    .sync-ring { width: 29px; height: 29px; border-width: 3px; }
    .sync-ring span { font-size: 14px; }
    .sync-copy strong { font-size: 7.5px; }
    .sync-copy > span, .sync-copy small { font-size: 3.8px; }
    .profile-button { padding: 6px; font-size: 4px; }
    .hardware-card { padding: 4px; border-radius: 7px; }
    .hardware-card small { font-size: 3.5px; }
    .hardware-card strong { font-size: 5px; }
    .hardware-card span { font-size: 3.2px; }
    .optimization-board { border-radius: 7px; }
    .optimization-orb { width: 91px; }
    .orb-halo { inset: 8px; }
    .orb-core strong { font-size: 15px; }
    .orb-core span { font-size: 4px; }
    .system-load-panel { border-radius: 6px; padding: 4px 5px; }
    .system-load-head small, .system-load-head span { font-size: 3.5px; }
    .load-item { grid-template-columns: 33px 1fr; gap: 3px; }
    .mini-load-ring { width: 29px; height: 29px; }
    .mini-load-ring::before { inset: 5px; }
    .mini-load-ring strong { font-size: 7px; }
    .load-item > div:last-child strong { font-size: 6px; }
    .load-item > div:last-child span { font-size: 3.7px; }
}

/* Optimization orb percentage readability fix */
.orb-core strong {
    font-size: 40px;
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.055em;
    color: #ffffff;
    text-shadow: 0 0 14px rgba(255,255,255,.22), 0 0 28px rgba(151,82,255,.32), 0 3px 18px rgba(0,0,0,.92);
}

.orb-core strong .score-value {
    display: inline;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-shadow: inherit;
}

.orb-core > span {
    margin-top: 8px;
    color: #b88cff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

@media (max-width: 1100px) {
    .orb-core strong { font-size: 35px; }
}

@media (max-width: 820px) {
    .orb-core strong { font-size: 29px; }
    .orb-core > span { font-size: 6px; margin-top: 6px; }
}

@media (max-width: 560px) {
    .orb-core strong { font-size: 23px; }
    .orb-core > span { font-size: 5px; margin-top: 4px; }
}

:root {
    --optrix-ease: cubic-bezier(.2,.75,.2,1);
    --optrix-border: rgba(150,135,214,.2);
    --optrix-muted: #b8b5ca;
}

[hidden] { display: none !important; }
button, summary, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a, button, summary { touch-action: manipulation; }
:where(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid #8defff;
    outline-offset: 5px;
}
::selection { color: white; background: #6341c3; }
.skip-link {
    position: fixed;
    top: -100px;
    left: 24px;
    z-index: 10001;
    padding: 14px 22px;
    background: #261d45;
    color: white;
    border-radius: 12px;
}
.skip-link:focus { top: 18px; }
.menu-toggle { display: none; }
.nav-links a[aria-current="location"] { color: white; }
.nav-links a[aria-current="location"]::after, .nav-links a:focus-visible::after { right: 0; }
.reading-progress { position: absolute; height: 2px; bottom: -1px; left: 18px; right: 18px; overflow: hidden; }
.reading-progress i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,#714aff,#68deff); }
.cinematic-hero { height: 360vh; min-height: 2400px; }
.hero-main-title { line-height: 1.02; letter-spacing: -.06em; font-size: clamp(3.5rem,7.7vw,7.7rem); }
.hero-subtitle { max-width: 660px; color: #c6c2d6; font-size: clamp(1rem,1.3vw,1.15rem); }
.hero-purchase-note { color: #aaa4bf; font-size: .875rem; line-height: 1.7; margin: 20px auto 0; max-width: 560px; }
.hero-eyebrow { font-size: .75rem; }
.badge { font-size: .75rem; }
.scroll-cue { font-size: .75rem; color: #aaa4bf; white-space: nowrap; }
.hero-explorer {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translate(-50%, 12px);
    z-index: 20;
    width: max-content;
    max-width: calc(100% - 40px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s, transform .5s var(--optrix-ease), visibility .4s;
}
.hero-explorer.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,0); }
.preview-caption { margin: 0 0 12px; font-size: .75rem; color: #d4d0e3; text-align: center; }
.preview-caption span { color: #aaa5bc; }
.chapter-controls {
    display: flex;
    align-items: center;
    padding: 5px;
    gap: 5px;
    border: 1px solid rgba(151,127,230,.24);
    border-radius: 16px;
    background: rgba(13,10,24,.93);
    box-shadow: 0 16px 45px #0008, inset 0 1px 0 #ffffff0c;
}
.chapter-controls button, .chapter-next {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 10px 14px;
    color: #b9b3ce;
    background: transparent;
    font-size: .875rem;
    cursor: pointer;
    transition: color .25s, background .25s, border-color .25s;
    white-space: nowrap;
}
.chapter-controls button span { color: #8e7ea9; margin-right: 7px; font-size: .75rem; }
.chapter-controls button:hover, .chapter-next:hover { background: #ffffff09; color: white; }
.chapter-controls button[aria-pressed="true"] { color: white; background: linear-gradient(120deg,#7748ed38,#397bdd20); border-color: #a17bff60; box-shadow: inset 0 1px #ffffff14; }
.chapter-controls button[aria-pressed="true"] span { color: #91e9ff; }
.chapter-next { border-left-color: #ffffff12; text-decoration: none; }
.hero-scene strong { line-height: 1.06; }
.hero-scene p { color: #b8b3c9; font-size: 1rem; line-height: 1.65; }
.hero-scene > span { font-size: .75rem; }
.scene-stat em { font-size: .75rem; letter-spacing: .07em; color: #c4bdd8; }
.hero-grid { transition: opacity .6s; }
.cinematic-hero[data-active-chapter="1"] .app-glow { filter: hue-rotate(25deg); }
.cinematic-hero[data-active-chapter="2"] .app-glow { filter: hue-rotate(-30deg); }
.app-glow { transition: filter 1s ease; }
.app-visual-wrap { pointer-events: none; top: 42%; width: min(920px,62vw,90vh); }
.hero-scenes { --stage-app: min(920px,62vw,90vh); }
.feature-grid { align-items: start; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.steps-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.feature-card-item { display: flex; flex-direction: column; min-height: 330px; }
.feature-card-item > p { flex: 1; }
.feature-card-item p, .tier-desc, .step-card p { color: var(--optrix-muted); font-size: 1rem; line-height: 1.75; }
.feature-card-item, .price-card, .game-logo-item { transition: transform .45s var(--optrix-ease), border-color .35s, box-shadow .45s, opacity .7s, filter .7s; }
.feature-card-item:focus-within, .feature-card-item.is-expanded { border-color: #9c75ff66; box-shadow: 0 25px 70px #0005,0 0 45px #7645ec12; }
.feature-icon { transition: transform .5s var(--optrix-ease), filter .5s; }
.feature-card-item:hover .feature-icon, .feature-card-item:focus-within .feature-icon { transform: translateZ(35px) translateY(-3px); filter: drop-shadow(0 0 16px #8b60ff55); }
.feature-detail { margin-top: 26px; border-top: 1px solid var(--optrix-border); }
.feature-detail summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; color: #d6d0ea; font-size: .875rem; cursor: pointer; }
.feature-detail summary::-webkit-details-marker, .edition-comparison summary::-webkit-details-marker { display: none; }
.feature-detail summary > span, .detail-plus { color: #aa8aff; font-size: 1.4rem; transition: transform .35s var(--optrix-ease); }
.feature-detail[open] summary > span, .edition-comparison[open] .detail-plus { transform: rotate(45deg); }
.feature-detail-body { padding: 8px 0 4px; }
.feature-detail-body strong { font-size: .875rem; color: white; }
.feature-detail-body p { margin: 10px 0 18px; font-size: .9375rem; }
.feature-detail-body a, .text-link { font-size: .875rem; color: #c8b4ff; text-decoration: none; }
.feature-detail-body a:hover, .text-link:hover { color: white; }
details[open] > .feature-detail-body, details[open] > .faq-answer, details[open] > .comparison-scroll { animation: detailReveal .35s var(--optrix-ease) both; }
@keyframes detailReveal { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.game-logo-item { color: white; width: 100%; min-width: 0; gap: 16px; font-family: inherit; }
.game-logo-item img { max-height: 62%; width: 85%; height: 80px; }
.game-name { font-size: .875rem; color: #b6b1c7; line-height: 1.35; text-align: center; }
.game-logo-item[aria-pressed="true"], .game-logo-item:focus-visible { background: linear-gradient(145deg,#7449d624,#30336016); border-color: #9b7aff; box-shadow: 0 15px 45px #0005, inset 0 0 24px #7044c91c; }
.game-logo-item[aria-pressed="true"] img, .game-logo-item:focus-visible img { filter: none; transform: scale(1.05); }
.game-logo-item[aria-pressed="true"] .game-name { color: white; }
.game-logo-item[aria-pressed="true"]::before { content: ""; position: absolute; bottom: 0; left: 25%; right: 25%; height: 2px; background: #a38aff; box-shadow: 0 0 14px #956bff; }
.game-logo-item.visible-3d:nth-child(n) { transition-delay: 0s; }
.game-logo-item.placeholder small { font-size: .875rem; }
.game-insight { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 26px; padding: 30px 34px; text-align: left; min-height: 190px; background: linear-gradient(115deg,#191226,#0b0b14); border: 1px solid var(--optrix-border); border-radius: 20px; }
.game-insight > div { max-width: 760px; }
.insight-kicker { font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: #af94ed; }
.game-insight h3 { font-size: clamp(1.15rem,2vw,1.5rem); font-weight: 600; margin: 9px 0 10px; letter-spacing: -.025em; line-height: 1.4; }
.game-insight p { font-size: 1rem; color: var(--optrix-muted); line-height: 1.7; margin: 0; }
.game-insight .text-link { white-space: nowrap; padding: 12px 0; }
.game-results-note { margin-top: 18px; font-size: .875rem; line-height: 1.6; color: #aaa4bc; }
.how-container { padding: 70px 24px; }
.how-text-content, .how-video-container { min-width: 0; }
.how-video-container { position: relative; aspect-ratio: 16 / 9; overflow: hidden; transform: none !important; }
.optrix-promo-video { height: 100%; object-fit: contain; background: #09070f; }
.video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; color: white; border: 0; cursor: pointer; background: linear-gradient(180deg,#0c08162b,#0c0816b8); transition: background .4s; }
.video-play > span { width: 66px; height: 66px; display: grid; place-items: center; padding-left: 4px; border: 1px solid #c4a5ff6b; border-radius: 50%; background: #6841ccaa; box-shadow: 0 0 0 9px #9260ff14,0 0 40px #8e5bed33; margin-bottom: 6px; transition: transform .35s var(--optrix-ease), box-shadow .35s; }
.video-play:hover > span, .video-play:focus-visible > span { transform: scale(1.1); box-shadow: 0 0 0 14px #9260ff14,0 0 50px #8e5bed55; }
.video-play strong { font-size: 1rem; font-weight: 500; }
.video-play small { color: #ddd3f0; font-size: .875rem; }
.video-error { position: absolute; bottom: 0; left: 0; right: 0; background: #130c20f5; padding: 20px; color: white; font-size: .875rem; }
.video-error a { color: #bda5ff; }
.how-subtitle { color: var(--optrix-muted); font-size: 1rem; line-height: 1.8; }
.safety-text p { color: var(--optrix-muted); font-size: 1rem; line-height: 1.8; }
.pricing-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.price-card { padding: 34px 26px 26px; min-width: 0; }
.price-card .tier-logo { width: min(210px,100%); height: auto; aspect-ratio: 1; border-radius: 20px; transition: transform .55s var(--optrix-ease), filter .55s; }
.price-card:hover .tier-logo, .price-card:focus-within .tier-logo { transform: translateZ(36px) translateY(-5px) scale(1.035); }
.price-card:focus-within { border-color: #aa82ff; }
.tier-fit { font-size: .75rem; font-weight: 500; color: #b6a8d3; text-align: center; letter-spacing: .075em; margin: 0 0 12px; }
.price-card.standard .tier-fit { color: #b8a8cf; }
.price-card.silver .tier-fit { color: #b7ccdf; }
.price-card.premium .tier-fit { color: #baa5ff; }
.price-card .tier-name { font-size: 1.5rem; line-height: 1.3; margin-bottom: 22px; }
.price-card .price { font-variant-numeric: tabular-nums; letter-spacing: -.045em; font-size: 2.8rem; }
.price-period { letter-spacing: 0; }
.tier-desc { min-height: 86px; margin-bottom: 26px; }
.tier-features li { color: #c8c3d8; font-size: .875rem; line-height: 1.65; }
.popular-badge { font-size: .75rem; white-space: nowrap; padding: 6px 16px; border: 1px solid #b69aff55; background: linear-gradient(110deg,#5848c9,#683ddd); box-shadow: 0 4px 24px #7244df33; }
.price-card .btn { min-height: 50px; font-size: .9375rem; }
.purchase-details { text-align: center; margin: 32px 0 10px; font-size: .9375rem; color: #d2cbdf; line-height: 1.7; }
.purchase-help { text-align: center; margin: 0 auto 28px; color: #aaa4bc; font-size: .875rem; line-height: 1.8; }
.purchase-help a, .faq-support a, .faq-answer a, .checkout-error a { color: #cfbaff; text-underline-offset: 4px; }
.edition-comparison { border: 1px solid var(--optrix-border); border-radius: 18px; background: #0e0b17; overflow: hidden; scroll-margin-top: 100px; }
.edition-comparison > summary { display: flex; align-items: center; gap: 18px; min-height: 76px; padding: 20px 28px; list-style: none; cursor: pointer; font-size: 1rem; color: #e4dfef; }
.comparison-hint { margin-left: auto; color: #a59cb9; font-size: .875rem; }
.comparison-scroll { overflow-x: auto; padding: 0 22px; }
.comparison-scroll table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .875rem; }
.comparison-scroll caption { caption-side: bottom; text-align: left; padding: 20px 12px; color: #aaa4bc; line-height: 1.6; }
.comparison-scroll th, .comparison-scroll td { padding: 18px 12px; border-bottom: 1px solid #ffffff0c; text-align: center; color: #d0c9df; line-height: 1.5; }
.comparison-scroll th:first-child { text-align: left; width: 43%; }
.comparison-scroll thead th { color: white; font-weight: 500; }
.comparison-scroll thead span { display: block; color: #b49ceb; margin-top: 5px; }
.comparison-scroll tbody th { font-weight: 400; }
.comparison-scroll tr > :last-child { background: #8150e50a; }
.comparison-scroll tbody tr:hover { background: #a782ff09; }
.comparison-return { display: inline-block; margin: 0 34px 24px; }
.checkout-error { text-align: center; margin: 20px 0; padding: 18px; background: #251b38; border-radius: 12px; color: #e7ddee; }
.checkout-retry { background: none; border: 0; color: white; text-decoration: underline; cursor: pointer; padding: 8px; }
.faq-item { scroll-margin-top: 100px; transition: border-color .3s, background .3s, box-shadow .3s; }
.faq-item[open] { border-color: #8867c958; background: linear-gradient(110deg,#171122,#0b0a12); box-shadow: 0 10px 40px #0003; }
.faq-question { font-size: 1rem; line-height: 1.6; gap: 24px; }
.faq-icon { flex-shrink: 0; }
.faq-answer p { font-size: 1rem; line-height: 1.85; color: #bfb8cf; }
.faq-support { margin-top: 30px; text-align: center; color: #bfb8cf; font-size: 1rem; line-height: 1.8; }
.tos-content { line-height: 1.85; }
.tos-content { overflow-wrap: anywhere; }
.footer { padding-bottom: max(32px,env(safe-area-inset-bottom)); }

html:not(.hero-ready) .reveal-3d, html:not(.hero-ready) .reveal,
html:not(.hero-ready) .section-reveal .section-title,
html:not(.hero-ready) .section-reveal .how-title { opacity: 1; transform: none; filter: none; }

@media (min-width: 821px) and (max-height: 800px) {
    .hero-main-title { font-size: clamp(2.8rem,min(7.5vw,10.3vh),6.7rem); line-height: 1.02; }
    .hero-copy { top: 51%; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 20px; }
    .hero-purchase-note { margin-top: 14px; }
}
@media (max-width: 1200px) {
    .hero-scene, .hero-scene:nth-child(2), .hero-scene:nth-child(3) { bottom: 150px; }
    .hero-scene p, .hero-scene:nth-child(2) p { font-size: 1rem; }
    .hero-scene .scene-stat { display: none; }
    .app-visual-wrap { top: 32%; width: min(60vh,76vw); }
    .tier-desc { min-height: 112px; }
}
@media (max-width: 900px) {
    .pricing-grid { gap: 18px; }
    .price-card { padding: 28px 18px 22px; }
    .price-card .tier-name { font-size: 1.2rem; }
    .tier-fit { letter-spacing: .02em; }
    .game-insight { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 820px) {
    .navbar { height: 64px; }
    .nav-container { height: 62px; }
    .logo-text { font-size: 1.125rem; }
    .logo img { width: 34px; height: 34px; }
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 12px; color: white; background: #ffffff08; border: 1px solid #ffffff16; border-radius: 10px; font-size: .875rem; cursor: pointer; }
    .menu-toggle span { font-size: 1.25rem; transition: transform .3s; }
    .menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
    .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; border: 1px solid #9072c936; border-radius: 16px; padding: 10px; background: #100c1cf7; box-shadow: 0 18px 50px #0008; }
    .menu-open .nav-links { display: grid; animation: detailReveal .25s var(--optrix-ease); }
    .nav-links a { margin: 0; padding: 13px 16px; min-height: 46px; font-size: 1rem; border-radius: 9px; }
    .nav-links a::after { display: none; }
    .nav-links a[aria-current="location"] { background: #8650e326; }
    .cinematic-hero { height: 300svh; min-height: 1900px; }
    .hero-sticky { height: 100svh; min-height: 600px; }
    .hero-main-title { font-size: clamp(2.8rem,10.8vw,5rem); line-height: 1.04; letter-spacing: -.05em; }
    .hero-copy { top: 49%; width: calc(100% - 44px); }
    .hero-subtitle { font-size: 1rem; }
    .hero-purchase-note { font-size: .875rem; max-width: 340px; }
    .app-visual-wrap { width: min(105vw,80vh); top: 36%; }
    .hero-explorer { max-width: calc(100% - 24px); bottom: 20px; }
    .hero-scene, .hero-scene:nth-child(2), .hero-scene:nth-child(3) { bottom: 155px; }
    .hero-scene strong, .scene-fps strong, .scene-network strong { font-size: clamp(1.7rem,6vw,2.5rem); }
    .hero-scene p, .hero-scene:nth-child(2) p { font-size: .9375rem; max-width: 42ch; }
    .chapter-controls { flex-wrap: wrap; justify-content: center; gap: 3px; }
    .chapter-controls button { padding: 9px 10px; font-size: .875rem; }
    .chapter-controls button span { display: none; }
    .chapter-next { padding: 9px 10px; font-size: .875rem; }
    .preview-caption { font-size: .75rem; }
    .pricing-grid { grid-template-columns: 1fr; gap: 34px; max-width: 560px; margin-inline: auto; }
    .price-card { padding: 32px; }
    .price-card .tier-name { font-size: 1.5rem; }
    .price-card .tier-logo { width: 210px; }
    .tier-desc { min-height: 0; }
    .tier-fit { letter-spacing: .07em; }
    .comparison-hint { display: none; }
    .detail-plus { margin-left: auto; }
    .feature-card-item { min-height: 0; }
    .how-container { display: grid; grid-template-columns: 1fr; gap: 34px; }
    .how-video-container { width: 100%; }
    .safety-badge { padding: 28px; }
}
@media (max-width: 560px) {
    .hero-main-title { font-size: clamp(2.35rem,10.5vw,3.6rem); }
    .hero-subtitle { font-size: 1rem; line-height: 1.65; }
    .hero-copy .badge { margin-bottom: 16px; }
    .hero-purchase-note { margin-top: 16px; }
    .hero-explorer { width: calc(100% - 28px); }
    .chapter-controls { gap: 2px; padding: 4px; }
    .chapter-controls button { padding: 8px; flex: 1; }
    .chapter-next { width: 100%; text-align: center; min-height: 34px; padding: 5px; border-left: 0; border-top: 1px solid #ffffff0d; }
    .hero-scene, .hero-scene:nth-child(2), .hero-scene:nth-child(3) { bottom: 160px; left: 22px; right: 22px; }
    .hero-scene p { display: block; }
    .hero-scene > span { margin-bottom: 8px; }
    .app-visual-wrap { width: 116vw; top: 34%; }
    .game-logo-grid { gap: 12px; }
    .game-logo-item { padding: 18px 10px; gap: 10px; }
    .game-logo-item img { height: 52px; }
    .game-name { font-size: .875rem; }
    .game-insight { padding: 24px; min-height: 245px; }
    .game-results-note { font-size: .875rem; }
    .video-play > span { width: 48px; height: 48px; margin-bottom: 0; }
    .video-play small { display: none; }
    .price-card { padding: 30px 24px; }
    .purchase-details, .purchase-help { max-width: 330px; margin-inline: auto; }
    .edition-comparison > summary { padding: 20px; }
    .comparison-scroll { padding: 0 12px; }
    .faq-question { padding: 20px; }
    .faq-answer { padding-inline: 20px; }
}
@media (max-height: 700px) and (max-width: 820px) {
    .hero-copy { top: 50%; }
    .hero-copy .badge { margin-bottom: 10px; }
    .hero-main-title { font-size: clamp(2.15rem,8.5vw,3.3rem); margin-bottom: 16px; }
    .hero-subtitle { margin-bottom: 18px; }
    .hero-eyebrow { margin-bottom: 10px; }
    .hero-purchase-note { margin-top: 12px; }
    .hero-actions .btn { padding-block: 11px; }
    .hero-scene p { display: none; }
    .hero-scene, .hero-scene:nth-child(2), .hero-scene:nth-child(3) { bottom: 154px; }
}
@media (max-height: 540px) and (min-width: 561px) {
    .cinematic-hero { min-height: 1700px; }
    .hero-sticky { min-height: 0; }
    .hero-copy { top: 56%; }
    .hero-main-title { font-size: clamp(2rem,6vh,3.5rem); margin-bottom: 12px; }
    .hero-copy .badge, .hero-eyebrow, .hero-purchase-note { display: none; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 16px; }
    .hero-scenes { display: none; }
    .app-visual-wrap { width: 60vh; top: 37%; }
}
@media (prefers-reduced-motion: reduce) {
    .cinematic-hero { height: auto; min-height: 0; overflow: hidden; }
    .hero-sticky { height: auto; min-height: 0; position: relative; padding: 140px 0 70px; }
    .cinematic-stage { display: block; height: auto; perspective: none; }
    .hero-copy { position: relative; top: auto; left: auto; transform: none; opacity: 1; filter: none; margin: 0 auto 40px; }
    .app-visual-wrap { position: relative; top: auto; left: auto; transform: none; opacity: 1; width: min(880px,100%); margin: 0 auto; }
    .hero-scenes, .hero-explorer, .hero-progress, .scroll-cue, #optrix-space { display: none; }
    .features { margin-top: 0; padding-top: 80px; }
    .reveal, .reveal-3d { opacity: 1; transform: none; filter: none; }
    .feature-card-item, .price-card, .game-logo-item, .magnetic { transform: none !important; }
}

/* A stable window into Discord, framed in the same Optrix light. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.community-section { position: relative; padding: 100px 0 70px; isolation: isolate; }
.community-intro { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 50px; margin-bottom: 36px; }
.community-eyebrow { display: flex; align-items: center; gap: 12px; color: #afa0cd; font-size: .75rem; letter-spacing: .16em; margin-bottom: 20px; }
.community-eyebrow > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #a887ff36; border-radius: 8px; color: #c9aeff; font-size: 1rem; letter-spacing: 0; }
.community-intro .section-title { text-align: left; font-size: clamp(2rem,3.7vw,3.4rem); line-height: 1.16; letter-spacing: -.04em; margin-bottom: 0; }
.community-description { max-width: 38ch; padding-bottom: 4px; color: var(--optrix-muted); font-size: 1rem; line-height: 1.85; }
.community-frame { position: relative; border: 1px solid #b29aff32; border-radius: 24px; background: linear-gradient(135deg,#171125f5,#0c1019fa 65%,#0c0a13); box-shadow: 0 30px 100px #0007,0 -20px 80px #8550e510,0 20px 70px #00d9ff08; transform-origin: 50% 80%; transition: opacity .9s var(--optrix-ease),transform .9s var(--optrix-ease),filter .9s var(--optrix-ease),border-color .35s,box-shadow .35s; }
.community-frame.reveal-3d { transform: perspective(1400px) translateY(44px) rotateX(5deg) scale(.98); filter: blur(3px); }
.community-frame.reveal-3d.visible-3d { transform: none; filter: none; }
.community-frame::before { content: ''; position: absolute; z-index: 2; left: 9%; right: 9%; top: -1px; height: 1px; background: linear-gradient(90deg,transparent,#bca0ffbb,#70d5ec77,transparent); pointer-events: none; }
.community-frame:focus-within { border-color: #bfa1ff65; box-shadow: 0 30px 100px #0007,0 0 60px #8550e51c; }
.community-bar { min-height: 88px; padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 24px 24px 0 0; background: radial-gradient(ellipse at 15% 0%,#8954ef17,transparent 65%); transition: background-color .35s; }
.community-bar:hover { background-color: #af8cff06; }
.community-identity { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.community-identity img { object-fit: contain; filter: drop-shadow(0 0 12px #9d64ff35); transition: filter .35s; }
.community-bar:hover img { filter: drop-shadow(0 0 16px #9d64ff80); }
.community-identity strong { display: block; font-size: .9375rem; font-weight: 500; color: #f0e9ff; }
.community-identity div > span { color: #a49cb5; font-size: .75rem; }
.community-status { color: #b8b0c9; font-size: .75rem; text-align: right; max-width: 35ch; line-height: 1.6; }
.community-status::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #a796c4; margin: 0 8px 2px 0; }
.community-frame[data-embed-state="loading"] .community-status::before { animation: communityLoading 1.5s ease-in-out infinite; }
@keyframes communityLoading { 50% { opacity: .35; } }
.community-viewport { position: relative; height: 640px; margin: 0 12px; border: 1px solid #b9abda1a; border-radius: 14px; overflow: hidden; background: #0c0b12; }
.community-viewport widgetbot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0 !important; }
.community-placeholder { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 30px; background: radial-gradient(ellipse at 40% 35%,#754ad21c,transparent 65%),radial-gradient(ellipse at 100% 100%,#00c9de0a,transparent 65%),#0c0b12; }
.community-window-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 24px; font-size: 1.75rem; color: #c2a7ff; border: 1px solid #b49afc30; border-radius: 18px; background: linear-gradient(135deg,#b09bff0c,#07060e); box-shadow: 0 12px 35px #0004; }
.community-placeholder h3 { font-size: clamp(1.15rem,2.2vw,1.5rem); font-weight: 500; letter-spacing: -.02em; margin-bottom: 12px; }
.community-placeholder p { color: #aca4be; font-size: .9375rem; line-height: 1.85; max-width: 42ch; }
.community-load { font: inherit; font-size: .875rem; margin-top: 22px; padding: 12px 18px; border: 1px solid #b59bfa36; border-radius: 10px; background: #b397ff0c; color: #d3bfff; cursor: pointer; transition: background .25s,border-color .25s; }
.community-load:hover { background: #b397ff18; border-color: #b59bfa77; }
.community-load:disabled { cursor: progress; opacity: .6; }
.community-footer { padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.community-footer p { max-width: 53ch; color: #d3cbdf; font-size: .875rem; line-height: 1.75; }
.community-footer small { display: block; color: #a69db9; font-size: .75rem; margin-top: 4px; }
.community-join { flex-shrink: 0; font-size: .875rem; gap: 14px; min-height: 48px; background: linear-gradient(110deg,#6441c9,#7734d5 60%,#4933b0); box-shadow: inset 0 1px #d3b5ff38,0 7px 25px #6e3dc925; }
.community-join > span[aria-hidden] { display: inline-block; transition: transform .25s var(--optrix-ease); }
.community-join:hover > span[aria-hidden] { transform: translate(2px,-2px); }
.community-next { display: table; margin: 26px auto 0; text-align: center; font-size: .875rem; }
.faq-email { display: block; font-size: .875rem; color: #a9a0bd; margin-top: 10px; }
.faq-support > .text-link { display: inline-block; padding: 8px 0; }
.comparison-tools { padding: 4px 28px 20px; }
.comparison-tools > span { display: block; font-size: .75rem; color: #aaa0bb; margin-bottom: 12px; }
.comparison-options { display: flex; flex-wrap: wrap; gap: 8px; }
.comparison-options button { min-height: 42px; padding: 9px 15px; border: 1px solid #c6afff20; border-radius: 9px; background: #c9b0ff05; color: #bdb4ce; font: inherit; font-size: .8125rem; cursor: pointer; transition: color .25s,background .25s,border-color .25s,box-shadow .25s; }
.comparison-options button:hover { border-color: #c6afff60; color: #f2eaff; }
.comparison-options button[aria-pressed="true"] { background: #9964ef20; color: #e7d7ff; border-color: #b18cf76b; box-shadow: inset 0 1px #d2b5ff12,0 3px 15px #0003; }
.comparison-context { color: #b6acc9; font-size: .875rem; line-height: 1.8; min-height: 3.6em; margin-top: 16px; max-width: 70ch; }
.comparison-scroll tbody tr { transition: background .3s; }
.comparison-scroll tbody tr.is-highlighted { background: #9f6aff12; }
.comparison-scroll tbody tr.is-highlighted th { color: #e3d1ff; box-shadow: inset 2px 0 #b491ff; }
.edition-focus-note { max-width: 760px; margin: -10px auto 34px; text-align: center; font-size: .875rem; color: #cab5ee; line-height: 1.8; }
.price-card.is-relevant { outline: 1px solid #b08cfd77; outline-offset: 5px; }
.price-card.is-relevant .tier-fit { color: #e1ccff; }
.edition-guide { margin: 0 0 36px; border: 1px solid #b49afc2b; border-radius: 18px; background: linear-gradient(120deg,#181024,#0c0c16 75%); overflow: hidden; }
.edition-guide > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 26px; cursor: pointer; list-style: none; font-size: .9375rem; color: #e7dbfa; transition: background .25s; }
.edition-guide > summary::-webkit-details-marker { display: none; }
.edition-guide > summary:hover { background: #ab7bff08; }
.edition-guide[open] > summary .detail-plus { transform: rotate(45deg); }
.edition-guide-intro { padding: 4px 26px 20px; }
.edition-guide-intro p { font-size: 1rem; color: #eee5fb; margin-bottom: 6px; }
.edition-guide-intro > span { font-size: .875rem; color: #ada3c0; line-height: 1.7; }
.edition-guide-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0 26px 22px; }
.edition-guide-options button { position: relative; min-width: 0; text-align: left; padding: 20px 18px; border: 1px solid #c0a6ff25; border-radius: 12px; background: #b193ff04; font: inherit; cursor: pointer; color: #e6ddef; transition: background .25s,border-color .25s,box-shadow .25s; }
.edition-guide-options button strong { display: block; padding-right: 12px; margin-bottom: 9px; font-size: .875rem; font-weight: 500; line-height: 1.5; }
.edition-guide-options button > span { display: block; color: #b3a9c5; font-size: .8125rem; line-height: 1.75; }
.edition-guide-options button:hover, .edition-guide-options button:focus-visible { border-color: #bb98ff77; background: #b193ff0b; }
.edition-guide-options button[aria-pressed="true"] { background: linear-gradient(130deg,#9564e929,#6a48c30e); border-color: #b391f5aa; box-shadow: inset 0 1px #d7c2ff1c,0 8px 24px #0003; }
.edition-guide-options button[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 12px; right: 12px; font-size: .75rem; color: #cab0ff; pointer-events: none; }
.edition-guide-result { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 23px 26px; border-top: 1px solid #c0a6ff1b; background: #07060c44; }
.edition-guide-match { font-size: .9375rem; color: #e3d4f8; line-height: 1.65; margin-bottom: 7px; }
.edition-guide-reason { max-width: 75ch; color: #afa5c0; font-size: .875rem; line-height: 1.8; }
.edition-guide-link { flex-shrink: 0; font-size: .875rem; padding-block: 12px; }
.price-card[id^="edition-"] { scroll-margin-top: 115px; }
.price-card.is-guided { outline: 1px solid #b597f2a3; outline-offset: 5px; }
.price-card.is-guided .tier-fit { color: #e1ccff; }
.edition-start-path { max-width: 70ch; margin: 32px auto 0; text-align: center; font-size: .9375rem; color: #bfb3d0; line-height: 1.8; }
.edition-start-path a { color: #d6c1ff; text-underline-offset: 4px; }
.edition-start-path + .purchase-details { margin-top: 18px; }
@media (max-width: 820px) {
    .edition-guide-options { grid-template-columns: 1fr; gap: 9px; }
    .edition-guide-options button { padding: 16px 18px; }
    .edition-guide-options button strong { margin-bottom: 4px; }
    .edition-guide-result { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (max-width: 560px) {
    .edition-guide > summary, .edition-guide-result { padding: 20px; }
    .edition-guide-options { padding-inline: 20px; }
    .edition-guide-intro { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .edition-guide-options button, .edition-guide > summary { transition: none; }
}
html:not(.hero-ready) .community-frame.reveal-3d { transform: none; filter: none; }
@media (min-width: 1800px) { .community-viewport { height: 700px; } }
@media (max-width: 900px) {
    .community-intro { grid-template-columns: 1fr; gap: 22px; }
    .community-description { max-width: 58ch; }
    .community-footer { align-items: flex-start; flex-direction: column; gap: 20px; }
}
@media (max-width: 560px) {
    .community-section { padding: 65px 0 45px; }
    .community-intro { margin-bottom: 26px; }
    .community-intro .section-title { font-size: clamp(1.7rem,7.1vw,2.4rem); }
    .community-description { font-size: .9375rem; }
    .community-frame { border-radius: 18px; }
    .community-bar { padding: 18px; align-items: flex-start; flex-direction: column; gap: 12px; }
    .community-status { text-align: left; }
    .community-viewport { height: 540px; margin: 0 5px; border-radius: 10px; }
    .community-footer { padding: 20px 18px; }
    .community-join { width: 100%; justify-content: center; font-size: .8125rem; padding-inline: 10px; }
    .community-placeholder { padding: 24px; }
    .comparison-tools { padding-inline: 20px; }
    .comparison-options { gap: 6px; }
    .comparison-options button { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .community-frame.reveal-3d { transform: none; opacity: 1; filter: none; }
    .community-frame, .community-join > span[aria-hidden], .comparison-options button, .comparison-scroll tbody tr { transition: none; }
    .community-frame[data-embed-state="loading"] .community-status::before { animation: none; }
}
@media (max-width: 380px) {
    .logo-text { font-size: 1rem; white-space: nowrap; }
    .logo img { width: 28px; height: 28px; }
    .nav-container { padding-inline: 10px; }
    .menu-toggle { gap: 6px; padding-inline: 9px; }
    .section-title { font-size: 1.8rem; }
    .hero-subtitle { font-size: .9375rem; line-height: 1.6; }
}
@media (max-width: 380px) and (max-height: 700px) and (prefers-reduced-motion: no-preference) {
    .hero-copy { top: 56%; }
    .hero-main-title { font-size: 2rem; }
    .hero-copy .badge { font-size: .6875rem; margin-bottom: 8px; }
}

/* Keep the preview readable once its cinematic entrance has settled. */
.app-visual-wrap {
    transform-style: flat;
    will-change: auto;
}
@media (prefers-reduced-motion: no-preference) {
    .app-visual-wrap {
        transform: translate(-50%, calc(-42% + (1 - var(--hero-progress)) * 32vh)) scale(calc(.22 + var(--app-entrance, 0) * .78));
    }
    .optrix-app-shell {
        transform: rotateX(calc(15deg * (1 - var(--app-entrance, 0)))) rotateY(calc(-23deg * (1 - var(--app-entrance, 0)))) rotateZ(calc(2deg * (1 - var(--app-entrance, 0))));
    }
    .cinematic-hero[data-active-chapter="2"] .optrix-app-shell { transform: none; }
}
.optrix-app-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    transform-style: flat;
    will-change: auto;
    container-type: inline-size;
}
.app-body.app-body-real { height: auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.real-dashboard, .app-icon-rail, .ai-sidebar { min-height: 0; }
.ai-sidebar { gap: 6px; }
.ai-sidebar > * { flex-shrink: 0; }
.ai-heading span { max-width: none; white-space: normal; line-height: 1.35; }
.ai-composer { min-height: 32px; height: 32px; }
.ai-composer > span { display: flex; align-items: center; padding: 0 7px; font-size: 7px; color: #c8bddb; }
.ai-intro, .chat-bubble { background-color: #210e35; }
.optrix-app-shell .scan-light { opacity: .18; }
.optrix-app-shell .screen-reflection { opacity: .2; }
@media (min-width: 821px) {
    .ai-intro, .chat-bubble { font-size: 8px; line-height: 1.45; }
    .chat-bubble span { font-size: 8px; line-height: 1.45; }
    .ai-quick-grid button { min-height: 30px; font-size: 7px; }
    .ai-composer button, .chat-bubble button { font-size: 7px; }
}
/* Adapt to the preview's own size, including shorter laptop viewports. */
@container (max-width: 620px) {
    .app-body.app-body-real { grid-template-columns: 6% minmax(0,1fr) 27%; }
    .real-dashboard { padding: 1.4cqw; gap: 1cqw; grid-template-rows: 12cqw 10cqw minmax(0,1fr); }
    .sync-card { padding: 1cqw; gap: 1cqw; grid-template-columns: 6cqw minmax(0,1fr) auto; }
    .sync-ring { width: 5.5cqw; height: 5.5cqw; border-width: .6cqw; }
    .sync-ring span { font-size: 3cqw; }
    .sync-copy strong { font-size: 1.8cqw; }
    .sync-copy > span, .sync-copy small { font-size: 1cqw; }
    .profile-button { padding: 1.2cqw; font-size: 1cqw; }
    .hardware-card { padding: 1cqw; }
    .hardware-card strong { font-size: 1.35cqw; }
    .hardware-card small, .hardware-card span { font-size: .9cqw; }
    .load-item { grid-template-columns: 6.5cqw minmax(0,1fr); gap: 1cqw; }
    .mini-load-ring { width: 6.5cqw; height: 6.5cqw; }
    .mini-load-ring::before { inset: 1cqw; }
    .mini-load-ring strong { font-size: 1.6cqw; }
    .load-item > div:last-child strong { font-size: 1.7cqw; }
    .load-item > div:last-child span { font-size: 1cqw; }
    .ai-sidebar { padding: 1.4cqw 1cqw; gap: .8cqw; }
    .ai-heading strong { font-size: 1.8cqw; }
    .ai-heading span { font-size: 1cqw; }
    .ai-heading b { font-size: .8cqw; padding: .5cqw; }
    .ai-intro, .chat-bubble { padding: 1cqw; font-size: 1.15cqw; min-height: 0; }
    .chat-bubble span { font-size: 1.2cqw; }
    .chat-bubble small { font-size: .9cqw; }
    .chat-bubble button { font-size: 1cqw; padding: .7cqw; }
    .ai-quick-grid { gap: .6cqw; }
    .ai-quick-grid button { min-height: 4.5cqw; font-size: 1cqw; padding: .7cqw; }
    .ai-composer { height: 4.5cqw; min-height: 4.5cqw; grid-template-columns: minmax(0,1fr) 5cqw; }
    .ai-composer > span, .ai-composer button { font-size: 1cqw; }
}
@media (max-width: 560px) {
    .app-body.app-body-real { grid-template-columns: 30px minmax(0,1fr); }
}
@media (min-width: 821px) and (max-width: 1200px) {
    .app-visual-wrap { width: min(76vw, 80vh); }
}
@container (max-width: 620px) {
    .ai-sidebar { gap: .6cqw; padding-block: 1cqw; }
    .ai-intro, .chat-bubble { padding: .8cqw; }
    .chat-bubble { gap: .6cqw; }
    .user-bubble { margin-left: 2cqw; }
}
@container (max-width: 620px) {
    .app-icon-rail { padding: 1.3cqw .6cqw 1.5cqw; }
    .rail-brand { width: 4.5cqw; height: 4.5cqw; margin-bottom: 1.5cqw; }
    .rail-brand img { width: 4.2cqw; height: 4.2cqw; }
    .app-icon-rail .app-nav-item { width: 100%; height: 4.5cqw; }
    .app-icon-rail .app-nav-item svg { width: 2cqw; height: 2cqw; }
    .rail-nav, .rail-bottom { gap: .7cqw; }
    .rail-bottom { padding-bottom: 0; }
}


/* Give the load rings breathing room on Full HD desktop viewports. */
@media (min-width: 1201px) and (max-width: 1920px) and (max-height: 1080px) {
    .system-load-panel { grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 6px; }
    .load-item { grid-template-columns: 54px minmax(0, 1fr); }
    .mini-load-ring {
        height: min(48px, 100%);
        width: auto;
        aspect-ratio: 1;
        justify-self: start;
    }
    .mini-load-ring::before { inset: 7px; }
    .mini-load-ring strong { font-size: 12px; }
}