/* ============================================================
   KLIENT BOOST — Design System & Component Styles
   Premium blue brand system with glassmorphic components
         + GetNos  (neo-brutalist cards, display type, HUD accents)
   ============================================================ */

/* ============== CSS VARIABLES ============== */
:root {
    /* Brand Colors */
    --primary: #59B8EB;
    --primary-dark: #258ec5;
    --primary-light: #A8D4EE;
    --primary-glow: rgba(89, 184, 235, 0.32);

    /* Ink & Paper — Dark Theme */
    --ink: #0D1117;
    --ink-2: #131c27;
    --ink-3: #1a2735;
    --paper: #0F1923;
    --paper-2: #152231;

    /* Semantic */
    --muted: #7a8fa2;
    --line: rgba(89, 184, 235, 0.1);
    --line-dark: rgba(255, 255, 255, 0.08);

    /* Typography */
    --f-display: 'Bebas Neue', sans-serif;
    --f-body: 'Inter', 'Archivo', sans-serif;
    --f-mono: 'JetBrains Mono', monospace;
    --f-num: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --section-pad: clamp(56px, 8vw, 110px);
    --container-max: 1180px;
    --container-pad: 24px;

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 999px;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

/* Only enable smooth scrolling when the user hasn't requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--f-body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

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

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

ul,
ol {
    list-style: none;
}

/* ============== LAYOUT ============== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.container-narrow {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

section {
    padding: var(--section-pad) 0;
    position: relative;
}

section.dark {
    background: var(--ink);
    color: var(--paper);
}

/* ============== TYPOGRAPHY ============== */
h1,
h2,
h3,
h4 {
    font-family: var(--f-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.05;
}

h1 {
    font-size: clamp(48px, 7vw, 96px);
}

h2 {
    font-size: clamp(36px, 5vw, 64px);
}

h3 {
    font-size: clamp(22px, 2.4vw, 32px);
}

h4 {
    font-size: clamp(17px, 1.6vw, 21px);
}

.hi {
    background: var(--primary);
    color: #fff;
    padding: 0 0.14em;
    display: inline-block;
    transform: skewX(-4deg);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.eyebrow::before {
    content: '◆';
    font-size: 9px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(89, 184, 235, 0.1);
    border: 1px solid rgba(89, 184, 235, 0.3);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    margin-bottom: 20px;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.badge-label {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.section-title {
    text-transform: uppercase;
    margin-bottom: 16px;
}

.section-subtitle {
    font-family: var(--f-body);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    color: var(--muted);
    max-width: 620px;
}

.lead {
    font-size: clamp(17px, 1.7vw, 20px);
    line-height: 1.6;
    color: var(--muted);
    max-width: 720px;
}

/* ============== NAVBAR ============== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 16px 0;
    background: rgba(250, 250, 247, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transition: padding 0.3s, background 0.3s, box-shadow 0.3s;
}

.navbar.scrolled {
    padding: 10px 0;
    box-shadow: 0 2px 20px rgba(10, 10, 10, 0.08);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.nav-brand {
    font-family: var(--f-display);
    font-size: 28px;
    letter-spacing: 0.05em;
    color: var(--ink);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.nav-brand .brand-accent {
    color: var(--primary);
}

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

.nav-links a {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    position: relative;
    padding: 4px 0;
    transition: color 0.2s;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 100%;
    height: 2px;
    background: var(--primary);
    transition: right 0.3s;
}

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

.nav-links a:hover::after {
    right: 0;
}

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

.nav-links a.active::after {
    right: 0;
}

/* Nav CTA Button */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-display);
    font-size: 18px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #A8D4EE 0%, var(--primary) 50%, var(--primary-dark) 100%);
    color: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 9px;
    padding: 10px 20px 8px;
    box-shadow: 0 4px 0 var(--ink);
    transition: transform 0.08s, box-shadow 0.08s, filter 0.12s;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.nav-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-22deg);
    transition: left 0.55s;
}

.nav-cta:hover::before {
    left: 130%;
}

.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--ink);
    filter: brightness(1.04);
}

.nav-cta:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ink);
}

/* Mobile Menu */
.mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* ============== BUTTONS ============== */
.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #A8D4EE 0%, var(--primary) 40%, var(--primary-dark) 100%);
    color: #fff;
    border: 3px solid var(--ink);
    border-radius: var(--radius-md);
    padding: 18px 32px 15px;
    font-family: var(--f-display);
    font-size: 24px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 6px 0 var(--ink), 0 14px 26px -8px rgba(10, 10, 10, 0.4);
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s, filter 0.12s;
    overflow: hidden;
    text-decoration: none;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-22deg);
    transition: left 0.55s;
}

.btn-primary:hover::before {
    left: 130%;
}

.btn-primary:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--ink), 0 4px 12px -4px rgba(10, 10, 10, 0.3);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: var(--radius-md);
    padding: 16px 28px 13px;
    font-family: var(--f-display);
    font-size: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 4px 0 var(--ink);
    transition: transform 0.08s, box-shadow 0.08s, background 0.15s, color 0.15s;
    text-decoration: none;
}

.btn-ghost:hover {
    background: var(--ink);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--ink);
}

.btn-ghost:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ink);
}

/* Dark section variants */
section.dark .btn-ghost {
    color: var(--paper);
    border-color: var(--paper);
    box-shadow: 0 4px 0 var(--primary);
}

section.dark .btn-ghost:hover {
    background: var(--paper);
    color: var(--ink);
}

.btn-sm {
    padding: 12px 22px 10px;
    font-size: 18px;
    border-radius: 9px;
    box-shadow: 0 4px 0 var(--ink);
}

.btn-sm:active {
    box-shadow: 0 2px 0 var(--ink);
}

/* ============== HERO SECTION ============== */
.hero {
    min-height: 100vh;
    background: linear-gradient(180deg, #0d0d12 0%, var(--ink) 40%, #12121a 70%, #0f0f14 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(120px, 14vw, 160px) 0 clamp(60px, 7vw, 100px);
    text-align: center;
    isolation: isolate;
}

/* Hero Background Layers */
.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-bg .layer-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(89, 184, 235, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(89, 184, 235, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 80%);
}

.hero-bg .layer-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(89, 184, 235, 0.15) 0%, transparent 70%);
    filter: blur(8px);
}

