/* ══════════════════════════════════════════════════════════════
   DERMOREE — Scientific Marketplace (bespoke)
   Gaya: marketplace / commerce (coral + amber, hangat & cerah).
   Beda dari produk lain. Prefix: .dr-
   ══════════════════════════════════════════════════════════════ */

:root {
  --dr-coral: #ef5b3c;
  --dr-coral-deep: #c23b21;
  --dr-amber: #f5a623;
  --dr-ink: #2c1f1a;
  --dr-muted: #6e5a51;
  --dr-cream: #fff5ee;
  --dr-line: #f1e2d7;
}

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

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

/* 1. HERO */
.dr-hero {
  position:relative; overflow:hidden; padding:60px 0 72px;
  background:
    radial-gradient(640px 380px at 100% 0%, rgba(245,166,35,0.22), transparent 60%),
    radial-gradient(560px 360px at 0% 100%, rgba(239,91,60,0.14), transparent 60%),
    linear-gradient(170deg, var(--dr-cream) 0%, #ffffff 100%);
}
.dr-hero-inner { position:relative; display:grid; grid-template-columns:1fr 1.08fr; gap:48px; align-items:center; }
.dr-breadcrumb { font-size:13px; color:var(--dr-muted); list-style:none; display:flex; gap:8px; padding:0; margin:0 0 22px; flex-wrap:wrap; }
.dr-breadcrumb a { color:var(--dr-coral-deep); text-decoration:none; }
.dr-breadcrumb a:hover { text-decoration:underline; }
.dr-breadcrumb .sep { color:var(--dr-line); }
.dr-hero h1 { font-family:'DM Serif Display',serif; font-size:45px; line-height:1.08; color:var(--dr-ink); margin-bottom:18px; }
.dr-hero h1 em { font-style:normal; color:var(--dr-coral); }
.dr-hero-sub { font-size:17.5px; line-height:1.65; color:var(--dr-muted); max-width:510px; margin-bottom:26px; }
.dr-pill-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.dr-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(--dr-line); color:var(--dr-coral-deep); }
.dr-pill--new { background:#fdeee0; border-color:#f6cf9c; color:#9a5a14; }
.dr-cta-row { display:flex; flex-wrap:wrap; gap:14px; }
.dr-btn-primary { padding:14px 30px; border-radius:12px; background:var(--dr-coral); color:#fff; font-weight:700; text-decoration:none; transition:transform .15s ease, background .2s ease; box-shadow:0 12px 26px rgba(239,91,60,.3); }
.dr-btn-primary:hover { transform:translateY(-2px); background:var(--dr-coral-deep); color:#fff; }
.dr-btn-ghost { padding:14px 30px; border-radius:12px; background:#fff; border:1px solid var(--dr-line); color:var(--dr-ink); font-weight:600; text-decoration:none; transition:border-color .2s ease; }
.dr-btn-ghost:hover { border-color:var(--dr-coral); color:var(--dr-coral-deep); }

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

/* 2. PROPOSITION band */
.dr-prop { background:var(--dr-ink); color:#fff; }
.dr-prop .dr-eyebrow { color:#f6b58f; }
.dr-prop-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.dr-prop h2 { font-family:'DM Serif Display',serif; font-size:30px; line-height:1.3; margin-bottom:14px; }
.dr-prop p { font-size:16px; line-height:1.75; color:rgba(255,255,255,.84); margin:0; }

/* 3. HOW IT WORKS (lab -> market) */
.dr-flow-head { max-width:620px; margin-bottom:46px; }
.dr-flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.dr-flow { position:relative; padding:28px 24px; border-radius:18px; background:var(--dr-cream); border:1px solid var(--dr-line); }
.dr-flow-num { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--dr-coral); color:#fff; font-weight:800; margin-bottom:14px; }
.dr-flow h3 { font-size:17px; color:var(--dr-ink); margin-bottom:8px; }
.dr-flow p { font-size:14.5px; line-height:1.6; color:var(--dr-muted); margin:0; }

/* 4. CATEGORIES */
.dr-cat { background:var(--dr-cream); border-top:1px solid var(--dr-line); border-bottom:1px solid var(--dr-line); }
.dr-cat-head { text-align:center; max-width:620px; margin:0 auto 46px; }
.dr-cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.dr-cat-card { background:#fff; border:1px solid var(--dr-line); border-radius:18px; padding:26px 20px; text-align:center; transition:transform .2s ease, box-shadow .2s ease; }
.dr-cat-card:hover { transform:translateY(-4px); box-shadow:0 16px 32px rgba(194,59,33,.1); }
.dr-cat-emoji { font-size:34px; margin-bottom:12px; }
.dr-cat-card h3 { font-size:16px; color:var(--dr-ink); margin-bottom:6px; }
.dr-cat-card p { font-size:13.5px; line-height:1.55; color:var(--dr-muted); margin:0; }

/* 5. AUDIENCE split */
.dr-serve-head { max-width:620px; margin-bottom:46px; }
.dr-serve-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dr-serve { padding:30px 28px; border-radius:18px; border:1px solid var(--dr-line); background:#fff; }
.dr-serve-ic { width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--dr-cream); font-size:26px; margin-bottom:16px; }
.dr-serve h3 { font-size:20px; color:var(--dr-coral-deep); margin-bottom:8px; }
.dr-serve p { font-size:15px; line-height:1.65; color:var(--dr-muted); margin:0; }

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

/* RESPONSIVE */
@media (max-width:992px){
  .dr-hero-inner, .dr-prop-grid, .dr-serve-grid { grid-template-columns:1fr; gap:36px; }
  .dr-flow-grid { grid-template-columns:1fr; }
  .dr-cat-grid { grid-template-columns:1fr 1fr; }
  .dr-hero h1 { font-size:37px; }
}
@media (max-width:600px){
  .dr-section { padding:56px 0; }
  .dr-cat-grid { grid-template-columns:1fr 1fr; }
  .dr-hero h1 { font-size:30px; }
  .dr-h2 { font-size:27px; }
}