/* --- Brand Variables --- */
:root {
    --brand-orange: #0a0a0a;
    --text-fill: #ffffff;
    --text-outline: #000000;
}

/* --- Base Setup --- */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--brand-orange);
    font-family: 'Handjet', sans-serif; /* Update this line */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Keeps the view locked on the single page */
}

/* --- Layout --- */
.hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.logo-wrapper {
    position: relative;
    width: 90vw; /* Responsive width */
    max-width: 450px; /* Caps the size on large desktop screens */
    aspect-ratio: 1 / 1; /* Keeps the container perfectly square */
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-logo {
    width: 70%; /* Adjust this to make the logo larger/smaller inside the ring */
    height: auto;
    z-index: 10;
}

/* --- Circular Typography & Animation --- */
.rotating-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    animation: rotate-slowly 25s linear infinite; /* Smooth, continuous rotation */
}

.rotating-text text {
    font-size: 8px; /* Sized specifically for the 100x100 SVG viewBox */
    font-weight: 700;
    fill: var(--text-fill);
    text-shadow: 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000, 
    0 0 1.5px #000;
    /* stroke: var(--text-outline); */
    stroke-width: 0.3px;
    letter-spacing: 0.5px;
    unicode-bidi: plaintext;
}

@keyframes rotate-slowly {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

/* --- Mobile Adjustments --- */
@media (max-width: 600px) {
    .logo-wrapper {
        max-width: 320px;
    }
}