/* PT Visi Solaris Indonesia. Palette: #1B4F8A #2E6EB5 #5B9BD5 #A8CBEA #252525 #EAEAEA #FFFFFF only.
   Design system: the logo's -36 degree slant. tan(36deg) = 0.7265, so a 36deg line
   rising over height H runs H * 1.3764 horizontally. That ratio is used for every
   divider, cut corner and accent below. */

:root {
  --blue-d: #1B4F8A;
  --blue: #2E6EB5;
  --blue-m: #5B9BD5;
  --blue-p: #A8CBEA;
  --dark: #252525;
  --light: #EAEAEA;
  --white: #FFFFFF;

  --angle: -36deg;
  --run: 1.3764;
  --r: 14px;
  --pad: clamp(56px, 9vw, 112px);
  --gutter: clamp(20px, 5vw, 48px);
  --head: 64px;
  --font: "Plus Jakarta Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--dark);
  background: var(--white);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue-m); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .on-blue :focus-visible { outline-color: var(--blue-p); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blue-d); color: var(--white); padding: 10px 16px; border-radius: 10px;
}
.skip:focus { top: 10px; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 700; color: var(--blue-d); }
h1 { font-size: clamp(2.1rem, 7.4vw, 3.9rem); line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; line-height: 1.3; }
:lang(zh-Hans) h1 { letter-spacing: 0; line-height: 1.22; }
:lang(zh-Hans) h2 { letter-spacing: 0; line-height: 1.3; }
:lang(zh-Hans) body { line-height: 1.75; }
.lead { font-size: clamp(1.05rem, 2.4vw, 1.2rem); max-width: 60ch; }
.dark, .on-blue { color: var(--light); }
.dark h2, .dark h3, .on-blue h2, .on-blue h3 { color: var(--white); }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
:lang(zh-Hans) .eyebrow { letter-spacing: 0.06em; text-transform: none; font-size: 0.88rem; }
.eyebrow::before {
  content: ""; flex: none; width: 26px; height: 5px; border-radius: 3px; background: currentColor;
  transform: rotate(var(--angle));
}
.dark .eyebrow, .on-blue .eyebrow { color: var(--blue-p); }

/* ---------- slanted section edge (36deg step) ---------- */
.sec { padding-block: var(--pad); position: relative; }
.slant {
  --h: clamp(28px, 5vw, 56px);
  --sx: 56%;
  margin-top: calc(var(--h) * -1);
  padding-top: calc(var(--pad) + var(--h));
  scroll-margin-top: calc(var(--head) - var(--h));
  clip-path: polygon(0 var(--h), var(--sx) var(--h), calc(var(--sx) + var(--h) * var(--run)) 0, 100% 0, 100% 100%, 0 100%);
}
.sec[id]:not(.slant) { scroll-margin-top: var(--head); }
.bg-light { background: var(--light); }
.dark { background: var(--dark); }
.on-blue { background: var(--blue-d); }
.sec-head { margin-bottom: clamp(28px, 5vw, 48px); max-width: 760px; }
.sec-head .lead { margin-top: 16px; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid rgba(37, 37, 37, 0.12);
}
.bar { display: flex; align-items: center; gap: 12px; min-height: var(--head); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blue-d); margin-right: auto; }
.brand svg { width: 38px; height: 33px; }
.brand b { font-size: 1.35rem; letter-spacing: 0.22em; font-weight: 700; }
.brand small { display: none; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--dark); font-weight: 500; }
.lang { display: flex; border: 1.5px solid var(--blue-d); border-radius: 999px; overflow: hidden; }
.lang button {
  font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--blue-d); background: transparent;
  border: 0; padding: 8px 14px; min-height: 40px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--blue-d); color: var(--white); }
