/* ═══════════════════════════════════════════════════════════════
   FutureCodeX — main.css v3
   Theme: Industrial Precision × Digital Power
   Palette: Black + Blazing Orange + White
   Dark/Light configurable via CSS variables
════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?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');

/* ── LIGHT MODE (default) ────────────────────────────────────── */
:root {
    --bg: #ffffff;
    --bg2: #f7f7f7;
    --bg3: #efefef;
    --surface: #e8e8e8;
    --ink: #0a0a0a;
    --ink2: #1c1c1c;
    --ink3: #2e2e2e;
    --mid: #555555;
    --mid2: #888888;
    --orange: #f05a00;
    --orange2: #ff6f1a;
    --orange3: #c44800;
    --orange-glow: rgba(240,90,0,0.18);
    --border: rgba(10,10,10,0.10);
    --border2: rgba(10,10,10,0.20);
    --nav-h: 70px;
    --shadow: 0 4px 32px rgba(10,10,10,0.10);
    --shadow-lg: 0 20px 80px rgba(10,10,10,0.18);
    --r: 0px;
    --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ── DARK MODE ───────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg: #0c0c0c;
    --bg2: #141414;
    --bg3: #1a1a1a;
    --surface: #222222;
    --ink: #f5f5f5;
    --ink2: #e0e0e0;
    --ink3: #c8c8c8;
    --mid: #9a9a9a;
    --mid2: #666666;
    --border: rgba(245,245,245,0.08);
    --border2: rgba(245,245,245,0.15);
    --shadow: 0 4px 32px rgba(0,0,0,0.50);
    --shadow-lg: 0 20px 80px rgba(0,0,0,0.70);
}

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

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

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

/* ── NOISE TEXTURE ───────────────────────────────────────────── */
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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    opacity: 0.5;
}

/* ── CUSTOM CURSOR: disabled - using system cursor ───────────── */
#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 {
    color: var(--orange);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--orange);
    padding: .3rem 0;
    margin-bottom: 1rem;
}

    .eyebrow::before {
        content: '';
        width: 28px;
        height: 2px;
        background: var(--orange);
    }

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

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

.sr-r {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .8s ease, transform .8s 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 {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--orange);
    color: #fff;
    padding: .75rem 2rem;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .04em;
    border: 2px solid var(--orange);
    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));
}

    .btn-orange::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.12);
        transform: translateX(-100%);
        transition: transform .4s;
    }

    .btn-orange:hover::after {
        transform: translateX(0);
    }

    .btn-orange:hover {
        background: var(--orange2);
        border-color: var(--orange2);
        transform: translateY(-2px);
        box-shadow: 0 8px 28px var(--orange-glow);
    }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.08);
    color: #fff;
    padding: .73rem 2rem;
    font-size: .88rem;
    font-weight: 600;
    border: 2px solid rgba(255,255,255,.45);
    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));
}

    .btn-outline:hover {
        border-color: var(--orange);
        color: var(--orange);
        background: rgba(240,90,0,.1);
        transform: translateY(-2px);
    }

.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: #25D366;
    color: #fff;
    padding: .75rem 2rem;
    font-size: .88rem;
    font-weight: 600;
    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));
}

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

.btn-wa-big {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    background: #25D366;
    color: #fff;
    padding: 1rem 2.4rem;
    font-size: .92rem;
    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));
}

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

/* ── NAV ─────────────────────────────────────────────────────── */
#main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 500;
    height: var(--nav-h);
    transition: all .4s;
}

    #main-nav.scrolled {
        background: var(--bg);
        border-bottom: 1px solid var(--border2);
        box-shadow: var(--shadow);
    }

.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: .8rem;
}

.nav-logo-mark {
    width: 38px;
    height: 38px;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .85rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: .08em;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

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

    .nav-logo-text span {
        color: var(--orange);
    }

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

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

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

        .nav-links a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 0;
            height: 2px;
            background: var(--orange);
            transition: width var(--transition);
        }

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

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

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

.theme-toggle {
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--border2);
    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));
}

    .theme-toggle:hover {
        border-color: var(--orange);
        color: var(--orange);
    }

.btn-sm {
    padding: .55rem 1.4rem;
    font-size: .78rem;
}

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

    .ham-btn span {
        width: 24px;
        height: 2px;
        background: var(--ink);
        display: block;
        transition: .3s;
    }

