:root {
    --primary: #002542;
    --primary-container: #1b3b5a;
    --on-primary: #ffffff;
    /* Brand accent — purple, matching the character's jumper. Used as
       --secondary throughout so all .highlight / gradient-text / button
       hovers / etc. shift in one go. */
    --secondary: #6c3fb0;
    --secondary-container: #e9def8;
    --on-secondary-container: #2a1652;
    /* Surfaces carry a faint purple tint so the brand colour reads as
       part of the palette rather than an unrelated accent. */
    --background: #faf8ff;
    --surface: #faf8ff;
    --on-surface: #1a1230;
    --on-surface-variant: #4a4459;
    --surface-container-low: #f3eefa;
    --surface-container-lowest: #ffffff;
    --surface-container-high: #ddd1ec;
    --outline-variant: rgba(180, 170, 200, 0.32);
    --glass-bg: rgba(255, 254, 255, 0.82);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--background);
    color: var(--on-surface);
    overflow-x: hidden;
    scroll-behavior: smooth;
    line-height: 1.6;
}

/* Typography & Utils */
.highlight {
    color: var(--secondary);
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
    border-bottom: none;
    box-shadow: 0 4px 30px rgba(0, 37, 66, 0.03);
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--primary);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 32px;
    position: relative;
}

.nav-links a {
    color: var(--on-surface-variant);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s;
}

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

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

/* Sliding red indicator bar */
.nav-indicator {
    position: absolute;
    bottom: -6px;
    height: 3px;
    background: #e53935;
    border-radius: 2px;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Hero Section — scroll-driven video stage */
.hero {
    /* The header is just an outer box. The stage inside owns the scroll. */
    position: relative;
    padding: 0;
    margin: 0;
    background: var(--surface);
}

/* Tall scroll container — first 100vh of scroll = full video duration */
.hero-stage {
    position: relative;
    /* 140vh = ~40vh (≈40% of one screen) of scroll plays the full
       6.04 s animation. Much snappier — the user clears the hero in
       a normal flick of the wheel/trackpad while the video still
       advances. */
    height: 140vh;
}

/* The sticky pane that pins to the viewport while .hero-stage scrolls past */
.hero-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 120px 10% 80px;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Show the right portion of the source so the character sits in the
       far-right corner rather than central / overlapping the headline. */
    object-position: 85% center;
    z-index: 0;
    pointer-events: none;
    /* Slight contrast boost helps a 1764px source render crisply on
       higher-density displays where the cover scaling upsamples it. */
    filter: contrast(1.06) saturate(1.05);
    /* Apple's image-rendering hint reduces interpolation softness slightly. */
    image-rendering: -webkit-optimize-contrast;
    /* Translate the video physically right so the character clears the
       headline area entirely — the empty/cropped left edge gets cleaned
       up by the mask below. The Y component is set by the JS scroll
       handler and creates a subtle "video lags behind scroll" parallax. */
    transform: translateX(10%) translateY(var(--parallax-y, 0px));
    will-change: transform;
    /* Soft horizontal fade on the left so the shifted video blends into
       the page surface instead of showing a hard cropped edge. The
       leftmost ~12% is fully transparent, then ramps up over the next
       ~28% to fully opaque — the character side stays untouched. */
    -webkit-mask-image: linear-gradient(90deg,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0.18) 12%,
        rgba(0,0,0,0.55) 24%,
        rgba(0,0,0,0.90) 38%,
        rgba(0,0,0,1)    50%);
            mask-image: linear-gradient(90deg,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0.18) 12%,
        rgba(0,0,0,0.55) 24%,
        rgba(0,0,0,0.90) 38%,
        rgba(0,0,0,1)    50%);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(248,249,255,0.40) 0%, rgba(248,249,255,0.05) 30%, rgba(248,249,255,0.0) 60%, rgba(248,249,255,0.35) 100%),
        radial-gradient(120% 80% at 0% 50%, rgba(248,249,255,0.65) 0%, rgba(248,249,255,0) 55%);
}

/* Mobile: text takes the full width, so there's no "right side" to push
   the character into — re-centre and drop the mask. */