.menu-btn {
  display: none; font: inherit; font-weight: 700; color: var(--blue-d); background: transparent;
  border: 1.5px solid var(--blue-d); border-radius: 999px; padding: 8px 16px; min-height: 40px; cursor: pointer;
}
.nav { width: 100%; padding: 6px 0 14px; }
.nav ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nav a { display: inline-block; padding: 8px 0; color: var(--dark); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav a:hover { color: var(--blue); }
.nav .nav-cta {
  background: var(--blue-d); color: var(--white); padding: 9px 18px; border-radius: 10px; font-weight: 700;
}
.nav .nav-cta:hover { background: var(--blue); color: var(--white); }

/* collapsed menu only once JS is present, so no-JS visitors keep full navigation */
@media (max-width: 899px) {
  .js .menu-btn { display: inline-block; }
  .js .nav { display: none; }
  .js .nav.open { display: block; }
  .js .nav ul { flex-direction: column; gap: 0; }
  .js .nav a { display: block; padding: 12px 0; border-top: 1px solid rgba(37, 37, 37, 0.1); }
  .js .nav .nav-cta { margin-top: 10px; text-align: center; }
}
@media (min-width: 900px) {
  .bar { flex-wrap: nowrap; }
  .nav { width: auto; padding: 0; order: 1; }
  .lang { order: 2; }
  .nav ul { gap: 2px 22px; align-items: center; }
  .brand small { display: block; }
  .brand { flex-direction: row; }
}
@media (min-width: 900px) and (max-width: 1100px) { .nav ul { gap: 2px 14px; } .nav a { font-size: 0.88rem; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  padding: 14px 24px; min-height: 50px; border-radius: 12px; border: 2px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--blue-d); color: var(--white); }
.btn-primary:hover { background: var(--blue); }
.btn-ghost { background: transparent; color: var(--blue-d); border-color: var(--blue-d); }
.btn-ghost:hover { background: var(--blue-d); color: var(--white); }
.on-blue .btn-ghost { color: var(--white); border-color: var(--blue-p); }
.on-blue .btn-ghost:hover { background: var(--white); color: var(--blue-d); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(36px, 7vw, 88px) calc(var(--pad) + 28px); background: var(--white); }
.hero::before { /* one big translucent bar on the logo angle, behind the content */
  content: ""; position: absolute; z-index: 0;
  width: 220px; height: 1100px; right: -40px; top: -180px;
  border-radius: 110px; background: var(--light);
  transform: rotate(var(--angle));
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 40px; }
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero-copy h1 { max-width: 14ch; }
:lang(zh-Hans) .hero-copy h1 { max-width: 12em; }
.hero-copy .lead { margin-top: 22px; }
.hero-note { margin-top: 22px; max-width: 52ch; font-size: 0.92rem; padding-left: 14px; border-left: 4px solid var(--blue-p); }

.hero-panel {
  --c: 30px;
  position: relative; min-height: 340px; background: var(--blue-d); border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c) * var(--run)) 100%, 0 100%);
}
.hero-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-panel .drift { animation: drift 0.9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-panel .drift.d2 { animation-delay: 0.12s; }
@keyframes drift { from { transform: translate(0, 28px); } to { transform: translate(0, 0); } }
.panel-list {
  --c: 26px;
  position: relative; z-index: 1; background: var(--dark); color: var(--white);
  padding: calc(var(--c) + 16px) 22px 22px;
  clip-path: polygon(0 var(--c), 42% var(--c), calc(42% + var(--c) * var(--run)) 0, 100% 0, 100% 100%, 0 100%);
}
.panel-list p { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-p); margin-bottom: 8px; }
:lang(zh-Hans) .panel-list p { text-transform: none; letter-spacing: 0.05em; font-size: 0.85rem; }
.panel-list li { padding: 7px 0; font-weight: 600; border-top: 1px solid rgba(234, 234, 234, 0.18); }
.panel-list li:first-child { border-top: 0; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 56px; }
  .hero-panel { min-height: 480px; }
}

/* ---------- supply ---------- */
.supply-list { border-top: 2px solid var(--dark); }
.supply-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid rgba(37, 37, 37, 0.25);
}
.idx { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 700; line-height: 1; color: var(--blue); min-width: 2.2ch; }
.supply-list h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.supply-list p { margin-top: 6px; max-width: 58ch; }
.tag {
  display: inline-block; margin-top: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; background: var(--blue-d); color: var(--white);
}
:lang(zh-Hans) .tag { text-transform: none; letter-spacing: 0.03em; font-size: 0.8rem; }
.tag.next { background: transparent; color: var(--blue-d); border: 1.5px dashed var(--blue-d); }
.supply-foot { margin-top: 28px; max-width: 62ch; font-weight: 500; }
@media (min-width: 800px) {
  .supply-list li { grid-template-columns: 90px 1fr 190px; align-items: center; }
  .tag { margin-top: 0; justify-self: end; }
}

/* ---------- partners ---------- */
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 84px; padding: 12px; border: 2px dashed var(--blue-m); border-radius: var(--r);
  color: var(--blue-d); font-weight: 600; font-size: 0.9rem; background: var(--white);
}
/* Dua kolom, bukan empat. Empat logo berjajar satu baris di kanan membuat
   kolom kiri yang tinggi menggantung sendirian; blok 2x2 menyeimbangkannya. */
