:root {
  --ink: #10110f;
  --ink-soft: #181a17;
  --paper: #f2f0eb;
  --paper-deep: #e7e5df;
  --white: #fffdf8;
  --on-dark: #fffdf8;
  --accent-ink: #10110f;
  --orange: #ff9d2f;
  --orange-hot: #ff6b22;
  --green: #a5c778;
  --muted: #777973;
  --line: rgba(16, 17, 15, 0.15);
  --line-light: rgba(255, 253, 248, 0.16);
  --radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-anchor: none; scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; font-size: 16px; line-height: 1.6; }
html[data-mode="dark"] { --paper: #1b1d1a; --paper-deep: #252822; --white: #222520; --ink: #f2f0e9; --ink-soft: #111310; --muted: #a8aaa4; --line: rgba(242, 240, 233, .15); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
i[data-lucide] { display: inline-block; width: 1em; height: 1em; flex: 0 0 1em; line-height: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; color: var(--ink); background: var(--orange); transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 100px; padding: 0 clamp(30px, 3.5vw, 68px); color: var(--on-dark); background: rgba(16,17,15,.84); border-bottom: 1px solid rgba(255,255,255,.1); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; transition: background .25s, border-color .25s, color .25s; }
.site-header.scrolled { color: var(--ink); background: rgba(242, 240, 235, .93); border-color: var(--line); backdrop-filter: blur(15px); }
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: max-content; flex: 0 0 auto; }
.brand img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(255,157,47,.18)); }
.brand-copy { display: flex; flex-direction: column; min-width: max-content; line-height: 1; letter-spacing: 0; }
.brand-copy strong { color: #fffdf8; font-size: 22px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.brand-copy strong em { color: var(--orange); font-family: Arial, sans-serif; font-size: .82em; font-style: normal; font-weight: 700; }
.brand-copy small { display: flex; align-items: baseline; gap: 15px; margin-top: 9px; color: rgba(255,253,248,.9); font-size: 17px; font-weight: 800; letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
.brand-copy small span { color: #f4f2ec; }
.brand-copy small b { position: relative; padding-left: 0; color: #ff9aa7; background: linear-gradient(100deg, #ff9aa7 0%, #ff9ca8 30%, #bd9bff 100%); -webkit-background-clip: text; background-clip: text; font-size: 20px; font-weight: 900; letter-spacing: 0; text-shadow: 0 0 18px rgba(213,151,218,.16); -webkit-text-fill-color: transparent; }
.brand-copy small b::before { display: none; }
.site-header .brand { position: relative; isolation: isolate; }
.site-header .brand::before { position: absolute; top: 50%; left: 30px; z-index: -1; width: 62px; height: 62px; content: ""; border: 1px solid rgba(255,157,47,.32); border-radius: 50%; box-shadow: 0 0 18px rgba(255,157,47,.2), inset 0 0 14px rgba(255,157,47,.08); opacity: .72; transform: translate(-50%, -50%) scale(.9); pointer-events: none; animation: brand-logo-halo 3.4s ease-in-out infinite; }
.site-header .brand img { animation: brand-logo-glow 3.4s ease-in-out infinite; }
.site-header .brand-copy strong em { display: inline-block; color: transparent; background: linear-gradient(105deg, #ff9d2f 0%, #ff9d2f 32%, #fff2c9 48%, #ffb44f 62%, #ff9d2f 100%); background-size: 260% 100%; background-position: 115% 0; background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 0 7px rgba(255,157,47,.25)); -webkit-text-fill-color: transparent; animation: brand-pro-shine 3.2s ease-in-out infinite; }
.site-header .brand-copy small b { display: inline-block; padding-bottom: 4px; color: #ff9aaa; background: linear-gradient(100deg, #ff91a3 0%, #ffb0a4 25%, #fff0cf 44%, #c8a6ff 61%, #ff91a3 84%, #ff91a3 100%); background-size: 300% 100%; background-position: 115% 0; background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 20px rgba(239,137,190,.24); -webkit-text-fill-color: transparent; animation: brand-leader-shine 4s cubic-bezier(.4,0,.2,1) infinite; }
.site-header .brand-copy small b::after { position: absolute; right: 1px; bottom: 0; left: 1px; height: 2px; content: ""; background: linear-gradient(90deg, transparent, #ff9aaa 24%, #ffe0b5 52%, #bfa0ff 78%, transparent); border-radius: 2px; box-shadow: 0 0 10px rgba(230,145,205,.48); transform-origin: center; animation: brand-leader-line 4s ease-in-out infinite; }
.desktop-nav { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; min-width: 0; gap: clamp(9px, .8vw, 17px); margin-left: auto; margin-right: clamp(18px, 1.45vw, 28px); padding-left: clamp(14px, 1vw, 20px); }
.desktop-nav a { position: relative; flex: 0 0 auto; padding: 10px 0; color: currentColor; font-size: 16px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; opacity: .88; transition: opacity .2s, color .2s; }
.desktop-nav a:hover { opacity: 1; }
.desktop-nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; content: ""; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .2s; }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; flex: 0 0 214px; align-items: center; justify-content: flex-end; gap: 26px; }
.text-button { padding: 9px 0; color: currentColor; background: none; font-size: 15px; font-weight: 700; opacity: .92; }
.primary-button, .ghost-button, .light-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 22px; color: var(--accent-ink); background: var(--orange); border: 1px solid var(--orange); border-radius: var(--radius); font-weight: 700; font-size: 13px; transition: transform .2s, background .2s, color .2s, box-shadow .2s; }
.primary-button:hover, .light-button:hover { background: #ffb957; box-shadow: 0 10px 24px rgba(255, 157, 47, .18); transform: translateY(-2px); }
.primary-button.compact { width: 124px; min-height: 46px; padding: 0 20px; flex: 0 0 124px; font-size: 13px; }
.primary-button.large, .ghost-button.large { min-height: 56px; padding: 0 25px; font-size: 14px; }
.primary-button svg, .ghost-button svg, .light-button svg, .primary-button [data-lucide], .ghost-button [data-lucide], .light-button [data-lucide] { width: 17px; height: 17px; flex: 0 0 17px; }
.ghost-button { color: var(--on-dark); background: transparent; border-color: rgba(255, 253, 248, .4); }
.ghost-button:hover { background: var(--on-dark); color: var(--accent-ink); border-color: var(--on-dark); transform: translateY(-2px); }
.ghost-button.dark { color: var(--ink); border-color: var(--line); }
.light-button { color: var(--accent-ink); background: var(--on-dark); border-color: var(--on-dark); }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; color: currentColor; background: transparent; border: 1px solid var(--line); border-radius: 50%; }
.icon-button svg, .icon-button [data-lucide] { width: 18px; height: 18px; flex: 0 0 18px; }
.menu-toggle, .mobile-menu { display: none; }

.hero { position: relative; min-height: 780px; height: min(100vh, 960px); overflow: hidden; color: var(--on-dark); background: #10110f; }
.hero-media, .hero-scrim { position: absolute; inset: 0; }
.hero-media { right: 0; left: auto; width: 74%; overflow: hidden; opacity: .7; background: #10110f; contain: layout paint; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; opacity: 0; filter: saturate(.78) contrast(1.12) brightness(.82); transform: none; transition: opacity .85s ease; will-change: opacity; }
.hero-media img.is-active { z-index: 1; opacity: 1; }
.hero-scrim { background: linear-gradient(90deg, #10110f 4%, rgba(16, 17, 15, .94) 30%, rgba(16, 17, 15, .44) 62%, rgba(16, 17, 15, .4) 100%), linear-gradient(0deg, rgba(16, 17, 15, .75), transparent 37%); }
.hero::after { position: absolute; inset: 100px 5.5vw 0; z-index: 1; content: ""; border-left: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: min(680px, 54vw); height: 100%; padding: 130px 0 90px 10vw; }
.eyebrow, .section-index { display: inline-flex; align-items: center; gap: 10px; color: var(--orange); font-family: "DM Sans", sans-serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { font-size: clamp(14px, 1vw, 16px); letter-spacing: .1em; white-space: nowrap; }
.section-index { font-size: clamp(15px, 1vw, 16px); line-height: 1.5; font-weight: 800; }
.eyebrow span { display: inline-block; width: 30px; height: 1px; background: var(--orange); }
.hero h1 { position: relative; margin: 24px 0 28px; max-width: 720px; padding-bottom: 18px; font-size: clamp(38px, 4.5vw, 68px); line-height: 1.16; letter-spacing: -.045em; font-weight: 800; isolation: isolate; }
.hero-title-line { display: block; width: max-content; max-width: 100%; color: transparent; background: linear-gradient(108deg, #fffdf8 0%, #fffdf8 28%, #ff8f1f 38%, #ffd38c 45%, #fffdf8 50%, #ffb247 57%, #ff7b19 65%, #fffdf8 75%, #fffdf8 100%); background-size: 360% 100%; background-position: 120% 0; background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 5px 18px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(255,139,31,.14)); -webkit-text-fill-color: transparent; animation: hero-title-shine 3.8s cubic-bezier(.4, 0, .2, 1) infinite; }
.hero-title-line:nth-child(2) { animation-delay: .18s; }
.hero h1::after { position: absolute; bottom: 0; left: 0; width: 132px; height: 5px; content: ""; background: linear-gradient(90deg, var(--orange-hot), #ffd28d 54%, var(--orange)); border-radius: 5px; box-shadow: 0 0 18px rgba(255,157,47,.72), 0 0 42px rgba(255,107,34,.3); transform-origin: left center; animation: hero-title-line-glow 3.8s ease-in-out infinite; }
.hero-content p { max-width: 580px; margin: 0; color: rgba(255, 253, 248, .72); font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 35px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 52px; color: rgba(255, 253, 248, .55); font-size: 11px; }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { width: 14px; height: 14px; color: var(--green); }
.hero-signal { position: absolute; right: 5.5vw; bottom: 28px; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(870px, 59vw); border-top: 1px solid rgba(255,255,255,.25); }
.hero-signal div { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 18px 17px 0 0; border-right: 1px solid rgba(255,255,255,.16); }
.hero-signal div + div { padding-left: 17px; }
.hero-signal div:last-child { border-right: 0; }
.hero-signal strong { color: var(--orange); font: 700 15px "DM Sans", sans-serif; letter-spacing: .1em; }
.hero-signal span { color: rgba(255,255,255,.94); font-size: 16px; line-height: 1.35; font-weight: 700; white-space: nowrap; }
.hero-signal small { color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.45; white-space: nowrap; }
.trust-strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: calc(100% - clamp(48px, 5vw, 96px)); max-width: 1760px; margin: 0 auto; padding: 26px clamp(32px, 4vw, 72px); color: var(--on-dark); background: #171b18; border: 1px solid rgba(255,255,255,.13); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: 0 22px 45px rgba(0,0,0,.18); }
.trust-strip::before { position: absolute; top: 0; right: 4vw; left: 4vw; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(255,157,47,.6), transparent); }
.trust-strip div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 88px; padding: 0 22px; border-right: 1px solid rgba(255,255,255,.13); text-align: center; }
.trust-strip div:first-child { padding-left: 18px; }
.trust-strip div:last-child { border: 0; }
.trust-strip strong { flex: 0 0 auto; color: var(--orange); font: 800 33px "DM Sans", sans-serif; letter-spacing: 0; line-height: 1.15; white-space: nowrap; }
.trust-strip span { color: rgba(255,255,255,.74); font-size: 15px; font-weight: 600; line-height: 1.5; text-align: center; white-space: nowrap; }

main > section:not(.hero) { padding: 130px 10vw; }
/* The overview strip is a compact band, so it must not inherit the
   generous spacing used by the content sections below it. */
main > section.trust-strip {
  min-height: 140px;
  padding: 26px clamp(32px, 4vw, 72px);
}
section[id] { scroll-margin-top: 82px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 63px; }
.section-heading h2, .faq-heading h2, .final-cta h2, .security-copy h2 { margin: 17px 0 0; max-width: 900px; font-size: clamp(34px, 4vw, 58px); line-height: 1.18; letter-spacing: -.045em; font-weight: 800; }
.section-heading > p { width: min(430px, 34%); margin: 0 0 5px; color: var(--muted); font-size: 16px; line-height: 1.9; }
.compact-heading { margin-bottom: 42px; }

/* Keep desktop headings readable and prevent isolated one-character lines. */
@media (min-width: 821px) {
  .section-heading > div { min-width: 0; flex: 1 1 auto; }
  .section-heading h2 { max-width: none; font-size: clamp(30px, 3vw, 46px); white-space: nowrap; letter-spacing: -.03em; }
  .ai-section .section-heading { gap: 34px; }
  .ai-section .section-heading h2 { font-size: clamp(28px, 2.2vw, 34px); }
  .ai-section .section-heading > p { width: min(390px, 31%); }
  .journey-section .section-heading h2 { font-size: clamp(32px, 3.25vw, 50px); }
  .faq-heading h2 { max-width: none; font-size: clamp(32px, 3.1vw, 46px); white-space: nowrap; letter-spacing: -.03em; }
  .theme-feature-copy h2, .updates-heading h2, .matrix-intro h2, .capabilities-heading h2, .plans-heading h2 { text-wrap: balance; }
}

.ai-section { color: var(--on-dark); background: var(--ink-soft); }
.inverse-heading > p { color: rgba(255,253,248,.58); }
.ai-workspace { display: grid; grid-template-columns: 205px 1fr; min-height: 552px; overflow: hidden; background: #20231e; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 32px 70px rgba(0,0,0,.24); }
.ai-history { padding: 21px 15px; border-right: 1px solid rgba(255,255,255,.08); background: #181b17; }
.ai-assistant { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; }
.ai-assistant img { width: 27px; height: 27px; object-fit: contain; }
.ai-assistant div { display: flex; flex-direction: column; line-height: 1.35; }
.ai-assistant strong { font-size: 12px; }
.ai-assistant span { color: rgba(255,255,255,.42); font-size: 10px; }
.ai-history > button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px 10px; color: var(--ink); background: var(--orange); font-size: 11px; font-weight: 700; text-align: left; }
.ai-history > button svg { width: 14px; }
.history-label { display: block; margin: 29px 7px 10px; color: rgba(255,255,255,.32); font: 10px "DM Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ai-history ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ai-history li { display: flex; align-items: center; gap: 7px; padding: 9px 7px; color: rgba(255,255,255,.49); font-size: 11px; line-height: 1.4; }
.ai-history li.active { color: var(--on-dark); background: rgba(255,255,255,.08); }
.ai-history li svg { width: 13px; flex: 0 0 auto; }
.ai-chat { display: flex; flex-direction: column; padding: 25px 42px 27px; background: radial-gradient(circle at 88% 12%, rgba(165,199,120,.1), transparent 31%), #20231e; }
.ai-chat-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; color: rgba(255,255,255,.46); border-bottom: 1px solid rgba(255,255,255,.1); font-size: 11px; }
.ai-chat-top > div, .ai-chat-top > span { display: inline-flex; align-items: center; gap: 7px; }
.live-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(165,199,120,.12); }
.ai-chat-top svg { width: 13px; color: var(--green); }
.question-bubble { align-self: flex-end; max-width: 72%; margin: 31px 0 18px; padding: 10px 14px; color: #181c16; background: var(--green); border-radius: 2px; font-size: 12px; }
.answer-panel { max-width: 680px; padding: 21px 23px 18px; color: rgba(255,255,255,.72); background: #2a2e28; border: 1px solid rgba(255,255,255,.12); }
.answer-title { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.ai-mark { display: grid; place-items: center; width: 29px; height: 29px; color: var(--ink); background: var(--orange); border-radius: 50%; }
.ai-mark svg { width: 15px; }
.answer-title div { display: flex; flex-direction: column; line-height: 1.4; }
.answer-title strong { color: var(--on-dark); font-size: 13px; }
.answer-title span { color: rgba(255,255,255,.4); font-size: 10px; }
.answer-panel p { margin: 0; font-size: 12px; line-height: 1.9; }
.answer-panel p b { color: var(--green); }
.ai-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 19px 0 16px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.ai-metrics div { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 11px 0; border-right: 1px solid rgba(255,255,255,.1); }
.ai-metrics div + div { padding-left: 13px; }
.ai-metrics div:last-child { border: 0; }
.ai-metrics span, .ai-metrics small { color: rgba(255,255,255,.4); font-size: 10px; }
.ai-metrics strong { color: var(--green); font: 700 20px "DM Sans", sans-serif; }
.ai-metrics .warn strong { color: var(--orange); }
.mini-chart { display: flex; align-items: end; gap: 9px; height: 87px; padding: 5px 0 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.mini-chart div { position: relative; flex: 1; height: var(--h); min-height: 10px; background: var(--green); opacity: .72; }
.mini-chart div.down { background: var(--orange); }
.mini-chart span { position: absolute; bottom: -19px; width: 100%; color: rgba(255,255,255,.35); font-size: 9px; text-align: center; }
.recommendation { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.7; }
.recommendation svg { width: 15px; flex: 0 0 auto; color: var(--orange); }
.recommendation strong { color: var(--orange); }
.ai-input { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 12px 13px; color: rgba(255,255,255,.28); background: #181b17; border: 1px solid rgba(255,255,255,.11); font-size: 11px; }
.ai-input button { display: grid; place-items: center; width: 25px; height: 25px; color: var(--ink); background: var(--orange); border-radius: 1px; }
.ai-input button svg { width: 14px; }
.ai-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: none; margin: 40px 0 0; }
.ai-capabilities article { display: flex; flex-direction: column; align-items: center; min-height: 235px; padding: 30px 24px 27px; background: #181b17; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; text-align: center; transition: transform .2s, border-color .2s, background .2s; }
.ai-capabilities article:hover { background: #20241e; border-color: rgba(255,157,47,.42); transform: translateY(-4px); }
.ai-capabilities svg { width: 42px; height: 42px; margin-bottom: 20px; padding: 10px; color: var(--ink); background: var(--orange); border-radius: 50%; }
.ai-capabilities strong { display: block; color: var(--on-dark); font-size: 18px; line-height: 1.45; }
.ai-capabilities p { max-width: 235px; margin: 12px auto 0; color: rgba(255,255,255,.64); font-size: 15px; line-height: 1.85; }

.multi-site-section { position: relative; overflow: hidden; color: var(--on-dark); background: #151815; }
.multi-site-section::before { position: absolute; inset: 0; content: ""; background: linear-gradient(120deg, rgba(52,91,105,.17), transparent 38%), linear-gradient(300deg, rgba(165,199,120,.07), transparent 34%); pointer-events: none; }
.multi-site-heading { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto 58px; text-align: center; }
.multi-site-heading h2 { margin: 18px auto 22px; font-size: clamp(36px, 3.35vw, 50px); line-height: 1.2; font-weight: 800; letter-spacing: -.025em; }
.multi-site-heading p { max-width: 820px; margin: 0 auto; color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.9; }
.site-type-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; width: min(1320px,100%); margin: 0 auto; }
.site-type-card { position: relative; min-width: 0; min-height: 390px; padding: 34px 34px 31px; background: #202420; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; box-shadow: 0 20px 45px rgba(0,0,0,.16); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.site-type-card:hover { background: #252a25; border-color: rgba(255,157,47,.34); transform: translateY(-4px); }
.site-type-top { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.42); }
.site-type-top > span { font: 800 13px "DM Sans", sans-serif; letter-spacing: .1em; }
.site-type-top > svg { width: 44px; height: 44px; padding: 10px; color: var(--orange); background: rgba(255,157,47,.1); border: 1px solid rgba(255,157,47,.24); border-radius: 50%; }
.site-type-top em { margin-left: auto; padding: 6px 10px; color: rgba(255,255,255,.62); background: rgba(255,255,255,.06); border-radius: 999px; font-size: 12px; font-style: normal; }
.site-type-card h3 { margin: 27px 0 8px; font-size: 34px; line-height: 1.3; }
.site-type-card > strong { display: block; color: rgba(255,255,255,.9); font-size: 18px; line-height: 1.55; }
.site-type-card > p { margin: 15px 0 0; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.9; }
.site-type-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.site-type-tags span { padding: 8px 12px; color: rgba(255,255,255,.76); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-size: 13px; }
.navigation-type .site-type-top > svg { color: #9fcfdb; background: rgba(82,151,173,.11); border-color: rgba(114,185,207,.25); }
.sync-type { grid-column: 1 / -1; min-height: 0; background: #1d2622; border-color: rgba(165,199,120,.25); }
.sync-type .site-type-top > svg { color: #dce7d1; background: rgba(165,199,120,.11); border-color: rgba(165,199,120,.25); }
.sync-site-row { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; gap: 12px; align-items: center; margin-top: 28px; }
.sync-site-row > span { display: flex; flex-direction: column; align-items: center; padding: 18px 14px; background: #252c27; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; text-align: center; }
.sync-site-row b { font-size: 18px; }
.sync-site-row small { margin-top: 4px; color: rgba(255,255,255,.48); font-size: 13px; }
.sync-site-row > svg { width: 23px; height: 23px; margin: auto; color: var(--green); animation: sync-pulse 2.8s ease-in-out infinite; }
.sync-shared-line { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 15px; align-items: center; margin-top: 14px; padding: 19px 22px; overflow: hidden; background: rgba(165,199,120,.08); border: 1px solid rgba(165,199,120,.23); border-radius: 12px; }
.sync-shared-line::before { position: absolute; top: 0; left: -30%; width: 30%; height: 2px; content: ""; background: linear-gradient(90deg, transparent, #a5c778, transparent); animation: sync-flow 4.5s linear infinite; }
.sync-shared-line > svg { width: 42px; height: 42px; padding: 9px; color: #10110f; background: var(--green); border-radius: 50%; }
.sync-shared-line > span { display: flex; flex-direction: column; min-width: 0; }
.sync-shared-line b { font-size: 18px; }
.sync-shared-line small { margin-top: 3px; color: rgba(255,255,255,.55); font-size: 14px; }
.sync-shared-line > em { display: inline-flex; align-items: center; gap: 8px; color: #dce7d1; font-size: 14px; font-style: normal; font-weight: 700; white-space: nowrap; }
.sync-shared-line > em svg { width: 17px; animation: sync-spin 8s linear infinite; }
.sync-independent-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 14px; background: #181b18; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; }
.sync-independent-grid > span { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 3px 10px; min-width: 0; padding: 20px; border-left: 1px solid rgba(255,255,255,.09); }
.sync-independent-grid > span:first-child { border-left: 0; }
.sync-independent-grid svg { grid-row: 1 / 3; align-self: center; width: 32px; height: 32px; padding: 7px; color: #9fcfdb; background: rgba(82,151,173,.1); border-radius: 50%; }
.sync-independent-grid b { font-size: 15px; white-space: nowrap; }
.sync-independent-grid small { color: rgba(255,255,255,.46); font-size: 12px; line-height: 1.45; }
.multi-site-summary { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: center; gap: 22px; margin: 78px auto 0; text-align: center; }
.multi-site-summary strong { color: var(--orange); font-size: 24px; white-space: nowrap; }
.multi-site-summary span { color: rgba(255,255,255,.7); font-size: 17px; }

@media (min-width: 821px) {
  main > section#multi-site.multi-site-section { padding-bottom: 70px; }
}

.product-section { background: var(--paper); }
.product-showcase { display: grid; grid-template-columns: minmax(290px, .68fr) minmax(0, 2fr); gap: 46px; align-items: stretch; }
.product-tabs { display: grid; align-content: center; gap: 8px; }
.product-tabs button { position: relative; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; gap: 5px 13px; min-height: 82px; padding: 18px 20px; color: var(--muted); background: none; border: 1px solid transparent; text-align: left; }
.product-tabs button::before { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; content: ""; background: transparent; }
.product-tabs button.active { color: var(--ink); background: var(--white); border-color: var(--line); }
.product-tabs button.active::before { background: var(--orange); }
.product-tabs span { grid-row: 1 / span 2; color: var(--orange-hot); font: 700 13px "DM Sans", sans-serif; }
.product-tabs strong { font-size: 18px; line-height: 1.3; }
.product-tabs small { color: var(--muted); font-size: 13px; line-height: 1.65; }
.screen-stage { position: relative; min-height: 600px; margin: 0; overflow: hidden; background: #d9dde0; border: 1px solid rgba(16,17,15,.13); box-shadow: 20px 25px 50px rgba(16,17,15,.12); }
.screen-toolbar { position: absolute; top: 0; right: 0; left: 0; z-index: 2; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 13px; background: #272a2c; }
.screen-toolbar span { width: 6px; height: 6px; background: #a9ada8; border-radius: 50%; }
.screen-toolbar span:first-child { background: var(--orange); }
.screen-toolbar em { margin-left: 11px; color: rgba(255,255,255,.46); font: 9px "DM Sans", sans-serif; font-style: normal; letter-spacing: .1em; }
.screen-stage img { width: 100%; height: 100%; min-height: 600px; object-fit: cover; object-position: top left; padding-top: 28px; background: #fff; transition: opacity .2s; }
.screen-stage figcaption { position: absolute; right: 22px; bottom: 19px; display: flex; align-items: center; gap: 13px; padding: 8px 11px; color: var(--ink); background: rgba(255,253,248,.92); font-size: 11px; }
.screen-stage figcaption span { color: var(--orange-hot); font: 700 9px "DM Sans", sans-serif; letter-spacing: .1em; }

.journey-section { background: var(--paper-deep); }
.journey-section .section-heading { display: block; max-width: 1040px; margin-right: auto; margin-left: auto; text-align: center; }
.journey-section .section-heading h2 { margin-right: auto; margin-left: auto; }
.journey-section .section-heading > p { width: auto; max-width: 650px; margin: 20px auto 0; }
.journey-track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; max-width: 1280px; margin: 0 auto; }
.journey-track::before { top: 48px; right: 8%; left: 8%; height: 1px; background: rgba(255,157,47,.28); }
.journey-track article { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 310px; padding: 26px 20px 24px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 12px; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
.journey-track article::before { position: absolute; top: 0; right: 22px; left: 22px; height: 3px; content: ""; background: var(--orange); border-radius: 0 0 3px 3px; }
.journey-track article:hover { border-color: rgba(255,157,47,.52); box-shadow: 0 16px 28px rgba(16,17,15,.12); transform: translateY(-4px); }
.journey-track article > span { display: block; margin-bottom: 19px; color: var(--orange-hot); font: 700 12px "DM Sans", sans-serif; letter-spacing: .08em; }
.journey-track article > svg { width: 42px; height: 42px; margin-bottom: 20px; padding: 10px; color: var(--ink); background: var(--orange); border-radius: 50%; }
.journey-track strong { display: block; color: var(--ink); font-size: 20px; line-height: 1.35; }
.journey-track p { max-width: 190px; margin: 12px auto 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

@media (min-width: 821px) {
  main > section.product-section {
    padding-bottom: 58px;
  }
  main > section#scenes.journey-section {
    padding: 64px clamp(32px, 4vw, 70px) 40px;
  }
  .journey-section .section-heading {
    margin-bottom: 38px;
  }
  .journey-track {
    width: 100%;
    max-width: none;
    gap: clamp(14px, 1.2vw, 22px);
  }
  main > section#workspace-themes.theme-feature-section {
    padding-top: 50px;
  }
}

.theme-feature-section { display: grid; grid-template-columns: .78fr 1.45fr; gap: 7vw; align-items: center; background: var(--paper); }
.theme-feature-copy h2 { margin: 17px 0 20px; max-width: 620px; font-size: clamp(34px, 3.7vw, 54px); line-height: 1.2; letter-spacing: -.045em; }
.theme-feature-copy > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.theme-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 22px; margin: 31px 0 34px; }
.theme-benefits span { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.theme-benefits svg { width: 19px; height: 19px; color: var(--orange-hot); flex: 0 0 auto; }
.outline-button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 19px; color: var(--ink); background: transparent; border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.outline-button:hover { color: var(--on-dark); background: #10110f; }
.outline-button svg { width: 15px; }
.theme-compare { position: relative; aspect-ratio: 1.42 / 1; min-width: 0; margin: 0; overflow: hidden; background: #eef1f6; border: 1px solid var(--line); box-shadow: 24px 27px 55px rgba(16,17,15,.15); }
.theme-compare > img, .theme-shot-dark, .theme-shot-dark img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.theme-shot-dark { position: absolute; inset: 0 0 0 50%; width: 50%; overflow: hidden; transition: inset .45s ease, width .45s ease; }
.theme-shot-dark img { width: 200%; max-width: none; }
.theme-compare.show-dark .theme-shot-dark { left: 0; width: 100%; }
.theme-compare.show-dark .theme-shot-dark img { width: 100%; }
.compare-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--orange); transition: opacity .2s; }
.compare-divider span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 33px; height: 33px; color: var(--ink); background: var(--orange); border-radius: 50%; transform: translate(-50%, -50%); }
.compare-divider svg { width: 15px; }
.theme-compare.show-dark .compare-divider { opacity: 0; }
.theme-compare figcaption { position: absolute; right: 12px; bottom: 11px; left: 12px; display: flex; justify-content: space-between; pointer-events: none; }
.theme-compare figcaption span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: #10110f; background: rgba(255,253,248,.9); font: 700 8px "DM Sans", sans-serif; letter-spacing: .12em; }
.theme-compare figcaption svg { width: 11px; }

.updates-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9vw; background: var(--white); }
.updates-heading h2, .contact-copy h2 { margin: 17px 0 20px; max-width: 620px; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.2; letter-spacing: -.035em; }
.updates-heading p { max-width: 430px; margin: 0 0 30px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.release-list { border-top: 1px solid var(--line); }
.release-list article { display: grid; grid-template-columns: 110px 1fr auto; gap: 32px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }
.release-list time { padding: 10px 0 0 16px; color: var(--orange-hot); font: 700 14px "DM Sans", sans-serif; }
.release-list strong { display: block; font-size: 22px; }
.release-list p { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.release-list article > span { padding: 4px 9px; color: var(--ink); background: var(--orange); font-size: 12px; font-weight: 700; }

.matrix-section { display: grid; grid-template-columns: minmax(220px, .78fr) 1.7fr; gap: 10vw; background: var(--white); }
.matrix-intro h2 { margin: 17px 0 17px; font-size: clamp(32px, 3.4vw, 53px); line-height: 1.16; letter-spacing: -.06em; }
.matrix-intro > p { max-width: 250px; color: var(--muted); font-size: 13px; }
.matrix-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 32px; }
.matrix-filters button { padding: 7px 11px; color: var(--muted); background: transparent; border: 1px solid var(--line); font-size: 11px; }
.matrix-filters button.active, .matrix-filters button:hover { color: var(--ink); background: var(--orange); border-color: var(--orange); }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.capability-grid article { position: relative; display: flex; align-items: flex-start; gap: 18px; min-height: 205px; padding: 30px 27px; background: var(--white); transition: background .2s, opacity .2s; }
.capability-grid article:hover { background: var(--paper); }
.capability-grid article.is-hidden { display: none; }
.capability-grid svg { width: 26px; height: 26px; color: var(--orange-hot); flex: 0 0 auto; }
.capability-grid strong { display: block; font-size: 19px; }
.capability-grid p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.capability-grid article > span { position: absolute; right: 15px; bottom: 13px; color: rgba(16,17,15,.27); font: 10px "DM Sans", sans-serif; }

.security-section { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .96fr); gap: clamp(54px, 7vw, 112px); overflow: hidden; color: var(--on-dark); background: #10110f; }
.security-section::before { position: absolute; top: 0; right: 0; width: 42%; height: 100%; content: ""; background: linear-gradient(135deg, transparent 0 38%, rgba(255,157,47,.025) 38% 62%, transparent 62%); pointer-events: none; }
.security-copy { position: relative; z-index: 1; }
.section-index.light { color: var(--green); }
.security-copy h2 { max-width: 720px; color: var(--on-dark); font-size: clamp(40px, 4.25vw, 66px); line-height: 1.2; letter-spacing: 0; }
.security-copy h2 span { display: block; white-space: nowrap; }
.security-copy > p { max-width: 680px; margin: 28px 0 0; color: rgba(255,255,255,.76); font-size: 18px; line-height: 1.9; }
.privacy-statement { display: flex; align-items: flex-start; gap: 17px; max-width: 650px; margin: 30px 0 34px; padding: 23px 25px; background: rgba(255,157,47,.1); border: 1px solid rgba(255,157,47,.38); border-radius: 8px; }
.privacy-statement > svg { width: 30px; height: 30px; color: var(--orange); flex: 0 0 auto; }
.privacy-statement strong { display: block; color: var(--orange); font-size: 23px; line-height: 1.4; }
.privacy-statement span { display: block; margin-top: 7px; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.75; }
.security-architecture { position: relative; z-index: 1; align-self: center; padding: 28px; overflow: hidden; background: #191c18; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; box-shadow: 0 28px 70px rgba(0,0,0,.25); }
.security-architecture::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: var(--orange); }
.security-architecture-head { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.12); }
.server-mark { display: grid; place-items: center; width: 54px; height: 54px; color: #10110f; background: var(--orange); border-radius: 8px; }
.server-mark svg { width: 27px; height: 27px; }
.security-architecture-head span { display: block; color: rgba(255,255,255,.58); font-size: 14px; }
.security-architecture-head strong { display: block; margin-top: 5px; color: #fff; font-size: 21px; line-height: 1.4; }
.security-architecture-head em { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: var(--orange); background: rgba(255,157,47,.08); border: 1px solid rgba(255,157,47,.25); border-radius: 4px; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.security-architecture-head em svg { width: 15px; height: 15px; }
.private-data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 22px; overflow: hidden; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.11); border-radius: 6px; }
.private-data-grid > div { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; min-height: 91px; padding: 19px 17px; background: #22251f; }
.private-data-grid svg { grid-row: 1 / span 2; align-self: center; width: 25px; height: 25px; color: var(--orange); }
.private-data-grid span { color: #fff; font-size: 17px; font-weight: 700; }
.private-data-grid small { margin-top: 4px; color: rgba(255,255,255,.5); font-size: 13px; }
.data-ownership { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 18px; margin: 18px 0; padding: 18px 20px; background: rgba(255,157,47,.1); border: 1px solid rgba(255,157,47,.3); border-radius: 6px; }
.data-ownership span { grid-row: 1 / span 2; padding-right: 18px; color: var(--orange); border-right: 1px solid rgba(255,157,47,.3); font-size: 14px; font-weight: 700; }
.data-ownership strong { color: #fff; font-size: 22px; }
.data-ownership small { color: rgba(255,255,255,.58); font-size: 13px; }
.service-boundary { display: flex; align-items: flex-start; gap: 15px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.service-boundary > svg { width: 27px; height: 27px; color: var(--green); flex: 0 0 auto; }
.service-boundary strong { display: block; color: #fff; font-size: 18px; }
.service-boundary p { margin: 7px 0 0; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.75; }
.security-points { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; margin-top: 28px; color: rgba(255,255,255,.9); font-size: 20px; font-weight: 700; }
.security-points span { display: inline-flex; align-items: center; gap: 13px; min-height: 88px; padding: 28px 0 8px; border-top: 1px solid rgba(255,255,255,.18); white-space: nowrap; }
.security-points svg { width: 22px; height: 22px; color: var(--orange); flex: 0 0 auto; }

@media (min-width: 821px) {
  main > section.ai-section {
    padding-bottom: 40px;
  }
  main > section.security-section {
    padding-bottom: 24px;
  }
  .security-points {
    margin-bottom: -24px;
  }
  .security-points span {
    justify-content: center;
    min-height: 112px;
    padding: 0;
  }
}

.delivery-section { background: var(--paper); }
@media (min-width: 821px) {
  main > section.delivery-section {
    padding-bottom: 34px;
  }
}
.delivery-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.delivery-steps li { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 245px; padding: 42px 24px 0; border-right: 1px solid var(--line); text-align: center; }
.delivery-steps li + li { padding-left: 24px; }
.delivery-steps li:last-child { border: 0; }
.delivery-steps li > span { display: block; margin-bottom: 34px; color: var(--orange-hot); font: 800 18px "DM Sans", sans-serif; letter-spacing: .04em; }
.delivery-steps li > div { width: 100%; }
.delivery-steps strong { display: block; font-size: 22px; line-height: 1.35; white-space: nowrap; }
.delivery-steps p { margin: 11px auto 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.delivery-steps small { position: absolute; right: 0; bottom: 0; left: 0; color: rgba(16,17,15,.33); font: 10px "DM Sans", sans-serif; letter-spacing: .12em; text-align: center; }

.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12vw; background: var(--white); }
.faq-heading { min-width: 0; }
.faq-brief { max-width: 430px; margin-top: 42px; }
.faq-brief > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.faq-brief-list { display: grid; gap: 18px; margin-top: 32px; }
.faq-brief-list > span { display: grid; grid-template-columns: 25px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding-top: 17px; border-top: 1px solid var(--line); }
.faq-brief-list svg { grid-row: 1 / span 2; width: 21px; height: 21px; color: var(--orange-hot); }
.faq-brief-list b { color: var(--ink); font-size: 16px; line-height: 1.45; }
.faq-brief-list small { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 0; color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.55; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 21px; height: 21px; color: var(--orange-hot); flex: 0 0 auto; transition: transform .2s; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list p { max-width: 760px; margin: -3px 48px 29px 0; color: var(--muted); font-size: 16px; line-height: 1.9; }

@media (min-width: 1101px) {
  .faq-section { grid-template-columns: minmax(440px, 1fr) minmax(470px, 1fr); gap: 14px; }
}

@media (min-width: 1000px) {
  .faq-list summary { white-space: nowrap; gap: 6px; }
}

.contact-section { display: block; color: #fffdf8; background: #151714; text-align: center; }
.contact-copy { display: flex; flex-direction: column; align-items: center; max-width: 920px; margin: 0 auto 58px; }
.contact-copy h2 { margin: 17px 0 18px; color: #fffdf8; font-size: clamp(38px, 4vw, 58px); line-height: 1.18; }
.contact-copy h2, .contact-copy p { white-space: nowrap; }
.contact-copy p { max-width: none; margin: 0; color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.9; }
.contact-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1240px; margin: 0 auto; overflow: hidden; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; }
.contact-methods article { display: flex; flex-direction: column; align-items: center; min-height: 590px; padding: 42px 34px 36px; border-right: 1px solid rgba(255,255,255,.14); text-align: center; }
.contact-methods article:last-child { border: 0; }
.contact-method-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; color: var(--orange); background: rgba(255,157,47,.08); border: 1px solid rgba(255,157,47,.28); border-radius: 50%; }
.contact-method-icon svg { width: 27px; height: 27px; }
.contact-methods > article > span { color: rgba(255,255,255,.64); font-size: 18px; }
.contact-methods > article > strong { margin: 10px 0 24px; color: #fffdf8; font-size: 28px; word-break: break-word; }
.contact-methods > article > p { margin: 28px 0; color: rgba(255,255,255,.58); font-size: 17px; line-height: 1.9; }
.contact-methods button, .contact-methods a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 0 0 6px; color: var(--orange); background: none; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 700; }
.contact-methods button svg, .contact-methods a svg { width: 16px; height: 16px; }
.contact-qq-line { display: inline-flex; align-items: center; justify-content: center; gap: 11px; margin: 10px 0 24px; }
.contact-qq-line strong { color: #fffdf8; font: 800 29px "DM Sans", sans-serif; letter-spacing: 0; white-space: nowrap; }
.contact-methods .contact-copy-button { min-height: 31px; margin: 0; padding: 0 10px; color: #10110f; background: var(--orange); border: 0; border-radius: 4px; font-size: 13px; }
.contact-methods .contact-copy-button:hover { background: #ffb957; }
.contact-methods .contact-copy-button svg { width: 14px; height: 14px; }
.contact-site-card { justify-content: flex-start; }
.contact-site-card > strong { margin-top: 12px !important; font: 700 clamp(23px, 2.1vw, 31px) "DM Sans", sans-serif; }
.qr-display { width: max-content; margin: 0 auto 23px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.qr-display::before, .qr-display::after { display: none; }
.qr-label { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; color: var(--orange) !important; font-size: 12px !important; font-weight: 700; }
.qr-label svg { width: 14px; height: 14px; }
.qr-frame { position: relative; padding: 7px; overflow: hidden; background: #fff; border: 2px solid rgba(255,255,255,.72); border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.2), inset 0 0 0 1px rgba(16,17,15,.12); }
.qr-frame img { width: 190px; max-width: none; height: 190px; margin: 0 auto; object-fit: contain; background: #fff; border-radius: 7px; }
.qr-display small { display: block; margin-top: 10px; color: rgba(255,255,255,.58); font-size: 13px; }
.qr-qq .qr-frame { background: #eef7ff; }
.qr-wechat .qr-frame { background: #fff; }

.final-cta { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; overflow: hidden; color: #fffdf8; background: #111512; border-top: 1px solid rgba(255,255,255,.12); text-align: center; }
.final-cta::before { position: absolute; top: 0; bottom: 0; left: -24%; z-index: -1; width: 22%; content: ""; background: linear-gradient(90deg, transparent, rgba(165,199,120,.045), transparent); transform: skewX(-16deg); pointer-events: none; animation: cta-scan 11s ease-in-out infinite; }
.final-cta > img { position: relative; z-index: 2; width: 52px; height: 52px; margin-bottom: 23px; filter: drop-shadow(0 0 0 rgba(255,157,47,0)); animation: cta-logo-float 4.2s ease-in-out infinite; }
.final-cta .section-index { position: relative; z-index: 2; color: var(--orange); animation: cta-label-breathe 3.8s ease-in-out infinite; }
.final-cta h2 { position: relative; z-index: 1; margin-top: 18px; color: #fffdf8; font-size: clamp(43px, 5vw, 74px); letter-spacing: 0; }
.final-cta h2 span { display: block; color: transparent; background: linear-gradient(105deg, #fffdf8 0%, #fffdf8 40%, #ffc56f 49%, #fffdf8 58%, #fffdf8 100%); background-size: 260% 100%; background-clip: text; -webkit-background-clip: text; white-space: nowrap; animation: cta-title-sheen 7.5s ease-in-out infinite; }
.final-cta h2 span + span { animation-delay: .35s; }
.final-cta p { position: relative; z-index: 1; max-width: 620px; margin: 23px 0 31px; color: rgba(255,255,255,.66); font-size: 16px; }
.final-cta .primary-button { position: relative; z-index: 2; overflow: hidden; color: #f6f4ed; background: #202720; border-color: rgba(255,255,255,.25); animation: cta-button-breathe 4.5s ease-in-out infinite; }
.final-cta .primary-button::before { position: absolute; top: 0; bottom: 0; left: -60%; width: 42%; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transform: skewX(-18deg); animation: cta-button-sheen 5.8s ease-in-out infinite; }
.final-cta .primary-button:hover { color: #111512; background: #a5c778; border-color: #a5c778; animation-play-state: paused; }
.cta-orbit { position: absolute; top: 50%; left: 50%; z-index: -1; width: min(830px, 85vw); height: min(830px, 85vw); border: 1px solid rgba(165,199,120,.18); border-radius: 50%; box-shadow: inset 0 0 90px rgba(165,199,120,.018), 0 0 80px rgba(0,0,0,.14); transform: translate(-50%, -50%); }
.cta-orbit::before { position: absolute; inset: 13%; content: ""; border: 1px dashed rgba(255,157,47,.12); border-radius: 50%; animation: cta-counter-spin 46s linear infinite; }
.cta-orbit::after { position: absolute; inset: -1px; content: ""; border-top: 1px solid rgba(255,157,47,.72); border-right: 1px solid transparent; border-bottom: 1px solid rgba(165,199,120,.35); border-left: 1px solid transparent; border-radius: 50%; animation: cta-ring-spin 24s linear infinite; }
.cta-points { position: absolute; inset: -1px; border-radius: 50%; animation: cta-ring-spin 34s linear infinite reverse; }
.cta-points span { position: absolute; display: block; width: 9px; height: 9px; background: #a5c778; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 4px rgba(165,199,120,.08), 0 0 18px rgba(165,199,120,.35); }
.cta-points span:nth-child(1) { top: 15%; right: 16%; }
.cta-points span:nth-child(2) { bottom: 19%; left: 20%; width: 6px; height: 6px; animation-delay: 1.2s; }
.cta-points span:nth-child(3) { top: 48%; left: 7%; width: 5px; height: 5px; animation-delay: 2.3s; }
.cta-points span:nth-child(4) { right: 4%; bottom: 37%; width: 4px; height: 4px; background: var(--orange); animation-delay: .7s; }
.cta-points span:nth-child(5) { top: 4%; left: 42%; width: 7px; height: 7px; background: var(--orange); animation-delay: 1.8s; }
.cta-points span:nth-child(6) { right: 31%; bottom: 5%; width: 4px; height: 4px; animation-delay: 2.8s; }

.site-footer { display: grid; grid-template-columns: minmax(280px, 1.7fr) repeat(4, minmax(110px, .76fr)) minmax(175px, .95fr); gap: 28px; padding: 92px 10vw 42px; color: rgba(255,255,255,.72); background: #090b09; }
.footer-brand .brand { color: var(--on-dark); }
.footer-brand p { max-width: 470px; margin: 27px 0 0; font-size: 17px; line-height: 1.8; }
.footer-brand p + p { margin-top: 13px; color: rgba(255,255,255,.56); font-size: 16px; }
.footer-brand-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 25px; }
.footer-brand-meta span { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.68); font-size: 14px; }
.footer-brand-meta svg { width: 16px; height: 16px; color: var(--orange); }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 16px; }
.footer-links a:hover, .footer-links button:hover { color: var(--on-dark); }
.footer-domain { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.footer-domain span { color: var(--orange); font: 11px "DM Sans", sans-serif; letter-spacing: .18em; }
.footer-domain strong { color: var(--on-dark); font: 700 clamp(24px, 2.2vw, 34px) "DM Sans", sans-serif; letter-spacing: -.03em; white-space: nowrap; }
.footer-domain small { color: rgba(255,255,255,.48); font-size: 14px; white-space: nowrap; }
.footer-links strong { display: block; margin-bottom: 19px; color: var(--orange); font-size: 18px; }
.footer-links a, .footer-links button { display: block; margin: 12px 0; color: rgba(255,255,255,.7); background: none; font-size: 16px; text-align: left; white-space: nowrap; }
.footer-contact-links span { margin: 9px 0; color: rgba(255,255,255,.7); font-size: 16px; white-space: nowrap; }
.footer-links a:hover, .footer-links button:hover { color: var(--on-dark); }
.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 34px; padding-top: 26px; color: rgba(255,255,255,.48); border-top: 1px solid var(--line-light); font-size: 14px; }

.back-to-top { position: fixed; right: 22px; bottom: 24px; z-index: 50; display: grid; place-items: center; width: 48px; height: 48px; color: #10110f; background: var(--orange); border: 1px solid rgba(16,17,15,.18); border-radius: 50%; box-shadow: 0 12px 28px rgba(0,0,0,.22); visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity .22s, transform .22s, visibility .22s, background .2s; }
.back-to-top.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: #ffb957; transform: translateY(-3px); }
.back-to-top svg { width: 21px; height: 21px; stroke-width: 2.2; }

html[data-mode="dark"] .site-header.scrolled { background: rgba(27,29,26,.94); }
html[data-mode="dark"] .ai-capabilities article { background: #181b17; }
html[data-mode="dark"] .ai-capabilities article:hover { background: #20241e; }
html[data-mode="dark"] .journey-section { background: #1b1e1a; }
html[data-mode="dark"] .journey-track article { background: #252822; border-color: rgba(255,255,255,.12); }
html[data-mode="dark"] .journey-track article:hover { background: #2b302a; }
html[data-mode="dark"] .theme-compare { border-color: rgba(255,255,255,.18); box-shadow: 24px 27px 55px rgba(0,0,0,.32); }
html[data-mode="dark"] .screen-stage { background: #141612; border-color: rgba(255,255,255,.14); }
html[data-mode="dark"] .screen-stage img { filter: brightness(.78) saturate(.8); }
html[data-mode="dark"] .consult-panel input[type="text"], html[data-mode="dark"] .consult-panel textarea { color: var(--ink); }

.consult-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.consult-modal.is-open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8,9,8,.86); backdrop-filter: blur(9px); }
.consult-panel { position: relative; width: min(900px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 34px 48px 30px; color: #fffdf8; background: #1c1f1a; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; box-shadow: 0 28px 80px rgba(0,0,0,.5); scrollbar-color: rgba(255,157,47,.55) transparent; scrollbar-width: thin; transform: translateY(15px); transition: transform .25s; }
.consult-modal.is-open .consult-panel { transform: translateY(0); }
.modal-close { position: absolute; top: 17px; right: 17px; color: #fffdf8; border-color: rgba(255,255,255,.22); }
.consult-panel h2 { margin: 10px 0 6px; font-size: 40px; letter-spacing: 0; line-height: 1.2; }
.consult-panel > p { margin: 0 0 21px; color: rgba(255,255,255,.58); font-size: 15px; }
.contact-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-modal-card { display: flex; flex-direction: column; align-items: center; min-height: 410px; padding: 22px 28px; background: #141613; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; }
.contact-modal-card-head { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.contact-modal-card-head svg { width: 24px; height: 24px; color: var(--orange); }
.qq-number-line { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 12px; }
.contact-modal-card .contact-number { margin: 0; color: #fffdf8; font: 800 28px "DM Sans", sans-serif; letter-spacing: 0; }
.copy-qq-inline { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; color: #10110f; background: var(--orange); border-radius: 4px; font-size: 13px; font-weight: 800; }
.copy-qq-inline:hover { background: #ffb957; }
.copy-qq-inline svg { width: 14px; height: 14px; }
.contact-modal-card .qr-display { width: max-content; margin-bottom: 7px; padding: 0; }
.contact-modal-card .qr-frame { padding: 7px; }
.contact-modal-card .qr-frame img { width: 184px; height: 184px; }
.contact-modal-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px; padding-top: 14px; color: rgba(255,255,255,.54); border-top: 1px solid rgba(255,255,255,.13); font-size: 13px; }
.contact-modal-note svg { width: 17px; color: var(--orange-hot); }
.consult-panel form { display: grid; gap: 14px; }
.consult-panel form[hidden], .consult-result[hidden] { display: none; }
.consult-panel label, .consult-panel legend { display: grid; gap: 6px; color: var(--ink); font-size: 11px; font-weight: 700; }
.consult-panel input[type="text"], .consult-panel textarea { width: 100%; padding: 11px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 0; outline: none; font-size: 12px; resize: vertical; }
.consult-panel input:focus, .consult-panel textarea:focus { border-color: var(--orange-hot); box-shadow: 0 0 0 3px rgba(255,107,34,.11); }
.consult-panel fieldset { display: flex; flex-wrap: wrap; gap: 11px 17px; margin: 3px 0 0; padding: 0; border: 0; }
.consult-panel fieldset legend { width: 100%; }
.consult-panel fieldset label { display: flex; grid-template-columns: none; align-items: center; gap: 6px; color: var(--muted); font-weight: 400; }
.consult-panel input[type="checkbox"] { accent-color: var(--orange-hot); }
.consult-panel form > button { margin-top: 4px; }
.consult-panel form small { color: var(--muted); font-size: 10px; text-align: center; }
.consult-result { display: grid; justify-items: center; gap: 9px; padding: 37px 0 8px; text-align: center; }
.consult-result svg { width: 41px; height: 41px; color: #689640; }
.consult-result strong { font-size: 17px; }
.consult-result p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }

@media (max-width: 1080px) {
  .site-header, .hero::after { padding-right: 4vw; padding-left: 4vw; }
  .desktop-nav, .header-actions .text-button, .header-actions .primary-button { display: none; }
  .menu-toggle { display: grid; }
  .hero-content { padding-left: 7vw; }
  main > section:not(.hero) { padding-right: 7vw; padding-left: 7vw; }
  .trust-strip { padding-right: 7vw; padding-left: 7vw; }
  main > section.trust-strip { padding-right: 7vw; padding-left: 7vw; }
  .site-footer { padding-right: 7vw; padding-left: 7vw; }
  .matrix-section { gap: 6vw; }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .faq-section { grid-template-columns: minmax(360px, .95fr) minmax(320px, 1.05fr); gap: 30px; }
  .faq-heading h2 { font-size: clamp(31px, 4vw, 40px); }
  .faq-list summary { gap: 14px; font-size: 16px; }
}

@media (max-width: 820px) {
  .site-header { height: 78px; padding: 0 20px; }
  .hero::after { top: 78px; }
  .brand { gap: 10px; }
  .brand img { width: 46px; height: 46px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy small { gap: 9px; margin-top: 5px; font-size: 12px; }
  .brand-copy small b { padding-left: 0; font-size: 14px; }
  .brand-copy small b::before { display: none; }
  .mobile-menu { position: fixed; top: 78px; right: 0; left: 0; z-index: 29; display: flex; flex-direction: column; gap: 0; padding: 14px 20px 20px; background: rgba(242,240,235,.97); border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .25s; }
  html[data-mode="dark"] .mobile-menu { background: rgba(27,29,26,.98); }
  .mobile-menu.is-open { transform: translateY(0); }
  .mobile-menu a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .mobile-menu .primary-button { margin-top: 14px; }
  .hero { min-height: 740px; height: 100svh; }
  .hero-media { width: 100%; opacity: .32; }
  .hero-media img { object-position: 72% center; }
  .hero-scrim { background: linear-gradient(90deg, #10110f 0%, rgba(16,17,15,.76) 70%, rgba(16,17,15,.5) 100%), linear-gradient(0deg, rgba(16,17,15,.92), transparent 50%); }
  .hero-content { width: 100%; padding: 125px 25px 170px; }
  .eyebrow { font-size: 14px; letter-spacing: .06em; }
  .hero h1 { font-size: clamp(42px, 12vw, 68px); }
  .hero-content p { max-width: 580px; font-size: 13px; }
  .hero-proof { margin-top: 33px; gap: 10px 17px; }
  .hero-signal { right: 25px; bottom: 28px; left: 25px; width: auto; }
  .hero-signal div { padding-top: 11px; }
  .hero-signal div + div { padding-left: 10px; }
  .hero-signal span { font-size: 12px; }
  .hero-signal small { font-size: 10px; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); padding: 0; }
  main > section.trust-strip { min-height: 0; padding: 0; }
  .trust-strip div, .trust-strip div:first-child { justify-content: center; padding: 18px 15px; border-bottom: 1px solid rgba(255,255,255,.13); }
  .trust-strip div:nth-child(odd) { border-left: 0; }
  .trust-strip div:nth-child(even) { border-right: 0; }
  .trust-strip strong { font-size: 25px; }
  main > section:not(.hero) { padding: 84px 25px; }
  .section-heading { display: block; margin-bottom: 40px; }
  .section-heading > p { width: 100%; margin-top: 22px; font-size: 13px; }
  .section-heading h2, .faq-heading h2, .final-cta h2, .security-copy h2 { font-size: clamp(35px, 10vw, 55px); }
  .ai-workspace { grid-template-columns: 1fr; min-height: auto; }
  .ai-history { display: none; }
  .ai-chat { min-height: 610px; padding: 20px 18px; }
  .ai-chat-top { align-items: flex-start; flex-direction: column; gap: 7px; }
  .question-bubble { max-width: 95%; margin-top: 25px; }
  .answer-panel { padding: 17px 15px; }
  .ai-metrics strong { font-size: 17px; }
  .ai-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ai-capabilities article { min-height: 215px; padding: 24px 17px; }
  .ai-capabilities p { max-width: 260px; font-size: 14px; }
  .multi-site-heading { margin-bottom: 40px; }
  .multi-site-heading h2 { font-size: clamp(34px, 9vw, 50px); }
  .multi-site-heading p { font-size: 16px; }
  .site-type-grid { grid-template-columns: 1fr; gap: 14px; }
  .site-type-card, .sync-type { grid-column: auto; min-height: 0; padding: 27px 23px 25px; }
  .site-type-card h3 { margin-top: 22px; font-size: 30px; }
  .site-type-card > p { font-size: 15px; }
  .sync-site-row { grid-template-columns: 1fr 34px 1fr 34px 1fr; gap: 7px; }
  .sync-site-row > span { padding: 15px 8px; }
  .sync-site-row b { font-size: 15px; }
  .sync-site-row small { font-size: 11px; }
  .sync-shared-line { grid-template-columns: 42px 1fr; padding: 18px; }
  .sync-shared-line > svg { width: 40px; height: 40px; }
  .sync-shared-line > em { grid-column: 1 / -1; justify-self: center; }
  .sync-independent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sync-independent-grid > span { min-height: 80px; padding: 14px; border-top: 1px solid rgba(255,255,255,.08); }
  .sync-independent-grid > span:nth-child(odd) { border-left: 0; }
  .multi-site-summary { flex-direction: column; align-items: center; gap: 7px; }
  .multi-site-summary span { max-width: 540px; font-size: 15px; }
  main > section#multi-site.multi-site-section { padding-bottom: 58px; }
  .product-showcase { grid-template-columns: 1fr; gap: 27px; }
  .product-tabs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .product-tabs button { grid-template-columns: 32px 1fr; grid-template-rows: auto auto; gap: 4px 8px; min-height: 102px; padding: 15px 13px; }
  .product-tabs span { grid-row: auto; }
  .product-tabs strong { font-size: 16px; }
  .product-tabs small { grid-column: 1 / -1; display: block; font-size: 12px; }
  .screen-stage, .screen-stage img { min-height: 480px; }
  .screen-stage figcaption { right: 10px; bottom: 10px; padding: 7px 8px; }
  .journey-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .journey-track::before { display: none; }
  .journey-track article { min-height: 250px; padding: 24px 18px 22px; }
  .matrix-section, .security-section, .faq-section, .updates-section, .contact-section { display: block; }
  .theme-feature-section { grid-template-columns: 1fr; }
  .theme-compare { margin-top: 40px; }
  .updates-heading, .contact-copy { margin-bottom: 42px; }
  .contact-methods { grid-template-columns: repeat(3, 1fr); }
  .contact-methods article { min-height: 510px; padding: 28px 19px; }
  .contact-methods strong { font-size: 20px; }
  .contact-methods .qr-display { width: max-content; }
  .contact-methods .qr-frame { padding: 6px; }
  .contact-methods .qr-frame img { width: 128px; max-width: none; height: 128px; }
  .matrix-intro > p { max-width: none; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); margin-top: 35px; }
  .security-section { padding-bottom: 40px !important; }
  .security-architecture { margin-top: 42px; padding: 18px 14px; }
  .security-copy > p { font-size: 16px; }
  .security-copy h2 span { white-space: normal; }
  .privacy-statement { padding: 20px; }
  .privacy-statement strong { font-size: 20px; }
  .privacy-statement span { font-size: 15px; }
  .security-promise { min-height: 0; }
  .security-points { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .faq-list summary { font-size: 17px; white-space: normal; }
  .faq-list p { margin-right: 34px; font-size: 15px; }
  .delivery-steps { grid-template-columns: 1fr; }
  .delivery-steps li, .delivery-steps li + li { min-height: auto; padding: 25px 0 40px; border-right: 0; border-bottom: 1px solid var(--line); }
  .delivery-steps li > span { margin-bottom: 11px; }
  .delivery-steps strong { font-size: 21px; }
  .delivery-steps p { max-width: 330px; font-size: 15px; }
  .delivery-steps small { right: 0; bottom: 16px; }
  .faq-heading { margin-bottom: 36px; }
  .faq-brief { max-width: none; margin-top: 28px; }
  .faq-brief > p { font-size: 16px; }
  .faq-brief-list { gap: 14px; margin-top: 23px; }
  .site-footer { grid-template-columns: repeat(2, 1fr); padding: 56px 25px 28px; gap: 36px 25px; }
  .footer-brand, .footer-domain { grid-column: 1 / -1; }
  .footer-domain { align-items: flex-start; }
  .footer-brand p { font-size: 16px; }
  .footer-brand p + p { font-size: 15px; }
  .footer-links { font-size: 15px; }
  .footer-links strong { font-size: 17px; }
  .footer-links a, .footer-links button, .footer-contact-links span { font-size: 15px; }
  .footer-domain strong { font-size: clamp(24px, 7vw, 32px); }
  .footer-domain small { font-size: 13px; }
  .footer-bottom { flex-direction: column; gap: 8px; font-size: 13px; }
}

@media (max-width: 460px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions button { width: 100%; }
  .hero-signal { grid-template-columns: repeat(3, 1fr); }
  .hero-signal strong { font-size: 11px; }
  .hero-signal span { font-size: 11px; white-space: normal; }
  .hero-signal small { font-size: 9px; white-space: normal; }
  .ai-capabilities { grid-template-columns: 1fr; }
  .ai-capabilities article { min-height: 0; padding: 27px 22px 25px; }
  .ai-capabilities p { max-width: 290px; font-size: 15px; }
  .site-type-top em { font-size: 11px; }
  .sync-site-row { grid-template-columns: 1fr; }
  .sync-site-row > svg { transform: rotate(90deg); }
  .sync-independent-grid { grid-template-columns: 1fr; }
  .sync-independent-grid > span { border-left: 0; }
  .multi-site-summary strong { font-size: 21px; }
  .trust-strip div, .trust-strip div:first-child { justify-content: center; min-height: 112px; padding: 16px 8px; }
  .trust-strip strong { font-size: 30px; }
  .trust-strip span { max-width: 135px; font-size: 12px; line-height: 1.55; white-space: normal; }
  .product-tabs { grid-template-columns: 1fr; }
  .product-tabs button { grid-template-columns: 32px 1fr; grid-template-rows: auto auto; min-height: 92px; padding: 15px; }
  .product-tabs span { grid-row: 1 / span 2; }
  .product-tabs small { display: block; }
  .screen-stage, .screen-stage img { min-height: 260px; }
  .journey-track { grid-template-columns: 1fr; gap: 12px; }
  .journey-track::before { display: none; }
  .journey-track article { min-height: auto; padding: 25px 22px 24px; }
  .journey-track article > span { margin-bottom: 16px; }
  .capability-grid { grid-template-columns: 1fr; }
  .theme-benefits { grid-template-columns: 1fr; }
  .release-list article { grid-template-columns: 62px 1fr; gap: 15px; }
  .release-list time { padding: 4px 0 0; }
  .release-list article > span { grid-column: 2; width: max-content; }
  .contact-methods { grid-template-columns: 1fr; }
  .contact-methods article { min-height: 0; padding: 34px 22px; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .contact-methods .qr-display { width: max-content; }
  .contact-methods .qr-frame { padding: 6px; }
  .contact-methods .qr-frame img { width: 148px; max-width: none; height: 148px; }
  .contact-site-card { min-height: 320px !important; }
  .final-cta h2 { font-size: clamp(38px, 11vw, 56px); }
  .final-cta h2 span { white-space: normal; }
  .security-points { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
  .consult-panel { padding: 31px 22px 24px; }
  .consult-panel h2 { font-size: 35px; }
  .contact-modal-grid { grid-template-columns: 1fr; }
  .contact-modal-card { min-height: 0; padding: 25px 18px; }
  .back-to-top { right: 14px; bottom: 16px; width: 44px; height: 44px; }
}

/* Complete capability map and edition comparison */
.capabilities-section { padding-bottom: clamp(56px, 5vw, 76px) !important; background: linear-gradient(180deg, #f4f1eb 0%, #faf8f4 100%); }
.capabilities-heading { max-width: 780px; margin-bottom: 58px; }
.capabilities-heading h2, .plans-heading h2 { margin: 17px 0 19px; max-width: 900px; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.18; letter-spacing: -.045em; }
.capabilities-heading p, .plans-heading p { max-width: 650px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.focus-capabilities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 26px; }
.focus-card { position: relative; min-height: 360px; padding: 35px 32px 31px; overflow: hidden; color: var(--on-dark); background: var(--ink-soft); border: 1px solid rgba(16,17,15,.13); border-radius: 24px; box-shadow: 0 18px 35px rgba(16,17,15,.1); }
.focus-card::after { position: absolute; right: -40px; bottom: -58px; width: 180px; height: 180px; content: ""; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,255,255,.035), 0 0 0 48px rgba(255,255,255,.025); }
.focus-ai { background: #252b22; }
.focus-publish { background: #173c4b; }
.focus-console { background: #3c2b25; }
.focus-sync { background: #22312e; }
.focus-card-top { display: flex; align-items: center; gap: 12px; color: var(--orange); }
.focus-card-top svg { width: 42px; height: 42px; padding: 9px; color: var(--ink); background: var(--orange); border-radius: 14px; }
.focus-number { color: rgba(255,255,255,.45); font: 700 12px "DM Sans", sans-serif; letter-spacing: .12em; }
.focus-kicker { color: rgba(255,255,255,.6); font-size: 13px; }
.focus-card h3 { position: relative; z-index: 1; margin: 32px 0 13px; font-size: 34px; letter-spacing: -.04em; }
.focus-card > p { position: relative; z-index: 1; max-width: 370px; margin: 0; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.8; }
.feature-list { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.feature-list span { padding: 9px 12px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: 12px; }
.capability-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.capability-group { min-height: 305px; padding: 30px 29px 28px; background: rgba(255,253,249,.94); border: 1px solid #e4dfd6; border-radius: 20px; box-shadow: 0 10px 26px rgba(38,35,30,.045); transition: transform .25s, box-shadow .25s, border-color .25s; }
.capability-group:hover { background: #fff; border-color: rgba(255,157,47,.48); box-shadow: 0 18px 32px rgba(38,35,30,.1); transform: translateY(-4px); }
.group-head { display: flex; align-items: flex-start; gap: 14px; }
.group-head > svg { width: 44px; height: 44px; padding: 10px; color: var(--ink); background: var(--orange); border-radius: 14px; flex: 0 0 auto; }
.group-head h3 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.group-head p { min-height: 7em; margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.menu-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; padding-top: 19px; border-top: 1px solid #ebe6de; }
.menu-chips span { padding: 8px 11px; color: #4c5049; background: #f3f0eb; border: 1px solid #e5e0d8; border-radius: 999px; font-size: 12px; line-height: 1.3; }
.plans-section { padding-top: clamp(56px, 5vw, 76px) !important; background: #fffdf9; }
.plans-heading { max-width: 790px; margin: 0 auto 48px; text-align: center; }
.plans-heading p { max-width: 620px; margin-right: auto; margin-left: auto; }
.plans-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; width: min(1320px, 100%); max-width: none; margin: 0 auto; }
.plan-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 650px; padding: 28px 28px 26px; background: #f4f1eb; border: 1px solid var(--line); border-radius: 12px; }
.plan-card.plan-featured { color: var(--ink); background: #f4f1eb; border-color: var(--line); box-shadow: none; transform: none; }
.plan-fit { display: flex; align-items: center; min-height: 30px; padding: 5px 13px; color: #007fbd; background: #e6f5fb; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 0; border: 0; }
.plan-featured .plan-top { border: 0; }
.plan-top span { font-size: 27px; font-weight: 800; letter-spacing: 0; white-space: nowrap; }
.plan-top small { color: var(--muted); font: 700 10px "DM Sans", sans-serif; letter-spacing: .06em; }
.plan-featured .plan-top small { color: var(--muted); }
.plan-card h3 { min-height: 52px; margin: 8px 0 0; color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.7; white-space: normal; }
.plan-price { display: flex; align-items: baseline; gap: 8px; min-height: 78px; margin-top: 9px; color: var(--ink); }
.plan-price strong { font: 800 42px/1 "DM Sans", "Noto Sans SC", sans-serif; letter-spacing: 0; white-space: nowrap; }
.plan-price strong b { margin-right: 5px; color: #0b91d0; font-size: 22px; font-weight: 700; }
.plan-price span { color: var(--muted); font-size: 15px; white-space: nowrap; }
.plan-note { min-height: 22px !important; margin: -5px 0 0 !important; color: var(--muted) !important; font-size: 12px !important; line-height: 1.6 !important; }
.plan-note-empty { visibility: hidden; }
.plan-features { display: grid; align-content: start; gap: 13px; min-height: 287px; margin: 18px 0 25px; padding: 25px 0 0; border-top: 1px dashed var(--line); list-style: none; }
.plan-features li { display: flex; align-items: center; gap: 10px; min-height: 22px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.plan-features li::before { display: grid; place-items: center; width: 17px; height: 17px; content: "✓"; color: #159fe2; background: transparent; border: 1px solid #159fe2; border-radius: 50%; font-size: 10px; font-weight: 800; line-height: 1; flex: 0 0 auto; }
.plan-features li.excluded::before { content: "×"; color: #ff8080; border-color: #ff9a9a; }
.plan-card button { justify-content: center; width: 100%; min-height: 52px; margin-top: auto; padding: 0 12px; color: #098fd0; background: transparent; border-color: #159fe2; font-size: 15px; text-align: center; }
.plan-card button:hover { color: #fff; background: #159fe2; }
.plan-featured .primary-button { color: #098fd0; background: transparent; border-color: #159fe2; }

html[data-mode="dark"] .capabilities-section, html[data-mode="dark"] .plans-section { background: #1b1d1a; }
html[data-mode="dark"] .capability-groups { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
html[data-mode="dark"] .capability-group, html[data-mode="dark"] .plan-card { color: var(--on-dark); background: #252822; border-color: rgba(255,255,255,.1); }
html[data-mode="dark"] .capability-group:hover { background: #2c302a; }
html[data-mode="dark"] .group-head p, html[data-mode="dark"] .capabilities-heading p, html[data-mode="dark"] .plans-heading p, html[data-mode="dark"] .plan-card > p { color: rgba(255,255,255,.58); }
html[data-mode="dark"] .menu-chips span { color: rgba(255,255,255,.72); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); }
html[data-mode="dark"] .menu-chips { border-color: rgba(255,255,255,.1); }
html[data-mode="dark"] .plan-card li { color: rgba(255,255,255,.78); }
html[data-mode="dark"] .plan-top { border-color: rgba(255,255,255,.14); }
html[data-mode="dark"] .plan-card.plan-featured { color: var(--on-dark); background: #252822; border-color: rgba(255,255,255,.1); }
html[data-mode="dark"] .plan-price { color: var(--on-dark); }
html[data-mode="dark"] .plan-features { border-color: rgba(255,255,255,.14); }

@media (max-width: 1000px) {
  .focus-capabilities { grid-template-columns: 1fr; }
  .focus-card { min-height: 300px; }
  .capability-groups { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .capabilities-heading h2, .plans-heading h2 { font-size: clamp(38px, 11vw, 56px); }
  .capabilities-heading p, .plans-heading p { font-size: 15px; }
  .focus-card { min-height: 0; padding: 27px 23px 25px; }
  .focus-card h3 { margin-top: 25px; font-size: 30px; }
  .focus-card > p { font-size: 15px; }
  .capability-groups { grid-template-columns: 1fr; }
  .capability-group { min-height: 0; padding: 25px 22px; }
  .group-head h3 { font-size: 21px; }
  .group-head p { min-height: 0; }
  .menu-chips { margin-top: 20px; }
  .plan-card { min-height: 0; padding: 28px 23px 25px; }
  .theme-feature-copy > p { font-size: 16px; line-height: 1.85; }
  .theme-benefits { gap: 14px; margin: 26px 0 30px; }
  .theme-benefits span { font-size: 14px; }
  .theme-benefits svg { width: 18px; height: 18px; }
  .theme-feature-copy .outline-button { min-height: 47px; font-size: 14px; }
  .security-architecture { padding: 20px 16px; }
  .security-architecture-head { grid-template-columns: 46px 1fr; gap: 12px; }
  .server-mark { width: 46px; height: 46px; }
  .security-architecture-head strong { font-size: 18px; }
  .security-architecture-head em { grid-column: 2; justify-self: start; }
  .private-data-grid > div { min-height: 82px; padding: 16px 13px; }
  .private-data-grid span { font-size: 16px; }
  .data-ownership { gap: 3px 13px; padding: 16px; }
  .data-ownership strong { font-size: 20px; }
  .service-boundary strong { font-size: 17px; }
  .security-points { gap: 14px; }
  .security-points span { min-height: 70px; padding: 15px 0; font-size: 18px; white-space: normal; }
}

/* Domestic product-site rhythm: tighter reading width, calmer headings, vertical plan cards. */
main > section:not(.hero):not(.trust-strip), .site-footer { padding-right: clamp(25px, 8vw, 9vw); padding-left: clamp(25px, 8vw, 9vw); }
.section-index { letter-spacing: .1em; }
.hero-content p, .section-heading > p, .capabilities-heading p, .plans-heading p { letter-spacing: 0; }
.focus-card h3 { font-size: 29px; white-space: nowrap; }
.focus-card > p { max-width: 390px; font-size: 15px; }
.group-head h3 { white-space: nowrap; }
.capability-group { min-height: 320px; }
.plans-grid { max-width: 1320px; margin: 0 auto; }

@media (max-width: 1000px) {
  .trust-strip { max-width: none; border-radius: 0; }
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

@media (max-width: 700px) {
  .hero h1 { max-width: 520px; font-size: clamp(36px, 10vw, 52px); }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-strip strong { font-size: 24px; }
  .plans-grid { grid-template-columns: 1fr; max-width: 420px; }
  .plan-card, .plan-card.plan-featured { min-height: 650px; transform: none; }
  .capabilities-heading h2, .plans-heading h2 { font-size: clamp(34px, 9vw, 48px); }
  .focus-card h3 { font-size: 27px; }
  .contact-copy h2, .contact-copy p { white-space: normal; }
  .section-index { font-size: 14px; }
}

/* Motion layer: quiet depth and clear hierarchy without distracting the reader. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes signal-breathe {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}
@keyframes chart-breathe {
  0%, 100% { transform: scaleY(1); opacity: .72; }
  50% { transform: scaleY(1.045); opacity: .9; }
}
@keyframes sync-flow {
  to { left: 100%; }
}
@keyframes sync-spin {
  to { transform: rotate(360deg); }
}
@keyframes sync-pulse {
  0%, 100% { opacity: .55; transform: translateX(-2px); }
  50% { opacity: 1; transform: translateX(2px); }
}
@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes orbit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,157,47,.12); opacity: .72; }
  50% { box-shadow: 0 0 0 8px rgba(255,157,47,0); opacity: 1; }
}
@keyframes sheen-sweep {
  0%, 44% { transform: translateX(-125%); }
  68%, 100% { transform: translateX(125%); }
}
@keyframes hero-title-shine {
  0%, 10% { background-position: 120% 0; text-shadow: 0 0 12px rgba(255,157,47,.08); }
  44%, 58% { background-position: 38% 0; text-shadow: 0 0 22px rgba(255,157,47,.34), 0 0 46px rgba(255,107,34,.16); }
  90%, 100% { background-position: -30% 0; text-shadow: 0 0 12px rgba(255,157,47,.08); }
}
@keyframes hero-title-line-glow {
  0%, 100% { opacity: .7; transform: scaleX(.62); }
  46%, 62% { opacity: 1; transform: scaleX(1); }
}
@keyframes brand-logo-halo {
  0%, 100% { opacity: .48; transform: translate(-50%, -50%) scale(.88); box-shadow: 0 0 13px rgba(255,157,47,.14), inset 0 0 10px rgba(255,157,47,.06); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 25px rgba(255,157,47,.34), 0 0 42px rgba(255,107,34,.13), inset 0 0 16px rgba(255,157,47,.12); }
}
@keyframes brand-logo-glow {
  0%, 100% { filter: drop-shadow(0 6px 14px rgba(255,157,47,.18)); }
  50% { filter: drop-shadow(0 7px 17px rgba(255,157,47,.42)); }
}
@keyframes brand-pro-shine {
  0%, 14% { background-position: 115% 0; }
  72%, 100% { background-position: -75% 0; }
}
@keyframes brand-leader-shine {
  0%, 10% { background-position: 115% 0; filter: drop-shadow(0 0 4px rgba(239,137,190,.14)); }
  48%, 62% { filter: drop-shadow(0 0 9px rgba(255,173,191,.42)); }
  88%, 100% { background-position: -45% 0; filter: drop-shadow(0 0 4px rgba(193,157,255,.18)); }
}
@keyframes brand-leader-line {
  0%, 100% { opacity: .42; transform: scaleX(.52); }
  48%, 64% { opacity: 1; transform: scaleX(1); }
}
@keyframes cta-ring-spin { to { transform: rotate(360deg); } }
@keyframes cta-counter-spin { to { transform: rotate(-360deg); } }
@keyframes cta-scan {
  0%, 12% { left: -24%; opacity: 0; }
  28% { opacity: 1; }
  62%, 100% { left: 112%; opacity: 0; }
}
@keyframes cta-logo-float {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(255,157,47,0)); }
  50% { transform: translateY(-7px) scale(1.045); filter: drop-shadow(0 9px 14px rgba(255,157,47,.22)); }
}
@keyframes cta-label-breathe {
  0%, 100% { opacity: .76; }
  50% { opacity: 1; text-shadow: 0 0 16px rgba(255,157,47,.28); }
}
@keyframes cta-title-sheen {
  0%, 22% { background-position: 125% 0; }
  58%, 100% { background-position: -125% 0; }
}
@keyframes cta-button-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(165,199,120,0); }
  50% { box-shadow: 0 0 0 6px rgba(165,199,120,.045), 0 12px 32px rgba(0,0,0,.2); }
}
@keyframes cta-button-sheen {
  0%, 35% { left: -60%; }
  70%, 100% { left: 135%; }
}

.hero-content > * { opacity: 1; animation: none; }
.hero-signal { opacity: 1; animation: none; }
.hero-signal div { animation: signal-breathe 5s ease-in-out infinite; }
.hero-signal div:nth-child(2) { animation-delay: .9s; }
.hero-signal div:nth-child(3) { animation-delay: 1.8s; }

.motion-ready, .motion-ready.is-revealed, .motion-item, .motion-item.is-revealed { opacity: 1; transform: none; transition: none; }

.ai-section .mini-chart div { transform-origin: bottom; animation: chart-breathe 4.6s ease-in-out infinite; }
.ai-section .mini-chart div:nth-child(2) { animation-delay: .2s; }
.ai-section .mini-chart div:nth-child(3) { animation-delay: .4s; }
.ai-section .mini-chart div:nth-child(4) { animation-delay: .6s; }
.ai-section .mini-chart div:nth-child(5) { animation-delay: .8s; }
.ai-section .mini-chart div:nth-child(6) { animation-delay: 1s; }
.ai-section .mini-chart div:nth-child(7) { animation-delay: 1.2s; }
.ai-mark { animation: orbit-pulse 3.4s ease-in-out infinite; }
.screen-stage::after { position: absolute; inset: 28px 0 0; z-index: 1; content: ""; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.13) 49%, transparent 60%); transform: translateX(-125%); pointer-events: none; animation: sheen-sweep 8s ease-in-out 2s infinite; }
.screen-stage img { position: relative; z-index: 0; }
.cta-points span { animation: orbit-pulse 3.8s ease-in-out infinite; }

.primary-button svg, .ghost-button svg, .outline-button svg, .light-button svg, .icon-button svg { transition: transform .25s ease; }
.primary-button:hover svg, .ghost-button:hover svg, .outline-button:hover svg, .light-button:hover svg { transform: translateX(3px); }
.icon-button:hover svg { transform: rotate(10deg) scale(1.08); }
.product-tabs button, .faq-list summary, .release-list article, .contact-methods article { transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.product-tabs button:hover { transform: translateX(4px); }
.release-list article:hover { background: rgba(255,157,47,.05); }
@supports (background: color-mix(in srgb, white, black)) {
  .release-list article:hover { background: color-mix(in srgb, var(--orange) 5%, transparent); }
}
.contact-methods article:hover { background: rgba(255,157,47,.045); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .motion-ready, .motion-item, .hero-content > *, .hero-signal { opacity: 1 !important; transform: none !important; }
}