/* ===== Light design system ===== */
:root {
  --bg:#ffffff; --bg-2:#eef7f9; --surface:#ffffff; --surface-2:#e7f3f5;
  --line:rgba(12,22,30,0.10); --line-2:rgba(12,22,30,0.18);
  --text:#0c1822; --muted:#4f5b63; --muted-2:#7e8a93;
  --accent:#0b8694; --accent-2:#22e8ed; --accent-ink:#ffffff;
  --brand-cyan:#22e8ed; --brand-cyan-2:#4defff;
  --grad:linear-gradient(100deg,#0b8694,#1bc4d4);
  --radius:16px; --radius-sm:10px; --maxw:1120px;
  --shadow:0 1px 2px rgba(16,20,38,0.04), 0 10px 30px -18px rgba(16,20,38,0.18);
  --shadow-lg:0 16px 40px -20px rgba(16,20,38,0.28);
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-disp:'Space Grotesk',var(--font-sans);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.container { width:min(100% - 40px, var(--maxw)); margin-inline:auto; }
h1,h2,h3,h4 { font-family:var(--font-disp); line-height:1.12; letter-spacing:-0.02em; }
a { color:inherit; text-decoration:none; }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow { font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.eyebrow.center { text-align:center; display:block; }
.lead { color:var(--muted); font-size:1.08rem; max-width:62ch; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:0.95rem; cursor:pointer; border:1px solid transparent; transition:.2s ease; }
.btn--primary { background:linear-gradient(100deg,#0aa0b0,#0b7e8c); color:var(--accent-ink); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(11,134,148,0.55); }
.btn--ghost { border-color:var(--line-2); color:var(--text); background:#fff; }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); }

/* nav — thanh trong suốt, chỉ còn logo trái và Apply phải.
   fixed chứ không sticky: sticky vẫn chiếm chỗ trong luồng, để lại một dải
   trắng cao 66px ở đầu trang. */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; background:none; pointer-events:none; }
.nav__inner { display:flex; align-items:center; gap:26px; height:66px; }
/* Logo và Apply nổi trên nền trong suốt nên phải tự lo tương phản: mỗi cái có
   nền mờ riêng, không phải một thanh chạy hết bề ngang. */
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-disp); font-weight:700; font-size:1.12rem; pointer-events:auto; padding:6px 14px 6px 6px; border-radius:999px; background:rgba(255,255,255,0.72); backdrop-filter:blur(14px); }
.brand__logo { width:38px; height:38px; border-radius:10px; flex:0 0 auto; background:url("assets/logo-mark.png") center/22px no-repeat, linear-gradient(140deg,#0b8694,#0aa0b0); box-shadow:0 4px 14px -6px rgba(11,134,148,0.7); }
.brand__name b { color:var(--accent); font-weight:700; }
.nav__actions { margin-left:auto; pointer-events:auto; border-radius:999px; background:rgba(255,255,255,0.72); backdrop-filter:blur(14px); }
.nav__burger { display:none; background:rgba(255,255,255,0.72); backdrop-filter:blur(14px); border:0; color:var(--text); font-size:1.4rem; cursor:pointer; margin-left:auto; pointer-events:auto; border-radius:999px; width:42px; height:42px; line-height:1; }

/* rail — điều hướng dọc kiêm thanh tiến độ, nằm ở lề trái.
   Chiều cao cố định: vạch và chấm đều quy về % của chiều cao này, nên nó phải
   là một con số biết trước chứ không do nội dung quyết định. */
.rail { position:fixed; left:26px; top:50%; transform:translateY(-50%); z-index:49; display:flex; gap:14px; height:min(46vh,340px); }
.rail__track { position:relative; flex:0 0 2px; border-radius:2px; background:var(--line); overflow:hidden; }
/* scaleY từ gốc trên: JS chỉ ghi transform, không đụng layout, nên không gây reflow. */
.rail__fill { position:absolute; inset:0; background:var(--accent); transform:scaleY(0); transform-origin:top; }
/* Chấm KHÔNG chia đều. JS ghi top:% theo đúng chỗ section nằm trên trang — chia
   đều chính là lỗi cũ khiến vạch chạy qua chấm sai thời điểm. */
.rail__list { position:relative; flex:1; list-style:none; margin:0; padding:0; }
.rail__list li { position:absolute; left:0; transform:translateY(-50%); }
.rail__list a { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:0.82rem; font-weight:500; }
.rail__dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--line); transition:background .25s, transform .25s; }
/* Nhãn ẩn bằng opacity chứ không display:none — vẫn chiếm chỗ, nên rail không
   co giãn khi hover và các chấm đứng yên. */
.rail__label { opacity:0; transform:translateX(-4px); transition:opacity .25s, transform .25s; white-space:nowrap; }
.rail:hover .rail__label, .rail__list a:focus-visible .rail__label { opacity:1; transform:none; }
.rail__list a:hover .rail__dot { background:var(--muted); transform:scale(1.3); }
.rail__list a[aria-current="true"] { color:var(--text); }
.rail__list a[aria-current="true"] .rail__dot { background:var(--accent); transform:scale(1.45); box-shadow:0 0 0 4px rgba(11,134,148,0.15); }
@media (prefers-reduced-motion: reduce) {
  .rail__dot, .rail__label { transition:none; }
}

/* hero */
/* Hero khoá cứng 16:9 — nhưng chỉ từ 981px trở lên.
   Dưới mức đó thả tỷ lệ ra (xem media query ở cuối file). Lý do không phải cho
   đẹp: 375px mà giữ 16:9 thì hero chỉ cao 211px, trong khi riêng tiêu đề đã
   xuống 4 dòng. Hero có overflow:hidden nên tràn là MẤT CHỮ, không phải chỉ xấu.
   Cắt ở 981px vì trên mức đó nội dung luôn vừa: 981 x 9/16 = 552px, nội dung cần
   ~493px. Không dùng min-height: nó sẽ đè lên chính tỷ lệ 16:9 ở quãng 981-996. */
/* flex column + justify-content:center để canh giữa dọc trong khung 16:9.
   align-items mặc định stretch nên .container vẫn trải hết bề ngang rồi tự canh
   giữa nội dung 1120 như mọi section khác — không lệch. */
.hero { position:relative; padding:96px 0 84px; overflow:hidden; aspect-ratio:16/9; display:flex; flex-direction:column; justify-content:center; }
/* Để full container (canh trái ở lề trang như mọi section). KHÔNG đặt max-width
   ở đây: phần tử này mang cả class .container, mà .container có margin-inline:auto
   — ép hẹp ở đây thì margin-auto canh giữa khối, đẩy chữ vào giữa. Chặn bề rộng
   ở tiêu đề/phụ đề bên dưới thay vì ở đây. */
.hero__inner { position:relative; z-index:2; }
/* max-width để tiêu đề wrap trong nửa trái, đuôi rời khỏi dải sáng Việt Nam.
   Đặt ở đây (không ở .hero__inner) để tránh margin-auto của .container. */
.hero__title { font-size:clamp(2.4rem,5.6vw,4.4rem); margin:16px 0 22px; display:flex; flex-direction:column; gap:2px; max-width:560px; }
/* Lưới an toàn cho dòng gradient. SplitText dời chữ xuống <div> con, con không
   thừa hưởng nền nên cả dòng tàng hình. JS (paintGrad) tính lại khổ nền cho vệt
   màu chạy liền mạch, nhưng nếu JS hỏng thì dòng này vẫn giữ cho chữ HIỆN —
   mỗi từ một vệt riêng, xấu hơn nhưng đọc được. Trắng trơn thì không. */
.grad div { background-image:var(--grad); -webkit-background-clip:text; background-clip:text; }
/* Bỏ width:max-content: nó ép mỗi dòng rộng đúng bằng chữ, phá giới hạn bề rộng
   của .hero__inner nên chữ không bao giờ xuống dòng — đuôi chồm sang quả cầu.
   Để dòng lấp đầy khối hẹp và tự wrap, đuôi mới nằm gọn nửa trái. */
.hero__title .line { line-height:1.06; }
.hero__sub { color:var(--muted); font-size:1.14rem; max-width:52ch; }
.hero__sub strong { color:var(--text); font-weight:600; }
.hero__cta { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero__glow { position:absolute; inset:-30% -10% auto -10%; height:600px; z-index:1; background:radial-gradient(50% 50% at 72% 18%,rgba(34,232,237,0.20),transparent 70%),radial-gradient(40% 50% at 14% 8%,rgba(77,239,255,0.12),transparent 70%); pointer-events:none; }
.hero__canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }

/* Hero Ken Burns. Lớp: ảnh (0) < lớp phủ (1) = glow/canvas (1) < chữ (2). */
.hero__kb { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__kb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform,opacity; }
/* Ảnh thứ 2 trở đi do JS chèn và GSAP quản opacity. Ảnh đầu để hiện sẵn: không
   JS thì hero vẫn là một tấm ảnh tĩnh chứ không phải khoảng trắng. */
.hero__kb img ~ img { opacity:0; }

/* Lớp phủ SÁNG, không phải tối.
   Site này chữ gần đen, mà ảnh quả cầu tối dần sang phải. Không phủ thì đuôi các
   dòng tiêu đề rơi vào quả cầu tối, tương phản tụt còn 1:1 — mất chữ.

   Khối chữ đã hẹp về nửa trái (frac ~0.27–0.58) nên lớp phủ chỉ cần lo tới đó:
   giữ cao hết cột chữ rồi tan DỐC trước frac 0.62. Nhờ vậy quả cầu và dải sáng
   Việt Nam (frac 0.68+) để TRONG hẳn, không bạc chút nào. Bên trái ảnh vốn chỉ
   là quầng sáng, phủ trắng lên không mất gì.
   Đo trên pixel thật ở đúng hàng chữ: chữ đen >8:1, phụ đề >4.5:1, teal ~3:1
   (đúng như bản gốc trên nền trắng); quả cầu bên phải chênh trắng >150. */
.hero__veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.88) 46%,
    rgba(255,255,255,0.70) 58%,
    rgba(255,255,255,0.12) 68%,
    rgba(255,255,255,0.02) 100%); }

