/* ------------------------------------------------------------------ */
/*  NextMind — the same layout system as Landhep, modelled on            */
/*  metacci.com and inverted to light. Only the accent differs: this      */
/*  product keeps its red. The shared half of this file is a copy of      */
/*  landhep/metacci.css on purpose — the two are independent for now.     */
/*                                                                      */
/*  Everything here is measured from the reference at 1440px:            */
/*    · 1312px content inside 64px gutters                               */
/*    · section padding 96 / 128 / 192 / 256 — modulated, not uniform    */
/*    · one typeface, weight 500 for every heading, −0.02em throughout   */
/*    · display line-height 0.95, body 1.5                              */
/*    · cards: 12–16px radius, hairline border, quiet surface           */
/*  Their palette is dark; ours is the inversion — light ground, dark    */
/*  type — with NextMind's red kept as the accent.                       */
/* ------------------------------------------------------------------ */

:root {
  --bg: #ffffff;
  --surface: #f6f6f7;
  --surface-2: #fbfbfc;
  --border: #e5e5e8;
  --ink: #121215;
  /* No muted type on this page — every word is set in full ink. Hierarchy
     comes from size, weight and space instead of from greying text down.
     The tokens stay so the rule is one line to change back. */
  --muted: var(--ink);
  --faint: var(--ink);

  /* ---- the one knob -------------------------------------------------
     Pustaka AI's brand colour, taken from the deck: navy ground, cyan
     highlight, teal in the gradients. Every coloured thing on the page
     derives from --brand, so trying a different blue is a single line.
     Each landing gets its own --brand; this is Pustaka AI's.

     Contrast, measured rather than assumed:
       --brand      #0B4C87   8.8:1 with white  — safe under type
       --brand-hero #002c57  14.0:1 with white  — the dark ground
       --brand-lit  #1276C4   4.8:1 with white  — solid marks
       --highlight       #29B6E8   2.4:1 with white  — fills only, but 4.7:1
                                                 as type on the navy
     ------------------------------------------------------------------ */
  --brand: #0B4C87;
  --brand-hero: #002c57;
  --brand-deep: #073561;
  --brand-lit: #1276C4;
  --highlight: #6FD3E8; /* Aqua */
  --teal: #17B890;

  --brand-tint: color-mix(in srgb, var(--brand) 7%, #fff);
  --brand-mist: color-mix(in srgb, var(--brand) 5%, #fff);
  --edge: color-mix(in srgb, var(--brand) 20%, #fff);
  --on-brand: #ffffff;

  /* the rest of the stylesheet still calls it "accent"; it is the brand */
  --accent: var(--brand);
  --accent-deep: var(--brand-deep);
  --on-accent: #ffffff;

  --gutter: 64px;
  --max: 1312px;
  --radius: 12px;
  --radius-lg: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* the measured type ladder */
  --t-72: clamp(2.6rem, 5vw, 4.5rem);
  --t-56: clamp(2.1rem, 3.9vw, 3.5rem);
  --t-48: clamp(1.9rem, 3.3vw, 3rem);
  --t-32: clamp(1.5rem, 2.2vw, 2rem);
  --t-24: clamp(1.3rem, 1.7vw, 1.5rem);
  --t-20: 1.25rem;
  --t-18: 1.125rem;
  --t-16: 1rem;
  --t-14: 0.875rem;
  --t-12: 0.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Squircle corners: the superellipse Apple uses, now a native CSS
     property. It only takes effect where a border-radius already exists,
     and browsers without corner-shape simply keep the circular corner. */
  corner-shape: squircle;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--t-16);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em; /* the reference holds this at every size */
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}
ul,
ol {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
::selection {
  background: var(--ink);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  /* the reference: 1312px of content inside 64px gutters, so the outer
     box is 1440 and the padding is part of it — not added to it */
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 900px) {
  .wrap {
    padding-inline: var(--gutter);
  }
}

/* modulated rhythm — the reference never uses one padding for everything */
.s-hero {
  padding-block: 96px;
}
.s-base {
  padding-block: clamp(4.5rem, 9vw, 128px);
}
.s-major {
  padding-block: clamp(5.5rem, 13vw, 192px);
}
.s-peak {
  padding-block: clamp(6.5rem, 17vw, 256px);
}
.band {
  background: var(--surface-2);
}

/* --- type ------------------------------------------------------------ */

h1,
h2,
h3,
h4 {
  font-weight: 500; /* the reference never goes bolder, even at 72px */
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.t-hero {
  font-size: var(--t-72);
}
.t-h2 {
  font-size: var(--t-56);
  line-height: 0.98;
}
.t-h3 {
  font-size: var(--t-32);
  line-height: 1.05;
}
.t-h4 {
  font-size: var(--t-20);
  line-height: 1.2;
}

.label {
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.lead {
  font-size: var(--t-18);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.body {
  font-size: var(--t-16);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.note {
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--faint);
  text-wrap: pretty;
}
.ink {
  color: var(--ink);
}
.accent {
  color: var(--accent);
}

/* centred section header — label, heading, optional lead */
.head-c {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
}
.head-c .label {
  margin-bottom: 1.25rem;
}
.head-c .lead {
  margin-top: 1.5rem;
  margin-inline: auto;
  max-width: 620px;
}

/* --- actions --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 1.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--t-16);
  font-weight: 500;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover {
  background: var(--accent-deep);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding-inline: 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: var(--t-16);
  font-weight: 500;
  transition: border-color 0.3s var(--ease);
}
.btn-ghost:hover {
  border-color: var(--ink);
}
.link-u {
  display: inline-block;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease);
}
.link-u:hover {
  border-bottom-color: var(--ink);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --- topbar ---------------------------------------------------------- */

.topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.topbar.scrolled {
  border-bottom-color: var(--border);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.topnav {
  display: none;
  gap: 1.75rem;
}
@media (min-width: 900px) {
  .topnav {
    display: flex;
  }
}
.topnav a {
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.topnav a:hover {
  color: var(--ink);
}
.topbar .btn {
  height: 40px;
  padding-inline: 1.1rem;
  font-size: var(--t-14);
}

/* --- hero ------------------------------------------------------------ */

.hero {
  padding-top: 168px;
  padding-bottom: clamp(4rem, 9vw, 128px);
}
.hero-grid {
  max-width: 880px; /* the reference's hero text sits in the left half */
}
.hero-brand {
  margin-top: 0.5rem;
}
.hero h1 {
  margin-top: 0.75rem;
}
.hero .lead {
  margin-top: 1.75rem;
  max-width: 34rem;
}
.hero .actions {
  margin-top: 2.5rem;
}
.hero-brand {
  font-size: var(--t-32);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--accent);
}

/* --- cards ----------------------------------------------------------- */

.cards {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(3rem, 8vw, 128px);
}
@media (min-width: 720px) {
  .cards-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 1.75rem;
  transition: border-color 0.3s var(--ease);
}
.card:hover {
  border-color: var(--accent);
}
.card .t-h4 {
  margin-bottom: 0.75rem;
}
.card .body {
  font-size: var(--t-14);
}

/* the numbered chip the reference puts at the top of each phase card */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding-inline: 0.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--accent);
}
/* the three "Cara kerja" steps carry no numbers in the copy, so the count
   is drawn by CSS rather than added to the page as text */
.counted {
  counter-reset: step;
}
.counted .card::before {
  counter-increment: step;
  content: "0" counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--accent);
}

/* --- split 50/50, the reference's "about" shape ---------------------- */

.split {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 128px;
  }
  .split-tight {
    gap: 4rem;
  }
}

/* --- marks, tags, meta ----------------------------------------------- */

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
}
.mark-no {
  background: var(--surface);
  color: var(--muted);
}
.mark-yes {
  background: var(--accent);
  color: #fff;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.tags li {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: var(--t-14);
  color: var(--muted);
}

.meta-list {
  border-top: 1px solid var(--border);
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-block: 0.9rem;
}
.meta-row dt {
  font-size: var(--t-14);
  color: var(--faint);
}
.meta-row dd {
  font-size: var(--t-14);
  font-weight: 500;
}

/* --- faq ------------------------------------------------------------- */

.faq {
  max-width: 1100px;
  margin-inline: auto;
  margin-top: clamp(3rem, 7vw, 96px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.faq > div {
  border-top: 1px solid var(--border);
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
}
.faq > div:first-child {
  border-top: 0;
}

/* two columns once there is room — nine answers read in half the scroll */
@media (min-width: 820px) {
  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faq > div:nth-child(2) {
    border-top: 0;
  }
  .faq > div:nth-child(odd) {
    border-right: 1px solid var(--border);
  }
}
.faq h3 {
  font-size: var(--t-18);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.faq .body {
  font-size: var(--t-14);
}

/* --- closing --------------------------------------------------------- */

.closing {
  text-align: center;
}
.closing .actions {
  justify-content: center;
  margin-top: 2.5rem;
}
.closing-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin-top: 3rem;
  font-size: var(--t-14);
  color: var(--faint);
}
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 2rem;
  text-align: center;
}

/* --- motion ---------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── NextMind-only components ─────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1.5rem;
  top: 1rem;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}

/* --- mobile menu ------------------------------------------------------ */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
@media (min-width: 900px) {
  .menu-toggle {
    display: none;
  }
}
.menu-toggle-bar {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
}
.mobile-nav {
  position: absolute;
  inset-inline: 0;
  top: 72px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.mobile-nav nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem 2.25rem;
}
.mobile-nav a {
  font-size: var(--t-20);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.mobile-nav .mobile-cta {
  color: var(--accent);
}

/* --- hero ------------------------------------------------------------- */

/* NEXTMIND is one word — let it run wide, then the graph beside it */
.hero-split {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 5rem;
  }
}
.hero-wordmark {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.hero-tagline {
  font-size: var(--t-32);
  line-height: 1.1;
  margin-top: 1.25rem;
  max-width: 20ch;
}

/* --- the retrieval graph --------------------------------------------- */

.graph-viz {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
}
.graph-viz canvas {
  display: block;
  cursor: crosshair;
  width: 100%;
  height: 100%;
}
.graph-panel {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  overflow: hidden;
}
.rag-split {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .rag-split {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 4rem;
  }
}
/* the four RAG steps double as the graph's stage controls */
.capability-list {
  display: grid;
  gap: 0;
}
.capability {
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-block: 1.35rem;
  transition: border-color 0.25s var(--ease);
}
.capability .numeral {
  font-size: var(--t-24);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0.4;
  transition: opacity 0.25s var(--ease);
}
.capability .t-h4 {
  margin-bottom: 0.35rem;
}
.capability .body {
  font-size: var(--t-14);
  grid-column: 2;
}
.capability[aria-pressed="true"] {
  border-top-color: var(--accent);
}
.capability[aria-pressed="true"] .numeral {
  opacity: 1;
}

/* --- split items, story cards ---------------------------------------- */

.split-3 {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(3rem, 8vw, 128px);
}
@media (min-width: 760px) {
  .split-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.section-closing {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-inline: auto;
  max-width: 720px;
  text-align: center;
  font-size: var(--t-24);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.stories {
  display: grid;
  gap: 0;
  margin-top: clamp(3rem, 8vw, 128px);
}
@media (min-width: 760px) {
  .stories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4rem;
  }
}
.story {
  border-top: 1px solid var(--border);
  padding-block: 1.75rem;
}
.story .label {
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.story h3 {
  font-size: var(--t-20);
  line-height: 1.25;
}

/* --- comparison table ------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin-top: clamp(3rem, 7vw, 96px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.compare-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  text-align: left;
}
.compare-table th,
.compare-table td {
  border-top: 1px solid var(--border);
  padding: 1.1rem 1.5rem;
  vertical-align: top;
  font-size: var(--t-14);
}
.compare-table thead th {
  border-top: 0;
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-block: 1.25rem;
}
.compare-table tbody th {
  font-weight: 500;
  font-size: var(--t-16);
}
.compare-table .is-ours {
  border-left: 1px solid var(--accent);
  font-weight: 500;
}
.compare-table thead .is-ours {
  color: var(--accent);
}

/* --- demo form -------------------------------------------------------- */

.demo-split {
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 900px) {
  .demo-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 5rem;
  }
}
.form-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.form-field {
  margin-bottom: 1.5rem;
}
.form-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--t-14);
  font-weight: 500;
}
.form-field input,
.form-field textarea {
  width: 100%;
  font: inherit;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.25s var(--ease);
}
.form-field textarea {
  resize: vertical;
  min-height: 7rem;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-field .is-invalid {
  border-color: var(--accent);
}
.field-error {
  margin-top: 0.4rem;
  font-size: var(--t-12);
  color: var(--accent);
}
.btn-block {
  width: 100%;
}
.form-success {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* --- faq accordion ---------------------------------------------------- */

.faq-item {
  border-top: 1px solid var(--border);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--border);
}
.faq-trigger {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  text-align: left;
  padding: 1.4rem 0;
  font-size: var(--t-18);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color 0.25s var(--ease);
}
.faq-trigger:hover {
  color: var(--accent);
}
.faq-icon {
  position: relative;
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--accent);
}
.faq-icon::before {
  width: 100%;
  height: 1.5px;
}
.faq-icon::after {
  width: 1.5px;
  height: 100%;
  transition: transform 0.3s var(--ease);
}
.faq-trigger[aria-expanded="true"] .faq-icon::after {
  transform: scaleY(0);
}
.faq-panel {
  padding-bottom: 1.5rem;
}
.faq-list {
  max-width: 900px;
  margin-inline: auto;
  margin-top: clamp(3rem, 7vw, 96px);
}

/* --- footer ----------------------------------------------------------- */

.site-footer .footer-inner {
  display: grid;
  gap: 2rem;
}
@media (min-width: 760px) {
  .site-footer .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    text-align: left;
  }
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: var(--t-14);
  font-weight: 500;
}
.footer-copy {
  margin-top: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .faq-icon::after {
    transition: none;
  }
}


/* ==================================================================== */
/*  Pustaka AI — brand surfaces                                          */
/*  The page opens and closes on the deck's navy, with the quiet bands   */
/*  in between tinted rather than grey, so the blue runs through it      */
/*  instead of appearing once and vanishing.                             */
/* ==================================================================== */

.band { background: var(--brand-mist); }
.band .card { background: var(--bg); border-color: var(--edge); }
.label { color: var(--brand); }

/* --- hero and closing: the two brand bookends ------------------------ */
.hero,
.closing {
  background: var(--brand-hero);
  color: var(--on-brand);
}
.hero .label,
.hero h1,
.hero .lead,
.closing .label,
.closing h2,
.closing .body,
.closing a { color: var(--on-brand); }
.hero .label,
.closing .label { color: var(--highlight); opacity: 1; }
.hero .lead { opacity: 0.88; }

/* the wordmark, set the way the deck sets it */
.hero-wordmark { color: var(--highlight); letter-spacing: -0.03em; }

.hero .btn,
.closing .btn { background: var(--on-brand); color: var(--brand-deep); }
.hero .btn:hover,
.closing .btn:hover { background: var(--highlight); color: var(--brand-deep); }
.hero .btn-ghost,
.closing .btn-ghost {
  border-color: color-mix(in srgb, var(--on-brand) 45%, transparent);
  color: var(--on-brand);
}
.hero .btn-ghost:hover,
.closing .btn-ghost:hover { border-color: var(--on-brand); }

/* max-width without margin-inline:auto left this hugging the left edge
   of a centred section — the text was centred, the box was not. */
.closing-note { margin-top: 2.5rem; margin-inline: auto; max-width: 42rem; opacity: 0.86; }
.closing-meta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  opacity: 0.82;
}
/* the bare spans here inherit the page's dark ink, which on the navy is
   dark on dark — every child has to be told, not just the links */
.closing-meta,
.closing-meta span,
.closing-meta a { color: var(--on-brand); }

/* the bar carries no plate over the navy hero, and takes one on scroll */
.topbar:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
}
.topbar:not(.scrolled) .brand,
.topbar:not(.scrolled) .topnav a { color: var(--on-brand); }
.topbar:not(.scrolled) .brand { color: var(--highlight); }
.topbar:not(.scrolled) .btn { background: var(--on-brand); color: var(--brand-deep); }

