/* DataEase AI homepage. Loaded after theme.css. Tokens and reasons: DESIGN.md.
   One animated sequence on the page (the hero demo); everything else is scroll-revealed once or static. */

.hp-wrap { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.hp-eyebrow {
  display: flex; align-items: center; gap: 10px;
  text-transform: uppercase; font-size: 11px; letter-spacing: 1.8px; font-weight: 500;
  color: var(--de-ink);
}
.hp-eyebrow .mark { width: 7px; height: 7px; background: currentColor; flex-shrink: 0; }
.hp-section { padding-block: 104px; }
.hp-section > h2, .hp-h2 { font-size: clamp(30px, 3.6vw, 45px); margin-top: 20px; max-width: 760px; }
.hp-section > .answer-block, .hp-answer { margin: 24px 0 0; max-width: 720px; font-size: 17px; line-height: 1.6; }
.hp-lead { font-size: 16px; line-height: 1.65; color: hsl(var(--muted-foreground)); max-width: 720px; margin-top: 20px; }
.hp-lead a { color: var(--de-accent-text); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.hp-text-link {
  display: inline-flex; gap: 12px; align-items: center;
  font-size: 15px; min-height: 44px; color: var(--de-ink); text-decoration: none;
}
.hp-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.hp-label-warning, .hp-label-success {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 10px; padding: 4px 7px; border-radius: 4px; letter-spacing: 0;
}
.hp-label-warning { background: var(--de-warning-soft); color: var(--de-warning); }
.hp-label-success { background: var(--de-success-soft); color: var(--de-success); }

/* ---------- hero ---------- */
.hp-hero-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center;
  width: min(1280px, 100%); margin-inline: auto;
}
.hp-hero-visual { min-width: 0; }
.hp-play-icon {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: var(--de-accent); margin-left: 8px;
  box-shadow: var(--de-shadow-sm);
}
.de-hero-trust .check { display: inline-grid; place-items: center; color: var(--de-success); }

/* the demonstration */
.hp-demo {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 20px;
  box-shadow: var(--de-shadow); padding: 20px 20px 18px; position: relative;
}
.hp-demo-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.hp-demo-title { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: var(--de-ink); }
.hp-demo-sub { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 3px; }
.hp-pause {
  flex-shrink: 0; min-height: 36px; padding: 6px 12px; font-size: 12px; font-weight: 500;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: var(--de-ink); border-radius: 999px; cursor: pointer;
}
.hp-pause:hover { background: hsl(var(--muted)); }

.hp-agents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hp-agent {
  position: relative; text-align: left; display: grid; gap: 4px; justify-items: start;
  padding: 12px 12px 12px; border-radius: 14px; border: 1px solid hsl(var(--border));
  background: hsl(var(--background)); color: var(--de-ink); cursor: pointer; font: inherit; min-height: 44px;
  transition: border-color var(--de-motion), box-shadow var(--de-motion), background var(--de-motion);
}
.hp-agent:hover { background: hsl(var(--card)); border-color: var(--de-line-strong); }
.hp-agent.is-active { background: hsl(var(--card)); border-color: var(--de-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.14), var(--de-shadow-sm); }
.hp-agent.is-done { border-color: hsl(var(--border)); }
.hp-bot { width: 34px; height: 34px; margin-bottom: 2px; }
.hp-agent-name { font-size: 12.5px; font-weight: 600; letter-spacing: -0.1px; }
.hp-agent-task { font-size: 10.5px; color: hsl(var(--muted-foreground)); line-height: 1.35; }
.hp-agent-state { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; margin-top: 4px; color: hsl(var(--muted-foreground)); font-style: normal; }
.hp-agent-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--de-line-strong); }
.hp-agent-state em, .hp-agent-state b, .hp-agent-state u { display: none; font-style: normal; font-weight: 500; text-decoration: none; }
.hp-agent-state u { display: inline; }
.hp-agent.is-active .hp-agent-state { color: var(--de-accent); }
.hp-agent.is-active .hp-agent-state i { background: var(--de-accent); animation: hpPulse 1.2s ease-in-out infinite; }
.hp-agent.is-active .hp-agent-state em { display: inline; }
.hp-agent.is-active .hp-agent-state u { display: none; }
.hp-agent.is-done .hp-agent-state { color: var(--de-success); }
.hp-agent.is-done .hp-agent-state i { background: var(--de-success); }
.hp-agent.is-done .hp-agent-state b { display: inline; }
.hp-agent.is-done .hp-agent-state u { display: none; }
.hp-agent-bar { display: block; width: 100%; height: 3px; border-radius: 3px; background: hsl(var(--muted)); overflow: hidden; margin-top: 6px; }
.hp-agent-bar b { display: block; height: 100%; width: 0; background: var(--de-accent); border-radius: 3px; }
.hp-agent.is-active .hp-agent-bar b { animation: hpFill var(--dur, 3s) linear forwards; }
.hp-agent.is-done .hp-agent-bar b { width: 100%; background: var(--de-success); }
.hp-demo.is-paused .hp-agent.is-active .hp-agent-bar b { animation-play-state: paused; }

