/* ═══════════════════════════════════════════════════════════════
   StudioAesthetic — main.css v4  LUXURY GOLD EDITION
   Theme: Obsidian x Luminous Gold x Cream
   Aesthetic: Premium Cinematic Glowing Prestige
════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,700&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ══ DESIGN TOKENS ══════════════════════════════════════════════ */
:root {
    --gold: #E8A800;
    --gold2: #FFD700;
    --gold3: #C97F00;
    --gold4: #FFF0A0;
    --gold5: #8B5E00;
    --gold-light: #FFFAE0;
    --gold-glow: rgba(255,215,0,0.55);
    --gold-glow2: rgba(255,215,0,0.28);
    --gold-glow3: rgba(255,215,0,0.12);
    --gold-glow4: rgba(255,215,0,0.70);
    --gold-border: rgba(255,215,0,0.38);
    --gold-border2: rgba(255,215,0,0.20);
    --gold-border3: rgba(255,215,0,0.11);
    --bg: #0E0C08;
    --bg2: #110E08;
    --bg3: #181310;
    --bg4: #1E1912;
    --surface: #262014;
    --surface2: #242016;
    --surface3: #2A261A;
    --ink: #FFF8E8;
    --ink2: #F2E8CC;
    --ink3: #DDD0B0;
    --mid: #9A9078;
    --mid2: #6A6050;
    --border: rgba(255,215,0,0.24);
    --border2: rgba(255,215,0,0.54);
    --border3: rgba(255,215,0,0.84);
    --border-dim: rgba(255,248,232,0.06);
    --border-dim2: rgba(255,248,232,0.10);
    --nav-h: 72px;
    --r: 0px;
    --shadow: 0 4px 40px rgba(0,0,0,0.70);
    --shadow-lg: 0 24px 80px rgba(0,0,0,0.85);
    --shadow-gold: 0 0 40px rgba(255,215,0,0.60),0 8px 32px rgba(0,0,0,0.60);
    --shadow-gold2: 0 0 80px rgba(255,215,0,0.90),0 20px 60px rgba(0,0,0,0.80);
    --glow-text: 0 0 30px rgba(255,215,0,0.90);
    --transition: 0.30s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 0.60s cubic-bezier(0.4,0,0.2,1);
}

[data-theme="light"] {
    --bg: #FFFFFF;
    --bg2: #FAFAFA;
    --bg3: #F5F3EC;
    --bg4: #EDE9DA;
    --surface: #E4DFCF;
    --surface2: #D8D2BF;
    --ink: #0A0800;
    --ink2: #1C1600;
    --ink3: #2E2510;
    --mid: #3C3520;
    --mid2: #6E6245;
    --border: rgba(150,110,0,0.18);
    --border2: rgba(150,110,0,0.30);
    --border3: rgba(150,110,0,0.50);
    --border-dim: rgba(10,8,0,0.06);
    --border-dim2: rgba(10,8,0,0.12);
    --shadow: 0 2px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 16px 50px rgba(0,0,0,0.13);
    --shadow-gold: 0 0 24px rgba(180,130,0,0.18),0 4px 20px rgba(0,0,0,0.08);
    --glow-text: 0 0 14px rgba(180,130,0,0.40);
}

/* ══ RESET ══════════════════════════════════════════════════════ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 18px;
}

body {
    font-family: 'Outfit',sans-serif;
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
    line-height: 1.6;
    transition: background var(--transition),color var(--transition);
    cursor: auto;
}

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

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

button {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

input, textarea, select {
    outline: none;
    font-family: inherit;
}

/* ══ LUXURY TEXTURES ════════════════════════════════════════════ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.040'/%3E%3C/svg%3E");
    opacity: 0.6;
    mix-blend-mode: overlay;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9400;
    pointer-events: none;
    background: radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.55) 100%);
}

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

/* ══ UTILS ══════════════════════════════════════════════════════ */
.container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 5%;
}

.section {
    padding: 9rem 0;
}

.section-alt {
    background: var(--bg2);
}

.text-orange, .text-gold {
    color: var(--gold);
}

.text-gold-shimmer {
    background: linear-gradient(135deg,var(--gold3) 0%,var(--gold2) 40%,var(--gold4) 60%,var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'JetBrains Mono',monospace;
    font-size: .88rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold2);
    padding: .3rem 0;
    margin-bottom: 1rem;
    text-shadow: var(--glow-text);
}

    .eyebrow::before {
        content: '';
        width: 32px;
        height: 1px;
        background: linear-gradient(90deg,var(--gold3),var(--gold2));
        box-shadow: 0 0 16px var(--gold-glow);
    }

.luxury-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--gold2),transparent);
    margin: 1.5rem auto;
    box-shadow: 0 0 12px var(--gold-glow);
}

/* ══ SCROLL REVEAL ══════════════════════════════════════════════ */
.sr {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s ease,transform .9s ease;
}

.sr-l {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .9s ease,transform .9s ease;
}

.sr-r {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .9s ease,transform .9s ease;
}

    .sr.on, .sr-l.on, .sr-r.on {
        opacity: 1;
        transform: none;
    }

.delay-1 {
    transition-delay: .1s
}

.delay-2 {
    transition-delay: .2s
}

.delay-3 {
    transition-delay: .3s
}

.delay-4 {
    transition-delay: .4s
}

/* ══ BUTTONS ════════════════════════════════════════════════════ */
.btn-orange, .btn-gold-primary {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    background: linear-gradient(135deg,var(--gold5) 0%,var(--gold3) 30%,var(--gold) 60%,var(--gold2) 100%);
    color: #0C0A06;
    font-weight: 700;
    padding: .85rem 2.2rem;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: none;
    transition: all var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    box-shadow: 0 4px 24px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,0.15);
    font-family: 'JetBrains Mono',monospace;
}

    .btn-orange::before, .btn-gold-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.18) 50%,transparent 100%);
        transform: translateX(-100%) skewX(-20deg);
        transition: transform .7s;
    }

    .btn-orange:hover::before, .btn-gold-primary:hover::before {
        transform: translateX(200%) skewX(-20deg);
    }

    .btn-orange:hover, .btn-gold-primary:hover {
        box-shadow: 0 8px 40px var(--gold-glow4),0 0 60px var(--gold-glow2),inset 0 1px 0 rgba(255,255,255,0.20);
        transform: translateY(-3px);
        filter: brightness(1.10);
    }

.btn-outline, .btn-gold-outline {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    background: transparent;
    color: var(--gold2);
    padding: .83rem 2.2rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid var(--gold-border);
    transition: all var(--transition);
    cursor: pointer;
    font-family: 'JetBrains Mono',monospace;
    clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    position: relative;
    overflow: hidden;
}

    .btn-outline::before, .btn-gold-outline::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,transparent,rgba(255,215,0,0.24));
        opacity: 0;
        transition: opacity var(--transition);
    }

    .btn-outline:hover::before, .btn-gold-outline:hover::before {
        opacity: 1;
    }

    .btn-outline:hover, .btn-gold-outline:hover {
        border-color: var(--gold2);
        color: var(--gold4);
        box-shadow: 0 0 30px var(--gold-glow2),inset 0 0 30px var(--gold-glow3);
        transform: translateY(-2px);
    }

.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: #25D366;
    color: #fff;
    padding: .83rem 2.2rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    transition: all var(--transition);
    cursor: pointer;
    clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    font-family: 'JetBrains Mono',monospace;
    text-transform: uppercase;
}

    .btn-wa:hover {
        background: #1da855;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(37,211,102,.30);
    }

.btn-wa-big {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    background: #25D366;
    color: #fff;
    padding: 1rem 2.4rem;
    font-size: .88rem;
    font-weight: 600;
    margin-top: 1.5rem;
    transition: all var(--transition);
    clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
    font-family: 'JetBrains Mono',monospace;
    text-transform: uppercase;
    letter-spacing: .06em;
}

    .btn-wa-big:hover {
        background: #1da855;
        transform: translateY(-2px);
    }

.btn-sm {
    padding: .58rem 1.4rem;
    font-size: .92rem;
}

