/* ===== APPOLOSVISION – STYLE PRINCIPAL ===== */
:root {
    --deep-purple: #4a2c6d;
    --mystic-purple: #7b5da3;
    --lavender: #9d8cc9;
    --light-lavender: #e6e0fa;
    --gold: #d4af37;
    --light-gold: #f4e8c1;
    --dark-bg: #1a1129;
    --light-bg: #f9f7fd;
    --text-dark: #333;
    --text-light: #fff;
    --shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: "Georgia", serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.6;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

header {
    background: rgba(74, 44, 109, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 12px 0;
}
nav { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.logo h1 { color: #fff; font-size: 1.8rem; font-weight: 700; }
.logo h1 span { color: var(--gold); font-style: italic; }
.nav-links { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.nav-links a { color: #fff; text-decoration: none; font-weight: 500; padding: 8px 14px; border-radius: 30px; transition: background 0.3s; font-size: 0.95rem; }
.nav-links a:hover { background: rgba(255,255,255,0.1); color: var(--gold); }
.btn-premium { background: linear-gradient(90deg, #d4af37, #e6c34e); color: var(--deep-purple) !important; border-radius: 50px; padding: 8px 18px; font-weight: 700; }
.btn-premium:hover { background: linear-gradient(90deg, #e6c34e, #d4af37); color: #2d1f45 !important; }
.menu-toggle { display: none; font-size: 1.8rem; color: #fff; cursor: pointer; }

.page-content { max-width: 1200px; margin: 50px auto; padding: 0 20px; }
.profile-container { display: flex; gap: 40px; background: white; border-radius: 20px; padding: 40px; box-shadow: var(--shadow); border: 1px solid var(--light-lavender); margin-bottom: 50px; }
.profile-main { flex: 2; }
.profile-header { display: flex; gap: 25px; margin-bottom: 30px; flex-wrap: wrap; }
.profile-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 5px solid var(--gold); }
.profile-info h2 { color: var(--deep-purple); font-size: 32px; }
.profile-title { color: var(--mystic-purple); font-size: 18px; margin: 5px 0; }
.rating { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.stars { color: var(--gold); }
.rating-value { font-weight: bold; color: var(--deep-purple); }
.profile-stats { display: flex; gap: 30px; margin: 20px 0; padding: 20px 0; border-top: 1px solid var(--light-lavender); border-bottom: 1px solid var(--light-lavender); flex-wrap: wrap; }
.stat { text-align: center; min-width: 100px; }
.stat-value { font-size: 26px; font-weight: 700; color: var(--deep-purple); display: block; }
.stat-label { font-size: 14px; color: var(--mystic-purple); }
.free-chat-btn { background: transparent; border: 2px solid var(--gold); color: var(--deep-purple); padding: 12px 28px; border-radius: 50px; font-weight: bold; font-size: 16px; cursor: pointer; width: 100%; margin-top: 15px; transition: all 0.3s; text-align: center; }
.free-chat-btn:hover { background: var(--gold); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(212,175,55,0.3); }
.cta-button { background: linear-gradient(90deg, var(--gold), #e6c34e); color: var(--deep-purple); padding: 12px 28px; border-radius: 50px; font-weight: 700; text-decoration: none; display: inline-block; border: none; cursor: pointer; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 30px; margin: 50px 0; }
.service-card { background: white; padding: 30px; text-align: center; border-radius: 15px; border-top: 4px solid var(--lavender); box-shadow: 0 8px 25px rgba(74,44,109,0.08); transition: all 0.3s; }
.service-card:hover { transform: translateY(-5px); }
.service-card.featured { border-top-color: var(--gold); }
.service-icon { font-size: 40px; color: var(--mystic-purple); margin-bottom: 15px; }

@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .nav-links { display: none; flex-direction: column; width: 100%; background: #4a2c6d; padding: 20px; position: absolute; top: 70px; left: 0; border-radius: 0 0 20px 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 12px; text-align: center; width: 100%; }
    .profile-container { flex-direction: column; padding: 20px; }
    .profile-header { flex-direction: column; align-items: center; text-align: center; }
}