/* Sub pages (POD / 八字AI / 渲染示例 / 大模型展示) */
body.sub-page { min-height: 100vh; }
.page { position: relative; z-index: 2; }
.page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 20% 40%, rgba(4, 6, 13, .55), transparent 60%), linear-gradient(180deg, transparent 70%, rgba(4, 6, 13, .5)); }

/* ---------- hero ---------- */
.sp-hero {
  position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center; gap: 2vw; padding: 128px var(--pad) 90px;
}
.sp-title { font: 700 clamp(38px, 5.4vw, 88px)/1.1 var(--serif); letter-spacing: .02em; margin: 26px 0 0; text-shadow: 0 0 60px rgba(var(--accent-rgb), .32), 0 2px 30px rgba(0, 0, 0, .6); }
.model-hero .sp-title { font-size: clamp(34px, 4.5vw, 72px); }
.sp-title em { font-style: normal; color: var(--accent); text-shadow: 0 0 40px rgba(var(--accent-rgb), .8); }
.sp-desc { max-width: 36em; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.95; color: rgba(238, 243, 251, .82); text-shadow: 0 1px 18px rgba(0, 0, 0, .6); }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 40px; }
.sp-note { font: 400 12px/1.8 var(--mono); letter-spacing: .08em; color: var(--faint); max-width: 44em; margin-top: 30px; }

/* visual anchor with HUD frame */
.sp-visual { position: relative; width: min(100%, 68vh); aspect-ratio: 1; justify-self: center; }
.sp-visual::before, .sp-visual::after { content: ""; position: absolute; width: 38px; height: 38px; border: 1px solid rgba(var(--accent-rgb), .6); pointer-events: none; transition: all .8s var(--ease); }
.sp-visual::before { left: -4%; top: 2%; border-right: 0; border-bottom: 0; }
.sp-visual::after { right: -4%; bottom: 2%; border-left: 0; border-top: 0; }
.sp-visual:hover::before { left: -7%; top: -1%; } .sp-visual:hover::after { right: -7%; bottom: -1%; }
.vlabel { position: absolute; font: 500 10px var(--mono); letter-spacing: .26em; color: rgba(var(--accent-rgb), .95); white-space: nowrap; text-shadow: 0 0 12px rgba(0, 0, 0, .9); display: flex; align-items: center; gap: 10px; pointer-events: none; }
.vlabel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.vlabel.tl { left: -2%; top: 14%; } .vlabel.br { right: -2%; bottom: 14%; flex-direction: row-reverse; } .vlabel.bl { left: 0; bottom: 6%; } .vlabel.tr { right: 0; top: 6%; flex-direction: row-reverse; }

.scroll-cue { position: absolute; left: var(--pad); bottom: 36px; display: flex; align-items: center; gap: 14px; font: 400 10px var(--mono); letter-spacing: .4em; color: var(--faint); }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--accent), transparent); transform-origin: 0 0; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- sections ---------- */
.sp-sec { position: relative; padding: clamp(70px, 12vh, 150px) var(--pad); }
.sec-head { max-width: 900px; margin-bottom: clamp(34px, 6vh, 70px); }
.sec-title { font: 700 clamp(28px, 3.6vw, 56px)/1.18 var(--serif); margin-top: 22px; letter-spacing: .02em; }