/* Mobile menu */
.mob-overlay {
    position: fixed;
    inset: 0;
    z-index: 490;
    background: rgba(0,0,0,.6);
    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(340px,92vw);
    background: var(--bg2);
    border-left: 1px solid var(--border2);
    display: flex;
    flex-direction: column;
    padding: 2rem 2.5rem;
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.77,0,.18,1);
}

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

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

    .mob-close:hover {
        border-color: var(--orange);
        color: var(--orange);
    }

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

    .mob-nav a {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ink);
        padding: .5rem 0;
        border-bottom: 1px solid var(--border);
        transition: color .3s;
    }

        .mob-nav a:hover {
            color: var(--orange);
        }

.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: #0a0a0a;
}

    /* diagonal split - REMOVED, full bg instead */
    .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,.72) 0%, rgba(0,0,0,.45) 55%, rgba(240,90,0,.12) 100%);
}

/* orange grid lines */
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(135deg, rgba(0,0,0,.3) 0%, transparent 60%);
}

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

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .6rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    margin-bottom: 1.8rem;
}

.eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    animation: pulse 2s infinite;
}

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

    50% {
        opacity: .3;
        transform: scale(2.2);
    }
}

.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 {
    color: var(--orange);
}

.ht-outline {
    -webkit-text-stroke: 3px #fff;
    color: transparent;
}

[data-theme="dark"] .ht-outline {
    -webkit-text-stroke: 3px rgba(255,255,255,0.7);
}

.hero-sub {
    font-size: 1rem;
    color: rgba(255,255,255,.75);
    line-height: 1.9;
    max-width: 460px;
    margin-bottom: 2.8rem;
    font-weight: 300;
}

.hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}

.hero-stats {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255,255,255,.2);
}

.hstat-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8rem;
    line-height: 1;
    color: #fff;
    letter-spacing: .04em;
}

[data-theme="dark"] .hstat-num {
    color: #fff;
}

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


.hstat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .55rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-top: .3rem;
}

/* floating cards on right */
.hero-right {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1.2rem;
    pointer-events: none;
}

.hero-float-card {
    width: 100%;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.12);
    padding: 1.4rem 1.8rem;
    color: #fff;
    animation: floatCard 5s ease-in-out infinite;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

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

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

    50% {
        transform: translateY(-10px);
    }
}

.hfc-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .52rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .5;
    margin-bottom: .4rem;
}

.hfc-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    letter-spacing: .06em;
    color: var(--orange);
}

.hfc-sub {
    font-size: .78rem;
    opacity: .55;
    margin-top: .2rem;
}

.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: .5rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mid2);
    animation: scrollBounce 2s ease-in-out infinite;
}

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

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

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(var(--orange), transparent);
}

/* ── HERO RIGHT PANEL ────────────────────────── */
.hero-right {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none; /* decorative panel */
}

/* ── FLOAT CARDS ───────────────────────────── */
.hero-float-card {
    background: rgba(0,0,0,0.85); /* almost solid dark background */
    color: #fff; /* readable text */
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    min-width: 160px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    transition: transform 0.4s, box-shadow 0.4s;
    pointer-events: all;
    animation: floatHorizontal 5s ease-in-out infinite alternate;
}

    /* Hover effect */
    .hero-float-card:hover {
        transform: scale(1.08);
        box-shadow: 0 25px 50px rgba(255,140,0,0.6);
    }

/* ── CARD TEXT ───────────────────────────── */
.hfc-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    text-transform: uppercase;
    color: #ffd680; /* bright label for readability */
    margin-bottom: 0.3rem;
}

.hfc-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #ffb347; /* vibrant number */
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    margin-bottom: 0.15rem;
}

.hfc-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.06em;
}

/* ── HORIZONTAL FLOAT ANIMATION ───────────── */
@keyframes floatHorizontal {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }

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

/* ── LIGHT MODE FIX ───────────────────────── */
[data-theme="light"] .hero-float-card {
    background: rgba(0,0,0,0.85); /* keep dark for contrast even in light mode */
    color: #fff;
}

[data-theme="light"] .hfc-label {
    color: #ffd680;
}

