/* Sewman.ai — phòng kỹ thuật: nét phấn trên nền chàm, vàng chỉ dành cho hành động. */

:root {
  --ink:      #0B1420;
  --ink-2:    #0F1D2C;
  --ink-3:    #142434;
  --chalk:    #E9EFF5;
  --chalk-2:  #9DB0C4;
  --thread:   #F2B705;
  --seam:     #46A6F0;
  --rule:     rgba(157, 176, 196, .16);
  --rule-2:   rgba(157, 176, 196, .30);

  --display: "Be Vietnam Pro", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --pad:   clamp(20px, 5vw, 72px);
  --maxw:  1180px;
  --ease:  cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.mono {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

:focus-visible {
  outline: 2px solid var(--thread);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 99;
  padding: 10px 16px;
  background: var(--thread);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .8rem;
}
.skip:focus { left: 12px; }

/* ---------- Thanh trên ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }

.brand-mark { display: block; width: 30px; height: 30px; color: var(--thread); }
.brand-mark svg { display: block; width: 100%; height: 100%; }

.brand-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -.015em;
}
.brand-dot { color: var(--thread); }

.topnav { display: flex; gap: 26px; }

.topnav a {
  font-size: .9rem;
  color: var(--chalk-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.topnav a:hover { color: var(--chalk); border-bottom-color: var(--thread); }

.lang { display: flex; align-items: center; gap: 6px; }

.lang-btn {
  background: none;
  border: 0;
  padding: 2px 3px;
  cursor: pointer;
  color: var(--chalk-2);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  transition: color .2s var(--ease);
}
.lang-btn:hover { color: var(--chalk); }
.lang-btn[aria-pressed="true"] { color: var(--thread); }
.lang-sep { color: var(--rule-2); font-family: var(--mono); font-size: .74rem; }

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

/* Giấy kẻ kỹ thuật là nền MẶC ĐỊNH — hero không bao giờ trống dù three.js không tải được. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px var(--pad) 64px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 76% 38%, rgba(70, 166, 240, .10) 0%, transparent 62%),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 72px);
}

#stitch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Chỉ che bên trái để giữ chữ sạch; bên phải để nguyên cho dải lụa hiện ra. */
  background:
    linear-gradient(100deg, var(--ink) 0%, var(--ink) 30%, transparent 62%),
    linear-gradient(to bottom, transparent 90%, var(--ink) 100%);
}

.no-3d #stitch-canvas { display: none; }

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--seam);
  margin-bottom: 26px;
  padding-left: 40px;
  position: relative;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 28px;
  height: 1px;
  background: var(--seam);
}

/* Bó chữ lại để chừa hẳn cột phải cho dải lụa — chữ và hình không tranh chỗ nhau */
.hero-title {
  font-size: clamp(2.3rem, 6.4vw, 5rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  max-width: 14ch;
}
.hero-title .line { display: block; }
.hero-title .line-accent { color: var(--thread); }

/* Đèn rọi đi qua từng chữ: phía sau vệt sáng là chữ đã sáng hẳn, phía trước còn tối.
   Quét xong thì cả dòng sáng và giữ nguyên (forwards) — chạy một lần, không nhấp nháy.
   Chỉ đổi màu chữ khi trình duyệt cắt được nền theo chữ; thiếu @supports thì máy cũ
   nhận color:transparent và chữ biến mất. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-title .line {
    --dim: #56687D;
    --bright: var(--chalk);
    --flare: #FFFFFF;

    width: fit-content;
    background-image: linear-gradient(101deg,
      var(--bright) 0%, var(--bright) 43%,
      var(--flare) 48%, var(--flare) 51%,
      var(--dim) 57%, var(--dim) 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* linear: đèn rọi đi đều qua từng chữ. Có gia tốc là thành vụt qua, không ra dáng đèn. */
    animation: light-sweep 7s linear .6s both;
  }

  .hero-title .line-accent {
    --dim: #A87F14;
    --bright: var(--thread);
    --flare: #FFF7DC;
    animation-delay: 2.4s;
  }
}

