/* =====================
   CSS VARIABLES & RESET
   ===================== */
:root {
  --bg: #060411;
  --bg2: #0b0818;
  --card-bg: #100d1f;
  --card-border: rgba(255,255,255,0.07);
  --pink: #ff2d78;
  --pink-light: #ff6ea0;
  --pink-glow: rgba(255,45,120,0.4);
  --purple: #7b2fff;
  --purple-glow: rgba(123,47,255,0.35);
  --text: #f0eaff;
  --muted: #9b8eb5;
  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.65; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* =====================
   UTILITY
   ===================== */
.gradient-text {
  background: linear-gradient(90deg, var(--pink), #ff9ecb);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-tag {
  display: inline-block; font-size: 13px; font-weight: 600;
  color: var(--pink-light); letter-spacing: 0.5px; margin-bottom: 12px;
}
.center-btn { text-align: center; margin-top: 40px; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: 50px;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px;
  cursor: pointer; border: none; transition: var(--transition); white-space: nowrap;
}
.btn.large { padding: 15px 32px; font-size: 16px; }
.btn.sm { padding: 9px 18px; font-size: 14px; }

.btn-pink {
  background: linear-gradient(135deg, var(--pink), #c8006a);
  color: #fff; box-shadow: 0 4px 20px var(--pink-glow);
}
.btn-pink:hover { transform: translateY(-2px); box-shadow: 0 10px 36px var(--pink-glow); filter: brightness(1.1); }

.glow-btn { box-shadow: 0 0 24px var(--pink-glow), 0 4px 20px rgba(0,0,0,0.3); }
.glow-btn:hover { box-shadow: 0 0 48px var(--pink-glow), 0 8px 32px rgba(0,0,0,0.4); }

.btn-glass {
  background: rgba(255,255,255,0.08);
  color: var(--text); border: 1.5px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
.btn-glass:hover { background: rgba(255,255,255,0.14); border-color: var(--pink); transform: translateY(-2px); }

.btn-outline {
  background: transparent; color: var(--text);
  border: 1.5px solid rgba(255,255,255,0.2);
}
.btn-outline:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-2px); }

/* SECTION HEADER */
.section-header { text-align: center; margin-bottom: 52px; }
.section-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 44px); font-weight: 700; margin-bottom: 10px;
}
.section-header p { color: var(--muted); font-size: 16px; max-width: 520px; margin: 0 auto; }

/* REVEAL ANIMATION */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =====================
   NAVBAR
   ===================== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(6,4,17,0.8); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: box-shadow var(--transition);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 28px;
  height: 68px; display: flex; align-items: center; gap: 40px;
}
.logo {
  font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700;
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
.logo-heart { color: var(--pink); font-size: 22px; }
.nav-links { display: flex; list-style: none; gap: 32px; flex: 1; }
.nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; transition: color var(--transition); }
.nav-links a:hover { color: var(--text); }
.nav-cta { margin-left: auto; }
.hamburger { display: none; background: none; border: none; color: var(--text); font-size: 24px; cursor: pointer; margin-left: auto; }
.mobile-menu { display: none; flex-direction: column; gap: 14px; padding: 16px 28px 24px; border-top: 1px solid rgba(255,255,255,0.05); }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: var(--muted); font-size: 16px; font-weight: 500; transition: color var(--transition); }
.mobile-menu a:hover { color: var(--text); }

/* =====================
   HERO BANNER
   ===================== */
.hero-banner {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-bg-image {
  position: absolute; inset: 0;
  background: url('hero-image.png') center center / cover no-repeat;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.hero-banner:hover .hero-bg-image { transform: scale(1); }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(6,4,17,0.92) 45%, rgba(6,4,17,0.3) 100%);
}
.hero-overlay-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,4,17,1) 0%, transparent 40%),
              linear-gradient(to bottom, rgba(6,4,17,0.6) 0%, transparent 25%);
}