/* stats */
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-block: 1px solid var(--line); background: var(--line); padding: 0; }
.stat span { word-break: keep-all; }
.stat { background: rgba(4, 6, 13, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 44px 30px 40px; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease) .3s; }
.stat.in::after { transform: scaleX(1); }
.stat b { display: block; font: 700 clamp(44px, 5vw, 80px)/1 var(--mono); letter-spacing: -.04em; background: linear-gradient(180deg, #fff 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; margin-top: 14px; font-size: 14px; letter-spacing: .12em; color: var(--dim); }

/* cards */
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; perspective: 1200px; }
.sp-card {
  position: relative; display: block; overflow: hidden; border-radius: 26px; padding: clamp(28px, 3vw, 46px); min-height: 280px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  transform-style: preserve-3d; transition: transform .35s var(--ease), border-color .4s, box-shadow .5s; will-change: transform;
}
.sp-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .2), transparent 62%); }
.sp-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 1), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sp-card:hover::before, .sp-card:hover::after { opacity: 1; }
.sp-card:hover { box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 0 60px rgba(var(--accent-rgb), .12); }
.sp-card .idx { display: block; font: 700 clamp(54px, 6vw, 96px)/1 var(--mono); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .55); margin-bottom: 26px; transition: -webkit-text-stroke-color .4s, transform .8s var(--ease); transform: translateZ(40px); }
.sp-card:hover .idx { -webkit-text-stroke-color: rgba(var(--accent-rgb), 1); text-shadow: 0 0 30px rgba(var(--accent-rgb), .5); }
.sp-card h3 { font: 700 clamp(21px, 1.9vw, 28px)/1.3 var(--serif); margin-bottom: 16px; transform: translateZ(30px); }
.sp-card p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.9; color: var(--dim); transform: translateZ(18px); }
.sp-card .go { position: absolute; right: 30px; top: 30px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--accent); transition: all .5s var(--ease); }
.sp-card:hover .go { background: var(--accent); color: #04060d; transform: rotate(-45deg) scale(1.1); box-shadow: 0 0 30px var(--accent); }
.sp-card .tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sp-card .tags span { font: 400 11px var(--mono); letter-spacing: .12em; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .4); color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.sp-card.wide { grid-column: 1 / -1; min-height: 340px; }
.sp-card.wide h3 { font-size: clamp(26px, 3vw, 44px); }
.sp-card.wide p { max-width: 46em; }
.demo-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; font: 600 14px var(--sans); letter-spacing: .16em; color: var(--accent); }
.demo-cta svg { width: 18px; height: 18px; transition: transform .5s var(--ease); } .sp-card:hover .demo-cta svg { transform: translateX(8px); }

/* principles list (model page) */
.sp-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-grid.three .sp-card { min-height: 300px; }
.sp-card .eyebrow { display: block; font: 500 11px var(--mono); letter-spacing: .26em; color: var(--accent); margin-bottom: 40px; }

/* marquee + cta */
.sp-marquee { padding: 6vh 0; border-block: 1px solid var(--line); background: rgba(4, 6, 13, .35); }
.sp-cta { text-align: center; padding: clamp(90px, 16vh, 190px) var(--pad); position: relative; overflow: hidden; }
.sp-cta::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(900px, 90vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .22), transparent 62%); filter: blur(30px); pointer-events: none; }
.sp-cta h2 { position: relative; font: 700 clamp(30px, 4.6vw, 74px)/1.18 var(--serif); margin: 22px auto 44px; max-width: 14em; }
.sp-cta .kicker::before { display: none; }
.sp-bottom { text-align: center; padding: 0 var(--pad) 90px; font: 400 12px/1.9 var(--mono); letter-spacing: .12em; color: var(--faint); }
.sp-bottom span { color: var(--accent); margin-right: 10px; }

.footer.site-compliance { position: relative; z-index: 5; }

/* no-webgl fallback */
body.no-webgl { background: radial-gradient(ellipse at 70% 20%, rgba(var(--accent-rgb), .22), transparent 55%), var(--bg); }
body.no-webgl .sp-visual { background: radial-gradient(circle, rgba(var(--accent-rgb), .3), transparent 60%); border-radius: 50%; }

