/* ==========================================================================







   1. CORE VARIABLES & THEME SETUP







   ========================================================================== */







:root {







    --color-bg: #f8f9fc;







    --color-surface: #ffffff;







    --color-text: #0f172a;







    --color-text-muted: #64748b;







    --color-border: rgba(15, 23, 42, 0.1);







    







    --color-primary: #8b5cf6;







    --color-secondary: #ec4899;







    --color-tertiary: #3b82f6;







    --gradient-master: linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6);







    --kaptured-gradient: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);







    







    --glass-bg: rgba(255, 255, 255, 0.45);







    --glass-border: rgba(255, 255, 255, 0.6);







    --glass-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05);







    --nav-bg: rgba(255, 255, 255, 0.75);







    







    --radius-sm: 12px;







    --radius-md: 24px;







    --radius-lg: 40px;







    --section-padding: 140px;







    --transition-base: 0.4s cubic-bezier(0.16, 1, 0.3, 1);







}







.dark-mode {







    --color-bg: #09090b; 







    --color-surface: #121214;







    --color-text: #f8fafc;







    --color-text-muted: #94a3b8;







    --color-border: rgba(248, 250, 252, 0.1);







    







    --glass-bg: rgba(15, 15, 25, 0.55);







    --glass-border: rgba(139, 92, 246, 0.2);







    --glass-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.5);







    --nav-bg: rgba(9, 9, 11, 0.85);







}







/* ==========================================================================







   2. GLOBAL RESETS & TYPOGRAPHY







   ========================================================================== */







*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }







body, p, span, li, a, button, input, textarea, select { 







    font-family: 'Inter', sans-serif !important; 







}







h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 







    font-family: 'Space Grotesk', sans-serif !important; 







}







body { 







    background-color: var(--color-bg); 







    color: var(--color-text); 







    line-height: 1.6; 







    overflow-x: hidden; 







    transition: background-color var(--transition-base), color var(--transition-base); 







    -webkit-font-smoothing: antialiased; 







}







h1, h2, h3, h4, h5, h6 { 







    line-height: 1.1; 







    font-weight: 700; 







    letter-spacing: -0.02em;







}







a { text-decoration: none; color: inherit; }







ul { list-style: none; }







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







/* ==========================================================================







   3. ADVANCED CUSTOM CURSOR







   ========================================================================== */







.cursor-dot { 







    width: 8px; 







    height: 8px; 







    background-color: var(--color-primary); 







    position: fixed; 







    top: 0; 







    left: 0; 







    border-radius: 50%; 







    pointer-events: none; 







    z-index: 10000; 







    transform: translate(-50%, -50%); 







    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4); 







}







.cursor-ring { 







    width: 44px; 







    height: 44px; 







    border: 1px solid rgba(139, 92, 246, 0.4); 







    position: fixed; 







    top: 0; 







    left: 0; 







    border-radius: 50%; 







    pointer-events: none; 







    z-index: 9999; 







    transform: translate(-50%, -50%); 







    transition: width 0.3s, height 0.3s, background-color 0.3s; 







}







.cursor-ring.hover-active { 







    width: 70px; 







    height: 70px; 







    background-color: rgba(139, 92, 246, 0.08); 







    border-color: transparent; 







}







.scroll-progress-container { 







    position: fixed; 







    top: 0; 







    left: 0; 







    width: 100%; 







    height: 3px; 







    background: transparent; 







    z-index: 10000; 







    pointer-events: none;







}







.scroll-progress-bar { 







    height: 100%; 







    width: 0%; 







    background: var(--gradient-master); 







    border-radius: 0 2px 2px 0; 







    transition: width 0.1s ease; 







}







/* ==========================================================================







   4. PRELOADER







   ========================================================================== */







.preloader { 







    position: fixed; 







    inset: 0; 







    background-color: #050508; 







    z-index: 99999; 







    display: flex; 







    flex-direction: column; 







    justify-content: center; 







    align-items: center; 







    transition: opacity 1s ease-in-out, visibility 1s ease-in-out; 







}







.preloader-brand { 







    font-family: 'Space Grotesk', sans-serif !important; 







    font-size: 3rem; 







    background: var(--gradient-master); 







    -webkit-background-clip: text; 







    -webkit-text-fill-color: transparent; 







    margin-bottom: 20px; 







    animation: pulse-brand 2s infinite; 







}







.loading-bar-container { 







    width: 250px; 







    height: 2px; 







    background: rgba(255, 255, 255, 0.1); 







    border-radius: 4px; 







    overflow: hidden; 







    position: relative; 







}







.loading-bar { 







    position: absolute; 







    top: 0; 







    left: 0; 







    height: 100%; 







    width: 0%; 







    background: var(--color-primary); 







    transition: width 0.2s ease; 







}







.loading-text { 







    color: #94a3b8; 







    font-size: 0.8rem; 







    letter-spacing: 0.2em; 







    text-transform: uppercase; 







    margin-top: 15px; 







}







@keyframes pulse-brand { 







    0%, 100% { opacity: 1; transform: scale(1); } 







    50% { opacity: 0.7; transform: scale(0.95); } 







}







/* ==========================================================================







   5. BACKGROUND GLOWS







   ========================================================================== */







.hostinger-glow { 







    position: fixed; 







    top: 50%; 







    left: 50%; 







    transform: translate(-50%, -50%); 







    width: 100vw; 







    height: 80vh; 







    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.04) 0%, transparent 60%); 







    filter: blur(120px); 







    z-index: -2; 







    pointer-events: none; 







    transition: 0.5s ease; 







}







.dark-mode .hostinger-glow { 







    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 60%); 







}







.mesh-bg { 







    position: fixed; 







    inset: -50%; 







    z-index: -3; 







    background-color: var(--color-bg); 







    background-image: radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 50%), radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.03) 0%, transparent 50%); 







    filter: blur(80px); 







    animation: breathe-bg 20s infinite alternate linear; 







    pointer-events: none; 







    transition: background-color var(--transition-base); 







}







.dark-mode .mesh-bg { background-image: none; }







@keyframes breathe-bg { 







    0% { transform: rotate(0deg) scale(1); } 







    100% { transform: rotate(5deg) scale(1.1); } 







}







/* ==========================================================================







   6. UTILITY COMPONENTS (GLASS, BUTTONS, GRADIENT TEXT)







   ========================================================================== */







.glass-panel { 







    background: var(--glass-bg); 







    backdrop-filter: blur(32px); 







    -webkit-backdrop-filter: blur(32px); 







    border: 1px solid var(--glass-border); 







    border-top: 1px solid rgba(255, 255, 255, 0.4); 







    border-left: 1px solid rgba(255, 255, 255, 0.2); 







    border-radius: var(--radius-md); 







    box-shadow: var(--glass-shadow); 







    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); 







}







.dark-mode .glass-panel { 







    border-top: 1px solid rgba(255, 255, 255, 0.1); 







    border-left: 1px solid rgba(255, 255, 255, 0.05); 







    box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), var(--glass-shadow); 







}







.glass-panel:hover { 







    transform: translateY(-4px); 







    box-shadow: 0 30px 60px -15px rgba(139, 92, 246, 0.15); 







    border-color: rgba(139, 92, 246, 0.3); 







}







.gradient-text { 







    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6, #ec4899); 







    background-size: 200% auto;







    -webkit-background-clip: text; 







    background-clip: text; 







    color: transparent; 







    -webkit-text-fill-color: transparent; 







    display: inline-block; 







    padding-bottom: 2px; 







    animation: gradientMove 6s linear infinite;







}







@keyframes gradientMove {







    0% {







        background-position: 200% center;







    }







    100% {







        background-position: 0% center;







    }







}







.gradient-pink-purple {







    background: linear-gradient(90deg, #ec4899, #8b5cf6);







    -webkit-background-clip: text;







    background-clip: text;







    color: transparent;







    -webkit-text-fill-color: transparent;







    display: inline-block;







}







.gradient-blue-purple {







    background: linear-gradient(90deg, #3b82f6, #8b5cf6);







    -webkit-background-clip: text;







    background-clip: text;







    color: transparent;







    -webkit-text-fill-color: transparent;







    display: inline-block;







}







a, button, .btn { pointer-events: auto; position: relative; z-index: 50; }







.btn { 







    display: inline-flex; 







    align-items: center; 







    justify-content: center; 







    padding: 14px 32px; 







    font-size: 0.95rem; 







    font-weight: 600; 







    border-radius: 12px; 







    transition: var(--transition-base); 







    position: relative; 







    overflow: hidden; 







    z-index: 1; 







    letter-spacing: 0.02em; 







}







.btn-primary { 







    background: linear-gradient(135deg, #ff5e97, #9e72fa, #5195ff); 







    color: #fff; 







    border: none; 







    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25), inset 0 1px 1px rgba(255,255,255,0.3); 







}







.btn-primary:hover { 







    transform: scale(1.05) translateY(-2px); 







    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.4); 







}







.btn-outline { 







    background: transparent; 







    color: var(--color-text); 







    border: 1px solid var(--color-border); 







}







.btn-outline:hover { 







    border-color: var(--color-primary); 







    color: var(--color-primary); 







    background: var(--color-surface); 







    transform: scale(1.05) translateY(-2px); 







    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.1);







}







.section-badge { 







    display: inline-flex; 







    align-items: center; 







    gap: 8px; 







    padding: 6px 16px; 







    background: rgba(139, 92, 246, 0.08); 







    color: var(--color-primary); 







    border: 1px solid rgba(139, 92, 246, 0.15); 







    border-radius: 100px; 







    font-size: 0.75rem; 







    font-weight: 700; 







    letter-spacing: 0.1em; 







    text-transform: uppercase; 







    margin-bottom: 24px; 







    backdrop-filter: blur(10px); 







}







.dark-mode .section-badge { box-shadow: none; }







/* ==========================================================================







   7. HEADER & NAVIGATION







   ========================================================================== */







#main-header { 







    position: fixed !important; 







    top: 24px !important; 







    left: 50% !important; 







    transform: translateX(-50%) !important; 







    width: 90% !important; 







    max-width: 1200px !important; 







    display: flex !important; 







    justify-content: space-between !important; 







    align-items: center !important; 







    padding: 14px 28px !important; 







    z-index: 1000 !important; 







    border-radius: 20px !important; 







    transition: var(--transition-base) !important; 







    box-shadow: 0 16px 36px -12px rgba(139, 92, 246, 0.08) !important;







    right: auto !important;







    margin: 0 !important;







}







.dark-mode #main-header {







    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.5) !important;







}







