/* ============================================================
   UTS Africa Limited — Premium Product Showcase
   Brand: #8ac737 (Green) / #1e8bb8 (Teal)
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    /* Brand Colors */
    --brand-primary: #8ac737;
    --brand-primary-dim: rgba(138, 199, 55, 0.6);
    --brand-primary-glow: rgba(138, 199, 55, 0.25);
    --brand-secondary: #1e8bb8;
    --brand-secondary-dim: rgba(30, 139, 184, 0.6);
    --brand-secondary-glow: rgba(30, 139, 184, 0.25);

    --brand-dark: #0D1117;
    --brand-dark-elevated: #121820;
    --brand-dark-card: #171F2B;
    --brand-dark-border: rgba(255, 255, 255, 0.08);

    --brand-light: #F5F3EE;
    --brand-muted: #B8BEC7;

    /* Text */
    --text-primary: #F5F3EE;
    --text-secondary: #B8BEC7;
    --text-muted: #6B7380;
    --text-accent: #D4B778;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-md: 1.125rem;
    --font-lg: 1.5rem;
    --font-xl: 2rem;
    --font-2xl: 2.75rem;
    --font-3xl: 3.5rem;
    --font-4xl: 4.5rem;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    /* Layout */
    --container-max: 1400px;
    --control-size: 48px;
    --control-spacing: 12px;
    --control-bottom: 32px;
    --progress-height: 3px;

    /* Animation */
    --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);
    --transition-very-slow: 1000ms cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.83, 0, 0.17, 1);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: auto;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--text-primary);
    background: var(--brand-dark);
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    position: relative;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

img {
    max-width: 100%;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ---------- Background ---------- */
#bg-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

.bg-gradient {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(13, 17, 23, 0.6) 0%, rgba(13, 17, 23, 0.95) 100%);
    transition: background var(--transition-very-slow) ease;
}

/* Per-slide gradient tint overlays */
.bg-tint {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s var(--ease-out-expo);
}
.bg-tint--governance {
    background: radial-gradient(ellipse at 30% 40%, rgba(138, 199, 55, 0.06) 0%, transparent 60%);
}
.bg-tint--software {
    background: radial-gradient(ellipse at 70% 50%, rgba(30, 139, 184, 0.06) 0%, transparent 60%);
}
.bg-tint--security {
    background: radial-gradient(ellipse at 50% 80%, rgba(138, 199, 55, 0.05) 0%, transparent 55%),
                radial-gradient(ellipse at 20% 30%, rgba(30, 139, 184, 0.04) 0%, transparent 55%);
}
.bg-tint--cloud {
    background: radial-gradient(ellipse at 60% 30%, rgba(30, 139, 184, 0.07) 0%, transparent 55%),
                radial-gradient(ellipse at 30% 70%, rgba(138, 199, 55, 0.04) 0%, transparent 55%);
}
.bg-tint--capabilities {
    background: radial-gradient(ellipse at 50% 50%, rgba(138, 199, 55, 0.04) 0%, transparent 60%);
}
.bg-tint.is-visible { opacity: 1; }

.bg-orbs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
}
.bg-orb--1 {
    width: 600px; height: 600px;
    top: -200px; right: -150px;
    background: var(--brand-primary);
    animation: orbFloat1 20s ease-in-out infinite;
}
.bg-orb--2 {
    width: 500px; height: 500px;
    bottom: -150px; left: -100px;
    background: var(--brand-secondary);
    animation: orbFloat2 25s ease-in-out infinite;
}
.bg-orb--3 {
    width: 400px; height: 400px;
    top: 40%; left: 50%;
    background: var(--brand-primary);
    opacity: 0.08;
    animation: orbFloat3 18s ease-in-out infinite;
}

/* Orb position variants per slide category — applied via JS transform */
.bg-orb { will-change: transform; }

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-60px, 40px) scale(1.1); }
    66% { transform: translate(30px, -30px) scale(0.95); }
}
@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(50px, -40px) scale(1.08); }
    66% { transform: translate(-40px, 30px) scale(0.92); }
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.08; }
    50% { transform: translate(-40%, -60%) scale(1.2); opacity: 0.15; }
}