/* --- numbered cards --------------------------------------------------- */
.counted .card::before {
  border: 0;
  border-radius: 999px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  background: linear-gradient(180deg, var(--brand-lit), var(--brand));
  color: var(--on-brand);
  box-shadow: 0 0 0 6px var(--bg);
}
.band .counted .card::before { box-shadow: 0 0 0 6px var(--brand-mist); }

.group-label { margin-bottom: 1.25rem; }

/* --- "Dari Pengetahuan Menjadi Jawaban" ------------------------------- */
/* Laid out the way the deck draws it: three sources on the left feeding
   one Pustaka AI mark, which feeds the five things a user can do. The
   dotted runs are drawn with pseudo-elements and only appear once there
   is room to route them; below that the blocks simply stack. */

.smap {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 1000px) {
  .smap {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 0.9fr);
    align-items: center;
    column-gap: 3.25rem;
  }
  .smap-org { grid-column: 1; }
  .smap-mid { grid-column: 2; }
  .smap-hub { grid-column: 3; }
  .smap-out { grid-column: 4; }
}

.smap-cell {
  position: relative;
  padding: 2.6rem 1.4rem 1.4rem;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--edge);
  text-align: center;
}
.smap-mid { display: grid; gap: 3.25rem; }

.smap-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 999px;
  background: var(--brand-hero);
  box-shadow: 0 0 0 6px var(--brand-mist);
}
.smap-badge svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: var(--highlight);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smap-t {
  font-size: var(--t-20);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
}
.smap-d { margin-top: 0.7rem; font-size: var(--t-14); line-height: 1.6; }

