/* ═══════════════════════════════════════════════════════════════════════════
   Omni — landing page.

   Hướng thiết kế: "forensic instrument". Bảng đo của kỹ sư vận hành, không phải
   dark-mode SaaS mặc định. Ba nguyên tắc chi phối mọi quyết định bên dưới:

   1. Màu mang NGHĨA, không trang trí. Xanh = đã kiểm chứng/đang chạy. Hổ phách =
      còn phía trước. Đỏ mờ = cơ chế dừng. Không dùng màu nào chỉ vì đẹp.
   2. Số liệu là yếu tố typography chính, không phải chú thích.
   3. Không JavaScript — CSP `default-src 'none'` chặn mọi script. Toàn bộ chuyển
      động là CSS và tự tắt khi prefers-reduced-motion.

   Trang cố ý CHỈ có một diện mạo tối. Đây là quyết định thẩm mỹ, không phải thiếu
   sót: sản phẩm sống trong terminal và trang giám sát.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Nền lạnh, không phải đen tuyệt đối — đen thuần làm chữ rung trên màn OLED. */
  --bg:        oklch(13.5% 0.012 250);
  --bg-raise:  oklch(17% 0.014 250);
  --bg-sink:   oklch(11% 0.010 250);
  --line:      oklch(27% 0.015 250);
  --line-soft: oklch(22% 0.012 250);

  --ink:       oklch(95% 0.005 250);
  --ink-dim:   oklch(72% 0.010 250);
  --ink-mute:  oklch(56% 0.012 250);

  /* Ba màu tín hiệu — mỗi màu một nghĩa cố định trên toàn trang. */
  --signal:    oklch(80% 0.135 178);   /* verified / running        */
  --pending:   oklch(80% 0.130 78);    /* next / advisory           */
  --halt:      oklch(70% 0.150 25);    /* kill switch / fail-closed */

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: clamp(.8rem, .77rem + .14vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1.08rem + .34vw, 1.35rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.5rem + 2.9vw, 4rem);
  --step-4:  clamp(2.6rem, 1.4rem + 5.6vw, 6.5rem);

  /* Nhịp KHÔNG đều: mỗi section tự chọn khoảng thở theo sức nặng nội dung. */
  --gut: clamp(1.15rem, .6rem + 2.4vw, 2.5rem);
  --max: 78rem;

  --ease: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:var(--step-0)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
  overflow-x:hidden;   /* body KHÔNG bao giờ cuộn ngang; nội dung rộng tự cuộn trong khung riêng */
}

/* Hạt nhiễu rất nhẹ — phá bề mặt phẳng mà không cần ảnh (CSP chặn asset ngoài). */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(1100px 620px at 78% -12%, oklch(30% .05 190 / .30), transparent 62%),
    radial-gradient(820px 520px at -8% 108%, oklch(26% .04 280 / .24), transparent 60%);
}
main,header,footer{position:relative;z-index:1}

.wrap{width:min(100% - var(--gut)*2, var(--max));margin-inline:auto}

/* ── Header ──────────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:20;
  background:oklch(13.5% .012 250 / .78);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.bar{display:flex;align-items:center;gap:1.5rem;height:3.75rem}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font:600 var(--step-0)/1 var(--sans);letter-spacing:-.02em;margin-right:auto;
}
.mark{
  width:1.1rem;height:1.1rem;border-radius:50%;flex:none;
  border:2px solid var(--signal);position:relative;
}
.mark::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:.3rem;height:.3rem;border-radius:50%;background:var(--signal);
}
nav{display:flex;gap:1.4rem;align-items:center}
nav a{
  color:var(--ink-mute);text-decoration:none;
  font:500 var(--step--1)/1 var(--sans);
  padding:.5rem 0;border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
nav a:hover,nav a:focus-visible{color:var(--ink);border-bottom-color:var(--signal)}
.nav-hide{display:none}
@media(min-width:52rem){.nav-hide{display:inline}}

/* ── Nút ─────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.15rem;border-radius:.4rem;
  font:600 var(--step--1)/1 var(--sans);text-decoration:none;
  border:1px solid var(--line);color:var(--ink);background:var(--bg-raise);
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);border-color:var(--ink-mute)}
.btn-primary{
  background:var(--signal);color:oklch(16% .03 190);border-color:var(--signal);
}
.btn-primary:hover,.btn-primary:focus-visible{
  box-shadow:0 0 0 4px oklch(80% .135 178 / .18);
}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

/* ── Nhãn nhỏ dạng mono ──────────────────────────────────────────────────── */
.eyebrow{
  font:600 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);margin:0 0 1rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{padding:clamp(4rem,3rem + 8vw,9rem) 0 clamp(2.5rem,2rem + 3vw,4rem)}
h1{
  font-size:var(--step-4);line-height:.94;letter-spacing:-.042em;
  font-weight:680;margin:0 0 1.5rem;max-width:15ch;text-wrap:balance;
}
h1 em{
  font-style:normal;color:var(--signal);
  /* Gạch chân mảnh thay vì đổi nền — nhấn mà không ồn. */
  box-shadow:inset 0 -.09em 0 oklch(80% .135 178 / .35);
}
.lede{
  font-size:var(--step-1);color:var(--ink-dim);max-width:56ch;margin:0 0 2rem;
  line-height:1.6;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:3rem}

