/* ==========================================================================
   VELORA — Influencer Marketing
   Ultra-premium purple & pink gradient luxury theme.

   TYPEFACES
   Display is Bricolage Grotesque, body is Figtree — both SIL Open Font License
   via Google Fonts. Bricolage is genuinely part of oreo.com's own stack (they
   load it from Typekit); their headline face Pluto and body face Pluto Sans are
   commercial HVD Fonts and cannot be redistributed here, so Figtree stands in
   for Pluto Sans. Display sizes are deliberately smaller than the previous
   revision for an editorial luxury read rather than a poster shout.

   COLOUR — dark canvas, every text pairing contrast-checked
   white          on --canvas ....... 18.9:1
   --text-soft    on --canvas ....... 12.1:1
   --muted        on --canvas ........ 7.0:1
   --pink         on --canvas ........ 6.3:1
   --violet-light on --canvas ........ 5.6:1
   white          on --violet ........ 6.9:1
   white          on --pink .......... 4.6:1
   --rose is decorative only; as text on canvas it sits below the large-text
   threshold, so it is used for fills, borders and glows.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* Rich Luxury Dark canvas — sleek deep velvet obsidian palette */
    --canvas: #090514;
    --canvas-2: #120a22;
    --canvas-3: #1b1033;

    /* Purple / pink spectrum. */
    --violet: #8b5cf6;
    --violet-bright: #a78bfa;
    --violet-light: #c084fc;
    --violet-deep: #4c1d95;
    --pink: #ec4899;
    --pink-bright: #f472b6;
    --pink-light: #fb7185;
    --rose: #f43f5e;
    --rose-light: #fb7185;

    /* Gold */
    --gold: #fbbf24;

    /* Type on the dark canvas */
    --text: #ffffff;
    --text-soft: #e2d9f3;
    --muted: #a594c4;

    /* Glass + hairlines */
    --glass: rgba(255, 255, 255, .04);
    --glass-strong: rgba(255, 255, 255, .08);
    --hair: rgba(168, 85, 247, .22);
    --hair-soft: rgba(168, 85, 247, .12);
    --hair-bright: rgba(255, 255, 255, .2);

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --grad-rich: linear-gradient(135deg, #7c3aed 0%, #c026d3 50%, #ec4899 100%);
    --grad-text: linear-gradient(96deg, #c084fc 0%, #f472b6 48%, #fbbf24 100%);
    --grad-band: linear-gradient(150deg, #130a24 0%, #1c0f33 55%, #090514 100%);

    /* Coloured glows */
    --glow-violet: 0 0 35px -5px rgba(139, 92, 246, .45);
    --glow-pink: 0 0 35px -5px rgba(236, 72, 153, .42);
    --shadow-photo: 0 30px 60px -20px rgba(0, 0, 0, .8);
    --shadow-lift: 0 18px 40px -15px rgba(0, 0, 0, .6);

    --f-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
    --f-body: 'Figtree', -apple-system, 'Segoe UI', Roboto, sans-serif;

    --shell: 1280px;
    --gutter: clamp(1.15rem, 4vw, 4rem);
    --nav-h: 84px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    width: 100%;
}

body {
    font-family: var(--f-body);
    font-size: clamp(.98rem, .3vw + .9rem, 1.04rem);
    font-weight: 400;
    line-height: 1.68;
    color: var(--text-soft);
    background: var(--canvas);
    overflow-x: clip;
    width: 100%;
    -webkit-font-smoothing: antialiased;
}

body.nav-open {
    overflow: hidden;
}

/* ========================================================================
   51.7 FOUNDER PORTRAIT SCALE - SINGLE VIEWPORT OPTIMIZED
   The home and About pages share the same compact, single-view CEO orbit.
   ======================================================================== */
#founder {
    padding-top: clamp(2rem, 3.5vh, 3.5rem);
    padding-bottom: clamp(2.5rem, 4vh, 4rem);
}

/* ========================================================================
   51.7 ABOUT — ALL PILLAR CARDS IN ONE DESKTOP VIEW
   The cards remain inside the original horizontal rail, with its native
   scrollbar and touch/trackpad scrolling preserved. Only desktop sizing is
   changed so the complete four-card set is visible at once.
   ======================================================================== */
@media (min-width: 1081px) {
    #who-we-are > .shell.slide-split {
        width: min(100%, 1560px);
        max-width: 1560px;
        grid-template-columns: minmax(310px, .72fr) minmax(0, 1.7fr);
        gap: clamp(2rem, 3.5vw, 4rem);
    }

    #who-we-are .swipe-track {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        gap: clamp(.75rem, 1.15vw, 1.15rem);
        overflow-x: scroll;
        scrollbar-gutter: stable;
    }

    #who-we-are .swipe-card {
        width: auto;
        min-width: 0;
        height: 100%;
        padding: clamp(1rem, 1.45vw, 1.45rem);
        scroll-snap-align: start;
    }

    #who-we-are .swipe-card .offer-desc {
        font-size: clamp(.78rem, .82vw, .91rem);
        line-height: 1.55;
    }
}

img,
video,
svg,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

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

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

ul {
    list-style: none;
}

::selection {
    background: var(--pink);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 3px;
    border-radius: 6px;
}

[hidden] {
    display: none !important;
}

/* Ambient radial mesh glow over the whole canvas */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(58% 44% at 88% -4%, rgba(139, 92, 246, .22) 0%, transparent 62%),
        radial-gradient(52% 42% at 4% 22%, rgba(236, 72, 153, .16) 0%, transparent 64%),
        radial-gradient(60% 50% at 76% 82%, rgba(244, 63, 94, .12) 0%, transparent 66%),
        var(--canvas);
}

/* ---------- 3. Typography ---------- */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--f-display);
    font-weight: 700;
    font-stretch: 92%;
    line-height: .98;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--text);
}

/* Reduced from the previous revision for an editorial luxury scale */
.display-1 {
    font-size: clamp(2.3rem, 5.8vw, 4.7rem);
}

.display-2 {
    font-size: clamp(1.85rem, 4.2vw, 3.2rem);
}

.display-3 {
    font-size: clamp(1.35rem, 2.4vw, 1.95rem);
}

.gold-solid,
.gold-text {
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 220% 100%;
    animation: sheen 8s ease-in-out infinite;
}

@keyframes sheen {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--f-display);
    font-size: clamp(.66rem, 1vw, .74rem);
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 1.15rem;
}

.eyebrow::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-primary);
}

.eyebrow.centered {
    justify-content: center;
}

.eyebrow.centered::before {
    content: '';
    flex: 1;
    max-width: 90px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(270deg, #ec4899, #7c3aed);
}

.eyebrow.centered::after {
    max-width: 90px;
}

.lead {
    font-size: clamp(1.02rem, .8vw + .8rem, 1.2rem);
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 54ch;
}

.tag-line {
    font-family: var(--f-display);
    font-size: clamp(1.2rem, 2.2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: var(--text);
}

.tag-line em {
    font-style: normal;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

strong {
    font-weight: 600;
    color: var(--text);
}

.hl {
    color: var(--pink);
    font-weight: 600;
}

.hl-violet {
    color: var(--violet-light);
    font-weight: 600;
}

.script {
    font-family: var(--f-display);
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -.025em;
    text-transform: uppercase;
    line-height: 1.1;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 1.3rem 0;
}

.rule::before,
.rule::after {
    content: '';
    height: 2px;
    flex: 1;
    max-width: 110px;
    border-radius: 2px;
    background: var(--grad-primary);
}

.rule .spark {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 5px rgba(236, 72, 153, .16);
}

.rule.left {
    justify-content: flex-start;
}

.rule.left::before {
    display: none;
}

.rule.left::after {
    max-width: 190px;
}

/* ---------- 4. Layout ---------- */
.shell {
    /* Positioned so it paints above each section's ambient float layer
       (section 40). Without this the shell stays in normal flow, which paints
       below any positioned sibling, and the drifting orbs would sit on top of
       the copy. z-index is left at auto: DOM order then decides, and the float
       layer is always injected as the first child. */
    position: relative;
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

section {
    position: relative;
    max-width: 100%;
    overflow-x: clip;
}

.section {
    position: relative;
    max-width: 100%;
    overflow-x: clip;
    padding-block: clamp(3.5rem, 7vw, 6.75rem);
    scroll-margin-top: calc(var(--nav-h, 84px) + 16px);
}

.sect-float {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    width: 100%;
    max-width: 100%;
}

/* Slightly raised panel */
.tint {
    background: var(--grad-band);
    border-block: 1px solid var(--hair-soft);
}

/* Full-saturation purple/pink band */
.ink-band {
    position: relative;
    color: var(--text-soft);
    background:
        radial-gradient(64% 80% at 88% 4%, rgba(139, 92, 246, .34), transparent 60%),
        radial-gradient(58% 74% at 6% 96%, rgba(236, 72, 153, .28), transparent 62%),
        linear-gradient(150deg, #21123c 0%, #160b28 60%, #0f0820 100%);
    border-block: 1px solid var(--hair);
    overflow: hidden;
}

.section-head {
    max-width: 730px;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head.centered {
    margin-inline: auto;
    text-align: center;
}

.section-head .lead {
    margin-top: 1.15rem;
}

.section-head.centered .lead {
    margin-inline: auto;
}

.slide-split {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4.5vw, 5rem);
    align-items: start;
}

.slide-split .slide-copy {
    position: sticky;
    top: calc(var(--nav-h) + 2.5rem);
}

.watermark {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(16rem, 34vw, 38rem);
    line-height: .7;
    color: rgba(139, 92, 246, .05);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Glassmorphic surface utility */
.glass {
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 22px;
    backdrop-filter: blur(16px) saturate(140%);
    transition: border-color .4s ease, box-shadow .5s var(--ease), transform .5s var(--spring),
        background .4s ease;
}

.glass:hover {
    background: var(--glass-strong);
    border-color: rgba(236, 72, 153, .42);
    box-shadow: var(--glow-pink);
}

/* ---------- 5. Background circles (influencer.in style) ---------- */
.orbit-ring,
.pulse-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Thin ring with a travelling glow node on its edge */
.orbit-ring {
    border: 1px solid var(--hair);
    width: var(--size, 380px);
    aspect-ratio: 1;
    animation: orbitSpin var(--spin, 34s) linear infinite;
}

.orbit-ring::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: var(--glow-pink);
}

.orbit-ring.rev {
    animation-direction: reverse;
    border-color: rgba(139, 92, 246, .2);
}

.orbit-ring.rev::after {
    background: var(--violet-light);
    box-shadow: var(--glow-violet);
}

@keyframes orbitSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Soft breathing gradient blob */
.pulse-circle {
    width: var(--size, 300px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(236, 72, 153, .22) 0%, rgba(139, 92, 246, .12) 46%, transparent 70%);
    animation: pulseGlow var(--spin, 7s) ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        transform: scale(.9);
        opacity: .55;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* ---------- 6. Buttons ---------- */
.btn {
    --btn-py: .88rem;
    --btn-px: 1.95rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: var(--btn-py) var(--btn-px);
    border: 0;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    transition: transform .4s var(--spring), box-shadow .4s var(--ease), color .3s ease;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn:active {
    transform: translateY(-1px) scale(.98);
}

.btn svg {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform .4s var(--spring);
}

.btn:hover svg {
    transform: translateX(4px);
}

.btn-gold {
    color: #fff;
    background: var(--grad-rich);
    background-size: 210% 100%;
    box-shadow: 0 14px 32px -12px rgba(236, 72, 153, .6);
}

.btn-gold:hover {
    background-position: 100% 50%;
    box-shadow: 0 20px 44px -12px rgba(236, 72, 153, .72), var(--glow-violet);
}

.btn-ghost {
    color: var(--text);
    background: var(--glass);
    border: 1px solid var(--hair);
    backdrop-filter: blur(10px);
}

.btn-ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--grad-primary);
    transform: translateY(101%);
    transition: transform .5s var(--ease);
}

.btn-ghost:hover {
    color: #fff;
    border-color: transparent;
}

.btn-ghost:hover::before {
    transform: translateY(0);
}

.btn-sm {
    --btn-py: .66rem;
    --btn-px: 1.4rem;
    font-size: .74rem;
}

.btn-lg {
    --btn-py: 1.02rem;
    --btn-px: 2.4rem;
    font-size: .88rem;
}

.btn-block {
    width: 100%;
}

.link-line {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--f-display);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pink);
    padding-bottom: .3rem;
    background-image: linear-gradient(var(--pink), var(--pink));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size .45s var(--ease), color .3s ease;
}

.link-line:hover {
    background-size: 100% 2px;
    color: var(--pink-light);
}

.link-line svg {
    width: 15px;
    height: 15px;
    transition: transform .4s var(--spring);
}

.link-line:hover svg {
    transform: translateX(5px);
}

/* ---------- 7. Scroll progress + preloader ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--grad-rich);
    z-index: 1200;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(60% 50% at 50% 30%, rgba(139, 92, 246, .28), transparent 66%),
        var(--canvas);
    transition: opacity .7s ease, visibility .7s ease;
}

.preloader.done {
    opacity: 0;
    visibility: hidden;
}

.preloader-inner {
    text-align: center;
}

.preloader img {
    width: min(200px, 55vw);
    margin-inline: auto;
    animation: pop 1.7s var(--spring) infinite alternate;
}

.preloader-bar {
    width: min(200px, 48vw);
    height: 3px;
    border-radius: 3px;
    margin: 1.6rem auto 0;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.preloader-bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: var(--grad-rich);
    animation: sweep 1.1s ease-in-out infinite;
}

.preloader p {
    margin-top: .9rem;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--muted);
}

@keyframes pop {
    from {
        transform: scale(.95) rotate(-2deg);
    }

    to {
        transform: scale(1.02) rotate(2deg);
    }
}

@keyframes sweep {
    0% {
        transform: translateX(-110%);
    }

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

/* ---------- 8. Header ---------- */
.nav {
    position: fixed;
    inset: 0 0 auto;
    height: var(--nav-h);
    z-index: 1100;
    display: flex;
    align-items: center;
    background: rgba(11, 7, 22, .32);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: height .35s var(--ease), transform .45s var(--ease), background .35s ease, border-color .35s ease;
}

.nav.stuck {
    height: 70px;
    background: rgba(11, 7, 22, .94);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: var(--hair);
}

.nav.hide {
    transform: translateY(-105%);
}

.nav-inner {
    width: 100%;
    max-width: 1560px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 2.6vw, 2.25rem);
    display: flex;
    align-items: center;
    gap: clamp(.9rem, 2vw, 2rem);
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: none;
    margin-right: auto;
}

.brand-badge {
    width: clamp(42px, 4vw, 52px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    box-shadow: none;
    animation: logoFloat 4.4s ease-in-out infinite;
    will-change: transform;
}

.brand-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand:hover .brand-badge {
    box-shadow: none;
}

.brand-word {
    font-family: var(--f-display);
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.03em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--text);
    transition: color .3s ease;
}

.brand:hover .brand-word {
    color: var(--pink);
}

.nav.stuck .brand-badge {
    width: 40px;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(-5px) rotate(-3deg);
    }

    50% {
        transform: translateY(5px) rotate(3deg);
    }
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: clamp(.85rem, 1.8vw, 1.85rem);
}

.nav-menu>li {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    position: relative;
    padding: .5rem 0;
    font-family: var(--f-display);
    font-size: clamp(.76rem, .9vw, .86rem);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-soft);
    transition: color .28s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-primary);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .4s var(--ease);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
    color: var(--text);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-caret {
    width: 12px;
    height: 12px;
    transition: transform .35s var(--ease);
}

.nav-link:hover .nav-caret {
    transform: translateY(2px);
}

.nav-sub {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 262px;
    padding: .5rem;
    margin-top: .5rem;
    display: grid;
    gap: .1rem;
    background: rgba(19, 9, 36, .97);
    border: 1px solid var(--hair);
    border-radius: 18px;
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-lift), var(--glow-violet);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, visibility .3s ease, transform .4s var(--spring);
}

.nav-sub::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -.7rem;
    height: .7rem;
}

.nav-menu>li:hover .nav-sub,
.nav-menu>li:focus-within .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-sub a {
    display: block;
    padding: .6rem .8rem;
    border-radius: 12px;
    font-family: var(--f-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-soft);
    transition: background .25s ease, color .25s ease, padding-left .3s var(--ease);
}

.nav-sub a:hover {
    background: rgba(236, 72, 153, .14);
    color: var(--text);
    padding-left: 1.1rem;
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: clamp(.35rem, 1vw, .75rem);
    flex: none;
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.nav-ic {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-soft);
    transition: background .3s ease, color .3s ease, transform .4s var(--spring);
}

.nav-ic svg {
    width: 20px;
    height: 20px;
}

.nav-ic:hover {
    background: rgba(236, 72, 153, .16);
    color: var(--pink-light);
    transform: scale(1.1);
}

.burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hair);
    border-radius: 50%;
    background: var(--glass);
    cursor: pointer;
}

.burger span {
    position: absolute;
    left: 50%;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .4s var(--ease), opacity .25s ease;
}

.burger span:nth-child(1) {
    top: 14px;
    transform: translateX(-50%);
}

.burger span:nth-child(2) {
    top: 20px;
    transform: translateX(-50%);
}

.burger span:nth-child(3) {
    top: 26px;
    transform: translateX(-50%);
    width: 11px;
}

.burger[aria-expanded="true"] span:nth-child(1) {
    top: 20px;
    transform: translateX(-50%) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
    top: 20px;
    width: 17px;
    transform: translateX(-50%) rotate(-45deg);
}

.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
    color: var(--text-soft);
    background:
        radial-gradient(70% 55% at 100% 0%, rgba(139, 92, 246, .3), transparent 62%),
        radial-gradient(60% 50% at 0% 100%, rgba(236, 72, 153, .24), transparent 64%),
        var(--canvas);
    clip-path: circle(0% at calc(100% - 3.5rem) 2.6rem);
    transition: clip-path .8s var(--ease);
    overflow-y: auto;
}

.nav-drawer.open {
    clip-path: circle(150% at calc(100% - 3.5rem) 2.6rem);
}

.drawer-menu {
    display: grid;
    gap: .2rem;
}

.drawer-menu a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.7rem, 8vw, 2.9rem);
    letter-spacing: -.03em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--text);
    opacity: 0;
    transform: translateY(26px);
    transition: color .3s ease;
}

.nav-drawer.open .drawer-menu a {
    animation: drawerIn .7s var(--spring) forwards;
    animation-delay: calc(var(--i) * 70ms + 180ms);
}

.drawer-menu a small {
    font-family: var(--f-body);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--pink);
}

.drawer-menu a:hover {
    color: var(--pink-light);
}

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

.drawer-foot {
    display: grid;
    gap: .5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--hair);
    font-size: .9rem;
    font-weight: 500;
}

.drawer-foot a:hover {
    color: var(--pink-light);
}

/* ---------- 9. Hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem));
    padding-bottom: clamp(3rem, 6vw, 5rem);
    color: #ffffff;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #0b0716;
}

.hero-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%) scale(1.02);
    object-fit: cover;
    /* Left sharp and at full strength on purpose — the footage is the point of
       this hero. Nothing here dims the frame; legibility is bought by the
       corner-weighted scrim below instead of by flattening the whole video. */
    opacity: 1;
    filter: saturate(1.06) contrast(1.02);
}

/* Scrim weighted into the bottom-left corner where the headline sits, so the
   centre and upper frame stay clear video. A full-frame wash would have been
   easier but it is exactly what buries the footage. */
.hero-video::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        /* Cinematic dark wash that seamlessly anchors into dark canvas */
        linear-gradient(180deg,
            rgba(9, 5, 20, 0.45) 0%,
            rgba(9, 5, 20, 0.2) 30%,
            rgba(9, 5, 20, 0.68) 70%,
            rgba(9, 5, 20, 0.95) 92%,
            var(--canvas) 100%),
        /* Deep pool in the bottom-left corner under headline */
        radial-gradient(105% 80% at -5% 108%,
            rgba(9, 5, 20, .98) 0%,
            rgba(9, 5, 20, .85) 35%,
            rgba(9, 5, 20, .5) 60%,
            transparent 85%),
        /* Ambient luxury brand tint */
        linear-gradient(125deg, rgba(124, 58, 237, .24) 0%, transparent 50%, rgba(236, 72, 153, .2) 100%);
}

.hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
}

.hero-badge-wrap {
    margin-bottom: 1.35rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 24px rgba(236, 72, 153, 0.22);
    font-family: var(--f-display);
    font-size: clamp(0.72rem, 0.88vw, 0.84rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e, 0 0 20px #22c55e;
    animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {

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

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

.hero-main-title {
    font-family: var(--f-display);
    font-size: clamp(2.4rem, 5.4vw, 5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.9);
}

.hero-main-title .gold-solid {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 35%, #a855f7 70%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 20px rgba(236, 72, 153, 0.6));
    display: inline-block;
}

.hero-lead-text {
    font-size: clamp(1.05rem, 1.28vw, 1.28rem);
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 800px;
    margin: 1.6rem auto 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}

.hero-lead-text strong {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 14px rgba(236, 72, 153, 0.5);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    margin-top: 2.2rem;
}

.hero-actions .btn {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 1.1rem 2.5rem;
    font-size: 0.92rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-main {
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 32px rgba(236, 72, 153, 0.6), 0 0 24px rgba(168, 85, 247, 0.4) !important;
}

.hero-btn-main:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 44px rgba(236, 72, 153, 0.8), 0 0 35px rgba(168, 85, 247, 0.6) !important;
}

.btn-ghost-glass {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.btn-ghost-glass:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 32px rgba(255, 255, 255, 0.25) !important;
}

.cine-wrap {
    position: relative;
    z-index: 2;
}

.cine {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 999px 999px 26px 26px;
    overflow: hidden;
    box-shadow: var(--shadow-photo), var(--glow-violet);
    isolation: isolate;
}

.cine-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s var(--ease);
}

.cine-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.07);
    transition: transform 9s linear;
}

.cine-slide.on {
    opacity: 1;
}

.cine-slide.on img {
    transform: scale(1);
}

.cine::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 2px solid rgba(249, 168, 212, .5);
    border-radius: inherit;
    pointer-events: none;
}

.cine-badge {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    background: rgba(11, 7, 22, .82);
    border: 1px solid var(--hair);
    backdrop-filter: blur(10px);
    font-family: var(--f-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pink-light);
    white-space: nowrap;
}

.cine-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rose);
    animation: livePulse 1.6s ease-in-out infinite;
}

@keyframes livePulse {

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

    50% {
        opacity: .35;
        transform: scale(.7);
    }
}

/* ---------- 10. VALUE · VOICE · VISION strip ---------- */
.vvv {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.65rem, 2.4vw, 1.7rem);
    padding: 1.05rem var(--gutter);
    font-family: var(--f-display);
    font-size: clamp(.7rem, 1.4vw, .92rem);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #5b21b6, #7c3aed, #ec4899, #f43f5e, #ec4899, #7c3aed, #5b21b6);
    background-size: 320% 100%;
    animation: vvvShimmer 14s linear infinite;
}

@keyframes vvvShimmer {
    to {
        background-position: -320% 50%;
    }
}

.vvv i {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: #fff;
}

.footer .vvv {
    background: transparent;
    animation: none;
    color: var(--pink-light);
    border-top: 1px solid var(--hair);
}

.footer .vvv i {
    background: var(--pink);
}

/* ---------- 11. Page header ---------- */
.page-head {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(2.5rem, 5.5vw, 4.5rem));
    padding-bottom: clamp(1.75rem, 4vw, 3.25rem);
    overflow: hidden;
}

.page-head::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -8%;
    width: 56vw;
    height: 56vw;
    max-width: 700px;
    max-height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .32), rgba(236, 72, 153, .16) 46%, transparent 70%);
    pointer-events: none;
}

.page-head .breadcrumb {
    display: flex;
    gap: .5rem;
    font-family: var(--f-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.3rem;
}

.page-head .breadcrumb a:hover {
    color: var(--pink);
}

.page-head .breadcrumb span {
    color: var(--pink);
}

/* ---------- 11.2. Full-Screen Hero Page Banner ---------- */
.page-banner-section {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background: #090514;
    overflow: hidden;
    box-sizing: border-box;
}

.page-banner-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #090514;
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.page-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    filter: contrast(1.05) brightness(0.85);
    transform: scale(1.01);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
}

.page-banner-frame:hover .page-banner-img {
    transform: scale(1.03);
    filter: contrast(1.1) brightness(0.92);
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(9, 5, 20, 0.35) 0%,
        rgba(9, 5, 20, 0.18) 35%,
        rgba(9, 5, 20, 0.45) 65%,
        rgba(9, 5, 20, 0.92) 100%
    );
    z-index: 1;
}

