/* Overview Eline, 19 Sep 2026: mengikuti tata letak, ritme, dan animasi landing
   muse.ai atas permintaan owner. Konten, maskot, warna aksen, dan ikon milik
   Eline (ikon 3D Fluent Emoji MIT, logo aplikasi Simple Icons CC0). Tanpa
   gradien. Semua animasi ringan (opacity/transform) dan hormat pada
   prefers-reduced-motion. */

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  min-height: calc(100svh - var(--header));
  place-items: center;
  margin-top: calc(var(--header) * -1);
  padding: calc(var(--header) + 48px) var(--gutter) 112px;
  text-align: center;
}

.hero-inner {
  display: grid;
  justify-items: center;
  gap: 28px;
  width: 100%;
  max-width: 940px;
}

.hero-mark {
  width: 96px;
  height: 64px;
  object-fit: contain;
}

.hero h1 {
  max-width: 900px;
  color: var(--ink);
  font-size: clamp(38px, 4.34vw, 62px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.rebus-avatar {
  display: inline-flex;
  width: 1.02em;
  height: 1.02em;
  margin: 0 0.02em;
  vertical-align: -0.2em;
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent-soft);
}

.rebus-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: avatar-breathe 4.8s var(--ease) infinite;
}

.rebus-slot {
  display: inline-flex;
  gap: 0.08em;
  margin: 0 0.06em;
  vertical-align: -0.18em;
}

.rebus-item {
  position: relative;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  overflow: hidden;
}

.rebus-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 320ms var(--ease), transform 420ms var(--ease);
}

.rebus-item img.is-leaving {
  opacity: 0;
  transform: translateY(-55%) scale(0.9);
}

.rebus-item img.is-entering {
  opacity: 0;
  transform: translateY(55%) scale(0.9);
}

.hero-access {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  max-width: 408px;
  margin-top: 12px;
}

.hero-access p {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 16px;
}

.hero-access small {
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}

.hero-access small a,
.feature-copy a {
  color: var(--accent-deep);
}

.hero-more {
  position: absolute;
  bottom: 32px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--pill);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(17, 17, 18, 0.06), 0 4px 16px rgba(17, 17, 18, 0.08);
  font-size: 14px;
  font-weight: 500;
  transform: translateX(-50%);
}

.hero-more svg {
  width: 16px;
  height: 16px;
  animation: nudge 2.4s var(--ease) infinite;
}

.js [data-enter] {
  opacity: 0;
  transform: translateY(16px);
  animation: enter 900ms var(--ease) forwards;
}

.js .hero-inner > [data-enter]:nth-child(2) { animation-delay: 90ms; }
.js .hero-inner > [data-enter]:nth-child(3) { animation-delay: 180ms; }
.js .hero-more[data-enter] { animation-delay: 420ms; }

.js .hero-more[data-enter] {
  transform: translate(-50%, 16px);
  animation-name: enter-centered;
}

/* Blok judul tengah ------------------------------------------------------ */
.block {
  padding: 96px var(--gutter) 56px;
}

.block-head {
  max-width: 736px;
  margin: 0 auto;
  text-align: center;
}

.block-head h2,
.feature-copy h3,
.learn-copy h2,
.closing h2 {
  color: var(--ink);
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.block-head p,
.feature-copy p,
.learn-copy p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 18px;
  line-height: 26px;
}

/* Grid objek 3D ---------------------------------------------------------- */
.object-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 20px 12px;
  max-width: 1050px;
  margin: 40px auto 0;
  padding: 36px 24px;
  border-radius: 32px;
  background: var(--canvas);
}

.object {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.object img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  transition: transform 500ms var(--ease);
}

.object:hover img {
  animation: wobble 700ms var(--ease);
}

.object-eline {
  justify-self: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(17, 17, 18, 0.08);
}

.object-eline img {
  width: 48px;
  height: 48px;
}

.js .object {
  opacity: 0;
  transform: scale(0.6);
}

.js .object-grid.is-visible .object {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease), transform 650ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i) * 18ms);
}

/* Memperkenalkan Eline (kata menyala mengikuti gulir) -------------------- */
.intro {
  padding: 24px var(--gutter) 96px;
}

.intro-card {
  display: grid;
  max-width: 700px;
  min-height: 400px;
  place-items: center;
  margin: 0 auto;
  padding: 48px 24px;
  border-radius: 32px;
  background: var(--accent-soft);
}

.intro-words {
  display: grid;
  gap: 4px;
  color: var(--ink);
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-align: center;
}

