@charset "utf-8";

/* ==========================================================================
   LUMEN — Sản xuất sự kiện & ánh sáng sân khấu
   Demo cho portfolio Hoàng Anh Studio. Không có dữ liệu khách hàng thật.
   --------------------------------------------------------------------------
   CONCEPT
   Một tờ lệnh chạy đèn (cue sheet) được dựng thành trang: nền hậu trường gần
   đen, một luồng sáng trắng lạnh, và duy nhất một sắc vôi điện cho dữ liệu và
   điều khiển. Mọi thứ đặt trên lưới 12 cột có đường kẻ 1px như bản vẽ kỹ thuật.

   PALETTE (đo bằng công thức WCAG 2.2, nền #08090A trừ khi ghi khác)
     --ink      #08090A  nền chính (hậu trường)
     --ink-2    #0E1012  panel, dải phân cách
     --ink-3    #15181B  card, bề mặt nổi
     --line     rgba(242,245,244,.14)  đường kẻ 1px (và --line-2 .07 cho đường phụ)
     --ctl      rgba(242,245,244,.42)  viền control (input, radio, chip, ghost btn)
                #6A6C6C trên --ink → 3.77:1 · #6E7071 trên --ink-2 → 3.83:1
                (WCAG 1.4.11 cần 3:1; mức .22 cũ chỉ đạt 1.82:1 nên đã bỏ)
     --white    #F2F5F4  chữ chính      18.17:1 trên --ink · 17.38:1 trên --ink-2
     --mist     #A3ADB1  chữ phụ        8.70:1 trên --ink · 8.32:1 trên --ink-2
     --dim      #8E989C  nhãn nhỏ       6.76:1 trên --ink · 6.04:1 trên --ink-3
     --lime     #CBFF4D  dữ liệu/điều khiển  17.03:1 trên --ink; #08090A trên lime 17.03:1
     --beam     #DCE8FF  ánh sáng lạnh  16.16:1 trên --ink (hằng số trong gradient SVG,
                không cần biến CSS vì không có thuộc tính nào đọc tới)
     --alert    #FF9E90  lỗi biểu mẫu   10.01:1 trên --ink

   TYPE — Space Grotesk (display) + Archivo (text)
     display h1  clamp(1.4rem, 6.8vw, 5.5rem) / .98 / -.022em / 700 / uppercase
                 (và tỉ lệ đổi theo cỡ chữ: 1.4rem ở 320px, 3.06rem ở 720px)
     h2          clamp(1.9rem, 4.4vw, 3.25rem) / 1.04 / -.028em / 700
     h3          clamp(1.125rem, 1.5vw, 1.3125rem) / 1.28 / -.012em / 500
                 (--fs-h3: dùng chung cho card, quy trình, năng lực, empty state)
     body        1rem / 1.62 / 0 / 400 (Archivo) — mọi đoạn văn, kể cả trong card,
                 quy trình và form, đều 1rem; không có bậc 15px rời rạc
     lead        clamp(1.0625rem, 1.5vw, 1.25rem) / 1.55 / 0 / 400
     meta        .8125rem / 1.2 / .14em / 500 / uppercase
     tiny        .75rem / 1.2 / .1em / 500 / uppercase

   LAYOUT
   Lưới 12 cột bất đối xứng. Cột trái là số thứ tự mục như số hiệu bản vẽ; nội
   dung treo lệch phải. Hero chia 1 : .92 giữa chữ và ảnh sân khấu. Các mục nối
   nhau bằng đường kẻ ngang 1px chạy hết bề ngang, không dùng bóng đổ.

   SIGNATURE MOTION
   Hai dải chữ chạy chéo cắt nhau ngược chiều, đặt ngay dưới hero — đó là
   signature duy nhất. Vệt sáng bám con trỏ chỉ là nền: gradient tĩnh, cả khối
   1040px được dịch bằng `translate` trong requestAnimationFrame nên compositor
   chỉ di chuyển một layer, không vẽ lại gradient mỗi frame.

   PORTFOLIO
   Mục "Sự kiện": 8 gợi ý concept, lọc theo 4 hình thức. Ảnh chụp cục bộ
   cung cấp cảm hứng, không đại diện cho dự án hay thông số của khách hàng.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink: #08090A;
  --ink-2: #0E1012;
  --ink-3: #15181B;
  --line: rgba(242, 245, 244, .14);
  --line-2: rgba(242, 245, 244, .07);
  --ctl: rgba(242, 245, 244, .42);
  --white: #F2F5F4;
  --mist: #A3ADB1;
  --dim: #8E989C;
  --lime: #CBFF4D;
  --alert: #FF9E90;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-text: "Archivo", "Segoe UI", system-ui, sans-serif;

  --fs-meta: .8125rem;
  --fs-tiny: .75rem;
  --fs-body: 1rem;
  --fs-h3: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.25rem);

  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --ease-exit: cubic-bezier(.7, 0, .84, 0);
  --ease-pop: cubic-bezier(.34, 1.4, .64, 1);
  --dur-micro: 140ms;
  --dur-small: 220ms;
  --dur-med: 320ms;
  --dur-large: 480ms;
  --dur-reveal: 680ms;
  --dur-hero: 900ms;

  --gutter: clamp(20px, 4.4vw, 64px);
  --wrap: 1280px;
  --hdr-h: 72px;
  --rule: 1px solid var(--line);
  /* one padding rhythm shared by the capability grid and the process grid */
  --cell-pad-y: clamp(22px, 3vw, 34px);
  --cell-pad-x: clamp(16px, 2.4vw, 32px);
  --cell-pad-b: clamp(26px, 3.4vw, 40px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; max-width: 100%; }