.page-banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    box-sizing: border-box;
    padding-bottom: clamp(3rem, 7vh, 5.5rem);
    padding-top: calc(var(--nav-h) + 2rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.page-banner-content .shell {
    width: 100%;
    box-sizing: border-box;
}

.page-banner-eyebrow {
    font-family: var(--f-display, sans-serif);
    font-size: clamp(0.78rem, 1vw, 0.92rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold, #fbbf24);
    margin: 0 0 0.6rem 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.page-banner-title {
    font-family: var(--f-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(2.8rem, 6.5vw, 5.5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 4px 32px rgba(0, 0, 0, 0.65);
}

/* ---------- 11.5. Luxury Editorial Grid (Checkerboard Layout) ---------- */
.shell-wide {
    max-width: 1520px;
    padding-inline: clamp(1rem, 2vw, 2.5rem);
}

.luxury-grid-section {
    position: relative;
    padding-block: clamp(3.5rem, 6vw, 6rem);
    background: #08080a;
}

.luxury-grid-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: #08080a;
    width: 100%;
}

.luxury-grid-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 220px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #08080a;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.4s ease;
    box-sizing: border-box;
}

.luxury-empty-cell {
    background: #08080a;
    pointer-events: none;
}

.luxury-card-item {
    display: flex;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
}

.luxury-card-inner {
    width: 100%;
    height: 100%;
    padding: clamp(1.4rem, 2vw, 2.2rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

.luxury-card-num {
    font-family: var(--f-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.35s ease;
}

.luxury-card-title {
    font-family: 'Cinzel', 'Cormorant Garamond', var(--f-display), serif;
    font-size: clamp(0.98rem, 1.35vw, 1.45rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
    color: #ffffff;
    margin-block: auto;
    transition: color 0.35s ease;
}

.luxury-card-cta {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    transition: color 0.35s ease, text-decoration-color 0.35s ease;
}

/* Hover Invert State - Pure White with Black Typography (Matching Reference) */
.luxury-card-item:hover,
.luxury-card-item:focus-visible {
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.luxury-card-item:hover .luxury-card-num,
.luxury-card-item:focus-visible .luxury-card-num {
    color: #000000;
}

.luxury-card-item:hover .luxury-card-title,
.luxury-card-item:focus-visible .luxury-card-title {
    color: #000000;
}

.luxury-card-item:hover .luxury-card-cta,
.luxury-card-item:focus-visible .luxury-card-cta {
    color: #000000;
    text-decoration-color: #000000;
}

/* Responsive Grid Adaptation */
@media (max-width: 1024px) {
    .luxury-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .luxury-empty-cell {
        display: none;
    }
}

@media (max-width: 768px) {
    .luxury-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .luxury-grid-container {
        grid-template-columns: 1fr;
    }

    .luxury-grid-cell {
        aspect-ratio: auto;
        min-height: 200px;
    }
}

/* ---------- 12. Offer list ---------- */
.offer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
}

.offer.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.offer.one {
    grid-template-columns: minmax(0, 1fr);
}

.offer-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem 1.1rem;
    padding-block: clamp(1.4rem, 2.4vw, 2rem);
    border-top: 1px solid var(--hair);
    transition: border-color .4s ease;
}

.offer-item:hover {
    border-top-color: var(--pink);
}

.offer-num {
    grid-row: span 2;
    font-family: var(--f-display);
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.offer-icon {
    grid-column: 2;
    color: var(--pink);
    transition: transform .5s var(--spring), color .35s ease;
}

.offer-icon svg {
    width: 36px;
    height: 36px;
}

.offer-item:hover .offer-icon {
    transform: translateY(-4px) rotate(-6deg) scale(1.08);
    color: var(--violet-light);
}

.offer-name {
    grid-column: 2;
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: .4rem;
}

.offer-name b {
    display: block;
    font-weight: 700;
    color: var(--pink);
}

.offer-desc {
    grid-column: 2;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--muted);
}

.offer-list {
    grid-column: 2;
    display: grid;
    gap: .45rem;
    margin-top: .3rem;
}

.offer-list li {
    display: flex;
    gap: .6rem;
    font-size: .91rem;
    line-height: 1.6;
    color: var(--muted);
}

.offer-list li::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: .6rem;
    border-radius: 50%;
    background: var(--pink);
}

.goal-pill {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 460px;
    margin-top: 1.9rem;
    padding-left: 1.2rem;
    border-left: 2px solid var(--pink);
}

.goal-pill li {
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.5vw, 1.28rem);
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--text);
}

.goal-pill li:last-child {
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 13. Swipe deck (Who We Are) ---------- */
.swipe-deck,
.swipe-track {
    display: flex;
    gap: clamp(1rem, 2vw, 1.6rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--pink) transparent;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.swipe-container {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}

.swipe-deck::-webkit-scrollbar,
.swipe-track::-webkit-scrollbar {
    height: 4px;
}

.swipe-deck::-webkit-scrollbar-track,
.swipe-track::-webkit-scrollbar-track {
    background: var(--hair-soft);
    border-radius: 4px;
}

.swipe-deck::-webkit-scrollbar-thumb,
.swipe-track::-webkit-scrollbar-thumb {
    background: var(--grad-primary);
    border-radius: 4px;
}

.swipe-card {
    flex: 0 0 min(340px, 78vw);
    scroll-snap-align: center;
    display: grid;
    gap: .8rem;
    padding: clamp(1.5rem, 2.6vw, 2.1rem);
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 24px;
    backdrop-filter: blur(16px);
    transition: border-color .4s ease, box-shadow .5s var(--ease), transform .5s var(--spring);
}

.swipe-card:hover {
    transform: translateY(-6px);
    border-color: rgba(236, 72, 153, .42);
    box-shadow: var(--glow-pink);
}

.swipe-card span {
    font-family: var(--f-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.03em;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.swipe-card h3 {
    font-size: clamp(1.05rem, 1.3vw, 1.22rem);
}

.swipe-card p {
    font-size: .93rem;
    color: var(--muted);
}

/* ---------- 14. Trust band ---------- */
.trust-band {
    display: flex;
    overflow: hidden;
    padding-block: clamp(.9rem, 1.8vw, 1.35rem);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.trust-track {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(1.6rem, 3.6vw, 3.25rem);
    padding-right: clamp(1.6rem, 3.6vw, 3.25rem);
    animation: trustSlide var(--dur, 44s) linear infinite;
    will-change: transform;
}

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

@keyframes trustSlide {
    to {
        transform: translateX(-50%);
    }
}

.trust-item {
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.9vw, 1.45rem);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-soft);
    opacity: .62;
    transition: opacity .3s ease, color .3s ease;
}

.trust-item:hover {
    opacity: 1;
    color: var(--pink-light);
}

/* ---------- 15. Founder + glimpses ---------- */
.founder {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.founder-name {
    font-size: clamp(2.1rem, 5.2vw, 3.9rem);
    line-height: .92;
    letter-spacing: -.04em;
}

.founder-role {
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.7vw, 1.32rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pink);
    margin-top: .4rem;
}

.founder-portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 999px 999px 26px 26px;
    overflow: hidden;
    box-shadow: var(--shadow-photo);
}

.founder-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 14%;
}

.pullquote {
    display: flex;
    gap: .9rem;
    margin-top: 1.6rem;
}

.pullquote::before {
    content: '\201C';
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 3.8rem;
    line-height: .8;
    color: var(--pink);
    flex: none;
}

.pullquote blockquote {
    font-family: var(--f-display);
    font-size: clamp(1.1rem, 1.8vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.025em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--text);
}

/* CEO orbiting avatar ring */
.ceo-orbit {
    position: relative;
    width: min(420px, 82vw);
    aspect-ratio: 1;
    margin-inline: auto;
}

.ceo-orbit-photo {
    position: absolute;
    inset: 17%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--hair);
    box-shadow: var(--glow-violet);
}

.ceo-orbit-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 14%;
}

.ceo-orbit::before,
.ceo-orbit::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--hair-soft);
    pointer-events: none;
}

.ceo-orbit::before {
    inset: 8%;
}

.ceo-orbit::after {
    inset: 0;
    border-color: var(--hair);
}

.ceo-orbit-track {
    position: absolute;
    inset: 0;
    animation: orbitSpin 30s linear infinite;
}

.ceo-orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(44px, 11%, 62px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    /* Sit on the ring at angle --a, then hold the avatar upright by spinning
       the image back at the same rate the track spins forward. */
    transform: rotate(var(--a)) translateY(calc(min(210px, 41vw) * -1)) translate(-50%, -50%);
    transform-origin: 0 0;
    border: 2px solid var(--canvas-2);
    box-shadow: var(--glow-pink);
}

.ceo-orbit-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: orbitSpinRev 30s linear infinite;
}

@keyframes orbitSpinRev {
    to {
        transform: rotate(-360deg);
    }
}

/* ---------- 16. Instagram carousel ---------- */
.ig {
    display: grid;
    gap: clamp(1.1rem, 2vw, 1.6rem);
}

.ig-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--hair);
}

.ig-handle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--f-display);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text);
    transition: color .3s ease;
}

.ig-handle:hover {
    color: var(--pink);
}

.ig-handle svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--pink);
}

.faces {
    display: flex;
    gap: clamp(.6rem, 1.4vw, 1rem);
    overflow-x: auto;
    padding-bottom: .3rem;
    scrollbar-width: none;
}

.faces::-webkit-scrollbar {
    display: none;
}

.face-item {
    flex: none;
    display: grid;
    justify-items: center;
    gap: .45rem;
    width: clamp(74px, 10vw, 98px);
    text-align: center;
}

.face-ring {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 210deg, #f9a8d4, #ec4899, #7c3aed, #f9a8d4);
    transition: transform .45s var(--spring), box-shadow .4s ease;
}

.face-item:hover .face-ring {
    transform: scale(1.09) rotate(6deg);
    box-shadow: var(--glow-pink);
}

.face-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--canvas);
}

.face-item span {
    font-family: var(--f-display);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.35;
}

.ig-rail {
    display: flex;
    gap: clamp(.75rem, 1.6vw, 1.2rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--pink) transparent;
}

.ig-rail::-webkit-scrollbar {
    height: 4px;
}

.ig-rail::-webkit-scrollbar-track {
    background: var(--hair-soft);
    border-radius: 4px;
}

.ig-rail::-webkit-scrollbar-thumb {
    background: var(--grad-primary);
    border-radius: 4px;
}

.ig-item {
    position: relative;
    flex: 0 0 clamp(200px, 25vw, 280px);
    scroll-snap-align: start;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-lift);
    transition: transform .5s var(--spring), box-shadow .5s var(--ease);
}

.ig-item:hover {
    transform: translateY(-7px) rotate(-1.4deg);
    box-shadow: var(--shadow-photo), var(--glow-pink);
}

.ig-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease);
}

.ig-item:hover img {
    transform: scale(1.07);
}

.ig-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 7, 22, .92) 0%, rgba(11, 7, 22, .3) 44%, transparent 70%);
}

.ig-tag {
    position: absolute;
    z-index: 2;
    left: .95rem;
    right: .95rem;
    bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--f-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.ig-tag svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--pink-light);
}

/* ---------- 17. Famous faces roster ---------- */
.rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .8rem;
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
    border-bottom: 1px solid var(--hair);
}

.rail-title {
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
}

.rail-count {
    font-family: var(--f-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pink);
    white-space: nowrap;
}

/* The roster rails are real scroll containers, not a CSS translate animation.
   script.js advances scrollLeft each frame and wraps it at half the content
   width, which looks identical but means the rail can also be dragged with the
   mouse, flicked on touch, scrolled with a trackpad and reached by keyboard.
   A translated track inside overflow:hidden can do none of that.

   overflow-y stays hidden so the cards' hover lift and glow do not open a
   vertical scrollbar; the vertical padding gives them room instead. */
.talent-marquee {
    display: flex;
    overflow: hidden;
    padding-block: clamp(1.2rem, 2vw, 1.8rem);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    width: 100%;
    position: relative;
}

.talent-track {
    display: flex;
    flex: none;
    gap: clamp(.85rem, 1.6vw, 1.3rem);
    padding-right: clamp(.85rem, 1.6vw, 1.3rem);
    width: max-content;
    will-change: transform;
}

/* Left to right sliding (Influencers rail: data-marquee="right") */
.talent-marquee[data-marquee="right"] .talent-track,
.talent-track.slide-right {
    animation: talentSlideRight 35s linear infinite;
}

/* Right to left sliding (Celebrities rail: data-marquee="left") */
.talent-marquee[data-marquee="left"] .talent-track,
.talent-track.slide-left {
    animation: talentSlideLeft 35s linear infinite;
}

/* Pause smoothly on hover so user can easily view or click profile */
.talent-marquee:hover .talent-track {
    animation-play-state: paused;
}

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

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

/* Images must not become native drag payloads, or the browser starts its own
   image-drag and the rail drag dies on the first pixel. */
.talent-marquee img {
    -webkit-user-drag: none;
    user-select: none;
}

.talent {
    position: relative;
    flex: 0 0 clamp(200px, 22vw, 270px);
    display: block;
    border-radius: 22px;
    overflow: hidden;
    background: var(--canvas-2);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    transition: transform .45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .45s ease, border-color .45s ease;
}

.talent:hover {
    transform: translateY(-6px);
    border-color: rgba(236, 72, 153, 0.45);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6), 0 0 30px rgba(236, 72, 153, 0.25);
}

.talent:hover .talent-photo img {
    transform: scale(1.08);
}

.talent-photo {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.talent-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 16%;
    transition: transform .8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.talent-photo img[src*="dolly"] {
    object-position: 50% 15%;
}

.talent-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9, 5, 18, 0.95) 0%, rgba(9, 5, 18, 0.45) 42%, transparent 70%);
}

.talent-body {
    position: absolute;
    z-index: 2;
    left: 1rem;
    right: 1rem;
    bottom: .95rem;
    display: grid;
    gap: .16rem;
}

.talent-role {
    font-family: var(--f-display);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pink-light);
    line-height: 1.3;
}

.talent-name {
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.4vw, 1.28rem);
    font-weight: 700;
    letter-spacing: -.025em;
    text-transform: uppercase;
    line-height: 1.06;
    color: #fff;
}

.talent-meta {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    margin-top: .28rem;
    font-family: var(--f-body);
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    transition: color .3s ease;
}

.talent-meta svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.talent:hover .talent-meta {
    color: var(--pink-light);
}

.talent::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from 210deg, #f9a8d4, #ec4899, #7c3aed, #f9a8d4);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.talent:hover::after,
.talent:focus-visible::after {
    opacity: 1;
}

/* ---------- 18. Our Work showcase ---------- */
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.work-card {
    position: relative;
    display: grid;
    border-radius: 24px;
    overflow: hidden;
    background: var(--glass);
    border: 1px solid var(--hair);
    backdrop-filter: blur(14px);
    text-align: left;
    cursor: pointer;
    transition: border-color .4s ease, box-shadow .5s var(--ease), transform .5s var(--spring);
}

.work-card:hover {
    transform: translateY(-6px);
    border-color: rgba(236, 72, 153, .45);
    box-shadow: var(--glow-pink);
}

.work-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.work-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease);
}

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

.work-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 7, 22, .8), transparent 62%);
}

/* Play affordance */
.work-media i {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    background: var(--grad-rich);
    box-shadow: var(--glow-pink);
    transition: transform .45s var(--spring);
}

.work-media i::after {
    content: '';
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-left: 15px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.work-card:hover .work-media i {
    transform: scale(1.12);
}

.work-meta {
    display: grid;
    gap: .5rem;
    padding: clamp(1.15rem, 2vw, 1.6rem);
}

.work-meta span {
    font-family: var(--f-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pink);
}

.work-meta h3 {
    font-size: clamp(1.05rem, 1.4vw, 1.28rem);
}

.work-stat {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: .35rem;
    padding-top: .8rem;
    border-top: 1px solid var(--hair-soft);
}

.work-stat b {
    display: block;
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.work-stat small {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- 19. Creator tiers ---------- */
.tier {
    display: grid;
    gap: .9rem;
}

.tier-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.2rem;
    padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1rem, 2vw, 1.5rem);
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    transition: border-color .4s ease, box-shadow .5s var(--ease), transform .4s var(--spring);
}

.tier-row:hover {
    transform: translateX(5px);
    border-color: rgba(236, 72, 153, .45);
    box-shadow: var(--glow-pink);
}

.tier-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--grad-primary);
    box-shadow: var(--glow-pink);
}

.tier-name {
    font-family: var(--f-display);
    font-size: clamp(.95rem, 1.2vw, 1.12rem);
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--text);
}

.tier-range {
    display: block;
    font-family: var(--f-body);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .15rem;
}

.tier-price {
    font-family: var(--f-display);
    font-size: clamp(.92rem, 1.2vw, 1.1rem);
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: right;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

/* ---------- 20. Showreel band with Cinematic Display ---------- */
.section-showreel {
    position: relative;
    padding-top: clamp(4.5rem, 7vw, 6.5rem);
    padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
    overflow: hidden;
}

/* Ambient Wave Background behind video */
.showreel-waves-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.wave-beam-light {
    position: absolute;
    top: 15%;
    left: -15%;
    width: 65%;
    height: 75%;
    background: conic-gradient(from 220deg at 20% 50%, rgba(255, 255, 255, 0.08) 0deg, rgba(236, 72, 153, 0.14) 30deg, transparent 65deg);
    filter: blur(40px);
    transform: rotate(-15deg);
    pointer-events: none;
}

.ambient-sine-waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.92;
}

.sine-line {
    filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.45));
    animation: waveDrift 12s ease-in-out infinite alternate;
}

.line-1 {
    animation-duration: 9s;
}

.line-2 {
    animation-duration: 11s;
    animation-delay: -2s;
}

.line-3 {
    animation-duration: 13s;
    animation-delay: -4s;
}

.line-4 {
    animation-duration: 15s;
    animation-delay: -6s;
}

.line-5 {
    animation-duration: 17s;
    animation-delay: -8s;
}

@keyframes waveDrift {
    0% {
        transform: translateY(0px) scaleY(1);
    }

    50% {
        transform: translateY(12px) scaleY(1.08);
    }

    100% {
        transform: translateY(-8px) scaleY(0.95);
    }
}

.cyber-constellation circle {
    animation: starTwinkle 3s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
    0% {
        opacity: 0.6;
        transform: scale(0.9);
    }

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

.cinematic-screen-stage {
    position: relative;
    max-width: 1060px;
    margin: clamp(2rem, 3.5vw, 3.5rem) auto 0;
    perspective: 1200px;
}

.screen-ambient-glow {
    position: absolute;
    inset: -5%;
    background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.45) 0%, rgba(236, 72, 153, 0.25) 45%, transparent 70%);
    filter: blur(65px);
    z-index: 0;
    pointer-events: none;
    animation: ambientPulse 5s ease-in-out infinite alternate;
}

@keyframes ambientPulse {
    0% {
        opacity: 0.7;
        transform: scale(0.96);
    }

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

.cinematic-screen-housing {
    position: relative;
    z-index: 1;
    border-radius: clamp(22px, 3vw, 34px);
    background: linear-gradient(155deg, #221c3c 0%, #120e24 45%, #080612 100%);
    padding: clamp(8px, 1.2vw, 14px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        0 35px 90px -15px rgba(0, 0, 0, 0.95),
        0 0 60px rgba(139, 92, 246, 0.28),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease;
}

.cinematic-screen-housing:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 45px 110px -15px rgba(0, 0, 0, 0.98),
        0 0 80px rgba(236, 72, 153, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.screen-top-bezel {
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.screen-camera-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2b254d;
    box-shadow: inset 0 0 2px #000, 0 0 8px rgba(168, 85, 247, 0.9);
}

.screen-display-area {
    position: relative;
    border-radius: clamp(14px, 2vw, 22px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000000;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.85);
}

.screen-display-area video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.screen-glass-glare {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 60%, transparent 100%);
    pointer-events: none;
    transform: skewY(-3deg) scale(1.1);
    transform-origin: top left;
}

.screen-bottom-chin {
    padding-top: 8px;
    padding-bottom: 2px;
    text-align: center;
}

.screen-brand-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.2);
}

.reel-tools {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 4;
    display: flex;
    gap: .6rem;
}

.media-btn {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(11, 7, 22, .78);
    backdrop-filter: blur(12px);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: background .3s ease, color .3s ease, transform .4s var(--spring), border-color .3s ease;
}

.media-btn:hover {
    background: var(--grad-rich);
    border-color: transparent;
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
}

.media-btn svg {
    width: 18px;
    height: 18px;
}

.media-btn .ic-play,
.media-btn .ic-pause,
.media-btn .on,
.media-btn .off {
    grid-area: 1 / 1;
}

/* ---------- 21. Stats ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
}

.stat {
    padding-top: clamp(1.2rem, 2.2vw, 1.75rem);
    border-top: 1px solid var(--hair);
}

.stat b {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(2.2rem, 4.8vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat>span {
    display: block;
    margin-top: 1rem;
    font-family: var(--f-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- 22. Marquee ---------- */
.marquee {
    display: flex;
    overflow: hidden;
    padding-block: clamp(1rem, 2.2vw, 1.6rem);
    user-select: none;
}

.marquee-track {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(1.4rem, 3.4vw, 3rem);
    padding-right: clamp(1.4rem, 3.4vw, 3rem);
    animation: marquee 34s linear infinite;
}

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

.marquee-track span {
    font-family: var(--f-display);
    font-size: clamp(1.35rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text);
    transition: color .3s ease;
}

.marquee-track span:nth-child(4n+1) {
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.marquee-track span:hover {
    color: var(--pink-light);
}

.marquee-track i {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--pink);
}

@keyframes marquee {
    to {
        transform: translateX(-100%);
    }
}

/* ---------- 23. Gallery ---------- */
.gallery {
    columns: 3;
    column-gap: clamp(.75rem, 1.4vw, 1.15rem);
}

.gallery figure {
    position: relative;
    margin-bottom: clamp(.75rem, 1.4vw, 1.15rem);
    border-radius: 20px;
    overflow: hidden;
    cursor: zoom-in;
    break-inside: avoid;
    box-shadow: var(--shadow-lift);
    transition: transform .5s var(--spring), box-shadow .5s var(--ease);
}

.gallery figure:hover {
    transform: translateY(-7px) rotate(-1.1deg);
    box-shadow: var(--shadow-photo), var(--glow-pink);
}

.gallery img {
    width: 100%;
    transition: transform .9s var(--ease);
}

.gallery figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 7, 22, .9) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .5s ease;
}

.gallery figcaption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .9rem;
    z-index: 2;
    font-family: var(--f-display);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pink-light);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s var(--ease);
}

.gallery figure:hover img {
    transform: scale(1.07);
}

.gallery figure:hover::after,
.gallery figure:hover figcaption {
    opacity: 1;
}

.gallery figure:hover figcaption {
    transform: translateY(0);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(11, 7, 22, .96);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility .45s ease;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 16px;
    border: 1px solid var(--hair);
    box-shadow: var(--glow-violet);
    transform: scale(.94);
    transition: transform .55s var(--spring);
}

.lightbox.open img {
    transform: scale(1);
}

.lightbox-caption {
    margin-top: 1rem;
    font-family: var(--f-display);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pink-light);
    text-align: center;
}

.lightbox-close,
.lightbox-nav button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--hair);
    border-radius: 50%;
    background: rgba(19, 9, 36, .9);
    color: var(--text);
    cursor: pointer;
    transition: background .3s ease, transform .4s var(--spring);
}

.lightbox-close:hover,
.lightbox-nav button:hover {
    background: var(--grad-rich);
    border-color: transparent;
    transform: scale(1.1);
}

.lightbox-close {
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
}

.lightbox-close svg,
.lightbox-nav svg {
    width: 20px;
    height: 20px;
}

.lightbox-nav .prev {
    left: clamp(.75rem, 3vw, 2rem);
    top: 50%;
    margin-top: -24px;
}

.lightbox-nav .next {
    right: clamp(.75rem, 3vw, 2rem);
    top: 50%;
    margin-top: -24px;
}

/* ---------- 24. Testimonials (infinite marquee) ---------- */
.quotes {
    display: flex;
    overflow: hidden;
    padding-block: .5rem 1.2rem;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.quotes-track {
    display: flex;
    flex: none;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding-right: clamp(1rem, 2vw, 1.75rem);
    animation: quotesSlide var(--dur, 70s) linear infinite;
    will-change: transform;
}

.quotes:hover .quotes-track,
.quotes:focus-within .quotes-track {
    animation-play-state: paused;
}

@keyframes quotesSlide {
    to {
        transform: translateX(-100%);
    }
}

.quote {
    flex: 0 0 min(390px, 80vw);
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: clamp(1.4rem, 2.4vw, 1.9rem);
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 22px;
    backdrop-filter: blur(14px);
    transition: border-color .4s ease, box-shadow .5s var(--ease);
}

.quote:hover {
    border-color: rgba(236, 72, 153, .42);
    box-shadow: var(--glow-pink);
}

.quote-mark {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 2.8rem;
    line-height: .5;
    color: var(--pink);
}

.quote p {
    flex: 1;
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.28;
    text-transform: uppercase;
    color: var(--text);
}

.quote footer {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pink);
}

.slider-controls {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

.slider-controls button {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hair);
    border-radius: 50%;
    background: var(--glass);
    color: var(--text);
    cursor: pointer;
    transition: background .3s ease, color .3s ease, transform .4s var(--spring);
}

.slider-controls button:hover {
    background: var(--grad-rich);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08);
}

.quotes-prev,
.quotes-next {
    flex: none;
}

.slider-controls svg {
    width: 18px;
    height: 18px;
}

/* ---------- 25. Timeline ---------- */
.timeline {
    display: grid;
}

.step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1.1rem, 2.6vw, 2.4rem);
    padding-block: clamp(1.3rem, 2.4vw, 2rem);
    border-top: 1px solid var(--hair);
    transition: border-color .4s ease;
}

.step:last-child {
    border-bottom: 1px solid var(--hair);
}

.step:hover {
    border-top-color: var(--pink);
}

.step-no {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    min-width: 3ch;
}

.step h3 {
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    margin-bottom: .4rem;
}