@media (min-width: 640px) { .slots { grid-template-columns: repeat(2, 1fr); } }

/* Logo mitra. Abu-abu dulu, berwarna saat disentuh kursor.
   Merah LONGi dan hijau Haitai dua-duanya di luar palet VISI; dibiarkan
   menyala bersamaan, dinding ini jadi tiga sistem warna yang bertengkar.
   Diseragamkan lebih dulu, baru warnanya muncul kalau dilihat satu per satu. */
.logo-tile {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid rgba(27, 79, 138, 0.16);
  border-radius: 14px;
  background: var(--white, #fff);
}
.logo-tile img {
  max-width: 100%;
  height: auto;
  max-height: 42px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 240ms ease, opacity 240ms ease;
}
.logo-tile:hover img,
.logo-tile:focus-within img { filter: grayscale(0); opacity: 1; }

/* Sebagian berkas logo datang sebagai kanvas persegi dengan ruang putih lebar
   di sekelilingnya. Batas tinggi mengenai kanvasnya, bukan markanya, sehingga
   logonya menyusut jadi sangat kecil. Yang seperti itu diberi ruang lebih. */
.logo-tile img[data-padded] { max-height: 84px; }
.logo-tile--card img[data-padded] { max-height: 56px; }

/* Di dalam kartu rel latarnya putih dan ruangnya sempit. */
.logo-tile--card {
  min-height: 56px;
  padding: 10px 14px;
  border-color: rgba(27, 79, 138, 0.14);
}
.logo-tile--card img { max-height: 30px; }

/* Kartu kategori yang mitranya belum dikunci. Dibedakan supaya terbaca
   sebagai tempat yang disediakan, bukan kartu yang gagal dimuat. */
/* Setinggi isinya saja. Diregangkan setinggi kartu yang penuh, sisanya
   jadi bidang putih kosong yang justru menonjolkan bahwa ia belum terisi. */
.card--pending {
  background: rgba(255, 255, 255, 0.72);
  align-self: start;
}
.card--pending h3 { color: #5B9BD5; }

@media (prefers-reduced-motion: reduce) {
  .logo-tile img { transition: none; }
}
.partners-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .partners-grid { grid-template-columns: 5fr 7fr; align-items: start; gap: 56px; } .partners-grid .sec-head { margin-bottom: 0; } }

/* ---------- product highlight rail ---------- */
.rail-top { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.rail-top .sec-head { margin-bottom: 0; }
.rail-ctl { display: none; align-items: center; gap: 10px; }
.js .rail-ctl { display: flex; }
.rail-ctl span { font-size: 0.82rem; color: var(--blue-p); }
.rail-ctl button {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--blue-p); background: transparent;
  color: var(--white); font: inherit; font-size: 1.2rem; cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.rail-ctl button:hover { background: var(--blue-p); color: var(--dark); }
.rail {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px var(--gutter) 22px; margin-inline: calc(var(--gutter) * -1);
  scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-color: var(--blue) transparent;
}
.card {
  --c: 34px;
  flex: 0 0 min(84vw, 340px); scroll-snap-align: start;
  background: var(--white); color: var(--dark); border-radius: 20px; padding: 18px 18px 40px;
  display: flex; flex-direction: column; gap: 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c) * var(--run)) 100%, 0 100%);
}
.card-cat { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
:lang(zh-Hans) .card-cat { text-transform: none; letter-spacing: 0.04em; font-size: 0.88rem; }
.card h3 { color: var(--blue-d); }
.card-img {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
  background: var(--light); border-radius: 12px; font-size: 0.85rem; font-weight: 600; color: var(--blue-d);
  border: 2px dashed var(--blue-m);
}
.card .slot { min-height: 52px; font-size: 0.8rem; }
.card dl { display: grid; gap: 10px; font-size: 0.92rem; }
.card dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
:lang(zh-Hans) .card dt { text-transform: none; letter-spacing: 0.04em; font-size: 0.82rem; }
.card dd { margin: 0; }
@media (min-width: 900px) { .card { flex-basis: 330px; } }

/* ---------- portfolio placeholder ---------- */
.portfolio { padding-block: clamp(44px, 7vw, 80px); }
.pf-box {
  display: grid; gap: 14px; padding: clamp(22px, 4vw, 36px); border: 2px dashed var(--blue-d); border-radius: 20px;
}
.pf-box .tag { justify-self: start; margin: 0; }
.pf-box h2 { font-size: clamp(1.35rem, 3.4vw, 1.9rem); }
.pf-box p { max-width: 62ch; }
@media (min-width: 800px) { .pf-box { grid-template-columns: 1fr 1.4fr; align-items: center; gap: 40px; } }

/* ---------- why us ---------- */
.why-grid { display: grid; gap: 36px; }
.why-list li {
  display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; padding: 22px 0; border-top: 1px solid rgba(168, 203, 234, 0.4);
}
.why-list li:first-child { border-top: 0; padding-top: 0; }
.why-list .n {
  font-size: 1.1rem; font-weight: 700; color: var(--blue-d); background: var(--blue-p); width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 12px;
}
.why-list p { grid-column: 2; max-width: 58ch; }
.why-note { margin-top: 26px; font-weight: 600; color: var(--blue-p); padding-left: 14px; border-left: 4px solid var(--blue-p); }
@media (min-width: 900px) { .why-grid { grid-template-columns: 4fr 7fr; gap: 72px; } .why-grid .sec-head { position: sticky; top: 100px; align-self: start; } }

/* ---------- how it works ---------- */
.steps { counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: 56px 1fr; gap: 2px 18px; padding: 22px 0; border-top: 1px solid rgba(37, 37, 37, 0.25);
  position: relative;
}
.steps li:last-child { border-bottom: 1px solid rgba(37, 37, 37, 0.25); }
.steps .num { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--blue); grid-row: span 2; }
.steps p { max-width: 56ch; }
.how-grid { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .how-grid { grid-template-columns: 4fr 7fr; gap: 72px; }
  .how-grid .sec-head { position: sticky; top: 100px; align-self: start; }
  .steps li:nth-child(even) { padding-left: 28px; }
  .steps li:nth-child(even) .num { color: var(--blue-d); }
}