@media (max-width: 768px) {
    .hero-video {
        object-position: 50% center;
        transform: none;
        -webkit-mask-image: none;
                mask-image: none;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    will-change: transform, opacity;
    transition: transform 0.05s linear; /* JS lerp drives this */
    isolation: isolate;
}

/* Per-letter glow — stacked text-shadows form a soft halo that hugs the
   actual glyph shapes. Six layers, ramping out to 110px of reach, so
   the background fades genuinely far from each letter while the text
   itself stays sharp. */
.hero-content h1,
.hero-content p {
    text-shadow:
        0 0 6px   rgba(250, 248, 255, 1.00),
        0 0 14px  rgba(250, 248, 255, 0.95),
        0 0 28px  rgba(250, 248, 255, 0.80),
        0 0 50px  rgba(250, 248, 255, 0.60),
        0 0 80px  rgba(250, 248, 255, 0.45),
        0 0 110px rgba(250, 248, 255, 0.30);
}

/* "practical" — solid warm yellow with a navy outline. Same halo
   strength so the word stays legible against the busy video. */
.hero-content h1 .gradient-text {
    background: none;
    -webkit-background-clip: initial;
            background-clip: initial;
    color: #FFD54F;                                /* warm marker yellow */
    -webkit-text-stroke: 1.6px #002542;            /* navy outline */
            text-stroke: 1.6px #002542;
    text-shadow:
        0 0 14px  rgba(250, 248, 255, 0.95),
        0 0 28px  rgba(250, 248, 255, 0.80),
        0 0 50px  rgba(250, 248, 255, 0.55),
        0 0 80px  rgba(250, 248, 255, 0.40),
        0 2px 0   rgba(0, 37, 66, 0.50),
        0 4px 14px rgba(0, 0, 0, 0.18);
    letter-spacing: -1.5px;
    font-weight: 800;
    paint-order: stroke fill;
}

/* Subtle scroll-down hint */
.hero-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 3;
    color: var(--on-surface-variant);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
    animation: hero-hint-bob 2.2s ease-in-out infinite;
}
.hero-scroll-hint svg { opacity: 0.7; }
@keyframes hero-hint-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}

/* Reduced-motion: keep the scroll-scrubbed video (it's user-driven, not
   autonomous), but disable the autonomous parallax/hint animations. */
@media (prefers-reduced-motion: reduce) {
    .hero-content   { transition: none; }
    .hero-scroll-hint { animation: none; }
}

.hero h1 {
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--on-surface);
}

.hero p {
    font-size: 1.25rem;
    color: var(--on-surface-variant);
    margin-bottom: 40px;
    max-width: 550px;
    font-weight: 400;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    padding: 16px 32px;
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--on-primary);
    text-decoration: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    border-radius: 100px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button.secondary {
    background: var(--surface-container-high);
    color: var(--primary);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 37, 66, 0.1);
}

/* Support dropdown */
.support-wrap {
    position: relative;
}

.bmac-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 24px;
    background: #FFDD00;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.4;
    font-family: 'Manrope', sans-serif;
    text-decoration: none;
    border-radius: 100px;
    border: none;
    box-shadow: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    letter-spacing: -0.2px;
    cursor: pointer;
    box-sizing: border-box;
}
.bmac-btn:hover {
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 0 8px 20px rgba(200, 170, 0, 0.45);
}
.bmac-btn .bmac-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.support-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline-variant, #dde3ea);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 37, 66, 0.15);
    padding: 8px;
    min-width: 240px;
    z-index: 9999;
    animation: supportFadeIn 0.15s ease;
}
.support-dropdown.open { display: block; }