[data-theme="light"] .hfc-value {
    color: #ffb347;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

[data-theme="light"] .hfc-sub {
    color: rgba(255,255,255,0.85);
}

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

    .hero-float-card {
        min-width: 140px;
        padding: 1.6rem 1.2rem;
    }

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

@media(max-width:768px) {
    .hero-right {
        display: none;
    }
}
/* ── TICKER ──────────────────────────────────────────────────── */
.ticker-wrap {
    overflow: hidden;
    padding: .65rem 0;
    background: var(--orange);
}

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

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

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

.ticker-item {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    white-space: nowrap;
    gap: .8rem;
}

.ticker-sep {
    opacity: .5;
}

/* ── 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));
}

.about-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-img-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 5rem;
    color: var(--orange);
    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: 110px;
    height: 110px;
    background: var(--orange);
    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));
}

.about-badge-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: .5rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
}

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

.about-text h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(3rem, 5.5vw, 6.5rem);
    line-height: .88;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.about-sub {
    font-size: 1.05rem;
    color: var(--orange);
    font-style: italic;
    margin-bottom: 1.4rem;
}

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

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

.val-item {
    padding: 1.2rem;
    border: 1px solid var(--border2);
    transition: border-color var(--transition);
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

    .val-item:hover {
        border-color: var(--orange);
    }

.val-icon {
    color: var(--orange);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .2rem;
}

.val-item h4 {
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

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

/* ── METRICS BAND ────────────────────────────────────────────── */
.metrics-band {
    padding: 6rem 0;
    background: linear-gradient(135deg, #0a0a0a, #111);
    position: relative;
    overflow: hidden;
    color: #fff;
}

    .metrics-band::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%, rgba(255,140,0,.05), transparent 70%);
        z-index: 0;
    }

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.metric-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: all 0.4s ease;
    cursor: default;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    position: relative;
    overflow: hidden;
}

    .metric-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 28px rgba(255,140,0,.4);
        background: rgba(255,140,0,.1);
    }

    .metric-card::after {
        content: '';
        position: absolute;
        width: 150%;
        height: 150%;
        top: -25%;
        left: -25%;
        background: radial-gradient(circle, rgba(255,140,0,.1), transparent 70%);
        transform: rotate(45deg);
        pointer-events: none;
    }

.metric-icon {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: var(--orange);
    display: inline-block;
    animation: bounce 2s infinite;
}

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

    50% {
        transform: translateY(-6px);
    }
}

.metric-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 3rem;
    line-height: 1.2;
    color: #fff;
    font-weight: 700;
    margin-bottom: .3rem;
    transition: color .3s;
}

.metric-label {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .2rem;
}

.metric-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .08em;
}

/* Responsive tweaks */
@media(max-width: 768px) {
    .metrics-band {
        padding: 4rem 0;
    }

    .metric-num {
        font-size: 2.2rem;
    }
}

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

    .metric-icon {
        font-size: 1.8rem;
    }
}
/* ── SERVICES ────────────────────────────────────────────────── */
.section-head {
    margin-bottom: 5rem;
}

    .section-head h2 {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: clamp(3rem, 6.5vw, 8rem);
        line-height: .86;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

.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: 'Barlow Condensed', sans-serif;
        font-size: clamp(3rem, 5vw, 6.5rem);
        line-height: .88;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

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

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

[data-theme="dark"] .svc-card {
    background: var(--bg2);
}

.svc-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--orange);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .4s;
}

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

.svc-card:hover {
    background: var(--bg2);
}

[data-theme="dark"] .svc-card:hover {
    background: var(--bg3);
}

.svc-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--border2);
    letter-spacing: .04em;
    transition: color .3s;
}

.svc-card:hover .svc-num {
    color: rgba(240,90,0,.15);
}

.svc-img {
    overflow: hidden;
    height: 180px;
    margin: 0 -2.8rem;
}

    .svc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s;
    }

.svc-card:hover .svc-img img {
    transform: scale(1.06);
}

.svc-icon {
    font-size: 1.8rem;
    color: var(--orange);
}

.svc-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .5rem;
}

.svc-body p {
    font-size: .88rem;
    color: var(--mid);
    line-height: 1.75;
    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: .52rem;
        letter-spacing: .06em;
        padding: 3px 10px;
        border: 1px solid var(--border2);
        color: var(--mid2);
        transition: all .3s;
    }

.svc-card:hover .svc-tags span {
    border-color: var(--orange);
    color: var(--orange);
}