.step p {
    max-width: 62ch;
    font-size: .94rem;
    color: var(--muted);
}

/* ---------- 26. Accordion ---------- */
.accordion {
    border-top: 1px solid var(--hair);
}

.acc-item {
    border-bottom: 1px solid var(--hair);
}

.acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1rem, 2vw, 1.45rem) 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--f-display);
    font-size: clamp(1.02rem, 1.7vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
    transition: color .3s ease;
}

.acc-trigger:hover {
    color: var(--pink);
}

.acc-trigger .plus {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--hair);
    transition: background .35s ease, transform .4s var(--spring);
}

.acc-trigger:hover .plus {
    background: var(--grad-primary);
    border-color: transparent;
    transform: rotate(90deg);
}

.acc-trigger .plus::before,
.acc-trigger .plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transform: translate(-50%, -50%);
    transition: transform .45s var(--ease), opacity .3s ease;
}

.acc-trigger .plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.acc-trigger[aria-expanded="true"] .plus::after {
    transform: translate(-50%, -50%) rotate(0);
    opacity: 0;
}

.acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .55s var(--ease);
}

.acc-panel>div {
    overflow: hidden;
}

.acc-item.open .acc-panel {
    grid-template-rows: 1fr;
}

.acc-panel p {
    max-width: 68ch;
    padding-bottom: 1.3rem;
    font-size: .94rem;
    color: var(--muted);
}

/* ---------- 27. Forms + dual Brand/Creator switcher ---------- */
.form-wrap {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(1.75rem, 3.5vw, 4rem);
}

/* Tab switcher */
.form-tabs {
    display: inline-flex;
    gap: .3rem;
    padding: .3rem;
    margin-bottom: 1.6rem;
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

.form-tab {
    border: 0;
    background: transparent;
    padding: .68rem 1.35rem;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    transition: background .35s ease, color .3s ease;
}

.form-tab:hover {
    color: var(--text);
}

.form-tab[aria-selected="true"] {
    background: var(--grad-rich);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(236, 72, 153, .6);
}

.form-pane[hidden] {
    display: none;
}

.form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 1.25rem;
}

.field {
    display: grid;
    gap: .3rem;
}

.field.wide {
    grid-column: 1 / -1;
}

.field label {
    font-family: var(--f-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .62rem 0;
    border: 0;
    border-bottom: 1px solid var(--hair);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    transition: border-color .35s ease;
}

.field textarea {
    resize: vertical;
    min-height: 92px;
}

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .2rem center;
    background-size: 16px;
    padding-right: 2rem;
    cursor: pointer;
}

.field select option {
    background: var(--canvas-2);
    color: var(--text);
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(161, 146, 196, .55);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-bottom-color: var(--pink);
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
    border-bottom-color: #f87171;
}

.field .err {
    font-size: .78rem;
    font-weight: 500;
    text-transform: none;
    color: #fca5a5;
    display: none;
}

.field.invalid .err {
    display: block;
}

.form-note {
    grid-column: 1 / -1;
    font-size: .82rem;
    color: var(--muted);
}

.form-status {
    grid-column: 1 / -1;
    display: none;
    gap: .5rem;
    align-items: center;
    padding: .85rem 0;
    border-top: 1px solid var(--pink);
    font-family: var(--f-display);
    font-size: .92rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pink-light);
}

.form-status.show {
    display: flex;
}

/* ---------- 28. Contact details ---------- */
.contact-list {
    display: grid;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: .95rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--hair-soft);
    transition: padding-left .4s var(--ease);
}

.contact-row:hover {
    padding-left: .5rem;
}

.contact-row .ic {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--hair);
    color: var(--pink);
    transition: background .35s ease, color .35s ease, transform .4s var(--spring);
}

.contact-row:hover .ic {
    background: var(--grad-rich);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08) rotate(-8deg);
}

.contact-row .ic svg {
    width: 21px;
    height: 21px;
}

.contact-row small {
    display: block;
    font-family: var(--f-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.contact-row strong {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

.map-frame {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--hair);
    box-shadow: var(--shadow-lift);
}

.map-frame iframe {
    width: 100%;
    height: clamp(280px, 40vw, 420px);
    border: 0;
    display: block;
    /* The embed ships light; invert-and-hue-rotate lands it in the dark palette
       without needing a paid dark-styled map key. */
    filter: invert(.92) hue-rotate(190deg) saturate(1.1) brightness(.95);
}

/* ---------- 29. CTA band ---------- */
.cta-band {
    position: relative;
    text-align: center;
    padding-block: clamp(3.5rem, 7vw, 6.75rem);
    overflow: hidden;
}

.cta-band .emblem {
    width: clamp(118px, 13vw, 168px);
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    box-shadow: none;
    animation: float 6.5s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-18px) rotate(2deg);
    }
}

.cta-band .lead {
    margin-inline: auto;
    text-align: center;
}

/* ---------- 30. Footer ---------- */
.footer {
    position: relative;
    color: var(--text-soft);
    background:
        radial-gradient(56% 70% at 96% 2%, rgba(139, 92, 246, .26), transparent 60%),
        radial-gradient(52% 64% at 2% 98%, rgba(236, 72, 153, .22), transparent 62%),
        linear-gradient(180deg, #0f0820 0%, #0b0716 100%);
    border-top: 1px solid var(--hair);
    padding-top: clamp(2.75rem, 5.5vw, 5rem);
    overflow: hidden;
}

/* Ambient motion banner behind the footer */
.footer-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.footer-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
    filter: blur(5px) saturate(1.3);
    transform: scale(1.1);
}

.footer-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 7, 22, .82) 0%, rgba(11, 7, 22, .94) 100%);
}

.footer .shell {
    position: relative;
    z-index: 1;
}

.footer-shout {
    padding-bottom: clamp(2rem, 4vw, 3.25rem);
    border-bottom: 1px solid var(--hair);
}

.footer-shout h2 {
    font-size: clamp(2.6rem, 9vw, 6.8rem);
    line-height: .9;
    letter-spacing: -.045em;
    margin-bottom: 1rem;
}

.footer-mail {
    display: inline-block;
    font-family: var(--f-display);
    font-size: clamp(1.15rem, 3.6vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--text);
    border-bottom: 2px solid var(--pink);
    padding-bottom: .1rem;
    transition: color .35s ease, border-color .35s ease;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.footer-mail:hover {
    color: var(--pink-light);
    border-bottom-color: var(--violet-light);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
    padding-block: clamp(2rem, 4vw, 3.25rem);
}

.footer-brand img {
    width: clamp(160px, 18vw, 196px);
    margin-bottom: 1.2rem;
    animation: logoFloat 4.4s ease-in-out infinite;
    will-change: transform;
}

.footer-brand p {
    font-size: .93rem;
    max-width: 32ch;
    color: var(--muted);
}

.footer h5 {
    font-family: var(--f-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 1.1rem;
}

.footer-links {
    display: grid;
    gap: .55rem;
}

.footer-links a {
    font-size: .93rem;
    font-weight: 500;
    color: var(--text-soft);
    transition: color .3s ease, padding-left .35s var(--ease);
}

.footer-links a:hover {
    color: var(--pink-light);
    padding-left: .4rem;
}

.socials {
    display: flex;
    gap: .5rem;
    margin-top: 1.2rem;
}

.socials a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--hair);
    color: var(--text);
    transition: background .35s ease, color .35s ease, transform .4s var(--spring);
}

.socials a:hover {
    background: var(--grad-rich);
    border-color: transparent;
    color: #fff;
    transform: translateY(-4px) scale(1.06);
}

.socials svg {
    width: 19px;
    height: 19px;
}

.footer-script {
    text-align: center;
    padding-bottom: .5rem;
}

/* Glowing wordmark closing the page */
.footer-mega {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(3rem, 17vw, 13rem);
    font-weight: 700;
    line-height: .82;
    letter-spacing: -.045em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    background-image: linear-gradient(180deg, rgba(249, 168, 212, .3) 0%, rgba(124, 58, 237, .1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
    pointer-events: none;
    margin-bottom: -.12em;
    padding-top: .5rem;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.2rem;
    border-top: 1px solid var(--hair-soft);
    font-size: .82rem;
    font-weight: 500;
    color: var(--muted);
}

.footer-bottom a:hover {
    color: var(--pink-light);
}

/* ---------- 31. Floating actions ---------- */
.floats {
    position: fixed;
    right: clamp(1.2rem, 2.5vw, 2rem);
    bottom: clamp(1.2rem, 2.5vw, 2rem);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.float-btn {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s ease, opacity .35s ease, visibility .35s ease;
}

.float-btn svg {
    width: 24px;
    height: 24px;
}

.float-btn:hover {
    transform: scale(1.12) translateY(-3px);
}

.float-btn.wa {
    background: linear-gradient(140deg, #25D366, #128C7E);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45), 0 0 15px rgba(37, 211, 102, .25);
}

.float-btn.wa:hover {
    box-shadow: 0 12px 32px rgba(37, 211, 102, .65), 0 0 25px rgba(37, 211, 102, .4);
}

.float-btn.top {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: #ffffff;
    box-shadow: 0 8px 26px rgba(236, 72, 153, .55), 0 0 20px rgba(139, 92, 246, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.9);
}

.float-btn.top svg {
    stroke: #ffffff;
    stroke-width: 2.6;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.float-btn.top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.float-btn.top:hover {
    background: linear-gradient(135deg, #f43f5e 0%, #a855f7 100%);
    box-shadow: 0 12px 34px rgba(236, 72, 153, .8), 0 0 30px rgba(168, 85, 247, .6);
    transform: scale(1.14) translateY(-4px);
}

/* ---------- 32. Motion layer ---------- */
.confetti {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1300;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    border: 1px solid var(--pink);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease, width .3s var(--spring), height .3s var(--spring),
        margin .3s var(--spring), background .3s ease, border-color .3s ease;
    will-change: transform;
}

.cursor.show {
    opacity: 1;
}

.cursor.grow {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    background: rgba(236, 72, 153, .12);
    border-color: var(--violet-light);
}

[data-split] .ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(.5em) rotate(6deg);
    transition: opacity .5s var(--ease), transform .7s var(--spring);
    transition-delay: calc(var(--ci) * 26ms);
    will-change: transform;
}

[data-split] .sp {
    display: inline-block;
    width: .3em;
}

[data-split].in .ch {
    opacity: 1;
    transform: none;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .85s var(--ease), transform .85s var(--ease);
    transition-delay: var(--d, 0ms);
}

[data-reveal="left"] {
    transform: translateX(-36px);
}

[data-reveal="right"] {
    transform: translateX(36px);
}

[data-reveal="zoom"] {
    transform: scale(.93);
}

[data-reveal="pop"] {
    transform: scale(.72) rotate(-6deg);
    transition: opacity .6s var(--ease), transform .8s var(--spring);
}

/* Upward wipe for gradient-filled headings, where per-character splitting
   would break the background-clip fill. */
[data-reveal="mask"] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 105% 0);
    transition: clip-path 1s var(--ease);
    transition-delay: var(--d, 0ms);
}

[data-reveal="mask"].in {
    clip-path: inset(0 0 -15% 0);
}

[data-reveal].in {
    opacity: 1;
    transform: none;
}

.magnetic {
    transform: translate(var(--mx, 0), var(--my, 0));
}

[data-tilt] {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
}

[data-parallax] {
    transform: translate3d(0, var(--py, 0), 0);
    will-change: transform;
}

.sticker {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: .62rem 1.05rem;
    border-radius: 999px;
    background: var(--grad-rich);
    color: #fff;
    font-family: var(--f-display);
    font-size: clamp(.68rem, 1vw, .84rem);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .7), var(--glow-pink);
    transform: translateY(var(--py, 0)) rotate(var(--rot, -8deg));
    animation: wobble 5s ease-in-out infinite;
}

.sticker.coral {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
}

.sticker.mint {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}

.sticker.white {
    background: rgba(255, 255, 255, .95);
    color: var(--violet-deep);
}

/* The scroll offset (--py, written by script.js) is folded into the keyframes:
   an animated transform beats a static one, so declaring both separately would
   silently drop the parallax. */
@keyframes wobble {

    0%,
    100% {
        transform: translateY(var(--py, 0)) rotate(var(--rot, -8deg));
    }

    50% {
        transform: translateY(calc(var(--py, 0px) - 10px)) rotate(calc(var(--rot, -8deg) * -.6));
    }
}

.float-y {
    animation: float 7s ease-in-out infinite;
}

/* ---------- 33. Responsive ---------- */
@media (max-width: 1240px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

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

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

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

@media (max-width: 1080px) {
    :root {
        --nav-h: 76px;
    }

    .nav-menu,
    .nav-cta .btn {
        display: none;
    }

    .burger {
        display: block;
    }

    .hero {
        min-height: auto;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .cine-wrap {
        max-width: 420px;
        margin-inline: auto;
        order: -1;
    }

    .slide-split {
        grid-template-columns: 1fr;
    }

    .slide-split .slide-copy {
        position: static;
    }

    .gallery {
        columns: 2;
    }

    .form-wrap {
        grid-template-columns: 1fr;
    }

    .cursor {
        display: none;
    }

    /* Side reveals hold a ±36px X offset until they fire, which below desktop
       is wider than the gutter and drags the document sideways. Body clips it
       so no scrollbar shows, but the element still gets cut. Reveal on Y only. */
    [data-reveal="left"],
    [data-reveal="right"] {
        transform: translateY(28px);
    }
}

@media (max-width: 720px) {
    :root {
        --nav-h: 68px;
    }

    .brand-word {
        font-size: 1.18rem;
    }

    .nav-icons {
        display: none;
    }

    .hero-pillars {
        gap: .9rem;
    }

    .hero-pillar {
        flex: 1 1 100%;
    }

    .offer,
    .offer.two {
        grid-template-columns: 1fr;
    }

    .gallery {
        columns: 1;
    }

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

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

    .goal-pill {
        max-width: none;
    }

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

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

    .step {
        grid-template-columns: 1fr;
        gap: .4rem;
    }

    .watermark {
        font-size: 13rem;
    }

    /* Stickers overhang the photo, and there is no room for that on a phone */
    .sticker {
        display: none;
    }

    .tier-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tier-price {
        grid-column: 2;
        text-align: left;
    }

    .form-tabs {
        width: 100%;
    }

    .form-tab {
        flex: 1;
        padding-inline: .6rem;
    }
}

@media (max-width: 420px) {
    .btn {
        --btn-px: 1.4rem;
        font-size: .76rem;
    }

    .hero-actions .btn {
        width: 100%;
    }
}

@media (min-width: 1700px) {
    :root {
        --shell: 1400px;
    }
}

/* ---------- 34. Motion / print preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    [data-reveal],
    [data-split] .ch {
        opacity: 1;
        transform: none;
        clip-path: none;
    }

    .cine-slide img {
        transform: none;
    }

    .confetti,
    .cursor {
        display: none;
    }

    /* The auto-drifting rails are handed back as plain scrollers at the very
       end of this file — section 36. It has to live after section 35, because
       the rail containers are (re)defined there and would otherwise win on
       source order and keep their overflow:hidden. */
}

@media print {

    body::before,
    .nav,
    .floats,
    .preloader,
    .reel,
    .confetti,
    .hero-video,
    .footer-video-wrap,
    .ui-circle-bg,
    .stories-cloud {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }
}

/* ==========================================================================
   35. COMPONENTS FOR THE REBUILT MARKUP
   These match the class names actually used in the pages (hero badge, trust
   banner, background circles, swipe deck, stories clouds, work cards,
   testimonial marquee, creator tiers, CEO orbit, dual-role form toggle,
   footer motion banner).
   ========================================================================== */

/* ---------- 35a. Hero ---------- */
/* The hero is a single column now — no photo stack beside the copy. */
.hero-inner {
    grid-template-columns: minmax(0, 1fr);
}

.hero-copy {
    max-width: 880px;
}

.hero-badge-wrap {
    margin-bottom: 1.15rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1.15rem;
    border-radius: 999px;
    background: rgba(19, 9, 36, .8);
    border: 1px solid rgba(236, 72, 153, .4);
    backdrop-filter: blur(14px);
    font-family: var(--f-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ffd6eb;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .45), 0 0 16px rgba(236, 72, 153, .22);
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: var(--glow-pink);
    animation: livePulse 1.8s ease-in-out infinite;
}

.hero-main-title {
    font-family: var(--f-display);
    font-size: clamp(2.2rem, 5.6vw, 4.45rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 1.15rem;
    text-shadow: 0 3px 24px rgba(0, 0, 0, .85), 0 1px 4px rgba(0, 0, 0, .9);
}

.hero-main-title .gold-solid {
    filter: drop-shadow(0 2px 14px rgba(236, 72, 153, .55));
}

.hero-lead-text {
    max-width: 64ch;
    font-size: clamp(1.02rem, .5vw + .9rem, 1.18rem);
    line-height: 1.65;
    color: #f1ecfc;
    font-weight: 450;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .9);
}

.hero-lead-text strong {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(236, 72, 153, .45);
}

.hero-btn-main {
    box-shadow: 0 16px 36px -12px rgba(236, 72, 153, .66), var(--glow-violet);
}

.btn-ghost-glass {
    color: var(--text);
    background: var(--glass);
    border: 1px solid var(--hair);
    backdrop-filter: blur(12px);
}

.btn-ghost-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--grad-primary);
    transform: translateY(101%);
    transition: transform .5s var(--ease);
}

.btn-ghost-glass:hover {
    color: #fff;
    border-color: transparent;
}

.btn-ghost-glass:hover::before {
    transform: translateY(0);
}

/* ---------- 35b. Trust banner ---------- */
.trust-banner {
    position: relative;
    padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.trust-banner::before {
    display: none;
}

.trust-title {
    text-align: center;
    font-family: var(--f-display);
    font-size: clamp(.76rem, 1.2vw, .88rem);
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #431438;
    margin-bottom: 1.6rem;
    position: relative;
    z-index: 1;
}

.trust-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.75rem);
}

/* ---------- 35c. Background circles (influencer.in style) ---------- */
.ui-circle-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.circle-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--hair);
    animation: orbitSpin var(--spin, 38s) linear infinite;
}

/* The travelling glow node that makes the ring read as motion, not decoration */
.circle-ring::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: var(--glow-pink);
}

.ring-1 {
    width: clamp(300px, 34vw, 480px);
    aspect-ratio: 1;
    top: -12%;
    right: -8%;
}

.ring-2 {
    width: clamp(200px, 22vw, 320px);
    aspect-ratio: 1;
    bottom: -14%;
    left: -6%;
    --spin: 30s;
    animation-direction: reverse;
    border-color: rgba(139, 92, 246, .22);
}

.ring-2::after {
    background: var(--violet-light);
    box-shadow: var(--glow-violet);
}

.ring-3 {
    width: clamp(260px, 30vw, 420px);
    aspect-ratio: 1;
    top: 8%;
    left: -10%;
    --spin: 44s;
}

.pulse-node {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 72, 153, .24) 0%, rgba(139, 92, 246, .12) 46%, transparent 70%);
    animation: pulseGlow 7s ease-in-out infinite;
}

.n1 {
    width: clamp(240px, 28vw, 380px);
    aspect-ratio: 1;
    top: 18%;
    right: 6%;
}

.n2 {
    width: clamp(220px, 26vw, 340px);
    aspect-ratio: 1;
    bottom: 10%;
    right: -4%;
    animation-delay: -3s;
}

/* ---------- 35d. Swipe deck (Who We Are) ---------- */
.swipe-hint {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.4rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--hair);
    font-family: var(--f-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pink-light);
}

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

.swipe-track {
    display: flex;
    gap: clamp(.9rem, 1.8vw, 1.4rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--pink) transparent;
}

.swipe-track::-webkit-scrollbar {
    height: 4px;
}

.swipe-track::-webkit-scrollbar-track {
    background: var(--hair-soft);
    border-radius: 4px;
}

.swipe-track::-webkit-scrollbar-thumb {
    background: var(--grad-primary);
    border-radius: 4px;
}

/* Each card is also an .offer-item, so the hairline-row look is overridden
   here into a self-contained glass panel. */
.swipe-card {
    flex: 0 0 min(310px, 76vw);
    scroll-snap-align: start;
    padding: clamp(1.3rem, 2.2vw, 1.75rem);
    border-top: 0;
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 22px;
    backdrop-filter: blur(14px);
    transition: border-color .4s ease, box-shadow .5s var(--ease), transform .5s var(--spring);
}

.swipe-card:hover {
    transform: translateY(-6px);
    border-top: 0;
    border-color: rgba(236, 72, 153, .45);
    box-shadow: var(--glow-pink);
}

/* ---------- 35e. Stories showcase ---------- */
.stories-showcase {
    position: relative;
    padding-block: clamp(4rem, 8vw, 7.5rem);
    overflow: hidden;
    border-block: 1px solid var(--hair-soft);
    background: var(--grad-band);
}

.stories-container {
    position: relative;
    max-width: min(1480px, 95vw);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.18fr minmax(320px, 1fr) 1.18fr;
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
}

.stories-cloud {
    position: relative;
    min-height: clamp(540px, 60vh, 640px);
    width: 100%;
}

/* Explicit column placement so the clouds cannot swap sides */
.stories-cloud-left {
    grid-column: 1;
}

.stories-cloud-right {
    grid-column: 3;
}

.story-card {
    position: absolute;
    width: clamp(96px, 36%, 136px);
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
    transform: rotate(var(--rot, 0deg));
    animation: storyFloat 8s ease-in-out infinite;
    transition: transform .45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .45s ease, border-color .45s ease;
}

.story-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 16%;
    transition: transform .7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.story-card img[src*="dolly"] {
    object-position: 50% 15%;
}

.story-card:hover {
    z-index: 10;
    border-color: rgba(236, 72, 153, 0.65);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.75), 0 0 32px rgba(236, 72, 153, 0.4);
}

.story-card:hover img {
    transform: scale(1.1);
}

@keyframes storyFloat {

    0%,
    100% {
        transform: rotate(var(--rot, 0deg)) translateY(0);
    }

    50% {
        transform: rotate(var(--rot, 0deg)) translateY(-16px);
    }
}

/* Left Cloud (Influencers) - Spacious 5-point Formation with Zero Clutter */
.card-l1 {
    top: 0%;
    left: 0%;
    --rot: -8deg;
    animation-delay: 0s;
}

.card-l2 {
    top: 2%;
    right: 4%;
    --rot: 7deg;
    animation-delay: -1.6s;
}

.card-l3 {
    top: 36%;
    left: 32%;
    --rot: -4deg;
    animation-delay: -3.2s;
}

.card-l4 {
    bottom: 0%;
    left: 0%;
    --rot: 6deg;
    animation-delay: -4.8s;
}

.card-l5 {
    bottom: 2%;
    right: 4%;
    --rot: -6deg;
    animation-delay: -6.4s;
}

/* Right Cloud (Celebrities) - Spacious 5-point Formation with Zero Clutter */
.card-r1 {
    top: 2%;
    left: 4%;
    --rot: -7deg;
    animation-delay: -.8s;
}

.card-r2 {
    top: 0%;
    right: 0%;
    --rot: 8deg;
    animation-delay: -2.4s;
}

.card-r3 {
    top: 36%;
    right: 32%;
    --rot: 5deg;
    animation-delay: -4s;
}

.card-r4 {
    bottom: 2%;
    left: 4%;
    --rot: 6deg;
    animation-delay: -5.6s;
}

.card-r5 {
    bottom: 0%;
    right: 0%;
    --rot: -7deg;
    animation-delay: -7.2s;
}

.stories-center-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.stories-number {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stories-heading {
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.03em;
    text-transform: uppercase;
    line-height: 1.02;
    color: var(--text);
    margin-top: .7rem;
}

.stories-description {
    max-width: 46ch;
    margin: 1rem auto 0;
    font-size: clamp(.96rem, .5vw + .84rem, 1.08rem);
    color: var(--text-soft);
}

.stories-cta-wrap {
    margin-top: 1.75rem;
}

.btn-stories-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .95rem 2.2rem;
    border-radius: 999px;
    background: var(--grad-rich);
    background-size: 210% 100%;
    color: #fff;
    font-family: var(--f-display);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 14px 32px -12px rgba(236, 72, 153, .62);
    transition: transform .4s var(--spring), box-shadow .4s var(--ease), background-position .6s var(--ease);
}

.btn-stories-pill:hover {
    transform: translateY(-3px);
    background-position: 100% 50%;
    box-shadow: 0 20px 44px -12px rgba(236, 72, 153, .74), var(--glow-violet);
}

/* ---------- 35f. Roster CTA ---------- */
.hire-talent-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.6rem, 3vw, 2.5rem);
}

/* ---------- 35g. Work showcase ---------- */
.work-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.work-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease);
}

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

.work-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 7, 22, .82), transparent 62%);
}

.work-play-btn {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--grad-rich);
    color: #fff;
    box-shadow: var(--glow-pink);
    transition: transform .45s var(--spring);
}

.work-play-btn svg {
    width: 20px;
    height: 20px;
    margin-left: 3px;
}

.work-card:hover .work-play-btn {
    transform: scale(1.12);
}

.work-body {
    display: grid;
    gap: .5rem;
    padding: clamp(1.1rem, 2vw, 1.55rem);
}

.work-tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.work-tag {
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(236, 72, 153, .16);
    border: 1px solid var(--hair);
    font-family: var(--f-display);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pink-light);
}