img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; }

::selection { background: var(--lime); color: var(--ink); }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Body copy is 1rem everywhere. The card/step/form paragraphs used to carry six
   ad-hoc 14.5–15.5px values; that reads as fine print at 320px and breaks the
   contract's "body ≥ 16px". One rule, one step. Placed after the reset so it
   also outranks nothing in particular — every later rule only sets line-height,
   colour and measure. */
.card__desc,
.cap__text,
.proc__text,
.empty__text,
.done__text,
.opt { font-size: var(--fs-body); }

.skip {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  transform: translateY(-120%);
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: transform var(--dur-small) var(--ease-move);
}
.skip:focus-visible { transform: translateY(0); outline-offset: -4px; outline-color: var(--ink); }

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- pointer spotlight ---------- */
/* Static gradient on a fixed-size layer, moved with `translate` only. A gradient
   whose stop position changes has to be re-rasterised every frame; translating
   the layer is compositor-only. The outer box is exactly the viewport and clips,
   so the 1040px glow can never create horizontal overflow. It is ambient light,
   not a second signature. */
.spot {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--spot-o, 0);
  transition: opacity var(--dur-large) var(--ease-enter);
  mix-blend-mode: screen;
}
.spot__glow {
  position: absolute;
  left: -520px;
  top: -520px;
  width: 1040px;
  height: 1040px;
  background: radial-gradient(circle closest-side, rgba(220, 232, 255, .085), transparent 62%);
  translate: 0 0;
}

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
}

.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 9, 10, .84);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border-bottom: 1px solid var(--line);
  opacity: 1;
  pointer-events: none;
}

/* Base: the progress line must never be an in-flow flex item. Without scroll
   timelines (Firefox, older Safari) an empty span would eat a `gap` and push
   the CTA off the right gutter. */
.hdr__progress { display: none; }

/* scroll-driven, CSS only: veil fades in and a 1px progress line draws across */
@supports (animation-timeline: scroll()) {
  .hdr::before {
    animation: hdrVeil linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 160px;
  }
  .hdr__progress {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--lime);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: hdrProgress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes hdrVeil { from { opacity: .12; } to { opacity: 1; } }
@keyframes hdrProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hdr__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  height: var(--hdr-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  flex: 0 0 auto;
}
.brand__mark {
  width: 22px;
  height: 22px;
  color: var(--lime);
}
.brand__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  line-height: 1;
}

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.6vw, 26px);
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color var(--dur-small) var(--ease-move);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 10px;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  /* retract = exit: ~0.65x the entrance, --ease-exit */
  transition: transform var(--dur-small) var(--ease-exit);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--white); }
  .nav__link:hover::after {
    transform: scaleX(1);
    transition-duration: var(--dur-med);
    transition-timing-function: var(--ease-expo);
  }
}
.nav__link:focus-visible::after {
  transform: scaleX(1);
  transition-duration: var(--dur-med);
  transition-timing-function: var(--ease-expo);
}

