:root {
  --primary: #2c3e50;
  --accent: #18bc9c;
  --light: #f5f5f5;
  --radius: 6px;
  --gap: 16px;
}
* { box-sizing: border-box; }
body {
  margin:0; padding:0;
  font-family: 'Segoe UI', sans-serif;
  color: var(--primary);
  background: #fff;
  line-height:1.6;
}
/* Container */
.container { max-width:1200px; margin:0 auto; padding:0 1rem; }

/* Navbar */
.navbar { background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:1000;}
.nav-container { display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.logo { font-size:1.5rem; font-weight:bold; text-decoration:none; color:var(--primary); }
.nav-toggle { display:none; font-size:1.5rem; background:none; border:none; }
.nav-menu { display:flex; gap:1rem; align-items:center; }
.nav-menu a { text-decoration:none; color:var(--primary); padding:.5rem; }
.btn, .btn-outline { border-radius:var(--radius); padding:.5rem 1rem; font-weight:bold; cursor:pointer; }
.btn { background:var(--accent); color:#fff; border:1px solid var(--accent); }
.btn:hover { background:#149174; }
.btn-outline { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn-outline:hover { background:var(--accent); color:#fff; }

/* Hero */
.hero { background:var(--light); padding:4rem 0; text-align:center; }
.hero h1 { font-size:2.5rem; margin-bottom:1rem; }
.hero p { font-size:1.1rem; margin-bottom:1.5rem; }

/* Slider */
.slider { position:relative; overflow:hidden; margin-bottom:2rem; }
.slider-container { display:flex; transition:transform .5s ease; }
.slide { min-width:100%; }
.slide img { width:100%; display:block; border-radius:var(--radius); }
.slide-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.3); color:#fff; border:none; padding:.5rem; cursor:pointer; font-size:1.5rem; border-radius:50%; }
.prev { left:1rem; } .next { right:1rem; }

/* Plans */
.plans { padding:2rem 0; text-align:center; }
.section-title { font-size:2rem; margin-bottom:1rem; }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.plan-card { background:#fff; padding:1.5rem; border-radius:var(--radius); box-shadow:0 2px 8px rgba(0,0,0,0.1); display:flex; flex-direction:column; }
.plan-card.featured { border:2px solid var(--accent); }
.plan-card h3 { margin-top:0; }
.plan-card .price { font-size:1.5rem; margin:1rem 0; color:var(--accent); }
.plan-card ul { list-style: none; padding:0; margin:0 0 1rem; text-align:right; }
.plan-card ul li { margin-bottom:.5rem; }
.plan-card button { margin-top:auto; }

/* Footer */
.footer { background:var(--primary); color:#fff; padding:2rem 0; text-align:center; }
.footer-content { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.socials img { width:24px; }

/* Modal */
.modal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; }
.modal-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); }
.modal-content { position:relative; background:#fff; max-width:400px; margin:5% auto; padding:1.5rem; border-radius:var(--radius); }
.modal-close { position:absolute; top:.5rem; right:.5rem; background:none; border:none; font-size:1.5rem; cursor:pointer; }
.auth-tabs { display:flex; }
.tab-btn { flex:1; padding:.5rem; background:#f0f0f0; border:none; cursor:pointer; }
.tab-btn.active { background:var(--accent); color:#fff; }
.auth-panel { display:none; margin-top:1rem; }
.auth-panel.active { display:block; }
.form-group { margin-bottom:1rem; text-align:right; }
.form-group label { display:block; margin-bottom:.25rem; }
.form-group input { width:100%; padding:.5rem; border:1px solid #ccc; border-radius:var(--radius); }

/* Responsive */
@media(max-width:768px){
  .nav-menu { display:none; flex-direction:column; background:#fff; position:absolute; top:100%; left:0; right:0; padding:1rem; }
  .nav-toggle { display:block; }
}