.work-brand {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.work-title {
    font-family: var(--f-display);
    font-size: clamp(1.02rem, 1.35vw, 1.24rem);
    font-weight: 700;
    letter-spacing: -.025em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--text);
}

.work-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: .4rem;
    padding-top: .8rem;
    border-top: 1px solid var(--hair-soft);
}

.work-metric-item b {
    display: block;
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.work-metric-item span {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- 35h. Testimonial marquee ---------- */
.quotes-marquee-wrap {
    display: flex;
    overflow: hidden;
    padding-block: .5rem 1.2rem;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.quotes-marquee-wrap:hover .quotes-track,
.quotes-marquee-wrap:focus-within .quotes-track {
    animation-play-state: paused;
}

.quote-card {
    flex: 0 0 min(390px, 80vw);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: clamp(1.35rem, 2.2vw, 1.85rem);
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 22px;
    backdrop-filter: blur(14px);
    transition: border-color .4s ease, box-shadow .5s var(--ease);
}

.quote-card:hover {
    border-color: rgba(236, 72, 153, .45);
    box-shadow: var(--glow-pink);
}

.quote-text {
    flex: 1;
    font-family: var(--f-display);
    font-size: clamp(.98rem, 1.2vw, 1.12rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--text);
}

.quote-author {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pink);
}

/* ---------- 35i. Creator tiers ---------- */
/* 210px is chosen so all five tiers fit on one desktop row — the ladder reads
   as a single progression rather than four plus an orphan — while auto-fit
   still steps down to three and two columns on narrower screens. */
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.tier-card {
    display: grid;
    gap: .45rem;
    align-content: start;
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 22px;
    backdrop-filter: blur(14px);
    transition: border-color .4s ease, box-shadow .5s var(--ease), transform .5s var(--spring);
}

.tier-card:hover {
    transform: translateY(-6px);
    border-color: rgba(236, 72, 153, .45);
    box-shadow: var(--glow-pink);
}

.tier-badge {
    justify-self: start;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: var(--grad-primary);
    font-family: var(--f-display);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: .3rem;
}

.tier-followers {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* .offer-desc carries grid-column:2 because it normally sits in the two-column
   .offer-item row. Reused inside a tier card — a single-column grid — that
   placement conjures a second implicit column and splits the card in half.
   Hand the description back to normal flow. */
.tier-card .offer-desc {
    grid-column: auto;
}

.tier-card .tier-price {
    text-align: left;
    margin-top: .5rem;
    padding-top: .7rem;
    border-top: 1px solid var(--hair-soft);
    white-space: normal;
}

/* ---------- 35j. Founder Header & Modern Bento UGC Gallery ---------- */
.founder-header-block {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 2.5vw, 3rem);
    align-items: center;
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
    margin-bottom: clamp(2rem, 3.5vh, 3rem);
}

.founder-header-left .founder-name {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-top: 0.15rem;
}

.founder-header-left .founder-role {
    font-family: var(--f-display);
    font-size: clamp(0.78rem, 1.1vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pink);
    margin-top: 0.3rem;
}

.founder-header-right .pullquote {
    display: flex;
    gap: 0.75rem;
    margin-top: 0;
}

.founder-header-right .pullquote blockquote {
    font-size: clamp(0.92rem, 1.15vw, 1.05rem);
    line-height: 1.38;
}

.founder-header-right .lead {
    font-size: clamp(0.82rem, 0.95vw, 0.9rem);
    line-height: 1.45;
    margin-top: 0.35rem;
}

.founder-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Bento UGC Showcase Grid */
.bento-ugc-showcase {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.5vw, 1.6rem);
    width: 100%;
}

.bento-ugc-row {
    display: flex;
    gap: clamp(1rem, 1.5vw, 1.6rem);
    width: 100%;
}

/* Individual Bento Card */
.bento-ugc-card {
    position: relative;
    border-radius: clamp(18px, 2.2vw, 28px);
    overflow: hidden;
    background: #0d0a1a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.5), 0 0 25px rgba(139, 92, 246, 0.08);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
    cursor: pointer;
}

.bento-ugc-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 16%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-ugc-card.card-wide-1 img {
    object-position: center 14%;
}

.bento-ugc-card.card-wide-2 img {
    object-position: center 10%;
}

.bento-ugc-card.card-duo-1 img {
    object-position: center 18%;
}

.bento-ugc-card.card-tall-1 img,
.bento-ugc-card.card-tall-2 img {
    object-position: center 12%;
}

.bento-ugc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 35px rgba(236, 72, 153, 0.25);
    border-color: rgba(255, 255, 255, 0.28);
}

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

/* Row 1 Proportions (4 Cards) */
.card-tall-1 {
    flex: 1 1 20%;
    min-height: 280px;
    aspect-ratio: 3.5 / 4.5;
}

.card-wide-1 {
    flex: 1.7 1 35%;
    min-height: 280px;
    aspect-ratio: 16 / 10.5;
}

.card-med-1 {
    flex: 1.25 1 25%;
    min-height: 280px;
    aspect-ratio: 4 / 4.5;
}

.card-tall-2 {
    flex: 1 1 20%;
    min-height: 280px;
    aspect-ratio: 3.5 / 4.5;
}

/* Row 2 Proportions (3 Cards) */
.card-duo-1 {
    flex: 1.35 1 29%;
    min-height: 280px;
    aspect-ratio: 16 / 11;
}

.card-square-1 {
    flex: 1.1 1 23%;
    min-height: 280px;
    aspect-ratio: 1 / 1;
}

.card-wide-2 {
    flex: 2.2 1 48%;
    min-height: 280px;
    aspect-ratio: 16 / 9;
}

/* Bento Overlays & Badges */
.bento-top-overlay {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    right: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    pointer-events: none;
}

.bento-bottom-overlay {
    position: absolute;
    bottom: 1.1rem;
    left: 1.1rem;
    right: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 3;
    pointer-events: none;
}

.bento-top-overlay.flex-end,
.bento-bottom-overlay.flex-end {
    justify-content: flex-end;
}

.bento-top-overlay>*,
.bento-bottom-overlay>* {
    pointer-events: auto;
}

.bento-circle-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 5px;
}

.bento-circle-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bento-circle-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(12, 10, 24, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bento-circle-btn:hover {
    background: #ffffff;
    color: #0b0914;
    transform: scale(1.1);
}

.bento-card-caption {
    display: flex;
    flex-direction: column;
    background: rgba(10, 8, 20, 0.7);
    backdrop-filter: blur(10px);
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.bento-card-caption strong {
    font-size: 0.82rem;
    color: #ffffff;
    font-weight: 700;
}

.bento-card-caption span {
    font-size: 0.68rem;
    color: var(--muted);
}

.bento-pill-lime {
    background: #86efac;
    color: #064e3b;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.45);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bento-pill-lime:hover {
    transform: scale(1.06);
    background: #4ade80;
    color: #022c22;
}

.bento-badge-live {
    background: #ef4444;
    color: #ffffff;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.65);
}

.badge-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    animation: livePulse 1.4s ease-in-out infinite;
}

@keyframes livePulse {

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

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

.bento-center-action {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}

.bento-play-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    color: #111111;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.bento-play-circle svg {
    margin-left: 2px;
}

.bento-play-circle:hover {
    transform: scale(1.18);
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.45);
}

.bento-float-reactions {
    display: flex;
    gap: 0.3rem;
    background: rgba(12, 10, 24, 0.65);
    backdrop-filter: blur(10px);
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.bento-metric-pill {
    background: rgba(10, 8, 22, 0.78);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.55rem 0.95rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.metric-num {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    font-family: var(--f-display);
}

.metric-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bento-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(10, 8, 22, 0.75);
    backdrop-filter: blur(12px);
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bento-brand-badge img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.bento-pill-white {
    background: #ffffff;
    color: #0b0914;
    padding: 0.48rem 1.05rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    transition: all 0.3s ease;
}

.bento-pill-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 255, 255, 0.35);
}

.bento-quick-tools {
    display: inline-flex;
    gap: 0.5rem;
    background: rgba(12, 10, 24, 0.7);
    backdrop-filter: blur(10px);
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.95rem;
}

.bento-card-glass-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(10, 8, 22, 0.6) 100%);
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 980px) {
    .founder-header-block {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .bento-ugc-row {
        flex-wrap: wrap;
    }

    .card-tall-1,
    .card-tall-2 {
        flex: 1 1 calc(50% - 0.75rem);
        min-height: 240px;
    }

    .card-wide-1,
    .card-wide-2 {
        flex: 1 1 100%;
        min-height: 240px;
    }

    .card-med-1,
    .card-duo-1,
    .card-square-1 {
        flex: 1 1 calc(50% - 0.75rem);
        min-height: 240px;
    }
}

@media (max-width: 580px) {

    .card-tall-1,
    .card-tall-2,
    .card-med-1,
    .card-duo-1,
    .card-square-1 {
        flex: 1 1 100%;
        min-height: 260px;
    }
}

/* ---------- 35k. Dual Brand / Creator form toggle ---------- */
.form-toggle-wrap {
    grid-column: 1 / -1;
    display: inline-flex;
    gap: .3rem;
    padding: .3rem;
    margin-bottom: .5rem;
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

.form-toggle-btn {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .68rem 1.3rem;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .35s ease, color .3s ease, box-shadow .35s ease;
}

.form-toggle-btn:hover {
    color: var(--text);
}

.form-toggle-btn.active {
    background: var(--grad-rich);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(236, 72, 153, .6);
}

/* ---------- 35l. Footer motion banner ---------- */
.footer-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.footer-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
    filter: blur(5px) saturate(1.3);
    transform: scale(1.1);
}

.footer-video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 7, 22, .84) 0%, rgba(11, 7, 22, .95) 100%);
}

/* ---------- 35m. Responsive for the above ---------- */
@media (max-width: 1080px) {
    .stories-container {
        grid-template-columns: 1fr;
    }

    /* The clouds are decorative duplicates of the roster rails and there is no
       room to scatter them on a narrow screen. */
    .stories-cloud {
        display: none;
    }

    .ceo-orbit-stage {
        width: min(360px, 80vw);
    }
}

@media (max-width: 720px) {
    .hero-main-title {
        font-size: clamp(1.9rem, 8.4vw, 2.6rem);
    }

    .trust-grid {
        gap: .9rem 1.4rem;
    }

    .trust-item {
        font-size: .92rem;
    }

    .form-toggle-wrap {
        width: 100%;
    }

    .form-toggle-btn {
        padding-inline: .5rem;
        font-size: .72rem;
    }

    .work-metrics {
        gap: .9rem;
    }
}

/* ==========================================================================
   36. Reduced motion — infinite rails
   Must come after section 35, which is where the rail containers are defined;
   placed any earlier it loses on source order. Every rail here is a container
   with overflow:hidden whose content is only ever brought into view by a CSS
   animation. Section 34 switches those animations off, which on its own
   strands the rest of the content with no way to reach it: 925px of
   testimonials, 522px of the roster, 2033px of the service strip. Handing the
   containers back as ordinary horizontal scrollers keeps all of it reachable.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    .marquee,
    .talent-marquee,
    .quotes-marquee-wrap {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .marquee-track,
    .talent-track,
    .quotes-track {
        animation: none;
        transform: none;
    }
}

/* ==========================================================================
   37. Campaign reel lightbox
   Reuses the .lightbox shell (backdrop, close button, caption) and adds the
   video stage. The work-card play affordance is a real <button>, so it also
   needs the default button chrome stripped back off.
   ========================================================================== */