.hero-bg .layer-glow.right {
    top: -180px;
    right: -180px;
}

.hero-bg .layer-glow.left {
    bottom: -200px;
    left: -200px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(89, 184, 235, 0.08) 0%, transparent 70%);
}

.hero-bg .scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(89, 184, 235, 0.5), transparent);
    animation: scan 12s ease-in-out infinite;
    filter: blur(1px);
}

@keyframes scan {
    0% {
        top: -2%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        top: 102%;
        opacity: 0;
    }
}

/* HUD Corner Brackets */
.hero-bg .hud {
    position: absolute;
    width: 36px;
    height: 36px;
    border-color: var(--primary);
    border-style: solid;
    opacity: 0.4;
}

.hero-bg .hud.tl {
    top: 24px;
    left: 24px;
    border-width: 1.5px 0 0 1.5px;
}

.hero-bg .hud.tr {
    top: 24px;
    right: 24px;
    border-width: 1.5px 1.5px 0 0;
}

.hero-bg .hud.bl {
    bottom: 24px;
    left: 24px;
    border-width: 0 0 1.5px 1.5px;
}

.hero-bg .hud.br {
    bottom: 24px;
    right: 24px;
    border-width: 0 1.5px 1.5px 0;
}

/* Particles */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: particleFloat 20s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.particle:nth-child(1) {
    left: 8%;
    top: 18%;
    animation-duration: 25s;
}

.particle:nth-child(2) {
    left: 18%;
    top: 75%;
    animation-duration: 30s;
    animation-delay: -5s;
}

.particle:nth-child(3) {
    left: 30%;
    top: 35%;
    animation-duration: 22s;
    animation-delay: -8s;
}

.particle:nth-child(4) {
    left: 48%;
    top: 10%;
    animation-duration: 28s;
    animation-delay: -12s;
}

.particle:nth-child(5) {
    left: 60%;
    top: 65%;
    animation-duration: 24s;
    animation-delay: -15s;
    width: 4px;
    height: 4px;
}

.particle:nth-child(6) {
    left: 72%;
    top: 25%;
    animation-duration: 26s;
    animation-delay: -3s;
}

.particle:nth-child(7) {
    left: 85%;
    top: 55%;
    animation-duration: 32s;
    animation-delay: -10s;
}

.particle:nth-child(8) {
    left: 92%;
    top: 12%;
    animation-duration: 20s;
    animation-delay: -2s;
}

@keyframes particleFloat {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.4;
    }

    25% {
        transform: translateY(-20px) translateX(8px);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-10px) translateX(-8px);
        opacity: 0.3;
    }

    75% {
        transform: translateY(-30px) translateX(4px);
        opacity: 0.7;
    }
}

/* Hero Content */
.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(89, 184, 235, 0.12);
    border: 1px solid rgba(89, 184, 235, 0.35);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    margin-bottom: 28px;
}

.hero-badge .dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(89, 184, 235, 0.18);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

    50% {
        opacity: 0.6;
        transform: scale(1.3);
    }
}

.hero-badge span:last-child {
    font-family: var(--f-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero h1 {
    color: var(--paper);
    text-transform: uppercase;
    max-width: 900px;
    margin-bottom: 24px;
}

.hero h1 .hi {
    background: var(--primary);
    color: #fff;
    transform: skewX(-3deg);
}

.hero-lead {
    font-size: clamp(17px, 1.7vw, 20px);
    line-height: 1.65;
    color: rgba(250, 250, 247, 0.75);
    max-width: 680px;
    margin: 0 auto 40px;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

/* Hero Slider */
.hero-slide {
    display: none;
    animation: fadeIn 0.8s ease;
}

.hero-slide.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-slider-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 28px;
}

.hero-slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s;
}

.hero-slider-dots .dot.active {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(89, 184, 235, 0.5);
}

/* Hero Stats Row */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    margin-top: 52px;
    padding: 24px 0;
    border: 1px solid rgba(89, 184, 235, 0.16);
    border-radius: var(--radius-md);
    background: rgba(15, 25, 35, 0.7);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 720px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 4px 18px;
    position: relative;
}

.hero-stat + .hero-stat {
    border-left: 1px solid rgba(89, 184, 235, 0.14);
}

.hero-stat .num {
    font-family: var(--f-num);
    font-size: clamp(34px, 4vw, 44px);
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.hero-stat .lbl {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.65);
    margin-top: 10px;
    line-height: 1.45;
    min-height: 2.9em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}

/* ============== ABOUT SECTION ============== */
.about {
    padding: var(--section-pad) 0;
    background: var(--paper);
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
}

.about-text .lead {
    color: #444;
    margin-bottom: 28px;
}

.proof-banner {
    background: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    box-shadow: 8px 8px 0 var(--primary);
    position: relative;
    overflow: hidden;
}

.proof-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(89, 184, 235, 0.15) 0%, transparent 70%);
}

.proof-banner .proof-number {
    font-family: var(--f-num);
    font-size: clamp(52px, 6.5vw, 76px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary);
    line-height: 1.1;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 40px rgba(89, 184, 235, 0.4);
}

.proof-banner .proof-label {
    font-family: var(--f-body);
    font-size: 18px;
    color: rgba(250, 250, 247, 0.85);
    margin-top: 8px;
    position: relative;
    z-index: 1;
    line-height: 1.5;
}

.proof-banner .proof-footnote {
    font-family: var(--f-mono);
    font-size: 10px;
    color: rgba(250, 250, 247, 0.4);
    margin-top: 16px;
    position: relative;
    z-index: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Proof graphic card (uploaded visual) */
.proof-graphic-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1.5px solid rgba(89, 184, 235, 0.22);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(2, 158, 248, 0.15);
    background: #081018;
    transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.proof-graphic-card:hover {
    transform: translateY(-6px);
    border-color: rgba(2, 158, 248, 0.5);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55), 0 0 42px rgba(2, 158, 248, 0.3);
}
.proof-graphic-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: inherit;
}

/* ============== SERVICES SECTION ============== */
.services {
    background: var(--paper-2);
    padding: var(--section-pad) 0;
}

.services-header {
    text-align: center;
    margin-bottom: 56px;
}

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

.service-card {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 5px 5px 0 var(--ink);
}

.service-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--ink);
}