.hdr__cta { flex: 0 0 auto; min-height: 44px; }

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--ctl);
  flex: 0 0 auto;
}
.menu-btn__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--white);
  transition: transform var(--dur-med) var(--ease-move);
}
.menu-btn[aria-expanded="true"] .menu-btn__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: 0 1.15rem;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  transition: transform var(--dur-small) var(--ease-move);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-small) var(--ease-move);
}
.btn--lime {
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
}
.btn--lime::after { background: #FFFFFF; }
.btn--ghost {
  border: 1px solid var(--ctl);
  color: var(--white);
}
.btn--ghost::after { background: rgba(242, 245, 244, .07); }
.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-med) var(--ease-expo);
}
.btn--full { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { opacity: 1; }
  .btn--lime:hover::after { opacity: .18; }
  .btn:hover .btn__arrow { transform: translateX(3px); }
  .btn:hover { transform: translateY(-1px); }
}
.btn:focus-visible .btn__arrow { transform: translateX(3px); }
/* Press feedback must win over the hover lift: same specificity (0,2,0), so it
   has to come after the hover block. */
.btn:active { transform: scale(.97); transition-duration: 90ms; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(28px, 4.4vw, 56px);
  padding-bottom: clamp(40px, 6vw, 76px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    104deg,
    rgba(242, 245, 244, .035) 0 1px,
    transparent 1px 96px
  );
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 10%, transparent 72%);
}

.hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: var(--rule);
  margin-bottom: clamp(24px, 3.4vw, 44px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mist);
}
.eyebrow--right { color: var(--dim); }
@media (max-width: 600px) {
  .eyebrow--right { display: none; }
}
.dot {
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  flex: 0 0 auto;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 6.8vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.022em;
  text-transform: uppercase;
  margin-bottom: clamp(28px, 4vw, 56px);
  max-width: 100%;
}
.hl {
  display: block;
  overflow: hidden;
  padding-block: .12em;
  margin-block: -.12em;
}
.hl__in { display: block; }
.per { color: var(--lime); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(28px, 4.6vw, 72px);
  align-items: start;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--mist);
  max-width: 40ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.6vw, 32px);
}
.hero__fine {
  margin-top: 16px;
  font-size: var(--fs-meta);
  letter-spacing: .02em;
  color: var(--dim);
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(36px, 5vw, 64px);
  border-top: var(--rule);
  background: var(--line-2);
}
.hero__meta li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0 0;
  background: var(--ink);
  padding-right: 16px;
}
.hero__meta li + li { padding-left: 16px; }
.hero__meta-k {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero__meta-v {
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--white);
}

/* ---------- rig panel ---------- */
.rig {
  position: relative;
  border: var(--rule);
  background:
    linear-gradient(180deg, rgba(220, 232, 255, .045), transparent 46%),
    var(--ink-2);
  padding: 16px;
}
.rig::before,
.rig::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--lime);
  opacity: .55;
}
.rig::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rig::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.rig__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 6px;
}
.rig__label {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
}
.rig__id {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  letter-spacing: .1em;
  color: var(--lime);
}

.rig__art {
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  display: block;
  object-fit: cover;
  margin-block: 4px;
}
/* hidden must win over component display rules */
[hidden] { display: none !important; }

.photo-note {
  margin-top: 12px;
  color: var(--mist);
  font-size: .75rem;
  line-height: 1.65;
}

/* ---------- dual diagonal marquee (signature) ---------- */
.bands {
  position: relative;
  height: clamp(150px, 17vw, 230px);
  margin-block: clamp(6px, 1.4vw, 16px) clamp(34px, 4.6vw, 64px);
  overflow: hidden;
  isolation: isolate;
}

