*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

:root{
    --b:#000;--w:#fff;--gold:#8b7355;--gold-l:#c4a882;
    --cream:#f5f0eb;--gray:#444;--gray-l:#999;
}

body{
    font-family:'Open Sans',sans-serif;
    color:var(--b);background:var(--w);
    font-size:17px;line-height:1.6;font-weight:300;
    overflow-x:hidden;
}

/* ===== MUSIC ===== */
.music-controls{position:fixed;top:20px;right:50px;z-index:9999}
.music-btn{
    width:50px;height:50px;
    background:rgba(0,0,0,0.7);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background 0.3s;
}
.music-btn:hover{background:rgba(0,0,0,0.9)}
.music-btn svg{width:18px;height:18px}

/* ===== SECTIONS ===== */
.section{
    padding:45px 20px;
    max-width:1000px;
    margin:0 auto;
}
.section-white{background:var(--w)}
.tc{text-align:center}



/* ===== ORNAMENT TOP ===== */
.ornament-svg-top{margin-bottom:20px;text-align:center}
.ornament-svg-top svg{width:300px;height:35px}

/* ===== HERO ===== */
.hero-layout{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:30px;
}
.hero-photo-left,.hero-photo-right{flex:0 0 280px}
.hero-photo-left{transform:rotate(-2deg)}
.hero-photo-right{transform:rotate(2deg)}

.photo-frame{
    border:1px solid var(--gold-l);
    padding:10px;
    background:var(--w);
    box-shadow:0 2px 15px rgba(0,0,0,0.05);
}
.frame-img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.carousel-img{width:100%;max-height:500px;object-fit:contain;display:block;margin:0 auto}
.venue-img{width:100%;display:block}
.final-img{width:100%;max-height:500px;object-fit:contain;display:block;margin:0 auto}

.hero-center{flex:1;max-width:500px;padding-top:15px;text-align:center}
.hero-flourish svg{width:180px;height:35px;margin-bottom:5px}

.hero-names{
    font-family:'Playfair Display',serif;
    font-size:2.5rem;font-weight:400;font-style:italic;
    line-height:1.3;margin-bottom:1.2rem;letter-spacing:0.02em;
}
.hero-names .amp{
    color:var(--gold);display:block;
    font-size:1.6rem;margin:0.1em 0;
}
.hero-text{
    font-size:0.95rem;line-height:1.7;color:var(--gray);
}

@media(max-width:768px){

    .hero-layout{
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:0.1px;
    }

    .hero-photo-left{
    transform:rotate(-2deg) !important;
    }

    .hero-photo-right{
    transform:rotate(2deg) !important;
    }


    .hero-photo-left,
    .hero-photo-right{
        flex:0 0 180px;
        width:180px;
    }


    .hero-center{
        flex:1;
        max-width:165px;
        padding-top:0;
    }

    .hero-names{
        font-size:1.6rem;
    }

    .hero-names .amp{
        font-size:1.2rem;
    }

    .hero-text{
        font-size:.9rem;
        line-height:1.6;
    }

    .hero-text-wrap{
        margin:10px auto 0;
        padding:0 15px;
    }

}


/* ===== DIVIDER ===== */
.divider{padding:10px 0;text-align:center}
.divider svg{width:100%;max-width:550px;height:30px}

/* ===== TILDE ===== */
.tilde{
    text-align:center;
    font-family:'Playfair Display',serif;
    font-size:2rem;color:var(--gray-l);
    padding:20px 0;
}

/* ===== SECTION TITLE ===== */
.s-title{
    font-family:'Playfair Display',serif;
    font-size:1.3rem;font-weight:400;font-style:italic;
    text-align:center;letter-spacing:0.1em;margin-bottom:2rem;
}

/* ===== COUNTDOWN ===== */
.countdown{
    display:flex;align-items:center;justify-content:center;gap:15px;
}
.cd{text-align:center;min-width:80px}
.cd-n{
    font-family:'Playfair Display',serif;
    font-size:3.2rem;font-weight:400;line-height:1;
}
.cd-l{
    font-size:0.75rem;letter-spacing:0.2em;
    text-transform:uppercase;color:var(--gray-l);margin-top:4px;
}
.cd-s{
    font-family:'Playfair Display',serif;
    font-size:2.2rem;color:var(--gold);margin-top:-18px;
}

