/*
⚠️ ВНИМАНИЕ: Стили первого, второго и третьего блоков этого сайта (Hero-секция, Bento-сетка "Обо мне", секция "Портфолио", анимации, шрифты бренда, маски, свечения и частицы) полностью утверждены!
❌ Модификация стилей первого, второго или третьего блоков БЕЗ предварительного явного согласия пользователя строго ЗАПРЕЩЕНА.
При необходимости редактирования стилей первого блока, обязательно задайте вопрос на русском языке: "ОТРЕДАКТИРОВАТЬ ЛИ ПЕРВЫЦ БЛОК?"
При необходимости редактирования стилей второго блока, обязательно задайте вопрос на русском языке: "РЕДАКТИРОВАТЬ ВТОРОЙ БЛОК?"
При необходимости редактирования стилей третьего блока, обязательно задайте вопрос на русском языке: "ОТРЕДАКТИРОВАТЬ ЛИ ТРЕТИЙ БЛОК?"
*/

/* ==========================================================================
   Local Font Hosting (Bypass file:// CORS limits on Windows)
   ========================================================================== */

@font-face {
    font-family: 'Outfit Local';
    src: url('../assets/fonts/Outfit-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans Local';
    src: url('../assets/fonts/PlusJakartaSans-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Local';
    src: url('../assets/fonts/Inter-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Fix Material Symbols FOUT layout shift on load */
.material-symbols-outlined {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   Design Tokens & Variables
   ========================================================================== */

:root {
    /* Colors (Premium Black & Purple Theme) */
    --bg-canvas: #050409;
    --bg-header: rgba(5, 4, 9, 0.8);
    --bg-card: rgba(13, 9, 23, 0.4);
    
    --color-lime: #c084fc;
    --color-lime-rgb: 192, 132, 252;
    --color-cyan: #9333ea;
    --color-cyan-rgb: 147, 51, 234;
    --color-purple: #c084fc;
    --color-purple-rgb: 192, 132, 252;
    --color-indigo: #6b21a8;
    --color-indigo-rgb: 107, 33, 168;
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    
    --border-glass: rgba(255, 255, 255, 0.05);
    --border-glass-hover: rgba(255, 255, 255, 0.1);
    
    /* Typography (Prioritize CDN fonts, fallback to local variables, then to system fallbacks) */
    --font-title: 'Outfit', 'Outfit Local', 'Inter', 'Inter Local', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Plus Jakarta Sans Local', 'Inter', 'Inter Local', var(--font-title);
    
    /* Shadows */
    --shadow-premium: 0 10px 40px -10px rgba(0, 0, 0, 0.6), 0 1px 1px 0 rgba(255, 255, 255, 0.05) inset;
    --shadow-cyan-glow: 0 0 25px rgba(192, 132, 252, 0.2);
    --shadow-purple-glow: 0 0 25px rgba(147, 51, 234, 0.25);
    
    /* Transitions */
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   CSS Reset & Base Setup
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-color: rgba(168, 85, 247, 0.3) transparent;
    scrollbar-width: thin;
    background-color: #050409;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.005);
}

/* ==========================================================================
   App Canvas & Background Glow System
   ========================================================================== */

.app-canvas {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

/* Subtle Interactive Dot Grid Overlay (Fixed for seamless scroll) */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 1;
}

/* Gorgeous Blurred Glow Spots */
.glow-spot {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    mix-blend-mode: screen;
}

.glow-purple-top {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
    width: 700px;
    height: 700px;
    top: -200px;
    left: -100px;
}

.glow-purple {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.14) 0%, transparent 70%);
    width: 800px;
    height: 800px;
    bottom: 0;
    right: -100px;
}

/* Mobile-only glow spots, hidden on desktop by default */
.mobile-glow-spot {
    display: none;
}


/* ==========================================================================
   Main Header Styling
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-header);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-glass);
    z-index: 100;
    padding: 1.25rem 0; /* Vertical padding on the header itself for smooth transition */
    transition: padding var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem; /* Clean horizontal boundary containment */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.logo-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Added relative positioning for floating question marks */
    transition: transform var(--transition-normal);
}

.logo:hover .logo-icon-box {
    transform: scale(1.04); /* Subtle scale up instead of large rotation */
}

/* Cyber Visor Blinking on Hover */
.logo:hover #logo-visor {
    animation: logo-visor-blink 1.2s infinite ease-in-out;
}

@keyframes logo-visor-blink {
    0%, 30%, 36%, 42%, 80%, 86%, 92%, 100% { opacity: 1; }
    33%, 39%, 83%, 89% { opacity: 0.15; }
}

/* Floating Neon Question Marks */
.floating-question {
    position: absolute;
    color: #c084fc;
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 15px;
    text-shadow: 0 0 6px rgba(192, 132, 252, 0.9), 0 0 12px rgba(168, 85, 247, 0.5);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    animation: float-question 0.9s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes float-question {
    0% {
        transform: translate(var(--start-x), 0) scale(0.5) rotate(var(--start-rot));
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--end-x), -32px) scale(1.15) rotate(var(--end-rot));
        opacity: 0;
    }
}

.logo-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    color: #ffffff;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    opacity: 0.85;
    transition: opacity var(--transition-normal);
}

.logo:hover .logo-text {
    opacity: 1;
}

/* Navigation Links */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2.25rem;
    position: relative;
}

.nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-normal);
    position: relative;
    padding: 0.25rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-purple));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-normal);
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-link.active {
    color: var(--text-primary);
    text-shadow: 0 0 8px rgba(163, 230, 53, 0.35);
}

.nav-link.active::after {
    display: none !important;
}

.nav-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1.5px;
    background: var(--color-lime);
    box-shadow: 0 0 10px 1px var(--color-lime);
    transition: left 0.38s cubic-bezier(0.25, 1, 0.4, 1), width 0.38s cubic-bezier(0.25, 1, 0.4, 1);
    pointer-events: none;
    z-index: 1;
}

/* Discuss Project Button & Actions Container */
.header-actions {
    position: relative;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: rgba(192, 132, 252, 0.05);
    border: 1px solid rgba(192, 132, 252, 0.3);
    padding: 0.6rem 1.25rem;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    transition: background var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
    animation: contact-btn-glow 2.2s infinite ease-in-out;
}

.contact-btn .btn-icon {
    width: 18px;
    height: 18px;
    color: var(--color-purple);
    transition: transform var(--transition-normal);
}

.contact-btn:hover {
    background: rgba(192, 132, 252, 0.15);
    border-color: rgba(192, 132, 252, 0.9);
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.65), 0 0 8px rgba(192, 132, 252, 0.3) inset;
    transform: translateY(-2px);
}

@keyframes contact-btn-glow {
    0%, 100% {
        border-color: rgba(192, 132, 252, 0.3);
        box-shadow: 0 0 10px rgba(192, 132, 252, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.05);
        background: rgba(192, 132, 252, 0.03);
    }
    50% {
        border-color: rgba(192, 132, 252, 0.8);
        box-shadow: 0 0 18px rgba(192, 132, 252, 0.5), 0 0 6px rgba(192, 132, 252, 0.25) inset;
        background: rgba(192, 132, 252, 0.12);
    }
}

@keyframes contact-btn-glow-mobile {
    0%, 100% {
        border-color: rgba(192, 132, 252, 0.3);
        box-shadow: 0 0 8px rgba(192, 132, 252, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.05);
        background: rgba(192, 132, 252, 0.03);
    }
    50% {
        border-color: rgba(192, 132, 252, 0.8);
        box-shadow: 0 0 14px rgba(192, 132, 252, 0.5), 0 0 5px rgba(192, 132, 252, 0.2) inset;
        background: rgba(192, 132, 252, 0.1);
    }
}

/* ==========================================================================
   Hero Section Container & Layout
   ========================================================================== */

.hero-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 9rem 2rem 4rem 2rem;
    position: relative;
    z-index: 5;
    overflow-x: clip; /* Prevent horizontal scroll while letting ambient glows flow vertically */
}

.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); /* Balanced cinematic ratio, making character 38% larger */
    gap: 4rem;
    align-items: center;
}

/* Premium Floating Particle System */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* Force 3D hardware acceleration & layer promotion in Chromium (Windows/Linux) */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

/* Inactive state for dynamic scroll-based CPU/GPU rendering optimization */
.particles-container.inactive {
    opacity: 0;
    visibility: hidden;
}

.particles-container.inactive .particle {
    animation-play-state: paused !important;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: float-particle linear infinite;
}

@keyframes float-particle {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.85;
    }
    90% {
        opacity: 0.85;
    }
    100% {
        transform: translate3d(var(--drift-x, 65px), var(--drift-y, -130px), 0) scale(0.5);
        opacity: 0;
    }
}

/* ==========================================================================
   LEFT COLUMN: Typography & Offer Content
   ========================================================================== */

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0; /* Ensures child overflow doesn't expand CSS Grid tracks */
}

/* Status Badges Group */
.status-badges-group {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.65rem;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
}

.status-outsource {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 8px rgba(34, 197, 94, 0.08);
}

.status-outsource:hover {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), 0 0 15px rgba(34, 197, 94, 0.25);
    transform: translateY(-1px);
}

.status-fulltime {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 8px rgba(239, 68, 68, 0.08);
}

.status-fulltime:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), 0 0 15px rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.status-dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
}

.status-dot.dot-green {
    background-color: #22c55e;
    box-shadow: 0 0 6px #22c55e, 0 0 12px rgba(34, 197, 94, 0.8), 0 0 20px rgba(34, 197, 94, 0.4);
}

.status-dot.dot-green::after {
    background-color: #22c55e;
    animation: badge-pulse-green 2s cubic-bezier(0.25, 0, 0, 1) infinite;
}

.status-dot.dot-red {
    background-color: #ef4444;
    box-shadow: 0 0 6px #ef4444, 0 0 12px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.4);
}

.status-dot.dot-red::after {
    background-color: #ef4444;
    animation: badge-pulse-red 2s cubic-bezier(0.25, 0, 0, 1) infinite;
}

.status-text {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.status-outsource .status-text {
    color: #4ade80;
}

.status-fulltime .status-text {
    color: #fca5a5;
}

@keyframes badge-pulse-green {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 4px #22c55e; }
    100% { transform: scale(4); opacity: 0; box-shadow: 0 0 10px rgba(34, 197, 94, 0); }
}

@keyframes badge-pulse-red {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 4px #ef4444; }
    100% { transform: scale(4); opacity: 0; box-shadow: 0 0 10px rgba(239, 68, 68, 0); }
}

/* Structured Role Cards Grid (Redesigned as Premium Horizontal Badges) */
.role-cards-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Force one row on desktop */
    gap: 0.65rem;
    margin-bottom: 2.25rem;
    width: 100%;
}

.role-card {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1.15rem;
    border-radius: 50px; /* Modern pill shape */
    background: rgba(13, 9, 23, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background var(--transition-normal), border-color var(--transition-normal), transform var(--transition-spring), box-shadow var(--transition-normal);
    cursor: default;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.role-card:hover {
    transform: translateY(-3px) scale(1.02);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(192, 132, 252, 0.4);
    box-shadow: 0 8px 25px rgba(192, 132, 252, 0.15);
}

.role-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.role-icon.icon-cyan {
    color: var(--color-purple);
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.4));
}

.role-icon.icon-purple {
    color: var(--color-purple);
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.4));
}

.role-icon.icon-lime {
    color: var(--color-lime);
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.4));
}

.role-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: 0.1px;
    white-space: nowrap;
}

/* Title Header H1 */
.hero-title {
    font-family: var(--font-title);
    font-size: clamp(2.6rem, 4.1vw, 4.7rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    margin-bottom: 2.25rem;
}

@media (min-width: 1024px) {
    .nowrap-desktop {
        white-space: nowrap;
    }
}


/* Blinking Typewriter Cursor */
.typewriter-cursor {
    color: var(--color-purple);
    margin-left: 2px;
    font-weight: 300;
    animation: blink-cursor 0.8s infinite;
}

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

/* Editorial Section Label for Skills Dashboard */
.hero-section-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-tertiary);
    margin-bottom: 0.85rem;
    display: block;
}

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

.text-gradient-cyan {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-indigo) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subtitle Description */
.hero-description {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    max-width: 90%;
}

/* CTA buttons actions */
.cta-actions {
    display: flex;
    align-items: center; /* Vertically center buttons to support optical height compensation */
    gap: 1.25rem;
    margin-bottom: 0; /* Clear bottom margin to maintain vertical balance */
}

.cta-actions .btn-primary {
    width: 308px; /* Make both CTA buttons identical in width (40% larger than 220px) */
    height: 80px; /* Base height for primary button (40% larger than 58px) */
}

.cta-actions .btn-secondary {
    width: 308px; /* Make both CTA buttons identical in width (40% larger than 220px) */
    height: 84px; /* Physically taller (84px vs 80px) to optically balance the solid purple visual weight */
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem; /* Larger gap for larger button */
    padding: 0 3.85rem; /* Remove vertical padding, let height control it (40% larger) */
    height: 80px; /* Taller, more substantial premium button height */
    border-radius: 16px; /* Smooth modern border radius */
    font-family: var(--font-body);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.45rem; /* Larger font size (40% larger) */
    cursor: pointer;
    position: relative;
    outline: none;
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);
}

.btn span {
    display: inline-block !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}

/* Subtle, periodic light shimmer/glint animation sweeping across the buttons */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 30%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.15) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    animation: btn-shimmer 6s infinite ease-in-out;
    opacity: 0; /* Prevent ghost line artifact on the right edge when resting */
}

@keyframes btn-shimmer {
    0% {
        left: -150%;
        opacity: 0;
    }
    4% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    21% {
        opacity: 0;
    }
    25% {
        left: 150%;
        opacity: 0;
    }
    100% {
        left: 150%;
        opacity: 0;
    }
}

.btn-primary {
    background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%);
    background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
    gap: 0 !important; /* Remove gap by default to center text perfectly when icon is hidden */
}

.btn-primary .btn-icon {
    width: 0px !important;
    height: 28px !important; /* same height as linkedin icon */
    opacity: 0 !important;
    margin-left: 0px !important;
    position: relative !important;
    top: 2px !important;
    flex-shrink: 0 !important;
    object-fit: none !important; /* Prevent squishing during transition */
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s ease, margin-left 0.3s ease !important;
}

.btn-primary:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.5);
    transform: translateY(-2px);
}

.btn-primary:hover .btn-icon {
    width: 28px !important; /* same width as linkedin icon */
    margin-left: 0.85rem !important; /* same spacing gap as linkedin icon */
    opacity: 1 !important;
}

.btn-secondary {
    background: rgba(15, 10, 28, 0.4); /* Dark semi-transparent purple to remove grey/white haze */
    border: 1.5px solid rgba(255, 255, 255, 0.2); /* Clean white border instead of purple */
    color: var(--text-primary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-decoration: none;
    gap: 0;
}

/* Disable shimmer on LinkedIn button to completely eliminate white glint overlay */
.btn-secondary::after {
    display: none !important;
}

.btn-secondary:hover {
    background: rgba(15, 10, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.btn-secondary .linkedin-icon {
    width: 0px;
    height: 28px; /* Taller icon */
    opacity: 0;
    margin-left: 0;
    flex-shrink: 0; /* Fix flex-item collapse bug on Windows Chromium browsers */
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s ease, margin-left 0.3s ease;
}

.btn-secondary:hover .linkedin-icon {
    width: 28px;
    opacity: 1;
    margin-left: 0.85rem;
}

/* Direction Tags Underneath */
.direction-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.direction-tag {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-tertiary);
    transition: color var(--transition-normal);
}

.direction-tags .dot {
    color: var(--text-tertiary);
    opacity: 0.4;
}

.direction-tag:hover {
    color: var(--color-cyan);
}

/* ==========================================================================
   RIGHT COLUMN: Visual Stage & Animated SVG Character
   ========================================================================== */

.hero-visual {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Concentric Stage Ambient Glow Rings */
.visual-stage-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.06) 40%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    animation: scale-glow 8s ease-in-out infinite alternate;
}

@keyframes scale-glow {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}

/* Floating 3D Shapes Around Character (Custom Game Creatives) */
.floating-shape {
    position: absolute;
    pointer-events: none;
    z-index: 1; /* Placed behind the character container (z-index: 2) */
    will-change: transform;
}

.shape-cat-translator-container {
    top: 10%;
    left: -8%;
    animation: icon-float-1 8s ease-in-out infinite;
}

.shape-cyber-container {
    top: 18%;
    right: -6%;
    animation: icon-float-2 7s ease-in-out infinite;
}

.shape-vampire-container {
    top: 70%;
    right: -8%;
    animation: icon-float-4 8.5s ease-in-out infinite;
}

.shape-tank-container {
    top: 45%;
    left: -12%;
    animation: icon-float-3 9s ease-in-out infinite;
}

.game-icon-image {
    border-radius: 20px; /* Modern mobile app icon rounding */
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: block;
    transition: transform 0.4s ease;
}

.icon-cat-translator {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(168, 85, 247, 0.25);
    width: 90px;
    height: 90px;
}

.icon-photo-restore {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(147, 51, 234, 0.25);
    width: 85px;
    height: 85px;
}

.icon-tank {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(6, 182, 212, 0.25);
    width: 95px;
    height: 95px;
}

.icon-vampire {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(239, 68, 68, 0.28);
    width: 85px;
    height: 85px;
}

@keyframes icon-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(-6deg); }
    25% { transform: translate(6px, -10px) scale(1.03) rotate(-4deg); }
    50% { transform: translate(-8px, -18px) scale(0.97) rotate(-3deg); }
    75% { transform: translate(-12px, -6px) scale(1.01) rotate(-5deg); }
}

@keyframes icon-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(8deg); }
    25% { transform: translate(10px, 8px) scale(0.97) rotate(10deg); }
    50% { transform: translate(15px, -12px) scale(1.03) rotate(12deg); }
    75% { transform: translate(-5px, -8px) scale(0.99) rotate(9deg); }
}

@keyframes icon-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(-4deg); }
    25% { transform: translate(-10px, -8px) scale(1.02) rotate(-6deg); }
    50% { transform: translate(-6px, -22px) scale(0.96) rotate(-8deg); }
    75% { transform: translate(8px, -12px) scale(1.01) rotate(-5deg); }
}

@keyframes icon-float-4 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(5deg); }
    25% { transform: translate(-8px, -6px) scale(0.98) rotate(3deg); }
    50% { transform: translate(10px, -16px) scale(1.02) rotate(1deg); }
    75% { transform: translate(12px, -8px) scale(0.99) rotate(3.5deg); }
}

/* Character Container & SVG Setup */
.character-container {
    width: 100%;
    max-width: 860px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

#vector-character {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible !important; /* Prevent glowing filters from clipping at SVG boundaries */
}

/* ==========================================================================
   SVG Character Animation Classes
   ========================================================================== */

/* 1. Natural Body Breathing */
.character-breathing {
    animation: breathing 4.5s ease-in-out infinite;
    transform-origin: 250px 480px;
}

@keyframes breathing {
    0% { transform: scale(1); }
    50% { transform: scale(1.015) translateY(-2px); }
    100% { transform: scale(1); }
}

/* 2. Natural Head Bobbing / Nod */
.character-head-tilt {
    animation: head-tilt 6.5s ease-in-out infinite;
    transform-origin: 250px 300px;
    transition: transform var(--transition-normal);
}

@keyframes head-tilt {
    0% { transform: rotate(0deg) translateY(0); }
    33% { transform: rotate(0.8deg) translateY(1px); }
    66% { transform: rotate(-0.8deg) translateY(-1px); }
    100% { transform: rotate(0deg) translateY(0); }
}

/* Triggered Reactive Head Nod when message spawns */
.character-head-tilt.react-nod {
    animation: head-nod 1.1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes head-nod {
    0% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(12px) rotate(3deg); }
    65% { transform: translateY(-3px) rotate(-1deg); }
    100% { transform: translateY(0) rotate(0); }
}

/* 3. Eye Blinking Keyframes */
#char-eye-left .eye-pupil {
    transform-origin: 215px 212px;
    animation: blink 5s infinite;
}

#char-eye-right .eye-pupil {
    transform-origin: 285px 212px;
    animation: blink 5s infinite;
}

@keyframes blink {
    0%, 92%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.08); }
}

/* 4. Phone Screen & Cyber Visor Reactive Glow animations */
#phone-screen-glow {
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1); /* Extremely smooth, slow breathing decay */
    pointer-events: none;
}

#phone-screen-glow.flash-active {
    opacity: 0.95;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Gentle premium pop-in */
}

#char-visor-glow {
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1); /* Extremely smooth, slow breathing decay */
    pointer-events: none;
}

#char-visor-glow.flash-active {
    opacity: 1;
    transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Gentle premium pop-in */
}

/* Incoming notification card animation on the phone screen */
#phone-ui-notification rect {
    transform: translateY(4px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: 27px 57px;
}

#phone-ui-notification rect:nth-child(1) {
    opacity: 0;
}

#phone-ui-notification rect:nth-child(2) {
    opacity: 0;
}

#phone-ui-notification rect:nth-child(3) {
    opacity: 0;
}

#phone-ui-notification.flash-active rect {
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

#phone-ui-notification.flash-active rect:nth-child(1) {
    opacity: 0.85; /* Purple background card */
}

#phone-ui-notification.flash-active rect:nth-child(2) {
    opacity: 0.95; /* Text line 1 */
}

#phone-ui-notification.flash-active rect:nth-child(3) {
    opacity: 0.6; /* Text line 2 */
}