.hp-links { display: block; width: 100%; height: 44px; margin: 2px 0 -2px; }
.hp-link { fill: none; stroke: hsl(var(--border)); stroke-width: 2; transition: stroke var(--de-motion); }
.hp-demo[data-stage="1"] .hp-link[data-link="0"], .hp-demo[data-stage="2"] .hp-link[data-link="1"],
.hp-demo[data-stage="3"] .hp-link[data-link="2"], .hp-demo[data-stage="4"] .hp-link[data-link="3"] {
  stroke: var(--de-accent); stroke-dasharray: 6 6; animation: hpDash 1.2s linear infinite;
}
.hp-demo.is-paused .hp-link { animation-play-state: paused; }

.hp-window { border: 1px solid hsl(var(--border)); border-radius: 14px; background: hsl(var(--background)); overflow: hidden; min-height: 268px; }
.hp-window-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.hp-window-bar i { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--border)); }
.hp-window-name { margin-left: 8px; font-size: 10.5px; color: hsl(var(--muted-foreground)); }
.hp-stage { display: none; padding: 14px 16px 16px; }
.hp-demo[data-stage="1"] .hp-stage-1, .hp-demo[data-stage="2"] .hp-stage-2,
.hp-demo[data-stage="3"] .hp-stage-3, .hp-demo[data-stage="4"] .hp-stage-4 { display: block; }
.hp-stage-head { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 12px; }
.hp-stage-head strong { font-weight: 600; }
.hp-stage-tag { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.hp-stage .in { opacity: 0; transform: translateY(6px); animation: hpUp 0.3s ease-out forwards; }
.hp-stage .in:nth-child(2) { animation-delay: 0.35s; }
.hp-stage .in:nth-child(3) { animation-delay: 0.7s; }
.hp-stage .in:nth-child(4) { animation-delay: 1.05s; }
.hp-stage .in:nth-child(5) { animation-delay: 1.4s; }
.hp-stage > .in { animation-delay: 1.3s; }
.hp-stage > .hp-engine-rows + .in, .hp-stage > .hp-options + .in, .hp-stage > .hp-doc + .in { animation-delay: 1.6s; }
.hp-stage > .hp-finding.in { animation-delay: 1.5s; }
.hp-demo.is-paused .hp-stage .in { animation: none; opacity: 1; transform: none; }
.hp-demo.is-paused .hp-agent.is-active .hp-agent-bar b { animation: none; width: 100%; }
.hp-engine-rows { display: grid; gap: 6px; }
.hp-engine-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 8px 10px; border-radius: 8px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.hp-engine-row .ok { color: var(--de-success); font-size: 11px; }
.hp-engine-row .track { color: var(--de-accent-text); font-size: 11px; }
.hp-finding { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.hp-finding-q { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.hp-finding-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 6px 0; border-top: 1px solid hsl(var(--border)); }
.hp-finding-row small { color: hsl(var(--muted-foreground)); margin-left: 4px; font-size: 10px; }
.hp-finding-row.you { font-weight: 600; }
.hp-options { display: grid; gap: 6px; }
.hp-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; padding: 9px 11px; border-radius: 10px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.hp-option div { display: grid; gap: 2px; }
.hp-option strong { font-weight: 600; }
.hp-option span:not(.hp-impact) { color: hsl(var(--muted-foreground)); font-size: 11px; }
.hp-option.top { border-color: var(--de-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.hp-impact { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; white-space: nowrap; }
.hp-impact.mid { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.hp-stage-note { font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 10px; line-height: 1.5; }
.hp-doc { border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); padding: 12px 14px; }
.hp-doc-title { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 8px; }
.hp-doc-section { display: grid; gap: 5px; padding: 7px 0; border-top: 1px solid hsl(var(--border)); font-size: 11.5px; }
.hp-doc-section strong { font-weight: 600; }
.hp-doc-section i { display: block; height: 3px; width: 92%; background: hsl(var(--muted)); border-radius: 2px; }
.hp-doc-section i:nth-of-type(2) { width: 70%; }
.hp-doc-section i:nth-of-type(3) { width: 84%; }
.hp-doc-chip { font-size: 10px; color: var(--de-accent-text); background: #dbeafe; border-radius: 999px; padding: 2px 7px; width: fit-content; }
.hp-doc-ready { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid hsl(var(--border)); margin-top: 4px; }
.hp-doc-btn { font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 8px; background: var(--de-accent); color: #fff; }
.hp-doc-btn.ghost { background: transparent; color: var(--de-ink); border: 1px solid hsl(var(--border)); }
.hp-followup { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); font-size: 12px; }
.hp-followup div { display: grid; gap: 2px; }
.hp-followup strong { font-weight: 600; }
.hp-followup span:not(.hp-followup-icon) { color: hsl(var(--muted-foreground)); font-size: 11px; }
.hp-followup-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #d1fae5; color: #047857; flex-shrink: 0; }
.hp-steps-mini { list-style: none; margin: 12px 0 0; padding: 0; display: flex; justify-content: space-between; gap: 8px; counter-reset: s; }
.hp-steps-mini li { flex: 1; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding-top: 8px; border-top: 2px solid hsl(var(--border)); transition: color var(--de-motion), border-color var(--de-motion); }
.hp-demo[data-stage="1"] .hp-steps-mini li:nth-child(1), .hp-demo[data-stage="2"] .hp-steps-mini li:nth-child(2),
.hp-demo[data-stage="3"] .hp-steps-mini li:nth-child(3), .hp-demo[data-stage="4"] .hp-steps-mini li:nth-child(4) { color: var(--de-accent); border-color: var(--de-accent); }
.hp-demo-foot { font-size: 12px; line-height: 1.6; color: hsl(var(--muted-foreground)); margin-top: 12px; }
.hp-demo-foot strong { color: var(--de-ink); font-weight: 500; }
.hp-label-warning, .hp-label-success {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 10px; padding: 4px 7px; border-radius: 999px; letter-spacing: 0; font-weight: 600;
}
.hp-label-warning { background: var(--de-warning-soft); color: var(--de-warning); }
.hp-label-success { background: var(--de-success-soft); color: var(--de-success); }

@keyframes hpUp { to { opacity: 1; transform: translateY(0); } }
@keyframes hpFill { to { width: 100%; } }
@keyframes hpDash { to { stroke-dashoffset: -24; } }
@keyframes hpPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- engine strip ---------- */
.hp-engines { border-block: 1px solid hsl(var(--border)); }
.hp-engines-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 29px; flex-wrap: wrap; }
.hp-engines p { font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.5; max-width: 180px; }
.hp-engines strong { font-weight: 500; color: var(--de-ink); }
.hp-engine-list { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; }
.hp-engine-list > span { font-size: 23px; letter-spacing: -0.6px; display: flex; align-items: center; gap: 10px; }
.hp-engine-list b { font-size: 26px; font-weight: 400; }
.hp-engines .extra { text-align: right; }

/* ---------- feature pair ----------
   Two surfaces: the founder's evidence table (card, hairlines) and the agent's draft
   (navy toolbar over a paper body), the same canvas/paper pair as the hero demo.
   Step markers carry the loop colours: blue discover, amber create, green verify. */
.hp-pair { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid hsl(var(--border)); margin-top: 56px; }
.hp-block { padding: 40px 56px 0 0; min-width: 0; display: flex; flex-direction: column; }
.hp-block + .hp-block { padding: 40px 0 0 56px; border-left: 1px solid hsl(var(--border)); }
.hp-step { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 500; color: hsl(var(--muted-foreground)); }
.hp-step::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--de-accent); flex-shrink: 0; }
.hp-block + .hp-block .hp-step::before { background: var(--de-warning); }
.hp-pair-foot .hp-step::before { background: var(--de-success); }
.hp-block h3 { font-size: 32px; font-weight: 500; letter-spacing: -1.2px; line-height: 1.15; margin-top: 20px; color: var(--de-ink); }
.hp-block > p { font-size: 16px; line-height: 1.65; color: hsl(var(--muted-foreground)); margin: 14px 0 36px; max-width: 440px; }
.hp-evidence, .hp-draft { margin-top: auto; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--de-radius); box-shadow: var(--de-shadow-sm); overflow: hidden; }
.hp-evidence { padding: 20px 24px 22px; }
.hp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.hp-toolbar strong { font-weight: 500; color: var(--de-ink); }
.hp-plain { font-size: 11px; color: hsl(var(--muted-foreground)); letter-spacing: 1.2px; text-transform: uppercase; }
.hp-evidence-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: 22px 0 10px; border-bottom: 1px solid var(--de-line-strong); }
.hp-evidence-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; color: var(--de-ink); padding: 13px 0; border-bottom: 1px solid hsl(var(--border)); }
.hp-evidence-foot { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: hsl(var(--muted-foreground)); padding-top: 16px; }
.hp-evidence-foot span:first-child { color: var(--de-success); font-weight: 600; }
.hp-draft { border-color: var(--de-dark); }
.hp-draft > .hp-toolbar { padding: 14px 20px; background: var(--de-dark); color: var(--de-on-dark); }
.hp-draft > .hp-toolbar strong { color: var(--de-on-dark); }
.hp-draft > .hp-toolbar .hp-label-success { background: var(--de-dark-success-soft); color: var(--de-dark-success); }
.hp-draft .hp-paper { padding: 24px 28px 22px; background: var(--de-paper); color: var(--de-paper-ink); }
.hp-paper-tag { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--de-paper-muted); }
.hp-paper-title { font-size: 20px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.25; margin-top: 8px; }
.hp-draft .hp-paper > p { font-size: 14px; color: var(--de-paper-muted); line-height: 1.6; margin-top: 10px; max-width: 360px; }
.hp-paper .lines { display: grid; gap: 8px; margin-top: 18px; }
.hp-paper .lines i { display: block; height: 7px; border-radius: 999px; background: var(--de-paper-line); }
.hp-paper .lines i:last-child { width: 62%; }
.hp-review {
  display: flex; justify-content: space-between; align-items: center; min-height: 48px;
  padding: 13px 20px; border-top: 1px solid var(--de-paper-line); background: var(--de-paper);
  font-size: 13px; font-weight: 500; color: var(--de-paper-ink); text-decoration: none; transition: color 160ms;
}
.hp-review:hover { color: var(--de-accent); }
.hp-review:hover span:first-child { text-decoration: underline; text-underline-offset: 5px; }
.hp-review:focus-visible { outline: 2px solid var(--de-accent); outline-offset: -2px; }
.hp-pair-foot { border-top: 1px solid hsl(var(--border)); margin-top: 56px; padding-top: 24px; display: grid; grid-template-columns: max-content 1fr; gap: 24px; align-items: baseline; font-size: 15px; line-height: 1.6; color: hsl(var(--muted-foreground)); max-width: 980px; }
.hp-pair-foot .hp-step { color: var(--de-ink); }
.dark .hp-draft { border-color: var(--de-dark-line); }
.dark .hp-draft > .hp-toolbar { background: hsl(var(--card)); border-bottom: 1px solid var(--de-dark-line); }