.work-play-btn {
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.work-play-btn:focus-visible {
    outline: 2px solid var(--pink-light);
    outline-offset: 3px;
}

.lightbox-stage {
    display: grid;
    justify-items: center;
    width: min(1040px, 100%);
}

.lightbox video {
    width: 100%;
    max-height: 78vh;
    border-radius: 16px;
    border: 1px solid var(--hair);
    box-shadow: var(--glow-violet), var(--shadow-photo);
    background: #000;
    transform: scale(.94);
    transition: transform .55s var(--ease);
}

.lightbox.open video {
    transform: scale(1);
}

/* ---------- 30. Client Logos Marquee ---------- */
.trust-banner {
    padding-block: clamp(3.5rem, 5vw, 5rem);
    position: relative;
    overflow: hidden;
}

.trust-title {
    text-align: center;
    font-family: var(--f-display);
    font-size: clamp(0.72rem, 1vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pink-bright);
    margin-bottom: 0.5rem;
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 0;
    padding: 0 18px;
    height: 56px;
    min-width: 130px;
    flex-shrink: 0;
    border: none;
    box-shadow: none;
    opacity: 0.85;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.client-logo:hover {
    transform: translateY(-2px) scale(1.06);
    opacity: 1;
    border-color: transparent;
    box-shadow: none;
}

.client-logo img {
    height: clamp(38px, 4.2vw, 48px);
    max-height: 50px;
    max-width: 165px;
    width: auto;
    object-fit: contain;
    filter: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.client-logo:hover img {
    transform: scale(1.05);
    filter: none;
}

.fallback-text {
    display: none;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
}

.client-logo:hover .fallback-text {
    color: var(--primary);
}

/* ==========================================================================
   38. Creator Campaigns In Action
   ========================================================================== */
.section-campaigns {
    overflow: hidden;
    padding-block: clamp(4rem, 6vw, 6rem);
    background: var(--canvas);
    position: relative;
    scroll-margin-top: 90px;
}

.campaigns-marquee {
    display: flex;
    overflow: hidden;
    padding-block: 2.5rem 3.2rem;
    margin-top: 1.5rem;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.campaigns-track {
    display: flex;
    flex: none;
    gap: clamp(3.2rem, 5vw, 4.8rem);
    padding-right: clamp(3.2rem, 5vw, 4.8rem);
    animation: campaignsSlide 50s linear infinite;
    will-change: transform;
}

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

@keyframes campaignsSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.reel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(235px, 18.5vw, 275px);
    flex-shrink: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    user-select: none;
}

.reel-card:hover {
    border: none;
    box-shadow: none;
}

.reel-card.audio-active {
    border: none;
    box-shadow: none;
}

.reel-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 28px;
    overflow: hidden;
    background-color: #0b0716;
    box-shadow: 0 12px 30px -6px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
    transform-origin: 50% 0%;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.4s ease;
    will-change: transform;
}

/* Alternating Slow Pendulum Sway */
.reel-card:nth-child(4n + 1) .reel-video-wrap {
    animation: pendulumOdd 5.8s ease-in-out infinite;
    animation-delay: 0s;
}

.reel-card:nth-child(4n + 2) .reel-video-wrap {
    animation: pendulumEven 5.4s ease-in-out infinite;
    animation-delay: -1.35s;
}

.reel-card:nth-child(4n + 3) .reel-video-wrap {
    animation: pendulumOdd 6.2s ease-in-out infinite;
    animation-delay: -2.7s;
}

.reel-card:nth-child(4n + 4) .reel-video-wrap {
    animation: pendulumEven 5.6s ease-in-out infinite;
    animation-delay: -4.05s;
}

@keyframes pendulumOdd {
    0% {
        transform: rotate(-3.5deg);
    }
    50% {
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(-3.5deg);
    }
}

@keyframes pendulumEven {
    0% {
        transform: rotate(3.5deg);
    }
    50% {
        transform: rotate(-3deg);
    }
    100% {
        transform: rotate(3.5deg);
    }
}

.reel-card:hover .reel-video-wrap {
    transform: rotate(0deg) scale(1.04) translateY(-6px) !important;
    animation-play-state: paused !important;
    box-shadow: 0 24px 48px -8px rgba(24, 119, 242, 0.32), 0 8px 24px rgba(0, 0, 0, 0.16);
}

.reel-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
    transition: transform 0.4s ease;
}

/* Floating Circular Platform Tag at Bottom Center of Video */
.reel-platform-badge {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s ease;
}

.reel-card:hover .reel-platform-badge {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.reel-platform-badge svg {
    width: 22px;
    height: 22px;
    color: #1877f2;
}

.reel-platform-badge span {
    display: none;
}

/* Speaker Audio Button */
.reel-audio-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(11, 7, 22, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.reel-audio-btn:hover {
    transform: scale(1.12);
    background: #1877f2;
    border-color: #ffffff;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.6);
}

.reel-audio-btn.is-unmuted {
    background: #1877f2;
    border-color: #ffffff;
    box-shadow: 0 0 16px rgba(24, 119, 242, 0.75);
}

.reel-audio-btn svg {
    width: 16px;
    height: 16px;
}

.audio-waves {
    display: none;
    align-items: center;
    gap: 2px;
    margin-left: 2px;
}

.reel-audio-btn.is-unmuted .audio-waves {
    display: flex;
}

.audio-waves i {
    display: block;
    width: 2px;
    height: 10px;
    background: #ffffff;
    border-radius: 2px;
    animation: waveBounce 0.8s ease-in-out infinite alternate;
}

.audio-waves i:nth-child(2) {
    animation-delay: 0.2s;
    height: 14px;
}

.audio-waves i:nth-child(3) {
    animation-delay: 0.4s;
    height: 8px;
}

@keyframes waveBounce {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1.2); }
}

/* Card Content / Typography */
.reel-content {
    margin-top: 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.reel-title {
    font-family: var(--f-display);
    font-size: clamp(0.88rem, 1.05vw, 1.02rem);
    font-weight: 800;
    color: #ffffff !important;
    margin: 0;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: normal;
    overflow: visible;
}

.reel-note {
    font-size: 0.76rem;
    font-weight: 700;
    color: #be185d;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reel-stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-display);
    font-size: 0.8rem;
    font-weight: 800;
    color: #0052cc;
    margin-top: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 8px;
    width: fit-content;
}

.stats-dot {
    color: #94a3b8;
    font-size: 0.7rem;
}

/* ==========================================================================
   38. Hero — footage-forward layout
   Supersedes the centred hero in sections 9 and 35a. Placed last so it wins
   on source order without having to unpick those earlier definitions.

   The brief: video mostly visible, minimal copy, headline sitting bottom-left
   with the closing phrase in accent colour, and client marks floating over
   the frame.
   ========================================================================== */

/* Anchor content to the bottom-left instead of the centre. */
.hero {
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 100svh;
    padding-top: var(--nav-h);
    padding-bottom: clamp(3.5rem, 8vh, 7rem);
}

.hero-inner {
    max-width: var(--shell);
    align-items: flex-start;
    text-align: left;
}

/* One headline, nothing else. Sentence case rather than the uppercase used
   elsewhere on the site — at this size uppercase fills the corner and stops
   reading as a sentence. */
.hero-main-title {
    max-width: 19ch;
    margin: 0;
    font-family: var(--f-display);
    font-size: clamp(2.15rem, 5.6vw, 4.6rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-transform: none;
    color: #fff;
    /* Cheap insurance for the frames where the footage runs bright behind the
       descenders; the scrim does the heavy lifting. */
    text-shadow: 0 2px 28px rgba(11, 7, 22, .75), 0 1px 3px rgba(11, 7, 22, .5);
}

/* Deliberately a pale gradient. The site's usual violet-to-rose ramp bottoms
   out around #fb7185, which against bright footage dropped the closing phrase
   to roughly 2:1 and made it the least readable thing on the page. Holding
   both stops light keeps the brand colour while staying legible. */
.hero-accent {
    background-image: linear-gradient(96deg, #c084fc 0%, #f472b6 48%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 16px rgba(11, 7, 22, .9)) drop-shadow(0 1px 3px rgba(11, 7, 22, .75));
}

/* ---------- Floating client marks ---------- */
.hero-clients {
    position: absolute;
    inset: calc(var(--nav-h) + 1rem) var(--gutter) auto;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: var(--shell);
    margin-inline: auto;
    height: clamp(150px, 22vh, 230px);
    pointer-events: none;
}

.hero-client {
    position: absolute;
    display: grid;
    place-items: center;
    width: var(--d, 108px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 18px 40px -14px rgba(11, 7, 22, .75), 0 0 0 1px rgba(255, 255, 255, .55);
    animation: heroClientFloat var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
    will-change: transform;
}

.hero-client img {
    width: 66%;
    height: 66%;
    object-fit: contain;
}

@keyframes heroClientFloat {

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

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

/* Scattered rather than evenly spaced, so they read as floating over the
   footage instead of as a logo bar. */
.hc-1 {
    --d: 104px;
    --dur: 7.5s;
    left: 2%;
    top: 34%;
}

.hc-2 {
    --d: 122px;
    --dur: 8.5s;
    --delay: -1.2s;
    left: 21%;
    top: 2%;
}

.hc-3 {
    --d: 96px;
    --dur: 6.8s;
    --delay: -2.4s;
    left: 42%;
    top: 44%;
}

.hc-4 {
    --d: 128px;
    --dur: 9s;
    --delay: -.7s;
    left: 60%;
    top: 4%;
}

.hc-5 {
    --d: 100px;
    --dur: 7.8s;
    --delay: -3.1s;
    right: 2%;
    top: 40%;
}

/* ---------- Minimal navbar ---------- */
/* The icon cluster is gone from the markup; this keeps the CTA hard right and
   the links from drifting into it. */
.nav-cta {
    gap: .9rem;
}

@media (max-width: 1180px) {
    .nav-menu {
        gap: clamp(.9rem, 1.6vw, 1.5rem);
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .hero-clients {
        height: clamp(120px, 18vh, 170px);
    }

    /* Three marks is the most that fits without colliding with the headline. */
    .hc-4,
    .hc-5 {
        display: none;
    }

    .hc-1 {
        --d: 86px;
        left: 1%;
        top: 22%;
    }

    .hc-2 {
        --d: 96px;
        left: 34%;
        top: 0%;
    }

    .hc-3 {
        --d: 82px;
        left: 66%;
        top: 26%;
    }

    .hero-main-title {
        max-width: 24ch;
    }
}

@media (max-width: 720px) {
    .hero {
        padding-bottom: clamp(4.5rem, 12vh, 6rem);
    }

    /* Reserve the right-hand lane occupied by the fixed WhatsApp / to-top
       controls. Without this the last headline line ran under the WhatsApp
       button by a few pixels at 390px wide. */
    .hero-inner {
        padding-right: calc(var(--gutter) + 3.6rem);
    }

    .hero-main-title {
        max-width: none;
        font-size: clamp(1.95rem, 8.6vw, 2.7rem);
    }

    /* Vertical "Scroll" label crowds the headline on a phone. */
    .hero-scroll {
        display: none;
    }

    .hero-clients {
        height: 110px;
    }

    .hc-1 {
        --d: 66px;
        left: 0%;
        top: 16%;
    }

    .hc-2 {
        --d: 74px;
        left: 36%;
        top: 0%;
    }

    .hc-3 {
        --d: 64px;
        left: 72%;
        top: 20%;
    }
}

/* The float is decorative; hold the marks still when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {

    .hero-client,
    .hero-scroll-rail::after {
        animation: none;
    }
}

/* ==========================================================================
   39. Small utilities
   why-influencer-marketing.html / why-velora.html mark up their comparison
   panels with .grid-2 and .card, and index.html centres a rule with .mx-auto,
   but none of the three had a rule anywhere in this stylesheet — so the two
   panels were stacking in one column instead of sitting side by side. The
   panels carry their own colours inline, so .card only needs to supply the
   shared box.
   ========================================================================== */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(1.15rem, 2.2vw, 2rem);
}

.card {
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 20px;
    backdrop-filter: blur(14px);
}

.mx-auto {
    margin-inline: auto;
}

/* ==========================================================================
   40. Section load-in + ambient float
   Two separate effects, on every section of every page:

   1. Load-in — each section fades and floats up as it scrolls into view.
   2. Ambient float — two soft brand-tinted orbs drift slowly behind the
      content, so a section still has motion once it has settled.

   The copy itself is never put into permanent motion; drifting text is hard to
   read and hard to stop looking at. Only the backdrop moves.

   Gated on .has-sectfx, which a tiny inline script in each <head> adds. Two
   reasons it is done that way rather than in plain CSS: with no JS the initial
   hidden state never applies, so the content is simply visible; and because
   the class lands in <head> rather than when script.js runs at the end of
   <body>, sections never flash in before being hidden.
   ========================================================================== */

/* Durations are deliberately short. At the ~1s this started out as, scrolling
   quickly — or following an in-page anchor, since html has scroll-behavior:
   smooth — left the viewport blank while sections caught up. */
.has-sectfx .sect-anim {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(.995);
    transition: opacity .5s var(--ease), transform .66s var(--ease);
    transition-delay: var(--sd, 0ms);
    will-change: opacity, transform;
}

.has-sectfx .sect-anim.is-in {
    opacity: 1;
    transform: none;
}

/* Once settled, drop the transform and the compositor hint entirely. A lingering
   transform on a section would keep acting as a containing block for the sticky
   column in .slide-split, and 45 permanently promoted layers is a real cost. */
.has-sectfx .sect-anim.is-done {
    transform: none;
    will-change: auto;
}

/* ---------- Ambient float layer ---------- */
/* Absolute, so prepending it to a section that is display:flex or display:grid
   (the hero, for one) adds no flex or grid item — it is out of flow. */
.sect-float {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.sect-orb {
    position: absolute;
    width: clamp(210px, 32vw, 500px);
    aspect-ratio: 1;
    border-radius: 50%;
    /* Duration varies per section via --i, set by script.js, so neighbouring
       sections do not drift in lockstep. */
    animation: sectDrift calc(17s + var(--i, 0) * 2.4s) ease-in-out var(--dl, 0s) infinite;
    will-change: transform;
}

/* Negative insets are safe: .sect-float clips them, so nothing widens the page. */
.sect-orb:nth-child(1) {
    top: -10%;
    left: -7%;
    --dl: -2.5s;
    background: radial-gradient(circle,
            rgba(139, 92, 246, .22) 0%,
            rgba(236, 72, 153, .12) 46%,
            transparent 70%);
}

.sect-orb:nth-child(2) {
    right: -8%;
    bottom: -12%;
    --dl: -8s;
    background: radial-gradient(circle,
            rgba(236, 72, 153, .2) 0%,
            rgba(124, 58, 237, .11) 46%,
            transparent 70%);
}

@keyframes sectDrift {

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

    34% {
        transform: translate3d(4%, -6%, 0) scale(1.07);
    }

    67% {
        transform: translate3d(-5%, 5%, 0) scale(.95);
    }
}

/* The campaigns rail is a white section — the orbs read as heavy lilac blooms
   against it at full strength, so they are dialled back there. */
.section-campaigns .sect-orb {
    opacity: .45;
}

@media (prefers-reduced-motion: reduce) {

    /* script.js skips building the orbs at all in this mode; this is belt and
       braces for a preference that flips after load. */
    .sect-orb {
        animation: none;
    }

    .has-sectfx .sect-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   41. CEO orbit — restored
   about.html still carries the .ceo-orbit-stage markup, but the base rules for
   it went missing from this stylesheet; all that was left was the max-width
   override in the responsive block, so the portrait and its four avatars fell
   back to unstyled block flow and the section rendered as a ~2400px column of
   full-bleed photos. These are the base rules put back.

   The ring spins, and each avatar's image counter-spins at the same rate so the
   faces stay upright. Avatars are placed with top/left/right/bottom rather than
   a rotate+translate trick so they keep their positions when the animation is
   switched off under prefers-reduced-motion.
   ========================================================================== */
.ceo-orbit-stage {
    position: relative;
    width: min(440px, 84vw);
    aspect-ratio: 1;
    margin-inline: auto;
}

.ceo-center-card {
    position: absolute;
    inset: 19%;
    z-index: 2;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--hair);
    box-shadow: var(--glow-violet), var(--shadow-lift);
}

.ceo-center-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 14%;
}

.ceo-orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--hair);
    animation: orbitSpin 30s linear infinite;
}

/* Inner guide ring, for depth */
.ceo-orbit-ring::before {
    content: '';
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    border: 1px solid var(--hair-soft);
}

.ceo-orbit-node {
    position: absolute;
    width: clamp(46px, 13%, 68px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--canvas-2);
    box-shadow: none;
}

.ceo-orbit-node img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: orbitSpinRev 30s linear infinite;
}

.ceo-orbit-stage .node-1 {
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
}

.ceo-orbit-stage .node-2 {
    top: 50%;
    right: -5%;
    transform: translateY(-50%);
}

.ceo-orbit-stage .node-3 {
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
}

.ceo-orbit-stage .node-4 {
    top: 50%;
    left: -5%;
    transform: translateY(-50%);
}

/* ==========================================================================
   VISUAL-FIRST INFOGRAPHICS & MEDIA ENHANCEMENTS
   ========================================================================== */

/* ---------- Visual Funnel Banner ---------- */
.visual-funnel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.visual-funnel-step {
    position: relative;
    background: linear-gradient(145deg, rgba(26, 14, 48, 0.7) 0%, rgba(15, 8, 32, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: clamp(1.6rem, 2.5vw, 2.2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s var(--spring), border-color 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
}

.visual-funnel-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--pink), var(--violet-light), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.visual-funnel-step:hover {
    transform: translateY(-6px);
    border-color: rgba(236, 72, 153, 0.4);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(236, 72, 153, 0.15);
}

.visual-funnel-step:hover::before {
    opacity: 1;
}

.funnel-icon-box {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(139, 92, 246, 0.25));
    border: 1px solid rgba(236, 72, 153, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-bottom: 1.2rem;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
}

.funnel-icon-box svg {
    width: 32px;
    height: 32px;
}

.funnel-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--f-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light, #fbbf24);
    margin-bottom: 0.75rem;
}

.funnel-stat-hero {
    font-family: var(--f-display);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #ffffff 30%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.funnel-caption {
    font-family: var(--f-body);
    font-size: 0.92rem;
    color: var(--text-soft);
    line-height: 1.4;
}

/* ---------- 6 Visual Infographic Cards Grid ---------- */
.visual-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 2vw, 1.8rem);
    margin-top: 3rem;
}

.visual-pillar-card {
    position: relative;
    background: linear-gradient(160deg, rgba(23, 11, 42, 0.85) 0%, rgba(13, 7, 26, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    padding: clamp(1.5rem, 2.2vw, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    overflow: hidden;
}

.visual-pillar-card:hover {
    transform: translateY(-6px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 92, 246, 0.2);
}

.pillar-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.pillar-vector-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(139, 92, 246, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.pillar-vector-badge svg {
    width: 26px;
    height: 26px;
}

.pillar-index-num {
    font-family: var(--f-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
}

.pillar-big-metric {
    font-family: var(--f-display);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.pillar-big-metric span.accent-highlight {
    background: linear-gradient(135deg, #f472b6, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pillar-title-tag {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light, #fbbf24);
    margin-bottom: 0.6rem;
}

.pillar-short-label {
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.45;
    margin-bottom: 1.2rem;
}

.pillar-visual-meter {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-top: auto;
}

.pillar-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
}

/* ---------- Visual Side-By-Side Infographic Comparison ---------- */
.visual-compare-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 3rem;
}

.visual-compare-col {
    border-radius: 24px;
    padding: clamp(1.8rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.visual-compare-col.traditional {
    background: linear-gradient(165deg, rgba(35, 15, 25, 0.7) 0%, rgba(18, 9, 16, 0.9) 100%);
    border: 1px solid rgba(248, 113, 113, 0.25);
}

.visual-compare-col.velora {
    background: linear-gradient(165deg, rgba(30, 12, 52, 0.9) 0%, rgba(16, 8, 30, 0.95) 100%);
    border: 1px solid rgba(236, 72, 153, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(236, 72, 153, 0.15);
}

.compare-head-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.compare-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.compare-status-badge.negative {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.compare-status-badge.positive {
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #34d399;
}

.visual-metric-items {
    display: grid;
    gap: 1.1rem;
}

.visual-metric-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.metric-icon-small {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-compare-col.traditional .metric-icon-small {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.visual-compare-col.velora .metric-icon-small {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(139, 92, 246, 0.3));
    color: #ffffff;
}

.metric-row-text {
    font-size: 0.92rem;
    font-weight: 500;
    color: #ffffff;
}

.metric-row-stat {
    font-family: var(--f-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.visual-compare-col.traditional .metric-row-stat {
    color: #f87171;
}

.visual-compare-col.velora .metric-row-stat {
    color: #34d399;
}

/* ==========================================================================
   GLIMPSES PAGE — VISUAL CATEGORY & GALLERY SHOWCASE
   ========================================================================== */

/* ==========================================================================
   GLIMPSES PAGE — 3D 5-CARD COVERFLOW CAROUSEL (FEATURED CAMPAIGNS)
   ========================================================================== */

.coverflow-showcase-section {
    position: relative;
    width: 100%;
    padding: clamp(4.5rem, 8vh, 7rem) 0 clamp(4.5rem, 8vh, 6.5rem);
    background: radial-gradient(circle at 18% 18%, rgba(139, 92, 246, 0.18) 0%, transparent 45%),
                radial-gradient(circle at 82% 82%, rgba(236, 72, 153, 0.16) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.05) 0%, transparent 60%),
                linear-gradient(155deg, #0d061c 0%, #150a2b 55%, #080313 100%);
    overflow: hidden;
    perspective: 1400px;
    box-sizing: border-box;
}

/* Ambient Glowing Backdrop Lights */
.coverflow-ambient-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.coverflow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: 0.5;
    animation: coverflowOrbFloat 18s ease-in-out infinite alternate;
}

.coverflow-orb.orb-1 {
    width: 520px;
    height: 520px;
    top: -12%;
    left: -8%;
    background: rgba(139, 92, 246, 0.25);
}

.coverflow-orb.orb-2 {
    width: 560px;
    height: 560px;
    bottom: -15%;
    right: -8%;
    background: rgba(236, 72, 153, 0.22);
    animation-delay: -6s;
    animation-duration: 22s;
}

.coverflow-orb.orb-3 {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(251, 191, 36, 0.12);
    animation-delay: -11s;
    animation-duration: 16s;
}

@keyframes coverflowOrbFloat {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.08); }
    100% { transform: translate(-30px, 30px) scale(0.92); }
}

.coverflow-container {
    position: relative;
    z-index: 2;
}

/* Header */
.coverflow-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vh, 3.5rem);
}

.coverflow-eyebrow {
    font-family: var(--f-display, sans-serif);
    font-size: clamp(0.76rem, 0.95vw, 0.88rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold, #fbbf24);
    margin-bottom: 0.5rem;
}

.coverflow-title {
    font-family: var(--f-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.08;
    color: #ffffff;
    letter-spacing: -0.03em;
    margin: 0 0 0.85rem 0;
}

.coverflow-lead {
    font-family: var(--f-body, sans-serif);
    font-size: clamp(0.95rem, 1.15vw, 1.12rem);
    color: #c4b5fd;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 3D Coverflow Stage Area */
.coverflow-stage-wrap {
    position: relative;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 540px;
}

.coverflow-deck {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

/* Individual Card */
.coverflow-card {
    position: absolute;
    width: clamp(280px, 23vw, 320px);
    border-radius: 28px;
    background: #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.75s ease,
                box-shadow 0.75s ease,
                filter 0.75s ease;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    will-change: transform, opacity;
}

.coverflow-card-inner {
    padding: clamp(1.2rem, 1.5vw, 1.5rem);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/* Center Active Card Highlight (Matching Reference) */
.coverflow-card.is-center {
    z-index: 10 !important;
    box-shadow: 0 28px 65px -10px rgba(251, 191, 36, 0.35), 0 0 0 2px rgba(251, 191, 36, 0.65), 0 10px 30px rgba(0, 0, 0, 0.4);
    cursor: default;
    background: linear-gradient(180deg, #ffffff 0%, #fffbf2 100%);
}

/* Card Header: Badge + Favorite Button */
.coverflow-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    position: relative;
    z-index: 2;
}

.coverflow-badge {
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-family: var(--f-display, sans-serif);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge-bestseller {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.badge-trending {
    background: #fce7f3;
    color: #9d174d;
    border: 1px solid #fbcfe8;
}

.badge-new {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}

.badge-popular {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

.badge-exclusive {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fef08a;
}

.coverflow-fav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease, background 0.25s ease;
}

.coverflow-fav-btn svg {
    width: 16px;
    height: 16px;
}

.coverflow-fav-btn:hover,
.coverflow-fav-btn.is-active {
    color: #ef4444;
    background: #fee2e2;
    transform: scale(1.15);
}

.coverflow-fav-btn.is-active svg {
    fill: #ef4444;
}

/* Card Media Image Area */
.coverflow-card-media {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 18px;
    overflow: hidden;
    background: #f5f0e8;
    margin-bottom: 0.95rem;
}

.coverflow-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* Card Body */
.coverflow-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.coverflow-card-dots {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.coverflow-card-dots .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background 0.3s ease, width 0.3s ease;
}

.coverflow-card-dots .dot.is-active {
    background: #c49a6c;
    background: linear-gradient(135deg, #d97706, #fbbf24);
    width: 14px;
    border-radius: 999px;
}

.coverflow-card-name {
    font-family: var(--f-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(1.05rem, 1.2vw, 1.22rem);
    font-weight: 800;
    line-height: 1.22;
    color: #1a0f2b;
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.01em;
}

.coverflow-card-desc {
    font-family: var(--f-body, sans-serif);
    font-size: 0.78rem;
    line-height: 1.45;
    color: #64748b;
    margin: 0 0 0.75rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coverflow-card-rating {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--f-display, sans-serif);
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.85rem;
}

.coverflow-card-rating .star-ic {
    color: #f59e0b;
    font-size: 0.85rem;
}

.coverflow-card-rating .rating-val {
    font-weight: 800;
    color: #1e293b;
}

.coverflow-card-rating .rating-count {
    color: #94a3b8;
    font-weight: 500;
}

/* Card Foot: Metric + Action Buttons */
.coverflow-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.coverflow-card-stat {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: max-content;
}

.coverflow-card-stat .stat-num {
    font-family: var(--f-display, 'Bricolage Grotesque', sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1a0f2b;
    white-space: nowrap;
}

.coverflow-card-stat .stat-label {
    font-family: var(--f-display, sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    white-space: nowrap;
}

/* Action Buttons (Matching Reference: Compact on sides, Expanded in center) */
.coverflow-cta-btn.compact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #f4ecdf;
    color: #8b6032;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.coverflow-cta-btn.compact svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.coverflow-cta-btn.compact:hover {
    background: #fbbf24;
    color: #000000;
    transform: scale(1.1);
}

.coverflow-cta-btn.expanded {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.58rem 1.05rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #130a24;
    font-family: var(--f-display, sans-serif);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(251, 191, 36, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.coverflow-cta-btn.expanded span {
    white-space: nowrap !important;
    display: inline-block;
    word-break: keep-all !important;
}

.coverflow-cta-btn.expanded svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.coverflow-cta-btn.expanded:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.55);
}

.coverflow-card.is-center .coverflow-cta-btn.compact {
    display: none;
}

.coverflow-card.is-center .coverflow-cta-btn.expanded {
    display: inline-flex;
}

/* Circular Arrow Navigation Buttons */
.coverflow-arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    color: #1a0f2b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 25;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.coverflow-arrow-btn svg {
    width: 20px;
    height: 20px;
}

.coverflow-arrow-btn.prev {
    left: clamp(0.5rem, 2vw, 1.8rem);
}

.coverflow-arrow-btn.next {
    right: clamp(0.5rem, 2vw, 1.8rem);
}

.coverflow-arrow-btn:hover {
    transform: translateY(-50%) scale(1.14);
    background: #fbbf24;
    color: #000000;
    box-shadow: 0 14px 34px rgba(251, 191, 36, 0.5);
}

/* Pagination Dots */
.coverflow-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: clamp(1.8rem, 3vh, 2.5rem);
}

.coverflow-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.coverflow-dot:hover {
    background: rgba(251, 191, 36, 0.6);
}

.coverflow-dot.is-active {
    width: 26px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.5);
}

/* Responsive Media Queries */
@media (max-width: 768px) {
    .coverflow-stage-wrap {
        min-height: 480px;
    }

    .coverflow-deck {
        height: 460px;
    }

    .coverflow-card {
        width: 240px;
    }

    .coverflow-card-media {
        height: 150px;
    }

    .coverflow-arrow-btn {
        width: 40px;
        height: 40px;
    }
}

/* ---------- Gallery Filter Tabs ---------- */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 2.5rem;
}

.gallery-filter-btn {
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    font-family: var(--f-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(236, 72, 153, 0.35);
}

/* ---------- Visual Industry Categories Grid ---------- */
.visual-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.2rem, 2vw, 1.8rem);
    margin-top: 2.5rem;
}

.visual-category-card {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(160deg, #180d2e 0%, #0d061c 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(1.4rem, 2vw, 1.8rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.4s var(--spring), border-color 0.35s ease, box-shadow 0.4s ease;
}

.visual-category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.15), transparent 65%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.visual-category-card:hover {
    transform: translateY(-6px);
    border-color: rgba(236, 72, 153, 0.55);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(236, 72, 153, 0.2);
}

.category-icon-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.category-vector-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(139, 92, 246, 0.35));
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.category-vector-icon svg {
    width: 24px;
    height: 24px;
}

.category-num-tag {
    font-family: var(--f-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
}

.category-card-body {
    margin-top: 1.5rem;
    position: relative;
    z-index: 1;
}

.category-card-title {
    font-family: var(--f-display);
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.category-card-title b {
    display: block;
    color: var(--gold-light, #fbbf24);
    font-weight: 800;
}

.category-badge-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-soft);
}

/* ---------- Visual UGC / Creator Reel Showcase Cards ---------- */
.ugc-reel-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.ugc-reel-card {
    position: relative;
    aspect-ratio: 9 / 14;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s var(--spring), box-shadow 0.4s ease, border-color 0.4s ease;
}

.ugc-reel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 16%;
    transition: transform 0.6s ease;
}

.ugc-reel-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--pink);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(236, 72, 153, 0.3);
}

.ugc-reel-card:hover img {
    transform: scale(1.08);
}

.ugc-reel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(11, 7, 22, 0.85) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.9rem;
}

.ugc-play-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    align-self: flex-end;
}

.ugc-play-badge svg {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

.ugc-info {
    display: flex;
    flex-direction: column;
}

.ugc-name {
    font-family: var(--f-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
}

.ugc-views {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold-light, #fbbf24);
}

/* Responsive Rules for Visual Components */
@media (max-width: 1024px) {
    .visual-funnel-grid {
        grid-template-columns: 1fr;
    }

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

    .visual-compare-wrapper {
        grid-template-columns: 1fr;
    }

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

    .ugc-reel-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .visual-pillars-grid {
        grid-template-columns: 1fr;
    }

    .visual-category-grid {
        grid-template-columns: 1fr;
    }

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

/* ==========================================================================
   AWARD-LEVEL PRODUCTION GALLERY & EXHIBITION BENTO
   ========================================================================== */
.award-gallery-section {
    position: relative;
    padding-block: clamp(4rem, 7vw, 7.5rem);
    background: radial-gradient(circle at 50% 20%, rgba(26, 14, 48, 0.4) 0%, #08080a 70%);
}

.award-gallery-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(280px, 24vw, 340px);
    gap: clamp(1.2rem, 2vw, 1.8rem);
    margin-top: 2.5rem;
}

.award-gallery-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #110920;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.5s ease;
}

.award-gallery-card.span-2x2 {
    grid-column: span 2;
    grid-row: span 2;
}

.award-gallery-card.span-2x1 {
    grid-column: span 2;
    grid-row: span 1;
}

.award-gallery-card.span-1x2 {
    grid-column: span 1;
    grid-row: span 2;
}

.award-gallery-card.span-4x1 {
    grid-column: span 4;
    grid-row: span 1;
}

.award-gallery-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(236, 72, 153, 0.6);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(236, 72, 153, 0.25);
    z-index: 5;
}

/* Image with ultra-smooth cinematic zoom and face-safe framing */
.award-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
    filter: brightness(0.92) contrast(1.05);
}

.award-gallery-card img[src*="glimpse-1"] {
    object-position: center 12%;
}

.award-gallery-card img[src*="glimpse-2"] {
    object-position: center 14%;
}

.award-gallery-card img[src*="glimpse-3"] {
    object-position: center 10%;
}

.award-gallery-card img[src*="glimpse-4"] {
    object-position: center 18%;
}

.award-gallery-card img[src*="glimpse-5"] {
    object-position: center 20%;
}

.award-gallery-card img[src*="glimpse-6"] {
    object-position: center 22%;
}

.award-gallery-card:hover img {
    transform: scale(1.08);
    filter: brightness(1.02) contrast(1.1);
}

/* Camera HUD Viewfinder Corner Accents */
.viewfinder-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    z-index: 3;
    transition: border-color 0.35s ease, transform 0.4s ease;
}

.award-gallery-card:hover .viewfinder-corner {
    border-color: var(--pink);
}

.corner-tl {
    top: 14px;
    left: 14px;
    border-top: 1.5px solid;
    border-left: 1.5px solid;
}

.corner-tr {
    top: 14px;
    right: 14px;
    border-top: 1.5px solid;
    border-right: 1.5px solid;
}

.corner-bl {
    bottom: 14px;
    left: 14px;
    border-bottom: 1.5px solid;
    border-left: 1.5px solid;
}

.corner-br {
    bottom: 14px;
    right: 14px;
    border-bottom: 1.5px solid;
    border-right: 1.5px solid;
}

.award-gallery-card:hover .corner-tl {
    transform: translate(-3px, -3px);
}

.award-gallery-card:hover .corner-tr {
    transform: translate(3px, -3px);
}

.award-gallery-card:hover .corner-bl {
    transform: translate(-3px, 3px);
}

.award-gallery-card:hover .corner-br {
    transform: translate(3px, 3px);
}

/* Top Floating Meta Tag */
.award-meta-top {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    right: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    pointer-events: none;
}

.hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(11, 7, 22, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--f-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.hud-pill.rec {
    color: #f87171;
}

.hud-pill.rec::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f87171;
    animation: pulseGlow 1.8s infinite;
}

.hud-fps {
    font-family: monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(11, 7, 22, 0.55);
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Glassmorphism Bottom Information Tray */
.award-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(11, 7, 22, 0.4) 40%, rgba(8, 4, 16, 0.95) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.2rem, 2vw, 1.8rem);
    z-index: 2;
    transition: background 0.4s ease;
}

.award-gallery-card:hover .award-card-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(139, 92, 246, 0.2) 40%, rgba(8, 4, 16, 0.98) 100%);
}

.award-card-title {
    font-family: var(--f-display);
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 0.35rem;
}

.award-gallery-card.span-2x2 .award-card-title {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.award-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.76rem;
    color: var(--text-soft);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.award-card-meta span.gold-tag {
    color: var(--gold-light, #fbbf24);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.award-expand-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--f-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pink-light);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s var(--spring);
}

.award-gallery-card:hover .award-expand-pill {
    opacity: 1;
    transform: translateY(0);
}

/* Category Filter Transition Logic */
.award-gallery-card.is-filtered-out {
    display: none !important;
}

/* Responsive Grid Adaptation for Award Bento */
@media (max-width: 1200px) {
    .award-gallery-bento {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 250px;
    }

    .award-gallery-card.span-4x1 {
        grid-column: span 3;
    }
}

@media (max-width: 900px) {
    .award-gallery-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 240px;
    }

    .award-gallery-card.span-2x2 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .award-gallery-card.span-4x1 {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .award-gallery-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .award-gallery-card {
        aspect-ratio: 4 / 3;
    }

    .award-gallery-card.span-2x2,
    .award-gallery-card.span-2x1,
    .award-gallery-card.span-1x2,
    .award-gallery-card.span-4x1 {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ==========================================================================
   49. Unified Obsidian Theme
   One shared dark surface system for every page and section. The compact
   enforcement layer at the end wins over retired compatibility rules.
   ========================================================================== */

:root {
    --canvas: #05020c;
    --canvas-2: #0a0415;
    --canvas-3: #120821;
    --glass: rgba(255, 255, 255, .035);
    --glass-strong: rgba(255, 255, 255, .065);
    --hair: rgba(192, 132, 252, .2);
    --hair-soft: rgba(192, 132, 252, .1);
    --grad-band: linear-gradient(150deg, #0f061e 0%, #090313 56%, #05020c 100%);
    --shadow-photo: 0 30px 65px -20px rgba(0, 0, 0, .92);
    --shadow-lift: 0 20px 46px -16px rgba(0, 0, 0, .82);
}

html,
body {
    background: var(--canvas);
}

body {
    background-image:
        radial-gradient(70% 48% at 92% 0%, rgba(109, 40, 217, .08), transparent 68%),
        radial-gradient(60% 42% at 0% 32%, rgba(190, 24, 93, .05), transparent 70%);
    background-attachment: fixed;
}

/* Header and navigation now remain dark both over the hero and after scroll. */
.nav,
.nav.stuck {
    background: rgba(5, 2, 12, .88);
    border-bottom-color: rgba(192, 132, 252, .16);
    box-shadow: 0 14px 36px -24px rgba(0, 0, 0, .95);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.nav.stuck {
    background: rgba(5, 2, 12, .97);
}

.nav .brand-word,
.nav .nav-link {
    color: var(--text-soft);
}

.nav .nav-link:hover,
.nav .nav-link[aria-current="page"] {
    color: #ffffff;
}

.burger span {
    background: #ffffff;
}

.nav-sub {
    color: var(--text-soft);
    background: rgba(10, 4, 21, .98);
    border-color: rgba(192, 132, 252, .22);
    box-shadow: 0 26px 56px -24px rgba(0, 0, 0, .95), var(--glow-violet);
}

.nav-sub a {
    color: var(--text-soft);
}

.nav-sub a:hover {
    color: #ffffff;
    background: rgba(139, 92, 246, .12);
}

.nav-drawer {
    background:
        radial-gradient(70% 55% at 82% 8%, rgba(139, 92, 246, .13), transparent 64%),
        #070310;
}

/* The homepage footage keeps its personality, but no longer washes the page white. */
.hero {
    color: #ffffff;
    background: var(--canvas);
}

.hero-video video {
    opacity: .9;
    filter: saturate(1.04) contrast(1.06) brightness(.76);
}

.hero-video::after {
    background:
        linear-gradient(180deg,
            rgba(3, 1, 8, .58) 0%,
            rgba(4, 2, 10, .24) 34%,
            rgba(5, 2, 12, .66) 72%,
            var(--canvas) 100%),
        radial-gradient(95% 78% at 0% 100%, rgba(5, 2, 12, .86) 0%, rgba(5, 2, 12, .35) 52%, transparent 78%),
        linear-gradient(125deg, rgba(76, 29, 149, .22) 0%, transparent 48%, rgba(190, 24, 93, .16) 100%);
}

.hero-main-title {
    color: #ffffff;
    text-shadow: 0 3px 24px rgba(0, 0, 0, .82), 0 1px 3px rgba(0, 0, 0, .95);
}

.hero-accent {
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .72));
}

/* Consistent section hierarchy: base obsidian, raised aubergine, rich feature band. */
.page-head {
    background:
        radial-gradient(46% 120% at 100% 0%, rgba(109, 40, 217, .14), transparent 72%),
        linear-gradient(180deg, #080312 0%, var(--canvas) 100%);
    border-bottom: 1px solid var(--hair-soft);
}

.tint {
    background:
        radial-gradient(62% 90% at 92% 4%, rgba(109, 40, 217, .09), transparent 66%),
        linear-gradient(150deg, #0c0518 0%, #080311 62%, #05020c 100%);
    border-block-color: var(--hair-soft);
}

.ink-band,
.stories-showcase {
    color: var(--text-soft);
    background:
        radial-gradient(62% 86% at 90% 0%, rgba(109, 40, 217, .15), transparent 64%),
        radial-gradient(56% 76% at 4% 100%, rgba(190, 24, 93, .1), transparent 64%),
        linear-gradient(150deg, #0e061b 0%, #080312 62%, #05020c 100%);
    border-block-color: var(--hair-soft);
}

.trust-banner {
    background:
        radial-gradient(70% 110% at 50% 0%, rgba(109, 40, 217, .1), transparent 66%),
        #070310;
    border-block-color: var(--hair-soft);
}

.trust-title {
    color: var(--pink-bright);
}

#campaigns.section-campaigns {
    color: var(--text-soft) !important;
    background:
        radial-gradient(68% 94% at 50% 0%, rgba(24, 119, 242, .07), transparent 64%),
        linear-gradient(180deg, #070310 0%, #05020c 100%) !important;
    border-block: 1px solid var(--hair-soft);
}

#campaigns .display-2,
#campaigns .display-3,
#campaigns .section-head,
#campaigns .lead {
    color: var(--text-soft);
}

.section-showreel,
.section-showreel-glimpses,
.award-gallery-section {
    background:
        radial-gradient(circle at 50% 15%, rgba(76, 29, 149, .12), transparent 58%),
        #06020e;
}

.cta-band {
    background:
        radial-gradient(48% 120% at 50% 100%, rgba(190, 24, 93, .11), transparent 68%),
        linear-gradient(180deg, var(--canvas) 0%, #080312 100%);
    border-top: 1px solid var(--hair-soft);
}

.luxury-grid-section,
.luxury-grid-container,
.luxury-grid-cell,
.luxury-empty-cell {
    background: #06030c;
}

/* Shared cards use the same near-black glass instead of mixed black/white panels. */
.swipe-card,
.offer-card-visual,
.visual-pillar-card,
.visual-category-card,
.visual-funnel-step,
.creator-tier-box,
.form-tabs {
    background: linear-gradient(155deg, rgba(18, 8, 33, .86), rgba(7, 3, 16, .96));
    border-color: rgba(192, 132, 252, .14);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .48);
}

.field select option {
    color: var(--text);
    background: #0a0415;
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(226, 217, 243, .48);
}

.btn-ghost,
.btn-ghost-glass {
    color: var(--text-soft);
    background: rgba(139, 92, 246, .06);
    border-color: rgba(192, 132, 252, .24);
}

/* Close every page with the same deep footer instead of the retired white wash. */
.footer {
    color: var(--text-soft);
    background:
        radial-gradient(56% 70% at 96% 2%, rgba(109, 40, 217, .12), transparent 62%),
        radial-gradient(52% 64% at 2% 98%, rgba(190, 24, 93, .09), transparent 64%),
        linear-gradient(180deg, #080312 0%, #040109 100%);
    border-top-color: var(--hair);
}

.footer-video-wrap video {
    opacity: .08;
}

.footer-video-wrap::after {
    background: linear-gradient(180deg, rgba(5, 2, 12, .82) 0%, rgba(4, 1, 9, .98) 100%);
}

.footer-mail,
.footer-links a {
    color: var(--text-soft);
}

.footer-mega {
    color: rgba(192, 132, 252, .055);
}

/* ==========================================================================
   FLOATING ROUNDED RECTANGLE EMBEDDED SHOWREEL
   ========================================================================== */
.section-showreel-glimpses {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 6vw, 6rem);
}

.floating-showreel-wrapper {
    position: relative;
    max-width: 960px;
    margin: clamp(1.8rem, 3.2vw, 3rem) auto 0;
    perspective: 1200px;
}

.showreel-ambient-glow {
    position: absolute;
    inset: -6%;
    background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.4) 0%, rgba(139, 92, 246, 0.3) 45%, transparent 70%);
    filter: blur(55px);
    z-index: 0;
    pointer-events: none;
    animation: ambientGlowPulse 5s ease-in-out infinite alternate;
}

@keyframes ambientGlowPulse {
    0% {
        opacity: 0.65;
        transform: scale(0.96);
    }

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

.floating-showreel-frame {
    position: relative;
    z-index: 1;
    border-radius: clamp(20px, 2.8vw, 30px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #090514;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.92),
        0 0 45px rgba(236, 72, 153, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
    animation: floatShowreel 6s ease-in-out infinite;
    transition: box-shadow 0.5s ease, border-color 0.4s ease;
}

.floating-showreel-frame:hover {
    border-color: rgba(236, 72, 153, 0.6);
    box-shadow: 0 35px 85px -10px rgba(0, 0, 0, 0.98),
        0 0 65px rgba(236, 72, 153, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

@keyframes floatShowreel {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(0.4deg);
    }
}

.floating-showreel-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.showreel-glare {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 60%, transparent 100%);
    pointer-events: none;
    transform: skewY(-3deg) scale(1.1);
    transform-origin: top left;
}

/* ==========================================================================
   SERVICES PAGE VISUAL-FIRST UPGRADE (IMAGES, VECTORS & ICONOGRAPHY)
   ========================================================================== */
.service-showcase-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 1.6rem;
    aspect-ratio: 16 / 10;
    background: #110920;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.5s ease;
}

.service-showcase-media:hover {
    transform: translateY(-6px);
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(236, 72, 153, 0.25);
}

.service-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-showcase-media:hover img {
    transform: scale(1.06);
}

.service-media-badge-top {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(11, 7, 22, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--f-display);
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
}

.service-media-badge-top::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ec4899;
    box-shadow: 0 0 8px #ec4899;
}

.service-media-badge-bottom {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(139, 92, 246, 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--f-display);
    font-size: 0.68rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    z-index: 2;
}

/* Premium Animated Vector Showcase (replaces the service photo) */
.service-vector-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 38%, rgba(139, 92, 246, 0.22), transparent 62%),
        linear-gradient(160deg, #1b1030 0%, #0b0716 72%);
}

.vector-panel-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(236, 72, 153, 0.24) 0%, rgba(251, 191, 36, 0.12) 42%, transparent 72%);
    filter: blur(28px);
    animation: orbitHaloPulse 4.5s ease-in-out infinite alternate;
    pointer-events: none;
}

.vector-panel-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at center, #000 42%, transparent 76%);
    mask-image: radial-gradient(circle at center, #000 42%, transparent 76%);
    pointer-events: none;
}

.vector-panel-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.vector-ring-outer {
    width: 62%;
    aspect-ratio: 1;
    border: 1px dashed rgba(236, 72, 153, 0.3);
    animation: vectorRingSpin 26s linear infinite;
}

.vector-ring-inner {
    width: 44%;
    aspect-ratio: 1;
    border: 1px solid rgba(251, 191, 36, 0.22);
    animation: vectorRingSpin 20s linear infinite reverse;
}

@keyframes vectorRingSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.vector-panel-scene {
    position: relative;
    z-index: 2;
    width: 88%;
    max-width: 440px;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5));
}

/* Flat-illustration motion vocabulary */
.svc-float {
    transform-box: fill-box;
    transform-origin: center;
    animation: svcFloat 3.4s ease-in-out infinite;
}

@keyframes svcFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.svc-pop {
    transform-box: fill-box;
    transform-origin: center;
    animation: svcPop 2.6s ease-in-out infinite;
}

@keyframes svcPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

.svc-rise {
    transform-box: fill-box;
    transform-origin: center;
    animation: svcRise 3s ease-in-out infinite;
}

@keyframes svcRise {
    0% { transform: translateY(10px); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: translateY(-28px); opacity: 0; }
}

.svc-spin-slow {
    transform-box: fill-box;
    transform-origin: center;
    animation: svcSpinSlow 9s linear infinite;
}

@keyframes svcSpinSlow {
    to { transform: rotate(360deg); }
}

.svc-bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: svcBar 1.5s ease-in-out infinite;
}

@keyframes svcBar {
    0%, 100% { transform: scaleY(0.45); }
    50% { transform: scaleY(1); }
}

.svc-clap {
    transform-box: fill-box;
    transform-origin: left bottom;
    animation: svcClap 3.2s ease-in-out infinite;
}

@keyframes svcClap {
    0%, 68%, 100% { transform: rotate(0deg); }
    80% { transform: rotate(-17deg); }
    90% { transform: rotate(-4deg); }
}

.svc-sway {
    transform-box: fill-box;
    transform-origin: top center;
    animation: svcSway 4.2s ease-in-out infinite;
}

@keyframes svcSway {
    0%, 100% { transform: rotate(-2.2deg); }
    50% { transform: rotate(2.2deg); }
}

.svc-beam polygon {
    /* Soft light-shaft look: a hard-edged tinted polygon reads as a muddy
       column against the dark panel, a blurred pale one reads as light. */
    filter: blur(4px);
    animation: svcBeam 3.6s ease-in-out infinite alternate;
}

@keyframes svcBeam {
    0% { opacity: 0.10; }
    100% { opacity: 0.26; }
}

.svc-fall {
    transform-box: fill-box;
    transform-origin: center;
    animation: svcFall 4.2s linear infinite;
}

@keyframes svcFall {
    0% { transform: translateY(-14px) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(44px) rotate(220deg); opacity: 0; }
}

.svc-blink {
    animation: svcSparkleBlink 2s ease-in-out infinite;
}

.svc-star-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: svcStarGlow 3s ease-in-out infinite;
}

.svc-node, .svc-sparkle2 circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: svcNodePulse 2.4s ease-in-out infinite;
}

@keyframes svcNodePulse {
    0%, 100% { opacity: 0.55; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.15); }
}

.svc-line {
    opacity: 0.35;
    animation: svcLinePulse 2.4s ease-in-out infinite;
}

@keyframes svcLinePulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.85; }
}

