/* Basic Page Reset and Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: "Rubik", sans-serif;
    overflow: hidden;
}

/* Video Background Styling */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-background video.desktop {
    object-position: center top;
}

/* Header Container */
.header-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Container Styling */
.logo-container {
    transition: 150ms ease;
}

.logo-container:hover {
    transform: rotate(2deg) scale(1.05);
}

.logo-container img {
    height: 65px;
    width: auto;
}

/* Desktop Social Links */
.social-links {
    display: flex;
    gap: 20px;
}

/* Mobile Menu Elements (Hidden on Desktop) */
.mobile-menu-button,
.mobile-menu,
.mobile-menu-backdrop {
    display: none;
}

/* Social Button Style */
.button {
    --stone-50: #fafaf9;
    --stone-800: #292524;
    --yellow-400: #facc15;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    line-height: 1;
    padding: 1px;
    transform: translate(-4px, -4px);
    outline: 2px solid transparent;
    outline-offset: 5px;
    border-radius: 9999px;
    background-color: var(--stone-800);
    color: var(--stone-800);
    transition: transform 150ms ease, box-shadow 150ms ease;
    text-align: center;
    box-shadow:
        0.5px 0.5px 0 0 var(--stone-800), 1px 1px 0 0 var(--stone-800), 1.5px 1.5px 0 0 var(--stone-800),
        2px 2px 0 0 var(--stone-800), 2.5px 2.5px 0 0 var(--stone-800), 3px 3px 0 0 var(--stone-800),
        0 0 0 2px var(--stone-50), 0.5px 0.5px 0 2px var(--stone-50), 1px 1px 0 2px var(--stone-50),
        1.5px 1.5px 0 2px var(--stone-50), 2px 2px 0 2px var(--stone-50), 2.5px 2.5px 0 2px var(--stone-50),
        3px 3px 0 2px var(--stone-50), 3.5px 3.5px 0 2px var(--stone-50), 4px 4px 0 2px var(--stone-50);
}
.button:hover { transform: translate(0, 0); box-shadow: 0 0 0 2px var(--stone-50); }
.button:active, .button:focus-visible { outline-color: var(--yellow-400); }
.button:focus-visible { outline-style: dashed; }
.button > div { position: relative; pointer-events: none; background-color: var(--yellow-400); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; }
.button > div::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; opacity: 0.5; background-image: radial-gradient(rgb(255 255 255 / 80%) 20%, transparent 20%), radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%); background-position: 0 0, 4px 4px; background-size: 8px 8px; mix-blend-mode: hard-light; animation: dots 0.5s infinite linear; }
.button > div > span { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; gap: 0.25rem; filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.25)); }
.button > div > span:active { transform: translateY(2px); }
.button i { font-size: 1.2rem; line-height: 1; }
.social-links .button img { height: 1.2rem; width: auto; }

/* Main Content Container */
.main-content-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    padding: 20px;
    padding-top: 150px;
}