#main-header.header-scrolled { 







    width: 85% !important; 







    max-width: 1100px !important;







    top: 16px !important; 







    border-radius: 20px !important; 







    padding: 10px 24px !important; 







    background: rgba(255, 255, 255, 0.7) !important; 







    backdrop-filter: blur(28px) !important;







    -webkit-backdrop-filter: blur(28px) !important;







    border: 1px solid rgba(255, 255, 255, 0.6) !important;







    box-shadow: 0 20px 40px -10px rgba(139, 92, 246, 0.12) !important;







}







.dark-mode #main-header.header-scrolled {







    background: rgba(9, 9, 11, 0.7) !important;







    border: 1px solid rgba(139, 92, 246, 0.2) !important;







    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important;







}







.brand-logo { 







    font-family: 'Space Grotesk', sans-serif !important; 







    font-size: 1.4rem; 







    font-weight: 800; 







    letter-spacing: -0.02em; 







    display: flex; 







    align-items: center; 







    gap: 8px; 







    color: var(--color-text); 







}







.brand-logo img {







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;







}







.brand-logo:hover img {







    transform: scale(1.05) rotate(-3deg) !important;







}







.nav-links { display: flex; gap: 8px; align-items: center; }







.nav-links a { 







    font-size: 0.85rem; 







    font-weight: 600; 







    letter-spacing: 0.02em; 







    color: var(--color-text); 







    position: relative; 







    padding: 8px 18px !important; 







    border-radius: 50px;







    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;







}







.nav-links a::after { display: none !important; }







.nav-links a:hover { 







    background: rgba(139, 92, 246, 0.08); 







    color: var(--color-primary) !important; 







}







.dark-mode .nav-links a:hover { 







    background: rgba(139, 92, 246, 0.15); 







    color: var(--color-primary) !important; 







}







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







.theme-switch { 







    width: 40px; 







    height: 40px; 







    border-radius: 50%; 







    background: transparent; 







    border: 1px solid var(--color-border); 







    display: flex; 







    justify-content: center; 







    align-items: center; 







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s !important; 







    color: var(--color-text); 







}







.theme-switch:hover { 







    background: var(--color-surface); 







    color: var(--color-primary); 







    border-color: var(--color-primary); 







    transform: rotate(360deg) scale(1.1) !important; 







}







.icon { width: 18px; height: 18px; fill: currentColor; }







.mobile-toggle { display: none; flex-direction: column; gap: 5px; width: 32px; z-index: 1001; cursor: pointer; }







.mobile-toggle span { width: 100%; height: 2px; background-color: var(--color-text); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }







.mobile-toggle.active span:nth-child(1) {







    transform: translateY(7px) rotate(45deg);







}







.mobile-toggle.active span:nth-child(2) {







    opacity: 0;







}







.mobile-toggle.active span:nth-child(3) {







    transform: translateY(-7px) rotate(-45deg);







}







.mobile-overlay { 







    position: fixed; 







    top: 0; 







    left: 100%; 







    width: 100%; 







    height: 100vh; 







    background: var(--nav-bg); 







    backdrop-filter: blur(25px); 







    -webkit-backdrop-filter: blur(25px); 







    z-index: 999; 







    display: flex; 







    flex-direction: column; 







    justify-content: center; 







    align-items: center; 







    transition: left 0.4s ease; 







}







.mobile-overlay.active { left: 0; }







.mobile-overlay a { 







    font-family: 'Space Grotesk', sans-serif !important; 







    font-size: 1.5rem; 







    font-weight: 600; 







    margin: 12px 0; 







    color: var(--color-text); 







    text-transform: uppercase; 







    transition: transform 0.3s; 







    letter-spacing: 2px;







}







.mobile-overlay a:hover { transform: scale(1.05); color: var(--color-primary); }







/* ==========================================================================







   8. HERO SECTION







   ========================================================================== */







.hero-section { 







    min-height: 100vh; 







    display: flex; 







    flex-direction: column; 







    justify-content: center; 







    align-items: center; 







    text-align: center; 







    padding: 180px 5% 100px; 







    position: relative; 







    z-index: 2; 







}







.bg-blobs {







    position: absolute;







    inset: 0;







    overflow: hidden;







    z-index: -1;







    pointer-events: none;







}







.bg-blob {







    position: absolute;







    border-radius: 50%;







    filter: blur(120px);







    opacity: 0.15;







    transition: opacity 0.5s ease;







}







.dark-mode .bg-blob {







    opacity: 0.25;







}







.bg-blob-1 {







    top: 5%;







    left: 10%;







    width: 350px;







    height: 350px;







    background: var(--color-secondary); /* Pink */







}







.bg-blob-2 {







    top: 25%;







    right: 5%;







    width: 400px;







    height: 400px;







    background: var(--color-primary); /* Purple */







}







.bg-blob-3 {







    bottom: 5%;







    left: 20%;







    width: 450px;







    height: 450px;







    background: var(--color-tertiary); /* Blue */







}







.hero-title { font-size: clamp(3rem, 7vw, 5.5rem); letter-spacing: -0.03em; margin-bottom: 24px; max-width: 1000px; }







.hero-subtitle { 







    font-size: clamp(1rem, 2vw, 1.15rem); 







    color: var(--color-text-muted); 







    max-width: 650px; 







    margin-bottom: 40px; 







    font-weight: 400; 







    line-height: 1.6; 







}







.hero-cta-group { 







    display: flex; 







    gap: 16px; 







    align-items: center; 







    z-index: 50; 







    position: relative; 







    flex-direction: column;







}







.hero-cta-buttons { display: flex; gap: 16px; align-items: center; justify-content: center; width: 100%; }







.trust-line { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 16px; font-weight: 500;}







/* ==========================================================================







   9. SCROLLING MARQUEE







   ========================================================================== */







.marquee-section { 







    padding: 30px 0; 







    border-top: 1px solid var(--color-border); 







    border-bottom: 1px solid var(--color-border); 







    background: var(--glass-bg); 







    backdrop-filter: blur(10px); 







    overflow: hidden; 







    display: flex; 







    user-select: none;







}







.marquee-content { 







    display: flex; 







    flex-shrink: 0;







    align-items: center;







    justify-content: space-around;







    min-width: 100%;







    animation: scroll-left 40s linear infinite; 







    white-space: nowrap; 







}







.marquee-item { 







    display: flex; 







    align-items: center; 







    gap: 24px; 







    padding: 0 40px; 







    font-family: 'Space Grotesk', sans-serif !important; 







    font-size: 1.1rem; 







    font-weight: 600; 







    color: var(--color-text-muted); 







    opacity: 0.7; 







    letter-spacing: 0.02em; 







    transition: 0.3s;







}







.marquee-item:hover { color: var(--color-text); opacity: 1; transform: scale(1.05);}







.marquee-item img {







    height: 45px;







    width: auto;







    max-width: 180px;







    object-fit: contain;







    display: block;







    opacity: 0.7;







    transition: opacity 0.3s ease, transform 0.3s ease;







}







.marquee-item:hover img {







    opacity: 1;







}







.marquee-item svg { 







    width: 24px; 







    height: 24px; 







    fill: var(--color-primary); 







    filter: drop-shadow(0 0 10px rgba(139,92,246,0.3));







}







@keyframes scroll-left { 







    0% { transform: translateX(0); } 







    100% { transform: translateX(-100%); } 







}







/* ==========================================================================







   10. LAYOUT GLOBALS







   ========================================================================== */







.section-wrapper { padding: var(--section-padding) 5%; max-width: 1400px; margin: auto; position: relative; z-index: 2;}







.section-header { text-align: center; margin-bottom: 80px; max-width: 800px; margin-inline: auto; }







.section-title { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 24px; letter-spacing: -0.02em; line-height: 1.2;}







/* ==========================================================================







   11. SERVICES SECTION ("WHAT WE DO")







   ========================================================================== */







.services-grid {







    display: grid;







    grid-template-columns: repeat(2, 1fr);







    gap: 32px;







    margin-top: 40px;







}







.service-card {







    padding: 40px;







    background: var(--glass-bg);







    border: 1px solid var(--color-border);







    border-radius: var(--radius-md);







    box-shadow: var(--glass-shadow);







    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);







    display: flex;







    flex-direction: column;







    gap: 20px;







    text-align: left;







}







.dark-mode .service-card {







    border-top: 1px solid rgba(255, 255, 255, 0.1);







    border-left: 1px solid rgba(255, 255, 255, 0.05);







}







.service-card:hover {







    transform: translateY(-6px);







    box-shadow: 0 30px 60px -15px rgba(139, 92, 246, 0.15);







    border-color: rgba(139, 92, 246, 0.3);







}







.service-icon-box {







    width: 64px;







    height: 64px;







    background: rgba(139, 92, 246, 0.08);







    border: 1px solid rgba(139, 92, 246, 0.15);







    border-radius: 16px;







    display: flex;







    justify-content: center;







    align-items: center;







    font-size: 1.8rem;







    color: var(--color-primary);







}







.service-card h3 {







    font-size: 1.5rem;







    font-weight: 700;







    color: var(--color-text);







}







.service-card p {







    font-size: 0.95rem;







    color: var(--color-text-muted);







    line-height: 1.6;







}







.tag-group {







    display: flex;







    flex-wrap: wrap;







    gap: 8px;







    margin-top: auto;







    padding-top: 10px;







}







.service-tag {







    font-size: 0.75rem;







    font-weight: 600;







    padding: 6px 14px;







    background: rgba(139, 92, 246, 0.06);







    color: var(--color-primary);







    border-radius: 100px;







    border: 1px solid rgba(139, 92, 246, 0.1);







}







/* ==========================================================================







   12. CREATIVE ENGINE SECTION







   ========================================================================== */







.engine-tabs-container {







    display: flex;







    justify-content: center;







    margin-bottom: 50px;







}







.engine-tabs {







    display: flex;







    gap: 8px;







    padding: 6px;







    border-radius: 100px;







    background: var(--glass-bg);







    border: 1px solid var(--glass-border);







}







.engine-tab {







    padding: 10px 24px;







    border-radius: 50px;







    font-size: 0.9rem;







    font-weight: 600;







    border: none;







    background: transparent;







    color: var(--color-text-muted);







    cursor: pointer;







    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);







}







.engine-tab:hover {







    color: var(--color-text);







}







.engine-tab.active {







    background: var(--color-text);







    color: var(--color-surface);







}







.dark-mode .engine-tab.active {







    background: var(--color-surface);







    color: var(--color-text);







}







.engine-grid {







    display: grid;







    grid-template-columns: 4.5fr 7.5fr;







    gap: 32px;







    align-items: stretch;







}