/* the mark everything converges on */
.smap-hub {
  justify-self: center;
  display: grid;
  place-content: center;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 999px;
  background: var(--brand-hero);
  color: var(--highlight);
  font-size: var(--t-20);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  letter-spacing: -0.02em;
}

.smap-out {
  position: relative;
  padding: 2.6rem 1.4rem 1.4rem;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--edge);
}
.smap-out ul { display: grid; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.smap-out li {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--t-18);
  font-weight: 600;
  color: var(--brand-deep);
}
.smap-out li::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  justify-self: center;
  background: var(--brand);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
}

/* The footnote lost its spacing when the old pipe styles went; it has to
   stand clear of the diagram, and clear of the lowest panel's shadow. */
.smap-note {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--edge);
  max-width: 46rem;
}

/* the dotted runs, and the arrow into the actions */
@media (min-width: 1000px) {
  .smap::before,
  .smap::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  /* sources → hub */
  .smap::before {
    left: calc(1 / 4 * 100%);
    right: calc(1 / 4 * 100%);
    top: 50%;
    border-top: 2px dotted color-mix(in srgb, var(--brand) 45%, #fff);
  }
  /* the middle column drops onto that run */
  .smap-mid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 22%;
    bottom: 22%;
    border-left: 2px dotted color-mix(in srgb, var(--brand) 45%, #fff);
    transform: translateX(-1px);
  }
  .smap-mid { position: relative; }
  /* hub → actions */
  .smap-hub::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 0.9rem);
    width: 1.5rem;
    height: 0.9rem;
    transform: translateY(-50%);
    background: var(--brand);
    clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
  }
  .smap-hub { position: relative; }
}

