/* ---------- Design tokens ---------- */
*{
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

:root{
    --pink-pale: #FBEAF0;
    --pink-mid: #ED93B1;
    --pink-soft: #F4C0D1;
    --peach: #F0997B;
    --peach-soft: #F5C4B3;
    --magenta: #D3035B;
    --plum: #4B1528;
    --plum-mid: #72243E;
    --rose-deep: #993556;

    --font-display: 'Dancing Script', cursive;
    --font-body: 'Quicksand', sans-serif;

    --radius: 14px;
    --radius-lg: 24px;
    --max-width: 480px;
}

body{
    margin: 0;
    font-family: var(--font-body);
    color: var(--plum);
    background: #FFF8F9;
    -webkit-font-smoothing: antialiased;
}

img{
    max-width: 100%;
    display: block;
}

a{
    text-decoration: none;
    color: inherit;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ---------- Buttons ---------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem; /* 15.2px */
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.btn:hover{
    transform: scale(1.06);
}

.btn:active{
    transform: scale(0.97);
}

.btn-primary{
    background: var(--rose-deep);
    color: var(--pink-pale);
}

.btn-ghost{
    background: transparent;
    color: var(--rose-deep);
    border: 1.5px solid var(--rose-deep);
}

.btn-large{
    padding: 16px 32px;
    font-size: 1.05rem; /* 16.8px */
}


/* ---------- Splash screen ---------- */
.splash{
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--pink-pale) 0%, var(--peach) 100%);
    transition: opacity 0.6s ease;
}

.splash.splash-hide{
    opacity: 0;
    pointer-events: none;
}

.splash-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}

.splash-logo-wrap{
    position: relative;
    width: 230px;
    max-width: 70vw;
    opacity: 0;
    transform: scale(0.85);
    animation: logoPop 0.7s ease-out 0.15s forwards;
}

.splash-logo{
    width: 100%;
    height: auto;
}

.splash-tagline{
    font-size: 0.85rem;
    color: var(--plum-mid);
    letter-spacing: 0.5px;
    margin: 0;
    opacity: 0;
    animation: fadeUp 0.5s ease-out 0.8s forwards;
}

