:root {
    --brand-pink: #b54e7a;
    --dark-pink: #8a3a5d;
    --black: #000000;
    --text-muted: rgba(255, 255, 255, 0.6);
}

/* 1. VIEWPORT ENGINE (No Scroll) */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--black);
    color: white;
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 768px) {
    body { min-height: 100vh; overflow-y: auto; }
}

/* BACKGROUND SYSTEM */
.luxury-bg-system { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; }
.merged-bg { 
    position: absolute; width: 100%; height: 100%; 
    background: url('assets/bg-merged.jpg') center/cover no-repeat;
}
.vignette-overlay { 
    position: absolute; width: 100%; height: 100%; 
    background: radial-gradient(circle at 50% 45%, transparent 0%, #000 95%);
}
#glow-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* LAYOUT WRAPPER */
.app-container { 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    position: relative; 
    z-index: 1; 
}

@media (max-width: 768px) {
    .app-container { min-height: 100vh; }
}

/* HEADER */
.top-nav { display: flex; justify-content: space-between; align-items: center; padding: 2.5vh 55px; }

@media (max-width: 768px) {
    .top-nav { padding: 2.5vh 20px; gap: 12px; }
    .gold-line { display: none; }
}
.social-links { display: flex; gap: 12px; }
.circle-icon { 
    width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: white; transition: 0.3s;
}
.circle-icon svg { width: 18px; }
.circle-icon:hover { border-color: var(--brand-pink); background: rgba(181, 78, 122, 0.1); }
.header-right { display: flex; align-items: center; gap: 15px; }
.gold-line { width: 45px; height: 1px; background: var(--brand-pink); }
.stay-connected { font-size: 11px; letter-spacing: 3.5px; font-weight: 300; }

/* MAIN BODY - Vertical Compression */
.main-body { 
    flex: 1; 
    min-height: 0;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; 
    text-align: center;
    padding: 4.5vh 0 5vh;
}

@media (max-width: 768px) {
    .main-body { 
        padding: 1.5vh 20px; 
        min-height: auto;
    }
}
.main-logo { max-height: 10vh; margin-bottom: 0.5vh; }

@media (max-width: 768px) {
    .main-logo { margin-bottom: 2vh; }
}

/* 4. COMING SOON - Typography & Divider */
.coming-soon {
    font-family: 'Cinzel', serif; font-size: 58px; letter-spacing: 10px;
    font-weight: 400; color: #fdfdfd; margin-bottom: 2vh;
}

.coming-soon .soon-highlight {
    color: var(--brand-pink);
}

@media (max-width: 768px) {
    .coming-soon { margin-bottom: 1.5vh; }
}
.luxury-divider { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 3vh; }
.l-line { width: 90px; height: 1px; background: linear-gradient(to right, transparent, var(--brand-pink), transparent); }
.l-ornament { width: 8px; height: 8px; border: 1px solid var(--brand-pink); transform: rotate(45deg); position: relative; }
.l-ornament::after { content: ''; position: absolute; left: 2px; top: 2px; width: 2px; height: 2px; background: var(--brand-pink); }

.arriving-title { font-size: 17px; letter-spacing: 7px; font-weight: 300; margin-bottom: 1.5vh; }

@media (max-width: 768px) {
    .arriving-title { margin-bottom: 1.5vh; }
}
.desc-text { font-size: 16px; color: var(--text-muted); line-height: 1.8; font-weight: 200; }

.launching-text { font-size: 13px; letter-spacing: 4px; font-weight: 300; margin: 1.5vh 0 0.5vh; }
.launch-date { font-size: 18px; letter-spacing: 2px; font-weight: 400; color: var(--brand-pink); margin-bottom: 1.8vh; }

@media (max-width: 768px) {
    .launching-text { font-size: 11px; letter-spacing: 2px; margin: 1.5vh 0 0.5vh; }
    .launch-date { font-size: 14px; letter-spacing: 1.5px; margin-bottom: 1.5vh; }
}

@media (max-width: 480px) {
    .launching-text { font-size: 10px; letter-spacing: 1.5px; margin: 1vh 0 0.3vh; }
    .launch-date { font-size: 12px; letter-spacing: 1px; margin-bottom: 1vh; }
}

/* TIMER */
.timer-grid { display: flex; align-items: center; gap: 1vw; margin: 2vh 0; }
.u {
    width: 95px; height: 95px; border: 1px solid rgba(181, 78, 122, 0.35);
    border-radius: 12px; background: rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; justify-content: center;
}
.u span { font-family: 'Cinzel', serif; font-size: 42px; color: var(--brand-pink); line-height: 1; margin-bottom: 4px; }
.u label { font-size: 10px; letter-spacing: 2px; }
.sep { font-size: 26px; color: var(--brand-pink); margin-top: -26px; }
.subscription-form { width: 100%; max-width: 630px; margin: 2vh 0; }

@media (max-width: 768px) {
    .subscription-form { max-width: 95%; margin: 2.5vh auto; }
}

@media (max-width: 480px) {
    .subscription-form { max-width: 100%; margin: 1vh auto; padding: 0 15px; }
}
.cta-header { font-size: 14px; letter-spacing: 4px; display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 1.5vh; text-transform: uppercase; }
.launch-copy { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.88); max-width: 560px; margin: 0 auto 2.2vh; }
.trust-section { width: 100%; max-width: 720px; margin: 2.5vh auto 3vh; }
.trust-title { font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 1.2vh; }
.trust-stats { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 140px; }
.trust-item strong { font-size: 26px; color: var(--brand-pink); letter-spacing: 1px; }
.trust-item span { font-size: 11px; color: rgba(255,255,255,0.75); letter-spacing: 1.4px; text-transform: uppercase; }

