/* GoInterview · 首页样式 v1（2026-09-30 改版；中、英、韩三个首页共用）
   依赖 site.v1.css 里的色彩、按钮、页头页尾。改动要换版本号（home.v2.css）。 */

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{ font-size:17px; line-height:1.75; }
/* 韩文按词组断行，不在词中间断开（设计包《中英韩适配与验收》）；过长的一串仍可折行，不撑宽页面 */
:root:lang(ko) body{ word-break:keep-all; overflow-wrap:break-word; }
img,svg{ display:block; max-width:100%; }
h1,h2,h3{ margin:0; color:var(--ink); font-weight:700; line-height:1.2; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.section{ padding-block:104px; }
.eyebrow{ display:inline-block; font-size:15px; font-weight:650; line-height:1.4; color:var(--brand); letter-spacing:.01em; }
.section-head{ max-width:760px; }
.section-head h2{ margin-top:12px; font-size:42px; letter-spacing:-.01em; }
.section-head p{ margin-top:18px; max-width:720px; }
.section-head strong{ color:var(--ink); }

/* ── 首屏 ─────────────────────────────────────────────── */
.hero{ padding-block:48px 56px; }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,480px) minmax(0,1fr);
  gap:48px; align-items:center;
}
.hero h1{ margin-top:18px; font-size:60px; line-height:1.14; letter-spacing:-.01em; }
.hero__sub{ margin-top:22px; max-width:30em; }
.hero__actions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; }
.hero__note{ font-size:14px; line-height:1.65; color:var(--sub); }
.hero__note a{ color:var(--brand-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.hero__note--sys{ margin-top:16px; }
.hero__band{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 48px; align-items:start;
}
.hero__band > .hero__note{ max-width:34em; padding-top:4px; }
.hero__perk{ padding:16px 20px; background:var(--bg-tint); border-radius:var(--r-card); }
.hero__perk .hero__note{ color:var(--body); }
.hero__perk .hero__note + .hero__note{ margin-top:6px; font-size:13px; color:var(--sub); }

/* 右侧舞台：人物在左下，提示面板在右 */
.stage{ position:relative; min-height:540px; display:flex; align-items:flex-start; justify-content:flex-end; }
.stage__art{ position:absolute; left:-8px; bottom:0; z-index:0; pointer-events:none; }
.stage__art img{ width:500px; max-width:none; height:auto; transform-origin:30% 100%; transition:transform .4s ease; }
.stage.is-active .stage__art img{ transform:rotate(-.8deg); }
.stage__line{ position:absolute; left:172px; bottom:372px; z-index:1; width:118px; height:96px; color:var(--brand); pointer-events:none; }
.stage__line path{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.stage__line .stage__stroke{ stroke-dasharray:190; stroke-dashoffset:0; transition:stroke-dashoffset .9s ease; }
.stage.is-active .stage__line .stage__stroke{ stroke-dashoffset:190; transition:none; }

/* ── 点击演示面板 ─────────────────────────────────────── */
.demo{
  position:relative; z-index:2;
  width:390px; max-width:100%;
  margin-top:8px;
  padding:20px 20px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  box-shadow:0 22px 48px -28px rgba(17,17,17,.32), 0 2px 6px rgba(17,17,17,.04);
  font-size:15px; line-height:1.6;
}
.demo__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.demo__title{ font-size:16px; font-weight:700; color:var(--ink); }
.demo__badge{ padding:3px 8px; border-radius:var(--r-tag); background:var(--bg-soft); border:1px solid var(--line); font-size:12px; font-weight:600; line-height:1.5; color:var(--sub); white-space:nowrap; }
.demo__tabs{ margin-top:14px; display:flex; flex-wrap:wrap; gap:4px 18px; border-bottom:1px solid var(--line); }
.demo__tab{
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  margin-bottom:-1px; padding:8px 2px; min-height:40px;
  font-size:14.5px; font-weight:600; color:var(--sub); cursor:pointer;
  transition:color .14s ease, border-color .14s ease;
}
.demo__tab:hover{ color:var(--ink); }
.demo__tab[aria-pressed="true"]{ color:var(--brand-deep); border-bottom-color:var(--brand); }
.demo__tab[aria-pressed="true"]::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--brand); vertical-align:2px; }
.demo:not([data-demo-ready]) .demo__tabs,
.demo:not([data-demo-ready]) .demo__ctrl{ visibility:hidden; }

.demo__ex{ margin-top:16px; display:grid; gap:14px; }
.demo__step, [data-demo-chunk]{ transition:opacity .24s ease, transform .24s ease; }
.demo__step.is-off, [data-demo-chunk].is-off{ opacity:0; transform:translateY(8px); }
span[data-demo-chunk].is-off{ transform:none; }
.demo__label{ font-size:12.5px; font-weight:600; color:var(--sub); }
.demo__q{ margin-top:4px; font-size:16px; font-weight:600; line-height:1.55; color:var(--ink); }
.demo__chips{ margin-top:6px; display:flex; flex-wrap:wrap; gap:8px; }
.demo__chips li{ padding:3px 10px; border:1px solid var(--line); border-bottom:2px solid var(--brand); border-radius:var(--r-tag); font-size:13.5px; font-weight:600; color:var(--ink); }
.demo__star{ margin-top:8px; display:grid; gap:9px; }
.demo__star li{ display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; color:var(--ink); }
.demo__star b{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--bg-tint); color:var(--brand-deep); font-size:13.5px; font-weight:700; line-height:1; }
.demo__fill{ margin-top:10px; padding:7px 10px; border:1.5px dashed #CDB9D3; border-radius:8px; font-size:13.5px; color:var(--sub); }
.demo__langs{ margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; }
.demo__langs div{ display:flex; gap:6px; align-items:baseline; }
.demo__langs dt{ color:var(--sub); }
.demo__langs dd{ margin:0; padding:1px 8px; border:1px solid var(--line); border-radius:var(--r-tag); font-weight:600; color:var(--ink); }
.demo__outline{ margin-top:8px; display:grid; gap:9px; counter-reset:demo; }
.demo__outline li{ position:relative; padding-left:22px; color:var(--ink); }
.demo__outline li::before{ content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px; border-radius:50%; border:2px solid var(--brand); }
.demo__shot{ margin:6px 0 0; padding:12px 14px 14px; border:1.5px dashed var(--brand); border-radius:10px; background:var(--bg-soft); }
.demo__shot figcaption{ display:inline-block; margin-bottom:6px; padding:1px 8px; border-radius:var(--r-tag); background:var(--bg-tint); font-size:12px; font-weight:600; color:var(--brand-deep); }
.demo__shot p{ font-size:14.5px; line-height:1.6; color:var(--ink); }
.demo__short{ margin-top:4px; color:var(--ink); }
.demo__more{
  appearance:none; background:none; border:0; padding:6px 0; min-height:40px;
  font-size:14.5px; font-weight:600; color:var(--brand-deep); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.demo__more::after{ content:""; display:inline-block; width:7px; height:7px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-3px); transition:transform .16s ease; }
.demo__more[aria-expanded="true"]::after{ transform:rotate(-135deg) translateY(-1px); }
.demo__code{
  margin:6px 0 0; padding:12px 14px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.65; color:var(--ink);
  white-space:pre-wrap; overflow-wrap:anywhere; tab-size:4;
}
.demo__code code{ font:inherit; }
.demo__code .k{ color:var(--brand-deep); font-weight:600; }
.demo__code .c{ color:var(--sub); }
.demo__foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:10px; }
.demo__ctrl{ display:flex; flex-wrap:wrap; gap:10px; min-height:40px; }
.demo__note{ font-size:12.5px; line-height:1.55; color:var(--sub); }

