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

html {
    scroll-behavior: smooth;

    /* Hide scrollbar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

html::-webkit-scrollbar {       /* Chrome, Safari, Opera */
    display: none;
}

body {
    --bg-color: #f8f9fa;

    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;

    background-color: var(--bg-color);
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4rem 2rem 10rem;
    animation: fadeIn var(--anim-container-duration) ease-out;
    overflow-y: auto;
    max-height: 100vh;
    width: calc(100% - var(--social-sidebar-width) - 3rem);

    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

.content-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn var(--anim-logo-duration) ease-out;
    margin-bottom: 0;
    width: 100%;
    min-height: 200px;
}

.logo {
    background-image: url('logo_full.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-width: var(--logo-max-width);
    width: 100%;
    padding: 1rem;
    height: var(--logo-height);
}

.title-text {
    margin-top: 0.5rem;
    animation: fadeIn var(--anim-title-duration) ease-out var(--anim-title-delay) both;
}

:root {
    --main-font: 'Titan One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Animation durations */
    --anim-container-duration: 1.5s;
    --anim-logo-duration: 1s;
    --anim-title-duration: 1s;
    --anim-hero-duration: 1.2s;

    /* Animation delays */
    --anim-logo-halfway: calc(var(--anim-logo-duration) * 0.5);
    --anim-title-delay: var(--anim-logo-halfway);
    --anim-hero-delay: var(--anim-logo-halfway);

    /* Transition durations */
    --transition-hover-duration: 0.5s;
    --transition-color-duration: 0.3s;

    /* Logo dimensions */
    --logo-max-width: 800px;
    --logo-height: 422px;

    /* Social sidebar */
    --social-sidebar-width: 60px;
    --social-icon-size: 28px;
    --social-icon-gap: 1.5rem;
}

.title-text h1,
.title-text h2 {
    color: #484353;
    font-family: var(--main-font);
    font-size: 2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.title-text h2 {
    font-size: 1.5rem;
}

/* Divider line between sections */
.section-divider {
    width: 100%;
    max-width: var(--logo-max-width);
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(72, 67, 83, 0.5), transparent);
    margin: 2rem 0;
}

@keyframes shimmerDivider {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.hero-section {
    position: relative;
    margin-top: 1rem;
    padding: 2rem 0;
    animation: fadeIn var(--anim-hero-duration) ease-out var(--anim-hero-delay) both;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.hero-section + .hero-section {
    margin-top: 4rem;
}

.hero-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
    transition: transform var(--transition-hover-duration) ease;
}

.hero-image:hover {
    transform: scale(1.02);
}

.hero-note {
    font-size: 0.8rem;
    color: #888;
    text-align: center;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.hero-note a {
    color: #484353;
    text-decoration: none;
    font-weight: 500;
        transition: color var(--transition-color-duration) ease;
}

.hero-note a:hover {
    color: #666;
    text-decoration: underline;
}

@keyframes shimmer {
    0% { background-position: -200%; }
    100% { background-position: 200%; }
}

body::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80vmin;
    height: 80vmin;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
}

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

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
    }

.social-sidebar {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--social-icon-gap);
    z-index: 20;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    transition: color var(--transition-color-duration) ease, transform var(--transition-hover-duration) ease;
}