.intro-words strong {
  color: var(--accent);
  font-weight: 500;
}

.js .intro-words span,
.js .intro-words strong {
  opacity: calc(0.18 + var(--reveal, 0) * 0.82);
  transition: opacity 120ms linear;
}

.js .intro-words strong {
  opacity: calc(0.12 + var(--reveal-2, 0) * 0.88);
}

.js .intro-card {
  transform: scale(calc(0.94 + var(--reveal, 0) * 0.06));
  transition: transform 120ms linear;
}

/* Baris fitur ------------------------------------------------------------ */
.feature {
  background: var(--paper);
}

.feature-alt {
  background: var(--canvas);
}

.feature-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  max-width: 1440px;
  min-height: 744px;
  margin: 0 auto;
  padding: 72px 56px;
}

.feature-reverse .feature-media {
  order: 2;
}

.feature-copy {
  max-width: 632px;
}

.feature-copy p {
  max-width: 576px;
}

.feature-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
}

/* Mockup ponsel ---------------------------------------------------------- */
.phone {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  width: 300px;
  min-height: 560px;
  padding: 22px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 44px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 17, 18, 0.04), 0 24px 60px rgba(17, 17, 18, 0.08);
}

.phone-head {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-bottom: 8px;
  text-align: center;
}

.phone-head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
}

.phone-head strong {
  font-size: 14px;
  font-weight: 600;
}

.phone-head small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 1.4s ease-in-out infinite;
}

.bubble {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.4;
}

.bubble-eline {
  justify-self: start;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(17, 17, 18, 0.05);
}

.bubble-user {
  justify-self: end;
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.sheet,
.approval,
.card-mini {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(17, 17, 18, 0.08);
}

.sheet-head,
.card-mini {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.sheet-head {
  display: grid;
}

.sheet-head div,
.card-mini div {
  display: grid;
  min-width: 0;
}

.sheet-head strong,
.card-mini strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-head small,
.card-mini small {
  color: var(--muted);
  font-size: 11.5px;
}

.doc-badge {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 40px;
  border-radius: 8px;
  background: #e5484d;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

.doc-badge-soft {
  width: 36px;
  height: 36px;
  background: var(--accent-soft);
  font-size: 18px;
}

.sheet dl,
.approval dl {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 12px;
}

.sheet dl div,
.approval dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sheet dt,
.approval dt {
  color: var(--muted);
}

.sheet dd,
.approval dd {
  margin: 0;
  font-weight: 600;
}

.sheet-button,
.approval-allow,
.approval-deny,
.vault-button {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: var(--pill);
  background: rgba(0, 0, 0, 0.05);
  font-size: 13px;
  font-weight: 600;
}

.approval-title {
  font-size: 13px;
  font-weight: 600;
}

.approval-allow {
  background: var(--accent);
  color: #ffffff;
}

.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--muted);
  font-size: 13px;
}

.composer em {
  flex: 1;
  font-style: normal;
}

.composer-dots {
  display: inline-flex;
  gap: 3px;
}

.composer-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--subtle);
  animation: typing 1.2s ease-in-out infinite;
}

.composer-dots i:nth-child(2) { animation-delay: 150ms; }
.composer-dots i:nth-child(3) { animation-delay: 300ms; }

.composer-send {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
}

/* Dua ponsel bertumpuk (kanal). */
.phone-back {
  position: absolute;
  top: 24px;
  left: calc(50% - 250px);
  width: 260px;
  min-height: 420px;
  background: #eef6f0;
  opacity: 0.9;
  transform: rotate(-4deg);
}

.phone-front {
  z-index: 1;
  margin-left: 120px;
}

.app-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.app-dot-wa {
  background: #25d366;
}

/* Brankas keamanan ------------------------------------------------------- */
.vault {
  display: grid;
  justify-items: stretch;
  gap: 10px;
  width: 300px;
  padding: 28px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--canvas);
  box-shadow: 0 24px 60px rgba(17, 17, 18, 0.08);
}

.vault-lock {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(17, 17, 18, 0.08);
}

.vault-lock svg {
  width: 30px;
  height: 30px;
}

.vault-title {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.vault-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #ffffff;
  font-size: 12.5px;
}

.vault-row em {
  color: var(--muted);
  font-style: normal;
}

.vault-button {
  margin-top: 6px;
  background: var(--ink);
  color: #ffffff;
}