@media (max-width:980px) {
  /* Mobile: chữ tràn gần hết bề ngang nên phủ ĐỀU thay vì nghiêng — đuôi dòng
     bên phải cũng có chữ. 0.82 đủ cho chữ đọc mà quả cầu còn ló ra sau. */
  .hero__veil { background:rgba(255,255,255,0.82); }

  /* Thả 16:9 ra. Giữ tỷ lệ ở đây là tự sát: 375px thì hero cao 211px, mà riêng
     tiêu đề đã 4 dòng ~166px — cộng phụ đề và nút thì tràn, và overflow:hidden
     nuốt mất phần thừa. Để chiều cao chạy theo nội dung. */
  .hero { aspect-ratio:auto; }
}

/* sections */
.section { padding:84px 0; }
.section--alt { background:var(--bg-2); border-block:1px solid var(--line); }
.section__head { max-width:760px; margin-bottom:44px; }
.section__head.center { margin-inline:auto; text-align:center; }
.section__head h2 { font-size:clamp(1.8rem,4vw,2.7rem); margin:14px 0 16px; }

/* flywheel */
.flywheel { display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.flywheel__diagram { position:relative; aspect-ratio:1; max-width:420px; margin-inline:auto; width:100%; }
.flywheel__svg { width:100%; height:100%; }
.flywheel__ring { animation:spin 26s linear infinite; transform-origin:180px 180px; }
/* Vòng quay vô tận này trước đây chạy kể cả khi người dùng xin giảm chuyển
   động — lỗi a11y có sẵn, sửa luôn ở đây. Trên desktop thì GSAP tắt hẳn
   animation này để tự lái vòng quay theo scroll (xem script.js); hai thứ cùng
   ghi vào transform sẽ đá nhau. */
@media (prefers-reduced-motion: reduce) { .flywheel__ring { animation:none; } }
.flywheel__progress { opacity:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.fw-center { fill:var(--text); font-family:var(--font-disp); font-weight:700; font-size:26px; }
.fw-center-sub { fill:var(--muted-2); font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.flywheel__nodes { list-style:none; position:absolute; inset:0; }
.flywheel__nodes li { position:absolute; top:50%; left:50%; width:max-content; font-size:0.8rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:7px; transform:rotate(calc(var(--i)*72deg)) translateY(-185px) rotate(calc(var(--i)*-72deg)) translate(-50%,-50%); }
.flywheel__nodes li span { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line-2); color:var(--accent); font-size:0.72rem; }
.flow { list-style:none; display:grid; gap:4px; }
.flow__step { display:flex; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.flow__step:last-child { border-bottom:0; }
.flow__no { font-family:var(--font-disp); font-weight:700; color:var(--accent); font-size:1.1rem; min-width:34px; }
.flow__step h3 { font-size:1.1rem; margin-bottom:3px; }
.flow__step p { color:var(--muted); font-size:0.95rem; }

/* cards */
.cards { display:grid; gap:20px; }
.cards--2 { grid-template-columns:repeat(2,1fr); }
.cards--3 { grid-template-columns:repeat(3,1fr); }
.cards--4 { grid-template-columns:repeat(4,1fr); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow); transition:.25s ease; }
.card:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow-lg); }
.card--feature { border-color:rgba(11,134,148,0.40); box-shadow:0 16px 40px -22px rgba(11,134,148,0.45); }
.card__icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:1.3rem; background:rgba(11,134,148,0.10); color:var(--accent); margin-bottom:18px; }
.card__icon svg { width:24px; height:24px; }
.comp__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.comp__ic { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(11,134,148,0.10); color:var(--accent); }
.comp__ic svg { width:22px; height:22px; }
.comp--seed { border-color:rgba(255,102,15,0.45); box-shadow:0 16px 40px -22px rgba(255,102,15,0.50); }
.comp--seed .comp__ic { background:rgba(255,102,15,0.12); color:#ff660f; }
.comp--seed .comp__no { color:#ff660f; }
.card h3 { font-size:1.2rem; margin-bottom:8px; }
.card p { color:var(--muted); font-size:0.94rem; }
.card__tag { font-size:0.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.card__big { font-family:var(--font-disp); font-size:1.9rem; font-weight:700; margin:6px 0; color:var(--text); }
.card__list { list-style:none; display:grid; gap:7px; margin-top:14px; }
.card__list li { color:var(--muted); font-size:0.9rem; padding-left:16px; position:relative; }
.card__list li::before { content:"→"; position:absolute; left:0; color:var(--accent); }

/* Tabs — chương trình */
.tabs__list { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.tabs__btn { font-family:inherit; padding:12px 22px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--text); font-weight:600; font-size:0.95rem; cursor:pointer; transition:.2s ease; }
.tabs__btn:hover { border-color:var(--accent); color:var(--accent); }
.tabs__btn[aria-selected="true"] { background:var(--grad); border-color:transparent; color:var(--accent-ink); }
.tabs__btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.tabs__panel[hidden] { display:none; }
.tabs__panel:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--radius); }
.tabs__panel .lead { margin-bottom:24px; }
.tabs__panel .section__head { margin-bottom:28px; }
.tabs__panel .section__head h3 { font-size:clamp(1.5rem,3vw,2.1rem); margin:12px 0 14px; }

/* Mục con nằm trong tab (Skin in the game, Inside the camp).
   Cố ý KHÔNG dùng .section/.container ở đây: panel đã nằm trong một
   .container rồi, lồng thêm là padding chồng padding và max-width áp hai lần.
   Đường kẻ trên để tách các mục con mà không cần đổi nền như .section--alt. */
.tabs__sub { margin-top:52px; padding-top:44px; border-top:1px solid var(--line); }

/* 8 components */
.comp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.comp { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow); }
.comp__no { font-family:var(--font-disp); font-weight:700; color:var(--accent); font-size:0.95rem; }
.comp h3 { font-size:1.05rem; margin:8px 0 8px; }
.comp p { color:var(--muted); font-size:0.88rem; }