/* ---------- about ---------- */
.about-grid { display: grid; gap: 40px; }
.about-text p + p { margin-top: 16px; }
.about-text p { max-width: 62ch; }
.vm { margin-top: 28px; display: grid; gap: 22px; }
.vm h3 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
:lang(zh-Hans) .vm h3 { text-transform: none; letter-spacing: 0.04em; font-size: 0.95rem; }
.vm ol { counter-reset: m; display: grid; gap: 8px; }
.vm ol li { counter-increment: m; padding-left: 34px; position: relative; }
.vm ol li::before { content: counter(m); position: absolute; left: 0; top: 0; font-weight: 700; color: var(--blue-d); }
.founders h3.sub { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
:lang(zh-Hans) .founders h3.sub { text-transform: none; letter-spacing: 0.04em; font-size: 0.95rem; }
.person-list { display: grid; gap: 18px; }
.person { --c: 28px; display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; background: var(--white); border-radius: 18px; padding: 14px 18px 14px 14px; }
.photo {
  --c: 28px;
  aspect-ratio: 4 / 5; background: var(--blue-p); color: var(--blue-d); font-size: 0.75rem; font-weight: 700; text-align: center;
  display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c) * var(--run)) 100%, 0 100%);
}
.person h4 { margin: 0; font-size: 1.1rem; color: var(--blue-d); line-height: 1.3; }
.person .role { font-size: 0.82rem; font-weight: 700; color: var(--blue); margin: 2px 0 6px; }
.person p { font-size: 0.92rem; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 28px; }
.faq details { border-top: 1px solid rgba(37, 37, 37, 0.25); }
.faq details:last-child { border-bottom: 1px solid rgba(37, 37, 37, 0.25); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-weight: 600; font-size: 1.05rem; position: relative; color: var(--blue-d);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 4px; margin-top: -2px;
  background: var(--blue); border-radius: 2px; transform: rotate(var(--angle)); transition: transform 0.25s;
}
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 0 20px; max-width: 62ch; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 4fr 7fr; gap: 72px; } .faq-grid .sec-head { position: sticky; top: 100px; align-self: start; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 36px; }
.contact-info dl { display: grid; gap: 18px; margin-top: 28px; }
.contact-info dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-p); }
:lang(zh-Hans) .contact-info dt { text-transform: none; letter-spacing: 0.04em; font-size: 0.88rem; }
.contact-info dd { margin: 2px 0 0; font-weight: 500; }
.contact-info a { color: var(--white); text-underline-offset: 3px; }
.contact-info .btn { margin-top: 26px; }
.form-card {
  --c: 40px;
  background: var(--white); color: var(--dark); padding: clamp(22px, 4vw, 38px) clamp(20px, 4vw, 36px) calc(clamp(22px, 4vw, 38px) + 28px);
  border-radius: 22px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c) * var(--run)) 100%, 0 100%);
}
.form-card h3 { color: var(--blue-d); font-size: 1.5rem; margin-bottom: 18px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: 0.9rem; color: var(--blue-d); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--dark); background: var(--white);
  border: 1.5px solid rgba(37, 37, 37, 0.5); border-radius: 10px; padding: 12px 14px; min-height: 48px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--blue-m); outline-offset: 1px; border-color: var(--blue); }
