/* ══════════════════════════════════════════════════════════════
   INPL — Indonesian Natural Products Library (bespoke)
   Gaya: scientific database / biodiversity catalog (emerald + gold).
   Beda dari produk lain. Prefix: .in-
   ══════════════════════════════════════════════════════════════ */

:root {
  --in-emerald: #0f7b6c;
  --in-emerald-deep: #093f39;
  --in-leaf: #2fa98f;
  --in-gold: #c2922f;
  --in-ink: #13241f;
  --in-muted: #566b63;
  --in-soft: #eef6f3;
  --in-line: #dde9e4;
}

.in-main { background: #fff; color: var(--in-ink); }
.in-fill { display:inline-block; padding:2px 8px; border:1px dashed #c9a227; border-radius:6px; background:#fff8e1; color:#8a6d00; font-size:.85em; font-style:italic; }

.in-section { padding: 84px 0; }
.in-eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:12.5px; font-weight:700; color:var(--in-emerald); margin-bottom:12px; }
.in-h2 { font-family:'DM Serif Display',serif; font-size:34px; line-height:1.18; color:var(--in-ink); margin-bottom:16px; }
.in-lead { font-size:17px; line-height:1.7; color:var(--in-muted); }

/* 1. HERO */
.in-hero {
  position:relative; overflow:hidden; padding:60px 0 72px;
  background:
    radial-gradient(700px 420px at 100% 0%, rgba(47,169,143,0.18), transparent 60%),
    linear-gradient(180deg, var(--in-soft) 0%, #ffffff 100%);
}
.in-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(15,123,108,0.10) 1.4px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(620px 360px at 80% 10%, #000, transparent 75%);
}
.in-hero-inner { position:relative; display:grid; grid-template-columns:1fr 1.08fr; gap:48px; align-items:center; }
.in-breadcrumb { font-size:13px; color:var(--in-muted); list-style:none; display:flex; gap:8px; padding:0; margin:0 0 22px; flex-wrap:wrap; }
.in-breadcrumb a { color:var(--in-emerald); text-decoration:none; }
.in-breadcrumb a:hover { text-decoration:underline; }
.in-breadcrumb .sep { color:var(--in-line); }
.in-hero h1 { font-family:'DM Serif Display',serif; font-size:44px; line-height:1.1; color:var(--in-ink); margin-bottom:18px; }
.in-hero h1 em { font-style:normal; color:var(--in-emerald); }
.in-hero-sub { font-size:17.5px; line-height:1.65; color:var(--in-muted); max-width:500px; margin-bottom:26px; }
.in-pill-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.in-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:999px; font-size:13px; font-weight:600; background:#fff; border:1px solid var(--in-line); color:var(--in-emerald-deep); }
.in-pill .dot { width:8px; height:8px; border-radius:50%; background:var(--in-leaf); box-shadow:0 0 0 4px rgba(47,169,143,.18); }
.in-cta-row { display:flex; flex-wrap:wrap; gap:14px; }
.in-btn-primary { padding:14px 30px; border-radius:12px; background:var(--in-emerald); color:#fff; font-weight:700; text-decoration:none; transition:transform .15s ease, background .2s ease; box-shadow:0 12px 26px rgba(15,123,108,.28); }
.in-btn-primary:hover { transform:translateY(-2px); background:var(--in-emerald-deep); color:#fff; }
.in-btn-ghost { padding:14px 30px; border-radius:12px; background:#fff; border:1px solid var(--in-line); color:var(--in-ink); font-weight:600; text-decoration:none; transition:border-color .2s ease; }
.in-btn-ghost:hover { border-color:var(--in-emerald); color:var(--in-emerald-deep); }

/* Browser mockup */
.in-browser { border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--in-line); box-shadow:0 30px 70px rgba(9,63,57,.18); }
.in-browser-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; background:#eef4f2; border-bottom:1px solid var(--in-line); }
.in-browser-bar i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.in-browser-bar i:nth-child(1){background:#ff5f57;} .in-browser-bar i:nth-child(2){background:#febc2e;} .in-browser-bar i:nth-child(3){background:#28c840;}
.in-browser-url { margin-left:12px; font-size:12px; color:var(--in-muted); background:#fff; border:1px solid var(--in-line); border-radius:6px; padding:4px 12px; }
.in-browser img { width:100%; height:auto; display:block; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }

/* 2. WHAT IT IS band */
.in-about { background:var(--in-emerald-deep); color:#fff; }
.in-about .in-eyebrow { color:#9fe0d2; }
.in-about-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.in-about h2 { font-family:'DM Serif Display',serif; font-size:30px; line-height:1.3; margin-bottom:14px; }
.in-about p { font-size:16px; line-height:1.75; color:rgba(255,255,255,.85); margin:0; }

/* 3. WHAT'S INSIDE / features */
.in-feat-head { max-width:620px; margin-bottom:46px; }
.in-feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.in-feat { padding:28px 26px; border-radius:18px; background:var(--in-soft); border:1px solid var(--in-line); transition:transform .2s ease, box-shadow .2s ease; }
.in-feat:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(9,63,57,.1); }
.in-feat-ic { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--in-line); font-size:24px; margin-bottom:16px; }
.in-feat h3 { font-size:18px; color:var(--in-ink); margin-bottom:8px; }
.in-feat p { font-size:14.5px; line-height:1.6; color:var(--in-muted); margin:0; }

/* 4. WHO IT'S FOR */
.in-aud { background:var(--in-soft); border-top:1px solid var(--in-line); border-bottom:1px solid var(--in-line); }
.in-aud-head { text-align:center; max-width:620px; margin:0 auto 46px; }
.in-aud-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.in-aud-card { background:#fff; border:1px solid var(--in-line); border-radius:18px; padding:30px 26px; text-align:center; }
.in-aud-emoji { font-size:40px; margin-bottom:14px; }
.in-aud-card h3 { font-size:18px; color:var(--in-emerald-deep); margin-bottom:8px; }
.in-aud-card p { font-size:14.5px; line-height:1.6; color:var(--in-muted); margin:0; }

/* 5. WHY IT MATTERS (gold accent) */
.in-why { background:linear-gradient(135deg,#fbf4e2 0%, #f7edd2 100%); border-top:1px solid #ecd9a8; border-bottom:1px solid #ecd9a8; }
.in-why-grid { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
.in-why-badge { font-size:54px; }
.in-why h2 { font-family:'DM Serif Display',serif; font-size:28px; color:#7a5d12; margin-bottom:10px; }
.in-why p { font-size:16px; color:#7c641f; line-height:1.7; margin:0; max-width:760px; }

/* 6. CTA */
.in-cta { background: radial-gradient(680px 340px at 50% -20%, rgba(47,169,143,.3), transparent 60%), linear-gradient(135deg, var(--in-emerald) 0%, var(--in-emerald-deep) 100%); text-align:center; color:#fff; }
.in-cta-inner { max-width:660px; margin:0 auto; padding:0 20px; }
.in-cta h2 { font-family:'DM Serif Display',serif; font-size:34px; margin-bottom:14px; }
.in-cta p { font-size:16.5px; color:rgba(255,255,255,.85); line-height:1.7; margin-bottom:30px; }
.in-cta .in-cta-row { justify-content:center; }
.in-cta .in-btn-primary { background:#fff; color:var(--in-emerald-deep); box-shadow:0 12px 26px rgba(0,0,0,.2); }
.in-cta .in-btn-primary:hover { background:var(--in-soft); color:var(--in-emerald-deep); }
.in-cta .in-btn-ghost { background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.in-cta .in-btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; }

/* RESPONSIVE */
@media (max-width:992px){
  .in-hero-inner, .in-about-grid { grid-template-columns:1fr; gap:36px; }
  .in-feat-grid, .in-aud-grid { grid-template-columns:1fr 1fr; }
  .in-hero h1 { font-size:36px; }
}
@media (max-width:600px){
  .in-section { padding:56px 0; }
  .in-feat-grid, .in-aud-grid { grid-template-columns:1fr; }
  .in-why-grid { grid-template-columns:1fr; text-align:center; }
  .in-hero h1 { font-size:30px; }
  .in-h2 { font-size:27px; }
}