/* --- the graph, drawn on the navy ------------------------------------ */
.graph-viz {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 520px;
  margin-inline: auto;
}
/* on the navy the frame has to go: the graph draws its nodes in white,
   and the inherited white plate made every one of them invisible */
.graph-viz[data-on-brand] {
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* The script sizes the canvas from the root's border box, but a bordered
   root only offers two pixels less than that to its content — so the
   canvas pushed the root taller, the ResizeObserver fired, and the panel
   grew a couple of pixels every frame. Taking the canvas out of flow
   ends the loop: it can no longer feed its own container's height. */
.graph-viz canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* the deck sets the wordmark in cyan; .hero h1 would otherwise win on
   specificity and paint it white */
.hero .hero-wordmark { color: var(--highlight); }

@media (prefers-reduced-motion: reduce) {
  .counted .card::before { transition: none; }
}


/* ==================================================================== */
/*  Colour rhythm and the two interactive blocks                        */
/*  The page was navy at both ends and grey in between. The bands are   */
/*  now tinted, the problem section carries a warm counter-tone, and    */
/*  the two blocks a visitor can actually touch are given weight.       */
/* ==================================================================== */

:root {
  /* a warm counter to the blue, used only where the page names a
     problem — the same trick the deck uses with its amber icons */
  --warm: #A24A1E;
  --warm-tint: color-mix(in srgb, var(--warm) 6%, #fff);
  --warm-edge: color-mix(in srgb, var(--warm) 22%, #fff);
}

/* --- Tantangan: the one mid-blue block ------------------------------- */
/* It sits between the deepest navy above and the light below, so it has
   to be a step in that ladder rather than another dark slab — otherwise
   it merges with the hero. Text goes white, the label aqua. */
.dim {
  background: var(--brand);
  color: var(--on-brand);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.dim .label { color: var(--highlight); }
.dim h2, .dim .lead { color: var(--on-brand); }
.dim .lead { opacity: 0.86; }

.woe-split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 900px) {
  .woe-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.woe-head .t-h2 { margin-top: 1.1rem; }
.woe-head .lead { margin-top: 1.25rem; max-width: 34rem; }

.woe-list { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.woe {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--on-brand) 20%, transparent);
  background: color-mix(in srgb, #000 12%, transparent);
}
.woe-n {
  grid-row: span 2;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-brand) 16%, transparent);
  color: var(--highlight);
  font-size: var(--t-14);
  font-weight: 600;
}
.woe-t { font-size: var(--t-18); font-weight: 500; letter-spacing: -0.02em; color: var(--on-brand); }
.woe-d { font-size: var(--t-14); line-height: 1.55; color: var(--on-brand); opacity: 0.82; }

/* On a phone the two columns stack, so the section cannot hold to one
   screen the way it does on a laptop. Tightened as far as it goes
   without shrinking the type — past this point it would only be cramped. */
@media (max-width: 899px) {
  .dim { padding-block: clamp(2.5rem, 8vw, 3.5rem); }
  .woe-split { gap: 1.5rem; }
  .woe-head .lead { margin-top: 0.9rem; }
  .woe { padding: 0.8rem 0.9rem; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.15rem 0.8rem; }
  .woe-n { width: 2rem; height: 2rem; font-size: var(--t-12); }
  .woe-t { font-size: var(--t-16); }
}

/* --- "Cara Kerja": four steps that drive the graph -------------------- */
.flow-split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 960px) { .flow-split { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); } }