/* ---------- Slideshow ---------- */
.slideshow {
    position: relative;
    width: 100%; height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ---------- Slide Base ---------- */
.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-slow) ease, visibility var(--transition-slow) ease;
    z-index: 1;
    padding: var(--spacing-2xl) var(--spacing-xl);
}

.slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.slide.is-exiting {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    z-index: 1;
}

.slide__content {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
}

/* ---------- Intro Slide ---------- */
.slide--intro { background: transparent; }

.slide__content--intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-lg);
}

.intro__logo-wrap {
    margin-bottom: var(--spacing-sm);
    animation: introLogoIn 1.2s var(--ease-out-expo) both;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.intro__logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 30px rgba(138, 199, 55, 0.35));
    transition: filter var(--transition-slow) ease;
}
.intro__logo:hover {
    filter: drop-shadow(0 0 50px rgba(138, 199, 55, 0.5));
}

.intro__tagline-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.intro__title {
    font-size: var(--font-4xl);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.intro__title-line {
    display: block;
    opacity: 0;
    transform: translateY(30px);
    animation: introTitleLineIn 0.9s var(--ease-out-expo) forwards;
}
.intro__title-line:first-child { animation-delay: 0.15s; }
.intro__title-line:last-child {
    color: var(--brand-primary);
    animation-delay: 0.3s;
    text-shadow: 0 0 60px rgba(138, 199, 55, 0.3);
}

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

@keyframes introLogoIn {
    from {
        opacity: 0;
        transform: scale(0.85);
        filter: blur(12px) drop-shadow(0 0 0px rgba(138, 199, 55, 0));
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) drop-shadow(0 0 30px rgba(138, 199, 55, 0.35));
    }
}

.intro__scroll-indicator {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-out-expo) 1.8s both;
}

.intro__scroll-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 20px rgba(138, 199, 55, 0.5);
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(10px); opacity: 1; }
}

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

/* ---------- Category Slide ---------- */
.slide--category {
    background: linear-gradient(135deg, rgba(138, 199, 55, 0.04) 0%, transparent 50%),
                linear-gradient(225deg, rgba(30, 139, 184, 0.04) 0%, transparent 50%),
                var(--brand-dark);
}

.slide--category:nth-child(even) {
    background: linear-gradient(225deg, rgba(30, 139, 184, 0.05) 0%, transparent 50%),
                linear-gradient(135deg, rgba(138, 199, 55, 0.03) 0%, transparent 50%),
                var(--brand-dark);
}

.slide__content--category {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    animation: categoryFadeIn 0.9s var(--ease-out-expo) both;
}

.category__number {
    font-family: var(--font-mono);
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--brand-primary);
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: var(--spacing-sm);
    opacity: 0;
    transform: translateY(20px);
    animation: categoryItemIn 0.8s var(--ease-out-expo) 0.1s both;
}

.category__title {
    font-size: var(--font-4xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    opacity: 0;
    transform: translateY(30px);
    animation: categoryItemIn 0.8s var(--ease-out-expo) 0.2s both;
}

.category__desc {
    font-size: var(--font-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    animation: categoryItemIn 0.8s var(--ease-out-expo) 0.3s both;
}

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

@keyframes categoryFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Product Slide ---------- */
.slide--product {
    padding: var(--spacing-2xl) clamp(var(--spacing-xl), 5vw, var(--spacing-3xl));
}

.slide__content--product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--spacing-xl), 4vw, var(--spacing-3xl));
    align-items: center;
    min-height: 70vh;
}

/* Left Column */
.product__left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.product__index {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--brand-primary);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.slide.is-active .product__index {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 300ms;
}

.product__category {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--brand-secondary);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.slide.is-active .product__category {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 350ms;
}