.engine-col-left, .engine-col-right {







    display: flex;







    flex-direction: column;







}







.engine-step-card {







    padding: 40px;







    height: 100%;







    display: flex;







    flex-direction: column;







    justify-content: flex-start;







}







.engine-step-num {







    font-size: 0.75rem;







    font-weight: 700;







    color: var(--color-primary);







    letter-spacing: 0.1em;







    text-transform: uppercase;







    margin-bottom: 12px;







    display: block;







}







.engine-step-title {







    font-size: 1.25rem;







    font-weight: 700;







    line-height: 1.4;







    margin-bottom: 24px;







    color: var(--color-text);







}







.engine-step-checklist {







    display: flex;







    flex-direction: column;







    gap: 14px;







    margin: 10px 0 30px;







    text-align: left;







}







.checklist-item {







    display: flex;







    align-items: center;







    gap: 12px;







    font-size: 0.9rem;







    color: var(--color-text-muted);







    font-weight: 500;







}







.checklist-item svg {







    width: 16px;







    height: 16px;







    color: var(--color-primary);







    flex-shrink: 0;







}







.engine-showcase-container {







    margin-top: 24px;







    border-radius: 16px;







    overflow: hidden;







    position: relative;







    aspect-ratio: 16 / 10;







    border: 1px solid var(--color-border);







}







.engine-showcase-container .tab-pane {







    height: 100%;







}







@media (min-width: 992px) {







    .engine-col-left .engine-step-card {







        height: auto;







        position: sticky;







        top: 130px;







        z-index: 10;







    }







}







.showcase-card {







    width: 100%;







    height: 100%;







    position: relative;







}







.showcase-card img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    transition: transform 0.6s ease;







}







.showcase-card:hover img {







    transform: scale(1.03);







}







.card-badge {







    position: absolute;







    bottom: 16px;







    left: 16px;







    background: rgba(15, 23, 42, 0.75);







    backdrop-filter: blur(8px);







    color: #fff;







    padding: 6px 14px;







    border-radius: 100px;







    font-size: 0.75rem;







    font-weight: 600;







}







.engine-showcase-grid-3 {







    margin-top: auto;







}







.showcase-grid-container {







    display: grid;







    grid-template-columns: repeat(3, 1fr);







    gap: 16px;







}







.vertical-card {







    border-radius: 12px;







    overflow: hidden;







    position: relative;







    aspect-ratio: 9 / 16;







    border: 1px solid var(--color-border);







    background: rgba(0,0,0,0.03);







    transition: transform 0.4s ease, box-shadow 0.4s ease;







}







.vertical-card img,







.vertical-card video {







    width: 100%;







    height: 100%;







    object-fit: cover;







    transition: transform 0.6s ease;







}







.vertical-card:hover {







    transform: translateY(-4px);







    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15);







}







.vertical-card:hover img,







.vertical-card:hover video {







    transform: scale(1.05);







}







.card-label {







    position: absolute;







    bottom: 12px;







    left: 50%;







    transform: translateX(-50%);







    background: rgba(15, 23, 42, 0.75);







    backdrop-filter: blur(8px);







    color: #fff;







    padding: 4px 10px;







    border-radius: 6px;







    font-size: 0.7rem;







    font-weight: 600;







    white-space: nowrap;







    text-align: center;







}







.video-card {







    cursor: pointer;







}







.play-btn-circle {







    position: absolute;







    top: 50%;







    left: 50%;







    transform: translate(-50%, -50%);







    width: 44px;







    height: 44px;







    background: rgba(255, 255, 255, 0.85);







    border-radius: 50%;







    display: flex;







    justify-content: center;







    align-items: center;







    font-size: 0.9rem;







    color: #0f172a;







    transition: all 0.3s ease;







    box-shadow: 0 4px 12px rgba(0,0,0,0.15);







    pointer-events: none;







}







.vertical-card:hover .play-btn-circle {







    background: var(--color-primary);







    color: #fff;







    transform: translate(-50%, -50%) scale(1.1);







}







/* Tab panes management */







.engine-grid .tab-pane {







    display: none;







    opacity: 0;







}







.engine-grid .tab-pane.active {







    display: block;







    opacity: 1;







}







.engine-grid .showcase-grid-container {







    opacity: inherit;







    transition: inherit;







}







/* ==========================================================================







   13. STATS SECTION







   ========================================================================== */







.stats-wrapper { 







    display: grid !important; 







    grid-template-columns: repeat(4, 1fr) !important; 







    gap: 24px !important; 







    padding: 40px 60px !important; 







    background: var(--glass-bg) !important;







    backdrop-filter: blur(32px) !important;







    -webkit-backdrop-filter: blur(32px) !important;







    border: 1px solid var(--glass-border) !important;







    border-radius: var(--radius-md) !important;







    box-shadow: var(--glass-shadow) !important;







}







.stat-item { 







    text-align: center; 







    padding: 24px 20px; 







    border-radius: var(--radius-md);







    border: 1px solid transparent;







    transition: transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);







}







.stat-item:hover { 







    transform: translateY(-6px); 







    background: rgba(255, 255, 255, 0.45);







    backdrop-filter: blur(12px);







    -webkit-backdrop-filter: blur(12px);







    border-color: rgba(255, 255, 255, 0.6);







    box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.8);







}







.dark-mode .stat-item:hover {







    background: rgba(255, 255, 255, 0.04);







    border-color: rgba(255, 255, 255, 0.08);







    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05);







}







.stat-number { 







    font-family: 'Plus Jakarta Sans', sans-serif !important; 







    font-size: 3.5rem; 







    font-weight: 800; 







    background-image: var(--gradient-master);







    -webkit-background-clip: text;







    background-clip: text;







    color: transparent;







    -webkit-text-fill-color: transparent;







    display: inline-block;







    margin-bottom: 4px; 







    line-height: 1;







}







.stat-desc { 







    font-size: 0.75rem; 







    font-weight: 600; 







    color: var(--color-text-muted); 







    text-transform: uppercase; 







    letter-spacing: 0.05em;







    margin-top: 4px;







}







/* ==========================================================================







   14. PORTFOLIO SHOWCASE







   ========================================================================== */







.section-badge-gradient {







    display: inline-flex;







    align-items: center;







    gap: 8px;







    padding: 6px 16px;







    border-radius: 100px;







    font-size: 0.75rem;







    font-weight: 700;







    letter-spacing: 0.1em;







    text-transform: uppercase;







    margin-bottom: 24px;







    position: relative;







    background: var(--color-bg);







    color: var(--color-primary);







    border: 1px solid transparent;







    transition: var(--transition-base);







    backdrop-filter: blur(10px);







}







.section-badge-gradient::before {







    content: '';







    position: absolute;







    inset: -1px;







    border-radius: 100px;







    padding: 1px;







    background: var(--gradient-master);







    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);







    -webkit-mask-composite: xor;







    mask-composite: exclude;







    pointer-events: none;







    z-index: 1;







}







.portfolio-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }







.filter-btn { 







    padding: 8px 20px; 







    border-radius: 100px; 







    border: 1px solid var(--color-border); 







    background: transparent; 







    color: var(--color-text-muted); 







    font-size: 0.85rem; 







    font-weight: 500; 







    cursor: pointer; 







    transition: var(--transition-base); 







}







.filter-btn.active, .filter-btn:hover { 







    background: var(--color-text); 







    color: var(--color-surface); 







    border-color: var(--color-text); 







    transform: scale(1.05);







}







.portfolio-row-title {







    font-family: 'Space Grotesk', sans-serif !important;







    font-size: 1.25rem;







    font-weight: 700;







    text-transform: lowercase;







    color: var(--color-text);







    margin-bottom: 20px;







    text-align: left;







    display: block;







}







.portfolio-slider-track {







    display: flex;







    gap: 24px;







    overflow-x: auto;







    padding: 10px 10px 40px;







    scrollbar-width: none;







    -ms-overflow-style: none;







}







.portfolio-slider-track::-webkit-scrollbar {







    display: none;







}







.portfolio-card {







    position: relative;







    border-radius: var(--radius-md);







    overflow: hidden;







    background: var(--color-surface);







    flex-shrink: 0;







    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.06), 0 0 1px 0 rgba(15, 23, 42, 0.12) !important;







    border: 1px solid var(--color-border);







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;







    display: block;







}







.dark-mode .portfolio-card {







    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 1px 0 rgba(255, 255, 255, 0.1) !important;







}







.portfolio-card:hover {







    transform: translateY(-8px);







    box-shadow: 0 30px 60px -15px rgba(139, 92, 246, 0.15), 0 0 1px 0 rgba(139, 92, 246, 0.3) !important;







    border-color: rgba(139, 92, 246, 0.3) !important;







}







.portfolio-card img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    transition: transform 0.8s ease;







}







.portfolio-card:hover img {







    transform: scale(1.04);







}







.portfolio-card .play-btn-circle {







    width: 48px;







    height: 48px;







    font-size: 0.95rem;







    background: #ffffff !important;







    color: #2563eb !important; /* Premium brand blue */







    display: inline-flex;







    align-items: center;







    justify-content: center;







    padding-left: 2px;







}







.portfolio-card:hover .play-btn-circle {







    background: #2563eb !important;







    color: #fff !important;







}







.portfolio-overlay { 







    position: absolute; 







    inset: 0; 







    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); 







    display: flex; 







    flex-direction: column; 







    justify-content: flex-end; 







    padding: 24px; 







    opacity: 0; 







    transition: opacity 0.4s ease; 







    text-align: left;







}







.portfolio-card:hover .portfolio-overlay { opacity: 1; }







.port-cat { 







    color: #fff; 







    font-size: 0.7rem; 







    font-weight: 700; 







    text-transform: uppercase; 







    letter-spacing: 0.05em; 







    margin-bottom: 6px; 







    background: var(--color-primary); 







    padding: 4px 10px; 







    border-radius: 100px; 







    align-self: flex-start;







}







.port-title { 







    color: #ffffff; 







    font-size: 1.2rem; 







    font-family: 'Space Grotesk', sans-serif !important; 







    margin: 0; 







    font-weight: 700;







}







/* Custom layout variants to match Mockup Image 2 */







.portfolio-card.card-style-bleed img {







    width: 100%;







    height: 100%;







    object-fit: cover;







}







.portfolio-card.card-style-split {







    display: flex;







    flex-direction: row;







    align-items: stretch;







}







.portfolio-card.card-style-split .card-split-left {







    flex: 1.1;







    padding: 30px 24px;







    display: flex;







    flex-direction: column;







    justify-content: space-between;







    align-items: flex-start;







    text-align: left;







    box-sizing: border-box;







}