@keyframes logoPop{
    to{
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes fadeUp{
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce){
    .splash-logo-wrap,
    .splash-tagline{
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ---------- Site Content ---------- */
.site{
    opacity: 0;
    transition: opacity 0.5s ease;
}

.site.site-show{
    opacity: 1;
}


/* ---------- Header ---------- */
.site-header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff8f9;
    border-bottom: 1px solid var(--pink-soft);
}

.header-inner{
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand{
    display: flex;
    align-items: center;
}

.brand-mark{
    width: 140px;
    height: auto;
}

.header-cta{
    padding: 8px 16px;
    font-size: 0.8rem; /* 12.8px */
}


/* ---------- Layout helpers ---------- */
main > section{
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 48px 20px;
}

.section-title{
    font-family: var(--font-display);
    font-size: 1.7rem; /* 27.2px */
    color: var(--rose-deep);
    margin: 0 0 16px;
}

.section-text{
    line-height: 1.6;
    color: var(--plum-mid);
}


/* ---------- Hero ---------- */
.hero{
    background: linear-gradient(160deg, var(--pink-soft) 0%, var(--peach-soft) 100%);
    padding: 56px 20px 48px !important;
    text-align: center;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.hero-inner{
    max-width: var(--max-width);
    margin: 0 auto;
}

.eyebrow{
    font-size: 0.75rem; /* 12px */
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--plum-mid);
    margin: 0 0 12px;
}

.hero-title{
    font-family: var(--font-display);
    font-size: 2.4rem; /* 38.4px */
    line-height: 1.15;
    color: var(--plum);
    margin: 0 0 14px;
}

.hero-sub{
    color: var(--plum-mid);
    line-height: 1.5;
    margin: 0 0 24px;
}

.hero-actions{
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

/* ---------- Coverflow swiper & carousel (photos + videos) ---------- */
.swiper{
    width: 100%;
    padding: 30px 0;
}

.swiper-slide{
    position: relative;
    background: var(--pink-pale);
    width: 210px;
    aspect-ratio: 3/4;
    border-radius: var(--radius-lg);
    border: 1px solid var(--rose-deep);
    box-shadow: 0 10px 26px rgba(153, 53, 86, 0.18);
}

.swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    user-select: none;
}

.swiper-pagination{
    display: flex;
    justify-content: center;
    gap: 1px;
    margin-top: 6px;
}

.swiper-pagination-bullet{
    background-color: var(--rose-deep);
    transition: all 0.3s ease-in-out;
}

.swiper-pagination-bullet-active{
    transform: scale(1.3)
}

@media (min-width: 700px){
    .swiper-slide{
        width: 240px;
    }
}

@media (min-width: 900px){
    .swiper-slide{
        width: 270px;
    }
}

@media (min-width: 1100px){
    .swiper-slide{
        width: 270px;
    }
}

.carousel{
    position: relative;
    margin: 0 -20px;
}

.carousel-track{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 10px 21% 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.carousel-track::-webkit-scrollbar{
    display: none; 
}

.carousel-track.dragging{ 
    cursor: grabbing; 
    scroll-snap-type: none;
}

.carousel-slide{
    position: relative;
    flex: 0 0 90%;
    scroll-snap-align: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--pink-pale);
    box-shadow: 0 10px 26px rgba(153, 53, 86, 0.18);
    transform: scale(0.86);
    opacity: 0.55;
    z-index: 1;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.carousel-slide.is-active{
    transform: scale(1); 
    opacity: 1; 
    z-index: 2; 
}

.carousel-slide video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.video-carousel .carousel-slide{
    background: #000; 
}

.video-carousel video{
    cursor: default;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
}

.carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pink-soft);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.carousel-dots .dot:hover{ 
    transform: scale(1.4)
}
.carousel-dots .dot.active{
    background: var(--rose-deep);
    transform: scale(1.3);
}

.carousel-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--rose-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(75, 21, 40, 0.18);
    z-index: 5;
    transition: transform 0.15s ease;
}

.carousel-arrow:hover{ 
    transform: translateY(-50%) scale(1.12); 
}

.carousel-arrow-prev{ 
    left: 6px; 
}
.carousel-arrow-next{ 
    right: 6px; 
}

@media (max-width: 480px) {
  .carousel-arrow { display: none; }
}

@media (min-width: 700px) {
  .carousel-track { padding: 10px 26% 8px; }
}


/* ---------- Services ---------- */
.service-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.service-list li{
    background: var(--pink-pale);
    color: var(--plum-mid);
    font-size: 0.85rem; /* 13.6px */
    font-weight: 600;
    padding: 12px 14px;
    border-radius: var(--radius);
    text-align: center;
}


/* ---------- FAQ ---------- */
.faq-item{
    background: var(--pink-pale);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
}

.faq-item summary{
    font-weight: 600;
    cursor: pointer;
    color: var(--plum);
}

.faq-item p{
    color: var(--plum-mid);
    font-size: 0.9rem; /* 14.4px */
    line-height: 1.5;
    margin: 10px 0 0;
}


/* ---------- Contact ---------- */
.contact{
    text-align: center;
    background: linear-gradient(160deg, var(--pink-soft) 0%, var(--peach-soft) 100%);
    border-radius: var(--radius-lg);
}

.contact-number{
    margin-top: 10px;
    color: var(--plum-mid);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.ig-link{
    display: inline-block;
    margin-top: 10px;
    color: var(--plum-mid);
    font-weight: 600;
    font-size: 0.9rem; /* 14.4px */
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ---------- Floating action buttons ---------- */
.fab-stack{
    position: fixed;
    right: 16px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 80;
}

.fab{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.4rem;
    box-shadow: 0 6px 16px rgba(75, 21, 40, 0.25);
    transition: transform 0.15s ease;
}

.fab:hover{
    transform: scale(1.1);
}

.fab:active{
    transform: scale(0.92);
}

.fab-whatsapp{
    background: #25D366;
}

.fab-instagram{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}


/* ---------- Footer ---------- */
.site-footer{
    text-align: center;
    padding: 24px 20px 80px;
    font-size: 0.75rem; /* 12px */
    color: var(--plum-mid);
}


/* ---------- Media: Small phones ---------- */
@media (max-width: 340px){
    .hero-title{
        font-size: 2rem; /* 32px */
    }

    .service-list{
        grid-template-columns: 1fr;
    }
}