:root {
    --bg: #030712;
    --card: #111827;
    --blue: #00C2FF;
    --cyan: #67E8F9;
    --violet: #7C3AED;
    --gold: #D4AF37;
    --text: #F9FAFB;
    --muted: #9CA3AF;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
}

body {
    position: relative;
}

.space-bg {
    position: fixed;
    inset: 0;
    z-index: -10;
    background:
        radial-gradient(circle at 20% 15%, rgba(0,194,255,.20), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(124,58,237,.22), transparent 32%),
        radial-gradient(circle at 50% 90%, rgba(212,175,55,.10), transparent 30%),
        linear-gradient(180deg, #020617 0%, #030712 45%, #000 100%);
}

.stars {
    position: fixed;
    inset: 0;
    z-index: -9;
    opacity: .18;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1px),
        radial-gradient(circle, rgba(103,232,249,.5) 1px, transparent 1px);
    background-size: 120px 120px, 210px 210px;
    animation: starsMove 40s linear infinite;
}

@keyframes starsMove {
    from { transform: translateY(0); }
    to { transform: translateY(-200px); }
}

.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    z-index: -8;
}

.orb-blue {
    width: 360px;
    height: 360px;
    background: var(--blue);
    top: 8%;
    left: -120px;
}

.orb-violet {
    width: 420px;
    height: 420px;
    background: var(--violet);
    right: -160px;
    top: 28%;
}

.orb-gold {
    width: 260px;
    height: 260px;
    background: var(--gold);
    left: 40%;
    bottom: 4%;
    opacity: .12;
}

.scene {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    transform: scale(1.04) translateY(28px);
    filter: blur(18px);
    pointer-events: none;
    transition:
        opacity 1.1s ease,
        transform 1.1s ease,
        filter 1.1s ease;
}

.scene.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    pointer-events: auto;
}

.music-btn {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 50;
    border: 1px solid rgba(103,232,249,.35);
    background: rgba(17,24,39,.65);
    color: white;
    border-radius: 999px;
    padding: 12px 18px;
    backdrop-filter: blur(22px);
    box-shadow: 0 0 30px rgba(103,232,249,.18);
    cursor: pointer;
}

.scene-dots {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.28);
    cursor: pointer;
}

.dot.active {
    background: var(--cyan);
    box-shadow: 0 0 18px var(--cyan);
}

.hero-content,
.content-wrap {
    width: min(1050px, 94vw);
    text-align: center;
}

.badge,
.protocol {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--cyan);
    background: rgba(0,194,255,.08);
    border: 1px solid rgba(103,232,249,.28);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    box-shadow: 0 0 34px rgba(103,232,249,.14);
}

.hero-title {
    margin: 24px 0 12px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(58px, 13vw, 150px);
    line-height: .9;
}

.hero-title span,
.heart {
    display: inline-block;
    animation: heartBeat 1.8s ease-in-out infinite;
}

@keyframes heartBeat {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.16); }
}

.hero-text {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(34px, 7vw, 72px);
    line-height: 1.08;
    color: #E5E7EB;
}

.hero-text strong,
.quote-card h2 {
    background: linear-gradient(135deg,var(--cyan),var(--gold),var(--violet));
    -webkit-background-clip: text;
    color: transparent;
}

.scroll-hint {
    margin-top: 34px;
    color: var(--muted);
}

.section-title {
    margin-bottom: 28px;
}

.section-title span {
    color: var(--cyan);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-title h2 {
    margin: 10px 0 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(40px, 7vw, 76px);
}

.premium-photo {
    margin: 0 auto;
    width: min(620px, 92vw);
    max-height: 68dvh;
    padding: 10px;
    border-radius: 36px;
    background: linear-gradient(135deg, var(--blue), var(--violet), var(--gold));
    box-shadow:
        0 0 55px rgba(103,232,249,.25),
        0 0 130px rgba(124,58,237,.16);
}

.premium-photo img {
    width: 100%;
    max-height: calc(68dvh - 20px);
    object-fit: contain;
    display: block;
    border-radius: 28px;
    background: #020617;
}

.quote-card {
    width: min(920px, 94vw);
    padding: clamp(34px, 7vw, 80px);
    border-radius: 42px;
    text-align: center;
    background: rgba(3,7,18,.86);
    border: 1px solid rgba(255,255,255,.11);
    backdrop-filter: blur(28px);
    box-shadow:
        0 0 55px rgba(103,232,249,.18),
        0 0 130px rgba(124,58,237,.10);
}

.quote-card p {
    margin: 0 0 8px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(44px, 9vw, 90px);
    color: white;
}

.quote-card h2 {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 10vw, 104px);
    line-height: .95;
}