/* pills */
.pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.pills span { padding:9px 16px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-weight:500; font-size:0.86rem; background:var(--surface); box-shadow:var(--shadow); }
.pills--muted span { color:var(--muted); font-weight:600; box-shadow:none; background:var(--surface-2); }
.subhead { font-size:0.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin:30px 0 10px; }


/* pilot badge + carousel */
.badge { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(11,134,148,0.10); color:var(--accent); font-weight:600; font-size:0.85rem; border:1px solid rgba(11,134,148,0.25); margin-bottom:18px; }
.badge::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 8px 1px var(--accent-2); }
.carousel { position:relative; margin-top:8px; }
.carousel__track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 14px; }
.carousel__track::-webkit-scrollbar { height:8px; }
.carousel__track::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; }
.slide { position:relative; flex:0 0 clamp(260px,44%,440px); scroll-snap-align:center; aspect-ratio:3/2; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:linear-gradient(135deg,#0b8694,#22e8ed); }
.slide img { width:100%; height:100%; object-fit:cover; display:block; }
.slide__cap { position:absolute; left:0; right:0; bottom:0; padding:26px 16px 14px; background:linear-gradient(transparent,rgba(6,15,20,0.72)); color:#fff; font-weight:600; font-size:0.92rem; }
.carousel__btn { position:absolute; top:calc(50% - 9px); transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); cursor:pointer; display:grid; place-items:center; font-size:1.1rem; color:var(--text); box-shadow:var(--shadow); z-index:3; transition:.2s; }
.carousel__btn:hover { border-color:var(--accent); color:var(--accent); }
.carousel__btn--prev { left:-8px; }
.carousel__btn--next { right:-8px; }

/* domains table */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
table.domains { width:100%; border-collapse:collapse; min-width:680px; background:var(--surface); }
table.domains th, table.domains td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); font-size:0.92rem; vertical-align:top; }
table.domains th { font-family:var(--font-disp); font-weight:600; color:var(--text); background:var(--surface-2); position:sticky; top:0; }
table.domains td:first-child { font-weight:600; color:var(--text); white-space:nowrap; }
table.domains td { color:var(--muted); }
table.domains tr:last-child td { border-bottom:0; }
table.domains tbody tr:hover { background:var(--bg-2); }