/* 5. Tapping arm animations */
.character-right-hand {
    animation: tap-arm 4.2s ease-in-out infinite;
    transform-origin: 350px 340px;
}

@keyframes tap-arm {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(-2.5deg) translateY(-3px); }
}

/* Sparkle active badge on hoodie */
.badge-active-dot {
    animation: blink-dot 1.5s ease-in-out infinite;
}

@keyframes blink-dot {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; fill: var(--color-lime); }
}

/* ==========================================================================
   CLIENT NOTIFICATIONS FLOATING BUBBLES
   ========================================================================== */

.notifications-container {
    position: absolute;
    bottom: 34%; /* Positioned beautifully directly above the phone */
    left: 21.5%; /* Shifted right to anchor directly to the top-right corner of the phone screen */
    width: 280px;
    display: flex;
    flex-direction: column-reverse; /* Spawn new message at bottom near phone and float old upward */
    gap: 0.75rem;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through if needed */
}

/* Single Message bubble */
.notification-item {
    background: rgba(18, 15, 36, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 1rem 1.25rem;
    border-radius: 18px;
    border-bottom-left-radius: 4px; /* Cute chat tail style */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    animation: notification-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: bottom left;
    
    /* Support collapsing layout during fade-out keyframes */
    max-height: 180px;
    overflow: hidden;
}

.notification-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-purple) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.88rem;
    font-family: var(--font-title);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.notification-text {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: left;
}

.notification-item.fade-out {
    animation: notification-fade 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    pointer-events: none;
}

@keyframes notification-pop {
    0% { opacity: 0; transform: scale(0.7) translateY(24px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes notification-fade {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        max-height: 180px;
        padding: 1rem 1.25rem;
        margin-bottom: 0;
        border-color: rgba(255, 255, 255, 0.08);
    }
    100% {
        opacity: 0;
        transform: scale(0.85) translateY(-20px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: -0.75rem; /* Collapses the flex gap fully */
        border-top-width: 0;
        border-bottom-width: 0;
        border-color: transparent;
    }
}

/* ==========================================================================
   About Me Section Styles (Bento Grid Edition)
   ========================================================================== */

/*
⚠️ ВНИМАНИЕ: Стили второго блока (раздел "Обо мне", Bento-сетка, таймлайн опыта, маски, свечения и частицы) полностью утверждены!
❌ Модификация стилей второго блока БЕЗ предварительного явного согласия пользователя строго ЗАПРЕЩЕНА.
При необходимости редактирования стилей второго блока, обязательно задайте вопрос на русском языке: "РЕДАКТИРОВАТЬ ВТОРОЙ БЛОК?"
*/
.about-section {
    position: relative;
    padding: 8rem 2rem;
    scroll-margin-top: 80px; /* Offset for header scroll */
    z-index: 5;
    overflow-x: clip; /* Prevent horizontal scroll while letting ambient glows flow vertically */
}

/* Elegant background wrapper with a smooth bottom fade-out mask */
.about-bg-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* Also smoothly fade the particle container to transparent at the bottom */
.about-section .particles-container,
.portfolio-section .particles-container {
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.about-glow-spot {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    pointer-events: none;
    z-index: 1; /* Behind the about-container (z-index: 2) */
    opacity: 0.65;
    mix-blend-mode: screen;
}

.glow-about-purple-left {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, transparent 70%);
    width: 600px;
    height: 600px;
    top: 5%;
    left: -150px;
}

.glow-about-purple {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, transparent 70%);
    width: 600px;
    height: 600px;
    top: 30%;
    left: 15%;
}

.glow-about-purple-right {
    display: none;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.24) 0%, transparent 70%);
    width: 600px;
    height: 600px;
    top: 30%;
    right: -150px;
}

.about-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}



.about-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3rem;
    align-items: stretch;
}

/* ==========================================================================
   Bento Card Base Styles
   ========================================================================== */

.bento-card {
    position: relative;
    background: rgba(15, 10, 28, 0.5);
    border: 1.5px solid rgba(168, 85, 247, 0.18);
    border-radius: 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(168, 85, 247, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    transition: border-color var(--transition-normal), 
                box-shadow var(--transition-normal),
                transform var(--transition-normal);
}

.bento-card::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
    top: -50px;
    right: -50px;
    pointer-events: none;
    z-index: 1;
}

/* Bento Card Corner Glow Alternating Placements */
.bento-bio::before {
    top: -50px;
    left: -50px;
    right: auto;
}

.bento-creatives::before {
    top: -50px;
    right: -50px;
    bottom: auto;
}

.metric-exp::before {
    bottom: -50px;
    left: -50px;
    top: auto;
    right: auto;
}

.metric-creatives::before {
    display: none;
}

.metric-reach::before {
    bottom: -50px;
    right: -50px;
    top: auto;
}

.bento-card-inner {
    padding: 2.25rem;
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bento-card-bg-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.bento-card:hover {
    border-color: rgba(192, 132, 252, 0.3);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 30px rgba(192, 132, 252, 0.08);
    transform: translateY(-4px);
}

.bento-card:hover .bento-card-bg-glow {
    opacity: 0.85;
}

/* ==========================================================================
   Bento Bio Card Specific Styles
   ========================================================================== */

.bento-bio {
    grid-column: span 2;
}

.bio-glow {
    background: radial-gradient(circle at 90% 90%, rgba(192, 132, 252, 0.12) 0%, transparent 65%);
}

.bio-badge {
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: #e9d5ff;
    white-space: nowrap;
}

.bio-title {
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.75rem;
    letter-spacing: -0.015em;
}

.bio-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-bottom: 2rem;
}

.text-highlight {
    color: #e9d5ff;
    background: linear-gradient(120deg, rgba(192, 132, 252, 0.14) 0%, rgba(192, 132, 252, 0.04) 100%);
    padding: 0.08rem 0.22rem;
    margin: 0;
    border-radius: 6px;
    font-weight: 500;
}

/* Bento Experience Roadmap Timeline */
.bio-timeline {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.timeline-title {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-tertiary);
}

.timeline-wrapper {
    position: relative;
    height: 76px;
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
    margin-bottom: 0.6rem;
}

.timeline-track {
    position: absolute;
    left: 31px;
    right: 31px;
    height: 2px;
    background: rgba(255, 255, 255, 0.04);
    z-index: 1;
}

@keyframes draw-progress {
    0% {
        width: 0%;
    }
    100% {
        width: calc(100% - 62px);
    }
}

@keyframes draw-progress-vertical {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}

.timeline-progress {
    position: absolute;
    left: 31px;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-purple));
    z-index: 1;
}

.timeline-active .timeline-progress {
    animation: draw-progress 8s linear forwards;
}

.timeline-nodes {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    width: 62px; /* Symmetrical node trigger widths */
    pointer-events: none; /* Ignore pointer events on empty areas of the node column */
}

.node-year {
    position: absolute;
    bottom: 12px;
    font-family: monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.5px;
    transition: color var(--transition-normal), transform var(--transition-normal);
    pointer-events: none; /* Years don't trigger hovers */
}

.timeline-node:has(.node-dot:hover, .node-company:hover) .node-year {
    color: var(--text-primary);
    transform: translateY(-2px);
}

.node-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid var(--bg-canvas);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: transform var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
    z-index: 2;
    /* Default state is unlit, animates to active state sequentially */
    pointer-events: auto; /* Dots trigger hover interaction */
}

/* Staggered dot activations based on progress line arrival (8s slow draw) */
/* Nodes 1, 2, 3, and 5 represent past places of work, so they transition to a muted gray inactive state after the line finishes drawing (8.8s) */
.timeline-active .timeline-node:nth-child(1) .node-dot { animation: dot-activate-cyan 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.0s forwards, dot-to-inactive 1.2s ease-in-out 8.8s forwards; }
.timeline-active .timeline-node:nth-child(2) .node-dot { animation: dot-activate-purple 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s forwards, dot-to-inactive 1.2s ease-in-out 8.8s forwards; }
.timeline-active .timeline-node:nth-child(3) .node-dot { animation: dot-activate-lime 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 3.2s forwards, dot-to-inactive 1.2s ease-in-out 8.8s forwards; }
.timeline-active .timeline-node:nth-child(4) .node-dot { animation: dot-activate-fuchsia 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 4.8s forwards; }
.timeline-active .timeline-node:nth-child(5) .node-dot { animation: dot-activate-orange 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 6.4s forwards, dot-to-inactive 1.2s ease-in-out 8.8s forwards; }
.timeline-active .timeline-node:nth-child(6) .node-dot { animation: dot-activate-pink 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 8.0s forwards; }

.timeline-active .timeline-node:nth-child(1) .node-company,
.timeline-active .timeline-node:nth-child(2) .node-company,
.timeline-active .timeline-node:nth-child(3) .node-company,
.timeline-active .timeline-node:nth-child(5) .node-company {
    animation: text-to-inactive 1.2s ease-in-out 8.8s forwards;
}