/* enroll: visual follows the form on desktop only */
.sp-visual.is-sticky { position: sticky; top: 14vh; align-self: start; }
@media (max-width: 1000px) {
  .sp-hero { grid-template-columns: 1fr; padding-top: calc(96px + env(safe-area-inset-top, 0px)); gap: 10px; min-height: 0; padding-bottom: 56px; }
  .sp-visual { width: min(86vw, 52vh); order: -1; margin-top: 4px; }
  .sp-title { margin-top: 16px; } .scroll-cue { display: none; }
  .sp-grid.three { grid-template-columns: 1fr; }
  .sp-card, .sp-card.wide, .sp-grid.three .sp-card { min-height: 0; }
  .vlabel { display: none; }
  .sp-visual.is-sticky { position: relative; top: auto; }
  .stat { padding: 30px 20px 28px; } .stat b { font-size: clamp(28px, 4.4vw, 44px); }
}
@media (max-width: 640px) {
  .sp-sec { padding: 56px 20px; }
  .sec-head { margin-bottom: 28px; }
  .sp-hero { padding-left: 20px; padding-right: 20px; }
  .sp-visual { width: min(82vw, 44vh); }
  .sp-visual::before { left: -3%; } .sp-visual::after { right: -3%; }
  .sp-actions { gap: 14px 18px; margin-top: 30px; }
  /* stats: 2 × 2 instead of four tall rows */
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 26px 18px 24px; }
  .stat b { font-size: clamp(30px, 9vw, 40px); }
  .stat span { font-size: 12px; letter-spacing: .06em; margin-top: 10px; line-height: 1.5; }
  .sp-grid { gap: 16px; grid-template-columns: 1fr; }
  .sp-card, .sp-card.wide, .sp-grid.three .sp-card { min-height: 0; border-radius: 20px; padding: 26px 22px 28px; }
  .sp-card .idx { font-size: 48px; margin-bottom: 16px; }
  .sp-card .eyebrow { margin-bottom: 20px; }
  .sp-card .go { right: 20px; top: 22px; width: 40px; height: 40px; }
  .sp-card.wide h3 { font-size: 24px; padding-right: 40px; }
  .sp-marquee { padding: 3vh 0; }
  .marquee-track span { font-size: 40px; }
  .sp-cta { padding: 80px 20px 90px; }
  .sp-cta h2 { margin: 18px auto 32px; }
  .sp-bottom { padding: 0 20px 60px; }
  .form-card { padding: 24px 20px; gap: 18px; }
}
/* the 3D backdrop on touch devices should never steal taps */
@media (pointer: coarse) { #stage { pointer-events: none; } }

/* enroll form */
.form-card { position: relative; display: grid; gap: 22px; margin-top: 38px; max-width: 520px; padding: clamp(26px, 3vw, 40px); border-radius: 26px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.form-card label { display: flex; flex-direction: column; gap: 10px; }
.form-card label span { font: 500 11px var(--mono); letter-spacing: .26em; color: var(--accent); }
.form-card input, .form-card select { width: 100%; padding: 15px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 6, 13, .55); color: var(--ink); font: 400 16px var(--sans); outline: none; transition: border-color .3s, box-shadow .3s; }
.form-card select option { background: #0a0e1a; color: #eef3fb; }
.form-card input:focus, .form-card select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18), 0 0 30px rgba(var(--accent-rgb), .2); }
.form-card .btn { justify-self: start; border: 0; cursor: pointer; }
.form-done { display: none; font: 400 15px/1.8 var(--sans); color: var(--ink); }
.form-card.done input, .form-card.done select, .form-card.done label, .form-card.done .btn { display: none; }
.form-card.done .form-done { display: block; padding: 10px 0; font-size: 18px; }
.form-card.done .form-done::before { content: "✦ "; color: var(--accent); }
/* phone landscape: visual beside the text again, otherwise the first screen is all visual */
@media (orientation: landscape) and (max-height: 560px) {
  .sp-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3vw; align-items: center;
    padding: calc(74px + env(safe-area-inset-top, 0px)) max(5vw, env(safe-area-inset-right, 0px)) 40px max(5vw, env(safe-area-inset-left, 0px));
  }
  .sp-visual { order: 0; width: min(33vw, 64vh); margin-top: 0; }
  .sp-visual.is-sticky { position: sticky; top: 70px; align-self: start; }
  .sp-title, .model-hero .sp-title { font-size: clamp(26px, 4.4vw, 40px); margin-top: 12px; }
  .sp-desc { font-size: 14px; line-height: 1.7; }
  .sp-actions { margin-top: 20px; }
  .sp-hero .rule { margin: 16px 0; }
  .sp-sec { padding-top: 56px; padding-bottom: 56px; }
  .sp-cta { padding: 64px 5vw 70px; }
}