/* ══ NAVIGATION ═════════════════════════════════════════════════ */
#main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 500;
    height: var(--nav-h);
    transition: all .5s cubic-bezier(0.4,0,0.2,1);
}

    #main-nav.scrolled {
        background: rgba(6,5,4,0.92);
        border-bottom: 1px solid var(--gold-border);
        box-shadow: 0 4px 40px rgba(0,0,0,0.60),0 0 40px rgba(255,215,0,0.18);
        backdrop-filter: blur(20px) saturate(1.4);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
    }

[data-theme="light"] #main-nav.scrolled {
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid rgba(160,110,0,0.18);
}

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

.nav-logo {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.nav-logo-mark {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,var(--gold5),var(--gold3),var(--gold2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed',sans-serif;
    font-size: .88rem;
    font-weight: 800;
    color: #080605;
    letter-spacing: .08em;
    clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
    box-shadow: 0 0 20px var(--gold-glow2);
}

.nav-logo-text {
    font-family: 'Barlow Condensed',sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--ink);
    line-height: 1;
    text-transform: uppercase;
}

    .nav-logo-text span {
        color: var(--gold2);
        text-shadow: var(--glow-text);
    }

.nav-logo-img {
    height: 40px;
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.6rem;
}

    .nav-links a {
        font-family: 'JetBrains Mono',monospace;
        font-size: .82rem;
        font-weight: 500;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--mid);
        transition: color var(--transition);
        position: relative;
    }

        .nav-links a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 0;
            height: 1px;
            background: linear-gradient(90deg,var(--gold3),var(--gold2));
            transition: width var(--transition);
            box-shadow: 0 0 16px var(--gold-glow);
        }

        .nav-links a:hover {
            color: var(--gold2);
            text-shadow: 0 0 20px var(--gold-glow);
        }

            .nav-links a:hover::after {
                width: 100%;
            }

.nav-actions {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.theme-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--gold-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid);
    font-size: .82rem;
    transition: all var(--transition);
    cursor: pointer;
    clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
    background: var(--gold-glow3);
}

    .theme-toggle:hover {
        border-color: var(--gold2);
        color: var(--gold2);
        background: var(--gold-glow2);
        box-shadow: 0 0 20px var(--gold-glow2);
    }

.ham-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    cursor: pointer;
}

    .ham-btn span {
        width: 24px;
        height: 1px;
        background: linear-gradient(90deg,var(--gold3),var(--gold2));
        display: block;
        transition: .3s;
        box-shadow: 0 0 6px var(--gold-glow);
    }

.mob-overlay {
    position: fixed;
    inset: 0;
    z-index: 490;
    background: rgba(0,0,0,0.80);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}

    .mob-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

.mob-menu {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 495;
    width: min(360px,92vw);
    background: linear-gradient(160deg,#FFFFFF 0%,#F9F6EE 100%);
    border-left: 1px solid rgba(160,110,0,0.22);
    box-shadow: -20px 0 80px rgba(0,0,0,0.80),0 0 60px var(--gold-glow3);
    display: flex;
    flex-direction: column;
    padding: 2rem 2.5rem;
    transform: translateX(100%);
    transition: transform .55s cubic-bezier(.77,0,.18,1);
}

    .mob-menu.open {
        transform: translateX(0);
    }

.mob-close {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    border: 1px solid var(--gold-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid);
    margin-bottom: 2rem;
    cursor: pointer;
    transition: all var(--transition);
    background: var(--gold-glow3);
}

    .mob-close:hover {
        border-color: var(--gold2);
        color: var(--gold2);
        box-shadow: 0 0 16px var(--gold-glow2);
    }

.mob-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

    .mob-nav a {
        font-family: 'Cormorant Garamond',serif;
        font-size: 2.4rem;
        font-weight: 600;
        letter-spacing: .04em;
        color: var(--ink2);
        padding: .6rem 0;
        border-bottom: 1px solid var(--border);
        transition: all .3s;
    }

        .mob-nav a:hover {
            color: var(--gold2);
            text-shadow: var(--glow-text);
            padding-left: .5rem;
        }

.mob-cta {
    margin-top: 2rem;
    text-align: center;
}

/* ══ HERO ════════════════════════════════════════════════════════ */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding-top: var(--nav-h);
    overflow: hidden;
    background: var(--bg);
}

    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 60% at 20% 50%,rgba(255,215,0,0.24) 0%,transparent 60%), radial-gradient(ellipse 60% 80% at 80% 20%,rgba(255,215,0,0.15) 0%,transparent 50%), radial-gradient(ellipse 40% 40% at 60% 80%,rgba(220,160,0,0.12) 0%,transparent 50%);
        z-index: 0;
        pointer-events: none;
    }

    .hero::after {
        display: none;
    }

.hero-bg-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-bg-video, .hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,rgba(0,0,0,0.80) 0%,rgba(0,0,0,0.55) 55%,rgba(255,215,0,0.24) 100%), radial-gradient(ellipse at bottom,rgba(255,215,0,0.18) 0%,transparent 60%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,215,0,0.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,215,0,0.18) 1px,transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(135deg,rgba(0,0,0,0.4) 0%,transparent 55%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 5rem 0;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: 'JetBrains Mono',monospace;
    font-size: .88rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold2);
    margin-bottom: 2rem;
    text-shadow: 0 0 20px var(--gold-glow);
}

.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold2);
    box-shadow: 0 0 12px var(--gold-glow),0 0 24px var(--gold-glow2);
    animation: pulse 2.5s infinite;
}

@keyframes pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 12px var(--gold-glow),0 0 24px var(--gold-glow2);
    }

    50% {
        opacity: .4;
        transform: scale(2.0);
        box-shadow: 0 0 24px var(--gold-glow),0 0 48px var(--gold-glow3);
    }
}

.hero-title {
    font-family: 'Barlow Condensed',sans-serif;
    font-size: clamp(5rem,10vw,11.5rem);
    line-height: .88;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 2rem;
}

.ht-row {
    display: block;
}

.ht-orange, .ht-gold {
    background: linear-gradient(135deg,var(--gold3) 0%,var(--gold2) 45%,var(--gold4) 70%,var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
   /* filter: drop-shadow(0 0 20px rgba(255,215,0,0.90));*/
}

.ht-outline {
    -webkit-text-stroke: 2px rgba(255,215,0,0.90);
    color: transparent;
}

.hero-sub {
    font-size: 1.30rem;
    color: rgba(255,248,232,.65);
    line-height: 2.0;
    max-width: 480px;
    margin-bottom: 3rem;
    font-weight: 300;
}

.hero-ctas {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 4.5rem;
}

.hero-stats {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    padding-top: 2.8rem;
    border-top: 1px solid var(--gold-border);
}

.hstat-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--gold2);
    letter-spacing: .04em;
    text-shadow: 0 0 30px var(--gold-glow);
    font-weight: 600;
}

    .hstat-num span {
        color: var(--gold4);
    }

.hstat-label {
    font-family: 'JetBrains Mono',monospace;
    font-size: .52rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,248,232,.40);
    margin-top: .3rem;
}

.hero-right {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.hero-float-card {
    background: linear-gradient(135deg,rgba(14,13,9,0.92),rgba(20,18,9,0.95));
    border: 1px solid var(--gold-border);
    border-radius: .5rem;
    padding: 1.8rem 2rem;
    text-align: center;
    min-width: 180px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.70),0 0 40px var(--gold-glow3),inset 0 1px 0 rgba(255,215,0,0.45);
    transition: transform 0.4s,box-shadow 0.4s;
    pointer-events: all;
    animation: floatHorizontal 5s ease-in-out infinite alternate;
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}

    .hero-float-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top,rgba(255,215,0,0.24) 0%,transparent 60%);
        pointer-events: none;
    }

    .hero-float-card:nth-child(2) {
        animation-delay: -2.5s;
    }

    .hero-float-card:hover {
        transform: scale(1.06);
        box-shadow: 0 30px 80px rgba(0,0,0,0.80),0 0 60px var(--gold-glow),inset 0 1px 0 rgba(255,215,0,0.75);
    }

