/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Neocities Escort Service - Elegant Seductive Theme */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    background: #0f0a0a url('https://picsum.photos/id/1015/1920/1080') center/cover no-repeat fixed;
    color: #e8d5c0;
    line-height: 1.6;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 5, 15, 0.75);
    z-index: -1;
}

/* Navigation */
nav {
    background: rgba(30, 10, 20, 0.95);
    backdrop-filter: blur(8px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid #c41e6a;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #ff99cc;
    text-shadow: 0 0 10px #c41e6a;
    letter-spacing: 2px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav a {
    color: #e8d5c0;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

nav a:hover {
    color: #ff99cc;
    text-shadow: 0 0 8px #ff66aa;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.hero-content {
    max-width: 800px;
    padding: 2rem;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    color: #ffccdd;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(196, 30, 106, 0.8);
}

.hero p {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    color: #d4b8a0;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(45deg, #c41e6a, #ff66aa);
    color: white;
    padding: 1rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(196, 30, 106, 0.4);
}

.cta-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(196, 30, 106, 0.6);
}

/* Sections */
section {
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 3rem;
    color: #ff99cc;
}

/* Profile Cards */
.profiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.card {
    background: rgba(40, 15, 35, 0.85);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #c41e6a;
    transition: all 0.4s ease;
}

.card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(196, 30, 106, 0.5);
}

.card img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.card-content {
    padding: 1.5rem;
    text-align: center;
}

.card h3 {
    color: #ffccdd;
    margin-bottom: 0.5rem;
}

.price {
    color: #ffd700;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 1rem 0;
}

/* Footer */
footer {
    background: #1a0a14;
    text-align: center;
    padding: 3rem 1rem;
    border-top: 2px solid #c41e6a;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 3.2rem;
    }
    
    nav ul {
        gap: 1rem;
        font-size: 0.95rem;
    }
}