.product__name {
    font-size: var(--font-3xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.slide.is-active .product__name {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 400ms;
}

.product__tagline {
    font-size: var(--font-lg);
    font-weight: 500;
    color: var(--brand-secondary);
    line-height: 1.4;
    margin-top: var(--spacing-xs);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.slide.is-active .product__tagline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 500ms;
}

.product__desc {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 480px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.slide.is-active .product__desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 600ms;
}

.product__benefits {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.product__benefit {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-sm);
    color: var(--text-primary);
    padding: 8px 16px;
    background: var(--brand-dark-card);
    border: 1px solid var(--brand-dark-border);
    border-radius: var(--radius-full);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 400ms var(--ease-out-expo), transform 400ms var(--ease-out-expo),
                border-color 200ms ease, background 200ms ease;
}
.product__benefit:hover {
    border-color: var(--brand-primary-dim);
    background: rgba(138, 199, 55, 0.08);
}
.product__benefit-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 8px rgba(138, 199, 55, 0.4);
    flex-shrink: 0;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.product__benefit:hover .product__benefit-dot {
    transform: scale(1.4);
    box-shadow: 0 0 12px rgba(138, 199, 55, 0.6);
}

.slide.is-active .product__benefit:nth-child(1) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 700ms; }
.slide.is-active .product__benefit:nth-child(2) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 750ms; }
.slide.is-active .product__benefit:nth-child(3) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 800ms; }
.slide.is-active .product__benefit:nth-child(4) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 850ms; }
.slide.is-active .product__benefit:nth-child(5) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 900ms; }

.product__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--brand-primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    position: relative;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo), color 200ms ease;
}
.slide.is-active .product__cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 950ms;
}
.product__cta::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand-primary);
    transition: width 400ms var(--ease-in-out-quart);
    border-radius: 1px;
}
.product__cta:hover { color: var(--text-accent); }
.product__cta:hover::after { width: 100%; }

.product__cta-arrow {
    width: 16px;
    height: 16px;
    transition: transform 200ms var(--ease-out-expo);
}
.product__cta:hover .product__cta-arrow { transform: translateX(4px); }

/* Right Column */
.product__right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product__visual {
    position: relative;
    width: 100%;
    max-width: 560px;
}

.product__image-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--brand-dark-card);
    border: 1px solid var(--brand-dark-border);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 60px rgba(138, 199, 55, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) scale(0.98);
    transition: transform 500ms var(--ease-out-expo), box-shadow 500ms ease;
    will-change: transform;
}
.slide.is-active .product__image-wrap {
    transform: perspective(1200px) rotateY(-0.5deg) rotateX(0.3deg) scale(1);
    transition-delay: 150ms;
}
.product__image-wrap:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg) scale(1.015);
    box-shadow:
        0 45px 100px rgba(0, 0, 0, 0.55),
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 80px rgba(138, 199, 55, 0.1);
}

/* Reveal animation variants */
.product__image-wrap[data-reveal="clip-left"] {
    clip-path: inset(0 0 0 25%);
    transition: clip-path 550ms var(--ease-out-expo);
}
.slide.is-active .product__image-wrap[data-reveal="clip-left"] {
    clip-path: inset(0 0 0 0);
    transition-delay: 120ms;
}
.product__image-wrap[data-reveal="clip-right"] {
    clip-path: inset(0 25% 0 0);
    transition: clip-path 550ms var(--ease-out-expo);
}
.slide.is-active .product__image-wrap[data-reveal="clip-right"] {
    clip-path: inset(0 0 0 0);
    transition-delay: 120ms;
}
.product__image-wrap[data-reveal="fade-up"] {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo);
}
.slide.is-active .product__image-wrap[data-reveal="fade-up"] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 180ms;
}

.product__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 800ms var(--ease-in-out-quart);
}
.product__image-wrap:hover .product__image {
    transform: scale(1.02);
}

.product__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: linear-gradient(145deg, #1a222e 0%, #0d1117 100%);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.product__placeholder svg {
    width: 42px; height: 42px;
    opacity: 0.35;
}
.product__placeholder span {
    font-size: 0.75em;
    opacity: 0.5;
}