.svc-spot {
    transform-box: fill-box;
    transform-origin: center;
    animation: vectorRingSpin 18s linear infinite;
}

.svc-star {
    transform-box: fill-box;
    transform-origin: center;
    animation: svcStarGlow 3s ease-in-out infinite;
}

@keyframes svcStarGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4)); }
    50% { filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.9)); }
}

.svc-sparkle line {
    animation: svcSparkleBlink 2s ease-in-out infinite;
}

@keyframes svcSparkleBlink {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

.svc-check-line {
    opacity: 0.6;
    animation: svcSparkleBlink 2.4s ease-in-out infinite;
}

.svc-check {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: svcCheckDraw 2.8s ease-in-out infinite;
}

@keyframes svcCheckDraw {
    0%, 15% { stroke-dashoffset: 30; }
    45%, 85% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 30; }
}

@media (prefers-reduced-motion: reduce) {
    .vector-panel-glow,
    .vector-panel-ring,
    .svc-float, .svc-pop, .svc-rise, .svc-spin-slow, .svc-bar,
    .svc-clap, .svc-sway, .svc-fall, .svc-blink, .svc-star-glow,
    .svc-beam polygon, .svc-check, .svc-check-line, .svc-node, .svc-line {
        animation: none !important;
    }

    .svc-check { stroke-dashoffset: 0; }
}

/* Rich Visual Offer Feature Grid */
.offer-grid-visual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.offer-card-visual {
    position: relative;
    background: rgba(17, 9, 32, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1.4rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.offer-card-visual:hover {
    transform: translateY(-5px);
    border-color: rgba(236, 72, 153, 0.45);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65), 0 0 22px rgba(236, 72, 153, 0.2);
}

.offer-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.offer-vector-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(236, 72, 153, 0.25);
    display: grid;
    place-items: center;
    color: var(--pink-light);
    transition: transform 0.4s ease, background 0.4s ease;
}

.offer-card-visual:hover .offer-vector-icon {
    transform: scale(1.1) rotate(4deg);
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(139, 92, 246, 0.3));
    color: #ffffff;
}

.offer-vector-icon svg {
    width: 22px;
    height: 22px;
}

.offer-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--f-display);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gold-light, #fbbf24);
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.22);
    padding: 3px 8px;
    border-radius: 6px;
}

.offer-card-title {
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin: 0;
}

.offer-card-title span {
    color: var(--pink-light);
}

.offer-card-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-soft);
    margin: 0;
}

/* Tier Card Visual Vector Badges */
.tier-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(236, 72, 153, 0.3);
    display: grid;
    place-items: center;
    color: var(--gold-light, #fbbf24);
    margin-bottom: 0.9rem;
    transition: transform 0.4s var(--spring);
}

.tier-card:hover .tier-icon-wrap {
    transform: scale(1.12) rotate(-5deg);
}

.tier-icon-wrap svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .offer-grid-visual {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   TYPES OF INFLUENCERS & CREATOR PRICING TIERS
   ========================================================================== */
.creator-tiers-showcase {
    margin-top: clamp(3.5rem, 6vw, 5rem);
    padding-top: clamp(2.5rem, 4.5vw, 3.8rem);
    border-top: 1px solid rgba(236, 72, 153, 0.15);
    position: relative;
}

.creator-tiers-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, 80%);
    height: 1px;
    background: linear-gradient(90deg, transparent, #ec4899, #8b5cf6, transparent);
    box-shadow: 0 0 16px #ec4899;
}

.creator-tiers-head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto clamp(2rem, 3.5vw, 3rem) auto;
}

.creator-tiers-tag-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.85rem;
}

.creator-tiers-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(236, 72, 153, 0.1);
    border: 1px solid rgba(236, 72, 153, 0.28);
    font-family: var(--f-display);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pink-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.15);
}

.creator-tiers-tag svg {
    width: 14px;
    height: 14px;
}

.creator-tiers-lead {
    margin: 1rem auto 0 auto;
    font-size: clamp(0.95rem, 1.3vw, 1.12rem);
    color: var(--text-soft);
    line-height: 1.6;
}

.creator-tiers-lead strong {
    color: #fbbf24;
    font-weight: 700;
}

/* 5-Column Luxury Tier Ladder */
.creator-tiers-ladder {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.3vw, 1.25rem);
    align-items: stretch;
}

.creator-tier-box {
    position: relative;
    background: linear-gradient(180deg, rgba(22, 11, 40, 0.72) 0%, rgba(12, 6, 24, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.45s ease;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.creator-tier-box:hover {
    transform: translateY(-8px);
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(236, 72, 153, 0.25);
}

/* Featured / Sweet Spot Card Highlighting */
.creator-tier-featured {
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: linear-gradient(180deg, rgba(32, 16, 52, 0.8) 0%, rgba(15, 7, 27, 0.95) 100%);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6), 0 0 28px rgba(251, 191, 36, 0.2);
}

.creator-tier-featured:hover {
    border-color: #fbbf24;
    box-shadow: 0 26px 55px rgba(0, 0, 0, 0.75), 0 0 36px rgba(251, 191, 36, 0.35);
}

.tier-featured-ribbon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0b0716;
    font-family: var(--f-display);
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.5);
}

/* Media & Portrait Thumbnail - Large Visual First */
.tier-box-media {
    position: relative;
    height: clamp(175px, 18vw, 205px);
    overflow: hidden;
    background: #110822;
}

.tier-box-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.creator-tier-box:hover .tier-box-media img {
    transform: scale(1.08);
}

.tier-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 7, 22, 0.1) 0%, rgba(11, 7, 22, 0.3) 50%, rgba(11, 7, 22, 0.95) 100%);
    pointer-events: none;
}

/* Badges on Media */
.tier-chip {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(11, 7, 22, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--f-display);
    font-size: 0.64rem;
    font-weight: 700;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.tier-chip svg {
    width: 12px;
    height: 12px;
}

.tier-chip-nano {
    border-color: rgba(96, 165, 250, 0.5);
    color: #93c5fd;
    background: rgba(15, 23, 42, 0.88);
}

.tier-chip-micro {
    border-color: rgba(52, 211, 153, 0.5);
    color: #6ee7b7;
    background: rgba(6, 30, 20, 0.88);
}

.tier-chip-mid {
    border-color: rgba(251, 191, 36, 0.55);
    color: #fde047;
    background: rgba(30, 22, 5, 0.88);
}

.tier-chip-macro {
    border-color: rgba(236, 72, 153, 0.5);
    color: #f472b6;
    background: rgba(30, 8, 22, 0.88);
}

.tier-chip-celeb {
    border-color: rgba(168, 85, 247, 0.55);
    color: #c084fc;
    background: rgba(25, 10, 42, 0.88);
}

/* Media Platform & Verified Cluster */
.tier-media-platforms {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(11, 7, 22, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tier-media-platforms svg {
    width: 12px;
    height: 12px;
    color: #ffffff;
}

.tier-verified-dot {
    font-size: 0.65rem;
    font-weight: 800;
    color: #38bdf8;
    line-height: 1;
}

.tier-follower-pill {
    position: absolute;
    bottom: 9px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(11, 7, 22, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: var(--f-display);
    font-size: 0.66rem;
    font-weight: 700;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.tier-follower-pill svg {
    width: 12px;
    height: 12px;
    color: var(--pink-light);
}

/* Card Body Content */
.tier-box-body {
    padding: 0.95rem 0.9rem 1.15rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}

.tier-box-title-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tier-name {
    font-family: var(--f-display);
    font-size: 1.02rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.tier-name span {
    color: var(--pink-light);
}

.tier-sub {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.3;
}

/* Price Box Component: Bold ₹1,000 for all */
.tier-price-box {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(236, 72, 153, 0.22);
    border-radius: 10px;
    padding: 0.45rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.tier-price-box-gold {
    background: rgba(251, 191, 36, 0.07);
    border-color: rgba(251, 191, 36, 0.35);
}

.tier-price-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tier-price-lbl {
    font-family: var(--f-display);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.tier-price-amount {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--f-display);
    line-height: 1;
}

.price-curr {
    font-size: 0.9rem;
    font-weight: 800;
    color: #d97706;
}

.price-val {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a0b2e;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.tier-price-box-gold .price-val {
    color: #92400e;
}

.tier-barter-tag {
    font-family: var(--f-display);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--pink-light);
    background: rgba(236, 72, 153, 0.12);
    border: 1px solid rgba(236, 72, 153, 0.25);
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.tier-barter-tag-gold {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.3);
}

/* 2x2 Visual Tags Grid (Visual-first chips) */
.tier-visual-tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.v-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-soft);
    line-height: 1.2;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.creator-tier-box:hover .v-tag {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.v-tag svg {
    width: 11px;
    height: 11px;
    color: var(--pink-light);
    flex-shrink: 0;
}

.v-tag-gold svg {
    color: #fbbf24;
}

/* Deliverable Badge */
.tier-deliverable-badge {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.22);
    font-size: 0.66rem;
    font-weight: 600;
    color: #c4b5fd;
    line-height: 1.3;
}

.tier-deliverable-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--violet-light);
}

.tier-deliverable-gold {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.25);
    color: #fde68a;
}

.tier-deliverable-gold svg {
    color: #fbbf24;
}

/* Card CTA Button */
.tier-cta-btn {
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: var(--f-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.35s ease;
}

.tier-cta-btn svg {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
}

.tier-cta-btn:hover {
    background: linear-gradient(135deg, var(--violet), var(--pink));
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.35);
}

.tier-cta-btn:hover svg {
    transform: translateX(3px);
}

.tier-cta-gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.24));
    border-color: rgba(251, 191, 36, 0.4);
    color: #fef3c7;
}

.tier-cta-gold:hover {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .creator-tiers-ladder {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .creator-tiers-ladder {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .creator-tiers-ladder {
        grid-template-columns: 1fr;
    }
}

.founder-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   CEO CIRCULAR ORBIT ECOSYSTEM SHOWCASE - FULL VIEWPORT HERO
   ========================================================================== */
.founder-orbit-section,
#founder {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: clamp(1.5rem, 3vh, 2.5rem);
    padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.ceo-orbit-wrapper {
    position: relative;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    height: clamp(550px, calc(100vh - 240px), 850px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: clamp(24px, 2.5vw, 36px);
    background: radial-gradient(ellipse at center, rgba(248, 240, 252, 0.98) 0%, rgba(228, 208, 240, 0.96) 65%, #c8abd9 100%);
    border: 1.5px solid rgba(160, 110, 185, 0.35);
    box-shadow: 0 25px 60px -15px rgba(72, 39, 90, 0.25), 0 0 45px rgba(139, 92, 246, 0.12);
    overflow: hidden;
}

.orbit-halo-glow {
    position: absolute;
    width: clamp(280px, 32vw, 380px);
    height: clamp(280px, 32vw, 380px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 146, 60, 0.35) 0%, rgba(236, 72, 153, 0.2) 45%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    animation: orbitHaloPulse 4.5s ease-in-out infinite alternate;
}

@keyframes orbitHaloPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.65;
    }

    100% {
        transform: scale(1.1);
        opacity: 0.95;
    }
}

/* Concentric Orbit Track Rings */
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.orbit-ring-outer {
    width: clamp(480px, 78%, 840px);
    height: clamp(370px, 68%, 460px);
    border: 1.5px dashed rgba(236, 72, 153, 0.35);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.1);
}

.orbit-ring-mid {
    width: clamp(360px, 58%, 640px);
    height: clamp(270px, 48%, 340px);
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.orbit-ring-inner {
    width: clamp(260px, 42%, 460px);
    height: clamp(190px, 35%, 240px);
    border: 1px dashed rgba(251, 191, 36, 0.3);
}

/* Floating Stat Badges */
.orbit-stat-pill {
    position: absolute;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--f-display);
    font-size: 0.72rem;
    font-weight: 700;
    color: #1f142e !important;
    box-shadow: 0 4px 14px rgba(72, 39, 90, 0.12) !important;
    pointer-events: none;
}

.orbit-stat-pill svg {
    width: 13px;
    height: 13px;
    color: #ec4899;
    flex-shrink: 0;
}

.stat-pill-tl {
    top: 24px;
    left: 28px;
}

.stat-pill-tr {
    top: 24px;
    right: 28px;
}

.stat-pill-bl {
    bottom: 24px;
    left: 28px;
}

.stat-pill-br {
    bottom: 24px;
    right: 28px;
}

/* Orbiting Satellites Track */
.orbit-satellites-track {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

.orbit-node {
    position: absolute;
    transform: translate(-50%, -50%);
    transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1), z-index 0.2s;
    z-index: 10;
    width: max-content;
    height: max-content;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
}

/* 8 Symmetrical Coordinates matching the design */
.orbit-node.node-1, .node-1 {
    top: 17%;
    left: 50%;
    right: auto;
    bottom: auto;
}

.orbit-node.node-2, .node-2 {
    top: 27%;
    left: 77%;
    right: auto;
    bottom: auto;
}

.orbit-node.node-3, .node-3 {
    top: 52%;
    left: 83%;
    right: auto;
    bottom: auto;
}

.orbit-node.node-4, .node-4 {
    top: 76%;
    left: 77%;
    right: auto;
    bottom: auto;
}

.orbit-node.node-5, .node-5 {
    top: 83%;
    left: 50%;
    right: auto;
    bottom: auto;
}

.orbit-node.node-6, .node-6 {
    top: 76%;
    left: 23%;
    right: auto;
    bottom: auto;
}

.orbit-node.node-7, .node-7 {
    top: 52%;
    left: 17%;
    right: auto;
    bottom: auto;
}

.orbit-node.node-8, .node-8 {
    top: 27%;
    left: 23%;
    right: auto;
    bottom: auto;
}

/* Hover Animation on Satellite Nodes */
.orbit-node:hover {
    transform: translate(-50%, -50%) scale(1.12);
    z-index: 40;
}

/* Circle Image Frame for Orbit Satellites */
.orbit-node-inner {
    position: relative;
    width: clamp(90px, 9vw, 115px);
    height: clamp(90px, 9vw, 115px);
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #ec4899 0%, #fbbf24 100%);
    box-shadow: 0 8px 24px rgba(72, 39, 90, 0.25), 0 0 16px rgba(236, 72, 153, 0.2);
    cursor: pointer;
    transition: box-shadow 0.35s ease, background 0.35s ease;
}

.orbit-node:hover .orbit-node-inner {
    box-shadow: 0 12px 30px rgba(72, 39, 90, 0.4), 0 0 24px rgba(236, 72, 153, 0.7);
    background: linear-gradient(135deg, #fbbf24, #ec4899, #8b5cf6);
}

.orbit-node-inner img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    border: 2.5px solid #ffffff;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

.orbit-node:hover .orbit-node-inner img {
    transform: scale(1.06);
}

/* Clean Non-Overlapping Info Capsule Pill */
.orbit-node-info {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(72, 39, 90, 0.15) !important;
    white-space: nowrap;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
    z-index: 15;
}

.orbit-node-info strong {
    font-family: var(--f-display);
    font-size: 0.68rem;
    font-weight: 800;
    color: #1f142e !important;
    line-height: 1;
    letter-spacing: 0.01em;
}

.orbit-node-info .node-tag {
    font-family: var(--f-display);
    font-size: 0.52rem;
    font-weight: 800;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ec4899, #d946ef) !important;
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(236, 72, 153, 0.3);
}

.orbit-node:hover .orbit-node-info {
    border-color: #fbbf24 !important;
    box-shadow: 0 6px 18px rgba(72, 39, 90, 0.25), 0 0 16px rgba(251, 191, 36, 0.4) !important;
    transform: translateX(-50%) scale(1.06);
}

.orbit-node:hover .orbit-node-info strong {
    color: #d97706 !important;
}

/* Center Main Hub (CEO Shubh Gupta) - EXACT CENTER & BALANCED SCALE */
.orbit-center-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.center-hub-ring-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(320px, 28vw, 350px);
    height: clamp(320px, 28vw, 350px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 146, 60, 0.35) 0%, rgba(236, 72, 153, 0.2) 45%, transparent 70%);
    animation: hubRingPulse 3.5s ease-in-out infinite alternate;
    pointer-events: none;
    filter: blur(20px);
}