@keyframes light-sweep {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

.hero-sub {
  margin-top: 26px;
  max-width: 54ch;
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  color: var(--chalk-2);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--rule-2);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--thread); color: var(--ink); border-color: var(--thread); font-weight: 500; }
.btn-primary:hover { background: #ffc933; border-color: #ffc933; }

.btn-ghost { color: var(--chalk); }
.btn-ghost:hover { border-color: var(--chalk); }

.btn-lg { padding: 17px 34px; font-size: .86rem; }

.hero-foot {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 72px auto 0;
  color: var(--chalk-2);
  font-size: .7rem;
  padding-left: 22px;
}
.hero-foot::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--thread);
  box-shadow: 0 0 0 4px rgba(242, 183, 5, .16);
}

/* ---------- Khung section chung ---------- */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(58px, 7.5vw, 100px) var(--pad);
}

.section-title { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(38px, 5vw, 62px); }

.section-kicker { color: var(--seam); font-weight: 500; }

.section-head {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: -.018em;
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- AI Agent ---------- */

.agents {
  background: var(--ink-2);
  max-width: none;
  padding-inline: 0;
  border-block: 1px solid var(--rule);
}
.agents-inner {
  width: min(calc(var(--maxw) - var(--pad) * 2), calc(100% - var(--pad) * 2));
  margin-inline: auto;
}

/* Vàng ở đây thay cho xanh kỹ thuật: phần này là thứ đang bán, không phải chú thích bản vẽ */
.agents .section-kicker { color: var(--thread); }
.agents .section-title { margin-bottom: 22px; }

.agents-top {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 76px);
}

.agents-note { color: var(--chalk-2); font-size: 1rem; max-width: 44ch; }

/* Khung lệnh: cho người xem THẤY trợ lý làm gì, thay vì đọc mô tả rằng nó làm được */
.cmd {
  position: relative;
  margin: 0;
  padding: 30px 30px 32px;
  background: var(--ink);
  border: 1px solid var(--rule-2);
}
.cmd-tag {
  position: absolute;
  top: -8px;
  right: 22px;
  padding: 0 9px;
  background: var(--ink-2);
  color: var(--chalk-2);
  font-size: .62rem;
}

.cmd-label { display: block; color: var(--seam); font-size: .63rem; margin-bottom: 9px; }

.cmd-say { padding-left: 18px; border-left: 2px solid var(--thread); margin-bottom: 26px; }
.cmd-say .cmd-label { color: var(--thread); }
.cmd-text { font-size: 1.06rem; line-height: 1.5; color: var(--chalk); }

.cmd-steps li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  color: var(--chalk-2);
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
}
.cmd-steps li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--seam);
}
.cmd-steps .cmd-done { color: var(--thread); margin-top: 14px; margin-bottom: 0; }
.cmd-steps .cmd-done::before { content: "✓"; color: var(--thread); }

/* Các bước hiện lần lượt — trợ lý làm từng việc, không đổ ra một lúc */
.cmd.in .cmd-steps li { animation: step-in .5s var(--ease) both; }
.cmd.in .cmd-steps li:nth-child(1) { animation-delay: .10s; }
.cmd.in .cmd-steps li:nth-child(2) { animation-delay: .28s; }
.cmd.in .cmd-steps li:nth-child(3) { animation-delay: .46s; }
.cmd.in .cmd-steps li:nth-child(4) { animation-delay: .64s; }
.cmd.in .cmd-steps li:nth-child(5) { animation-delay: .86s; }

@keyframes step-in {
  from { opacity: 0; transform: translateX(-7px); }
  to   { opacity: 1; transform: none; }
}

.agent-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 54px; }

.agent h3 {
  position: relative;
  font-size: 1.16rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin-bottom: 10px;
  padding-left: 28px;
}
.agent h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 16px;
  height: 2px;
  background: var(--thread);
}
.agent p { color: var(--chalk-2); font-size: .96rem; padding-left: 28px; }

/* Mục cam kết ngược — đóng khung bằng chỉ vàng thay vì gạch đầu dòng */
.agent-guard { border-left: 2px solid var(--thread); padding-left: 24px; }
.agent-guard h3, .agent-guard p { padding-left: 0; }
.agent-guard h3::before { display: none; }

/* ---------- Nguyên tắc ---------- */

.principle-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

.principle { background: var(--ink); padding: 32px 30px 36px; }
.principle h3 { font-size: 1.12rem; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 12px; }
.principle p { color: var(--chalk-2); font-size: .95rem; }

/* ---------- Ứng dụng ---------- */