.product__glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 70%;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 600ms var(--ease-out-expo);
}
.slide.is-active .product__glow { opacity: 1; transition-delay: 250ms; }

.product__glow--primary {
    background: radial-gradient(ellipse at center, rgba(138, 199, 55, 0.15) 0%, transparent 70%);
}
.product__glow--secondary {
    background: radial-gradient(ellipse at center, rgba(30, 139, 184, 0.15) 0%, transparent 70%);
}

/* ---------- Closing Slide ---------- */
.slide--closing { background: transparent; }

.slide__content--closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-lg);
}

.closing__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.slide.is-active .closing__logo-wrap {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 250ms;
}

.closing__logo {
    max-width: 150px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(138, 199, 55, 0.25));
}

.closing__title {
    font-size: var(--font-3xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.slide.is-active .closing__title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 400ms;
}

.closing__statement {
    font-size: var(--font-md);
    color: var(--text-secondary);
    max-width: 500px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.slide.is-active .closing__statement {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 600ms;
}

.closing__contact {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-sm);
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 600ms var(--ease-out-expo);
}
.slide.is-active .closing__contact {
    opacity: 1;
    transition-delay: 800ms;
}

.closing__link {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: color 200ms ease;
}
.closing__link:hover { color: var(--text-accent); }

.closing__sep {
    color: var(--brand-primary-dim);
    font-weight: 300;
}

/* ---------- Progress Bar ---------- */
.progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--progress-height);
    z-index: 10;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.progress__bar {
    width: 0%;
    height: 100%;
    background: var(--brand-primary);
    box-shadow: 0 0 15px rgba(138, 199, 55, 0.6);
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    transition: width var(--transition-slow) linear;
}
.progress__bar.is-paused {
    transition: none;
    animation: progressPause 0.3s ease forwards;
}
@keyframes progressPause { to { opacity: 0.6; } }

/* ---------- Slide Counter ---------- */
.slide-counter {
    position: fixed;
    bottom: var(--control-bottom);
    left: var(--spacing-xl);
    z-index: 8;
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    letter-spacing: 0.1em;
    color: var(--text-muted);
    display: flex;
    align-items: baseline;
    gap: 6px;
    transition: opacity var(--transition-base) ease, transform var(--transition-base) ease;
}

.slide-counter__current {
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-lg);
}

.slide-counter__sep {
    color: var(--text-muted);
    opacity: 0.5;
}

.slide-counter__total { color: var(--text-muted); }

/* ---------- Controls ---------- */
.controls {
    position: fixed;
    bottom: var(--control-bottom);
    right: var(--spacing-xl);
    z-index: 9;
    display: flex;
    align-items: center;
    gap: var(--control-spacing);
    transition: opacity var(--transition-base) ease, transform var(--transition-base) ease;
}

.controls.is-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.controls__btn {
    width: var(--control-size);
    height: var(--control-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--brand-dark-border);
    color: var(--text-secondary);
    transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease,
                color var(--transition-fast) ease, transform var(--transition-fast) ease;
    position: relative;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.controls__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--brand-primary-dim);
    color: var(--text-primary);
    transform: scale(1.05);
}
.controls__btn:active { transform: scale(0.95); }

.controls__btn--play {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-dark);
}
.controls__btn--play:hover {
    background: var(--text-accent);
    border-color: var(--text-accent);
    color: var(--brand-dark);
}

.controls__divider {
    width: 1px;
    height: 24px;
    background: var(--brand-dark-border);
    margin: 0 var(--control-spacing);
}