/* Target dan ide --------------------------------------------------------- */
.ideas {
  position: relative;
  display: grid;
  grid-template-columns: 180px 300px;
  align-items: center;
}

.ideas-goals,
.ideas-list {
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(17, 17, 18, 0.08);
}

.ideas-goals {
  z-index: 0;
  padding: 18px 16px;
  border-radius: 24px;
  transform: translateX(24px);
}

.ideas-goals strong,
.ideas-list > strong {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

.ideas-goals ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.ideas-goals li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ideas-goals li::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
}

.ideas-goals li.is-active::before {
  border: 4px solid var(--accent);
  border-radius: 50%;
}

.ideas-goals li.is-done {
  color: var(--subtle);
}

.ideas-goals li.is-done::before {
  border-color: var(--subtle);
  background: var(--subtle);
}

.ideas-list {
  z-index: 1;
  padding: 18px;
  border-radius: 28px;
}

.idea {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.idea img {
  width: 32px;
  height: 32px;
}

.idea b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
}

.idea small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

/* Visual dari Gallery ---------------------------------------------------- */
.visuals {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 12px;
  transform: rotate(-3deg);
}

.visuals a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  background: var(--canvas-2);
  box-shadow: 0 12px 32px rgba(17, 17, 18, 0.12);
}

.visuals a:nth-child(3n + 2) {
  transform: translateY(28px);
}

.visuals img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.visuals a:hover img {
  transform: scale(1.04);
}

.visuals span {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 600;
}

/* Grid aplikasi ---------------------------------------------------------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(6, 64px);
  gap: 18px;
}

.app {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--c, #dddddd);
  box-shadow: 0 4px 14px rgba(17, 17, 18, 0.08);
}

.app svg {
  width: 32px;
  height: 32px;
}

.app-own {
  background: #ffffff;
}

.app-own img {
  width: 48px;
  height: 48px;
}

.app-ghost {
  opacity: 0.5;
  box-shadow: none;
}

.app-ghost.is-blur {
  filter: blur(3px);
  opacity: 0.35;
}

.js .app {
  opacity: 0;
  transform: translateY(14px) scale(0.92);
}

.js .app-grid.is-visible .app {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease), transform 700ms var(--ease);
  transition-delay: calc(var(--i) * 22ms);
}

.js .app-grid.is-visible .app-ghost {
  opacity: 0.5;
}

.js .app-grid.is-visible .app-ghost.is-blur {
  opacity: 0.35;
}

/* Langkah percakapan muncul berurutan ------------------------------------ */
.js [data-chat] [data-step] {
  opacity: 0;
  transform: translateY(12px);
}

.js [data-chat].is-playing [data-step] {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--step, 0) * 420ms + 200ms);
}

/* Demo interaktif -------------------------------------------------------- */
#cara-kerja .stage {
  max-width: 1200px;
  margin: 40px auto 0;
}

.stage {
  max-width: 1120px;
  margin: 64px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 2px 4px rgba(13, 12, 17, 0.04), 0 30px 80px rgba(13, 12, 17, 0.1);
}

.stage-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}

.stage-dots {
  display: inline-flex;
  gap: 6px;
}

.stage-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}

.stage-note {
  margin-left: auto;
  color: var(--subtle);
  font-weight: 500;
}

.stage-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 280px;
  min-height: 460px;
}

.stage-side {
  padding: 20px 14px;
  border-right: 1px solid var(--line);
}

.stage-kicker {
  margin: 0 8px 12px;
  color: var(--subtle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.channel-list {
  display: grid;
  gap: 4px;
}

.channel-item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.channel-item:hover {
  background: var(--canvas);
}

.channel-item strong {
  font-size: 15px;
  font-weight: 600;
}

.channel-item small {
  color: var(--muted);
  font-size: 13px;
}

.channel-item.is-active {
  border-color: var(--line);
  background: var(--canvas);
}

.channel-item.is-active strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--accent);
}

.stage-chat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

.message {
  display: grid;
  gap: 8px;
  max-width: 88%;
}

.message p {
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.55;
}

.message.is-user {
  justify-self: end;
  justify-items: end;
}

.message.is-user p {
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 6px;
}

.message.is-eline p {
  background: var(--canvas);
  border-bottom-left-radius: 6px;
}

.message-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--subtle);
  font-size: 12px;
}

.message-label img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.message-label em {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-style: normal;
  font-weight: 600;
}