/* Floating particles */
.hero-particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute; border-radius: 50%;
  background: var(--pink); opacity: 0;
  animation: floatParticle 6s ease-in-out infinite;
}
.particle:nth-child(1) { width:4px; height:4px; left:10%; top:20%; animation-delay:0s; }
.particle:nth-child(2) { width:6px; height:6px; left:20%; top:70%; animation-delay:1s; }
.particle:nth-child(3) { width:3px; height:3px; left:35%; top:40%; animation-delay:2s; }
.particle:nth-child(4) { width:5px; height:5px; left:75%; top:25%; animation-delay:0.5s; background: var(--purple); }
.particle:nth-child(5) { width:4px; height:4px; left:85%; top:60%; animation-delay:1.5s; }
.particle:nth-child(6) { width:6px; height:6px; left:55%; top:80%; animation-delay:2.5s; background: var(--purple); }
@keyframes floatParticle {
  0%,100% { opacity:0; transform: translateY(0) scale(0.5); }
  50% { opacity:0.7; transform: translateY(-30px) scale(1); }
}

.hero-banner-content {
  position: relative; z-index: 2;
  max-width: 1240px; width: 100%; margin: 0 auto;
  padding: 140px 28px 100px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0;
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, rgba(255,45,120,0.18), rgba(123,47,255,0.18));
  border: 1px solid rgba(255,45,120,0.4);
  color: var(--pink-light); font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 50px; margin-bottom: 28px;
}
.pulse-badge { animation: pulseBadge 2.5s ease-in-out infinite; }
@keyframes pulseBadge {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,45,120,0); }
  50% { box-shadow: 0 0 0 8px rgba(255,45,120,0.08); }
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5.5vw, 70px);
  font-weight: 900; line-height: 1.08;
  margin-bottom: 24px;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.hero-title em { font-style: italic; }

.hero-sub {
  color: rgba(240,234,255,0.8); font-size: 17px;
  max-width: 520px; margin-bottom: 36px; line-height: 1.75;
}

.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

.hero-social-proof { display: flex; align-items: center; gap: 16px; }
.avatars { display: flex; }
.avatars img {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255,45,120,0.5); margin-left: -10px; object-fit: cover;
}
.avatars img:first-child { margin-left: 0; }
.proof-text { display: flex; flex-direction: column; font-size: 13px; color: rgba(255,255,255,0.6); }
.proof-text strong { color: var(--text); }
.stars { color: #ffd166; font-size: 14px; letter-spacing: 1px; margin-bottom: 2px; }

.hero-scroll-indicator {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.35); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; z-index: 2;
}
.scroll-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
  animation: scrollBounce 1.6s ease-in-out infinite;
}
@keyframes scrollBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* =====================
   FEATURED BAR
   ===================== */
.featured-bar {
  border-top: 1px solid rgba(255,45,120,0.12);
  border-bottom: 1px solid rgba(255,45,120,0.12);
  background: linear-gradient(90deg, rgba(255,45,120,0.04), rgba(123,47,255,0.04), rgba(255,45,120,0.04));
  padding: 28px 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
}
.featured-label { color: var(--muted); font-size: 13px; white-space: nowrap; }
.featured-logos { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; justify-content: center; }
.press-logo { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.35); letter-spacing: 0.5px; transition: color var(--transition); cursor: default; }
.press-logo:hover { color: rgba(255,255,255,0.7); }
.press-logo.forbes { font-style: italic; font-size: 19px; }
.press-logo.tc { color: rgba(255,107,0,0.4); }
.press-logo.yahoo { font-style: italic; }

/* =====================
   ABOUT SECTION
   ===================== */