.portfolio-card.card-style-split .card-split-right {







    width: 45%;







    height: 100%;







    overflow: hidden;







    flex-shrink: 0;







}







.portfolio-card.card-style-split .card-split-right img {







    width: 100%;







    height: 100%;







    object-fit: cover;







}







.portfolio-card.card-style-light,







.portfolio-card.card-style-dark {







    box-sizing: border-box;







    text-decoration: none;







}







.card-style-c-content {







    width: 100%;







    height: 100%;







    display: flex;







    flex-direction: column;







    justify-content: space-between;







    align-items: center;







    padding: 40px 24px;







    box-sizing: border-box;







}







.card-deco-icon {







    font-size: 2.5rem;







    margin-top: 10px;







    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));







    transition: transform 0.4s ease;







}







.portfolio-card:hover .card-deco-icon {







    transform: scale(1.15) rotate(5deg);







}







.card-text-group {







    display: flex;







    flex-direction: column;







    gap: 8px;







    align-items: center;







}







.port-card-title {







    font-family: 'Space Grotesk', sans-serif !important;







    font-size: 1.35rem;







    font-weight: 800;







    margin: 0;







    line-height: 1.2;







}







.port-card-subtitle {







    font-family: 'Inter', sans-serif !important;







    font-size: 0.85rem;







    color: var(--color-text-muted);







    margin: 0;







    font-weight: 500;







    text-transform: lowercase;







}







.port-cat-inline {







    font-size: 0.7rem;







    font-weight: 700;







    text-transform: uppercase;







    letter-spacing: 0.05em;







    background: var(--color-primary);







    color: #fff;







    padding: 5px 12px;







    border-radius: 100px;







}







.card-split-left .port-cat {







    margin-bottom: 0;







}







.card-split-left .port-title {







    font-size: 1.35rem;







    font-weight: 800;







    color: inherit;







    line-height: 1.2;







    margin: 16px 0;







}







.play-btn-circle-static {







    width: 44px;







    height: 44px;







    border-radius: 50%;







    background: #ffffff !important;







    color: #2563eb !important;







    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;







    display: flex;







    align-items: center;







    justify-content: center;







    font-size: 0.85rem;







    padding-left: 2px;







    transition: transform 0.4s ease, background-color 0.4s ease, color 0.4s ease !important;







}







.portfolio-card:hover .play-btn-circle-static {







    background: #2563eb !important;







    color: #ffffff !important;







    transform: scale(1.1) !important;







}







.portfolio-card.card-style-light {







    background: #ffffff;







    border-color: rgba(15, 23, 42, 0.08);







    color: #0f172a;







}







.portfolio-card.card-style-light .port-card-title,







.portfolio-card.card-style-light .port-title {







    color: #0f172a;







}







.portfolio-card.card-style-light .port-card-subtitle {







    color: rgba(15, 23, 42, 0.5);







}







.dark-mode .portfolio-card.card-style-light {







    background: rgba(255, 255, 255, 0.04);







    border-color: rgba(255, 255, 255, 0.08);







    color: #f8fafc;







}







.dark-mode .portfolio-card.card-style-light .port-card-title,







.dark-mode .portfolio-card.card-style-light .port-title {







    color: #f8fafc;







}







.dark-mode .portfolio-card.card-style-light .port-card-subtitle {







    color: rgba(255, 255, 255, 0.5);







}







.portfolio-card.card-style-dark {







    background: #090d16;







    border-color: rgba(255, 255, 255, 0.05);







    color: #f8fafc;







}







.portfolio-card.card-style-dark .port-title {







    color: #f8fafc;







}







/* ==========================================================================







   15. TESTIMONIALS SLIDER







   ========================================================================== */







.testimonials-track { 







    display: flex; 







    gap: 24px; 







    overflow-x: auto; 







    padding: 20px 24px 40px; 







    margin: 0 -24px;







    scrollbar-width: none; 







}







.testimonials-track::-webkit-scrollbar { display: none; }







.testimonial-card { 







    min-width: 400px; 







    padding: 40px; 







    transition: transform 0.4s ease;







    text-align: left;







}







.testimonial-card:hover { transform: translateY(-4px); }







.stars { display: flex; gap: 4px; margin-bottom: 20px; font-size: 1.2rem; color: var(--color-text); }







.review-text { font-size: 1.125rem; line-height: 1.7; margin-bottom: 32px; color: var(--color-text); }







.highlight-bg { font-weight: 600; color: var(--color-primary); }







.client-profile { display: flex; align-items: center; gap: 16px; }







.client-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }







.client-meta h4 { font-size: 1.125rem; margin-bottom: 2px; font-weight: 600; }







.client-meta p { font-size: 0.875rem; color: var(--color-text-muted); }







/* ==========================================================================







   16. PRICING CARDS







   ========================================================================== */







.pricing-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 60px; }







.billing-toggle { 







    display: flex; 







    align-items: center; 







    gap: 16px; 







    background: var(--color-surface); 







    padding: 6px 12px; 







    border-radius: 100px; 







    border: 1px solid var(--color-border); 







}







.toggle-text { font-weight: 500; font-size: 0.85rem; color: var(--color-text-muted); transition: 0.3s; }







.toggle-text.active { color: var(--color-text); font-weight: 600;}







.switch-base { position: relative; width: 44px; height: 24px; }







.switch-base input { opacity: 0; width: 0; height: 0; }







.switch-slider { position: absolute; inset: 0; background: var(--color-border); border-radius: 30px; cursor: pointer; transition: 0.3s; }







.switch-slider::before { 







    content: ""; 







    position: absolute; 







    height: 18px; 







    width: 18px; 







    left: 3px; 







    bottom: 3px; 







    background: var(--color-text); 







    border-radius: 50%; 







    transition: 0.3s; 







}







input:checked + .switch-slider { background: var(--color-text); }







input:checked + .switch-slider::before { transform: translateX(20px); background: var(--color-surface); }







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







.pricing-card { 







    padding: 40px; 







    display: flex; 







    flex-direction: column; 







    transition: transform 0.4s; 







    background: var(--glass-bg); 







    backdrop-filter: blur(24px); 







    border: 1px solid var(--color-border); 







    border-radius: var(--radius-md);







    text-align: left;







}







.pricing-card.featured { 







    border: 1px solid rgba(139, 92, 246, 0.3); 







    transform: scale(1.02); 







    background-color: var(--color-surface); 







    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04); 







    position: relative;







}







.dark-mode .pricing-card.featured { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); }







.featured-tag { 







    position: absolute; 







    top: -12px; 







    left: 50%; 







    transform: translateX(-50%); 







    background: var(--color-surface); 







    color: var(--color-primary); 







    border: 1px solid rgba(139, 92, 246, 0.3); 







    padding: 4px 16px; 







    border-radius: 100px; 







    font-size: 0.7rem; 







    font-weight: 600; 







    text-transform: uppercase; 







    letter-spacing: 0.05em;







}







.pack-name { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }







.pack-desc { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 24px; min-height: 40px;}







.pack-price { 







    font-size: 3rem; 







    font-weight: 700; 







    margin-bottom: 32px; 







    display: flex; 







    align-items: flex-start; 







    color: var(--color-text); 







    line-height: 1;







}







.pack-currency { font-size: 1.25rem; margin-top: 6px; margin-right: 4px; font-weight: 500;}







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







.pack-features li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: 0.9rem; color: var(--color-text); }







.pack-features svg { width: 16px; height: 16px; fill: var(--color-text-muted); flex-shrink: 0; margin-top: 2px;}







.featured .pack-features svg { fill: var(--color-primary); }







/* ==========================================================================







   17. FAQ ACCORDION







   ========================================================================== */







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







.faq-item { 







    border-bottom: 1px solid var(--color-border); 







    margin-bottom: 16px; 







    padding: 12px 32px; 







    background: var(--glass-bg); 







    backdrop-filter: blur(20px); 







    border-radius: var(--radius-md); 







    box-shadow: var(--glass-shadow); 







    transition: var(--transition-base);







}







.faq-item:hover { border-color: rgba(139, 92, 246, 0.4); transform: translateY(-2px);}







.faq-question { 







    width: 100%; 







    display: flex; 







    justify-content: space-between; 







    align-items: center; 







    background: transparent; 







    border: none; 







    font-size: 1.15rem; 







    font-weight: 600; 







    color: var(--color-text); 







    text-align: left; 







    padding: 16px 0; 







    cursor: pointer; 







    transition: color 0.3s;







}







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







.faq-icon { font-size: 1.5rem; font-weight: 300; transition: transform 0.4s ease; color: var(--color-text-muted); line-height: 1;}







.faq-item.active .faq-icon { transform: rotate(45deg); color: var(--color-text); }







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







.faq-answer p { padding: 0 0 24px 0; margin: 0; color: var(--color-text-muted); line-height: 1.7; font-size: 1rem; text-align: left; }







/* ==========================================================================







   18. CLOSING CTA







   ========================================================================== */







.cta-section { padding: 0 5%; margin-bottom: 80px; z-index: 2; position: relative;}







.cta-box { 







    padding: 80px 5%; 







    text-align: center; 







    border-radius: var(--radius-lg); 







    background: var(--glass-bg); 







    border: 1px solid var(--color-border); 







    position: relative; 







    overflow: hidden; 







    box-shadow: var(--glass-shadow); 







    backdrop-filter: blur(20px);







}







.cta-box h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 16px; }







/* ==========================================================================







   19. MASSIVE FOOTER







   ========================================================================== */







.main-footer { 







    padding: 80px 5% 40px; 







    background: transparent; 







    border-top: 1px solid var(--color-border); 







    z-index: 2; 







    position: relative;







}







.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; text-align: left; }







.footer-brand-info p { color: var(--color-text-muted); margin-top: 16px; max-width: 350px; font-size: 0.9rem; }







.tech-stack { margin-top: 32px; }







.tech-stack h5 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text); margin-bottom: 12px;}







.tech-logos { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;}







.tech-box { 







    font-size: 0.8rem; 







    color: var(--color-text-muted); 







    padding: 8px 16px; 







    border: 1px solid var(--color-border); 







    border-radius: 8px; 







    background: var(--color-surface); 







}







.footer-heading { font-size: 0.9rem; margin-bottom: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;}







.footer-nav { display: flex; flex-direction: column; gap: 12px; }







.footer-nav a { color: var(--color-text-muted); transition: 0.3s; font-size: 0.9rem; }







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