.svc-arrow {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid);
    margin-top: auto;
    transition: all .3s;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.svc-card:hover .svc-arrow {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: rotate(45deg);
}

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

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

    .port-tab.active, .port-tab:hover {
        color: var(--orange);
        border-bottom-color: var(--orange);
    }

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

.work-card {
    position: relative;
    overflow: hidden;
    background: var(--bg3);
    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;
}

.work-card:hover .work-img {
    transform: scale(1.07);
    filter: brightness(.5);
}
.work-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16; /* Perfect for reels */
    overflow: hidden;
    border-radius: 12px;
}

    .work-embed iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
/*.work-embed iframe, .work-vid-player {
    width: 100%;
    height: 100%;
    border: none;
}*/

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

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

.work-cat {
    font-family: 'JetBrains Mono', monospace;
    font-size: .55rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: .3rem;
}

.work-overlay h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .4rem;
}

.work-overlay p {
    font-size: .8rem;
    color: rgba(255,255,255,.55);
    font-weight: 300;
    margin-bottom: .5rem;
}

.work-stats {
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    color: var(--orange);
    margin-bottom: .5rem;
}

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

    .work-tags span {
        font-family: 'JetBrains Mono', monospace;
        font-size: .5rem;
        letter-spacing: .06em;
        padding: 2px 8px;
        border: 1px solid rgba(255,255,255,.18);
        color: rgba(255,255,255,.4);
    }

/* ── BRANDS ──────────────────────────────────────────────────── */
.brands-section {
    padding: 4rem 0;
    border-top: 1px solid var(--border2);
    border-bottom: 1px solid var(--border2);
    overflow: hidden;
}

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

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

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

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

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

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

.brands-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: marquee 26s 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: 160px;
    height: 90px;
    border: 1px solid var(--border2);
    padding: 1.2rem;
    position: relative;
    transition: border-color .3s;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

    .brand-item:hover {
        border-color: var(--orange);
    }

    .brand-item img {
        max-width: 100%;
        max-height: 44px;
        object-fit: contain;
        filter: grayscale(1);
        opacity: .45;
        transition: all .3s;
    }

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

.brand-text-logo {
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    letter-spacing: .08em;
    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(10,10,10,.9);
    opacity: 0;
    transition: opacity .3s;
}

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

.brand-links a {
    width: 30px;
    height: 30px;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .75rem;
}

/* ── PLATFORMS GRID ────────────────────────────────────────── */
/*.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    padding: 1px;
    background: var(--border2);
    border-radius: 1rem;
}*/

/* ── PLATFORM CARD ────────────────────────────────────────── */
/*.plat-card {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 2rem 1rem;
    text-align: center;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

    .plat-card::after {
        content: '';
        position: absolute;
        width: 120%;
        height: 120%;
        top: -10%;
        left: -10%;
        background: radial-gradient(circle, rgba(255,140,0,.05), transparent 70%);
        transform: rotate(45deg);
        pointer-events: none;
    }

    .plat-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(255,140,0,.4);
        background: rgba(255,140,0,.08);
    }*/

/* ── PLATFORM ICON ────────────────────────────────────────── */
/*.plat-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    margin: 0 auto 1rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.plat-card:hover .plat-icon {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(255,140,0,.5);
}*/

/* ── PLATFORM SPECIFIC COLORS ─────────────────────────────── */
/*.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;
}*/

/* ── TEXT & COUNTERS ─────────────────────────────────────── */
/*.plat-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.plat-card p {
    font-size: .75rem;
    color: var(--mid2);
    margin-bottom: 0.5rem;
}

.plat-count {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2.2rem;
    color: #fff;
    letter-spacing: .04em;
    margin-bottom: .2rem;
    transition: color 0.3s;
}

.plat-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: .55rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .08em;
}*/

/* ── RESPONSIVE ─────────────────────────────────────────── */
/*@media(max-width: 768px) {
    .plat-count {
        font-size: 1.8rem;
    }

    .plat-card {
        padding: 1.8rem 1rem;
    }
}

@media(max-width: 480px) {
    .platforms-grid {
        gap: 0.8rem;
    }

    .plat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}*/

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