.service-card .card-number {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.service-card .card-icon {
    width: 52px;
    height: 52px;
    background: #029ef8;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #fff;
}

.service-card .card-icon svg {
    width: 26px;
    height: 26px;
}

.service-card h3 {
    font-family: var(--f-display);
    font-size: 26px;
    margin-bottom: 12px;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.service-card p {
    font-size: 14.5px;
    color: #555;
    line-height: 1.6;
}

/* ============== TRUST / CLIENT MARQUEE ============== */
.trust-section {
    background: var(--ink);
    padding: 50px 0;
    overflow: hidden;
}

.trust-header {
    text-align: center;
    margin-bottom: 28px;
}

.trust-label {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

.trust-title {
    font-family: var(--f-display);
    font-size: clamp(28px, 3vw, 40px);
    color: var(--paper);
    text-transform: uppercase;
}

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

.trust-marquee::before,
.trust-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
}

.trust-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--ink), transparent);
}

.trust-marquee::after {
    right: 0;
    background: linear-gradient(90deg, transparent, var(--ink));
}

.marquee-track {
    display: flex;
    gap: 48px;
    white-space: nowrap;
    animation: marqueeScroll 40s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

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

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

.marquee-item {
    font-family: var(--f-display);
    font-size: 22px;
    letter-spacing: 0.03em;
    color: rgba(250, 250, 247, 0.5);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.3s;
}

.marquee-item:hover {
    color: var(--paper);
}

.marquee-sep {
    color: var(--primary);
    font-size: 14px;
    flex-shrink: 0;
}

/* ============== PACKAGES SECTION ============== */
.packages {
    padding: var(--section-pad) 0;
    background: var(--paper);
}

.packages-header {
    text-align: center;
    margin-bottom: 56px;
}

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

.package-card {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 36px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 5px 5px 0 var(--ink);
}

.package-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--ink);
}

.package-card.featured {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 5px 5px 0 var(--primary);
}

.package-card.featured:hover {
    box-shadow: 8px 8px 0 var(--primary);
}

.package-tag {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}

.package-card h3 {
    font-family: var(--f-display);
    font-size: 36px;
    line-height: 1;
    margin-bottom: 8px;
}

.package-subtitle {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.package-card.featured .package-subtitle {
    color: rgba(250, 250, 247, 0.7);
}

.package-features {
    flex: 1;
    margin-bottom: 28px;
}

.package-features li {
    padding: 10px 0;
    font-size: 14.5px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid var(--line);
}

.package-card.featured .package-features li {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.package-features li::before {
    content: '✓';
    color: var(--primary);
    font-weight: 700;
    flex-shrink: 0;
}

.package-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: linear-gradient(180deg, #A8D4EE 0%, var(--primary) 40%, var(--primary-dark) 100%);
    color: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 10px;
    padding: 16px 22px 14px;
    font-family: var(--f-display);
    font-size: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 4px 0 var(--ink);
    transition: transform 0.08s, box-shadow 0.08s, filter 0.12s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.package-card.featured .package-cta {
    border-color: var(--paper);
}

.package-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-22deg);
    transition: left 0.55s;
}

.package-cta:hover::before {
    left: 130%;
}

.package-cta:hover {
    filter: brightness(1.04);
}

.package-cta:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--ink);
}

.packages-footer {
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
    color: var(--muted);
}

.packages-footer a {
    color: var(--primary);
    font-weight: 600;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 2px;
}

/* ============== TESTIMONIALS ============== */
.testimonials {
    background: var(--ink);
    padding: var(--section-pad) 0;
    overflow: hidden;
}

.testimonials-header {
    text-align: center;
    margin-bottom: 50px;
}

.testimonials-header .section-title {
    color: var(--paper);
}

.testimonials-header .section-subtitle {
    color: rgba(250, 250, 247, 0.65);
    margin: 0 auto;
}

.testimonials-track-wrapper {
    overflow: hidden;
    position: relative;
}

.testimonials-track {
    display: flex;
    gap: 22px;
    animation: testimonialScroll 50s linear infinite;
}

.testimonials-track:hover {
    animation-play-state: paused;
}

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

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

.testimonial-card {
    background: rgba(250, 250, 247, 0.04);
    border: 1px solid rgba(250, 250, 247, 0.1);
    border-radius: var(--radius-lg);
    padding: 28px;
    min-width: 380px;
    max-width: 420px;
    flex-shrink: 0;
    transition: border-color 0.2s, transform 0.15s;
}

.testimonial-card:hover {
    border-color: rgba(89, 184, 235, 0.4);
    transform: translateY(-3px);
}

.testimonial-quote-mark {
    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 1;
    color: var(--primary);
    opacity: 0.5;
    margin-bottom: -12px;
}

.testimonial-text {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(250, 250, 247, 0.85);
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--f-display);
    font-size: 16px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.testimonial-author h4 {
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--paper);
    line-height: 1.3;
}