@keyframes hubRingPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0.65;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.95;
    }
}

.center-hub-avatar-frame {
    position: relative;
    width: clamp(230px, 20vw, 250px);
    height: clamp(230px, 20vw, 250px);
    border-radius: 50%;
    padding: 4.5px;
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
    box-shadow: 0 16px 40px rgba(72, 39, 90, 0.3), 0 0 32px rgba(245, 158, 11, 0.35);
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.4s ease;
    cursor: pointer;
}

.orbit-center-hub:hover .center-hub-avatar-frame {
    transform: scale(1.05);
    box-shadow: 0 20px 48px rgba(72, 39, 90, 0.4), 0 0 42px rgba(251, 191, 36, 0.6);
}

.center-hub-avatar-frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 10%;
    display: block;
    border: 3px solid #ffffff;
}

.center-hub-crown {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fbbf24;
    display: grid;
    place-items: center;
    color: #1f142e;
    box-shadow: 0 4px 10px rgba(72, 39, 90, 0.25);
    border: 2.5px solid #ffffff;
    transition: transform 0.3s ease;
    z-index: 30;
}

.orbit-center-hub:hover .center-hub-crown {
    transform: scale(1.15) rotate(12deg);
}

.center-hub-crown svg {
    width: 15px;
    height: 15px;
}

.center-hub-label-card {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 18px;
    border-radius: 999px;
    background: #ffffff !important;
    border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(72, 39, 90, 0.18) !important;
    white-space: nowrap;
    z-index: 25;
    transition: all 0.3s ease;
}

.orbit-center-hub:hover .center-hub-label-card {
    box-shadow: 0 8px 24px rgba(72, 39, 90, 0.25), 0 0 22px rgba(251, 191, 36, 0.5) !important;
    border-color: #fbbf24 !important;
}

.center-hub-name {
    font-family: var(--f-display);
    font-size: clamp(0.82rem, 1vw, 0.92rem);
    font-weight: 800;
    color: #1f142e !important;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
}

.center-hub-name .verified-check {
    width: 14px;
    height: 14px;
    color: #1877f2;
}

.center-hub-title {
    font-family: var(--f-display);
    font-size: 0.58rem;
    font-weight: 800;
    color: #b45309 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive Scaling for Orbit */
@media (max-width: 900px) {
    .ceo-orbit-wrapper {
        height: 500px;
    }

    .orbit-node-inner {
        width: 52px;
        height: 52px;
    }

    .orbit-node-info {
        padding: 2px 6px;
    }

    .orbit-node-info strong {
        font-size: 0.56rem;
    }

    .orbit-node-info .node-tag {
        display: none;
    }

    .center-hub-avatar-frame {
        width: 150px;
        height: 150px;
    }

    .center-hub-ring-pulse {
        width: 195px;
        height: 195px;
    }
}

@media (max-width: 600px) {
    .ceo-orbit-wrapper {
        height: 480px;
        border-radius: 18px;
    }

    .orbit-stat-pill {
        display: none;
    }

    .orbit-node-inner {
        width: 44px;
        height: 44px;
    }

    .node-1 {
        top: 11%;
        left: 50%;
    }

    .node-2 {
        top: 22%;
        left: 82%;
    }

    .node-3 {
        top: 50%;
        left: 89%;
    }

    .node-4 {
        top: 78%;
        left: 82%;
    }

    .node-5 {
        top: 89%;
        left: 50%;
    }

    .node-6 {
        top: 78%;
        left: 18%;
    }

    .node-7 {
        top: 50%;
        left: 11%;
    }

    .node-8 {
        top: 22%;
        left: 18%;
    }

    .center-hub-avatar-frame {
        width: 125px;
        height: 125px;
    }

    .center-hub-ring-pulse {
        width: 165px;
        height: 165px;
    }

    .center-hub-crown {
        width: 26px;
        height: 26px;
        top: 4px;
        right: 4px;
    }

    .center-hub-crown svg {
        width: 13px;
        height: 13px;
    }

    .center-hub-label-card {
        padding: 3px 12px;
        bottom: -15px;
    }
}

/* ==========================================================================
   42. Light theme — surface corrections
   The token block in section 1 flips almost everything, but a number of
   surfaces were written as literal rgba(11, 7, 22, x) rather than through a
   token, so they stayed near-black. Those are corrected here.

   A deliberate distinction runs through this section: page surfaces go light,
   scrims over photography stay dark. A caption sitting on top of an image still
   needs a dark gradient underneath it whatever the page theme is, so the card
   scrims in sections 16, 18, 37 and 38 are left exactly as they were.
   ========================================================================== */

/* ---------- Header ---------- */
/* Transparent over the hero footage, opaque white once it lifts off the top. */
.nav {
    background: rgba(255, 255, 255, .06);
}

.nav.stuck {
    background: rgba(255, 255, 255, .9);
    border-bottom-color: var(--hair);
    box-shadow: 0 10px 30px -18px rgba(76, 29, 149, .35);
}

/* Header type is dark everywhere. The hero now carries a light veil rather than
   a dark one, so there is no longer anywhere on the site where the header sits
   on something dark. An earlier attempt forced white here, which left
   white-on-white navigation on the five pages that have no hero at all. */
.nav .brand-word,
.nav .nav-link {
    color: var(--text);
}

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

.burger span {
    background: var(--text);
}

/* ---------- Hero ---------- */
/* The dark-theme scrim ended on var(--canvas), which is now white — so the
   bottom-left corner the headline occupies faded to white behind white type and
   the headline disappeared entirely (measured 1.36:1). Inverted: a white veil
   pooled into the bottom-left, and dark type over it. */
.hero {
    color: var(--text);
}

.hero-video video {
    opacity: .95;
    filter: saturate(1.02) contrast(.98) brightness(1.04);
}

.hero-video::after {
    background:
        /* Bright pool in the bottom-left, under the headline. */
        radial-gradient(105% 82% at -5% 108%,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .92) 30%,
            rgba(255, 255, 255, .66) 52%,
            rgba(255, 255, 255, .26) 72%,
            transparent 88%),
        /* Lower band, seating the hero into the white page beneath it. */
        linear-gradient(180deg,
            transparent 30%,
            rgba(255, 255, 255, .34) 54%,
            rgba(255, 255, 255, .76) 76%,
            rgba(255, 255, 255, .95) 92%,
            var(--canvas) 100%),
        /* Keeps the dark header legible over a dark frame. */
        linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .3) 22%, transparent 42%),
        /* Brand tint, so the footage still reads as VELORA. */
        linear-gradient(125deg, rgba(124, 58, 237, .16) 0%, transparent 46%, rgba(236, 72, 153, .14) 100%);
}

.hero-main-title {
    color: var(--text);
    /* White halo instead of a dark one, to lift the type off busier frames. */
    text-shadow: 0 2px 22px rgba(255, 255, 255, .9), 0 1px 3px rgba(255, 255, 255, .8);
}

.hero-accent {
    background-image: var(--grad-text);
    filter: drop-shadow(0 2px 14px rgba(255, 255, 255, .85));
}

/* ---------- Value · Voice · Vision strip ---------- */
/* White text on the old ramp's pink end measured 3.7:1, and at 14.7px bold it
   needs 4.5:1. Every stop is now dark enough to carry it. */
.vvv {
    background: linear-gradient(100deg, #4c1d95, #6d28d9, #a21caf, #be185d, #a21caf, #6d28d9, #4c1d95);
    background-size: 320% 100%;
}

.footer .vvv {
    color: var(--pink);
}

.nav-sub {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 50px -20px rgba(76, 29, 149, .3);
}

.nav-sub a {
    color: var(--text-soft);
}

.nav-sub a:hover {
    color: var(--violet);
    background: var(--canvas-3);
}

/* ---------- Mobile drawer ---------- */
.nav-drawer {
    background:
        radial-gradient(70% 55% at 80% 8%, rgba(139, 92, 246, .16), transparent 62%),
        var(--canvas);
}

.drawer-menu a {
    color: var(--text);
    border-bottom-color: var(--hair);
}

.drawer-menu a small {
    color: var(--pink);
}

.drawer-foot a {
    color: var(--muted);
}

/* ---------- Bands and panels ---------- */
/* Was a near-black purple slab; now a soft lavender-to-blush wash that still
   separates the band from the plain white sections around it. */
.ink-band {
    color: var(--text-soft);
    background:
        radial-gradient(64% 80% at 88% 4%, rgba(139, 92, 246, .16), transparent 60%),
        radial-gradient(58% 74% at 6% 96%, rgba(236, 72, 153, .13), transparent 62%),
        linear-gradient(150deg, #f4edff 0%, #fbf1f8 60%, #ffffff 100%);
    border-block: 1px solid var(--hair);
}

.ink-band .display-2,
.ink-band .rail-title,
.ink-band h2 {
    color: var(--text);
}

/* ---------- Footer ---------- */
.footer {
    color: var(--text-soft);
    background:
        radial-gradient(56% 70% at 96% 2%, rgba(139, 92, 246, .16), transparent 60%),
        radial-gradient(52% 64% at 2% 98%, rgba(236, 72, 153, .13), transparent 62%),
        linear-gradient(180deg, #faf6ff 0%, #ffffff 100%);
    border-top: 1px solid var(--hair);
}

/* The ambient footer video needs a light veil now, not a dark one, or the
   footer reads as a black box hanging off the bottom of a white page. */
.footer-video-wrap video {
    opacity: .1;
}

.footer-video-wrap::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .95) 100%);
}

.footer-mail {
    color: var(--text);
}

.footer-links a {
    color: var(--muted);
}

.footer-links a:hover {
    color: var(--violet);
}

.footer-bottom {
    color: var(--muted);
    border-top-color: var(--hair);
}

.footer-mega {
    color: rgba(124, 58, 237, .07);
}

/* ---------- Captions that sit on dark photo scrims ---------- */
/* --muted and --text-soft are dark now, which is right for the page but wrong
   for the handful of places where they were being used as light text on top of
   an image. Those are pinned back to light values. */
.talent-meta,
.ig-tag,
.work-tag-row .work-brand,
.cine-badge {
    color: rgba(255, 255, 255, .82);
}

/* ---------- Form controls ---------- */
.field select option {
    background: #fff;
    color: var(--text);
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(100, 84, 138, .65);
}

/* The chevron was drawn in the bright brand pink; darkened to match the label
   colour now that it sits on white. */
.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23be185d' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
/* The ghost button filled from transparent on a dark page; on white it needs a
   visible outline of its own. */
.btn-ghost,
.btn-ghost-glass {
    color: var(--violet-deep);
    background: rgba(124, 58, 237, .05);
    border: 1px solid rgba(124, 58, 237, .28);
}

.btn-ghost:hover,
.btn-ghost-glass:hover {
    color: #fff;
}

/* ---------- Preloader ---------- */
.preloader-bar {
    background: rgba(124, 58, 237, .14);
}

.preloader p {
    color: var(--muted);
}

/* ---------- Ambient section orbs ---------- */
/* Section 40's orbs were tuned against a near-black page, where a heavy tint
   was invisible. On white the same alpha darkens whatever sits on top of it,
   and it was dragging small pink and violet label text from a comfortable 6:1
   down to around 3.9:1. Weakened until they colour the page without measurably
   affecting the type over them. */
.sect-orb:nth-child(1) {
    background: radial-gradient(circle,
            rgba(139, 92, 246, .085) 0%,
            rgba(236, 72, 153, .05) 46%,
            transparent 72%);
}

.sect-orb:nth-child(2) {
    background: radial-gradient(circle,
            rgba(236, 72, 153, .075) 0%,
            rgba(124, 58, 237, .045) 46%,
            transparent 72%);
}

/* The campaigns rail is white in its own right, so it needs no extra wash. */
.section-campaigns .sect-orb {
    opacity: .3;
}

/* ==========================================================================
   43. Represent Roster — photo wall
   Reworked to match the reference: bare photographic tiles rather than dark
   panels with a caption printed over the image. The card chrome, the scrim and
   the overlaid text are all removed, the picture becomes the whole tile, and
   the name sits underneath in page-dark type.

   Each tile also takes a small Y-axis rotation and vertical offset, which is
   what gives the row the curved, leaning-wall look of the reference instead of
   a flat strip of rectangles.
   ========================================================================== */
.talent {
    flex: 0 0 clamp(178px, 19vw, 240px);
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    /* Vertical room for the leaning tiles and the hover lift. */
    padding-block: 14px;
}

.talent:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

/* The conic gradient ring belonged to the old bordered card. */
.talent::after {
    display: none;
}

.talent-photo {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: clamp(14px, 1.5vw, 20px);
    overflow: hidden;
    background: var(--canvas-3);
    box-shadow: 0 22px 44px -20px rgba(76, 29, 149, .45);
    transform:
        perspective(1000px) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) scale(var(--sc, 1));
    transition: transform .55s var(--ease), box-shadow .45s ease;
}

/* No caption sits on the image any more, so the scrim goes. */
.talent-photo::after {
    display: none;
}

/* Straighten and lift on hover, so the leaning tile snaps to face you. */
.talent:hover .talent-photo,
.talent:focus-visible .talent-photo {
    transform: perspective(1000px) rotateY(0deg) translateY(-10px) scale(1.03);
    box-shadow: 0 30px 60px -18px rgba(76, 29, 149, .5), var(--glow-pink);
}

/* The lean. Four-step cycle so the rhythm does not read as a repeat at a
   glance, and the pattern still holds wherever the rail happens to be. */
.talent:nth-child(4n+1) .talent-photo {
    --ry: 8deg;
    --ty: 12px;
    --sc: .97;
}

.talent:nth-child(4n+2) .talent-photo {
    --ry: -6deg;
    --ty: -8px;
    --sc: 1;
}

.talent:nth-child(4n+3) .talent-photo {
    --ry: 6deg;
    --ty: 6px;
    --sc: .98;
}

.talent:nth-child(4n+4) .talent-photo {
    --ry: -8deg;
    --ty: -12px;
    --sc: 1.01;
}

/* Caption moves out from over the photograph and onto the page. */
.talent-body {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    gap: .1rem;
    padding: .85rem .15rem 0;
}

.talent-role {
    font-size: .6rem;
    letter-spacing: .12em;
    color: var(--pink);
}

.talent-name {
    font-size: clamp(.95rem, 1.15vw, 1.1rem);
    text-transform: none;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--text);
}

/* Overrides the light-on-scrim value set in section 42 — this caption is on
   white now, not on the photograph. */
.talent-marquee .talent-meta {
    margin-top: .18rem;
    font-size: .76rem;
    color: var(--muted);
}

.talent:hover .talent-meta {
    color: var(--pink);
}

/* The tiles lean and lift, so the rail needs headroom; clipping the overflow
   would shear the top of every raised tile. */
.talent-marquee {
    padding-block: clamp(1.4rem, 2.4vw, 2rem);
}

/* ==========================================================================
   44. Dark Luxury Theme — Component Surfaces & Accents
   ========================================================================== */

:root {
    --gold-light: #fbbf24;
    --danger: #f87171;
    --success: #34d399;
}

/* ---------- Funnel ---------- */
.visual-funnel-step {
    background: linear-gradient(145deg, rgba(26, 14, 48, 0.75) 0%, rgba(15, 8, 32, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.visual-funnel-step:hover {
    border-color: rgba(236, 72, 153, .55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(236, 72, 153, 0.2);
}

/* ---------- Comparison columns ---------- */
.visual-compare-col.traditional {
    background: linear-gradient(165deg, rgba(35, 15, 25, 0.75) 0%, rgba(18, 9, 16, 0.92) 100%);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.visual-compare-col.velora {
    background: linear-gradient(165deg, rgba(30, 12, 52, 0.9) 0%, rgba(16, 8, 30, 0.96) 100%);
    border: 1px solid rgba(236, 72, 153, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), var(--glow-pink);
}

.visual-compare-col.traditional h3,
.visual-compare-col.traditional .metric-row-stat,
.visual-compare-col.traditional .metric-icon-small,
.compare-status-badge.negative {
    color: var(--danger);
}

.compare-status-badge.positive {
    color: var(--success);
}

.pillar-big-metric {
    color: #ffffff;
}

/* ---------- Creator tier boxes ---------- */
.creator-tier-box {
    background: linear-gradient(180deg, rgba(22, 11, 40, 0.78) 0%, rgba(12, 6, 24, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.creator-tier-featured {
    background: linear-gradient(180deg, rgba(32, 16, 52, 0.85) 0%, rgba(15, 7, 27, 0.96) 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), 0 0 28px rgba(251, 191, 36, 0.25);
}

.creator-tier-featured:hover {
    border-color: var(--gold-light);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.75), 0 0 35px rgba(251, 191, 36, 0.4);
}

.creator-tiers-lead strong,
.tier-price-box-gold .price-val,
.tier-barter-tag-gold,
.v-tag-gold svg,
.tier-deliverable-gold svg,
.award-card-meta span.gold-tag {
    color: var(--gold-light);
}

.tier-barter-tag-gold {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
}

.tier-price-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.tier-price-box-gold {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.4);
}

.tier-cta-gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.3));
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

/* ---------- Offer cards ---------- */
.offer-card-visual {
    background: rgba(17, 9, 32, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.offer-card-title span {
    color: var(--pink-light);
}

/* ---------- Pillar cards ---------- */
.visual-pillar-card {
    background: linear-gradient(160deg, rgba(23, 11, 42, 0.85) 0%, rgba(13, 7, 26, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.visual-pillar-card:hover {
    border-color: rgba(139, 92, 246, .6);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), var(--glow-violet);
}

.pillar-vector-badge {
    background: linear-gradient(135deg, rgba(236, 72, 153, .22), rgba(139, 92, 246, .3));
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.pillar-index-num {
    color: rgba(255, 255, 255, 0.35);
}

.pillar-big-metric,
.pillar-short-label,
.visual-pillar-card h3 {
    color: #ffffff;
}

.pillar-title-tag {
    color: var(--gold-light);
}

.pillar-visual-meter {
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- Gallery & Category Components ---------- */
.award-gallery-section {
    background: radial-gradient(circle at 50% 20%, rgba(26, 14, 48, 0.5) 0%, #090514 70%);
}

.visual-category-card {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(239, 229, 246, 0.94));
    border: 1px solid rgba(97, 62, 124, 0.18);
}

.visual-category-card:hover {
    border-color: var(--pink-bright);
}

.category-vector-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #d946ef, #8b5cf6);
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.25);
}

.category-num-tag {
    color: #7c688c;
}

.category-card-title {
    color: #1a0f2b;
}

.category-card-title b {
    color: #c026d3;
}

.visual-category-card .category-badge-stat {
    color: #3b1d54;
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(97, 62, 124, 0.18);
}

.gallery-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-soft);
    box-shadow: none;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(236, 72, 153, 0.35);
}

.footer-video-wrap::after {
    background: linear-gradient(180deg, rgba(9, 5, 20, 0.75) 0%, rgba(9, 5, 20, 0.96) 100%);
}

/* ==========================================================================
   48. Homepage polish — authentic client marks, readable creator labels,
   and footage-first campaign cards
   ========================================================================== */

/* Give every client mark its own clear visual lane. The larger fixed lane
   prevents wide wordmarks and compact app-style marks from crowding each
   other while the rail moves. */
.trust-banner .trust-band {
    padding-block: 1.25rem 1.5rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.trust-banner .trust-track {
    gap: clamp(2rem, 3.5vw, 3.8rem);
    padding-right: clamp(2rem, 3.5vw, 3.8rem);
}

.trust-banner .client-logo {
    width: clamp(140px, 14vw, 195px);
    min-width: clamp(140px, 14vw, 195px);
    height: 80px;
    padding: 0;
    opacity: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.trust-banner .client-logo img {
    width: auto;
    height: auto;
    max-width: 175px;
    max-height: 56px;
    object-fit: contain;
}

.trust-banner .client-logo--square img,
.trust-banner .client-logo img[src$="meesho.png"],
.trust-banner .client-logo img[src$="tseries.svg"],
.trust-banner .client-logo img[src$="aajtak.svg"] {
    max-width: 62px;
    max-height: 62px;
}

.trust-banner .client-logo--wide img {
    max-width: 185px;
}

/* Creator portraits stay perfectly circular and use a crop tuned to the
   subject instead of one global crop for every source photo. */
#founder .orbit-node-inner,
#founder .center-hub-avatar-frame {
    aspect-ratio: 1;
}

#founder .orbit-node-inner {
    overflow: visible;
}

#founder .center-hub-avatar-frame {
    overflow: visible;
}

#founder .orbit-node-inner img,
#founder .center-hub-avatar-frame img {
    object-fit: cover;
    transform-origin: center;
}

#founder .center-hub-avatar-frame img {
    object-position: 50% 10%;
}

#founder .node-1 img { object-position: 50% 18%; }
#founder .node-2 img { object-position: 50% 20%; }
#founder .node-3 img { object-position: 50% 18%; }
#founder .node-4 img { object-position: 50% 16%; }
#founder .node-5 img { object-position: 50% 20%; }
#founder .node-6 img { object-position: 50% 18%; }
#founder .node-7 img { object-position: 50% 16%; }
#founder .node-8 img { object-position: 50% 14%; }

/* High-contrast white labels make every creator name readable over the dark
   orbit artwork, including on photographs with bright edges. */
#founder .orbit-node-info {
    bottom: -22px;
    min-height: 30px;
    padding: 5px 10px;
    gap: 5px;
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .92) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .58), 0 0 0 1px rgba(236, 72, 153, .12) !important;
}

#founder .orbit-node-info strong {
    color: #19122e !important;
    font-size: clamp(.68rem, .82vw, .78rem);
    letter-spacing: 0;
}

#founder .orbit-node-info .node-tag {
    color: #9d174d !important;
    background: #fce7f3 !important;
    box-shadow: none;
}

#founder .orbit-node:hover .orbit-node-info {
    background: #ffffff !important;
    border-color: #fbbf24 !important;
}

#founder .orbit-node:hover .orbit-node-info strong {
    color: #19122e !important;
}

#founder .center-hub-label-card {
    background: #ffffff !important;
    border-color: rgba(251, 191, 36, .9) !important;
}

#founder .center-hub-name {
    color: #19122e !important;
}

#founder .center-hub-title {
    color: #92400e !important;
}

/* Campaign reels carry no background card, displaying standalone rounded video canvas and centered title */
.section-campaigns .campaigns-track {
    gap: clamp(3.2rem, 5vw, 4.8rem);
    padding-right: clamp(3.2rem, 5vw, 4.8rem);
}

.section-campaigns .reel-card {
    width: clamp(235px, 18.5vw, 275px);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-campaigns .reel-video-wrap {
    aspect-ratio: 9 / 16;
    border-radius: 28px;
    background: #0b0716;
}

.section-campaigns .reel-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.section-campaigns .speaker-icon,
.section-campaigns .speaker-icon.is-muted {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-campaigns .reel-content {
    margin-top: 14px;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.section-campaigns .reel-title {
    color: #1877f2;
    font-size: clamp(.95rem, 1.1vw, 1.08rem);
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.reel-metrics {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-family: var(--f-display);
    font-size: clamp(0.78rem, 0.95vw, 0.88rem);
    font-weight: 800;
    color: #1877f2 !important;
    letter-spacing: 0.02em;
}

.reel-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1877f2 !important;
}

.reel-metric svg {
    width: 14px;
    height: 14px;
    color: #1877f2 !important;
    flex-shrink: 0;
}

.reel-metric-dot {
    color: rgba(24, 119, 242, 0.6) !important;
    font-size: 0.75rem;
}

@media (max-width: 600px) {
    .trust-banner .trust-track {
        gap: 2.25rem;
        padding-right: 2.25rem;
    }

    .trust-banner .client-logo {
        width: 145px;
        min-width: 145px;
        height: 70px;
    }

    .trust-banner .client-logo img {
        max-width: 150px;
        max-height: 54px;
    }

    #founder .orbit-node-info {
        bottom: -19px;
        min-height: 24px;
        padding: 3px 7px;
    }

    #founder .orbit-node-info strong {
        font-size: .58rem;
    }
}

/* ==========================================================================
   50. Obsidian Theme Enforcement
   Kept last so legacy light-surface compatibility declarations cannot leak
   back into the shared navigation, hero, content bands, forms or footer.
   ========================================================================== */

/* Pricing text was originally authored for light cards, so enforce its
   contrast again inside the final site-wide theme layer. */
.creator-tier-box .price-curr {
    color: var(--gold-light);
}

.creator-tier-box .price-val {
    color: #ffffff;
}

.creator-tier-box .tier-price-box-gold .price-val {
    color: var(--gold-light);
}

.creator-tier-box .tier-barter-tag {
    color: #fda4cf;
    background: #30091f;
    border-color: rgba(244, 114, 182, .38);
}

.creator-tier-box .tier-barter-tag-gold {
    color: #fde68a;
    background: #382308;
    border-color: rgba(251, 191, 36, .42);
}

.nav,
.nav.stuck {
    background: rgba(5, 2, 12, .92);
    border-bottom-color: rgba(192, 132, 252, .16);
    box-shadow: 0 14px 36px -24px rgba(0, 0, 0, .95);
}

.nav.stuck {
    background: rgba(5, 2, 12, .98);
}

.nav .brand-word,
.nav .nav-link,
.nav-sub a {
    color: var(--text-soft);
}

.nav .nav-link:hover,
.nav .nav-link[aria-current="page"],
.nav-sub a:hover {
    color: #ffffff;
}

.nav-sub {
    background: rgba(10, 4, 21, .98);
    border-color: rgba(192, 132, 252, .22);
    box-shadow: 0 26px 56px -24px rgba(0, 0, 0, .95), var(--glow-violet);
}

.nav-sub a:hover {
    background: rgba(139, 92, 246, .12);
}

.hero-video video {
    opacity: .9;
    filter: saturate(1.04) contrast(1.06) brightness(.76);
}

.hero-video::after {
    background:
        linear-gradient(180deg, rgba(3, 1, 8, .58) 0%, rgba(4, 2, 10, .24) 34%, rgba(5, 2, 12, .66) 72%, var(--canvas) 100%),
        radial-gradient(95% 78% at 0% 100%, rgba(5, 2, 12, .86) 0%, rgba(5, 2, 12, .35) 52%, transparent 78%),
        linear-gradient(125deg, rgba(76, 29, 149, .22) 0%, transparent 48%, rgba(190, 24, 93, .16) 100%);
}

.hero-main-title {
    color: #ffffff;
    text-shadow: 0 3px 24px rgba(0, 0, 0, .82), 0 1px 3px rgba(0, 0, 0, .95);
}

.hero-accent {
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .72));
}