/* Copy CA Button Style */
.copy-button {
    --stone-50: #fafaf9;
    --stone-800: #292524;
    --yellow-400: #facc15;
    font-family: "Rubik", sans-serif;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    line-height: 1;
    font-size: 1.25rem;
    border-radius: 1rem;
    outline: 2px solid transparent;
    outline-offset: 6px;
    color: var(--stone-50);
}
.copy-button:active { outline-color: var(--yellow-400); }
.copy-button:focus-visible { outline-color: var(--yellow-400); outline-style: dashed; }
.copy-button::before { content: ""; position: absolute; z-index: 0; height: 200%; max-height: 100px; aspect-ratio: 1; margin: auto; background: white; clip-path: polygon(100% 50%, 91.48% 56.57%, 97.55% 65.45%, 87.42% 69.07%, 90.45% 79.39%, 79.7% 79.7%, 79.39% 90.45%, 69.07% 87.42%, 65.45% 97.55%, 56.57% 91.48%, 50% 100%, 43.43% 91.48%, 34.55% 97.55%, 30.93% 87.42%, 20.61% 90.45%, 20.3% 79.7%, 9.55% 79.39%, 12.58% 69.07%, 2.45% 65.45%, 8.52% 56.57%, 0% 50%, 8.52% 43.43%, 2.45% 34.55%, 12.58% 30.93%, 9.55% 20.61%, 20.3% 20.3%, 20.61% 9.55%, 30.93% 12.58%, 34.55% 2.45%, 43.43% 8.52%, 50% 0%, 56.57% 8.52%, 65.45% 2.45%, 69.07% 12.58%, 79.39% 9.55%, 79.7% 20.3%, 90.45% 20.61%, 87.42% 30.93%, 97.55% 34.55%, 91.48% 43.43%); animation: star-rotate 4s linear infinite; opacity: 0.5; transition: opacity 250ms ease; }
.copy-button:hover::before { opacity: 1; }
.copy-button.is-copied i { display: none; }
.copy-button > div { padding: 2px; border-radius: 1rem; background-color: var(--yellow-400); transform: translate(-4px, -4px); transition: all 150ms ease; box-shadow: 0.5px 0.5px 0 0 var(--yellow-400), 1px 1px 0 0 var(--yellow-400), 1.5px 1.5px 0 0 var(--yellow-400), 2px 2px 0 0 var(--yellow-400), 2.5px 2.5px 0 0 var(--yellow-400), 3px 3px 0 0 var(--yellow-400), 0 0 0 2px var(--stone-800), 0.5px 0.5px 0 2px var(--stone-800), 1px 1px 0 2px var(--stone-800), 1.5px 1.5px 0 2px var(--stone-800), 2px 2px 0 2px var(--stone-800), 2.5px 2.5px 0 2px var(--stone-800), 3px 3px 0 2px var(--stone-800), 3.5px 3.5px 0 2px var(--stone-800), 4px 4px 0 2px var(--stone-800), 0 0 0 4px var(--stone-50), 0.5px 0.5px 0 4px var(--stone-50), 1px 1px 0 4px var(--stone-50), 1.5px 1.5px 0 4px var(--stone-50), 2px 2px 0 4px var(--stone-50), 2.5px 2.5px 0 4px var(--stone-50), 3px 3px 0 4px var(--stone-50), 3.5px 3.5px 0 4px var(--stone-50), 4px 4px 0 4px var(--stone-50); }
.copy-button:hover > div { transform: translate(0, 0); box-shadow: 0 0 0 2px var(--stone-800), 0 0 0 4px var(--stone-50); }
.copy-button > div > div { position: relative; pointer-events: none; border-radius: calc(1rem - 2px); background-color: var(--stone-800); }
.copy-button > div > div::before { content: ""; position: absolute; inset: 0; border-radius: 1rem; opacity: 0.1; background-image: radial-gradient(rgb(255 255 255 / 80%) 20%, transparent 20%), radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%); background-position: 0 0, 4px 4px; background-size: 8px 8px; mix-blend-mode: hard-light; box-shadow: inset 0 0 0 1px var(--stone-800); animation: dots 0.4s infinite linear; transition: opacity 150ms ease; }
.copy-button > div > div > div { position: relative; display: flex; align-items: center; padding: 0.75rem 4rem; gap: 0.75rem; filter: drop-shadow(0 -1px 0 var(--stone-800)); transition: all 150ms ease; }
.copy-button > div > div > div:active { transform: translateY(2px); }

/* Animations */
@keyframes star-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dots { 0% { background-position: 0 0, 4px 4px; } 100% { background-position: 8px 0, 12px 4px; } }

/* ================================== */
/* === MOBILE RESPONSIVE STYLES === */
/* ================================== */
@media (max-width: 768px) {
    .header-container { padding: 15px 20px; }
    .logo-container img { height: 50px; }
    .social-links { display: none; }
    .mobile-menu-button { display: block; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 10px; z-index: 15; }
    
    .main-content-container {
        align-items: flex-start;
    }

    .copy-button { font-size: 1.1rem; }
    .copy-button > div > div > div { padding: 0.7rem 2.5rem; gap: 0.5rem; }
    .copy-button::before { max-height: 80px; }
    
    /* Mobile Menu Styles */
    .mobile-menu-backdrop { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 11; }
    .mobile-menu-backdrop.active { opacity: 1; visibility: visible; }
    .mobile-menu { display: block; position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: rgba(20, 20, 20, 0.9); backdrop-filter: blur(10px); transition: right 0.3s ease; z-index: 12; padding: 80px 30px 30px; }
    .mobile-menu.active { right: 0; }
    .mobile-menu-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 10px; }
    .mobile-menu-items { display: flex; flex-direction: column; gap: 20px; }
    .mobile-menu-item { display: flex; align-items: center; gap: 15px; color: white; text-decoration: none; font-size: 1.1rem; font-weight: bold; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: color 0.3s ease; }
    .mobile-menu-item:hover { color: #facc15; }
    .mobile-menu-item i { font-size: 1.3rem; width: 25px; color: #facc15; }
    .mobile-menu-item img { width: 25px; height: 25px; }
}

@media (max-width: 480px) {
    .header-container { padding: 12px 15px; }
    .logo-container img { height: 45px; }
    .mobile-menu-button { right: 15px; }
    .copy-button { font-size: 1rem; }
    .copy-button > div > div > div { padding: 0.6rem 2rem; }
}