.testimonial-author p {
    font-family: var(--f-mono);
    font-size: 10.5px;
    color: rgba(250, 250, 247, 0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.testimonial-stars {
    color: #FFD700;
    font-size: 14px;
    letter-spacing: 2px;
    margin-top: 12px;
}

/* ============== FINAL CTA ============== */
.final-cta {
    background: linear-gradient(135deg, var(--ink) 0%, #141414 100%);
    color: var(--paper);
    text-align: center;
    padding: clamp(72px, 9vw, 130px) 0;
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 800px 400px at 50% 50%, rgba(89, 184, 235, 0.1), transparent 70%);
    pointer-events: none;
}

.final-cta .container {
    position: relative;
    z-index: 1;
}

.final-cta h2 {
    color: var(--paper);
    text-transform: uppercase;
    max-width: 800px;
    margin: 0 auto 20px;
}

.final-cta .lead {
    color: rgba(250, 250, 247, 0.75);
    margin: 0 auto 40px;
    text-align: center;
}

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

.final-meta {
    margin-top: 40px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 14px 24px;
    background: rgba(250, 250, 247, 0.04);
    border: 1px solid rgba(250, 250, 247, 0.1);
    border-radius: var(--radius-full);
}

.final-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 600;
    color: rgba(250, 250, 247, 0.7);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.final-meta-item::before {
    content: '✓';
    color: var(--primary);
}

/* ============== FOOTER ============== */
.site-footer {
    background: var(--ink);
    color: rgba(250, 250, 247, 0.7);
    padding: 64px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-brand {
    font-family: var(--f-display);
    font-size: 32px;
    color: var(--paper);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.footer-brand .brand-accent {
    color: var(--primary);
}

.footer-desc {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(250, 250, 247, 0.5);
    max-width: 300px;
}

.footer-col h4 {
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--paper);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.footer-col a {
    display: block;
    font-size: 14px;
    color: rgba(250, 250, 247, 0.5);
    padding: 6px 0;
    transition: color 0.2s;
}

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

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(250, 250, 247, 0.6);
    transition: all 0.2s;
    padding: 0;
}

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

.footer-bottom {
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: rgba(250, 250, 247, 0.35);
}

/* ============== CASE STUDIES PAGE ============== */
.page-hero {
    background: linear-gradient(180deg, #0d0d12 0%, var(--ink) 100%);
    padding: clamp(140px, 16vw, 200px) 0 clamp(60px, 7vw, 80px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 300px at 50% 30%, rgba(89, 184, 235, 0.1), transparent 70%);
    pointer-events: none;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    color: var(--paper);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.page-hero .lead {
    color: rgba(250, 250, 247, 0.7);
    margin: 0 auto;
    text-align: center;
    font-style: italic;
}

/* Filter Tabs */
.filter-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px 0;
}

.filter-tab {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    border: 2px solid var(--ink);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tab:hover,
.filter-tab.active {
    background: var(--ink);
    color: var(--paper);
}

/* Case Study Cards */
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding-bottom: var(--section-pad);
}

.case-card {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform 0.15s, box-shadow 0.15s;
}

.case-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--ink);
}

.case-card .case-tag {
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
    display: inline-block;
    background: rgba(89, 184, 235, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
}

.case-card h3 {
    margin-bottom: 12px;
}

.case-card .case-preview {
    font-size: 14.5px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.case-result {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: var(--primary);
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: var(--radius-full);
}

/* Case Study Detail (expandable) */
.case-detail {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--line);
    display: none;
}

.case-detail.open {
    display: block;
    animation: fadeIn 0.4s ease;
}

.case-step {
    margin-bottom: 16px;
}

.case-step .step-label {
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 4px;
}

.case-step p {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

.case-toggle {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 2px;
    transition: gap 0.2s;
}

.case-toggle:hover {
    gap: 10px;
}

/* ============== PORTFOLIO PAGE ============== */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-bottom: var(--section-pad);
}

.portfolio-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--ink);
    background: var(--paper-2);
    transition: transform 0.25s, box-shadow 0.25s;
    cursor: pointer;
}

.portfolio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 var(--ink);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.4) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

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

.portfolio-overlay h4 {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--paper);
    margin-bottom: 6px;
}

.portfolio-overlay .portfolio-meta {
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    line-height: 1.5;
}

/* ============== FAQ (for Case Studies / Portfolio) ============== */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 2px solid var(--line);
    padding: 24px 0;
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--f-display);
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
    padding-right: 16px;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-family: var(--f-display);
    font-size: 28px;
    color: var(--primary);
    transition: transform 0.25s;
    flex-shrink: 0;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-answer {
    margin-top: 14px;
    padding-right: 40px;
    font-size: 15px;
    color: #444;
    line-height: 1.65;
}

/* ============== SCROLL REVEAL ANIMATIONS ============== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .packages-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .case-studies-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .hero {
        padding: 130px 0 60px;
        min-height: auto;
    }

    .hero h1 {
        font-size: clamp(36px, 8vw, 56px);
    }

    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .hero-cta-row {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta-row .btn-primary,
    .hero-cta-row .btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .nav-links {
        display: none;
    }

    .mobile-toggle {
        display: flex;
        color: #ffffff;
    }

    /* Mobile Menu */
    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--paper);
        padding: 20px var(--container-pad);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 10px 30px rgba(10, 10, 10, 0.1);
        gap: 0;
    }

    .nav-links.open a {
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        width: 100%;
    }

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

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

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

    .hero-bg .hud {
        display: none;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .filter-tabs {
        gap: 6px;
    }

    .filter-tab {
        font-size: 10px;
        padding: 8px 14px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ============== SERVICE VIEW MORE LINK ============== */
.service-view-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-dark);
    text-decoration: none;
    transition: gap 0.2s, color 0.2s;
}

.service-view-more:hover {
    gap: 12px;
    color: var(--primary);
}

/* ============== PRICING PAGE ============== */
.pricing-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 28px 0 8px;
    position: sticky;
    top: 62px;
    z-index: 50;
    background: var(--paper);
}

.pricing-nav a {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--line);
    color: var(--muted);
    text-decoration: none;
    transition: all 0.2s;
}

.pricing-nav a:hover,
.pricing-nav a.active {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.pricing-section {
    padding: clamp(48px, 6vw, 80px) 0;
    border-bottom: 1px solid var(--line);
}

.pricing-section:last-of-type {
    border-bottom: none;
}

.pricing-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.pricing-section-header h2 {
    margin-bottom: 8px;
}

.pricing-section-header p {
    color: var(--muted);
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding-top: 20px;
}

.pricing-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(37, 142, 197, 0.14);
}

.pricing-card.popular {
    border-color: var(--primary);
    box-shadow: 0 12px 36px rgba(37, 142, 197, 0.15);
}

.pricing-card.popular::before {
    content: 'Most Popular';
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-dark);
    color: #fff;
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    z-index: 10;
}

.pricing-tier-tag {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.pricing-card h3 {
    font-size: clamp(28px, 3vw, 36px);
    margin-bottom: 4px;
    line-height: 1;
}

.pricing-price {
    font-family: var(--f-display);
    font-size: clamp(22px, 2.5vw, 30px);
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 4px;
}

.pricing-note {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 24px;
}

.pricing-features {
    flex: 1;
    margin-bottom: 28px;
}

.pricing-features li {
    padding: 8px 0;
    font-size: 13.5px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    color: #334155;
    line-height: 1.5;
}

.pricing-features li::before {
    content: '✓';
    color: var(--primary-dark);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.pricing-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #029ef8;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 22px;
    font-family: var(--f-display);
    font-size: 18px;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
    box-shadow: 0 8px 20px rgba(2, 158, 248, 0.2);
}

.pricing-cta:hover {
    transform: translateY(-2px);
    background: #0285d4;
    box-shadow: 0 12px 28px rgba(2, 158, 248, 0.3);
}

@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
}