@keyframes dot-to-inactive {
    0% {}
    100% { background: #64748b; box-shadow: 0 0 4px #64748b, 0 0 0 1px rgba(100, 116, 139, 0.15); }
}

@keyframes text-to-inactive {
    100% { color: #64748b; opacity: 0.65; }
}

@keyframes dot-activate-cyan {
    0% { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); }
    100% { background: #22d3ee; box-shadow: 0 0 12px #22d3ee, 0 0 0 3px rgba(34, 211, 238, 0.45); }
}
@keyframes dot-activate-purple {
    0% { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); }
    100% { background: #c084fc; box-shadow: 0 0 12px #c084fc, 0 0 0 3px rgba(168, 85, 247, 0.45); }
}
@keyframes dot-activate-lime {
    0% { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); }
    100% { background: #a3e635; box-shadow: 0 0 12px #a3e635, 0 0 0 3px rgba(132, 204, 22, 0.45); }
}
@keyframes dot-activate-fuchsia {
    0% { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); }
    100% { background: #f0abfc; box-shadow: 0 0 12px #f0abfc, 0 0 0 3px rgba(240, 171, 252, 0.45); }
}
@keyframes dot-activate-orange {
    0% { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); }
    100% { background: #fdba74; box-shadow: 0 0 12px #fdba74, 0 0 0 3px rgba(249, 115, 22, 0.45); }
}
@keyframes dot-activate-pink {
    0% { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); }
    100% { background: #fb7185; box-shadow: 0 0 12px #fb7185, 0 0 0 3px rgba(244, 63, 94, 0.45); }
}

@keyframes node-ripple {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.node-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid var(--dot-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

/* Hover overrides for dot interaction and scaling */
.timeline-node:has(.node-dot:hover, .node-company:hover) .node-dot {
    transform: scale(1.4) !important;
    background: var(--dot-color) !important;
    box-shadow: 0 0 14px var(--dot-color), 0 0 0 3px var(--pulse-color) !important;
}

.timeline-node:has(.node-dot:hover, .node-company:hover) .node-dot::before {
    animation: node-ripple 1.2s infinite cubic-bezier(0.25, 0, 0, 1);
    opacity: 1;
}

/* Constant pulsing ripple for active places of work (offerthename prod. & 8K Games) */
/* Delayed until progress line reaches them (Node 4: 4.8s, Node 6: 8.0s) to keep them quiet on load */
.timeline-active .timeline-node:nth-child(4) .node-dot::before {
    animation: node-ripple 1.5s infinite cubic-bezier(0.25, 0, 0, 1) 4.8s;
}
.timeline-active .timeline-node:last-child .node-dot::before {
    animation: node-ripple 1.5s infinite cubic-bezier(0.25, 0, 0, 1) 8.0s;
}

/* Static color fallback support and custom classes */
.node-dot.dot-cyan { --dot-color: #22d3ee; --pulse-color: rgba(34, 211, 238, 0.45); }
.node-dot.dot-purple { --dot-color: #c084fc; --pulse-color: rgba(168, 85, 247, 0.45); }
.node-dot.dot-lime { --dot-color: #a3e635; --pulse-color: rgba(132, 204, 22, 0.45); }
.node-dot.dot-fuchsia { --dot-color: #f0abfc; --pulse-color: rgba(240, 171, 252, 0.45); }
.node-dot.dot-orange { --dot-color: #fdba74; --pulse-color: rgba(249, 115, 22, 0.45); }
.node-dot.dot-pink { --dot-color: #fb7185; --pulse-color: rgba(244, 63, 94, 0.45); }

.node-label {
    position: absolute;
    top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    pointer-events: none; /* Ignore pointer events on label wrapper */
}

/* Prevent first and last nodes from clipping at container edges */
.timeline-node:nth-child(1) .node-label {
    align-items: flex-start;
    left: 18px;
    text-align: left;
}

.timeline-node:nth-child(6) .node-label {
    align-items: flex-end;
    right: 18px;
    text-align: right;
}

.node-company {
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    transition: color var(--transition-normal);
    pointer-events: auto; /* Company names trigger hover interaction */
    cursor: pointer;
}

.timeline-node:has(.node-dot:hover, .node-company:hover) .node-company {
    color: #ffffff !important;
    opacity: 1 !important;
}

.node-role {
    font-family: var(--font-body);
    font-size: 0.55rem;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.38s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    margin-top: 0.05rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    /* Sequential story-telling intro fade-in flash animation (inactive until timeline is scrolled in view) */
}

.timeline-active .node-role {
    animation: role-intro-flash 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Ensure child tooltips inherit alignment properties naturally */
.timeline-node:nth-child(1) .node-role {
    align-items: flex-start;
}
.timeline-node:nth-child(6) .node-role {
    align-items: flex-end;
}

.role-title {
    display: block;
    white-space: nowrap;
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-shadow: none !important;
}

.role-duration {
    display: inline-block;
    font-size: 0.46rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.01rem 0.3rem;
    border-radius: 20px;
    margin-top: 0.04rem;
    white-space: nowrap;
}

/* Staggered role intro-flash delays to match the line's travel time (8s slow draw) */
.timeline-active .timeline-node:nth-child(1) .node-role { animation-delay: 0.1s; }
.timeline-active .timeline-node:nth-child(2) .node-role { animation-delay: 1.7s; }
.timeline-active .timeline-node:nth-child(3) .node-role { animation-delay: 3.3s; }
.timeline-active .timeline-node:nth-child(4) .node-role { animation-name: role-stay-visible; animation-duration: 1.0s; animation-delay: 4.9s; animation-fill-mode: forwards; }
.timeline-active .timeline-node:nth-child(5) .node-role { animation-delay: 6.5s; }
.timeline-active .timeline-node:nth-child(6) .node-role { animation-name: role-stay-visible; animation-duration: 1.0s; animation-delay: 8.1s; animation-fill-mode: forwards; }

@keyframes role-intro-flash {
    0% {
        opacity: 0;
        transform: translateY(4px);
        filter: blur(1.5px);
    }
    15% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
    85% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(2px);
        filter: blur(1px);
    }
}

@keyframes role-stay-visible {
    0% {
        opacity: 0;
        transform: translateY(4px);
        filter: blur(1.5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes role-intro-flash-mobile {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    15% {
        opacity: 1;
        transform: translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(2px);
    }
}

@keyframes role-stay-visible-mobile {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mobile-duration-inactive {
    0% {
        color: var(--color-purple);
        background: rgba(192, 132, 252, 0.08);
        border: 1px solid rgba(192, 132, 252, 0.15);
        opacity: 1;
    }
    100% {
        color: #64748b;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        opacity: 0.65;
    }
}

/* Clean hover state override of the role element for the active node */
.timeline-node:has(.node-dot:hover, .node-company:hover) .node-role {
    opacity: 1 !important;
    transform: translateY(0) !important;
    filter: none !important;
    transition: opacity 0.38s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Custom glowing text roles */
.cyan-text-glow { color: #22d3ee; text-shadow: 0 0 8px rgba(34, 211, 238, 0.4); }
.purple-text-glow { color: #c084fc; text-shadow: 0 0 8px rgba(168, 85, 247, 0.4); }
.lime-text-glow { color: #a3e635; text-shadow: 0 0 8px rgba(132, 204, 22, 0.4); }
.fuchsia-text-glow { color: #f0abfc; text-shadow: 0 0 8px rgba(240, 171, 252, 0.4); }
.orange-text-glow { color: #fdba74; text-shadow: 0 0 8px rgba(249, 115, 22, 0.4); }
.pink-text-glow { color: #fb7185; text-shadow: 0 0 8px rgba(244, 63, 94, 0.4); }


/* ==========================================================================
   Bento Metrics Card Specific Styles
   ========================================================================== */

.bento-metric {
    grid-column: span 1;
}

.metric-inner {
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.35rem;
}

.exp-glow {
    background: radial-gradient(circle at 10% 90%, rgba(147, 51, 234, 0.12) 0%, transparent 60%);
}

.creatives-glow {
    background: radial-gradient(circle at 10% 90%, rgba(192, 132, 252, 0.12) 0%, transparent 60%);
}

.reach-glow {
    background: radial-gradient(circle at 10% 90%, rgba(147, 51, 234, 0.12) 0%, transparent 60%);
}

.metric-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(192, 132, 252, 0.06);
    border: 1px solid rgba(192, 132, 252, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple);
    transition: transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);
}

.bento-metric:hover .metric-icon-box {
    transform: scale(1.1) rotate(-6deg);
    background: rgba(192, 132, 252, 0.16);
    border-color: rgba(192, 132, 252, 0.35);
}

.metric-icon-box .material-symbols-outlined {
    font-size: 22px;
}

.metric-number-glow {
    font-family: var(--font-title);
    font-size: clamp(2.5rem, 3.8vw, 3.6rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 0.95;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 30%, #e9d5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(192, 132, 252, 0.2));
    transition: filter var(--transition-normal), transform var(--transition-normal);
}

.bento-metric:hover .metric-number-glow {
    filter: drop-shadow(0 4px 20px rgba(192, 132, 252, 0.45));
    transform: scale(1.02);
}

.metric-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.metric-card-title {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.metric-card-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Console Dashboard Indicator Line at bottom of metrics */
.metric-mini-chart {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: auto;
}

.chart-line-glow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--color-purple), #e9d5ff);
    box-shadow: 0 0 8px var(--color-purple);
}

.exp-line { width: 75%; }
.creatives-line { width: 92%; }
.reach-line { width: 85%; }

.bento-metric:hover .chart-line-glow {
    filter: brightness(1.15);
}

/* ==========================================================================
   Bento Creatives Compact Vertical Card Styles
   ========================================================================== */

.bento-creatives {
    grid-column: span 1;
}

.creatives-glow {
    background: radial-gradient(circle at 90% 10%, rgba(192, 132, 252, 0.08) 0%, transparent 60%);
}

.creatives-inner {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.creatives-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.1rem;
    letter-spacing: -0.015em;
    background: linear-gradient(135deg, #ffffff 30%, #e9d5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.creatives-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 0.52rem;
}

.creative-list-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.85rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(255, 255, 255, 0.045);
    transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
    cursor: default;
}

.creative-list-item::before {
    display: none;
}


.creative-list-item:hover {
    transform: translateX(6px);
}

.creative-item-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);
    z-index: 2;
}

.creative-list-item:hover .creative-item-icon-box {
    transform: scale(1.08) rotate(4deg);
}

.creative-item-icon-box .material-symbols-outlined {
    font-size: 18px;
}

.creative-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    z-index: 2;
}

.creative-item-title {
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.creative-item-tech {
    font-family: var(--font-body);
    font-size: 0.76rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Individual list item styles, glows & hovers */

.creative-list-item.item-2d .cyan-glow { color: #22d3ee; border-color: rgba(6, 182, 212, 0.2); background: rgba(6, 182, 212, 0.04); }
.creative-list-item.item-3d .purple-glow { color: #c084fc; border-color: rgba(168, 85, 247, 0.2); background: rgba(168, 85, 247, 0.04); }
.creative-list-item.item-ugc .lime-glow { color: #a3e635; border-color: rgba(132, 204, 22, 0.2); background: rgba(132, 204, 22, 0.04); }
.creative-list-item.item-ai .pink-glow { color: #f472b6; border-color: rgba(244, 114, 182, 0.2); background: rgba(244, 114, 182, 0.04); }
.creative-list-item.item-trailers .orange-glow { color: #fdba74; border-color: rgba(249, 115, 22, 0.2); background: rgba(249, 115, 22, 0.04); }
.creative-list-item.item-banners .blue-glow { color: #93c5fd; border-color: rgba(59, 130, 246, 0.2); background: rgba(59, 130, 246, 0.04); }
.creative-list-item.item-gameplay .red-glow { color: #f87171; border-color: rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.04); }

.creative-list-item.item-2d:hover { border-color: rgba(34, 211, 238, 0.35); background: rgba(34, 211, 238, 0.08); box-shadow: 0 4px 25px rgba(34, 211, 238, 0.12), inset 0 0 15px rgba(34, 211, 238, 0.08); }
.creative-list-item.item-3d:hover { border-color: rgba(192, 132, 252, 0.35); background: rgba(192, 132, 252, 0.08); box-shadow: 0 4px 25px rgba(192, 132, 252, 0.12), inset 0 0 15px rgba(192, 132, 252, 0.08); }
.creative-list-item.item-ugc:hover { border-color: rgba(163, 230, 53, 0.35); background: rgba(163, 230, 53, 0.08); box-shadow: 0 4px 25px rgba(163, 230, 53, 0.12), inset 0 0 15px rgba(163, 230, 53, 0.08); }
.creative-list-item.item-ai:hover { border-color: rgba(244, 114, 182, 0.35); background: rgba(244, 114, 182, 0.08); box-shadow: 0 4px 25px rgba(244, 114, 182, 0.12), inset 0 0 15px rgba(244, 114, 182, 0.08); }
.creative-list-item.item-trailers:hover { border-color: rgba(253, 186, 116, 0.35); background: rgba(253, 186, 116, 0.08); box-shadow: 0 4px 25px rgba(253, 186, 116, 0.12), inset 0 0 15px rgba(253, 186, 116, 0.08); }
.creative-list-item.item-banners:hover { border-color: rgba(147, 197, 253, 0.35); background: rgba(147, 197, 253, 0.08); box-shadow: 0 4px 25px rgba(147, 197, 253, 0.12), inset 0 0 15px rgba(147, 197, 253, 0.08); }
.creative-list-item.item-gameplay:hover { border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); box-shadow: 0 4px 25px rgba(248, 113, 113, 0.12), inset 0 0 15px rgba(248, 113, 113, 0.08); }



/* ==========================================================================
   Responsive Adaptations & Layout Media Queries
   ========================================================================== */

/* High-resolution widescreen layouts */
@media (min-width: 1440px) {
    .hero-container {
        gap: 6rem;
    }
}

/* Tablet Screens (Below 1024px) */
@media (max-width: 1023px) {
    /* --- Mobile & Tablet Visual Polish & Optimizations --- */
    body {
        background-color: #050409 !important;
        background-image: none !important;
    }
    
    .app-canvas {
        overflow-x: clip !important;
        background: transparent !important;
    }

    .hero-wrapper {
        background: linear-gradient(to bottom, #050409 60%, #120722 100%) !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    .about-section {
        background: linear-gradient(to bottom, #120722 0%, #150828 50%, #120722 100%) !important;
        overflow: visible !important;
        z-index: auto !important;
        margin-top: -2px !important;
        box-shadow: 0 -2px 0 0 #120722 !important;
    }

    .portfolio-section {
        background: #120722 !important;
        overflow: visible !important;
        z-index: auto !important;
        margin-top: -2px !important;
        box-shadow: 0 -2px 0 0 #120722 !important;
    }

    .prices-section {
        background: #120722 !important;
        overflow: visible !important;
        z-index: auto !important;
        margin-top: -2px !important;
        box-shadow: 0 -2px 0 0 #120722 !important;
    }

    .reviews-section {
        background: linear-gradient(to bottom, #120722 0%, #150828 50%, #100620 100%) !important;
        overflow: visible !important;
        z-index: auto !important;
        margin-top: -2px !important;
        box-shadow: 0 -2px 0 0 #120722 !important;
    }

    .faq-section {
        background: linear-gradient(to bottom, #100620 0%, #150828 50%, #050409 100%) !important;
        overflow: visible !important;
        z-index: auto !important;
        margin-top: -2px !important;
        box-shadow: 0 -2px 0 0 #100620 !important;
    }

    /* Completely hide all heavy blurred background glow elements on mobile to eliminate GPU rasterization lag */
    .prices-glow-spot,
    .reviews-glow-spot,
    .faq-glow-spot,
    .about-glow-spot,
    .glow-spot,
    .portfolio-glow-spot,
    .bio-glow,
    .portfolio-glow-center {
        display: none !important;
    }

    /* Mobile-optimized, lightweight radial-gradient glows with ZERO layout reflows/GPU cost */
    .mobile-glow-spot {
        display: block !important;
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 3 !important; /* Render on top of section containers (z-index: 2) to prevent horizontal cutoff/clipping lines */
        background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, rgba(168, 85, 247, 0.06) 50%, transparent 70%) !important;
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    /* Enforcing show for the 5 new mobile glows, positioning them in safe, non-cutoff, premium layout locations */
    .mobile-portfolio-glow-1,
    .mobile-portfolio-glow-2,
    .mobile-prices-glow-1,
    .mobile-prices-glow-2,
    .mobile-prices-glow-3 {
        display: block !important;
        position: absolute;
        pointer-events: none;
        filter: none !important; /* using pure hardware-accelerated radial gradients to avoid raster lag */
        mix-blend-mode: normal !important;
        opacity: 0.85;
    }

    .mobile-portfolio-glow-1 {
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        width: 340px;
        height: 340px;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.05) 50%, transparent 70%) !important;
        z-index: 3 !important;
    }

    .mobile-portfolio-glow-2 {
        bottom: 15%;
        right: -120px;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, rgba(168, 85, 247, 0.04) 50%, transparent 70%) !important;
        z-index: 3 !important;
    }

    .mobile-prices-glow-1 {
        top: 50px;
        left: -120px;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, rgba(168, 85, 247, 0.04) 50%, transparent 70%) !important;
        z-index: 3 !important;
    }

    .mobile-prices-glow-2 {
        top: 45%;
        right: -120px;
        width: 340px;
        height: 340px;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, rgba(168, 85, 247, 0.05) 50%, transparent 70%) !important;
        z-index: 3 !important;
    }

    .mobile-prices-glow-3 {
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.04) 50%, transparent 70%) !important;
        z-index: 3 !important;
    }

    /* Enforce portfolio section particles to be always running and fully visible on mobile viewports */
    .portfolio-section .particles-container {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .portfolio-section .particles-container.inactive {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .portfolio-section .particles-container .particle,
    .portfolio-section .particles-container.inactive .particle {
        animation-play-state: running !important;
    }

    .reviews-section .mobile-glow-1 {
        top: 140px !important; /* Fully contained inside section to prevent any boundary cutoff lines */
        right: -100px;
    }
    .reviews-section .mobile-glow-2 {
        bottom: 140px !important; /* Fully contained inside section to prevent any boundary cutoff lines */
        left: -100px;
    }

    /* Disable CSS horizontal marquee masking on mobile to prevent WebKit flashing/rendering bugs */
    .reviews-ticker-container {
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    /* Disable expensive backdrop-filter blur on mobile cards to achieve smooth 60 FPS scrolling and prevent black tiling lag */
    .site-header,
    .review-card,
    .bento-card,
    .calc-total-panel,
    .calc-included-features,
    .calc-item,
    .price-card,
    .faq-item,
    .status-badge,
    .role-card,
    .btn-secondary,
    .helper-speech-bubble,
    .cookie-consent-banner,
    .portfolio-category-btn,
    .portfolio-details-btn,
    .hero-details-container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(15, 10, 28, 0.95) !important;
    }

    /* Optimize mobile FAQ toggle performance (disable layout-expensive grid-template-rows height transitions) */
    .faq-answer {
        transition: opacity 0.2s ease !important;
        will-change: opacity !important;
    }
    .faq-answer-content {
        transition: none !important;
        will-change: auto !important;
    }

    
    #vector-character * {
        filter: none !important;
    }
    #phone-screen-glow,
    #char-visor-glow {
        opacity: 0.8 !important;
    }
    
    .visual-stage-glow {
        display: block !important;
        position: absolute !important;
        width: 340px !important;
        height: 340px !important;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(168, 85, 247, 0.12) 45%, transparent 70%) !important;
        top: 48% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        animation: scale-glow 6s ease-in-out infinite alternate !important;
    }
    
    .glow-about-purple-left {
        width: 320px !important;
        height: 320px !important;
        left: -100px !important;
        top: 5% !important;
    }
    
    .glow-about-purple {
        width: 380px !important;
        height: 380px !important;
        right: 15% !important;
        bottom: -100px !important;
    }
    
    .glow-about-purple-right {
        width: 280px !important;
        height: 280px !important;
        right: -80px !important;
        top: 35% !important;
    }
    
    .site-header,
    .portfolio-filter-btn,
    .portfolio-showcase-play-btn,
    .helper-card,
    .lightbox-overlay,
    .lightbox-content,
    .faq-item,
    .cookie-banner-container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .faq-item {
        background: rgba(15, 11, 26, 0.96) !important;
    }
    .cookie-banner-container {
        background: rgba(18, 13, 28, 0.96) !important;
    }
    .site-header {
        background-color: rgba(14, 10, 24, 0.98) !important;
    }
    .site-header::before {
        content: '';
        position: absolute;
        top: -300px;
        left: 0;
        width: 100%;
        height: 300px;
        background: rgba(14, 10, 24, 0.98) !important;
        pointer-events: none;
    }
    .bento-card {
        background: rgba(15, 10, 28, 0.5) !important;
        border: 1.5px solid rgba(168, 85, 247, 0.18) !important;
        border-radius: 2rem !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(168, 85, 247, 0.05) !important;
    }
    .portfolio-filter-btn {
        background: rgba(30, 24, 46, 0.90) !important;
    }
    .lightbox-overlay {
        background: rgba(10, 8, 18, 0.96) !important;
    }

    /* 1. Header Layout Alignment on Mobile/Tablet */
    .header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0.75rem 1.25rem !important;
    }
    .logo {
        gap: 0.35rem !important;
    }
    .logo-text {
        font-size: 0.78rem !important;
        letter-spacing: 1.5px !important;
    }
    .logo-icon-box {
        width: 22px !important;
        height: 22px !important;
    }
    .logo-icon-box svg {
        width: 22px !important;
        height: 22px !important;
    }
    .contact-btn {
        padding: 0.45rem 0.95rem !important;
        font-size: 0.75rem !important;
        border-radius: 9999px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        white-space: nowrap !important;
        animation: contact-btn-glow-mobile 2.2s infinite ease-in-out !important; /* Contained glow to prevent clipping under WebKit backdrop-filter */
    }
    .contact-btn:hover {
        box-shadow: 0 0 15px rgba(192, 132, 252, 0.6), 0 0 6px rgba(192, 132, 252, 0.3) inset !important;
    }
    .contact-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* 2. Hero Section Content Ordering */
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 2rem !important;
        position: relative !important;
    }
    .hero-content {
        display: contents !important;
    }
    .hero-visual {
        order: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        position: relative !important;
        width: 100% !important;
        max-width: 360px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Elegant Title Overlay directly on character's chest/center (raised higher) */
    .hero-title {
        order: 2 !important;
        position: absolute !important;
        top: 45% !important; /* Positioned perfectly in the empty space between visor and buttons (lowered slightly) */
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 95% !important;
        max-width: 320px !important;
        z-index: 10 !important;
        text-align: center !important;
        margin: 0 !important;
        pointer-events: none !important;
        font-size: 2.22rem !important; /* Made 20% larger for visual pop */
        font-weight: 800 !important;
        line-height: 1.25 !important;
        color: #ffffff !important;
        /* Replaced text-shadow with filter: drop-shadow to fix WebKit text-clip rendering bug */
        text-shadow: none !important;
        filter: drop-shadow(0 2px 8px rgba(5, 4, 9, 0.98)) 
                drop-shadow(0 0 15px rgba(168, 85, 247, 0.35)) !important;
    }
    
    /* CTA buttons side-by-side row on first screen (pushed lower, 20% larger, centered icons) */
    .cta-actions {
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important; /* Vertically center buttons to support optical height compensation */
        gap: 0.65rem !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 3.5rem auto 1.5rem auto !important;
        z-index: 12 !important;
    }
    .cta-actions .btn {
        display: flex !important; /* Block-level flex forces iOS Safari to respect flex and width: 0 for perfectly proportional widths */
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important; /* Explicit gap between text and icon */
        padding: 0 0.85rem !important; /* Balanced padding to prevent any text clipping on smaller viewports */
        font-size: 1.05rem !important;
        border-radius: 30px !important;
        width: 0 !important; /* Force browser to distribute space according to flex factor ignoring content width */
        min-width: 0 !important;
        white-space: nowrap !important;
    }
    .cta-actions .btn-primary {
        flex: 1 1 0px !important; /* Force mathematically exact equal size */
        height: 52px !important; /* Base mobile height */
    }
    .cta-actions .btn-primary .btn-icon {
        display: none !important; /* Hide arrow icon on mobile to center text */
    }
    .cta-actions .btn-secondary {
        flex: 1 1 0px !important; /* Force mathematically exact equal size */
        height: 56px !important; /* Physically taller (56px vs 52px) on mobile to optically balance visual weight */
    }
    .cta-actions .btn svg {
        width: 20px !important; /* Unified 20px width to match LinkedIn icon exactly */
        height: 20px !important; /* Unified 20px height to match LinkedIn icon exactly */
        display: inline-block !important;
        vertical-align: middle !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        position: relative !important;
        top: 0px !important; /* Perfect standard flex centering on mobile */
        transform: translateY(0) !important;
    }
    .cta-actions .btn:hover svg {
        transform: translateY(3px) !important; /* Subtle, elegant downward hover translation */
    }
    .cta-actions .btn-secondary .linkedin-icon {
        width: 20px !important;
        height: 20px !important;
        opacity: 1 !important;
        margin-left: 0px !important; /* Remove redundant margin, rely on flex gap for perfect symmetry */
        display: inline-block !important;
        vertical-align: middle !important;
        position: relative !important;
        top: 0px !important; /* Perfect standard flex centering on mobile */
        transform: translateY(0) !important;
    }
    .cta-actions .btn-secondary:hover .linkedin-icon {
        transform: translateY(0) !important; /* Keep stable */
    }
    
    /* Unified Details Container for Skills & Availability (Structured and Professional Card) */
    .hero-details-container {
        order: 4 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 92% !important;
        max-width: 325px !important;
        margin: 1.5rem auto 0 auto !important;
        padding: 1.25rem !important;
        background: rgba(15, 10, 28, 0.5) !important;
        border: 1.5px solid rgba(168, 85, 247, 0.18) !important;
        border-radius: 24px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(168, 85, 247, 0.05) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-sizing: border-box !important;
        z-index: 11 !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .hero-details-container::before {
        content: '' !important;
        position: absolute !important;
        width: 180px !important;
        height: 180px !important;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, transparent 70%) !important;
        top: -60px !important;
        right: -60px !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    .hero-details-container .hero-section-label {
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        color: var(--text-tertiary) !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important; /* Exact vertical grid spacing */
        text-align: left !important;
        padding-left: 0.25rem !important;
        width: 100% !important;
        display: block !important;
        position: relative !important;
        z-index: 2 !important;
    }
    .hero-details-container .role-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0.5rem !important;
        margin-top: 0 !important;
        margin-bottom: 1.25rem !important; /* Symmetric section separator gap (20px) */
        position: relative !important;
        z-index: 2 !important;
    }
    .hero-details-container .role-card {
        padding: 0.55rem 1rem !important;
        font-size: 0.82rem !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
        box-shadow: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .hero-details-container .role-label {
        font-size: 0.78rem !important;
        color: var(--text-primary) !important;
    }
    .hero-details-container .role-icon {
        width: 13px !important;
        height: 13px !important;
        flex-shrink: 0 !important;
        display: block !important;
    }
    .hero-details-container .status-badges-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* Allow wrapping for spacious layout */
        justify-content: center !important;
        width: 100% !important;
        gap: 0.45rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    .hero-details-container .status-badge {
        flex: 1 1 calc(50% - 0.25rem) !important; /* 2 badges on first row, 1 stretched on second row */
        padding: 0.45rem 0.95rem !important; /* Generous padding so text is not squeezed */
        font-size: 0.72rem !important; /* Extremely readable font size */
        border-radius: 30px !important;
        margin-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        white-space: nowrap !important;
    }
    .hero-details-container .status-badge .status-dot {
        flex-shrink: 0 !important;
    }
    .hero-details-container .status-badge .status-text {
        text-transform: uppercase !important;
        font-weight: 600 !important;
    }

    /* 3. Smaller client notifications, scaled down 50% & positioned beautifully next to phone screen */
    .notifications-container {
        position: absolute !important;
        bottom: 24% !important;
        left: 14% !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 135px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        z-index: 8 !important;
    }
    .notification-item {
        padding: 0.3rem 0.45rem !important;
        border-radius: 8px !important;
        transform-origin: bottom left !important;
        border-bottom-left-radius: 2px !important; /* Tiny chat tail */
        border-bottom-right-radius: 8px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
        gap: 0.4rem !important;
    }
    .notification-avatar {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.45rem !important;
        border-width: 0.75px !important;
    }
    .notification-text {
        font-size: 0.58rem !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    /* 3.1 Guide Helper Popup Compact Version (max-width: 1023px) */
    .helper-character-box {
        bottom: 15px !important;
        right: -220px !important;
    }
    .helper-character-box.active {
        right: 15px !important;
    }
    .helper-avatar-box {
        width: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(192, 132, 252, 0.25) !important;
    }
    .helper-svg {
        width: 44px !important;
        height: 44px !important;
        transform: scale(0.9) translateY(2px) !important;
    }
    .helper-avatar-box:hover .helper-svg {
        transform: scale(1.02) translateY(1px) rotate(4deg) !important;
    }
    .helper-speech-bubble {
        width: 180px !important;
        bottom: 60px !important;
        padding: 0.55rem 0.75rem !important;
        border-radius: 10px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), 0 0 12px rgba(168, 85, 247, 0.1) !important;
    }
    .helper-speech-bubble span {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }
    .helper-bubble-arrow {
        bottom: -6px !important;
        right: 15px !important;
        width: 12px !important;
        height: 12px !important;
    }
    .helper-close-btn {
        width: 16px !important;
        height: 16px !important;
        top: -4px !important;
        left: -4px !important;
    }
    .helper-close-btn .material-symbols-outlined {
        font-size: 10px !important;
    }

    /* 4. Biography Card Readability in Block 2 */
    .bio-paragraphs {
        gap: 1.5rem !important;
    }
    .bio-paragraphs p {
        line-height: 1.8 !important;
        font-size: 0.95rem !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }
    .text-highlight {
        background: none !important;
        padding: 0 !important;
        color: #d8b4fe !important; /* Clean premium lavender text color */
        font-weight: 600 !important;
    }

    /* 5. Diagonal Showcase Column & Card Proportions in Block 3 */
    .portfolio-showcase-ticker {
        gap: 1.5rem !important; /* Narrower gaps on mobile */
        inset: -20% -10% !important;
    }
    .ticker-column {
        width: 9.5rem !important; /* Scale down columns from 18.75rem to 9.5rem (152px) */
    }
    .ticker-card {
        height: 11.5rem !important; /* Scale down card height from 22.5rem to 11.5rem (184px) */
        margin-bottom: 1.5rem !important; /* Match vertical gap */
        border-radius: 0.85rem !important;
    }
    .ticker-card .avatar-circle {
        width: 32px !important;
        height: 32px !important;
    }
    .ticker-card .avatar-circle .material-symbols-outlined {
        font-size: 16px !important;
    }
    .ticker-card .card-brand {
        font-size: 0.65rem !important;
        margin-top: 0.5rem !important;
        padding: 0 0.5rem !important;
    }
    .ticker-card .card-tag {
        font-size: 0.5rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    /* ---------------------------------------------------------------------- */
    /* ------------------------------------------------- */

    .site-header {
        padding: 0.25rem 0;
    }
    
    .header-container {
        padding: 1rem 1.5rem;
    }
    
    .main-nav {
        display: none; /* Hide default nav items on tablet to look clean */
    }
    
    .cta-pointer-hint {
        display: none !important;
    }
    
    .hero-wrapper {
        padding: 7.5rem 1.5rem 2rem 1.5rem;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: 3.5rem;
        text-align: center;
    }
    
    .hero-content {
        align-items: center;
    }
    
    .direction-tags {
        justify-content: center;
    }
    
    /* About Me Bento Responsive tablet tweaks */
    .about-section {
        padding: 4rem 1.5rem 2rem 1.5rem !important;
    }
    
    .about-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .bento-bio {
        grid-column: span 2;
    }
    

    
    .bento-metric {
        grid-column: span 1;
    }
    
    .metric-reach {
        grid-column: span 2;
    }
    
    .bento-creatives {
        grid-column: span 2;
    }
    
    .creatives-vertical-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }
    
    .creative-list-item.item-gameplay {
        grid-column: span 2;
    }

    /* Experience Timeline - Elegant Vertical Layout for Mobile/Tablet */
    .timeline-wrapper {
        height: auto !important;
        margin: 2rem 0 !important;
        display: block !important;
        position: relative !important;
    }
    
    .timeline-track {
        left: 8px !important;
        right: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 2px !important;
        height: 100% !important;
        transform: none !important; /* Reset desktop transform translateY(-50%) */
    }
    
    .timeline-progress {
        left: 8px !important;
        right: auto !important;
        top: 0 !important;
        width: 2px !important;
        height: 0%;
        z-index: 2 !important;
        transform: none !important; /* Reset desktop transform translateY(-50%) */
        background: linear-gradient(180deg, var(--color-cyan) 0%, var(--color-purple) 100%) !important;
    }
    
    .timeline-active .timeline-progress {
        animation: draw-progress-vertical 6s linear forwards !important;
    }

    /* Synchronized fast stagger delays for vertical timeline on mobile (matching 6s progress line) */
    
    /* Node 1 (2019) */
    .timeline-active .timeline-node:nth-child(1) .node-dot {
        animation: dot-activate-cyan 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.0s forwards, dot-to-inactive 1.2s ease-in-out 1.3s forwards !important;
    }
    .timeline-active .timeline-node:nth-child(1) .node-company,
    .timeline-active .timeline-node:nth-child(1) .role-title {
        animation: text-to-inactive 1.2s ease-in-out 1.3s forwards !important;
    }
    .timeline-active .timeline-node:nth-child(1) .role-duration {
        animation: mobile-duration-inactive 1.2s ease-in-out 1.3s forwards !important;
    }

    /* Node 2 (2021) */
    .timeline-active .timeline-node:nth-child(2) .node-dot {
        animation: dot-activate-purple 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards, dot-to-inactive 1.2s ease-in-out 2.3s forwards !important;
    }
    .timeline-active .timeline-node:nth-child(2) .node-company,
    .timeline-active .timeline-node:nth-child(2) .role-title {
        animation: text-to-inactive 1.2s ease-in-out 2.3s forwards !important;
    }
    .timeline-active .timeline-node:nth-child(2) .role-duration {
        animation: mobile-duration-inactive 1.2s ease-in-out 2.3s forwards !important;
    }

    /* Node 3 (2022) */
    .timeline-active .timeline-node:nth-child(3) .node-dot {
        animation: dot-activate-lime 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 2.3s forwards, dot-to-inactive 1.2s ease-in-out 3.3s forwards !important;
    }
    .timeline-active .timeline-node:nth-child(3) .node-company,
    .timeline-active .timeline-node:nth-child(3) .role-title {
        animation: text-to-inactive 1.2s ease-in-out 3.3s forwards !important;
    }
    .timeline-active .timeline-node:nth-child(3) .role-duration {
        animation: mobile-duration-inactive 1.2s ease-in-out 3.3s forwards !important;
    }

    /* Node 4 (2023) - Active */
    .timeline-active .timeline-node:nth-child(4) .node-dot {
        animation: dot-activate-fuchsia 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s forwards !important;
    }

    /* Node 5 (2024) */
    .timeline-active .timeline-node:nth-child(5) .node-dot {
        animation: dot-activate-orange 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 4.3s forwards, dot-to-inactive 1.2s ease-in-out 5.2s forwards !important;
    }
    .timeline-active .timeline-node:nth-child(5) .node-company,
    .timeline-active .timeline-node:nth-child(5) .role-title {
        animation: text-to-inactive 1.2s ease-in-out 5.2s forwards !important;
    }
    .timeline-active .timeline-node:nth-child(5) .role-duration {
        animation: mobile-duration-inactive 1.2s ease-in-out 5.2s forwards !important;
    }

    /* Node 6 (2026) - Active */
    .timeline-active .timeline-node:nth-child(6) .node-dot {
        animation: dot-activate-pink 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 5.2s forwards !important;
    }

    /* Sequential fade in of job details */
    .timeline-active .node-role {
        animation: role-stay-visible-mobile 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }

    .timeline-active .timeline-node:nth-child(1) .node-role { animation-delay: 0.1s !important; }
    .timeline-active .timeline-node:nth-child(2) .node-role { animation-delay: 1.4s !important; }
    .timeline-active .timeline-node:nth-child(3) .node-role { animation-delay: 2.4s !important; }
    .timeline-active .timeline-node:nth-child(4) .node-role { animation-delay: 3.4s !important; }
    .timeline-active .timeline-node:nth-child(5) .node-role { animation-delay: 4.4s !important; }
    .timeline-active .timeline-node:nth-child(6) .node-role { animation-delay: 5.3s !important; }
    
    .timeline-nodes {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    .timeline-node {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        position: relative !important;
        width: 100% !important;
        padding-left: 28px !important;
        text-align: left !important;
        pointer-events: auto !important;
    }
    
    .timeline-node:nth-child(1) .node-label,
    .timeline-node:nth-child(6) .node-label {
        align-items: flex-start !important;
        left: auto !important;
        right: auto !important;
        text-align: left !important;
    }
    
    .timeline-node:nth-child(1) .node-role,
    .timeline-node:nth-child(6) .node-role {
        align-items: flex-start !important;
    }
    
    .node-dot {
        position: absolute !important;
        left: 4.5px !important;
        top: 6px !important;
        transform: none !important;
        z-index: 5 !important;
    }
    
    .node-year {
        position: static !important;
        font-family: var(--font-body) !important;
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        color: #ffffff;
        margin-bottom: 0.2rem !important;
        display: block !important;
        transform: none !important;
    }
    
    .node-label {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        white-space: normal !important;
        width: 100% !important;
    }
    
    .node-company {
        font-size: 1.05rem !important;
        margin-bottom: 0.25rem !important;
        color: #ffffff;
        opacity: 1;
    }
    
    .node-role {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
        margin-top: 0.25rem !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        position: static !important;
    }
    
    .role-title {
        font-size: 0.8rem !important;
        color: var(--text-secondary);
        white-space: normal !important;
        text-align: left !important;
    }
    
    .role-duration {
        font-size: 0.7rem !important;
        color: var(--color-purple);
        background: rgba(192, 132, 252, 0.08);
        border: 1px solid rgba(192, 132, 252, 0.15);
        padding: 0.15rem 0.5rem !important;
        border-radius: 20px !important;
        margin-top: 0.15rem !important;
        display: inline-block !important;
    }

    .timeline-title {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        letter-spacing: 2px !important;
        color: #ffffff !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.15) !important;
        margin-bottom: 1.25rem !important;
        text-align: left !important;
    }

    .portfolio-section {
        padding: 4rem 1.5rem 3rem 1.5rem !important;
    }
}

/* Mobile Screens (Below 480px) */
@media (max-width: 479px) {
    .header-container {
        padding: 0.65rem 0.85rem !important;
    }
    
    .hero-wrapper {
        padding: 6.5rem 1rem 1rem 1rem;
    }
    
    .hero-title {
        font-size: 1.85rem !important; /* Made 20% larger on mobile to match visual hierarchy */
        letter-spacing: -0.5px !important;
        text-shadow: none !important;
        filter: drop-shadow(0 2px 6px rgba(5, 4, 9, 0.98)) 
                drop-shadow(0 0 10px rgba(168, 85, 247, 0.35)) !important;
    }
    
    .hero-description {
        font-size: 0.92rem;
        line-height: 1.6;
    }
    
    .cta-actions {
        flex-direction: row !important;
        width: 100% !important;
        max-width: 280px !important;
        align-items: center !important; /* Vertically center buttons to support optical height compensation */
        gap: 0.5rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .cta-actions .btn {
        width: 0 !important; /* Force browser to distribute space according to flex factor on extra small screens */
    }
    
    .notifications-container {
        width: 115px !important;
        bottom: 22% !important;
        left: 14% !important;
        right: auto !important;
    }
    
    .character-container {
        max-width: 320px;
    }
    
    .visual-stage-glow {
        width: 290px !important;
        height: 290px !important;
    }
    
    .shape-cat-translator-container {
        top: 2%;
        left: 4%;
    }
    
    .shape-cyber-container {
        top: 8%;
        right: 4%;
    }
    
    .shape-tank-container {
        top: 24%;
        left: 2%;
    }

    .shape-vampire-container {
        top: 30%;
        right: 2%;
    }
    
    .game-icon-image {
        width: 52px !important;
        height: 52px !important;
        border-radius: 10px !important;
    }
    
    /* About Me Bento Mobile adjustments */
    .about-section {
        padding: 3.5rem 1rem 1.5rem 1rem !important;
    }
    
    .portfolio-section {
        padding: 3rem 1rem 2.5rem 1rem !important;
    }
    
    .about-bento-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .bento-bio,
    .bento-metric,
    .metric-reach {
        grid-column: span 1;
    }
    
    .bento-card-inner {
        padding: 1.75rem;
    }
    

    
    .bio-title {
        font-size: 2rem;
    }
    
    .bio-timeline {
        padding-top: 1rem;
    }
    
    
    .bento-creatives {
        grid-column: span 1;
    }
    
    .creatives-inner {
        padding: 1.75rem;
    }
    
    .creatives-title {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }
    
    .creatives-vertical-list {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }
    
    .bio-badge {
        font-size: clamp(0.65rem, 3.2vw, 0.95rem) !important;
        margin-bottom: 1.25rem !important;
        white-space: nowrap !important;
        display: block !important;
        align-self: flex-start !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: -0.02em !important;
    }
}

/* ==========================================================================
   Interactive Floating Guide Character (Pop-up Assistant)
   ========================================================================== */

.helper-character-box {
    position: fixed;
    bottom: 30px;
    right: -320px; /* Initially hidden off-screen */
    z-index: 999;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: right 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.8s ease-in-out;
}

.helper-character-box.active {
    right: 30px;
    opacity: 1;
    pointer-events: auto;
}

.helper-character-box.dismissed {
    display: none !important;
}

/* Avatar Box Bobbing Animation */
.helper-avatar-box {
    position: relative;
    width: 64px;
    height: 64px;
    background: rgba(14, 10, 24, 0.65);
    border: 1.5px solid rgba(192, 132, 252, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-premium), 0 0 15px rgba(168, 85, 247, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: helper-bob 4s infinite ease-in-out;
    cursor: pointer;
    transition: border-color 0.3s, filter 0.3s;
}

.helper-avatar-box:hover {
    border-color: rgba(192, 132, 252, 0.6);
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.35));
}

.helper-svg {
    transform: scale(0.9) translateY(4px);
    transition: transform var(--transition-spring);
}

.helper-avatar-box:hover .helper-svg {
    transform: scale(1.02) translateY(2px) rotate(4deg);
}

@keyframes helper-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Speech Bubble (Speech Balloon styling) */
.helper-speech-bubble {
    position: absolute;
    bottom: 85px;
    right: 0;
    width: 280px;
    background: rgba(10, 8, 18, 0.85);
    border: 1px solid rgba(192, 132, 252, 0.2);
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
    color: var(--text-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(168, 85, 247, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Fade-in & Scale-up Animation when Character becomes Active */
    opacity: 0;
    transform: scale(0.85) translateY(10px);
    transform-origin: bottom right;
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.6s; /* Pop up slightly after the character slides in */
    pointer-events: none;
}

.helper-character-box.active .helper-speech-bubble {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.helper-speech-bubble span {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    display: block;
}

/* Speech Bubble Arrow */
.helper-bubble-arrow {
    position: absolute;
    bottom: -8px;
    right: 24px;
    width: 16px;
    height: 16px;
    background: rgba(10, 8, 18, 0.85);
    border-right: 1px solid rgba(192, 132, 252, 0.2);
    border-bottom: 1px solid rgba(192, 132, 252, 0.2);
    transform: rotate(45deg);
}

/* Dismiss Close Button */
.helper-close-btn {
    position: absolute;
    top: -6px;
    left: -6px; /* Place on top-left of the avatar circle */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(15, 11, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s var(--transition-normal);
    opacity: 0; /* Only visible when active */
    transform: scale(0.7);
    z-index: 10;
}

.helper-close-btn .material-symbols-outlined {
    font-size: 13px;
    font-weight: bold;
}

.helper-character-box.active .helper-close-btn {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.9s;
}

.helper-close-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    transform: scale(1.1);
}

/* ==========================================================================
   Portfolio Section & Responsive Asymmetrical Grid Styles (Block 3)
   ========================================================================== */

.portfolio-section {
    position: relative;
    padding: 4rem 2rem 6rem 2rem;
    scroll-margin-top: 80px; /* Offset for header scroll */
    z-index: 5;
    overflow-x: clip;
}

/* Ambient glows behind the portfolio section */
.portfolio-glow-spot {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.65;
    mix-blend-mode: screen;
}

.glow-portfolio-purple-left {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, rgba(147, 51, 234, 0.16) 45%, transparent 70%);
    width: 600px;
    height: 600px;
    top: 150px;
    left: -200px;
}

.glow-portfolio-purple-right {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.09) 0%, transparent 70%);
    width: 600px;
    height: 600px;
    bottom: 5%;
    right: -100px;
}

.glow-portfolio-center {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, transparent 70%);
    width: 800px;
    height: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
    filter: blur(140px);
    mix-blend-mode: screen;
    animation: glow-pulse 8s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9) translateZ(0);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.15) translateZ(0);
        opacity: 0.95;
    }
}

.portfolio-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.portfolio-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 4.5rem;
    width: 100%;
}

.portfolio-title {
    font-family: var(--font-title);
    font-size: clamp(3.2rem, 5.5vw, 5.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    margin-bottom: 0;
    text-align: center;
}

/* Cinematic Single Showreel Card */
.portfolio-showcase-container {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    perspective: 1200px; /* Crucial for 3D tilt effects */
}



/* Dynamic Flying Cyber Particles (Hover burst) */
.showcase-flying-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10; /* Float above the video card for high visibility, fully transparent to hit-testing */
    opacity: 1;
    box-shadow: 0 0 15px currentColor, 0 0 5px #ffffff;
    animation: showcase-float-up var(--duration, 6s) cubic-bezier(0.15, 0.45, 0.3, 1) forwards;
}

@keyframes showcase-float-up {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--dx), var(--dy), 60px) scale(0);
        opacity: 0;
    }
}



.portfolio-showcase-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 5; /* Sit clearly above particles to ensure snappiest browser hit-testing and hover triggers */
}

.portfolio-showcase-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 28px;
    background: rgba(14, 10, 24, 0.85); /* Slightly darker solid overlay since we bypass backdrop-filter blur */
    border: 1.5px solid rgba(192, 132, 252, 0.15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 50px rgba(168, 85, 247, 0.05);
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    transition: transform var(--transition-slow),
                border-color 0.4s,
                box-shadow 0.4s;
}

.portfolio-showcase-link:hover .portfolio-showcase-card {
    border-color: rgba(192, 132, 252, 0.45);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8),
                0 0 60px rgba(168, 85, 247, 0.25);
}

/* Ambient glow inside the card that follows the cursor */
.portfolio-showcase-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--glow-color, rgba(168, 85, 247, 0.35)) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(35px);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transform: translate(-50%, -50%) translateZ(20px);
    transition: opacity 0.5s ease;
}

.portfolio-showcase-link:hover .portfolio-showcase-glow {
    opacity: 1;
}

/* Cyberpunk Laser Scanline */
.portfolio-showcase-scanline {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(168, 85, 247, 0.05) 10%,
        rgba(168, 85, 247, 0.12) 15%,
        rgba(168, 85, 247, 0.05) 20%,
        transparent 100%
    );
    z-index: 3;
    pointer-events: none;
    opacity: 0.6;
    animation: scanline-sweep 6s linear infinite;
}

.portfolio-showcase-link:hover .portfolio-showcase-scanline {
    opacity: 0.95;
    animation-duration: 4s;
}

@keyframes scanline-sweep {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* High-Tech Grid Pattern Overlay */
.portfolio-showcase-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.75;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.portfolio-showcase-link:hover .portfolio-showcase-grid {
    opacity: 0.45;
}

/* Pulsing Centered View Button Box & Concentric Waves */
.portfolio-showcase-play-box {
    position: absolute;
    top: 47%; /* Shifted slightly up from 50% to align with the optical center, compensating for the dark bottom text overlay */
    left: 50%;
    transform: translate(-50%, -50%) translateZ(40px);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.portfolio-showcase-play-ripples {
    position: absolute;
    width: 320px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ripple {
    position: absolute;
    border: 1.5px solid rgba(168, 85, 247, 0.4);
    border-radius: 9999px; /* capsule shape dynamically matching the button */
    opacity: 0;
    animation: play-ripple 3.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.ripple-1 {
    animation-delay: 0s;
}

.ripple-2 {
    animation-delay: 1.1s;
}

.ripple-3 {
    animation-delay: 2.2s;
}

@keyframes play-ripple {
    0% {
        width: 140px;
        height: 56px;
        opacity: 0.9;
        border-color: rgba(168, 85, 247, 0.6);
        box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
    }
    50% {
        opacity: 0.4;
        box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
    }
    100% {
        width: 260px;
        height: 104px;
        opacity: 0;
        border-color: rgba(168, 85, 247, 0);
        box-shadow: 0 0 40px rgba(168, 85, 247, 0);
    }
}

.portfolio-showcase-play-btn {
    padding: 0 28px;
    height: 56px;
    border-radius: 28px;
    background: rgba(10, 6, 18, 0.85);
    border: 2px solid #a855f7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    font-family: 'Outfit', 'Outfit Local', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), inset 0 0 15px rgba(168, 85, 247, 0.3);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-showcase-play-btn span {
    display: inline-block;
    line-height: 1;
}

.portfolio-showcase-play-btn .material-symbols-outlined {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

.portfolio-showcase-link:hover .portfolio-showcase-play-btn {
    background: #a855f7;
    border-color: #c084fc;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.85),
                inset 0 0 20px rgba(255, 255, 255, 0.4);
}

/* Cyberpunk Bottom Text Label */
.portfolio-showcase-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 2.5rem 2.5rem;
    background: linear-gradient(to top, rgba(5, 3, 8, 0.95) 0%, rgba(5, 3, 8, 0.7) 45%, rgba(5, 3, 8, 0) 100%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    transform: translateY(0) translateZ(30px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.label-title {
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    transition: color 0.4s ease;
}

.label-hint {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.85;
    transition: all 0.4s ease;
}

.hint-arrow {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-showcase-link:hover .label-title {
    color: #c084fc;
}

.portfolio-showcase-link:hover .label-hint {
    color: #ffffff;
    opacity: 1;
}

.portfolio-showcase-link:hover .hint-arrow {
    transform: translateX(6px);
}

/* Responsive Scaling for Modern Portfolio */
@media (max-width: 900px) {
    .portfolio-header {
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 768px) {
    .portfolio-section {
        padding: 4rem 1.5rem 3rem 1.5rem;
    }

    .portfolio-showcase-card {
        border-radius: 20px;
    }

    .portfolio-showcase-play-btn {
        padding: 0 20px;
        height: 46px;
        width: auto;
    }

    .portfolio-showcase-play-btn .material-symbols-outlined {
        display: inline-block;
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .portfolio-showcase-play-ripples {
        width: 240px;
        height: 96px;
    }

    .portfolio-showcase-label {
        padding: 2rem 1.5rem 1.5rem;
        background: linear-gradient(to top, rgba(14, 10, 24, 0.98) 0%, rgba(14, 10, 24, 0.7) 50%, rgba(14, 10, 24, 0) 100%) !important;
    }

    .label-hint {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   13. Premium Scaling Support for 2K / 4K & Large Monitors (Proportional Zoom)
   ========================================================================== */
@media (min-width: 1600px) {
    html {
        font-size: 18px; /* Proportionally scales all rem units and typography */
    }
    .portfolio-showcase-container {
        max-width: 1440px;
    }
    .portfolio-container,
    .about-container,
    .character-container,
    .hero-container,
    .header-container {
        max-width: 1440px;
    }
}

@media (min-width: 2000px) {
    html {
        font-size: 20px; /* Enhanced proportional scaling for ultra-wide screens */
    }
    .portfolio-showcase-container {
        max-width: 1600px;
    }
    .portfolio-container,
    .about-container,
    .character-container,
    .hero-container,
    .header-container {
        max-width: 1600px;
    }
}

/* ==========================================================================
   14. Cross-Platform Vector Emojis (Twemoji Style Overrides)
   ========================================================================== */
img.emoji {
    height: 1.35em;
    width: 1.35em;
    margin: 0 0.15em;
    vertical-align: -0.22em;
    display: inline-block;
    will-change: transform;
}

/* ==========================================================================
   15. Diagonal Scrolling Ticker & Abstract Avatar Cards (Portfolio Showcase Background)
   ========================================================================== */
.portfolio-showcase-ticker {
    position: absolute;
    inset: -35% -20%; /* Expand to cover rotated crop bounds completely */
    display: flex;
    flex-wrap: nowrap; /* Prevent columns from wrapping */
    gap: 5.5rem; /* Wider gap for extra width coverage */
    justify-content: center;
    transform: rotate(12deg);
    z-index: 1;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    background: #090610; /* fallback deep dark background */
    transform-style: preserve-3d;
    will-change: transform;
}

/* Vertical Scrolling Columns */
.ticker-column {
    display: flex;
    flex-direction: column;
    width: 18.75rem; /* Wider columns */
    height: fit-content;
    will-change: transform;
    flex-shrink: 0; /* Prevent horizontal shrinking and overlapping */
    transform: translate3d(0, 0, 0); /* Force hardware accelerated layer compositing */
}

.ticker-group {
    display: flex;
    flex-direction: column;
}

/* Abstract Premium Card */
.ticker-card {
    position: relative;
    width: 100%;
    height: 22.5rem; /* Taller cards */
    margin-bottom: 5.5rem; /* Matches gap exactly for seamless loop calculation */
    background: #0f0b1a; /* Solid high-performance background color to completely bypass real-time filtering lag */
    border: 1.5px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

/* Card Preview Background Image */
.ticker-card .card-preview-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15; /* Subtle background preview that keeps text perfectly readable */
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.6s ease;
}

/* Elevate the preview image visibility slightly on hover container */
.portfolio-showcase-link:hover .ticker-card .card-preview-bg {
    opacity: 0.28;
    transform: scale(1.05); /* Soft premium zoom effect */
}

/* Glowing Neon Card Outlines/Accents */
.ticker-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 50%, rgba(255, 255, 255, 0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Card Avatar Container */
.ticker-card .avatar-circle {
    position: relative;
    width: 6.25rem; /* Larger avatar circle */
    height: 6.25rem;
    border-radius: 50%;
    background: rgba(10, 8, 16, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin-bottom: 2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.ticker-card .avatar-circle .material-symbols-outlined {
    display: inline-block;
    width: 2.8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    font-size: 2.8rem;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    transition: transform 0.4s ease;
}

/* Card Text Styling */
.ticker-card .card-brand {
    font-family: 'Outfit', 'Outfit Local', sans-serif;
    font-size: 1.1rem; /* Larger brand font */
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    z-index: 2;
}

.ticker-card .card-tag {
    font-family: 'Inter', 'Inter Local', sans-serif;
    font-size: 0.75rem; /* Larger tag font */
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 5px;
    z-index: 2;
}

/* Neon Backdrops & Glows */
.ticker-card.theme-purple {
    border-color: rgba(168, 85, 247, 0.15);
}
.ticker-card.theme-purple .avatar-circle .material-symbols-outlined {
    color: #c084fc;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}
.ticker-card.theme-purple .card-tag {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.25);
}
.ticker-card.theme-purple::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.25rem;
    height: 6.25rem;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.ticker-card.theme-cyan {
    border-color: rgba(34, 211, 238, 0.15);
}
.ticker-card.theme-cyan .avatar-circle .material-symbols-outlined {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.5);
}
.ticker-card.theme-cyan .card-tag {
    background: rgba(34, 211, 238, 0.15);
    color: #22d3ee;
    border: 1px solid rgba(34, 211, 238, 0.25);
}
.ticker-card.theme-cyan::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.25rem;
    height: 6.25rem;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.ticker-card.theme-lime {
    border-color: rgba(163, 230, 53, 0.15);
}
.ticker-card.theme-lime .avatar-circle .material-symbols-outlined {
    color: #a3e635;
    text-shadow: 0 0 15px rgba(163, 230, 53, 0.5);
}
.ticker-card.theme-lime .card-tag {
    background: rgba(163, 230, 53, 0.15);
    color: #a3e635;
    border: 1px solid rgba(163, 230, 53, 0.25);
}
.ticker-card.theme-lime::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.25rem;
    height: 6.25rem;
    background: radial-gradient(circle, rgba(163, 230, 53, 0.25) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.ticker-card.theme-fuchsia {
    border-color: rgba(240, 171, 252, 0.15);
}
.ticker-card.theme-fuchsia .avatar-circle .material-symbols-outlined {
    color: #f0abfc;
    text-shadow: 0 0 15px rgba(240, 171, 252, 0.5);
}
.ticker-card.theme-fuchsia .card-tag {
    background: rgba(240, 171, 252, 0.15);
    color: #f0abfc;
    border: 1px solid rgba(240, 171, 252, 0.25);
}
.ticker-card.theme-fuchsia::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.25rem;
    height: 6.25rem;
    background: radial-gradient(circle, rgba(240, 171, 252, 0.25) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.ticker-card.theme-red {
    border-color: rgba(239, 68, 68, 0.15);
}
.ticker-card.theme-red .avatar-circle .material-symbols-outlined {
    color: #f87171;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}
.ticker-card.theme-red .card-tag {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.ticker-card.theme-red::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.25rem;
    height: 6.25rem;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.ticker-card.theme-mixed-cyan-red {
    border-color: rgba(34, 211, 238, 0.15);
}
.ticker-card.theme-mixed-cyan-red::before {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.45), rgba(239, 68, 68, 0.45));
}
.ticker-card.theme-mixed-cyan-red::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10rem;
    height: 10rem;
    background: radial-gradient(circle at 30% 50%, rgba(34, 211, 238, 0.22) 0%, rgba(34, 211, 238, 0) 65%),
                radial-gradient(circle at 70% 50%, rgba(239, 68, 68, 0.22) 0%, rgba(239, 68, 68, 0) 65%);
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(12px);
}
.ticker-card.theme-mixed-cyan-red .avatar-circle {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(10, 8, 16, 0.9);
    padding: 0 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
                -12px 0 25px rgba(34, 211, 238, 0.25),
                12px 0 25px rgba(239, 68, 68, 0.25);
}
.ticker-card.theme-mixed-cyan-red .avatar-circle .material-symbols-outlined {
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    line-height: 2.1rem;
    font-size: 2.1rem;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ticker-card.theme-mixed-cyan-red .avatar-circle .material-symbols-outlined.icon-2d {
    color: #22d3ee;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}
.ticker-card.theme-mixed-cyan-red .avatar-circle .material-symbols-outlined.icon-gameplay {
    color: #f87171;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}
.portfolio-showcase-link:hover .ticker-card.theme-mixed-cyan-red .avatar-circle .material-symbols-outlined.icon-2d {
    transform: rotate(-10deg) scale(1.12);
}
.portfolio-showcase-link:hover .ticker-card.theme-mixed-cyan-red .avatar-circle .material-symbols-outlined.icon-gameplay {
    transform: rotate(10deg) scale(1.12);
}
.ticker-card.theme-mixed-cyan-red .card-tag {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.12) 0%, rgba(239, 68, 68, 0.12) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ticker-card.theme-mixed-cyan-red .card-tag .part-cyan {
    color: #22d3ee;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}
.ticker-card.theme-mixed-cyan-red .card-tag .part-plus {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 1px;
}
.ticker-card.theme-mixed-cyan-red .card-tag .part-red {
    color: #f87171;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.ticker-card.theme-orange {
    border-color: rgba(249, 115, 22, 0.15);
}
.ticker-card.theme-orange .avatar-circle .material-symbols-outlined {
    color: #fdba74;
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
}
.ticker-card.theme-orange .card-tag {
    background: rgba(249, 115, 22, 0.15);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.25);
}
.ticker-card.theme-orange::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.25rem;
    height: 6.25rem;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.25) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

/* Animations */
.column-down {
    animation: scroll-ticker-down 20s linear infinite;
}

.column-up {
    animation: scroll-ticker-up 20s linear infinite;
}

@keyframes scroll-ticker-down {
    0% {
        transform: translate3d(0, -50%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes scroll-ticker-up {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -50%, 0);
    }
}

/* ==========================================================================
   Full-Screen Interactive Portfolio Overlay & Filter Tabs
   ========================================================================== */

/* Prevent scroll on body when portfolio is open */
body.portfolio-open {
    overflow: hidden !important;
}

/* Portfolio Full-Screen Overlay container */
.portfolio-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(8, 5, 15, 0.96);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Enable scrollbar on full viewport edge */
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.3) rgba(255, 255, 255, 0.01);
}

/* Force background particles to stay fixed relative to viewport when scrolling */
.portfolio-overlay .particles-container {
    position: fixed;
}

/* Custom premium scrollbar styling on viewport edge */
.portfolio-overlay::-webkit-scrollbar {
    width: 6px;
}

.portfolio-overlay::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
}

.portfolio-overlay::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 3px;
}

.portfolio-overlay::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 85, 247, 0.6);
}

.portfolio-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Close Button styling with neon glow & spin */
.portfolio-close-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.4s, border-color 0.4s, box-shadow 0.4s, color 0.4s;
    z-index: 100000;
    animation: closeButtonPulse 1.8s infinite ease-in-out;
    opacity: 0;
    pointer-events: none;
}

body.portfolio-open .portfolio-close-btn {
    opacity: 1;
    pointer-events: auto;
}

.portfolio-close-btn .material-symbols-outlined {
    font-size: 1.8rem;
    transition: transform 0.4s ease;
}

.portfolio-close-btn:hover {
    animation: none;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    color: #f87171;
    transform: scale(1.1);
}

.portfolio-close-btn:hover .material-symbols-outlined {
    transform: rotate(90deg);
}

@keyframes closeButtonPulse {
    0%, 100% {
        transform: scale(1);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 0px rgba(255, 255, 255, 0);
        background: rgba(255, 255, 255, 0.03);
    }
    50% {
        transform: scale(1.18); /* Stronger scale pulse */
        border-color: rgba(168, 85, 247, 0.95); /* Vibrant purple border */
        box-shadow: 0 0 25px rgba(168, 85, 247, 0.65); /* Heavy glow shadow */
        background: rgba(168, 85, 247, 0.22); /* Stronger background tint */
    }
}

/* Overlay scroll container */
.portfolio-overlay-container {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 6rem 2rem 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.95);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-overlay.active .portfolio-overlay-container {
    transform: scale(1);
}

/* Header Section */
.portfolio-overlay-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.portfolio-overlay-title {
    font-family: 'Outfit', 'Outfit Local', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.6rem;
}

.portfolio-overlay-tagline {
    font-family: 'Inter', 'Inter Local', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

/* Horizontal Card-Style Filter Bar */
.portfolio-filter-wrapper {
    width: 100%;
    overflow: visible; /* No scrollbars needed, all items fully wrapped and visible */
    padding: 10px 0 25px 0;
    margin-bottom: 3.5rem;
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
}

.portfolio-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Force exactly 4 columns in 2 rows on desktop */
    gap: 1.25rem; /* Clean grid gap */
    padding: 10px 0; /* Align perfectly with grid edges */
    width: 100%;
    max-width: 100%; /* Let it span full container width to utilize side space */
    margin: 0 auto;
}

/* Individual Filter Card Button */
.portfolio-filter-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem; /* Restored comfortable gap */
    padding: 0.85rem 1.75rem; /* Restored spacious padding */
    border-radius: 1.25rem;
    background: rgba(10, 8, 16, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    box-sizing: border-box;
    width: 100%; /* Stretch to fill grid column cell perfectly */
}

.portfolio-filter-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
}

/* Minimalist Counter Badge in the Corner */
.portfolio-filter-btn .filter-count {
    position: absolute;
    top: 0.85rem;
    right: 0.95rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 6px;
    font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Local', sans-serif;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-filter-btn:hover .filter-count {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Active Glowing Counter Badges for Themes */
.portfolio-filter-btn.active.theme-all .filter-count {
    color: #c084fc;
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}
.portfolio-filter-btn.active.theme-cyan .filter-count {
    color: #22d3ee;
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.45);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}
.portfolio-filter-btn.active.theme-purple .filter-count {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.15);
    border-color: rgba(192, 132, 252, 0.45);
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.2);
}
.portfolio-filter-btn.active.theme-lime .filter-count {
    color: #a3e635;
    background: rgba(132, 204, 22, 0.15);
    border-color: rgba(132, 204, 22, 0.45);
    box-shadow: 0 0 10px rgba(132, 204, 22, 0.2);
}
.portfolio-filter-btn.active.theme-fuchsia .filter-count {
    color: #f472b6;
    background: rgba(217, 70, 239, 0.15);
    border-color: rgba(217, 70, 239, 0.45);
    box-shadow: 0 0 10px rgba(217, 70, 239, 0.2);
}
.portfolio-filter-btn.active.theme-orange .filter-count {
    color: #fb923c;
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.2);
}
.portfolio-filter-btn.active.theme-blue .filter-count {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}
.portfolio-filter-btn.active.theme-red .filter-count {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

/* Icon Box inside Filter Button */
.portfolio-filter-btn .filter-icon-box {
    width: 2.5rem; /* Restored size */
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.portfolio-filter-btn .filter-icon-box .material-symbols-outlined {
    font-size: 1.35rem; /* Restored size */
    line-height: 1;
    display: inline-block;
    width: 1.35rem;
    height: 1.35rem;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Text Container inside Filter Button */
.portfolio-filter-btn .filter-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    min-width: 0; /* Allow the flex container to let child text wrap properly */
}

.portfolio-filter-btn .filter-title {
    font-family: 'Outfit', 'Outfit Local', sans-serif;
    font-size: 0.95rem; /* Restored font size */
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.4s ease;
    white-space: normal; /* Force safe word wrapping */
    word-break: break-word;
    line-height: 1.2;
}

.portfolio-filter-btn .filter-desc {
    font-family: 'Inter', 'Inter Local', sans-serif;
    font-size: 0.68rem; /* Restored description size */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.38);
    transition: color 0.4s ease;
    white-space: normal; /* Force safe word wrapping */
    word-break: break-word;
    line-height: 1.3;
}

/* Theme Color Presets when ACTIVE */

/* Все (Neutral Silver/Purple glow) */
.portfolio-filter-btn.theme-all .filter-icon-box {
    color: rgba(255, 255, 255, 0.75); /* Soft white when not active */
}
.portfolio-filter-btn.theme-all.active {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.25);
}
.portfolio-filter-btn.theme-all.active .filter-icon-box {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.4);
    color: #d8b4fe;
}
.portfolio-filter-btn.theme-all.active .filter-title {
    color: #ffffff;
}

/* 2D (Cyan) */
.portfolio-filter-btn.theme-cyan {
    border-color: rgba(34, 211, 238, 0.08);
}
.portfolio-filter-btn.theme-cyan .filter-icon-box {
    color: #22d3ee;
}
.portfolio-filter-btn.theme-cyan.active {
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.25);
}
.portfolio-filter-btn.theme-cyan.active .filter-icon-box {
    background: rgba(34, 211, 238, 0.2);
    border-color: rgba(34, 211, 238, 0.4);
    color: #22d3ee;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}
.portfolio-filter-btn.theme-cyan.active .filter-title {
    color: #ffffff;
}

/* 3D (Purple) */
.portfolio-filter-btn.theme-purple {
    border-color: rgba(168, 85, 247, 0.08);
}
.portfolio-filter-btn.theme-purple .filter-icon-box {
    color: #c084fc;
}
.portfolio-filter-btn.theme-purple.active {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.25);
}
.portfolio-filter-btn.theme-purple.active .filter-icon-box {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.4);
    color: #c084fc;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}
.portfolio-filter-btn.theme-purple.active .filter-title {
    color: #ffffff;
}

/* UGC (Lime) */
.portfolio-filter-btn.theme-lime {
    border-color: rgba(163, 230, 53, 0.08);
}
.portfolio-filter-btn.theme-lime .filter-icon-box {
    color: #a3e635;
}
.portfolio-filter-btn.theme-lime.active {
    background: rgba(163, 230, 53, 0.12);
    border-color: rgba(163, 230, 53, 0.45);
    box-shadow: 0 0 25px rgba(163, 230, 53, 0.25);
}
.portfolio-filter-btn.theme-lime.active .filter-icon-box {
    background: rgba(163, 230, 53, 0.2);
    border-color: rgba(163, 230, 53, 0.4);
    color: #a3e635;
    text-shadow: 0 0 8px rgba(163, 230, 53, 0.6);
}
.portfolio-filter-btn.theme-lime.active .filter-title {
    color: #ffffff;
}

/* AI (Fuchsia) */
.portfolio-filter-btn.theme-fuchsia {
    border-color: rgba(240, 171, 252, 0.08);
}
.portfolio-filter-btn.theme-fuchsia .filter-icon-box {
    color: #f0abfc;
}
.portfolio-filter-btn.theme-fuchsia.active {
    background: rgba(240, 171, 252, 0.12);
    border-color: rgba(240, 171, 252, 0.45);
    box-shadow: 0 0 25px rgba(240, 171, 252, 0.25);
}
.portfolio-filter-btn.theme-fuchsia.active .filter-icon-box {
    background: rgba(240, 171, 252, 0.2);
    border-color: rgba(240, 171, 252, 0.4);
    color: #f0abfc;
    text-shadow: 0 0 8px rgba(240, 171, 252, 0.6);
}
.portfolio-filter-btn.theme-fuchsia.active .filter-title {
    color: #ffffff;
}

/* Трейлеры (Orange) */
.portfolio-filter-btn.theme-orange {
    border-color: rgba(249, 115, 22, 0.08);
}
.portfolio-filter-btn.theme-orange .filter-icon-box {
    color: #fdba74;
}
.portfolio-filter-btn.theme-orange.active {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.25);
}
.portfolio-filter-btn.theme-orange.active .filter-icon-box {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.4);
    color: #fdba74;
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
}
.portfolio-filter-btn.theme-orange.active .filter-title {
    color: #ffffff;
}

/* Баннеры (Blue) */
.portfolio-filter-btn.theme-blue {
    border-color: rgba(59, 130, 246, 0.08);
}
.portfolio-filter-btn.theme-blue .filter-icon-box {
    color: #60a5fa;
}
.portfolio-filter-btn.theme-blue.active {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.25);
}
.portfolio-filter-btn.theme-blue.active .filter-icon-box {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}
.portfolio-filter-btn.theme-blue.active .filter-title {
    color: #ffffff;
}

/* Геймплейные (Red) */
.portfolio-filter-btn.theme-red {
    border-color: rgba(239, 68, 68, 0.08);
}
.portfolio-filter-btn.theme-red .filter-icon-box {
    color: #f87171;
}
.portfolio-filter-btn.theme-red.active {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.25);
}
.portfolio-filter-btn.theme-red.active .filter-icon-box {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.portfolio-filter-btn.theme-red.active .filter-title {
    color: #ffffff;
}

/* Portfolio Items Responsive Grid */
.portfolio-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); /* Narrower columns to force portrait orientation */
    gap: 2.25rem;
    width: 100%;
    margin-bottom: 3rem;
}

/* Portfolio Grid Card (Styled exactly like ticker cards) */
.portfolio-item-card {
    position: relative;
    height: 26.25rem; /* Taller height (420px) to make cards beautifully vertical/portrait */
    border-radius: 1.5rem;
    background: #0f0b1a; /* Exactly matches ticker card background */
    border: 1.5px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.portfolio-item-card:hover {
    transform: translateY(-8px);
}

.portfolio-item-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 50%, rgba(255, 255, 255, 0.03));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.portfolio-item-card .card-preview-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15; /* Subtle background preview */
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.6s ease;
}

.portfolio-item-card:hover .card-preview-bg {
    opacity: 0.28;
    transform: scale(1.05); /* Premium zoom hover effect */
}

/* Centralized Avatar Circle matching ticker styling */
.portfolio-item-card .avatar-circle {
    position: relative;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
    background: rgba(10, 8, 16, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin-bottom: 2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.portfolio-item-card .avatar-circle .material-symbols-outlined {
    display: inline-block;
    width: 2.8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    font-size: 2.8rem;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

/* Centralized brand/title */
.portfolio-item-card .card-brand {
    font-family: 'Outfit', 'Outfit Local', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    z-index: 2;
}

/* Centralized tag button */
.portfolio-item-card .card-tag {
    font-family: 'Inter', 'Inter Local', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 5px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Legacy AI Warning Badge (Top-left corner of the card) */
.portfolio-item-card .legacy-ai-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(249, 115, 22, 0.12); /* Semi-transparent amber/orange */
    border: 1px solid rgba(249, 115, 22, 0.35);
    color: #fb923c; /* Glowing amber text */
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Local', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(249, 115, 22, 0.15);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.portfolio-item-card:hover .legacy-ai-badge {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 15px rgba(249, 115, 22, 0.3);
}

.portfolio-item-card .legacy-ai-badge .material-symbols-outlined {
    font-size: 0.85rem !important;
    color: #fb923c;
}

/* Dynamic glow overlays inside cards based on theme */
.portfolio-item-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.15;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.portfolio-item-card:hover::after {
    opacity: 0.3;
}

/* Card type-specific border outlines (active on both home ticker and portfolio grid) */
.ticker-card.theme-purple,
.portfolio-item-card.theme-purple {
    border-color: rgba(168, 85, 247, 0.25);
}
.ticker-card.theme-purple::before,
.portfolio-item-card.theme-purple::before {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.45), transparent 60%, rgba(168, 85, 247, 0.15)) !important;
}

.ticker-card.theme-cyan,
.portfolio-item-card.theme-cyan {
    border-color: rgba(6, 182, 212, 0.25);
}
.ticker-card.theme-cyan::before,
.portfolio-item-card.theme-cyan::before {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.45), transparent 60%, rgba(6, 182, 212, 0.15)) !important;
}

.ticker-card.theme-lime,
.portfolio-item-card.theme-lime {
    border-color: rgba(163, 230, 53, 0.25);
}
.ticker-card.theme-lime::before,
.portfolio-item-card.theme-lime::before {
    background: linear-gradient(135deg, rgba(163, 230, 53, 0.45), transparent 60%, rgba(163, 230, 53, 0.15)) !important;
}

.ticker-card.theme-fuchsia,
.portfolio-item-card.theme-fuchsia {
    border-color: rgba(244, 114, 182, 0.25);
}
.ticker-card.theme-fuchsia::before,
.portfolio-item-card.theme-fuchsia::before {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.45), transparent 60%, rgba(244, 114, 182, 0.15)) !important;
}

.ticker-card.theme-orange,
.portfolio-item-card.theme-orange {
    border-color: rgba(249, 115, 22, 0.25);
}
.ticker-card.theme-orange::before,
.portfolio-item-card.theme-orange::before {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.45), transparent 60%, rgba(249, 115, 22, 0.15)) !important;
}

.ticker-card.theme-red,
.portfolio-item-card.theme-red {
    border-color: rgba(239, 68, 68, 0.25);
}
.ticker-card.theme-red::before,
.portfolio-item-card.theme-red::before {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.45), transparent 60%, rgba(239, 68, 68, 0.15)) !important;
}