.hfc-label {
    font-family: 'JetBrains Mono',monospace;
    font-weight: 500;
    font-size: 0.52rem;
    letter-spacing: .20em;
    text-transform: uppercase;
    color: var(--gold3);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 12px var(--gold-glow2);
}

.hfc-value {
    font-family: 'Cormorant Garamond',serif;
    font-weight: 600;
    font-size: 2.4rem;
    background: linear-gradient(135deg,var(--gold3),var(--gold2),var(--gold4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255,215,0,0.90));
    margin-bottom: 0.2rem;
    line-height: 1;
}

.hfc-sub {
    font-family: 'JetBrains Mono',monospace;
    font-size: 0.52rem;
    color: rgba(255,248,232,0.40);
    letter-spacing: 0.10em;
}

@keyframes floatHorizontal {
    0% {
        transform: translateX(0) translateY(0);
    }

    50% {
        transform: translateX(8px) translateY(-4px);
    }

    100% {
        transform: translateX(-6px) translateY(2px);
    }
}

[data-theme="light"] .hero-float-card {
    background: rgba(255,255,255,0.96);
    border-color: rgba(160,110,0,0.35);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15),0 0 30px rgba(200,150,0,0.12);
}

@media(max-width:1024px) {
    .hero-right {
        right: 2%;
        gap: 1.2rem;
    }

    .hero-float-card {
        min-width: 150px;
        padding: 1.4rem;
    }

    .hfc-value {
        font-size: 2rem;
    }
}

@media(max-width:768px) {
    .hero-right {
        display: none;
    }
}

.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-family: 'JetBrains Mono',monospace;
    font-size: .48rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold3);
    animation: scrollBounce 2.5s ease-in-out infinite;
}

.scroll-line {
    width: 1px;
    height: 44px;
    background: linear-gradient(var(--gold2),transparent);
    box-shadow: 0 0 16px var(--gold-glow);
}

@keyframes scrollBounce {
    0%,100% {
        transform: translateX(-50%) translateY(0)
    }

    50% {
        transform: translateX(-50%) translateY(8px)
    }
}

/* ══ TICKER ══════════════════════════════════════════════════════ */
.ticker-wrap {
    overflow: hidden;
    padding: .75rem 0;
    background: linear-gradient(90deg,var(--gold5) 0%,var(--gold3) 15%,var(--gold2) 40%,#FFE55C 50%,var(--gold2) 60%,var(--gold3) 85%,var(--gold5) 100%);
    position: relative;
    box-shadow: 0 0 40px var(--gold-glow2);
}

    .ticker-wrap::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(0,0,0,0.20),transparent 20%,transparent 80%,rgba(0,0,0,0.20));
    }

.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker 32s linear infinite;
}

@keyframes ticker {
    0% {
        transform: translateX(0)
    }

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

.ticker-item {
    font-family: 'JetBrains Mono',monospace;
    font-size: .78rem;
    letter-spacing: .20em;
    text-transform: uppercase;
    color: #0A0805;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding: 0 2.5rem;
    white-space: nowrap;
    gap: 1rem;
}

.ticker-sep {
    opacity: .35;
}

/* ══ ABOUT ═══════════════════════════════════════════════════════ */
.about-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 8rem;
    align-items: center;
}

.about-visual {
    position: relative;
}

.about-img-frame {
    overflow: hidden;
    aspect-ratio: 3/4;
    position: relative;
    clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    box-shadow: var(--shadow-gold2);
}

    .about-img-frame::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 80px;
        background: linear-gradient(225deg,rgba(255,215,0,0.90) 0%,transparent 60%);
        z-index: 2;
        pointer-events: none;
    }

.about-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.92) saturate(0.90);
}

.about-img-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond',serif;
    font-size: 5rem;
    color: var(--gold3);
    clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}

.about-badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg,var(--gold5),var(--gold3),var(--gold),var(--gold2));
    border: 4px solid var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
    box-shadow: 0 0 40px var(--gold-glow),0 8px 24px rgba(0,0,0,0.60);
}

.about-badge-text {
    font-family: 'JetBrains Mono',monospace;
    font-size: .48rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #0A0805;
    text-align: center;
    font-weight: 700;
    line-height: 1.6;
}

.about-badge-logo {
    max-width: 65%;
    max-height: 65%;
    object-fit: contain;
}

.about-text h2 {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(2.8rem,5vw,5.5rem);
    line-height: .92;
    letter-spacing: .02em;
    margin-bottom: 1.2rem;
    color: var(--ink);
    font-weight: 600;
}

.about-sub {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.25rem;
    color: var(--gold2);
    font-style: italic;
    margin-bottom: 1.6rem;
    text-shadow: 0 0 20px var(--gold-glow2);
    font-weight: 400;
    letter-spacing: .02em;
}

.about-text p {
    color: var(--mid);
    line-height: 1.95;
    margin-bottom: 1rem;
    font-weight: 300;
    font-size: 1.1rem;
}

.about-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
    margin-top: 2.4rem;
}

.val-item {
    padding: 1.4rem;
    border: 1px solid var(--gold-border3);
    transition: all var(--transition);
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
    background: linear-gradient(135deg,#FFFFFF,#F9F6EE);
    position: relative;
    overflow: hidden;
}

    .val-item::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(255,215,0,0.15) 0%,transparent 60%);
        opacity: 0;
        transition: opacity var(--transition);
    }

    .val-item:hover::before {
        opacity: 1;
    }

    .val-item:hover {
        border-color: var(--gold-border);
        box-shadow: 0 0 20px var(--gold-glow3),inset 0 0 20px var(--gold-glow3);
    }

.val-icon {
    color: var(--gold2);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: .15rem;
    text-shadow: 0 0 16px var(--gold-glow);
}

.val-item h4 {
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: .25rem;
    color: var(--ink2);
}

.val-item p {
    font-size: .78rem;
    color: var(--mid2);
    margin: 0;
    line-height: 1.55;
}

/* ══ METRICS BAND ════════════════════════════════════════════════ */
.metrics-band {
    padding: 7rem 0;
    background: linear-gradient(160deg,#0C0A06 0%,#0E0C08 40%,#080603 100%);
    position: relative;
    overflow: hidden;
    color: #fff;
}

    .metrics-band::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 50% at 50% 100%,rgba(255,215,0,0.30) 0%,transparent 70%), radial-gradient(ellipse 40% 30% at 20% 0%,rgba(255,215,0,0.18) 0%,transparent 60%);
        z-index: 0;
    }

    .metrics-band::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--gold-border),rgba(255,215,0,0.90),var(--gold-border),transparent);
    }

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 1px;
    position: relative;
    z-index: 1;
    background: var(--gold-border3);
    border: 1px solid var(--gold-border3);
}

.metric-card {
    background: linear-gradient(160deg,rgba(14,12,8,0.95),rgba(10,9,6,1.0));
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.45s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}

    .metric-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 120%,rgba(255,215,0,0.36) 0%,transparent 60%);
        opacity: 0;
        transition: opacity .45s;
    }

    .metric-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(255,215,0,0.90),transparent);
        transform: scaleX(0);
        transition: transform .45s;
    }

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

    .metric-card:hover::after {
        transform: scaleX(1);
    }

    .metric-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.80),0 0 60px rgba(255,215,0,0.45);
    }

.metric-icon {
    font-size: 2rem;
    margin-bottom: 1.2rem;
    color: var(--gold2);
    text-shadow: 0 0 24px var(--gold-glow),0 0 48px var(--gold-glow2);
    display: inline-block;
    animation: bounce 3s ease-in-out infinite;
}

@keyframes bounce {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

.metric-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 3.2rem;
    line-height: 1;
    background: linear-gradient(135deg,var(--gold3) 0%,var(--gold2) 50%,var(--gold4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 16px rgba(255,215,0,0.90));
    font-weight: 600;
    margin-bottom: .4rem;
    letter-spacing: .02em;
}

.metric-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink3);
    margin-bottom: .2rem;
    letter-spacing: .04em;
}