@keyframes supportFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.support-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.support-opt:hover { background: var(--surface-container-low, #f4f6f9); }

.support-opt-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.support-opt-text strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--on-surface, #0b1c30);
    margin-bottom: 2px;
}
.support-opt-text span {
    font-size: 0.75rem;
    color: var(--on-surface-variant, #5a7a9a);
    font-weight: 500;
}

.support-stripe .support-opt-icon {
    background: #635bff;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Navbar actions row (Contact + Support always inline) */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .support-dropdown { right: auto; left: 0; }
    .navbar-actions { justify-content: center; }
}

.hero-graphic {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.hero-image {
    width: 100%;
    max-width: 500px;
    border-radius: 2rem;
    box-shadow: 0 40px 80px rgba(0, 37, 66, 0.1);
    transform: rotate(2deg);
}

/* Games Section */
.games-section {
    padding: 100px 10%;
    background-color: var(--surface-container-low);
}

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

.section-title {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.section-subtitle {
    color: var(--on-surface-variant);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 32px;
}

/* ───────────── Horizontal-scroll card row ───────────── */
.hscroll-wrap {
    position: relative;
    margin: 0 auto;
}

.hscroll-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Vertical padding makes room for the .game-card hover lift (-12px). */
    padding: 16px 8px 28px;
    /* Subtle inner edges so first/last cards don't sit flush against fades. */
    scroll-padding-inline: 8px;
    /* Custom thin scrollbar — visible enough that users know it scrolls,
       quiet enough to not look ugly. */
    scrollbar-width: thin;
    scrollbar-color: var(--outline-variant) transparent;
}
.hscroll-track::-webkit-scrollbar {
    height: 8px;
}
.hscroll-track::-webkit-scrollbar-track {
    background: transparent;
    margin-inline: 24px;
}
.hscroll-track::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 4px;
}
.hscroll-track::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* Cards become fixed-width flex items; their inner styling is unchanged. */
.hscroll-track .game-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

/* Edge gradient fades — visual hint that more content is sideways. */
.hscroll-fade {
    position: absolute;
    top: 16px;
    bottom: 28px;
    width: 56px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.hscroll-fade-left  {
    left: -8px;
    background: linear-gradient(90deg, var(--surface-container-low) 0%, transparent 100%);
}
.hscroll-fade-right {
    right: -8px;
    background: linear-gradient(-90deg, var(--surface-container-low) 0%, transparent 100%);
}
/* When the surrounding section has the white surface (alternate sections), use the matching colour. */
.games-section[style*="--background"] .hscroll-fade-left,
.games-section[style*="background-color: var(--background)"] .hscroll-fade-left { background: linear-gradient(90deg, var(--surface) 0%, transparent 100%); }
.games-section[style*="--background"] .hscroll-fade-right,
.games-section[style*="background-color: var(--background)"] .hscroll-fade-right { background: linear-gradient(-90deg, var(--surface) 0%, transparent 100%); }

.hscroll-wrap.show-prev .hscroll-fade-left  { opacity: 1; }
.hscroll-wrap.show-next .hscroll-fade-right { opacity: 1; }

/* Prev / next click-to-scroll buttons (desktop). */
.hscroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--primary);
    font-family: 'Manrope', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 6px 18px rgba(0, 37, 66, 0.10);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.25s;
    opacity: 0;
    pointer-events: none;
    padding: 0 0 4px;
}
.hscroll-btn:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 10px 24px rgba(0, 37, 66, 0.18);
}
.hscroll-btn:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 2px;
}
.hscroll-prev { left: -22px; }
.hscroll-next { right: -22px; }
.hscroll-wrap.show-prev .hscroll-prev { opacity: 1; pointer-events: auto; }
.hscroll-wrap.show-next .hscroll-next { opacity: 1; pointer-events: auto; }

/* Progress bar — thin underline that fills as user scrolls the track. */
.hscroll-progress {
    position: relative;
    height: 3px;
    margin: 4px 24px 0;
    background: var(--outline-variant);
    border-radius: 999px;
    overflow: hidden;
}
.hscroll-progress::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--hs-progress, 0%);
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 999px;
    transition: width 0.15s ease;
}

/* "Swipe / scroll" text hint at the section header — only on touch devices. */
.hscroll-hint {
    display: none;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: -32px auto 24px;
    opacity: 0.7;
}
@media (hover: none) {
    .hscroll-hint { display: block; }
    .hscroll-btn  { display: none; }
}

/* Mobile: shrink card to ~one-and-a-bit per screen so peek shows next. */
@media (max-width: 600px) {
    .hscroll-track {
        gap: 16px;
        padding: 16px 4px 24px;
    }
    .hscroll-track .game-card {
        flex: 0 0 80vw;
        max-width: 320px;
    }
    .hscroll-prev { left: -10px; }
    .hscroll-next { right: -10px; }
}
@media (max-width: 1024px) {
    .games-section { padding: 80px 5%; }
}

.game-card {
    background: var(--surface-container-lowest);
    border-radius: 32px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s;
    cursor: pointer;
    border: none;
}

.game-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 37, 66, 0.08);
}

.game-image-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.game-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coming-soon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: white;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    background: rgba(0, 37, 66, 0.7);
    padding: 10px 28px;
    border-radius: 8px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

.game-info {
    padding: 32px;
}

.game-info h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    font-weight: 800;
    color: var(--on-surface);
}

.game-info p {
    color: var(--on-surface-variant);
    font-size: 1rem;
    line-height: 1.6;
}

/* Modal Redesign */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 28, 48, 0.4);
    backdrop-filter: blur(8px);
}