.band {
  position: absolute;
  left: -12%;
  width: 124%;
  padding-block: 10px;
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.band--a {
  top: 32%;
  transform: translateY(-50%) rotate(-6deg);
  z-index: 3;
  background: #101315;
  border-color: rgba(242, 245, 244, .2);
}
.band--b {
  top: 68%;
  transform: translateY(-50%) rotate(5deg);
  z-index: 2;
  background: #0B0D0E;
  border-color: var(--line-2);
}

.band__track {
  display: flex;
  width: max-content;
  animation: bandRun 46s linear infinite;
}
.band__track--rev { animation-direction: reverse; animation-duration: 58s; }

.band__run {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  padding-right: .5em;
}
.band--b .band__run {
  color: var(--mist);
  font-size: clamp(.8rem, 1.4vw, 1.05rem);
  letter-spacing: .22em;
  font-weight: 400;
}
.band__run i {
  font-style: normal;
  color: var(--lime);
  padding-inline: .5em;
  font-size: .8em;
  transform: translateY(-.06em);
}
.band--b .band__run i { color: rgba(203, 255, 77, .55); }

@keyframes bandRun {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- section scaffolding ---------- */
.sect {
  position: relative;
  padding-block: clamp(52px, 7vw, 104px);
  border-top: var(--rule);
}
.sect--brief { padding-bottom: clamp(64px, 8vw, 120px); }

.sect__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: clamp(24px, 5vw, 80px);
  row-gap: clamp(16px, 2vw, 22px);
  align-items: end;
  margin-bottom: clamp(32px, 4.4vw, 56px);
}
.sect__head > .kicker { grid-column: 1 / -1; align-self: start; }
.sect__head > .sect__title { grid-column: 1; }
.sect__head > .sect__lede { grid-column: 2; align-self: end; padding-bottom: .35em; }
.sect__head--split { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }

.kicker {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lime);
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: 84px;
  background: currentColor;
  opacity: .4;
}

.sect__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  text-wrap: balance;
  max-width: 20ch;
}

.sect__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mist);
  max-width: 52ch;
}
.sect__lede--right { justify-self: end; max-width: 42ch; }

/* ---------- capabilities ---------- */
.caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule);
}
.cap {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px var(--cell-pad-x);
  align-items: start;
  padding: var(--cell-pad-y) var(--cell-pad-x) var(--cell-pad-b) 0;
  border-bottom: var(--rule);
}
.cap:nth-child(odd) { border-right: var(--rule); }
.cap:nth-child(even) { padding-left: var(--cell-pad-x); }

.cap__no {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--lime);
  padding-top: .55em;
}
.cap__body { grid-column: 2; }
.cap__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.012em;
  margin-bottom: 10px;
}
.cap__text {
  line-height: 1.62;
  color: var(--mist);
  max-width: 42ch;
}
.cap__glyph {
  grid-column: 3;
  width: 34px;
  height: 34px;
  color: var(--white);
  opacity: .5;
  transition: opacity var(--dur-med) var(--ease-move), transform var(--dur-med) var(--ease-expo);
}
@media (hover: hover) and (pointer: fine) {
  .cap:hover .cap__glyph { opacity: 1; color: var(--lime); transform: translateY(-2px); }
}

/* ---------- filters ---------- */
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: var(--rule);
  flex-wrap: wrap;
  max-width: 100%;
}
.filters__scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 2px;
  margin-inline: -2px;
  padding-inline: 2px;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 100%;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.filters__scroll::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ctl);
  color: var(--mist);
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  flex: 0 0 auto;
  scroll-snap-align: start;
  transition: color var(--dur-small) var(--ease-move),
              border-color var(--dur-small) var(--ease-move),
              transform var(--dur-small) var(--ease-move);
}
.chip__n {
  font-size: var(--fs-tiny);
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  transition: color var(--dur-small) var(--ease-move);
}
.chip:active { transform: scale(.97); transition-duration: 90ms; }