.metric-sub {
    font-family: 'JetBrains Mono',monospace;
    font-size: .78rem;
    color: gold;
    letter-spacing: .10em;
}

@media(max-width:768px) {
    .metrics-band {
        padding: 5rem 0
    }

    .metric-num {
        font-size: 2.4rem
    }
}

@media(max-width:480px) {
    .metric-card {
        padding: 2rem 1.2rem
    }
}

/* ══ SERVICES ════════════════════════════════════════════════════ */
.section-head {
    margin-bottom: 5rem;
}

    .section-head h2 {
        font-family: 'Cormorant Garamond',serif;
        font-size: clamp(3rem,6vw,7rem);
        line-height: .90;
        letter-spacing: .02em;
        font-weight: 600;
    }

.section-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    gap: 2rem;
}

    .section-head-row h2 {
        font-family: 'Cormorant Garamond',serif;
        font-size: clamp(2.8rem,5vw,5.5rem);
        line-height: .90;
        letter-spacing: .02em;
        font-weight: 600;
    }

.services-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: var(--gold-border3);
    border: 1px solid var(--gold-border3);
}

.svc-card {
    background: var(--bg2);
    padding: 3rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

    .svc-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg,transparent,var(--gold2),transparent);
        transform: scaleY(0);
        transform-origin: center;
        transition: transform .5s;
        box-shadow: 2px 0 20px var(--gold-glow);
    }

    .svc-card::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background: linear-gradient(225deg,rgba(255,215,0,0.18) 0%,transparent 60%);
        transition: all var(--transition);
    }

    .svc-card:hover::before {
        transform: scaleY(1);
    }

    .svc-card:hover::after {
        width: 100px;
        height: 100px;
        background: linear-gradient(225deg,rgba(255,215,0,0.30) 0%,transparent 60%);
    }

    .svc-card:hover {
        background: var(--bg2);
        box-shadow: inset 0 0 60px rgba(255,215,0,0.12);
    }

.svc-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--border-dim);
    letter-spacing: .04em;
    transition: all .4s;
    font-weight: 700;
    font-style: italic;
}

.svc-card:hover .svc-num {
    color: rgba(255,215,0,0.45);
    text-shadow: 0 0 30px var(--gold-glow2);
}

.svc-img {
    overflow: hidden;
    height: 200px;
    margin: 0 -3rem;
}

    .svc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .7s;
        filter: brightness(0.88) saturate(0.85);
    }

.svc-card:hover .svc-img img {
    transform: scale(1.06);
    filter: brightness(0.95) saturate(1.0);
}

.svc-icon {
    font-size: 1.8rem;
    color: var(--gold2);
    text-shadow: 0 0 20px var(--gold-glow);
}

.svc-body h3 {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .5rem;
    letter-spacing: .01em;
}

.svc-body p {
    font-size: 1.1rem;
    color: var(--mid);
    line-height: 1.80;
    font-weight: 300;
    margin-bottom: .8rem;
}

.svc-tags {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

    .svc-tags span {
        font-family: 'JetBrains Mono',monospace;
        font-size: .90rem;
        letter-spacing: .08em;
        padding: 3px 10px;
        border: 1px solid var(--gold-border3);
        color: var(--mid);
        transition: all .3s;
    }

.svc-card:hover .svc-tags span {
    border-color: var(--gold-border);
    color: var(--gold2);
    box-shadow: 0 0 12px var(--gold-glow3);
}

.svc-arrow {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gold-border3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid);
    margin-top: auto;
    transition: all .35s;
    background: transparent;
}

.svc-card:hover .svc-arrow {
    background: linear-gradient(135deg,var(--gold3),var(--gold2));
    border-color: var(--gold2);
    color: #080605;
    transform: rotate(45deg);
    box-shadow: 0 0 20px var(--gold-glow);
}

/* ══ PORTFOLIO ═══════════════════════════════════════════════════ */
.port-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--gold-border3);
}

.port-tab {
    font-family: 'JetBrains Mono',monospace;
    font-size: .98rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .75rem 1.6rem;
    color: var(--mid);
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    transition: all .25s;
    cursor: pointer;
}

    .port-tab.active, .port-tab:hover {
        color: var(--gold2);
        border-bottom-color: var(--gold2);
        text-shadow: 0 0 16px var(--gold-glow);
    }

.works-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: 280px;
    gap: 2px;
    background: var(--gold-border3);
}

.work-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    cursor: pointer;
}

.work-featured {
    grid-column: span 2;
    grid-row: span 2;
}

.work-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s,filter .4s;
    filter: brightness(0.85) saturate(0.80);
}

.work-card:hover .work-img {
    transform: scale(1.07);
    filter: brightness(0.45) saturate(0.60);
}

.work-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 9/16;
    overflow: hidden;
    border-radius: 0;
}

    .work-embed iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.work-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .4s;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top,rgba(4,3,2,.96) 0%,transparent 55%);
}

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

.work-cat {
    font-family: 'JetBrains Mono',monospace;
    font-size: .52rem;
    letter-spacing: .20em;
    text-transform: uppercase;
    color: var(--gold2);
    margin-bottom: .4rem;
    text-shadow: 0 0 12px var(--gold-glow);
}

.work-overlay h3 {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .5rem;
}

.work-overlay p {
    font-size: .82rem;
    color: rgba(255,248,232,.50);
    font-weight: 300;
    margin-bottom: .5rem;
}

.work-stats {
    font-family: 'JetBrains Mono',monospace;
    font-size: .60rem;
    color: var(--gold2);
    margin-bottom: .5rem;
    text-shadow: 0 0 12px var(--gold-glow2);
}

.work-tags {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

    .work-tags span {
        font-family: 'JetBrains Mono',monospace;
        font-size: .48rem;
        letter-spacing: .06em;
        padding: 2px 8px;
        border: 1px solid rgba(255,215,0,0.60);
        color: rgba(255,248,232,0.40);
    }

/* ══ BRANDS ══════════════════════════════════════════════════════ */
.brands-section {
    padding: 5rem 0;
    border-top: 1px solid var(--gold-border3);
    border-bottom: 1px solid var(--gold-border3);
    overflow: hidden;
    background: linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
}

.brands-marquee {
    overflow: hidden;
    position: relative;
}

    .brands-marquee::before, .brands-marquee::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 140px;
        z-index: 2;
        pointer-events: none;
    }

    .brands-marquee::before {
        left: 0;
        background: linear-gradient(to right,var(--bg2),transparent);
    }

    .brands-marquee::after {
        right: 0;
        background: linear-gradient(to left,var(--bg2),transparent);
    }

.brands-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: marquee 28s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

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

.brand-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 400px;
    border: 1px solid var(--gold-border3);
    padding: 1.4rem;
    position: relative;
    transition: all .35s;
    clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
    background: linear-gradient(135deg,var(--bg3),var(--bg2));
}

    .brand-item:hover {
        border-color: var(--gold-border);
        box-shadow: 0 0 30px var(--gold-glow3),inset 0 0 30px rgba(255,215,0,0.12);
    }

    .brand-item img {
        max-width: 100%;
        max-height: 124px;
        object-fit: contain;
        filter: grayscale(0.2) brightness(1.0);
        opacity: .85;
        transition: all .35s;
    }

    .brand-item:hover img {
        filter: grayscale(0) brightness(1.10);
        opacity: 1;
    }

.brand-text-logo {
    font-family: 'JetBrains Mono',monospace;
    font-size: .60rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--mid2);
    text-align: center;
}

.brand-links {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: rgba(4,3,2,.90);
    opacity: 0;
    transition: opacity .3s;
}

.brand-item:hover .brand-links {
    opacity: 1;
}

.brand-links a {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg,var(--gold3),var(--gold2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #080605;
    font-size: .75rem;
    box-shadow: 0 0 16px var(--gold-glow2);
}

/* ══ PLATFORMS ═══════════════════════════════════════════════════ */
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
    gap: 1.5rem;
    padding: 2rem 0;
}

.plat-card {
    background: linear-gradient(160deg,var(--bg3),var(--bg2));
    border: 1px solid var(--gold-border3);
    border-radius: .4rem;
    padding: 2.2rem 1.2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s,box-shadow 0.4s,border-color 0.4s;
    animation: floatHorizontal 7s ease-in-out infinite alternate;
}