.ticker-card.theme-blue,
.portfolio-item-card.theme-blue {
    border-color: rgba(59, 130, 246, 0.25);
}
.ticker-card.theme-blue::before,
.portfolio-item-card.theme-blue::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.45), transparent 60%, rgba(59, 130, 246, 0.15)) !important;
}

/* Specific theme glows and tag backgrounds */
.portfolio-item-card.theme-cyan .card-tag {
    background: rgba(34, 211, 238, 0.15);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.25);
}
.portfolio-item-card.theme-cyan .avatar-circle .material-symbols-outlined {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.5);
}
.portfolio-item-card.theme-cyan::after { background: #22d3ee; }
.portfolio-item-card.theme-cyan:hover {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 15px 35px rgba(34, 211, 238, 0.15), 0 0 0 1px rgba(34, 211, 238, 0.1);
}

.portfolio-item-card.theme-purple .card-tag {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.25);
}
.portfolio-item-card.theme-purple .avatar-circle .material-symbols-outlined {
    color: #c084fc;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}
.portfolio-item-card.theme-purple::after { background: #c084fc; }
.portfolio-item-card.theme-purple:hover {
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 15px 35px rgba(168, 85, 247, 0.15), 0 0 0 1px rgba(168, 85, 247, 0.1);
}

.portfolio-item-card.theme-lime .card-tag {
    background: rgba(163, 230, 53, 0.15);
    color: #a3e635;
    border-color: rgba(163, 230, 53, 0.25);
}
.portfolio-item-card.theme-lime .avatar-circle .material-symbols-outlined {
    color: #a3e635;
    text-shadow: 0 0 15px rgba(163, 230, 53, 0.5);
}
.portfolio-item-card.theme-lime::after { background: #a3e635; }
.portfolio-item-card.theme-lime:hover {
    border-color: rgba(163, 230, 53, 0.3);
    box-shadow: 0 15px 35px rgba(163, 230, 53, 0.15), 0 0 0 1px rgba(163, 230, 53, 0.1);
}

.portfolio-item-card.theme-fuchsia .card-tag {
    background: rgba(240, 171, 252, 0.15);
    color: #f0abfc;
    border-color: rgba(240, 171, 252, 0.25);
}
.portfolio-item-card.theme-fuchsia .avatar-circle .material-symbols-outlined {
    color: #f0abfc;
    text-shadow: 0 0 15px rgba(240, 171, 252, 0.5);
}
.portfolio-item-card.theme-fuchsia::after { background: #f0abfc; }
.portfolio-item-card.theme-fuchsia:hover {
    border-color: rgba(240, 171, 252, 0.3);
    box-shadow: 0 15px 35px rgba(240, 171, 252, 0.15), 0 0 0 1px rgba(240, 171, 252, 0.1);
}

.portfolio-item-card.theme-orange .card-tag {
    background: rgba(249, 115, 22, 0.15);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.25);
}
.portfolio-item-card.theme-orange .avatar-circle .material-symbols-outlined {
    color: #fdba74;
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
}
.portfolio-item-card.theme-orange::after { background: #f97316; }
.portfolio-item-card.theme-orange:hover {
    border-color: rgba(249, 115, 22, 0.3);
    box-shadow: 0 15px 35px rgba(249, 115, 22, 0.15), 0 0 0 1px rgba(249, 115, 22, 0.1);
}

.portfolio-item-card.theme-blue .card-tag {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.25);
}
.portfolio-item-card.theme-blue .avatar-circle .material-symbols-outlined {
    color: #60a5fa;
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}
.portfolio-item-card.theme-blue::after { background: #3b82f6; }
.portfolio-item-card.theme-blue:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.portfolio-item-card.theme-red .card-tag {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.25);
}
.portfolio-item-card.theme-red .avatar-circle .material-symbols-outlined {
    color: #f87171;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}
.portfolio-item-card.theme-red::after { background: #ef4444; }
.portfolio-item-card.theme-red:hover {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 15px 35px rgba(239, 68, 68, 0.15), 0 0 0 1px rgba(239, 68, 68, 0.1);
}

.portfolio-item-card.theme-mixed-purple-orange {
    border-color: rgba(168, 85, 247, 0.25);
}
.portfolio-item-card.theme-mixed-purple-orange::before {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.45), rgba(249, 115, 22, 0.45));
}
.portfolio-item-card.theme-mixed-purple-orange::after {
    background: linear-gradient(90deg, #a855f7, #f97316);
}
.portfolio-item-card.theme-mixed-purple-orange:hover {
    border-color: rgba(168, 85, 247, 0.35);
    box-shadow: 0 15px 35px rgba(168, 85, 247, 0.15), 0 0 0 1px rgba(168, 85, 247, 0.1);
}
.portfolio-item-card.theme-mixed-purple-orange .avatar-circle {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(10, 8, 16, 0.9);
    padding: 0 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
                -12px 0 25px rgba(168, 85, 247, 0.25),
                12px 0 25px rgba(249, 115, 22, 0.25);
}
.portfolio-item-card.theme-mixed-purple-orange .avatar-circle .material-symbols-outlined {
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    line-height: 2.1rem;
    font-size: 2.1rem;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.portfolio-item-card.theme-mixed-purple-orange .avatar-circle .material-symbols-outlined.icon-3d {
    color: #c084fc;
    text-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
}
.portfolio-item-card.theme-mixed-purple-orange .avatar-circle .material-symbols-outlined.icon-trailer {
    color: #fdba74;
    text-shadow: 0 0 12px rgba(249, 115, 22, 0.6);
}
.portfolio-item-card.theme-mixed-purple-orange:hover .avatar-circle .material-symbols-outlined.icon-3d {
    transform: rotate(-10deg) scale(1.12);
}
.portfolio-item-card.theme-mixed-purple-orange:hover .avatar-circle .material-symbols-outlined.icon-trailer {
    transform: rotate(10deg) scale(1.12);
}
.portfolio-item-card.theme-mixed-purple-orange .card-tag {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.portfolio-item-card.theme-mixed-purple-orange .card-tag .part-purple {
    color: #c084fc;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}
.portfolio-item-card.theme-mixed-purple-orange .card-tag .part-plus {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 1px;
}
.portfolio-item-card.theme-mixed-purple-orange .card-tag .part-orange {
    color: #fdba74;
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}

.portfolio-item-card.theme-mixed-cyan-red {
    border-color: rgba(6, 182, 212, 0.25);
}
.portfolio-item-card.theme-mixed-cyan-red::before {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.45), rgba(239, 68, 68, 0.45));
}
.portfolio-item-card.theme-mixed-cyan-red::after {
    background: linear-gradient(90deg, #06b6d4, #ef4444);
}
.portfolio-item-card.theme-mixed-cyan-red:hover {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 15px 35px rgba(6, 182, 212, 0.15), 0 0 0 1px rgba(6, 182, 212, 0.1);
}
.portfolio-item-card.theme-mixed-cyan-red .avatar-circle {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(10, 8, 16, 0.9);
    padding: 0 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
                -12px 0 25px rgba(6, 182, 212, 0.25),
                12px 0 25px rgba(239, 68, 68, 0.25);
}
.portfolio-item-card.theme-mixed-cyan-red .avatar-circle .material-symbols-outlined {
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    line-height: 2.1rem;
    font-size: 2.1rem;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.portfolio-item-card.theme-mixed-cyan-red .avatar-circle .material-symbols-outlined.icon-2d {
    color: #22d3ee;
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}
.portfolio-item-card.theme-mixed-cyan-red .avatar-circle .material-symbols-outlined.icon-gameplay {
    color: #f87171;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}
.portfolio-item-card.theme-mixed-cyan-red:hover .avatar-circle .material-symbols-outlined.icon-2d {
    transform: rotate(-10deg) scale(1.12);
}
.portfolio-item-card.theme-mixed-cyan-red:hover .avatar-circle .material-symbols-outlined.icon-gameplay {
    transform: rotate(10deg) scale(1.12);
}
.portfolio-item-card.theme-mixed-cyan-red .card-tag {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.15) 0%, rgba(239, 68, 68, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.portfolio-item-card.theme-mixed-cyan-red .card-tag .part-cyan {
    color: #22d3ee;
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}
.portfolio-item-card.theme-mixed-cyan-red .card-tag .part-plus {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 1px;
}
.portfolio-item-card.theme-mixed-cyan-red .card-tag .part-red {
    color: #f87171;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* Mixed Theme: 2D + UGC (Cyan to Lime Gradient System) */
.portfolio-item-card.theme-mixed-cyan-lime {
    border-color: rgba(6, 182, 212, 0.25);
}
.portfolio-item-card.theme-mixed-cyan-lime::before {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.45), rgba(163, 230, 53, 0.45));
}
.portfolio-item-card.theme-mixed-cyan-lime::after {
    background: linear-gradient(90deg, #06b6d4, #a3e635);
}
.portfolio-item-card.theme-mixed-cyan-lime:hover {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 15px 35px rgba(6, 182, 212, 0.15), 0 0 0 1px rgba(6, 182, 212, 0.1);
}
.portfolio-item-card.theme-mixed-cyan-lime .avatar-circle {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(10, 8, 16, 0.9);
    padding: 0 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
                -12px 0 25px rgba(6, 182, 212, 0.25),
                12px 0 25px rgba(163, 230, 53, 0.25);
}
.portfolio-item-card.theme-mixed-cyan-lime .avatar-circle .material-symbols-outlined {
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    line-height: 2.1rem;
    font-size: 2.1rem;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.portfolio-item-card.theme-mixed-cyan-lime .avatar-circle .material-symbols-outlined.icon-2d {
    color: #22d3ee;
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}
.portfolio-item-card.theme-mixed-cyan-lime .avatar-circle .material-symbols-outlined.icon-ugc {
    color: #a3e635;
    text-shadow: 0 0 12px rgba(163, 230, 53, 0.6);
}
.portfolio-item-card.theme-mixed-cyan-lime:hover .avatar-circle .material-symbols-outlined.icon-2d {
    transform: rotate(-10deg) scale(1.12);
}
.portfolio-item-card.theme-mixed-cyan-lime:hover .avatar-circle .material-symbols-outlined.icon-ugc {
    transform: rotate(10deg) scale(1.12);
}
.portfolio-item-card.theme-mixed-cyan-lime .card-tag {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.15) 0%, rgba(163, 230, 53, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.portfolio-item-card.theme-mixed-cyan-lime .card-tag .part-cyan {
    color: #22d3ee;
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}
.portfolio-item-card.theme-mixed-cyan-lime .card-tag .part-plus {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 1px;
}
.portfolio-item-card.theme-mixed-cyan-lime .card-tag .part-lime {
    color: #a3e635;
    text-shadow: 0 0 8px rgba(163, 230, 53, 0.4);
}

/* Mixed Theme: 2D + AI (Cyan to Fuchsia Gradient System) */
.portfolio-item-card.theme-mixed-cyan-fuchsia {
    border-color: rgba(6, 182, 212, 0.25);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia::before {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.45), rgba(240, 171, 252, 0.45));
}
.portfolio-item-card.theme-mixed-cyan-fuchsia::after {
    background: linear-gradient(90deg, #06b6d4, #f0abfc);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia:hover {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 15px 35px rgba(6, 182, 212, 0.15), 0 0 0 1px rgba(6, 182, 212, 0.1);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia .avatar-circle {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(10, 8, 16, 0.9);
    padding: 0 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
                -12px 0 25px rgba(6, 182, 212, 0.25),
                12px 0 25px rgba(240, 171, 252, 0.25);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia .avatar-circle .material-symbols-outlined {
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    line-height: 2.1rem;
    font-size: 2.1rem;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia .avatar-circle .material-symbols-outlined.icon-2d {
    color: #22d3ee;
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia .avatar-circle .material-symbols-outlined.icon-ai {
    color: #f0abfc;
    text-shadow: 0 0 12px rgba(240, 171, 252, 0.6);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia:hover .avatar-circle .material-symbols-outlined.icon-2d {
    transform: rotate(-10deg) scale(1.12);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia:hover .avatar-circle .material-symbols-outlined.icon-ai {
    transform: rotate(10deg) scale(1.12);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia .card-tag {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.15) 0%, rgba(240, 171, 252, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.portfolio-item-card.theme-mixed-cyan-fuchsia .card-tag .part-cyan {
    color: #22d3ee;
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}
.portfolio-item-card.theme-mixed-cyan-fuchsia .card-tag .part-plus {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 1px;
}
.portfolio-item-card.theme-mixed-cyan-fuchsia .card-tag .part-fuchsia {
    color: #f0abfc;
    text-shadow: 0 0 8px rgba(240, 171, 252, 0.4);
}

/* Centered Glowing Play Icon Overlay */
.portfolio-item-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(10, 8, 16, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 3;
}

.portfolio-item-play-icon .material-symbols-outlined {
    font-size: 1.5rem;
    font-variation-settings: 'FILL' 1;
    transition: transform 0.4s ease;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

.portfolio-item-card:hover .portfolio-item-play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.6);
    border-color: #a855f7;
}

.portfolio-item-card:hover .portfolio-item-play-icon .material-symbols-outlined {
    color: #c084fc;
}

/* Staggered Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dynamic Video Lightbox Overlay */
.video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: rgba(3, 2, 7, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.video-lightbox .lightbox-content {
    position: relative;
    width: 92%;
    max-width: 1080px;
    aspect-ratio: 16/9;
    background: #000000;
    border-radius: 1.5rem;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(168, 85, 247, 0.15);
    transform: scale(0.95);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-lightbox.active .lightbox-content {
    transform: scale(1);
}

.video-lightbox video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Close Button on Lightbox */
.lightbox-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(10, 8, 16, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.lightbox-close-btn .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .portfolio-overlay-container {
        padding: 5rem 0.75rem 3rem 0.75rem; /* Symmetrical narrow margins for extra horizontal workspace */
    }
    .portfolio-filter-wrapper {
        padding: 0; /* Align perfectly with edges */
    }
    .portfolio-filter-bar {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 balanced columns × 4 rows */
        gap: 0.5rem; /* Tight compact gaps */
        padding: 5px 0;
    }
    .portfolio-filter-btn {
        width: 100%;
        padding: 0.5rem 0.65rem; /* Compact padding */
        gap: 0.5rem;
        border-radius: 0.85rem;
    }
    .portfolio-filter-btn .filter-icon-box {
        width: 2.0rem;
        height: 2.0rem;
        border-radius: 0.5rem;
    }
    .portfolio-filter-btn .filter-icon-box .material-symbols-outlined {
        font-size: 1.05rem;
        width: 1.05rem;
        height: 1.05rem;
    }
    .portfolio-filter-btn .filter-title {
        font-size: 0.72rem; /* Clean compact size to easily fit double line wrap */
        line-height: 1.15;
        white-space: normal; /* Force safe word wrapping */
        word-break: break-word;
    }
    .portfolio-filter-btn .filter-desc {
        display: none; /* Hide descriptions on mobile */
    }
    .portfolio-filter-group-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.55rem !important;
        padding: 12px 16px !important;
        margin-bottom: 0.6rem !important;
        background: rgba(168, 85, 247, 0.03) !important;
        border: 1px solid rgba(168, 85, 247, 0.15) !important;
        border-radius: 1rem !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 0 12px rgba(168, 85, 247, 0.04) !important;
    }
    .portfolio-filter-group-header .group-text {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        white-space: normal !important;
    }
    .portfolio-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); /* Narrower columns on mobile/tablet */
        gap: 1.5rem;
    }
    .portfolio-item-card {
        height: 23.5rem; /* Proportionate height to preserve vertical shape */
    }
    .portfolio-close-btn {
        top: 1.25rem;
        right: 1.25rem;
        width: 3rem;
        height: 3rem;
    }
}

/* ==========================================================================
   Portfolio Filter Grouping Header & Bento Grid Positioning
   ========================================================================== */
.portfolio-filter-group-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    box-sizing: border-box;
    background: rgba(10, 8, 16, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.04);
    border-radius: 1.25rem;
    margin-bottom: 0.25rem;
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
}

.portfolio-filter-group-header .group-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.45);
    color: #c084fc;
    padding: 4px 10px;
    border-radius: 8px;
    font-family: 'Outfit', 'Outfit Local', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
    flex-shrink: 0;
}

.portfolio-filter-group-header .group-badge .material-symbols-outlined {
    font-size: 0.95rem !important;
    color: #c084fc;
}

.portfolio-filter-group-header .group-text {
    font-family: 'Inter', 'Inter Local', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01em;
    line-height: 1.4;
}



@media (min-width: 1025px) {
    .portfolio-filter-group-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 0.85rem 1.25rem !important;
        box-sizing: border-box !important;
        grid-column: 2 / 5 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin-bottom: 0 !important;
    }

    /* Vertical Glowing Connecting Lines */
    .portfolio-filter-btn[data-category="2d"]::before,
    .portfolio-filter-btn[data-category="ai"]::before,
    .portfolio-filter-btn[data-category="ugc"]::before {
        content: '' !important;
        position: absolute !important;
        bottom: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 2px !important;
        height: 1.35rem !important;
        pointer-events: none !important;
        z-index: 10 !important;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* 2D (Cyan) */
    .portfolio-filter-btn[data-category="2d"]::before {
        background: linear-gradient(to top, rgba(34, 211, 238, 0.65), rgba(34, 211, 238, 0.1)) !important;
        box-shadow: 0 0 8px rgba(34, 211, 238, 0.3) !important;
    }
    .portfolio-filter-btn[data-category="2d"].active::before,
    .portfolio-filter-btn[data-category="2d"]:hover::before {
        background: linear-gradient(to top, rgba(34, 211, 238, 1), rgba(34, 211, 238, 0.3)) !important;
        box-shadow: 0 0 12px rgba(34, 211, 238, 0.7) !important;
        width: 3px !important;
    }

    /* AI (Fuchsia) */
    .portfolio-filter-btn[data-category="ai"]::before {
        background: linear-gradient(to top, rgba(244, 114, 182, 0.65), rgba(244, 114, 182, 0.1)) !important;
        box-shadow: 0 0 8px rgba(244, 114, 182, 0.3) !important;
    }
    .portfolio-filter-btn[data-category="ai"].active::before,
    .portfolio-filter-btn[data-category="ai"]:hover::before {
        background: linear-gradient(to top, rgba(244, 114, 182, 1), rgba(244, 114, 182, 0.3)) !important;
        box-shadow: 0 0 12px rgba(244, 114, 182, 0.7) !important;
        width: 3px !important;
    }

    /* UGC (Lime) */
    .portfolio-filter-btn[data-category="ugc"]::before {
        background: linear-gradient(to top, rgba(163, 230, 53, 0.65), rgba(163, 230, 53, 0.1)) !important;
        box-shadow: 0 0 8px rgba(163, 230, 53, 0.3) !important;
    }
    .portfolio-filter-btn[data-category="ugc"].active::before,
    .portfolio-filter-btn[data-category="ugc"]:hover::before {
        background: linear-gradient(to top, rgba(163, 230, 53, 1), rgba(163, 230, 53, 0.3)) !important;
        box-shadow: 0 0 12px rgba(163, 230, 53, 0.7) !important;
        width: 3px !important;
    }

    .portfolio-filter-bar {
        grid-template-rows: auto auto auto !important; /* Force 3 rows for desktop grid layout */
    }
    
    .portfolio-filter-btn[data-category="all"] {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1.5rem 1rem !important;
        gap: 0.6rem !important;
    }
    
    .portfolio-filter-btn[data-category="all"] .filter-icon-box {
        margin-bottom: 0 !important;
    }
    
    .portfolio-filter-btn[data-category="all"] .filter-text {
        align-items: center !important;
        text-align: center !important;
    }
    
    .portfolio-filter-btn[data-category="2d"] {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    
    .portfolio-filter-btn[data-category="ai"] {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }
    
    .portfolio-filter-btn[data-category="ugc"] {
        grid-column: 4 !important;
        grid-row: 2 !important;
    }
    
    .portfolio-filter-btn[data-category="3d"] {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
    
    .portfolio-filter-btn[data-category="trailers"] {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }
    
    .portfolio-filter-btn[data-category="banners"] {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }
    
    .portfolio-filter-btn[data-category="gameplay"] {
        grid-column: 4 !important;
        grid-row: 3 !important;
    }
}

/* Portfolio Empty State Placeholder */
.portfolio-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem;
    background: rgba(15, 11, 26, 0.6);
    border: 1.5px solid rgba(168, 85, 247, 0.15);
    border-radius: 2rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(168, 85, 247, 0.05);
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    margin: 2rem 0;
}

.portfolio-empty-state .empty-icon-box {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #a855f7;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.15);
    animation: pulseGlow 3s infinite ease-in-out;
}

.portfolio-empty-state .empty-icon-box span {
    font-size: 2.5rem !important;
}

.portfolio-empty-state .empty-text-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.75rem;
    letter-spacing: 0.5px;
}

.portfolio-empty-state .empty-text-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 32rem;
    line-height: 1.6;
}

@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 25px rgba(168, 85, 247, 0.15);
        border-color: rgba(168, 85, 247, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
        border-color: rgba(168, 85, 247, 0.6);
    }
}

/* Blue Theme for Portfolio Empty State (e.g. Banners) */
.portfolio-empty-state.theme-blue {
    border-color: rgba(59, 130, 246, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(59, 130, 246, 0.05) !important;
}

.portfolio-empty-state.theme-blue .empty-icon-box {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6) !important;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.15) !important;
    animation: pulseGlowBlue 3s infinite ease-in-out !important;
}

@keyframes pulseGlowBlue {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 25px rgba(59, 130, 246, 0.15);
        border-color: rgba(59, 130, 246, 0.3);
    }
    50% {
}
}

/* ==========================================================================
   Prices Section & Interactive Calculator Styling (Block 4)
   ========================================================================== */

/*
⚠️ ВНИМАНИЕ: Стили четвертого блока (раздел "Цены и калькулятор", калькулятор стоимости и сроков, карточки, частицы и свечения) полностью утверждены!
❌ Модификация стилей четвертого блока БЕЗ предварительного явного согласия пользователя строго ЗАПРЕЩЕНА.
При необходимости редактирования стилей четвертого блока, обязательно задайте вопрос на русском языке: "РЕДАКТИРОВАТЬ ЧЕТВЕРТЫЙ БЛОК?"
*/

.prices-section {
    position: relative;
    padding: 6rem 0;
    width: 100%;
    z-index: 2;
    overflow-x: clip;
}

.prices-glow-spot {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

.glow-prices-purple {
    top: 10%;
    right: -100px;
    background: #a855f7;
}

.glow-prices-cyan {
    bottom: 10%;
    left: -100px;
    background: #6b21a8;
}

.prices-container {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 2.5rem;
    position: relative;
    z-index: 2;
}

.prices-header {
    text-align: center;
    margin-bottom: 3rem;
}

.prices-title {
    font-family: var(--font-title);
    font-size: clamp(2.5rem, 4vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.prices-subtitle {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.calc-wrapper {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2.25rem;
    align-items: stretch;
}

.calc-services-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Calculator Items (Row Cards) */
.calc-item {
    background: rgba(20, 15, 33, 0.52);
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.25rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    position: relative;
    overflow: visible;
    cursor: pointer;
}

.calc-item:hover {
    transform: translateY(-2px) scale(1.015);
    background: rgba(28, 22, 45, 0.62);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.calc-item.active:hover {
    transform: translateY(-2px) scale(1.015);
    background: rgba(32, 25, 52, 0.75);
    box-shadow: 0 12px 35px rgba(168, 85, 247, 0.1);
}

/* Recommended Tag Floating on Top Border */
.calc-item-recommended-tag {
    position: absolute;
    top: 0;
    right: 1.5rem;
    left: auto;
    transform: translateY(-50%);
    font-family: var(--font-title);
    font-size: 0.65rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #a855f7 0%, #f472b6 100%);
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
    z-index: 10;
    transition: transform 0.3s ease;
}

.calc-item:hover .calc-item-recommended-tag {
    transform: translateY(-50%) scale(1.05);
}

/* Floating Card Particles inside Recommended/Active Cards */
.calc-card-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    border-radius: 18px;
    display: none; /* hidden by default */
}

/* Show particles only when selected (active) */
.calc-item.active .calc-card-particles {
    display: block;
}

.card-particle {
    position: absolute;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    opacity: 0;
    animation: floatCardParticle 6s infinite ease-in-out;
}

.card-particle.p1 {
    top: 25%;
    left: 15%;
    animation-delay: 0s;
}
.card-particle.p2 {
    top: 70%;
    left: 50%;
    animation-delay: 2s;
}
.card-particle.p3 {
    top: 40%;
    left: 80%;
    animation-delay: 4s;
}

/* Individual particle colors by card category */
.item-2d-ai-ugc .card-particle.p1 { background: #22d3ee; }
.item-2d-ai-ugc .card-particle.p2 { background: #a3e635; }
.item-2d-ai-ugc .card-particle.p3 { background: #f472b6; }

.item-gameplay .card-particle.p1 { background: #f87171; }
.item-gameplay .card-particle.p2 { background: #ef4444; }
.item-gameplay .card-particle.p3 { background: #fca5a5; }

.item-banners .card-particle.p1 { background: #60a5fa; }
.item-banners .card-particle.p2 { background: #3b82f6; }
.item-banners .card-particle.p3 { background: #93c5fd; }

.item-3d .card-particle.p1 { background: #c084fc; }
.item-3d .card-particle.p2 { background: #a855f7; }
.item-3d .card-particle.p3 { background: #d8b4fe; }

.item-trailers .card-particle.p1 { background: #fdba74; }
.item-trailers .card-particle.p2 { background: #f97316; }
.item-trailers .card-particle.p3 { background: #ffedd5; }

@keyframes floatCardParticle {
    0% {
        transform: translateY(10px) scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 0.65;
        transform: translateY(-8px) scale(1.2);
    }
    100% {
        transform: translateY(-25px) scale(0.5);
        opacity: 0;
    }
}

.calc-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.03) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.calc-item.active {
    background: rgba(28, 22, 45, 0.65);
    border-color: rgba(168, 85, 247, 0.28);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(168, 85, 247, 0.06);
}

.calc-item.active::before {
    opacity: 1;
}

/* Specific Border / Shadow Accents on hover/active based on category styling */
.calc-item.active.item-2d-ai-ugc {
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.2), inset 0 0 15px rgba(168, 85, 247, 0.08);
}

.calc-item.active.item-3d {
    border-color: rgba(147, 51, 234, 0.45);
    box-shadow: 0 0 25px rgba(147, 51, 234, 0.2), inset 0 0 15px rgba(147, 51, 234, 0.08);
}

.calc-item.active.item-trailers {
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.2), inset 0 0 15px rgba(249, 115, 22, 0.08);
}

.calc-item.active.item-banners {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.2), inset 0 0 15px rgba(59, 130, 246, 0.08);
}

.calc-item.active.item-gameplay {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.2), inset 0 0 15px rgba(239, 68, 68, 0.08);
}

.calc-item-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Custom Checkboxes */
.calc-checkbox-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.calc-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.calc-checkbox-custom {
    position: relative;
    height: 22px;
    width: 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.calc-checkbox-wrapper:hover .calc-checkbox-custom {
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.03);
}

.calc-checkbox:checked ~ .calc-checkbox-custom {
    background: #a855f7;
    border-color: #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
}

.calc-checkbox-custom::after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.calc-checkbox:checked ~ .calc-checkbox-custom::after {
    display: block;
}

/* Multi-icon styles for 2D/AI/UGC card */
.calc-item-multi-icons {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.calc-sub-icon-box {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.icon-plus {
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-tertiary);
    user-select: none;
}

.calc-sub-icon-box span {
    font-size: 1.05rem;
}

/* Individual accent colors for sub-icon boxes */
.calc-sub-icon-box.cyan-glow {
    color: #22d3ee !important;
    background: rgba(34, 211, 238, 0.05) !important;
    border-color: rgba(34, 211, 238, 0.15) !important;
}
.calc-item.active .calc-sub-icon-box.cyan-glow {
    background: rgba(34, 211, 238, 0.15) !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.2) !important;
}

.calc-sub-icon-box.pink-glow {
    color: #f472b6 !important;
    background: rgba(244, 114, 182, 0.05) !important;
    border-color: rgba(244, 114, 182, 0.15) !important;
}
.calc-item.active .calc-sub-icon-box.pink-glow {
    background: rgba(244, 114, 182, 0.15) !important;
    border-color: rgba(244, 114, 182, 0.35) !important;
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.2) !important;
}

.calc-sub-icon-box.lime-glow {
    color: #a3e635 !important;
    background: rgba(163, 230, 53, 0.05) !important;
    border-color: rgba(163, 230, 53, 0.15) !important;
}
.calc-item.active .calc-sub-icon-box.lime-glow {
    background: rgba(163, 230, 53, 0.15) !important;
    border-color: rgba(163, 230, 53, 0.35) !important;
    box-shadow: 0 0 10px rgba(163, 230, 53, 0.2) !important;
}

/* Specializing icon box mirroring block 2 style */
.calc-item-icon-box {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.calc-item-icon-box span {
    font-size: 1.4rem;
}

/* Individual permanent accent colors for icon boxes (matching specialization block 2) */
/* 1. 2D/AI/UGC - Cyan */
.item-2d-ai-ugc .calc-item-icon-box {
    color: #22d3ee !important;
    background: rgba(34, 211, 238, 0.05) !important;
    border-color: rgba(34, 211, 238, 0.15) !important;
}
.item-2d-ai-ugc.active .calc-item-icon-box {
    background: rgba(34, 211, 238, 0.15) !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.25) !important;
}

/* 2. 3D - Purple */
.item-3d .calc-item-icon-box {
    color: #c084fc !important;
    background: rgba(168, 85, 247, 0.05) !important;
    border-color: rgba(168, 85, 247, 0.15) !important;
}
.item-3d.active .calc-item-icon-box {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.35) !important;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.25) !important;
}

/* 3. Trailers - Orange */
.item-trailers .calc-item-icon-box {
    color: #fdba74 !important;
    background: rgba(249, 115, 22, 0.05) !important;
    border-color: rgba(249, 115, 22, 0.15) !important;
}
.item-trailers.active .calc-item-icon-box {
    background: rgba(249, 115, 22, 0.15) !important;
    border-color: rgba(249, 115, 22, 0.35) !important;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.25) !important;
}

/* 4. Banners - Blue */
.item-banners .calc-item-icon-box {
    color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.05) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}
.item-banners.active .calc-item-icon-box {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.25) !important;
}

/* 5. Gameplay - Red */
.item-gameplay .calc-item-icon-box {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.05) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
}
.item-gameplay.active .calc-item-icon-box {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.25) !important;
}

.calc-item-meta {
    flex-grow: 1;
}

.calc-item-title {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.calc-item-tech {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Card corner prices style - redesigned for premium beauty */
.calc-card-price {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    margin-left: auto;
    letter-spacing: -0.01em;
}

/* Individual permanent themed color palettes for price badges */
/* 2D/AI/UGC - Cyan */
.item-2d-ai-ugc .calc-card-price {
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.05);
    border: 1.5px solid rgba(34, 211, 238, 0.15);
}
.item-2d-ai-ugc.active .calc-card-price {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.25);
}

/* 3D - Purple */
.item-3d .calc-card-price {
    color: #c084fc;
    background: rgba(168, 85, 247, 0.05);
    border: 1.5px solid rgba(168, 85, 247, 0.15);
}
.item-3d.active .calc-card-price {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.25);
}

/* Trailers - Orange */
.item-trailers .calc-card-price {
    color: #fdba74;
    background: rgba(249, 115, 22, 0.05);
    border: 1.5px solid rgba(249, 115, 22, 0.15);
}
.item-trailers.active .calc-card-price {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.25);
}

/* Banners - Blue */
.item-banners .calc-card-price {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.05);
    border: 1.5px solid rgba(59, 130, 246, 0.15);
}
.item-banners.active .calc-card-price {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.25);
}

/* Gameplay - Red */
.item-gameplay .calc-card-price {
    color: #f87171;
    background: rgba(239, 68, 68, 0.05);
    border: 1.5px solid rgba(239, 68, 68, 0.15);
}
.item-gameplay.active .calc-card-price {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.25);
}

/* Slider Custom Controls */
.calc-item-controls {
    display: none; /* Hidden by default when unchecked */
    animation: fadeInSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.calc-item.active .calc-item-controls {
    display: block;
}

.calc-slider-container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

.calc-range {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    transition: background 0.3s ease;
}

.calc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #a855f7;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.calc-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: #e9d5ff;
}

.calc-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #a855f7;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
    transition: transform 0.1s ease;
}

.calc-qty-badge {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #e9d5ff;
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.4);
}

/* Individual slider accent colors */
.calc-item.item-3d .calc-qty-badge {
    background: rgba(147, 51, 234, 0.15);
    border-color: rgba(147, 51, 234, 0.3);
    text-shadow: 0 0 5px rgba(147, 51, 234, 0.4);
}
.calc-item.item-3d .calc-range::-webkit-slider-thumb {
    border-color: #9333ea;
    box-shadow: 0 0 10px rgba(147, 51, 234, 0.6);
}

.calc-item.item-trailers .calc-qty-badge {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.3);
    text-shadow: 0 0 5px rgba(249, 115, 22, 0.4);
    color: #fdba74;
}
.calc-item.item-trailers .calc-range::-webkit-slider-thumb {
    border-color: #f97316;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.6);
}

.calc-item.item-banners .calc-qty-badge {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}
.calc-item.item-banners .calc-range::-webkit-slider-thumb {
    border-color: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

.calc-item.item-gameplay .calc-qty-badge {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    text-shadow: 0 0 5px rgba(239, 68, 68, 0.4);
    color: #f87171;
}
.calc-item.item-gameplay .calc-range::-webkit-slider-thumb {
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}


/* Right: Pricing Calculator Summary Panel */
.calc-total-panel {
    background: rgba(15, 10, 28, 0.5);
    border: 1.5px solid rgba(168, 85, 247, 0.18);
    border-radius: 2rem;
    padding: 2.25rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(168, 85, 247, 0.05);
    position: sticky;
    top: 100px;
    z-index: 10;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.calc-total-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
    top: -50px;
    right: -50px;
    pointer-events: none;
    z-index: 1;
}

.calc-total-panel .panel-title {
    font-family: var(--font-title);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #e9d5ff;
    margin-bottom: 0.4rem;
    position: relative;
    padding-left: 0.75rem;
}

.calc-total-panel .panel-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    background: #a855f7;
    border-radius: 2px;
}

@media (min-width: 1024px) {
    .calc-total-panel .panel-title {
        white-space: nowrap;
    }
    .calc-total-panel {
        height: auto;
        min-height: 750px; /* Elegant minimum height to keep visual balance when empty */
        box-sizing: border-box;
        padding: 1.75rem;
        gap: 1.25rem;
        align-self: start; /* Let sticky positioning work within stretched grid track */
        grid-column: 2;
        grid-row: 1 / span 2; /* Span both rows to match left columns height */
    }
    .calc-total-panel .panel-divider {
        margin: 1rem 0;
    }
    .pricing-summary {
        margin-top: auto; /* Push price and CTA button to the bottom when under min-height */
    }
    .calc-wrapper {
        min-height: 775px; /* Minimum wrapper height to align with starting calc panel height */
        grid-template-rows: auto 1fr;
        gap: 1rem 2.25rem; /* row-gap 1rem, column-gap 2.25rem */
    }
    .calc-services-panel {
        height: auto; /* Fits service items content exactly */
        grid-column: 1;
        grid-row: 1;
    }
    .calc-included-features {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0;
    }
    .included-details-box {
        height: 100%; /* Stretch details box to match features block height */
        min-height: 175px;
    }
}

/* Calc Options Stack List */
.calc-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

/* Panel Options */
.panel-option-box {
    background: rgba(13, 9, 23, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.04);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    position: relative;
    width: 100%;
}

.panel-option-box:hover {
    transform: translateY(-1px);
    background: rgba(18, 12, 32, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.panel-option-box:has(.calc-checkbox:checked) {
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.03);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.1);
}

.panel-option-box:has(.calc-checkbox:checked):hover {
    transform: translateY(-1px);
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.12);
}

/* Disabled Option Box state */
.panel-option-box.disabled {
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    background: rgba(13, 9, 23, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

.panel-option-box.disabled .option-label-text,
.panel-option-box.disabled .option-short-desc,
.panel-option-box.disabled .calc-checkbox-wrapper,
.panel-option-box.disabled .option-applicable-icons,
.panel-option-box.disabled .option-price-tag {
    opacity: 0.25;
}

.panel-option-box.disabled * {
    pointer-events: none !important;
}

/* Header row inside option boxes */
.option-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.option-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.option-right-side {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.option-applicable-icons {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.option-applicable-icons span {
    font-size: 1.05rem !important;
    padding: 0.15rem 0.25rem;
    border-radius: 6px;
    user-select: none;
}

.option-applicable-icons span.cyan-text {
    color: #22d3ee;
    border: 1px solid rgba(34, 211, 238, 0.15);
    background: rgba(34, 211, 238, 0.03);
}

.option-applicable-icons span.red-text {
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.15);
    background: rgba(239, 68, 68, 0.03);
}

.option-applicable-icons span.blue-text {
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.15);
    background: rgba(59, 130, 246, 0.03);
}

.option-price-tag {
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.15rem 0.45rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
    white-space: nowrap;
}

.option-label-text {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-left: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.option-desc-text {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-left: 2.1rem;
    line-height: 1.45;
    margin-top: -0.4rem;
}

.variations-counter-wrapper {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    animation: fadeInSlide 0.25s ease-out forwards;
}

.counter-label {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.counter-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.15rem;
}

.counter-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.counter-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.counter-val {
    font-family: monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 18px;
    text-align: center;
}

.panel-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
    margin: 1.5rem 0;
}

/* Bill/Estimate details list */
.bill-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: auto;
    overflow: visible;
    flex-shrink: 0;
}

.bill-details::-webkit-scrollbar {
    width: 6px;
}

.bill-details::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

.bill-details::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 3px;
}

.bill-details::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 85, 247, 0.5);
}

.bill-details:has(.empty-bill) {
    justify-content: center;
}

.bill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.js-loaded .bill-row {
    animation: fadeInSlide 0.25s ease-out forwards;
}

.bill-row .bill-item-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bill-row .bill-item-qty {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-family: monospace;
}

.bill-row .bill-item-val {
    font-weight: 500;
    color: var(--text-primary);
}

.bill-row .bill-item-val .old-price {
    font-size: 0.8rem;
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.25);
    margin-left: 0.4rem;
    font-weight: 400;
}

.bill-row.empty-bill {
    color: var(--text-tertiary);
    font-style: normal;
    justify-content: center;
}

/* Pricing Final Outputs */
.pricing-summary {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
}

.discount-row {
    color: #c084fc;
    font-weight: 500;
    font-size: 0.95rem;
    transition: opacity 0.3s ease;
}

.discount-row.inactive {
    opacity: 0.25;
}

.discount-row.inactive .discount-badge {
    box-shadow: none;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-tertiary);
}

.discount-badge {
    background: rgba(192, 132, 252, 0.15);
    border: 1.5px solid rgba(192, 132, 252, 0.5);
    color: #e9d5ff;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    box-shadow: 0 0 15px rgba(192, 132, 252, 0.35);
    text-shadow: 0 0 5px rgba(192, 132, 252, 0.6);
}

.time-row {
    color: #e9d5ff;
    font-weight: 500;
    font-size: 0.95rem;
}

.time-value {
    color: #c084fc;
    font-weight: 700;
    font-size: 0.95rem;
    text-shadow: 0 0 10px rgba(192, 132, 252, 0.25);
}

.kpd-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family: var(--font-body);
    font-size: 0.78rem; /* Slightly smaller to prevent text wrapping on Windows desktop */
    color: rgba(233, 213, 255, 0.55);
    margin-top: 0.3rem;
}

.kpd-label {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.kpd-value {
    color: rgba(192, 132, 252, 0.8);
    font-weight: 500;
    text-align: right;
    line-height: 1.35;
}

@media (min-width: 480px) {
    .kpd-value {
        white-space: nowrap; /* Prevent KPI values from wrapping on tablet/desktop */
    }
}

.total-row {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.total-price {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

.total-price.custom-price {
    font-size: 1.45rem;
    text-shadow: none;
    color: #c084fc;
}

/* Included Features Horizontal Banner (Under the services list) */
.calc-included-features {
    background: rgba(15, 10, 28, 0.4);
    border: 1.5px solid rgba(168, 85, 247, 0.18);
    border-radius: 2rem;
    padding: 1.5rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(168, 85, 247, 0.05);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Make left column wider for bigger icons */
    align-items: center; /* Symmetrical vertical centering */
    gap: 1.5rem;
    width: 100%;
    margin-top: 0.5rem; /* Small spacing below trailers card inside services panel */
}

.included-left-col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0; /* Prevent width shifting */
}

.included-title {
    font-family: var(--font-title);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #e9d5ff;
    margin-bottom: 0.1rem;
    position: relative;
    padding-left: 0.75rem;
}

@media (min-width: 1024px) {
    .included-title {
        white-space: nowrap;
    }
}

.included-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    background: #a855f7;
    border-radius: 2px;
}

/* Icons Row Grid */
.included-icons-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    width: 100%;
}

.included-icon-btn {
    aspect-ratio: 1;
    background: rgba(13, 9, 23, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.included-icon-btn span.material-symbols-outlined {
    font-size: 1.3rem;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.included-icon-btn:hover {
    transform: translateY(-2px);
    background: rgba(13, 9, 23, 0.65);
}

/* Active states for each icon color when selected/hovered */
.included-icon-btn[data-feature="analytics"]:hover,
.included-icon-btn[data-feature="analytics"].active {
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
}
.included-icon-btn[data-feature="aimax"]:hover,
.included-icon-btn[data-feature="aimax"].active {
    border-color: rgba(192, 132, 252, 0.45);
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.15);
}
.included-icon-btn[data-feature="cta"]:hover,
.included-icon-btn[data-feature="cta"].active {
    border-color: rgba(74, 222, 128, 0.45);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.15);
}
.included-icon-btn[data-feature="hook"]:hover,
.included-icon-btn[data-feature="hook"].active {
    border-color: rgba(251, 146, 60, 0.45);
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.15);
}
.included-icon-btn[data-feature="sfx"]:hover,
.included-icon-btn[data-feature="sfx"].active {
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.15);
}
.included-icon-btn[data-feature="resizes"]:hover,
.included-icon-btn[data-feature="resizes"].active {
    border-color: rgba(244, 114, 182, 0.45);
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.15);
}

