:root {
    --main-pink: #ffb7b2;
    --soft-pink: #ffe6f2;
    --main-blue: #a2e8dd;
    --main-purple: #e0bbe4;
    --text-dark: #4a4a4a;
    --white: #ffffff;
    --font-main: 'Quicksand', sans-serif;
}

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

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    background-color: var(--white);
    overflow-x: hidden;
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes sakuraFall {
    0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) translateX(100px) rotate(360deg); opacity: 0; }
}

.float-anim { animation: float 3s ease-in-out infinite; }
.delay-1 { animation-delay: 0.5s; }
.delay-2 { animation-delay: 1s; }

/* Sakura Elements */
.sakura {
    position: fixed;
    top: -10%;
    background: #ffc0cb;
    border-radius: 100% 0 100% 0;
    opacity: 0.8;
    z-index: 9999;
    pointer-events: none;
    animation: sakuraFall linear infinite;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.logo { font-size: 1.8rem; font-weight: 700; color: var(--text-dark); }
.heart { color: var(--main-pink); }

.nav-links { list-style: none; display: flex; gap: 25px; }
.nav-links a { text-decoration: none; color: var(--text-dark); font-weight: 600; transition: 0.3s; }
.nav-links a:hover { color: var(--main-pink); }

/* Hero */
.hero {
    height: 85vh;
    background: linear-gradient(135deg, #fff5f7 0%, #e8f4f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url('https://images.unsplash.com/photo-1542352656-31e42848c47b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80'); /* Tokyo Vibe */
    background-size: cover;
    background-blend-mode: overlay;
}

.hero-text h1 { font-size: 3.5rem; margin-bottom: 20px; color: var(--text-dark); }
.pastel-highlight { background: linear-gradient(120deg, var(--main-pink) 0%, var(--main-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.btn-kawaii {
    display: inline-block;
    padding: 15px 35px;
    background: var(--main-pink);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(255, 183, 178, 0.4);
    transition: transform 0.2s;
    margin-top: 20px;
}
.btn-kawaii:hover { transform: scale(1.1) rotate(-2deg); background: var(--main-purple); }

/* Sections */
.section { padding: 80px 5%; }
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 50px; color: var(--text-dark); }
.pastel-bg { background-color: var(--soft-pink); }
.white-bg { background-color: white; }

/* Features */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; text-align: center; }
.feature-card { padding: 30px; background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.feature-card .icon { font-size: 3rem; margin-bottom: 15px; }

/* Shop Grid */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.item-card { background: white; border-radius: 20px; padding: 15px; text-align: center; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.item-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.img-wrapper img { width: 100%; height: 250px; object-fit: cover; border-radius: 15px; }
.item-card h3 { margin: 15px 0 5px; }
.price { color: var(--main-purple); font-weight: bold; font-size: 1.1rem; }

/* Split Contact Section (IMPORTANT) */
.split-section { background: linear-gradient(to right, #fdfbfb, #ebedee); }
.split-container { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 0; 
    border-radius: 30px; 
    overflow: hidden; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.05); 
    background: white;
}

.split-text { 
    flex: 1; 
    padding: 60px; 
    background: var(--soft-pink); 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}
.split-text h2 { font-size: 2.2rem; margin-bottom: 20px; }
.blue-text { color: #6a89cc; }
.benefit-list { list-style: none; margin: 20px 0; font-size: 1.1rem; }
.benefit-list li { margin-bottom: 10px; }
.mascot-placeholder { font-size: 3rem; margin-top: 30px; color: var(--main-pink); text-align: center; }

.split-form { 
    flex: 1; 
    padding: 60px; 
    background: white; 
}
.anime-form h3 { margin-bottom: 25px; color: var(--main-purple); }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.input-group input, .input-group select {
    width: 100%;
    padding: 15px;
    border: 2px solid #eee;
    border-radius: 15px;
    outline: none;
    transition: 0.3s;
    font-family: var(--font-main);
}
.input-group input:focus { border-color: var(--main-blue); background: #f9fdfd; }
.btn-submit-anime {
    width: 100%;
    padding: 15px;
    background: var(--main-blue);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.3s;
}
.btn-submit-anime:hover { background: #82ccff; }
.checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 0.85rem; }

/* Cookie */
.cookie-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: white;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: none; /* JS will show */
    z-index: 999;
    border: 2px solid var(--soft-pink);
}
.cookie-content { display: flex; align-items: center; gap: 15px; }
.cookie-content button {
    background: var(--main-pink);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
}

/* Footer */
footer { text-align: center; padding: 40px; color: #999; font-size: 0.9rem; }
footer a { color: var(--main-purple); }

/* Mobile */
@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 15px; }
    .hero-text h1 { font-size: 2.2rem; }
    .split-container { flex-direction: column; }
    .split-text, .split-form { padding: 40px 20px; }
}