[data-theme="light"] .plat-card {
    background: #FFFFFF;
    border-color: rgba(160,110,0,0.20);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.plat-card:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.60),0 0 40px var(--gold-glow2);
    border-color: var(--gold-border);
}

.plat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center,rgba(255,215,0,0.24) 0%,transparent 60%);
    transform: scale(0);
    transition: transform 0.5s;
}

.plat-card:hover::after {
    transform: scale(1);
}

.plat-icon {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    margin: 0 auto 1.1rem;
    transition: transform 0.4s,box-shadow 0.4s;
}

.plat-card:hover .plat-icon {
    transform: scale(1.14) rotate(8deg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.40);
}

.plat-ig .plat-icon {
    background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}

.plat-yt .plat-icon {
    background: #ff0000;
}

.plat-tt .plat-icon {
    background: #010101;
}

.plat-fb .plat-icon {
    background: #1877f2;
}

.plat-li .plat-icon {
    background: #0a66c2;
}

.plat-card h4 {
    font-family: 'Outfit',sans-serif;
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--ink2);
}

.plat-card p {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
    color: var(--mid);
}

.plat-count {
    font-family: 'Cormorant Garamond',serif;
    font-weight: 600;
    font-size: 2.2rem;
    background: linear-gradient(135deg,var(--gold3),var(--gold2),var(--gold4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.90));
    margin-bottom: 0.2rem;
    line-height: 1;
}

.plat-sub {
    font-family: 'JetBrains Mono',monospace;
    font-size: .52rem;
    color: var(--mid2);
    letter-spacing: .08em;
}

@media(max-width:768px) {
    .plat-card {
        padding: 1.6rem .9rem
    }

    .plat-icon {
        width: 52px;
        height: 52px;
        font-size: 1.6rem
    }

    .plat-count {
        font-size: 1.8rem
    }
}

@media(max-width:480px) {
    .plat-card {
        padding: 1.2rem .6rem
    }

    .plat-icon {
        width: 46px;
        height: 46px;
        font-size: 1.4rem
    }

    .plat-count {
        font-size: 1.6rem
    }
}

/* ══ PROCESS ═════════════════════════════════════════════════════ */
.process-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 7rem;
    align-items: start;
}

.process-head h2 {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(2.8rem,5vw,5.5rem);
    line-height: .90;
    letter-spacing: .02em;
    margin-bottom: 1.4rem;
    font-weight: 600;
}

.process-head p {
    font-size: 1.2rem;
    color: var(--mid);
    line-height: 1.95;
    font-weight: 300;
}

.proc-step {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 1.5rem;
    align-items: start;
    padding: 2.2rem 0;
    border-bottom: 1px solid var(--border);
    transition: all .35s;
    cursor: pointer;
    position: relative;
}

    .proc-step::before {
        content: '';
        position: absolute;
        left: -1rem;
        top: 50%;
        bottom: 50%;
        width: 2px;
        background: linear-gradient(180deg,var(--gold3),var(--gold2));
        box-shadow: 0 0 12px var(--gold-glow);
        transition: top .4s,bottom .4s;
    }

    .proc-step:hover::before {
        top: 0;
        bottom: 0;
    }

    .proc-step:hover {
        padding-left: .8rem;
    }

.proc-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--border-dim);
    letter-spacing: .02em;
    transition: all .5s;
    font-weight: 700;
    font-style: italic;
}

.proc-step:hover .proc-num {
    color: var(--gold3);
    text-shadow: 0 0 30px var(--gold-glow);
}

.proc-body h3 {
    font-family: 'Cormorant Garamond',serif;
    font-size: 2.35rem;
    font-weight: 600;
    margin-bottom: .5rem;
    letter-spacing: .01em;
}

.proc-body p {
    font-size: 1.2rem;
    color: var(--mid);
    line-height: 1.80;
    font-weight: 300;
    margin-bottom: .8rem;
}

.proc-tags {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

    .proc-tags span {
        font-family: 'JetBrains Mono',monospace;
        font-size: .90rem;
        letter-spacing: .08em;
        padding: 2px 10px;
        border: 1px solid var(--gold-border3);
        color: var(--mid2);
        transition: all .3s;
    }

.proc-step:hover .proc-tags span {
    border-color: var(--gold-border);
    color: var(--gold2);
}

.proc-arrow {
    color: var(--mid2);
    font-size: 1rem;
    transition: all .35s;
    margin-top: .4rem;
}

.proc-step:hover .proc-arrow {
    color: var(--gold2);
    transform: translateX(5px);
    text-shadow: 0 0 12px var(--gold-glow);
}

/* ══ TEAM ════════════════════════════════════════════════════════ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.5rem;
}

.team-card {
    border: 1px solid var(--gold-border3);
    overflow: hidden;
    transition: all .4s;
    cursor: pointer;
    background: var(--bg2);
    position: relative;
}

    .team-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--gold2),transparent);
        transform: scaleX(0);
        transition: transform .5s;
        box-shadow: 0 0 20px var(--gold-glow);
    }

    .team-card:hover::before {
        transform: scaleX(1);
    }

    .team-card:hover {
        border-color: var(--gold-border);
        transform: translateY(-6px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.60),0 0 40px var(--gold-glow3);
    }

.team-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    font-family: 'JetBrains Mono',monospace;
    font-size: .50rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    background: linear-gradient(135deg,var(--gold3),var(--gold));
    color: #080605;
    padding: 4px 12px;
    box-shadow: 0 0 16px var(--gold-glow);
    font-weight: 700;
}

.team-photo-wrap {
    height: 280px;
    overflow: hidden;
    position: relative;
}

    .team-photo-wrap::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,rgba(4,3,2,.85) 0%,transparent 50%);
    }

.team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    filter: grayscale(.5) brightness(0.85);
    transition: filter .55s,transform .55s;
}

.team-card:hover .team-photo {
    filter: grayscale(0.15) brightness(0.92) saturate(0.85);
    transform: scale(1.04);
}

.team-photo-placeholder {
    width: 100%;
    height: 280px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond',serif;
    font-size: 4rem;
    color: var(--gold3);
    font-style: italic;
}

.team-body {
    padding: 1.6rem;
    background: var(--bg2);
}

    .team-body h3 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: .25rem;
    }

.team-role {
    font-family: 'JetBrains Mono',monospace;
    font-size: .88rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold2);
    margin-bottom: .7rem;
    text-shadow: 0 0 12px var(--gold-glow2);
}

.team-bio {
    font-size: 1.1rem;
    color: var(--mid);
    line-height: 1.65;
    margin-bottom: .9rem;
    font-weight: 300;
}

.team-socials {
    display: flex;
    gap: .4rem;
}

    .team-socials a {
        width: 30px;
        height: 30px;
        border: 1px solid var(--gold-border3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mid2);
        font-size: .75rem;
        transition: all .3s;
        background: transparent;
    }

        .team-socials a:hover {
            background: linear-gradient(135deg,var(--gold3),var(--gold2));
            border-color: var(--gold2);
            color: #080605;
            box-shadow: 0 0 16px var(--gold-glow);
        }

/* ══ REVIEWS ═════════════════════════════════════════════════════ */
.reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--gold-border3);
    border: 1px solid var(--gold-border3);
}

.review-card {
    background: var(--bg2);
    padding: 3.5rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition);
}

    .review-card::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,transparent,var(--gold2),transparent);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .6s;
        box-shadow: 0 0 20px var(--gold-glow);
    }

    .review-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 110%,rgba(255,215,0,0.18) 0%,transparent 60%);
        opacity: 0;
        transition: opacity .4s;
    }

    .review-card:hover {
        background: var(--bg3);
    }

        .review-card:hover::before {
            transform: scaleX(1);
        }

        .review-card:hover::after {
            opacity: 1;
        }

.review-stars {
    font-size: .9rem;
    letter-spacing: .12em;
    margin-bottom: 1.2rem;
    background: linear-gradient(90deg,var(--gold3),var(--gold2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.90));
}

