/* ===== CSS Variables ===== */
:root {
    /* Primary Colors - Bright & Fun */
    --primary: #7C3AED;
    --primary-light: #A78BFA;
    --primary-dark: #5B21B6;

    /* Accent Colors */
    --accent-pink: #EC4899;
    --accent-blue: #3B82F6;
    --accent-cyan: #06B6D4;
    --accent-yellow: #FBBF24;
    --accent-green: #10B981;
    --accent-orange: #F97316;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-fun: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #ffd452 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8f7ff 100%);

    /* Neutrals */
    --dark: #1F1F2E;
    --dark-light: #2D2D44;
    --gray: #6B7280;
    --gray-light: #9CA3AF;
    --light: #F9FAFB;
    --white: #FFFFFF;

    /* Typography */
    --font-display: 'Fredoka', sans-serif;
    --font-body: 'Nunito', sans-serif;

    /* Spacing */
    --section-padding: 100px;
    --container-width: 1200px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(124, 58, 237, 0.1);
    --shadow-md: 0 8px 30px rgba(124, 58, 237, 0.15);
    --shadow-lg: 0 20px 60px rgba(124, 58, 237, 0.2);
    --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.3);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--light);
    color: var(--dark);
    line-height: 1.6;
}

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

/* ===== Navigation ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: transform 0.35s ease, padding 0.3s ease, box-shadow 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

.navbar.nav-hidden {
    transform: translateY(-110%);
}

.navbar.scrolled {
    padding: 12px 0;
    box-shadow: var(--shadow-sm);
}

.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    position: relative;
    letter-spacing: -0.5px;
}

.logo-ani {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.35));
}

.logo-motion {
    background: linear-gradient(135deg, #EC4899 0%, #F97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.3));
}

.logo-dot {
    width: 9px;
    height: 9px;
    background: var(--gradient-fun);
    border-radius: 50%;
    margin-left: 5px;
    margin-bottom: 2px;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
    animation: dotBounce 1s ease-in-out infinite;
}

@keyframes dotBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.2); }
}

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

.nav-links a {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
    transition: var(--transition-fast);
    position: relative;
}

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

.nav-links a:not(.btn-nav)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: var(--transition-normal);
    border-radius: 2px;
}

.nav-links a:not(.btn-nav):hover::after {
    width: 100%;
}

.btn-nav {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #F97316 100%);
    color: var(--white) !important;
    padding: 10px 24px;
    border-radius: 50px;
    transition: var(--transition-normal);
    animation: quotePulseFloat 3s ease-in-out infinite;
    position: relative;
}

.btn-nav:hover {
    animation: quoteJelly 0.55s ease-in-out forwards;
    box-shadow: 0 0 24px rgba(236, 72, 153, 0.45);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--dark);
    border-radius: 3px;
    transition: var(--transition-normal);
}

/* ===== Hero Section ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 120px 24px 60px;
    background: linear-gradient(180deg, #f8f7ff 0%, var(--light) 100%);
    overflow: hidden;
}

.hero-content {
    max-width: var(--container-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-text {
    z-index: 2;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
}

.title-line {
    display: block;
    color: var(--dark);
}

/* ── Letter fall animation ── */
.letter-fall {
    display: inline-block;
    opacity: 0;
    animation: letterFall 0.6s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

@keyframes letterFall {
    0%   { opacity: 0; transform: translateY(-90px) rotate(-18deg) scale(1.4); }
    55%  { opacity: 1; transform: translateY(8px)   rotate(3deg)  scale(0.93); }
    75%  { transform: translateY(-4px) rotate(-1deg) scale(1.03); }
    100% { opacity: 1; transform: translateY(0)     rotate(0deg)  scale(1); }
}

.title-line.highlight {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #F97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 12px rgba(251, 191, 36, 0.3));
}

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

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--gray);
    margin-bottom: 32px;
    max-width: 500px;
    opacity: 0;
    animation: fadeIn 0.8s ease 0.8s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeIn 0.8s ease 1s forwards;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition-normal);
    cursor: pointer;
    border: none;
    position: relative;
    isolation: isolate;
    --svc-border-angle: 0deg;
}
.btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 52px;
    background: conic-gradient(
        from var(--svc-border-angle),
        #7C3AED, #EC4899, #F97316, #FBBF24, #10B981, #3B82F6, #7C3AED
    );
    z-index: -1;
    animation: svcBorderSpin 2.5s linear infinite;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.btn-primary .btn-arrow {
    width: 20px;
    height: 20px;
    transition: var(--transition-normal);
}

.btn-primary:hover .btn-arrow {
    transform: translateX(4px);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary);
    border: 2px solid var(--primary-light);
    animation: quotePulseFloat 3s ease-in-out infinite;
}

/* Kill the inherited spinning border — secondary has its own effect */
.btn-secondary::before {
    background: transparent !important;
    animation: none !important;
}

.btn-secondary:hover {
    background: var(--gradient-primary);
    color: var(--white);
    border-color: transparent;
    animation: quoteJelly 0.55s ease-in-out forwards;
    box-shadow: 0 0 24px rgba(124, 58, 237, 0.45);
}

@keyframes quotePulseFloat {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.35),
                    0 8px 30px rgba(124, 58, 237, 0.12);
    }
    45% {
        transform: translateY(-6px);
        box-shadow: 0 0 0 12px rgba(124, 58, 237, 0),
                    0 14px 36px rgba(236, 72, 153, 0.18);
    }
}

@keyframes quoteJelly {
    0%   { transform: scale(1, 1); }
    25%  { transform: scale(0.93, 1.07); }
    50%  { transform: scale(1.1, 0.93); }
    75%  { transform: scale(0.97, 1.03); }
    100% { transform: scale(1, 1); }
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-outline:hover {
    background: var(--white);
    color: var(--primary);
}

.btn-large {
    padding: 18px 36px;
    font-size: 1.1rem;
}

/* ===== Hero Visual - Image Stack ===== */
.hero-visual {
    position: relative;
    height: 520px;
    z-index: 1;
}

.image-stack {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    animation: stackFloat 3.5s ease-in-out infinite;
}

@keyframes stackFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

.stack-card {
    position: absolute;
    width: 300px;
    height: 470px;
    border-radius: 170px 170px 28px 28px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, top 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
    box-shadow: var(--shadow-lg);
}

.stack-card .card-content {
    width: 100%;
    height: 100%;
    border-radius: 170px 170px 28px 28px;
}

.card-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    animation: card1Glow 2.5s ease-in-out infinite;
}

@keyframes card1Glow {
    0%, 100% { box-shadow: 0 20px 50px rgba(124,58,237,0.25), 0 0 0 0 rgba(236,72,153,0); }
    50%       { box-shadow: 0 28px 70px rgba(124,58,237,0.5), 0 0 0 5px rgba(236,72,153,0.2); }
}

.card-2 {
    top: 16px;
    left: calc(50% + 22px);
    transform: translateX(-50%) rotate(6deg);
    z-index: 2;
    animation: cardBreathe 4s ease-in-out infinite 1.2s;
}

.card-3 {
    top: 30px;
    left: calc(50% - 22px);
    transform: translateX(-50%) rotate(-6deg);
    z-index: 1;
    animation: cardBreathe 4s ease-in-out infinite 2.4s;
}

@keyframes cardBreathe {
    0%, 100% { filter: brightness(0.88) saturate(0.9); }
    50%       { filter: brightness(1.0) saturate(1.1) drop-shadow(0 0 18px rgba(255,255,255,0.25)); }
}

/* Placeholder Scenes */
.placeholder-scene {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.scene-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.scene-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.scene-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.placeholder-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    animation: sceneOrbs 5s ease-in-out infinite;
    border-radius: 170px 170px 28px 28px;
}
.scene-1::before {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.22) 0%, transparent 38%),
        radial-gradient(circle at 80% 75%, rgba(249,168,212,0.3) 0%, transparent 35%),
        radial-gradient(circle at 55% 5%, rgba(255,255,255,0.1) 0%, transparent 25%);
}
.scene-2::before {
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.22) 0%, transparent 35%),
        radial-gradient(circle at 20% 80%, rgba(255,200,200,0.25) 0%, transparent 38%),
        radial-gradient(circle at 60% 50%, rgba(255,255,255,0.08) 0%, transparent 30%);
}
.scene-3::before {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.25) 0%, transparent 35%),
        radial-gradient(circle at 85% 80%, rgba(0,242,254,0.35) 0%, transparent 40%),
        radial-gradient(circle at 50% 10%, rgba(79,172,254,0.2) 0%, transparent 28%);
}
@keyframes sceneOrbs {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.06); }
}

.scene-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.scene-bg span {
    position: absolute;
    border-radius: 50%;
    animation: bgBubble 4s ease-in-out infinite;
}
/* Scene 1 (purple) bubbles */
.scene-1 .scene-bg span:nth-child(1) { width: 90px; height: 90px; background: rgba(255,255,255,0.12); top: -15px; left: -15px; animation-delay: 0s; }
.scene-1 .scene-bg span:nth-child(2) { width: 55px; height: 55px; background: rgba(236,72,153,0.2); bottom: 80px; right: 8px; animation-delay: 1.1s; }
.scene-1 .scene-bg span:nth-child(3) { width: 35px; height: 35px; background: rgba(255,255,255,0.15); top: 45%; left: 12%; animation-delay: 2.1s; }
.scene-1 .scene-bg span:nth-child(4) { width: 22px; height: 22px; background: rgba(252,211,77,0.45); top: 18%; right: 14%; animation-delay: 0.6s; }
/* Scene 2 (pink) bubbles */
.scene-2 .scene-bg span:nth-child(1) { width: 100px; height: 100px; background: rgba(255,255,255,0.1); top: -20px; right: -10px; animation-delay: 0.3s; }
.scene-2 .scene-bg span:nth-child(2) { width: 60px; height: 60px; background: rgba(255,100,150,0.2); bottom: 90px; left: 5px; animation-delay: 1.4s; }
.scene-2 .scene-bg span:nth-child(3) { width: 40px; height: 40px; background: rgba(255,255,255,0.18); top: 38%; right: 16%; animation-delay: 2.4s; }
.scene-2 .scene-bg span:nth-child(4) { width: 25px; height: 25px; background: rgba(251,191,36,0.4); top: 22%; left: 18%; animation-delay: 0.9s; }
/* Scene 3 (blue) bubbles */
.scene-3 .scene-bg span:nth-child(1) { width: 80px; height: 80px; background: rgba(255,255,255,0.15); bottom: -10px; left: -10px; animation-delay: 0.5s; }
.scene-3 .scene-bg span:nth-child(2) { width: 50px; height: 50px; background: rgba(0,242,254,0.25); top: 15px; right: 15px; animation-delay: 1.6s; }
.scene-3 .scene-bg span:nth-child(3) { width: 32px; height: 32px; background: rgba(255,255,255,0.2); top: 50%; left: 8%; animation-delay: 2.7s; }
.scene-3 .scene-bg span:nth-child(4) { width: 20px; height: 20px; background: rgba(79,172,254,0.4); top: 25%; right: 20%; animation-delay: 1s; }
@keyframes bgBubble {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
    33%       { transform: translateY(-12px) scale(1.08); opacity: 1; }
    66%       { transform: translateY(-5px) scale(0.95); opacity: 0.85; }
}

.scene-character {
    font-size: 80px;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* ===== Card Characters - Shared Styles ===== */
.card-character {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: characterFloat 2.2s ease-in-out infinite;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    scale: 1.65;
}

@keyframes characterFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg) scaleX(1) scaleY(1); }
    30%       { transform: translateY(-22px) rotate(3deg) scaleX(0.93) scaleY(1.07); }
    55%       { transform: translateY(-26px) rotate(-1deg) scaleX(0.91) scaleY(1.09); }
    70%       { transform: translateY(0) rotate(-3deg) scaleX(1.12) scaleY(0.88); }
    85%       { transform: translateY(-8px) rotate(1.5deg) scaleX(0.97) scaleY(1.03); }
}

/* Character Eyes - Shared */
.char-eyes {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.char-eye {
    width: 16px;
    height: 20px;
    background: var(--white);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.char-pupil {
    width: 8px;
    height: 8px;
    background: var(--dark);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transition-fast);
}

/* Character Mouths - Shared */
.char-mouth {
    margin: 6px auto 0;
}

.char-mouth.big-smile {
    width: 20px;
    height: 10px;
    background: var(--white);
    border-radius: 0 0 20px 20px;
}

.char-mouth.cheeks {
    width: 12px;
    height: 8px;
    background: var(--white);
    border-radius: 0 0 12px 12px;
}

.char-mouth.tongue {
    width: 14px;
    height: 8px;
    background: var(--white);
    border-radius: 0 0 14px 14px;
    position: relative;
}

.char-mouth.tongue::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 5px;
    background: #ff6b9d;
    border-radius: 0 0 8px 8px;
}

/* Pop Out Animation */
.stack-card.popping .card-character {
    animation: characterPopOut 0.8s ease-out forwards;
}

@keyframes characterPopOut {
    0% { transform: scale(1) translateY(0); }
    30% { transform: scale(1.3) translateY(-30px) rotate(-10deg); }
    50% { transform: scale(1.4) translateY(-50px) rotate(10deg); }
    70% { transform: scale(1.2) translateY(-40px) rotate(-5deg); opacity: 1; }
    100% { transform: scale(0) translateY(-100px) rotate(360deg); opacity: 0; }
}

/* ===== Star Buddy Character ===== */
.star-buddy {
    width: 120px;
    height: 120px;
}

.star-body {
    position: relative;
    width: 100%;
    height: 100%;
}

.star-shape-body {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 8px 16px rgba(245, 158, 11, 0.4));
}

.star-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    z-index: 2;
}

.star-eye {
    background: var(--dark) !important;
}

.star-eye .char-pupil {
    background: var(--white);
    width: 6px;
    height: 6px;
}

.char-eyes.twinkle .char-eye::after {
    content: '✦';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 10px;
    color: var(--white);
    animation: miniTwinkle 1s ease-in-out infinite;
}

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

.star-blush {
    position: absolute;
    width: 12px;
    height: 6px;
    background: rgba(255, 107, 157, 0.6);
    border-radius: 50%;
    top: 15px;
}

.star-blush.left { left: -20px; }
.star-blush.right { right: -20px; }

.star-arms {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.star-arm {
    position: absolute;
    width: 12px;
    height: 30px;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    border-radius: 10px;
    top: 55%;
}

.star-arm.left {
    left: 5px;
    transform: rotate(30deg);
    animation: starWaveLeft 1s ease-in-out infinite;
}

.star-arm.right {
    right: 5px;
    transform: rotate(-30deg);
    animation: starWaveRight 1s ease-in-out infinite 0.3s;
}

@keyframes starWaveLeft {
    0%, 100% { transform: rotate(30deg); }
    50% { transform: rotate(60deg); }
}

@keyframes starWaveRight {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(-60deg); }
}

.star-sparkles {
    position: absolute;
    inset: -20px;
    pointer-events: none;
}

.star-sparkles span {
    position: absolute;
    font-size: 18px;
    color: var(--white);
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
    animation: starSparkle 2s ease-in-out infinite;
}

.star-sparkles span:nth-child(1) { top: 0; left: 20%; animation-delay: 0s; }
.star-sparkles span:nth-child(2) { top: 10%; right: 10%; animation-delay: 0.5s; }
.star-sparkles span:nth-child(3) { bottom: 10%; left: 10%; animation-delay: 1s; }
.star-sparkles span:nth-child(4) { bottom: 0; right: 20%; animation-delay: 1.5s; }

@keyframes starSparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

/* ===== Brush Buddy Character ===== */
.brush-buddy {
    width: 100px;
    height: 140px;
}

.brush-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brush-bristles {
    width: 50px;
    height: 35px;
    background: linear-gradient(180deg, #ec4899 0%, #db2777 100%);
    border-radius: 8px 8px 20px 20px;
    position: relative;
}

.brush-bristles::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5px;
    right: 5px;
    height: 15px;
    background: repeating-linear-gradient(
        90deg,
        #ec4899 0px,
        #ec4899 4px,
        #be185d 4px,
        #be185d 8px
    );
    border-radius: 0 0 15px 15px;
}

.brush-ferrule {
    width: 45px;
    height: 12px;
    background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
    border-radius: 2px;
}

.brush-handle {
    width: 35px;
    height: 70px;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    border-radius: 5px 5px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    box-shadow: inset -3px 0 0 rgba(0,0,0,0.1);
}

.brush-handle .char-eye {
    width: 12px;
    height: 14px;
}

.brush-handle .char-pupil {
    width: 6px;
    height: 6px;
}

.brush-arms {
    position: absolute;
    width: 100%;
    top: 70px;
}

.brush-arm {
    position: absolute;
    width: 10px;
    height: 25px;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    border-radius: 5px;
}

.brush-arm.left {
    left: 15px;
    transform: rotate(25deg);
    animation: brushWave 0.8s ease-in-out infinite;
}

.brush-arm.right {
    right: 15px;
    transform: rotate(-25deg);
    animation: brushWave 0.8s ease-in-out infinite 0.2s;
}

@keyframes brushWave {
    0%, 100% { transform: rotate(25deg) translateY(0); }
    50% { transform: rotate(40deg) translateY(-5px); }
}

.brush-arm.right {
    animation-name: brushWaveRight;
}

@keyframes brushWaveRight {
    0%, 100% { transform: rotate(-25deg) translateY(0); }
    50% { transform: rotate(-40deg) translateY(-5px); }
}

.paint-splats {
    position: absolute;
    inset: -30px;
    pointer-events: none;
}

.splat {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: splatBounce 2s ease-in-out infinite;
}

.splat.pink {
    background: #f472b6;
    top: 10%;
    left: 0;
    animation-delay: 0s;
}

.splat.blue {
    background: #60a5fa;
    top: 30%;
    right: -10px;
    animation-delay: 0.5s;
}

.splat.yellow {
    background: #fbbf24;
    bottom: 30%;
    left: -5px;
    animation-delay: 1s;
}

@keyframes splatBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(20deg); }
}

/* ===== Rocket Buddy Character ===== */
.rocket-buddy {
    width: 80px;
    height: 140px;
}

.rocket-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rocket-tip {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 35px solid #ef4444;
}

.rocket-window {
    width: 50px;
    height: 60px;
    background: linear-gradient(180deg, #fafafa 0%, #e5e7eb 100%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
    position: relative;
}

.rocket-window::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    box-shadow: inset 3px 3px 0 rgba(255,255,255,0.3);
}

.rocket-window .char-eyes {
    position: relative;
    z-index: 2;
    gap: 6px;
}

.rocket-window .char-eye {
    width: 10px;
    height: 12px;
}

.rocket-window .char-pupil {
    width: 5px;
    height: 5px;
}

.rocket-window .char-mouth {
    position: relative;
    z-index: 2;
    margin-top: 4px;
}

.rocket-fins {
    position: absolute;
    width: 100%;
    top: 50px;
}

.fin {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 15px solid #ef4444;
}

.fin.left {
    left: -8px;
    border-right: 15px solid #ef4444;
    border-left: none;
}

.fin.right {
    right: -8px;
    border-left: 15px solid #ef4444;
    border-right: none;
}

.rocket-flame {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: -5px;
}

.flame {
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
}

.flame.outer {
    width: 35px;
    height: 40px;
    background: linear-gradient(180deg, #f97316 0%, #fbbf24 100%);
    animation: flameOuter 0.3s ease-in-out infinite alternate;
}

.flame.inner {
    position: absolute;
    width: 20px;
    height: 30px;
    background: linear-gradient(180deg, #fbbf24 0%, #fef3c7 100%);
    bottom: 0;
    animation: flameInner 0.2s ease-in-out infinite alternate;
}

@keyframes flameOuter {
    0% { transform: scaleY(1) scaleX(1); }
    100% { transform: scaleY(1.15) scaleX(0.9); }
}

@keyframes flameInner {
    0% { transform: scaleY(1) scaleX(1); }
    100% { transform: scaleY(1.2) scaleX(0.85); }
}

.rocket-stars {
    position: absolute;
    inset: -30px;
    pointer-events: none;
}

.rocket-stars span {
    position: absolute;
    font-size: 16px;
    color: var(--white);
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
    animation: rocketStar 1.5s ease-in-out infinite;
}

.rocket-stars span:nth-child(1) { top: 20%; left: -10%; animation-delay: 0s; }
.rocket-stars span:nth-child(2) { top: 40%; right: -15%; animation-delay: 0.5s; }
.rocket-stars span:nth-child(3) { bottom: 30%; left: -15%; animation-delay: 1s; }

@keyframes rocketStar {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Peel Corner Effect */
.peel-corner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.9) 50%);
    cursor: pointer;
    transition: var(--transition-normal);
    border-radius: 0 0 24px 0;
}

.peel-corner::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(315deg, var(--primary-light) 0%, var(--accent-pink) 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transform-origin: bottom right;
    transition: var(--transition-normal);
    border-radius: 0 0 24px 0;
}

.stack-card:hover .peel-corner {
    width: 120px;
    height: 120px;
}

.stack-card:hover .peel-corner::before {
    width: 120px;
    height: 120px;
}

/* Card Hover Animation */
.stack-card.active:hover {
    transform: translateX(-50%) translateY(-10px) rotateY(-5deg);
}

/* ===== Card Info Panel ===== */
.card-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 14px 18px 18px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.6);
    z-index: 5;
    transition: transform 0.3s ease;
}
.stack-card:hover .card-panel { transform: translateY(-4px); }

.card-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.card-type-tag {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 20px;
}
.card-panel--purple .card-type-tag { background: rgba(124,58,237,0.12); color: #7C3AED; }
.card-panel--pink   .card-type-tag { background: rgba(236,72,153,0.12); color: #EC4899; }
.card-panel--blue   .card-type-tag { background: rgba(59,130,246,0.12); color: #3B82F6; }

.card-stars {
    font-size: 0.65rem;
    color: #F59E0B;
    letter-spacing: 1px;
}
.card-panel__title {
    font-family: var(--font-display);
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.2;
}
.card-panel__chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cpc {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 12px;
    background: var(--light);
    color: var(--gray);
    border: 1px solid rgba(0,0,0,0.06);
}

/* ===== Mascot Character ===== */
.mascot {
    position: absolute;
    bottom: 20px;
    right: -30px;
    z-index: 10;
    animation: mascotBounce 2s ease-in-out infinite;
}

@keyframes mascotBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.mascot-body {
    width: 100px;
    height: 100px;
    background: var(--gradient-primary);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: var(--shadow-md);
}

.mascot-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
}

.mascot-eyes {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
}

.eye {
    width: 20px;
    height: 24px;
    background: var(--white);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.pupil {
    width: 10px;
    height: 10px;
    background: var(--dark);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: lookAround 4s ease-in-out infinite;
}

@keyframes lookAround {
    0%, 100% { transform: translate(-50%, -50%); }
    25% { transform: translate(-30%, -60%); }
    50% { transform: translate(-70%, -50%); }
    75% { transform: translate(-50%, -40%); }
}

.mascot-mouth {
    width: 30px;
    height: 15px;
    background: var(--white);
    border-radius: 0 0 50px 50px;
    margin: 8px auto 0;
}

.mascot-arm {
    position: absolute;
    width: 25px;
    height: 40px;
    background: var(--primary);
    border-radius: 20px;
    top: 50%;
}

.mascot-arm.left {
    left: -15px;
    transform: rotate(30deg);
    animation: waveLeft 1s ease-in-out infinite;
}

.mascot-arm.right {
    right: -15px;
    transform: rotate(-30deg);
    animation: waveRight 1s ease-in-out infinite 0.5s;
}

@keyframes waveLeft {
    0%, 100% { transform: rotate(30deg); }
    50% { transform: rotate(50deg); }
}

@keyframes waveRight {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(-50deg); }
}

.mascot-shadow {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 15px;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    animation: shadowPulse 2s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.3; }
    50% { transform: translateX(-50%) scale(0.8); opacity: 0.2; }
}

/* ===== Interactive Hints ===== */
.mascot-hint {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    background: var(--white);
    color: var(--primary);
    padding: 8px 16px;
    border-radius: 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    animation: mascotHintAnim 5.5s ease 2s forwards;
}

.mascot-hint::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--white);
}

@keyframes mascotHintAnim {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
    12%  { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1);    }
    75%  { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1);    }
    100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.9); }
}

.mobile-play-hint { display: none; }

.hero-play-hint {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gray);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    animation: heroHintFadeIn 0.8s ease 1.2s forwards;
}

@keyframes heroHintFadeIn {
    0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0);   }
}

/* Mascot bouncing mode */
.mascot--bouncing {
    animation: none !important;
}

.mascot--bouncing .mascot-shadow {
    display: none;
}

.mascot--bouncing .mascot-arm.left {
    animation: waveLeft 0.3s ease-in-out infinite !important;
}

.mascot--bouncing .mascot-arm.right {
    animation: waveRight 0.3s ease-in-out infinite 0.1s !important;
}

/* ===== Floating Shapes ===== */
.floating-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.shape {
    position: absolute;
    opacity: 0.6;
}

.shape.circle {
    width: 60px;
    height: 60px;
    background: var(--accent-yellow);
    border-radius: 50%;
    top: 20%;
    left: 10%;
    animation: floatShape 6s ease-in-out infinite;
}

.shape.triangle {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid var(--accent-pink);
    top: 60%;
    left: 5%;
    animation: floatShape 8s ease-in-out infinite 1s;
}

.shape.square {
    width: 40px;
    height: 40px;
    background: var(--accent-cyan);
    top: 30%;
    right: 10%;
    animation: floatShape 7s ease-in-out infinite 0.5s;
    transform: rotate(45deg);
}

.shape.donut {
    width: 50px;
    height: 50px;
    border: 10px solid var(--accent-green);
    border-radius: 50%;
    bottom: 20%;
    right: 15%;
    animation: floatShape 9s ease-in-out infinite 2s;
}