/* ── PLATFORM CARD ─────────────────────────────── */
.plat-card {
    background: var(--bg2); /* adapts for dark mode */
    border-radius: 1rem;
    padding: 2rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s, box-shadow 0.4s, background 0.4s;
    font-family: 'Poppins', sans-serif;
    color: var(--text); /* adapt text to theme */
    animation: floatHorizontal 6s ease-in-out infinite alternate;
}

/* Light mode background fix */
[data-theme="light"] .plat-card {
    background: #f5f5f5; /* light neutral background */
    color: #111; /* dark text */
}

.plat-card:hover {
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 0 15px 30px rgba(255,140,0,0.4);
    background: var(--orange-light);
}

/* ── ICON ───────────────────────────────────── */
.plat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    margin: 0 auto 1rem;
    transition: transform 0.5s, box-shadow 0.5s;
}

.plat-card:hover .plat-icon {
    transform: rotate(15deg) scale(1.2);
    box-shadow: 0 8px 16px rgba(255,140,0,0.6);
}

/* ── PLATFORM COLORS ────────────────────────── */
.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;
}

/* ── TEXT ─────────────────────────────────── */
.plat-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.plat-card p {
    font-size: .75rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* ── FOLLOWER COUNT ───────────────────────── */
.plat-count {
    font-family: 'Montserrat', sans-serif; /* updated font */
    font-weight: 600;
    font-size: 2rem;
    color: var(--orange);
    margin-bottom: 0.2rem;
}

/* ── SUB TEXT ─────────────────────────────── */
.plat-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: .55rem;
    color: var(--text-secondary);
    letter-spacing: .06em;
}

/* ── HOVER SHINE EFFECT ───────────────────── */
.plat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
    transform: rotate(25deg);
    transition: all 0.5s;
}

.plat-card:hover::after {
    transform: translateX(50%) translateY(0) rotate(25deg);
}

/* ── HORIZONTAL FLOAT ANIMATION ───────────── */
@keyframes floatHorizontal {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }

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

/* ── RESPONSIVE ───────────────────────────── */
@media(max-width:768px) {
    .plat-card {
        padding: 1.5rem 0.8rem;
    }

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

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

@media(max-width:480px) {
    .plat-card {
        padding: 1rem 0.5rem;
    }

    .plat-icon {
        width: 45px;
        height: 45px;
        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: 'Barlow Condensed', sans-serif;
    font-size: clamp(3rem, 5.5vw, 6rem);
    line-height: .88;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

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

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

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

.proc-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--border2);
    letter-spacing: .04em;
    transition: color .4s;
}

.proc-step:hover .proc-num {
    color: var(--orange);
}

.proc-body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.proc-body p {
    font-size: .85rem;
    color: var(--mid);
    line-height: 1.75;
    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: .52rem;
        letter-spacing: .06em;
        padding: 2px 10px;
        border: 1px solid var(--border2);
        color: var(--mid2);
        transition: all .3s;
    }

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

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

.proc-step:hover .proc-arrow {
    color: var(--orange);
    transform: translateX(4px);
}

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

.team-card {
    border: 1px solid var(--border2);
    overflow: hidden;
    transition: border-color .3s, transform .4s;
    cursor: pointer;
}

    .team-card:hover {
        border-color: var(--orange);
        transform: translateY(-6px);
    }

.team-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: .52rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--orange);
    color: #fff;
    padding: 3px 10px;
}

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

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

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

.team-card:hover .team-photo {
    filter: grayscale(0);
    transform: scale(1.04);
}

.team-photo-placeholder {
    width: 100%;
    height: 280px;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 4rem;
    color: var(--orange);
}

.team-body {
    padding: 1.5rem;
    background: var(--bg);
}

[data-theme="dark"] .team-body {
    background: var(--bg2);
}

.team-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.team-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: .6rem;
}

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

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

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

        .team-socials a:hover {
            background: var(--orange);
            border-color: var(--orange);
            color: #fff;
        }

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

.review-card {
    background: var(--bg);
    padding: 3rem;
    position: relative;
    overflow: hidden;
    transition: background var(--transition);
}

[data-theme="dark"] .review-card {
    background: var(--bg2);
}

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

[data-theme="dark"] .review-card:hover {
    background: var(--bg3);
}

.review-card::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 3px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s;
}

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

.review-stars {
    color: var(--orange);
    font-size: .8rem;
    letter-spacing: .1em;
    margin-bottom: 1rem;
}

