/* =========================================================
   Alive Batman · v2
   Palette from the X avatar: midnight indigo, lavender light,
   peach accent. One typeface. Framed hero card.
   ========================================================= */

:root {
    --bg: #0a0912;
    --surface: #13121c;
    --surface-2: #1a1926;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.14);
    --text: #f4f3f8;
    --muted: #a19db0;
    --dim: #8c889c;
    --accent: #ffb18e;
    --accent-ink: #1b0f0a;

    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --inset: clamp(0.5rem, 0.9vw, 0.875rem);
    --r-lg: clamp(1.5rem, 2.4vw, 2.5rem);
    --r: 1.25rem;
    /* Grows on big monitors so content doesn't become a thin strip */
    --container: clamp(77.5rem, 62vw, 102.5rem);
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --section-y: clamp(6rem, 11vw, 10rem);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fluid root size: the whole UI is in rem, so it scales on large monitors
   (1x up to ~1900px wide, ~1.34x at 2560px, capped at 1.5x). */
html { font-size: clamp(100%, 0.84vw, 150%); }

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.625rem;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

main { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0.1875rem;
    border-radius: 0.5rem;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3.75rem;
    z-index: 200;
    padding: 0.625rem 1rem;
    border-radius: 62.4375rem;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- Type ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--accent);
    font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.h2 {
    margin-top: 0.875rem;
    font-size: clamp(2.125rem, 4.4vw, 3.75rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.lead {
    font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.muted { color: var(--muted); }
.small { font-size: 0.875rem; line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    height: 3.25rem;
    padding: 0 0.375rem 0 1.375rem;
    border-radius: 62.4375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, background 0.25s ease, border-color 0.25s ease;
}

.btn-lg { height: 3.75rem; padding-left: 1.75rem; font-size: 1rem; }

.btn-ico {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: transform 0.35s var(--ease);
}

.btn-lg .btn-ico { width: 3rem; height: 3rem; }

.btn-ico svg,
.copy-ico {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn:hover { transform: translateY(-2px); }
.btn:hover .btn-ico { transform: rotate(-45deg); }

.btn-light { background: #fff; color: #0a0912; }
.btn-light .btn-ico { background: var(--accent); color: var(--accent-ink); }
.btn-light:hover { box-shadow: 0 0.875rem 2.125rem -0.75rem rgba(255, 255, 255, 0.45); }

.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent .btn-ico { background: #fff; color: #0a0912; }
.btn-accent:hover { box-shadow: 0 0.875rem 2.125rem -0.625rem rgba(255, 177, 142, 0.6); }

.btn-ghost { padding: 0 1.5rem; border: 1px solid var(--line-2); color: var(--text); gap: 0.625rem; }
.btn-ghost:hover { border-color: var(--text); }

.btn-text {
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.75rem 0.25rem;
    transition: color 0.2s ease;
}
.btn-text:hover { color: var(--text); }

.link-arrow {
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.625rem 0;
    transition: color 0.2s ease;
}
.link-arrow:hover { color: var(--accent); }

/* ---------- Nav ---------- */
.nav {
    position: fixed;
    inset: 1.375rem 0 auto;
    z-index: 100;
    padding: 0 calc(var(--inset) + clamp(0.75rem, 2vw, 1.75rem));
    pointer-events: none;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: calc(var(--container) + 2rem);
    margin: 0 auto;
    padding: 0.5rem 0.5rem 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-radius: 62.4375rem;
    pointer-events: auto;
    transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

.nav.is-scrolled .nav-inner {
    background: rgba(19, 18, 28, 0.72);
    border-color: var(--line);
    backdrop-filter: blur(1.125rem) saturate(160%);
    -webkit-backdrop-filter: blur(1.125rem) saturate(160%);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.brand-mark {
    width: 2.125rem;
    height: 2.125rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--text);
}

.brand-mark img {
    width: 1.125rem;
    height: 1.125rem;
    filter: brightness(0);
    transition: transform 0.6s var(--ease);
}

.brand:hover .brand-mark img { transform: rotate(360deg); }

.nav-links { display: flex; gap: 0.25rem; }

.nav-links a {
    padding: 0.5rem 0.875rem;
    border-radius: 62.4375rem;
    color: rgba(244, 243, 248, 0.72);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-links a:hover,
.nav-links a.is-active {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: 62.4375rem;
    background: var(--text);
    color: #0a0912;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.3s var(--ease), background 0.25s ease, box-shadow 0.3s ease;
}

.nav-cta svg {
    width: 0.9375rem;
    height: 0.9375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s var(--ease);
}

.nav-cta:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 1.875rem -0.625rem rgba(255, 177, 142, 0.6);
}

.nav-cta:hover svg { transform: translate(2px, -2px); }

/* ---------- Hero (framed card) ---------- */
.hero {
    position: relative;
    z-index: 2;
    display: flex;
    margin: var(--inset) var(--inset) 0;
    min-height: max(40rem, calc(100svh - var(--inset)));
    border-radius: var(--r-lg);
    overflow: hidden;
    isolation: isolate;
    background: #12111d;
    /* Separation through light, not outlines: a faint rim of light on the
       bottom edge plus a deep soft shadow that falls onto the strip */
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.07),
        0 2rem 3.5rem -1rem rgba(0, 0, 0, 0.85),
        0 0.5rem 1rem -0.25rem rgba(0, 0, 0, 0.5);
}

/* Lighting from the avatar: lavender key light upper-left, peach rim behind the figure */
/* Each glow fades on an eased curve (many stops) instead of a straight
   line, and the whole layer is blurred, so no circle edges are visible.
   The layer extends past the card so the blur has no dark rim. */
.hero-light {
    position: absolute;
    inset: -12%;
    z-index: -2;
    filter: blur(3rem);
    background:
        radial-gradient(ellipse 60% 62% at 22% 10%,
            rgba(132, 124, 176, 0.42) 0%, rgba(132, 124, 176, 0.36) 12%, rgba(132, 124, 176, 0.27) 25%,
            rgba(132, 124, 176, 0.18) 38%, rgba(132, 124, 176, 0.10) 52%, rgba(132, 124, 176, 0.045) 66%,
            rgba(132, 124, 176, 0.012) 80%, transparent 92%),
        radial-gradient(ellipse 40% 52% at 70% 44%,
            rgba(255, 177, 142, 0.24) 0%, rgba(255, 177, 142, 0.20) 12%, rgba(255, 177, 142, 0.15) 25%,
            rgba(255, 177, 142, 0.10) 38%, rgba(255, 177, 142, 0.055) 52%, rgba(255, 177, 142, 0.024) 66%,
            rgba(255, 177, 142, 0.006) 80%, transparent 92%),
        radial-gradient(ellipse 55% 60% at 96% 96%,
            rgba(99, 85, 103, 0.34) 0%, rgba(99, 85, 103, 0.26) 18%, rgba(99, 85, 103, 0.16) 36%,
            rgba(99, 85, 103, 0.07) 56%, rgba(99, 85, 103, 0.02) 76%, transparent 92%),
        linear-gradient(170deg, #21202e 0%, #1c1a29 25%, #171523 50%, #12111c 75%, #0e0d17 100%);
}

/* Film grain on top of the (blurred) light: dithers away any banding */
.hero::before,
.cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.06;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shade so the services row reads over the figure */
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 34%;
    background: linear-gradient(to bottom, transparent, rgba(10, 9, 18, 0.9));
    pointer-events: none;
}

/* Stage = the character plus its floating chips, positioned as one unit.
   --px / --py come from the mouse (script.js) for a subtle parallax. */
.hero-stage {
    --px: 0;
    --py: 0;
    position: absolute;
    /* Anchored to the content column's right edge, not the screen edge */
    right: max(0px, calc((100% - var(--container)) / 2 - 2.5rem));
    bottom: 0;
    z-index: -1;
    height: min(90%, 68.75rem);
    aspect-ratio: 904 / 1093;
    max-width: min(52%, calc(var(--container) * 0.56));
    pointer-events: none;
    user-select: none;
}

.hero-figure {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
    translate: calc(var(--px) * -0.5rem) calc(var(--py) * -0.35rem);
    transition: translate 0.6s var(--ease);
    animation: rise 1.2s var(--ease) both;
}

@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } }

/* Floating glass chips */
.chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.125rem 0.75rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.125rem;
    background: rgba(24, 22, 36, 0.55);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1.25rem 2.5rem -0.75rem rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    /* parallax: chips move more than the figure, so they feel in front */
    translate: calc(var(--px) * 1.1rem) calc(var(--py) * 0.8rem);
    transition: translate 0.6s var(--ease);
    animation: chip-in 0.9s var(--ease) both, float 6s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    /* Own GPU layer: the slow idle float moves at sub-pixel precision
       instead of snapping pixel by pixel (which reads as jitter) */
    will-change: transform, translate;
    backface-visibility: hidden;
}

/* Chips arc around the character's silhouette on its right side:
   high off the hair tips, furthest out beside the back of the head,
   curving back in by the hood, low on the shoulder. Never over the face.
   --y / --x are per chip (% of the stage); scale is a separate property so
   it doesn't fight the float animation (transform) or parallax (translate). */
.chips { position: absolute; inset: 0; }

.chips .chip {
    position: absolute;
    top: var(--y);
    right: var(--x);
    scale: var(--chips-scale, 1);
    transform-origin: right center;
}

.chips .chip:nth-child(1) { --y: 8%;  --x: 1%;   animation-delay: 0.5s, 0s; }
.chips .chip:nth-child(2) { --y: 25%; --x: -15%; animation-delay: 0.62s, 1.2s; animation-duration: 0.9s, 7s; }
.chips .chip:nth-child(3) { --y: 42%; --x: -8%;  animation-delay: 0.74s, 0.6s; animation-duration: 0.9s, 6.5s; }
.chips .chip:nth-child(4) { --y: 59%; --x: 1%;   animation-delay: 0.86s, 1.8s; animation-duration: 0.9s, 7.5s; }

/* Mid-size screens: the character sits near the card edge, so the arc
   tightens inward and the chips get smaller */
@media (max-width: 1699px) {
    .chips { --chips-scale: 0.86; }
    .chips .chip:nth-child(1) { --x: 3%; }
    .chips .chip:nth-child(2) { --x: -3%; }
    .chips .chip:nth-child(3) { --x: 1%; }
    .chips .chip:nth-child(4) { --x: 6%; }
}
@media (max-width: 1380px) {
    .chips { --chips-scale: 0.76; }
    .chips .chip:nth-child(2) { --x: 2%; }
}
/* Short screens: three chips are enough */
@media (max-height: 820px) and (min-width: 861px) { .chips .chip:nth-child(4) { display: none; } }
@media (max-height: 640px) and (min-width: 861px) { .chips { --chips-scale: 0.68; } }

.chip-logo {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    object-fit: cover;
    box-shadow: 0 0.375rem 1rem -0.25rem rgba(0, 0, 0, 0.5);
}
.chip-icon--years { background: var(--accent); box-shadow: 0 0.375rem 1rem -0.25rem rgba(255, 177, 142, 0.55); }
.chip-icon--years svg { margin: 0; fill: var(--accent-ink); }

@keyframes chip-in { from { opacity: 0; transform: translate3d(0, 1rem, 0) scale(0.96); } }
@keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -0.6rem, 0); }
}

.chip-text { display: flex; flex-direction: column; line-height: 1.25; }
.chip-text strong { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.chip-text small { color: var(--muted); font-size: 0.75rem; font-weight: 500; }

.chip-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
}

.chip-icon svg { width: 1rem; height: 1rem; margin-left: 2px; fill: #fff; }
.chip-icon--yt { background: #ff0033; box-shadow: 0 0.375rem 1rem -0.25rem rgba(255, 0, 51, 0.55); }
.chip-icon--x { background: #000; border: 1px solid rgba(255, 255, 255, 0.18); }
.chip-icon--x svg { margin: 0; }

.chip-logos { display: flex; }

.chip-logos img {
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid #1a1926;
    border-radius: 50%;
    object-fit: cover;
}

.chip-logos img + img { margin-left: -0.5rem; }

/* Availability badge above the name */
.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
    padding: 0.4375rem 0.875rem 0.4375rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(244, 243, 248, 0.8);
    font-size: 0.8125rem;
    font-weight: 600;
    animation: rise 1s var(--ease) both;
}

.hero-status .dot { animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15); }
    50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding-top: clamp(7.5rem, 19vh, 26.25rem);
    padding-bottom: clamp(1.75rem, 4.5vh, 3rem);
}

.hero-copy { max-width: min(52%, 47.5rem); }

/* Small laptops: keep the copy narrower so it stays clear of the face */
@media (max-width: 1180px) {
    .hero-copy { max-width: 46%; }
}

/* Short screens: drop the badge so the hero fits */
@media (max-height: 640px) and (min-width: 861px) {
    .hero-status { display: none; }
}

.hero-hey {
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    animation: rise 1s var(--ease) both;
}

.hero-title {
    margin-top: 0.375rem;
    font-size: clamp(3.5rem, min(8.6vw, 14vh), 10.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.045em;
    animation: rise 1s var(--ease) 0.08s both;
}

.hero-lead {
    margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    animation: rise 1s var(--ease) 0.16s both;
}

.hero-lead span { color: var(--accent); }

.hero-sub {
    margin-top: 0.625rem;
    max-width: 38rem;
    color: rgba(244, 243, 248, 0.68);
    font-size: 0.9375rem;
    line-height: 1.6;
    animation: rise 1s var(--ease) 0.22s both;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
    animation: rise 1s var(--ease) 0.28s both;
}

.hero-services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2.25rem);
    animation: rise 1s var(--ease) 0.36s both;
}

