/* ===================================
   PUBLIC HOMEPAGE STYLES
   TradeBeez LMS — Landing Page
   =================================== */

/* 0. Override body background when public homepage is visible */
body:has(.public-homepage) {
    background: #0a0e1a !important;
}

body:has(.public-homepage) .stars,
body:has(.public-homepage) #space {
    display: none !important;
}

.public-homepage {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: 0;
    margin-top: 0;
}

/* Fixed spinning gradient background.
   Switched from 100vw/200vw (which cause horizontal scroll on Windows
   DPI-scaled displays) to width/height 100% on fixed-position elements
   — position:fixed anchors to viewport, so 100% = viewport anyway.
   Dropped the `transform: scale(0.8)` that shrank the gradient 20%
   for no layout reason; the gradient now sizes naturally. */
.public-homepage .blur-background {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

.public-homepage .gradient-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    /* Oversized so the spinning gradient covers the viewport during
       rotation without clipping corners. % of a fixed element still
       resolves to the viewport, so 150% each side is safe. */
    width: 150% !important;
    height: 150% !important;
    transform: translate(-50%, -50%) !important;
}

.public-homepage .bg-gradient-spin {
    position: fixed !important;
    /* Was 150vw/150vw — vw on DPI-scaled Windows caused oversize and
       horizontal overflow. % on a fixed ancestor (gradient-container)
       ties sizing to the viewport the way vw was meant to. */
    width: 100% !important;
    height: 100% !important;
}

/* All content above the background */
.public-homepage .public-hero,
.public-homepage .public-section,
.public-homepage .public-footer {
    position: relative;
    z-index: 1;
}

.public-homepage .public-header {
    z-index: 1010;
}


/* ===================================
   1. HEADER
   =================================== */
.public-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    background: transparent;
    border-bottom: none;
    transition: all 0.3s ease;
}

.public-header.scrolled {
    padding: 12px 0;
    background: rgba(10, 22, 50, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.public-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Override Bootstrap's centered fixed-width .container so the logo
       aligns with .public-hero-content (same padding-left formula). */
    max-width: none;
    width: 100%;
    padding-left: max(20px, calc((100vw - 1320px) / 2 + 12px));
    padding-right: max(20px, calc((100vw - 1320px) / 2 + 12px));
}

.public-header-logo img {
    height: 55px;
}

.public-header-logo {
    position: relative;
    z-index: 1001;
}

.public-header-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.public-header-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s ease;
    letter-spacing: 0.3px;
}

.public-header-nav a:hover,
.public-header-nav a.active {
    color: #57B9FF;
}

.public-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-login {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-register {
    background: #57B9FF;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-register:hover {
    background: #3a9fd9;
    color: #fff;
}


/* ===================================
   2. HERO SECTION
   =================================== */
.public-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    padding-top: 130px;
    padding-bottom: 60px;
    width: 100%;
}

/* Globe image — full width background */
.public-hero-globe {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.public-hero-globe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: 0.55;
}

/* Dark gradient over the left side so hero text stays readable */
.public-hero-globe::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(10, 14, 26, 0.6) 0%,
        rgba(10, 14, 26, 0.35) 30%,
        rgba(10, 14, 26, 0.1) 50%,
        transparent 70%
    );
    pointer-events: none;
}

/* Ray pulse that travels across the globe */
.public-hero-globe::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(200,100,255,0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: rayPulse 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes rayPulse {
    0%   { top: 15%; left: 15%; opacity: 0; }
    15%  { opacity: 0.7; }
    40%  { top: 40%; left: 45%; opacity: 0.5; }
    70%  { top: 65%; left: 25%; opacity: 0.3; }
    100% { top: 15%; left: 15%; opacity: 0; }
}

/* Hexagon overlay animation */
.hexagon-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hexagon-popup {
    position: absolute;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(200, 100, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 8px 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    animation: hexagonFade var(--popup-duration, 3s) ease-in-out forwards;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 20px rgba(180, 80, 255, 0.2);
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

/* Node glow dot behind each popup */
.hexagon-popup::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #d580ff;
    border-radius: 50%;
    box-shadow: 0 0 12px 4px rgba(200, 100, 255, 0.4);
    z-index: -1;
}

@keyframes hexagonFade {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(12px);
    }
    15% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    80% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.85) translateY(-8px);
    }
}

/* Hero content — left side */
.public-hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 55%;
    width: 100%;
    padding: 0 20px 40px max(20px, calc((100vw - 1320px) / 2 + 12px));
}