.modal-content {
    background-color: var(--surface-container-lowest);
    margin: 5vh auto;
    width: 90%;
    max-width: 1000px;
    border-radius: 40px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 50px 100px rgba(11, 28, 48, 0.2);
    animation: modalSlide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modalSlide {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal {
    position: absolute;
    right: 32px;
    top: 32px;
    font-size: 32px;
    cursor: pointer;
    z-index: 10;
    color: var(--on-surface-variant);
}

.marketing-hero {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    padding: 64px;
    align-items: center;
}

.marketing-info h2 {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -2px;
    margin-bottom: 24px;
}

.marketing-features {
    padding: 64px;
    background: var(--surface-container-low);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.feature-item {
    text-align: left;
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 16px;
    display: block;
}

.feature-item h4 {
    font-weight: 800;
    margin-bottom: 8px;
}

/* App Screenshots */
.marketing-screenshots {
    padding: 48px 64px 56px;
}

.marketing-screenshots h3 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
    color: var(--on-surface);
}

.screenshots-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.screenshots-scroll::-webkit-scrollbar {
    height: 6px;
}

.screenshots-scroll::-webkit-scrollbar-track {
    background: var(--surface-container-low);
    border-radius: 3px;
}

.screenshots-scroll::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 3px;
}

.screenshot-img {
    height: 420px;
    width: auto;
    border-radius: 16px;
    scroll-snap-align: start;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0,37,66,0.08);
    border: 1px solid var(--outline-variant);
}

/* Portfolio Modal */
.portfolio-modal-content {
    max-width: 860px;
}

.portfolio-modal-body {
    padding: 56px 56px 48px;
}

.portfolio-modal-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 8px;
}

.portfolio-modal-subtitle {
    color: var(--on-surface-variant);
    font-size: 1.05rem;
    margin-bottom: 40px;
}

.portfolio-category-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 16px;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}

.portfolio-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 16px;
    background: var(--surface-container-low);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portfolio-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 37, 66, 0.08);
}

.portfolio-thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.portfolio-item-info {
    min-width: 0;
}

.portfolio-item-info strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--on-surface);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-item-info span {
    display: block;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    .portfolio-modal-body { padding: 40px 24px 32px; }
    .portfolio-grid { grid-template-columns: 1fr; }
}