.footer-bottom { 







    display: flex; 







    justify-content: space-between; 







    align-items: center; 







    padding-top: 32px; 







    border-top: 1px solid var(--color-border); 







    flex-wrap: wrap; 







    gap: 24px; 







    position: relative; 







    z-index: 1;







}







.studio-led-by-container {







    display: flex;







    flex-direction: column;







    align-items: center;







    gap: 8px;







}







.studio-led-heading {







    font-size: 0.75rem;







    font-weight: 700;







    text-transform: uppercase;







    letter-spacing: 0.05em;







    color: var(--color-text-muted);







}







.studio-led-box {







    display: flex;







    align-items: center;







    background: var(--color-surface);







    border: 1px solid var(--color-border);







    border-radius: var(--radius-md);







    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);







    overflow: hidden;







}







.studio-led-col {







    display: flex;







    align-items: center;







    gap: 8px;







    padding: 10px 18px;







    text-decoration: none;







    color: var(--color-text);







    font-weight: 600;







    font-size: 0.85rem;







    transition: background-color 0.3s ease, color 0.3s ease;







}







.studio-led-col:not(:last-child) {







    border-right: 1px solid var(--color-border);







}







a.studio-led-col:hover {







    background: rgba(139, 92, 246, 0.06);







    color: var(--color-primary);







}







.led-icon {







    width: 16px;







    height: 16px;







    flex-shrink: 0;







}







.footer-social-icons {







    display: flex;







    align-items: center;







    gap: 12px;







}







.social-icon-link {







    display: flex;







    align-items: center;







    justify-content: center;







    width: 36px;







    height: 36px;







    border-radius: 50%;







    background: var(--color-surface);







    border: 1px solid var(--color-border);







    color: var(--color-text);







    transition: all 0.3s ease;







}







.social-icon-link svg {







    width: 16px;







    height: 16px;







}







.social-icon-link:hover {







    background: var(--color-primary);







    border-color: var(--color-primary);







    color: #ffffff;







    transform: translateY(-2px);







    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);







}







/* Floating Social Sidebar */







.floating-social-sidebar {







    position: fixed;







    right: 24px;







    top: 50%;







    transform: translateY(-50%) translateX(100px);







    display: flex;







    flex-direction: column;







    gap: 12px;







    padding: 12px;







    border-radius: 50px;







    background: var(--glass-bg);







    border: 1px solid var(--color-border);







    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);







    backdrop-filter: blur(16px);







    -webkit-backdrop-filter: blur(16px);







    z-index: 999;







    opacity: 0;







    pointer-events: none;







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;







}







.floating-social-sidebar.visible {







    transform: translateY(-50%) translateX(0);







    opacity: 1;







    pointer-events: auto;







}







.floating-social-link {







    display: flex;







    align-items: center;







    justify-content: center;







    width: 40px;







    height: 40px;







    border-radius: 50%;







    background: var(--color-surface);







    border: 1px solid var(--color-border);







    color: var(--color-text);







    transition: all 0.3s ease;







}







.floating-social-link svg {







    width: 18px;







    height: 18px;







}







.floating-social-link:hover {







    background: var(--color-primary);







    border-color: var(--color-primary);







    color: #ffffff;







    transform: scale(1.1);







    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);







}







.dark-mode .floating-social-sidebar {







    background: rgba(15, 23, 42, 0.35);







    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);







}







@media (max-width: 768px) {







    .floating-social-sidebar {







        right: 16px;







        padding: 8px;







        gap: 8px;







    }







    .floating-social-link {







        width: 36px;







        height: 36px;







    }







    .floating-social-link svg {







        width: 16px;







        height: 16px;







    }







}







/* ==========================================================================







   21. CONTACT PAGE STYLES







   ========================================================================== */







.contact-page-main {







    padding-top: 140px;







    position: relative;







    z-index: 2;







}







.contact-hero-section {







    padding-bottom: 100px;







}







.contact-container {







    display: grid;







    grid-template-columns: 1.1fr 1fr;







    gap: 60px;







    max-width: 1200px;







    margin: 0 auto;







    align-items: start;







    text-align: left;







}







.contact-info-column {







    display: flex;







    flex-direction: column;







    align-items: flex-start;







}







.contact-title {







    font-family: 'Space Grotesk', sans-serif !important;







    font-size: clamp(2.25rem, 4.5vw, 3.75rem);







    font-weight: 800;







    line-height: 1.1;







    color: var(--color-text);







    margin: 20px 0 24px;







}







.contact-subtitle {







    font-family: 'Inter', sans-serif !important;







    font-size: 1.05rem;







    color: var(--color-text-muted);







    line-height: 1.7;







    margin-bottom: 40px;







}







.contact-methods {







    display: flex;







    flex-direction: column;







    gap: 20px;







    width: 100%;







    margin-bottom: 40px;







}







.contact-card {







    display: flex;







    gap: 20px;







    align-items: center;







    padding: 24px;







    border-radius: var(--radius-md);







    background: var(--color-surface);







    border: 1px solid var(--color-border);







    text-decoration: none;







    color: var(--color-text);







    transition: all 0.3s ease;







    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);







}







.contact-card:hover {







    border-color: rgba(139, 92, 246, 0.3);







    transform: translateY(-4px);







    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.08);







}







.contact-card-icon-wrapper {







    width: 52px;







    height: 52px;







    border-radius: 50%;







    display: flex;







    align-items: center;







    justify-content: center;







    background: rgba(139, 92, 246, 0.08);







    color: var(--color-primary);







    flex-shrink: 0;







    transition: all 0.3s ease;







}







.contact-card:hover .contact-card-icon-wrapper {







    background: var(--color-primary);







    color: #ffffff;







}







.contact-card-icon {







    width: 22px;







    height: 22px;







}







.contact-card-details {







    display: flex;







    flex-direction: column;







    align-items: flex-start;







}







.contact-card-details h3 {







    font-family: 'Space Grotesk', sans-serif !important;







    font-size: 1.1rem;







    font-weight: 700;







    margin: 0 0 4px;







    color: var(--color-text);







}







.contact-card-details p {







    font-family: 'Inter', sans-serif !important;







    font-size: 0.95rem;







    color: var(--color-text-muted);







    margin: 0 0 8px;







}







.contact-card-details span {







    font-family: 'Inter', sans-serif !important;







    font-size: 0.8rem;







    font-weight: 700;







    color: var(--color-primary);







    text-transform: uppercase;







    letter-spacing: 0.05em;







}







.contact-misc-info {







    display: flex;







    flex-direction: column;







    gap: 12px;







    border-top: 1px solid var(--color-border);







    padding-top: 28px;







    width: 100%;







}







.misc-item {







    font-family: 'Inter', sans-serif !important;







    font-size: 0.9rem;







    color: var(--color-text-muted);







    margin: 0;







}







.contact-form-panel {







    padding: 40px;







    border-radius: var(--radius-lg);







}







.form-title {







    font-family: 'Space Grotesk', sans-serif !important;







    font-size: 1.75rem;







    font-weight: 800;







    margin: 0 0 32px;







    text-align: left;







}







.form-row {







    display: flex;







    gap: 20px;







    margin-bottom: 20px;







}







.form-row .form-group {







    flex: 1;







    margin-bottom: 0;







    position: relative;







    text-align: left;







}







.contact-form-element .form-input,







.contact-form-element .form-textarea {







    width: 100%;







    padding: 16px 20px;







    border-radius: 8px;







    border: 1px solid var(--color-border);







    background: rgba(255, 255, 255, 0.02);







    color: var(--color-text);







    font-family: 'Inter', sans-serif !important;







    font-size: 0.95rem;







    transition: all 0.3s ease;







    box-sizing: border-box;







}







.contact-form-element .form-input::placeholder,







.contact-form-element .form-textarea::placeholder {







    color: var(--color-text-muted);







    opacity: 0.7;







}







.contact-form-element .form-input:focus,







.contact-form-element .form-textarea:focus {







    outline: none;







    border-color: var(--color-primary);







    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);







    background: var(--color-surface);







}







.contact-form-element .form-textarea {







    height: 140px;







    resize: none;







}







.contact-form-element .submit-form-btn {







    width: auto !important;







    min-width: 140px;







    padding: 14px 32px !important;







    font-size: 1.05rem !important;







    font-weight: 600 !important;







    border-radius: 12px !important;







    cursor: pointer;







    display: block !important;







    text-align: center;







    transition: all 0.3s ease;







}







.form-section-label {







    display: block;







    font-family: 'Inter', sans-serif !important;







    font-size: 0.8rem;







    font-weight: 700;







    text-transform: uppercase;







    letter-spacing: 0.05em;







    color: var(--color-text-muted);







    margin-bottom: 12px;







}







.pills-grid {







    display: flex;







    flex-wrap: wrap;







    gap: 10px;







}







.pill-btn {







    padding: 10px 18px;







    border-radius: 30px;







    border: 1px solid var(--color-border);







    background: var(--color-surface);







    color: var(--color-text-muted);







    font-family: 'Inter', sans-serif !important;







    font-size: 0.85rem;







    font-weight: 600;







    cursor: pointer;







    transition: all 0.3s ease;







}







.pill-btn:hover {







    border-color: var(--color-primary);







    color: var(--color-primary);







}







.pill-btn.active {







    border-color: var(--color-primary);







    background: var(--color-primary);







    color: #ffffff !important;







    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);







}







.submit-form-btn {







    margin-top: 12px;







}







.submit-form-btn:hover .btn-arrow {







    transform: translateX(4px);







}







/* Success State Styles */







.contact-success-state {







    display: flex;







    flex-direction: column;







    align-items: center;







    text-align: center;







    padding: 40px 20px;







    animation: scaleUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;







}







.success-icon-wrapper {







    width: 72px;







    height: 72px;







    border-radius: 50%;







    background: rgba(16, 185, 129, 0.1);







    color: #10b981;







    display: flex;







    align-items: center;







    justify-content: center;







    margin-bottom: 24px;







    border: 1px solid rgba(16, 185, 129, 0.2);







}







.success-icon {







    width: 36px;







    height: 36px;







}







.contact-success-state h2 {







    font-family: 'Space Grotesk', sans-serif !important;







    font-size: 2rem;







    font-weight: 800;







    margin: 0 0 12px;







}







.contact-success-state p {







    font-family: 'Inter', sans-serif !important;







    font-size: 0.95rem;







    color: var(--color-text-muted);







    line-height: 1.6;







    max-width: 320px;







    margin: 0;







}







@keyframes scaleUp {







    from {







        transform: scale(0.9);







        opacity: 0;







    }







    to {







        transform: scale(1);







        opacity: 1;







    }







}