.ink-band,
.stories-showcase {
    color: var(--text-soft);
    background:
        radial-gradient(62% 86% at 90% 0%, rgba(109, 40, 217, .15), transparent 64%),
        radial-gradient(56% 76% at 4% 100%, rgba(190, 24, 93, .1), transparent 64%),
        linear-gradient(150deg, #0e061b 0%, #080312 62%, #05020c 100%);
    border-block-color: var(--hair-soft);
}

.section-showreel,
.section-showreel-glimpses,
.award-gallery-section {
    background:
        radial-gradient(circle at 50% 15%, rgba(76, 29, 149, .12), transparent 58%),
        #06020e;
}

.swipe-card,
.offer-card-visual,
.visual-pillar-card,
.visual-category-card,
.visual-funnel-step,
.creator-tier-box,
.form-tabs {
    background: linear-gradient(155deg, rgba(18, 8, 33, .86), rgba(7, 3, 16, .96));
    border-color: rgba(192, 132, 252, .14);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .48);
}

.field select option {
    color: var(--text);
    background: #0a0415;
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(226, 217, 243, .48);
}

.btn-ghost,
.btn-ghost-glass {
    color: var(--text-soft);
    background: rgba(139, 92, 246, .06);
    border-color: rgba(192, 132, 252, .24);
}

.footer {
    color: var(--text-soft);
    background:
        radial-gradient(56% 70% at 96% 2%, rgba(109, 40, 217, .12), transparent 62%),
        radial-gradient(52% 64% at 2% 98%, rgba(190, 24, 93, .09), transparent 64%),
        linear-gradient(180deg, #080312 0%, #040109 100%);
    border-top-color: var(--hair);
}

.footer-video-wrap video {
    opacity: .08;
}

.footer-video-wrap::after {
    background: linear-gradient(180deg, rgba(5, 2, 12, .82) 0%, rgba(4, 1, 9, .98) 100%);
}

.footer-mail,
.footer-links a {
    color: var(--text-soft);
}

.footer-mega {
    color: rgba(192, 132, 252, .055);
}

/* ==========================================================================
   51. COMPREHENSIVE RESPONSIVE DESIGN SUITE (Desktop, Tablet, Mobile)
   Complete responsive rules for all 7 pages and all interactive components:
   - Full-Screen Hero Page Banners
   - Coverflow 3D 5-Card Carousel (Glimpses)
   - Luxury Editorial Grid (About)
   - 8 Slide-Split Service Sections (Services)
   - Creator Tiers & Pricing Ladder
   - Visual Funnel, Pillar Cards & Comparison (Why Influencer Marketing)
   - Dual Brand/Creator Contact Form & Info (Contact & Home)
   - CEO Orbit Ecosystem & Founder Showcase
   - Award Bento Gallery & UGC Grid (Glimpses)
   - Video Reels & Campaign Rails
   - Navigation, Drawer & Floating Controls
   ========================================================================== */

/* ---------- Global Fluid Base Fixes ---------- */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

img,
video,
svg {
    max-width: 100%;
}

/* ---------- 51.1. Large Tablets & Small Desktops (≤ 1200px) ---------- */
@media (max-width: 1200px) {
    .shell {
        max-width: 1140px;
        padding-inline: clamp(1.2rem, 3vw, 2rem);
    }

    .shell-wide {
        max-width: 100%;
        padding-inline: clamp(1.2rem, 3vw, 2rem);
    }

    /* Banners */
    .page-banner-section {
        height: 85vh;
        min-height: 520px;
    }

    .page-banner-title {
        font-size: clamp(2.6rem, 6vw, 4.6rem);
    }

    /* Luxury Editorial Grid (About) */
    .luxury-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .luxury-empty-cell {
        display: none;
    }

    /* Coverflow 3D Carousel (Glimpses) */
    .coverflow-stage-wrap {
        min-height: 520px;
    }

    .coverflow-deck {
        height: 500px;
    }

    .coverflow-card {
        width: 290px;
    }

    /* Award Bento Gallery (Glimpses) */
    .award-gallery-bento {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 260px;
    }

    .award-gallery-card.span-4x1 {
        grid-column: span 3;
    }

    /* UGC Reel Grid */
    .ugc-reel-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Visual Industry Categories */
    .visual-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Offer list & Services */
    .offer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    /* Footer */
    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 2.5rem;
    }
}

/* ---------- 51.2. Tablets Landscape & Medium Screens (≤ 1024px) ---------- */
@media (max-width: 1024px) {
    :root {
        --nav-h: 76px;
    }

    /* Global Headings */
    .display-1 {
        font-size: clamp(2.4rem, 6.5vw, 3.8rem);
    }

    .display-2 {
        font-size: clamp(2rem, 5.2vw, 3.2rem);
    }

    .display-3 {
        font-size: clamp(1.6rem, 4.2vw, 2.4rem);
    }

    .section {
        padding-block: clamp(3rem, 6vw, 5rem);
    }

    /* Page Banners */
    .page-banner-section {
        height: 72vh;
        min-height: 460px;
    }

    .page-banner-content {
        padding-bottom: clamp(2.5rem, 5vh, 4rem);
    }

    .page-banner-title {
        font-size: clamp(2.2rem, 5.8vw, 3.8rem);
    }

    /* Slide-Split Service Sections (Services Page) */
    .slide-split {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    .slide-split .slide-copy {
        position: static;
        max-width: 720px;
    }

    .service-showcase-media {
        max-width: 600px;
        margin-top: 1.5rem;
    }

    .slide-split .offer-grid-visual {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    /* Coverflow 3D Carousel (Glimpses Page) */
    .coverflow-stage-wrap {
        min-height: 480px;
    }

    .coverflow-deck {
        height: 460px;
    }

    .coverflow-card {
        width: 260px;
    }

    .coverflow-card-media {
        height: 155px;
    }

    /* Visual Infographics (Why Influencer Marketing) */
    .visual-funnel-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .visual-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .visual-compare-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Creator Tiers Ladder */
    .creator-tiers-ladder {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    /* Award Bento Gallery */
    .award-gallery-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 240px;
    }

    .award-gallery-card.span-2x2 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .award-gallery-card.span-4x1 {
        grid-column: span 2;
    }

    /* Contact Form & Wrapper */
    .form-wrap {
        grid-template-columns: 1fr;
        gap: 2.8rem;
    }

    .form-wrap > div:first-child {
        max-width: 680px;
    }

    /* Founder / CEO Orbit */
    .ceo-orbit-wrapper {
        height: 600px;
    }

    .ceo-orbit-stage {
        width: min(360px, 80vw);
        height: min(360px, 80vw);
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.2rem;
    }
}

/* ---------- 51.3. Tablets Portrait & Phablets (≤ 768px) ---------- */
@media (max-width: 768px) {
    :root {
        --nav-h: 70px;
        --gutter: 1.25rem;
    }

    .shell {
        padding-inline: var(--gutter);
    }

    .shell-wide {
        padding-inline: var(--gutter);
    }

    /* Navigation */
    .nav-inner {
        padding-inline: 1rem;
    }

    .brand-word {
        font-size: 1.15rem;
    }

    .nav-icons {
        display: none;
    }

    .nav-cta .btn {
        display: none;
    }

    .burger {
        display: block;
    }

    /* Full-Screen Page Banner Adaptation */
    .page-banner-section {
        height: 60vh;
        min-height: 400px;
    }

    .page-banner-content {
        padding-bottom: 2.2rem;
        padding-top: calc(var(--nav-h) + 1rem);
    }

    .page-banner-eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        margin-bottom: 0.4rem;
    }

    .page-banner-title {
        font-size: clamp(2rem, 7.5vw, 3.2rem);
        line-height: 1.06;
    }

    /* Hero Section (Home) */
    .hero {
        padding-top: calc(var(--nav-h) + 1.2rem);
        padding-bottom: clamp(3.5rem, 8vh, 5rem);
        min-height: auto;
    }

    .hero-inner {
        padding-right: var(--gutter);
    }

    .hero-main-title {
        font-size: clamp(2rem, 8.5vw, 2.9rem);
        line-height: 1.08;
        letter-spacing: -0.03em;
        max-width: none;
    }

    .hero-lead {
        font-size: 1rem;
        line-height: 1.5;
        margin-top: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.8rem;
        margin-top: 1.5rem;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-pillars {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.8rem;
    }

    .hero-pillar {
        width: 100%;
        padding: 0.9rem 1.1rem;
    }

    .hero-scroll {
        display: none;
    }

    /* Trust Logos Marquee */
    .trust-banner .trust-band {
        padding-block: 1rem 1.25rem;
    }

    .trust-banner .trust-track {
        gap: 2rem;
        padding-right: 2rem;
    }

    .trust-banner .client-logo {
        width: 130px;
        min-width: 130px;
        height: 60px;
    }

    .trust-banner .client-logo img {
        max-width: 120px;
        max-height: 48px;
    }

    /* Value Voice Vision Strip */
    .vvv {
        font-size: clamp(0.72rem, 2.5vw, 0.88rem);
        padding-block: 0.85rem;
        letter-spacing: 0.12em;
    }

    /* Luxury Editorial Grid (About Page) */
    .luxury-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .luxury-grid-cell {
        aspect-ratio: auto;
        min-height: 180px;
        padding: 1.2rem;
    }

    .luxury-card-title {
        font-size: 1.1rem;
    }

    /* Coverflow 3D Carousel (Glimpses Page) */
    .coverflow-stage-wrap {
        min-height: 450px;
    }

    .coverflow-deck {
        height: 430px;
    }

    .coverflow-card {
        width: 220px;
    }

    .coverflow-card-media {
        height: 130px;
    }

    .coverflow-card-body {
        padding: 0.85rem;
    }

    .coverflow-card-name {
        font-size: 0.92rem;
        margin-bottom: 0.25rem;
    }

    .coverflow-card-desc {
        font-size: 0.78rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .coverflow-card-stat .stat-num {
        font-size: 0.98rem;
    }

    .coverflow-card-stat .stat-label {
        font-size: 0.65rem;
    }

    .coverflow-arrow-btn {
        width: 38px;
        height: 38px;
    }

    .coverflow-arrow-btn.prev {
        left: 4px;
    }

    .coverflow-arrow-btn.next {
        right: 4px;
    }

    .coverflow-arrow-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Award Bento Gallery (Glimpses) */
    .award-gallery-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 1.2rem;
    }

    .award-gallery-card {
        aspect-ratio: 16 / 10;
        min-height: 240px;
    }

    .award-gallery-card.span-2x2,
    .award-gallery-card.span-2x1,
    .award-gallery-card.span-1x2,
    .award-gallery-card.span-4x1 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-filters {
        gap: 0.45rem;
        margin-bottom: 1.8rem;
    }

    .gallery-filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.72rem;
    }

    /* Industry Categories Grid */
    .visual-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .visual-category-card {
        min-height: 190px;
        padding: 1.2rem;
    }

    /* UGC Reel Grid */
    .ugc-reel-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    /* Visual Funnel & Infographics */
    .visual-funnel-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .visual-pillars-grid {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .visual-pillar-card {
        padding: 1.35rem;
    }

    .visual-compare-col {
        padding: 1.5rem;
    }

    /* Slide-Split Layouts (Services Page) */
    .slide-split .offer-grid-visual {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .offer-card-visual {
        padding: 1.3rem;
    }

    /* Creator Tiers Ladder */
    .creator-tiers-ladder {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        max-width: 480px;
        margin-inline: auto;
    }

    /* Campaign Video Reels Rail */
    .section-campaigns .campaigns-track {
        gap: 1.8rem;
        padding-right: 1.8rem;
    }

    .section-campaigns .reel-card {
        width: 210px;
        min-width: 210px;
    }

    .section-campaigns .reel-video-wrap {
        border-radius: 20px;
    }

    /* Stats Grid */
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .stat-box {
        padding: 1.4rem;
    }

    /* Contact Details & List */
    .contact-list {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .contact-row {
        padding: 0.85rem 1rem;
    }

    /* Forms */
    .form {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

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

    .form .field.wide {
        grid-column: 1;
    }

    .form-toggle-wrap {
        width: 100%;
    }

    .form-toggle-btn {
        flex: 1;
        padding: 0.55rem 0.6rem;
        font-size: 0.76rem;
    }

    /* CTA Band */
    .cta-band {
        padding-block: 3.5rem;
        text-align: center;
    }

    .cta-band .shell {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.4rem;
    }

    .cta-band .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    /* Watermark decoration */
    .watermark {
        font-size: 10rem;
        opacity: 0.03;
    }

    /* Stickers */
    .sticker {
        display: none;
    }

    /* Footer */
    .footer {
        padding-top: 3.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand-col {
        max-width: none;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        padding-block: 1.5rem;
    }

    .footer-mega {
        font-size: clamp(4rem, 15vw, 7rem);
        line-height: 0.85;
    }

    /* Floating action buttons */
    .floats {
        right: 1rem;
        bottom: 1rem;
        gap: 0.6rem;
    }

    .float-btn {
        width: 44px;
        height: 44px;
    }

    .float-whatsapp {
        width: 48px;
        height: 48px;
    }
}

/* ---------- 51.4. Mobile Phones & Narrow Screens (≤ 480px) ---------- */
@media (max-width: 480px) {
    :root {
        --nav-h: 64px;
        --gutter: 1rem;
    }

    /* Global Typography Scale */
    .display-1 {
        font-size: clamp(1.9rem, 8.8vw, 2.5rem);
        line-height: 1.08;
    }

    .display-2 {
        font-size: clamp(1.65rem, 7.5vw, 2.1rem);
        line-height: 1.12;
    }

    .display-3 {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
        line-height: 1.15;
    }

    .eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }

    .lead {
        font-size: 0.94rem;
        line-height: 1.5;
    }

    .btn {
        --btn-px: 1.3rem;
        --btn-py: 0.72rem;
        font-size: 0.78rem;
    }

    /* Page Banners */
    .page-banner-section {
        height: 52vh;
        min-height: 340px;
    }

    .page-banner-content {
        padding-bottom: 1.6rem;
    }

    .page-banner-eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }

    .page-banner-title {
        font-size: clamp(1.8rem, 8.2vw, 2.4rem);
    }

    /* Hero (Home) */
    .hero {
        padding-top: calc(var(--nav-h) + 1rem);
        padding-bottom: 3.5rem;
    }

    .hero-main-title {
        font-size: clamp(1.85rem, 8.4vw, 2.45rem);
    }

    .hero-lead {
        font-size: 0.92rem;
    }

    .hero-clients {
        height: 80px;
    }

    .hc-1 { --d: 54px; }
    .hc-2 { --d: 62px; }
    .hc-3 { --d: 52px; }

    /* Luxury Editorial Grid (About Page) */
    .luxury-grid-container {
        grid-template-columns: 1fr;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .luxury-grid-cell {
        min-height: 155px;
        padding: 1.15rem 1rem;
    }

    .luxury-card-title {
        font-size: 1.02rem;
    }

    /* Coverflow 3D Carousel (Glimpses Page) */
    .coverflow-stage-wrap {
        min-height: 400px;
    }

    .coverflow-deck {
        height: 380px;
    }

    .coverflow-card {
        width: 195px;
    }

    .coverflow-card-media {
        height: 110px;
    }

    .coverflow-card-body {
        padding: 0.7rem;
    }

    .coverflow-card-name {
        font-size: 0.86rem;
        margin-bottom: 0.15rem;
    }

    .coverflow-card-desc {
        display: none;
    }

    .coverflow-card-rating {
        margin-bottom: 0.35rem;
        font-size: 0.7rem;
    }

    .coverflow-card-foot {
        margin-top: 0.3rem;
        gap: 0.35rem;
    }

    .coverflow-card-stat .stat-num {
        font-size: 0.88rem;
    }

    .coverflow-card-stat .stat-label {
        font-size: 0.58rem;
    }

    .coverflow-cta-btn.expanded {
        padding: 0.42rem 0.72rem;
        font-size: 0.7rem;
        gap: 0.25rem;
    }

    .coverflow-arrow-btn {
        width: 34px;
        height: 34px;
    }

    .coverflow-arrow-btn.prev {
        left: 2px;
    }

    .coverflow-arrow-btn.next {
        right: 2px;
    }

    .coverflow-arrow-btn svg {
        width: 15px;
        height: 15px;
    }

    /* Visual Industry Categories */
    .visual-category-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .visual-category-card {
        min-height: 160px;
        padding: 1.1rem;
    }

    /* UGC Reel Grid */
    .ugc-reel-grid {
        grid-template-columns: 1fr;
        max-width: 250px;
        margin-inline: auto;
    }

    /* Visual Comparison Rows */
    .visual-metric-row {
        grid-template-columns: auto 1fr;
        gap: 0.65rem;
        padding: 0.75rem 0.85rem;
    }

    .metric-row-stat {
        grid-column: 1 / -1;
        text-align: left;
        padding-left: 42px;
        font-size: 0.82rem;
    }

    .compare-head-tag {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.2rem;
    }

    /* Stats Grid */
    .stats {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .stat-box {
        padding: 1.2rem;
    }

    /* Creator Tiers Box */
    .creator-tier-box {
        border-radius: 18px;
    }

    .tier-box-media {
        aspect-ratio: 16 / 11;
    }

    .tier-box-body {
        padding: 1.1rem;
    }

    /* Contact Details */
    .contact-row {
        font-size: 0.84rem;
        padding: 0.75rem 0.9rem;
        gap: 0.75rem;
    }

    .contact-row .ic {
        width: 36px;
        height: 36px;
    }

    /* Campaign Reels */
    .section-campaigns .reel-card {
        width: 175px;
        min-width: 175px;
    }

    .section-campaigns .reel-title {
        font-size: 0.82rem;
    }

    /* Lightbox Modal */
    .lightbox video {
        max-height: 60vh;
        border-radius: 12px;
    }

    /* CEO Orbit Stage */
    .ceo-orbit-wrapper {
        height: 440px;
    }

    .center-hub-avatar-frame {
        width: 135px;
        height: 135px;
    }

    .orbit-node-inner {
        width: 48px;
        height: 48px;
    }

    /* Footer Mega Text */
    .footer-mega {
        font-size: clamp(3.2rem, 16vw, 5rem);
    }
}

/* ========================================================================
   51.5 RESPONSIVE HARDENING — FINAL SHARED LAYER
   Applies consistently to every route after the legacy and feature styles.
   ======================================================================== */

@media (max-width: 1080px) {
    /* Keep banners readable without retaining desktop-height artwork. */
    .page-banner-section {
        height: 70vh;
        min-height: 440px;
    }

    .page-banner-overlay {
        background: linear-gradient(180deg,
                rgba(9, 5, 20, .44) 0%,
                rgba(9, 5, 20, .22) 34%,
                rgba(9, 5, 20, .62) 65%,
                rgba(9, 5, 20, .96) 100%);
    }

    .page-banner-content .shell,
    .page-head .shell,
    .section-head {
        max-width: min(100%, 760px);
    }

    /* Service, story and contact layouts must never retain a side column. */
    .slide-split,
    .stories-container,
    .form-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .slide-split {
        gap: clamp(1.8rem, 4vw, 2.8rem);
    }

    .slide-split .slide-copy {
        position: static;
    }

    .slide-split .offer-grid-visual,
    .offer-grid-visual {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cinematic-screen-stage,
    .floating-showreel-wrapper {
        width: min(100%, 860px);
        margin-inline: auto;
    }

    .ceo-orbit-wrapper {
        height: min(600px, 74vw);
        min-height: 500px;
    }

    .ceo-orbit-stage {
        width: min(360px, 74vw);
        height: min(360px, 74vw);
    }

    .coverflow-stage-wrap {
        isolation: isolate;
        touch-action: pan-y;
    }
}

@media (max-width: 768px) {
    .section {
        padding-block: clamp(2.8rem, 9vw, 4rem);
    }

    .page-banner-section {
        height: 60vh;
        min-height: 390px;
    }

    .page-banner-img {
        object-position: center;
    }

    .page-banner-content {
        padding-inline: 0;
    }

    .section-head {
        margin-bottom: clamp(1.5rem, 6vw, 2.4rem);
    }

    .section-head .lead,
    .page-head .lead {
        max-width: 60ch;
    }

    .luxury-grid-container,
    .visual-category-grid,
    .offer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cinematic-screen-stage {
        margin-top: 1.5rem;
        perspective: none;
    }

    .cinematic-screen-housing:hover,
    .floating-showreel-frame:hover {
        transform: none;
    }

    .showreel-waves-bg,
    .showreel-ambient-glow,
    .screen-ambient-glow {
        opacity: .7;
    }

    .form-wrap > div:first-child,
    .form {
        min-width: 0;
    }

    .contact-row strong,
    .contact-row small,
    .field input,
    .field textarea,
    .field select {
        overflow-wrap: anywhere;
    }

    .drawer-menu a,
    .drawer-foot a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .coverflow-arrow-btn,
    .coverflow-dot,
    .media-btn,
    .gallery-filter-btn {
        touch-action: manipulation;
    }
}

@media (max-width: 480px) {
    .section {
        padding-block: 2.75rem;
    }

    .page-banner-section {
        height: 60svh;
        min-height: 340px;
    }

    .page-banner-title,
    .page-head .display-1,
    .section-head .display-2,
    .section-head .display-3 {
        overflow-wrap: anywhere;
    }

    .luxury-grid-container,
    .visual-category-grid,
    .offer,
    .slide-split .offer-grid-visual,
    .offer-grid-visual {
        grid-template-columns: minmax(0, 1fr);
    }

    .luxury-grid-cell {
        min-width: 0;
    }

    .cinematic-screen-stage,
    .floating-showreel-wrapper {
        margin-top: 1.25rem;
        perspective: none;
    }

    .cinematic-screen-housing {
        padding: 6px;
        border-radius: 18px;
    }

    .screen-top-bezel {
        height: 10px;
    }

    .floating-showreel-frame {
        border-radius: 18px;
        animation: none;
    }

    .ceo-orbit-wrapper {
        height: 420px;
        min-height: 0;
        border-radius: 20px;
    }

    .ceo-orbit-stage {
        width: min(280px, 78vw);
        height: min(280px, 78vw);
    }

    .orbit-stat-pill {
        transform: scale(.8);
    }

    .coverflow-showcase-section {
        overflow: hidden;
    }

    .coverflow-stage-wrap {
        min-height: 360px;
        perspective: none;
    }

    .coverflow-deck {
        height: 345px;
        perspective: none;
    }

    .coverflow-card {
        width: min(72vw, 260px);
        transform-style: flat;
    }

    .coverflow-arrow-btn {
        width: 44px;
        height: 44px;
        top: auto;
        bottom: .5rem;
        transform: none;
    }

    .coverflow-arrow-btn.prev {
        left: calc(50% - 52px);
    }

    .coverflow-arrow-btn.next {
        right: calc(50% - 52px);
    }

    .contact-row,
    .form-toggle-btn,
    .form .btn,
    .cta-band .btn {
        min-height: 44px;
    }

    .contact-row {
        align-items: flex-start;
    }

    .footer-links a {
        padding-block: .3rem;
    }
}

/* ========================================================================
   51.6 SINGLE DOCUMENT SCROLLER
   `overflow-x: hidden` on both root elements can promote the body to a second
   vertical scroll container. Keep the document as the only page scroller and
   use `clip` for horizontal artwork that intentionally reaches the viewport.
   ======================================================================== */
html {
    overflow-x: clip;
    overflow-y: auto;
}

body {
    overflow-x: clip;
    overflow-y: visible;
}

body.nav-open {
    overflow: hidden;
}