/* Footer */
.footer {
    padding: 80px 10% 40px;
    background: var(--surface-container-lowest);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-brand .logo-text {
    display: block;
    margin-bottom: 16px;
}

.footer-links {
    display: flex;
    gap: 48px;
}

.footer-column h4 {
    font-weight: 800;
    margin-bottom: 24px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column a {
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: color 0.3s;
}

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

.footer-bottom {
    border-top: 1px solid var(--outline-variant);
    padding-top: 40px;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 0.9rem;
}

/* Page Content (Privacy, Terms, Contact) */
.page-header {
    padding: 160px 10% 64px;
    text-align: center;
    background: var(--surface-container-low);
}

.page-title {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -2px;
    margin-bottom: 16px;
}

.page-content {
    padding: 80px 10%;
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--on-surface-variant);
}

.page-content h2 {
    color: var(--on-surface);
    margin: 48px 0 20px;
    font-size: 2rem;
    font-weight: 800;
}

.page-content h3 {
    color: var(--on-surface);
    margin: 32px 0 16px;
    font-weight: 700;
}

.page-content p {
    margin-bottom: 24px;
    line-height: 1.8;
    /* Block-justified body text — clean letter-style edges. */
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Apply justified text to long-form paragraphs in about-page cards and
   in the coming-soon intro paragraph. Keeps card subtitles and short
   copy on the homepage left-aligned where it reads better. */
.page-content > div > p,
.cs-intro p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* The dark gradient "Support the Work" card on About should stay
   centred — opt out of justify there. */
.page-content > div[style*="text-align: center"] p {
    text-align: center !important;
}

/* Services-page bespoke text justification — applied to the page intro
   and the body of each service card. The single-line bullets stay
   left-aligned (they look odd justified). */
.services-hero p,
.services-section-subtitle,
.service-card > p,
.process-step p,
.example-tile p,
.services-cta p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-content ul {
    margin-bottom: 24px;
    padding-left: 24px;
}

.page-content li {
    margin-bottom: 12px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
    background: var(--surface-container-low);
    padding: 48px;
    border-radius: 32px;
}

.contact-form input, .contact-form textarea {
    padding: 18px 24px;
    border-radius: 16px;
    border: 2px solid transparent;
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    font-size: 1rem;
    font-family: 'Manrope', sans-serif;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 37, 66, 0.05);
}

.contact-form textarea {
    min-height: 200px;
    resize: vertical;
}

.contact-form button {
    cursor: pointer;
    border: none;
    align-self: flex-start;
}

/* Responsive */
@media (max-width: 1024px) {
    .marketing-hero { grid-template-columns: 1fr; text-align: center; padding: 40px; }
    .marketing-features { grid-template-columns: 1fr; padding: 40px; }
    .marketing-screenshots { padding: 32px 40px 40px; }
    .screenshot-img { height: 340px; }
    .hero-stage { height: 130vh; }
    .hero-sticky { padding: 110px 6% 60px; text-align: left; align-items: flex-start; padding-top: 130px; }
    .hero-content { margin-bottom: 0; max-width: 100%; }
    .hero-graphic { justify-content: center; }
}

@media (max-width: 768px) {
    /* Two-row grid: logo on top, then [nav-links] [coffee] sharing one row.
       Compact, no wasted vertical space, and the support button sits
       inline with the menu links. */
    .navbar {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logo logo"
            "nav  coffee";
        column-gap: 12px;
        row-gap: 8px;
        padding: 10px 5%;
        align-items: center;
    }
    .navbar > .logo               { grid-area: logo; justify-self: center; }
    .navbar > .nav-links          { grid-area: nav;  justify-self: center; }
    .navbar > .navbar-actions     { grid-area: coffee; justify-self: end; }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 22px;                   /* generous spacing between links */
        justify-content: center;
        padding: 0;
    }
    .nav-links a {
        font-size: 0.88rem;
        padding: 4px 2px;
    }

    /* Drop the duplicate "Contact Us" CTA — the navbar already has a
       Contact link, and the inline button below is what visitors use
       to reach support. */
    .navbar-actions {
        display: flex;
        align-items: center;
        gap: 0;
    }
    .navbar-actions > .cta-button { display: none; }

    /* Coffee support: yellow circle, just the icon — saves a row of
       height and visually anchors the right side of the nav row. */
    .navbar .bmac-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        background: #FFD54F;
        color: #1a1a1a;
        font-size: 1.05rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(108, 63, 176, 0.18);
    }
    .navbar .bmac-btn:hover {
        transform: translateY(-1px) scale(1.04);
        box-shadow: 0 4px 12px rgba(108, 63, 176, 0.28);
    }
    /* Hide the "Support" text node and any non-icon children; the
       text isn't wrapped in a span so we zero the button font-size
       and restore it on the icon span. */
    .navbar .bmac-btn { font-size: 0; gap: 0; }
    .navbar .bmac-btn > :not(.bmac-icon) { display: none; }
    .navbar .bmac-btn .bmac-icon { font-size: 1.1rem; }
    /* The support dropdown still pops below the icon — anchor it right. */
    .support-dropdown { right: 0; left: auto; }

    /* Header clearance — the stacked-column navbar can be ~190–210px tall
       on small screens, so push every page header well below it. */
    .page-header {
        padding-top: 230px;
        padding-left: 6%;
        padding-right: 6%;
        padding-bottom: 40px;
    }
    .page-title { font-size: 2.4rem; letter-spacing: -1px; }

    /* Same clearance for the homepage hero. */
    .hero-stage   { height: 125vh; }
    .hero-sticky  { padding: 230px 6% 60px; }

    .hero h1 { font-size: 2.6rem; }
    .hero p { font-size: 1.05rem; }
    .section-title { font-size: 2.2rem; }
    .games-section { padding: 60px 4%; }

    .footer { padding: 40px 6%; }
}

@media (max-width: 480px) {
    .navbar { padding: 10px 4%; }
    .nav-links { gap: 16px; }                     /* still readable on tiny phones */
    .nav-links a { font-size: 0.82rem; padding: 4px 2px; }
    .page-title { font-size: 2rem; }
    .hero h1 { font-size: 2.2rem; }
}

/* ── Shared PDF export button — bright blue across all apps ────────────── */
.pdf-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 32px;
    border-radius: 100px;
    background: #0078FF;
    color: white;
    border: none;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Manrope', sans-serif;
}
.pdf-export-btn:hover {
    background: #005FCC;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 120, 255, 0.3);
}

/* ── Shared disclaimer banner ──────────────────────────────────────────── */
.tool-disclaimer {
    background: #fffbf0;
    border-top: 2px solid #f0b429;
    padding: 16px 24px;
}
.tool-disclaimer-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.tool-disclaimer-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.tool-disclaimer-text {
    font-size: 0.78rem;
    color: #7a5500;
    line-height: 1.55;
}
.tool-disclaimer-text strong {
    color: #5c3d00;
}
@media (prefers-color-scheme: dark) {
    .tool-disclaimer {
        background: #1a1300;
        border-top-color: #a07810;
    }
    .tool-disclaimer-text { color: #c9a84c; }
    .tool-disclaimer-text strong { color: #e0c060; }
}