/* ─── ASOSIY O'ZGARUVCHILAR ─── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green: #2D7A4F;
  --green-light: #4CAF73;
  --green-bg: #E8F5EE;
  --ink: #1A1A1A;
  --ink3: #555555;
  --white: #FFFFFF;
  --border: #E2EDE7;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; 
  padding-top: 64px;
}

/* ─── YUQORI QISM (NAVBAR) ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: 64px; display: flex; align-items: center;
  padding: 0 5vw;
}
.logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 18px; color: var(--ink); text-decoration: none;
}
.logo-icon {
  width: 32px; height: 32px; background: var(--green);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 14px; transition: transform .3s;
}
.logo:hover .logo-icon { transform: rotate(-10deg) scale(1.1); }
.logo span { color: var(--green); }

/* ─── HERO SARLAVHA QISMI ─── */
.header-section {
  padding: 80px 5vw 60px 5vw;
}
.sec-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-bg); color: var(--green);
  padding: 6px 16px; font-size: 12px;
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 20px; 
}
.sec-h {
  font-size: clamp(36px, 6vw, 64px); font-weight: 800;
  line-height: 1.1; color: var(--ink); margin-bottom: 20px; letter-spacing: -2px;
}
.sec-p {
  font-size: clamp(16px, 2vw, 20px); color: var(--ink3); line-height: 1.6;
  font-weight: 300; max-width: 800px;
}

/* ─── VIDEO QISMI ─── */
.video-section {
  width: 100vw;
  background: #000;
  display: flex;
}
.video-section iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  max-height: 85vh;
}

/* ─── MATN QISMI ─── */
.text-section {
  padding: 80px 5vw 40px 5vw;
  max-width: 1200px;
}
.text-section h3 {
  font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: var(--ink); 
  margin-bottom: 24px; letter-spacing: -1px;
}
.text-section p, .text-section li {
  font-size: 18px; font-weight: 300; color: var(--ink3); 
  line-height: 1.8; margin-bottom: 20px;
}
.text-section ul {
  margin-left: 20px; margin-bottom: 30px;
}
.text-section li {
  padding-left: 10px;
}

/* ─── PDF LINK QISMI ─── */
.pdf-section {
  padding: 0 5vw 100px 5vw;
}
.btn-green {
  padding: 18px 40px; font-size: 16px; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 12px;
  background: var(--green); color: #fff; border: none; transition: background .2s ease;
}
.btn-green:hover {
  background: var(--green-light);
}
.btn-green i { transition: transform .25s; }
.btn-green:hover i { transform: translateX(4px); }

@media (max-width: 768px) {
  .header-section { padding: 50px 5vw 40px 5vw; }
  .text-section { padding: 50px 5vw 20px 5vw; }
  .pdf-section { padding: 0 5vw 60px 5vw; }
}