@media (hover: hover) and (pointer: fine) {
  .chip:hover { color: var(--white); border-color: rgba(242, 245, 244, .55); }
  .chip:hover .chip__n { color: var(--mist); }
}

.chip[aria-pressed="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  font-weight: 700;
}
.chip[aria-pressed="true"] .chip__n { color: rgba(8, 9, 10, .68); }

.filters__count {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  color: var(--dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* ---------- cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}

.card {
  min-width: 0;
}
.card.is-out { display: none; }

.card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--ink-2);
  transition: border-color var(--dur-med) var(--ease-move), transform var(--dur-med) var(--ease-expo);
}
.card__link:focus-visible { outline-offset: 3px; }

.card__plot {
  position: relative;
  display: block;
  aspect-ratio: 400 / 250;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--ink-3);
}
.card__plot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-large) var(--ease-expo);
}
.card__plot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(203, 255, 77, .09), transparent 58%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-move);
  pointer-events: none;
}

.card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  background: rgba(8, 9, 10, .8);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 2vw, 24px);
  flex: 1 1 auto;
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--white);
}
.card__desc {
  line-height: 1.58;
  color: var(--mist);
  max-width: 46ch;
}
.card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .card__link:hover { border-color: rgba(203, 255, 77, .42); transform: translateY(-3px); }
  .card__link:hover .card__plot img { transform: scale(1.035); }
  .card__link:hover .card__plot::after { opacity: 1; }
}
.card__link:focus-visible .card__plot::after { opacity: 1; }

/* filtered-in animation (FLIP-lite: short opacity + translate) */
.card.is-in {
  animation: cardIn var(--dur-med) var(--ease-enter) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- empty state ---------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 3vw, 32px);
  border: 1px dashed rgba(242, 245, 244, .22);
  background: var(--ink-2);
}
.empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
}
.empty__text { color: var(--mist); }
.empty .btn { margin-top: 8px; }

.work__note {
  margin-top: 22px;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--dim);
  max-width: 62ch;
}

/* ---------- process ---------- */
.proc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: var(--rule);
}
/* Rules are drawn on the steps themselves, never by a background showing through
   the grid gaps — the reveal translates each step, and a gutter colour would
   flash as a bar above the row. */
.proc__step + .proc__step { border-left: 1px solid var(--line-2); }
.proc__step {
  position: relative;
  background: var(--ink);
  padding: var(--cell-pad-y) var(--cell-pad-x) var(--cell-pad-b);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proc__no {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--lime);
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
}
.proc__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.proc__text {
  line-height: 1.58;
  color: var(--mist);
}
.proc__meta {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- brief form ---------- */
.brief {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.brief__intro { display: flex; flex-direction: column; gap: 18px; }
.brief__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: var(--dim);
  max-width: 40ch;
}
.brief__notes li { position: relative; padding-left: 18px; }
.brief__notes li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border: 1px solid var(--lime);
  transform: rotate(45deg);
}

.form-wrap {
  position: relative;
  border: var(--rule);
  background: var(--ink-2);
  padding: clamp(20px, 3vw, 36px);
}

.form { display: flex; flex-direction: column; gap: 22px; }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--set { border: 0; padding: 0; margin: 0; }

.field__label {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
}
.req { color: var(--lime); font-size: .9em; }

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--ink);
  border: 1px solid var(--ctl);
  color: var(--white);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--dur-small) var(--ease-move), background-color var(--dur-small) var(--ease-move);
}
.field__input::placeholder { color: #9AA4A8; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .field__input:hover { border-color: rgba(242, 245, 244, .55); }
}
.field__input:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
  border-color: transparent;
}

.field__row { display: flex; align-items: stretch; gap: 10px; }
.field__input--num { max-width: 180px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.field__unit {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.field__hint {
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--dim);
}
.field__err {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--alert);
  font-weight: 500;
}
.field__err::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-top: .48em;
  background: var(--alert);
  transform: rotate(45deg);
}

