/* ===== NOOR STUDIO — GLOBAL STYLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@600;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:#0a0616;
  --bg-2:#0f0a1e;
  --card:#161029;
  --card-2:#1a103c;
  --border:rgba(121,40,202,0.25);
  --primary:#7928ca;
  --primary-2:#9d4edd;
  --accent:#ff2e93;
  --green:#25d366;
  --email:#a8ff8e;
  --text:#ffffff;
  --muted:#a8a3b8;
  --grad:linear-gradient(135deg,#7928ca 0%,#ff2e93 100%);
  --grad-soft:linear-gradient(135deg,rgba(121,40,202,0.15),rgba(255,46,147,0.1));
}

html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body::before {
  content:'';
  position:fixed;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:radial-gradient(circle at 20% 20%, rgba(121,40,202,0.15), transparent 40%),
             radial-gradient(circle at 80% 80%, rgba(255,46,147,0.08), transparent 40%);
  z-index:-1;
  pointer-events:none;
}

/* ===== NAVBAR ===== */
.nav {
  background:rgba(15,10,30,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:16px 30px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  width: 100%;
}

.logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:1.3rem;
  color:#fff;
  text-decoration:none;
  letter-spacing:-0.5px;
}

.logo-mark {
  width:36px; height:36px;
  background:var(--grad);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  font-weight:900;
  box-shadow:0 4px 20px rgba(121,40,202,0.4);
}

.nav-links {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

.nav-links a {
  color:var(--muted);
  text-decoration:none;
  padding:9px 16px;
  border-radius:8px;
  font-size:0.92rem;
  font-weight:500;
  transition:all 0.25s ease;
  position:relative;
}

.nav-links a:hover {
  color:#fff;
  background:rgba(121,40,202,0.15);
}

.nav-links a.active {
  color:#fff;
  background:var(--grad);
  font-weight:600;
  box-shadow:0 4px 20px rgba(121,40,202,0.35);
}

/* ===== CONTAINER ===== */
.container {
  max-width:1100px;
  margin:0 auto;
  padding:70px 25px;
}

/* ===== HERO SPLIT ===== */
.hero-split {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  text-align:left;
  padding:40px 0;
}

.hero-text { flex:1; }
.hero-image { flex:1; }

.hero-image img {
  width:100%;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(121,40,202,0.3);
  border:1px solid rgba(121,40,202,0.3);
}

.badge-pill {
  display:inline-block;
  background:var(--grad-soft);
  border:1px solid var(--border);
  color:#d4b8f0;
  padding:8px 18px;
  border-radius:100px;
  font-size:0.85rem;
  font-weight:500;
  margin-bottom:24px;
}

.hero-text h1 {
  font-family:'Poppins',sans-serif;
  font-size:clamp(2rem, 5vw, 3rem);
  font-weight:800;
  line-height:1.2;
  margin-bottom:20px;
}

.grad-text {
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.subtitle {
  font-size:1.05rem;
  color:var(--muted);
  margin-bottom:30px;
}

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  border:none;
  cursor:pointer;
  margin:6px;
}

.btn-primary {
  background:var(--grad);
  color:#fff;
  box-shadow:0 8px 24px rgba(121,40,202,0.35);
}

.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(121,40,202,0.5);
}

/* Email Button — Abhi ke liye main */
.btn-email {
  background:linear-gradient(135deg, #a8ff8e, #7fff5e);
  color:#0f0a1e;
  box-shadow:0 8px 24px rgba(168,255,142,0.25);
}

.btn-email:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(168,255,142,0.4);
  opacity:0.95;
}

/* WhatsApp Button — Baad mein aayega */
.btn-whatsapp {
  background:var(--green);
  color:#fff;
  box-shadow:0 8px 24px rgba(37,211,102,0.3);
}

.btn-whatsapp:hover {
  background:#1fb955;
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(37,211,102,0.45);
}

/* ===== STATS ===== */
.stats {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:16px;
  margin:40px 0;
}

.stat {
  background:var(--grad-soft);
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px 16px;
  text-align:center;
}

.stat-num {
  font-family:'Poppins',sans-serif;
  font-size:1.5rem;
  font-weight:800;
  color:#d4bfff;
  margin-bottom:5px;
}

.stat-label {
  color:var(--muted);
  font-size:0.85rem;
}

/* ===== SECTION HEADINGS ===== */
.section-title {
  font-family:'Poppins',sans-serif;
  font-size:clamp(1.5rem, 3vw, 2rem);
  font-weight:700;
  margin:50px 0 10px;
}

.section-sub {
  color:var(--muted);
  margin-bottom:24px;
}

/* ===== FEATURE LIST ===== */
.feature-list {
  list-style:none;
  display:grid;
  gap:12px;
}

.feature-list li {
  background:var(--card);
  border:1px solid var(--border);
  padding:16px 18px;
  border-radius:12px;
  font-size:0.95rem;
  display:flex;
  align-items:center;
  gap:10px;
  transition:all 0.25s ease;
}

.feature-list li:hover {
  border-color:var(--primary-2);
  transform:translateX(4px);
}

.check {
  color:#a8ff8e;
  font-weight:700;
  flex-shrink:0;
}

/* ===== CTA SECTION ===== */
.cta-section {
  text-align:center;
  padding:50px 25px;
  background:var(--grad-soft);
  border:1px solid var(--border);
  border-radius:20px;
  margin-top:50px;
}

.cta-section h2 {
  font-family:'Poppins',sans-serif;
  font-size:clamp(1.4rem, 3vw, 1.8rem);
  margin-bottom:12px;
}

.cta-section p {
  color:var(--muted);
  margin-bottom:22px;
}

/* ===== FOOTER ===== */
.footer {
  background:rgba(10,6,22,0.95);
  border-top:1px solid var(--border);
  padding:50px 25px 30px;
  margin-top:80px;
  text-align:center;
}

.footer-grid {
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:30px;
  text-align:left;
  margin-bottom:30px;
}

.footer h4 {
  font-family:'Poppins',sans-serif;
  font-size:1rem;
  margin-bottom:14px;
  color:#fff;
}

.footer a, .footer p {
  color:var(--muted);
  text-decoration:none;
  display:block;
  font-size:0.9rem;
  margin-bottom:8px;
  transition:color 0.2s;
}

.footer a:hover { color:var(--primary-2); }

.footer-bottom {
  border-top:1px solid var(--border);
  padding-top:24px;
  color:var(--muted);
  font-size:0.85rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width:800px) {
  .hero-split { flex-direction:column; text-align:center; }
  .stats { grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:700px) {
  .nav { padding:14px 18px; }
  .nav-links { width:100%; justify-content:center; }
  .nav-links a { padding:7px 12px; font-size:0.85rem; }
  .container { padding:50px 18px; }
  .btn { padding:12px 22px; font-size:0.9rem; }
}