.flow { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.flow button {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.25rem 0.9rem;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0.9rem 1rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.flow button:hover { border-color: var(--brand); }
.flow button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--brand-hero), var(--brand));
  border-color: var(--brand);
  color: var(--on-brand);
}
.flow-n {
  grid-row: span 2;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: var(--t-14);
  font-weight: 600;
}
.flow button[aria-pressed="true"] .flow-n {
  background: color-mix(in srgb, var(--on-brand) 20%, transparent);
  color: var(--on-brand);
}
.flow-t { font-size: var(--t-20); font-weight: 500; letter-spacing: -0.02em; }
.flow-d { font-size: var(--t-14); line-height: 1.5; opacity: 0.78; }
.flow button[aria-pressed="true"] .flow-d { opacity: 0.9; }

.flowvis {
  /* capped and centred: at full column width the diagram dwarfed the four
     steps beside it, and the pair has to read as one balanced spread */
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  aspect-ratio: 5 / 4;
  background: transparent;
  overflow: hidden;
}
/* absolute, so the canvas can never feed its own container's height and
   set the ResizeObserver running away */
.flowvis canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* --- "Kemampuan": the six written panels ----------------------------- */
.cap-split { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1000px) { .cap-split { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }

.tags-control { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1000px) { .tags-control { flex-direction: column; align-items: stretch; } }
.tags-control button {
  width: 100%;
  font: inherit;
  font-size: var(--t-14);
  text-align: left;
  cursor: pointer;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.tags-control button:hover { border-color: var(--brand); }
.tags-control button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--brand-lit), var(--brand));
  border-color: var(--brand);
  color: var(--on-brand);
}