/* ---------- workflow band ---------- */
.hp-band { background: var(--de-dark); color: var(--de-on-dark); padding-block: 80px; }
.dark .hp-band { background: hsl(var(--card)); border-block: 1px solid var(--de-dark-line); }
.hp-band .hp-eyebrow, .hp-band .hp-side { color: var(--de-dark-muted); }
.hp-band h2 { color: var(--de-on-dark); font-size: clamp(30px, 3.4vw, 42px); margin-top: 20px; max-width: 700px; }
.hp-band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.hp-side { font-size: 14px; line-height: 1.65; max-width: 330px; }
html[lang][lang] .hp-band .answer-block { background: rgba(255,255,255,0.06); border-left: 3px solid var(--de-accent); color: var(--de-on-dark); margin: 24px 0 0; max-width: 720px; text-align: left; }
.hp-steps {
  list-style: none; margin: 48px 0 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--de-dark-line); border-radius: var(--de-radius); overflow: hidden;
}
.hp-steps li { padding: 28px 24px 26px; position: relative; counter-increment: step; }
.hp-steps li + li { border-left: 1px solid var(--de-dark-line); }
.hp-steps .num { font-size: 10px; letter-spacing: 1px; color: var(--de-dark-muted); display: block; }
.hp-steps .num::before { content: "0" counter(step) " / "; }
.hp-steps strong { font-size: 23px; font-weight: 400; display: block; margin-top: 26px; }
.hp-steps p { font-size: 13px; line-height: 1.6; margin-top: 10px; color: var(--de-dark-muted); max-width: 300px; }
.hp-steps .apps { display: block; font-size: 11px; margin-top: 18px; color: var(--de-dark-muted); border: 1px solid var(--de-dark-line); border-radius: 999px; padding: 6px 11px; width: fit-content; }
.hp-rule { height: 1px; background: var(--de-on-dark); margin-top: 30px; transform-origin: left; }
.hp-band-foot { font-size: 14px; line-height: 1.6; color: var(--de-dark-muted); margin-top: 22px; max-width: 760px; }
.hp-band-foot strong { color: var(--de-on-dark); font-weight: 500; }