@media(max-width:768px){

    .countdown{
        gap:4px;
        justify-content:space-between;
    }

    .cd{
        min-width:58px;
    }

    .cd-n{
        font-size:2.3rem;
    }

    .cd-l{
        font-size:.62rem;
        letter-spacing:.08em;
    }

    .cd-s{
        font-size:1.3rem;
        margin-top:-6px;
    }

    .c-prev{
    left:6px !important;
    }
    .c-next{
    right:6px !important;
    }
    .c-arrow{
    width:38px;
    height:38px;
    background:rgba(139, 115, 85, 0.9) !important;
    }
    .c-arrow svg{
    width:16px;
    height:16px;
    }

}



/* ===== CAROUSEL ===== */
.carousel-wrap{
    position:relative;
    max-width:560px;
    margin:0 auto;
}
.carousel-track{
    overflow:hidden;
    border-radius:12px;
}
.carousel-slide{
    display:none;
}
.carousel-slide.active{
    display:block;
}
.c-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    background:rgba(139, 115, 85, 0.85);
    border:2px solid #8b7355;
    border-radius:50%;
    cursor:pointer;
    opacity:1;
    transition:all 0.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.c-arrow:hover{
    background:#8b7355;
    transform:translateY(-50%) scale(1.1);
    box-shadow:0 4px 15px rgba(0,0,0,0.25);
}
.c-arrow svg{
    width:20px;
    height:20px;
    stroke:#ffffff;
    stroke-width:2.5;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.c-prev{
    left:10px;
}
.c-next{
    right:10px;
}


/* ===== TIMELINE ===== */
.tl-wrap{max-width:550px;margin:0 auto;position:relative}
.tl-line{
    position:absolute;left:50%;top:0;bottom:0;
    width:1px;background:var(--b);transform:translateX(-50%);
}
.tl-row{display:flex;align-items:flex-start;position:relative}
.tl-row>*{flex:1}
.tl-l{text-align:right;padding-right:25px}
.tl-dot{
    flex:0 0 12px;width:12px;height:12px;
    background:var(--b);border-radius:50%;
    position:relative;z-index:1;margin-top:5px;
}
.tl-r{padding-left:25px}
.tl-time{font-weight:500;font-size:1rem;letter-spacing:0.05em}
.tl-title{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:400;margin-bottom:3px}
.tl-text{font-size:0.82rem;color:var(--gray-l);line-height:1.5}
.tl-sep{width:100%;max-width:400px;height:1px;background:var(--b);margin:18px auto}

@media(max-width:640px){

    .tl-line{
        left:18px;
    }

    .tl-row{
        display:block;
        padding-left:34px;
        margin-bottom:30px;
    }

    .tl-l{
        display:block;
        text-align:left;
        padding:0 0 6px 0;
        font-weight:600;
        font-size:15px;
    }

    .tl-r{
        padding-left:0;
    }

    .tl-dot{
        position:absolute;
        left:12px;
        top:6px;
    }

    .tl-sep{
        display:none;
    }

}

/* ===== VENUE PHOTO ===== */
.venue-photo{
    position:relative;max-width:650px;margin:0 auto;
}
.fc-tl,.fc-tr,.fc-bl,.fc-br{
    position:absolute;width:35px;height:35px;
    border-color:var(--gold);border-style:solid;border-width:0;
}
.fc-tl{top:-4px;left:-4px;border-top-width:1px;border-left-width:1px}
.fc-tr{top:-4px;right:-4px;border-top-width:1px;border-right-width:1px}
.fc-bl{bottom:-4px;left:-4px;border-bottom-width:1px;border-left-width:1px}
.fc-br{bottom:-4px;right:-4px;border-bottom-width:1px;border-right-width:1px}

.venue-decor{max-width:700px;margin:0 auto}

/* ===== MAP ===== */
.map-wrap{max-width:600px;margin:0 auto;border:1px solid #eee}

/* ===== DESCRIPTION ===== */
.descr{
    font-size:17px;line-height:1.7;text-align:center;
    max-width:600px;margin:0 auto;color:var(--gray);
}

/* ===== GIFTS ===== */
.gifts-icon{margin-bottom:1.5rem}
.gifts-icon svg{width:70px;height:70px}

/* ===== PALETTE ===== */
.palette{
    display:flex;justify-content:center;flex-wrap:wrap;
    gap:20px;margin-top:2rem;
}
.pal{text-align:center}
.pal-c{
    width:50px;height:50px;border-radius:50%;
    border:1px solid rgba(0,0,0,0.08);
    margin:0 auto 6px;cursor:pointer;
    transition:transform 0.3s;
}
.pal-c:hover{transform:scale(1.15)}
.pal span{font-size:0.7rem;color:var(--gray-l)}

.palette-svg{text-align:center}
.palette-svg svg{width:100%;max-width:500px;height:60px}

/* ===== SCRIPT FRAME ===== */
.script-frame{text-align:center}
.script-frame svg{width:100%;max-width:550px;height:auto}

/* ===== FINAL PHOTO ===== */
.final-photo{max-width:560px;margin:0 auto}

/* ===== RSVP FORM ===== */
.rsvp-form{max-width:480px;margin:0 auto}
.fg{margin-bottom:22px}
.fl{font-size:1rem;font-weight:500;margin-bottom:4px}
.fs{font-size:0.78rem;color:var(--gray-l);margin-bottom:8px}

.fi{
    width:100%;padding:9px 0;
    border:none;border-bottom:1px solid var(--b);
    background:transparent;
    font-family:'Open Sans',sans-serif;font-size:1rem;
    color:var(--b);outline:none;transition:border-color 0.3s;
}
.fi:focus{border-bottom-color:var(--gold)}
.fi::placeholder{color:rgba(0,0,0,0.3)}

/* Radio */
.rl{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.ri{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:0.88rem}
.ri input{display:none}
.rind{
    flex:0 0 18px;height:18px;
    border:1px solid var(--b);border-radius:50%;
    position:relative;transition:border-color 0.2s;
}
.ri input:checked+.rind{border-color:var(--b)}
.ri input:checked+.rind::after{
    content:'';position:absolute;top:3px;left:3px;right:3px;bottom:3px;
    background:var(--b);border-radius:50%;
}

/* Checkbox */
.cl{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.ci{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:0.88rem}
.ci input{display:none}
.cind{
    flex:0 0 18px;height:18px;
    border:1px solid var(--b);position:relative;
    transition:border-color 0.2s,background 0.2s;
}
.ci input:checked+.cind{background:var(--b)}
.ci input:checked+.cind::after{
    content:'';position:absolute;top:2px;left:5px;
    width:5px;height:9px;
    border:solid var(--w);border-width:0 1.5px 1.5px 0;
    transform:rotate(45deg);
}

/* Submit */
.submit-btn{
    width:100%;padding:13px;
    background:var(--b);color:var(--w);
    border:2px solid var(--b);
    font-family:'Open Sans',sans-serif;
    font-size:0.82rem;letter-spacing:0.25em;
    cursor:pointer;transition:all 0.2s;margin-top:8px;
}
.submit-btn:hover{background:var(--w);color:var(--b)}

/* Success */
.rsvp-success{text-align:center;padding:30px 0}
.rsvp-success svg{margin-bottom:15px}
.success-text{font-size:0.95rem;color:var(--gray)}

/* ===== FOOTER ===== */
.footer{
    background:var(--b);
    padding:35px 20px;text-align:center;
}
.footer-inner{max-width:1000px;margin:0 auto}
.footer-text{
    font-size:0.72rem;letter-spacing:0.15em;
    color:var(--gray-l);margin-top:12px;
}

/* ===== ANIMATIONS ===== */
.a-fadein,.a-fadeinup,.a-zoomin{
    opacity:0;
    transition:opacity var(--ad,0.7s) ease,transform var(--ad,0.7s) ease;
}
.a-fadein{transform:none}
.a-fadeinup{transform:translateY(25px)}
.a-zoomin{transform:scale(0.97)}
.a-fadein.vis,.a-fadeinup.vis,.a-zoomin.vis{opacity:1;transform:none}

.a-prx{will-change:transform}


@media(max-width:768px){

    .c-prev{
        left:4px;
    }

    .c-next{
        right:4px;
    }

}


/* ===== HERO NEW LAYOUT ===== */
.hero-photos-row{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-bottom:20px;
}

.hero-photos-row .hero-photo-left,
.hero-photos-row .hero-photo-right{
    flex:0 0 280px;
    transform:rotate(0deg);
}

.hero-text-wrap{
    max-width:700px;
    margin:0 auto;
    text-align:center;
}

@media(max-width:768px){
    .hero-photos-row{
        gap:14px;
    }

    .hero-photos-row .hero-photo-left,
    .hero-photos-row .hero-photo-right{
        flex:0 0 160px;
        width:160px;
    }
}
/* ===== ТЕКСТ ПОД ФОТО ===== */
.hero-text-wrap{
    max-width:700px;
    margin:20px auto 0;
    text-align:center;
    padding:0 20px;
}