.shape.zigzag {
    width: 60px;
    height: 20px;
    background: repeating-linear-gradient(
        90deg,
        var(--accent-orange) 0px,
        var(--accent-orange) 10px,
        transparent 10px,
        transparent 20px
    );
    bottom: 10%;
    left: 15%;
    animation: floatShape 10s ease-in-out infinite 1.5s;
}

@keyframes floatShape {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(20px) rotate(-5deg); }
}

/* ===== Scroll Indicator ===== */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--gray);
    font-size: 0.875rem;
    animation: fadeIn 1s ease 1.5s forwards;
    opacity: 0;
}

.mouse {
    width: 26px;
    height: 40px;
    border: 2px solid var(--gray-light);
    border-radius: 20px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--primary);
    border-radius: 4px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2s ease-in-out infinite;
}

@keyframes scroll {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(10px); opacity: 0; }
}

/* ===== Section Styles ===== */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-tag {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 50px;
    margin-bottom: 16px;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--dark);
    min-height: 1.2em;
}

/* Typewriter cursor */
.tw-cursor {
    display: inline-block;
    width: 3px;
    height: 0.85em;
    background: var(--primary);
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 3px;
    animation: twBlink 0.7s ease-in-out infinite;
}
@keyframes twBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.section-title .highlight {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #F97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 10px rgba(236, 72, 153, 0.25));
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== Services Section ===== */
.services {
    background: var(--white);
    overflow: visible;
}
.services > .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 80px;
}

/* ── Row layout ── */
.svc-row {
    display: flex;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    border: none;
    position: sticky;
    top: 0;
    box-shadow: 0 -6px 30px rgba(0,0,0,0.12);
    transition: none;
}
.svc-row:last-child { margin-bottom: 0; }
.svc-row--flip { flex-direction: row-reverse; }

/* Stack z-index — each panel sits on top of the previous */
.services > .svc-row:nth-child(2) { z-index: 1; }
.services > .svc-row:nth-child(3) { z-index: 2; }
.services > .svc-row:nth-child(4) { z-index: 3; }
.services > .svc-row:nth-child(5) { z-index: 4; }
.services > .svc-row:nth-child(6) { z-index: 5; }
.services > .svc-row:nth-child(7) { z-index: 6; }
