.why-section { width: 100%; max-width: 720px; margin: 3vh auto 3.5vh; padding: 2.2vh 2.5vw; background: rgba(255,255,255,0.04); border: 1px solid rgba(181,78,122,0.15); border-radius: 20px; backdrop-filter: blur(12px); }
.why-title { font-size: 15px; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,0.95); margin-bottom: 1vh; position: relative; display: inline-block; padding: 0 12px; }
.why-title::before, .why-title::after { content: ''; position: absolute; top: 50%; width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-pink), transparent); transform: translateY(-50%); }
.why-title::before { left: -88px; }
.why-title::after { right: -88px; }
.why-copy { font-size: 15px; line-height: 1.9; color: rgba(255,255,255,0.9); max-width: 620px; margin: 0 auto; padding: 0 8px; }

.flourish { width: 45px; height: 1px; background: var(--brand-pink); position: relative; }
.flourish::after { content: '>'; position: absolute; right: -5px; top: -7.5px; font-size: 11px; color: var(--brand-pink); }
.flourish.rev { transform: rotate(180deg); }

.pill-form { display: flex; height: 58px; margin-bottom: 1.8vh; max-width: 620px; width: 100%; overflow: hidden; }
.pill-form input {
    flex: 1; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(181, 78, 122, 0.45);
    border-radius: 35px 0 0 35px; padding: 0 28px; color: white; outline: none; font-size: 14px;
}
.pill-form button {
    background: var(--dark-pink); border: none; padding: 0 36px;
    border-radius: 0 35px 35px 0; color: white; font-weight: 600; cursor: pointer; transition: 0.3s;
}
.pill-form button:hover { background: var(--brand-pink); }
.privacy-note { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 1.2vh; }
.shield-svg { width: 14px; opacity: 0.6; }

/* 2 & 5. FOOTER DIVIDER & ICONS */
.footer-lock { 
    position: relative;
    padding: 0 0 2vh;
    margin-top: 2vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
    .footer-lock { padding: 3.5vh 0 2.5vh; margin-top: 2vh; }
}
.footer-divider-full { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-pink), transparent); margin-bottom: 3vh; }
.feature-bar { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 6vw; margin-bottom: 3vh; gap: 3vh; }
.feature { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px; padding-left: 3vh; position: relative; text-align: center; }
.feature:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background: linear-gradient(to bottom, transparent, var(--brand-pink), transparent); }
.feature svg { width: 40px; color: var(--brand-pink); }
.f-info strong { display: block; font-size: 14px; letter-spacing: 1.2px; margin-bottom: 3px; color: #fff; }
.f-info span { font-size: 11px; color: rgba(255,255,255,0.75); }
.copyright-row { font-size: 12px; color: rgba(255,255,255,0.75); text-align: center; padding-top: 1.5vh; }

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .coming-soon { font-size: 52px; letter-spacing: 10px; }
    .feature-bar { grid-template-columns: 1fr 1fr; gap: 4vh; }
}

@media (max-width: 768px) {
    /* Header Adjustments */
    .top-nav { padding: 3vh 20px; flex-wrap: wrap; gap: 15px; }
    .main-body { padding: 3.5vh 20px; }
    .social-links { width: 100%; justify-content: center; }
    .header-right { width: 100%; justify-content: center; }
    
    /* Typography */
    .coming-soon { font-size: 36px; letter-spacing: 8px; margin-bottom: 2vh; }
    .arriving-title { font-size: 14px; letter-spacing: 5px; margin-bottom: 1.8vh; }
    .desc-text { font-size: 13px; line-height: 1.6; margin-bottom: 2vh; }
    
    /* Logo */
    .main-logo { max-height: 10vh; margin-bottom: 2vh; }
    
    /* Divider */
    .luxury-divider { gap: 15px; margin-bottom: 2vh; }
    .l-line { width: 60px; }
    
    /* Timer Grid */
    .timer-grid { gap: 0.8vw; margin: 4vh 0; flex-wrap: wrap; justify-content: center; }
    .u { width: 85px; height: 85px; }
    .u span { font-size: 32px; margin-bottom: 3px; }
    .u label { font-size: 8px; letter-spacing: 1.5px; }
    .sep { font-size: 20px; margin-top: -25px; }
    
    /* Form */
    .subscription-form { max-width: 95%; padding: 0 10px; margin: 3.5vh auto; }
    .cta-header { font-size: 11px; letter-spacing: 2px; gap: 10px; margin-bottom: 2vh; }
    .launch-copy { font-size: 13px; max-width: 100%; margin-bottom: 2.5vh; }
    .trust-section { max-width: 100%; margin: 3vh auto 3.5vh; }
    .trust-stats { gap: 16px; }
    .trust-item strong { font-size: 22px; }
    .trust-item span { font-size: 10px; }
    .why-section { margin: 3vh auto 3.5vh; padding: 22px 16px; }
    .why-title { font-size: 13px; }
    .why-title::before, .why-title::after { display: none; }
    .why-copy { font-size: 14px; line-height: 1.75; max-width: 520px; }
    .flourish { width: 25px; }
    .pill-form { height: 50px; flex-direction: row; }
    .pill-form input { padding: 0 20px; font-size: 14px; }
    .pill-form button { padding: 0 25px; font-size: 12px; }
    .privacy-note { font-size: 10px; margin-top: 1vh; }
    
    /* Footer */
    .footer-lock { padding: 3vh 0; margin-top: 2vh; }
    .footer-divider-full { margin-bottom: 2vh; }
    .feature-bar { grid-template-columns: 1fr 1fr; gap: 2.5vh; padding: 0 20px; margin-bottom: 2vh; }
    .feature { flex-direction: row; align-items: center; justify-content: center; text-align: center; padding-left: 2vh; }
    .feature:not(:first-child)::before { display: none; }
    .feature svg { width: 32px; flex-shrink: 0; }
    .f-info strong { font-size: 10px; }
    .f-info span { font-size: 13px; }
    .copyright-row { font-size: 10px; padding-top: 1.5vh; }
}