.gallery-premium {
    width: min(980px, 94vw);
    max-height: 68dvh;
    display: grid;
    grid-template-columns: 1.45fr .9fr;
    gap: 18px;
}

.gallery-main,
.gallery-side img {
    border-radius: 32px;
    padding: 8px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 0 44px rgba(103,232,249,.12);
}

.gallery-main img {
    width: 100%;
    height: 100%;
    max-height: 68dvh;
    object-fit: cover;
    border-radius: 24px;
    transition: opacity .45s ease;
}

.gallery-side {
    display: grid;
    gap: 18px;
}

.gallery-side img {
    width: 100%;
    height: calc((68dvh - 18px)/2);
    object-fit: cover;
}

.invite-card {
    width: min(1080px, 94vw);
    padding: clamp(22px, 4vw, 42px);
    border-radius: 42px;
    background: rgba(17,24,39,.78);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(30px);
    box-shadow:
        0 0 60px rgba(103,232,249,.19),
        0 0 150px rgba(124,58,237,.16);
    overflow: hidden;
}

.final-layout {
    position: relative;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 30px;
    align-items: center;
}

.ring-photo {
    margin: 0 auto 16px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg,var(--gold),var(--cyan),var(--violet));
    box-shadow: 0 0 42px rgba(212,175,55,.25);
}

.ring-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.invite-card h2 {
    margin: 5px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(34px,5vw,56px);
    text-align: center;
}

.heart {
    font-size: 26px;
    text-align: center;
}

.invite-text {
    color: #E5E7EB;
    line-height: 1.55;
    font-size: 15px;
    text-align: center;
    margin: 0 0 16px;
}

.event-grid {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.event-grid div {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
}

.event-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.event-grid strong {
    font-size: 15px;
    line-height: 1.35;
}

.countdown {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 9px;
    margin: 16px 0;
}

.countdown div {
    padding: 10px 5px;
    border-radius: 16px;
    background: rgba(0,194,255,.08);
    border: 1px solid rgba(103,232,249,.20);
    text-align: center;
}

.countdown strong {
    display: block;
    font-size: 19px;
}

.countdown span {
    font-size: 10px;
    color: var(--muted);
}

.map-btn {
    display: inline-block;
    text-decoration: none;
    color: white;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 700;
    background: linear-gradient(135deg,var(--blue),var(--violet));
    box-shadow: 0 0 34px rgba(103,232,249,.22);
}

/* HaderTech watermark */
.hadertech-watermark {
    position: absolute;
    right: 24px;
    bottom: 16px;
    z-index: 30;
    opacity: .78;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
}

.hadertech-watermark a {
    text-decoration: none;
    background: linear-gradient(90deg, #67E8F9, #D4AF37, #7C3AED);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 8px rgba(103,232,249,.22),
        0 0 24px rgba(103,232,249,.14);
}

@media (max-width: 860px) {
    .final-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .invite-card {
        width: min(620px, 94vw);
        padding: 22px 18px;
    }

    .ring-photo {
        width: 82px;
        height: 82px;
        margin-bottom: 10px;
    }

    .invite-card h2 {
        font-size: clamp(30px, 9vw, 44px);
    }

    .protocol {
        padding: 8px 13px;
        font-size: 11px;
        margin-top: 8px;
    }

    .invite-text {
        font-size: 13px;
        line-height: 1.45;
        margin-top: 8px;
    }

    .event-grid strong {
        font-size: 13px;
    }

    .countdown {
        gap: 6px;
        margin: 12px 0;
    }

    .countdown strong {
        font-size: 16px;
    }

    .countdown span {
        font-size: 9px;
    }

    .hadertech-watermark {
        right: 50%;
        transform: translateX(50%);
        bottom: 8px;
        font-size: 10px;
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    .scene {
        padding: 22px 16px;
    }

    .scene-dots {
        right: 10px;
    }

    .gallery-premium {
        grid-template-columns: 1fr;
        max-height: 74dvh;
    }

    .gallery-side {
        display: none;
    }

    .gallery-main img {
        object-fit: contain;
        background: #020617;
    }

    .premium-photo {
        max-height: 62dvh;
    }

    .premium-photo img {
        max-height: calc(62dvh - 20px);
    }

    .music-btn {
        font-size: 13px;
        padding: 10px 14px;
    }
}