.hero-logo {
    margin-bottom: 24px;
    display: block;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(87, 185, 255, 0.1);
    border: 1px solid rgba(87, 185, 255, 0.3);
    color: #57B9FF;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 28px;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
}

.public-hero-content h1 {
    font-size: 3.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.15;
    letter-spacing: -1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.public-hero-content h1 span {
    background: linear-gradient(135deg, #57B9FF 0%, #06b6d4 50%, #22c55e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.public-hero-content p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 20px;
    line-height: 1.7;
    max-width: 600px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.public-hero-content p.hero-body {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 16px;
    line-height: 1.75;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 28px;
}

.btn-primary-hero {
    background: linear-gradient(135deg, #57B9FF 0%, #3a9fd9 100%);
    color: #fff;
    border: none;
    padding: 14px 36px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-primary-hero:hover {
    background: linear-gradient(135deg, #3a9fd9 0%, #2587c4 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(87, 185, 255, 0.3);
    color: #fff;
}

.btn-secondary-hero {
    background: rgba(255, 255, 255, 0.05);
    color: #57B9FF;
    border: 1.5px solid rgba(87, 185, 255, 0.4);
    padding: 13px 34px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    backdrop-filter: blur(4px);
}

.btn-secondary-hero:hover {
    background: rgba(87, 185, 255, 0.12);
    border-color: rgba(87, 185, 255, 0.6);
    color: #57B9FF;
}


/* ===================================
   3. SECTION SHARED STYLES
   =================================== */
.public-section {
    padding: 50px 0;
    position: relative;
    z-index: 1;
    background: transparent !important;
}

.section-cta {
    padding-bottom: 20px;
}

/* Scroll-reveal animation */
.public-section[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

.section-title-center {
    text-align: center;
    margin-bottom: 36px;
}

.section-overline {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #57B9FF;
    margin-bottom: 26px;
    line-height: 1.15;
}

.section-title-center h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--black);
    margin: 8px 0 16px;
    letter-spacing: -0.5px;
}

.section-title-center p {
    font-size: 1.1rem;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.7;
}

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

.public-section-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--black);
    margin: 0;
}

.public-section-header h2 .section-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #57B9FF 0%, #3a9fd9 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.view-all-link {
    color: #57B9FF;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.view-all-link:hover {
    color: #3a9fd9;
    gap: 12px;
}


/* ===================================
   4. FEATURES GRID ("What's Inside")
   =================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 36px 28px 32px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--feature-color);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    background: color-mix(in srgb, var(--feature-color) 12%, transparent);
    color: var(--feature-color);
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon-wrap {
    transform: scale(1.1);
}

/* Feature icons rendered as <img> — the PNG variants (academy,
   sandbox, finance-lab, academy-plus, terminal, screener, spotlight)
   are the same 3D illustrations the dashboard uses, so they look
   better without the tinted backdrop and at a larger size. The wrap
   still handles hover-scale via the rule above. */
.feature-icon-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* When the wrap contains a 3D image, drop the coloured tile so the
   illustration reads cleanly — mirrors how these icons render on the
   authenticated dashboard's services grid. SVG-only wraps (trust
   points, Finance Lab tools) keep the coloured backdrop. */
.feature-icon-wrap:has(img.feature-icon-img) {
    width: 64px;
    height: 64px;
    background: transparent;
    border: none;
}

/* Icon + title row — puts the 3D/SVG icon on the same baseline as the
   feature heading instead of stacking them vertically. Collapses the
   wrap's stock bottom margin so the group reads as one unit. */
.feature-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.feature-head .feature-icon-wrap {
    margin-bottom: 0;
    flex-shrink: 0;
}

.feature-card .feature-head h3 {
    margin: 0;
    line-height: 1.15;
}

/* Inline variant used in section overlines (e.g. "Academy · Personalised by AI"),
   where the 3D product PNG sits inline with the kicker text. Sized to
   carry visual weight against the larger 26px tracked uppercase so the
   product mark reads as part of the kicker, not a sibling tile. */
.overline-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 14px;
    display: inline-block;
}

.feature-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 14px;
    color: var(--text-secondary, rgba(255,255,255,0.55));
    line-height: 1.65;
    margin-bottom: 16px;
}

.feature-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--feature-color);
    font-size: 14px;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.feature-card:hover .feature-arrow {
    opacity: 1;
    transform: translateX(0);
}