@media (max-width: 992px) {







    .contact-container {







        grid-template-columns: 1fr;







        gap: 50px;







    }







    .contact-page-main {







        padding-top: 120px;







    }







}







@media (max-width: 768px) {







    .contact-form-panel {







        padding: 30px 20px;







    }







}







/* ==========================================================================







   20. RESPONSIVE DESIGN & MOBILE FIXES







   ========================================================================== */







@media (max-width: 1200px) {







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







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







    .pricing-card.featured { transform: scale(1); }







    .footer-top { grid-template-columns: 1fr 1fr; }







}







@media (max-width: 992px) {







    #main-header, #main-header.header-scrolled { 







        padding: 14px 20px !important; 







        width: 100% !important; 







        top: 0 !important; 







        left: 0 !important;







        transform: none !important;







        border-radius: 0 !important; 







        background: var(--nav-bg) !important; 







        backdrop-filter: blur(20px) !important;







        -webkit-backdrop-filter: blur(20px) !important;







        border: none !important; 







        border-bottom: 1px solid var(--color-border) !important;







        right: 0 !important;







        margin: 0 !important;







    }







    .nav-links, #main-header .header-actions .btn { display: none !important; } 







    .mobile-toggle { display: flex !important; }







    







    .services-grid, .process-grid { grid-template-columns: 1fr; }







    .stats-wrapper { 







        grid-template-columns: repeat(2, 1fr) !important; 







        padding: 30px 24px !important; 







        gap: 16px !important;







    }







    .engine-grid { grid-template-columns: 1fr !important; }







    .engine-step-card { padding: 30px !important; }







    * { cursor: auto !important; }







    .cursor-dot, .cursor-ring { display: none !important; }







}







@media (max-width: 768px) {







    .pricing-grid, .footer-top { grid-template-columns: 1fr; }







    .testimonial-card { min-width: 300px; padding: 24px; }







    .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }







    







    /* Creative Engine scrollable tabs on mobile */







    .engine-tabs-container {







        justify-content: flex-start;







        overflow-x: auto;







        padding-bottom: 12px;







        -webkit-overflow-scrolling: touch;







        width: 100%;







    }







    .engine-tabs {







        flex-wrap: nowrap;







        white-space: nowrap;







        border-radius: 20px;







    }







    .engine-tab {







        padding: 8px 16px;







        font-size: 0.8rem;







    }







    







    /* Pricing padding adjustments */







    .pricing-card {







        padding: 24px !important;







    }







    







    /* Lightbox elements scaling */







    .lightbox-arrow {







        width: 44px;







        height: 44px;







    }







    .lightbox-prev {







        left: 10px;







    }







    .lightbox-next {







        right: 10px;







    }







    .lightbox-close {







        top: 15px;







        right: 15px;







        width: 44px;







        height: 44px;







        font-size: 1.8rem;







    }







}







@media (max-width: 576px) {







    /* Hero Buttons vertical stacking */







    .hero-cta-buttons {







        flex-direction: column;







        width: 100%;







        gap: 12px;







    }







    .hero-cta-buttons .btn {







        width: 100% !important;







    }







    







    /* Stats wrapper vertical stacking to prevent overflow */







    .stats-wrapper {







        grid-template-columns: 1fr !important;







        padding: 30px 20px !important;







        gap: 20px !important;







    }







    .stat-number {







        font-size: 2.8rem !important;







    }







    







    /* Contact form fields vertical stacking */







    .form-row {







        flex-direction: column;







        gap: 16px;







        margin-bottom: 16px;







    }







}







@media (max-width: 480px) {







    /* Archive grids single-column layout */







    .blog-archive-grid, .grafly-archive-grid {







        grid-template-columns: 1fr !important;







        padding: 0 16px !important;







        gap: 20px !important;







    }







    







    /* Footer led-by list clean wrap on mobile */







    .studio-led-box {







        flex-wrap: wrap;







        justify-content: center;







        border-radius: var(--radius-sm);







    }







    .studio-led-col {







        padding: 8px 12px;







        font-size: 0.8rem;







    }







}







/* ==========================================================================







   21. CPT GRAFLY ARCHIVE & SINGLE TEMPLATE STYLES







   ========================================================================== */







/* --- Archive / Listing Page --- */







.archive-grafly-header {







    padding-top: 160px;







    padding-bottom: 60px;







    text-align: center;







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







}







.archive-grafly-title {







    font-size: clamp(2.5rem, 6vw, 4.5rem);







    margin-bottom: 12px;







}







.archive-subtitle {







    font-size: 1.125rem;







    color: var(--color-text-muted);







    max-width: 600px;







    margin: 0 auto;







}







.grafly-archive-grid {







    display: grid;







    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));







    gap: 32px;







    max-width: 1200px;







    margin: 40px auto 120px;







    padding: 0 24px;







}







.grafly-archive-card {







    position: relative;







    border-radius: var(--radius-md);







    aspect-ratio: 10 / 12;







    overflow: hidden;







    background: var(--glass-bg);







    border: 1px solid var(--glass-border);







    box-shadow: var(--glass-shadow);







    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);







}







.grafly-archive-card:hover {







    transform: translateY(-8px);







    border-color: rgba(139, 92, 246, 0.4);







    box-shadow: 0 30px 60px -15px rgba(139, 92, 246, 0.25);







}







.archive-card-image-box {







    width: 100%;







    height: 100%;







    position: relative;







}







.archive-card-image-box img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);







}







.grafly-archive-card:hover .archive-card-image-box img {







    transform: scale(1.06);







}







.archive-card-overlay {







    position: absolute;







    inset: 0;







    background: linear-gradient(to top, rgba(9, 9, 11, 0.95) 0%, rgba(9, 9, 11, 0.4) 60%, transparent 100%);







    display: flex;







    flex-direction: column;







    justify-content: flex-end;







    padding: 36px;







    z-index: 2;







}







.archive-card-tags {







    transform: translateY(12px);







    opacity: 0;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;







    margin-bottom: 10px;







}







.grafly-archive-card:hover .archive-card-tags {







    transform: translateY(0);







    opacity: 1;







}







.archive-card-tag {







    display: inline-block;







    font-size: 0.72rem;







    font-weight: 700;







    text-transform: uppercase;







    letter-spacing: 0.08em;







    color: var(--color-primary);







    background: rgba(139, 92, 246, 0.12);







    padding: 4px 10px;







    border-radius: 50px;







    margin-right: 6px;







}







.archive-card-title {







    font-family: 'Space Grotesk', sans-serif !important;







    font-size: 1.625rem;







    font-weight: 700;







    color: #ffffff;







    margin: 0;







    line-height: 1.2;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);







}







.grafly-archive-card:hover .archive-card-title {







    transform: translateY(-4px);







}







.archive-card-link {







    position: absolute;







    inset: 0;







    z-index: 3;







}







/* --- Single / Detail Page --- */







.grafly-single-hero {







    position: relative;







    height: 60vh;







    min-height: 450px;







    display: flex;







    align-items: center;







    justify-content: center;







    background-size: cover;







    background-position: center;







    overflow: hidden;







}







.grafly-single-hero::before {







    content: "";







    position: absolute;







    inset: 0;







    background: radial-gradient(circle, rgba(9, 9, 11, 0.4) 0%, rgba(9, 9, 11, 0.88) 100%);







    z-index: 1;







}







.single-hero-content {







    position: relative;







    z-index: 2;







    text-align: center;







    padding: 0 24px;







    max-width: 800px;







}







.single-hero-category {







    background: rgba(255, 255, 255, 0.08);







    backdrop-filter: blur(12px);







    -webkit-backdrop-filter: blur(12px);







    border: 1px solid rgba(255, 255, 255, 0.15);







    color: #ffffff;







    padding: 6px 18px;







    border-radius: 100px;







    font-size: 0.78rem;







    font-weight: 700;







    text-transform: uppercase;







    letter-spacing: 0.12em;







    display: inline-block;







    margin-bottom: 24px;







    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);







}







.single-hero-title {







    font-family: 'Space Grotesk', sans-serif !important;







    font-size: clamp(2.5rem, 6vw, 4.5rem);







    color: #ffffff;







    text-transform: uppercase;







    font-weight: 800;







    margin: 0;







    line-height: 1.1;







    letter-spacing: -0.02em;







    text-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);







}







.grafly-media-section {







    padding: 100px 0;







    max-width: 1200px;







    margin: 0 auto;







}







.media-section-header {







    margin-bottom: 40px;







    padding: 0 24px;







}







.media-section-header h2 {







    font-size: 2.25rem;







    font-weight: 700;







    margin-bottom: 8px;







}







.media-section-header p {







    color: var(--color-text-muted);







    font-size: 1.05rem;







}







.grafly-media-grid {







    display: grid;







    grid-template-columns: 1.85fr 1.15fr;







    gap: 32px;







    padding: 0 24px;







    align-items: start;







}







.grafly-media-main {







    border-radius: var(--radius-md);







    overflow: hidden;







    border: 1px solid var(--color-border);







    box-shadow: var(--glass-shadow);







    background: var(--color-surface);







    position: relative;







    height: 480px;







}







.grafly-media-main iframe,







.grafly-media-main video,







.grafly-media-main img {







    width: 100% !important;







    height: 100% !important;







    object-fit: cover !important;







    display: block !important;







    border: none;







}







/* Lightbox expansion trigger overlay on main image */







.lightbox-trigger-btn {







    position: absolute;







    bottom: 20px;







    right: 20px;







    padding: 10px 18px;







    background: rgba(9, 9, 11, 0.7);







    border: 1px solid rgba(255, 255, 255, 0.2);







    border-radius: 50px;







    color: #ffffff;







    font-size: 0.85rem;







    font-weight: 600;







    display: flex;







    align-items: center;







    gap: 8px;







    backdrop-filter: blur(12px);







    -webkit-backdrop-filter: blur(12px);







    opacity: 0;







    transform: translateY(10px);







    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;







    pointer-events: none;







    z-index: 10;







}







.grafly-media-main:hover .lightbox-trigger-btn {







    opacity: 1;







    transform: translateY(0);







    pointer-events: auto;







}







.lightbox-trigger-btn:hover {







    background: var(--color-primary);







    border-color: transparent;







    transform: scale(1.05);







}







/* Fullscreen Lightbox / Slideshow CSS */







.grafly-lightbox {







    position: fixed;







    inset: 0;







    background: rgba(9, 9, 11, 0.96);







    backdrop-filter: blur(20px);







    -webkit-backdrop-filter: blur(20px);







    z-index: 11000;







    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);







}







.grafly-lightbox.active {







    opacity: 1;







    pointer-events: auto;







}







