:root {
  --blue: #1769ff;
  --blue-2: #0b8cff;
  --navy: #071a3d;
  --text: #152033;
  --muted: #64748b;
  --soft: #f3f8ff;
  --line: #dbe7f6;
  --green: #16c784;
  --orange: #ff9f43;
  --purple: #7c5cff;
  --white: #ffffff;
  --shadow: 0 22px 70px rgba(19, 72, 145, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--text);
  background: #fff;
}
a { color: inherit; text-decoration: none; }
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 clamp(18px, 4vw, 70px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(219,231,246,.9);
  backdrop-filter: blur(18px);
}
.logo { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.logo strong { display: block; color: var(--navy); font-size: 24px; letter-spacing: -0.04em; }
.logo small { display: block; margin-top: -2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.logo-mark {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), #59b3ff);
  box-shadow: 0 14px 30px rgba(23,105,255,.25);
}
.logo-mark i { position: absolute; width: 16px; height: 16px; border-radius: 5px; background: rgba(255,255,255,.92); transform: rotate(45deg); }
.logo-mark i:nth-child(1) { top: 9px; left: 14px; }
.logo-mark i:nth-child(2) { bottom: 9px; left: 8px; opacity: .75; }
.logo-mark i:nth-child(3) { bottom: 9px; right: 8px; opacity: .55; }
.nav { display: flex; align-items: center; gap: 24px; color: #42526b; font-size: 14px; font-weight: 600; }
.nav a:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-select { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font-weight: 800; outline: none; cursor: pointer; }
.lang-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,255,.12); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 800;
  transition: .2s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn.small { min-height: 44px; padding: 0 18px; }
.btn.primary { background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; }
.btn.secondary { background: #fff; color: var(--blue); border-color: var(--line); }
.btn.success { width: 100%; background: linear-gradient(135deg, var(--green), #57dba2); color: #062d20; border: 0; }
.section { padding: clamp(70px, 8vw, 118px) clamp(18px, 5vw, 76px); }
.soft { background: linear-gradient(180deg, #f7fbff, #eef6ff); }
.hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
  min-height: calc(100vh - 78px);
  background:
    radial-gradient(circle at 0 0, rgba(23,105,255,.09), transparent 32rem),
    radial-gradient(circle at 90% 20%, rgba(22,199,132,.09), transparent 28rem),
    linear-gradient(180deg, #fff, #f6fbff 82%);
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 800;
}
.eyebrow.light { color: #72e6b3; }
h1, h2, h3, p { margin-top: 0; }
h1 { color: var(--navy); font-size: clamp(42px, 5vw, 68px); line-height: 1.08; letter-spacing: -0.055em; margin-bottom: 22px; }
h2 { color: var(--navy); font-size: clamp(31px, 4vw, 48px); line-height: 1.15; letter-spacing: -0.035em; margin-bottom: 14px; }
h3 { color: var(--navy); font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
p { color: var(--muted); line-height: 1.75; }
.lead { font-size: 18px; max-width: 710px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 680px; }
.stats div { display: grid; grid-template-columns: 42px 1fr; gap: 4px 12px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 35px rgba(13,92,177,.06); }
.stats strong { color: var(--navy); font-size: 28px; }
.stats small { grid-column: 2; color: var(--muted); font-weight: 600; }
.icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-weight: 900; }
.icon.blue { color: var(--blue); background: #eaf2ff; }
.icon.green { color: var(--green); background: #e9fbf3; }
.icon.orange { color: var(--orange); background: #fff4e7; }
.icon.purple { color: var(--purple); background: #f0edff; }
.dashboard {
  position: relative;
  min-height: 560px;
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 24px;
  border-radius: 34px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dashboard:before { content:""; position:absolute; inset:auto -100px -130px auto; width:320px; height:320px; border-radius:50%; background:rgba(23,105,255,.1); }
.dashboard aside { position: relative; z-index:1; padding: 20px 12px; border-radius: 22px; background: var(--navy); color: #fff; display: grid; align-content: start; gap: 18px; }
.dashboard aside b { font-size: 13px; }
.dashboard aside span { height: 34px; border-radius: 12px; background: rgba(255,255,255,.14); }
.dash-main { position: relative; z-index:1; padding-left: 20px; }
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dash-head strong { color: var(--navy); font-size: 24px; }
.dash-head em { color: var(--blue); background: #edf5ff; border-radius: 999px; padding: 8px 12px; font-style: normal; font-size: 12px; font-weight: 800; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpis div { padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: #f8fbff; }
.kpis small { display:block; color: var(--muted); font-size: 11px; }
.kpis b { color: var(--navy); font-size: 20px; }
.chart-card { height: 230px; margin: 16px 0; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, #fff, #f6fbff); }
.chart-line { position: relative; height: 100%; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 100% 25%, 20% 100%; border-radius: 16px; overflow: hidden; }
.chart-line i { position: absolute; inset: 22% 4% 18%; background: linear-gradient(135deg, transparent 47%, var(--blue) 48% 52%, transparent 53%); filter: drop-shadow(0 8px 8px rgba(23,105,255,.25)); }
.dash-bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.donut { height: 132px; display:grid; place-items:center; border-radius: 22px; border: 1px solid var(--line); background: #fff; }
.donut span { display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:#fff; color:var(--navy); font-weight:900; box-shadow: inset 0 0 0 1px var(--line); }
.blue-ring { background: conic-gradient(var(--blue) 0 74%, #eaf2ff 74%); }
.mix-ring { background: conic-gradient(var(--green) 0 42%, var(--orange) 42% 70%, #eaf2ff 70%); }
.ai-bubble { position:absolute; right: 28px; bottom: 34px; width: 260px; padding: 16px; border-radius: 20px; background: #fff; border:1px solid var(--line); box-shadow: 0 18px 45px rgba(7,26,61,.16); }
.ai-bubble span { color: var(--blue); font-weight: 900; }
.ai-bubble p { margin: 6px 0 0; font-size: 13px; }
.section-title { max-width: 850px; margin-bottom: 34px; }
.section-title.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title.center p:last-child { max-width: 680px; margin: 0 auto; }
.problem-intro { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(420px, 1fr); gap: clamp(22px, 4vw, 50px); align-items: center; margin-bottom: 36px; }
.problem-intro .section-title { margin-bottom: 0; }
.problem-photo { position: relative; margin: 0; min-height: 360px; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); background: #dbe7f6; }
.problem-photo:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,26,61,0) 35%, rgba(7,26,61,.72) 100%); pointer-events: none; }
.problem-photo img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: center; }
.problem-photo figcaption { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; color: #fff; }
.problem-photo figcaption strong { display: block; font-size: clamp(20px, 2vw, 30px); line-height: 1.18; letter-spacing: -.035em; margin-bottom: 8px; }
.problem-photo figcaption span { display: block; max-width: 620px; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 600; line-height: 1.55; }
.compact-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.compact-grid article, .card-grid article, .service-grid article, .process-grid article, .case-grid article, .why-grid article { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 14px 40px rgba(16,82,155,.07); }
.compact-grid article { padding: 20px; min-height: 220px; }
.compact-grid h3 { font-size: 16px; margin-top: 14px; }
.compact-grid p { font-size: 13px; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card-grid article { padding: 28px; transition: .22s ease; }
.card-grid article:hover, .service-grid article:hover, .case-grid article:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.solution-shot { position:relative; margin: -6px -6px 22px; padding: 10px; border-radius: 24px; background: linear-gradient(145deg,#dbeafe,#fff); border:1px solid #dce8f7; box-shadow: 0 18px 42px rgba(16,82,155,.14); overflow:hidden; }
.solution-shot:before { content:""; position:absolute; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(23,105,255,.13), transparent 9rem); pointer-events:none; }
.shot-window { position:relative; display:grid; grid-template-columns: 82px 1fr; min-height: 235px; border-radius: 18px; overflow:hidden; background:#f8fbff; border:1px solid #d9e7f6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.shot-window aside { display:flex; flex-direction:column; gap:8px; padding:14px 10px; background:#071a3d; color:#b8c6dc; }
.shot-window aside b { color:#fff; font-size:12px; margin-bottom:6px; }
.shot-window aside span { padding:7px 8px; border-radius:9px; font-size:9px; font-weight:800; white-space:nowrap; }
.shot-window aside .on { color:#fff; background:rgba(255,255,255,.15); }
.shot-window main { padding: 13px; display:grid; gap:10px; align-content:start; }
.shot-window header small { display:block; color:var(--muted); font-size:9px; font-weight:900; text-transform:uppercase; }
.shot-window header strong { display:block; color:var(--navy); font-size:13px; margin-top:2px; }
.shot-kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.shot-kpis section { padding:10px; border-radius:14px; background:#fff; border:1px solid #e5eef9; box-shadow:0 7px 16px rgba(7,26,61,.05); }
.shot-kpis b { display:block; color:var(--navy); font-size:18px; }
.shot-kpis small { color:var(--muted); font-size:9px; font-weight:800; }
.shot-line, .area-chart { display:flex; align-items:end; gap:7px; height:54px; padding:9px; border-radius:14px; background:#fff; border:1px solid #e5eef9; }
.shot-line i, .area-chart i { flex:1; border-radius:999px 999px 4px 4px; background:linear-gradient(180deg,var(--blue),#bfdbfe); }
.shot-line i:nth-child(1),.area-chart i:nth-child(1){height:35%;}.shot-line i:nth-child(2),.area-chart i:nth-child(2){height:62%;}.shot-line i:nth-child(3),.area-chart i:nth-child(3){height:82%;}.shot-line i:nth-child(4),.area-chart i:nth-child(4){height:52%;}.area-chart i:nth-child(5){height:74%;}
.shot-table { display:grid; gap:7px; }
.shot-table p { display:flex; justify-content:space-between; gap:8px; margin:0; padding:8px 9px; border-radius:12px; background:#fff; border:1px solid #e5eef9; font-size:10px; }
.shot-table em, .data-sheet em { padding:3px 6px; border-radius:999px; color:#0f766e; background:#dcfce7; font-style:normal; font-weight:900; font-size:9px; }
.chat-thread { display:grid; gap:9px; }
.chat-thread p { margin:0; padding:9px 10px; border-radius:13px; font-size:10px; font-weight:800; }
.chat-thread .customer { background:#fff; color:var(--navy); justify-self:start; max-width:86%; }
.chat-thread .bot { background:var(--blue); color:#fff; justify-self:end; max-width:90%; }
.chat-thread .note { color:#0f766e; background:#dcfce7; justify-self:start; }
.source-tags { display:flex; gap:7px; flex-wrap:wrap; }
.source-tags span { padding:6px 8px; border-radius:999px; background:#fff; border:1px solid #e5eef9; color:var(--muted); font-size:9px; font-weight:900; }
.bill-shot .shot-window aside { background:#064e3b; }
.data-shot .shot-window aside { background:#0f3a5f; }
.ai-shot .shot-window aside { background:#312e81; }
.data-sheet { display:grid; gap:6px; padding:9px; border-radius:14px; background:#fff; border:1px solid #e5eef9; font-size:9px; }
.data-sheet p { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; margin:0; align-items:center; }
.agent-panel { padding:12px; border-radius:16px; background:#fff; border:1px solid #e5eef9; text-align:center; }
.ai-avatar { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 8px; border-radius:18px; background:#f5f3ff; font-size:28px; }
.agent-panel p { margin:0; font-size:10px; line-height:1.45; }
.solution-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; color:var(--blue); background:#eaf2ff; font-size:24px; margin-bottom:18px; }
.card-grid ul { padding-left: 18px; color: var(--muted); line-height: 1.9; }
.card-grid a, .service-grid a { color: var(--blue); font-weight: 800; }
.service-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.service-grid article { position: relative; padding: 28px 22px; overflow: hidden; }
.service-grid article { display:grid; grid-template-columns: auto 1fr auto; column-gap: 14px; align-items:center; }
.service-grid article b { grid-column: 1; }
.service-grid article span { grid-column: 3; justify-self:end; }
.service-grid article h3, .service-grid article p, .service-grid article a { grid-column: 1 / -1; }
.service-grid b { display:inline-grid; place-items:center; width:44px; height:34px; border-radius:999px; color:#fff; background:var(--blue); font-size:13px; }
.service-grid article:nth-child(2) b { background: var(--green); }
.service-grid article:nth-child(3) b { background: var(--orange); }
.service-grid article:nth-child(4) b { background: var(--purple); }
.service-grid article:nth-child(5) b { background: #0fb3b8; }
.service-grid span { display:grid; place-items:center; width:54px; height:54px; border-radius:18px; color: var(--blue); background:#eaf2ff; font-size: 28px; margin: 0; }
.process-visual-section { position: relative; overflow: hidden; background: radial-gradient(circle at 8% 18%, rgba(23,105,255,.08), transparent 26rem), radial-gradient(circle at 92% 76%, rgba(22,199,132,.08), transparent 28rem), #fff; }
.process-roadmap { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; max-width: 1280px; margin: 44px auto 0; }
.roadmap-line { position:absolute; left: 7%; right: 7%; top: 57px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--green), var(--orange), var(--purple)); opacity: .18; }
.process-step { position: relative; display: grid; grid-template-rows: 116px 1fr; align-items: start; }
.step-marker { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; }
.step-marker b { display:grid; place-items:center; width: 48px; height: 28px; border-radius: 999px; color:#fff; background: var(--navy); font-size: 12px; box-shadow: 0 10px 22px rgba(7,26,61,.16); }
.step-marker i { display:grid; place-items:center; width: 74px; height: 74px; border-radius: 26px; background: linear-gradient(180deg,#fff,#edf5ff); border: 1px solid var(--line); box-shadow: var(--shadow); font-style: normal; font-size: 30px; }
.step-card { position: relative; height: 100%; min-height: 275px; padding: 26px 20px 22px; border-radius: 26px; background:#fff; border:1px solid var(--line); box-shadow: 0 16px 48px rgba(16,82,155,.08); text-align: center; transition: .22s ease; display:flex; flex-direction:column; align-items:center; }
.step-card:before { content:""; position:absolute; left: 50%; top: -18px; width: 2px; height: 18px; background: var(--line); }
.process-step:hover .step-card { transform: translateY(-6px); box-shadow: var(--shadow); }
.step-card small { display:inline-flex; margin-bottom: 12px; padding: 7px 11px; border-radius:999px; color: var(--blue); background:#eaf2ff; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing:.04em; }
.step-card h3 { font-size: 17px; margin-bottom: 10px; }
.step-card p { font-size: 13px; line-height: 1.65; }
.step-card em { display:block; margin-top: auto; padding-top: 14px; border-top:1px dashed var(--line); color:#0f766e; font-style: normal; font-size: 12px; font-weight: 900; width:100%; }
.process-step:nth-child(3) .step-card small { color:#16a34a; background:#e9fbf3; }
.process-step:nth-child(4) .step-card small { color:#0b8cff; background:#eaf7ff; }
.process-step:nth-child(5) .step-card small { color:#ff8a00; background:#fff4e7; }
.process-step:nth-child(6) .step-card small { color:#7c5cff; background:#f0edff; }
.process-step:nth-child(7) .step-card small { color:#0f766e; background:#e9fbf3; }
.case-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.case-grid article { padding: 26px; overflow:hidden; }
.case-grid article > div:first-child { display:flex; gap: 12px; margin-bottom: 20px; }
.case-grid article > div:first-child span { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:#eaf2ff; color:var(--blue); font-size:23px; }
.case-card { display:flex; flex-direction:column; }
.case-card > p { min-height: 72px; }
.real-app-mockup { position:relative; margin-top:auto; padding: 12px; border-radius: 28px; background: linear-gradient(145deg,#dbeafe,#fff); box-shadow: 0 20px 55px rgba(16,82,155,.16); border:1px solid rgba(23,105,255,.12); overflow:hidden; }
.real-app-mockup:before { content:""; position:absolute; inset:auto -45px -45px auto; width:160px; height:160px; border-radius:999px; background:rgba(23,105,255,.11); }
.app-window { position:relative; display:grid; grid-template-columns: 96px 1fr; min-height: 300px; border-radius: 22px; overflow:hidden; background:#f8fbff; border:1px solid #dce8f7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.app-window aside { display:flex; flex-direction:column; gap: 9px; padding: 16px 12px; background:#071a3d; color:#b9c7de; }
.app-window aside b { color:#fff; font-size: 14px; margin-bottom: 10px; }
.app-window aside span { padding: 8px 9px; border-radius: 10px; font-size: 10px; font-weight:800; white-space:nowrap; }
.app-window aside span.active { color:#fff; background:rgba(255,255,255,.14); }
.app-window main { padding: 16px; display:grid; align-content:start; gap: 12px; }
.app-window header { display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.app-window header small { display:block; color:var(--muted); font-size: 10px; font-weight:900; text-transform:uppercase; }
.app-window header strong { display:block; color:var(--navy); font-size: 15px; margin-top: 3px; }
.app-window button { border:0; border-radius: 10px; padding: 8px 10px; color:#fff; background:var(--blue); font-size: 11px; font-weight:900; }
.app-kpis { display:grid; grid-template-columns:1fr 1fr; gap: 10px; }
.app-kpis section { padding: 12px; border-radius: 16px; background:#fff; border:1px solid #e5eef9; box-shadow: 0 8px 20px rgba(7,26,61,.05); }
.app-kpis small { display:block; color:var(--muted); font-size: 10px; font-weight:900; }
.app-kpis b { display:block; color:var(--navy); font-size: 22px; margin-top: 3px; }
.app-table { display:grid; gap: 8px; }
.app-table p { display:grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin:0; padding: 10px; border-radius: 14px; background:#fff; border:1px solid #e5eef9; }
.app-table b { color:var(--navy); font-size: 12px; }
.app-table span { color:var(--muted); font-size: 10px; grid-column:1; }
.app-table em { align-self:center; grid-row:1 / span 2; grid-column:2; padding: 5px 7px; border-radius:999px; color:#0f766e; background:#dcfce7; font-size: 10px; font-style:normal; font-weight:900; }
.payment-real .app-window aside { background:#064e3b; }
.payment-real .app-window button { background:#16a34a; }
.payment-real .app-table em { color:#166534; background:#dcfce7; }
.japan-real .app-window aside { background:#312e81; }
.japan-real .app-window button { background:#7c5cff; }
.japan-real .app-table em { color:#5b21b6; background:#ede9fe; }
.progress-card { height: 18px; border-radius:999px; background:#e5eef9; overflow:hidden; border:1px solid #d8e6f5; }
.progress-card span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#16a34a,#86efac); }
.mini-chart { display:flex; align-items:end; gap: 8px; height: 86px; padding: 12px; border-radius: 16px; background:#fff; border:1px solid #e5eef9; }
.mini-chart i { flex:1; border-radius:999px 999px 5px 5px; background:linear-gradient(180deg,#7c5cff,#c4b5fd); }
.mini-chart i:nth-child(1){height:38%;}.mini-chart i:nth-child(2){height:62%;}.mini-chart i:nth-child(3){height:76%;}.mini-chart i:nth-child(4){height:52%;}.mini-chart i:nth-child(5){height:88%;}
.why-grid { display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.why-grid article { padding: 24px 16px; text-align:center; }
.why-grid span { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 14px; border-radius:999px; background:#edf5ff; font-size:26px; }
.why-grid h3 { font-size: 15px; }
.testimonial-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.testimonial-grid article { padding: 30px; border-radius: 26px; background:#fff; border:1px solid var(--line); box-shadow: 0 14px 40px rgba(16,82,155,.07); }
.stars { color:#ffb020; letter-spacing: 2px; font-size: 18px; margin-bottom: 16px; }
.testimonial-grid article p { color:#42526b; font-size: 15px; line-height:1.75; }
.testimonial-grid footer { display:flex; align-items:center; gap: 12px; margin-top: 22px; }
.testimonial-grid footer span { display:grid; place-items:center; width:46px; height:46px; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-2)); font-size:13px; font-weight:900; }
.testimonial-grid footer b { display:block; color:var(--navy); }
.testimonial-grid footer small { display:block; color:var(--muted); margin-top:2px; font-weight:700; }
.partner-logo-showcase { position:relative; margin-top: 34px; overflow:hidden; padding: 8px 0; }
.partner-logo-showcase:before, .partner-logo-showcase:after { content:""; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none; }
.partner-logo-showcase:before { left:0; background:linear-gradient(90deg,#f4f8ff,rgba(244,248,255,0)); }
.partner-logo-showcase:after { right:0; background:linear-gradient(270deg,#f4f8ff,rgba(244,248,255,0)); }
.logo-row { display:flex; gap: 16px; width:max-content; padding: 7px 0; }
.logo-row-left { animation: logoMarqueeLeft 34s linear infinite; }
.logo-row-right { animation: logoMarqueeRight 38s linear infinite; transform: translateX(-120px); }
.partner-logo-showcase:hover .logo-row { animation-play-state: paused; }
.logo-tile { display:grid; place-items:center; min-width: 210px; height: 92px; padding: 16px 24px; border-radius: 20px; background:#fff; border:1px solid #dce6f3; box-shadow: 0 12px 30px rgba(16,82,155,.07); text-align:center; }
.logo-tile strong { display:block; font-size: 22px; line-height:1; letter-spacing:-.03em; color:var(--navy); }
.logo-tile img { display:block; max-width: 128px; max-height: 38px; width:auto; height:auto; object-fit:contain; }
.logo-image-tile { gap: 8px; }
.logo-only-tile img { max-width: 150px; max-height: 52px; }
.brand-sky.logo-only-tile img { max-width: 136px; max-height: 58px; }
.brand-zalo.logo-only-tile img { max-width: 118px; max-height: 44px; }
.brand-n8n.logo-only-tile img { max-width: 138px; max-height: 42px; }
.logo-tile small { display:block; margin-top:8px; color:#7a8aa0; font-size: 11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.logo-image-tile small { margin-top:0; }
.brand-movads strong { color:#1769ff; }
.brand-sky strong { color:#0f766e; }
.brand-dvt strong { color:#f97316; }
.brand-zalo strong { color:#0068ff; }
.brand-google strong { background:linear-gradient(90deg,#4285f4,#34a853,#fbbc05,#ea4335); -webkit-background-clip:text; color:transparent; }
.brand-meta strong { color:#0866ff; }
.brand-n8n strong { color:#ea4b71; }
.brand-crm strong { color:#6d5dfc; }
.brand-dashboard strong { color:#0f3a5f; }
.brand-ai strong { color:#7c3aed; }
.brand-webapp strong { color:#0891b2; }
.brand-api strong { color:#111827; }
@keyframes logoMarqueeLeft { from { transform: translateX(0); } to { transform: translateX(-35%); } }
@keyframes logoMarqueeRight { from { transform: translateX(-180px); } to { transform: translateX(0); } }
.video-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.video-grid article { padding: 18px 18px 24px; border-radius: 26px; background:#fff; border:1px solid var(--line); box-shadow: 0 14px 40px rgba(16,82,155,.07); }
.video-thumb { position:relative; display:grid; place-items:center; min-height: 220px; margin-bottom: 20px; border-radius: 22px; overflow:hidden; background: radial-gradient(circle at 24% 20%, rgba(255,255,255,.22), transparent 10rem), linear-gradient(135deg, #1769ff, #0b2a5c); color:#fff; }
.video-thumb:before { content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.24); border-radius: 18px; }
.video-thumb span { position:relative; z-index:1; display:grid; place-items:center; width:74px; height:74px; border-radius:999px; background:rgba(255,255,255,.18); backdrop-filter: blur(10px); font-size:30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.video-thumb small { position:absolute; right:18px; bottom:16px; z-index:1; padding:7px 10px; border-radius:999px; background:rgba(7,26,61,.54); color:#fff; font-weight:900; }
.video-thumb.green { background: radial-gradient(circle at 24% 20%, rgba(255,255,255,.22), transparent 10rem), linear-gradient(135deg, #16c784, #0f766e); }
.video-thumb.purple { background: radial-gradient(circle at 24% 20%, rgba(255,255,255,.22), transparent 10rem), linear-gradient(135deg, #7c5cff, #312e81); }
.video-grid h3 { font-size: 18px; }
.video-grid p { font-size: 14px; }
.cta-section { padding: clamp(70px, 8vw, 110px) clamp(18px, 5vw, 76px); background:#fff; }
.cta-panel { position:relative; display:grid; grid-template-columns: .85fr 1fr 230px; gap: 28px; align-items:center; padding: clamp(30px, 5vw, 58px); border-radius: 34px; background: radial-gradient(circle at 90% 10%, rgba(22,199,132,.22), transparent 22rem), linear-gradient(135deg, #071a3d, #0b2a5c); overflow:hidden; box-shadow: var(--shadow); }
.cta-copy h2 { color:#fff; }
.cta-copy p, .cta-copy li { color: rgba(255,255,255,.72); line-height:1.8; }
.form { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 20px; border-radius:24px; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); }
.form input, .form select, .form textarea { width:100%; border:0; border-radius:12px; padding: 15px; font: inherit; background:#fff; color:var(--text); outline:none; }
.form textarea, .form button { grid-column: 1 / -1; }
.form textarea { min-height: 100px; resize: vertical; }
.growth-card { display:grid; align-content:center; justify-items:center; min-height: 250px; padding: 24px; border-radius:28px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; text-align:center; }
.growth-card span { display:grid; place-items:center; width:80px; height:80px; border-radius:999px; background:var(--green); color:#052b1e; font-size:42px; font-weight:900; }
.growth-card b { font-size:42px; margin-top:18px; }
.growth-card small { color: rgba(255,255,255,.72); line-height:1.6; }
.footer { background:#06142f; color:#fff; padding: 56px clamp(18px, 5vw, 76px) 24px; }
.footer-grid { display:grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 34px; }
.footer .logo strong, .footer h3 { color:#fff; }
.footer .logo small, .footer p, .footer a { display:block; color:rgba(255,255,255,.67); line-height:1.75; margin: 7px 0; }
.socials { display:flex; gap:10px; margin-top:18px; }
.socials span { display:grid; place-items:center; width:36px; height:36px; border-radius:999px; background:rgba(255,255,255,.1); }
.map-pin { display:grid; place-items:center; height:120px; border-radius:18px; background:linear-gradient(135deg,#fff,#dbeafe); font-size:38px; }
.copyright { display:flex; justify-content:space-between; gap:20px; padding-top:28px; margin-top:34px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.55); font-size:13px; }
.reveal { animation: rise .75s ease both; }
.delay-1 { animation-delay: .14s; }
@keyframes rise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform: translateY(0); } }
@media (max-width: 1180px) {
  .nav { display:none; }
  .hero, .cta-panel { grid-template-columns: 1fr; }
  .dashboard { min-height: 520px; }
  .problem-intro { grid-template-columns: 1fr; }
  .compact-grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid, .why-grid, .testimonial-grid, .video-grid { grid-template-columns: repeat(3, 1fr); }
  .process-roadmap { grid-template-columns: repeat(3, 1fr); }
  .roadmap-line { display: none; }
}
@media (max-width: 820px) {
  .header { height:auto; padding-top:14px; padding-bottom:14px; }
  .header .btn { display:none; }
  .lang-select { height: 40px; }
  .section { padding: 58px 18px; }
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  .dashboard { grid-template-columns: 1fr; padding:16px; min-height:auto; }
  .dashboard aside { display:none; }
  .dash-main { padding-left:0; }
  .kpis, .stats, .compact-grid, .card-grid, .service-grid, .process-roadmap, .case-grid, .why-grid, .testimonial-grid, .video-grid, .footer-grid, .form { grid-template-columns: 1fr; }
  .process-step { grid-template-rows: auto; grid-template-columns: 96px 1fr; gap: 16px; align-items: stretch; }
  .step-marker { align-content: start; padding-top: 4px; }
  .step-card { min-height: auto; height:auto; text-align: left; align-items:flex-start; }
  .step-card:before { display:none; }
  .ai-bubble { position:relative; right:auto; bottom:auto; width:auto; margin-top:14px; }
  .footer .logo { align-items:flex-start; }
  .copyright { flex-direction:column; }
}

/* Hero laptop mockup based on the requested reference design */
.hero {
  grid-template-columns: minmax(430px, .8fr) minmax(680px, 1.2fr);
  gap: clamp(28px, 4vw, 58px);
  min-height: 760px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(23,105,255,.13), transparent 34rem),
    radial-gradient(circle at 6% 20%, rgba(11,140,255,.09), transparent 28rem),
    linear-gradient(135deg, #f7fbff 0%, #edf6ff 45%, #ffffff 100%);
}
.hero-text { position: relative; z-index: 2; }
.hero h1 {
  max-width: 650px;
  font-size: clamp(34px, 3.55vw, 54px);
  line-height: 1.14;
  letter-spacing: -0.055em;
  margin-bottom: 24px;
}
.hero h1 span { color: var(--blue); }
.hero .lead { max-width: 720px; color: #4f5f73; font-size: 17px; }
.hero-metrics { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 34px; }
.hero-metrics div { display: grid; grid-template-columns: 38px auto; column-gap: 12px; align-items: center; min-width: 150px; }
.hero-metrics span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--blue); background: #e7f1ff; font-weight: 900; }
.hero-metrics strong { color: var(--navy); font-size: 28px; line-height: 1; }
.hero-metrics small { color: var(--muted); font-weight: 700; font-size: 13px; }
.laptop-scene { position: relative; min-height: 650px; display: flex; align-items: center; justify-content: center; }
.laptop { position: relative; width: min(100%, 900px); filter: drop-shadow(0 34px 45px rgba(7,26,61,.22)); }
.screen { position: relative; padding: 18px; border-radius: 30px 30px 18px 18px; background: linear-gradient(145deg, #1d2635, #080d16); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.screen:before { content: ""; position: absolute; top: 8px; left: 50%; width: 58px; height: 5px; transform: translateX(-50%); border-radius: 999px; background: rgba(255,255,255,.16); }
.app-shell { height: 555px; display: grid; grid-template-columns: 150px 1fr; overflow: hidden; border-radius: 16px; background: #f7faff; }
.app-sidebar { padding: 18px 12px; background: #fff; border-right: 1px solid #e5edf8; display: flex; flex-direction: column; gap: 8px; }
.mini-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--navy); font-size: 13px; }
.logo-mark.tiny { width: 24px; height: 24px; border-radius: 8px; box-shadow: none; }
.logo-mark.tiny i { width: 9px; height: 9px; border-radius: 3px; }
.logo-mark.tiny i:nth-child(1) { top: 5px; left: 8px; }
.logo-mark.tiny i:nth-child(2) { bottom: 5px; left: 5px; }
.logo-mark.tiny i:nth-child(3) { bottom: 5px; right: 5px; }
.app-sidebar a { padding: 9px 10px; border-radius: 10px; color: #607086; font-size: 12px; font-weight: 700; }
.app-sidebar a.active { color: var(--blue); background: #eaf2ff; }
.app-content { position: relative; padding: 20px; overflow: hidden; }
.app-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.app-top h3 { margin: 0; font-size: 24px; }
.app-top span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: #fff; color: var(--muted); }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash-kpis article { padding: 12px; background: #fff; border: 1px solid #e5edf8; border-radius: 14px; box-shadow: 0 8px 22px rgba(27,88,160,.05); }
.dash-kpis small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.dash-kpis b { display: block; color: var(--navy); font-size: 15px; margin: 5px 0; letter-spacing: -.03em; }
.dash-kpis em { font-style: normal; font-weight: 900; font-size: 11px; }
.dash-kpis .up { color: var(--green); }
.dash-kpis .down { color: #ef4444; }
.analytics-grid { display: grid; grid-template-columns: 1.45fr .9fr; grid-template-rows: 222px 180px; gap: 12px; margin-top: 12px; }
.analytics-grid section { background: #fff; border: 1px solid #e5edf8; border-radius: 16px; padding: 14px; box-shadow: 0 8px 22px rgba(27,88,160,.05); }
.analytics-grid header { color: var(--navy); font-size: 13px; font-weight: 900; margin-bottom: 10px; }
.line-widget { grid-row: span 1; }
.line-chart { height: 170px; border-radius: 12px; background-image: linear-gradient(#e8eff8 1px, transparent 1px), linear-gradient(90deg, #e8eff8 1px, transparent 1px); background-size: 100% 25%, 20% 100%; }
.line-chart svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(23,105,255,.24)); }
.campaign-widget { grid-row: span 2; display: grid; grid-template-rows: auto auto 1fr; }
.donut-large { width: 128px; height: 128px; margin: 6px auto 12px; border-radius: 50%; display: grid; place-items: center; }
.donut-large span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--navy); font-weight: 900; }
.blue-donut { background: conic-gradient(var(--blue) 0 68%, #e8eff8 68%); }
.campaign-widget ul, .debt-widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.campaign-widget li:before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--blue); }
.campaign-widget li:nth-child(2):before { background: var(--green); }
.campaign-widget li:nth-child(3):before { background: var(--orange); }
.campaign-widget li:nth-child(4):before { background: var(--purple); }
.debt-widget { grid-column: 1; }
.debt-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; }
.debt-donut { width: 104px; height: 104px; margin: 0; background: conic-gradient(var(--green) 0 45%, #2dd4bf 45% 68%, #facc15 68% 84%, #fb7185 84%); }
.debt-donut span { width: 54px; height: 54px; }
.debt-widget li { display: flex; justify-content: space-between; gap: 16px; }
.debt-widget b { color: #52657a; }
.debt-widget em { color: var(--navy); font-style: normal; font-weight: 900; }
.chat-widget { position: absolute; right: 24px; bottom: 22px; width: 260px; border-radius: 18px; background: #fff; border: 1px solid #dbe7f6; box-shadow: 0 18px 45px rgba(7,26,61,.2); overflow: hidden; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; color: #fff; background: var(--blue); font-size: 13px; }
.chat-widget p { margin: 12px; padding: 10px; border-radius: 12px; background: #f0f6ff; color: #42526b; font-size: 12px; line-height: 1.5; }
.chat-input { display: flex; justify-content: space-between; margin: 12px; padding: 10px 12px; border-radius: 999px; background: #f7faff; color: #9aa8ba; font-size: 12px; }
.chat-input span { color: var(--blue); }
.laptop-base { position: relative; height: 44px; margin: 0 auto; width: 92%; border-radius: 0 0 46px 46px; background: linear-gradient(180deg, #202b3c, #0a101a); }
.laptop-base:before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 22%; height: 10px; border-radius: 0 0 18px 18px; background: rgba(255,255,255,.18); }
.laptop-base i { position: absolute; inset: auto 8% -13px; height: 18px; border-radius: 50%; background: rgba(7,26,61,.18); filter: blur(8px); }
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .laptop-scene { min-height: auto; }
}
@media (max-width: 820px) {
  .hero h1 { font-size: 31px; }
  .hero-metrics { gap: 14px; }
  .screen { padding: 10px; border-radius: 22px; }
  .app-shell { height: auto; min-height: 520px; grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .campaign-widget, .debt-widget, .line-widget { grid-column: auto; grid-row: auto; }
  .chat-widget { position: relative; right: auto; bottom: auto; width: auto; margin-top: 12px; }
  .laptop-base { height: 26px; }
}

.form-note{margin:8px 0 0;color:#eaf7ff;font-size:14px;line-height:1.5}.form button:disabled{opacity:.7;cursor:not-allowed}

/* Shared header: one structure on homepage and every article page */
.header[data-site-header]{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:0 clamp(20px,5vw,72px);position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,235,248,.9);box-shadow:0 10px 36px rgba(15,35,70,.05)}
.header[data-site-header] .header-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.header[data-site-header] .lang-select{min-width:76px;height:42px;padding:0 30px 0 12px;border:1px solid #dbe5f2;border-radius:999px;background:#fff;color:#163154;font:700 13px 'Be Vietnam Pro',sans-serif;cursor:pointer}
.header[data-site-header] .nav{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,26px)}
.header[data-site-header] .nav a{font-size:14px;text-decoration:none;color:#283957;font-weight:700;white-space:nowrap}
.header[data-site-header] .nav a:hover{color:#1769ff}
@media(max-width:1100px){.header[data-site-header] .nav{display:none}}
@media(max-width:680px){.header[data-site-header]{padding:0 14px;min-height:68px;gap:10px}.header[data-site-header] .logo small{display:none}.header[data-site-header] .header-actions .btn{display:none}.header[data-site-header] .lang-select{min-width:72px}}


/* Premium responsive header + mobile menu */
.header[data-site-header]{transition:box-shadow .2s ease,background .2s ease}
.header[data-site-header] .logo{min-width:0;flex:0 0 auto}
.header[data-site-header] .logo strong{font-size:clamp(22px,2vw,28px)}
.header[data-site-header] .logo small{font-size:12px;line-height:1.25;white-space:nowrap}
.header[data-site-header] .menu-toggle{
  display:none;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 14px;border:1px solid #dbe5f2;border-radius:999px;background:#fff;color:#163154;font:800 13px 'Be Vietnam Pro',sans-serif;cursor:pointer;box-shadow:0 8px 22px rgba(15,35,70,.06);transition:.18s ease
}
.header[data-site-header] .menu-toggle:hover{transform:translateY(-1px);border-color:#bad2f2;box-shadow:0 12px 28px rgba(15,35,70,.1)}
.header[data-site-header] .menu-toggle-bars{position:relative;width:18px;height:12px;display:inline-block}
.header[data-site-header] .menu-toggle-bars:before,.header[data-site-header] .menu-toggle-bars:after,.header[data-site-header] .menu-toggle-bars i{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:999px;background:currentColor;transition:.18s ease}
.header[data-site-header] .menu-toggle-bars:before{top:0}.header[data-site-header] .menu-toggle-bars i{top:5px}.header[data-site-header] .menu-toggle-bars:after{bottom:0}
.header[data-site-header].menu-open .menu-toggle-bars:before{top:5px;transform:rotate(45deg)}
.header[data-site-header].menu-open .menu-toggle-bars i{opacity:0;transform:scaleX(.3)}
.header[data-site-header].menu-open .menu-toggle-bars:after{bottom:5px;transform:rotate(-45deg)}
.mobile-menu-backdrop{position:fixed;inset:0;z-index:998;background:rgba(7,26,61,.32);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:.18s ease}
.mobile-menu-backdrop.is-open{opacity:1;pointer-events:auto}
.mobile-menu-panel{position:fixed;z-index:999;top:82px;right:clamp(14px,5vw,72px);width:min(360px,calc(100vw - 28px));padding:12px;border:1px solid rgba(219,231,246,.95);border-radius:26px;background:rgba(255,255,255,.97);box-shadow:0 28px 80px rgba(7,26,61,.22);transform:translateY(-10px) scale(.98);opacity:0;pointer-events:none;transition:.2s ease;overflow:hidden}
.mobile-menu-panel.is-open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.mobile-menu-panel:before{content:"";position:absolute;inset:-80px -80px auto auto;width:190px;height:190px;border-radius:999px;background:rgba(23,105,255,.10);pointer-events:none}
.mobile-menu-title{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 14px;color:#071a3d;font-weight:900}
.mobile-menu-title small{display:block;margin-top:2px;color:#64748b;font-size:12px;font-weight:700}
.mobile-menu-links{position:relative;display:grid;gap:7px}
.mobile-menu-links a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px;border-radius:16px;color:#223553;background:#f7fbff;border:1px solid transparent;font-weight:800;text-decoration:none;transition:.16s ease}
.mobile-menu-links a:after{content:"→";color:#1769ff;font-weight:900}
.mobile-menu-links a:hover{background:#eef6ff;border-color:#dbeafe;transform:translateX(2px)}
.mobile-menu-cta{position:relative;display:flex;margin-top:10px;min-height:48px;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#1769ff,#0b8cff);color:#fff!important;font-weight:900;text-decoration:none;box-shadow:0 14px 30px rgba(23,105,255,.22)}
.mobile-menu-cta:after{content:""!important}
@media(max-width:1100px){
  .header[data-site-header] .menu-toggle{display:inline-flex}
  .header[data-site-header] .header-actions{gap:8px}
}
@media(max-width:680px){
  .header[data-site-header]{min-height:74px;padding:0 12px;gap:8px}
  .header[data-site-header] .logo-mark{width:42px;height:42px;border-radius:14px}
  .header[data-site-header] .logo strong{font-size:24px}
  .header[data-site-header] .header-actions{margin-left:auto}
  .header[data-site-header] .lang-select{height:40px;min-width:66px;max-width:72px;padding:0 22px 0 10px;font-size:12px}
  .header[data-site-header] .menu-toggle{height:40px;width:44px;padding:0;border-radius:14px}
  .header[data-site-header] .menu-toggle-text{display:none}
  .mobile-menu-panel{top:78px;right:12px;width:calc(100vw - 24px);border-radius:24px}
}

/* Mobile header fit: keep menu visible on narrow browser bars */
@media(max-width:680px){
  .header[data-site-header] .logo{gap:9px;min-width:0;flex:1 1 auto}
  .header[data-site-header] .logo small{display:none!important}
  .header[data-site-header] .logo strong{font-size:22px;letter-spacing:-.045em}
  .header[data-site-header] .header-actions{flex:0 0 auto}
}
@media(max-width:380px){
  .header[data-site-header] .logo strong{font-size:20px}
  .header[data-site-header] .lang-select{min-width:60px;max-width:64px}
}

/* Use a CSS-drawn hamburger so mobile browsers never show the native button box */
.header[data-site-header] .menu-toggle{-webkit-appearance:none;appearance:none}
@media(max-width:680px){
  .header[data-site-header] .menu-toggle{font-size:0!important;color:#163154;background:#fff!important;border:1px solid #dbe5f2!important;box-shadow:0 8px 22px rgba(15,35,70,.06)!important}
  .header[data-site-header] .menu-toggle-bars{display:block!important;flex:0 0 auto!important}
}

/* Localized app illustration galleries for article pages */
.app-illustration-section{padding:72px clamp(18px,5vw,76px);background:linear-gradient(180deg,#fff,#f6f9ff);position:relative;overflow:hidden}
.app-illustration-section:before{content:"";position:absolute;inset:-120px -140px auto auto;width:340px;height:340px;border-radius:999px;background:rgba(23,105,255,.10);pointer-events:none}.app-illustration-section:after{content:"";position:absolute;left:-140px;bottom:-160px;width:320px;height:320px;border-radius:999px;background:rgba(22,199,132,.08);pointer-events:none}
.app-ill-wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto}.app-ill-head{max-width:760px;margin:0 auto 30px;text-align:center}.app-ill-kicker{display:inline-flex;margin-bottom:12px;padding:8px 13px;border-radius:999px;background:#eaf2ff;color:#1769ff;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.app-ill-head h2{margin:0 0 12px;color:#071a3d;font-size:clamp(28px,4vw,46px);line-height:1.1;letter-spacing:-.045em}.app-ill-head p{margin:0;color:#64748b;line-height:1.75}.app-ill-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch}.app-shot{position:relative;min-height:430px;padding:12px;border-radius:28px;background:rgba(255,255,255,.82);border:1px solid #dfeaf7;box-shadow:0 20px 55px rgba(15,35,70,.09);overflow:hidden;transition:.2s ease}.app-shot:hover{transform:translateY(-5px);box-shadow:0 28px 75px rgba(15,35,70,.13)}.app-shot:before{content:"";position:absolute;inset:-70px -70px auto auto;width:160px;height:160px;border-radius:999px;background:var(--shot-glow,rgba(23,105,255,.12));pointer-events:none}.app-phone{position:relative;height:100%;min-height:310px;border-radius:25px;background:#071a3d;padding:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.app-phone-screen{height:100%;min-height:300px;border-radius:19px;background:linear-gradient(180deg,#f8fbff,#eef6ff);padding:13px;overflow:hidden}.app-status{height:17px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#7b8ba3;font-size:9px;font-weight:900}.app-status i{display:block;width:45px;height:5px;border-radius:999px;background:#dbe7f6}.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:12px}.app-avatar{width:32px;height:32px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--shot-accent,#1769ff),#66c7ff);color:#fff;font-size:16px;box-shadow:0 9px 20px rgba(23,105,255,.22)}.app-topbar b{display:block;color:#10233f;font-size:12px;line-height:1.15}.app-topbar small{display:block;color:#7b8ba3;font-size:9px;font-weight:800}.app-menu-dot{width:28px;height:28px;border-radius:10px;background:#fff;display:grid;place-items:center;color:#94a3b8;font-weight:900}.app-kpis-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.app-kpis-mini section{padding:9px;border-radius:14px;background:#fff;border:1px solid #e5eef9}.app-kpis-mini span{display:block;color:#7b8ba3;font-size:8px;font-weight:900;text-transform:uppercase}.app-kpis-mini b{display:block;margin-top:4px;color:#10233f;font-size:15px;letter-spacing:-.03em}.app-chart-mini{height:82px;display:flex;align-items:end;gap:6px;padding:9px;margin-bottom:10px;border-radius:16px;background:#fff;border:1px solid #e5eef9}.app-chart-mini i{flex:1;border-radius:999px 999px 5px 5px;background:linear-gradient(180deg,var(--shot-accent,#1769ff),#bfdbfe)}.app-list-mini{display:grid;gap:7px}.app-list-mini p{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;margin:0;padding:8px;border-radius:13px;background:#fff;border:1px solid #e5eef9;color:#52657a;font-size:9px;line-height:1.25}.app-list-mini p i{width:8px;height:8px;border-radius:99px;background:var(--shot-accent,#1769ff)}.app-list-mini p b{color:#10233f;font-size:9px}.app-list-mini p em{font-style:normal;color:#16a34a;font-weight:900}.app-caption{position:relative;margin-top:12px}.app-caption b{display:block;color:#071a3d;font-size:15px;line-height:1.28}.app-caption span{display:block;margin-top:5px;color:#64748b;font-size:12px;line-height:1.55}.app-shot:nth-child(2){--shot-accent:#16c784;--shot-glow:rgba(22,199,132,.12)}.app-shot:nth-child(3){--shot-accent:#ff9f43;--shot-glow:rgba(255,159,67,.14)}.app-shot:nth-child(4){--shot-accent:#7c5cff;--shot-glow:rgba(124,92,255,.13)}.app-shot:nth-child(5){--shot-accent:#0fb3b8;--shot-glow:rgba(15,179,184,.12)}
@media(max-width:1180px){.app-ill-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.app-shot{min-height:410px}}
@media(max-width:760px){.app-illustration-section{padding:54px 16px}.app-ill-head{text-align:left;margin-bottom:22px}.app-ill-grid{display:flex;overflow-x:auto;gap:14px;padding:4px 2px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.app-ill-grid::-webkit-scrollbar{height:7px}.app-ill-grid::-webkit-scrollbar-thumb{background:#c7d7ee;border-radius:999px}.app-shot{flex:0 0 min(82vw,330px);min-height:438px;scroll-snap-align:start;border-radius:24px}.app-phone{min-height:314px}.app-phone-screen{min-height:304px}.app-ill-head h2{font-size:30px}}

/* Mockup gallery mobile UX polish: compact phone cards, clear swipe affordance */
.app-ill-hint{display:none;margin-top:12px;color:#1769ff;font-size:12px;font-weight:900;letter-spacing:.01em}
.app-ill-dots{display:none;justify-content:center;gap:7px;margin-top:2px}.app-ill-dots i{width:7px;height:7px;border-radius:999px;background:#c8d8ee}.app-ill-dots i:first-child{width:24px;background:#1769ff}
.app-phone-screen{position:relative}.app-phone-screen:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:28px;background:linear-gradient(180deg,rgba(248,251,255,0),#f8fbff 80%);pointer-events:none}.app-list-mini p:nth-child(3){display:none}
@media(max-width:760px){
  .app-illustration-section{padding:42px 0 46px;background:linear-gradient(180deg,#fff,#f4f8ff);scroll-margin-top:86px}
  .app-ill-wrap{max-width:none;margin:0}
  .app-ill-head{padding:0 16px;margin-bottom:16px;text-align:left}
  .app-ill-kicker{font-size:10px;padding:7px 10px;margin-bottom:10px}
  .app-ill-head h2{font-size:24px;line-height:1.16;letter-spacing:-.035em;margin-bottom:8px}
  .app-ill-head p{font-size:14px;line-height:1.6}
  .app-ill-hint{display:inline-flex;align-items:center;gap:7px}.app-ill-hint:after{content:"→";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#eaf2ff;color:#1769ff}
  .app-ill-grid{gap:12px;padding:2px 16px 14px;scroll-padding-left:16px;overscroll-behavior-x:contain;scrollbar-width:none}
  .app-ill-grid::-webkit-scrollbar{display:none}
  .app-shot{flex:0 0 min(78vw,286px);min-height:0;padding:10px;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 16px 42px rgba(15,35,70,.11);scroll-snap-align:center}
  .app-shot:hover{transform:none}
  .app-phone{min-height:0;height:322px;padding:8px;border-radius:22px;background:linear-gradient(180deg,#071a3d,#0b244f)}
  .app-phone-screen{min-height:0;height:306px;padding:11px;border-radius:16px;background:linear-gradient(180deg,#fbfdff,#eef6ff)}
  .app-status{height:14px;margin-bottom:8px;font-size:8px}.app-status i{width:38px;height:4px}
  .app-topbar{gap:7px;margin-bottom:9px}.app-avatar{width:30px;height:30px;border-radius:11px;font-size:13px}.app-menu-dot{width:25px;height:25px;border-radius:9px}
  .app-topbar b{font-size:11px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-topbar small{font-size:8px}
  .app-kpis-mini{gap:7px;margin-bottom:8px}.app-kpis-mini section{padding:8px;border-radius:12px}.app-kpis-mini span{font-size:7px}.app-kpis-mini b{font-size:14px;margin-top:3px}
  .app-chart-mini{height:72px;gap:5px;padding:8px;margin-bottom:8px;border-radius:14px}.app-chart-mini i{min-width:0}
  .app-list-mini{gap:6px}.app-list-mini p{padding:7px;border-radius:11px;font-size:8px}.app-list-mini p b{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-list-mini p i{width:7px;height:7px}
  .app-caption{margin-top:10px}.app-caption b{font-size:14px}.app-caption span{font-size:11px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .app-ill-dots{display:flex}
}
@media(max-width:380px){.app-shot{flex-basis:80vw}.app-phone{height:306px}.app-phone-screen{height:290px}.app-chart-mini{height:62px}.app-caption span{-webkit-line-clamp:2}}