/* WillAIam landing page
   Breakpoints: phones < 640px, tablets 640–1023px, desktop >= 1024px */

:root {
  --ink: #0F173D;
  --ink-deep: #0C173C;
  --text: #3E4868;
  --muted: #5A6585;
  --primary: #4F67F4;
  --primary-hover: #3F55E0;
  --sky: #6EC8FA;
  --sky-hover: #8AD4FB;
  --tint: #EEF2FB;
  --line: #E3E8F4;
  --line-soft: #DDE3F0;
  --line-band: #CFD7EA;
  --line-quiet: #C9D2EA;
  --on-dark: #C3CCE6;
  --on-dark-muted: #9BA5C4;
  --line-dark: #26335F;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: 20px;
  --section-y: 64px;
}

@media (min-width: 640px) {
  :root { --gutter: 32px; --section-y: 88px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 24px; --section-y: 104px; }
}

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, p { margin: 0; }

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 10px;
}

main:focus { outline: none; }

.mono { font-family: var(--mono); }

.container {
  width: 100%;
  max-width: 1248px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.band { background: var(--tint); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: #FFFFFF; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.btn-primary { background: var(--primary); color: #FFFFFF; }
.btn-primary:hover { background: var(--primary-hover); color: #FFFFFF; }

.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-quiet); }
.btn-quiet:hover { background: var(--tint); color: var(--ink); }

.btn-sky { background: var(--sky); color: var(--ink-deep); }
.btn-sky:hover { background: var(--sky-hover); color: var(--ink-deep); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: #FFFFFF;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}

/* Logo SVGs are cropped to the mark, so their edges sit on the content edges */
.nav-logo {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}
.nav-logo img { height: 24px; width: auto; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links { display: none; }

.nav-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 12px 4px;
}
.nav-link:hover { color: var(--primary); }

.nav-cta { min-height: 44px; padding: 0 16px; font-size: 15px; }

.lang-switch {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px var(--line-quiet);
}

.lang-btn {
  min-width: 40px;
  height: 38px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: 700 14px/1 var(--font);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.lang-btn[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; cursor: default; }
@media (hover: hover) {
  .lang-btn[aria-pressed="false"]:hover { background: var(--tint); color: var(--ink); }
}

/* Keep EN visitors from seeing a flash of Indonesian (see the inline script in index.html) */
.i18n-pending body { visibility: hidden; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
@media (hover: hover) {
  .menu-toggle:hover { background: var(--tint); }
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.menu-mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 24px -16px rgba(15, 23, 61, .25);
}
.menu-mobile[hidden] { display: none; }

.menu-mobile-inner {
  display: flex;
  flex-direction: column;
  padding-block: 8px 20px;
}

.menu-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.menu-link:hover { color: var(--primary); }

.menu-cta { margin-top: 16px; }

/* Phones: the header keeps logo, language and menu; the CTA moves into the menu */
@media (max-width: 479px) {
  .nav-cta { display: none; }
}

@media (min-width: 640px) {
  .nav-logo img { height: 30px; }
}

@media (min-width: 960px) {
  .nav { padding-block: 16px; gap: 24px; }
  .nav-right { gap: 20px; }
  .nav-links { display: flex; gap: 24px; margin-right: 8px; }
  .nav-cta { min-height: 48px; padding: 0 22px; font-size: 16px; }
  .lang-switch { padding: 4px; }
  .lang-btn { min-width: 42px; height: 40px; }
  .menu-toggle,
  .menu-mobile { display: none !important; }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-block: 48px 64px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
}

.hero-title {
  font-size: clamp(32px, 8.4vw, 56px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  overflow-wrap: break-word;
}

.hero-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}

@media (max-width: 479px) {
  .hero .btn-row .btn,
  .cta .btn-row .btn { flex: 1 1 100%; }
}

@media (min-width: 640px) {
  .hero { padding-block: 64px 88px; gap: 56px; }
  .hero-copy { gap: 28px; }
  .hero-lede { font-size: 19px; }
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-block: 72px 88px;
  }
  .hero-copy { max-width: 560px; }
  .hero-title { font-size: clamp(44px, 4.45vw, 64px); line-height: 1.04; }
}

/* ---------- Relay figure (hero illustration) ---------- */

.relay {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 580px;
}

@media (min-width: 1024px) {
  .relay { justify-self: center; }
}

.bubble {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 6px;
  background: var(--tint);
}
.bubble-who { font-size: 12px; font-weight: 700; color: var(--muted); }
.bubble-msg { font-size: 16px; font-weight: 500; color: var(--ink); }

.relay-w {
  width: 100%;
  height: auto;
  overflow: visible;
}

.relay-labels {
  font-family: var(--font);
  font-size: 21px;
  font-weight: 700;
}

/* The W scales down on phones; keep its labels readable */
@media (max-width: 559px) {
  .relay-labels { font-size: 26px; }
}

.relay-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
}
.row-who { flex: 0 0 88px; font-size: 14px; font-weight: 700; }
.row-what { font-size: 13px; line-height: 1.45; color: var(--text); }

@media (min-width: 480px) {
  .row-who { flex-basis: 92px; }
  .row-what { font-size: 14px; }
}

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 14px 16px 14px 20px;
  border-radius: 14px;
  background: var(--ink);
  color: #FFFFFF;
}
.card-title { font-size: 16px; font-weight: 700; }
.card-actions { display: flex; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
}
.chip-sky { background: var(--sky); color: var(--ink-deep); }
.chip-ghost { box-shadow: inset 0 0 0 1.5px #5A6A9E; color: #FFFFFF; }

.note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Relay animation: one request travelling along the W, 12s loop */
.relay .lbl-on, .relay .row, .relay .card, .relay .bubble {
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.relay .ring {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.relay .packet { stroke-dasharray: 28 800; animation: packet 12s linear infinite; }
.relay .bubble { animation-name: bubble; }
.relay .card { animation-name: card; }
.relay .r1 { animation-name: on1; }
.relay .r2 { animation-name: on2; }
.relay .r3 { animation-name: on3; }
.relay .r4 { animation-name: on4; }
.relay .r5 { animation-name: on5; }
.relay .g1 { animation-name: ring1; }
.relay .g2 { animation-name: ring2; }
.relay .g3 { animation-name: ring3; }
.relay .g4 { animation-name: ring4; }
.relay .g5 { animation-name: ring5; }

@keyframes packet { 0%, 5% { stroke-dashoffset: 28; opacity: 0; } 6%, 54% { opacity: 1; } 55%, 100% { stroke-dashoffset: -745; opacity: 0; } }
@keyframes bubble { 0% { opacity: 0; transform: translateY(8px); } 4%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes card { 0%, 61% { opacity: 0; transform: translateY(10px); } 65%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes on1 { 0%, 6% { opacity: 0; transform: translateY(6px); } 8%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes on2 { 0%, 16% { opacity: 0; transform: translateY(6px); } 18%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes on3 { 0%, 30% { opacity: 0; transform: translateY(6px); } 32%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes on4 { 0%, 43.5% { opacity: 0; transform: translateY(6px); } 45.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes on5 { 0%, 55% { opacity: 0; transform: translateY(6px); } 57%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes ring1 { 0%, 6% { opacity: 0; transform: scale(1); } 6.5% { opacity: .9; } 14%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes ring2 { 0%, 16.3% { opacity: 0; transform: scale(1); } 16.8% { opacity: .9; } 24%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes ring3 { 0%, 30% { opacity: 0; transform: scale(1); } 30.5% { opacity: .9; } 38%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes ring4 { 0%, 43.7% { opacity: 0; transform: scale(1); } 44.2% { opacity: .9; } 52%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes ring5 { 0%, 55% { opacity: 0; transform: scale(1); } 55.5% { opacity: .9; } 63%, 100% { opacity: 0; transform: scale(1.7); } }

@media (prefers-reduced-motion: reduce) {
  .relay .lbl-on, .relay .row, .relay .card, .relay .bubble { animation: none; opacity: 1; transform: none; }
  .relay .ring, .relay .packet { animation: none; opacity: 0; }
  .btn, .lang-btn { transition: none; }
}

/* ---------- Section headings ---------- */

.section-title {
  font-size: clamp(28px, 3.4vw + 8px, 44px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
}

.section-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}

@media (min-width: 640px) {
  .section-lede { font-size: 18px; }
}

/* ---------- How it works ---------- */

.steps-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.steps-title { max-width: 720px; }

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}

.step-title { font-size: 21px; font-weight: 700; }

.step-text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}

/* Tablet: number in its own column, steps read top to bottom */
@media (min-width: 640px) and (max-width: 1023px) {
  .steps { gap: 32px; max-width: 680px; }
  .step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 8px;
  }
  .step-num { grid-row: span 2; font-size: 44px; }
  .step-title, .step-text { grid-column: 2; }
}

@media (min-width: 1024px) {
  .steps-wrap { gap: 48px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .step { gap: 12px; }
  .step-num { font-size: 44px; }
  .step-title { font-size: 22px; }
}

/* ---------- Divisions ---------- */

.divisi {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.divisions {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
}

.division {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line-soft);
}

.division-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.division-name svg { flex: none; }
.division-name h3 { font-size: 22px; font-weight: 800; }

.division-desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}

.division-eg {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

@media (min-width: 640px) {
  .divisi { gap: 40px; }
  .division {
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 10px;
    padding-block: 28px;
  }
  .division-name { grid-row: span 2; align-self: start; }
  .division-name h3 { font-size: 24px; }
  .division-desc, .division-eg { grid-column: 2; }
}

@media (min-width: 1024px) {
  .division {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    align-items: center;
  }
  .division-name { grid-row: auto; align-self: center; }
  .division-desc { grid-column: 2; }
  .division-eg { grid-column: 3; }
}

/* ---------- What WillAIam won't do ---------- */

.kendali {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.kendali .section-head { max-width: 560px; }

.limits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.limits li {
  display: flex;
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line-band);
  font-size: 17px;
  line-height: 1.55;
}
.limits li:last-child { border-bottom: 0; }
.limits svg { flex: none; margin-top: 2px; }

@media (min-width: 640px) {
  .limits li { padding-block: 20px; font-size: 18px; }
}

@media (min-width: 1024px) {
  .kendali { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .kendali .section-head { max-width: 480px; }
}

/* ---------- Why a W with five dots ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.about-mark {
  width: 100%;
  max-width: 280px;
  height: auto;
  justify-self: center;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 540px;
}

.about-copy p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}

@media (min-width: 640px) {
  .about {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
  }
  .about-mark { max-width: 360px; }
  .about-copy p { font-size: 18px; }
}

@media (min-width: 1024px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .about-mark { max-width: 420px; }
}

/* ---------- Call to action + footer ---------- */

.cta { background: var(--ink-deep); }

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-block: var(--section-y) calc(var(--section-y) - 8px);
}

.cta-title {
  max-width: 820px;
  color: #FFFFFF;
  font-size: clamp(32px, 4.4vw + 8px, 56px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.cta-lede {
  max-width: 640px;
  color: var(--on-dark);
  font-size: 17px;
  line-height: 1.6;
}

.cta-actions { align-items: center; }
.cta-alt { font-size: 16px; color: var(--on-dark); }

.cta-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--sky);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.cta-link:hover { color: var(--sky); }
.cta-link:focus-visible { outline-color: var(--sky); }

@media (min-width: 640px) {
  .cta-inner { gap: 28px; }
  .cta-lede { font-size: 19px; }
}

.site-footer { background: var(--ink-deep); }

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 20px;
  padding-block: 28px 36px;
  border-top: 1px solid var(--line-dark);
  color: var(--on-dark-muted);
  font-size: 14px;
}
.site-footer-inner img { height: 24px; width: auto; }

@media (min-width: 640px) {
  .site-footer-inner { padding-block: 32px 40px; }
  .site-footer-inner img { height: 28px; }
}