:root {
     --bg: #0b0b0f;
     --muted: #b5b6bd;
     --text: #f1f1f3;
     --accent: #f4c430;
     --card: #121219;
     --border: #23232e;
 }

 * {
     box-sizing: border-box;
 }

 html,
 body {
     margin: 0;
     min-height: 100%;
 }

 body {
     background: radial-gradient(1000px 700px at 90% -10%,
             rgba(244, 196, 48, 0.08),
             transparent 40%),
         radial-gradient(900px 650px at -10% 110%,
             rgba(244, 196, 48, 0.06),
             transparent 40%),
         var(--bg);
     color: var(--text);
     font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto,
         Helvetica, Arial, sans-serif;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 .wrap {
     min-height: 100%;
     display: grid;
     grid-template-rows: auto 1fr auto;
 }

 header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px clamp(16px, 4vw, 48px);
     border-bottom: 1px solid var(--border);
     backdrop-filter: blur(4px);
 }

 .brand {
     display: flex;
     gap: 12px;
     align-items: center;
     font-weight: 800;
     letter-spacing: 0.4px;
     text-transform: uppercase;
 }

 .brand img {
     width: 36px;
     height: 36px;
     display: block;
     filter: drop-shadow(0 2px 8px rgba(244, 196, 48, 0.25));
 }

 .badge {
     padding: 6px 10px;
     font-size: 12px;
     border: 1px solid var(--border);
     border-radius: 999px;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: 0.06em;
 }

 main {
     display: grid;
     place-items: center;
     padding: clamp(24px, 6vw, 72px);
 }

 .hero {
     max-width: 980px;
     width: 100%;
     text-align: center;
 }

 .logo {
     width: 104px;
     height: 104px;
     margin: 0 auto 18px;
     background: linear-gradient(180deg,
             rgba(244, 196, 48, 0.2),
             rgba(244, 196, 48, 0.06));
     border: 1px solid var(--border);
     border-radius: 20px;
     display: grid;
     place-items: center;
     padding: 14px;
 }

 .logo img {
     width: 76px;
     height: 76px;
 }

 h1 {
     font-size: clamp(34px, 6vw, 56px);
     line-height: 1.05;
     margin: 10px 0 8px;
     letter-spacing: -0.02em;
 }

 .card {
     margin: 34px auto 0;
     background: linear-gradient(180deg,
             rgba(18, 18, 25, 0.7),
             rgba(18, 18, 25, 0.5));
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: clamp(18px, 3vw, 28px);
     text-align: left;
 }

 h2 {
     font-size: clamp(18px, 3vw, 22px);
     margin: 0 0 8px;
     color: var(--accent);
     letter-spacing: 0.3px;
 }

 p {
     margin: 0 0 14px;
     color: #e6e6ea;
 }

 .grid {
     display: grid;
     gap: 16px;
     grid-template-columns: repeat(12, 1fr);
 }

 .grid>.col {
     grid-column: span 12;
 }

 @media (min-width: 900px) {
     .grid>.col-left {
         grid-column: span 6;
     }

     .grid>.col-right {
         grid-column: span 6;
     }
 }

 .cta {
     margin-top: 26px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
     font-weight: 600;
     border-radius: 12px;
     border: 1px dashed rgba(244, 196, 48, 0.6);
     color: var(--accent);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     background: rgba(244, 196, 48, 0.06);
 }

 footer {
     padding: 24px clamp(16px, 4vw, 48px);
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-top: 1px solid var(--border);
     color: var(--muted);
     font-size: 13px;
 }

 a,
 a:visited {
     color: var(--accent);
     text-decoration: none;
 }

 /* Accessibility */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation: none !important;
         transition: none !important;
     }
 }

 /* .countdown-container {
     background-color: rgba(240, 127, 255, 0.42);
 } */

 .countdown-container h3 {
     font-size: 3rem;
     color: var(--border);
 }

 #countdown {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 2rem;
 }

 .time-section {
     text-align: center;
     width: min(50vw, 120px);
 }

 .time-section span {
     display: block;
     font-size: 4rem;
     font-weight: bold;
     color: var(--muted);
 }

 .time-section p {
     margin-top: 0.5rem;
     color: var(--accent);
     font-size: 1rem;
 }

 .social-links>ul {
     display: flex;
     align-items: center;
     list-style: none;
     margin: 2rem 0;
 }

 .social-links li {
     margin-right: 16px;
     padding: 6px;
     border: 1px solid transparent;
 }

 .social-links li:hover {
     transform: translateY(-5px);
     transition: transform 0.3s ease;
 }

 .social-links img {
     width: 32px;
     height: 32px;
     filter: grayscale(0.9);
 }

 .video-container {
     width: min(100%, 1000px);
     margin: 10rem auto;
     aspect-ratio: 16 / 9;
     background-color: #000;
     border: 2px solid #222;
     border-radius: 10px;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }

 .spinner {
     border: 4px solid rgba(255, 255, 255, 0.2);
     border-top: 4px solid var(--accent);
     border-radius: 50%;
     width: 50px;
     height: 50px;
     animation: spin 1s linear infinite;
     margin-bottom: 20px;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .message {
     font-size: 1.2rem;
     text-align: center;
     color: #ccc;
 }

 .go-live {
     position: absolute;
     bottom: 15px;
     background: #ff0000;
     color: #fff;
     padding: 8px 16px;
     border-radius: 4px;
     font-weight: bold;
     cursor: pointer;
     display: none;
 }

 .socials-container {
     width: min(100%, 600px);
 }