/* cta */
.cta { padding:96px 0; background:radial-gradient(60% 100% at 50% 0%,rgba(34,232,237,0.16),transparent 70%); border-top:1px solid var(--line); }
.cta__inner { max-width:720px; margin-inline:auto; text-align:center; }
.cta h2 { font-size:clamp(2rem,5vw,3rem); margin-bottom:14px; }
.cta p { color:var(--muted); }
.cta__form { display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; justify-content:center; }
.cta__form input { flex:1 1 200px; padding:13px 16px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--text); font-size:0.95rem; font-family:var(--font-sans); }
.cta__form input::placeholder { color:var(--muted-2); }
.cta__form input:focus { outline:none; border-color:var(--accent); }
.cta__note { margin-top:16px; min-height:22px; color:var(--accent); font-weight:600; }

/* ===== SCALE (x10) band ===== */
.scale { position:relative; overflow:hidden; background:#06121a; color:#eaf6f8; padding:90px 0; border-block:1px solid rgba(34,232,237,0.18); }
.scale::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% -5%, rgba(34,232,237,0.14), transparent 70%); z-index:1; }
.scale .container { position:relative; z-index:2; }
.scale__globe { position:absolute; right:-170px; top:50%; transform:translateY(-50%); width:760px; height:760px; opacity:.62; z-index:1; pointer-events:none; }
.scale__globe .spin { transform-origin:300px 300px; animation:globespin 110s linear infinite; }
.scale__globe .ring { transform-origin:300px 300px; animation:globespin 64s linear infinite reverse; }
.scale__globe .flow { stroke-dasharray:6 12; animation:dashflow 3s linear infinite; }
.scale__globe .flow.d2 { animation-duration:4.2s; } .scale__globe .flow.d3 { animation-duration:3.4s; } .scale__globe .flow.d4 { animation-duration:4.8s; }
.scale__globe .pulse { animation:nodepulse 2.4s ease-in-out infinite; }
.scale__globe .pulse.d2 { animation-delay:.6s; } .scale__globe .pulse.d3 { animation-delay:1.2s; } .scale__globe .pulse.d4 { animation-delay:1.8s; }
.scale__rain { position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.5; pointer-events:none; }
@keyframes globespin { to { transform:rotate(360deg); } }
@keyframes dashflow { to { stroke-dashoffset:-180; } }
@keyframes nodepulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
.scale__head { text-align:center; max-width:760px; margin:0 auto; }
.scale__eyebrow { color:#4defff; font-size:0.78rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; }
.scale__num { font-family:var(--font-disp); font-weight:700; line-height:1; margin:10px 0 6px; font-size:clamp(4.5rem,15vw,9.5rem); background:linear-gradient(100deg,#22e8ed,#4defff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 28px rgba(34,232,237,0.45)); }
.scale__h2 { color:#fff; font-size:clamp(1.6rem,3.6vw,2.4rem); margin-bottom:14px; }
.scale__lead { color:#aeb9c2; font-size:1.06rem; max-width:54ch; margin:0 auto; }
.scale__lead b { color:#4defff; font-weight:600; }

/* Giới thiệu HUB Network, nằm trong section 10x */
.hubintro { margin-top:72px; padding-top:56px; border-top:1px solid rgba(34,232,237,0.18); }
.hubintro__head { text-align:center; max-width:760px; margin:0 auto 44px; }
.hubintro__head h3 { color:#fff; font-size:clamp(1.5rem,3.2vw,2.1rem); margin:10px 0 14px; }
.hubintro__grid { max-width:940px; margin:0 auto; }

/* Không còn ảnh, số liệu tự đứng: 3 cột x 2 hàng, canh giữa cột chữ phía trên. */
.stats { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:36px 32px; text-align:center; }
/* tabular-nums: các con số xếp thành cột, chữ số phải thẳng hàng nhau */
.stats b { display:block; font-family:var(--font-disp); font-weight:700; line-height:1; font-size:clamp(1.7rem,3.2vw,2.3rem); color:#4defff; font-variant-numeric:tabular-nums; }
.stats span { display:block; color:#aeb9c2; font-size:0.88rem; margin-top:8px; }

@media (max-width:980px) {
  .stats { grid-template-columns:repeat(2,1fr); gap:30px 24px; }
}
/* infinite marquee */
.marquee { position:relative; z-index:2; margin-top:46px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee__track { display:flex; gap:18px; width:max-content; animation:marq 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marq { from { transform:translateX(0); } to { transform:translateX(calc(-50% - 9px)); } }
.hub { position:relative; flex:0 0 360px; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid rgba(34,232,237,0.28); background:linear-gradient(135deg,#0b8694,#22e8ed); }
.hub.is-people { flex-basis:280px; aspect-ratio:3/2; }
.hub img { width:100%; height:100%; object-fit:cover; display:block; }
.hub__cap { position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px; background:linear-gradient(transparent,rgba(3,12,16,0.82)); color:#fff; font-weight:600; font-size:0.9rem; }
.marquee--rev .marquee__track { animation-direction:reverse; }
.scale__sub { text-align:center; color:#8fa3ab; font-size:0.9rem; font-weight:600; margin:32px 0 6px; }
@media (max-width:560px){ .hub { flex-basis:280px; } .hub.is-people { flex-basis:230px; } }

/* footer */
.footer { border-top:1px solid var(--line); padding:44px 0; }
.footer__inner { display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.footer__tag { color:var(--muted); font-size:0.92rem; }
.footer__links { display:flex; gap:20px; margin-left:auto; }
.footer__links a { color:var(--muted); font-size:0.9rem; }
.footer__links a:hover { color:var(--text); }
.footer__copy { color:var(--muted-2); font-size:0.82rem; width:100%; padding-top:12px; border-top:1px solid var(--line); }

/* .reveal đã bỏ — animation cuộn giờ do GSAP lo, xem script.js.
   Trạng thái ẩn ban đầu đặt bằng JS chứ không phải CSS, để GSAP hỏng thì
   nội dung vẫn hiện thay vì trắng trang. */

@media (max-width:980px) {
  .cards--4 { grid-template-columns:repeat(2,1fr); }
  .comp-grid { grid-template-columns:repeat(2,1fr); }
  .hubs { grid-template-columns:repeat(2,1fr); }
  .flywheel { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:860px) {
  .nav__actions { display:none; }
  .nav__burger { display:block; }

  /* Lề trái hẹp không đủ chỗ cho rail. Rail thu về thành menu xổ do burger mở:
     vẫn là một danh sách link, chỉ đổi cách bày. Vạch tiến độ bỏ luôn — nó vô
     nghĩa khi menu đóng. */
  .rail { position:fixed; top:66px; left:0; right:0; transform:none; display:none; height:auto; background:var(--bg); padding:18px 20px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .rail.open { display:block; }
  .rail__track { display:none; }
  /* position:static làm inline style top:% mà JS ghi thành vô hiệu — không cần
     JS biết đang ở khổ nào, CSS tự vô hiệu hoá nó. */
  .rail__list { display:flex; flex-direction:column; gap:14px; }
  .rail__list li { position:static; transform:none; }
  .rail__label { opacity:1; transform:none; }
  .cards--2, .cards--3 { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .cards--4, .comp-grid, .hubs { grid-template-columns:1fr; }
}

/* ===== Added blocks: micro-bounty · earned staking · teams ratio · tech split ===== */
/* micro-bounty board */
.bounties { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.bounty { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; transition:.25s ease; }
.bounty:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow-lg); }
.bounty__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bounty__org { font-size:0.82rem; font-weight:600; color:var(--muted); }
.bounty__reward { font-family:var(--font-disp); font-weight:700; color:var(--accent); font-size:1.05rem; white-space:nowrap; }
.bounty h3 { font-size:1.02rem; line-height:1.2; }
.bounty__tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.bounty__tags span { font-size:0.72rem; font-weight:600; color:var(--accent); background:rgba(11,134,148,0.10); border-radius:999px; padding:4px 10px; }
.bounty__btn { align-self:flex-start; font-size:0.82rem; font-weight:600; color:var(--accent); background:none; border:1px solid var(--line-2); border-radius:999px; padding:8px 16px; cursor:pointer; transition:.2s; }
.bounty__btn:hover { border-color:var(--accent); background:rgba(11,134,148,0.06); }
.bounty--crypto .bounty__reward { color:#ff660f; }
.bladder { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.bladder li { display:flex; gap:14px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; position:relative; }
.bladder__no { font-family:var(--font-disp); font-weight:700; color:var(--accent); font-size:1.1rem; min-width:26px; }
.bladder h4 { font-family:var(--font-disp); font-size:1.02rem; margin-bottom:4px; }
.bladder p { color:var(--muted); font-size:0.86rem; }
.bladder li:not(:last-child)::after { content:"\2192"; position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--accent); font-weight:700; z-index:2; }

/* earned staking refund ladder */
.stake { display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; }
.refund { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow); }
.refund__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.refund__label { font-size:0.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
.refund__pct { font-family:var(--font-disp); font-weight:700; font-size:1.6rem; color:var(--accent); }
.refund__bar { height:12px; border-radius:99px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line); }
.refund__bar span { display:block; height:100%; width:var(--w,100%); background:var(--grad); border-radius:99px; }
.refund__steps { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px; }
.refund__steps li { border-top:2px solid var(--accent); padding-top:11px; }
.refund__wk { font-size:0.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); display:block; }
.refund__steps b { font-family:var(--font-disp); color:var(--accent); font-size:1.1rem; display:block; margin:2px 0 6px; }
.refund__steps p { color:var(--muted); font-size:0.8rem; }

/* teams ratio */
.ratio__bar { display:flex; height:48px; border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); font-size:0.82rem; font-weight:600; }
.ratio__teams { background:var(--grad); color:#fff; display:flex; align-items:center; padding:0 16px; width:var(--w,65%); }
.ratio__cat { background:var(--surface-2); color:var(--muted); display:flex; align-items:center; padding:0 16px; flex:1; }
.teams { margin-top:18px; }

/* tech split now/next */
.tech-split { display:grid; gap:24px; }
.tech-col__head { display:flex; align-items:center; gap:10px; font-family:var(--font-disp); font-weight:600; color:var(--text); margin-bottom:12px; font-size:1.02rem; }
.tech-col.is-next { opacity:.62; }
.chip { font-size:0.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:999px; }
.chip--now { background:var(--accent); color:#fff; }
.chip--next { background:var(--surface-2); color:var(--muted); border:1px solid var(--line-2); }
.tech-note { color:var(--muted-2); font-size:0.84rem; margin-top:10px; }

@media (max-width:860px){
  .bounties, .bladder { grid-template-columns:1fr; }
  .bladder li:not(:last-child)::after { content:"\2193"; right:auto; left:50%; top:auto; bottom:-15px; transform:translateX(-50%); }
  .stake { grid-template-columns:1fr; }
  .refund__steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){ .ratio__bar { font-size:0.72rem; } }