/* ============== DARK THEME — Premium Blue ============== */
body {
    color: #c8d6e5;
    background: var(--paper);
}

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

/* — Navbar — */
.navbar {
    background: rgba(15, 25, 35, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid transparent;
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.navbar.scrolled {
    background: rgba(15, 25, 35, 0.95);
    border-color: var(--line);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .35);
}

.nav-brand,
h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -.045em;
    color: #e8f0f8;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.nav-brand img {
    display: block;
    width: clamp(132px, 14vw, 184px);
    height: auto;
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
}

.brand-accent,
.eyebrow,
.badge-label {
    color: var(--primary);
}

.nav-links a {
    color: #8899aa;
    font-weight: 600;
}

.nav-links a:hover,
.nav-links a.active {
    color: #e8f0f8;
}

.nav-links a::after {
    background: var(--primary);
    height: 2px;
}

/* — Buttons — */
.nav-cta,
.btn-primary {
    background: #029ef8;
    color: white;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(2, 158, 248, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}

.nav-cta:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    background: #0285d4;
    box-shadow: 0 14px 30px rgba(2, 158, 248, .4);
}

.btn-ghost {
    color: #c8d6e5 !important;
    border-color: rgba(200, 214, 229, .35) !important;
    border-radius: 8px;
}

/* — Hero — */
.hero,
.page-hero {
    background: radial-gradient(65% 70% at 80% 5%, rgba(89, 184, 235, .25), transparent 65%), linear-gradient(145deg, #0a0e14 0%, #0f1923 60%, #132e44 100%);
}

.hero h1, .page-hero h1 {
    letter-spacing: -.07em;
    text-transform: none;
}

.hi {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    border-radius: .17em;
    transform: none;
    padding: .02em .16em;
}

.hero-badge,
.section-badge {
    background: rgba(89, 184, 235, .1);
    border-color: rgba(89, 184, 235, .25);
    border-radius: var(--radius-full);
}

.hero-stats {
    border: 1px solid rgba(89, 184, 235, .16);
    background: rgba(15, 25, 35, .7);
    backdrop-filter: blur(16px);
}

.hero-stat+.hero-stat {
    border-left: 1px solid rgba(89, 184, 235, .14);
}

/* — Section Headings — */
.section-title {
    letter-spacing: -.055em;
    text-transform: none;
    color: #e8f0f8;
}

.section-subtitle {
    color: var(--muted);
}

/* — Sections — */
.services,
.packages {
    background: var(--paper);
}

.about {
    background: var(--paper-2);
}

/* — Cards (Dark) — */
.service-card,
.package-card,
.case-card {
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    border-radius: var(--radius-lg);
    color: #b0c4d8;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}

/* Gradient border animated layer */
.service-card::after,
.package-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #029ef8 0%, #00f0ff 25%, #3b82f6 50%, #818cf8 75%, #029ef8 100%);
    background-size: 300% 300%;
    background-position: 0% 50%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 3;
}

.service-card:hover,
.package-card:hover {
    transform: translateY(-7px) !important;
    border-color: transparent !important;
    background: linear-gradient(180deg, rgba(2, 158, 248, 0.12) 0%, rgba(2, 158, 248, 0.03) 100%), var(--paper-2) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .45), 0 0 32px rgba(2, 158, 248, .25) !important;
}

.service-card:hover::after,
.package-card:hover::after {
    opacity: 1;
    animation: gradientBorderShift 3s linear infinite;
}

.case-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
    border-color: rgba(89, 184, 235, .2);
}

.service-card:hover h3,
.package-card:hover h3 {
    color: #ffffff !important;
}
.service-card:hover p {
    color: #cbd5e1 !important;
}
.service-card:hover .card-number {
    color: #029ef8 !important;
}
.service-card:hover .card-icon {
    background: rgba(2, 158, 248, 0.15) !important;
    color: #029ef8 !important;
    border-color: rgba(2, 158, 248, 0.4) !important;
}
.service-card:hover .service-view-more {
    color: #029ef8 !important;
}

@keyframes gradientBorderShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.service-card h3,
.case-card h3 {
    color: #e8f0f8;
}

.service-card::before {
    background: linear-gradient(135deg, rgba(89, 184, 235, .1), transparent);
}

.card-icon {
    color: var(--primary);
    background: rgba(89, 184, 235, .08);
    border-color: var(--line);
}

.card-number {
    color: var(--primary);
}

/* — Package Featured — */
.package-card.featured {
    border-color: var(--primary);
    background: linear-gradient(180deg, #132e44, #0f1923);
    box-shadow: 0 22px 48px rgba(37, 142, 197, .15);
}

/* — Trust Section — */
.trust-section {
    background: var(--ink);
}

/* — Testimonials — */
.testimonial-card {
    border: 1px solid rgba(89, 184, 235, .12);
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(18px);
    border-radius: var(--radius-lg);
}

.testimonials,
.final-cta,
.site-footer {
    background: var(--ink);
}

/* — Filters — */
.filter-tab {
    border: 1px solid var(--line);
    color: #7a8fa2;
    border-radius: var(--radius-full);
}

.filter-tab:hover,
.filter-tab.active {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

/* — Portfolio — */
.portfolio-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

.portfolio-item:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

/* — Case Study Details — */
.case-result {
    background: rgba(89, 184, 235, .1);
    color: var(--primary);
}

.case-tag {
    color: var(--primary);
}

.case-detail {
    border-color: var(--line);
}

.case-toggle {
    color: var(--primary);
}

.faq-item {
    border-color: var(--line);
}

.faq-item summary::after {
    color: var(--primary);
}

/* — Pricing (Dark) — */
.pricing-nav {
    background: var(--paper);
}

.pricing-nav a {
    border-color: var(--line);
    color: #7a8fa2;
}

.pricing-card {
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    color: #b0c4d8;
    position: relative;
    overflow: visible;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}

/* Gradient border animated layer for pricing cards */
.pricing-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #029ef8 0%, #00f0ff 25%, #3b82f6 50%, #818cf8 75%, #029ef8 100%);
    background-size: 300% 300%;
    background-position: 0% 50%;
    /* Both prefixed and standard mask needed: the standard mask-composite: exclude
       only works when the standard mask property is also set. Without it the
       gradient fills the entire card instead of only the border ring. */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 3;
}

.pricing-card:hover {
    transform: translateY(-7px) !important;
    border-color: transparent !important;
    background: linear-gradient(180deg, rgba(2, 158, 248, 0.14) 0%, rgba(2, 158, 248, 0.04) 100%), var(--paper-2) !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .45), 0 0 32px rgba(2, 158, 248, .25) !important;
}

