@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Great+Vibes&display=swap');

:root {
    --accent: #e91e63;
    --accent-2: #ff4081;
    --primary-bg: #fff7f8;
    --card-bg: #fff0f5;
    --btn-gradient: linear-gradient(90deg,#ff6f91,#ff9671);
    --btn-gradient-hover: linear-gradient(90deg,#ff9671,#ff6fa1);
}

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

body {
    font-family: 'Inter', sans-serif;
    line-height:1.8;
    background: var(--primary-bg);
    color:#333;
    overflow-x:hidden;
}

/* Fancy underline links */
a.fancy-a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    position: relative;
    transition: 0.2s;
}
a.fancy-a::after {
    content:'';
    position: absolute;
    width:0;
    height:2px;
    bottom:-2px;
    left:0;
    background: var(--accent);
    transition: width 0.3s ease;
}
a.fancy-a:hover::after { width:100%; }
a.fancy-a:hover { color: var(--accent-2); }

/* HEADER */
header.header {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:2rem 1rem;
    background: linear-gradient(180deg, #ffe1e8, #ffccd9);
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
    text-align:center;
}

header h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 4rem;
    background: linear-gradient(270deg, #ff6fa1, #ffb6d0, #ff6fa1);
    background-size: 600% 600%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradientMove 8s ease infinite, glow 2s ease-in-out infinite alternate;
}

/* HERO SLIDER */
.hero-slider { 
    position:relative; 
    overflow:hidden; 
    height:80vh; 
    display:flex; 
    align-items:center; 
}

.slider {
    display:flex;
    width:100%;
    transition: transform 0.8s ease-in-out;
}

.slide {
    flex:0 0 100%;
    display:none;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    height:100%;
    background-size:cover;
    background-position:center;
}

.slide.active { display:flex; }

.hero-text {
    background: rgba(255,255,255,0.7);
    padding:30px;
    border-radius:20px;
    max-width:90%;
    margin:0 auto;
    color:#111;
}

.hero-text h2 { font-size:2.8rem; margin-bottom:1rem; }
.hero-text p { font-size:1.3rem; margin-bottom:1.5rem; }

/* Slider controls */
.slider-controls {
    position:absolute;
    top:50%;
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:0 20px;
    transform: translateY(-50%);
}
.slider-controls span {
    font-size:2rem;
    cursor:pointer;
    color:white;
    text-shadow:2px 2px 10px rgba(0,0,0,0.6);
}

/* HAIR CARDS */
.hair-cards {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    width:100%;
}

.hair-card {
    background: var(--card-bg);
    border-radius:15px;
    overflow:hidden;
    flex:1 1 280px; /* flexible and shrinkable */
    min-width:280px;
    max-width:300px;
    display:flex;
    flex-direction:column;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hair-card img { width:100%; height:200px; object-fit:cover; border-bottom:3px solid var(--accent); }
.hair-card h3 { margin:15px 0 10px; color: var(--accent-2); font-size:1.5rem; }
.hair-card p { padding:0 15px 20px; color:#555; }
.hair-card:hover { transform:translateY(-5px); box-shadow:0 12px 25px rgba(0,0,0,0.2); }

/* SECTIONS */
section.center, footer.center {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.section { 
    padding:80px 20px; 
    max-width:1200px; 
    margin:0 auto; 
    opacity:0; 
    transform: translateY(30px); 
    transition: opacity 1s ease-out, transform 1s ease-out; 
}

/* BUTTONS */
.btn {
    display:inline-block;
    padding:14px 35px;
    font-size:1.3rem;
    border-radius:50px;
    background: var(--btn-gradient);
    color:white;
    text-decoration:none;
    box-shadow:0 10px 20px rgba(0,0,0,0.2);
    transition:0.3s all ease;
    margin:5px;
    position:relative;
    overflow:hidden;
}
.btn::after {
    content:''; position:absolute; top:0; left:50%;
    width:0; height:100%;
    background: rgba(255,255,255,0.2);
    transform: translateX(-50%);
    transition: width 0.4s ease;
    border-radius:50px;
}
.btn:hover::after { width:200%; }
.btn:hover { transform: translateY(-3px) scale(1.1); box-shadow:0 12px 25px rgba(0,0,0,0.3); background: var(--btn-gradient-hover); }

/* LISTS & SOCIAL */
ul { list-style:none; padding:0; display:flex; flex-direction:column; align-items:center; gap:0.8rem; }
ul li { margin:12px 0; font-weight:500; text-align:center; }
.social-links {
    display:flex;
    justify-content:center;
    gap:1.5rem;
}
.social-links li { display:inline-block; }
.social-links li a { color:var(--accent-2); font-size:1.2rem; font-weight:600; text-decoration:none; transition:0.3s ease, transform 0.3s ease; }
.social-links li a:hover { color:var(--accent); transform:scale(1.2) rotate(2deg); }

/* FOOTER */
footer.footer { 
    background:#222; 
    color:white; 
    padding:40px 20px; 
    font-size:0.95rem; 
    text-align:center; 
    position:relative; 
    border-top:5px solid var(--accent); 
}

/* ANIMATIONS */
@keyframes glow {
    0% { text-shadow:0 0 10px #ff6fa1,0 0 20px #ffb6d0;}
    50% { text-shadow:0 0 20px #ffb6d0,0 0 30px #ff6fa1;}
    100% { text-shadow:0 0 10px #ff6fa1,0 0 20px #ffb6d0;}
}
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes fadeInDown {0%{opacity:0; transform:translateY(-30px);}100%{opacity:1; transform:translateY(0);} }
@keyframes fadeInUp {0%{opacity:0; transform:translateY(30px);}100%{opacity:1; transform:translateY(0);} }

/* MEDIA QUERIES */
@media (max-width: 1024px) {
    header h1{font-size:3.5rem;}
    .hero-text h2{font-size:2.4rem;}
    .hero-text p{font-size:1.2rem;}
    .btn{padding:12px 30px;font-size:1.2rem;}
}

@media (max-width: 768px) {
    header h1{font-size:2.8rem;}
    .hero-text h2{font-size:2rem;}
    .hero-text p{font-size:1.1rem;}
    .btn{padding:10px 25px;font-size:1rem;}

    .hero-slider { height:auto; min-height:50vh; width:100vw; }
    .slider { width:100%; }
    .slide { width:100%; flex:0 0 100%; }
    .hero-text { padding:15px; max-width:90%; margin:0 auto; }

    .hair-cards { flex-direction: column; align-items: center; }
    .hair-card { width:90%; min-width:0; max-width:350px; }
}