.hero-services li {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hero-services span {
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 700;
}

.hero-services small {
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
}

@media (max-height: 640px) and (min-width: 861px) { .hero-services small { display: none; } }

/* ---------- Trust strip (tucked under the hero card) ---------- */
.trust {
    position: relative;
    z-index: 1;
    margin: calc(-1 * var(--r-lg)) var(--inset) 0;
    padding: calc(var(--r-lg) + clamp(1.75rem, 3vw, 2.5rem)) 0 clamp(1.75rem, 3vw, 2.5rem);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    /* A step lighter than the hero's dark bottom, shaded where the hero's
       shadow falls and lifting toward the bottom edge */
    background: linear-gradient(180deg, #121119 0%, #171620 45%, #1a1924 100%);
}

.trust-inner {
    display: flex;
    align-items: center;
    gap: clamp(1.75rem, 4vw, 4rem);
}

.trust-label {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.trust-loop {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    /* room for the hovered brand to scale without being clipped */
    padding: 0.5rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 90%, transparent);
}

.trust-track {
    display: flex;
    gap: clamp(2.25rem, 3.6vw, 3.5rem);
    width: max-content;
    padding-right: clamp(2.25rem, 3.6vw, 3.5rem);
    /* Moved by script.js in exact pixels (smooth ease-to-stop on hover) */
    will-change: transform;
}

.trust-track li {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(244, 243, 248, 0.75);
    font-size: clamp(1rem, 1.3vw, 1.1875rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.trust-track img {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    object-fit: cover;
    filter: grayscale(1) brightness(1.2);
    opacity: 0.85;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.trust-track a {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.75rem;
    transition: transform 0.35s var(--ease), color 0.3s ease;
}

/* Hovered brand grows slightly above the rest */
.trust-track a:hover,
.trust-track a:focus-visible {
    color: #fff;
    transform: scale(1.14);
}
.trust-track a:hover img,
.trust-track a:focus-visible img { filter: none; opacity: 1; }

/* ---------- Sections ---------- */
.section { padding-top: var(--section-y); }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    flex-wrap: wrap;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-note { max-width: 21.25rem; font-size: 0.9375rem; }

/* Work */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.2vw, 2rem);
}

.work-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r);
    background: #000;
    /* keeps the rounded clip crisp on the zoomed image in Safari */
    isolation: isolate;
    transition: transform 0.45s var(--ease), box-shadow 0.4s ease;
}

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

/* Hover: lift + slight tilt, peach play button */
.work-card:hover .work-media {
    transform: translateY(-0.375rem) rotate(-0.6deg);
    box-shadow: 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, 0.9);
}

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