.lightbox-close {







    position: absolute;







    top: 30px;







    right: 30px;







    background: transparent;







    border: none;







    color: rgba(255, 255, 255, 0.6);







    font-size: 2.5rem;







    cursor: pointer;







    z-index: 11020;







    width: 60px;







    height: 60px;







    display: flex;







    align-items: center;







    justify-content: center;







    border-radius: 50%;







    transition: all 0.3s ease;







}







.lightbox-close:hover {







    color: #ffffff;







    background: rgba(255, 255, 255, 0.1);







    transform: rotate(90deg);







}







.lightbox-arrow {







    position: absolute;







    top: 50%;







    transform: translateY(-50%);







    width: 60px;







    height: 60px;







    border-radius: 50%;







    background: rgba(255, 255, 255, 0.05);







    border: 1px solid rgba(255, 255, 255, 0.1);







    color: #ffffff;







    display: flex;







    align-items: center;







    justify-content: center;







    cursor: pointer;







    z-index: 11010;







    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);







}







.lightbox-arrow svg {







    width: 24px;







    height: 24px;







    transition: transform 0.3s ease;







}







.lightbox-prev {







    left: 40px;







}







.lightbox-prev:hover svg {







    transform: translateX(-2px);







}







.lightbox-next {







    right: 40px;







}







.lightbox-next:hover svg {







    transform: translateX(2px);







}







.lightbox-arrow:hover {







    background: var(--color-primary);







    border-color: transparent;







    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);







}







.lightbox-content {







    max-width: 85vw;







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    gap: 20px;







    z-index: 11005;







}







.lightbox-slide-container {







    position: relative;







    max-width: 100%;







    max-height: 75vh;







    display: flex;







    align-items: center;







    justify-content: center;







    border-radius: 12px;







    overflow: hidden;







    background: rgba(0, 0, 0, 0.2);







}







.lightbox-slide-container img {







    max-width: 100%;







    max-height: 75vh;







    object-fit: contain;







    border-radius: 12px;







    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);







    user-select: none;







    -webkit-user-drag: none;







}







.lightbox-caption {







    text-align: center;







    color: #ffffff;







    max-width: 600px;







}







.lightbox-caption h3 {







    font-size: 1.25rem;







    margin-bottom: 4px;







    font-weight: 600;







}







.lightbox-caption span {







    font-size: 0.85rem;







    color: var(--color-text-muted);







    font-weight: 500;







}







/* Lightbox Dots/Indicators */







.lightbox-dots {







    display: flex;







    gap: 8px;







    margin-top: 10px;







}







.lightbox-dot {







    width: 8px;







    height: 8px;







    border-radius: 50%;







    background: rgba(255, 255, 255, 0.2);







    cursor: pointer;







    transition: all 0.3s ease;







}







.lightbox-dot.active {







    background: var(--color-primary);







    transform: scale(1.3);







    box-shadow: 0 0 8px var(--color-primary);







}







.grafly-media-sidebar {







    display: flex;







    flex-direction: column;







    gap: 20px;







    height: 100%;







}







.media-playlist {







    display: flex;







    flex-direction: column;







    gap: 16px;







    height: 480px;







    max-height: 480px;







    overflow-y: auto;







    padding-right: 8px;







}







.media-playlist::-webkit-scrollbar {







    width: 4px;







}







.media-playlist::-webkit-scrollbar-track {







    background: transparent;







}







.media-playlist::-webkit-scrollbar-thumb {







    background: var(--color-border);







    border-radius: 4px;







}







.media-playlist::-webkit-scrollbar-thumb:hover {







    background: var(--color-primary);







}







.media-playlist-item {







    display: flex;







    align-items: center;







    gap: 16px;







    padding: 12px;







    border-radius: var(--radius-sm);







    border: 1px solid var(--color-border);







    background: var(--glass-bg);







    backdrop-filter: blur(16px);







    -webkit-backdrop-filter: blur(16px);







    cursor: pointer;







    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);







}







.media-playlist-item:hover {







    background: rgba(139, 92, 246, 0.05);







    border-color: rgba(139, 92, 246, 0.3);







    transform: translateX(4px);







}







.media-playlist-item.active {







    background: rgba(139, 92, 246, 0.08);







    border-color: var(--color-primary);







    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);







}







.playlist-thumb-box {







    width: 90px;







    height: 60px;







    border-radius: 8px;







    overflow: hidden;







    position: relative;







    flex-shrink: 0;







    border: 1px solid rgba(255, 255, 255, 0.1);







}







.playlist-thumb-box img {







    width: 100%;







    height: 100%;







    object-fit: cover;







}







.playlist-thumb-box .play-btn-circle {







    width: 24px;







    height: 24px;







    font-size: 0.6rem;







    box-shadow: none;







}







.playlist-text-box {







    flex-grow: 1;







    min-width: 0;







}







.playlist-title {







    font-weight: 600;







    font-size: 0.925rem;







    color: var(--color-text);







    margin-bottom: 2px;







    white-space: nowrap;







    overflow: hidden;







    text-overflow: ellipsis;







}







.playlist-meta {







    font-size: 0.78rem;







    color: var(--color-text-muted);







}







.media-cycle-btn {







    width: 100%;







    padding: 14px 28px;







    font-size: 0.9rem;







    font-weight: 600;







    border-radius: var(--radius-sm);







    transition: all 0.3s ease;







}







/* --- Detail page responsiveness --- */







@media (max-width: 992px) {







    .grafly-media-grid {







        grid-template-columns: 1fr;







        gap: 24px;







        align-items: start;







    }







    .grafly-media-main {







        aspect-ratio: 16 / 10;







        height: auto;







    }







    .media-playlist {







        max-height: 320px;







        height: auto;







    }







}







@media (max-width: 768px) {







    .archive-grafly-header {







        padding-top: 120px;







        padding-bottom: 40px;







    }







    .grafly-media-section {







        padding: 60px 0;







    }







    .grafly-archive-grid {







        grid-template-columns: 1fr;







        margin: 20px auto 80px;







    }







}







/* ==========================================================================







   22. STANDARD WORDPRESS BLOG POSTS & ARCHIVES







   ========================================================================== */







/* --- Blog Archive / Listing Header --- */







.blog-archive-header {







    padding-top: 160px;







    padding-bottom: 60px;







    text-align: center;







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







}







.blog-archive-title {







    font-size: clamp(2.5rem, 6vw, 4rem);







    margin-bottom: 12px;







}







.blog-archive-subtitle {







    font-size: 1.125rem;







    color: var(--color-text-muted);







    max-width: 600px;







    margin: 0 auto;







}







/* --- Blog Card Grid --- */







.blog-archive-grid {







    display: grid;







    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));







    gap: 32px;







    max-width: 1200px;







    margin: 40px auto 120px;







    padding: 0 24px;







}







.blog-card {







    background: var(--color-surface);







    border: 1px solid var(--color-border);







    border-radius: var(--radius-md);







    overflow: hidden;







    position: relative;







    display: flex;







    flex-direction: column;







    box-shadow: var(--glass-shadow);







    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);







}







.blog-card:hover {







    transform: translateY(-8px);







    border-color: rgba(255, 255, 255, 0.2);







    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);







}







.blog-card-image-box {







    position: relative;







    aspect-ratio: 16 / 10;







    overflow: hidden;







    background: rgba(0, 0, 0, 0.1);







}







.blog-card-image-box img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);







}







.blog-card:hover .blog-card-image-box img {







    transform: scale(1.05);







}







.blog-card-content {







    padding: 24px;







    display: flex;







    flex-direction: column;







    flex-grow: 1;







}







.blog-card-meta {







    display: flex;







    gap: 12px;







    align-items: center;







    font-size: 0.8rem;







    color: var(--color-text-muted);







    margin-bottom: 12px;







}







.blog-card-category {







    color: var(--color-primary);







    font-weight: 700;







    text-transform: uppercase;







    letter-spacing: 0.05em;







    font-family: 'Space Grotesk', sans-serif;







}







.blog-card-title {







    font-size: 1.25rem;







    line-height: 1.4;







    margin-bottom: 12px;







    font-weight: 600;







}







.blog-card-title a {







    color: #ffffff;







    text-decoration: none;







    transition: color 0.3s ease;







}







.blog-card-title a:hover {







    color: var(--color-primary);







}







.blog-card-excerpt {







    font-size: 0.9rem;







    color: var(--color-text-muted);







    line-height: 1.6;







    margin-bottom: 20px;







    flex-grow: 1;







}







.blog-card-footer {







    display: flex;







    justify-content: space-between;







    align-items: center;







    border-top: 1px solid var(--color-border);







    padding-top: 16px;







    margin-top: auto;







}







.blog-card-author {







    display: flex;







    align-items: center;







    gap: 8px;







    font-size: 0.85rem;







    color: #ffffff;







}







.blog-card-author img {







    width: 28px;







    height: 28px;







    border-radius: 50%;







    border: 1px solid var(--color-border);







}







.blog-card-link-more {







    font-size: 0.85rem;







    font-weight: 600;







    color: var(--color-primary);







    text-decoration: none;







    display: flex;







    align-items: center;







    gap: 4px;







    transition: gap 0.3s ease;







}







.blog-card:hover .blog-card-link-more {







    gap: 8px;







}







/* --- Blog Single Hero Banner --- */







.blog-single-hero {







    height: 75vh;







    min-height: 550px;







    display: flex;







    align-items: center;







    justify-content: center;







    text-align: center;







    position: relative;







    background-size: cover;







    background-position: center;







}







.blog-single-hero::before {







    content: '';







    position: absolute;







    inset: 0;







    background: linear-gradient(180deg, rgba(9, 9, 11, 0.4) 0%, rgba(9, 9, 11, 0.92) 100%);







    z-index: 1;







}







.blog-hero-content {







    position: relative;







    z-index: 2;







    max-width: 800px;







    padding: 0 24px;







    margin-top: 80px;







}







.blog-hero-category {







    background: rgba(139, 92, 246, 0.15);







    border: 1px solid rgba(139, 92, 246, 0.3);







    color: #c084fc;







    padding: 6px 16px;







    border-radius: 50px;







    font-size: 0.8rem;







    font-weight: 600;







    letter-spacing: 0.05em;







    text-transform: uppercase;







    display: inline-block;







    margin-bottom: 20px;







}







.blog-hero-title {







    font-size: clamp(2.2rem, 5vw, 3.8rem);







    line-height: 1.2;







    margin-bottom: 24px;







    color: #ffffff;







    font-weight: 700;







}







.blog-hero-meta {







    display: flex;







    justify-content: center;







    align-items: center;







    gap: 16px;







    font-size: 0.9rem;







    color: var(--color-text-muted);







}