.cap-stage {
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  min-height: 27rem;
}
.pnl[hidden] { display: none; }

.pnl-head { padding-bottom: 1rem; border-bottom: 1px solid var(--edge); }
.pnl-head h4 { font-size: var(--t-20); font-weight: 500; letter-spacing: -0.02em; }
.pnl-head p { margin-top: 0.3rem; font-size: var(--t-14); opacity: 0.72; }

.pnl-query {
  margin-top: 1.1rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: var(--t-16);
  display: inline-block;
}

/* the question-and-answer panel */
.chat { margin-top: 1.25rem; display: grid; gap: 1rem; }
.chat-q {
  justify-self: end;
  max-width: 34rem;
  padding: 0.85rem 1.15rem;
  border-radius: 16px 16px 4px 16px;
  background: linear-gradient(135deg, var(--brand-lit), var(--brand));
  color: var(--on-brand);
  font-size: var(--t-16);
}
.chat-a {
  max-width: 46rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px 16px 16px 4px;
  border: 1px solid var(--edge);
  background: var(--brand-mist);
  font-size: var(--t-16);
  line-height: 1.65;
}
.chat-a p + p { margin-top: 0.7rem; }
.chat-src { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; list-style: none; padding: 0; }
.chat-src li {
  font-size: var(--t-12);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, #fff);
  color: var(--brand-deep);
}