.svc-row__demo {
    flex: 0 0 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 100vh;
}
.svc-row__info {
    flex: 0 0 50%;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Demo backgrounds */
.svc-row--2d   .svc-row__demo { background: linear-gradient(135deg, #fffbf0, #fff3cc); }
.svc-row--3d   .svc-row__demo { background: linear-gradient(135deg, #0d1630, #1a2550); }
.svc-row--mg   .svc-row__demo { background: linear-gradient(135deg, #fdf0ff, #fff0f6); }
.svc-row--char .svc-row__demo { background: linear-gradient(135deg, #f5f0ff, #fff5fd); }
.svc-row--ui   .svc-row__demo { background: linear-gradient(135deg, #f0fff8, #edf6ff); }
.svc-row--ads  .svc-row__demo { background: linear-gradient(135deg, #fff5ee, #fff9e8); }

/* Info backgrounds */
.svc-row--2d   .svc-row__info { background: #fffdf7; }
.svc-row--3d   .svc-row__info { background: #0c1225; }
.svc-row--mg   .svc-row__info { background: #fdf8ff; }
.svc-row--char .svc-row__info { background: #faf8ff; }
.svc-row--ui   .svc-row__info { background: #f8fffc; }
.svc-row--ads  .svc-row__info { background: #fff9f5; }

/* Dark panel overrides */
.svc-row--3d .svc-title,
.svc-row--3d .svc-num { color: var(--white); }
.svc-row--3d .svc-desc { color: rgba(255,255,255,0.62); }
.svc-row--3d .svc-includes li { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.07); }
.svc-row--3d .svc-includes li::after { color: #34D399; }
.svc-row--3d .svc-includes li::before { background: rgba(52,211,153,0.12); }
.svc-row--3d .svc-tag { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1); }
.svc-row--3d .svc-meta-item { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.1); }

/* Full-viewport row accent — top edge of each stacked panel */
.svc-row--2d   { border-top: 5px solid #FBBF24 !important; }
.svc-row--3d   { border-top: 5px solid #3B82F6 !important; }
.svc-row--mg   { border-top: 5px solid #EC4899 !important; }
.svc-row--char { border-top: 5px solid #7C3AED !important; }
.svc-row--ui   { border-top: 5px solid #10B981 !important; }
.svc-row--ads  { border-top: 5px solid #F97316 !important; }


/* ── Info content ── */
.svc-num-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.svc-num {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700;
    color: rgba(124,58,237,0.25);
    letter-spacing: 1px;
}
.svc-pill {
    display: inline-flex; align-items: center;
    padding: 4px 14px; border-radius: 50px;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.svc-pill--yellow { background: rgba(251,191,36,0.15);  color: #D97706; }
.svc-pill--blue   { background: rgba(59,130,246,0.18);  color: #3B82F6; }
.svc-pill--pink   { background: rgba(236,72,153,0.15);  color: #EC4899; }
.svc-pill--purple { background: rgba(124,58,237,0.15);  color: #7C3AED; }
.svc-pill--cyan   { background: rgba(6,182,212,0.15);   color: #06B6D4; }
.svc-pill--orange { background: rgba(249,115,22,0.15);  color: #F97316; }

.svc-title {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    font-weight: 700; color: var(--dark);
    margin-bottom: 5px; line-height: 1.2;
}
.svc-desc {
    font-size: 0.8rem; color: var(--gray);
    line-height: 1.55; margin-bottom: 10px; max-width: 480px;
}
.svc-includes { list-style: none; margin-bottom: 8px; }
.svc-includes li {
    padding: 3px 0 3px 22px;
    font-size: 0.88rem; color: var(--dark);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative;
}
.svc-includes li::before {
    content: '';
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(16,185,129,0.12);
}
.svc-includes li::after {
    content: '✓';
    position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    font-size: 0.65rem; font-weight: 700; color: #10B981;
}
.svc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.svc-tag {
    padding: 4px 12px; border-radius: 16px;
    font-size: 0.76rem; font-weight: 600;
    background: var(--light); color: var(--gray);
    border: 1px solid rgba(124,58,237,0.1);
}
.svc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.svc-meta-item {
    padding: 5px 14px; border-radius: 20px;
    font-size: 0.78rem; font-weight: 600;
    background: var(--white); color: var(--gray);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
@property --svc-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.svc-cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.78rem !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    position: relative;
    isolation: isolate;
    --svc-border-angle: 0deg;
}
.svc-cta::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 52px;
    background: conic-gradient(
        from var(--svc-border-angle),
        #7C3AED, #EC4899, #F97316, #FBBF24, #10B981, #3B82F6, #7C3AED
    );
    z-index: -1;
    animation: svcBorderSpin 2.5s linear infinite;
}
@keyframes svcBorderSpin {
    to { --svc-border-angle: 360deg; }
}

/* ── Background orbs ── */
.svc-orb {
    position: absolute; border-radius: 50%; pointer-events: none;
    animation: svcOrb 5s ease-in-out infinite;
}
.so1 { width: 220px; height: 220px; background: rgba(251,191,36,0.1); top: -50px; right: -50px; animation-delay: 0s; }
.so2 { width: 110px; height: 110px; background: rgba(239,68,68,0.08); bottom: 20px; left: 20px; animation-delay: 1.8s; }
.so3 { width: 180px; height: 180px; background: rgba(59,130,246,0.12); top: -30px; left: -30px; animation-delay: 0.5s; }
.so4 { width: 90px;  height: 90px;  background: rgba(6,182,212,0.18);  bottom: 30px; right: 30px; animation-delay: 2.3s; }
@keyframes svcOrb {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.7; }
    50%       { transform: scale(1.18) translateY(-12px); opacity: 1; }
}

/* ==============================================
   CHARACTERS
   ============================================== */

/* shared leg bob */
@keyframes svcLegBob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-4px); } }

/* ── 1. Film Reel (fr-) ── */
.fr-scene {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: frFloat 2.8s ease-in-out infinite;
    scale: 1.45;
}
@keyframes frFloat {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%       { transform: translateY(-22px) rotate(2deg); }
}
.fr-body {
    width: 155px; height: 155px;
    background: linear-gradient(135deg, #1F1F2E, #2D2D44);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0 11px #D97706, 0 0 0 20px rgba(217,119,6,0.22), 0 24px 60px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
}
.fr-face { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.fr-eye {
    width: 18px; height: 22px; background: white; border-radius: 50%;
    overflow: hidden; position: relative; display: inline-block;
}
.fr-pupil { width: 9px; height: 9px; background: #1F1F2E; border-radius: 50%; position: absolute; top: 5px; left: 4px; }
.fr-smile { width: 32px; height: 14px; border-bottom: 4px solid white; border-radius: 0 0 20px 20px; margin-top: 6px; }
.fr-hole { position: absolute; width: 14px; height: 14px; background: #D97706; border-radius: 3px; }
.fr-hole.h1 { top: 8px; left: 50%; transform: translateX(-50%); }
.fr-hole.h2 { top: 22px; right: 15px; }
.fr-hole.h3 { bottom: 22px; right: 15px; }
.fr-hole.h4 { bottom: 8px; left: 50%; transform: translateX(-50%); }
.fr-hole.h5 { top: 22px; left: 15px; }
.fr-hole.h6 { bottom: 22px; left: 15px; }
.fr-arm {
    position: absolute; width: 18px; height: 52px;
    background: linear-gradient(135deg, #FBBF24, #FDE68A);
    border-radius: 9px; top: 44px; transform-origin: top center;
}
.fr-arm.fa-l { left: -14px; animation: frArmL 2.8s ease-in-out infinite; }
@keyframes frArmL { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(-55deg); } }
.fr-arm-r-wrap { position: absolute; right: -14px; top: 44px; transform-origin: top center; animation: frArmR 2.8s ease-in-out infinite 0.4s; }
@keyframes frArmR { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(48deg); } }
.fr-arm.fa-r { position: relative; }
.fr-clap { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 1.1rem; }
.fr-leg { position: absolute; width: 22px; height: 40px; background: linear-gradient(180deg, #D97706, #B45309); border-radius: 11px; bottom: -38px; }
.fr-leg.fl-l { left: 28px; animation: svcLegBob 2s ease-in-out infinite; }
.fr-leg.fl-r { right: 28px; animation: svcLegBob 2s ease-in-out infinite 1s; }
.fr-sp { position: absolute; color: #FBBF24; animation: frSp 2s ease-in-out infinite; }
.fr-sp.sp1 { top: 5%;  left: 10%; font-size: 0.9rem; animation-delay: 0s; }
.fr-sp.sp2 { top: 12%; right: 8%; font-size: 0.75rem; animation-delay: 0.7s; }
.fr-sp.sp3 { bottom: 22%; left: 7%; font-size: 0.7rem; animation-delay: 1.4s; }
@keyframes frSp { 0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.3) rotate(180deg); } }

/* ── 2. Cube 3D (cu-) ── */
.cu-scene {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: cuFloat 3s ease-in-out infinite;
    scale: 1.45;
}
@keyframes cuFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.cu-wrap { position: relative; animation: cuSpin 9s linear infinite; }
@keyframes cuSpin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
.cu-body { width: 110px; height: 110px; position: relative; transform-style: preserve-3d; }
.cu-face { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.cu-front {
    width: 110px; height: 110px;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    border-radius: 12px; top: 0; left: 0;
    box-shadow: 0 14px 44px rgba(59,130,246,0.5);
}
.cu-top {
    width: 110px; height: 28px;
    background: linear-gradient(135deg, #60A5FA, #3B82F6);
    position: absolute; top: -20px; left: 7px;
    border-radius: 8px 8px 0 0;
    transform: skewX(-45deg); transform-origin: bottom;
}
.cu-right {
    width: 28px; height: 110px;
    background: linear-gradient(180deg, #1D4ED8, #1E40AF);
    position: absolute; right: -20px; top: 7px;
    border-radius: 0 8px 8px 0;
    transform: skewY(-45deg); transform-origin: left;
}
.cu-eye { width: 16px; height: 18px; background: white; border-radius: 50%; overflow: hidden; position: absolute; }
.cu-el { top: 30px; left: 20px; }
.cu-er { top: 30px; right: 20px; }
.cu-pupil { width: 8px; height: 8px; background: #1F1F2E; border-radius: 50%; position: absolute; top: 4px; left: 4px; }
.cu-smile { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 30px; height: 13px; border-bottom: 4px solid white; border-radius: 0 0 18px 18px; }
.cu-orbit {
    position: absolute; width: 200px; height: 200px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    border: 2px dashed rgba(96,165,250,0.3); border-radius: 50%;
    animation: cuOrbit 4s linear infinite;
}
.cu-orbit-ball {
    position: absolute; width: 14px; height: 14px;
    background: linear-gradient(135deg, #60A5FA, #A78BFA);
    border-radius: 50%; top: -7px; left: 50%; transform: translateX(-50%);
    box-shadow: 0 0 14px rgba(96,165,250,0.9);
}
@keyframes cuOrbit { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } }
.cu-arm { position: absolute; width: 16px; height: 44px; background: linear-gradient(135deg, #3B82F6, #1D4ED8); border-radius: 8px; top: 30px; transform-origin: top center; }
.cu-al { left: -12px; transform: rotate(22deg); }
.cu-ar { right: -12px; animation: cuArmR 3s ease-in-out infinite; }
@keyframes cuArmR { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(-52deg); } }
.cu-shadow { position: absolute; bottom: -28px; width: 100px; height: 14px; background: rgba(59,130,246,0.18); border-radius: 50%; filter: blur(6px); animation: cuShad 3s ease-in-out infinite; }
@keyframes cuShad { 0%, 100% { transform: scaleX(1); opacity: 0.6; } 50% { transform: scaleX(0.72); opacity: 0.25; } }
.cu-pt { position: absolute; animation: cuPt 2.5s ease-in-out infinite; color: #60A5FA; }
.cu-pt.p1 { top: 6%;  left: 8%;  font-size: 1rem; animation-delay: 0s; }
.cu-pt.p2 { top: 10%; right: 9%; font-size: 0.7rem; animation-delay: 0.8s; }
.cu-pt.p3 { bottom: 22%; left: 6%; font-size: 0.6rem; animation-delay: 1.6s; }
@keyframes cuPt { 0%, 100% { opacity: 0.4; transform: translateY(0) scale(0.8); } 50% { opacity: 1; transform: translateY(-12px) scale(1.2); } }

/* ── 3. Motion Star (mg-) ── */
.mg-scene {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    scale: 1.45;
}
.mg-star-wrap { position: relative; animation: mgFloat 2.5s ease-in-out infinite; }
@keyframes mgFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-24px) rotate(3deg); } }
.mg-star {
    width: 135px; height: 135px;
    background: linear-gradient(135deg, #F97316, #EC4899, #7C3AED);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    position: relative;
    filter: drop-shadow(0 0 22px rgba(236,72,153,0.7));
    animation: mgGlow 3s linear infinite;
}
@keyframes mgGlow {
    0%   { filter: drop-shadow(0 0 22px rgba(236,72,153,0.7)); }
    33%  { filter: drop-shadow(0 0 28px rgba(124,58,237,0.8)); }
    66%  { filter: drop-shadow(0 0 22px rgba(249,115,22,0.8)); }
    100% { filter: drop-shadow(0 0 22px rgba(236,72,153,0.7)); }
}
.mg-face { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.mg-eye { width: 13px; height: 15px; background: white; border-radius: 50%; display: inline-block; overflow: hidden; position: relative; }
.mg-pupil { width: 7px; height: 7px; background: #1F1F2E; border-radius: 50%; position: absolute; top: 3px; left: 3px; }
.mg-wink { width: 20px; height: 8px; border-bottom: 3px solid white; border-radius: 0 0 12px 12px; margin-top: 5px; }
.mg-trail { position: absolute; border-radius: 2px; opacity: 0.5; animation: mgTrail 1.3s ease-in-out infinite; }
.mgt1 { width: 62px; height: 3px; background: linear-gradient(90deg, transparent, #F97316); top: 50%; right: -56px; animation-delay: 0s; }
.mgt2 { width: 45px; height: 2px; background: linear-gradient(90deg, transparent, #EC4899); top: calc(50% + 9px); right: -42px; animation-delay: 0.2s; }
.mgt3 { width: 30px; height: 2px; background: linear-gradient(90deg, transparent, #7C3AED); top: calc(50% - 9px); right: -28px; animation-delay: 0.4s; }
@keyframes mgTrail { 0%, 100% { opacity: 0.3; transform: scaleX(1); } 50% { opacity: 0.75; transform: scaleX(1.2); } }
.mg-ring { position: absolute; border-radius: 50%; border: 2px solid; animation: mgRing 2.2s ease-out infinite; }
.mgr1 { width: 180px; height: 180px; border-color: rgba(249,115,22,0.2);  animation-delay: 0s; }
.mgr2 { width: 230px; height: 230px; border-color: rgba(236,72,153,0.13); animation-delay: 0.55s; }
.mgr3 { width: 280px; height: 280px; border-color: rgba(124,58,237,0.09); animation-delay: 1.1s; }
@keyframes mgRing { 0% { transform: scale(0.75); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 0; } }
.mg-sp { position: absolute; animation: mgSp 2s ease-in-out infinite; }
.mgs1 { top: 8%;  left: 9%;  color: #F97316; font-size: 0.9rem; animation-delay: 0s; }
.mgs2 { top: 6%;  right: 11%; color: #EC4899; font-size: 0.75rem; animation-delay: 0.4s; }
.mgs3 { bottom: 14%; left: 7%; color: #7C3AED; font-size: 0.6rem; animation-delay: 0.9s; }
.mgs4 { bottom: 10%; right: 9%; color: #FBBF24; font-size: 0.9rem; animation-delay: 1.3s; }
.mgs5 { top: 30%; right: 5%; color: #10B981; font-size: 0.65rem; animation-delay: 1.8s; }
@keyframes mgSp { 0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.3) rotate(180deg); } }

/* ── 4. Blob Artist (ba-) ── */
.ba-scene {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: baFloat 3s ease-in-out infinite;
    scale: 1.45;
}
@keyframes baFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
.ba-body {
    width: 145px; height: 158px;
    background: linear-gradient(160deg, #7C3AED, #A78BFA);
    border-radius: 55% 45% 52% 48% / 58% 52% 45% 50%;
    position: relative; margin: 0 auto;
    box-shadow: 0 0 52px rgba(124,58,237,0.4);
    animation: baWobble 4s ease-in-out infinite;
}
@keyframes baWobble {
    0%,100% { border-radius: 55% 45% 52% 48% / 58% 52% 45% 50%; }
    25%      { border-radius: 48% 52% 58% 45% / 50% 55% 48% 52%; }
    50%      { border-radius: 52% 48% 48% 55% / 55% 48% 52% 46%; }
    75%      { border-radius: 45% 55% 50% 52% / 46% 52% 54% 48%; }
}
.ba-hat { position: absolute; top: -46px; left: 50%; transform: translateX(-50%) rotate(-8deg); }
.ba-hat-brim { width: 92px; height: 14px; background: linear-gradient(135deg, #1F1F2E, #374151); border-radius: 4px; }
.ba-hat-top  { width: 60px;  height: 44px; background: linear-gradient(160deg, #1F1F2E, #374151); margin: 0 auto; border-radius: 6px 6px 0 0; }
.ba-eye { position: absolute; width: 22px; height: 26px; background: white; border-radius: 50%; top: 42px; overflow: hidden; }
.ba-eye.bal { left: 22px; } .ba-eye.bar_e { right: 22px; }
.ba-pupil { width: 11px; height: 11px; background: #1F1F2E; border-radius: 50%; position: absolute; top: 6px; left: 5px; }
.ba-smile { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: 36px; height: 17px; border-bottom: 5px solid white; border-radius: 0 0 22px 22px; }
.ba-blush { position: absolute; width: 16px; height: 8px; background: rgba(255,255,255,0.35); border-radius: 50%; bottom: 38px; }
.ba-blush.bbl { left: 8px; } .ba-blush.bbr { right: 8px; }
.ba-arm { position: absolute; width: 18px; height: 54px; background: linear-gradient(135deg, #7C3AED, #A78BFA); border-radius: 9px; top: 46px; transform-origin: top center; }
.ba-arm.baal { left: -14px; animation: baArmL 2.2s ease-in-out infinite; }
@keyframes baArmL { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(-58deg); } }
.ba-pal-wrap { position: absolute; right: -14px; top: 46px; transform-origin: top center; animation: baArmR 3s ease-in-out infinite; }
@keyframes baArmR { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(44deg); } }
.ba-arm.baar { position: relative; }
.ba-palette {
    position: absolute; bottom: -38px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 36px;
    background: rgba(255,255,255,0.92);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; padding: 6px;
}
.ba-dot { width: 10px; height: 10px; border-radius: 50%; }
.ba-leg { position: absolute; width: 22px; height: 40px; background: linear-gradient(180deg, #5B21B6, #4C1D95); border-radius: 11px; bottom: -38px; }
.ba-leg.bll { left: 28px; animation: svcLegBob 1.8s ease-in-out infinite; }
.ba-leg.blr { right: 28px; animation: svcLegBob 1.8s ease-in-out infinite 0.9s; }
.ba-splat { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.28; }
.ba-splat.bsp1 { width: 52px; height: 40px; background: #EC4899; top: 28px; left: 16px; transform: rotate(-15deg); border-radius: 55% 60% 45% 60%; }
.ba-splat.bsp2 { width: 38px; height: 28px; background: #FBBF24; bottom: 68px; right: 18px; transform: rotate(20deg); border-radius: 60% 45% 55% 50%; }
.ba-splat.bsp3 { width: 28px; height: 22px; background: #3B82F6; top: 88px; right: 42px; border-radius: 50%; }

/* ── 5. Phone / UI (ph-) ── */
.ph-scene {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: phFloat 3.2s ease-in-out infinite;
    scale: 1.45;
}
@keyframes phFloat { 0%, 100% { transform: translateY(0) rotate(1.5deg); } 50% { transform: translateY(-16px) rotate(-1.5deg); } }
.ph-phone {
    width: 106px; height: 192px;
    background: linear-gradient(160deg, #1F1F2E, #374151);
    border-radius: 22px; position: relative;
    box-shadow: 0 0 0 3px #374151, 0 22px 60px rgba(0,0,0,0.3), 0 0 44px rgba(6,182,212,0.25);
}
.ph-notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 28px; height: 8px; background: #1F1F2E; border-radius: 4px; }
.ph-screen {
    position: absolute; inset: 10px 6px;
    background: linear-gradient(160deg, #0f172a, #1e293b);
    border-radius: 15px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 9px;
}
.ph-ui-header { width: 72%; height: 8px; background: rgba(6,182,212,0.5); border-radius: 4px; animation: phBlink 2s ease-in-out infinite; }
.ph-ui-row { width: 82%; height: 5px; background: rgba(255,255,255,0.14); border-radius: 3px; animation: phSlide 2.2s ease-in-out infinite; }
.ph-ui-row.short { width: 60%; animation-delay: 0.3s; }
.ph-ui-btn { width: 52%; height: 13px; background: linear-gradient(90deg, #7C3AED, #EC4899); border-radius: 7px; animation: phBlink 1.5s ease-in-out infinite 0.5s; }
@keyframes phBlink { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes phSlide { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.82); } }
.ph-face { position: absolute; bottom: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ph-eye { width: 8px; height: 9px; background: #06B6D4; border-radius: 50%; display: inline-block; }
.ph-pupil { display: none; }
.ph-smile { width: 12px; height: 5px; border-bottom: 2px solid #06B6D4; border-radius: 0 0 8px 8px; }
.ph-home-bar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 34px; height: 3px; background: rgba(255,255,255,0.28); border-radius: 2px; }
.ph-arm { position: absolute; width: 14px; height: 44px; background: linear-gradient(180deg, #374151, #4B5563); border-radius: 7px; top: 52px; transform-origin: top center; }
.ph-arm.phal { left: -10px; transform: rotate(18deg); }
.ph-arm.phar { right: -10px; animation: phArmR 3.2s ease-in-out infinite; }
@keyframes phArmR { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-46deg); } }
.ph-tap { position: absolute; animation: phTap 2s ease-in-out infinite; }
.ph-tap.pht1 { top: 18%; right: 5%; font-size: 0.9rem; animation-delay: 0s; }
.ph-tap.pht2 { bottom: 28%; right: 8%; font-size: 0.7rem; animation-delay: 0.8s; }
.ph-tap.pht3 { top: 48%; left: 4%; font-size: 0.75rem; animation-delay: 1.5s; }
@keyframes phTap { 0%, 100% { opacity: 0; transform: scale(0.5); } 30%, 70% { opacity: 1; transform: scale(1); } }
.ph-cursor { position: absolute; width: 12px; height: 12px; border: 2px solid #06B6D4; border-radius: 50%; animation: phCursor 2.8s ease-in-out infinite; }
@keyframes phCursor { 0% { top: 28%; left: 32%; opacity: 0; } 20% { opacity: 1; } 55% { top: 55%; left: 58%; } 80% { opacity: 1; } 100% { top: 28%; left: 32%; opacity: 0; } }

/* ── 6. Megaphone (mp-) ── */
.mp-scene {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    scale: 1.45;
}
.mp-wrap { position: relative; display: flex; align-items: center; animation: mpPulse 1.4s ease-in-out infinite; }
@keyframes mpPulse { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-4deg) translateY(-8px); } }
.mp-cone { width: 0; height: 0; border-top: 36px solid transparent; border-bottom: 36px solid transparent; border-right: 82px solid #F97316; }
.mp-body {
    width: 84px; height: 72px;
    background: linear-gradient(135deg, #F97316, #FBBF24);
    border-radius: 14px; position: relative; margin-left: -4px;
    box-shadow: 0 8px 32px rgba(249,115,22,0.4);
}
.mp-eye { position: absolute; width: 14px; height: 16px; background: #1F1F2E; border-radius: 50%; top: 14px; overflow: hidden; }
.mp-eye.mpl { left: 14px; } .mp-eye.mpr { right: 14px; }
.mp-pupil { width: 7px; height: 7px; background: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; }
.mp-smile { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 26px; height: 10px; border-bottom: 3px solid #1F1F2E; border-radius: 0 0 14px 14px; }
.mp-wave { position: absolute; left: -5%; top: 50%; transform: translateY(-50%); border: 3px solid #F97316; border-radius: 50%; pointer-events: none; animation: mpWave 1.4s ease-out infinite; }
.mpw1 { width: 80px;  height: 80px;  animation-delay: 0s; }
.mpw2 { width: 132px; height: 132px; animation-delay: 0.35s; }
.mpw3 { width: 184px; height: 184px; animation-delay: 0.7s; }
@keyframes mpWave { 0% { opacity: 0.8; transform: translateY(-50%) scale(0.55); } 100% { opacity: 0; transform: translateY(-50%) scale(1); } }
.mp-leg { position: absolute; width: 20px; height: 38px; background: linear-gradient(180deg, #D97706, #B45309); border-radius: 10px; bottom: -36px; }
.mp-leg.mll { left: -6px; animation: svcLegBob 1.4s ease-in-out infinite; }
.mp-leg.mlr { right: -18px; animation: svcLegBob 1.4s ease-in-out infinite 0.7s; }
.mp-conf { position: absolute; animation: mpConf 2s ease-out infinite; }
.mpc1 { top: 5%;  left: 22%; font-size: 1.1rem; animation-delay: 0s; }
.mpc2 { top: 8%;  right: 14%; font-size: 0.9rem; animation-delay: 0.4s; }
.mpc3 { top: 2%;  left: 52%; font-size: 1rem; animation-delay: 0.8s; }
.mpc4 { top: 18%; right: 7%; font-size: 0.8rem; animation-delay: 1.2s; }
.mpc5 { top: 7%;  left: 6%;  font-size: 0.75rem; animation-delay: 1.6s; }
@keyframes mpConf { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-65px) rotate(360deg); opacity: 0; } }

/* ── Responsive ── */
@media (max-width: 900px) {
    /* Disable slide-in reveal on mobile/tablet — cards stack vertically */
    .svc-row.reveal-left,
    .svc-row.reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .svc-row, .svc-row--flip {
        flex-direction: column; margin: 0;
        min-height: 100vh; position: sticky; top: 0;
        width: 100%; max-width: 100%; overflow-x: hidden;
    }
    .svc-row__demo { min-height: 58vh; flex: 0 0 58vh; width: 100%; max-width: 100%; }
    .svc-row__info {
        flex: 1; padding: 20px 28px 24px;
        justify-content: center;
        overflow-y: auto; overflow-x: hidden;
        width: 100%; max-width: 100%;
        box-sizing: border-box;
    }
    .svc-includes { display: none; }
    .svc-tags { display: none; }
    .svc-meta { display: none; }
    .svc-num-wrap { margin-bottom: 4px; }
    .svc-title { margin-bottom: 6px; }
    .svc-desc { margin-bottom: 12px; }
}
@media (max-width: 540px) {
    .svc-row { margin: 0; min-height: 100vh; position: sticky; top: 0; width: 100%; max-width: 100%; overflow-x: hidden; }
    .svc-row__demo { min-height: 55vh; flex: 0 0 55vh; width: 100%; }
    .svc-row__info { padding: 16px 20px 20px; }
    .svc-title { font-size: 1.3rem; }
    .svc-desc { font-size: 0.8rem; }
    .svc-cta { font-size: 0.75rem !important; padding: 8px 16px !important; }
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--gradient-card);
    border-radius: 20px;
    padding: 40px 30px;
    transition: var(--transition-normal);
    border: 1px solid rgba(124, 58, 237, 0.1);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: var(--transition-normal);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

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

.service-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Service Icon Mascots ===== */
.icon-mascot {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconBounce 3s ease-in-out infinite;
}

.service-card:hover .icon-mascot {
    animation: iconExcited 0.5s ease-in-out;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes iconExcited {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

/* Mini Eyes - Shared */
.mini-eyes {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.mini-eye {
    width: 12px;
    height: 14px;
    background: var(--white);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.mini-eye.big {
    width: 14px;
    height: 16px;
}

.mini-pupil {
    width: 6px;
    height: 6px;
    background: var(--dark);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transition-fast);
}

.service-card:hover .mini-pupil {
    animation: miniLook 0.4s ease;
}

@keyframes miniLook {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-30%, -60%); }
}

/* Mini Mouths */
.mini-mouth {
    width: 12px;
    height: 6px;
    margin: 4px auto 0;
}

.mini-mouth.happy {
    background: var(--white);
    border-radius: 0 0 10px 10px;
}

.mini-mouth.excited {
    width: 10px;
    height: 10px;
    background: var(--white);
    border-radius: 50%;
}

.mini-mouth.wink {
    width: 8px;
    height: 4px;
    background: var(--white);
    border-radius: 0 0 8px 8px;
}

.mini-mouth.cat {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--white);
    background: none;
}

.mini-mouth.pixel {
    width: 10px;
    height: 3px;
    background: var(--white);
    border-radius: 2px;
}

/* Mini Arms */
.mini-arms {
    position: absolute;
    width: 100%;
    top: 50%;
}

.mini-arm {
    position: absolute;
    width: 8px;
    height: 20px;
    border-radius: 4px;
}

.mini-arm.left {
    left: -6px;
    transform: rotate(20deg);
    animation: miniWaveLeft 1.5s ease-in-out infinite;
}

.mini-arm.right {
    right: -6px;
    transform: rotate(-20deg);
    animation: miniWaveRight 1.5s ease-in-out infinite 0.2s;
}

@keyframes miniWaveLeft {
    0%, 100% { transform: rotate(20deg); }
    50% { transform: rotate(35deg); }
}

@keyframes miniWaveRight {
    0%, 100% { transform: rotate(-20deg); }
    50% { transform: rotate(-35deg); }
}

/* Mini Legs */
.mini-legs {
    position: absolute;
    bottom: -8px;
    display: flex;
    gap: 8px;
}

.mini-leg {
    width: 8px;
    height: 12px;
    border-radius: 4px;
}

.mini-legs.short .mini-leg {
    height: 8px;
}

.mini-leg.left {
    animation: miniWalk 0.8s ease-in-out infinite;
}

.mini-leg.right {
    animation: miniWalk 0.8s ease-in-out infinite 0.4s;
}

@keyframes miniWalk {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ===== Film Reel Character ===== */
.film-reel .mascot-mini-body {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.film-reel .reel-holes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.film-reel .reel-holes span {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--dark);
    border-radius: 50%;
    opacity: 0.3;
}

.film-reel .reel-holes span:nth-child(1) { top: 8px; left: 50%; transform: translateX(-50%); }
.film-reel .reel-holes span:nth-child(2) { bottom: 8px; left: 20%; }
.film-reel .reel-holes span:nth-child(3) { bottom: 8px; right: 20%; }

.film-reel .mascot-mini-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.film-reel .mini-arm {
    background: var(--primary);
}

/* ===== Cube Character ===== */
.cube-buddy {
    perspective: 200px;
}

.cube-buddy .mascot-mini-body.cube {
    width: 45px;
    height: 45px;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate 6s ease-in-out infinite;
}

@keyframes cubeRotate {
    0%, 100% { transform: rotateX(-10deg) rotateY(-10deg); }
    50% { transform: rotateX(-10deg) rotateY(10deg); }
}

.cube-face {
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 8px;
}

.cube-face.front {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
    transform: translateZ(22px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.cube-face.top {
    background: linear-gradient(135deg, #67e8f9 0%, var(--accent-cyan) 100%);
    transform: rotateX(90deg) translateZ(22px);
}

.cube-face.right {
    background: linear-gradient(135deg, var(--accent-blue) 0%, #1d4ed8 100%);
    transform: rotateY(90deg) translateZ(22px);
}

.cube-buddy .mini-leg {
    background: var(--accent-blue);
}

/* ===== Star Character ===== */
.sparkle-star .mascot-mini-body.star-shape {
    width: 60px;
    height: 60px;
    position: relative;
}

.sparkle-star .star-points {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-yellow) 0%, var(--accent-orange) 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: starPulse 2s ease-in-out infinite;
}

@keyframes starPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.sparkle-star .mascot-mini-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    z-index: 2;
}

.sparkle-star .mini-eye {
    background: var(--dark);
}

.sparkle-star .mini-pupil {
    background: var(--white);
}

.sparkle-star .mini-pupil.star-pupil {
    width: 4px;
    height: 4px;
}

.sparkle-particles {
    position: absolute;
    inset: -10px;
    pointer-events: none;
}

.sparkle-particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent-yellow);
    border-radius: 50%;
    animation: particleFloat 2s ease-in-out infinite;
}

.sparkle-particles span:nth-child(1) { top: 0; left: 30%; animation-delay: 0s; }
.sparkle-particles span:nth-child(2) { top: 20%; right: 0; animation-delay: 0.5s; }
.sparkle-particles span:nth-child(3) { bottom: 10%; left: 10%; animation-delay: 1s; }

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-8px) scale(0.5); opacity: 0.5; }
}

/* ===== Blob Artist Character ===== */
.blob-artist .mascot-mini-body.blob {
    width: 50px;
    height: 45px;
    background: linear-gradient(135deg, var(--accent-pink) 0%, #db2777 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: var(--shadow-sm);
    animation: blobWobble 3s ease-in-out infinite;
}

@keyframes blobWobble {
    0%, 100% { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
    50% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}

.blob-artist .mascot-mini-face {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.blob-artist .blob-hat {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 15px;
    background: var(--accent-yellow);
    border-radius: 50% 50% 0 0;
}

.blob-artist .blob-hat::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 5px;
    background: var(--accent-yellow);
    border-radius: 2px;
}

.blob-artist .mini-arm {
    background: var(--accent-pink);
}

.blob-artist .mini-arms.wavy .mini-arm.left {
    animation: wavyArmLeft 1s ease-in-out infinite;
}

.blob-artist .mini-arms.wavy .mini-arm.right {
    animation: wavyArmRight 1s ease-in-out infinite 0.3s;
}

@keyframes wavyArmLeft {
    0%, 100% { transform: rotate(30deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(-5px); }
}

@keyframes wavyArmRight {
    0%, 100% { transform: rotate(-30deg) translateY(0); }
    50% { transform: rotate(-45deg) translateY(-5px); }
}

/* ===== Phone Character ===== */
.phone-pal .mascot-mini-body.phone {
    width: 35px;
    height: 55px;
    background: linear-gradient(135deg, var(--accent-green) 0%, #059669 100%);
    border-radius: 8px;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.phone-pal .phone-screen {
    position: absolute;
    top: 8px;
    left: 4px;
    right: 4px;
    bottom: 8px;
    background: rgba(255,255,255,0.9);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.phone-pal .phone-screen .mini-eye {
    background: var(--dark);
    width: 8px;
    height: 10px;
}

.phone-pal .phone-screen .mini-pupil {
    background: var(--white);
    width: 4px;
    height: 4px;
}

.phone-pal .phone-notch {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 3px;
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
}

.phone-pal .mini-arm {
    background: var(--accent-green);
    top: 15px;
}

/* ===== Megaphone Character ===== */
.mega-buddy .mascot-mini-body.megaphone {
    position: relative;
    width: 60px;
    height: 40px;
}

.mega-buddy .mega-cone {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 25px solid var(--accent-orange);
}

.mega-buddy .mega-body {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 30px;
    background: linear-gradient(135deg, var(--accent-orange) 0%, #ea580c 100%);
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.mega-buddy .mini-eyes.side-eyes {
    gap: 4px;
}

.mega-buddy .mini-eyes.side-eyes .mini-eye {
    width: 10px;
    height: 12px;
}

.mega-buddy .sound-waves {
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.mega-buddy .sound-waves span {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid var(--accent-yellow);
    border-left: none;
    border-radius: 0 50% 50% 0;
    animation: soundWave 1s ease-out infinite;
}

.mega-buddy .sound-waves span:nth-child(1) { animation-delay: 0s; }
.mega-buddy .sound-waves span:nth-child(2) { width: 12px; height: 16px; top: -4px; animation-delay: 0.2s; }
.mega-buddy .sound-waves span:nth-child(3) { width: 16px; height: 24px; top: -8px; animation-delay: 0.4s; }

@keyframes soundWave {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(10px); }
}

.mega-buddy .mini-leg {
    background: var(--accent-orange);
}

.service-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--dark);
}

.service-card p {
    color: var(--gray);
    margin-bottom: 20px;
    line-height: 1.7;
}

.service-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
}

.service-link:hover {
    color: var(--accent-pink);
}

/* ===== Work/Video Section ===== */
.work {
    padding: var(--section-padding) 0;
    background: linear-gradient(180deg, var(--light) 0%, #f0e6ff 100%);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 24px;
}

/* ── Scattered card rotations ── */
.video-grid .video-card:nth-child(1) { --rot: -1.8deg; --tx: 0px;   --ty: 0px; }
.video-grid .video-card:nth-child(2) { --rot:  2.4deg; --tx: 6px;   --ty:-4px; }
.video-grid .video-card:nth-child(3) { --rot: -2.2deg; --tx:-4px;   --ty: 6px; }
.video-grid .video-card:nth-child(4) { --rot:  1.6deg; --tx: 5px;   --ty: 3px; }
.video-grid .video-card:nth-child(5) { --rot: -1.2deg; --tx:-6px;   --ty:-3px; }

.video-card {
    border-radius: 20px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(90px) rotate(0deg) scale(0.75);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, opacity 0.1s;
}

/* Pop-in: triggered by JS adding .card-popped */
.video-card.card-popped {
    animation: cardPop 0.65s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes cardPop {
    0%   { opacity:0; transform: translateY(90px) rotate(0deg) scale(0.7); }
    60%  { opacity:1; }
    100% { opacity:1; transform: translateY(var(--ty,0px)) translateX(var(--tx,0px)) rotate(var(--rot,0deg)) scale(1); }
}

/* Hover — straighten and lift */
.video-card.card-popped:hover {
    transform: translateY(-8px) rotate(0deg) scale(1.03) !important;
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

.video-card.featured {
    grid-column: span 2;
    grid-row: span 2;
}

.video-thumbnail {
    position: relative;
    overflow: hidden;
}

.video-placeholder {
    aspect-ratio: 16/9;
    background: #050010;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.video-card.featured .video-placeholder { aspect-ratio: 4/3; }
.video-placeholder.small                { aspect-ratio: 16/10; }

/* ── Scene container ── */
.vp-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.vp-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/* Cinematic top/bottom vignette */
.vp-cinebar {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.55) 0%, transparent 18%,
        transparent 78%, rgba(0,0,0,0.7) 100%);
    z-index: 5;
    pointer-events: none;
}
/* Duration badge */
.vp-duration {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,0.78);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    z-index: 6;
    font-family: var(--font-body);
}
/* Title bar (featured only) */
.vp-title-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 32px 16px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    z-index: 6;
}
.vp-title-bar span {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-body);
}

/* Overlay */
.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    transition: var(--transition-normal);
    z-index: 4;
}
.video-card:hover .video-overlay { background: rgba(0,0,0,0.28); }

/* Play button */
.play-button {
    width: 68px; height: 68px;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 8;
    transition: var(--transition-bounce);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.play-button::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    animation: playPulse 2.2s ease-out infinite;
}
@keyframes playPulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}
.play-button svg { width: 26px; height: 26px; color: var(--primary); margin-left: 4px; }
.video-card:hover .play-button { transform: scale(1.15); }

/* ═══════════════════════════
   SCENE 1 — Brand Story
═══════════════════════════ */
.vps-brand {
    background: radial-gradient(ellipse at 50% 90%, #4a0090 0%, #1a0040 40%, #050010 100%);
}
.vps-spotlight {
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 260px; height: 260px;
    background: radial-gradient(ellipse at 50% 100%, rgba(180,100,255,0.55) 0%, transparent 65%);
}
.vps-ray {
    position: absolute;
    bottom: 28%; left: 50%;
    width: 3px;
    background: linear-gradient(to top, rgba(210,160,255,0.5), transparent);
    transform-origin: bottom center;
    border-radius: 2px;
    animation: rayPulse 3s ease-in-out infinite;
}
.vps-ray1 { height: 55%; transform: rotate(-22deg); animation-delay: 0s; }
.vps-ray2 { height: 65%; transform: rotate(0deg); background: linear-gradient(to top, rgba(210,160,255,0.7), transparent); animation-delay: 0.3s; }
.vps-ray3 { height: 55%; transform: rotate(22deg); animation-delay: 0.6s; }
@keyframes rayPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.vps-char {
    position: absolute;
    bottom: 20%; left: 50%; transform: translateX(-50%);
    animation: charBob 3s ease-in-out infinite;
}
@keyframes charBob {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-6px); }
}
.vps-char-head {
    width: 32px; height: 32px;
    background: #FBBF24;
    border-radius: 50%;
    margin: 0 auto 3px;
    position: relative;
}
.vps-char-head::before, .vps-char-head::after {
    content: ''; position: absolute;
    width: 6px; height: 6px;
    background: #1a0040; border-radius: 50%; top: 40%;
}
.vps-char-head::before { left: 22%; }
.vps-char-head::after  { right: 22%; }
.vps-char-body {
    width: 36px; height: 42px;
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    border-radius: 8px 8px 2px 2px;
    margin: 0 auto; position: relative;
}
.vps-char-arm {
    position: absolute; width: 10px; height: 28px;
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    border-radius: 5px; top: 2px;
}
.vps-char-arm.l { left: -8px; transform: rotate(20deg); }
.vps-char-arm.r { right: -8px; transform: rotate(-20deg); }
.vps-ground {
    position: absolute; bottom: 0; left: 0; right: 0; height: 22%;
    background: linear-gradient(to top, rgba(120,60,200,0.25), transparent);
}

/* ═══════════════════════════
   SCENE 2 — Product Demo
═══════════════════════════ */
.vps-product {
    background: linear-gradient(150deg, #03091f 0%, #071540 50%, #0a1f60 100%);
}
.vps-phone {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-38%, -50%) rotate(-4deg);
    width: 58px; height: 98px;
    background: #0d1a3a;
    border-radius: 10px;
    border: 2px solid rgba(59,130,246,0.6);
    box-shadow: 0 0 25px rgba(59,130,246,0.3), inset 0 0 10px rgba(59,130,246,0.08);
    overflow: hidden;
    padding: 6px 4px;
}
.vps-phone-bar {
    height: 4px;
    background: linear-gradient(90deg, #3B82F6, #06B6D4);
    border-radius: 2px; margin-bottom: 4px;
}
.vps-phone-bar.short { width: 60%; background: rgba(6,182,212,0.6); }
.vps-phone-pill {
    width: 28px; height: 13px;
    background: linear-gradient(90deg, #3B82F6, #06B6D4);
    border-radius: 7px; margin: 3px auto;
    box-shadow: 0 0 8px rgba(59,130,246,0.5);
    animation: pillPulse 1.6s ease-in-out infinite;
}
@keyframes pillPulse { 0%,100% { opacity: 0.8; } 50% { opacity: 1; box-shadow: 0 0 14px rgba(59,130,246,0.8); } }
.vps-phone-chart {
    display: flex; align-items: flex-end; gap: 3px;
    padding: 0 1px; height: 28px; margin-top: 4px;
}
.vps-bar-item {
    flex: 1;
    background: linear-gradient(to top, #3B82F6, rgba(6,182,212,0.8));
    border-radius: 2px 2px 0 0;
}
.vps-bar-item:nth-child(1) { height: 45%; animation: bh1 2s ease-in-out infinite alternate; }
.vps-bar-item:nth-child(2) { height: 75%; animation: bh2 2s ease-in-out infinite alternate 0.3s; }
.vps-bar-item:nth-child(3) { height: 55%; animation: bh3 2s ease-in-out infinite alternate 0.6s; }
.vps-bar-item:nth-child(4) { height: 88%; animation: bh4 2s ease-in-out infinite alternate 0.9s; }
@keyframes bh1 { from { height: 20%; } to { height: 65%; } }
@keyframes bh2 { from { height: 50%; } to { height: 95%; } }
@keyframes bh3 { from { height: 30%; } to { height: 75%; } }
@keyframes bh4 { from { height: 65%; } to { height: 100%; } }
.vps-data {
    position: absolute; font-size: 10px; font-weight: 700;
    color: #06B6D4;
    background: rgba(6,182,212,0.1);
    border: 1px solid rgba(6,182,212,0.3);
    padding: 2px 6px; border-radius: 6px;
    font-family: var(--font-body);
    animation: dataFloat 3s ease-in-out infinite;
}
.vps-d1 { top: 16%; right: 10%; animation-delay: 0s; }
.vps-d2 { bottom: 20%; left: 8%; animation-delay: 1.2s; }
@keyframes dataFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ═══════════════════════════
   SCENE 3 — Game Trailer
═══════════════════════════ */
.vps-game {
    background: radial-gradient(ellipse at 50% 50%, #1c0025 0%, #0a000f 60%, #030005 100%);
}
.vps-star {
    position: absolute; background: #fff; border-radius: 50%;
    animation: starTwinkle 2s ease-in-out infinite;
}
.vps-s1 { width:2px; height:2px; top:8%;  left:12%; animation-delay:0s; }
.vps-s2 { width:3px; height:3px; top:18%; right:18%; animation-delay:0.5s; }
.vps-s3 { width:2px; height:2px; top:32%; left:28%; animation-delay:1s; }
.vps-s4 { width:3px; height:3px; top:12%; left:58%; animation-delay:1.5s; }
.vps-s5 { width:2px; height:2px; top:45%; right:12%; animation-delay:0.7s; }
.vps-s6 { width:2px; height:2px; top:6%;  left:45%; animation-delay:1.8s; }
@keyframes starTwinkle { 0%,100% { opacity:0.25; transform:scale(1); } 50% { opacity:1; transform:scale(1.8); } }
.vps-ring {
    position: absolute; left:50%; top:50%; border-radius:50%;
    border: 1.5px solid; animation: ringExpand 2.4s ease-out infinite;
}
.vps-r1 { width:38px;  height:38px;  border-color:rgba(249,115,22,0.9); transform:translate(-50%,-50%); animation-delay:0s; }
.vps-r2 { width:72px;  height:72px;  border-color:rgba(249,115,22,0.5); transform:translate(-50%,-50%); animation-delay:0.8s; }
.vps-r3 { width:108px; height:108px; border-color:rgba(249,115,22,0.2); transform:translate(-50%,-50%); animation-delay:1.6s; }
@keyframes ringExpand {
    0%   { transform:translate(-50%,-50%) scale(0.6); opacity:1; }
    100% { transform:translate(-50%,-50%) scale(1.5); opacity:0; }
}
.vps-sword {
    position: absolute; left:50%; top:16%; transform:translateX(-50%);
    width:5px; height:70px;
    background: linear-gradient(to bottom, #fff 0%, rgba(249,115,22,0.9) 55%, transparent 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 14px rgba(249,115,22,0.9), 0 0 30px rgba(249,115,22,0.4);
    animation: swordGlow 2s ease-in-out infinite;
}
.vps-sword::before {
    content: ''; position:absolute;
    top:62%; left:50%; transform:translate(-50%,0);
    width:20px; height:4px;
    background:rgba(249,115,22,0.85); border-radius:2px;
    box-shadow: 0 0 8px rgba(249,115,22,0.8);
}
@keyframes swordGlow {
    0%,100% { box-shadow:0 0 14px rgba(249,115,22,0.9),0 0 30px rgba(249,115,22,0.4); }
    50%      { box-shadow:0 0 22px rgba(249,115,22,1),  0 0 50px rgba(249,115,22,0.6); }
}

/* ═══════════════════════════
   SCENE 4 — Logo Animation
═══════════════════════════ */
.vps-logo {
    background: linear-gradient(135deg, #020210 0%, #060625 50%, #0a0a38 100%);
}
.vps-grid-line { position:absolute; background:rgba(124,58,237,0.12); }
.vps-grid-line.h1 { height:1px; left:0; right:0; top:33%; }
.vps-grid-line.h2 { height:1px; left:0; right:0; top:66%; }
.vps-grid-line.v1 { width:1px; top:0; bottom:0; left:33%; }
.vps-grid-line.v2 { width:1px; top:0; bottom:0; left:66%; }
.vps-hex {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:56px; height:56px;
    clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background: linear-gradient(135deg,#7C3AED 0%,#EC4899 100%);
    animation: hexSpin 5s linear infinite;
    filter: drop-shadow(0 0 12px rgba(124,58,237,0.8));
}
.vps-hex-inner {
    position:absolute; inset:10px;
    clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background:#080830;
}
@keyframes hexSpin {
    from { transform:translate(-50%,-50%) rotate(0deg); }
    to   { transform:translate(-50%,-50%) rotate(360deg); }
}
.vps-orbit { position:absolute; left:50%; top:50%; border-radius:50%; border:1px solid; }
.vps-o1 { width:88px;  height:88px;  border-color:rgba(124,58,237,0.45); transform:translate(-50%,-50%); animation:orbitSpin 6s linear infinite; }
.vps-o2 { width:128px; height:128px; border-color:rgba(236,72,153,0.3);  transform:translate(-50%,-50%); animation:orbitSpin 10s linear infinite reverse; }
.vps-o1::after, .vps-o2::after {
    content:''; position:absolute; width:7px; height:7px; border-radius:50%; top:-3px; left:50%; transform:translateX(-50%);
}
.vps-o1::after { background:#7C3AED; box-shadow:0 0 8px #7C3AED; }
.vps-o2::after { background:#EC4899; box-shadow:0 0 8px #EC4899; }
@keyframes orbitSpin {
    from { transform:translate(-50%,-50%) rotate(0deg); }
    to   { transform:translate(-50%,-50%) rotate(360deg); }
}

/* ═══════════════════════════
   SCENE 5 — Mascot Series
═══════════════════════════ */
.vps-mascot {
    background: linear-gradient(135deg, #0d001f 0%, #1e0040 50%, #0d001f 100%);
}
.vps-mascot-char { position:absolute; bottom:12%; animation:mascotBob 3s ease-in-out infinite; }
.vps-mc1 { left:8%;  animation-delay:0s; }
.vps-mc2 { left:50%; transform:translateX(-50%); animation-delay:0.5s; animation-name:mascotBobC; }
.vps-mc3 { right:8%; animation-delay:1s; }
@keyframes mascotBob  { 0%,100% { transform:translateY(0); }          50% { transform:translateY(-8px); } }
@keyframes mascotBobC { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-8px); } }
.vps-mc-head {
    width:46px; height:46px; border-radius:50%; position:relative;
    box-shadow:0 6px 16px rgba(0,0,0,0.4);
}
.vps-mc2 .vps-mc-head { width:58px; height:58px; }
.vps-mc1 .vps-mc-head { background:radial-gradient(circle at 35% 35%,#FCD34D,#F97316); }
.vps-mc2 .vps-mc-head { background:radial-gradient(circle at 35% 35%,#A78BFA,#7C3AED); }
.vps-mc3 .vps-mc-head { background:radial-gradient(circle at 35% 35%,#F9A8D4,#EC4899); }
.vps-mc-eye { position:absolute; width:8px; height:9px; background:#1a0040; border-radius:50%; top:34%; }
.vps-mc2 .vps-mc-eye { width:10px; height:11px; }
.vps-mc-eye.l { left:24%; }
.vps-mc-eye.r { right:24%; }
.vps-mc-smile {
    position:absolute; width:18px; height:9px;
    border-bottom:3px solid rgba(0,0,0,0.45); border-radius:0 0 12px 12px;
    bottom:22%; left:50%; transform:translateX(-50%);
}
.vps-mc2 .vps-mc-smile { width:22px; height:11px; }
.vps-sparkle { position:absolute; color:#FBBF24; animation:vpsSparkle 2.5s ease-in-out infinite; filter:drop-shadow(0 0 4px rgba(251,191,36,0.6)); }
.vps-sparkle.sp1 { font-size:14px; top:14%; left:18%; animation-delay:0s; }
.vps-sparkle.sp2 { font-size:18px; top:8%;  right:22%; animation-delay:0.8s; }
.vps-sparkle.sp3 { font-size:13px; top:20%; left:52%; animation-delay:1.6s; }
@keyframes vpsSparkle { 0%,100% { transform:translateY(0) rotate(0deg); opacity:0.8; } 50% { transform:translateY(-10px) rotate(20deg); opacity:1; } }



.video-info {
    padding: 20px;
}

.video-tag {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: 8px;
}

.video-info h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--dark);
    margin-bottom: 4px;
}

.video-info p {
    color: var(--gray);
    font-size: 0.9rem;
}

.work-cta {
    text-align: center;
    margin-top: 50px;
}

/* ===== About Section ===== */
.about {
    padding: var(--section-padding) 0;
    background: var(--white);
    position: relative;
    overflow: hidden;
}

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

.about-text .section-tag,
.about-text .section-title {
    text-align: left;
}

.about-text p {
    color: var(--gray);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.about-features {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--light);
    border-radius: 50px;
    font-weight: 600;
    color: var(--dark);
}

.feature-icon {
    font-size: 1.2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.stat-card {
    background: var(--gradient-card);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(124, 58, 237, 0.1);
    transition: var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.stat-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

.stat-plus {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-pink);
}

.stat-label {
    display: block;
    color: var(--gray);
    font-size: 0.9rem;
    margin-top: 8px;
}

.about-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.shape-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: var(--primary-light);
    top: -100px;
    right: -100px;
    animation: blobMove 15s ease-in-out infinite;
}

.blob-2 {
    width: 300px;
    height: 300px;
    background: var(--accent-pink);
    bottom: -50px;
    left: -50px;
    animation: blobMove 12s ease-in-out infinite reverse;
}

@keyframes blobMove {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.1); }
    50% { transform: translate(-20px, 20px) scale(0.9); }
    75% { transform: translate(20px, 30px) scale(1.05); }
}

/* ===== CTA Section ===== */
/* ===== Contact Section ===== */
.contact-section {
    padding: var(--section-padding) 0;
    background: linear-gradient(160deg, #f8f5ff 0%, #fff5fb 50%, #f0f9ff 100%);
    position: relative;
    overflow: hidden;
}

.contact-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.contact-confetti span {
    position: absolute;
    font-size: 28px;
    animation: confetti 12s linear infinite;
    opacity: 0.2;
}
.contact-confetti span:nth-child(1) { left:  5%; animation-delay: 0s; }
.contact-confetti span:nth-child(2) { left: 18%; animation-delay: 2s; }
.contact-confetti span:nth-child(3) { left: 35%; animation-delay: 5s; }
.contact-confetti span:nth-child(4) { left: 52%; animation-delay: 1s; }
.contact-confetti span:nth-child(5) { left: 67%; animation-delay: 7s; }
.contact-confetti span:nth-child(6) { left: 78%; animation-delay: 3.5s; }
.contact-confetti span:nth-child(7) { left: 88%; animation-delay: 9s; }
.contact-confetti span:nth-child(8) { left: 95%; animation-delay: 4s; }

@keyframes confetti {
    0%   { transform: translateY(-80px) rotate(0deg);   opacity: 0; }
    8%   { opacity: 0.35; }
    92%  { opacity: 0.35; }
    100% { transform: translateY(calc(100vh + 80px)) rotate(540deg); opacity: 0; }
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 72px;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ── Left panel ── */
.contact-info .section-tag { margin-bottom: 12px; }
.contact-info .section-title { margin-bottom: 20px; }

.contact-intro {
    font-size: 1.05rem;
    color: var(--gray);
    line-height: 1.75;
    margin-bottom: 36px;
    max-width: 420px;
}

.contact-details { display: flex; flex-direction: column; gap: 18px; margin-bottom: 40px; }
.contact-detail {
    display: flex;
    align-items: center;
    gap: 14px;
}
.detail-icon {
    width: 44px; height: 44px;
    background: var(--white);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 14px rgba(124,58,237,0.1);
    flex-shrink: 0;
}
.detail-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value { display: block; font-size: 0.95rem; font-weight: 600; color: var(--dark); }

/* Contact mascot */
.contact-mascot-wrap {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}
.contact-mascot { position: relative; }
.cm-body {
    width: 88px; height: 88px;
    background: var(--gradient-primary);
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    animation: cmBounce 2s ease-in-out infinite;
    box-shadow: 0 8px 32px rgba(124,58,237,0.35);
}
@keyframes cmBounce {
    0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
    40%       { transform: translateY(-16px) scaleX(0.92) scaleY(1.08); }
    60%       { transform: translateY(0) scaleX(1.12) scaleY(0.88); }
    80%       { transform: translateY(-5px); }
}
.cm-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.cm-eyes { display: flex; gap: 14px; margin-bottom: 6px; }
.cm-eye {
    width: 14px; height: 16px;
    background: white; border-radius: 50%;
    overflow: hidden; position: relative;
}
.cm-pupil {
    width: 7px; height: 7px;
    background: var(--dark); border-radius: 50%;
    position: absolute; top: 3px; left: 3px;
}
.cm-mouth {
    width: 22px; height: 11px;
    border-bottom: 3px solid white;
    border-radius: 0 0 14px 14px;
}
.cm-blush {
    position: absolute;
    width: 12px; height: 6px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%; bottom: 20px;
}
.cm-blush.l { left: 10px; } .cm-blush.r { right: 10px; }
.cm-arm {
    position: absolute;
    width: 14px; height: 36px;
    background: var(--gradient-primary);
    border: 3px solid rgba(255,255,255,0.5);
    border-radius: 7px; top: 28px;
    transform-origin: top center;
}
.cm-arm.l { left: -10px; animation: cmArmL 2s ease-in-out infinite; }
.cm-arm.r { right: -10px; animation: cmArmR 2s ease-in-out infinite; }
@keyframes cmArmL { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(-55deg); } }
@keyframes cmArmR { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(55deg); } }
.cm-shadow {
    width: 64px; height: 10px;
    background: rgba(124,58,237,0.2);
    border-radius: 50%;
    margin: 6px auto 0;
    filter: blur(4px);
    animation: cmShadow 2s ease-in-out infinite;
}
@keyframes cmShadow {
    0%, 100% { transform: scaleX(1); opacity: 0.6; }
    40%       { transform: scaleX(0.75); opacity: 0.3; }
    60%       { transform: scaleX(1.15); opacity: 0.7; }
}
.cm-bubble {
    background: var(--white);
    border-radius: 16px 16px 16px 4px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dark);
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    white-space: nowrap;
    animation: cmBubble 3s ease-in-out infinite;
}
@keyframes cmBubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── Right panel: Form ── */
/* ── Spinning gradient border on form card ── */
@property --form-border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes formBorderSpin {
    to { --form-border-angle: 360deg; }
}

.contact-form-wrap {
    background: linear-gradient(145deg, #0a0020 0%, #130035 50%, #0a001a 100%);
    border-radius: 28px;
    padding: 48px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(124,58,237,0.25), 0 4px 20px rgba(0,0,0,0.2);
}

/* Decorative blobs inside form card */
.form-deco {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.fd1 { width: 220px; height: 220px; background: rgba(124,58,237,0.25); top: -60px; right: -40px; }
.fd2 { width: 160px; height: 160px; background: rgba(236,72,153,0.2);  bottom: 40px; left: -30px; }
.fd3 { width: 120px; height: 120px; background: rgba(249,115,22,0.15); bottom: -30px; right: 80px; }

/* Card header */
.form-card-header { margin-bottom: 28px; position: relative; z-index: 1; }
.form-card-sub { font-size: 0.9rem; color: rgba(255,255,255,0.5); margin-bottom: 16px; }

/* Progress bar */
.fps-bar {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 6px;
}
.fps-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7C3AED, #EC4899, #F97316);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.fps-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    text-align: right;
    letter-spacing: 0.3px;
}
.contact-form-wrap::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 31px;
    background: conic-gradient(
        from var(--form-border-angle),
        #7C3AED, #EC4899, #F97316, #FBBF24, #10B981, #3B82F6, #7C3AED
    );
    z-index: -1;
    animation: formBorderSpin 4s linear infinite;
}

/* ── Progress bar ── */
.form-progress {
    height: 6px;
    background: rgba(124,58,237,0.1);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 4px;
}
.form-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7C3AED, #EC4899, #F97316);
    border-radius: 20px;
    transition: width 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.form-progress-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-light);
    text-align: right;
    margin-bottom: 16px;
    letter-spacing: 0.3px;
}

/* ── Glowing gradient focus on inputs ── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: transparent;
    background: var(--white);
    box-shadow:
        0 0 0 2px #EC4899,
        0 0 0 5px rgba(236,72,153,0.15),
        0 0 20px rgba(124,58,237,0.12);
    animation: inputGlow 2s ease-in-out infinite;
}
@keyframes inputGlow {
    0%,100% { box-shadow: 0 0 0 2px #EC4899, 0 0 0 5px rgba(236,72,153,0.15), 0 0 20px rgba(124,58,237,0.12); }
    33%      { box-shadow: 0 0 0 2px #7C3AED, 0 0 0 5px rgba(124,58,237,0.15), 0 0 20px rgba(124,58,237,0.15); }
    66%      { box-shadow: 0 0 0 2px #F97316, 0 0 0 5px rgba(249,115,22,0.15), 0 0 20px rgba(249,115,22,0.12); }
}

/* ── Form confetti particle ── */
.form-confetti {
    position: fixed;
    width: 10px; height: 10px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 99999;
    animation: confettiFall var(--dur) ease-in forwards;
}
@keyframes confettiFall {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
}

.contact-form { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }

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

.form-group { display: flex; flex-direction: column; gap: 7px; }

.form-group label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.fg-emoji { font-size: 0.95rem; }

/* Field wrapper with check tick */
.fg-icon { position: relative; }
.fg-check {
    position: absolute;
    right: 14px;
    bottom: 14px;
    color: #10B981;
    font-weight: 900;
    font-size: 1rem;
    transform: scale(0) rotate(-10deg);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
}
.fg-check--select { bottom: 16px; right: 40px; }
.fg-icon.is-filled .fg-check { transform: scale(1) rotate(0deg); }

/* Character counter */
.fg-counter {
    text-align: right;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    margin-top: -2px;
    transition: color 0.3s;
    font-weight: 600;
}
.fg-counter.warn  { color: #F97316; }
.fg-counter.limit { color: #EF4444; }

.form-group input,
.form-group select,
.form-group textarea {
    padding: 13px 16px;
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: white;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--dark);
    background: var(--light);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
    resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.2); }
.form-group select option { background: #130035; color: white; }

/* Service checkboxes as chips */
.service-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.chip input[type="checkbox"] { display: none; }
.chip:hover { border-color: #7C3AED; color: #A78BFA; background: rgba(124,58,237,0.12); }
.chip:has(input:checked) {
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    border-color: transparent;
    color: white;
}
.chip.chip-pop { animation: chipPop 0.35s cubic-bezier(0.34,1.8,0.64,1) forwards; }
@keyframes chipPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25) rotate(-4deg); }
    65%  { transform: scale(0.92) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ── Fun submit button ── */
.btn-fun-submit {
    width: 100%;
    padding: 18px 24px;
    border: none;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #F97316 100%);
    background-size: 200% 200%;
    animation: bfsGradient 3s ease infinite;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 4px;
}
@keyframes bfsGradient {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.btn-fun-submit:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 32px rgba(124,58,237,0.45);
}
.bfs-rocket {
    font-size: 1.2rem;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-fun-submit:hover .bfs-rocket { transform: translateX(4px) translateY(-3px) rotate(-45deg); }
.bfs-sending { display: none; }

/* Launching state */
.btn-fun-submit.launching .bfs-text,
.btn-fun-submit.launching .bfs-rocket { display: none; }
.btn-fun-submit.launching .bfs-sending { display: inline; }
.btn-fun-submit.launching { animation: btnLaunch 0.5s ease forwards; }
@keyframes btnLaunch {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.97) translateY(2px); }
    60%  { transform: scale(1.04) translateY(-4px); }
    100% { transform: scale(1) translateY(0); }
}

/* ── Success state ── */
.form-success {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 20px;
    background: rgba(16,185,129,0.08);
    border: 1.5px solid rgba(16,185,129,0.25);
    border-radius: 16px;
    text-align: center;
}
.form-success.visible { display: flex; animation: successPop 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes successPop {
    0%   { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}
.fs-emoji { font-size: 2.8rem; animation: fsBouce 1s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes fsBouce {
    0%   { transform: scale(0) rotate(-20deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.fs-title { font-size: 1.2rem; font-weight: 800; color: white; }
.fs-body  { font-size: 0.88rem; color: rgba(255,255,255,0.5); }

/* ===== Footer ===== */
.footer {
    background: var(--dark);
    color: var(--white);
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 60px;
    margin-bottom: 40px;
}

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

.footer-brand p {
    color: var(--gray-light);
    margin-bottom: 24px;
    max-width: 300px;
}

.social-links {
    display: flex;
    gap: 16px;
}

.social-links a {
    font-size: 1.5rem;
    transition: var(--transition-fast);
}

.social-links a:hover {
    transform: translateY(-3px);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer-column h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--white);
}

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

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

.footer-column a {
    color: var(--gray-light);
    text-decoration: none;
    transition: var(--transition-fast);
}

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

.footer-column li:not(:has(a)) {
    color: var(--gray-light);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--dark-light);
}

.footer-bottom p {
    color: var(--gray-light);
    font-size: 0.9rem;
}

/* ===== Animations for Scroll ===== */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Responsive Design ===== */
/* ============================================================
   RESPONSIVE — base overflow guard
   ============================================================ */
html {
    overflow-x: hidden;
    max-width: 100%;
}
body {
    max-width: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .hero-text  { order: 1; }
    .hero-visual { order: 2; height: 400px; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-buttons  { justify-content: center; }
    .mascot { right: 10px; bottom: 10px; }

    .about-content { grid-template-columns: 1fr; }
    .about-text { text-align: center; }
    .about-text .section-tag, .about-text .section-title { text-align: center; }
    .about-features { justify-content: center; }

    /* Services — reduce padding, keep side-by-side */
    .services > .container { min-height: 70vh; padding-top: 80px; }
    .svc-row__info { padding: 40px 40px; }

    /* Video grid */
    .video-grid { grid-template-columns: repeat(2, 1fr); }
    .video-card.featured { grid-column: span 2; grid-row: span 1; }

    /* Reduce card scatter on tablet */
    .video-grid .video-card:nth-child(2) { --tx: 3px; --ty: -2px; }
    .video-grid .video-card:nth-child(3) { --tx: -2px; --ty: 3px; }
    .video-grid .video-card:nth-child(4) { --tx: 3px; --ty: 2px; }
    .video-grid .video-card:nth-child(5) { --tx: -3px; --ty: -2px; }

    /* Contact — stack on tablet */
    .contact-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
    :root { --section-padding: 60px; }

    /* Nav */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--white);
        flex-direction: column;
        padding: 20px;
        gap: 16px;
        box-shadow: var(--shadow-md);
        z-index: 999;
    }
    .nav-links.active { display: flex; }
    .hamburger { display: flex; }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

    /* Hero - stack vertically */
    .hero { flex-direction: column; align-items: center; justify-content: flex-start; padding: 80px 20px 40px; overflow: hidden; min-height: 100vh; }
    .hero .container { width: 100%; }
    .hero-visual {
        height: 460px !important;
        min-height: 460px !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 60px !important;
    }
    .floating-shapes { display: none; }
    .alien-hint {
        width: calc(100% - 48px);
        max-width: calc(100% - 48px);
        left: 24px;
        right: 24px;
        transform: none;
        padding: 0 8px;
        box-sizing: border-box;
        bottom: 4px !important;
    }

    .scroll-indicator {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: fit-content;
        margin-top: 32px;
        opacity: 1;
        animation: none;
        align-self: center;
    }

    .hero-play-hint { display: none; }

    /* Mobile "click to play" hint above H1 */
    .mobile-play-hint {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: var(--primary);
        background: rgba(124,58,237,0.08);
        border: 1.5px solid rgba(124,58,237,0.2);
        border-radius: 20px;
        padding: 5px 14px;
        margin-bottom: 12px;
    }

    /* Services — column layout, keep sticky stacking */
    .services { overflow: visible; }
    .services > .container { min-height: auto; padding: 60px 20px; }
    .svc-row,
    .svc-row.svc-row--flip {
        flex-direction: column !important;
        min-height: 100vh !important;
        position: sticky !important;
        top: 0 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border-radius: 0;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .svc-row__demo {
        flex: 0 0 57vh !important;
        width: 100% !important;
        min-height: 57vh !important;
    }
    .svc-row__info {
        flex: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px 20px 20px !important;
        justify-content: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 4px solid;
    }
    .svc-includes { display: none !important; }
    .svc-num-wrap { margin-bottom: 4px !important; }
    .svc-title { margin-bottom: 6px !important; }
    .svc-desc { margin-bottom: 12px !important; }
    .svc-row--2d   .svc-row__info { border-top-color: #FBBF24; }
    .svc-row--3d   .svc-row__info { border-top-color: #3B82F6; }
    .svc-row--mg   .svc-row__info { border-top-color: #EC4899; }
    .svc-row--char .svc-row__info { border-top-color: #7C3AED; }
    .svc-row--ui   .svc-row__info { border-top-color: #10B981; }
    .svc-row--ads  .svc-row__info { border-top-color: #F97316; }
    /* Remove per-row top accent since info already has it */
    .svc-row--2d, .svc-row--3d, .svc-row--mg,
    .svc-row--char, .svc-row--ui, .svc-row--ads { border-top: none !important; }

    /* Stack cards — no rotation/offset on mobile */
    .video-grid { grid-template-columns: 1fr; }
    .video-card.featured { grid-column: span 1; }
    .video-grid .video-card { --rot: 0deg; --tx: 0px; --ty: 0px; }

    .stack-card { width: 280px; height: 320px; }
    .services-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }

    /* Contact */
    .contact-layout { grid-template-columns: 1fr; gap: 48px; }
    .contact-mascot-wrap { display: none; }
    .form-row { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 28px 20px; }
    .contact-form-wrap::before { border-radius: 20px; }

    /* Footer */
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-brand { display: flex; flex-direction: column; align-items: center; }
    .social-links { justify-content: center; }
    .footer-links { grid-template-columns: 1fr; text-align: center; }

    /* Typography clamp on mobile */
    .section-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
    .svc-title { font-size: 1.4rem; }
    .hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }

    /* Prevent svc-cta border glow from causing overflow */
    .svc-cta { overflow: hidden; }
    .svc-cta::before { display: none; }


    /* Edge peek chars — smaller on mobile */
    .peek-head { font-size: 60px; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
    .hero { padding: 90px 16px 40px; }
    .hero-visual { height: 260px; }

    .stack-card { width: 240px; height: 280px; }
    .mascot { display: none; }

    .service-card { padding: 30px 20px; }
    .stat-number { font-size: 2.5rem; }

    /* Services info panel */
    .svc-row__info { padding: 28px 18px; }
    .svc-row__demo { min-height: 220px; }
    .svc-includes { display: none; } /* hide list on tiny screens */

    /* Form */
    .contact-form-wrap { padding: 24px 16px; }
    .service-chips { gap: 6px; }
    .chip { padding: 6px 10px; font-size: 0.76rem; }

    /* Video cards */
    .play-button { width: 52px; height: 52px; }
    .play-button svg { width: 20px; height: 20px; }
}

/* ── Z Fold / short landscape-ish wide mobile (728px × ~656px) ── */
@media (min-width: 600px) and (max-width: 768px) and (max-height: 720px) {
    /* More breathing room between fixed nav and first content */
    .hero {
        padding: 110px 24px 30px;
        min-height: 100vh;
        justify-content: flex-start;
    }

    /* Click to play badge — push it clearly below the nav */
    .mobile-play-hint {
        margin-top: 32px;
        margin-bottom: 14px;
    }

    /* Slightly smaller visual so everything fits */
    .hero-visual { height: 280px; }

    /* Scroll indicator — extra downward push so it clears the visual */
    .scroll-indicator {
        margin-top: 28px;
        margin-bottom: 12px;
    }
}

/* ============================================================
   RESPONSIVE — Large tablet, small tablet, mobile landscape
   ============================================================ */

/* ── Large tablet portrait (769px – 1024px) ── */
/* Restore 2-col hero layout — there's enough room */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero {
        padding: 100px 48px 60px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    .hero-content {
        grid-template-columns: 1fr 1fr;
        text-align: left;
        gap: 32px;
        align-items: center;
        width: 100%;
    }
    .hero-text  { order: 1; }
    .hero-visual { order: 2; }
    .hero-subtitle { margin-left: 0; margin-right: 0; max-width: 420px; }
    .hero-buttons  { justify-content: flex-start; }
    .hero-title { font-size: clamp(2rem, 4.5vw, 3.2rem); }
    .mobile-play-hint { display: none; }

    /* Scroll flows below the hero-content (and therefore below the instructions) */
    .scroll-indicator {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 28px;
        align-self: center;
        opacity: 1;
        animation: none;
        width: fit-content;
    }

    /* Stats — 2 × 2 grid */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* About — side by side */
    .about-content { grid-template-columns: 1fr 1fr; gap: 48px; }
    .about-text { text-align: left; }
    .about-text .section-tag,
    .about-text .section-title { text-align: left; }
    .about-features { justify-content: flex-start; }

    /* Pricing — 2-col */
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }

    /* Services — keep side-by-side (overrides the 900px stack) */
    .svc-row.reveal-left,
    .svc-row.reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .svc-row,
    .svc-row.svc-row--flip {
        flex-direction: row !important;
        min-height: 80vh !important;
        position: sticky !important;
        top: 0 !important;
    }
    .svc-row__demo {
        flex: 0 0 48% !important;
        min-height: 80vh !important;
        width: 48% !important;
    }
    .svc-row__info {
        flex: 1 !important;
        padding: 40px 32px !important;
        width: auto !important;
        max-width: 100% !important;
        border-left: none !important;
        border-top: none !important;
        overflow-y: auto !important;
    }
    .svc-includes { display: none !important; }
    .svc-tags { display: flex; }
    .svc-meta { display: flex; }
}

/* ── Small tablet portrait (481px – 768px) ── */
@media (min-width: 481px) and (max-width: 768px) {
    .hero { padding: 95px 32px 40px; }
    .hero-visual {
        height: 440px !important;
        min-height: 440px !important;
        align-items: flex-start !important;
        padding-top: 20px !important;
        padding-bottom: 88px !important;
    }
    .stack-card { width: 260px; height: 380px; }

    /* 2-col stats on small tablet */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Give service cards a bit more room */
    .svc-row__demo { flex: 0 0 52vh !important; min-height: 52vh !important; }
    .svc-row__info { padding: 20px 28px 24px !important; }

    /* 2-col pricing */
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile landscape (phone rotated, height ≤ 500px) ── */
@media (orientation: landscape) and (max-height: 500px) {
    /* Hero — side by side to use the extra width */
    .hero {
        flex-direction: row;
        align-items: center;
        padding: 65px 28px 16px;
        min-height: 100vh;
        overflow-y: auto;
    }
    .hero-content {
        grid-template-columns: 1fr 1fr;
        text-align: left;
        gap: 20px;
        align-items: center;
    }
    .hero-text  { order: 1; }
    .hero-visual { order: 2; height: 230px; }
    .hero-title { font-size: clamp(1.4rem, 4.5vw, 2.2rem); line-height: 1.15; }
    .hero-subtitle { font-size: 0.82rem; margin: 6px 0 10px; max-width: 100%; }
    .hero-buttons { justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
    .btn { padding: 10px 18px; font-size: 0.82rem; }
    .mobile-play-hint { margin-top: 0; margin-bottom: 8px; font-size: 0.68rem; padding: 3px 10px; }
    .floating-shapes { display: none; }

    /* Hide scroll indicator — not useful in landscape */
    .scroll-indicator { display: none !important; }

    /* Nav — tighter in landscape */
    .navbar { padding: 10px 20px; }

    /* About / stats compact */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-number { font-size: 2rem; }
    .about-content { grid-template-columns: 1fr 1fr; gap: 32px; }
    .about-text { text-align: left; }
    .about-text .section-tag,
    .about-text .section-title { text-align: left; }

    /* Services — restore side-by-side for landscape, full screen height */
    .svc-row.reveal-left,
    .svc-row.reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .svc-row,
    .svc-row.svc-row--flip {
        flex-direction: row !important;
        min-height: 100vh !important;
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .svc-row__demo {
        flex: 0 0 50% !important;
        width: 50% !important;
        min-height: 100vh !important;
    }
    .svc-row__info {
        flex: 1 !important;
        width: auto !important;
        padding: 24px 20px !important;
        overflow-y: auto !important;
        border-left: none !important;
        border-top: none !important;
        justify-content: center !important;
    }
    .svc-title { font-size: 1.2rem !important; }
    .svc-desc  { font-size: 0.82rem !important; }
    .svc-includes { display: none !important; }
    .svc-tags  { display: none !important; }
    .svc-meta  { display: none !important; }

    /* Pricing compact */
    .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

    /* Footer compact */
    .footer-content { grid-template-columns: 1fr 1fr; }
}

/* ── iPad mini portrait (740px–820px, portrait) ── */
/* 744px falls into mobile breakpoint even though it's tablet — fix that */
@media (min-width: 740px) and (max-width: 820px) and (orientation: portrait) {
    /* Restore full horizontal nav */
    .hamburger { display: none !important; }
    .nav-links {
        display: flex !important;
        position: static !important;
        flex-direction: row !important;
        background: transparent !important;
        padding: 0 !important;
        gap: 28px !important;
        box-shadow: none !important;
    }

    /* Hero — centred single column, good breathing room */
    .hero {
        padding: 100px 36px 56px;
        min-height: 100vh;
        align-items: center;
        justify-content: center;
    }
    .hero-content { grid-template-columns: 1fr; text-align: center; gap: 32px; }
    .hero-visual { height: 380px; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .mobile-play-hint { display: none; }

    .scroll-indicator {
        position: relative; bottom: auto; left: auto; transform: none;
        margin-top: 24px; align-self: center; opacity: 1;
        animation: none; width: fit-content;
    }

    /* Grids */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .about-content { grid-template-columns: 1fr; }
    .about-text { text-align: center; }
    .about-features { justify-content: center; }

    /* Services — stacked vertically as normal mobile */
    .svc-row, .svc-row.svc-row--flip {
        flex-direction: column !important;
        min-height: 100vh !important;
    }
    .svc-row__demo { flex: 0 0 56vh !important; min-height: 56vh !important; width: 100% !important; }
    .svc-row__info { flex: 1 !important; padding: 20px 28px !important; width: 100% !important; border-top: 4px solid; }
}

/* ── iPad mini landscape + Z Fold 7 unfolded landscape (1025px–1200px) ── */
/* iPad mini 6th gen landscape = 1133px, Z Fold 7 unfolded landscape ≈ 1080px */
/* Both escape the max-width:1024px tablet query — this catches them */
@media (min-width: 1025px) and (max-width: 1200px) {
    .hero {
        padding: 100px 56px 60px;
        min-height: 100vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .hero-content {
        grid-template-columns: 1fr 1fr;
        text-align: left;
        gap: 40px;
        align-items: center;
        width: 100%;
    }
    .hero-text  { order: 1; }
    .hero-visual { order: 2; height: 400px; }
    .hero-subtitle { margin-left: 0; margin-right: 0; max-width: 400px; }
    .hero-buttons { justify-content: flex-start; }
    .hero-title { font-size: clamp(2rem, 4vw, 3.2rem); }
    .mobile-play-hint { display: none; }

    /* Flow the scroll indicator below the hero content so it clears the instructions */
    .scroll-indicator {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 32px;
        align-self: center;
        opacity: 1;
        animation: none;
        width: fit-content;
    }

    /* Grids */
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .about-content { grid-template-columns: 1fr 1fr; gap: 48px; }
    .about-text { text-align: left; }
    .about-text .section-tag,
    .about-text .section-title { text-align: left; }
    .about-features { justify-content: flex-start; }
    .pricing-grid { grid-template-columns: repeat(3, 1fr); }

    /* Services — side by side */
    .svc-row.reveal-left,
    .svc-row.reveal-right { opacity: 1; transform: none; transition: none; }
    .svc-row,
    .svc-row.svc-row--flip {
        flex-direction: row !important;
        min-height: 80vh !important;
        position: sticky !important;
        top: 0 !important;
    }
    .svc-row__demo {
        flex: 0 0 50% !important;
        min-height: 80vh !important;
        width: 50% !important;
    }
    .svc-row__info {
        flex: 1 !important;
        padding: 48px 40px !important;
        overflow-y: auto !important;
        border-left: none !important;
        border-top: none !important;
    }
    .svc-includes { display: flex !important; }
    .svc-tags    { display: flex !important; }
    .svc-meta    { display: flex !important; }
}

/* ── Z Fold 7 folded landscape (~812px wide, ~374px tall) ── */
/* The orientation:landscape + max-height:500px query above already covers this, */
/* but add a small width-specific tune-up for the folded cover screen */
@media (min-width: 780px) and (max-width: 830px) and (orientation: landscape) and (max-height: 420px) {
    .hero { padding: 60px 24px 12px; }
    .hero-title { font-size: clamp(1.3rem, 4vw, 1.8rem); }
    .hero-visual { height: 200px; }
    .hero-subtitle { display: none; }
    .hero-buttons { gap: 8px; }
    .btn { padding: 8px 16px; font-size: 0.78rem; }
    .mobile-play-hint { font-size: 0.65rem; margin-bottom: 6px; }
}

/* ── Z Fold 7 unfolded portrait — alien position fix ── */
/* Inner screen portrait is ~700px–800px wide and tall (>900px).        */
/* Placed last so it wins over all other responsive rules.               */
@media (min-width: 680px) and (max-width: 820px) and (orientation: portrait) and (min-height: 900px) {
    .hero-visual {
        height: 460px !important;
        min-height: 460px !important;
        align-items: flex-start !important;
        padding-top: 24px !important;
        padding-bottom: 96px !important;
    }
}

/* ============================================================
   NEW CHARACTER ANIMATIONS — Service Row Characters
   ============================================================ */

/* ── Shared float keyframe ── */
@keyframes svcCharFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    45%       { transform: translateY(-18px) rotate(2deg); }
    80%       { transform: translateY(-6px) rotate(-0.5deg); }
}

/* ── Shared scene wrapper ── */
.art-scene, .bot-scene, .hero-scene, .cat-scene, .bun-scene, .fox-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ============================================================
   1. ARTIST PERSON  (art-)   — 2D row
   ============================================================ */
.art-char {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    scale: 1.45;
    animation: svcCharFloat 3s ease-in-out infinite;
}

/* Beret */
.art-beret {
    position: absolute;
    top: -44px;
    left: 50%;
    transform: translateX(-50%) rotate(-12deg);
    z-index: 3;
}
.art-beret-body {
    width: 58px; height: 32px;
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
    border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
    margin: 0 auto;
}
.art-beret-brim {
    width: 72px; height: 10px;
    background: linear-gradient(135deg, #6D28D9, #4C1D95);
    border-radius: 50%;
    margin-top: -4px;
}
.art-beret-pom {
    width: 12px; height: 12px;
    background: #A78BFA;
    border-radius: 50%;
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
}

/* Head */
.art-head {
    width: 88px; height: 88px;
    background: linear-gradient(160deg, #FDDCB5, #FBCF9B);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    z-index: 2;
}
/* Big sparkly eyes */
.art-eye {
    position: absolute;
    width: 22px; height: 24px;
    background: white;
    border-radius: 50%;
    top: 24px;
    box-shadow: 0 0 0 2.5px #1F1F2E;
    overflow: visible;
}
.art-eye-l { left: 12px; }
.art-eye-r { right: 12px; }
/* Eyelash on top */
.art-eye::before {
    content: '';
    position: absolute;
    top: -4px; left: -2px; right: -2px;
    height: 5px;
    background: #1F1F2E;
    border-radius: 4px 4px 0 0;
}
/* Shine dot inside eye */
.art-eye::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    background: white;
    border-radius: 50%;
    top: 3px; right: 3px;
    z-index: 2;
}
.art-pupil {
    width: 14px; height: 14px;
    background: #1F1F2E;
    border-radius: 50%;
    position: absolute;
    top: 5px; left: 4px;
}
/* Rosy cheeks */
.art-head::before {
    content: '';
    position: absolute;
    width: 16px; height: 9px;
    background: rgba(255, 120, 120, 0.3);
    border-radius: 50%;
    bottom: 24px; left: 7px;
    box-shadow: 58px 0 0 rgba(255, 120, 120, 0.3);
}
/* Cute little dot nose */
.art-nose {
    position: absolute;
    width: 7px; height: 5px;
    background: #E8956D;
    border-radius: 50%;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
}
/* Simple friendly curved smile */
.art-smile {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 13px;
    border-bottom: 3px solid #1F1F2E;
    border-radius: 0 0 26px 26px;
    background: transparent;
    overflow: visible;
}
.art-smile::after { display: none; }

/* Hair */
.art-hair {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: -8px;
    z-index: 3;
}
.art-hair-tuft {
    background: #7C3AED;
    border-radius: 50% 50% 30% 30%;
}
.art-ht1 { width: 16px; height: 22px; transform: rotate(-8deg); margin-top: 4px; }
.art-ht2 { width: 18px; height: 28px; }
.art-ht3 { width: 16px; height: 22px; transform: rotate(8deg);  margin-top: 4px; }
.art-blush, .art-blush-l, .art-blush-r { display: none; }

/* Body/smock */
.art-body {
    width: 84px; height: 90px;
    background: linear-gradient(160deg, #7C3AED, #A78BFA);
    border-radius: 20px 20px 28px 28px;
    position: relative;
    margin-top: -6px;
    z-index: 1;
}
/* Smock pocket detail */
.art-body::after { content: none; }

/* Left arm (palette arm) */
.art-arm-l-wrap {
    position: absolute;
    left: -44px; top: 8px;
    transform-origin: top right;
    animation: artArmLWave 3s ease-in-out infinite;
}
@keyframes artArmLWave {
    0%, 100% { transform: rotate(28deg); }
    50%       { transform: rotate(18deg); }
}
.art-arm {
    width: 18px; height: 52px;
    background: linear-gradient(180deg, #FDDCB5, #FBCF9B);
    border-radius: 9px;
    position: relative;
}
.art-palette {
    position: absolute;
    bottom: -30px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 36px;
    background: #F5F5F0;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border: 2px solid #DDD;
}
.art-pdot {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 50%;
}

/* Right arm (brush arm) */
.art-arm-r-wrap {
    position: absolute;
    right: -44px; top: 4px;
    transform-origin: top left;
    animation: artArmRRaise 3s ease-in-out infinite 0.5s;
}
@keyframes artArmRRaise {
    0%, 100% { transform: rotate(-38deg); }
    50%       { transform: rotate(-58deg); }
}
.art-arm-r-wrap .art-arm {
    width: 18px; height: 52px;
}
.art-brush {
    position: absolute;
    bottom: -40px; left: 50%;
    transform: translateX(-50%) rotate(-15deg);
}
.art-brush-handle {
    width: 6px; height: 32px;
    background: linear-gradient(180deg, #D97706, #B45309);
    border-radius: 3px;
    margin: 0 auto;
}
.art-brush-tip {
    width: 8px; height: 12px;
    background: #7C3AED;
    border-radius: 0 0 4px 4px;
    margin: 0 auto;
}

/* Legs */
.art-leg {
    position: absolute;
    width: 20px; height: 38px;
    background: linear-gradient(180deg, #5B21B6, #4C1D95);
    border-radius: 10px;
    bottom: -35px;
}
.art-leg-l { left: 16px; animation: svcLegBob 2s ease-in-out infinite; }
.art-leg-r { right: 16px; animation: svcLegBob 2s ease-in-out infinite 1s; }

/* Paint splats */
.art-splat {
    position: absolute;
    border-radius: 55% 45% 60% 40% / 50% 60% 40% 55%;
    pointer-events: none;
    animation: artSplatPop 3s ease-in-out infinite;
}
.art-splat-1 {
    width: 30px; height: 22px;
    background: rgba(236,72,153,0.55);
    top: 10%; left: 5%;
    animation-delay: 0s;
}
.art-splat-2 {
    width: 22px; height: 16px;
    background: rgba(59,130,246,0.5);
    top: 15%; right: 8%;
    transform: rotate(30deg);
    animation-delay: 1s;
}
.art-splat-3 {
    width: 18px; height: 14px;
    background: rgba(251,191,36,0.6);
    bottom: 20%; right: 6%;
    transform: rotate(-20deg);
    animation-delay: 2s;
}
@keyframes artSplatPop {
    0%, 100% { transform: scale(0.9) rotate(0deg); opacity: 0.55; }
    50%       { transform: scale(1.2) rotate(10deg); opacity: 0.85; }
}

/* Sparkles */
.art-sp {
    position: absolute;
    color: #FBBF24;
    animation: artSp 2.2s ease-in-out infinite;
    pointer-events: none;
}
.art-sp1 { top: 6%;  left: 8%;  font-size: 0.9rem; animation-delay: 0s; }
.art-sp2 { top: 10%; right: 7%; font-size: 0.7rem; animation-delay: 0.7s; color: #EC4899; }
.art-sp3 { bottom: 18%; left: 6%; font-size: 0.65rem; animation-delay: 1.4s; color: #7C3AED; }
@keyframes artSp {
    0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); }
    50%       { opacity: 1;   transform: scale(1.3) rotate(180deg); }
}

/* ============================================================
   2. ROBOT  (bot-)   — 3D row  (dark panel, bright colors)
   ============================================================ */
.bot-char {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    scale: 1.45;
    animation: svcCharFloat 3.2s ease-in-out infinite 0.2s;
}

/* Antenna */
.bot-antenna {
    position: absolute;
    top: -44px; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
}
.bot-antenna-stick {
    width: 5px; height: 22px;
    background: linear-gradient(180deg, #94A3B8, #64748B);
    border-radius: 3px;
}
.bot-antenna-ball {
    width: 14px; height: 14px;
    background: #EF4444;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(239,68,68,0.9);
    animation: botAntBlink 1.2s ease-in-out infinite;
    margin-top: -2px;
}
@keyframes botAntBlink {
    0%, 100% { box-shadow: 0 0 12px rgba(239,68,68,0.9); background: #EF4444; }
    50%       { box-shadow: 0 0 22px rgba(239,68,68,1); background: #FCA5A5; }
}

/* Head */
.bot-head {
    width: 90px; height: 80px;
    background: linear-gradient(160deg, #475569, #334155);
    border-radius: 14px;
    position: relative;
    box-shadow: 0 0 0 3px #64748B, 0 8px 28px rgba(0,0,0,0.4);
    z-index: 2;
}
.bot-ear {
    position: absolute;
    width: 10px; height: 18px;
    background: #475569;
    border-radius: 4px;
    top: 20px;
    border: 2px solid #64748B;
}
.bot-ear-l { left: -8px; }
.bot-ear-r { right: -8px; }
.bot-eye {
    position: absolute;
    width: 26px; height: 14px;
    background: linear-gradient(135deg, #06B6D4, #0EA5E9);
    border-radius: 4px;
    top: 22px;
    box-shadow: 0 0 12px rgba(6,182,212,0.9);
    animation: botEyeGlow 1.8s ease-in-out infinite;
}
@keyframes botEyeGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(6,182,212,0.7); }
    50%       { box-shadow: 0 0 22px rgba(6,182,212,1); }
}
.bot-eye-l { left: 10px; }
.bot-eye-r { right: 10px; }
.bot-eye-inner {
    width: 12px; height: 10px;
    background: rgba(255,255,255,0.35);
    border-radius: 3px;
    position: absolute;
    top: 2px; left: 50%;
    transform: translateX(-50%);
}
.bot-mouth {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 7px;
    background: #1E293B;
    border-radius: 3px;
    border: 2px solid #06B6D4;
}
.bot-mouth::after {
    content: '';
    position: absolute;
    width: 8px; height: 5px;
    background: #06B6D4;
    border-radius: 2px;
    top: -2px; left: 6px;
    box-shadow: 12px 0 0 #06B6D4;
}

/* Body */
.bot-body {
    width: 96px; height: 100px;
    background: linear-gradient(160deg, #3B4E6A, #2D3A52);
    border-radius: 12px;
    position: relative;
    margin-top: -4px;
    box-shadow: 0 0 0 2px #475569;
    z-index: 1;
}

/* Chest panel */
.bot-panel {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 50px;
    background: #1E293B;
    border-radius: 6px;
    border: 2px solid #475569;
    display: flex; flex-wrap: wrap;
    align-items: flex-end; justify-content: center;
    gap: 4px; padding: 4px;
}
.bot-screen {
    width: 100%; height: 24px;
    background: linear-gradient(135deg, #0F172A, #0C4A6E);
    border-radius: 4px;
    border: 1px solid #06B6D4;
    box-shadow: inset 0 0 8px rgba(6,182,212,0.4);
    animation: botScreenPulse 2s ease-in-out infinite;
}
@keyframes botScreenPulse {
    0%, 100% { box-shadow: inset 0 0 8px rgba(6,182,212,0.4); }
    50%       { box-shadow: inset 0 0 16px rgba(6,182,212,0.8); }
}
.bot-btn {
    width: 10px; height: 10px;
    border-radius: 50%;
}
.bot-btn-1 { background: #EF4444; box-shadow: 0 0 6px rgba(239,68,68,0.8); }
.bot-btn-2 { background: #FBBF24; box-shadow: 0 0 6px rgba(251,191,36,0.8); }
.bot-btn-3 { background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,0.8); }

/* Arms */
.bot-arm-l-wrap {
    position: absolute;
    left: -28px; top: 8px;
    transform-origin: top right;
    animation: botArmL 3.2s ease-in-out infinite;
}
@keyframes botArmL {
    0%, 100% { transform: rotate(18deg); }
    50%       { transform: rotate(40deg); }
}
.bot-arm {
    width: 18px; height: 50px;
    background: linear-gradient(180deg, #475569, #334155);
    border-radius: 9px;
    border: 2px solid #64748B;
}
.bot-claw {
    position: absolute;
    bottom: -16px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 3px;
}
.bot-finger {
    width: 6px; height: 12px;
    background: #475569;
    border-radius: 3px;
    border: 1px solid #64748B;
}
.bot-arm-r-wrap {
    position: absolute;
    right: -28px; top: 8px;
    transform-origin: top left;
    animation: botArmR 3.2s ease-in-out infinite 0.6s;
}
@keyframes botArmR {
    0%, 100% { transform: rotate(-18deg); }
    50%       { transform: rotate(-42deg); }
}

/* Legs */
.bot-leg {
    position: absolute;
    width: 24px; height: 38px;
    background: linear-gradient(180deg, #334155, #1E293B);
    border-radius: 8px;
    bottom: -36px;
    border: 2px solid #475569;
}
.bot-leg-l { left: 14px; animation: svcLegBob 2.2s ease-in-out infinite; }
.bot-leg-r { right: 14px; animation: svcLegBob 2.2s ease-in-out infinite 1.1s; }

/* Sparkles */
.bot-sp {
    position: absolute;
    color: #06B6D4;
    animation: botSp 2.5s ease-in-out infinite;
    pointer-events: none;
}
.bot-sp1 { top: 6%;  left: 7%;  font-size: 1rem;  animation-delay: 0s; }
.bot-sp2 { top: 8%;  right: 8%; font-size: 0.7rem; animation-delay: 0.8s; color: #60A5FA; }
.bot-sp3 { bottom: 20%; left: 5%; font-size: 0.6rem; animation-delay: 1.6s; color: #A78BFA; }
@keyframes botSp {
    0%, 100% { opacity: 0.4; transform: scale(0.8) translateY(0); }
    50%       { opacity: 1;   transform: scale(1.2) translateY(-8px); }
}

/* ============================================================
   3. SUPERHERO PERSON  (hero-)   — Motion Graphics row
   ============================================================ */
.hero-char {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    scale: 1.45;
    animation: svcCharFloat 2.8s ease-in-out infinite 0.1s;
}

/* Head */
.hero-head {
    width: 86px; height: 86px;
    background: linear-gradient(160deg, #FDDCB5, #FBCF9B);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

/* Mask */
.hero-mask {
    position: absolute;
    width: 68px; height: 22px;
    background: #7C3AED;
    border-radius: 11px;
    top: 26px; left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}
.hero-mask::before,
.hero-mask::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    background: #7C3AED;
    border-radius: 50%;
    top: -9px;
}
.hero-mask::before { left: 6px; }
.hero-mask::after  { right: 6px; }

.hero-eye {
    position: absolute;
    width: 14px; height: 14px;
    background: white;
    border-radius: 50%;
    top: 28px;
    z-index: 4;
    overflow: hidden;
}
.hero-eye-l { left: 14px; }
.hero-eye-r { right: 14px; }
.hero-pupil {
    width: 8px; height: 8px;
    background: #1F1F2E;
    border-radius: 50%;
    position: absolute;
    top: 3px; left: 3px;
}
.hero-smile {
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 11px;
    border-bottom: 3px solid #C2773F;
    border-radius: 0 0 14px 14px;
    z-index: 4;
}

/* Cape */
.hero-cape {
    position: absolute;
    top: 76px; left: 50%;
    transform: translateX(-50%);
    width: 70px; height: 80px;
    background: linear-gradient(180deg, #EC4899, #7C3AED);
    border-radius: 6px 6px 50% 50%;
    z-index: 0;
    animation: heroCapeFlap 2.8s ease-in-out infinite;
    transform-origin: top center;
}
@keyframes heroCapeFlap {
    0%, 100% { transform: translateX(-50%) skewX(0deg); }
    30%       { transform: translateX(-50%) skewX(-6deg) scaleX(0.96); }
    60%       { transform: translateX(-50%) skewX(4deg) scaleX(1.03); }
}

/* Body */
.hero-body {
    width: 82px; height: 86px;
    background: linear-gradient(160deg, #7C3AED, #5B21B6);
    border-radius: 14px 14px 20px 20px;
    position: relative;
    margin-top: -4px;
    z-index: 1;
}

/* Lightning bolt */
.hero-bolt {
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 8px solid transparent;
    border-top: 22px solid #FBBF24;
    filter: drop-shadow(0 0 6px rgba(251,191,36,0.8));
}
.hero-bolt::after {
    content: '';
    position: absolute;
    top: -22px; left: -4px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 22px solid #FBBF24;
}

/* Arms in power pose */
.hero-arm-l-wrap {
    position: absolute;
    left: -34px; top: 2px;
    transform-origin: top right;
    animation: heroArmL 2.8s ease-in-out infinite;
}
@keyframes heroArmL {
    0%, 100% { transform: rotate(-50deg); }
    50%       { transform: rotate(-68deg); }
}
.hero-arm {
    width: 17px; height: 44px;
    background: linear-gradient(180deg, #FDDCB5, #FBCF9B);
    border-radius: 8px;
}
.hero-fist {
    position: absolute;
    bottom: -14px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 16px;
    background: linear-gradient(135deg, #FDDCB5, #E8A87C);
    border-radius: 5px;
}
.hero-arm-r-wrap {
    position: absolute;
    right: -34px; top: 2px;
    transform-origin: top left;
    animation: heroArmR 2.8s ease-in-out infinite 0.4s;
}
@keyframes heroArmR {
    0%, 100% { transform: rotate(50deg); }
    50%       { transform: rotate(68deg); }
}

/* Legs */
.hero-leg {
    position: absolute;
    width: 22px; height: 38px;
    background: linear-gradient(180deg, #4C1D95, #3B0764);
    border-radius: 11px;
    bottom: -35px;
}
.hero-leg-l { left: 13px; animation: svcLegBob 2s ease-in-out infinite; }
.hero-leg-r { right: 13px; animation: svcLegBob 2s ease-in-out infinite 1s; }

/* Sparkles */
.hero-sp {
    position: absolute;
    animation: heroSp 2s ease-in-out infinite;
    pointer-events: none;
}
.hero-sp1 { top: 6%;  left: 7%;  color: #FBBF24; font-size: 1rem;  animation-delay: 0s; }
.hero-sp2 { top: 8%;  right: 9%; color: #EC4899; font-size: 0.75rem; animation-delay: 0.5s; }
.hero-sp3 { bottom: 18%; left: 5%; color: #7C3AED; font-size: 0.65rem; animation-delay: 1.1s; }
.hero-sp4 { bottom: 22%; right: 7%; color: #FBBF24; font-size: 0.8rem; animation-delay: 1.7s; }
@keyframes heroSp {
    0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0deg); }
    50%       { opacity: 1;   transform: scale(1.4) rotate(180deg); }
}

/* ============================================================
   4. CAT  (cat-)   — Character Design row
   ============================================================ */
.cat-char {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    scale: 1.45;
    animation: svcCharFloat 3.1s ease-in-out infinite 0.3s;
}

/* Head */
.cat-head {
    width: 90px; height: 86px;
    background: linear-gradient(160deg, #C4B5FD, #A78BFA);
    border-radius: 50% 50% 45% 45% / 52% 52% 48% 48%;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 18px rgba(124,58,237,0.22);
}

/* Ears */
.cat-ear {
    position: absolute;
    width: 0; height: 0;
    top: -22px;
}
.cat-ear-l {
    left: 10px;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 28px solid #A78BFA;
}
.cat-ear-r {
    right: 10px;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 28px solid #A78BFA;
}
.cat-ear-inner {
    position: absolute;
    bottom: -28px; left: -8px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid #F9A8D4;
    top: 6px;
}

/* Eyes */
.cat-eye {
    position: absolute;
    width: 18px; height: 20px;
    background: white;
    border-radius: 50%;
    top: 26px;
    overflow: hidden;
}
.cat-eye-l { left: 14px; }
.cat-eye-r { right: 14px; }
.cat-pupil {
    width: 10px; height: 14px;
    background: #1F1F2E;
    border-radius: 50%;
    position: absolute;
    top: 3px; left: 4px;
}

/* Nose */
.cat-nose {
    position: absolute;
    width: 9px; height: 6px;
    background: #F472B6;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
}

/* Whiskers */
.cat-whisker {
    position: absolute;
    height: 2px;
    background: rgba(255,255,255,0.7);
    border-radius: 1px;
    bottom: 26px;
    animation: catWhisker 3s ease-in-out infinite;
}
.cat-wh1 { width: 26px; left: -20px; transform: rotate(-8deg); animation-delay: 0s; }
.cat-wh2 { width: 26px; left: -20px; transform: rotate(6deg);  animation-delay: 0.2s; bottom: 32px; }
.cat-wh3 { width: 26px; right: -20px; transform: rotate(8deg); animation-delay: 0.1s; }
.cat-wh4 { width: 26px; right: -20px; transform: rotate(-6deg); animation-delay: 0.3s; bottom: 32px; }
@keyframes catWhisker {
    0%, 100% { transform: rotate(-8deg) scaleX(1); opacity: 0.7; }
    50%       { transform: rotate(-2deg) scaleX(1.1); opacity: 1; }
}

.cat-mouth {
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    width: 18px; height: 8px;
    border-bottom: 2px solid #C084FC;
    border-radius: 0 0 10px 10px;
}

.cat-blush {
    position: absolute;
    width: 14px; height: 7px;
    background: rgba(249,115,22,0.3);
    border-radius: 50%;
    top: 46px;
}
.cat-blush-l { left: 5px; }
.cat-blush-r { right: 5px; }

/* Body */
.cat-body {
    width: 78px; height: 82px;
    background: linear-gradient(160deg, #C4B5FD, #A78BFA);
    border-radius: 18px 18px 26px 26px;
    position: relative;
    margin-top: -5px;
    z-index: 1;
}

/* Left arm */
.cat-arm {
    position: absolute;
    width: 16px; height: 44px;
    background: linear-gradient(180deg, #C4B5FD, #A78BFA);
    border-radius: 8px;
    top: 10px;
    transform-origin: top center;
}
.cat-arm-l {
    left: -12px;
    transform: rotate(22deg);
}

/* Right arm with pencil */
.cat-arm-r-wrap {
    position: absolute;
    right: -12px; top: 4px;
    transform-origin: top center;
    animation: catArmWave 3.1s ease-in-out infinite;
}
@keyframes catArmWave {
    0%, 100% { transform: rotate(-26deg); }
    50%       { transform: rotate(-48deg); }
}
.cat-arm-r { position: relative; }
.cat-pencil {
    position: absolute;
    bottom: -42px; left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    display: flex; flex-direction: column; align-items: center;
}
.cat-pencil-tip {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 8px solid #1F1F2E;
}
.cat-pencil-body {
    width: 7px; height: 26px;
    background: linear-gradient(180deg, #FBBF24, #F59E0B);
    border-radius: 1px;
}
.cat-pencil-eraser {
    width: 7px; height: 6px;
    background: #F9A8D4;
    border-radius: 0 0 2px 2px;
}

/* Legs */
.cat-leg {
    position: absolute;
    width: 18px; height: 34px;
    background: linear-gradient(180deg, #8B5CF6, #7C3AED);
    border-radius: 9px;
    bottom: -32px;
}
.cat-leg-l { left: 12px; animation: svcLegBob 2.2s ease-in-out infinite; }
.cat-leg-r { right: 12px; animation: svcLegBob 2.2s ease-in-out infinite 1.1s; }

/* Tail */
.cat-tail {
    position: absolute;
    right: -42px;
    bottom: -20px;
    width: 50px; height: 18px;
    background: linear-gradient(90deg, #A78BFA, #C4B5FD);
    border-radius: 0 9px 9px 0;
    transform-origin: left center;
    animation: catTailSwish 2s ease-in-out infinite;
}
.cat-tail::after {
    content: '';
    position: absolute;
    right: -8px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    background: radial-gradient(circle, #DDD6FE, #A78BFA);
    border-radius: 50%;
}
@keyframes catTailSwish {
    0%, 100% { transform: rotate(0deg); }
    40%       { transform: rotate(18deg); }
    70%       { transform: rotate(-12deg); }
}

/* Sparkles */
.cat-sp {
    position: absolute;
    color: #A78BFA;
    animation: catSp 2.3s ease-in-out infinite;
    pointer-events: none;
}
.cat-sp1 { top: 5%;  left: 8%;  font-size: 0.9rem; animation-delay: 0s; color: #FBBF24; }
.cat-sp2 { top: 8%;  right: 7%; font-size: 0.7rem; animation-delay: 0.8s; color: #A78BFA; }
.cat-sp3 { bottom: 16%; left: 5%; font-size: 0.65rem; animation-delay: 1.5s; color: #F9A8D4; }
@keyframes catSp {
    0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0deg); }
    50%       { opacity: 1;    transform: scale(1.35) rotate(180deg); }
}

/* ============================================================
   5. BUNNY  (bun-)   — UI row
   ============================================================ */
.bun-char {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    scale: 1.45;
    animation: svcCharFloat 3s ease-in-out infinite 0.15s;
}

/* Ears */
.bun-ear {
    position: absolute;
    width: 22px; height: 64px;
    background: #F1F5F9;
    border-radius: 11px;
    top: -68px;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.bun-ear-l { left: 14px; transform: rotate(-8deg); animation: bunEarL 3s ease-in-out infinite; }
.bun-ear-r { right: 14px; transform: rotate(8deg);  animation: bunEarR 3s ease-in-out infinite 0.5s; }
@keyframes bunEarL {
    0%, 100% { transform: rotate(-8deg); }
    50%       { transform: rotate(-18deg); }
}
@keyframes bunEarR {
    0%, 100% { transform: rotate(8deg); }
    50%       { transform: rotate(18deg); }
}
.bun-ear-inner {
    position: absolute;
    width: 10px; height: 46px;
    background: linear-gradient(180deg, #FDA4AF, #FB7185);
    border-radius: 5px;
    top: 9px; left: 50%;
    transform: translateX(-50%);
}

/* Head */
.bun-head {
    width: 88px; height: 88px;
    background: linear-gradient(160deg, #F8FAFC, #F1F5F9);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* Eyes + glasses */
.bun-eye {
    position: absolute;
    width: 18px; height: 18px;
    background: white;
    border-radius: 50%;
    top: 28px;
    overflow: visible;
}
.bun-eye-l { left: 12px; }
.bun-eye-r { right: 12px; }
.bun-glasses-l,
.bun-glasses-r {
    position: absolute;
    width: 22px; height: 22px;
    border: 2px solid #94A3B8;
    border-radius: 50%;
    top: -2px; left: -2px;
    pointer-events: none;
}
.bun-glasses-bridge {
    position: absolute;
    width: 14px; height: 2px;
    background: #94A3B8;
    border-radius: 1px;
    top: 37px; left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}
.bun-pupil {
    width: 10px; height: 10px;
    background: #1F1F2E;
    border-radius: 50%;
    position: absolute;
    top: 4px; left: 4px;
    z-index: 4;
}
.bun-nose {
    position: absolute;
    width: 7px; height: 4px;
    background: #FDA4AF;
    border-radius: 50%;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
}
.bun-smile {
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 10px;
    border-bottom: 2px solid #94A3B8;
    border-radius: 0 0 12px 12px;
}
.bun-blush {
    position: absolute;
    width: 13px; height: 6px;
    background: rgba(251,113,133,0.3);
    border-radius: 50%;
    top: 46px;
}
.bun-blush-l { left: 5px; }
.bun-blush-r { right: 5px; }

/* Body */
.bun-body {
    width: 82px; height: 88px;
    background: linear-gradient(160deg, #F1F5F9, #E2E8F0);
    border-radius: 18px 18px 28px 28px;
    position: relative;
    margin-top: -5px;
    z-index: 1;
}

/* Arms */
.bun-arm {
    position: absolute;
    width: 15px; height: 42px;
    background: linear-gradient(180deg, #F1F5F9, #CBD5E1);
    border-radius: 7px;
    top: 12px;
    transform-origin: top center;
}
.bun-arm-l {
    left: -11px;
    transform: rotate(22deg);
}
.bun-arm-r-wrap {
    position: absolute;
    right: -11px; top: 8px;
    transform-origin: top left;
    animation: bunArmR 3s ease-in-out infinite;
}
@keyframes bunArmR {
    0%, 100% { transform: rotate(-22deg); }
    50%       { transform: rotate(-34deg); }
}
.bun-arm-r { position: relative; }

/* Tablet */
.bun-tablet {
    position: absolute;
    bottom: -10px; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 40px;
    background: #1E293B;
    border-radius: 5px;
    border: 2px solid #475569;
    padding: 3px;
    z-index: 3;
}
.bun-tab-screen {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #0F172A, #1E293B);
    border-radius: 3px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; padding: 3px;
}
.bun-tab-bar {
    width: 80%; height: 5px;
    background: rgba(6,182,212,0.7);
    border-radius: 3px;
    animation: bunTabBlink 2s ease-in-out infinite;
}
.bun-tab-row {
    width: 90%; height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}
.bun-tab-btn {
    width: 50%; height: 6px;
    background: linear-gradient(90deg, #7C3AED, #EC4899);
    border-radius: 3px;
    animation: bunTabBlink 1.5s ease-in-out infinite 0.4s;
}
@keyframes bunTabBlink { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Legs */
.bun-leg {
    position: absolute;
    width: 18px; height: 32px;
    background: linear-gradient(180deg, #CBD5E1, #94A3B8);
    border-radius: 9px;
    bottom: -30px;
}
.bun-leg-l { left: 12px; animation: svcLegBob 2.5s ease-in-out infinite; }
.bun-leg-r { right: 12px; animation: svcLegBob 2.5s ease-in-out infinite 1.25s; }

/* Fluffy teal tail */
.bun-tail {
    position: absolute;
    right: -20px; bottom: 8px;
    width: 26px; height: 26px;
    background: radial-gradient(circle at 40% 40%, #5EEAD4, #0D9488);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(6,182,212,0.4);
    animation: bunTailWiggle 2s ease-in-out infinite;
}
@keyframes bunTailWiggle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%       { transform: scale(1.12) rotate(12deg); }
}

/* Sparkles */
.bun-sp {
    position: absolute;
    animation: bunSp 2.2s ease-in-out infinite;
    pointer-events: none;
}
.bun-sp1 { top: 6%;  left: 6%;  color: #06B6D4; font-size: 0.9rem; animation-delay: 0s; }
.bun-sp2 { top: 8%;  right: 7%; color: #7C3AED; font-size: 0.7rem; animation-delay: 0.7s; }
.bun-sp3 { bottom: 16%; left: 5%; color: #94A3B8; font-size: 0.7rem; animation-delay: 1.4s; }
@keyframes bunSp {
    0%, 100% { opacity: 0.35; transform: scale(0.7); }
    50%       { opacity: 1;    transform: scale(1.3); }
}

/* ============================================================
   6. FOX  (fox-)   — Ads row
   ============================================================ */
.fox-char {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    scale: 1.45;
    animation: svcCharFloat 3s ease-in-out infinite 0.25s;
}

/* Head */
.fox-head {
    width: 88px; height: 88px;
    background: linear-gradient(160deg, #FB923C, #F97316);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(249,115,22,0.3);
}

/* Ears */
.fox-ear {
    position: absolute;
    width: 0; height: 0;
    top: -20px;
    z-index: 3;
}
.fox-ear-l {
    left: 8px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 26px solid #F97316;
}
.fox-ear-r {
    right: 8px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 26px solid #F97316;
}
.fox-ear-inner {
    position: absolute;
    bottom: -26px; left: -6px;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 14px solid #F5F5F0;
    top: 6px;
}

/* Muzzle */
.fox-muzzle {
    position: absolute;
    width: 44px; height: 26px;
    background: #F5F5F0;
    border-radius: 50%;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
}

/* Eyes */
.fox-eye {
    position: absolute;
    width: 16px; height: 16px;
    background: white;
    border-radius: 50%;
    top: 26px;
    overflow: hidden;
}
.fox-eye-l { left: 14px; }
.fox-eye-r { right: 14px; }
.fox-pupil {
    width: 9px; height: 9px;
    background: #92400E;
    border-radius: 50%;
    position: absolute;
    top: 3px; left: 3px;
}
.fox-nose {
    position: absolute;
    width: 8px; height: 5px;
    background: #92400E;
    border-radius: 50%;
    bottom: 26px; left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

/* Body */
.fox-body {
    width: 82px; height: 86px;
    background: linear-gradient(160deg, #FB923C, #F97316);
    border-radius: 14px 14px 22px 22px;
    position: relative;
    margin-top: -5px;
    z-index: 1;
}

/* Left arm down */
.fox-arm {
    position: absolute;
    width: 16px; height: 46px;
    background: linear-gradient(180deg, #FB923C, #F97316);
    border-radius: 8px;
    top: 10px;
    transform-origin: top center;
}
.fox-arm-l {
    left: -11px;
    transform: rotate(18deg);
}

/* Right arm raised with megaphone */
.fox-arm-r-wrap {
    position: absolute;
    right: -11px; top: 4px;
    transform-origin: top left;
    animation: foxArmRaise 3s ease-in-out infinite;
}
@keyframes foxArmRaise {
    0%, 100% { transform: rotate(-44deg); }
    50%       { transform: rotate(-62deg); }
}
.fox-arm-r { position: relative; }
.fox-mega {
    position: absolute;
    top: -8px; left: 14px;
    transform: rotate(-20deg);
    display: flex; align-items: center;
}
.fox-mega-body {
    width: 22px; height: 16px;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(251,191,36,0.5);
}
.fox-mega-cone {
    width: 0; height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 18px solid #FBBF24;
}

/* Legs */
.fox-leg {
    position: absolute;
    width: 18px; height: 36px;
    background: linear-gradient(180deg, #EA580C, #C2410C);
    border-radius: 9px;
    bottom: -33px;
}
.fox-leg-l { left: 12px; animation: svcLegBob 2s ease-in-out infinite; }
.fox-leg-r { right: 12px; animation: svcLegBob 2s ease-in-out infinite 1s; }

/* Bushy tail */
.fox-tail {
    position: absolute;
    right: -60px;
    bottom: -8px;
    width: 58px; height: 46px;
    background: linear-gradient(135deg, #F97316, #FB923C);
    border-radius: 50% 50% 60% 40% / 40% 40% 60% 60%;
    transform-origin: left center;
    animation: foxTailSwish 2.2s ease-in-out infinite;
    z-index: 0;
}
@keyframes foxTailSwish {
    0%, 100% { transform: rotate(0deg); }
    40%       { transform: rotate(14deg); }
    70%       { transform: rotate(-10deg); }
}
.fox-tail-tip {
    position: absolute;
    bottom: 4px; right: 4px;
    width: 22px; height: 22px;
    background: radial-gradient(circle, #F5F5F0, #E7E5E4);
    border-radius: 50%;
}

/* Signal waves */
.fox-wave {
    position: absolute;
    border: 2px solid #F97316;
    border-radius: 50%;
    pointer-events: none;
    right: 8%;
    top: 20%;
    animation: foxWave 1.6s ease-out infinite;
}
.fox-wave-1 { width: 20px;  height: 20px;  animation-delay: 0s; opacity: 0.9; }
.fox-wave-2 { width: 40px;  height: 40px;  animation-delay: 0.4s; margin-top: -10px; margin-right: -10px; }
.fox-wave-3 { width: 62px;  height: 62px;  animation-delay: 0.8s; margin-top: -21px; margin-right: -21px; }
@keyframes foxWave {
    0%   { opacity: 0.9; transform: scale(0.5); }
    100% { opacity: 0;   transform: scale(1); }
}

/* Sparkles */
.fox-sp {
    position: absolute;
    animation: foxSp 2.4s ease-in-out infinite;
    pointer-events: none;
}
.fox-sp1 { top: 5%;  left: 6%;  color: #FBBF24; font-size: 0.9rem; animation-delay: 0s; }
.fox-sp2 { top: 8%;  left: 20%; color: #F97316; font-size: 0.7rem; animation-delay: 0.6s; }
.fox-sp3 { bottom: 18%; left: 5%; color: #FBBF24; font-size: 0.65rem; animation-delay: 1.2s; }
@keyframes foxSp {
    0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); }
    50%       { opacity: 1;   transform: scale(1.3) rotate(180deg); }
}

/* ============================================================
   NEW SCENE REDESIGNS
   ============================================================ */

/* ── SHARED scene wrapper ── */
.art-scene,
.bot-scene,
.hero-scene,
.cat-scene,
.bun-scene,
.fox-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ============================================================
   SCENE 1 — 2D Animation (rubber-hose cartoon + film strip)
   ============================================================ */

/* Film strip border strips on left & right edges */
.art-film-l,
.art-film-r {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    background: #1F1F2E;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 6px 0;
    z-index: 2;
}
.art-film-l { left: 0; }
.art-film-r { right: 0; }
.art-perf {
    width: 10px;
    height: 8px;
    background: #F5F0DC;
    border-radius: 2px;
    flex-shrink: 0;
}

/* FRAME label */
.art-label {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #1F1F2E;
    background: #FBBF24;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 0 0 2px #1F1F2E;
    animation: artLabelBounce 1.6s ease-in-out infinite;
}
@keyframes artLabelBounce {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1deg); }
    50%       { transform: translateX(-50%) translateY(-4px) rotate(1deg); }
}

/* Character root — bounces up/down */
.art-char {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: artBob 1.2s ease-in-out infinite;
    z-index: 1;
}
@keyframes artBob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-10px) rotate(2deg); }
}

/* Big round head */
.art-head {
    width: 72px;
    height: 72px;
    background: #FBBF24;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0 3px #1F1F2E;
    z-index: 2;
}

/* Big white eyes with black pupils */
.art-eye {
    position: absolute;
    width: 20px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #1F1F2E;
    overflow: hidden;
    top: 18px;
}
.art-eye-l { left: 12px; }
.art-eye-r { right: 12px; }
.art-pupil {
    width: 10px;
    height: 10px;
    background: #1F1F2E;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 4px;
    animation: artPupil 3s ease-in-out infinite;
}
@keyframes artPupil {
    0%, 100% { transform: translate(0,0); }
    30%       { transform: translate(2px,-2px); }
    60%       { transform: translate(-2px,1px); }
}

/* Huge goofy smile */
.art-smile {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 18px;
    border-bottom: 4px solid #1F1F2E;
    border-radius: 0 0 26px 26px;
    box-shadow: inset 0 -6px 0 rgba(239,68,68,0.3);
}

/* Cheek blushes */
.art-cheek { display: none; }
.art-cheek-UNUSED {
    position: absolute;
    width: 14px;
    height: 8px;
    background: rgba(236,72,153,0.5);
    border-radius: 50%;
    bottom: 18px;
}
.art-cheek-l { left: 4px; }
.art-cheek-r { right: 4px; }

/* Thick flat body */
.art-body {
    width: 60px;
    height: 52px;
    background: #EC4899;
    border-radius: 16px;
    position: relative;
    margin-top: -4px;
    box-shadow: 0 0 0 3px #1F1F2E;
    z-index: 1;
}

/* Rubbery thick arms */
.art-arm {
    position: absolute;
    width: 20px;
    height: 50px;
    background: #FBBF24;
    border-radius: 10px;
    box-shadow: 0 0 0 3px #1F1F2E;
    top: 4px;
    transform-origin: top center;
}
.art-arm-l {
    left: -18px;
    animation: artArmL 1.2s ease-in-out infinite;
}
@keyframes artArmL {
    0%, 100% { transform: rotate(-30deg); }
    50%       { transform: rotate(-60deg); }
}
.art-arm-r {
    right: -18px;
    animation: artArmR 1.2s ease-in-out infinite 0.3s;
}
@keyframes artArmR {
    0%, 100% { transform: rotate(28deg); }
    50%       { transform: rotate(55deg); }
}

/* Stubby legs */
.art-leg {
    position: absolute;
    width: 18px;
    height: 30px;
    background: #FBBF24;
    border-radius: 9px;
    box-shadow: 0 0 0 3px #1F1F2E;
    bottom: -26px;
}
.art-leg-l {
    left: 10px;
    animation: artLegL 1.2s ease-in-out infinite;
}
@keyframes artLegL {
    0%, 100% { transform: rotate(-6deg); }
    50%       { transform: rotate(6deg) translateY(-4px); }
}
.art-leg-r {
    right: 10px;
    animation: artLegR 1.2s ease-in-out infinite 0.6s;
}
@keyframes artLegR {
    0%, 100% { transform: rotate(6deg); }
    50%       { transform: rotate(-6deg) translateY(-4px); }
}

/* Sparkle decorations */
.art-sp {
    position: absolute;
    animation: artSp 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}
.art-sp1 { top: 28%; left: 22%; font-size: 1rem; color: #F97316; animation-delay: 0s; }
.art-sp2 { top: 20%; right: 20%; font-size: 0.8rem; color: #7C3AED; animation-delay: 0.7s; }
.art-sp3 { bottom: 18%; right: 24%; font-size: 0.7rem; color: #EC4899; animation-delay: 1.4s; }
@keyframes artSp {
    0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0deg); }
    50%       { opacity: 1;   transform: scale(1.4) rotate(180deg); }
}


/* ============================================================
   SCENE 2 — 3D Animation (CSS 3D spinning wireframe cube)
   ============================================================ */

.bot-scene {
    perspective: 600px;
}

/* Perspective grid floor */
.bot-grid-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: repeating-linear-gradient(
        90deg,
        rgba(6,182,212,0.15) 0px,
        rgba(6,182,212,0.15) 1px,
        transparent 1px,
        transparent 20px
    ),
    repeating-linear-gradient(
        0deg,
        rgba(6,182,212,0.12) 0px,
        rgba(6,182,212,0.12) 1px,
        transparent 1px,
        transparent 14px
    );
    transform: perspective(200px) rotateX(40deg);
    transform-origin: bottom;
    opacity: 0.7;
}

/* Cube wrapper: spins continuously */
.bot-cube-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    transform-style: preserve-3d;
    animation: botCubeRotate 20s linear infinite;
    z-index: 2;
}
@keyframes botCubeRotate {
    to { transform: rotateX(360deg) rotateY(360deg); }
}

/* Cube itself */
.bot-cube {
    width: 72px;
    height: 72px;
    transform-style: preserve-3d;
    position: relative;
}

/* Individual cube faces */
.bot-face {
    position: absolute;
    width: 72px;
    height: 72px;
    background: rgba(6,182,212,0.08);
    border: 2px solid rgba(6,182,212,0.8);
    box-shadow: inset 0 0 12px rgba(6,182,212,0.2);
}
.bot-front  { transform: translateZ(36px); }
.bot-back   { transform: translateZ(-36px) rotateY(180deg); }
.bot-left   { transform: translateX(-36px) rotateY(-90deg); }
.bot-right  { transform: translateX(36px)  rotateY(90deg); }
.bot-top    { transform: translateY(-36px) rotateX(90deg); background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.7); }
.bot-bottom { transform: translateY(36px)  rotateX(-90deg); background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.5); }

/* Small character head peeking from behind cube */
.bot-peek {
    position: absolute;
    bottom: 14px;
    right: 24%;
    z-index: 3;
    animation: botPeek 3s ease-in-out infinite;
}
@keyframes botPeek {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%       { transform: translateY(-8px) rotate(5deg); }
}
.bot-peek-head {
    width: 28px;
    height: 28px;
    background: #3B82F6;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0 2px #1F1F2E, 0 0 12px rgba(59,130,246,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.bot-peek-eye {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #1F1F2E;
}

/* Sparkles on dark bg */
.bot-sp {
    position: absolute;
    animation: botSp 2.5s ease-in-out infinite;
    pointer-events: none;
    color: #06B6D4;
    z-index: 4;
}
.bot-sp1 { top: 10%; left: 10%; font-size: 0.9rem; animation-delay: 0s; }
.bot-sp2 { top: 14%; right: 12%; font-size: 0.65rem; animation-delay: 0.9s; }
.bot-sp3 { bottom: 22%; left: 8%; font-size: 0.6rem; animation-delay: 1.8s; color: #A78BFA; }
@keyframes botSp {
    0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0deg); }
    50%       { opacity: 1;   transform: scale(1.4) rotate(180deg); }
}


/* ============================================================
   SCENE 3 — Motion Graphics (flying geometric shapes)
   ============================================================ */

/* Central morphing circle to square */
.mot-center {
    position: absolute;
    width: 52px;
    height: 52px;
    background: #EC4899;
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(236,72,153,0.6);
    animation: motMorph 3s ease-in-out infinite;
    z-index: 2;
}
@keyframes motMorph {
    0%, 100% { border-radius: 50%; background: #EC4899; transform: scale(1) rotate(0deg); }
    25%       { border-radius: 20%; background: #7C3AED; transform: scale(1.1) rotate(45deg); }
    50%       { border-radius: 6px; background: #3B82F6; transform: scale(0.9) rotate(90deg); }
    75%       { border-radius: 30%; background: #F97316; transform: scale(1.05) rotate(135deg); }
}

/* Floating geometric shapes */
.mot-shape {
    position: absolute;
    border-radius: 50%;
    animation: motFloat 3s ease-in-out infinite;
}
.mot-s1 {
    width: 20px; height: 20px;
    background: #FBBF24;
    box-shadow: 0 0 10px rgba(251,191,36,0.7);
    top: 18%; left: 14%;
    animation-duration: 2.8s;
    animation-delay: 0s;
}
.mot-s2 {
    width: 14px; height: 14px;
    background: #10B981;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(16,185,129,0.6);
    top: 12%; right: 18%;
    animation-duration: 3.5s;
    animation-delay: 0.5s;
}
.mot-s3 {
    width: 18px; height: 18px;
    background: #06B6D4;
    box-shadow: 0 0 10px rgba(6,182,212,0.6);
    bottom: 20%; left: 12%;
    animation-duration: 2.6s;
    animation-delay: 1s;
}
.mot-s4 {
    width: 12px; height: 12px;
    background: #F97316;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(249,115,22,0.6);
    bottom: 25%; right: 15%;
    animation-duration: 3.2s;
    animation-delay: 0.3s;
}
.mot-s5 {
    width: 10px; height: 10px;
    background: #A78BFA;
    box-shadow: 0 0 6px rgba(167,139,250,0.7);
    top: 40%; right: 10%;
    animation-duration: 2.4s;
    animation-delay: 1.5s;
}

/* CSS triangles (border-trick) */
.mot-tri {
    position: absolute;
    width: 0; height: 0;
    animation: motTriFloat 3s ease-in-out infinite;
}
.mot-t1 {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 18px solid #EC4899;
    top: 30%; left: 8%;
    animation-delay: 0.7s;
    filter: drop-shadow(0 0 6px rgba(236,72,153,0.7));
}
.mot-t2 {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid #FBBF24;
    bottom: 30%; right: 10%;
    animation-delay: 1.2s;
    filter: drop-shadow(0 0 5px rgba(251,191,36,0.7));
}
@keyframes motFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-16px) rotate(180deg); }
}
@keyframes motTriFloat {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50%       { transform: translateY(-12px) rotate(10deg); }
}

/* Pulsing rings around centre */
.mot-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid;
    animation: motRing 2.4s ease-out infinite;
    pointer-events: none;
}
.mot-r1 { width: 80px; height: 80px; border-color: rgba(236,72,153,0.4); animation-delay: 0s; }
.mot-r2 { width: 110px; height: 110px; border-color: rgba(124,58,237,0.25); animation-delay: 0.8s; }
@keyframes motRing {
    0%   { transform: scale(0.8); opacity: 0.9; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* Kinetic typography lines block */
.mot-type-block {
    position: absolute;
    right: 14%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1;
}
.mot-line {
    height: 5px;
    background: #1F1F2E;
    border-radius: 3px;
    animation: motLineSlide 2.2s ease-in-out infinite;
}
.mot-line1 { width: 42px; animation-delay: 0s; }
.mot-line2 { width: 32px; animation-delay: 0.2s; background: #7C3AED; }
.mot-line3 { width: 48px; animation-delay: 0.4s; }
.mot-line4 { width: 24px; animation-delay: 0.6s; background: #EC4899; }
@keyframes motLineSlide {
    0%   { transform: translateX(-10px); opacity: 0; }
    20%, 80% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(10px); opacity: 0; }
}

/* Motion trails */
.mot-trail {
    position: absolute;
    height: 3px;
    border-radius: 2px;
    opacity: 0.4;
    animation: motTrail 2s ease-in-out infinite;
}
.mot-tr1 {
    width: 44px;
    background: linear-gradient(90deg, transparent, #F97316);
    top: 44%;
    left: 16%;
    animation-delay: 0s;
}
.mot-tr2 {
    width: 30px;
    background: linear-gradient(90deg, transparent, #06B6D4);
    top: 54%;
    left: 20%;
    animation-delay: 0.5s;
}
@keyframes motTrail {
    0%, 100% { transform: scaleX(0.5); opacity: 0.2; }
    50%       { transform: scaleX(1.2); opacity: 0.6; }
}


/* ============================================================
   SCENE 4 — Character Design (sketchpad)
   ============================================================ */

/* Sketchpad */
.skp-pad {
    width: 100px;
    height: 118px;
    background: #fff;
    border-radius: 4px 4px 6px 6px;
    border: 2px solid #ccc;
    box-shadow: 3px 3px 12px rgba(0,0,0,0.15), 0 0 0 1px #e0e0e0;
    transform: rotate(-4deg);
    position: relative;
    z-index: 2;
    animation: skpFloat 3s ease-in-out infinite;
}
@keyframes skpFloat {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%       { transform: rotate(-2deg) translateY(-8px); }
}

/* Spiral binding at top */
.skp-spiral {
    position: absolute;
    top: -10px;
    left: 0; right: 0;
    display: flex;
    justify-content: space-evenly;
    padding: 0 8px;
}
.skp-ring {
    width: 10px;
    height: 14px;
    border: 2px solid #9CA3AF;
    border-radius: 50%;
    background: transparent;
}

/* Character on sketchpad */
.skp-char {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 80px;
}

/* Base element for character parts */
.skp-char-head {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    top: 0; left: 50%;
    transform: translateX(-50%);
}
.skp-char-body {
    position: absolute;
    width: 24px;
    height: 30px;
    border-radius: 6px;
    top: 30px; left: 50%;
    transform: translateX(-50%);
}
.skp-char-eye {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    top: 12px;
}
.skp-el { left: 28px; }
.skp-er { left: 39px; }
.skp-char-smile {
    position: absolute;
    width: 14px; height: 6px;
    border-bottom: 2px solid;
    border-radius: 0 0 10px 10px;
    top: 20px; left: 50%;
    transform: translateX(-50%);
}
.skp-char-arm {
    position: absolute;
    width: 7px; height: 20px;
    border-radius: 4px;
    top: 34px;
}
.skp-arm-l { left: 14px; transform: rotate(-15deg); transform-origin: top; }
.skp-arm-r { right: 14px; transform: rotate(15deg); transform-origin: top; }
.skp-char-leg {
    position: absolute;
    width: 8px; height: 18px;
    border-radius: 4px;
    bottom: 0;
}
.skp-leg-l { left: 22px; transform: rotate(-5deg); }
.skp-leg-r { right: 21px; transform: rotate(5deg); }

/* Finished (solid) parts */
.skp-done {
    background: #1F1F2E;
    border: none;
}
.skp-char-eye.skp-done { background: #3B82F6; }
.skp-char-smile.skp-done { border-bottom-color: #1F1F2E; background: transparent; }

/* Work-in-progress (dashed) parts */
.skp-wip {
    background: transparent;
    border: 2px dashed #ccc;
    animation: skpWip 1.8s ease-in-out infinite;
}
.skp-char-smile.skp-wip { border-bottom: 2px dashed #ccc; background: transparent; }
@keyframes skpWip {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* Pencil leaning */
.skp-pencil {
    position: absolute;
    right: 22%;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(20deg);
    transform-origin: bottom;
    z-index: 3;
    animation: skpPencil 2s ease-in-out infinite;
}
@keyframes skpPencil {
    0%, 100% { transform: rotate(20deg); }
    50%       { transform: rotate(16deg) translateY(-4px); }
}
.skp-pencil-tip {
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #1F1F2E;
}
.skp-pencil-body {
    width: 10px;
    height: 50px;
    background: #FBBF24;
    border: 1.5px solid #1F1F2E;
}
.skp-pencil-eraser {
    width: 10px;
    height: 10px;
    background: #EC4899;
    border: 1.5px solid #1F1F2E;
    border-radius: 0 0 2px 2px;
}

/* Colour swatches */
.skp-swatches {
    position: absolute;
    bottom: 10px;
    left: 14%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 3;
}
.skp-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    animation: skpSwatch 2.4s ease-in-out infinite;
}
.skp-swatch:nth-child(1) { animation-delay: 0s; }
.skp-swatch:nth-child(2) { animation-delay: 0.3s; }
.skp-swatch:nth-child(3) { animation-delay: 0.6s; }
.skp-swatch:nth-child(4) { animation-delay: 0.9s; }
.skp-swatch:nth-child(5) { animation-delay: 1.2s; }
@keyframes skpSwatch {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.2); }
}

/* Ruler */
.skp-ruler {
    position: absolute;
    top: 12px;
    right: 14%;
    width: 12px;
    height: 64px;
    background: #F9FAFB;
    border: 1.5px solid #9CA3AF;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    padding: 4px 2px;
    z-index: 3;
    transform: rotate(5deg);
}
.skp-tick {
    width: 6px;
    height: 1.5px;
    background: #9CA3AF;
}

/* Sparkles */
.cat-sp {
    position: absolute;
    animation: catSp 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
}
.cat-sp1 { top: 10%; right: 10%; color: #7C3AED; font-size: 0.9rem; animation-delay: 0s; }
.cat-sp2 { bottom: 12%; left: 10%; color: #EC4899; font-size: 0.75rem; animation-delay: 1s; }
@keyframes catSp {
    0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); }
    50%       { opacity: 1; transform: scale(1.3) rotate(180deg); }
}


/* ============================================================
   SCENE 5 — UI Animation (phone mockup)
   ============================================================ */

/* Phone frame */
.ui-phone {
    position: relative;
    width: 88px;
    height: 160px;
    background: linear-gradient(160deg, #1F1F2E, #374151);
    border-radius: 18px;
    box-shadow: 0 0 0 2px #4B5563, 0 16px 48px rgba(0,0,0,0.4), 0 0 32px rgba(6,182,212,0.2);
    animation: uiFloat 3s ease-in-out infinite;
    z-index: 2;
}
@keyframes uiFloat {
    0%, 100% { transform: translateY(0) rotate(1deg); }
    50%       { transform: translateY(-10px) rotate(-1deg); }
}

/* Notch */
.ui-notch {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 6px;
    background: #1F1F2E;
    border-radius: 3px;
    z-index: 3;
}

/* Screen */
.ui-screen {
    position: absolute;
    inset: 8px 5px;
    background: #F8FAFC;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 7px 10px;
}

/* Header bar */
.ui-header {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 12px;
    background: #E0E7FF;
    border-radius: 4px;
    padding: 0 4px;
    flex-shrink: 0;
}
.ui-header-dot {
    width: 6px; height: 6px;
    background: #7C3AED;
    border-radius: 50%;
    flex-shrink: 0;
}
.ui-header-title {
    flex: 1;
    height: 4px;
    background: #C4B5FD;
    border-radius: 2px;
}

/* Toggle switch row */
.ui-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.ui-toggle-label {
    width: 28px; height: 4px;
    background: #D1D5DB;
    border-radius: 2px;
}
.ui-toggle {
    width: 22px; height: 12px;
    background: #10B981;
    border-radius: 6px;
    position: relative;
    animation: uiToggle 2.5s ease-in-out infinite;
}
@keyframes uiToggle {
    0%, 45%  { background: #D1D5DB; }
    55%, 100% { background: #10B981; }
}
.ui-toggle-knob {
    position: absolute;
    width: 10px; height: 10px;
    background: #fff;
    border-radius: 50%;
    top: 1px;
    animation: uiKnob 2.5s ease-in-out infinite;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
@keyframes uiKnob {
    0%, 45%  { left: 1px; }
    55%, 100% { left: 11px; }
}

/* Progress bar */
.ui-progress-track {
    width: 100%;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.ui-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #06B6D4);
    border-radius: 3px;
    animation: uiProgress 2.2s ease-in-out infinite;
}
@keyframes uiProgress {
    0%   { width: 0%; }
    70%  { width: 85%; }
    100% { width: 0%; }
}

/* Sliding card */
.ui-card {
    background: #fff;
    border-radius: 6px;
    padding: 5px 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
    animation: uiCardSlide 3s ease-in-out infinite;
}
@keyframes uiCardSlide {
    0%, 100% { transform: translateY(16px); opacity: 0; }
    20%, 80% { transform: translateY(0); opacity: 1; }
}
.ui-card-line {
    height: 4px;
    background: #E5E7EB;
    border-radius: 2px;
    margin-bottom: 3px;
}
.ui-card-line--short {
    width: 60%;
    background: #F3F4F6;
}

/* Floating action button */
.ui-fab {
    position: absolute;
    bottom: 18px;
    right: 8px;
    width: 18px; height: 18px;
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: uiFab 1.8s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(124,58,237,0.5);
    z-index: 3;
}
@keyframes uiFab {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(124,58,237,0.5); }
    50%       { transform: scale(1.18); box-shadow: 0 4px 14px rgba(124,58,237,0.8); }
}

/* Home bar */
.ui-home-bar {
    position: absolute;
    bottom: 6px; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 2px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
}

/* Cursor outside phone */
.ui-cursor {
    position: absolute;
    right: 20%;
    top: 30%;
    font-size: 0.75rem;
    color: #06B6D4;
    animation: uiCursor 3s ease-in-out infinite;
    z-index: 3;
    line-height: 1;
}
@keyframes uiCursor {
    0%   { transform: translate(0,0); opacity: 0; }
    15%  { opacity: 1; }
    50%  { transform: translate(6px,12px); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(0,0); opacity: 0; }
}

/* Click ripples */
.ui-ripple {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #06B6D4;
    pointer-events: none;
    animation: uiRipple 2s ease-out infinite;
}
.ui-ripple-1 { width: 20px; height: 20px; right: 18%; top: 44%; animation-delay: 0s; }
.ui-ripple-2 { width: 20px; height: 20px; right: 18%; top: 44%; animation-delay: 0.5s; }
@keyframes uiRipple {
    0%   { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Sparkles */
.bun-sp {
    position: absolute;
    animation: bunSp 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
}
.bun-sp1 { top: 10%; left: 10%; color: #10B981; font-size: 0.9rem; animation-delay: 0s; }
.bun-sp2 { bottom: 14%; right: 10%; color: #06B6D4; font-size: 0.75rem; animation-delay: 1s; }
@keyframes bunSp {
    0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); }
    50%       { opacity: 1; transform: scale(1.3) rotate(180deg); }
}


/* ============================================================
   SCENE 6 — Commercial Ads (TV/monitor frame)
   ============================================================ */

/* TV monitor */
.tv-monitor {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    animation: tvFloat 3.5s ease-in-out infinite;
}
@keyframes tvFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* Dark bezel */
.tv-bezel {
    width: 130px;
    height: 90px;
    background: #1F1F2E;
    border-radius: 10px;
    padding: 7px;
    box-shadow:
        0 0 0 2px #374151,
        0 0 24px rgba(249,115,22,0.25),
        0 8px 28px rgba(0,0,0,0.4);
    position: relative;
}

/* Glowing screen */
.tv-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FFF5F0, #FFF9E8);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 16px rgba(249,115,22,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bouncing NEW badge */
.tv-badge {
    position: absolute;
    top: 6px; left: 6px;
    background: #EC4899;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    animation: tvBadgeBounce 1s ease-in-out infinite;
    box-shadow: 0 2px 6px rgba(236,72,153,0.5);
    z-index: 3;
}
@keyframes tvBadgeBounce {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50%       { transform: scale(1.15) rotate(3deg); }
}

/* Product shape with shine */
.tv-product {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #F97316, #FBBF24);
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 12px rgba(249,115,22,0.5);
    animation: tvProductPop 2s ease-in-out infinite;
}
@keyframes tvProductPop {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50%       { transform: scale(1.08) rotate(2deg); }
}
.tv-shine {
    position: absolute;
    top: 4px; left: 6px;
    width: 8px; height: 14px;
    background: rgba(255,255,255,0.45);
    border-radius: 4px;
    transform: rotate(-20deg);
}

/* Price tag */
.tv-price {
    position: absolute;
    bottom: 6px; left: 6px;
    background: #FBBF24;
    color: #1F1F2E;
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 3;
    animation: tvPrice 2.4s ease-in-out infinite;
}
@keyframes tvPrice {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}

/* Buy Now button */
.tv-btn {
    position: absolute;
    bottom: 6px; right: 5px;
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.48rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    animation: tvBtn 1.5s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(124,58,237,0.5);
    z-index: 3;
    white-space: nowrap;
}
@keyframes tvBtn {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(124,58,237,0.4); }
    50%       { transform: scale(1.1); box-shadow: 0 4px 14px rgba(124,58,237,0.8); }
}

/* Confetti/stars shooting out */
.tv-conf {
    position: absolute;
    animation: tvConf 2.2s ease-out infinite;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 4;
}
.tv-c1 { top: 8px; right: 14px; color: #FBBF24; animation-delay: 0s; }
.tv-c2 { top: 4px; right: 30px; color: #10B981; animation-delay: 0.4s; }
.tv-c3 { top: 8px; left: 40px; color: #3B82F6; animation-delay: 0.8s; }
.tv-c4 { top: 4px; left: 22px; color: #EC4899; animation-delay: 1.2s; font-size: 0.5rem; }
@keyframes tvConf {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-28px) rotate(360deg); opacity: 0; }
}

/* TV stand neck */
.tv-stand-neck {
    width: 18px;
    height: 14px;
    background: #374151;
    margin: 0 auto;
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
}

/* TV stand base */
.tv-stand-base {
    width: 52px;
    height: 7px;
    background: linear-gradient(90deg, #1F1F2E, #374151);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Broadcast signal waves */
.tv-signal {
    position: absolute;
    top: 20%;
    right: 6%;
    border: 2px solid #F97316;
    border-radius: 0 50% 50% 0;
    border-left: none;
    animation: tvSignal 1.6s ease-out infinite;
    pointer-events: none;
}
.tv-sig1 { width: 10px; height: 18px; animation-delay: 0s; }
.tv-sig2 { width: 18px; height: 30px; right: 4%; top: 18%; animation-delay: 0.3s; opacity: 0.7; }
.tv-sig3 { width: 26px; height: 42px; right: 2%; top: 16%; animation-delay: 0.6s; opacity: 0.4; }
@keyframes tvSignal {
    0%   { opacity: 0.9; transform: scaleY(0.6); }
    100% { opacity: 0;   transform: scaleY(1); }
}

/* Sparkles */
.fox-sp {
    position: absolute;
    animation: foxSpNew 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
}
.fox-sp1 { top: 8%;  left: 6%;  color: #F97316; font-size: 0.9rem; animation-delay: 0s; }
.fox-sp2 { bottom: 16%; left: 8%; color: #FBBF24; font-size: 0.7rem; animation-delay: 0.8s; }
@keyframes foxSpNew {
    0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); }
    50%       { opacity: 1;   transform: scale(1.3) rotate(180deg); }
}

/* ===== Scale up all service row characters ===== */
.art-char {
    scale: 1.9 !important;
}
.bot-char, .bot-cube-wrap {
    scale: 2.4 !important;
}
.hero-char, .cat-char, .bun-char, .fox-char {
    scale: 2.2 !important;
}

/* ===== 2D World Background Scene ===== */
.art-world {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
.art-sky {
    position: absolute;
    inset: 0 0 28% 0;
    background: linear-gradient(180deg, #7EC8E3 0%, #C8EAF7 100%);
}
.art-sun {
    position: absolute;
    width: 32px; height: 32px;
    background: #FBBF24;
    border-radius: 50%;
    top: 10%; right: 22%;
    box-shadow: 0 0 0 3px #F59E0B, 0 0 18px rgba(251,191,36,0.5);
    z-index: 1;
    animation: artSunPulse 3s ease-in-out infinite;
}
@keyframes artSunPulse {
    0%, 100% { box-shadow: 0 0 0 3px #F59E0B, 0 0 18px rgba(251,191,36,0.4); }
    50%       { box-shadow: 0 0 0 3px #F59E0B, 0 0 30px rgba(251,191,36,0.7); }
}
.art-cloud {
    position: absolute;
    background: white;
    border-radius: 50px;
    box-shadow: 0 0 0 2.5px #1F1F2E;
    z-index: 1;
}
.art-cloud::before, .art-cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 2.5px #1F1F2E;
}
.art-c1 { width: 54px; height: 18px; top: 16%; left: 14%; animation: artCloudDrift 7s ease-in-out infinite; }
.art-c1::before { width: 22px; height: 22px; top: -13px; left: 8px; }
.art-c1::after  { width: 17px; height: 17px; top: -10px; left: 26px; }
.art-c2 { width: 44px; height: 16px; top: 24%; right: 14%; animation: artCloudDrift 9s ease-in-out infinite 2s; }
.art-c2::before { width: 18px; height: 18px; top: -11px; left: 6px; }
.art-c2::after  { width: 14px; height: 14px; top: -8px;  left: 22px; }
@keyframes artCloudDrift {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(6px); }
}
.art-hill {
    position: absolute;
    border-radius: 50%;
    bottom: 26%;
    box-shadow: 0 0 0 2.5px #1F1F2E;
    z-index: 1;
}
.art-h1 { width: 110px; height: 55px; background: #4ADE80; left: -8%; }
.art-h2 { width: 90px;  height: 44px; background: #22C55E; right: 2%; }
.art-ground {
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 28%;
    background: #4ADE80;
    border-top: 3px solid #16A34A;
    z-index: 2;
}

/* Onion skin ghost */
.art-onion {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    opacity: 0.22;
    scale: 1.9;
    margin-bottom: 28px;
    filter: hue-rotate(200deg) saturate(2);
    display: none;
    transform-origin: center bottom;
    translate: -20px 2px;
}
.ao-head {
    width: 58px; height: 55px;
    background: #3B82F6;
    border-radius: 50%;
    margin-bottom: -3px;
}
.ao-body {
    width: 46px; height: 44px;
    background: #3B82F6;
    border-radius: 12px 12px 6px 6px;
    position: relative;
}
.ao-arm {
    position: absolute;
    top: 4px;
    width: 14px; height: 30px;
    background: #3B82F6;
    border-radius: 7px;
}
.ao-al { left: -16px; transform: rotate(-22deg); transform-origin: top center; }
.ao-ar { right: -16px; transform: rotate(28deg); transform-origin: top center; }
.ao-leg {
    position: absolute;
    bottom: -26px;
    width: 14px; height: 26px;
    background: #3B82F6;
    border-radius: 7px;
}
.ao-ll { left: 6px;  transform: rotate(18deg);  transform-origin: top center; }
.ao-lr { right: 6px; transform: rotate(-14deg); transform-origin: top center; }

/* Rig joints */
.art-joint { display: none; }
.art-j-sl { top: 2px; left: -3px; }
.art-j-sr { top: 2px; right: -3px; }
.art-j-el { bottom: -2px; left: 0; }
.art-j-er { bottom: -2px; right: 0; }
.art-j-kl { bottom: -2px; left: 0; }
.art-j-kr { bottom: -2px; right: 0; }

.art-sl { display: none; }

.art-frame { display: none; }

/* Character z-index above world */
.art-char { z-index: 4; margin-bottom: 28px; }

/* ===== Scale up other service scene graphics ===== */
.mot-center { scale: 2.0; }
.skp-pad    { scale: 1.8; }
.ui-phone   { scale: 1.9; }
.tv-monitor { scale: 1.8; }

/* ===== 2D character shadow — child of art-char, counter-animates to stay on ground ===== */
.art-shadow {
    position: absolute;
    bottom: -38px;
    left: 50%;
    width: 52px;
    height: 10px;
    background: rgba(0,0,0,0.25);
    border-radius: 50%;
    z-index: 3;
    animation: artShadowFollow 3s ease-in-out infinite;
}
@keyframes artShadowFollow {
    0%, 100% { transform: translateX(-50%) translateY(0px)  scaleX(1);    opacity: 0.35; }
    45%       { transform: translateX(-50%) translateY(18px) scaleX(0.45); opacity: 0.12; }
    80%       { transform: translateX(-50%) translateY(6px)  scaleX(0.72); opacity: 0.22; }
}

/* ===== 2D Cat character overrides ===== */
/* Ears */
.art-ears {
    display: flex;
    justify-content: space-between;
    width: 72px;
    margin-bottom: -10px;
    position: relative;
    z-index: 4;
}
.art-ear {
    width: 22px; height: 26px;
    background: #7C3AED;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3px;
}
.art-ear-inner {
    width: 10px; height: 12px;
    background: #EC4899;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Cat nose — small pink heart/triangle */
.art-cat-nose {
    position: absolute;
    width: 8px; height: 6px;
    background: #EC4899;
    border-radius: 50% 50% 40% 40%;
    bottom: 34px; left: 50%;
    transform: translateX(-50%);
}

/* Cat mouth — two small curves */
.art-cat-mouth {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 8px;
    border-bottom: 2.5px solid #1F1F2E;
    border-radius: 0 0 10px 10px;
}
.art-cat-mouth::before,
.art-cat-mouth::after {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 8px; height: 5px;
    border-bottom: 2.5px solid #1F1F2E;
    border-radius: 0 0 6px 6px;
}
.art-cat-mouth::before { left: -6px; transform: rotate(10deg); transform-origin: right bottom; }
.art-cat-mouth::after  { right: -6px; transform: rotate(-10deg); transform-origin: left bottom; }

/* Whiskers */
.art-whisker {
    position: absolute;
    height: 1.5px;
    background: #1F1F2E;
    border-radius: 2px;
    bottom: 30px;
}
.art-wh1 { width: 22px; left: 4px;  transform: rotate(-8deg);  transform-origin: right center; }
.art-wh2 { width: 22px; left: 4px;  transform: rotate(8deg);   transform-origin: right center; }
.art-wh3 { width: 22px; right: 4px; transform: rotate(8deg);   transform-origin: left center; }
.art-wh4 { width: 22px; right: 4px; transform: rotate(-8deg);  transform-origin: left center; }

/* Tail */
.art-tail {
    position: absolute;
    width: 10px; height: 48px;
    background: #7C3AED;
    border-radius: 10px 10px 6px 6px;
    bottom: -10px; right: -16px;
    transform: rotate(20deg);
    transform-origin: bottom center;
    animation: artTailSwish 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 2.5px #1F1F2E;
}
.art-tail::after {
    content: '';
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 16px;
    background: #EC4899;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #1F1F2E;
}
@keyframes artTailSwish {
    0%, 100% { transform: rotate(20deg); }
    50%       { transform: rotate(-20deg); }
}

/* Hide old nose/smile/hair since we use cat versions */
.art-nose, .art-smile, .art-hair { display: none; }

/* ===== Cartoon Cat for 2D scene (ct-) ===== */
.art-ears, .art-head, .art-body, .art-arm, .art-leg,
.art-hair, .art-tail, .art-nose, .art-smile,
.art-cat-nose, .art-cat-mouth, .art-whisker { display: none; }

.ct-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: svcCharFloat 3s ease-in-out infinite;
    scale: 1.9;
    margin-bottom: 28px;
}

/* ── Pointed ears — absolutely positioned inside .ct-head ── */
.ct-ear {
    position: absolute;
    width: 28px; height: 34px;
    background: #1F1F2E;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: -28px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2px;
    z-index: 6;
}
.ct-ear-l { left: 4px;  top: -24px; transform: rotate(-28deg); transform-origin: bottom center; }
.ct-ear-r { right: 4px; top: -24px; transform: rotate(28deg);  transform-origin: bottom center; }
/* Orange fill */
.ct-ear::before {
    content: '';
    position: absolute;
    width: 22px; height: 27px;
    background: #FFAB40;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* Pink inner */
.ct-ear-in {
    width: 12px; height: 15px;
    background: #FF8FAB;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: relative;
    z-index: 2;
}

/* ── Head ── */
.ct-head {
    width: 84px; height: 80px;
    background: #FFAB40;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #1F1F2E;
    position: relative;
    z-index: 4;
    overflow: visible;
    margin-top: 32px; /* room for ears above */
}

/* ── Eyes ── */
.ct-eye {
    position: absolute;
    width: 22px; height: 24px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 2.5px #1F1F2E;
    top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ct-eye-l { left: 10px; }
.ct-eye-r { right: 10px; }
.ct-iris {
    width: 14px; height: 14px;
    background: #2ECC71;
    border-radius: 50%;
    position: relative;
}
.ct-iris::before {
    content: '';
    position: absolute;
    width: 7px; height: 10px;
    background: #1F1F2E;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.ct-shine {
    position: absolute;
    width: 5px; height: 5px;
    background: white;
    border-radius: 50%;
    top: 3px; right: 2px;
    z-index: 3;
}

/* ── Nose ── */
.ct-nose {
    position: absolute;
    width: 11px; height: 7px;
    background: #FF6B9D;
    border-radius: 50% 50% 45% 45%;
    box-shadow: 0 0 0 1.5px #1F1F2E;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
}

/* ── Mouth — centre line + two curves ── */
.ct-mouth {
    position: absolute;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 8px;
    background: #1F1F2E;
    border-radius: 1px;
}
.ct-mouth::before, .ct-mouth::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 12px; height: 7px;
    border-bottom: 2.5px solid #1F1F2E;
    border-radius: 0 0 10px 10px;
}
.ct-mouth::before { left: 0; }
.ct-mouth::after  { right: 0; }

/* ── Whiskers ── */
.ct-wh {
    position: absolute;
    height: 1.5px;
    background: #1F1F2E;
    border-radius: 2px;
    bottom: 26px;
    opacity: 0.8;
}
.ct-wh1 { width: 28px; left: -8px;  transform: rotate(-8deg);  transform-origin: right; }
.ct-wh2 { width: 28px; left: -8px;  transform: rotate(8deg);   transform-origin: right; }
.ct-wh3 { width: 28px; right: -8px; transform: rotate(8deg);   transform-origin: left; }
.ct-wh4 { width: 28px; right: -8px; transform: rotate(-8deg);  transform-origin: left; }

/* ── Blush ── */
.ct-blush {
    position: absolute;
    width: 14px; height: 8px;
    background: rgba(255, 100, 100, 0.28);
    border-radius: 50%;
    bottom: 18px;
}
.ct-bl-l { left: 4px; }
.ct-bl-r { right: 4px; }

/* ── Body ── */
.ct-body {
    width: 70px; height: 60px;
    background: #FFAB40;
    border-radius: 45% 45% 48% 48%;
    box-shadow: 0 0 0 3px #1F1F2E;
    position: relative;
    margin-top: -6px;
    z-index: 3;
    overflow: visible;
}
.ct-belly {
    position: absolute;
    width: 40px; height: 34px;
    background: #FFF0C8;
    border-radius: 50%;
    top: 8px; left: 50%;
    transform: translateX(-50%);
}

/* ── Front paws — attached to bottom of body ── */
.ct-paw {
    position: absolute;
    top: 16px;
    width: 20px; height: 20px;
    background: #FFAB40;
    border-radius: 50%;
    box-shadow: 0 0 0 2.5px #1F1F2E;
}
.ct-paw-l { left: -14px;  animation: ctPawBob 3s ease-in-out infinite; }
.ct-paw-r { right: -14px; animation: ctPawBob 3s ease-in-out infinite 0.4s; }
@keyframes ctPawBob {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* ── Back feet ── */
.ct-foot {
    position: absolute;
    bottom: -6px;
    width: 20px; height: 13px;
    background: #FFAB40;
    border-radius: 50%;
    box-shadow: 0 0 0 2.5px #1F1F2E;
}
.ct-foot-l { left: -2px; }
.ct-foot-r { right: -2px; }

/* ── Tail — absolute in .ct-cat, behind body (z-index: 1) ── */
.ct-tail {
    position: absolute;
    width: 13px; height: 52px;
    background: #FFAB40;
    border-radius: 6px 6px 4px 4px;
    box-shadow: 0 0 0 2.5px #1F1F2E;
    bottom: 14px; right: 16px;
    transform-origin: bottom center;
    transform: rotate(25deg);
    animation: ctTailSwish 2s ease-in-out infinite;
    z-index: 1;
}
.ct-tail-tip {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 20px;
    background: #FF6B9D;
    border-radius: 50%;
    box-shadow: 0 0 0 2.5px #1F1F2E;
}
@keyframes ctTailSwish {
    0%,100% { transform: rotate(25deg); }
    50%      { transform: rotate(-15deg); }
}

.ct-cat .art-shadow { animation: artShadowFollow 3s ease-in-out infinite; }

/* =============================================
   INTERACTIVE ALIEN — HERO RIGHT SIDE
   ============================================= */

.alien-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 500px;
}

.alien-hint {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    width: max-content;
    max-width: 420px;
    pointer-events: none;
}
.alien-hint span {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B7280;
    background: rgba(255,255,255,0.82);
    border: 1.5px solid rgba(124,58,237,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Alien wrapper ── */
.alien {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    animation: alienIdle 3.2s ease-in-out infinite;
    filter: drop-shadow(0 24px 50px rgba(74,222,128,0.5)) drop-shadow(0 0 30px rgba(124,58,237,0.15));
    z-index: 5;
}
.alien.grabbing { cursor: grabbing !important; animation: none !important; }
.alien.flying   { animation: alienSpin 0.35s linear infinite !important; }

/* ── Speech bubble ── */
.alien-speech {
    position: absolute;
    bottom: calc(100% + 16px); left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    border: 2.5px solid #E5E7EB;
    border-radius: 22px;
    padding: 10px 20px;
    font-size: 13px;
    font-family: var(--font-body);
    font-weight: 800;
    color: #1F1F2E;
    white-space: nowrap;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    z-index: 20;
}
.alien-speech.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.alien-speech::before {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #E5E7EB;
}
.alien-speech::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #fff;
    margin-top: -1px;
}

/* ── Body ── */
.alien-body {
    width: 190px; height: 210px;
    background: linear-gradient(150deg, #86EFAC 0%, #4ADE80 55%, #16A34A 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 4.5px #14532D, inset 0 -35px 60px rgba(0,0,0,0.1);
    position: relative;
    overflow: visible;
    z-index: 2;
}

/* ── Spots on body ── */
.alien-spot {
    position: absolute;
    background: rgba(22,163,74,0.5);
    border-radius: 50%;
}
.as-1 { width: 28px; height: 22px; top: 48px;  left: 20px; transform: rotate(-20deg); }
.as-2 { width: 18px; height: 14px; top: 74px;  right: 22px; }
.as-3 { width: 14px; height: 10px; top: 30px;  right: 44px; }

/* ── Antennae ── */
.alien-ant {
    position: absolute;
    width: 5px; height: 62px;
    background: #14532D;
    border-radius: 3px;
    bottom: 84%;
    z-index: 6;
    transform-origin: bottom center;
}
.alien-ant-l { left: 46px;  transform: rotate(-22deg); }
.alien-ant-r { right: 46px; transform: rotate(22deg); }

.alien-ant-ball {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #14532D;
}
/* Different colours per antenna */
.aab-l {
    background: #F97316;
    animation: antGlowO 1.8s ease-in-out infinite;
}
.aab-r {
    background: #EC4899;
    animation: antGlowP 1.8s ease-in-out infinite 0.9s;
}
@keyframes antGlowO {
    0%,100% { box-shadow: 0 0 0 3px #14532D, 0 0 10px rgba(249,115,22,0.5); }
    50%      { box-shadow: 0 0 0 3px #14532D, 0 0 28px rgba(249,115,22,1); }
}
@keyframes antGlowP {
    0%,100% { box-shadow: 0 0 0 3px #14532D, 0 0 10px rgba(236,72,153,0.5); }
    50%      { box-shadow: 0 0 0 3px #14532D, 0 0 28px rgba(236,72,153,1); }
}

/* ── Eyes ── */
.alien-eyes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 44px;
    position: relative;
    z-index: 3;
}
.alien-eye {
    width: 38px; height: 38px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3.5px #14532D;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible; /* brows sit outside */
}
.ae-c { width: 46px; height: 46px; margin-top: -5px; }

/* Eyebrows */
.alien-brow {
    position: absolute;
    top: -9px; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 6px;
    background: #14532D;
    border-radius: 3px;
    transition: transform 0.2s;
}
.ae-l .alien-brow { transform: translateX(-50%) rotate(-8deg); }
.ae-r .alien-brow { transform: translateX(-50%) rotate(8deg); }
/* Brow states */
.alien.scared .ae-l .alien-brow { transform: translateX(-50%) rotate(-25deg) translateY(-4px); }
.alien.scared .ae-r .alien-brow { transform: translateX(-50%) rotate(25deg)  translateY(-4px); }
.alien.happy  .ae-l .alien-brow { transform: translateX(-50%) rotate(10deg); }
.alien.happy  .ae-r .alien-brow { transform: translateX(-50%) rotate(-10deg); }

/* Irises — each eye a different colour */
.ae-iris {
    width: 22px; height: 22px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.ae-l .ae-iris { background: #7C3AED; } /* purple */
.ae-c .ae-iris { background: #DC2626; width: 28px; height: 28px; } /* red — biggest */
.ae-r .ae-iris { background: #2563EB; } /* blue */
/* Pupils */
.ae-iris::before {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    background: #1F1F2E;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.ae-c .ae-iris::before { width: 13px; height: 13px; }
/* Shine — hidden */
.ae-shine { display: none; }

/* ── Blush ── */
.alien-blush {
    position: absolute;
    width: 32px; height: 18px;
    background: rgba(252,165,165,0.45);
    border-radius: 50%;
    top: 88px;
}
.ab-l { left: 12px; }
.ab-r { right: 12px; }

/* ── Mouth: dark smile arc, 2 white teeth inside ── */
.alien-mouth {
    position: absolute;
    top: 91px; left: 50%;
    transform: translateX(-50%);
    width: 96px; height: 18px;
    background: #166534;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    z-index: 5;
    transition: border-radius 0.25s ease, height 0.25s ease, top 0.25s ease;
}
.alien-tooth {
    position: absolute;
    top: 0;
    width: 32px; height: 12px;
    background: #fff;
    border-radius: 0 0 8px 8px;
}
.alien-tooth:nth-child(1) { left: 8px; }
.alien-tooth:nth-child(2) { right: 8px; }

/* ── Tongue ── */
.alien-tongue {
    position: absolute;
    bottom: -28px; left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    width: 28px; height: 30px;
    background: radial-gradient(ellipse at 45% 40%, #FCA5A5, #EF4444);
    border-radius: 0 0 50% 50%;
    box-shadow: 0 0 0 2.5px #B91C1C;
    opacity: 0;
    transition: none;
    z-index: 10;
}
.alien-tongue::after {
    content: '';
    position: absolute;
    bottom: 6px; left: 50%;
    transform: translateX(-50%);
    width: 12px; height: 6px;
    border-top: 2.5px solid rgba(185,28,28,0.5);
    border-radius: 50%;
}
.alien.tongue-out .alien-mouth {
    overflow: visible;
}
.alien.tongue-out .alien-tongue {
    animation: tongueOut 2s ease forwards;
}
@keyframes tongueOut {
    0%   { opacity: 0; transform: translateX(-50%) scaleY(0); }
    15%  { opacity: 1; transform: translateX(-50%) scaleY(1.1) rotate(-4deg); }
    30%  { transform: translateX(-50%) scaleY(0.95) rotate(4deg); }
    45%  { transform: translateX(-50%) scaleY(1.05) rotate(-3deg); }
    60%  { transform: translateX(-50%) scaleY(1) rotate(2deg); }
    75%  { transform: translateX(-50%) scaleY(1) rotate(0deg); }
    88%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
    100% { opacity: 0; transform: translateX(-50%) scaleY(0); }
}

/* ── Cry droplets ── */
.ae-drop {
    position: absolute;
    width: 36px; height: 50px;
    background: radial-gradient(ellipse at 42% 62%, #BAE6FD 0%, #3B82F6 50%, #1D4ED8 100%);
    clip-path: path('M 18 0 C 32 8 36 20 36 32 A 18 18 0 0 1 0 32 C 0 20 4 8 18 0 Z');
    opacity: 0;
    pointer-events: none;
    top: 50%; left: 50%;
    transform-origin: center center;
}
/* Shine highlight */
.ae-drop::after {
    content: '';
    position: absolute;
    width: 10px; height: 15px;
    background: rgba(255,255,255,0.45);
    border-radius: 50%;
    bottom: 12px; left: 7px;
    transform: rotate(-20deg);
}

/* Trigger on crying — 4 repeating bursts, staggered per drop */
.alien.crying .ae-l .ae-drop-1 { animation: dropFlyL1 1.4s cubic-bezier(0.15,0.8,0.35,1) 0.0s  4; }
.alien.crying .ae-l .ae-drop-2 { animation: dropFlyL2 1.4s cubic-bezier(0.15,0.8,0.35,1) 0.18s 4; }
.alien.crying .ae-l .ae-drop-3 { animation: dropFlyL3 1.4s cubic-bezier(0.15,0.8,0.35,1) 0.36s 4; }

.alien.crying .ae-r .ae-drop-1 { animation: dropFlyR1 1.4s cubic-bezier(0.15,0.8,0.35,1) 0.0s  4; }
.alien.crying .ae-r .ae-drop-2 { animation: dropFlyR2 1.4s cubic-bezier(0.15,0.8,0.35,1) 0.18s 4; }
.alien.crying .ae-r .ae-drop-3 { animation: dropFlyR3 1.4s cubic-bezier(0.15,0.8,0.35,1) 0.36s 4; }

/* Left eye: fountain arcs — shoots up, peaks, falls down */
@keyframes dropFlyL1 {  /* steep arc — up then slight left fall */
    0%   { opacity: 0; transform: translate(0,0)        scale(0.3) rotate(0deg); }
    5%   { opacity: 1; transform: translate(-12px,-28px) scale(1.2) rotate(-10deg); }
    35%  { opacity: 1; transform: translate(-55px,-130px) scale(1.1) rotate(-20deg); }
    70%  { opacity: 1; transform: translate(-90px, -30px) scale(1.0) rotate(-60deg); }
    100% { opacity: 0; transform: translate(-110px, 80px) scale(0.85) rotate(-90deg); }
}
@keyframes dropFlyL2 { /* medium arc — up-left then falls */
    0%   { opacity: 0; transform: translate(0,0)        scale(0.3) rotate(0deg); }
    5%   { opacity: 1; transform: translate(-20px,-22px) scale(1.3) rotate(-30deg); }
    35%  { opacity: 1; transform: translate(-100px,-110px) scale(1.15) rotate(-50deg); }
    70%  { opacity: 1; transform: translate(-145px,  10px) scale(1.0) rotate(-90deg); }
    100% { opacity: 0; transform: translate(-165px,  90px) scale(0.85) rotate(-120deg); }
}
@keyframes dropFlyL3 { /* shallow arc — mostly left, low arc */
    0%   { opacity: 0; transform: translate(0,0)        scale(0.3) rotate(0deg); }
    5%   { opacity: 1; transform: translate(-26px,-12px) scale(1.2) rotate(-50deg); }
    35%  { opacity: 1; transform: translate(-130px,-60px) scale(1.1) rotate(-80deg); }
    70%  { opacity: 1; transform: translate(-165px, 30px) scale(1.0) rotate(-110deg); }
    100% { opacity: 0; transform: translate(-180px,100px) scale(0.85) rotate(-140deg); }
}

/* Right eye: mirrored fountain arcs */
@keyframes dropFlyR1 {
    0%   { opacity: 0; transform: translate(0,0)       scale(0.3) rotate(0deg); }
    5%   { opacity: 1; transform: translate(12px,-28px) scale(1.2) rotate(10deg); }
    35%  { opacity: 1; transform: translate(55px,-130px) scale(1.1) rotate(20deg); }
    70%  { opacity: 1; transform: translate(90px, -30px) scale(1.0) rotate(60deg); }
    100% { opacity: 0; transform: translate(110px, 80px) scale(0.85) rotate(90deg); }
}
@keyframes dropFlyR2 {
    0%   { opacity: 0; transform: translate(0,0)       scale(0.3) rotate(0deg); }
    5%   { opacity: 1; transform: translate(20px,-22px) scale(1.3) rotate(30deg); }
    35%  { opacity: 1; transform: translate(100px,-110px) scale(1.15) rotate(50deg); }
    70%  { opacity: 1; transform: translate(145px,  10px) scale(1.0) rotate(90deg); }
    100% { opacity: 0; transform: translate(165px,  90px) scale(0.85) rotate(120deg); }
}
@keyframes dropFlyR3 {
    0%   { opacity: 0; transform: translate(0,0)       scale(0.3) rotate(0deg); }
    5%   { opacity: 1; transform: translate(26px,-12px) scale(1.2) rotate(50deg); }
    35%  { opacity: 1; transform: translate(130px,-60px) scale(1.1) rotate(80deg); }
    70%  { opacity: 1; transform: translate(165px, 30px) scale(1.0) rotate(110deg); }
    100% { opacity: 0; transform: translate(180px,100px) scale(0.85) rotate(140deg); }
}

/* ── Edge peek characters ── */
.edge-peek {
    position: fixed;
    z-index: 9997;
    pointer-events: none;
    transform: translate(0, 0);
    transition: transform 0.6s ease-out;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.28));
    display: flex;
    flex-direction: column;
    align-items: center;
}
.peek-head {
    font-size: 88px;
    line-height: 1;
    position: relative;
    z-index: 2;
}
.peek-bubble {
    position: absolute;
    background: #fff;
    color: #1F1F2E;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0);
    transform-origin: bottom center;
    transition: transform 0.3s cubic-bezier(0.34, 1.5, 0.64, 1) 0.4s;
    z-index: 3;
}
.peek-bubble::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #fff;
    border-bottom: none;
}
.edge-peek.peeked .peek-bubble {
    transform: translateX(-50%) scale(1);
}

/* ── Antenna sparkles ── */
.alien-sparkle {
    position: fixed;
    width: 18px; height: 18px;
    pointer-events: none;
    z-index: 99999;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) brightness(1.5);
    animation: sparkleOut 0.7s ease-out forwards;
}
@keyframes sparkleOut {
    0%   { opacity: 1; transform: translate(0,0) scale(0.4) rotate(0deg); }
    40%  { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(1.2) rotate(120deg); }
    100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(0.3) rotate(240deg); }
}

/* Sad brows when crying */
.alien.crying .ae-l .alien-brow { transform: translateX(-50%) rotate(-25deg) !important; }
.alien.crying .ae-r .alien-brow { transform: translateX(-50%) rotate(25deg)  !important; }

/* Sad frown when crying */
.alien.crying .alien-mouth {
    border-radius: 48px 48px 0 0;
    height: 22px;
    top: 95px;
    animation: mouthTremble 0.18s ease-in-out infinite;
}
.alien.crying .alien-tooth {
    display: none;
}
@keyframes mouthTremble {
    0%,100% { transform: translateX(-50%) rotate(0deg); }
    33%     { transform: translateX(-50%) rotate(-2deg) translateY(-1px); }
    66%     { transform: translateX(-50%) rotate(2deg)  translateY(1px); }
}

/* ── Belly ── */
.alien-belly {
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    width: 90px; height: 76px;
    background: radial-gradient(circle at 40% 38%, #DCFCE7 0%, #86EFAC 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 3.5px #14532D;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, filter 0.15s;
    z-index: 4;
}
.alien-belly:hover { transform: translateX(-50%) scale(1.08); filter: brightness(1.1); }
.alien-belly:active { transform: translateX(-50%) scale(0.93); }
.alien-navel {
    width: 16px; height: 11px;
    background: #4ADE80;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #14532D;
}

/* ── Arms (clickable) ── */
.alien-arm {
    position: absolute;
    width: 42px; height: 72px;
    background: linear-gradient(160deg, #86EFAC, #4ADE80);
    border-radius: 21px;
    box-shadow: 0 0 0 3.5px #14532D;
    top: 80px;
    z-index: 1;
    cursor: pointer;
    transition: filter 0.15s;
}
.alien-arm:hover { filter: brightness(1.15); }
.alien-arm-l { left: -26px;  transform: rotate(-16deg); transform-origin: top center; }
.alien-arm-r { right: -26px; transform: rotate(16deg);  transform-origin: top center; }
/* Hand */
.alien-arm::after {
    content: '';
    position: absolute;
    bottom: -12px; left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 24px;
    background: linear-gradient(160deg, #86EFAC, #4ADE80);
    border-radius: 50%;
    box-shadow: 0 0 0 3px #14532D;
}
/* Wave animations */
.alien-arm-l.waving { animation: waveL 0.4s ease-in-out 4; z-index: 20; }
.alien-arm-r.waving { animation: waveR 0.4s ease-in-out 4; z-index: 20; }
@keyframes waveL {
    0%,100% { transform: rotate(-16deg); }
    50%      { transform: rotate(-120deg); }
}
@keyframes waveR {
    0%,100% { transform: rotate(16deg); }
    50%      { transform: rotate(120deg); }
}

/* ── Legs (clickable) ── */
.alien-legs {
    display: flex;
    gap: 18px;
    position: relative;
    z-index: 1;
    margin-top: -12px;
    cursor: pointer;
}
.alien-leg {
    width: 56px; height: 66px;
    background: linear-gradient(170deg, #86EFAC, #4ADE80);
    border-radius: 16px 16px 32px 32px;
    box-shadow: 0 0 0 3.5px #14532D;
    position: relative;
    transition: transform 0.15s;
}
.alien-legs:hover .alien-leg { transform: translateY(-5px); }
/* Foot */
.alien-leg::after {
    content: '';
    position: absolute;
    bottom: -11px; left: 50%;
    transform: translateX(-50%);
    width: 66px; height: 24px;
    background: #22C55E;
    border-radius: 50%;
    box-shadow: 0 0 0 3.5px #14532D;
}

/* ── Idle float ── */
@keyframes alienIdle {
    0%,100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-20px) rotate(-2.5deg); }
    70%      { transform: translateY(-12px) rotate(2.5deg); }
}
/* ── Spin (throw) ── */
@keyframes alienSpin {
    to { transform: rotate(360deg); }
}


/* ===== Custom Cursor ===== */
/* Only hide the system cursor on true pointer (mouse) devices */
@media (hover: hover) and (pointer: fine) {
    *, *::before, *::after { cursor: none !important; }
}

/* On touch screens — hide the custom dot and restore normal cursor */
@media (hover: none), (pointer: coarse) {
    #cursor-dot { display: none !important; }
    * { cursor: auto !important; }
}

#cursor-dot {
    position: fixed;
    width: 14px; height: 14px;
    clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    background: linear-gradient(135deg,#7C3AED,#EC4899);
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%,-50%);
    filter: drop-shadow(0 0 6px rgba(124,58,237,0.9)) drop-shadow(0 0 12px rgba(236,72,153,0.6));
    transition: width .12s, height .12s, filter .2s;
    will-change: left,top;
}
#cursor-ring { display: none; }
body.cur-hover #cursor-dot {
    width: 22px; height: 22px;
    background: linear-gradient(135deg,#EC4899,#F97316);
    filter: drop-shadow(0 0 8px rgba(236,72,153,1)) drop-shadow(0 0 18px rgba(249,115,22,0.7));
}

body.cur-click #cursor-dot {
    width: 8px; height: 8px;
}

.cursor-trail {
    position: fixed;
    pointer-events: none;
    z-index: 2147483645;
    transform: translate(-50%,-50%);
    animation: curTrail .55s ease-out forwards;
    clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
@keyframes curTrail {
    0%   { opacity:.9; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
    100% { opacity:0;  transform:translate(-50%,-50%) scale(.2) rotate(120deg); }
}

/* ── iPad Air / large tablet — alien position fix ── */
/* Uses #alienStage ID (specificity 1,0,0) to beat all class-based rules */
@media (min-width: 769px) and (max-width: 1024px) {
    #alienStage {
        align-items: flex-start !important;
        padding-top: 80px !important;
        padding-bottom: 0 !important;
        min-height: 500px !important;
    }
}