.review-quote-mark {
    font-family: 'Cormorant Garamond',serif;
    font-size: 7rem;
    color: var(--gold2);
    opacity: .10;
    line-height: .8;
    margin-bottom: .5rem;
    font-style: italic;
    text-shadow: 0 0 40px var(--gold-glow2);
}

.review-text {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.12rem;
    line-height: 1.80;
    color: var(--ink2);
    margin-bottom: 2.2rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: .01em;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.review-av {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--gold-border);
    background: var(--surface);
    padding: 2px;
}

.review-av-placeholder {
    width: 46px;
    height: 46px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.3rem;
    color: var(--gold3);
    flex-shrink: 0;
    clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
    border: 1px solid var(--gold-border3);
}

.review-name {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.2rem;
    font-weight: 600;
}

.review-role {
    font-family: 'JetBrains Mono',monospace;
    font-size: .90rem;
    color: var(--mid2);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.review-platform {
    margin-left: auto;
    font-size: 1.3rem;
    color: var(--gold3);
    text-shadow: 0 0 12px var(--gold-glow2);
}

/* ══ CTA BAND ════════════════════════════════════════════════════ */
.cta-band {
    padding: 11rem 0;
    text-align: center;
    position: relative;
    background: linear-gradient(160deg,#060402 0%,#0E0C08 50%,#090705 100%);
    overflow: hidden;
}

    .cta-band::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 60% at 50% 50%,rgba(255,215,0,0.30) 0%,transparent 65%), radial-gradient(ellipse 40% 30% at 20% 80%,rgba(255,215,0,0.15) 0%,transparent 50%), radial-gradient(ellipse 40% 30% at 80% 20%,rgba(255,215,0,0.15) 0%,transparent 50%);
        z-index: 0;
    }

    .cta-band::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(255,215,0,0.90),rgba(255,215,0,0.90),rgba(255,215,0,0.90),transparent);
        box-shadow: 0 0 30px var(--gold-glow);
    }

.cta-bg-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond',serif;
    font-size: 22vw;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,215,0,0.12);
    white-space: nowrap;
    pointer-events: none;
    overflow: hidden;
    font-style: italic;
}

.cta-content {
    position: relative;
    z-index: 2;
}

    .cta-content h2 {
        font-family: 'Cormorant Garamond',serif;
        font-size: clamp(3.5rem,9vw,11rem);
        line-height: .90;
        letter-spacing: .02em;
        color: var(--ink);
        margin: 1rem 0 2rem;
        font-weight: 600;
        font-style: italic;
    }

.cta-orange, .cta-gold {
    background: linear-gradient(135deg,var(--gold3) 0%,var(--gold2) 45%,var(--gold4) 70%,var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(255,215,0,0.90));
}

.cta-content p {
    color: rgba(255,248,232,.38);
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.15rem;
    font-style: italic;
    margin-bottom: 2.8rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

.cta-btns {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ══ CONTACT ═════════════════════════════════════════════════════ */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 7rem;
    align-items: start;
}

.contact-info h2 {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(2.8rem,5vw,5.5rem);
    line-height: .90;
    letter-spacing: .02em;
    margin-bottom: 2.2rem;
    font-weight: 600;
}

.cinfo-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--border);
}

    .cinfo-item i {
        color: var(--gold2);
        margin-top: .25rem;
        font-size: .9rem;
        width: 16px;
        flex-shrink: 0;
        text-shadow: 0 0 12px var(--gold-glow);
    }

.cinfo-label {
    font-family: 'JetBrains Mono',monospace;
    font-size: .52rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mid2);
    margin-bottom: .2rem;
}

.contact-form-wrap {
    background: linear-gradient(160deg,var(--bg3),var(--bg2));
    border: 1px solid var(--gold-border);
    padding: 3.5rem;
    clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    box-shadow: var(--shadow-gold);
    position: relative;
    overflow: hidden;
}

    .contact-form-wrap::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 150px;
        height: 150px;
        background: radial-gradient(ellipse at top right,rgba(255,215,0,0.30) 0%,transparent 60%);
        pointer-events: none;
    }

.f-group {
    margin-bottom: 1.5rem;
}

    .f-group label {
        display: block;
        font-family: 'JetBrains Mono',monospace;
        font-size: .52rem;
        letter-spacing: .20em;
        text-transform: uppercase;
        color: var(--gold3);
        margin-bottom: .55rem;
        text-shadow: 0 0 12px var(--gold-glow2);
    }

    .f-group input, .f-group textarea, .f-group select {
        width: 100%;
        padding: .90rem 1.1rem;
        background: rgba(6,5,4,0.60);
        border: 1px solid var(--gold-border3);
        color: var(--ink2);
        font-size: .90rem;
        font-weight: 300;
        transition: all .30s;
        clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
    }

[data-theme="light"] .f-group input, [data-theme="light"] .f-group textarea, [data-theme="light"] .f-group select {
    background: rgba(250,247,240,0.70);
    color: var(--ink);
}

.f-group input:focus, .f-group textarea:focus, .f-group select:focus {
    border-color: var(--gold-border);
    box-shadow: 0 0 0 3px var(--gold-glow2),0 0 20px var(--gold-glow3);
    background: rgba(10,8,5,0.80);
}

.field-error {
    font-family: 'JetBrains Mono',monospace;
    font-size: .52rem;
    letter-spacing: .08em;
    color: var(--gold2);
    margin-top: .3rem;
    display: block;
}

.f-group.has-error input, .f-group.has-error textarea, .f-group.has-error select {
    border-color: var(--gold);
}

.f-group textarea {
    resize: none;
    height: 130px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-success {
    background: rgba(37,211,102,.06);
    border: 1px solid rgba(37,211,102,.20);
    color: #4ade80;
    padding: .9rem 1.1rem;
    margin-bottom: 1rem;
    font-family: 'JetBrains Mono',monospace;
    font-size: .72rem;
    letter-spacing: .04em;
}

.form-error {
    background: rgba(255,215,0,0.18);
    border: 1px solid var(--gold-border3);
    color: var(--gold2);
    padding: .9rem 1.1rem;
    margin-bottom: 1rem;
    font-family: 'JetBrains Mono',monospace;
    font-size: .72rem;
    letter-spacing: .04em;
}

/* ══ BLOG ════════════════════════════════════════════════════════ */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}

.blog-card {
    border: 1px solid var(--gold-border3);
    overflow: hidden;
    transition: all .4s;
    background: var(--bg2);
}

    .blog-card:hover {
        border-color: var(--gold-border);
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.50),0 0 40px var(--gold-glow3);
    }

.blog-img {
    height: 210px;
    overflow: hidden;
}

    .blog-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s,filter .4s;
        filter: brightness(0.85) saturate(0.80);
    }

.blog-card:hover .blog-img img {
    transform: scale(1.06);
    filter: brightness(0.95) saturate(0.90);
}

.blog-body {
    padding: 1.8rem;
    background: var(--bg2);
}

.blog-cat {
    font-family: 'JetBrains Mono',monospace;
    font-size: .90rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold2);
    display: block;
    margin-bottom: .7rem;
    text-shadow: 0 0 12px var(--gold-glow2);
}

.blog-body h3 {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: .7rem;
    letter-spacing: .01em;
}

    .blog-body h3 a:hover {
        color: var(--gold2);
    }

.blog-body p {
    font-size: 1.1rem;
    color: var(--mid);
    line-height: 1.80;
    margin-bottom: 1.2rem;
    font-weight: 300;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono',monospace;
    font-size: .82rem;
    color: var(--mid2);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.blog-read-more {
    color: var(--gold2);
    text-shadow: 0 0 12px var(--gold-glow2);
}

    .blog-read-more:hover {
        color: var(--gold4);
    }

/* ══ FOOTER ══════════════════════════════════════════════════════ */
footer {
    background: linear-gradient(160deg,#060402 0%,#090705 60%,#060402 100%);
    color: rgba(255,248,232,.75);
    padding: 7rem 0 3rem;
    position: relative;
}

    footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(255,215,0,0.90),rgba(255,215,0,0.90),rgba(255,215,0,0.90),transparent);
        box-shadow: 0 0 30px var(--gold-glow2);
    }

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255,215,0,0.30);
    margin-bottom: 2rem;
}