/* Click-to-play handoff without jitter: the card keeps its hover pose
   (no snap), and the player fades in over the zoomed thumbnail. */
.work-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.work-media video.is-ready {
    opacity: 1;
    background: #000;
}

/* Thumbnail dims slightly on hover so the play button stands out */
.work-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(10, 9, 18, 0.15) 0%, rgba(10, 9, 18, 0.45) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.work-card:hover .work-media::after { opacity: 1; }
.work-card:hover .work-media:has(video)::after { opacity: 0; }

/* Play button: frosted glass at rest, peach on hover */
.play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0.75rem 2rem -0.5rem rgba(0, 0, 0, 0.55);
    translate: -50% -50%;
    transition:
        scale 0.45s var(--ease),
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.45s ease;
}

/* Rounded icon. The path is drawn with its centroid at the viewBox centre
   (12,12), which is the optical centre of a play triangle: no extra offset. */
.play svg {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    fill: currentColor;
    transition: transform 0.45s var(--ease);
}

/* Card hover: button turns white */
.work-card:hover .play {
    border-color: #fff;
    background: #fff;
    color: #0a0912;
    box-shadow: 0 0.75rem 2rem -0.5rem rgba(0, 0, 0, 0.6);
}

/* Button hover: it grows, with a soft white halo */
.play:hover {
    scale: 1.2;
    box-shadow:
        0 0 0 0.5rem rgba(255, 255, 255, 0.14),
        0 1rem 2.5rem -0.5rem rgba(0, 0, 0, 0.6);
}