.review-quote-mark {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 7rem;
    color: var(--orange);
    opacity: .12;
    line-height: .8;
    margin-bottom: .4rem;
}

.review-text {
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--ink);
    margin-bottom: 2rem;
    font-style: italic;
}

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

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

.review-av {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border2);
}

.review-av-placeholder {
    width: 46px;
    height: 46px;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    color: var(--orange);
    flex-shrink: 0;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.review-name {
    font-size: .9rem;
    font-weight: 600;
}

.review-role {
    font-size: .75rem;
    color: var(--mid2);
}

.review-platform {
    margin-left: auto;
    font-size: 1.3rem;
    color: var(--mid2);
}

/* ── CTA BAND ────────────────────────────────────────────────── */
.cta-band {
    padding: 10rem 0;
    text-align: center;
    position: relative;
    background: var(--ink);
    overflow: hidden;
}

[data-theme="dark"] .cta-band {
    background: #080808;
}

.cta-bg-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22vw;
    color: rgba(255,255,255,.02);
    white-space: nowrap;
    pointer-events: none;
    overflow: hidden;
    text-transform: uppercase;
}

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

    .cta-content h2 {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: clamp(4rem, 10.5vw, 13rem);
        line-height: .86;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: #fff;
        margin: 1rem 0 2rem;
    }

.cta-orange {
    color: var(--orange);
}

.cta-content p {
    color: rgba(255,255,255,.45);
    font-size: .95rem;
    margin-bottom: 2.5rem;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

.cta-btns {
    display: flex;
    gap: 1rem;
    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: 'Barlow Condensed', sans-serif;
    font-size: clamp(3rem, 5.5vw, 6.5rem);
    line-height: .88;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

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

    .cinfo-item i {
        color: var(--orange);
        margin-top: .25rem;
        font-size: .9rem;
        width: 16px;
        flex-shrink: 0;
    }

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

.contact-form-wrap {
    background: var(--bg2);
    border: 1px solid var(--border2);
    padding: 3rem;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

[data-theme="dark"] .contact-form-wrap {
    background: var(--bg3);
}

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

    .f-group label {
        display: block;
        font-family: 'JetBrains Mono', monospace;
        font-size: .56rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--mid2);
        margin-bottom: .5rem;
    }

    .f-group input, .f-group textarea, .f-group select {
        width: 100%;
        padding: .85rem 1rem;
        background: var(--bg);
        border: 1.5px solid var(--border2);
        color: var(--ink);
        font-size: .9rem;
        font-weight: 300;
        transition: border-color .3s;
        clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    }

[data-theme="dark"] .f-group input, [data-theme="dark"] .f-group textarea, [data-theme="dark"] .f-group select {
    background: var(--bg2);
    color: var(--ink2);
}

.f-group input:focus, .f-group textarea:focus, .f-group select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-glow);
}

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

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

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

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

.form-success {
    background: rgba(37,211,102,.08);
    border: 1px solid rgba(37,211,102,.3);
    color: #1da855;
    padding: .8rem 1rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.form-error {
    background: rgba(240,90,0,.08);
    border: 1px solid rgba(240,90,0,.3);
    color: var(--orange);
    padding: .8rem 1rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

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

.blog-card {
    border: 1px solid var(--border2);
    overflow: hidden;
    transition: border-color .3s, transform .4s;
}

    .blog-card:hover {
        border-color: var(--orange);
        transform: translateY(-4px);
    }

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

    .blog-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s;
    }

.blog-card:hover .blog-img img {
    transform: scale(1.06);
}

.blog-body {
    padding: 1.6rem;
    background: var(--bg);
}

[data-theme="dark"] .blog-body {
    background: var(--bg2);
}

.blog-cat {
    font-family: 'JetBrains Mono', monospace;
    font-size: .52rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange);
    display: block;
    margin-bottom: .6rem;
}

.blog-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .6rem;
}

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

.blog-body p {
    font-size: .83rem;
    color: var(--mid);
    line-height: 1.75;
    margin-bottom: 1rem;
    font-weight: 300;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: .55rem;
    color: var(--mid2);
}

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

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

/* ── FOOTER ──────────────────────────────────────────────────── */
footer {
    background: var(--ink2);
    color: rgba(255,255,255,.8);
    padding: 6rem 0 2.5rem;
}

[data-theme="dark"] footer {
    background: #080808;
}

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