.pricing-card:hover::after {
    opacity: 1;
    animation: gradientBorderShift 3s linear infinite;
}

.pricing-card:hover h3 {
    color: #ffffff !important;
}
.pricing-card:hover .pricing-price {
    color: #ffffff !important;
}
.pricing-card:hover .pricing-tier-tag {
    color: #029ef8 !important;
}
.pricing-card:hover .pricing-features li {
    color: #cbd5e1 !important;
}
.pricing-card:hover .pricing-cta {
    background: #029ef8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(2, 158, 248, 0.35);
}

.pricing-card.popular {
    border-color: var(--primary);
    background: linear-gradient(180deg, #132e44, var(--paper-2));
    box-shadow: 0 12px 36px rgba(37, 142, 197, .15);
}

.pricing-card h3 {
    color: #e8f0f8;
}

.pricing-price {
    color: #e8f0f8;
}

.pricing-features li {
    border-color: var(--line);
    color: #8899aa;
}

.pricing-tier-tag {
    color: var(--primary);
}

.pricing-section {
    border-color: var(--line);
}

/* — About Dark Overrides — */
.proof-banner {
    background: var(--paper-2);
    border-color: var(--line);
}

/* — Footer — */
.footer-social a:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.footer-col a {
    color: #7a8fa2;
}

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

/* — Service View More — */
.service-view-more {
    color: var(--primary);
}

/* — Marquee — */
.marquee-item {
    color: #5a6e80;
}

/* — Packages Footer — */
.packages-footer {
    color: #7a8fa2;
}

.packages-footer a {
    color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Contrast pass: readable typography on every dark surface; navbar stays unchanged. */
.hero, .page-hero, .testimonials, .final-cta, .site-footer { color: #F8FCFF; }
.hero h1, .page-hero h1, .testimonials h2, .final-cta h2, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: #FFFFFF; }
.hero p, .page-hero p, .testimonials p, .final-cta p, .site-footer p { color: #C9DCE8; }
.hero a:not(.btn-primary), .page-hero a:not(.btn-primary), .testimonials a:not(.btn-primary), .final-cta a:not(.btn-primary), .site-footer a { color: #D9EEFA; }
.hero a:not(.btn-primary):hover, .page-hero a:not(.btn-primary):hover, .testimonials a:not(.btn-primary):hover, .final-cta a:not(.btn-primary):hover, .site-footer a:hover { color: #59B8EB; }
.testimonial-text { color: #EDF8FF !important; }
.testimonial-author p, .footer-col p, .footer-bottom { color: #B6CBD8 !important; }
.testimonial-stars, .testimonial-quote-mark, .footer-col h4 { color: #8FD0F2 !important; }
.footer-logo { display: inline-flex; align-items: center; margin-bottom: 18px; }
.footer-logo img { display: block; width: min(190px, 100%); height: auto; filter: brightness(1.15); }
.about, .services, .packages, .case-studies-grid, .portfolio-grid, .faq-list { color: #111827; }
.about p, .services p, .packages p, .case-card p, .faq-answer { color: #425466; }

/* Primary controls — bright #029ef8 blue. */
.nav-cta, .btn-primary, .package-cta, .filter-tab.active, .filter-tab:hover {
    background: #029ef8;
    border-color: #029ef8;
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(2, 158, 248, .24);
}
.nav-cta:hover, .btn-primary:hover, .package-cta:hover, .filter-tab.active:hover {
    background: #0285d4;
    border-color: #0285d4;
    box-shadow: 0 14px 30px rgba(2, 158, 248, .34);
}

/* Darker blue emphasis, matching the deeper grade of the brand mark. */
.hi { background: #029ef8; color: #FFFFFF; }
.hero h1 .hi { background: #029ef8; color: #FFFFFF; transform: none; }

/* Dark-theme readability: lift headings and supporting copy without making them stark white. */
.trust-section .trust-title,
.testimonials .section-title,
.final-cta h2,
.site-footer h2,
.site-footer h3,
.site-footer h4 { color: #C9DCE8 !important; }
.trust-section .trust-label,
.testimonials .badge-label,
.final-cta .eyebrow { color: #77C7EF !important; }
.trust-section .marquee-item { color: #AFC3D1; }
.testimonials .section-subtitle,
.final-cta .lead,
.site-footer p,
.site-footer .footer-bottom { color: #AFC3D1 !important; }

/* Moving client portfolio gallery / Dual-slider clients section */
.testimonials-track-wrapper { display: none; }
.clients-section {
    background: #FFFFFF;
    padding: var(--section-pad) 0 60px;
    overflow: hidden;
}
.clients-header {
    text-align: center;
    margin-bottom: 40px;
}
.clients-header .section-title {
    color: var(--ink);
}
.clients-header .section-subtitle {
    color: #425466;
    margin: 0 auto;
}
.client-logo-slider {
    overflow: hidden;
    padding: 10px 0;
    /* Reserve height so there’s no layout shift (CLS) when images load in */
    min-height: 115px;
    contain: layout style;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.client-logo-track {
    display: flex;
    width: max-content;
    gap: 36px;
    align-items: center;
    /* will-change set via JS after IntersectionObserver fires to avoid
       wasting compositor memory on off-screen elements */
    animation: clientLogoScrollLeft 40s linear infinite;
}
.client-logo-slider-reverse .client-logo-track {
    animation: clientLogoScrollRight 40s linear infinite;
}
.client-logo-slider:hover .client-logo-track {
    animation-play-state: paused;
}
.client-logo-item {
    width: clamp(75px, 8vw, 115px);
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px;
}
.client-logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    filter: contrast(1.02);
    transition: filter 0.25s ease, transform 0.25s ease;
}
.client-logo-item:hover img {
    transform: scale(1.1);
}
@keyframes clientLogoScrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes clientLogoScrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .client-logo-track { animation: none; overflow-x: auto; }
}

/* Button treatment: bright blue, rectangular, with shine sweep. */
.nav-cta,
.btn-primary,
.package-cta {
    position: relative;
    overflow: hidden;
    background: #029ef8;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(2, 158, 248, .3);
    font-family: var(--f-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.nav-cta::before,
.btn-primary::before,
.package-cta::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 -100%;
    width: 70%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transform: skewX(-22deg);
    transition: left .55s ease;
}
.nav-cta:hover::before,
.btn-primary:hover::before,
.package-cta:hover::before { left: 130%; }
.nav-cta:hover,
.btn-primary:hover,
.package-cta:hover { background: #0285d4; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(2, 158, 248, .4); }
.nav-cta:active,
.btn-primary:active,
.package-cta:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(2, 158, 248, .25); }

/* Bebas Neue has its own condensed proportions; avoid synthetic weight and compressed tracking. */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; letter-spacing: .02em; }
.hero h1, .page-hero h1 { letter-spacing: .01em; }
.hero h1 .hi { background: #029ef8; border-radius: 0; color: #fff; }

/* Apply the reference display-font metrics consistently throughout the interface. */
.section-title,
.trust-title,
.service-card h3,
.package-card h3,
.case-card h3,
.portfolio-overlay h4,
.faq-item summary,
.final-cta h2,
.footer-brand,
.nav-cta,
.btn-primary,
.btn-ghost,
.package-cta,
.filter-tab,
.case-toggle {
    font-family: var(--f-display);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.12;
}
body, p, a, button, input, textarea, select { font-kerning: normal; text-rendering: optimizeLegibility; }

/* Bright blue brand CTA color. */
.nav-cta, .btn-primary, .package-cta { background: #029ef8; }
.nav-cta:hover, .btn-primary:hover, .package-cta:hover { background: #0285d4; }

/* Mobile motion and footer layout. Touch devices can retain :hover, so never pause these rails there. */
@media (max-width: 768px) {
    .marquee-track { animation: marqueeScroll 32s linear infinite; animation-play-state: running; }
    .client-gallery-track { animation: client-gallery-scroll 95s linear infinite; animation-play-state: running; }
    .marquee-track:hover, .client-gallery:hover .client-gallery-track { animation-play-state: running; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 30px; }
    .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
    .footer-col { min-width: 0; }
    .footer-col a { overflow-wrap: anywhere; }
}

/* Final section rhythm overrides. */
.hero, .page-hero, .trust-section, .final-cta, .site-footer { background: #0D1117; }
.about, .packages { background: #EAF7FF; color: #0D1117; }
.services, .testimonials { background: #132A3D; color: #EAF7FF; }
.services .section-title, .services .section-subtitle, .services h3, .testimonials .section-title { color: #EAF7FF !important; }
.services .service-card { background: #183247; border-color: rgba(168, 212, 238, .22); }
.services .service-card p { color: #C4D8E6; }
.packages .section-title, .packages .section-subtitle, .packages h3 { color: #0D1117; }
.hi, .hero h1 .hi { transform: skewX(-2deg); }
:is(.service-card, .package-card, .case-card, .portfolio-item, .testimonial-card, .proof-banner, .client-gallery-item, .cs-card, .cs-stat, .cs-chart, .cs-note, .cs-table-wrap, .faq-item) { box-shadow: 0 14px 34px rgba(0, 0, 0, .28), 0 2px 0 rgba(89, 184, 235, .12); }
:is(.service-card, .package-card, .case-card, .portfolio-item, .testimonial-card, .client-gallery-item, .cs-card, .cs-stat, .cs-chart, .cs-note):hover { box-shadow: 0 20px 44px rgba(0, 0, 0, .36), 0 2px 0 rgba(89, 184, 235, .2); }

/* About typography: one consistent hierarchy on the bright section. */
.about .section-title { color: #0D1117; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.08; }
.about .lead { color: #203B50 !important; font-size: clamp(19px, 1.7vw, 21px); line-height: 1.55; }
.about-text > p:not(.lead) { color: #38556A !important; font-size: 17px !important; line-height: 1.72 !important; }

/* Every highlighted phrase remains a sharp-edged rectangle. */
.hi, .hero h1 .hi { border-radius: 0 !important; }

/* Silent autoplay previews with an explicit opt-in sound control. */
.portfolio-video { background: #0D1117; }
.portfolio-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0D1117; }
.video-sound-toggle { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 6px; background: rgba(13, 17, 23, .82); color: #FFFFFF; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; backdrop-filter: blur(8px); }
.video-sound-toggle:hover, .video-sound-toggle:focus-visible { background: #164A96; border-color: #164A96; }
.portfolio-video .portfolio-overlay { pointer-events: none; }
@media (max-width: 768px) { .video-sound-toggle { top: 10px; right: 10px; } }

/* ============== PORTFOLIO V2 — MASONRY + MEDIA ============== */

/* --- Category containers --- */
.portfolio-category {
    padding-bottom: 20px;
}

/* --- Masonry Grid --- */
.portfolio-masonry {
    column-count: 4;
    column-gap: 16px;
    padding-bottom: 20px;
}
.portfolio-masonry-landscape {
    column-count: 2;
    column-gap: 20px;
}

/* --- Portfolio Card (shared) --- */
.portfolio-card {
    break-inside: avoid;
    margin-bottom: 20px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--ink);
    background: var(--paper-2);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s;
    cursor: pointer;
    position: relative;
}
.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 2px 0 rgba(89,184,235,.12);
}

/* --- Card info bar --- */
.card-info {
    padding: 14px 16px;
    background: #111a24;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.card-info h4 {
    font-family: var(--f-display);
    font-size: 19px;
    color: #ffffff !important;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.card-tag {
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff !important;
    opacity: 0.85;
}

/* --- Video Card --- */
.video-wrapper {
    position: relative;
    background: #0D1117;
    aspect-ratio: 9/16;
    overflow: hidden;
}
.video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0D1117;
}

/* Play button overlay */
.video-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13,17,23,0.35);
    border: none;
    cursor: pointer;
    z-index: 2;
    transition: background 0.3s;
}
.video-play-btn svg {
    width: 52px;
    height: 52px;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    transition: transform 0.25s;
}
.video-play-btn:hover {
    background: rgba(13,17,23,0.2);
}
.video-play-btn:hover svg {
    transform: scale(1.15);
}
.video-play-btn.hidden {
    display: none;
}

/* Sound toggle button */
.video-sound-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    background: rgba(13,17,23,0.7);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.video-sound-btn svg {
    width: 18px;
    height: 18px;
}
.video-sound-btn:hover {
    background: rgba(22,74,150,0.85);
    border-color: rgba(89,184,235,0.6);
}
.video-wrapper.is-playing .video-sound-btn {
    display: flex;
}

/* --- Photo Card (Websites) --- */
.portfolio-photo-card {
    cursor: pointer;
}
.portfolio-photo-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.portfolio-photo-card:hover img {
    transform: scale(1.04);
}
.website-link {
    display: block;
    position: relative;
    overflow: hidden;
}
.card-link-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(13,17,23,0.7);
    backdrop-filter: blur(8px);
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 2;
}
.portfolio-photo-card:hover .card-link-icon {
    opacity: 1;
    transform: translateY(0);
}

/* --- Lightbox Modal --- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
}
.lightbox-overlay[hidden] {
    display: flex;
    opacity: 0;
    visibility: hidden;
}
.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}
.lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    animation: lightboxFadeIn 0.35s;
}
@keyframes lightboxFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10001;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    background: rgba(13,17,23,0.6);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.lightbox-close:hover {
    background: rgba(220,50,50,0.7);
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    background: rgba(13,17,23,0.6);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.lightbox-nav:hover {
    background: rgba(89,184,235,0.4);
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-caption {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-display);
    font-size: 22px;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.lightbox-counter {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-mono);
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.1em;
}

/* --- Coming Soon Placeholder --- */
.portfolio-coming-soon {
    text-align: center;
    padding: 80px 40px;
    border: 2px dashed rgba(89,184,235,0.25);
    border-radius: var(--radius-md);
    background: rgba(89,184,235,0.03);
}
.coming-soon-icon {
    margin-bottom: 24px;
    color: var(--primary);
    opacity: 0.5;
}
.portfolio-coming-soon h3 {
    font-family: var(--f-display);
    font-size: 28px;
    color: var(--ink);
    margin-bottom: 12px;
}
.portfolio-coming-soon p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto 24px;
}
.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    padding: 8px 20px;
    border: 1px solid rgba(89,184,235,0.3);
    border-radius: 100px;
    background: rgba(89,184,235,0.08);
}

/* --- Social Media Metric Card --- */
.social-metric-card {
    cursor: default;
}
.metric-img-wrapper {
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.metric-img-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.social-metric-card:hover .metric-img-wrapper img {
    transform: scale(1.02);
}
.metric-stats {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px 14px;
    background: #0b1219;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 8px;
}
.metric-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
}
.metric-value {
    font-family: var(--f-num) !important;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff !important;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.metric-label {
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff !important;
    margin-top: 3px;
    opacity: 0.92;
}
.metric-growth {
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 700;
    color: #4ade80 !important;
    margin-top: 3px;
}

/* Global unclustered, legible numerical typography for sales and metrics */
.hero-stat .num,
.proof-banner .proof-number,
.cs-hero-stat .num,
.cs-stat .val,
.cs-outcome-item .val,
.metric-value,
.pricing-price,
.package-price,
.card-number {
    font-family: var(--f-num) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    font-feature-settings: "tnum" 1;
}

/* Social media card header and white text */
.social-metric-card .card-info {
    background: #111a24 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important;
}
.social-metric-card .card-info h4 {
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}
.social-metric-card .card-info .card-tag {
    color: #ffffff !important;
    opacity: 0.85;
}
.social-metric-card svg text {
    fill: #cbd5e1;
}
.social-metric-card svg text[fill="#4ade80"] {
    fill: #4ade80 !important;
}

/* --- True Centered Video & Portfolio Grids (No multi-column skew or right-shift) --- */
#ugcGrid,
#influencerGrid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    padding-bottom: 36px !important;
    column-count: auto !important;
    box-sizing: border-box !important;
}

#ugcGrid .portfolio-card,
#influencerGrid .portfolio-card {
    width: 100% !important;
    margin-bottom: 0 !important;
    break-inside: auto !important;
}

#socialGrid,
#websitesGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    column-count: auto !important;
    box-sizing: border-box !important;
}

#socialGrid .portfolio-card,
#websitesGrid .portfolio-card {
    width: 100% !important;
    margin-bottom: 0 !important;
    break-inside: auto !important;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    #ugcGrid,
    #influencerGrid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 18px !important;
    }
}
@media (max-width: 860px) {
    #ugcGrid,
    #influencerGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        max-width: 600px !important;
    }
}
@media (max-width: 768px) {
    #socialGrid,
    #websitesGrid {
        grid-template-columns: 1fr !important;
        max-width: 560px !important;
    }
}
@media (max-width: 520px) {
    #ugcGrid,
    #influencerGrid {
        grid-template-columns: 1fr !important;
        max-width: 360px !important;
        gap: 16px !important;
    }
    .portfolio-masonry { column-count: 1; column-gap: 16px; }
    .portfolio-masonry-landscape { column-count: 1; column-gap: 16px; }
    .portfolio-card { margin-bottom: 16px; }
    .video-play-btn svg { width: 40px; height: 40px; }
    .metric-value { font-size: 18px; }
    .metric-stats { padding: 10px 12px; }
    .portfolio-coming-soon { padding: 60px 20px; }
}

/* --- Floating WhatsApp Widget --- */
.floating-whatsapp {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    z-index: 99999;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}
.floating-whatsapp:hover {
    transform: scale(1.1) translateY(-3px);
    background: #20BA5A;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.6), 0 0 16px rgba(37, 211, 102, 0.4);
    color: #ffffff !important;
}
.floating-whatsapp:active {
    transform: scale(0.95);
}
.floating-whatsapp svg {
    width: 34px;
    height: 34px;
    fill: #ffffff;
}
@media (max-width: 768px) {
    .floating-whatsapp {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
    }
    .floating-whatsapp svg {
        width: 28px;
        height: 28px;
    }
}

/* ============== SECTION FLOATING PARTICLES ============== */
.section-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.section-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(2, 158, 248, 0.18);
    bottom: 20%;
    animation: sectionFloat 8s ease-in-out infinite;
}
@keyframes sectionFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateY(-60px) scale(1.5); opacity: 0.6; }
    90% { opacity: 0; }
}