.play:active { scale: 0.96; transition-duration: 0.12s; }

/* After click: the button fades out smoothly while the player fades in */
.play.is-leaving {
    opacity: 0;
    scale: 0.9;
    pointer-events: none;
    transition: opacity 0.3s ease, scale 0.3s var(--ease);
}

.work-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.125rem 0.25rem 0;
}

.work-info h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.work-info p {
    margin-top: 2px;
    color: var(--dim);
    font-size: 0.875rem;
}

.views {
    flex-shrink: 0;
    margin: -0.75rem -0.5rem;
    padding: 0.75rem 0.5rem;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s ease;
}

.views:hover { color: var(--accent); }

/* Results */
.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
}

.stat { padding: clamp(1.75rem, 3vw, 2.75rem); }
.stat + .stat { border-left: 1px solid var(--line); }

.stat strong {
    display: block;
    font-size: clamp(2.5rem, 4.6vw, 4.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.stat span {
    display: block;
    margin-top: 0.75rem;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.45;
}






/* Continues the section above (no heading, tight gap) */
.section--cont { padding-top: clamp(2.5rem, 4vw, 4rem); }

/* Highlights on X: totals strip + post leaderboard */
.hl-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem clamp(1.75rem, 4vw, 3.5rem);
    margin-bottom: 1.5rem;
}

.hl-totals div { display: flex; align-items: baseline; gap: 0.5rem; }

.hl-totals strong {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.hl-totals span { color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.hl-totals p { margin-left: auto; color: var(--dim); font-size: 0.875rem; }

.hl {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
}

.hl-head,
.hl-row a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 5.5rem) 11rem;
    align-items: center;
    gap: 1rem;
    padding: 0 clamp(1rem, 2vw, 1.75rem);
}

.hl-head {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    color: var(--dim);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hl-row + .hl-row { border-top: 1px solid var(--line); }

.hl-row a {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    transition: background 0.25s ease;
}

.hl-row a:hover { background: var(--surface-2); }

.hl-post {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.hl-post img {
    width: 6.5rem;
    height: 3.65625rem;
    flex-shrink: 0;
    border-radius: 0.625rem;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.hl-row a:hover .hl-post img { transform: scale(1.04); }

.hl-post > span { display: flex; flex-direction: column; min-width: 0; }
.hl-post strong { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.hl-post small { color: var(--dim); font-size: 0.8125rem; }

.hl-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hl-stat svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hl-r svg { color: #1d9bf0; }
.hl-rt svg { color: #00ba7c; }
.hl-l svg { color: #f91880; fill: #f91880; }
.hl-v svg { color: var(--accent); }

/* Views: number + a bar showing each post's reach relative to the top post */
.hl-v { position: relative; }
.hl-v b { min-width: 2.75rem; font-weight: 700; }

.hl-v i {
    position: relative;
    flex: 1;
    height: 0.375rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.hl-v i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 177, 142, 0.55), var(--accent));
}

@media (max-width: 860px) {
    .hl-head { display: none; }
    .hl-row a {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.875rem 0.75rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .hl-post { grid-column: 1 / -1; }
    .hl-v i { display: none; }
    .hl-totals p { margin-left: 0; width: 100%; }
}

/* Experience timeline */
.xp { border-top: 1px solid var(--line-2); }

.xp-row {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1.5rem clamp(1.5rem, 4vw, 4rem);
    padding: clamp(1.5rem, 2.4vw, 2.25rem) 0;
    border-bottom: 1px solid var(--line);
}

.xp-when {
    padding-top: 0.625rem;
    color: var(--dim);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.xp-row:first-child .xp-when { color: var(--accent); }

.xp-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.xp-head img,
.xp-mark {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    object-fit: cover;
}

.xp-mark {
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    color: var(--text);
    font-weight: 800;
}

/* Two full-size logos side by side, slightly overlapping */
.xp-pair {
    display: flex;
    flex-shrink: 0;
}

.xp-head .xp-pair img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 2px var(--bg);
}

.xp-head .xp-pair img + img { margin-left: -0.625rem; }

.xp-mark--discord { background: #5865f2; border-color: transparent; }
.xp-mark--discord svg { width: 1.25rem; height: 1.25rem; fill: #fff; }

.xp-head h3 {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.xp-sub { color: var(--dim); font-size: 0.8em; font-weight: 600; }

.xp-head p {
    margin-top: 0.125rem;
    color: var(--muted);
    font-size: 0.9375rem;
}

.xp-points {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.125rem;
    padding-left: 3.5rem;
}

.xp-points li {
    position: relative;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.xp-points li::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0.62em;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--accent);
}

@media (max-width: 640px) {
    .xp-row { grid-template-columns: 1fr; gap: 0.75rem; }
    .xp-when { padding-top: 0; }
    .xp-points { padding-left: 1rem; }
}

/* Services */
.services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.services li {
    display: flex;
    flex-direction: column;
    padding: clamp(1.375rem, 2.2vw, 1.875rem);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    transition: border-color 0.3s ease, transform 0.4s var(--ease), background 0.3s ease;
}

.services li:hover {
    border-color: rgba(255, 177, 142, 0.45);
    background: var(--surface-2);
    transform: translateY(-0.25rem);
}

.services span { color: var(--accent); font-size: 0.8125rem; font-weight: 700; }
.services h3 { margin-top: 1.75rem; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; }
.services p { margin-top: 0.5rem; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }

/* Process */
.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.steps li { padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.steps li:first-child { border-top-color: var(--accent); }

.steps span {
    color: var(--dim);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.steps li:first-child span { color: var(--accent); }
.steps h3 { margin-top: 1.125rem; font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.02em; }
.steps p { margin-top: 0.5rem; color: var(--muted); font-size: 0.9375rem; }

/* CTA card */
.cta { padding: var(--section-y) var(--inset) var(--inset); }

.cta-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4rem, 9vw, 8rem) var(--gutter);
    border-radius: var(--r-lg);
    background: #12111d;
    text-align: center;
}

.cta-card .hero-light {
    background:
        radial-gradient(ellipse 62% 72% at 50% 4%,
            rgba(132, 124, 176, 0.40) 0%, rgba(132, 124, 176, 0.32) 14%, rgba(132, 124, 176, 0.22) 28%,
            rgba(132, 124, 176, 0.12) 44%, rgba(132, 124, 176, 0.05) 60%, rgba(132, 124, 176, 0.015) 76%, transparent 90%),
        radial-gradient(ellipse 44% 54% at 50% 100%,
            rgba(255, 177, 142, 0.20) 0%, rgba(255, 177, 142, 0.15) 16%, rgba(255, 177, 142, 0.09) 34%,
            rgba(255, 177, 142, 0.04) 54%, rgba(255, 177, 142, 0.01) 74%, transparent 90%),
        linear-gradient(180deg, #21202e 0%, #1a1927 40%, #14131f 100%);
}

.dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0.25rem rgba(74, 222, 128, 0.15);
}

.cta-card .eyebrow { color: var(--muted); font-size: 0.9375rem; }

.cta-title {
    max-width: 56.25rem;
    margin: 1.25rem auto 0;
    font-size: clamp(2.25rem, 5.4vw, 4.75rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.75rem;
}

.socials {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 2.25rem;
}

.socials a {
    width: 2.875rem;
    height: 2.875rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease);
}

.socials a:hover { background: #fff; color: #0a0912; transform: translateY(-0.1875rem); }
.socials svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

/* Footer */
.footer { padding: 1.75rem 0 2.25rem; }

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--dim);
    font-size: 0.875rem;
}

.footer .brand { color: var(--muted); }
.footer-top { padding: 0.75rem 0; }
.footer-top:hover { color: var(--text); }

/* Toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1.75rem;
    z-index: 300;
    padding: 0.75rem 1.25rem;
    border-radius: 62.4375rem;
    background: #fff;
    color: #0a0912;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 1rem);
    transition: opacity 0.3s ease, transform 0.4s var(--ease);
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Reveal */
.js .reveal {
    opacity: 0;
    translate: 0 1.5rem;
    transition: opacity 0.9s var(--ease), translate 0.9s var(--ease);
    transition-delay: var(--delay, 0s);
}

.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
}

/* Stacked hero: phones, and portrait screens up to large tablets */
@media (max-width: 860px), (orientation: portrait) and (max-width: 1200px) {
    .nav-links { display: none; }

    /* Order: copy, figure, services */
    .hero { min-height: 0; flex-direction: column; }
    .hero-content { display: contents; }
    .hero-copy,
    .hero-services { padding-left: var(--gutter); padding-right: var(--gutter); }
    .hero-copy { order: 1; max-width: none; padding-top: 7.5rem; }
    .hero-stage {
        order: 2;
        position: relative;
        right: auto;
        z-index: 0;
        width: min(78%, 28.75rem);
        height: auto;
        max-width: none;
        margin: 1.75rem auto 0;
    }
    .hero-figure {
        height: auto;
        -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    }
    .chip { padding: 0.5rem 0.875rem 0.5rem 0.5rem; gap: 0.5rem; border-radius: 0.875rem; }
    .chip-text strong { font-size: 0.875rem; }
    .chip-text small { font-size: 0.6875rem; }
    .chip-icon, .chip-logo { width: 1.875rem; height: 1.875rem; border-radius: 0.625rem; }
    .chip-logos img { width: 1.5rem; height: 1.5rem; }
    /* Stacked layout: show two chips on the right only */
    .chips { --chips-scale: 0.8; }
    .chips .chip:nth-child(1) { --y: 14%; --x: -12%; }
    .chips .chip:nth-child(2) { --y: 32%; --x: -20%; }
    .chips .chip:nth-child(n + 3) { display: none; }
    .hero::after { display: none; }
    .hero-services { order: 3; position: relative; margin-top: -2.5rem; padding-bottom: 1.75rem; }

    .trust-inner { flex-direction: column; align-items: stretch; gap: 1.125rem; text-align: center; }
    .trust-label br { display: none; }
}

@media (max-width: 640px) {
    .hero-copy { padding-top: 6.5rem; }
    .hero-actions .btn { flex: 1 1 auto; justify-content: space-between; }
    .hero-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem 0.875rem; margin-top: -2rem; }
    .work-grid, .services { grid-template-columns: 1fr; }
    .services h3 { margin-top: 0.875rem; }
    .stat { padding: 1.5rem 1.125rem; }
    .cta-actions .btn { justify-content: space-between; width: 100%; }
    .btn-ghost.btn-lg { justify-content: center; }
    .footer-inner { flex-direction: column; text-align: center; }
}

/* Short laptop screens: the figure shrinks with the height, so pull it toward the text */
@media (min-width: 861px) and (max-height: 700px) and (orientation: landscape) {
    .hero-stage { right: max(8vw, calc((100% - var(--container)) / 2 + 2rem)); }
}

@media (max-width: 370px) {
    .nav .brand-name { display: none; }
}

/* Phones: shift the character left so the chips have room on its right */
@media (max-width: 640px) {
    .hero-stage { width: 76%; margin-left: 0; margin-right: auto; }
    .chips { --chips-scale: 0.78; }
    .chips .chip:nth-child(1) { --y: 12%; --x: -24%; }
    .chips .chip:nth-child(2) { --y: 30%; --x: -30%; }
}

@media (max-width: 370px) {
    .chips { --chips-scale: 0.66; }
    .chips .chip:nth-child(2) { --x: -24%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .js .reveal { opacity: 1; translate: 0 0; }
}