.about-section { padding: 100px 28px; max-width: 1240px; margin: 0 auto; }
.about-inner { display: flex; gap: 72px; align-items: center; flex-wrap: wrap; }
.about-text { flex: 1; min-width: 280px; }
.about-text h2 { font-family:'Playfair Display',serif; font-size:clamp(26px,3.5vw,42px); font-weight:700; margin:10px 0 22px; }
.about-text p { color:var(--muted); font-size:15px; margin-bottom:18px; line-height:1.8; }
.about-stats { display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.stat-box {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding:18px 28px; text-align:center; flex:1; min-width:80px;
  position: relative; overflow: hidden;
}
.stat-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--pink), var(--purple));
}
.stat-num { display:block; font-family:'Playfair Display',serif; font-size:28px; font-weight:900; color:var(--pink); line-height:1.1; }
.stat-label { display:block; font-size:12px; color:var(--muted); margin-top:5px; }

.about-visual { flex:1; min-width:280px; display:flex; justify-content:center; }
.chat-mockup {
  width:100%; max-width:360px;
  background: var(--card-bg);
  border: 1px solid rgba(255,45,120,0.2);
  border-radius: 22px; overflow:hidden;
  box-shadow: 0 30px 80px rgba(255,45,120,0.1), 0 0 0 1px rgba(255,255,255,0.04);
}
.chat-header {
  background: linear-gradient(135deg,rgba(255,45,120,0.12),rgba(123,47,255,0.12));
  padding:16px 20px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--card-border);
}
.chat-dot {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg,var(--pink),var(--purple));
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.chat-dot::after { content:'🌙'; }
.chat-name { font-weight:600; font-size:15px; flex:1; }
.online-dot { color:#4ade80; font-size:10px; }
.chat-header-icon { color:var(--pink); font-size:18px; }

.chat-body { padding:20px; display:flex; flex-direction:column; gap:10px; min-height:230px; }
.chat-bubble {
  max-width:78%; padding:11px 15px; border-radius:18px;
  font-size:14px; line-height:1.5; opacity:0;
  animation: bubblePop 0.4s ease forwards;
}
.delay-1{animation-delay:0.3s} .delay-2{animation-delay:0.9s}
.delay-3{animation-delay:1.5s} .delay-4{animation-delay:2.1s} .delay-5{animation-delay:2.7s}
@keyframes bubblePop { from{opacity:0;transform:scale(0.88) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }
.chat-bubble.ai {
  background:rgba(255,45,120,0.1); border:1px solid rgba(255,45,120,0.18);
  align-self:flex-start; border-bottom-left-radius:4px;
}
.chat-bubble.user {
  background:linear-gradient(135deg,rgba(123,47,255,0.22),rgba(255,45,120,0.15));
  border:1px solid rgba(123,47,255,0.28);
  align-self:flex-end; border-bottom-right-radius:4px;
}
.chat-input-bar {
  padding:13px 18px; border-top:1px solid var(--card-border);
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.02);
}
.chat-input-placeholder { flex:1; color:var(--muted); font-size:14px; }
.chat-send {
  background:linear-gradient(135deg,var(--pink),var(--purple)); border:none;
  border-radius:50%; width:36px; height:36px; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.chat-send:hover { transform:scale(1.12); box-shadow:0 0 18px var(--pink-glow); }

/* =====================
   GIRLFRIENDS SECTION
   ===================== */
.girlfriends-section { padding:100px 0; background:var(--card-bg); border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border); }
.gf-section-inner { max-width:1240px; margin:0 auto; padding:0 28px; }
.girlfriends-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:20px; }
.gf-card {
  background:rgba(255,255,255,0.025); border:1px solid var(--card-border);
  border-radius:var(--radius); overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.gf-card:hover { transform:translateY(-8px); border-color:rgba(255,45,120,0.45); box-shadow:0 20px 48px rgba(255,45,120,0.18); }
.gf-img {
  height:210px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.gf-luna  { background:linear-gradient(160deg,#2a0a2a,#6d1a5e); }
.gf-aria  { background:linear-gradient(160deg,#1a0a3a,#4a1a8e); }
.gf-mia   { background:linear-gradient(160deg,#2a0a1a,#8e1a6e); }
.gf-zara  { background:linear-gradient(160deg,#0a1a2a,#1a4a8e); }
.gf-sia   { background:linear-gradient(160deg,#1a2a0a,#4a6e1a); }
.gf-nova  { background:linear-gradient(160deg,#0a2a2a,#1a6e8e); }
.gf-emoji { font-size:60px; z-index:1; position:relative; }
.gf-glow-overlay {
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 120%, rgba(255,45,120,0.18) 0%, transparent 70%);
  opacity:0; transition:opacity var(--transition);
}
.gf-card:hover .gf-glow-overlay { opacity:1; }
.gf-info { padding:18px 16px; text-align:center; }
.gf-info h3 { font-family:'Playfair Display',serif; font-size:19px; font-weight:700; margin-bottom:4px; }
.gf-info p { color:var(--muted); font-size:12px; margin-bottom:14px; }

/* =====================
   EXPERIENCE SECTION
   ===================== */
.experience-section { padding:100px 28px; }
.experience-inner { max-width:1100px; margin:0 auto; }
.personality-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; margin-bottom:40px; }
.personality-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:30px 24px; text-align:center;
  transition:var(--transition); position:relative; overflow:hidden;
}
.personality-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--pink),var(--purple));
  transform:scaleX(0); transition:transform var(--transition); transform-origin:left;
}
.personality-card:hover::after { transform:scaleX(1); }
.personality-card:hover { transform:translateY(-5px); border-color:rgba(255,45,120,0.3); box-shadow:0 16px 40px rgba(255,45,120,0.1); }
.p-icon { font-size:38px; display:block; margin-bottom:14px; }
.personality-card h4 { font-size:16px; font-weight:700; margin-bottom:8px; }
.personality-card p { color:var(--muted); font-size:13px; line-height:1.65; }
.experience-note {
  background:linear-gradient(135deg,rgba(255,45,120,0.06),rgba(123,47,255,0.06));
  border:1px solid rgba(255,45,120,0.18);
  border-radius:var(--radius); padding:26px 30px;
  display:flex; align-items:center; gap:18px;
}
.note-icon { font-size:30px; flex-shrink:0; }
.experience-note p { color:var(--muted); font-size:15px; line-height:1.75; margin:0; }

/* =====================
   FEATURES SECTION
   ===================== */
.features-section { padding:100px 28px; background:var(--card-bg); border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border); }
.features-inner { max-width:1240px; margin:0 auto; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:20px; }
.feature-card {
  background:rgba(255,255,255,0.025); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:30px 22px; text-align:center;
  transition:var(--transition);
}
.feature-card:hover { transform:translateY(-5px); border-color:rgba(123,47,255,0.4); box-shadow:0 16px 40px rgba(123,47,255,0.12); }
.feat-icon-wrap {
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(135deg,rgba(255,45,120,0.12),rgba(123,47,255,0.12));
  border:1px solid rgba(255,45,120,0.2);
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.feature-card:hover .feat-icon-wrap { background:linear-gradient(135deg,rgba(255,45,120,0.22),rgba(123,47,255,0.22)); transform:scale(1.1); }
.feat-icon { font-size:28px; }
.feature-card h4 { font-size:15px; font-weight:700; margin-bottom:10px; }
.feature-card p { color:var(--muted); font-size:13px; line-height:1.65; }

/* =====================
   HOW IT WORKS
   ===================== */
.how-section { padding:100px 28px; }
.how-inner { max-width:1100px; margin:0 auto; }
.steps-row { display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:center; }
.step-card {
  flex:1; min-width:200px; max-width:280px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:36px 24px; text-align:center;
  transition:var(--transition); position:relative;
}
.step-card:hover { transform:translateY(-5px); border-color:rgba(255,45,120,0.3); box-shadow:0 16px 40px rgba(255,45,120,0.1); }
.step-num {
  font-family:'Playfair Display',serif; font-size:52px; font-weight:900;
  color:rgba(255,45,120,0.12); line-height:1; margin-bottom:8px;
}
.step-icon-wrap {
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(135deg,rgba(255,45,120,0.15),rgba(123,47,255,0.15));
  border:1.5px solid rgba(255,45,120,0.25);
  display:flex; align-items:center; justify-content:center; font-size:26px;
  transition:var(--transition);
}
.step-card:hover .step-icon-wrap { transform:scale(1.1); box-shadow:0 0 24px var(--pink-glow); }
.step-icon { font-size:26px; }
.step-card h3 { font-size:17px; font-weight:700; margin-bottom:10px; }
.step-card p { color:var(--muted); font-size:13px; line-height:1.7; }
.step-connector {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0 12px; flex-shrink:0;
}
.connector-line { width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--pink),transparent); }
.connector-heart { color:var(--pink); font-size:14px; animation:heartbeat 2s ease-in-out infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }

/* =====================
   WHY SECTION
   ===================== */
.why-section { padding:100px 28px; background:var(--card-bg); border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border); }
.why-inner { max-width:1100px; margin:0 auto; display:flex; gap:72px; align-items:center; flex-wrap:wrap; }
.why-visual { flex:1; min-width:280px; }
.trend-card { background:rgba(255,255,255,0.025); border:1px solid var(--card-border); border-radius:var(--radius); padding:30px; }
.trend-header { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; margin-bottom:28px; }
.trend-icon { font-size:22px; }
.trend-bars { display:flex; flex-direction:column; gap:16px; }
.trend-bar-row { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); }
.trend-bar-row>span:first-child { width:36px; flex-shrink:0; }
.trend-bar-row>span:last-child { width:36px; flex-shrink:0; text-align:right; color:var(--pink-light); font-weight:600; }
.t-bar-wrap { flex:1; height:10px; background:rgba(255,255,255,0.06); border-radius:50px; overflow:hidden; }
.t-bar { height:100%; width:0; background:linear-gradient(90deg,var(--pink),var(--purple)); border-radius:50px; box-shadow:0 0 12px var(--pink-glow); transition:width 1.4s cubic-bezier(0.4,0,0.2,1); }
.t-bar.animated { width:var(--w); }
.trend-note { margin-top:18px; font-size:12px; color:var(--muted); text-align:center; }
.why-text { flex:1; min-width:280px; }
.why-text h2 { font-family:'Playfair Display',serif; font-size:clamp(24px,3vw,40px); font-weight:700; margin:12px 0 18px; }
.why-text>p { color:var(--muted); font-size:15px; margin-bottom:30px; line-height:1.75; }
.why-list { display:flex; flex-direction:column; gap:22px; }
.why-item { display:flex; gap:16px; align-items:flex-start; }
.why-check {
  width:30px; height:30px; background:linear-gradient(135deg,var(--pink),var(--purple));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex-shrink:0; margin-top:2px; color:#fff;
}
.why-item strong { display:block; font-size:15px; margin-bottom:4px; }
.why-item p { color:var(--muted); font-size:13px; line-height:1.65; margin:0; }

/* =====================
   BENEFITS SECTION
   ===================== */
.benefits-section { padding:100px 28px; }
.benefits-inner { max-width:1100px; margin:0 auto; }
.benefits-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px; }
.benefit-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:30px 26px;
  transition:var(--transition); position:relative; overflow:hidden;
}
.benefit-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(180deg,var(--pink),var(--purple)); border-radius:3px 0 0 3px;
}
.benefit-card:hover { transform:translateY(-5px); border-color:rgba(255,45,120,0.3); box-shadow:0 16px 40px rgba(255,45,120,0.1); }
.benefit-num { display:block; font-size:44px; font-family:'Playfair Display',serif; font-weight:900; color:rgba(255,45,120,0.12); line-height:1; margin-bottom:8px; }
.benefit-card h4 { font-size:16px; font-weight:700; margin-bottom:10px; }
.benefit-card p { color:var(--muted); font-size:14px; line-height:1.7; }

/* =====================
   COMPARE TABLE
   ===================== */
.compare-section { padding:100px 28px; background:var(--card-bg); border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border); }
.compare-inner { max-width:860px; margin:0 auto; }
.compare-table { display:flex; border-radius:var(--radius); overflow:hidden; border:1px solid var(--card-border); }
.compare-col { flex:1; display:flex; flex-direction:column; }
.compare-col-header { flex:1.5; }
.compare-col-secrets { background:rgba(255,45,120,0.05); border-left:1px solid rgba(255,45,120,0.2); border-right:1px solid rgba(255,45,120,0.2); }
.compare-col-other { background:rgba(255,255,255,0.015); }
.compare-cell { padding:16px 18px; font-size:14px; border-bottom:1px solid rgba(255,255,255,0.04); display:flex; align-items:center; min-height:58px; color:var(--muted); }
.compare-cell:last-child { border-bottom:none; }
.header-cell { font-weight:700; font-size:14px; color:var(--text); background:rgba(255,255,255,0.03); min-height:68px; }
.brand-header { background:linear-gradient(135deg,rgba(255,45,120,0.12),rgba(123,47,255,0.08)); color:var(--pink-light); font-size:15px; justify-content:center; }
.other-header { justify-content:center; color:var(--muted); }
.tick { color:#4ade80; font-size:20px; justify-content:center; font-weight:700; }
.cross { color:#f87171; font-size:20px; justify-content:center; font-weight:700; }
.muted-tick { color:rgba(74,222,128,0.35); }

/* =====================
   SAFE SECTION
   ===================== */
.safe-section { padding:100px 28px; }
.safe-inner {
  max-width:900px; margin:0 auto;
  background:var(--card-bg); border:1px solid rgba(255,45,120,0.15);
  border-radius:24px; padding:60px 52px;
  display:flex; gap:52px; align-items:flex-start; flex-wrap:wrap;
  box-shadow:0 24px 64px rgba(255,45,120,0.06);
}
.safe-icon-big { font-size:80px; flex-shrink:0; }
.safe-text { flex:1; min-width:240px; }
.safe-text h2 { font-family:'Playfair Display',serif; font-size:clamp(22px,3vw,36px); font-weight:700; margin:12px 0 18px; }
.safe-text>p { color:var(--muted); font-size:15px; margin-bottom:26px; line-height:1.75; }
.safe-list { display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
.safe-item { display:flex; align-items:center; gap:14px; font-size:15px; }
.safe-item span:first-child { font-size:22px; }
.safe-note { background:rgba(255,45,120,0.07); border:1px solid rgba(255,45,120,0.18); border-radius:var(--radius-sm); padding:14px 18px; color:var(--muted); font-size:14px; line-height:1.65; }

/* =====================
   TESTIMONIALS
   ===================== */
.testimonials-section { padding:100px 28px; background:var(--card-bg); border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border); }
.testimonials-inner { max-width:1100px; margin:0 auto; }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px; }
.testimonial-card {
  background:rgba(255,255,255,0.025); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:30px 26px; transition:var(--transition);
  position:relative;
}
.testimonial-card::before {
  content:'"'; position:absolute; top:16px; right:22px;
  font-family:'Playfair Display',serif; font-size:60px; color:rgba(255,45,120,0.1);
  line-height:1; font-weight:900;
}
.testimonial-card:hover { border-color:rgba(255,45,120,0.3); transform:translateY(-5px); box-shadow:0 16px 40px rgba(255,45,120,0.08); }
.t-stars { color:#ffd166; font-size:15px; letter-spacing:2px; margin-bottom:14px; }
.testimonial-card p { color:var(--muted); font-size:14px; line-height:1.8; margin-bottom:22px; font-style:italic; }
.t-author { display:flex; align-items:center; gap:12px; }
.t-author img { width:42px; height:42px; border-radius:50%; border:2px solid rgba(255,45,120,0.35); object-fit:cover; }
.t-author strong { display:block; font-size:14px; }
.t-author span { display:block; font-size:12px; color:var(--muted); }

/* =====================
   FAQ
   ===================== */
.faq-section { padding:100px 28px; }
.faq-inner { max-width:800px; margin:0 auto; }
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius); overflow:hidden; transition:border-color var(--transition);
}
.faq-item:hover { border-color:rgba(255,45,120,0.25); }
.faq-q {
  width:100%; text-align:left; background:none; border:none;
  color:var(--text); font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:600; padding:20px 22px;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq-arrow { color:var(--pink); font-size:18px; flex-shrink:0; transition:transform var(--transition); }
.faq-q.open .faq-arrow { transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.38s ease, padding 0.38s ease; color:var(--muted); font-size:14px; padding:0 22px; line-height:1.75; }
.faq-a.open { max-height:200px; padding:0 22px 20px; }

/* =====================
   CTA BANNER
   ===================== */
.cta-banner {
  position:relative; padding:100px 28px;
  text-align:center; overflow:hidden;
}
.cta-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,#130823,#21041a);
}
.cta-bg::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% 50%, rgba(123,47,255,0.22) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(255,45,120,0.22) 0%, transparent 60%);
}
.cta-content { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.cta-content h2 { font-family:'Playfair Display',serif; font-size:clamp(26px,4vw,50px); font-weight:900; margin-bottom:16px; }
.cta-content p { color:rgba(240,234,255,0.7); font-size:16px; line-height:1.75; margin-bottom:10px; }
.cta-sub { color:var(--pink-light) !important; font-size:15px !important; margin-top:8px; }
.cta-actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:36px; }