[aria-invalid="true"] {
  border-color: var(--alert) !important;
}
/* radio options */
.opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ctl);
  background: var(--ink);
  line-height: 1.3;
  color: var(--mist);
  cursor: pointer;
  transition: border-color var(--dur-small) var(--ease-move),
              color var(--dur-small) var(--ease-move),
              background-color var(--dur-small) var(--ease-move);
}
/* visually hidden but still focusable and announced; no opacity so the
   control is never in a "faded out" state for high-contrast modes */
.opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.opt::before {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border: 1px solid var(--ctl);
  border-radius: 50%;
  background: transparent;
  transform: scale(.9);
  transition: border-color var(--dur-small) var(--ease-move),
              background var(--dur-small) var(--ease-move),
              transform var(--dur-micro) var(--ease-move);
}
.opt:has(input:checked),
.opt.is-checked {
  border-color: var(--lime);
  color: var(--white);
  background: rgba(203, 255, 77, .07);
}
/* 14px dot — the one place --ease-pop is allowed (elements < 40px) */
.opt:has(input:checked)::before,
.opt.is-checked::before {
  border-color: var(--lime);
  background: radial-gradient(circle at 50% 50%, var(--lime) 0 45%, transparent 47%);
  transform: scale(1);
  transition-timing-function: var(--ease-pop);
}
.opt:has(input:focus-visible),
.opt:has(input:focus-visible):has(input:checked) {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .opt:hover { border-color: rgba(242, 245, 244, .55); color: var(--white); }
}
/* aria-invalid sits on the radios, which are visually hidden; the visible
   boundary is the label, so it carries the error colour. */
.opts.is-invalid .opt { border-color: var(--alert); }

.form__fine {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--dim);
}

/* preview panel */
.preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@keyframes previewIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.preview__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lime);
}
/* Panels arrive with the enter curve and leave with the exit curve, which is
   ~0.65x the entrance (contract §4.3). */
.preview, .done {
  animation: previewIn var(--dur-large) var(--ease-enter) both;
}
.preview.is-leaving, .done.is-leaving {
  animation: panelOut var(--dur-small) var(--ease-exit) both;
}
@keyframes panelOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(6px); }
}
.preview__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.preview__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.preview__list > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.preview__list dt {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 2px;
}
.preview__list dd {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
  overflow-wrap: anywhere;
}
.preview__note {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--dim);
}
.preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}
.preview:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }

.done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.done__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lime);
  color: var(--lime);
  margin-bottom: 4px;
}
.done__mark svg { width: 20px; height: 20px; }
.done__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.done__text {
  line-height: 1.6;
  color: var(--mist);
  max-width: 46ch;
}
.done__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ---------- footer ---------- */
.ftr {
  border-top: var(--rule);
  padding-block: clamp(36px, 5vw, 60px) clamp(24px, 3vw, 32px);
  background: var(--ink);
}
.ftr__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-2);
}
.brand--ftr { align-items: flex-start; }
.ftr__tag {
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--mist);
}
.ftr__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.ftr__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color var(--dur-small) var(--ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .ftr__nav a:hover { color: var(--lime); }
}