/* ===================================
   5. AI ACADEMY SPOTLIGHT
   =================================== */
.ai-spotlight-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}

.ai-spotlight-content .section-overline {
    display: flex;
}

.ai-spotlight-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--black);
    margin: 12px 0 20px;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.ai-spotlight-content > p {
    font-size: 1.05rem;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    line-height: 1.7;
    margin-bottom: 28px;
}

.ai-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--black);
    font-weight: 500;
}

.ai-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(87, 185, 255, 0.15);
    color: #57B9FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* AI Visual Card (mock UI) */
.ai-visual-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.ai-visual-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-visual-dots {
    display: flex;
    gap: 6px;
}

.ai-visual-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ai-visual-dots span:nth-child(1) { background: #ef4444; }
.ai-visual-dots span:nth-child(2) { background: #f59e0b; }
.ai-visual-dots span:nth-child(3) { background: #22c55e; }

.ai-visual-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

.ai-visual-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-topic-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.ai-topic-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ai-topic-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ai-topic-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-topic-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.ai-topic-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.ai-topic-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.ai-topic-badge.done {
    background: rgba(87, 185, 255, 0.15);
    color: #57B9FF;
}

.ai-topic-badge.progress {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.ai-topic-badge.new {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}


/* ===================================
   6. FINANCIAL TOOLS
   =================================== */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.tools-grid .tool-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    display: block;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tools-grid .tool-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.tool-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 20px;
    background: color-mix(in srgb, var(--tool-color) 12%, transparent);
    color: var(--tool-color);
    transition: transform 0.3s ease;
}

.tools-grid .tool-card:hover .tool-icon-wrap {
    transform: scale(1.15) rotate(-5deg);
}

.tools-grid .tool-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 10px;
}

.tools-grid .tool-card p {
    font-size: 13.5px;
    color: var(--text-secondary, rgba(255,255,255,0.55));
    line-height: 1.6;
}


/* ===================================
   7. SANDBOX / SIMULATORS
   =================================== */
.sandbox-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}

.sandbox-content .section-overline {
    display: flex;
}

.sandbox-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--black);
    margin: 12px 0 20px;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.sandbox-content > p {
    font-size: 1.05rem;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    line-height: 1.7;
    margin-bottom: 24px;
}