/* ---------- Dots ---------- */
.dots {
    position: fixed;
    bottom: calc(var(--control-bottom) + 20px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: opacity var(--transition-base) ease;
}

.dots.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.dots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base) var(--ease-in-out-quart);
    position: relative;
    padding: 0;
    flex-shrink: 0;
}
.dots__dot:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.3);
}
.dots__dot.is-active {
    background: var(--brand-primary);
    box-shadow: 0 0 12px rgba(138, 199, 55, 0.5);
    transform: scale(1.2);
}
.dots__dot.is-active::after {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    border: 1px solid rgba(138, 199, 55, 0.3);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    :root {
        --font-4xl: 3.5rem;
        --font-3xl: 2.75rem;
        --font-2xl: 2.25rem;
        --font-xl: 1.75rem;
        --font-lg: 1.35rem;
    }
    .slide__content--product { gap: var(--spacing-xl); }
}

@media (max-width: 968px) {
    :root {
        --font-4xl: 2.75rem;
        --font-3xl: 2.25rem;
        --font-2xl: 1.9rem;
        --font-xl: 1.5rem;
        --font-lg: 1.2rem;
        --font-md: 1.05rem;
        --font-base: 0.95rem;
    }
    .slide { padding: var(--spacing-xl) var(--spacing-lg); }
    .slide__content--product {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        min-height: auto;
        text-align: center;
    }
    .product__left {
        padding-right: 0;
        align-items: center;
        gap: var(--spacing-sm);
    }
    .product__desc { max-width: 400px; }
    .product__benefits { justify-content: center; }
    .product__right { order: -1; }
    .product__visual { max-width: 400px; }
    .slide-counter { left: var(--spacing-md); bottom: calc(var(--control-bottom) + 10px); }
    .controls { right: var(--spacing-md); bottom: calc(var(--control-bottom) + 10px); }
    .dots { bottom: calc(var(--control-bottom) + 70px); }
}

@media (max-width: 640px) {
    :root {
        --font-4xl: 2.25rem;
        --font-3xl: 1.9rem;
        --font-2xl: 1.6rem;
        --font-xl: 1.3rem;
        --font-lg: 1.05rem;
        --font-md: 0.95rem;
        --font-base: 0.85rem;
        --font-sm: 0.78rem;
        --font-xs: 0.68rem;
        --control-size: 42px;
        --control-spacing: 8px;
        --control-bottom: 20px;
    }
    .slide { padding: var(--spacing-lg) var(--spacing-md); }
    .slide__content--product { gap: var(--spacing-md); }
    .product__visual { max-width: 300px; }
    .product__benefits { gap: var(--spacing-xs); }
    .product__benefit { padding: 8px 14px; font-size: var(--font-xs); }
    .controls { gap: 6px; }
    .controls__divider { display: none; }
    .slide-counter { font-size: var(--font-xs); }
    .slide-counter__current { font-size: var(--font-md); }
    .dots { gap: 6px; }
    .dots__dot { width: 6px; height: 6px; }
}

@media (max-height: 600px) {
    :root {
        --font-4xl: 2rem;
        --font-3xl: 1.7rem;
        --font-2xl: 1.4rem;
        --font-xl: 1.15rem;
        --font-lg: 0.98rem;
        --font-md: 0.85rem;
        --font-base: 0.78rem;
        --font-sm: 0.72rem;
        --font-xs: 0.65rem;
    }
    .slide { padding: var(--spacing-md) var(--spacing-lg); }
    .slide__content--product { gap: var(--spacing-sm); min-height: auto; }
    .product__visual { max-width: 300px; }
    .product__benefits { gap: 4px; }
    .product__benefit { padding: 6px 12px; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    .intro__title-line,
    .intro__scroll-indicator,
    .category__number,
    .category__title,
    .category__desc,
    .product__index,
    .product__category,
    .product__name,
    .product__tagline,
    .product__desc,
    .product__benefit,
    .product__cta,
    .product__visual,
    .product__glow,
    .closing__logo-wrap,
    .closing__title,
    .closing__statement,
    .closing__contact {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
    .intro__scroll-indicator { display: none; }
    .progress__bar { transition: none; }
}

/* ---------- Fullscreen ---------- */
:fullscreen { background: var(--brand-dark); }
:-webkit-full-screen { background: var(--brand-dark); }

/* ---------- Utility ---------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}