/* style.css */
:root {
  --bg-dark: #0f0f0f;
  --bg-light: #1f1f1f;
  --text: #ececec;
  --accent: #ff8c00;
  --accent-light: #ffaa33;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg-dark); color:var(--text); font-family:'Segoe UI',sans-serif; }
.container { width:90%; max-width:1200px; margin:0 auto; }
a { color:inherit; text-decoration:none; }

/* Top Navigation */
.top-nav { position:fixed; top:0; width:100%; background:rgba(15,15,15,0.9); backdrop-filter:blur(10px); z-index:1000; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.logo { font-size:1.75rem; font-weight:bold; color:var(--accent); }
.top-nav nav a { margin-left:1.5rem; font-weight:500; transition:color .2s; }
.top-nav nav a:hover { color:var(--accent-light); }

/* Hero */
.hero { position:relative; height:70vh; background:url('hero-bg.jpg') center/cover no-repeat; display:flex; align-items:center; }
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); }
.hero-content { position:relative; color:#fff; max-width:600px; padding:2rem; }
.hero-content h1 { font-size:3rem; margin-bottom:1rem; }
.hero-content p { font-size:1.25rem; margin-bottom:1.5rem; }
.hero-buttons .btn { margin-right:1rem; }

/* Buttons */
.btn { display:inline-block; padding:0.75rem 1.5rem; border-radius:5px; font-weight:600; transition:background .2s, opacity .2s; }
.btn-primary { background:var(--accent); color:#000; }
.btn-primary:hover { opacity:0.8; }
.btn-secondary { background:transparent; border:2px solid var(--accent); color:var(--accent); }
.btn-secondary:hover { background:var(--accent); color:#000; }

/* Features Sections */
.features { padding:5rem 0; }
.features.alt { background:var(--bg-light); }
.section-title { text-align:center; font-size:2.5rem; margin-bottom:2rem; color:var(--accent); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; }
.feature-card { background:var(--bg-light); padding:2rem; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,0.5); transition:transform .2s; }
.feature-card:hover { transform:translateY(-5px); }
.feature-icon { font-size:2.5rem; margin-bottom:1rem; color:var(--accent); }
.feature-card h3 { font-size:1.5rem; margin-bottom:0.75rem; }
.feature-card p { line-height:1.6; }

/* About */
.about { padding:5rem 0; }
.about p { max-width:800px; margin:1rem auto; font-size:1.125rem; line-height:1.8; }

/* Newsletter */
.newsletter { padding:4rem 0; background:var(--bg-light); text-align:center; }
.newsletter h2 { font-size:2rem; margin-bottom:1rem; color:var(--accent); }
.newsletter p { font-size:1rem; margin-bottom:1.5rem; }
.newsletter-form { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
.newsletter-form input { padding:0.75rem 1rem; border-radius:5px; border:none; width:300px; }
.newsletter-form button { padding:0.75rem 1.5rem; border:none; border-radius:5px; background:var(--accent); color:#000; font-weight:600; cursor:pointer; }

/* Footer */
.footer { background:var(--bg-light); padding:2rem 0; text-align:center; }
.footer-flex p { font-size:0.9rem; }

/* Responsive */
@media(max-width:768px) {
  .top-nav nav a { margin-left:1rem; }
  .hero-content h1 { font-size:2.25rem; }
  .features-grid { grid-template-columns:1fr; }
  .newsletter-form { flex-direction:column; }
}