/* Dải số liệu — đọc như bảng đo, không phải "feature grid". */
.readout{
  display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:.6rem;overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:46rem){.readout{grid-template-columns:repeat(4,1fr)}}
.cell{background:var(--bg-sink);padding:1.4rem 1.25rem;position:relative}
.cell b{
  display:block;font:700 clamp(1.9rem,1.3rem + 2.2vw,2.9rem)/1 var(--mono);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  color:var(--ink);margin-bottom:.45rem;
}
.cell span{display:block;font-size:var(--step--1);color:var(--ink-mute);line-height:1.45}
.cell::before{
  content:"";position:absolute;top:0;left:0;width:2.25rem;height:2px;background:var(--signal);
}

/* ── Section chung ───────────────────────────────────────────────────────── */
section{padding-block:clamp(3.5rem,2.5rem + 5vw,7rem)}
section + section{border-top:1px solid var(--line-soft)}
h2{
  font-size:var(--step-2);line-height:1.12;letter-spacing:-.03em;font-weight:660;
  margin:0 0 1rem;max-width:22ch;text-wrap:balance;
}
.sub{color:var(--ink-dim);max-width:62ch;margin:0 0 2.5rem;font-size:var(--step-0)}

/* ── Problem: bố cục lệch, số thứ tự phá lưới ────────────────────────────── */
.split{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem)}
@media(min-width:60rem){.split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.pain{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem}
.pain li{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding-bottom:1.35rem;border-bottom:1px solid var(--line-soft);
}
.pain li:last-child{border-bottom:0;padding-bottom:0}
.pain .mark-n{
  font:700 var(--step--1)/1 var(--mono);color:var(--ink-mute);
  font-variant-numeric:tabular-nums;padding-top:.28rem;
}
.pain b{color:var(--ink);font-weight:640}
.pain span:last-child{color:var(--ink-dim)}

/* ── Lanes: bento, ô đầu chiếm rộng hơn ──────────────────────────────────── */
.lanes{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:.7rem;overflow:hidden}
@media(min-width:44rem){.lanes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:70rem){
  .lanes{grid-template-columns:repeat(6,1fr)}
  .lane:nth-child(1){grid-column:span 3}
  .lane:nth-child(2){grid-column:span 3}
  .lane:nth-child(3){grid-column:span 2}
  .lane:nth-child(4){grid-column:span 4}
}
.lane{
  background:var(--bg-sink);padding:1.75rem 1.5rem;
  transition:background .25s var(--ease);
}
.lane:hover{background:var(--bg-raise)}
.lane .n{
  font:600 .68rem/1 var(--mono);letter-spacing:.15em;color:var(--signal);
  margin-bottom:.9rem;display:block;
}
.lane h3{font-size:var(--step-1);margin:0 0 .55rem;font-weight:620;letter-spacing:-.02em}
.lane p{margin:0;color:var(--ink-dim);font-size:var(--step--1);line-height:1.6}

/* ── Pipeline: dựng bằng CSS, không phải ASCII ───────────────────────────
   Bản cũ dùng <pre> ASCII art — đẹp trên desktop, phải cuộn ngang và đọc rất
   tệ trên điện thoại. Bản này xếp dọc tự nhiên nên mobile đọc được nguyên vẹn. */
.flow{
  margin-top:3rem;display:grid;gap:0;justify-items:center;
  border:1px solid var(--line-soft);border-radius:.7rem;
  background:var(--bg-sink);padding:2rem clamp(1rem,.5rem + 2vw,2rem);
}
.node{
  width:min(100%,32rem);text-align:center;padding:.95rem 1.1rem;
  border:1px solid var(--line);border-radius:.45rem;background:var(--bg-raise);
}
.node .t{font:600 var(--step--1)/1.3 var(--mono);letter-spacing:.02em}
.node .d{font-size:.78rem;color:var(--ink-mute);margin-top:.3rem;line-height:1.45}
.node.source{background:transparent;border-style:dashed}
.node.think{border-color:oklch(30% .04 190)}
.node.gate{
  border-color:var(--halt);
  background:linear-gradient(180deg,oklch(70% .15 25 / .10),transparent);
}
.node.gate .t{color:var(--halt)}
.node.out{width:min(100%,11rem);padding:.7rem .5rem}

/* Đường nối: 1px dọc, có xung chạy xuống để gợi dòng chảy dữ liệu. */
.link{width:1px;height:2rem;background:var(--line);position:relative;flex:none}
.link::after{
  content:"";position:absolute;left:-1px;width:3px;height:.7rem;border-radius:2px;
  background:var(--signal);
  animation:drip 2.6s var(--ease) infinite;
}
@keyframes drip{
  0%{top:-.7rem;opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{top:2rem;opacity:0}
}
.link.l2::after{animation-delay:.5s}
.link.l3::after{animation-delay:1s}
.link.l4::after{animation-delay:1.5s}

.fan{display:flex;gap:clamp(.5rem,2vw,1.5rem);flex-wrap:wrap;justify-content:center}
.sources{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;width:100%}
.sources .node{width:min(100%,15rem)}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.cards{display:grid;gap:1.25rem}
@media(min-width:56rem){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  border:1px solid var(--line-soft);border-radius:.6rem;padding:1.6rem 1.45rem;
  background:linear-gradient(180deg,var(--bg-raise),var(--bg-sink));
  position:relative;overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card::before{
  content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--accent,var(--signal)),transparent 65%);
}
.card:nth-child(3){--accent:var(--halt)}
.card h3{font-size:var(--step-1);margin:0 0 .6rem;font-weight:620;letter-spacing:-.02em}
.card p{margin:0;color:var(--ink-dim);font-size:var(--step--1);line-height:1.62}

/* ── Bảng tier ───────────────────────────────────────────────────────────── */
.tbl-scroll{overflow-x:auto;margin-top:2.5rem;border:1px solid var(--line-soft);border-radius:.6rem}
table{border-collapse:collapse;width:100%;min-width:38rem;font-size:var(--step--1)}
caption{
  text-align:left;padding:1.1rem 1.25rem 0;color:var(--ink-mute);
  font-size:var(--step--1);caption-side:top;
}
th,td{padding:.95rem 1.25rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
thead th{
  font:600 .7rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);
}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{font:600 var(--step--1)/1.4 var(--mono);color:var(--signal);white-space:nowrap}
tbody td{color:var(--ink-dim)}

/* ── Stack ───────────────────────────────────────────────────────────────── */
.stack{display:grid;gap:0;margin:0;border-top:1px solid var(--line-soft)}
@media(min-width:56rem){.stack{grid-template-columns:repeat(2,1fr);column-gap:3rem}}
.st{
  display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;gap:1.25rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line-soft);align-items:baseline;
}
.st dt{font:600 .72rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute)}
.st dd{margin:0;color:var(--ink-dim);font-size:var(--step--1)}

