/* Beranda (/) */
.hero { padding-block: var(--space-5) var(--space-7); }
.hero__text { display: grid; gap: var(--space-3); }
.hero__text .lead { font-size: 18px; }
.hero__actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.hero__price { font-size: 15px; color: var(--color-ink-2); }
.hero__visual { margin-top: var(--space-5); display: grid; gap: var(--space-1); justify-items: start; }

/* Demo hero: curhat, klik Generate, CV muncul. Keadaan dasar = .is-done (CV tampil, jalan tanpa JS). */
.demo { position: relative; width: 100%; padding-bottom: calc(var(--space-8) + var(--space-6)); }
.demo .tag { max-width: 280px; }
.demo__stage { display: grid; }
.demo__stage > * { grid-area: 1 / 1; }
.demo__form {
  position: relative; align-content: start; display: grid; gap: var(--space-3); background: var(--color-surface);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-l); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-2);
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), visibility 0s linear var(--duration-base);
}
.demo:not(.is-manual) .demo__form { cursor: text; }
.demo:not(.is-manual) .demo__form .btn { pointer-events: none; }
.demo__text {
  display: block; width: 100%; resize: none; min-height: 160px; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.5;
  color: var(--color-ink); background: var(--color-paper); border: 1.5px solid var(--color-line-strong); border-radius: var(--radius-m);
  overflow-wrap: anywhere; transition: border-color var(--duration-fast) var(--ease), outline-color var(--duration-fast) var(--ease);
}
.demo__text::placeholder { color: var(--color-ink-3); }
.demo__text:focus-visible { outline: 3px solid var(--color-accent); border-color: var(--color-ink); }
.is-typing .demo__text { border-color: var(--color-ink); outline: 3px solid var(--color-accent); }
.is-press .demo__form .btn { transform: translateY(1px); background: var(--color-accent-hover); }
.demo__pointer { position: absolute; right: 22%; bottom: 6px; opacity: 0; transform: translate(56px, 64px); pointer-events: none; transition: transform 600ms var(--ease), opacity var(--duration-base) var(--ease); }
.demo__pointer path { fill: var(--color-surface); stroke: var(--color-ink); }
.is-aim .demo__pointer { opacity: 1; transform: translate(0, 0); }
.is-press .demo__pointer { transform: translate(0, 2px) scale(0.9); transition-duration: 120ms; }
.demo__cv { opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none; transition: opacity var(--duration-base) var(--ease), transform 420ms var(--ease); }
.demo .rise { opacity: 0; transform: translateY(6px); transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.rise[data-i="0"] { --i: 0; }
.rise[data-i="1"] { --i: 1; }
.rise[data-i="2"] { --i: 2; }
.rise[data-i="3"] { --i: 3; }
.rise[data-i="4"] { --i: 4; }
.rise[data-i="5"] { --i: 5; }
.rise[data-i="6"] { --i: 6; }
.rise[data-i="7"] { --i: 7; }
.rise[data-i="8"] { --i: 8; }
.demo__tag { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.is-done .demo__form { opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden; }
.is-done .demo__cv { opacity: 1; transform: rotate(-1deg); }
.is-done .rise { opacity: 1; transform: none; transition-delay: calc(var(--i) * 90ms + 200ms); }
.is-done .demo__tag { opacity: 1; transform: none; transition-delay: 1100ms; }
.demo__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }

/* Cara kerja */
.steps-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; border-top: 1px solid var(--color-ink); }
.steps-list li { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); padding-block: var(--space-5); border-bottom: 1px solid var(--color-line-strong); }
.steps-list .num { font: 700 var(--step-3)/1 var(--font-display); letter-spacing: -0.03em; }
.steps-list p { color: var(--color-ink-2); margin-top: var(--space-1); }

/* Perbandingan tulisan → poin */
.compare { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.compare__box { background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--radius-l); padding: var(--space-4) var(--space-5); }
.compare__box .eyebrow { margin-bottom: var(--space-2); display: block; }
.compare__box--out { background: var(--color-mark-soft); border-color: var(--color-ink); }
.compare__arrow { font: 700 var(--step-1) var(--font-display); padding-left: var(--space-5); }

/* Harga */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line-strong); }
.rows li { padding-block: var(--space-3); border-bottom: 1px solid var(--color-line); }
.pricing { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.plan { background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--radius-l); padding: var(--space-5); position: relative; }
.plan h3 { font-size: var(--step-1); }
.plan__sub { color: var(--color-ink-3); font-size: 15px; margin-bottom: var(--space-3); }
.plan--free { background: transparent; }
.plan--paid { border: 2px solid var(--color-ink); box-shadow: var(--shadow-2); display: grid; gap: var(--space-3); }
.plan__flag { position: absolute; top: -14px; left: var(--space-5); background: var(--color-mark); border: 1.5px solid var(--color-ink); border-radius: var(--radius-s); padding: 2px 10px; font: 600 var(--step--1)/1.6 var(--font-body); }
.plan__price { font: 700 clamp(3.25rem, 17vw, 5rem)/0.95 var(--font-display); letter-spacing: -0.04em; }
.plan__price small { display: block; margin-top: var(--space-2); font: 400 15px/1.4 var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }

/* Tanya jawab */
.faq { margin-top: var(--space-5); border-top: 1px solid var(--color-ink); }
.faq details { border-bottom: 1px solid var(--color-line-strong); }
.faq summary { list-style: none; cursor: pointer; padding-block: var(--space-4); font-weight: 600; min-height: 44px; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 24px/1 var(--font-body); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: var(--space-4); color: var(--color-ink-2); }

/* Band ajakan akhir */
.band { position: relative; isolation: isolate; overflow: hidden; background: var(--color-brand); color: var(--color-paper); padding-block: var(--space-8); }
.band__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-brand); opacity: 0.86; }
.band__inner { display: grid; gap: var(--space-3); justify-items: start; }
.band .btn { margin-top: var(--space-3); border-color: var(--color-paper); }
.band :focus-visible { outline-color: var(--color-paper); }

@media (min-width: 640px) {
  .hero__actions { grid-template-columns: auto auto; justify-content: start; }
  .compare { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .compare__arrow { padding: 0; }
}
@media (min-width: 960px) {
  .hero { padding-block: var(--space-8); }
  .hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; }
  .hero__visual { margin-top: 0; }
  .steps-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-7); }
  .pricing { grid-template-columns: 1fr 1.3fr; align-items: start; gap: var(--space-6); }
}