/* =====================
   FOOTER
   ===================== */
.footer { border-top:1px solid var(--card-border); padding:60px 28px 32px; }
.footer-inner { max-width:1240px; margin:0 auto; }
.footer-top { display:flex; gap:56px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--card-border); margin-bottom:28px; }
.footer-brand { flex:1; min-width:200px; }
.footer-brand .logo { display:inline-flex; font-family:'Playfair Display',serif; font-size:21px; font-weight:700; margin-bottom:14px; gap:7px; align-items:center; }
.footer-brand p { color:var(--muted); font-size:14px; max-width:260px; line-height:1.7; }
.footer-links { display:flex; gap:56px; flex-wrap:wrap; }
.footer-col { display:flex; flex-direction:column; gap:12px; }
.footer-col h5 { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text); margin-bottom:4px; }
.footer-col a { color:var(--muted); font-size:14px; transition:color var(--transition); }
.footer-col a:hover { color:var(--pink); }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:13px; }

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width:768px) {
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:block; }
  .hero-banner-content { padding:120px 24px 80px; }
  .hero-title { font-size:clamp(30px,8vw,48px); }
  .hero-sub { font-size:15px; }
  .about-inner,.why-inner { flex-direction:column; }
  .safe-inner { padding:36px 24px; flex-direction:column; text-align:center; }
  .safe-item { justify-content:center; }
  .steps-row { flex-direction:column; align-items:stretch; }
  .step-connector { transform:rotate(90deg); padding:12px 0; }
  .step-card { max-width:100%; }
  .compare-table { font-size:12px; }
  .compare-cell { padding:12px 10px; min-height:48px; }
  .cta-banner { padding:70px 24px; }
  .footer-top { flex-direction:column; gap:28px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .girlfriends-grid { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .featured-bar { gap:20px; }
  .featured-logos { gap:20px; }
}
@media (max-width:480px) {
  .girlfriends-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .hero-buttons { flex-direction:column; }
  .hero-buttons .btn { width:100%; justify-content:center; }
}