/* Variables */
:root {
  --primary-color: #ff6b6b;
  --secondary-color: #3bb5aa; /* Slightly darker for better contrast */
  --bg-color: #f9f9f9;
  --text-color: #222;
  --card-bg: #fff;
  --shadow: 0 4px 15px rgba(0,0,0,0.1);
  --font-main: 'Segoe UI', sans-serif;
}

/* Reset & Base */
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body { 
  background: var(--bg-color); 
  color: var(--text-color); 
  line-height: 1.6; 
  font-family: var(--font-main);
  font-size: 1rem;
}
a { text-decoration:none; color: inherit; transition: color 0.2s ease; }
a:hover, a:focus-visible { color: var(--secondary-color); }
ul { list-style:none; }

/* Typography */
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom:1rem; }
p { font-size: clamp(1rem, 2.5vw, 1.1rem); }

/* Skip link */
.skip-link { 
  position:absolute; top:-40px; left:0; 
  background:#000; color:#fff; 
  padding:8px; z-index:10000; 
}
.skip-link:focus { top:0; }

/* Header */
header { 
  display:flex; justify-content:space-between; align-items:center; 
  padding:1rem 2rem; background:#fff; 
  position:sticky; top:0; z-index:1000; 
  box-shadow: var(--shadow); 
}
.logo { font-weight:bold; font-size:1.4rem; color: var(--primary-color); }
nav ul { display:flex; gap:1.5rem; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; cursor:pointer; border:none; background:none; }
.hamburger span { height:3px; width:25px; background: var(--text-color); margin-bottom:5px; border-radius:3px; transition: all 0.3s ease; }

/* Overlay & Drawer */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:999; }
.overlay.active { display:block; }
.side-drawer { position:fixed; top:0; left:-250px; width:250px; height:100%; background:#fff; padding:2rem; box-shadow: var(--shadow); transition: left 0.3s ease; z-index:1000; }
.side-drawer.open { left:0; }
.side-drawer a { display:block; margin-bottom:1rem; font-weight:500; color: var(--text-color); }

/* Hero */
.hero { 
  padding:clamp(2rem, 6vw, 4rem) 2rem; 
  text-align:center; 
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); 
  color:#fff; 
  border-radius:15px; 
}
.hero img { max-width:100%; border-radius:15px; margin-bottom:1.5rem; }
.hero h1 { margin-bottom:1rem; }
.hero p { margin-bottom:2rem; }
.btn { 
  display:inline-block; 
  padding:0.75rem 1.5rem; margin:0.5rem 0; 
  background: var(--primary-color); color:#fff; 
  border-radius:30px; font-weight:bold; 
  transition: transform 0.2s ease, background 0.2s ease; 
}
.btn:hover, .btn:focus-visible { transform: scale(1.05); background: var(--secondary-color); outline:none; }
.countdown { margin-top:1rem; font-size:1.1rem; font-weight:bold; }

/* Sections */
.section { padding:clamp(2rem, 6vw, 4rem) 2rem; text-align:center; }
.cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:2rem; }
.card { background: var(--card-bg); padding:1.5rem; border-radius:15px; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover, .card:focus-within { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.card img { width:100%; border-radius:10px; margin-bottom:1rem; }

/* Testimonials */
.testimonial-carousel { max-width:600px; margin:0 auto; }
.testimonial { display:none; font-style:italic; margin-bottom:1rem; transition: opacity 0.5s ease; }

/* Animations */
.fade-in { opacity:0; transform: translateY(20px); transition: all 0.8s ease; }
.fade-in.appear { opacity:1; transform: translateY(0); }

/* Sticky CTA */
.sticky-cta { position:fixed; bottom:1rem; right:1rem; z-index:1000; }
.sticky-cta .btn { box-shadow: var(--shadow); }

/* Confetti */
.confetti { position:fixed; width:10px; height:10px; pointer-events:none; border-radius:50%; animation:fall 2.5s linear forwards; }
@keyframes fall { 
  0% { transform: translateY(0) rotate(0deg); } 
  100% { transform: translateY(100vh) rotate(360deg); opacity:0; } 
}

/* Exit Intent Popup */
#exitPopup { 
  position:fixed; top:50%; left:50%; 
  transform:translate(-50%, -50%) scale(0); 
  background:#fff; padding:2rem; border-radius:15px; 
  box-shadow:var(--shadow); z-index:2000; 
  transition:transform 0.3s ease; max-width:400px; width:90%; text-align:center; 
}
#exitPopup.show { transform:translate(-50%, -50%) scale(1); }
#exitPopup .popup-content input { 
  padding:0.75rem 1rem; margin-top:1rem; width:80%; 
  border-radius:10px; border:1px solid #ccc; 
  transition: border-color 0.2s ease;
}
#exitPopup .popup-content input:focus { border-color: var(--primary-color); outline:none; }
#exitPopup .popup-content button { margin-top:1rem; padding:0.75rem 1.5rem; border:none; border-radius:30px; background: var(--primary-color); color:#fff; cursor:pointer; }
#exitPopup .popup-content button:focus-visible { outline:2px solid var(--secondary-color); }
#exitPopup #closePopup { position:absolute; top:10px; right:15px; font-size:1.5rem; cursor:pointer; }

/* Footer */
footer { padding:2rem; text-align:center; background:#fff; box-shadow: var(--shadow); }

/* Responsive */
@media(max-width:768px){
  nav ul { display:none; }
  .hamburger { display:flex; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body { background:#111; color:#eee; }
  header, footer, .card, #exitPopup { background:#1b1b1b; color:#eee; }
  .logo { color: var(--secondary-color); }
}