/* Nét đứt: cùng ngôn ngữ với đường may ở hero */
.app-list { border-top: 1px dashed var(--rule-2); }

.app {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 34px;
  align-items: start;
  padding: 38px 0 40px;
  border-bottom: 1px dashed var(--rule-2);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.app-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--rule-2);
  font-size: .84rem;
  letter-spacing: .08em;
  color: var(--chalk-2);
}
.app.is-live .app-code { border-color: var(--thread); color: var(--thread); }

.app-name { font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -.015em; line-height: 1.25; }

.app-what { margin-top: 8px; font-size: 1.02rem; color: var(--chalk); max-width: 48ch; }

.app-points { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.app-points li {
  color: var(--chalk-2);
  font-size: .66rem;
  letter-spacing: .1em;
  padding: 6px 12px;
  border: 1px solid var(--rule);
}

/* Nhãn AI đi bằng ::before nên không bị hàm đổi ngôn ngữ ghi đè mất */
.app-points .pt-ai { border-color: rgba(242, 183, 5, .34); color: var(--chalk); }
.app-points .pt-ai::before {
  content: "AI";
  margin-right: 9px;
  color: var(--thread);
  font-weight: 500;
}

.app-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  color: var(--thread);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.app-link:hover { border-bottom-color: var(--thread); }
.app-link .arrow { transition: transform .2s var(--ease); }
.app-link:hover .arrow { transform: translateX(4px); }

.app-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-top: 4px;
  font-size: .68rem;
  color: var(--chalk-2);
  white-space: nowrap;
}
.app-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--chalk-2);
}
.app.is-live .app-state { color: var(--thread); }
.app.is-live .app-state::before { background: var(--thread); border-color: var(--thread); box-shadow: 0 0 0 4px rgba(242, 183, 5, .14); }

.app.is-soon .app-name, .app.is-soon .app-what { color: var(--chalk-2); }

/* ---------- Liên hệ ---------- */

/* Nền tràn viền, nội dung vẫn khớp đúng lưới của các section khác. */
.contact { background: var(--ink-2); max-width: none; padding-inline: 0; }
.contact-inner {
  width: min(calc(var(--maxw) - var(--pad) * 2), calc(100% - var(--pad) * 2));
  margin-inline: auto;
}

.contact-head { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.18; letter-spacing: -.02em; max-width: 20ch; }
.contact-body { margin-top: 20px; max-width: 52ch; color: var(--chalk-2); font-size: 1.02rem; }
.contact .btn { margin-top: 34px; text-transform: none; letter-spacing: .04em; }

/* ---------- Chân trang ---------- */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  width: min(calc(var(--maxw) - var(--pad) * 2), calc(100% - var(--pad) * 2));
  margin-inline: auto;
  padding: 30px 0 42px;
  border-top: 1px solid var(--rule);
  color: var(--chalk-2);
  font-size: .68rem;
}
.foot-dim { color: #7A8CA1; }

/* ---------- Màn hẹp ---------- */

@media (max-width: 900px) {
  .principle-list { grid-template-columns: 1fr; }
  .agents-top { grid-template-columns: 1fr; }
  .agent-list { grid-template-columns: 1fr; gap: 30px; }
  .app { grid-template-columns: 52px 1fr; gap: 20px; }
  .app-code { width: 46px; height: 46px; font-size: .76rem; }
  .app-state { grid-column: 2; padding-top: 0; margin-top: 18px; }
}

@media (max-width: 680px) {
  .topnav { display: none; }
  .hero { padding-top: 108px; }
  .hero-title { max-width: none; }
  .hero-foot { margin-top: 48px; }

  /* Điện thoại: dải lụa chạy sau chữ nên phải lùi hẳn về nền, chữ mới đọc rõ */
  #stitch-canvas { opacity: .62; }
  .hero-veil {
    background:
      linear-gradient(to bottom, var(--ink) 0%, rgba(11, 20, 32, .82) 38%, rgba(11, 20, 32, .55) 66%, transparent 88%),
      linear-gradient(to bottom, transparent 82%, var(--ink) 100%);
  }
}

/* ---------- Giảm chuyển động ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }

  /* Trả tiêu đề về màu đặc — tắt animation giữa chừng dễ để lại chữ nửa tối */
  .hero-title .line { background-image: none; color: var(--chalk); }
  .hero-title .line-accent { color: var(--thread); }
}