.row2 { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }
.form-card .btn { width: 100%; }
.form-note { margin-top: 14px; font-size: 0.85rem; border-left: 4px solid var(--blue-p); padding-left: 12px; }
.form-status { margin-top: 12px; font-weight: 600; color: var(--blue-d); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; } }

/* ---------- footer ---------- */
.site-foot { background: var(--dark); color: var(--light); padding: 34px 0 38px; font-size: 0.9rem; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.foot-row svg { width: 34px; height: 30px; }
.foot-row p { margin-right: auto; }
.foot-row .demo { color: var(--blue-p); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- home: compact about band ---------- */
.about-band { --band: clamp(44px, 7vw, 80px); padding-bottom: var(--band); padding-top: calc(var(--band) + var(--h)); }
.band-grid { display: grid; gap: 22px; }
.band-text p { max-width: 62ch; }
.band-text .actions { margin-top: 22px; }
@media (min-width: 900px) { .band-grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; } }

/* ---------- nav: current page ---------- */
.nav a[aria-current="page"] { color: var(--blue-d); font-weight: 700; }

/* ---------- about page ---------- */
.page-hero .hero-copy { position: relative; max-width: 820px; }
.page-hero .hero-copy h1 { max-width: 18ch; }
:lang(zh-Hans) .page-hero .hero-copy h1 { max-width: 14em; }

.split { display: grid; gap: 28px; }
.split .sec-head { margin-bottom: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 4fr 7fr; gap: 72px; }
  .split .sec-head { position: sticky; top: 100px; align-self: start; }
}
.prose p { max-width: 62ch; }
.prose p + p { margin-top: 16px; }

.supply-list.plain li { grid-template-columns: auto 1fr; }
@media (min-width: 800px) { .supply-list.plain li { grid-template-columns: 90px 1fr; align-items: start; } }

.dark .vm h3 { color: var(--blue-p); }
.dark .vm ol li::before { color: var(--blue-p); }
.vm--row { margin-top: 0; }
.vm--row > div:first-child p { font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.4; font-weight: 600; color: var(--white); max-width: 26em; }
@media (min-width: 800px) { .vm--row { grid-template-columns: 1fr 1fr; gap: 56px; } }

.person-list--two { gap: 18px; }
@media (min-width: 800px) { .person-list--two { grid-template-columns: 1fr 1fr; } }
.person h3 { margin: 0; font-size: 1.1rem; color: var(--blue-d); line-height: 1.3; }

.lab { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
:lang(zh-Hans) .lab { text-transform: none; letter-spacing: 0.04em; font-size: 0.85rem; }
.myth-list { border-top: 2px solid var(--dark); }
.myth-list li { display: grid; gap: 14px 40px; padding: 22px 0; border-bottom: 1px solid rgba(37, 37, 37, 0.25); }
.myth-list .q p { font-weight: 600; }
.myth-list .a .lab { color: var(--blue-d); }
@media (min-width: 800px) { .myth-list li { grid-template-columns: 1fr 1fr; } }

.legal { border-top: 2px solid var(--dark); }
.legal > div { display: grid; gap: 4px 28px; padding: 18px 0; border-bottom: 1px solid rgba(37, 37, 37, 0.25); align-items: start; }
.legal dt { font-weight: 700; color: var(--blue-d); }
.legal dd { margin: 0; }
.legal .tag { margin-top: 0; }
@media (min-width: 800px) { .legal > div { grid-template-columns: 1fr 1.5fr; } }

.cta-band .wrap { display: grid; gap: 22px; }
.cta-band h2 { max-width: 20ch; }
.cta-band p { max-width: 54ch; }
.cta-band .btn-primary { background: var(--white); color: var(--blue-d); justify-self: start; }
.cta-band .btn-primary:hover { background: var(--blue-p); }
@media (min-width: 900px) { .cta-band .wrap { grid-template-columns: 1fr auto; align-items: center; gap: 24px 64px; } .cta-band .cta-text { grid-column: 1; } .cta-band .btn { grid-column: 2; grid-row: 1; } }