.footer-logo-mark {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg,var(--gold5),var(--gold3),var(--gold2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed',sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #0E0C08;
    clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
    margin-bottom: .9rem;
    box-shadow: 0 0 24px var(--gold-glow2);
}

.footer-logo-text {
    font-family: 'Barlow Condensed',sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: .7rem;
}

    .footer-logo-text span {
        color: var(--gold2);
        text-shadow: var(--glow-text);
    }

.footer-logo-img {
    height: 44px;
    width: auto;
    margin-bottom: .9rem;
}

.footer-tagline {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.05rem;
    font-style: italic;
    color: rgba(255,248,232,.30);
    margin-bottom: .9rem;
    letter-spacing: .02em;
}

.footer-desc {
    font-size: .82rem;
    color: rgba(255,248,232,.24);
    max-width: 290px;
    line-height: 1.80;
    margin-bottom: 1.6rem;
    font-weight: 300;
}

.footer-socials {
    display: flex;
    gap: .6rem;
}

    .footer-socials a {
        width: 36px;
        height: 36px;
        border: 1px solid rgba(255,215,0,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,248,232,.30);
        font-size: .80rem;
        transition: all .35s;
        clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
        background: transparent;
    }

        .footer-socials a:hover {
            background: linear-gradient(135deg,var(--gold3),var(--gold2));
            border-color: var(--gold2);
            color: #0E0C08;
            box-shadow: 0 0 20px var(--gold-glow);
        }

.footer-col h5 {
    font-family: 'JetBrains Mono',monospace;
    font-size: .54rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold3);
    margin-bottom: 1.4rem;
    text-shadow: 0 0 12px var(--gold-glow2);
}

.footer-col a {
    display: block;
    font-size: .84rem;
    color: rgba(255,248,232,.35);
    margin-bottom: .75rem;
    transition: color .3s;
    font-weight: 300;
}

    .footer-col a:hover {
        color: var(--gold2);
        text-shadow: 0 0 12px var(--gold-glow2);
    }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

    .footer-bottom span {
        font-family: 'JetBrains Mono',monospace;
        font-size: .54rem;
        letter-spacing: .10em;
        color: rgba(255,248,232,.15);
        text-transform: uppercase;
    }

.footer-credit a {
    color: var(--gold3);
    text-shadow: 0 0 8px var(--gold-glow2);
}

/* ══ WHATSAPP FLOAT ══════════════════════════════════════════════ */
.wa-float {
    position: fixed;
    bottom: 5rem;
    left: 1.5rem;
    z-index: 400;
    width: 52px;
    height: 52px;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    box-shadow: 0 4px 24px rgba(37,211,102,.35);
    transition: all .35s;
    animation: floatWa 4s ease-in-out infinite;
    clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}

    .wa-float:hover {
        transform: scale(1.10);
        background: #1da855;
        box-shadow: 0 8px 32px rgba(37,211,102,.45);
    }

@keyframes floatWa {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

/* ══ AI BOT ══════════════════════════════════════════════════════ */
.bot-widget {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 400;
}

.bot-toggle {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg,var(--gold5),var(--gold3),var(--gold)) !important;
    border: 1px solid var(--gold-border) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #080605 !important;
    box-shadow: 0 4px 30px rgba(255,215,0,0.50),0 0 70px rgba(255,215,0,0.25);
    transition: all .35s;
    cursor: pointer;
    clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}

    .bot-toggle i {
        color: #080605 !important;
    }

    .bot-toggle svg {
        fill: #080605 !important;
    }

    .bot-toggle:hover {
        box-shadow: 0 8px 50px var(--gold-glow4),0 0 80px var(--gold-glow);
        transform: translateY(-2px);
    }

.bot-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg,var(--gold3),var(--gold2));
    font-size: .60rem;
    font-weight: 700;
    color: #080605;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));
    box-shadow: 0 0 12px var(--gold-glow);
}

.bot-window {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 330px;
    background: linear-gradient(160deg,#141008,#0E0C08);
    border: 1px solid var(--gold-border);
    box-shadow: var(--shadow-gold2);
    clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}

.bot-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.3rem;
    background: linear-gradient(135deg,var(--gold5) 0%,var(--gold3) 50%,var(--gold) 100%);
    color: #0E0C08;
    box-shadow: 0 2px 20px rgba(0,0,0,0.40);
}

.bot-head-avatar {
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed',sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: #FAF0D0;
    flex-shrink: 0;
}

.bot-head-name {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.15rem;
    letter-spacing: .04em;
    font-weight: 700;
}

.bot-head-status {
    font-family: 'JetBrains Mono',monospace;
    font-size: .55rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    opacity: .75;
    letter-spacing: .06em;
}

.online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #080605;
    animation: pulse 2.5s infinite;
}

.bot-close-btn {
    margin-left: auto;
    background: rgba(0,0,0,.20);
    border: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    cursor: pointer;
    color: #0E0C08;
    transition: background .25s;
}

    .bot-close-btn:hover {
        background: rgba(0,0,0,.35);
    }

.bot-messages {
    height: 270px;
    overflow-y: auto;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gold5) transparent;
}

.bot-msg, .bot-user-msg {
    max-width: 90%;
}

.bot-bubble {
    background: rgba(255,215,0,0.15);
    border: 1px solid var(--gold-border3);
    padding: .75rem 1rem;
    font-size: .82rem;
    line-height: 1.65;
    color: rgba(255,248,232,.80);
}

.bot-user-msg {
    align-self: flex-end;
}

    .bot-user-msg .bot-bubble {
        background: rgba(255,215,0,0.36);
        border-color: var(--gold-border2);
        color: rgba(255,248,232,.90);
    }

.bot-quick-replies {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

    .bot-quick-replies button {
        font-family: 'JetBrains Mono',monospace;
        font-size: .50rem;
        letter-spacing: .08em;
        padding: 4px 10px;
        border: 1px solid var(--gold-border2);
        color: var(--gold2);
        background: transparent;
        transition: all .3s;
        cursor: pointer;
    }

        .bot-quick-replies button:hover {
            background: rgba(255,215,0,0.36);
            box-shadow: 0 0 12px var(--gold-glow3);
        }

.bot-input-area {
    display: flex;
    border-top: 1px solid var(--gold-border3);
}

    .bot-input-area input {
        flex: 1;
        background: transparent;
        border: none;
        padding: .85rem 1rem;
        font-size: .82rem;
        color: rgba(255,248,232,.80);
    }

        .bot-input-area input::placeholder {
            color: rgba(255,248,232,.22);
        }

    .bot-input-area button {
        padding: .85rem 1.1rem;
        color: var(--gold2);
        font-size: .95rem;
        cursor: pointer;
        background: transparent;
        border: none;
        transition: all .3s;
    }

        .bot-input-area button:hover {
            color: var(--gold4);
            text-shadow: 0 0 16px var(--gold-glow);
        }

.bot-typing {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: .5rem 0;
}

    .bot-typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold2);
        opacity: .4;
        animation: typing .9s infinite;
        box-shadow: 0 0 8px var(--gold-glow2);
    }

        .bot-typing span:nth-child(2) {
            animation-delay: .18s
        }

        .bot-typing span:nth-child(3) {
            animation-delay: .36s
        }

@keyframes typing {
    0%,60%,100% {
        opacity: .2;
        transform: translateY(0)
    }

    30% {
        opacity: 1;
        transform: translateY(-4px)
    }
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */
/* ══ StudioAesthetic BADGE ═══════════════════════════════════════════ */
.fcx-badge {
    position: fixed;
    bottom: 9.2rem;
    left: 1.5rem;
    z-index: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .5rem .8rem .55rem;
    background: linear-gradient(160deg, var(--bg3), var(--bg2));
    border: 1px solid var(--gold-border2);
    text-decoration: none;
    transition: all .30s;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    box-shadow: 0 4px 20px rgba(0,0,0,0.50);
}

    .fcx-badge:hover {
        border-color: var(--gold-border);
        box-shadow: 0 4px 24px rgba(0,0,0,0.60), 0 0 20px rgba(255,215,0,0.12);
        transform: translateY(-2px);
    }

.fcx-badge-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .42rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mid2);
    line-height: 1;
}

