@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root { --black: #0D0D0D; --pink: #FF0090; --white: #FAFAFA; --gray: #1E1E1E; }

html, body { min-height: 100vh; background: var(--black); font-family: 'Montserrat', sans-serif; color: var(--white); display: flex; align-items: center; justify-content: center; overflow-x: hidden; }

body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; }

.container { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 48px 24px 64px; display: flex; flex-direction: column; align-items: center; }

.logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 12px; animation: fadeDown 0.6s ease both; }
.logo-monogram { font-size: 64px; font-weight: 900; letter-spacing: -2px; line-height: 1; }
.logo-monogram span.h { color: var(--white); }
.logo-monogram span.m { color: var(--pink); }
.logo-tagline { font-size: 11px; font-weight: 300; letter-spacing: 8px; color: var(--white); opacity: 0.6; text-transform: lowercase; }

.divider { width: 40px; height: 2px; background: var(--pink); margin: 24px 0 8px; animation: fadeUp 0.6s 0.2s ease both; }

.headline { font-size: 13px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--white); opacity: 0.5; margin-bottom: 40px; animation: fadeUp 0.6s 0.3s ease both; }

.links { width: 100%; display: flex; flex-direction: column; gap: 14px; }

.btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 24px; text-decoration: none; border-radius: 4px; transition: all 0.25s ease; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; inset: 0; background: var(--pink); transform: translateX(-100%); transition: transform 0.3s ease; z-index: 0; }
.btn:hover::before { transform: translateX(0); }
.btn-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.btn-label { font-size: 13px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; }
.btn-sub { font-size: 11px; font-weight: 300; letter-spacing: 1px; opacity: 0.6; }
.btn-arrow { position: relative; z-index: 1; font-size: 18px; opacity: 0.4; transition: opacity 0.25s, transform 0.25s; }
.btn:hover .btn-arrow { opacity: 1; transform: translateX(4px); }

.btn-primary { background: var(--pink); color: var(--white); }
.btn-primary::before { background: #cc0073; }
.btn-primary .btn-arrow { opacity: 0.7; }
.btn-secondary { background: transparent; border: 1px solid rgba(255,0,144,0.3); color: var(--white); }
.btn-disabled { background: var(--gray); color: var(--white); cursor: default; pointer-events: none; opacity: 0.7; }
.btn-disabled::before { display: none; }

.badge-soon { position: relative; z-index: 1; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pink); background: rgba(255,0,144,0.12); padding: 3px 8px; border-radius: 2px; border: 1px solid rgba(255,0,144,0.3); }

.btn:nth-child(1) { animation: fadeUp 0.5s 0.4s ease both; }
.btn:nth-child(2) { animation: fadeUp 0.5s 0.5s ease both; }
.btn:nth-child(3) { animation: fadeUp 0.5s 0.6s ease both; }
.btn:nth-child(4) { animation: fadeUp 0.5s 0.7s ease both; }

.footer { margin-top: 48px; font-size: 10px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; opacity: 0.2; animation: fadeUp 0.5s 0.9s ease both; }

@keyframes fadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(16px);  } to { opacity: 1; transform: translateY(0); } }