/* ---------- difference ---------- */
.hp-diff { display: grid; grid-template-columns: 1fr 1.1fr; gap: 96px; }
.hp-diff-intro > .answer-block { margin-top: 24px; }
.hp-persona { border-top: 1px solid hsl(var(--border)); padding-top: 22px; margin-top: 28px; }
.hp-persona h3 { font-size: 19px; letter-spacing: -0.3px; font-weight: 500; }
.hp-persona p { font-size: 14px; line-height: 1.65; color: hsl(var(--muted-foreground)); margin-top: 9px; max-width: 380px; }
.hp-diff-list article { display: flex; gap: 24px; border-top: 1px solid hsl(var(--border)); padding: 25px 0; }
.hp-diff-list article > span { font-size: 26px; line-height: 1.1; min-width: 26px; }
.hp-diff-list h3 { font-size: 19px; letter-spacing: -0.3px; font-weight: 500; }
.hp-diff-list p { font-size: 14px; line-height: 1.65; color: hsl(var(--muted-foreground)); margin-top: 9px; }

/* ---------- free check band ---------- */
.hp-free { background: hsl(var(--card)); border-block: 1px solid hsl(var(--border)); padding-block: 64px; }
.hp-free-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.hp-free .hp-eyebrow { color: var(--de-success); }
.hp-free h2 { font-size: clamp(30px, 3.4vw, 42px); margin-top: 16px; }
.hp-pillars { margin-top: 40px; border: 1px solid hsl(var(--border)); border-radius: var(--de-radius); background: hsl(var(--background)); box-shadow: var(--de-shadow-sm); overflow: hidden; }
.hp-pillars-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 20px; border-bottom: 1px solid hsl(var(--border)); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.hp-pillars-head strong { font-weight: 500; color: var(--de-ink); margin-right: 10px; }
.hp-pillars ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: hsl(var(--border)); }
.hp-pillars li { background: hsl(var(--background)); padding: 18px 16px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hp-pillars li svg { width: 22px; height: 22px; color: var(--de-ink); }
.hp-pillars li b { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--de-ink); }
.hp-pillars .bar { display: block; height: 6px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; margin-top: auto; }
.hp-pillars .bar i { display: block; height: 100%; width: calc(var(--v, 0) * 1%); border-radius: inherit; background: var(--de-success); }
.hp-pillars li[data-band="mid"] .bar i { background: var(--de-warning); }
.hp-pillars li[data-band="gap"] .bar i { background: var(--de-danger); }
.hp-pillars li em { font-style: normal; display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: hsl(var(--muted-foreground)); }
.hp-pillars li[data-band="strong"] em span { color: var(--de-success); }
.hp-pillars li[data-band="mid"] em span { color: var(--de-warning); }
.hp-pillars li[data-band="gap"] em span { color: var(--de-danger); }
.hp-pillars li em strong { font-size: 15px; font-weight: 600; color: var(--de-ink); font-variant-numeric: tabular-nums; }
.hp-free-cta { text-align: right; }
.hp-free-cta small { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 12px; }