.blog-hero-meta img {







    width: 32px;







    height: 32px;







    border-radius: 50%;







    border: 1px solid var(--color-border);







}







/* --- Blog Post Main Content --- */







.blog-content-wrapper {







    position: relative;







    z-index: 10;







    max-width: 860px;







    margin: 0 auto 80px;







    padding: 0 24px;







}







.blog-content-card {







    background: transparent;







    border: none;







    box-shadow: none;







    backdrop-filter: none;







    -webkit-backdrop-filter: none;







    padding: 40px 0;







}







.blog-post-content {







    font-size: 1.1rem;







    line-height: 1.8;







    color: var(--color-text);







}







.blog-post-content p {







    margin-bottom: 24px;







}







.blog-post-content h2,







.blog-post-content h3,







.blog-post-content h4 {







    color: var(--color-text);







    font-weight: 700;







    margin-top: 40px;







    margin-bottom: 20px;







    line-height: 1.3;







    font-family: 'Space Grotesk', sans-serif;







}







.blog-post-content h2 { font-size: 1.8rem; }







.blog-post-content h3 { font-size: 1.5rem; }







.blog-post-content blockquote {







    border-left: 4px solid var(--color-primary);







    padding-left: 24px;







    margin: 32px 0;







    font-style: italic;







    font-size: 1.25rem;







    color: var(--color-text);







    background: var(--color-surface);







    padding-top: 16px;







    padding-bottom: 16px;







    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;







    border-top: 1px solid var(--color-border);







    border-right: 1px solid var(--color-border);







    border-bottom: 1px solid var(--color-border);







}







.blog-post-content ul,







.blog-post-content ol {







    margin-bottom: 24px;







    padding-left: 24px;







}







.blog-post-content li {







    margin-bottom: 8px;







}







.blog-post-content img {







    max-width: 100%;







    height: auto;







    border-radius: var(--radius-sm);







    margin: 24px 0;







}







.blog-post-footer {







    margin-top: 48px;







    border-top: 1px solid var(--color-border);







    padding-top: 32px;







    display: flex;







    flex-direction: column;







    align-items: flex-start;







    gap: 24px;







}







.blog-post-tags {







    display: flex;







    gap: 8px;







    flex-wrap: wrap;







}







.blog-post-tag {







    background: rgba(0, 0, 0, 0.05);







    border: 1px solid var(--color-border);







    color: #50575e;







    padding: 6px 14px;







    border-radius: 6px;







    font-size: 0.8rem;







    text-decoration: none;







    transition: all 0.3s ease;







}







.blog-post-tag:hover {







    background: rgba(0, 0, 0, 0.08);







    color: #1a1d20;







    border-color: rgba(0, 0, 0, 0.15);







}







/* --- Social Sharing Buttons --- */







.blog-post-share {







    width: 100%;







}







.share-title {







    display: block;







    font-size: 0.95rem;







    font-weight: 600;







    color: #1a1d20;







    margin-bottom: 16px;







}







.share-buttons {







    display: flex;







    gap: 12px;







    flex-wrap: wrap;







}







.share-btn {







    display: inline-flex;







    align-items: center;







    gap: 8px;







    padding: 10px 20px;







    border-radius: 50px;







    font-size: 0.85rem;







    font-weight: 600;







    text-decoration: none;







    transition: all 0.3s ease;







    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);







    cursor: pointer;







}







.share-btn:hover {







    transform: translateY(-2px);







    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);







}







.share-icon {







    width: 16px;







    height: 16px;







}







.share-facebook {







    background: #1877F2 !important;







    color: #ffffff !important;







}







.share-facebook:hover {







    background: #155ebd !important;







}







.share-linkedin {







    background: #0A66C2 !important;







    color: #ffffff !important;







}







.share-linkedin:hover {







    background: #084e94 !important;







}







.share-twitter {







    background: #000000 !important;







    color: #ffffff !important;







}







.share-twitter:hover {







    background: #222222 !important;







}







.share-pinterest {







    background: #BD081C !important;







    color: #ffffff !important;







}







.share-pinterest:hover {







    background: #9c0615 !important;







}







.blog-related-section {







    border-top: 1px solid var(--color-border);







    background: rgba(9, 9, 11, 0.2);







    padding: 80px 0;







}







.blog-related-title {







    text-align: center;







    font-size: 2.25rem;







    margin-bottom: 48px;







    font-weight: 700;







}







@media (max-width: 768px) {







    .blog-archive-header {







        padding-top: 120px;







        padding-bottom: 40px;







    }







    .blog-archive-grid {







        grid-template-columns: 1fr;







        margin: 20px auto 80px;







    }







    .blog-content-card {







        padding: 32px 20px;







    }







    .blog-post-footer {







        flex-direction: column;







        align-items: flex-start;







    }







}







/* ==========================================================================







   23. ACCESSIBILITY OVERRIDES (Hides raw reader text showing on page)







   ========================================================================== */







#ast-scroll-top .screen-reader-text {







    position: absolute !important;







    width: 1px !important;







    height: 1px !important;







    padding: 0 !important;







    margin: -1px !important;







    overflow: hidden !important;







    clip: rect(0, 0, 0, 0) !important;







    white-space: nowrap !important;







    border: 0 !important;







}







/* ==========================================================================







   24. PREMIUM GLASSMORPHIC SCROLL TO TOP BUTTON







   ========================================================================== */







#ast-scroll-top {







    display: none;







    position: fixed !important;







    bottom: 30px !important;







    right: 30px !important;







    width: 50px !important;







    height: 50px !important;







    border-radius: 50% !important;







    background: var(--glass-bg) !important;







    backdrop-filter: blur(16px) !important;







    -webkit-backdrop-filter: blur(16px) !important;







    border: 1px solid var(--glass-border) !important;







    box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.25) !important;







    align-items: center !important;







    justify-content: center !important;







    color: var(--color-text) !important;







    z-index: 9999 !important;







    cursor: pointer !important;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;







    text-decoration: none !important;







}







/* Convert block or inline-block dynamically injected styles by Astra to flex for centering */







#ast-scroll-top[style*="display: block"],







#ast-scroll-top[style*="display: inline"] {







    display: flex !important;







}







/* Rotate default down-arrow icon to point upwards */







#ast-scroll-top .ast-icon {







    display: flex !important;







    align-items: center !important;







    justify-content: center !important;







    transform: rotate(180deg) !important;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;







    color: var(--color-primary) !important;







}







#ast-scroll-top .ast-arrow-svg {







    width: 18px !important;







    height: 18px !important;







    fill: currentColor !important;







}







/* Hover State Animations */







#ast-scroll-top:hover {







    transform: translateY(-5px) !important;







    background: var(--color-primary) !important;







    border-color: var(--color-primary) !important;







    color: #ffffff !important;







    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.4) !important;







}







#ast-scroll-top:hover .ast-icon {







    color: #ffffff !important;







    transform: rotate(180deg) scale(1.1) !important;







}







/* Mobile responsive scaling */







@media (max-width: 768px) {







    #ast-scroll-top {







        bottom: 20px !important;







        right: 20px !important;







        width: 44px !important;







        height: 44px !important;







        box-shadow: 0 8px 24px -8px rgba(139, 92, 246, 0.2) !important;







    }







    #ast-scroll-top .ast-arrow-svg {







        width: 15px !important;







        height: 15px !important;







    }







}







/* ==========================================================================







   25. CREATIVE ENGINE SECTION WIDE SCREEN OPTIMIZATION







   ========================================================================== */







#engine.section-wrapper {







    max-width: 100% !important;







    padding-left: 20px !important;







    padding-right: 20px !important;







}







#engine .section-header {







    max-width: 100% !important;







    width: 100% !important;







}







/* ==========================================================================







   23. ACCESSIBILITY OVERRIDES (Hides raw reader text showing on page)







   ========================================================================== */







#ast-scroll-top .screen-reader-text {







    position: absolute !important;







    width: 1px !important;







    height: 1px !important;







    padding: 0 !important;







    margin: -1px !important;







    overflow: hidden !important;







    clip: rect(0, 0, 0, 0) !important;







    white-space: nowrap !important;







    border: 0 !important;







}







/* ==========================================================================







   24. PREMIUM GLASSMORPHIC SCROLL TO TOP BUTTON







   ========================================================================== */







#ast-scroll-top {







    display: none;







    position: fixed !important;







    bottom: 30px !important;







    right: 30px !important;







    width: 50px !important;







    height: 50px !important;







    border-radius: 50% !important;







    background: var(--glass-bg) !important;







    backdrop-filter: blur(16px) !important;







    -webkit-backdrop-filter: blur(16px) !important;







    border: 1px solid var(--glass-border) !important;







    box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.25) !important;







    align-items: center !important;







    justify-content: center !important;







    color: var(--color-text) !important;







    z-index: 9999 !important;







    cursor: pointer !important;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;







    text-decoration: none !important;







}







/* Convert block or inline-block dynamically injected styles by Astra to flex for centering */







#ast-scroll-top[style*="display: block"],







#ast-scroll-top[style*="display: inline"] {







    display: flex !important;







}







/* Rotate default down-arrow icon to point upwards */







#ast-scroll-top .ast-icon {







    display: flex !important;







    align-items: center !important;







    justify-content: center !important;







    transform: rotate(180deg) !important;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;







    color: var(--color-primary) !important;







}







#ast-scroll-top .ast-arrow-svg {







    width: 18px !important;







    height: 18px !important;







    fill: currentColor !important;







}







/* Hover State Animations */







#ast-scroll-top:hover {







    transform: translateY(-5px) !important;







    background: var(--color-primary) !important;







    border-color: var(--color-primary) !important;







    color: #ffffff !important;







    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.4) !important;







}







#ast-scroll-top:hover .ast-icon {







    color: #ffffff !important;







    transform: rotate(180deg) scale(1.1) !important;







}







/* Mobile responsive scaling */







@media (max-width: 768px) {







    #ast-scroll-top {







        bottom: 20px !important;







        right: 20px !important;







        width: 44px !important;







        height: 44px !important;







        box-shadow: 0 8px 24px -8px rgba(139, 92, 246, 0.2) !important;







    }







    #ast-scroll-top .ast-arrow-svg {







        width: 15px !important;







        height: 15px !important;







    }







}







/* ==========================================================================







   25. CREATIVE ENGINE SECTION WIDE SCREEN OPTIMIZATION







   ========================================================================== */















/* ==========================================================================







   25. CREATIVE ENGINE SECTION WIDE SCREEN OPTIMIZATION







   ========================================================================== */