/* ── Status ──────────────────────────────────────────────────────────────── */
.status{display:grid;gap:.6rem}
.status > div{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  padding:1.05rem 1.25rem;border:1px solid var(--line-soft);border-radius:.5rem;
  background:var(--bg-sink);color:var(--ink-dim);font-size:var(--step--1);line-height:1.6;
}
.badge{
  font:600 .66rem/1 var(--mono);letter-spacing:.13em;padding:.42rem .6rem;border-radius:.25rem;
  white-space:nowrap;margin-top:.1rem;
}
.ok{background:oklch(80% .135 178 / .13);color:var(--signal);border:1px solid oklch(80% .135 178 / .3)}
.next{background:oklch(80% .13 78 / .12);color:var(--pending);border:1px solid oklch(80% .13 78 / .28)}

/* ── CTA + footer ────────────────────────────────────────────────────────── */
.cta{
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,oklch(80% .135 178 / .04),transparent 60%);
}
.cta h2{max-width:20ch}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
footer{border-top:1px solid var(--line-soft);padding-block:2.25rem;font-size:var(--step--1);color:var(--ink-mute)}
.foot{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center}
footer a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--ink);border-bottom-color:var(--signal)}

/* Chuyển ngôn ngữ. Hai TRANG riêng thay vì toggle: CSP chặn JavaScript, và quan
   trọng hơn — mỗi trang giữ được `lang` đúng nên screen reader đọc đúng giọng,
   link chia sẻ được, hreflang hoạt động. Nhét cả hai thứ tiếng vào một DOM sẽ
   khiến trình đọc màn hình đọc cả phần đang ẩn. */
.lang{
  display:inline-flex;align-items:center;gap:.15rem;margin-left:.5rem;
  border:1px solid var(--line);border-radius:.3rem;padding:.12rem;flex:none;
}
.lang a,.lang span{
  font:600 .68rem/1 var(--mono);letter-spacing:.06em;
  padding:.34rem .48rem;border-radius:.2rem;text-decoration:none;border:0;
}
.lang a{color:var(--ink-mute)}
.lang a:hover,.lang a:focus-visible{color:var(--ink);background:var(--bg-raise)}
.lang span[aria-current]{background:var(--signal);color:oklch(16% .03 190)}

/* ── Reveal khi cuộn — chỉ ở trình duyệt hỗ trợ, không cần JS ───────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }
    @keyframes rise{from{opacity:0;transform:translateY(1.4rem)}to{opacity:1;transform:none}}
  }
}

/* Tôn trọng tuyệt đối yêu cầu giảm chuyển động: tắt cả xung dòng chảy. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .link::after{display:none}
}

/* Logo dạng link (trang 404). Không dùng style="" nội tuyến — CSP `style-src 'self'`
   không có 'unsafe-inline' nên thuộc tính style sẽ bị chặn im lặng. */
.brand-link{text-decoration:none;color:inherit}
.brand-link:hover .mark{box-shadow:0 0 0 4px oklch(80% .135 178 / .18)}