/* ── 真实演示视频 ─────────────────────────────────────── */
.showcase{ padding-block:24px 0; }
.showcase .container{ max-width:calc(1040px + 2 * var(--gutter)); }
.appframe{ border:1px solid var(--line); border-radius:var(--r-panel); background:#fff; overflow:hidden; }
.appframe__bar{ display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; background:#fff; border-bottom:1px solid var(--line); }
.appframe__dots{ display:flex; gap:6px; flex:none; }
.appframe__dots i{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--ink); }
.appframe__dots i:first-child{ background:var(--brand); border-color:var(--brand); }
.appframe__title{ margin-inline:auto; padding-right:39px; font-size:13.5px; font-weight:600; line-height:1.4; color:var(--body); text-align:center; }
.appframe video{ display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0b1a2b; }

/* ── 四大能力：开放行 ─────────────────────────────────── */
.features{ margin-top:56px; border-top:1px solid var(--line); }
.feature{
  display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:56px; align-items:center;
  min-height:248px; padding-block:36px; border-bottom:1px solid var(--line);
}
.feature:nth-child(even) .feature__text{ order:2; }
.feature__icon{ width:40px; height:40px; border-radius:10px; border:1.5px solid var(--ink); color:var(--brand); display:grid; place-items:center; }
.feature h3{ margin-top:18px; font-size:24px; line-height:1.3; }
.feature p{ margin-top:10px; max-width:30em; }
.feature__visual{ display:flex; justify-content:center; align-items:center; }
.feature__visual img{ width:auto; height:auto; max-height:216px; }
.feature__visual svg{ width:100%; max-width:380px; height:auto; color:var(--ink); }
.feature__visual .ln{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.feature__visual .ln--p{ stroke:var(--brand); }
.feature__visual .ln--d{ stroke:var(--brand); stroke-dasharray:6 6; }
.feature__visual .fl{ fill:var(--bg-tint); stroke:none; }
.feature__visual .fp{ fill:var(--brand); stroke:none; }

/* ── 六套餐 ───────────────────────────────────────────── */
.pricing{ margin-top:48px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.plan{
  position:relative;
  display:flex; flex-direction:column; gap:20px;
  padding:28px 24px 24px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  font-size:15px; line-height:1.6;
}
.plan--featured{ background:var(--bg-tint); border:1.5px solid var(--brand); }
.plan__tag{ position:absolute; top:-13px; left:24px; padding:3px 12px; border-radius:999px; background:var(--brand); color:#fff; font-size:13px; font-weight:700; line-height:1.5; }
.plan__name{ font-size:19px; font-weight:700; line-height:1.3; color:var(--ink); }
.plan__desc{ margin-top:4px; font-size:14px; color:var(--sub); }
.plan__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; color:var(--ink); }
.plan__price b{ font-size:38px; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.plan__price span{ font-size:14.5px; font-weight:500; color:var(--body); }
.plan__alt{ margin-top:-12px; font-size:14px; color:var(--sub); }
.plan ul{ display:grid; gap:10px; }
.plan li{ display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; color:var(--ink); }
.plan li svg{ margin-top:5px; color:var(--brand); }
.plan .btn{ width:100%; margin-top:auto; }
.pricing__wx{ width:fit-content; max-width:100%; margin:32px auto 0; padding:10px 20px; border-radius:var(--r-btn); background:var(--bg-tint); border:1px solid rgba(162,28,175,.25); font-size:15px; font-weight:600; text-align:center; }
.pricing__wx a{ color:var(--brand-deep); text-decoration:none; }
.pricing__wx a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pricing__foot{ margin-top:18px; font-size:14px; color:var(--sub); text-align:center; }
.pricing__alt{ margin-top:6px; font-size:14px; text-align:center; }
.pricing__alt a{ color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px; }

/* ── 尾部按钮区 ───────────────────────────────────────── */
.cta{ padding-block:96px; background:var(--bg-tint); text-align:center; }
.cta h2{ font-size:42px; letter-spacing:-.01em; }
.cta p{ margin-top:16px; }
.cta__actions{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ── 滚动进入（类名由页面原有脚本加上）─────────────────── */
.reveal{ opacity:0; transform:translateY(12px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .34s ease, transform .34s ease; }

/* ── 平板 ─────────────────────────────────────────────── */
@media (max-width:1099px){
  .pricing{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* 1280 以下右栏放不下「人物在左、面板在右」：改成人物坐在面板上沿（用手机那张独立构图） */
@media (max-width:1279px){
  .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:start; }
  .stage{ min-height:0; display:block; padding-top:188px; }
  .stage__art{ left:auto; right:16px; top:0; bottom:auto; }
  .stage__art img{ width:208px; transform-origin:50% 100%; }
  .stage__line{ display:none; }
  .demo{ width:100%; margin-top:0; }
}
@media (max-width:1023px){
  .section{ padding-block:80px; }
  .section-head h2, .cta h2{ font-size:36px; }
  .hero{ padding-block:36px 48px; }
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .hero h1{ font-size:48px; line-height:1.18; }
  .hero__sub{ max-width:36em; }
  .feature{ gap:36px; }
  .cta{ padding-block:72px; }
}
/* ── 手机 ─────────────────────────────────────────────── */
@media (max-width:767px){
  body{ font-size:16px; }
  .section{ padding-block:56px; }
  .section-head h2, .cta h2{ font-size:30px; line-height:1.3; }
  .hero{ padding-block:24px 40px; }
  .hero h1{ margin-top:14px; font-size:36px; line-height:1.24; }
  .hero__actions .btn{ flex:1 1 100%; }
  .hero__band{ margin-top:32px; grid-template-columns:minmax(0,1fr); }
  .stage{ padding-top:150px; }
  .stage__art{ right:8px; }
  .stage__art img{ width:166px; }
  .demo{ padding:18px 16px 16px; }
  .features{ margin-top:36px; }
  .feature{ grid-template-columns:minmax(0,1fr); gap:20px; min-height:0; padding-block:28px; }
  .feature:nth-child(even) .feature__text{ order:0; }
  .feature h3{ font-size:21px; }
  .feature__visual img{ max-height:180px; }
  .feature__visual svg{ max-width:320px; }
  .pricing{ margin-top:36px; grid-template-columns:minmax(0,1fr); gap:20px; }
  .plan__price b{ font-size:34px; }
  .cta{ padding-block:56px; }
  .cta__actions .btn{ flex:1 1 100%; }
}
@media (max-width:340px){
  .hero h1{ font-size:32px; }
  .demo__tabs{ gap:4px 12px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .demo__step.is-off, [data-demo-chunk].is-off{ opacity:1; transform:none; }
}