/* ===================================================
   PINDU LANDING PAGE — STYLES
   =================================================== */

/* --- 1. RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg: #FFFFFF;
  --color-ink: #000000;
  --color-muted: #6F6F6F;
  --color-subtle: #A8A8A8;
  --color-border: #E8E8E4;
  --color-surface: #F5F5F2;
  --color-card: #FAFAF8;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --section-py: 120px;
  --container-max: 1200px;
  --container-narrow: 720px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img, video { display: block; max-width: 100%; }

/* --- 2. ANIMATIONS --- */
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-rise        { opacity: 0; animation: fade-rise 0.9s var(--ease) 0.1s forwards; }
.fade-rise-delay  { opacity: 0; animation: fade-rise 0.9s var(--ease) 0.3s forwards; }
.fade-rise-delay-2{ opacity: 0; animation: fade-rise 0.9s var(--ease) 0.5s forwards; }

.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-card {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-card.visible { opacity: 1; transform: translateY(0); }

.reveal-line {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-line.visible { opacity: 1; transform: translateY(0); }

.btn-loading svg { animation: spin 0.8s linear infinite; }

/* --- 3. LAYOUT --- */
.container {
  width: 100%; max-width: var(--container-max);
  margin: 0 auto; padding: 0 32px;
}
.container-narrow { max-width: var(--container-narrow); }
.section { padding: var(--section-py) 0; }
.centered { text-align: center; }

/* --- 4. BUTTONS --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em; border: none; cursor: pointer; border-radius: 100px;
  transition: transform 0.2s var(--ease), opacity 0.2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover  { transform: scale(1.03); }
.btn:active { transform: scale(0.98); }
.btn-dark   { background: linear-gradient(90deg, #EC7668, #EA587C); color: var(--color-bg); padding: 12px 28px; }

/* --- 5. SECTION TYPOGRAPHY --- */
.section-label {
  display: block; font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-subtle); margin-bottom: 24px;
}
.section-headline {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 400; line-height: 1.0;
  letter-spacing: -1.5px; color: var(--color-ink); margin-bottom: 32px;
}
.section-headline em {
  font-style: italic;
  background: linear-gradient(90deg, #EC7668, #EA587C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-body {
  font-size: 17px; line-height: 1.75;
  color: var(--color-muted); margin-bottom: 20px; max-width: 640px;
}

/* --- 6. NAVBAR --- */
.navbar { position: absolute; top: 0; left: 0; right: 0; z-index: 100; padding: 28px 0; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--container-max); margin: 0 auto; padding: 0 32px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 100px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-link { font-size: 13px; color: var(--color-muted); transition: color 0.2s ease; }
.nav-link:hover { color: var(--color-ink); }
.nav-social { color: var(--color-muted); transition: color 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nav-social:hover { color: var(--color-ink); transform: scale(1.05); }
.nav-cta { padding: 10px 22px; font-size: 13px; }

/* --- 7. HERO --- */
.hero {
  position: relative; min-height: 100svh; width: 100%;
  overflow: hidden; display: flex; flex-direction: column;
  background: var(--color-bg);
}
.video-wrapper { position: absolute; inset: auto 0 0 0; top: 240px; z-index: 0; pointer-events: none; }
.hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.video-gradient-top {
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(to bottom, var(--color-bg), transparent); z-index: 1;
}
.video-gradient-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to top, var(--color-bg), transparent); z-index: 1;
}
.hero-content {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 24px; padding-top: calc(12rem - 75px); padding-bottom: 160px; flex: 1;
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 400; line-height: 0.97;
  letter-spacing: -2.5px; color: var(--color-ink); max-width: 900px;
}
.hero-headline em {
  font-style: italic;
  background: linear-gradient(90deg, #EC7668, #EA587C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-description { font-size: clamp(15px, 2vw, 18px); line-height: 1.7; color: var(--color-muted); max-width: 520px; margin-top: 32px; }
.hero-cta { margin-top: 48px; padding: 18px 56px; font-size: 15px; }

/* --- 8-9. PROBLEM & CREATES --- */
.section-problem { border-top: 1px solid var(--color-border); }
.section-creates { background: var(--color-surface); }

/* --- 10. THEMES --- */
.section-themes { background: #FFF5F6; border-top: none; }
.section-themes .section-headline { margin-bottom: 64px; }
.themes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px; border: none; background: transparent;
}
.theme-card { 
  display: flex; align-items: center; gap: 28px;
  padding: 36px 40px; border-radius: 24px; transition: transform 0.3s ease; 
}
.theme-card-pink { background: #FFFFFF; box-shadow: 0 8px 32px rgba(0,0,0,0.04); }
.theme-card-yellow { background: #FFFFFF; box-shadow: 0 8px 32px rgba(0,0,0,0.04); }
.theme-card:hover { transform: translateY(-4px); }
.theme-img { width: 140px; height: auto; flex-shrink: 0; }
.theme-content { flex: 1; }
.theme-title { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: -0.5px; color: var(--color-ink); margin-bottom: 8px; line-height: 1.1; }
.theme-body { font-size: 16px; line-height: 1.5; color: var(--color-ink); opacity: 0.8; }

/* --- 11. WHY IT MATTERS --- */
.section-why { background: var(--color-surface); text-align: center; }
.section-why .section-body { margin: 0 auto; text-align: center; }
.why-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.25;
  letter-spacing: -1px; color: var(--color-ink); margin-bottom: 40px; quotes: none;
}

/* --- 12. MANIFESTO --- */
.section-manifesto { border-top: 1px solid var(--color-border); }
.manifesto-body { margin-top: 16px; }
.manifesto-para {
  font-family: var(--font-display); font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 400; line-height: 1.5; color: var(--color-muted);
  margin-bottom: 28px; letter-spacing: -0.3px;
}
.text-gradient {
  background: linear-gradient(90deg, #EC7668, #EA587C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.manifesto-closing {
  color: var(--color-ink); font-size: clamp(26px, 3.5vw, 40px);
  padding-top: 20px; border-top: 1px solid var(--color-border); margin-top: 16px;
}

/* --- 13. SIGNUP --- */
.section-signup { background: var(--color-surface); border-top: 1px solid var(--color-border); text-align: center; }
.section-signup .section-label,
.section-signup .section-body { text-align: center; margin: 0 auto 48px; }
.signup-form { width: 100%; max-width: 480px; margin: 0 auto; }
.form-row { display: flex; gap: 10px; align-items: center; }
.form-input {
  flex: 1; height: 52px; padding: 0 20px;
  font-family: var(--font-body); font-size: 15px; color: var(--color-ink);
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  border-radius: 100px; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input::placeholder { color: var(--color-subtle); }
.form-input:focus { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.form-submit { height: 52px; padding: 0 28px; font-size: 15px; flex-shrink: 0; }
.form-message { margin-top: 16px; font-size: 14px; text-align: center; border-radius: 8px; padding: 12px 16px; }
.form-message.success { background: #F0FDF4; color: #166534; }
.form-message.error   { background: #FFF1F2; color: #9F1239; }
.form-note { margin-top: 20px; font-size: 12px; color: var(--color-subtle); letter-spacing: 0.02em; }

/* --- 14. FOOTER --- */
.footer { padding: 48px 32px 32px; border-top: 1px solid var(--color-border); text-align: center; font-size: 13px; color: var(--color-subtle); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-social { display: flex; gap: 16px; }
.social-link { color: var(--color-muted); transition: color 0.2s ease; display: flex; }
.social-link:hover { color: var(--color-ink); }

/* --- 15. RESPONSIVE --- */
@media (max-width: 768px) {
  :root { --section-py: 80px; }
  .navbar { padding: 20px 0; }
  .nav-logo-img { height: 50px; }
  .nav-links { display: none; }
  .hero-content { padding-top: 160px; padding-bottom: 100px; }
  .themes-grid { grid-template-columns: 1fr; }
  .theme-card { padding: 32px 24px; flex-direction: column; text-align: center; gap: 20px; }
  .theme-img { width: 100px; }
  .form-row { flex-direction: column; }
  .form-input, .form-submit { width: 100%; }
}
@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }
  .hero-cta { padding: 16px 40px; }
}