.social-icon {
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.social-youtube { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M549.7 124.1C543.5 100.4 524.9 81.8 501.4 75.5 458.9 64 288.1 64 288.1 64S117.3 64 74.7 75.5C51.2 81.8 32.7 100.4 26.4 124.1 15 167 15 256.4 15 256.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8 42.6 11.5 213.4 11.5 213.4 11.5s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM232.2 337.6l0-162.4 142.7 81.2-142.7 81.2z'/%3E%3C/svg%3E"); }
.social-instagram { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M224.3 141a115 115 0 1 0-.6 230 115 115 0 1 0.6-230zm-.6 40.4a74.6 74.6 0 1 1.6 149.2 74.6 74.6 0 1 1-.6-149.2zm93.4-45.1a26.8 26.8 0 1 1 53.6 0 26.8 26.8 0 1 1-53.6 0zm129.7 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM399 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E"); }
.social-x { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M357.2 48L427.8 48 273.6 224.2 455 464 313 464 201.7 318.6 74.5 464 3.8 464 168.7 275.5-5.2 48 140.4 48 240.9 180.9 357.2 48zM332.4 421.8l39.1 0-252.4-333.8-42 0 255.3 333.8z'/%3E%3C/svg%3E"); }
.social-tiktok { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M448.5 209.9c-44 .1-87-13.6-122.8-39.2l0 178.7c0 33.1-10.1 65.4-29 92.6s-45.6 48-76.6 59.6-64.8 13.5-96.9 5.3-60.9-25.9-82.7-50.8-35.3-56-39-88.9 2.9-66.1 18.6-95.2 40-52.7 69.6-67.7 62.9-20.5 95.7-16l0 89.9c-15-4.7-31.1-4.6-46 .4s-27.9 14.6-37 27.3-14 28.1-13.9 43.9 5.2 31 14.5 43.7 22.4 22.1 37.4 26.9 31.1 4.8 46-.1s28-14.4 37.2-27.1 14.2-28.1 14.2-43.8l0-349.4 88 0c-.1 7.4 .6 14.9 1.9 22.2 3.1 16.3 9.4 31.9 18.7 45.7s21.3 25.6 35.2 34.6c19.9 13.1 43.2 20.1 67 20.1l0 87.4z'/%3E%3C/svg%3E"); }
.social-steam { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 137-111.2 248-248.4 248-113.8 0-209.6-76.3-239-180.4l95.2 39.3c6.4 32.1 34.9 56.4 68.9 56.4 39.2 0 71.9-32.4 70.2-73.5l84.5-60.2c52.1 1.3 95.8-40.9 95.8-93.5 0-51.6-42-93.5-93.7-93.5s-93.7 42-93.7 93.5l0 1.2-59.2 85.7c-15.5-.9-30.7 3.4-43.5 12.1L8 236.1C18.2 108.4 125.1 8 255.6 8 392.8 8 504 119 504 256zM163.7 384.3l-30.5-12.6c5.6 11.6 15.3 20.8 27.2 25.8 26.9 11.2 57.8-1.6 69-28.4 5.4-13 5.5-27.3 .1-40.3S214 305.6 201 300.2c-12.9-5.4-26.7-5.2-38.9-.6l31.5 13c19.8 8.2 29.2 30.9 20.9 50.7-8.3 19.9-31 29.2-50.8 21zM337.5 129.8a62.3 62.3 0 1 1 0 124.6 62.3 62.3 0 1 1 0-124.6zm.1 109a46.8 46.8 0 1 0 0-93.6 46.8 46.8 0 1 0 0 93.6z'/%3E%3C/svg%3E"); }

.social-link:hover {
    transform: scale(1.15);
}

.footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 2rem 1.5rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--bg-color);
    font-size: 0.75rem;
    color: #888;
    z-index: 10;
}

.footer a { color: #484353; text-decoration: none; transition: color var(--transition-color-duration) ease; }
.footer a:hover { color: #666; }

.footer-privacy {
    margin-top: 0.5rem;
}

.footer-privacy a { font-size: 0.7rem; }

.footer-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 768px) {
    body {
        align-items: flex-start;
    }

    .container {
        max-height: none;
        overflow-y: visible;
        padding: 2rem 1.5rem 6rem;
        width: 100%;
    }

    .social-sidebar {
        position: fixed;
        right: 0; left: 0;
        top: auto;
        bottom: 5rem;
        transform: none;
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }

    .hero-image {
        max-height: 250px;
    }

    .logo {
        --logo-max-width: 400px;
        --logo-height: 360px;
    }

    .title-text h1 {
        font-size: 1.5rem;
    }

    .title-text h2 {
        font-size: 1.2rem;
    }

    .footer {
        padding-top: 3rem;
    }
}