.pnl-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--edge);
}
@media (min-width: 620px) { .pnl-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pnl-stat dt { font-size: var(--t-12); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.66; }
.pnl-v { margin-top: 0.35rem; font-size: var(--t-24); font-weight: 500; letter-spacing: -0.02em; }
.pnl-v.is-ok { color: var(--brand); }

.pnl-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: var(--t-14); }
.pnl-table th {
  text-align: left;
  padding: 0.6rem 0.5rem 0.5rem 0;
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.66;
}
.pnl-table td { padding: 0.7rem 0.5rem 0.7rem 0; border-top: 1px solid var(--edge); vertical-align: top; }
.pnl-table td:first-child { font-weight: 500; }
.pnl-table td.is-ok { color: var(--brand); }
.pnl-table td.is-mid { color: var(--warm); }
.pnl-table td.is-mute { opacity: 0.55; }

.pnl-list { margin-top: 1.1rem; display: grid; gap: 0.7rem; list-style: none; padding: 0; font-size: var(--t-14); line-height: 1.6; }
.pnl-list li { padding-left: 1.1rem; position: relative; }
.pnl-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--brand);
}

.pnl-thread { margin-top: 1.1rem; display: grid; gap: 0.9rem; list-style: none; padding: 0; }
.pnl-thread li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.9rem; align-items: start; font-size: var(--t-14); line-height: 1.6; }
.pnl-thread strong { display: block; font-weight: 500; }
.pnl-thread p { opacity: 0.75; }
.pnl-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand);
  font-size: var(--t-12); font-weight: 600;
}

.pnl-note { margin-top: 1.5rem; font-size: var(--t-12); opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .flow button, .tags-control button { transition: none; }
}


/* --- hero illustration: sources converging ---------------------------- */
.converge {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 540px;
  margin-inline: auto;
}
.converge canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* the source under the cursor names itself, in the deck's cyan */
.converge-tip {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-family: inherit;
  font-size: var(--t-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--highlight);
  white-space: nowrap;
  pointer-events: none;
}





/* --- Keunggulan: a specification sheet, not thirteen headlines -------- */
/* Five of these thirteen restate the capabilities one section above. The
   list stays whole because it is the deck's, but it now reads as a
   reference column — small, dense, scannable — so it no longer competes
   with the section it repeats. Descriptions stay visible: a spec sheet
   exists to be skimmed, and anything behind a hover is gone on a phone. */

.spec-sheet {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) { .spec-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.spec-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--edge);
}
.spec-n { margin-left: auto; color: var(--brand-deep); opacity: 0.55; }

.spec-list { list-style: none; margin: 0; padding: 0; }
.spec {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--edge);
}
.spec:last-child { border-bottom: 0; }
.spec-tick {
  grid-row: span 2;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18rem;
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spec-t {
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
.spec-d { font-size: var(--t-14); line-height: 1.55; }