.fcx-badge-brand {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.fcx-badge-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}

.fcx-badge-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--gold2);
    line-height: 1;
}

[data-theme="light"] .fcx-badge {
    background: #FFFFFF;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    border-color: rgba(150,110,0,0.20);
}

[data-theme="light"] .fcx-badge-label {
    color: #9A9080;
}

/* ══ CHATBOT POWERED-BY ══════════════════════════════════════════ */
.bot-powered {
    border-top: 1px solid var(--gold-border3);
    padding: .5rem 1rem;
    text-align: center;
}

    .bot-powered a {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-family: 'JetBrains Mono', monospace;
        font-size: .48rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--mid2);
        text-decoration: none;
        transition: color .25s;
    }

        .bot-powered a:hover {
            color: var(--gold2);
        }

        .bot-powered a strong {
            color: var(--gold);
            font-weight: 700;
            letter-spacing: .08em;
            transition: color .25s;
        }

        .bot-powered a:hover strong {
            color: var(--gold2);
        }

.bot-powered-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold3);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(255,215,0,0.40);
}

/* ══ LIGHT MODE COMPONENT OVERRIDES ════════════════════════════ */
[data-theme="light"] .svc-card {
    background: #FFFFFF;
}

    [data-theme="light"] .svc-card:hover {
        background: #FAFAFA;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08), inset 0 0 40px rgba(150,110,0,0.03);
    }

[data-theme="light"] .review-card {
    background: #FFFFFF;
}

    [data-theme="light"] .review-card:hover {
        background: #FAFAFA;
    }

[data-theme="light"] .review-text {
    color: var(--ink2);
}

[data-theme="light"] .blog-card {
    background: #FFFFFF;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

[data-theme="light"] .blog-body {
    background: #FFFFFF;
}

[data-theme="light"] .team-card {
    background: #FFFFFF;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

[data-theme="light"] .team-body {
    background: #FFFFFF;
}

[data-theme="light"] .brand-item {
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

    [data-theme="light"] .brand-item img {
        filter: grayscale(0.2) brightness(0.90);
        opacity: 0.80;
    }

    [data-theme="light"] .brand-item:hover img {
        filter: grayscale(0) brightness(1.0);
        opacity: 1;
    }

[data-theme="light"] .val-item {
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

[data-theme="light"] .contact-form-wrap {
    background: #FFFFFF;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08), 0 0 20px rgba(150,110,0,0.08);
}

[data-theme="light"] .mob-menu {
    background: #FFFFFF;
    border-left-color: rgba(150,110,0,0.20);
    box-shadow: -16px 0 50px rgba(0,0,0,0.12);
}

[data-theme="light"] .mob-close {
    background: rgba(150,110,0,0.05);
}

[data-theme="light"] .mob-nav a {
    color: var(--ink2);
    border-bottom-color: rgba(150,110,0,0.12);
}

[data-theme="light"] .port-tabs {
    border-bottom-color: rgba(150,110,0,0.15);
}

[data-theme="light"] .about-text p {
    color: var(--mid);
}

[data-theme="light"] .section-alt {
    background: #F5F3EC;
}

[data-theme="light"] .brands-section {
    background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
    border-color: rgba(150,110,0,0.12);
}

[data-theme="light"] .brands-marquee::before {
    background: linear-gradient(to right, #FAFAFA, transparent);
}

[data-theme="light"] .brands-marquee::after {
    background: linear-gradient(to left, #FAFAFA, transparent);
}

[data-theme="light"] .f-group input:focus,
[data-theme="light"] .f-group textarea:focus,
[data-theme="light"] .f-group select:focus {
    background: #FFFFFF;
    border-color: rgba(180,130,0,0.50);
    box-shadow: 0 0 0 3px rgba(180,130,0,0.10);
}

[data-theme="light"] .work-img {
    filter: brightness(0.95) saturate(0.90);
}

[data-theme="light"] .proc-step {
    border-bottom-color: rgba(150,110,0,0.12);
}

[data-theme="light"] .hstat-label {
    color: rgba(60,53,32,0.55);
}

[data-theme="light"] .hfc-sub {
    color: rgba(60,53,32,0.50);
}

[data-theme="light"] .hfc-label {
    color: var(--gold3);
}

[data-theme="light"] body::after {
    display: none;
}

@media(max-width:1200px) {
    .hero-right {
        display: none
    }

    .hero::after {
        display: none
    }

    .hero-bg-panel {
        display: none
    }

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

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

    .platforms-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .process-layout {
        grid-template-columns: 1fr;
        gap: 3rem
    }
}

@media(max-width:960px) {
    .about-layout, .contact-layout {
        grid-template-columns: 1fr;
        gap: 4rem
    }

    .services-grid {
        grid-template-columns: 1fr 1fr
    }

    .works-grid {
        grid-template-columns: 1fr 1fr
    }

    .work-featured {
        grid-column: auto;
        grid-row: auto
    }

    .reviews-grid {
        grid-template-columns: 1fr
    }

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

    .nav-links, .nav-actions .btn-orange {
        display: none
    }

    .ham-btn {
        display: flex
    }
}

@media(max-width:640px) {
    .section {
        padding: 5.5rem 0
    }

    .services-grid, .works-grid, .team-grid, .metrics-grid, .platforms-grid, .blog-grid {
        grid-template-columns: 1fr
    }

    .form-row {
        grid-template-columns: 1fr
    }

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

    .hero-title {
        font-size: clamp(4rem,17vw,7rem)
    }

    .about-values {
        grid-template-columns: 1fr
    }

    #workPreviewPopup {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.92);
        backdrop-filter: blur(12px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 999999;
    }

    #popupContent {
        position: relative;
        width: 90vw;
        max-width: 1100px;
        height: 80vh;
        background: #000;
        border-radius: 0;
        overflow: hidden;
        box-shadow: 0 30px 100px rgba(0,0,0,.90),0 0 60px var(--gold-glow3);
        border: 1px solid var(--gold-border3);
        animation: popupZoom .35s ease;
    }

    @keyframes popupZoom {
        from {
            transform: scale(.88);
            opacity: 0
        }

        to {
            transform: scale(1);
            opacity: 1
        }
    }

    #popupMedia {
        width: 100%;
        height: 100%
    }

        #popupMedia iframe, #popupMedia video, #popupMedia img {
            width: 100%;
            height: 100%;
            border: none;
            object-fit: contain
        }

    #closePopup {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,.70);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        z-index: 10;
        transition: .25s
    }

        #closePopup:hover {
            background: rgba(255,215,0,0.90)
        }

    .work-embed iframe, .work-video video {
        pointer-events: none
    }

    .work-card video, .work-card iframe {
        pointer-events: none
    }

    .work-card {
        position: relative
    }

    .work-click {
        position: absolute;
        inset: 0;
        z-index: 5;
        cursor: pointer
    }
}

[data-theme="light"] .svc-card {
    background: #FFFFFF;
}

    [data-theme="light"] .svc-card:hover {
        background: #F9F6EE;
    }

[data-theme="light"] .review-card {
    background: #FFFFFF;
}

    [data-theme="light"] .review-card:hover {
        background: #F9F6EE;
    }

[data-theme="light"] .blog-body {
    background: #FFFFFF;
}

[data-theme="light"] .team-body {
    background: #FFFFFF;
}

[data-theme="light"] .admin-card {
    background: #FFFFFF;
}

[data-theme="light"] .brand-item {
    background: #FFFFFF;
}

[data-theme="light"] .metric-card {
    background: #FFFFFF;
    border: 1px solid rgba(160,110,0,0.12);
}

[data-theme="light"] .contact-form-wrap {
    background: #FFFFFF;
}

[data-theme="light"] .mob-menu {
    background: #FFFFFF;
}