.ftr__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  font-size: var(--fs-tiny);
  line-height: 1.6;
  color: var(--dim);
}
.ftr__bottom a {
  color: var(--mist);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(163, 173, 177, .5);
  transition: color var(--dur-small) var(--ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .ftr__bottom a:hover { color: var(--lime); text-decoration-color: currentColor; }
}

/* ---------- reveal (only when JS motion is on) ---------- */
/* The reveal travels, it never fades: a rig flies in, it does not appear.
   Nothing here is ever opacity: 0, so the LCP is always painted and no
   section can be left blank by a stalled observer or a JS error. */
html.js-motion [data-reveal] {
  translate: 0 16px;
  transition: translate var(--dur-reveal) var(--ease-enter);
  transition-delay: var(--d, 0ms);
}
html.js-motion [data-reveal].is-revealed {
  translate: none;
}

/* hero mask reveal: keeps the LCP painted (translate only, no opacity 0) */
html.js-motion .hl__in {
  transform: translateY(105%);
  animation: maskUp var(--dur-hero) var(--ease-expo) forwards;
}
html.js-motion .hl:nth-child(2) .hl__in { animation-delay: 110ms; }
@keyframes maskUp {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc__step:nth-child(3) { border-left: 0; }
  .proc__step:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
  .rig { max-width: 600px; }
  .brief { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
  .sect__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sect__head > .sect__title,
  .sect__head > .sect__lede { grid-column: 1; }
  .sect__head > .sect__lede { padding-bottom: 0; }
}

@media (max-width: 760px) {
  :root { --hdr-h: 64px; }

  .ftr__top { grid-template-columns: minmax(0, 1fr); }
  .ftr__nav ul { gap: 0 20px; }
  .card__specs { gap: 4px 10px; }
  .field__input--num { max-width: 100%; }

  /* Keep a conversion path in the sticky header. The mobile menu carries the
     section links; this carries the brief. */
  .hdr__cta {
    display: inline-flex;
    min-height: 44px;
    padding: 0 14px;
    font-size: var(--fs-meta);
    letter-spacing: .04em;
    margin-left: auto;
  }
  .menu-btn { display: inline-flex; margin-left: 8px; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 var(--gutter) 8px;
    background: rgba(8, 9, 10, .97);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__list li + li { border-top: 1px solid var(--line-2); }
  .nav__link {
    width: 100%;
    padding-inline: 0;
    font-size: .9375rem;
    letter-spacing: .08em;
    color: var(--white);
  }
  .nav__link::after { left: 0; right: auto; width: 26px; bottom: 12px; }

  .hero__title { max-width: 100%; }
  .hero__meta { grid-template-columns: minmax(0, 1fr); }
  .hero__meta li { padding-right: 0; }
  .hero__meta li + li { padding-left: 0; padding-top: 14px; }
  .hero__meta li { border-top: 1px solid var(--line-2); }
  .hero__meta li:first-child { border-top: 0; padding-top: 16px; }

  .caps { grid-template-columns: minmax(0, 1fr); }
  .cap:nth-child(odd) { border-right: 0; }
  .cap:nth-child(even) { padding-left: 0; }

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

  .filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .filters__scroll {
    flex: 0 0 auto;
    align-items: center;
    /* the row clips mid-chip at 390px; the fade is the only cue that it scrolls */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .filters__count { order: 2; }

  .proc { grid-template-columns: minmax(0, 1fr); }
  .proc__step { padding-inline: 0; border-left: 0 !important; }
  .proc__step + .proc__step { border-top: 1px solid var(--line-2); }

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

@media (max-width: 400px) {
  /* keeps the status line on one line at 320px instead of breaking after "diễn" */
  .eyebrow { font-size: .75rem; letter-spacing: .09em; gap: 7px; }
  .hero__actions .btn { width: 100%; }
  .btn { font-size: .875rem; letter-spacing: .04em; }
  .hdr__cta { font-size: .75rem; padding: 0 10px; letter-spacing: .02em; }
  .rig__data dd { font-size: 1rem; }
  .card__specs { gap: 4px 10px; }
  /* the 34px glyph plus two gaps was eating ~46px of a 280px content box */
  .cap { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
  .cap__glyph { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js-motion [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
  html.js-motion .hl__in { transform: none !important; animation: none !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none !important; transform: none !important; }
  .band__track { animation: none !important; transform: none !important; }
  .spot { display: none; }
  .card.is-in { animation: none; }
}

/* ---------- contrast / transparency fallbacks ---------- */
@media (prefers-reduced-transparency: reduce) {
  .hdr::before { background: #08090A; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav { background: #08090A; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card__tag { background: #08090A; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .spot { display: none; }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(242, 245, 244, .34);
    --line-2: rgba(242, 245, 244, .2);
    --mist: #C6CED1;
    --dim: #B4BEC2;
  }
  .hdr::before { background: #08090A; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .spot { display: none; }
  .card__link { border-width: 2px; }
  .field__input, .opt { border-color: rgba(242, 245, 244, .55); }
}

@media print {
  .spot, .bands, .hdr, .menu-btn { display: none; }
  body { background: #fff; color: #000; }
}