.deliverable {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.deliverable-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deliverable-head div {
  display: grid;
}

.deliverable-head strong {
  font-size: 15px;
  font-weight: 600;
}

.deliverable-head small {
  color: var(--muted);
  font-size: 13px;
}

.doc-badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 700;
}

.deliverable dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}

.deliverable dl div {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
}

.deliverable dt {
  color: var(--muted);
  font-size: 12px;
}

.deliverable dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.stage-approval {
  padding: 20px;
  border-left: 1px solid var(--line);
  background: var(--canvas);
}

.approval-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.approval-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-pill {
  padding: 3px 10px;
  border-radius: var(--pill);
  background: #f7efdf;
  color: #7b5b21;
  font-size: 12px;
  font-weight: 600;
}

.approval-card dl {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.approval-card dt {
  color: var(--muted);
  font-size: 12px;
}

.approval-card dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.approval-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.approval-feedback {
  min-height: 20px;
  margin-top: 12px;
  color: var(--accent-deep);
  font-size: 13px;
  line-height: 1.45;
}


/* Pelajari lebih lanjut -------------------------------------------------- */
.learn {
  padding: 96px var(--gutter);
}

.learn-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 56px;
  max-width: 1216px;
  margin: 0 auto;
}

.learn-copy p {
  max-width: 384px;
}

.learn-links {
  display: grid;
}

.learn-links a {
  display: grid;
  grid-template-columns: 24px 1fr 20px;
  align-items: start;
  gap: 16px;
  padding: 16px 0 16px;
  border-bottom: 1px solid var(--line);
}

.learn-links a:last-child {
  border-bottom: 0;
}

.learn-links svg {
  width: 22px;
  height: 22px;
  color: var(--ink-2);
}

.learn-links strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.learn-links small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 16px;
  line-height: 22px;
}

.learn-chevron {
  align-self: center;
  color: var(--subtle) !important;
  transition: transform 200ms var(--ease);
}

.learn-links a:hover .learn-chevron {
  transform: translateX(3px);
}

/* Penutup ---------------------------------------------------------------- */
.closing {
  padding: 120px var(--gutter) 160px;
}

.closing-inner {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 408px;
  margin: 0 auto;
  text-align: center;
}

.closing h2 {
  margin-bottom: 28px;
  white-space: nowrap;
}

.closing .button-block {
  max-width: 256px;
}

/* Animasi ---------------------------------------------------------------- */
@keyframes enter {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes enter-centered {
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@keyframes avatar-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-10deg) scale(1.05); }
  40% { transform: rotate(8deg) scale(1.05); }
  60% { transform: rotate(-6deg) scale(1.02); }
  80% { transform: rotate(3deg) scale(1.01); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes typing {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* Responsif -------------------------------------------------------------- */
@media (max-width: 1080px) {
  .stage-body {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .stage-approval {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .feature-inner {
    gap: 40px;
    padding: 64px 40px;
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: auto;
    padding: calc(var(--header) + 40px) 20px 104px;
  }

  .block,
  .learn {
    padding: 72px 20px 40px;
  }

  .object-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px 8px;
    padding: 24px 12px;
    border-radius: 24px;
  }

  .object:nth-child(n + 26):not(.object-eline) {
    display: none;
  }

  .object img {
    width: 44px;
    height: 44px;
  }

  .intro {
    padding: 8px 20px 72px;
  }

  .intro-card {
    min-height: 280px;
    border-radius: 24px;
  }

  .feature-inner,
  .learn-inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 56px 20px;
  }

  .feature-reverse .feature-media {
    order: 0;
  }

  .feature-media {
    min-height: 0;
  }

  .phone {
    width: 280px;
    min-height: 480px;
  }

  .phone-back {
    display: none;
  }

  .phone-front {
    margin-left: 0;
  }

  .ideas {
    grid-template-columns: minmax(0, 1fr);
  }

  .ideas-goals {
    display: none;
  }

  .visuals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .app-grid {
    grid-template-columns: repeat(6, 44px);
    gap: 10px;
  }

  .app {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .app svg {
    width: 22px;
    height: 22px;
  }

  .app-own img {
    width: 34px;
    height: 34px;
  }

  .stage-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .channel-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto;
  }

  .deliverable dl,
  .approval-card dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .closing {
    padding: 88px 20px 112px;
  }

  .closing h2 {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-enter],
  .js .object,
  .js .app,
  .js [data-chat] [data-step] {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .js .intro-words span,
  .js .intro-words strong {
    opacity: 1;
  }

  .js .intro-card {
    transform: none;
  }
}