/* Icon specific colors (always on, but glows when active) */
.included-icon-btn span.icon-cyan { color: #22d3ee; }
.included-icon-btn span.icon-purple { color: #c084fc; }
.included-icon-btn span.icon-green { color: #4ade80; }
.included-icon-btn span.icon-orange { color: #fb923c; }
.included-icon-btn span.icon-blue { color: #60a5fa; }
.included-icon-btn span.icon-pink { color: #f472b6; }

/* Tooltip overlay styling */
.included-icon-btn .btn-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(13, 9, 23, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.included-icon-btn:hover .btn-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Shared Details Box */
.included-details-box {
    background: rgba(13, 9, 23, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    height: auto;
    min-height: 175px; /* Safely accommodates Windows wider font rendering without shifts */
    min-width: 0;  /* Prevent horizontal width shifting */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center the content block horizontally */
    position: relative;
    overflow: hidden;
}

.details-content {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    max-width: 90%; /* Center the text block with breathing room on sides */
    text-align: left; /* Keep text lines left-aligned */
}

.details-content.active {
    display: flex;
}

.js-loaded .details-content.active {
    animation: fadeInFeat 0.12s ease-out forwards;
}

@keyframes fadeInFeat {
    from {
        opacity: 0.75;
    }
    to {
        opacity: 1;
    }
}

.details-title {
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
}

.details-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.15rem;
}

.badge-orange-outline {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.35);
    background: rgba(249, 115, 22, 0.08);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
    line-height: 1.25;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-red-outline {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
    line-height: 1.25;
    white-space: nowrap;
    flex-shrink: 0;
}

.details-desc {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* Title text colors */
.text-cyan { color: #22d3ee; }
.text-purple { color: #c084fc; }
.text-green { color: #4ade80; }
.text-orange { color: #fb923c; }
.text-blue { color: #60a5fa; }
.text-pink { color: #f472b6; }

/* Responsive adjustments */
@media (max-width: 1023px) {
    .calc-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .calc-total-panel {
        position: static;
        top: auto;
    }
}

/* Action button */
.calc-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%);
    background-clip: padding-box;
    color: #ffffff;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.calc-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
}

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

.calc-cta-btn.disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}



.calc-warning-row {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    box-sizing: border-box;
    min-height: 52px;
    height: 52px;
    color: #f87171;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.calc-warning-row .warning-icon {
    font-size: 1.15rem;
    color: #f87171;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Prices Section Mobile Adjustments
   ========================================================================== */

@media (max-width: 1023px) {
    .prices-section {
        padding: 3rem 0 !important;
    }
    
    .calc-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .calc-services-panel {
        grid-column: auto;
        grid-row: auto;
        height: auto;
    }
    
    .calc-total-panel {
        position: static;
        padding: 1.75rem;
        grid-column: auto;
        grid-row: auto;
    }
    
    .calc-item {
        padding: 1.25rem;
    }
    
    .calc-included-features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
        grid-column: auto;
        grid-row: auto;
        margin-top: 0.5rem;
    }
    .included-details-box {
        height: auto;
        min-height: 175px; /* Prevent height shifts on tablets */
    }
}

@media (max-width: 479px) {
    .prices-section {
        padding: 2rem 0 !important;
    }

    .prices-container {
        padding: 0 1rem; /* Maximize screen space on mobile */
    }

    .calc-total-panel {
        padding: 1.65rem 1rem 1.25rem 1rem !important; /* Raised top padding to position header more harmoniously */
    }

    .included-details-box {
        height: auto;
        min-height: 210px; /* Locked height on mobile devices to prevent shifts */
    }

    .calc-item {
        padding: 0.85rem 0.95rem;
    }

    .calc-item-recommended-tag {
        right: 1rem;
        font-size: 0.58rem;
        padding: 0.15rem 0.5rem;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Hide showcase/total inner glows on mobile viewports */
    .portfolio-showcase-glow,
    .calc-total-glow {
        display: none !important;
    }

    .prices-header {
        margin-bottom: 2.5rem;
    }
    
    .prices-title {
        font-size: 2.1rem !important;
    }
    
    /* Responsive grid layout to prevent text squishing on mobile */
    .calc-item-header {
        display: grid;
        grid-template-areas: 
            "check icons price"
            "check meta  meta";
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }
    
    .calc-checkbox-wrapper {
        grid-area: check;
    }
    
    .calc-item-icon-box, 
    .calc-item-multi-icons {
        grid-area: icons;
        justify-self: start;
    }
    
    .calc-item-meta {
        grid-area: meta;
        min-width: 0;
    }
    
    .calc-card-price {
        grid-area: price;
        margin-left: auto;
        font-size: 0.9rem;
        padding: 0.25rem 0.65rem;
    }
    
    .calc-item-icon-box {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 8px;
    }
    .calc-item-icon-box span {
        font-size: 1.2rem;
    }

    /* Scale down Item 1's multi-icons to fit nicely in the grid cell */
    .calc-item-multi-icons {
        gap: 0.3rem;
    }
    .calc-sub-icon-box {
        width: 1.9rem;
        height: 1.9rem;
        border-radius: 7px;
    }
    .calc-sub-icon-box span {
        font-size: 0.95rem;
    }
    .icon-plus {
        font-size: 0.75rem;
    }
    
    .calc-item-title {
        font-size: 1rem;
        margin-bottom: 0.15rem;
    }
    
    .calc-item-tech {
        font-size: 0.72rem;
        line-height: 1.3;
    }
    
    .calc-slider-container {
        gap: 1rem;
        padding: 0.65rem 0.85rem;
    }
    
    .calc-qty-badge {
        min-width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    /* Ensure minimum order warning wrapper does not clip wrapped text */
    .calc-warning-row {
        height: auto !important;
        min-height: 52px;
        padding: 0.6rem 0.85rem;
        gap: 0.5rem;
    }

    /* Ensure bill/estimate lines fit elegantly */
    .bill-row {
        font-size: 0.85rem;
    }
    .bill-row .bill-item-name {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Desktop System Scaling for Large Screens (Simulating Browser Zoom)
   ========================================================================== */

/* Standard Large Monitors / 1080p (1920px to 2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {
    html {
        zoom: 1.1; /* 110% Scale */
    }
}

/* Ultra-wide & 4K Monitors (2560px and above) */
@media (min-width: 2560px) {
    html {
        zoom: 1.2; /* 120% Scale */
    }
}

/* ==========================================================================
   Custom Premium Scrollbar Globally (Styled exactly like the portfolio scrollbar)
   ========================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 85, 247, 0.6);
}

/* Card Particles Glowing Effect */
.card-particles-container {
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.card-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes card-particle-pulse {
    0% {
        transform: translate(var(--start-x, 0px), var(--start-y, 0px)) scale(0);
        opacity: 0;
    }
    10% {
        opacity: var(--max-opacity, 0.6);
    }
    90% {
        opacity: var(--max-opacity, 0.6);
    }
    100% {
        transform: translate(var(--end-x, 0px), var(--end-y, 0px)) scale(var(--scale, 1.2));
        opacity: 0;
    }
}

/* Flying Overlay Particles (Floats on top of cards and text for depth) */
.particles-container.particles-overlay {
    z-index: 15 !important;
}

/* Interactive Calculator Tooltips */
.info-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.info-tooltip-wrapper .info-icon {
    font-size: 1.1rem !important;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    user-select: none;
}

.info-tooltip-wrapper:hover .info-icon {
    color: #a855f7;
    transform: scale(1.1);
}

.info-tooltip-content {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: 240px;
    background: rgba(20, 15, 35, 0.95);
    border: 1px solid rgba(168, 85, 247, 0.25);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(168, 85, 247, 0.05);
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 400;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    text-align: left;
    white-space: normal;
}

/* Tooltip arrow */
.info-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(20, 15, 35, 0.95) transparent transparent transparent;
}

/* Tooltip arrow border simulation */
.info-tooltip-content::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: rgba(168, 85, 247, 0.25) transparent transparent transparent;
    z-index: -1;
    margin-top: 1px;
}

/* Show tooltip on hover */
.info-tooltip-wrapper:hover .info-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Ensure tooltips inside disabled options are still hoverable */
.panel-option-box.disabled .info-tooltip-wrapper,
.panel-option-box.disabled .info-tooltip-wrapper * {
    pointer-events: auto !important;
}

/* Responsive adjustments for options */
@media (max-width: 480px) {
    .option-header-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .option-right-side {
        margin-left: auto;
    }
}

/* ==========================================================================
   Reviews Section & Infinite Scroll Ticker (Block 5)
   ========================================================================== */

.reviews-section {
    position: relative;
    padding: 6rem 0; /* Consistent desktop padding (96px top, 96px bottom) */
    width: 100%;
    z-index: 2;
    overflow-x: clip; /* Prevent particles or scroll elements from overflowing */
}

@media (max-width: 1023px) {
    .reviews-section {
        padding: 3rem 0 !important; /* Consistent tablet padding (48px top, 48px bottom) */
    }
}

@media (max-width: 479px) {
    .reviews-section {
        padding: 2rem 0 !important; /* Consistent mobile padding (32px top, 32px bottom) */
    }
}

/* Ambient glows behind reviews section */
.reviews-glow-spot {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

.glow-reviews-purple {
    top: 10%;
    left: -200px;
    background: #a855f7;
    opacity: 0.2;
}

.glow-reviews-cyan {
    top: 10%;
    right: -250px;
    background: #a855f7;
    opacity: 0.1;
    width: 350px;
    height: 350px;
}

.reviews-container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.reviews-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.reviews-title {
    font-family: var(--font-title);
    font-size: clamp(2.5rem, 4vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.reviews-subtitle {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--text-secondary);
}

/* Ticker Marquee Container */
.reviews-ticker-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: auto !important;
    padding: 3.5rem 0; /* Increased to prevent hover scale and shadow from being cut off */
    margin-top: -2rem; /* Compensate for the extra top padding */
    margin-bottom: -2rem; /* Compensate for the extra bottom padding */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* Hide scrollbars */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Fade out overlay edges */
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    will-change: scroll-position;
}

.reviews-ticker-container::-webkit-scrollbar {
    display: none;
}

.reviews-ticker-container.dragging {
    cursor: grabbing;
}

.reviews-ticker-track {
    display: flex;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* Reviews card particles synchronization to prevent blinking/flickering on loop wrapping */
.reviews-ticker-track .particle {
    animation-name: none !important;
}
.reviews-ticker-track.particles-active .particle {
    animation-name: float-particle !important;
}

/* Static centered layout when there are too few reviews */
.reviews-ticker-container.static-layout {
    cursor: default;
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
}
.reviews-ticker-container.static-layout .reviews-ticker-track {
    width: 100%;
    justify-content: center;
}
.reviews-ticker-container.static-layout .reviews-ticker-group {
    padding-right: 0;
    justify-content: center;
}

.reviews-ticker-group {
    display: flex;
    gap: 1.5rem;
    padding-right: 1.5rem; /* Gap between row duplicates */
}

/* Review Card Styling */
.review-card {
    flex: 0 0 420px;
    width: 420px;
    background: rgba(15, 10, 28, 0.45);
    border: 1.5px solid rgba(168, 85, 247, 0.15);
    border-radius: 20px;
    padding: 1.5rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(168, 85, 247, 0.03);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
    cursor: pointer;
    white-space: normal; /* Override parent nowrap */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.review-card:hover {
    border-color: rgba(192, 132, 252, 0.35);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(168, 85, 247, 0.08);
    transform: translateY(-4px);
}

/* Card Hover Glow Spot */
.review-card-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
    top: -30px;
    right: -30px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.review-card:hover .review-card-glow {
    opacity: 1;
    transform: scale(1.1);
}

/* Header of the Card */
.review-card-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

/* Avatar */
.review-avatar-container {
    position: relative;
    width: 42px;
    height: 42px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.review-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.review-avatar img.review-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-initials {
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    color: #c084fc;
    letter-spacing: 0.5px;
}

.review-avatar-glow {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 75%);
    z-index: 1;
}

.review-author-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}

.review-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.review-role {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 0.15rem;
}

/* LinkedIn Icon Link */
.review-linkedin-link {
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-normal), transform var(--transition-normal);
    margin-left: 0.5rem;
    flex-shrink: 0;
    z-index: 3;
}

.review-linkedin-link:hover {
    color: #0077b5; /* Official LinkedIn Blue */
    transform: scale(1.15);
}

/* Review Text Preview */
.review-text-preview {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: left;
    margin-bottom: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* "Read more" Button */
.review-read-more {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: #c084fc;
    padding: 0;
    cursor: pointer;
    transition: color var(--transition-normal), text-shadow var(--transition-normal);
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.review-read-more:hover {
    color: #e9d5ff;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.5);
}

/* Glassmorphic Modal Overlay */
.review-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 3, 7, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 1.5rem;
}

.review-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Card */
.review-modal-card {
    background: rgba(14, 10, 24, 0.85);
    border: 1.5px solid rgba(168, 85, 247, 0.22);
    border-radius: 24px;
    width: 100%;
    max-width: 550px;
    padding: 2.25rem;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(168, 85, 247, 0.1);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.review-modal-overlay.active .review-modal-card {
    transform: scale(1);
}

/* Modal Close Button */
.review-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
    z-index: 5;
}

.review-modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    transform: rotate(90deg);
}

.review-modal-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 1.5rem;
    padding-right: 2rem; /* Prevent overlap with close button */
}

.review-modal-header .review-avatar-container {
    width: 48px;
    height: 48px;
}

.review-modal-header .review-name {
    font-size: 1.1rem;
}

.review-modal-header .review-role {
    font-size: 0.8rem;
}

.review-modal-content {
    text-align: left;
}

.review-full-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap; /* Preserve paragraphs */
}

/* Mobile Responsive tweaks for reviews section */
@media (max-width: 479px) {
    .reviews-header {
        margin-bottom: 2rem;
    }

    .review-card {
        flex: 0 0 290px;
        width: 290px;
        padding: 1.25rem;
        border-radius: 16px;
    }

    .review-avatar-container {
        width: 36px;
        height: 36px;
    }

    .review-name {
        font-size: 0.88rem;
    }

    .review-role {
        font-size: 0.68rem;
    }

    .review-text-preview {
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .review-modal-card {
        padding: 2.75rem 1.25rem 1.5rem 1.25rem; /* Extra top padding to clear close button, narrow side padding */
        border-radius: 20px;
    }

    .review-modal-close {
        top: 0.85rem;
        right: 0.85rem;
    }

    .review-modal-header {
        padding-right: 0;
    }

    .review-modal-header .review-name {
        font-size: 0.95rem;
    }

    .review-modal-header .review-role {
        font-size: 0.72rem;
    }

    .review-full-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}

/* ==========================================================================
   FAQ Section Styles (Block 6)
   ========================================================================== */

.faq-section {
    position: relative;
    padding: 6rem 0 8rem 0;
    width: 100%;
    z-index: 2;
    overflow-x: clip;
    overflow-anchor: none;
}

.faq-glow-spot {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

.glow-faq-purple {
    top: -10%;
    right: -250px;
    background: #a855f7;
    opacity: 0.15;
}

.glow-faq-cyan {
    bottom: 0;
    left: -250px;
    background: #a855f7;
    opacity: 0.1;
    width: 400px;
    height: 400px;
}

.glow-faq-left-top {
    top: 70px;
    left: calc(50% - 330px);
    background: #a855f7;
    opacity: 0.22;
    width: 450px;
    height: 450px;
}

@media (max-width: 1023px) {
    .glow-faq-left-top {
        left: -80px;
        top: 100px;
        width: 300px;
        height: 300px;
        opacity: 0.25;
    }
}

.faq-container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.faq-header {
    text-align: center;
    margin-bottom: 4rem;
}

.faq-title {
    font-family: var(--font-title);
    font-size: clamp(2.5rem, 4vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.faq-subtitle {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.faq-item {
    position: relative;
    background: rgba(13, 9, 23, 0.35);
    border: 1.5px solid rgba(168, 85, 247, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(168, 85, 247, 0.02);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
    overflow: hidden;
    overflow-anchor: none;
    cursor: pointer;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: border-color, box-shadow, background;
}

/* Neon Active Bar on the Left Side */
.faq-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #d946ef, #a855f7, #6366f1);
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: 3;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.faq-item.active::before {
    opacity: 1;
}

.faq-item:hover {
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(20, 14, 35, 0.5);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.12), inset 0 0 15px rgba(168, 85, 247, 0.04);
}

.faq-item.active {
    border-color: rgba(168, 85, 247, 0.55);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(99, 102, 241, 0.02) 100%), rgba(13, 9, 23, 0.65);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 
                0 0 25px rgba(168, 85, 247, 0.22), 
                0 0 15px rgba(168, 85, 247, 0.12),
                inset 0 0 20px rgba(168, 85, 247, 0.06);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.15rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    gap: 1.5rem;
}

.faq-question-text {
    transition: color var(--transition-normal), text-shadow var(--transition-normal);
}

.faq-item:hover .faq-question-text {
    color: #f8fafc;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.faq-item.active .faq-question-text {
    color: #c084fc;
    text-shadow: 0 0 12px rgba(192, 132, 252, 0.4);
}

.faq-arrow {
    color: var(--text-secondary);
    transition: transform var(--transition-normal), color var(--transition-normal), text-shadow var(--transition-normal);
    flex-shrink: 0;
    font-size: 1.6rem !important;
    will-change: transform;
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);
    color: #c084fc;
    text-shadow: 0 0 10px rgba(192, 132, 252, 0.5);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-normal), opacity var(--transition-normal);
    opacity: 0;
    overflow: hidden;
    overflow-anchor: none;
    cursor: default;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: grid-template-rows, opacity;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq-answer-content {
    min-height: 0;
    padding: 0 2rem 0 2rem;
    transition: padding var(--transition-normal);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: padding;
}

.faq-item.active .faq-answer-content {
    padding: 0 2rem 1.6rem 2rem;
}

/* Beautiful Typographical and List styles inside Answer */
.faq-text-lead {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 500;
}

.faq-text-sub {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-top: 1rem;
}

/* Bullet list */
.faq-bullets-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-bullets-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.5;
}

.bullet-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 0.55rem;
    flex-shrink: 0;
}

.bullet-check {
    color: #10b981;
    font-weight: bold;
    font-size: 0.95rem;
    margin-top: -0.05rem;
    flex-shrink: 0;
}

.bullet-number {
    color: #c084fc;
    font-weight: 700;
    font-size: 0.92rem;
    margin-top: -0.05rem;
    flex-shrink: 0;
}

.bullet-row-text {
    flex: 1;
}

.bullet-title {
    color: var(--text-primary);
    font-weight: 600;
}

.bullet-desc {
    color: var(--text-secondary);
}

.badge-optional {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    color: #c084fc;
    background: rgba(168, 85, 247, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.2);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    margin-left: auto;
    margin-right: 0;
    align-self: flex-start;
    margin-top: 0.15rem;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    user-select: none;
    white-space: nowrap;
    line-height: 1.2;
    text-transform: uppercase;
}


.bg-cyan { background: #06b6d4; }
.bg-purple { background: #a855f7; }
.bg-pink { background: #ec4899; }

.text-cyan { color: #06b6d4; }
.text-purple { color: #a855f7; }
.text-pink { color: #ec4899; }
.text-white { color: #ffffff; }

/* Info note box */
.faq-info-note {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    background: rgba(168, 85, 247, 0.03);
    border: 1px dashed rgba(168, 85, 247, 0.15);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-top: 1.25rem;
}

.faq-info-note .note-icon {
    font-size: 1.2rem;
    color: #c084fc;
    flex-shrink: 0;
}

.faq-info-note .note-text {
    font-family: var(--font-body);
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Inline software formats */
.faq-inline-tags {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.tech-inline-tag {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tech-inline-tag strong {
    font-weight: 700;
}

/* Steps list */
.faq-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.faq-steps-list li {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.step-idx {
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 800;
    color: #c084fc;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    flex-shrink: 0;
}

.step-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.step-heading {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.step-text {
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Media Queries */
@media (max-width: 479px) {
    .faq-section {
        padding: 3.5rem 0 4rem 0 !important;
    }
    
    .faq-header {
        margin-bottom: 2.5rem;
    }
    
    .faq-question {
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .faq-answer-content {
        padding: 0 1.5rem 0 1.5rem;
    }
    .faq-item.active .faq-answer-content {
        padding: 0 1.5rem 1.25rem 1.5rem;
    }
    
    .faq-bullets-list li {
        font-size: 0.88rem;
    }
    
    .faq-text-lead {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Footer Styles (Подвал)
   ========================================================================== */
.site-footer {
    position: relative;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    background: transparent;
    padding: 1.15rem 0;
    z-index: 5;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.footer-copyright {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-tertiary);
    text-align: center;
    letter-spacing: 0.02em;
}

.footer-socials {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.footer-social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);
}

.footer-social-link span {
    display: none;
}

.footer-social-link:hover {
    color: #ffffff;
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}

.footer-social-link .social-icon {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-normal);
}

.footer-social-link:hover .social-icon {
    transform: scale(1.1);
}

@media (max-width: 479px) {
    .footer-container {
        padding: 0 1rem;
    }
    .footer-copyright {
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

/* ==========================================================================
   Premium Cookie Consent Banner Style
   ========================================================================== */
.cookie-banner-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 420px;
    max-width: calc(100vw - 48px);
    z-index: 99999;
    background: rgba(18, 13, 28, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-radius: 20px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(192, 132, 252, 0.1);
    padding: 20px;
    transform: translateY(40px) scale(0.95);
    opacity: 0;
    transition: transform var(--transition-spring), opacity var(--transition-normal), visibility var(--transition-normal);
    visibility: hidden;
}

.cookie-banner-container.show {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

.cookie-banner-container.hidden {
    display: none !important;
}

.cookie-banner-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-banner-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cookie-banner-info .cookie-icon {
    width: 28px;
    height: 28px;
    color: var(--color-purple);
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.4));
    flex-shrink: 0;
    margin-top: 2px;
}

.cookie-banner-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cookie-banner-title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cookie-banner-description {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0;
}

.cookie-banner-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cookie-btn {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
    outline: none;
}

.cookie-btn-primary {
    background: linear-gradient(135deg, var(--color-purple), var(--color-indigo));
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(192, 132, 252, 0.2);
}

.cookie-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(192, 132, 252, 0.35);
    background: linear-gradient(135deg, #c084fc, #7c3aed);
}

.cookie-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

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

.cookie-btn:active {
    transform: translateY(1px);
}

/* Адаптивные стили для мобильных */
@media (max-width: 768px) {
    .cookie-banner-container {
        bottom: 16px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        padding: 16px;
    }
    .cookie-banner-info {
        gap: 10px;
    }
    .cookie-banner-info .cookie-icon {
        width: 24px;
        height: 24px;
    }
    .cookie-banner-description {
        font-size: 0.82rem;
    }
    .cookie-banner-actions {
        width: 100%;
    }
    .cookie-btn {
        flex: 1;
        height: 40px;
    }
}