*, *::before, *::after { box-sizing: border-box; }

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammT.ttf) format('truetype');
}

@keyframes move-stars {
    from {background-position-y: 0;}
    to   {background-position-y: -1000px;}
}

body {
    background: #000;
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}

.stars, .stars2, .stars3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

.stars {
    background: transparent url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><circle cx="100" cy="100" r="1.5" fill="white"/><circle cx="200" cy="500" r="1" fill="white"/><circle cx="400" cy="300" r="1.2" fill="white"/><circle cx="600" cy="700" r="1" fill="white"/><circle cx="800" cy="900" r="1.5" fill="white"/><circle cx="900" cy="200" r="0.8" fill="white"/></svg>') repeat;
    background-size: 1000px 1000px;
    animation: move-stars 70s linear infinite;
}

.stars2 {
    background: transparent url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><circle cx="150" cy="250" r="1.5" fill="white"/><circle cx="250" cy="650" r="1" fill="white"/><circle cx="450" cy="450" r="1.2" fill="white"/><circle cx="650" cy="850" r="1" fill="white"/></svg>') repeat;
    background-size: 1000px 1000px;
    animation: move-stars 120s linear infinite;
}

.stars3 {
    background: transparent url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><circle cx="50" cy="150" r="1.5" fill="white"/><circle cx="250" cy="50" r="1.2" fill="white"/></svg>') repeat;
    background-size: 500px 500px;
    animation: move-stars 180s linear infinite;
}

.container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    display: grid;
    place-items: center;
    z-index: 10;
}

h1 {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    font-family: 'Inter', sans-serif;
    font-size: clamp(4rem, 25vw, 20rem);
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    line-height: 1;
    z-index: 1;
    background: linear-gradient(90deg, #dedfe1 0%, #31363a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.glass-panel {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 550px;
    padding: 25px 30px;
    
    margin-top: clamp(100px, 22vw, 220px);
    transform: scale(1.0);
    transform-origin: center;
    transition: transform 0.2s ease-out, margin-top 0.2s ease-out;

    background: rgba(30, 30, 35, 0.4);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    text-align: center;
}

.panel-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    margin: 0 0 10px 0;
}

.panel-body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.6;
}

/* Responsive Scaling */
@media (max-width: 1024px) {
    .glass-panel {
        transform: scale(0.9);
    }
}

@media (max-width: 768px) {
    .glass-panel {
        transform: scale(0.8);
    }
}

@media (max-width: 480px) {
    .glass-panel {
        transform: scale(0.65);
    }
}