.sandbox-games {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sandbox-game-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.sandbox-game-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.sandbox-game-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.sandbox-game-icon.wc {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.sandbox-game-icon.wb {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.sandbox-game-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 6px;
}

.sandbox-game-item p {
    font-size: 13.5px;
    color: var(--text-secondary, rgba(255,255,255,0.55));
    line-height: 1.55;
    margin: 0;
}

/* Sandbox Mock Chart */
.sandbox-mock {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.sandbox-mock-bar {
    display: flex;
    gap: 6px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sandbox-mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.sandbox-mock-dot.red { background: #ef4444; }
.sandbox-mock-dot.yellow { background: #f59e0b; }
.sandbox-mock-dot.green { background: #22c55e; }

.sandbox-mock-body {
    padding: 24px 20px;
}

.sandbox-chart-line {
    margin-bottom: 24px;
    height: 80px;
}

.sandbox-chart-line svg {
    width: 100%;
    height: 100%;
}

.chart-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawChart 2s ease forwards;
    animation-delay: 0.5s;
}

.chart-area {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
    animation-delay: 2s;
}

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

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

.sandbox-mock-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sandbox-stat {
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.sandbox-stat-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sandbox-stat-value {
    font-size: 18px;
    font-weight: 700;
}

.sandbox-stat-value.up {
    color: #22c55e;
}

.sandbox-stat-value.neutral {
    color: #f59e0b;
}


/* ===================================
   8. STATS RIBBON
   =================================== */
.section-stats {
    padding: 40px 0 !important;
}

.stats-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-item {
    text-align: center;
    padding: 36px 20px;
    border-radius: 20px;
    background: rgba(87, 185, 255, 0.04);
    border: 1px solid rgba(87, 185, 255, 0.1);
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: rgba(87, 185, 255, 0.08);
    border-color: rgba(87, 185, 255, 0.2);
    transform: translateY(-4px);
}

.stat-value {
    display: block;
    font-size: 2.8rem;
    font-weight: 800;
    color: #57B9FF;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary, rgba(255,255,255,0.55));
    font-weight: 500;
    letter-spacing: 0.5px;
}


/* ===================================
   9. MORE FEATURES GRID
   =================================== */
.more-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.more-feature-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.more-feature-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
}

.more-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(87, 185, 255, 0.1);
    color: #57B9FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.more-feature-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 6px;
}

.more-feature-card p {
    font-size: 13.5px;
    color: var(--text-secondary, rgba(255,255,255,0.55));
    line-height: 1.55;
    margin: 0;
}


/* ===================================
   9b. STORY STATS — narrative callouts
   =================================== */
.section-story-stats {
    padding: 60px 0 !important;
}

.story-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.story-stat-card {
    position: relative;
    padding: 32px 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--story-color, #57B9FF);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    overflow: hidden;
    animation: fadeInUp 0.6s ease both;
}

.story-stat-card::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, var(--story-color) 0%, transparent 65%);
    opacity: 0.07;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.story-stat-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--story-color);
    border-left-color: var(--story-color);
}

.story-stat-card:hover::before { opacity: 0.14; }

.story-stat-big {
    font-size: clamp(48px, 6vw, 68px);
    font-weight: 800;
    line-height: 1;
    color: var(--story-color, #57B9FF);
    letter-spacing: -2px;
    margin-bottom: 14px;
    position: relative;
}

.story-stat-headline {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 12px;
    position: relative;
}

.story-stat-body {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    position: relative;
}

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

@media (max-width: 768px) {
    .story-stats-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 28px;
    }

    .story-stat-card {
        padding: 26px 22px;
    }

    .story-stat-headline { font-size: 16px; }
    .story-stat-body     { font-size: 13.5px; }
}

[data-theme="light"] .story-stat-card {
    background: #ffffff;
    border-color: #e6e8ef;
}

[data-theme="light"] .story-stat-headline {
    color: #1a1a1a;
}

[data-theme="light"] .story-stat-body {
    color: rgba(26, 26, 26, 0.65);
}


/* ===================================
   10. FINAL CTA
   =================================== */
.section-cta {
    padding: 50px 0 !important;
}

.cta-block {
    position: relative;
    text-align: center;
    padding: 48px 40px;
    border-radius: 28px;
    background: rgba(87, 185, 255, 0.04);
    border: 1px solid rgba(87, 185, 255, 0.12);
    overflow: hidden;
}

.cta-glow {
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(87, 185, 255, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.cta-block h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 20px;
    position: relative;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.cta-block p {
    font-size: 1.1rem;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: 1.7;
    position: relative;
}

.cta-block .hero-cta {
    position: relative;
    justify-content: center;
}


/* ===================================
   12. FOOTER
   =================================== */
.public-footer {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 32px 0 20px;
    color: #fff;
    position: relative;
    z-index: 1;
}

.public-footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 24px;
    align-items: start;
}

/* Two-column variant — used by the global Footer component (Features
   column removed). Brand block keeps the wider track, Company column
   sits to the right. Collapses to one column on narrow screens. */
.public-footer-content.public-footer-content-2col {
    grid-template-columns: 2fr 1fr;
    gap: 56px;
}

@media (max-width: 720px) {
    .public-footer-content.public-footer-content-2col {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Cap the wordmark at every breakpoint regardless of source aspect ratio.
   The HTML `height="36"` attribute alone wasn't enforcing on small
   viewports, so explicit max-width keeps the logo proportional. */
.public-footer-brand img {
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

.public-footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.65;
    font-size: 14px;
    max-width: 300px;
}

@media (max-width: 720px) {
    .public-footer-brand img {
        height: 32px;
        max-width: 140px;
    }
}

@media (max-width: 480px) {
    .public-footer-brand img {
        height: 28px;
        max-width: 120px;
    }
}

/* Social row — small circular tiles in the brand column. Hover ramp uses
   the same purple→pink gradient as the rest of the site so the footer
   reads as part of the brand, not a generic widget. */
.public-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.public-footer-social li {
    margin: 0;
}

.public-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: transform 150ms ease, background 150ms ease,
                border-color 150ms ease, color 150ms ease,
                box-shadow 150ms ease;
}

.public-footer-social a:hover,
.public-footer-social a:focus-visible {
    background: linear-gradient(135deg, var(--primary, #7300e7), #FF00CC);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(255, 0, 204, 0.45);
    outline: none;
}

@media (max-width: 480px) {
    .public-footer-social a {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

.public-footer-links h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.public-footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.public-footer-links li {
    margin-bottom: 12px;
}

.public-footer-links a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 14px;
}

.public-footer-links a:hover {
    color: #57B9FF;
}

.public-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

.public-footer-bottom p {
    margin: 0;
}


/* ===================================
   CONTACT POPUP
   =================================== */
.contact-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: contactFadeIn 0.2s ease;
}

@keyframes contactFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.contact-popup {
    background: #131828;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 36px 32px;
    max-width: 400px;
    width: 90%;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.contact-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.contact-popup-close:hover {
    color: #fff;
}

.contact-popup h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-popup > p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    margin-bottom: 24px;
}

.contact-popup-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-popup-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.2s;
}

.contact-popup-item:hover {
    background: rgba(87, 185, 255, 0.1);
    border-color: rgba(87, 185, 255, 0.3);
    color: #57B9FF;
}

.contact-popup-item svg {
    font-size: 18px;
    color: #57B9FF;
    flex-shrink: 0;
}

[data-theme="light"] .contact-popup {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .contact-popup h3 {
    color: #111;
}

[data-theme="light"] .contact-popup > p {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .contact-popup-item {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: #222;
}

[data-theme="light"] .contact-popup-item:hover {
    background: rgba(58, 159, 217, 0.08);
    border-color: rgba(58, 159, 217, 0.3);
    color: #3a9fd9;
}

[data-theme="light"] .contact-popup-close {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .contact-popup-close:hover {
    color: #111;
}

/* ===================================
   13. DARK THEME OVERRIDES
   =================================== */
[data-theme="dark"] .public-section {
    background: transparent;
}

[data-theme="dark"] .feature-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .more-feature-card,
[data-theme="dark"] .sandbox-game-item,
[data-theme="dark"] .stat-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ===================================
   14. LIGHT THEME OVERRIDES
   =================================== */
[data-theme="light"] .public-header {
    background: transparent;
    border-bottom: none;
}

[data-theme="light"] .public-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .public-header-nav a {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .public-header-nav a:hover,
[data-theme="light"] .public-header-nav a.active {
    color: #3a9fd9;
}

[data-theme="light"] .btn-login {
    color: #333;
}

[data-theme="light"] .btn-login:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

[data-theme="light"] .feature-card,
[data-theme="light"] .tool-card,
[data-theme="light"] .more-feature-card,
[data-theme="light"] .sandbox-game-item,
[data-theme="light"] .stat-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .feature-card:hover,
[data-theme="light"] .tool-card:hover,
[data-theme="light"] .more-feature-card:hover,
[data-theme="light"] .sandbox-game-item:hover,
[data-theme="light"] .stat-item:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ai-visual-card,
[data-theme="light"] .sandbox-mock {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ai-visual-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ai-visual-title {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .ai-topic-name {
    color: #222;
}

[data-theme="light"] .ai-topic-sub {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .sandbox-mock-bar {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sandbox-stat {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .sandbox-stat-label {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .cta-block {
    background: rgba(87, 185, 255, 0.03);
    border-color: rgba(87, 185, 255, 0.15);
}

[data-theme="light"] .public-footer {
    background: rgba(10, 15, 30, 0.95);
}

[data-theme="light"] .section-title-center p,
[data-theme="light"] .ai-spotlight-content > p,
[data-theme="light"] .sandbox-content > p,
[data-theme="light"] .feature-card p,
[data-theme="light"] .tool-card p,
[data-theme="light"] .more-feature-card p,
[data-theme="light"] .sandbox-game-item p,
[data-theme="light"] .cta-block p,
[data-theme="light"] .stat-label {
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .section-overline {
    color: #3a9fd9;
}

[data-theme="light"] .hero-badge {
    background: rgba(58, 159, 217, 0.08);
    border-color: rgba(58, 159, 217, 0.2);
    color: #3a9fd9;
}

[data-theme="light"] .hexagon-popup {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(180, 80, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}


/* ===================================
   15. RESPONSIVE
   =================================== */
@media (max-width: 1200px) {
    .features-grid,
    .more-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .ai-spotlight-layout,
    .sandbox-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sandbox-layout {
        direction: ltr;
    }

    .sandbox-visual {
        order: 2;
    }

    .sandbox-content {
        order: 1;
    }
}

/* Tablet — hero starts adapting, grids reduce */
@media (max-width: 1024px) {
    /* Kill 85vh + center alignment so content doesn't get pushed down ~120px
       below the fixed header on short-viewport tablets/small laptops. */
    .public-hero {
        min-height: auto;
        align-items: flex-start;
        padding-top: 110px;
        padding-bottom: 40px;
    }

    .public-hero-content {
        max-width: 60%;
        padding: 0 30px 30px;
    }

    .public-hero-content h1 {
        font-size: 3rem;
    }

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

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

    .public-header-logo img {
        height: 45px;
    }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
    .public-hero {
        min-height: auto;
        align-items: flex-start;
        padding-top: 88px;
        padding-bottom: 28px;
    }

    .public-hero-content {
        max-width: 100%;
        text-align: left;
        padding: 0 20px 24px;
    }

    .public-hero-content h1 {
        font-size: 2.4rem;
    }

    .public-hero-content p {
        font-size: 1rem;
    }

    .hero-badge {
        font-size: 12px;
        padding: 6px 16px;
        margin-bottom: 20px;
    }

    .hero-cta {
        justify-content: flex-start;
    }

    .btn-primary-hero,
    .btn-secondary-hero {
        padding: 12px 28px;
        font-size: 15px;
    }

    .hexagon-overlay {
        display: none;
    }

    /* Mobile — drop the globe background entirely so the hero copy
       sits on a clean dark surface instead of competing with the
       hexagon-network image, which dominates a narrow viewport. */
    .public-hero-globe {
        display: none;
    }

    .public-hero-globe::after {
        display: none;
    }

    .section-title-center h2 {
        font-size: 1.8rem;
    }

    .section-title-center p {
        font-size: 0.95rem;
        padding: 0 10px;
    }

    .ai-spotlight-content h2,
    .sandbox-content h2 {
        font-size: 1.7rem;
    }

    .cta-block h2 {
        font-size: 2rem;
    }

    .cta-block {
        padding: 40px 20px;
        border-radius: 16px;
    }

    .features-grid,
    .tools-grid,
    .more-features-grid,
    .stats-ribbon {
        grid-template-columns: 1fr;
    }

    .feature-card {
        padding: 28px 22px 24px;
    }

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

    .public-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .public-section-header h2 {
        font-size: 1.4rem;
    }

    .public-header-nav {
        display: none;
    }

    .public-header-logo img {
        height: 40px;
    }

    .public-footer-content {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .stat-value {
        font-size: 2.2rem;
    }

    .public-section {
        padding: 36px 0;
    }

    .ai-visual-card {
        margin: 0 -10px;
    }

    .ai-topic-row {
        padding: 10px 12px;
        gap: 10px;
    }

    .ai-topic-name {
        font-size: 13px;
    }

    .ai-topic-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .sandbox-game-grid {
        grid-template-columns: 1fr;
    }

    .stat-item {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .public-hero {
        padding-top: 68px;
        padding-bottom: 24px;
    }

    .public-hero-content {
        padding: 0 16px 20px;
    }

    .public-hero-content h1 {
        font-size: 1.8rem;
        letter-spacing: -0.5px;
    }

    .public-hero-content p {
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 6px 14px;
        margin-bottom: 16px;
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .btn-primary-hero,
    .btn-secondary-hero {
        text-align: center;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 8px;
    }

    .public-header {
        padding: 12px 0;
    }

    .public-header-logo img {
        height: 34px;
    }

    .public-header-actions {
        gap: 6px;
    }

    .btn-login,
    .btn-register {
        padding: 7px 14px;
        font-size: 13px;
        border-radius: 6px;
    }

    .section-title-center h2 {
        font-size: 1.5rem;
    }

    .section-title-center p {
        font-size: 0.85rem;
    }

    .section-overline {
        font-size: 18px;
        letter-spacing: 2px;
        gap: 10px;
        margin-bottom: 18px;
    }
    .overline-icon {
        width: 38px;
        height: 38px;
        margin-right: 8px;
    }

    .cta-block h2 {
        font-size: 1.5rem;
    }

    .cta-block p {
        font-size: 0.9rem;
    }

    .public-footer {
        padding: 30px 0 20px;
    }

    .public-footer-bottom {
        font-size: 11px;
    }

    .feature-card h3 {
        font-size: 1.05rem;
    }

    .feature-card p {
        font-size: 13px;
    }

    .ai-spotlight-content h2,
    .sandbox-content h2 {
        font-size: 1.4rem;
    }

    .ai-features-list li {
        font-size: 13px;
    }

    .tool-icon-wrap {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
}