@media (max-width: 480px) {
    /* Extreme Mobile */
    body { font-size: 14px; }
    .top-nav { padding: 2vh 15px; }
    .main-body { padding: 3.5vh 15px; }
    .social-links { gap: 8px; }
    .circle-icon { width: 30px; height: 30px; }
    .circle-icon svg { width: 15px; }
    .stay-connected { font-size: 9px; letter-spacing: 2px; }
    .gold-line { display: none; }
    
    /* Main Content */
    .main-logo { max-height: 8vh; margin-bottom: 1.8vh; }
    .coming-soon { font-size: 28px; letter-spacing: 5px; margin-bottom: 1.8vh; }
    .arriving-title { font-size: 12px; letter-spacing: 3px; margin-bottom: 1.5vh; }
    .desc-text { font-size: 12px; line-height: 1.5; margin-bottom: 2vh; }
    
    /* Divider */
    .luxury-divider { gap: 10px; margin-bottom: 1.5vh; }
    .l-line { width: 40px; }
    .l-ornament { width: 6px; height: 6px; }
    
    /* Timer */
    .timer-grid { gap: 0.5vw; margin: 3vh auto; }
    .u { width: 65px; height: 65px; border-radius: 8px; }
    .u span { font-size: 24px; margin-bottom: 2px; }
    .u label { font-size: 7px; letter-spacing: 1px; }
    .sep { font-size: 16px; margin-top: -20px; }
    
    /* Form */
    .subscription-form { max-width: 100%; padding: 0 15px; margin: 3.5vh auto; }
    .cta-header { font-size: 10px; letter-spacing: 1.5px; gap: 8px; margin-bottom: 2.2vh; }
    .launch-copy { font-size: 12px; margin-bottom: 2.2vh; }
    .trust-section { margin: 3.5vh auto 4vh; }
    .why-section { margin: 3.5vh auto 4vh; padding: 18px 14px; }
    .why-title { font-size: 12px; letter-spacing: 2.5px; }
    .why-copy { font-size: 12px; line-height: 1.7; max-width: 440px; }
    .trust-item strong { font-size: 20px; }
    .trust-item span { font-size: 9px; }
    .flourish { width: 20px; }
    .flourish::after { font-size: 9px; }
    .pill-form { display: flex; flex-direction: column; gap: 10px; height: auto; }
    .pill-form input {
        width: 100%; border-radius: 20px;
        padding: 12px 15px; margin-bottom: 0; border: 1px solid rgba(181, 78, 122, 0.45);
    }
    .pill-form button {
        width: 100%; border-radius: 20px;
        padding: 14px 12px; font-size: 11px; border: 1px solid rgba(181, 78, 122, 0.45);
    }
    .privacy-note { font-size: 9px; margin-top: 2vh; gap: 5px; }
    .shield-svg { width: 12px; }
    
    /* Footer */
    .footer-lock { padding: 0 0 2.5vh; margin-top: 3vh; }
    .footer-divider-full { margin-bottom: 2vh; }
    .feature-bar { grid-template-columns: 1fr 1fr; gap: 2vh; padding: 0 15px; margin-bottom: 2vh; }
    .feature { flex-direction: row; align-items: center; justify-content: center; text-align: center; padding-left: 1.5vh; }
    .feature:not(:first-child)::before { display: none; }
    .feature svg { width: 26px; flex-shrink: 0; }
    .f-info strong { font-size: 9px; margin-bottom: 1px; }
    .f-info span { font-size: 8px; }
    .copyright-row { font-size: 9px; line-height: 1.4; padding-top: 1.5vh; }
    .footer-lock { padding-bottom: 1.5vh; }
}