.footer-logo-mark {
    width: 44px;
    height: 44px;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    margin-bottom: .8rem;
}

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

    .footer-logo-text span {
        color: var(--orange);
    }

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

.footer-tagline {
    font-size: .95rem;
    font-style: italic;
    color: rgba(255,255,255,.35);
    margin-bottom: .8rem;
}

.footer-desc {
    font-size: .83rem;
    color: rgba(255,255,255,.3);
    max-width: 280px;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

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

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

        .footer-socials a:hover {
            background: var(--orange);
            border-color: var(--orange);
            color: #fff;
        }

.footer-col h5 {
    font-family: 'JetBrains Mono', monospace;
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    margin-bottom: 1.2rem;
}

.footer-col a {
    display: block;
    font-size: .85rem;
    color: rgba(255,255,255,.4);
    margin-bottom: .7rem;
    transition: color .3s;
    font-weight: 300;
}

    .footer-col a:hover {
        color: var(--orange);
    }

.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: .58rem;
        letter-spacing: .08em;
        color: rgba(255,255,255,.2);
    }

.footer-credit a {
    color: var(--orange);
}

/* ── 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 20px rgba(37,211,102,.4);
    transition: all .3s;
    animation: floatWa 3.5s 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.1);
        background: #1da855;
    }

@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: 52px;
    height: 52px;
    background: var(--orange) !important;
    border: 2px solid var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.6);
    transition: all .3s;
    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: #fff !important; /* force icon white */
    }

    .bot-toggle svg {
        fill: #fff !important; /* if using SVG icons */
    }

    .bot-toggle:hover {
        background: var(--orange) !important;
    }
.bot-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: var(--orange);
    font-size: .6rem;
    font-weight: 700;
    color: #fff;
    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));
}

.bot-window {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 320px;
    background: #111111;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow-lg);
    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: .8rem;
    padding: 1rem 1.2rem;
    background: var(--orange);
    color: #fff;
}

.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: #fff;
    flex-shrink: 0;
}

.bot-head-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    letter-spacing: .08em;
    font-weight: 700;
}

.bot-head-status {
    font-size: .65rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    opacity: .8;
}

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

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

.bot-messages {
    height: 260px;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    scrollbar-width: thin;
}

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

.bot-bubble {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    padding: .7rem 1rem;
    font-size: .82rem;
    line-height: 1.6;
    color: rgba(255,255,255,.85);
}

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

    .bot-user-msg .bot-bubble {
        background: rgba(240,90,0,.2);
        border-color: rgba(240,90,0,.3);
    }

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

    .bot-quick-replies button {
        font-family: 'JetBrains Mono', monospace;
        font-size: .52rem;
        letter-spacing: .06em;
        padding: 4px 10px;
        border: 1px solid rgba(240,90,0,.5);
        color: var(--orange);
        background: transparent;
        transition: all .3s;
        cursor: pointer;
    }

        .bot-quick-replies button:hover {
            background: rgba(240,90,0,.15);
        }

.bot-input-area {
    display: flex;
    border-top: 1px solid rgba(255,255,255,.1);
}

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

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

    .bot-input-area button {
        padding: .8rem 1rem;
        color: var(--orange);
        font-size: .9rem;
        cursor: pointer;
        background: transparent;
        border: none;
        transition: color .3s;
    }

        .bot-input-area button:hover {
            color: var(--orange2);
        }

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

    .bot-typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--orange);
        opacity: .5;
        animation: typing .8s infinite;
    }

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

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

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

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

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@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: 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, 18vw, 7rem);
    }

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

    /* ===== Portfolio Video Popup ===== */

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

    /* popup container */
    #popupContent {
        position: relative;
        width: 90vw;
        max-width: 1100px;
        height: 80vh;
        background: #000;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 25px 80px rgba(0,0,0,.7);
        animation: popupZoom .35s ease;
    }

    /* popup animation */
    @keyframes popupZoom {
        from {
            transform: scale(.85);
            opacity: 0;
        }

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

    /* media container */
    #popupMedia {
        width: 100%;
        height: 100%;
    }

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

    /* close button */
    #closePopup {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,.65);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        z-index: 10;
        transition: .25s;
    }

        #closePopup:hover {
            background: #ff4d4d;
            transform: scale(1.05);
        }

    .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;
    }
}