:root {
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --secondary: #0f172a;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --bg-main: #ffffff;
    --bg-alt: #f8fafc;
    --border: #e2e8f0;
    --radius: 12px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.2);
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-main);
    line-height: 1.6;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

/* Typography */
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.highlight {
    color: var(--primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.05rem;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    border: 2px solid var(--primary);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

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

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

.btn-outline-light {
    background-color: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--secondary);
}

.logo-icon {
    color: var(--primary);
}

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

.nav-links a {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
}

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

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

.login {
    font-weight: 600;
    color: var(--text-main);
}

.login:hover {
    color: var(--primary);
}

/* Hero Section */
.hero {
    padding: 160px 24px 80px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, rgba(255,255,255,0) 70%);
    z-index: -1;
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 6px 16px 6px 6px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-badge:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.badge-new {
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.hero-title {
    font-size: 4.5rem;
    color: var(--secondary);
    margin-bottom: 24px;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 40px;
}

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

.hero-features {
    display: flex;
    justify-content: center;
    gap: 32px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.hero-features span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-features i {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

/* Stacker Hero Styles */
.stacker-hero {
    position: relative;
    padding-top: 180px;
    padding-bottom: 180px;
}

.hero-gradient-bg {
    position: absolute;
    bottom: -10%;
    left: 0;
    width: 100%;
    height: 70%;
    background: radial-gradient(ellipse at bottom, 
        rgba(37,99,235,0.4) 0%, 
        rgba(56,189,248,0.3) 25%, 
        rgba(250,204,21,0.25) 50%, 
        rgba(16,185,129,0.2) 75%, 
        rgba(255,255,255,0) 100%);
    filter: blur(80px);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.stacker-hero .hero-title {
    font-size: 5rem;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #111827;
}

.stacker-hero .highlight {
    color: #2563eb;
}

.btn-dark-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #111827;
    color: white;
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-dark-pill:hover {
    background: #1f2937;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.btn-dark-pill .play-icon {
    background: white;
    color: #111827;
    border-radius: 50%;
    padding: 2px;
    width: 24px;
    height: 24px;
}

.btn-dark-pill .duration {
    color: #9ca3af;
    font-weight: 400;
    font-size: 0.9rem;
}

/* Floating Icons */
.floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.float-icon {
    position: absolute;
    background: white;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float-icon 6s ease-in-out infinite;
}

.float-icon i {
    width: 32px;
    height: 32px;
}

.icon-1 { top: 20%; left: 12%; animation-delay: 0s; }
.icon-2 { top: 15%; right: 15%; animation-delay: -1s; }
.icon-3 { top: 55%; left: 8%; animation-delay: -2s; }
.icon-4 { top: 45%; right: 10%; animation-delay: -3s; }
.icon-5 { top: 75%; left: 18%; animation-delay: -4s; }
.icon-6 { top: 70%; right: 22%; animation-delay: -5s; }

@keyframes float-icon {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Split Hero Styles */
.split-hero {
    padding: 160px 24px 80px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    background: transparent;
}

.split-hero .hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.split-hero .hero-text-content {
    flex: 1;
    text-align: left;
    max-width: 600px;
}

.split-hero .hero-title {
    font-size: 4.5rem;
    color: var(--secondary);
    margin-bottom: 24px;
    line-height: 1.1;
    font-weight: 800;
}

.split-hero .highlight {
    color: #e85d2c;
}

.split-hero .hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 500px;
}

.hero-search-bar {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 100px;
    padding: 8px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-width: 600px;
    border: 1px solid var(--border);
}

.search-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    flex: 1;
}

.search-input-group i {
    color: var(--text-muted);
    width: 20px;
    height: 20px;
}

.search-input-group input {
    border: none;
    outline: none;
    font-size: 0.95rem;
    width: 100%;
    color: var(--text-main);
    font-family: inherit;
}

.search-input-group input::placeholder {
    color: #94a3b8;
}

.search-input-divider {
    width: 1px;
    height: 30px;
    background: var(--border);
    margin: 0 8px;
}

.search-btn {
    background: #e85d2c;
    color: white;
    border-radius: 100px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(232, 93, 44, 0.3);
    cursor: pointer;
    border: none;
}

.search-btn:hover {
    background: #d44d1e;
    box-shadow: 0 6px 20px rgba(232, 93, 44, 0.4);
}

.split-hero .hero-visual {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.split-hero .hero-3d-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: contrast(1.15) brightness(1.05);
    animation: float-icon 6s ease-in-out infinite;
}

.stacker-hero .hero-mockup-container {
    margin-top: 60px;
    position: relative;
    z-index: 10;
}

/* Mockup */
.hero-mockup-container {
    margin-top: 80px;
    position: relative;
    perspective: 1000px;
}

.hero-mockup {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow: hidden;
    transform: rotateX(5deg) scale(0.95);
    transition: transform 0.5s ease;
    max-width: 1000px;
    margin: 0 auto;
}

.hero-mockup:hover {
    transform: rotateX(0) scale(1);
}

.mockup-header {
    background: var(--bg-alt);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

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

.mockup-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.mockup-dots span:nth-child(1) { background: #ef4444; }
.mockup-dots span:nth-child(2) { background: #f59e0b; }
.mockup-dots span:nth-child(3) { background: #10b981; }

.mockup-title {
    margin-left: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.mockup-body {
    display: flex;
    height: 500px;
    text-align: left;
}

.discord-sidebar {
    width: 240px;
    background: #f1f5f9;
    padding: 20px;
    border-right: 1px solid var(--border);
}

.server-icon {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.channel {
    padding: 8px 12px;
    color: var(--text-muted);
    font-weight: 500;
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
}

.channel.active {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.discord-chat {
    flex: 1;
    padding: 32px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.chat-message {
    display: flex;
    gap: 16px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.user-avatar { background: #8b5cf6; }
.bot-avatar { background: var(--primary); }

.msg-content {
    flex: 1;
}

.username {
    font-weight: 600;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.bot-tag {
    background: var(--primary);
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.command {
    color: var(--text-main);
    background: var(--bg-alt);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
}

.embed {
    margin-top: 8px;
    border-left: 4px solid var(--primary);
    background: var(--bg-alt);
    padding: 16px;
    border-radius: 0 8px 8px 0;
}

.embed-title {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}

.embed p {
    color: var(--text-main);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.progress-container {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
}

.stats {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    margin-bottom: 0 !important;
}

.floating-element {
    position: absolute;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow-lg);
    color: var(--primary);
    animation: float 6s ease-in-out infinite;
}

.f-1 {
    top: 20%;
    left: -5%;
    animation-delay: 0s;
}

.f-2 {
    bottom: 20%;
    right: -5%;
    animation-delay: -3s;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Logos */
.trusted-by {
    padding: 60px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}

.trusted-by p {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 32px;
}

.logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    opacity: 0.6;
}

.logo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--secondary);
    filter: grayscale(100%);
    transition: all 0.3s;
}

.logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Common Section Styles */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.section-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(37, 99, 235, 0.1);
    padding: 4px 12px;
    border-radius: 100px;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    display: inline-block;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--secondary);
    margin-bottom: 16px;
}

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

/* Features Grid */
.features {
    padding: 120px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

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

.feature-card {
    background: white;
    border: 1px solid var(--border);
    padding: 32px;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.feature-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
    transform: translateY(-5px);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 24px;
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--secondary);
}

.feature-card p {
    color: var(--text-muted);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.feature-link {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
}

.feature-link:hover {
    color: var(--primary-dark);
}

/* Split Section */
.split-section {
    padding: 120px 24px;
    background: var(--bg-alt);
}

.split-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

.split-text {
    flex: 1;
}

.split-text h2 {
    font-size: 2.5rem;
    color: var(--secondary);
    margin-bottom: 24px;
    margin-top: 16px;
}

.lead {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.benefit-list {
    list-style: none;
    margin-bottom: 40px;
}

.benefit-list li {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.benefit-icon {
    margin-top: 2px;
}

.benefit-list strong {
    display: block;
    color: var(--secondary);
    margin-bottom: 4px;
}

.benefit-list span {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.split-visual {
    flex: 1;
    position: relative;
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid white;
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-lg);
}

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

.badge {
    background: #ecfdf5;
    color: #10b981;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
}

.stat-row {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.stat-box {
    flex: 1;
    background: var(--bg-alt);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--secondary);
}

.stat-trend {
    font-size: 0.8rem;
    margin-left: 8px;
}

.positive { color: #10b981; }

.chart-placeholder {
    height: 120px;
    margin-bottom: 32px;
}

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

.node-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.node-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-alt);
    border-radius: 8px;
    font-size: 0.9rem;
}

.node-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.node-info i {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.node-status {
    font-size: 0.8rem;
    font-weight: 600;
}

.node-status.rendering { color: var(--primary); }
.node-status.idle { color: var(--text-muted); }

/* Dark Section */
.dark-section {
    background: var(--secondary);
    padding: 120px 24px;
    color: white;
}

.section-header.light h2 {
    color: white;
}

.section-header.light p {
    color: #94a3b8;
}

.use-cases-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.use-case-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.3s;
}

.use-case-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.card-img {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.freelance { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.studio { background: linear-gradient(135deg, #10b981, #3b82f6); }
.archviz { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.use-case-card h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
}

.use-case-card p {
    color: #cbd5e1;
    font-size: 0.95rem;
}

/* Tech Stack */
.tech-stack {
    padding: 120px 24px;
    max-width: 1000px;
    margin: 0 auto;
}

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

.tech-item {
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: white;
}

.tech-item h4 {
    font-size: 1.1rem;
    color: var(--secondary);
    margin-bottom: 8px;
}

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

/* CTA Section */
.cta-section {
    padding: 100px 24px;
    background: var(--primary);
    text-align: center;
    color: white;
}

.cta-container {
    max-width: 700px;
    margin: 0 auto;
}

.cta-container h2 {
    font-size: 3rem;
    margin-bottom: 24px;
}

.cta-container p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
}

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

.cta-buttons .btn-primary {
    background: white;
    color: var(--primary);
    border-color: white;
}

.cta-buttons .btn-primary:hover {
    background: var(--bg-alt);
}

/* Footer */
footer {
    background: white;
    padding: 80px 24px 40px;
    border-top: 1px solid var(--border);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 60px;
}

.footer-brand {
    flex: 1;
    max-width: 300px;
}

.footer-brand .logo {
    margin-bottom: 20px;
}

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

.footer-links {
    display: flex;
    gap: 80px;
}

.link-group h4 {
    font-size: 1rem;
    color: var(--secondary);
    margin-bottom: 24px;
}

.link-group a {
    display: block;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.link-group a:hover {
    color: var(--primary);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Remote Control Section */
.remote-section {
    background-color: #fdf6ef;
    padding: 120px 24px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.remote-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

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

.progress-section {
    background-color: #f8fafc;
}

/* Premium Bot Widget */
.premium-bot-widget {
    background: #0f172a;
    border-radius: 24px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.widget-header {
    background: rgba(255,255,255,0.03);
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 16px;
}

.widget-dots {
    display: flex;
    gap: 6px;
}
.widget-dots span {
    width: 10px; height: 10px; border-radius: 50%; background: #334155;
}
.widget-dots span:nth-child(1) { background: #ef4444; }
.widget-dots span:nth-child(2) { background: #f59e0b; }
.widget-dots span:nth-child(3) { background: #10b981; }

.widget-title {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.widget-body {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cmd-pill {
    align-self: flex-start;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cmd-prompt {
    color: #818cf8;
    font-weight: 700;
}

.bot-response-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 20px;
}

.br-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.br-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.br-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.br-name {
    color: #f8fafc;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.br-badge {
    background: #4f46e5;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.br-time {
    color: #64748b;
    font-size: 0.75rem;
}

.br-title {
    color: #f1f5f9;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.br-title i { width: 18px; height: 18px; color: #06b6d4; }

.br-task {
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 16px;
}

.br-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.br-task-name {
    color: #e2e8f0;
    font-size: 0.85rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    display: flex;
    align-items: center;
    gap: 8px;
}
.br-task-name i { width: 14px; height: 14px; color: #fb923c; }

.br-task-stats {
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 500;
}

.br-progress-bar-container {
    height: 6px;
    background: #1e293b;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.br-progress-bar {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    border-radius: 4px;
    z-index: 2;
}

.br-progress-glow {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: #06b6d4;
    filter: blur(8px);
    opacity: 0.6;
    z-index: 1;
}

.remote-text {
    flex: 1;
    max-width: 480px;
}

.remote-text .eyebrow {
    font-size: 0.85rem;
    font-weight: 700;
    color: #a8a29e;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    display: block;
}

.remote-text h2 {
    font-size: 3.5rem;
    color: #171717;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.remote-text p {
    font-size: 1.1rem;
    color: #78716c;
    margin-bottom: 40px;
    line-height: 1.6;
}

.explore-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-weight: 700;
    color: #171717;
    font-size: 1.1rem;
}

.explore-link .arrow-box {
    background-color: #fb923c;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.explore-link:hover .arrow-box {
    transform: translateX(5px);
}

.remote-visual {
    flex: 1;
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-card {
    background: white;
    border-radius: 32px;
    padding: 32px;
    width: 380px;
    height: 520px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

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

.main-card h4 {
    font-size: 1.5rem;
    color: #171717;
}

.plus-btn {
    width: 36px;
    height: 36px;
    background: #171717;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-tag {
    color: #a8a29e;
    font-size: 1rem;
    margin-bottom: 40px;
}

.card-image-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-3d-image {
    width: 280px;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
    animation: float-3d 6s ease-in-out infinite;
}

@keyframes float-3d {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.card-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.card-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.dot.red { background: #ef4444; }
.dot.yellow { background: #f59e0b; }
.dot.blue { background: #3b82f6; }

.floating-card {
    position: absolute;
    background: white;
    padding: 16px 20px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    z-index: 3;
}

.fc-label {
    display: block;
    font-size: 0.8rem;
    color: #a8a29e;
    font-weight: 600;
    margin-bottom: 8px;
}

.best-ratings {
    top: 35%;
    left: 20px;
}

.emoji-row {
    font-size: 1rem;
    letter-spacing: 2px;
}

.choose-color {
    top: 45%;
    right: -20px;
    width: 160px;
}

.gradient-bar {
    height: 8px;
    background: linear-gradient(to right, #ef4444, #f59e0b, #10b981, #3b82f6);
    border-radius: 4px;
}

.size-card {
    bottom: 50px;
    right: 20px;
    background: #1e1b4b;
    padding: 24px;
    border-radius: 20px;
}

.fc-label-white {
    display: block;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    margin-bottom: 16px;
}

.size-options {
    display: flex;
    gap: 12px;
}

.size-opt {
    padding: 8px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.size-opt.active {
    background: white;
    color: #1e1b4b;
}

/* Auto Upload Section (Earnwave Style) */
.auto-upload-section {
    position: relative;
    padding: 100px 24px;
    background: #f8fafc;
    overflow: hidden;
    text-align: center;
    border-radius: 40px;
    margin: 40px 24px;
}

.au-bg-waves {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 15% 20%, rgba(226, 232, 240, 0.6) 0%, transparent 40%),
                radial-gradient(circle at 85% 80%, rgba(226, 232, 240, 0.6) 0%, transparent 40%);
    pointer-events: none;
}

.auto-upload-section::before, .auto-upload-section::after {
    content: '';
    position: absolute;
    top: -50%;
    width: 300px;
    height: 200%;
    background: #e2e8f0;
    opacity: 0.3;
    border-radius: 50%;
}
.auto-upload-section::before { left: -150px; }
.auto-upload-section::after { right: -150px; }

.au-header {
    position: relative;
    max-width: 600px;
    margin: 0 auto 60px;
    z-index: 2;
}

.au-header h2 {
    font-size: 3rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 16px;
}

.au-header p {
    color: #64748b;
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.au-lock-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

.au-lock-row .line {
    width: 60px;
    height: 1px;
    background: #cbd5e1;
}

.au-lock-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.au-lock-icon i { width: 14px; height: 14px; }

.au-cards-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
}

.au-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 32px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
    padding: 32px;
    text-align: left;
}

.side-card {
    flex: 1;
    max-width: 320px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.center-card {
    flex: 1.5;
    max-width: 420px;
    min-height: 340px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-eyebrow {
    font-size: 0.875rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.side-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.card-subtext {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 24px;
}

.mini-chart {
    margin-top: auto;
    width: 100%;
}
.sparkline {
    width: 100%;
    height: 80px;
    overflow: visible;
}

.center-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 30px;
}

.orbit-container {
    position: relative;
    width: 240px;
    height: 240px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-ring {
    position: absolute;
    width: 240px;
    height: 120px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.cloud-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.cloud-icon i { width: 24px; height: 24px; }
.ci-1 { top: 30%; left: -20px; }
.ci-2 { top: -10px; left: 20%; }
.ci-3 { top: -10px; right: 20%; }
.ci-4 { top: 30%; right: -20px; }

.center-app-btn {
    position: relative;
    background: #0f172a;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    margin-top: 100px;
    box-shadow: 0 10px 20px -5px rgba(15,23,42,0.3);
}
.center-app-btn i { width: 18px; height: 18px; }

.right-card {
    position: relative;
}

.top-icon {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: #475569;
}

.chat-bubbles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: auto;
}

.bubble {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.4;
    max-width: 90%;
}

.bubble.bot {
    background: #e0e7ff;
    color: #3730a3;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.bubble.client {
    background: #f1f5f9;
    color: #475569;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.bubble a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

.arrow-btn {
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-title { font-size: 3.5rem; }
    .split-content { flex-direction: column; }
    .tech-grid { grid-template-columns: 1fr; }
    .footer-content { flex-direction: column; gap: 40px; }
    .footer-links { flex-wrap: wrap; gap: 40px; }
}

@media (max-width: 768px) {
    .nav-links, .nav-actions .login { display: none; }
    .hero { padding: 120px 24px 60px; }
    .hero-title { font-size: 2.5rem; }
    .hero-mockup-container { margin-top: 40px; }
    .mockup-body { flex-direction: column; height: auto; }
    .discord-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
    .cta-buttons { flex-direction: column; }
}


/* eLearn Inspired Layout */
.elearn-nav .nav-links a {
    color: var(--text-main);
    font-weight: 600;
    margin: 0 12px;
    position: relative;
}
.elearn-nav .nav-links a.active {
    color: #14b8a6; /* teal */
}
.elearn-nav .nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #14b8a6;
    border-radius: 2px;
}
.elearn-nav .badge-new {
    background: #f59e0b;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    position: absolute;
    top: -12px;
    right: -15px;
}
.elearn-nav .nav-actions {
    gap: 16px;
}
.elearn-nav .icon-link i {
    width: 20px;
    height: 20px;
    color: var(--text-main);
}
.elearn-nav .lang-select {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.elearn-nav .lang-select i {
    width: 16px;
    height: 16px;
}
.elearn-nav .btn-login {
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 100px;
    padding: 8px 24px;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}
.elearn-nav .btn-login:hover {
    background: #d97706;
    transform: translateY(-2px);
}

.elearn-hero {
    padding: 160px 24px 80px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.elearn-hero .hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.elearn-hero .hero-text-content {
    flex: 1;
    text-align: left;
    max-width: 550px;
}
.elearn-hero .highlight-yellow {
    color: #f59e0b;
}
.elearn-hero .dark-text {
    color: #0f172a;
}
.elearn-hero .hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 24px;
}
.elearn-hero .hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 32px;
}
.btn-teal-pill {
    background: #14b8a6;
    color: white;
    border-radius: 100px;
    padding: 14px 32px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 25px rgba(20, 184, 166, 0.3);
    border: none;
}
.btn-teal-pill i { width: 18px; height: 18px; }
.btn-teal-pill:hover {
    background: #0d9488;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(20, 184, 166, 0.4);
}

.elearn-hero .hero-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
}
.circle-backdrop {
    position: absolute;
    width: 450px;
    height: 450px;
    background: #14b8a6;
    border-radius: 50%;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.circle-backdrop::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border: 2px dashed #f59e0b;
    border-radius: 50%;
    top: -15px;
    left: -15px;
}
.inner-circle {
    width: 380px;
    height: 380px;
    background: #fef3c7;
    border-radius: 50%;
}
.elearn-hero .hero-3d-img {
    position: relative;
    z-index: 10;
    max-width: 110%;
    mix-blend-mode: multiply;
    filter: contrast(1.15) brightness(1.05);
}

.float-stat {
    position: absolute;
    background: white;
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 20;
    animation: float 5s ease-in-out infinite;
}
.stat-1 {
    top: 20%;
    right: -20px;
    animation-delay: 0s;
}
.stat-2 {
    bottom: 10%;
    left: -40px;
    animation-delay: 1.5s;
}
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.stat-icon.icon-yellow { background: #f59e0b; }
.stat-icon.icon-teal { background: #14b8a6; }
.stat-text {
    display: flex;
    flex-direction: column;
}
.stat-text strong {
    font-size: 1.25rem;
    color: var(--secondary);
    line-height: 1.2;
}
.stat-text span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Features Section Inline */
.hero-features-section {
    max-width: 1200px;
    margin: 80px auto 0;
    display: flex;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 10;
}
.features-left {
    display: flex;
    gap: 24px;
    flex: 1;
}
.feature-card-tall {
    background: white;
    border-radius: 24px;
    padding: 32px 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}
.card-offset {
    margin-top: 40px;
}
.fc-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 24px;
}
.bg-teal { background: #14b8a6; }
.bg-yellow { background: #f59e0b; }
.bg-orange { background: #f97316; }

.feature-card-tall h4 {
    font-size: 1.25rem;
    color: var(--secondary);
    margin-bottom: 12px;
}
.feature-card-tall p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 32px;
    flex: 1;
}
.arrow-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    align-self: flex-end;
}
.arrow-btn i { width: 16px; height: 16px; }

.features-right {
    flex: 1;
    padding-left: 40px;
}
.features-right h2 {
    font-size: 2.5rem;
    color: var(--secondary);
    line-height: 1.2;
    margin-bottom: 20px;
}
.text-teal { color: #14b8a6; }
.features-right p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 32px;
}
.mini-illustrations {
    display: flex;
    gap: 16px;
}
.mini-ill {
    width: 48px;
    height: 48px;
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #14b8a6;
}

/* Features List Section (Second Section) */
.features-list-section {
    padding: 120px 24px;
    background: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
}
.fl-container {
    display: flex;
    align-items: center;
    gap: 80px;
}

/* Visual / Left Side */
.fl-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
}
.fl-shape {
    position: absolute;
    border-radius: 40px;
    opacity: 0.15;
    z-index: 0;
}
.shape-blue {
    width: 320px;
    height: 320px;
    background: #3b82f6;
    top: 20px;
    left: 20px;
    transform: rotate(-10deg);
}
.shape-pink {
    width: 280px;
    height: 280px;
    background: #ec4899;
    bottom: 20px;
    right: 20px;
    transform: rotate(15deg);
}
.floating-icon-3d {
    position: absolute;
    top: 40px;
    right: 40px;
    background: #334155;
    color: #f59e0b;
    padding: 16px;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    z-index: 20;
    transform: rotate(15deg);
    animation: float-icon 6s ease-in-out infinite;
}
.floating-icon-3d i { width: 32px; height: 32px; }

/* Widget Card */
.fl-widget-card {
    background: white;
    width: 100%;
    max-width: 380px;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.08);
    position: relative;
    z-index: 10;
}
.widget-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}
.widget-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--secondary);
}
.w-icon {
    width: 36px;
    height: 36px;
    background: #5b21b6;
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.w-icon i { width: 20px; height: 20px; fill: white; }
.w-settings {
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.widget-slider-group {
    margin-bottom: 24px;
}
.w-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 12px;
}
.w-slider-track {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    position: relative;
}
.w-slider-fill {
    width: 70%;
    height: 100%;
    background: #ef4444;
    border-radius: 4px;
}
.w-slider-handle {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.widget-rating-group {
    display: flex;
    justify-content: space-between;
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 32px;
}
.rating-col {
    display: flex;
    flex-direction: column;
}
.rating-col.text-right { text-align: right; }
.rating-col strong {
    font-size: 1.1rem;
    color: var(--secondary);
}
.rating-col span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.widget-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.w-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s;
}
.w-btn:hover { transform: translateY(-2px); }
.w-btn-teal {
    background: #ccfbf1;
    color: #0f766e;
}
.w-btn-red {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 14px rgba(239,68,68,0.3);
}

.widget-footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 24px;
    cursor: pointer;
}

/* Right Side / Text */
.fl-text {
    flex: 1;
}
.fl-text h2 {
    font-size: 2.75rem;
    color: var(--secondary);
    line-height: 1.1;
    margin-bottom: 40px;
}
.fl-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.fl-item {
    display: flex;
    gap: 20px;
}
.fli-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    flex-shrink: 0;
}
.fli-icon i { width: 20px; height: 20px; }
.fli-content h4 {
    font-size: 1.15rem;
    color: var(--secondary);
    margin-bottom: 6px;
}
.fli-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Values Section (3 Columns) */
.values-section {
    padding: 120px 24px;
    background: #ffffff;
    text-align: center;
}
.values-container {
    max-width: 1200px;
    margin: 0 auto;
}
.values-header {
    margin-bottom: 70px;
}
.values-header h2 {
    font-size: 2.75rem;
    color: var(--secondary);
    margin-bottom: 20px;
}
.values-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.value-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.value-graphic-wrapper {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    position: relative;
    /* isolation: isolate; to prevent blend mode crashes */
    isolation: isolate; 
}
.bg-yellow-soft { background: #fef08a; } /* Soft yellow */
.bg-purple-soft { background: #e0e7ff; } /* Soft purple */
.bg-pink-soft { background: #fce7f3; } /* Soft pink */

.value-graphic-wrapper img {
    width: 160px;
    height: auto;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.1)) contrast(1.1);
    -webkit-mask-image: radial-gradient(circle, black 50%, transparent 70%);
    mask-image: radial-gradient(circle, black 50%, transparent 70%);
}
.value-card h3 {
    font-size: 1.4rem;
    color: var(--secondary);
    margin-bottom: 15px;
    line-height: 1.2;
}
.value-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}
.value-link {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
}
.value-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

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

/* Bento Dashboard Section */
.bento-section {
    padding: 120px 24px;
    background: #fdfdfd;
}
.bento-container {
    max-width: 1200px;
    margin: 0 auto;
}
.bento-header {
    text-align: center;
    margin-bottom: 70px;
}
.bento-header h2 {
    font-size: 2.75rem;
    color: var(--secondary);
    margin-bottom: 20px;
}
.bento-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}
.bento-layout {
    display: grid;
    grid-template-columns: 240px 1fr 300px;
    gap: 30px;
    background: #f4f6fa;
    padding: 30px;
    border-radius: 32px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
}
.bento-sidebar {
    background: transparent;
    padding-right: 20px;
    border-right: 1px solid rgba(0,0,0,0.05);
}
.bs-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--secondary);
    margin-bottom: 40px;
    padding-left: 10px;
}
.bs-logo i { color: var(--primary); }
.bs-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bs-menu li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text-muted);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.bs-menu li i { width: 18px; height: 18px; opacity: 0.7; }
.bs-menu li:hover { background: rgba(0,0,0,0.03); color: var(--secondary); }
.bs-menu li.active { background: #ffffff; color: var(--secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.bs-menu li.active i { opacity: 1; color: var(--primary); }

.bm-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.bm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.bm-header h3 { font-size: 1.5rem; color: var(--secondary); }
.bm-badge { background: #fce7f3; color: #ec4899; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; }
.bm-subtitle { color: var(--text-muted); margin-bottom: 30px; font-size: 0.95rem; }

.cmd-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cmd-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}
.cmd-name { font-weight: 700; color: var(--primary-dark); font-family: monospace; font-size: 1.1rem; }
.cmd-desc { color: var(--text-muted); font-size: 0.95rem; }

.bento-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.br-widget {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.widget-swarm {
    align-items: center;
}
.swarm-avatars {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.swarm-avatars img {
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid white; margin-left: -10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.swarm-avatars img:first-child { margin-left: 0; }
.avatar-more {
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid white; margin-left: -10px;
    background: #f1f5f9; color: var(--secondary); font-weight: 700; display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.br-widget h3 { font-size: 1.4rem; color: var(--secondary); margin-bottom: 4px; }
.br-widget p { color: var(--text-muted); font-size: 0.85rem; }

.widget-hw {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: white;
    text-align: left;
}
.hw-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    opacity: 0.9;
}
.hw-brand { font-weight: 600; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; }
.hw-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}
.hw-stat { display: flex; flex-direction: column; gap: 4px; }
.hw-label { font-size: 0.75rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; }
.hw-val { font-size: 1.4rem; font-weight: 700; }
.hw-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden; }
.hw-fill { width: 99%; height: 100%; background: #ffffff; border-radius: 4px; }

@media (max-width: 992px) {
    .bento-layout { grid-template-columns: 1fr; }
    .bento-sidebar { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05); padding-right: 0; padding-bottom: 20px; }
    .bs-menu { flex-direction: row; flex-wrap: wrap; }
}

/* Mobile App Redesign (Section 3) */
.mobile-section {
    padding: 120px 24px;
    background: #ffffff;
    overflow: hidden;
}

.ms-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

/* Left Side: Mockup & Backdrop */
.ms-left {
    position: relative;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ms-backdrop-circle {
    position: absolute;
    width: 450px;
    height: 450px;
    background: #645b95; /* Deep purple from reference */
    border-radius: 50%;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ms-backdrop-circle-small {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #e6e6ef; /* Light purple offset */
    border-radius: 50%;
    z-index: -1;
    left: 60%;
    top: 20%;
}

.ms-phone-mockup {
    position: relative;
    z-index: 1;
    width: 280px;
    height: 580px;
    border-radius: 40px;
    background: #111827;
    border: 10px solid #000;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mockup-ui {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #36393f;
    color: #dcddde;
}
.mui-header {
    padding: 20px 16px 12px;
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 1px solid #202225;
    background: #36393f;
    color: white;
}
.mui-chat {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: hidden;
}
.mui-msg {
    display: flex;
    gap: 12px;
}
.mui-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mui-content {
    font-size: 0.85rem;
    line-height: 1.4;
}
.mui-name {
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.mui-bot-tag {
    background: #5865F2;
    color: white;
    font-size: 0.6rem;
    padding: 2px 4px;
    border-radius: 4px;
}
.mui-embed {
    background: #2f3136;
    border-left: 4px solid #f59e0b;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 4px;
    font-size: 0.8rem;
    color: #b9bbbe;
}
.mui-embed strong {
    color: white;
}
.mui-input-area {
    padding: 12px 16px;
    background: #36393f;
}
.mui-input {
    background: #40444b;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 0.8rem;
    color: #8e9297;
}

/* Right Side: Content */
.ms-right {
    width: 50%;
    padding-left: 20px;
}

.ms-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.ms-desc {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 450px;
}

.ms-btn {
    background: transparent;
    color: #ec4899;
    border: 2px solid #ec4899;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ms-btn:hover {
    background: #ec4899;
    color: white;
}

/* Cloud Uploads Section */
.cloud-section {
    padding: 120px 24px;
    background: #ffffff;
    overflow: hidden;
}

.cs-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

/* Left Side: Content */
.cs-left {
    width: 50%;
    padding-right: 20px;
}

.cs-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.cs-desc {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 500px;
}

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

.cs-btn-primary {
    background: #f87171;
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(248, 113, 113, 0.3);
    transition: all 0.2s;
}

.cs-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(248, 113, 113, 0.4);
}

.cs-link-secondary {
    color: #f87171;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
}

.cs-link-secondary:hover {
    color: #ef4444;
}

/* Right Side: Graphic */
.cs-right {
    width: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cs-graphic-wrapper {
    position: relative;
    width: 450px;
    height: 450px;
}

.cs-backdrop-square {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #eef2ff;
    border-radius: 40px;
    transform: rotate(10deg);
    z-index: 0;
}

.cs-graphic-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    max-width: 550px;
    z-index: 1;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.15));
}

/* Portfolio Section (Section 4) */
.portfolio-section {
    position: relative;
    padding: 100px 0 160px 0;
    overflow: hidden;
    background: #ffffff;
}

.ps-bg-diagonal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e6f7f2;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 80%);
    z-index: 0;
}

.ps-deco-shapes {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ps-shape {
    width: 40px;
    height: 40px;
    background: #0d9488;
    border-radius: 8px;
    transform: skewY(-20deg);
}
.ps-shape-1 { opacity: 0.2; }
.ps-shape-2 { opacity: 0.6; }
.ps-shape-3 { opacity: 1; }

.ps-container {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
}

.ps-header {
    text-align: center;
    margin-bottom: 80px;
}
.ps-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    color: #10b981;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}
.ps-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

/* Carousel / Cards */
.ps-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative;
    height: 500px;
}
.ps-card {
    position: absolute;
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    background: white;
}
.ps-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Positioning */
.ps-c1 {
    width: 200px;
    height: 300px;
    left: -100px;
    z-index: 1;
}
.ps-c2 {
    width: 260px;
    height: 260px;
    left: 130px;
    top: 50px;
    z-index: 3;
}
.ps-c3 {
    width: 220px;
    height: 280px;
    left: 420px;
    top: -20px;
    z-index: 2;
}
.ps-c4 {
    width: 280px;
    height: 280px;
    left: 670px;
    top: 60px;
    z-index: 4;
}
.ps-c5 {
    width: 200px;
    height: 260px;
    left: 980px;
    top: 0px;
    z-index: 2;
}
.ps-c6 {
    width: 150px;
    height: 200px;
    left: 1210px;
    top: 40px;
    z-index: 1;
}

/* Badges */
.ps-badge {
    position: absolute;
    bottom: -15px;
    right: -15px;
    background: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 20;
}
.ps-badge i { width: 16px; height: 16px; }
.badge-green { color: #10b981; }
.badge-red { color: #ef4444; }

/* Tags */
.ps-tag {
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    width: max-content;
    z-index: 10;
}
.tag-icon {
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tag-icon i { width: 14px; height: 14px; }
.text-green { color: #10b981; }
.text-red { color: #ef4444; }
.tag-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}
.tag-date {
    font-size: 0.75rem;
    color: #94a3b8;
}


/* ==========================================================================
   JCD HERO SECTION
   ========================================================================== */
.hero-jcd {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
    /* Faint vertical lines */
    background-image: repeating-linear-gradient(90deg, transparent, transparent 15vw, rgba(0,0,0,0.03) 15vw, rgba(0,0,0,0.03) calc(15vw + 1px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    padding-top: 80px; /* Offset for navbar */
    font-family: 'Inter', sans-serif;
}

.jcd-particle {
    position: absolute;
    opacity: 0.6;
    border-radius: 2px;
}

.jcd-content {
    text-align: center;
    z-index: 2;
    position: relative;
    width: 100%;
}

.jcd-subhead {
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.15em;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.jcd-title {
    font-size: 5.5rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jcd-line {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* The Blue Arrow Circle */
.jcd-circle-arrow {
    width: 64px;
    height: 64px;
    background: #4f46e5; /* Indigo */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-left: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.jcd-circle-arrow i {
    width: 32px;
    height: 32px;
}

/* The Cursor Icon */
.jcd-cursor {
    width: 48px;
    height: 48px;
    transform: rotate(-90deg);
    position: absolute;
    right: 100%;
    margin-right: 16px;
}

/* The Toggle Switch */
.jcd-toggle {
    width: 180px;
    height: 80px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 30%, #818cf8 100%);
    border-radius: 40px;
    position: relative;
    margin: 0 16px;
    display: flex;
    align-items: center;
    padding: 10px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}
.jcd-toggle-knob {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


.jcd-desc {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.jcd-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.jcd-btn {
    background: #f97316; /* Orange */
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 18px 48px;
    border-radius: 40px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
    transition: transform 0.2s;
}
.jcd-btn:hover {
    transform: translateY(-2px);
}

.jcd-link {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.jcd-logos {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
    opacity: 0.4;
    z-index: 2;
}
.jcd-logo {
    height: 28px;
    filter: grayscale(100%);
}

.jcd-stamp {
    position: absolute;
    bottom: 60px;
    right: 10vw;
    width: 140px;
    height: 140px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jcd-stamp-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: spin 15s linear infinite;
}
.stamp-arrow {
    width: 32px;
    height: 32px;
    color: #1e293b;
    position: relative;
    z-index: 3;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
    .jcd-title { font-size: 4rem; }
    .jcd-toggle { width: 120px; height: 60px; margin: 0 12px; }
    .jcd-toggle-knob { width: 44px; height: 44px; }
    .jcd-circle-arrow { width: 48px; height: 48px; margin-left: 8px; }
    .jcd-circle-arrow i { width: 24px; height: 24px; }
    .jcd-cursor { width: 32px; height: 32px; margin-right: 8px; }
    .jcd-stamp { display: none; }
}
@media (max-width: 600px) {
    .jcd-title { font-size: 2.5rem; }
    .jcd-toggle { width: 90px; height: 44px; margin: 0 8px; }
    .jcd-toggle-knob { width: 30px; height: 30px; }
    .jcd-logos { display: none; }
}

/* ==========================================================================
   JCD NAVBAR SECTION
   ========================================================================== */
.jcd-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 1000;
}
.jcd-nav-container {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    font-family: 'Inter', sans-serif;
}
.jcd-nav-left {
    display: flex;
    gap: 40px;
    flex: 1;
}
.jcd-nav-left a {
    color: #64748b;
    font-weight: 600;
    font-size: 0.9rem;
}
.jcd-nav-left a:hover {
    color: #1e293b;
}
.jcd-nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 800;
    font-size: 1.5rem;
    color: #1e293b;
    flex: 1;
}
.jcd-nav-logo-icon {
    width: 32px;
    height: 32px;
    color: #4f46e5;
}
.jcd-nav-right {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}
.jcd-nav-contact {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
@media (max-width: 768px) {
    .jcd-nav-left { display: none; }
    .jcd-nav-right { display: none; }
}

/* ==========================================================================
   MOBILE SECTION (WHITE THEME)
   ========================================================================== */
.mobile-section {
    background: linear-gradient(135deg, #74a0c8 0%, #a4c8e1 100%);
    padding: 120px 24px;
    overflow: hidden;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
}
.ms-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 120px;
}
.ms-left {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}
.ms-right {
    flex: 1;
}
.ms-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}
.ms-desc {
    font-size: 1.1rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 32px;
}
.ms-btn {
    background: transparent;
    color: #db2777; /* Pink outline button like reference */
    border: 2px solid #db2777;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 32px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s;
}
.ms-btn:hover {
    background: #db2777;
    color: white;
}

/* White Phone Mockup */
.white-phone {
    width: 320px;
    height: 650px;
    background: #f8fafc;
    border-radius: 44px;
    border: 10px solid #ffffff;
    box-shadow: 0 40px 80px rgba(0,0,0,0.15), inset 0 0 0 2px #e2e8f0;
    position: relative;
}
.phone-island {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 26px;
    background: #000;
    border-radius: 20px;
    z-index: 10;
}
.white-phone-ui {
    padding: 40px 20px 20px;
    height: 100%;
    overflow: hidden;
}
.wp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 20px;
}
.wp-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.wp-tabs-pill {
    background: #ffffff;
    padding: 4px;
    border-radius: 30px;
    display: flex;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.wp-tab {
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    border-radius: 20px;
    cursor: pointer;
}
.wp-tab.active {
    background: #0f172a;
    color: #ffffff;
}
.wp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}
.wp-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    position: relative;
}
.wpc-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.wpc-icon i {
    width: 20px;
    height: 20px;
}
.wpc-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.wpc-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}
.wpc-trend {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    font-weight: 600;
}
.trend-up {
    color: #10b981;
}
.trend-up i {
    width: 12px;
    height: 12px;
}
.wp-quick-actions {
    background: #ffffff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.wp-qa-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}
.wp-qa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wp-qa-text strong {
    display: block;
    font-size: 0.85rem;
    color: #0f172a;
}
.wp-qa-text span {
    font-size: 0.7rem;
    color: #64748b;
}

/* Floating Glass Cards */
.wp-float {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-radius: 20px;
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
}
.float-left {
    top: 45%;
    left: -120px;
    width: 280px;
}
.wpf-text {
    flex: 1;
}
.wpf-text strong {
    display: block;
    font-size: 0.85rem;
    color: #0f172a;
}
.wpf-text span {
    font-size: 0.7rem;
    color: #64748b;
}
.wp-float img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.wpf-icons {
    display: flex;
    gap: 8px;
}
.wpf-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.wpf-icon-circle i {
    width: 16px;
    height: 16px;
    color: #64748b;
}
.wpf-icon-circle.dark {
    background: #0f172a;
}
.wpf-icon-circle.dark i {
    color: #ffffff;
}

.float-bottom-left {
    bottom: 40px;
    left: -80px;
    padding: 8px;
    border-radius: 30px;
}
.wpf-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: #64748b;
}
.wpf-action i {
    width: 20px;
    height: 20px;
}
.wpf-action span {
    font-size: 0.7rem;
    font-weight: 500;
}
.wpf-action.dark {
    background: #0f172a;
    color: white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    justify-content: center;
    padding: 0;
}

@media (max-width: 1024px) {
    .ms-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .wp-float {
        display: none;
    }
}

/* ==========================================================================
   EFFICIENCY SECTION (LAPTOP)
   ========================================================================== */
.efficiency-section {
    padding: 120px 24px;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
}
.eff-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}
.eff-left {
    flex: 1;
}
.eff-title {
    font-size: 3rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}
.eff-desc {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 40px;
}
.eff-features {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.eff-feature-item {
    display: flex;
    gap: 16px;
}
.eff-fi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37,99,235,0.2);
}
.eff-fi-icon i {
    width: 24px;
    height: 24px;
}
.eff-fi-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}
.eff-fi-content p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.5;
}

.eff-right {
    flex: 1.2;
    background: #eef2ff;
    border-radius: 24px;
    padding: 60px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Laptop Mockup */
.laptop-wrapper {
    width: 100%;
    max-width: 500px;
    position: relative;
    perspective: 1000px;
}
.laptop-screen {
    width: 86%;
    margin: 0 auto;
    background: #1e293b;
    border-radius: 16px 16px 0 0;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative;
    border: 2px solid #334155;
    border-bottom: none;
}
.laptop-display {
    background: #ffffff;
    border-radius: 4px;
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
}
.laptop-base {
    width: 100%;
    height: 16px;
    background: #334155;
    border-radius: 0 0 16px 16px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15), inset 0 2px 0 rgba(255,255,255,0.2);
}
.laptop-base::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 4%;
    width: 92%;
    height: 8px;
    background: #1e293b;
    border-radius: 0 0 20px 20px;
}
.laptop-notch {
    width: 60px;
    height: 6px;
    background: #1e293b;
    margin: 0 auto;
    border-radius: 0 0 6px 6px;
}

/* Faux UI */
.faux-ui {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f8fafc;
}
.fui-header {
    height: 24px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
}
.fui-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    font-weight: 700;
    color: #0f172a;
}
.fui-search {
    width: 120px;
    height: 12px;
    background: #f1f5f9;
    border-radius: 10px;
}
.fui-avatar {
    width: 14px;
    height: 14px;
    background: #cbd5e1;
    border-radius: 50%;
}
.fui-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.fui-sidebar {
    width: 40px;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.fui-nav-item {
    width: 24px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
}
.fui-nav-item.active {
    background: #bfdbfe;
}
.fui-main {
    flex: 2;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fui-widgets {
    display: flex;
    gap: 8px;
    height: 60px;
}
.fui-widget {
    flex: 1;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px;
}
.fui-bar {
    width: 12px;
    border-radius: 2px;
}
.fui-list {
    flex: 1;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fui-list-item {
    height: 12px;
    background: #f1f5f9;
    border-radius: 4px;
}
.fui-sidebar-right {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fui-right-widget {
    height: 40px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

@media (max-width: 1024px) {
    .eff-container {
        flex-direction: column;
    }
    .eff-right {
        width: 100%;
        padding: 40px 20px;
    }
}
\n
/* Unreal Engine UI */
.ue-ui {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #111111;
    color: #cccccc;
    font-family: 'Inter', sans-serif;
    border-radius: 4px;
    overflow: hidden;
}
.ue-toolbar {
    height: 32px;
    background: #1e1e1e;
    border-bottom: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 0.75rem;
}
.ue-menu {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ue-logo-img {
    width: 14px;
    height: 14px;
    filter: invert(1);
    opacity: 0.8;
}
.ue-menu span {
    cursor: pointer;
}
.ue-menu span:hover {
    color: #ffffff;
}
.ue-play {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4ade80;
    font-weight: 600;
    background: rgba(74, 222, 128, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
}
.ue-play i {
    width: 12px;
    height: 12px;
    fill: #4ade80;
}
.ue-viewport {
    flex: 1;
    position: relative;
    border: 2px solid #000;
}
.ue-viewport-overlay {
    position: absolute;
    inset: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ue-cam {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.ue-render-box {
    align-self: flex-end;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid #333;
    padding: 12px 16px;
    border-radius: 6px;
    width: 200px;
    margin-right: 12px;
    margin-bottom: 12px;
}
.ue-rb-text {
    font-size: 0.75rem;
    color: #ffffff;
    margin-bottom: 8px;
    font-weight: 500;
}
.ue-rb-bar {
    height: 4px;
    background: #333;
    border-radius: 2px;
    overflow: hidden;
}
.ue-rb-progress {
    width: 65%;
    height: 100%;
    background: #3b82f6;
    box-shadow: 0 0 8px #3b82f6;
}
.ue-bottom-bar {
    height: 24px;
    background: #1e1e1e;
    border-top: 1px solid #000;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 20px;
    font-size: 0.7rem;
    color: #888;
}
/* UE UI Wrapper */
.ue-ui-wrapper {
    width: 100%;
    max-width: 600px;
    height: 420px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
    border: 10px solid #111;
    background: #111;
}


/* UE Animation overrides */
.ue-preview-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 600;
}
.ue-preview-badge i {
    width: 14px;
    height: 14px;
}
.ue-rb-text {
    position: relative;
    height: 16px;
    margin-bottom: 8px;
}
.anim-step {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
}
.step-1 { animation: animStep1 10s infinite; }
.step-2 { animation: animStep2 10s infinite; }
.step-3 { animation: animStep3 10s infinite; }

@keyframes animStep1 {
    0%, 25% { opacity: 1; }
    30%, 100% { opacity: 0; }
}
@keyframes animStep2 {
    0%, 25% { opacity: 0; }
    30%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes animStep3 {
    0%, 45% { opacity: 0; }
    50%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

.ue-rb-progress {
    width: 0%;
    height: 100%;
    background: #3b82f6;
    box-shadow: 0 0 10px #3b82f6;
    animation: animProgress 10s infinite;
}

@keyframes animProgress {
    0% { width: 0%; }
    25% { width: 100%; } 
    26% { width: 0%; }
    30% { width: 10%; }
    45% { width: 100%; }
    46% { width: 0%; }
    50% { width: 5%; }
    95% { width: 100%; }
    100% { width: 100%; }
}
/* Background Animation */
@keyframes bgSimulate {
    0%, 25% { filter: grayscale(100%) blur(4px) brightness(0.3); } 
    26%, 45% { filter: grayscale(50%) blur(2px) brightness(0.6); } 
    46%, 100% { filter: grayscale(0%) blur(0px) brightness(1); } 
}

.bg-anim {
    animation: bgSimulate 10s infinite;
}


/* New Viewport Layers */
.ue-viewport {
    flex: 1;
    position: relative;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #0f172a;
    overflow: hidden;
}
.ue-viewport-bg {
    position: absolute;
    inset: 0;
    background-image: url('./hero_3d.png');
    background-size: cover;
    background-position: center;
    animation: bgSimulate 10s infinite;
    z-index: 1;
}
.ue-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 2;
    animation: fadeGrid 10s infinite;
}
.ue-viewport-overlay {
    position: absolute;
    inset: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
}
.ue-render-buckets {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.bucket {
    border: 1px solid rgba(59, 130, 246, 0);
    background: rgba(59, 130, 246, 0);
}
.b1 { animation: bucketAnim 10s infinite 5s; }
.b2 { animation: bucketAnim 10s infinite 5.5s; }
.b3 { animation: bucketAnim 10s infinite 6s; }
.b4 { animation: bucketAnim 10s infinite 6.2s; }
.b5 { animation: bucketAnim 10s infinite 7s; }
.b6 { animation: bucketAnim 10s infinite 7.5s; }

@keyframes bucketAnim {
    0%, 45% { border-color: rgba(59,130,246,0); background: rgba(59,130,246,0); }
    50% { border-color: rgba(59,130,246,0.8); background: rgba(59,130,246,0.2); }
    70%, 100% { border-color: rgba(59,130,246,0); background: rgba(59,130,246,0); }
}

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

@keyframes bgSimulate {
    0%, 25% { filter: grayscale(100%) blur(8px) brightness(0.2); opacity: 0.2; } 
    26%, 45% { filter: grayscale(50%) blur(4px) brightness(0.5); opacity: 0.5; } 
    46%, 100% { filter: grayscale(0%) blur(0px) brightness(1); opacity: 1; } 
}
/* Base UE UI Styles restored */
.ue-ui-wrapper {
    width: 100%;
    max-width: 600px;
    height: 420px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
    border: 8px solid #111;
    background: #111;
}
.ue-ui {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #111111;
    color: #cccccc;
    font-family: 'Inter', sans-serif;
    border-radius: 4px;
    overflow: hidden;
}
.ue-toolbar {
    height: 32px;
    background: #1e1e1e;
    border-bottom: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 0.75rem;
}
.ue-menu {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ue-logo-img {
    width: 14px;
    height: 14px;
    filter: invert(1);
    opacity: 0.8;
}
.ue-menu span {
    cursor: pointer;
}
.ue-menu span:hover {
    color: #ffffff;
}
.ue-bottom-bar {
    height: 24px;
    background: #1e1e1e;
    border-top: 1px solid #000;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 20px;
    font-size: 0.7rem;
    color: #888;
}
.ue-cam {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.ue-render-box {
    align-self: flex-end;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid #333;
    padding: 12px 16px;
    border-radius: 6px;
    width: 200px;
    margin-right: 12px;
    margin-bottom: 12px;
}
.ue-rb-text {
    font-size: 0.75rem;
    color: #ffffff;
    margin-bottom: 8px;
    font-weight: 500;
}
.ue-rb-bar {
    height: 4px;
    background: #333;
    border-radius: 2px;
    overflow: hidden;
}
.ue-preview-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 600;
}
.ue-preview-badge i {
    width: 14px;
    height: 14px;
}


.ue-render-buckets {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
}
.bucket {
    backdrop-filter: blur(10px) brightness(0.2);
    -webkit-backdrop-filter: blur(10px) brightness(0.2);
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.b14 {
    animation: renderB14 10s infinite;
}
@keyframes renderB14 {
    0%, 40% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    40.1%, 43% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    43.1%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b15 {
    animation: renderB15 10s infinite;
}
@keyframes renderB15 {
    0%, 41.45% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    41.550000000000004%, 44.45% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    44.550000000000004%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b9 {
    animation: renderB9 10s infinite;
}
@keyframes renderB9 {
    0%, 42.9% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    43%, 45.9% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    46%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b8 {
    animation: renderB8 10s infinite;
}
@keyframes renderB8 {
    0%, 44.35% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    44.45%, 47.35% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    47.45%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b10 {
    animation: renderB10 10s infinite;
}
@keyframes renderB10 {
    0%, 45.8% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    45.9%, 48.8% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    48.9%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b16 {
    animation: renderB16 10s infinite;
}
@keyframes renderB16 {
    0%, 47.25% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    47.35%, 50.25% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    50.35%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b21 {
    animation: renderB21 10s infinite;
}
@keyframes renderB21 {
    0%, 48.7% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    48.800000000000004%, 51.7% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    51.800000000000004%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b22 {
    animation: renderB22 10s infinite;
}
@keyframes renderB22 {
    0%, 50.15% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    50.25%, 53.15% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    53.25%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b17 {
    animation: renderB17 10s infinite;
}
@keyframes renderB17 {
    0%, 51.6% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    51.7%, 54.6% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    54.7%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b11 {
    animation: renderB11 10s infinite;
}
@keyframes renderB11 {
    0%, 53.05% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    53.15%, 56.05% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    56.15%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b4 {
    animation: renderB4 10s infinite;
}
@keyframes renderB4 {
    0%, 54.5% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    54.6%, 57.5% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    57.6%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b3 {
    animation: renderB3 10s infinite;
}
@keyframes renderB3 {
    0%, 55.95% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    56.050000000000004%, 58.95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    59.050000000000004%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b2 {
    animation: renderB2 10s infinite;
}
@keyframes renderB2 {
    0%, 57.4% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    57.5%, 60.4% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    60.5%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b5 {
    animation: renderB5 10s infinite;
}
@keyframes renderB5 {
    0%, 58.849999999999994% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    58.949999999999996%, 61.849999999999994% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    61.949999999999996%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b12 {
    animation: renderB12 10s infinite;
}
@keyframes renderB12 {
    0%, 60.3% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    60.4%, 63.3% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    63.4%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b18 {
    animation: renderB18 10s infinite;
}
@keyframes renderB18 {
    0%, 61.75% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    61.85%, 64.75% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    64.85%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b23 {
    animation: renderB23 10s infinite;
}
@keyframes renderB23 {
    0%, 63.2% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    63.300000000000004%, 66.2% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    66.3%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b24 {
    animation: renderB24 10s infinite;
}
@keyframes renderB24 {
    0%, 64.65% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    64.75%, 67.65% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    67.75%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b19 {
    animation: renderB19 10s infinite;
}
@keyframes renderB19 {
    0%, 66.1% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    66.19999999999999%, 69.1% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    69.19999999999999%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b13 {
    animation: renderB13 10s infinite;
}
@keyframes renderB13 {
    0%, 67.55% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    67.64999999999999%, 70.55% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    70.64999999999999%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b7 {
    animation: renderB7 10s infinite;
}
@keyframes renderB7 {
    0%, 69% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    69.1%, 72% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    72.1%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b1 {
    animation: renderB1 10s infinite;
}
@keyframes renderB1 {
    0%, 70.45% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    70.55%, 73.45% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    73.55%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b6 {
    animation: renderB6 10s infinite;
}
@keyframes renderB6 {
    0%, 71.9% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    72%, 74.9% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    75%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

.b20 {
    animation: renderB20 10s infinite;
}
@keyframes renderB20 {
    0%, 73.35% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
    73.44999999999999%, 76.35% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: 2px solid #3b82f6;
    }
    76.44999999999999%, 95% {
        backdrop-filter: blur(0px) brightness(1);
        -webkit-backdrop-filter: blur(0px) brightness(1);
        background: transparent;
        border: none;
    }
    96%, 100% {
        backdrop-filter: blur(12px) brightness(0.2);
        -webkit-backdrop-filter: blur(12px) brightness(0.2);
        background: rgba(0, 0, 0, 0.6);
        border: none;
    }
}

/* =========================================
   PREMIUM DARK SECTIONS (5-10)
   ========================================= */

:root {
    --dark-bg: #09090b;
    --dark-surface: #18181b;
    --dark-border: rgba(255,255,255,0.1);
    --dark-text: #f4f4f5;
    --dark-muted: #a1a1aa;
    --neon-blue: #3b82f6;
    --neon-purple: #8b5cf6;
}

.theme-transition {
    height: 150px;
    background: linear-gradient(to bottom, var(--bg-main), var(--dark-bg));
}

.premium-trusted,
.premium-features,
.premium-analytics,
.premium-testimonials,
.premium-pricing,
.premium-cta,
.premium-footer {
    background-color: var(--dark-bg);
    color: var(--dark-text);
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow: hidden;
}

.premium-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}

.premium-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--neon-blue);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.premium-header h2 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}

.premium-highlight {
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.premium-header p {
    font-size: 1.1rem;
    color: var(--dark-muted);
}

/* Section 5: Trusted Marquee */
.premium-trusted {
    padding: 40px 0 80px;
    border-bottom: 1px solid var(--dark-border);
}
.pt-title {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark-muted);
    letter-spacing: 0.15em;
    margin-bottom: 40px;
}
.pt-marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.pt-marquee::before, .pt-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}
.pt-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--dark-bg), transparent);
}
.pt-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--dark-bg), transparent);
}
.pt-track {
    display: flex;
    width: max-content;
    animation: ptScroll 30s linear infinite;
}
.pt-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 40px;
    font-size: 1.5rem;
    font-weight: 800;
    color: rgba(255,255,255,0.2);
    transition: all 0.3s;
    cursor: pointer;
}
.pt-logo:hover {
    color: #fff;
    text-shadow: 0 0 15px rgba(255,255,255,0.5);
}
.pt-logo i {
    width: 32px;
    height: 32px;
}
@keyframes ptScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Section 6: Premium Features */
.premium-features {
    padding: 100px 24px;
}
.pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.pf-card {
    background: rgba(24, 24, 27, 0.6);
    border: 1px solid var(--dark-border);
    padding: 40px 30px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s;
}
.pf-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.5);
}
.pf-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}
.pf-card:hover .pf-glow {
    opacity: 1;
}
.pf-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--neon-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.pf-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 12px;
}
.pf-card p {
    color: var(--dark-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Section 7: Analytics Dashboard */
.premium-analytics {
    padding: 100px 24px;
}
.pa-container {
    max-width: 1200px;
    margin: 0 auto;
}
.pa-dashboard {
    background: rgba(24, 24, 27, 0.8);
    border: 1px solid var(--dark-border);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
    overflow: hidden;
    margin-top: 60px;
    backdrop-filter: blur(20px);
}
.pa-dash-header {
    background: rgba(255,255,255,0.03);
    padding: 16px 24px;
    border-bottom: 1px solid var(--dark-border);
    display: flex;
    align-items: center;
    gap: 16px;
}
.pa-dash-dots {
    display: flex;
    gap: 8px;
}
.pa-dash-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3f3f46;
}
.pa-dash-dots span:nth-child(1) { background: #ef4444; }
.pa-dash-dots span:nth-child(2) { background: #eab308; }
.pa-dash-dots span:nth-child(3) { background: #10b981; }
.pa-dash-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark-muted);
}
.pa-dash-body {
    padding: 40px;
}
.pa-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}
.pa-stat-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pa-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dark-muted);
}
.pa-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}
.pa-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}
.blink {
    animation: blink 2s infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.pa-chart {
    height: 300px;
    width: 100%;
}
.pa-chart-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 3s ease forwards;
}
@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

/* Section 8: Testimonials */
.premium-testimonials {
    padding: 100px 24px;
}
.ptest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.ptest-card {
    background: rgba(24, 24, 27, 0.6);
    border: 1px solid var(--dark-border);
    padding: 40px;
    border-radius: 20px;
    transition: transform 0.3s;
}
.ptest-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--neon-purple);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.15);
}
.ptest-quote {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 30px;
    font-style: italic;
}
.ptest-author {
    display: flex;
    align-items: center;
    gap: 16px;
}
.pa-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.1);
    color: var(--neon-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pa-info strong {
    display: block;
    color: #fff;
}
.pa-info span {
    font-size: 0.85rem;
    color: var(--dark-muted);
}

/* Section 9: Pricing */
.premium-pricing {
    padding: 100px 24px;
}
.pp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
}
.pp-card {
    background: rgba(24, 24, 27, 0.6);
    border: 1px solid var(--dark-border);
    padding: 50px 40px;
    border-radius: 24px;
    position: relative;
    text-align: center;
}
.pp-card h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 16px;
}
.pp-price {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 40px;
}
.pp-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dark-muted);
}
.pp-features {
    list-style: none;
    text-align: left;
    margin-bottom: 40px;
}
.pp-features li {
    margin-bottom: 16px;
    color: var(--dark-text);
    display: flex;
    align-items: center;
    gap: 12px;
}
.pp-features li i {
    color: #10b981;
    width: 20px;
    height: 20px;
}
.pp-btn {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--dark-border);
    color: #fff;
    transition: all 0.3s;
}
.pp-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* Featured Pricing Card */
.pp-featured {
    padding: 2px; /* Space for border */
    background: none;
    border: none;
    transform: scale(1.05);
}
.pp-glow-border {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    animation: rotate 4s linear infinite;
    z-index: 1;
}
@keyframes rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
.pp-card-inner {
    background: #09090b;
    border-radius: 22px;
    padding: 50px 40px;
    position: relative;
    z-index: 2;
    height: 100%;
}
.pp-popular {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.pp-btn-featured {
    background: var(--neon-blue);
    border: none;
}
.pp-btn-featured:hover {
    background: #2563eb;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* Section 10: CTA */
.premium-cta {
    padding: 120px 24px;
    text-align: center;
    position: relative;
}
.pcta-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    z-index: 1;
}
.pcta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}
.pcta-content h2 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.1;
}
.pcta-content p {
    font-size: 1.25rem;
    color: var(--dark-muted);
    margin-bottom: 40px;
}
.pcta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.pcta-btn {
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s;
}
.pcta-btn.primary {
    background: #fff;
    color: #000;
}
.pcta-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255,255,255,0.2);
}
.pcta-btn.secondary {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid var(--dark-border);
}
.pcta-btn.secondary:hover {
    background: rgba(255,255,255,0.1);
}

/* Premium Footer */
.premium-footer {
    padding: 80px 24px 40px;
    border-top: 1px solid var(--dark-border);
}
.pf-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: 60px;
}
.pf-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 24px;
}
.pf-logo-icon {
    color: var(--neon-blue);
}
.pf-brand p {
    color: var(--dark-muted);
    line-height: 1.6;
}
.pf-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.pf-group h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 20px;
}
.pf-group a {
    display: block;
    color: var(--dark-muted);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.3s;
}
.pf-group a:hover {
    color: var(--neon-blue);
}
.pf-bottom {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: var(--dark-muted);
    padding-top: 40px;
    border-top: 1px solid var(--dark-border);
}

@media (max-width: 768px) {
    .pf-content {
        grid-template-columns: 1fr;
    }
    .pf-links {
        grid-template-columns: 1fr 1fr;
    }
    .pcta-content h2 {
        font-size: 2.5rem;
    }
    .premium-header h2 {
        font-size: 2.2rem;
    }
    .pp-featured {
        transform: none;
    }
}

/* =========================================
   BENTO BOX FEATURES SECTION (Light Theme)
   ========================================= */

.bento-features {
    background-color: #f4f6fa;
    padding: 100px 24px;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
}

.bento-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}
.bento-badge {
    background: #e0e7ff;
    color: #4f46e5;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    display: inline-block;
}
.bento-header h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
    letter-spacing: -0.03em;
}
.bento-header h2 span {
    color: #6366f1;
}
.bento-header p {
    font-size: 1.1rem;
    color: #64748b;
}

.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.bento-card {
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    transition: transform 0.3s, box-shadow 0.3s;
}
.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* Tall Blue Card */
.bento-tall {
    grid-row: span 2;
    background: linear-gradient(180deg, #93a5ff 0%, #7c93ff 100%);
    padding: 40px 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bento-profile {
    text-align: center;
    margin-bottom: 30px;
}
.bp-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    padding: 5px;
    margin: 0 auto 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.bp-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.bp-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.bp-info p {
    font-size: 0.8rem;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
}
.bp-pill-card {
    background: #fff;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: #1e293b;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.bp-icon {
    width: 40px;
    height: 40px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bp-text {
    flex: 1;
}
.bp-text strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
}
.bp-text span {
    font-size: 0.75rem;
    color: #64748b;
}
.bp-btn {
    background: #0f172a;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.bp-stats {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 40px;
}
.bp-stat {
    text-align: center;
}
.bp-stat strong {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.bp-stat span {
    font-size: 0.85rem;
    opacity: 0.8;
}
.bp-bottom-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    transition: background 0.3s;
}
.bp-bottom-btn:hover {
    background: rgba(255,255,255,0.3);
}

/* Middle White Card */
.bento-white {
    background: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.bw-header {
    margin-bottom: 24px;
}
.bw-header h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bw-header h3 span {
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 12px;
}
.bw-header p {
    font-size: 0.9rem;
    color: #64748b;
    margin-top: 4px;
}
.bw-dots {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 40px;
}
.bw-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.bw-dot::before {
    content: '';
    width: 24px;
    height: 40px;
    background: #e2e8f0;
    border-radius: 12px;
}
.bw-dot.active::before {
    background: #6366f1;
}
.bw-dot span {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}
.bw-dot.active span {
    color: #6366f1;
}
.bw-hospital h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #0f172a;
}
.bw-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}
.bw-row:last-child {
    border-bottom: none;
}
.bw-row span {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #334155;
    font-weight: 500;
}
.bw-row strong {
    font-size: 0.85rem;
    color: #0f172a;
}

/* Right Column (Image + Pills) */
.bento-right-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.bento-img-card {
    background: url('cinematic_env.png') center/cover;
    height: 140px;
    border-radius: 32px;
    position: relative;
}
.bic-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.2;
}
.bic-dot {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.bento-pill-white {
    background: #fff;
    padding: 20px;
    border-radius: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.bpw-icon {
    width: 48px;
    height: 48px;
    background: #f5f3ff;
    color: #7c3aed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bpw-text {
    flex: 1;
}
.bpw-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}
.bpw-text span {
    font-size: 0.8rem;
    color: #64748b;
}
.bpw-check {
    color: #10b981;
}

/* Bottom Wide Card */
.bento-wide {
    grid-column: span 2;
    background: #e0e7ff;
    padding: 40px;
    position: relative;
    overflow: hidden;
}
.bw-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #4f46e5;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 20px;
}
.bento-wide h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e1b4b;
    line-height: 1.2;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.bw-link {
    font-size: 1rem;
    font-weight: 700;
    color: #1e1b4b;
    text-decoration: underline;
    position: relative;
    z-index: 2;
}
.bw-floating-obj {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.2), inset 0 10px 20px rgba(255,255,255,0.5);
}
.obj-1 {
    width: 150px;
    height: 150px;
    right: 40px;
    bottom: -30px;
    transform: rotate(20deg);
}
.obj-2 {
    width: 80px;
    height: 80px;
    right: 160px;
    top: 20px;
    transform: rotate(-15deg);
    background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
}

@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-tall {
        grid-row: auto;
    }
    .bento-wide {
        grid-column: span 1;
    }
}

/* =========================================
   HARDWARE BENTO (Finance Style)
   ========================================= */

.finance-bento {
    background-color: #fafafa;
    padding: 120px 24px;
    font-family: 'Inter', sans-serif;
    color: #111;
}

.fb-header {
    text-align: center;
    margin-bottom: 60px;
}
.fb-header h2 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #111;
}

.fb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.fb-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 380px;
}

.fb-card-wide {
    min-height: 220px;
    flex-direction: row;
    align-items: center;
}
.fb-card-wide.fb-align-left {
    justify-content: space-between;
}
.fb-card-wide:first-of-type {
    grid-column: span 1.5; /* Note: grid-column with fractions isn't valid CSS standard, using span 1 and adjusting grid below */
}
/* Fix bottom row spanning */
.fb-grid {
    grid-template-areas: 
        "top1 top2 top3"
        "bot1 bot1 bot2";
}
.fb-grid > div:nth-child(1) { grid-area: top1; }
.fb-grid > div:nth-child(2) { grid-area: top2; }
.fb-grid > div:nth-child(3) { grid-area: top3; }
.fb-grid > div:nth-child(4) { grid-area: bot1; }
.fb-grid > div:nth-child(5) { grid-area: bot2; }

/* In the actual image, bottom row is 2 cards. Assuming a 3-col grid, bottom left spans 1.5, bottom right spans 1.5. 
   We will just make the bottom row a flex container or span 2 and 1. */
@media (min-width: 992px) {
    .fb-grid > div:nth-child(4) {
        grid-column: span 2;
    }
    .fb-grid > div:nth-child(5) {
        grid-column: span 1;
    }
}

.fb-card-text {
    margin-bottom: auto;
}
.fb-card-wide .fb-card-text {
    margin-bottom: 0;
    max-width: 50%;
}
.fb-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #111;
}
.fb-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* Visuals */
.fb-visual {
    position: relative;
    height: 180px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-card-wide .fb-visual {
    margin-top: 0;
    height: 140px;
    width: 40%;
}

/* 1. Cards Visual */
.fb-visual-cards {
    position: relative;
}
.fb-mini-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: absolute;
    border: 1px solid #f0f0f0;
}
.bg-card {
    width: 200px;
    top: 20px;
    left: 20%;
    opacity: 0.6;
    transform: scale(0.9);
}
.fg-card {
    width: 220px;
    top: 50px;
    left: 10%;
    z-index: 2;
}
.fb-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-ring-yellow {
    border: 4px solid #f59e0b;
    border-top-color: transparent;
    transform: rotate(45deg);
}
.fb-ring-blue {
    border: 4px solid #3b82f6;
    border-right-color: transparent;
    color: #3b82f6;
}
.fb-ring-blue i { width: 16px; height: 16px; }
.fbc-info strong { display: block; font-size: 1rem; color:#111; }
.fbc-info span { font-size: 0.8rem; color: #888; }

/* 2. Graph Visual */
.fb-visual-graph {
    background: radial-gradient(circle at bottom, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
}
.fb-line-graph {
    width: 100%;
    height: 60px;
    position: relative;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
}
.fb-line-graph::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0,100 C20,80 40,90 50,50 C60,10 80,40 100,0" fill="none" stroke="%233b82f6" stroke-width="2"/></svg>') no-repeat;
    background-size: 100% 100%;
}
.fb-graph-dot {
    width: 12px;
    height: 12px;
    background: #3b82f6;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* 3. Donuts Visual */
.fb-visual-donuts {
    position: relative;
}
.fb-donut {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f1f5f9;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.fb-donut-left {
    left: 20%;
    top: 20px;
    background: conic-gradient(#f97316 0% 70%, #f1f5f9 70% 100%);
}
.fb-donut-right {
    right: 20%;
    top: 40px;
    background: conic-gradient(#3b82f6 0% 60%, #cbd5e1 60% 100%);
    z-index: 2;
}
.fbd-inner {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}
.fbd-small-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-weight: 600;
}

/* 4. Radial Syncing */
.fb-visual-radial {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.fb-radial-bars {
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px dashed #3b82f6;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(-45deg);
    opacity: 0.6;
}
.fb-radial-bars::before {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 2px dashed #94a3b8;
}

/* 5. Gauge Score */
.fb-visual-gauge {
    position: relative;
    width: 160px;
    height: 80px;
    overflow: hidden;
}
.fb-gauge-bg {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #f1f5f9;
    position: absolute;
    bottom: 0;
}
.fb-gauge-fill {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(#3b82f6 0% 30%, transparent 30% 100%);
    position: absolute;
    bottom: 0;
    transform: rotate(-90deg);
}
.fb-gauge-center {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: -50px;
    left: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15px;
}
.fb-gauge-center strong {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
}

@media (max-width: 992px) {
    .fb-grid {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }
    .fb-grid > div {
        grid-column: span 1 !important;
        grid-area: auto !important;
    }
    .fb-card-wide {
        flex-direction: column;
        align-items: flex-start;
    }
    .fb-card-wide .fb-card-text {
        max-width: 100%;
    }
    .fb-card-wide .fb-visual {
        width: 100%;
        height: 180px;
        margin-top: 30px;
    }
}

/* =========================================
   NEW FLOATING WIDGET IN SPLIT SECTION
   ========================================= */
.floating-widget {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 10;
    animation: float 4s ease-in-out infinite;
}
.fw-icon {
    width: 40px;
    height: 40px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fw-text strong {
    display: block;
    font-size: 0.95rem;
    color: #111;
    font-weight: 700;
}
.fw-text span {
    font-size: 0.8rem;
    color: #666;
}
.fw-pulse {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    margin-left: 10px;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green 2s infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* =========================================
   GAUGE WIDGET CSS
   ========================================= */
.gauge-widget {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    width: 240px;
    height: 180px;
    bottom: -50px;
    right: -50px;
}
.gw-text {
    margin-bottom: 20px;
}
.gw-text strong {
    display: block;
    font-size: 1.1rem;
    color: #111;
    font-weight: 700;
}
.gw-text span {
    font-size: 0.85rem;
    color: #666;
}
.gw-visual {
    position: relative;
    width: 100%;
    height: 60px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.gw-bg {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #f1f5f9;
    position: absolute;
    bottom: 0;
}
.gw-fill {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(#3b82f6 0% 35%, transparent 35% 100%);
    position: absolute;
    bottom: 0;
    transform: rotate(-90deg);
}
.gw-center {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: -45px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
}
.gw-center strong {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
}

/* =========================================
   HARDWARE BENTO (Finance Style)
   ========================================= */

.finance-bento {
    background-color: #fafafa;
    padding: 120px 24px;
    font-family: 'Inter', sans-serif;
    color: #111;
}

.fb-header {
    text-align: center;
    margin-bottom: 60px;
}
.fb-header h2 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #111;
}

.fb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.fb-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 380px;
}

.fb-card-wide {
    min-height: 220px;
    flex-direction: row;
    align-items: center;
}
.fb-card-wide.fb-align-left {
    justify-content: space-between;
}
.fb-grid {
    grid-template-areas: 
        "top1 top2 top3"
        "bot1 bot1 bot2";
}
.fb-grid > div:nth-child(1) { grid-area: top1; }
.fb-grid > div:nth-child(2) { grid-area: top2; }
.fb-grid > div:nth-child(3) { grid-area: top3; }
.fb-grid > div:nth-child(4) { grid-area: bot1; }
.fb-grid > div:nth-child(5) { grid-area: bot2; }

@media (min-width: 992px) {
    .fb-grid > div:nth-child(4) {
        grid-column: span 2;
    }
    .fb-grid > div:nth-child(5) {
        grid-column: span 1;
    }
}

.fb-card-text {
    margin-bottom: auto;
}
.fb-card-wide .fb-card-text {
    margin-bottom: 0;
    max-width: 50%;
}
.fb-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #111;
}
.fb-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* Visuals */
.fb-visual {
    position: relative;
    height: 180px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-card-wide .fb-visual {
    margin-top: 0;
    height: 140px;
    width: 40%;
}

/* 1. Cards Visual */
.fb-visual-cards {
    position: relative;
}
.fb-mini-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: absolute;
    border: 1px solid #f0f0f0;
}
.bg-card {
    width: 200px;
    top: 20px;
    left: 20%;
    opacity: 0.6;
    transform: scale(0.9);
}
.fg-card {
    width: 220px;
    top: 50px;
    left: 10%;
    z-index: 2;
}
.fb-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-ring-yellow {
    border: 4px solid #f59e0b;
    border-top-color: transparent;
    transform: rotate(45deg);
}
.fb-ring-blue {
    border: 4px solid #3b82f6;
    border-right-color: transparent;
    color: #3b82f6;
}
.fb-ring-blue i { width: 16px; height: 16px; }
.fbc-info strong { display: block; font-size: 1rem; color:#111; }
.fbc-info span { font-size: 0.8rem; color: #888; }

/* 2. Graph Visual */
.fb-visual-graph {
    background: radial-gradient(circle at bottom, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
}
.fb-line-graph {
    width: 100%;
    height: 60px;
    position: relative;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
}
.fb-line-graph::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0,100 C20,80 40,90 50,50 C60,10 80,40 100,0" fill="none" stroke="%233b82f6" stroke-width="2"/></svg>') no-repeat;
    background-size: 100% 100%;
}
.fb-graph-dot {
    width: 12px;
    height: 12px;
    background: #3b82f6;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* 3. Donuts Visual */
.fb-visual-donuts {
    position: relative;
}
.fb-donut {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f1f5f9;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.fb-donut-left {
    left: 20%;
    top: 20px;
    background: conic-gradient(#f97316 0% 70%, #f1f5f9 70% 100%);
}
.fb-donut-right {
    right: 20%;
    top: 40px;
    background: conic-gradient(#3b82f6 0% 60%, #cbd5e1 60% 100%);
    z-index: 2;
}
.fbd-inner {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}
.fbd-small-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-weight: 600;
}

/* 4. Radial Syncing */
.fb-visual-radial {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.fb-radial-bars {
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px dashed #3b82f6;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(-45deg);
    opacity: 0.6;
}
.fb-radial-bars::before {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 2px dashed #94a3b8;
}

/* 5. Gauge Score */
.fb-visual-gauge {
    position: relative;
    width: 160px;
    height: 80px;
    overflow: hidden;
}
.fb-gauge-bg {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #f1f5f9;
    position: absolute;
    bottom: 0;
}
.fb-gauge-fill {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(#3b82f6 0% 30%, transparent 30% 100%);
    position: absolute;
    bottom: 0;
    transform: rotate(-90deg);
}
.fb-gauge-center {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: -50px;
    left: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15px;
}
.fb-gauge-center strong {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
}

@media (max-width: 992px) {
    .fb-grid {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }
    .fb-grid > div {
        grid-column: span 1 !important;
        grid-area: auto !important;
    }
    .fb-card-wide {
        flex-direction: column;
        align-items: flex-start;
    }
    .fb-card-wide .fb-card-text {
        max-width: 100%;
    }
    .fb-card-wide .fb-visual {
        width: 100%;
        height: 180px;
        margin-top: 30px;
    }
}

/* =========================================
   CUSTOM TELEMETRY DASHBOARD
   ========================================= */
.pa-widget {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.pa-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.pa-widget-head i {
    width: 16px;
    height: 16px;
    color: #3b82f6;
}
.pa-terminal-content {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.5);
    padding: 16px;
    border-radius: 8px;
    flex: 1;
    border: 1px solid rgba(255,255,255,0.05);
}
.log-line { margin-bottom: 4px; }
.log-time { color: #64748b; }
.log-info { color: #3b82f6; font-weight: bold; }
.log-success { color: #10b981; font-weight: bold; }
.log-warn { color: #f59e0b; font-weight: bold; }
.log-line.blink { animation: term-blink 1.5s infinite; }
@keyframes term-blink { 50% { opacity: 0.6; } }

.pa-gauge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex: 1;
}
.pa-mini-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 0;
}
.pmg-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid transparent;
    position: absolute;
    top: 5px;
}
.pa-mini-gauge span {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 4px;
    z-index: 1;
}
.pa-mini-gauge small {
    color: #64748b;
    font-size: 0.75rem;
    margin-top: 2px;
}

.pa-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 120px;
    gap: 12px;
    padding-top: 20px;
}
.pa-bar {
    flex: 1;
    background: #3b82f6;
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height 0.5s ease;
    min-width: 20px;
}
.pa-bar:hover {
    filter: brightness(1.2);
}
.pa-bar-val {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}

/* =========================================
   UNTETHERED FEATURES SECTION
   ========================================= */
.untethered-section {
    background: #fafafa;
    padding: 100px 20px;
    font-family: 'Inter', sans-serif;
    color: #1e293b;
}
.untethered-container {
    max-width: 1100px;
    margin: 0 auto;
}
.us-header {
    text-align: center;
    margin-bottom: 60px;
}
.us-badge {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    display: inline-block;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.us-header h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -1px;
}

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

.us-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.us-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.us-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}
.us-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

.us-visual {
    height: 160px;
    background: #f8fafc;
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    padding: 20px;
}

/* Wide Cards */
.us-card-wide {
    grid-column: span 1.5; /* We have 3 columns, so spanning 1.5 doesn't work perfectly in standard CSS grid unless we use 6 columns. Let's fix grid to handle this. */
}
/* Better wide layout trick */
.us-grid {
    grid-template-columns: repeat(6, 1fr);
}
.us-card {
    grid-column: span 2;
}
.us-card-wide {
    grid-column: span 3;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}
.us-card-wide .us-visual {
    width: 200px;
    height: 200px;
    margin-bottom: 0;
    flex-shrink: 0;
}
.us-text-content {
    flex: 1;
}

/* Mini Visuals */
.us-v-box {
    width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.2);
    position: absolute; top: 20px; left: 20px; z-index: 2;
}
.us-v-link {
    background: #fff; padding: 12px 20px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; color: #333;
    position: absolute; bottom: 20px; right: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); z-index: 1;
}

.us-phone-mockup {
    width: 100px; height: 140px; background: #fff; border-radius: 20px; border: 6px solid #1e293b;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center;
}
.us-phone-screen {
    background: #f1f5f9; width: 100%; height: 100%; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.us-progress-bar {
    width: 100%; height: 24px; background: #e2e8f0; border-radius: 12px; position: relative; overflow: hidden;
}
.us-progress-fill {
    width: 64%; height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 12px;
}
.us-progress-text {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; font-weight: 700; color: #1e293b;
}

.us-screenshot-box {
    width: 100%; height: 100%; position: relative; border-radius: 12px; overflow: hidden;
}
.us-screenshot-box img {
    width: 100%; height: 100%; object-fit: cover; opacity: 0.8;
}
.us-capture-btn {
    position: absolute; bottom: 16px; right: 16px; width: 40px; height: 40px; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
}

.us-calendar-box {
    width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); border: 1px solid #f1f5f9;
}

@media (max-width: 900px) {
    .us-card, .us-card-wide { grid-column: span 6; flex-direction: column; }
    .us-card-wide .us-visual { width: 100%; height: 200px; margin-bottom: 24px; }
}

/* =========================================
   3-CARD PASTEL GRID SECTION (HOMIE STYLE)
   ========================================= */
.hc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: 100%;
}
.hc-card {
    border-radius: 32px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
    overflow: hidden;
}
.hc-card:hover {
    transform: translateY(-8px);
}
.hc-visual {
    height: 240px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.hc-floating-badge {
    position: absolute;
    top: 50%;
    left: -20px;
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    z-index: 10;
}
.hc-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.hc-content p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
}

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

/* ==========================================================================
   GLOBAL RESPONSIVENESS (MOBILE & TABLETS)
   ========================================================================== */

/* Tablet & Mobile Layout (< 992px) */
@media (max-width: 992px) {
    /* Navbar Stacking */
    .jcd-navbar {
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .jcd-nav-container {
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        padding: 10px 20px;
    }
    .jcd-nav-left {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    /* Hero Typography */
    .jcd-title, .hero-title {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }
    .jcd-desc {
        font-size: 1rem !important;
        padding: 0 15px;
    }
    
    /* Layout Adjustments (Legal & Docs) */
    .legal-layout, .docs-layout {
        flex-direction: column;
        margin-top: 150px; /* Account for taller navbar */
    }
    .legal-sidebar, .docs-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-right: 0;
        padding-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .legal-sidebar a, .docs-sidebar a {
        display: inline-block;
        margin-bottom: 0;
    }
    
    /* Hero Adjustments */
    .hero-layout, .split-layout {
        flex-direction: column;
    }
    .hero-visual {
        max-width: 100%;
        height: auto;
    }
    .hero-visual img {
        width: 100%;
        height: auto;
    }

    /* Footer Stacking */
    .site-footer {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .footer-left, .footer-right {
        justify-content: center;
    }
}

/* Mobile Specific (< 768px) */
@media (max-width: 768px) {
    /* Extreme Title Scaling */
    .jcd-title, .hero-title {
        font-size: 2.2rem !important;
    }
    .jcd-circle-arrow {
        width: 40px !important;
        height: 40px !important;
    }
    .jcd-circle-arrow i {
        width: 20px !important;
        height: 20px !important;
    }
    .jcd-cursor {
        width: 30px !important;
        height: 30px !important;
        left: -35px !important;
    }
    
    /* Force grids to single column */
    .premium-features-grid,
    .bento-layout,
    .pt-features-grid,
    .value-props,
    .tech-grid {
        grid-template-columns: 1fr !important;
    }

    /* Padding Adjustments */
    .section {
        padding: 60px 20px;
    }
}

/* ==========================================================================
   RENDER FARM NETWORK SECTION
   ========================================================================== */
.render-farm-section {
    position: relative;
    background-color: #fafafa !important;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 24px 24px;
}

.rf-diagram-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.rf-node {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rf-node:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12) !important;
}

@media (max-width: 900px) {
    .rf-workers-row {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .rf-node {
        width: 100% !important;
        max-width: 320px !important;
    }
    .rf-connectors-corrected {
        display: none; /* Hide SVG connectors on mobile */
    }
    .rf-row {
        padding-left: 0 !important;
        justify-content: center !important;
    }
}