/* ---------- pricing teaser ---------- */
.hp-plans { margin: 40px 0 0; border-top: 1px solid hsl(var(--border)); }
.hp-plans > div { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.6fr; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid hsl(var(--border)); }
.hp-plans dt { font-size: 17px; font-weight: 500; }
.hp-plans dd { margin: 0; font-size: 14px; color: hsl(var(--muted-foreground)); }
.hp-plans dd.price { font-size: 30px; font-weight: 500; letter-spacing: -0.8px; color: var(--de-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-plans dd.price small { font-size: 13px; font-weight: 400; color: hsl(var(--muted-foreground)); letter-spacing: 0; margin-left: 4px; }
.hp-plans > div.payg dd.price { font-size: 20px; }
.hp-plan-actions { display: flex; align-items: center; gap: 28px; margin-top: 32px; flex-wrap: wrap; }

/* ---------- guides ---------- */
.hp-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 40px; border-top: 1px solid hsl(var(--border)); }
.hp-guides a {
  display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid hsl(var(--border)); text-decoration: none; color: var(--de-ink); min-height: 44px;
}
.hp-guides a:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.hp-guides .tag { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.hp-guides h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.2px; }
.hp-guides p { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 4px; line-height: 1.5; }

/* ---------- faq restyle (markup unchanged) ---------- */
html[lang][lang] .hp-faq .faq-header { text-align: left; margin: 0; max-width: none; }
html[lang][lang] .hp-faq .faq-header h2 { font-size: clamp(30px, 3.6vw, 45px); margin-top: 20px; max-width: 760px; text-align: left; }
html[lang][lang] .hp-faq .faq-header .answer-block { margin: 24px 0 0; max-width: 720px; font-size: 17px; line-height: 1.6; }
.hp-faq .faq-list { margin-top: 40px; border-top: 1px solid hsl(var(--border)); }
html[lang][lang] .hp-faq .faq-item { background: none; border: 0; border-bottom: 1px solid hsl(var(--border)); border-radius: 0; margin: 0; }
html[lang][lang] .hp-faq .faq-item summary { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; list-style: none; background: none; }
html[lang][lang] .hp-faq .faq-item summary::-webkit-details-marker { display: none; }
html[lang][lang] .hp-faq .faq-item summary h3 { font-size: 17px; font-weight: 500; margin: 0; color: var(--de-ink); }
html[lang][lang] .hp-faq .faq-item .faq-chevron { background: none; border: 1px solid hsl(var(--border)); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--de-ink); flex-shrink: 0; transition: transform var(--de-motion); }
html[lang][lang] .hp-faq .faq-item[open] .faq-chevron { transform: rotate(180deg); }
html[lang][lang] .hp-faq .faq-item .faq-answer { padding: 0 0 22px; font-size: 15px; line-height: 1.7; color: hsl(var(--muted-foreground)); max-width: 760px; }
html[lang][lang] .hp-faq .faq-item summary:hover { background: none; }
html[lang][lang] .hp-faq .faq-item summary:hover h3 { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- closing ---------- */
.hp-close { border-block: 1px solid hsl(var(--border)); padding-block: 96px; }
.hp-close-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.hp-close-actions { display: grid; gap: 14px; justify-items: start; }
.hp-close-actions small { font-size: 12px; color: hsl(var(--muted-foreground)); }
.hp-close-art { display: flex; align-items: flex-end; gap: 10px; margin-top: 40px; height: 120px; }
.hp-close-art i { display: block; width: 34px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 6px 6px 0 0; }
.hp-close-art i:nth-child(1) { height: 50%; }
.hp-close-art i:nth-child(2) { height: 75%; }
.hp-close-art i:nth-child(3) { height: 100%; }
.hp-close-art b { font-size: 28px; font-weight: 400; line-height: 1; margin-left: 6px; margin-bottom: 4px; }

/* ---------- scroll reveals (once, finish) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hp-reveal { opacity: 0; transform: translateY(8px); animation: hpUp linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    .hp-rule { transform: scaleX(0); animation: hpRule linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .hp-close-art i { opacity: 0; transform: translateY(8px); animation: hpUp linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .hp-pillars .bar i { transform-origin: left; transform: scaleX(0); animation: hpRule linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}
@keyframes hpRule { to { transform: scaleX(1); } }

/* ---------- mobile CTA bar ---------- */
.hp-mobile-cta { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hp-pillars ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-demo { margin-left: 0; max-width: none; }
  .hp-demo-foot { margin-left: 0; max-width: none; }
  .hp-diff { grid-template-columns: 1fr; gap: 48px; }
  .hp-close-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .hp-wrap { width: calc(100% - 32px); }
  .hp-section { padding-block: 64px; }
  .hp-demo { padding: 14px 12px 12px; border-radius: 16px; }
  .hp-agents { grid-template-columns: repeat(2, 1fr); }
  .hp-links { display: none; }
  .hp-agent-task { display: none; }
  .hp-demo-top { flex-direction: column; }
  .hp-engines-inner { gap: 16px; }
  .hp-engine-list { gap: 24px; }
  .hp-engine-list > span { font-size: 19px; }
  .hp-engines .extra { text-align: left; }
  .hp-pair { grid-template-columns: 1fr; margin-top: 40px; }
  .hp-block { padding: 32px 0 0; }
  .hp-block + .hp-block { padding: 32px 0 0; border-left: 0; border-top: 1px solid hsl(var(--border)); margin-top: 40px; }
  .hp-block h3 { font-size: 28px; letter-spacing: -0.8px; }
  .hp-block > p { margin-bottom: 28px; }
  .hp-evidence { padding: 16px 16px 18px; }
  .hp-draft .hp-paper { padding: 20px; }
  .hp-pair-foot { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
  .hp-band { padding-block: 56px; }
  .hp-band-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hp-steps { grid-template-columns: 1fr; }
  .hp-steps li + li { border-left: 0; border-top: 1px solid var(--de-dark-line); }
  .hp-free-grid { grid-template-columns: 1fr; gap: 28px; }
  .hp-free-cta { text-align: left; }
  .hp-pillars { margin-top: 32px; }
  .hp-pillars-head { flex-direction: column; gap: 4px; align-items: flex-start; }
  .hp-pillars-head strong { display: block; margin: 0 0 2px; }
  .hp-pillars li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hp-pillars ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-pillars li { padding: 16px 14px; }
  .hp-plans > div { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .hp-plans dd.engines { grid-column: 1 / -1; }
  .hp-guides { grid-template-columns: 1fr; }
  .hp-guides a { grid-template-columns: 1fr; gap: 4px; }
  .hp-mobile-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: hsl(var(--background)); border-top: 1px solid hsl(var(--border));
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  }
  .hp-mobile-cta a { flex: 1; justify-content: center; min-height: 44px; padding: 12px 16px; font-size: 15px; }
  body { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-stage .in, .hp-reveal, .hp-close-art i { opacity: 1; transform: none; animation: none; }
  .hp-link, .hp-agent-state i { animation: none; }
  .hp-agent.is-active .hp-agent-bar b { animation: none; width: 100%; }
  .hp-rule { transform: none; animation: none; }
}

/* ---------- compact hero demo (October 21, 2026): same loop, smaller footprint ---------- */
.hp-hero-grid { grid-template-columns: 1.08fr 1fr; gap: 48px; }
.hp-demo { max-width: 520px; margin-left: auto; padding: 14px 14px 12px; border-radius: 16px; }
.hp-demo-top { margin-bottom: 10px; gap: 12px; }
.hp-demo-title { font-size: 15px; }
.hp-demo-sub { font-size: 11px; margin-top: 2px; }
.hp-pause { min-height: 30px; padding: 4px 10px; font-size: 11px; }
.hp-agents { gap: 8px; }
.hp-agent { grid-template-columns: 26px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 2px; align-items: center; padding: 8px 9px; border-radius: 12px; }
.hp-bot { width: 26px; height: 26px; grid-row: 1 / span 2; margin: 0; }
.hp-agent-name { font-size: 11px; grid-column: 2; line-height: 1.15; }
.hp-agent-task { display: none; }
.hp-agent-state { grid-column: 2; margin-top: 0; font-size: 9.5px; }
.hp-agent-bar { grid-column: 1 / -1; margin-top: 4px; height: 2px; }
.hp-links { height: 26px; margin: 0 0 -2px; }
.hp-window { min-height: 0; border-radius: 12px; }
.hp-window-bar { padding: 7px 10px; }
.hp-window-name { font-size: 10px; }
.hp-stage { padding: 10px 12px 12px; min-height: 196px; }
.hp-stage-head { font-size: 12px; margin-bottom: 8px; gap: 8px; }
.hp-stage-tag { font-size: 9px; padding: 2px 7px; }
.hp-engine-rows { gap: 4px; }
.hp-engine-row { font-size: 11px; padding: 6px 9px; border-radius: 7px; }
.hp-engine-row .ok, .hp-engine-row .track { font-size: 10px; }
.hp-finding { margin-top: 6px; padding: 7px 10px; }
.hp-finding-q { font-size: 12px; margin-bottom: 3px; }
.hp-finding-row { font-size: 11px; padding: 4px 0; }
.hp-options { gap: 4px; }
.hp-option { font-size: 11px; padding: 6px 9px; }
.hp-option span:not(.hp-impact) { font-size: 10px; }
.hp-impact { font-size: 9px; padding: 2px 7px; }
.hp-stage-note { font-size: 10px; margin-top: 6px; }
.hp-doc { padding: 8px 11px; }
.hp-doc-title { font-size: 13px; margin-bottom: 4px; }
.hp-doc-section { padding: 4px 0; gap: 3px; font-size: 10.5px; }
.hp-doc-section i { height: 2px; }
.hp-doc-ready { padding-top: 6px; gap: 6px; }
.hp-doc-btn { font-size: 10px; padding: 4px 8px; }
.hp-followup { margin-top: 6px; padding: 7px 10px; font-size: 11px; }
.hp-followup span:not(.hp-followup-icon) { font-size: 10px; }
.hp-steps-mini { margin-top: 10px; }
.hp-steps-mini li { font-size: 9px; padding-top: 6px; }
.hp-demo-foot { font-size: 11px; margin-top: 10px; max-width: 520px; margin-left: auto; }
@media (max-width: 1024px) {
  .hp-demo, .hp-demo-foot { margin-left: 0; max-width: none; }
}
@media (max-width: 768px) {
  .hp-agent { grid-template-columns: 24px 1fr; }
}