:root{
  --bg:#090b1c;
  --bg2:#0f1330;
  --panel:#121735;
  --panel2:#171d42;
  --text:#f7f4ff;
  --muted:#a9b0cf;
  --line:rgba(255,255,255,.11);
  --purple:#c741ff;
  --pink:#ff3bc6;
  --cyan:#50dfdc;
  --green:#aee647;
  --danger:#ff526c;
  --yellow:#ffd45c;
  --phone:min(340px,82vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(circle at 12% 0%,rgba(197,61,255,.17),transparent 29rem),
    radial-gradient(circle at 88% 22%,rgba(69,223,219,.11),transparent 34rem),
    linear-gradient(180deg,#0b0d24,#080a18 74%);
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(black,transparent 85%);
}
img{display:block;max-width:100%}
button,a{font:inherit}
a{text-decoration:none;color:inherit}
.wrap{width:min(1180px,calc(100% - 34px));margin:auto}
.nav{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(16px);
  background:rgba(9,11,28,.72);
  border-bottom:1px solid rgba(255,255,255,.07)
}
.nav-inner{height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:900}
.brand span{color:var(--pink)}
.nav-links{display:flex;gap:20px;color:#c8cdea;font-size:.78rem}
.nav-links a:hover{color:white}
.cover{
  min-height:calc(100vh - 62px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);
  gap:54px;
  align-items:center;
  padding:72px 0;
}
.kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:var(--cyan)}
h1{font-size:clamp(3.1rem,7vw,6.9rem);line-height:.88;letter-spacing:-.06em;margin:16px 0 24px}
h1 em{display:block;font-style:normal;color:transparent;background:linear-gradient(90deg,#fff 5%,#ff79e0 50%,#b65cff);-webkit-background-clip:text;background-clip:text}
.cover-copy{max-width:670px;color:var(--muted);font-size:1.05rem;line-height:1.85}
.role-row{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:.76rem;color:#d8dcf1}
.cover-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line);font-weight:900;font-size:.8rem}
.btn.primary{background:linear-gradient(100deg,#9f39ef,#e53dbe);border:0}
.btn.ghost{background:rgba(255,255,255,.035)}
.cover-visual{position:relative;min-height:610px}
.cover-phone{
  position:absolute;right:2%;top:0;width:min(330px,72vw);aspect-ratio:338/602;border-radius:28px;overflow:hidden;
  box-shadow:0 32px 90px rgba(0,0,0,.55),0 0 0 7px #070918,0 0 0 8px rgba(255,255,255,.13);
}
.cover-phone img{width:100%;height:100%;object-fit:cover;animation:coverMove 5s ease-in-out infinite alternate}
@keyframes coverMove{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.08) translateY(-7px)}}
.cover-orbit{
  position:absolute;left:0;bottom:10%;width:235px;padding:18px;border-radius:20px;
  background:rgba(18,23,53,.88);border:1px solid var(--line);backdrop-filter:blur(12px)
}
.cover-orbit b{display:block;font-size:.88rem;margin-bottom:8px}
.cover-orbit p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.6}
.mini-flow{display:flex;align-items:center;gap:7px;margin-top:13px}
.mini-flow i{display:block;width:36px;height:36px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.mini-flow i img{width:100%;height:100%;object-fit:cover}
.mini-flow span{color:var(--pink);font-weight:900}
.cover-stat{
  position:absolute;right:-2%;bottom:4%;width:180px;padding:15px;border-radius:18px;
  background:linear-gradient(145deg,rgba(87,27,128,.96),rgba(29,22,65,.96));border:1px solid rgba(255,255,255,.15)
}
.cover-stat small{color:#d8c9ff}.cover-stat strong{display:block;font-size:1.85rem;margin:4px 0}.cover-stat p{margin:0;color:#d6cbea;font-size:.7rem;line-height:1.45}
.section{padding:96px 0}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.005));border-top:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055)}
.section-index{color:var(--cyan);font-weight:900;font-size:.73rem;letter-spacing:.14em}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);gap:40px;align-items:end;margin-bottom:34px}
h2{font-size:clamp(2rem,4.3vw,4.2rem);line-height:1;letter-spacing:-.05em;margin:10px 0 0}
.section-head p{color:var(--muted);line-height:1.75;margin:0}
.overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.statement{padding:30px;border-radius:24px;background:linear-gradient(145deg,rgba(28,34,75,.92),rgba(13,16,38,.94));border:1px solid var(--line)}
.statement h3{font-size:1.45rem;margin:0 0 15px}.statement p{margin:0;color:var(--muted);line-height:1.85}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact{padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}
.fact small{display:block;color:var(--cyan);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.fact b{font-size:.92rem}.fact p{color:var(--muted);font-size:.75rem;line-height:1.55;margin:7px 0 0}
.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.challenge{padding:22px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.028)}
.challenge strong{display:block;font-size:2rem;color:var(--pink);margin-bottom:16px}.challenge b{display:block;margin-bottom:9px}.challenge p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.7}
.core-loop{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:12px}
.loop-node{padding:20px 16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025);min-height:128px}
.loop-node small{color:var(--cyan);font-weight:900}.loop-node b{display:block;margin:10px 0 6px}.loop-node p{margin:0;color:var(--muted);font-size:.73rem;line-height:1.5}
.loop-arrow{text-align:center;color:var(--pink);font-size:1.5rem;font-weight:900}
.concept-banner{margin-top:26px;padding:26px;border-radius:22px;background:linear-gradient(100deg,rgba(192,53,248,.17),rgba(75,226,219,.09));border:1px solid rgba(208,87,255,.3)}
.concept-banner b{display:block;font-size:1.2rem;margin-bottom:8px}.concept-banner p{margin:0;color:#d6daef;line-height:1.75}
.storyboard{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.story-card{border-radius:19px;overflow:hidden;border:1px solid var(--line);background:#111630}
.story-card figure{margin:0;aspect-ratio:338/520;overflow:hidden;background:#20274e}
.story-card img{width:100%;height:100%;object-fit:cover}
.story-card div{padding:16px}.story-card small{color:var(--cyan);font-weight:900}.story-card b{display:block;margin:8px 0 6px}.story-card p{margin:0;color:var(--muted);font-size:.75rem;line-height:1.55}
.branch-map{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.branch{padding:22px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.branch.success{border-color:rgba(174,230,71,.34)}
.branch.fail{border-color:rgba(255,82,108,.34)}
.branch h3{margin:0 0 14px}.branch ol{margin:0;padding-left:20px;color:var(--muted);line-height:1.8;font-size:.86rem}
.branch-center{display:flex;align-items:center;color:var(--pink);font-size:1.8rem;font-weight:900}
.feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feedback-card{border-radius:22px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.feedback-images{display:grid;grid-template-columns:1fr 1fr}
.feedback-images img{width:100%;height:100%;aspect-ratio:338/520;object-fit:cover}
.feedback-copy{padding:22px}.feedback-copy h3{margin:0 0 10px}.feedback-copy p{margin:0;color:var(--muted);line-height:1.75}
.decisions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.decision{padding:21px;border-radius:19px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.decision small{color:var(--yellow);font-weight:900}.decision b{display:block;margin:10px 0 8px}.decision p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.7}
.demo-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.demo-copy h3{font-size:1.55rem;margin:0 0 12px}.demo-copy p{color:var(--muted);line-height:1.8}
.demo-notes{display:grid;gap:10px;margin-top:22px}
.demo-note{display:flex;gap:12px;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.demo-note span{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(213,62,255,.16);color:#f4ccff;font-size:.73rem;font-weight:900;flex:none}
.demo-note b{font-size:.82rem}.demo-note p{font-size:.75rem;margin:4px 0 0;color:var(--muted);line-height:1.5}
.demo-shell{position:relative}
.phone{
  width:var(--phone);aspect-ratio:338/602;position:relative;overflow:hidden;border-radius:25px;background:#20274e;
  box-shadow:0 28px 76px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.15),0 0 0 7px #070918;isolation:isolate
}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease,transform 2.8s ease;z-index:1}
.scene.active{opacity:1}.scene.motion{transform:scale(1.055)}.scene.shake{animation:shake .28s linear infinite}
@keyframes shake{0%,100%{transform:scale(1.04) translate(0)}25%{transform:scale(1.04) translate(-1.2px,1px)}75%{transform:scale(1.04) translate(1.2px,-1px)}}
.night{position:absolute;inset:0;z-index:8;background:linear-gradient(rgba(6,8,38,.2),rgba(4,6,27,.72));mix-blend-mode:multiply;opacity:0;transition:opacity 1s;pointer-events:none}
.night.on{opacity:.82}.vignette{position:absolute;inset:0;z-index:9;background:radial-gradient(circle,transparent 42%,rgba(3,3,18,.55));opacity:0;transition:.4s;pointer-events:none}.vignette.on{opacity:1}
.flash{position:absolute;inset:0;z-index:22;background:rgba(255,45,70,.24);opacity:0;pointer-events:none}.flash.on{animation:flash .75s ease 2}
@keyframes flash{0%,100%{opacity:0}40%{opacity:1}}
.smoke{position:absolute;inset:0;z-index:28;pointer-events:none}
.puff{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 16%,#ebeff3 38%,rgba(188,196,204,.88) 66%,transparent 73%);opacity:0;animation:puff .88s cubic-bezier(.12,.58,.35,1) forwards}
@keyframes puff{0%{transform:translate(-50%,-50%) scale(.28);opacity:0}18%{opacity:.98}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.25);opacity:0}}
.debris{position:absolute;width:8px;height:5px;border-radius:2px;background:#d98445;opacity:0;animation:debris .78s ease-out forwards}
@keyframes debris{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r));opacity:0}}
.status{
  position:absolute;left:50%;top:18%;transform:translateX(-50%);z-index:34;width:max-content;max-width:82%;
  padding:8px 12px;border-radius:999px;background:rgba(9,10,30,.76);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);font-size:.72rem;font-weight:900;opacity:0;transition:.25s
}
.status.show{opacity:1}
.hotspot{position:absolute;z-index:31;left:22%;top:69%;width:56%;height:13%;border:0;border-radius:18px;background:transparent;display:none;cursor:pointer}
.hotspot.show{display:block}.hotspot:before,.hotspot:after{content:"";position:absolute;inset:18% 30%;border-radius:14px;border:3px solid rgba(255,255,255,.94);animation:pulse 1.05s ease-out infinite}
.hotspot:after{inset:2% 18%;border-color:rgba(255,70,208,.58);animation-delay:.18s}
@keyframes pulse{0%{transform:scale(.6);opacity:0}30%{opacity:1}100%{transform:scale(1.28);opacity:0}}

.cta{position:absolute;z-index:39;left:50%;bottom:9%;transform:translate(-50%,15px);min-width:64%;padding:14px;border:0;border-radius:14px;background:linear-gradient(#d8ff6a,#96d91f);box-shadow:0 7px 0 #527f0a,0 12px 24px rgba(0,0,0,.35);font-weight:1000;color:#151021;opacity:0;pointer-events:none;transition:.35s}
.cta.show{opacity:1;pointer-events:auto;transform:translate(-50%,0);animation:beat 1.1s ease-in-out infinite}.cta.fail{background:linear-gradient(#ff6676,#e52b47);box-shadow:0 7px 0 #8c132b,0 12px 24px rgba(0,0,0,.35);color:white}
@keyframes beat{0%,100%{scale:1}50%{scale:1.035}}
.demo-panel{width:var(--phone);margin-top:18px;padding:13px;border:1px solid var(--line);border-radius:16px;background:rgba(17,21,44,.82)}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.72rem}.demo-top span{color:var(--muted)}
.track{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:10px}.fill{height:100%;transform-origin:left;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--danger));transition:transform .1s linear}
.demo-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.demo-controls button{border:1px solid var(--line);border-radius:12px;padding:10px 8px;color:white;background:#171c3a;cursor:pointer;font-size:.72rem;font-weight:900}.demo-controls .primary{background:linear-gradient(100deg,#8f37e6,#e533bb);border:0}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.result-card{padding:24px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.result-card h3{margin:0 0 10px}.result-card p{color:var(--muted);line-height:1.75;margin:0}.result-card ul{color:#dfe2f2;line-height:1.8;padding-left:20px}
.quote{margin-top:22px;padding:26px;border-radius:22px;background:linear-gradient(100deg,rgba(191,57,244,.15),rgba(57,220,219,.07));border:1px solid rgba(210,90,255,.25);font-size:1.12rem;line-height:1.7}
.footer{padding:34px 0 50px;color:#8188a9;font-size:.78rem;border-top:1px solid rgba(255,255,255,.06)}
@media(max-width:960px){
  .cover{grid-template-columns:1fr}.cover-visual{min-height:590px}.cover-phone{right:10%}.cover-orbit{left:8%}.cover-stat{right:3%}
  .overview-grid,.demo-layout{grid-template-columns:1fr}.demo-shell{justify-self:center}.storyboard{grid-template-columns:1fr 1fr}
  .challenge-grid,.decisions{grid-template-columns:1fr}.core-loop{grid-template-columns:1fr}.loop-arrow{transform:rotate(90deg)}
}
@media(max-width:700px){
  .nav-links{display:none}.section{padding:76px 0}.section-head{grid-template-columns:1fr}.fact-grid,.feedback-grid,.result-grid{grid-template-columns:1fr}
  .branch-map{grid-template-columns:1fr}.branch-center{justify-content:center;transform:rotate(90deg)}.cover-phone{right:3%}.cover-orbit{left:0}.cover-stat{right:0}
}
@media(max-width:520px){
  .wrap{width:min(100% - 20px,1180px)}.cover{padding-top:48px}.cover-visual{min-height:520px}.cover-phone{width:260px}.cover-orbit{width:200px;bottom:3%}.cover-stat{display:none}
  .storyboard{grid-template-columns:1fr 1fr}.story-card div{padding:12px}.story-card p{display:none}
}

/* v3: three-outcome branch structure and single-player video switcher */
.branch-map{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.branch{display:flex;flex-direction:column;overflow:hidden;padding:0}
.branch.success{border-color:rgba(174,230,71,.42)}
.branch.partial{border-color:rgba(255,205,92,.38)}
.branch.fail{border-color:rgba(255,82,108,.4)}
.branch-thumb{margin:0;aspect-ratio:338/430;overflow:hidden;background:#171c3a}
.branch-thumb img{width:100%;height:100%;object-fit:cover}
.branch-copy{padding:20px;display:flex;flex-direction:column;flex:1}
.branch-state{display:inline-flex;align-self:flex-start;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.07);font-size:.69rem;font-weight:900;color:#e6e8f6}
.branch h3{margin:13px 0 10px}
.branch ol{margin:0;padding-left:19px;color:var(--muted);line-height:1.75;font-size:.82rem}
.branch-result{margin-top:auto;padding-top:15px;font-size:.76rem;font-weight:900}
.branch.success .branch-result{color:var(--green)}
.branch.partial .branch-result{color:var(--yellow)}
.branch.fail .branch-result{color:var(--danger)}
.branch-intro{margin-bottom:18px;padding:17px 20px;border-radius:17px;border:1px solid var(--line);background:rgba(255,255,255,.025);display:flex;align-items:center;justify-content:space-between;gap:18px}
.branch-intro b{font-size:.9rem}.branch-intro span{color:var(--muted);font-size:.78rem}

.video-showcase{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:center}
.video-stage{min-height:680px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(28,34,75,.82),rgba(12,15,37,.92));display:grid;place-items:center;padding:28px;position:relative;overflow:hidden}
.video-stage:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(202,61,255,.2),transparent 68%);filter:blur(12px)}
.video-phone{position:relative;z-index:1;width:min(340px,78vw);aspect-ratio:352/626;border-radius:25px;overflow:hidden;background:#11152d;box-shadow:0 28px 70px rgba(0,0,0,.46),0 0 0 7px #070918,0 0 0 8px rgba(255,255,255,.13)}
.video-phone video{width:100%;height:100%;object-fit:cover;background:#11152d}
.video-tabs{display:grid;gap:12px}
.video-summary{padding:21px;border-radius:19px;border:1px solid var(--line);background:rgba(255,255,255,.025);margin-bottom:5px}
.video-summary small{color:var(--cyan);font-weight:900;letter-spacing:.1em}
.video-summary h3{margin:9px 0 8px;font-size:1.25rem}
.video-summary p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.65}
.video-tab{width:100%;text-align:left;padding:17px;border-radius:17px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:white;cursor:pointer;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}
.video-tab:hover{background:rgba(255,255,255,.055)}
.video-tab.active{border-color:rgba(215,72,255,.68);background:rgba(202,61,255,.12)}
.video-tab-index{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.07);font-weight:1000;color:#efccff}
.video-tab b{display:block;font-size:.85rem;margin-bottom:5px}.video-tab span{color:var(--muted);font-size:.73rem;line-height:1.45}
.video-tab.active span{color:#dfe2f3}

.demo-controls{grid-template-columns:repeat(3,1fr)}
.cta.image-hit{background:transparent!important;box-shadow:none!important;color:transparent!important;height:13%;padding:0;border:0}
.cta.image-hit.show{animation:none}
.demo-outcome-list{display:grid;gap:10px;margin-top:22px}
.demo-outcome{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.demo-outcome strong{font-size:.8rem;text-align:center;padding:8px 5px;border-radius:10px;background:rgba(207,62,255,.12);color:#efccff}
.demo-outcome b{display:block;font-size:.82rem}.demo-outcome p{font-size:.74rem;margin:4px 0 0;color:var(--muted);line-height:1.5}

@media(max-width:960px){
  .branch-map{grid-template-columns:1fr}
  .video-showcase{grid-template-columns:1fr}
  .video-stage{min-height:650px}
  .video-tabs{grid-template-columns:1fr}
}
@media(max-width:620px){
  .demo-controls{grid-template-columns:1fr}
  .video-stage{min-height:560px;padding:18px}
  .branch-intro{display:block}.branch-intro span{display:block;margin-top:7px}
}


/* v4 cover redesign */
.case-cover{
  min-height:720px;
  margin-top:34px;
  margin-bottom:34px;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  gap:0;
  align-items:stretch;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 15% 5%,rgba(204,57,255,.18),transparent 28rem),
    linear-gradient(145deg,#111735,#090c20);
  box-shadow:0 30px 80px rgba(0,0,0,.36);
}
.case-cover-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(38px,5vw,72px);
}
.case-title{
  margin:18px 0 22px;
  font-size:clamp(2.55rem,5.1vw,5.2rem);
  line-height:.96;
  letter-spacing:-.055em;
  max-width:690px;
}
.case-title span{
  display:block;
  margin-top:13px;
  color:transparent;
  background:linear-gradient(90deg,#fff 0%,#ff78de 46%,#b95bff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  font-size:.72em;
  line-height:1.06;
}
.case-cover-copy{
  max-width:610px;
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.8;
}
.case-role-row{margin:25px 0 0}
.case-cover-art{
  position:relative;
  min-height:720px;
  margin:0;
  overflow:hidden;
  background:#080c1f;
}
.case-cover-art:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(9,12,31,.62) 0%,rgba(9,12,31,.08) 20%,transparent 43%),
    linear-gradient(0deg,rgba(5,7,19,.4),transparent 32%);
}
.case-cover-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.case-cover-art figcaption{
  position:absolute;
  z-index:2;
  right:22px;
  bottom:18px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(5,7,20,.58);
  border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media(max-width:960px){
  .case-cover{
    grid-template-columns:1fr;
    min-height:0;
  }
  .case-cover-content{
    padding:46px 34px 38px;
  }
  .case-cover-art{
    min-height:680px;
  }
  .case-cover-art:before{
    background:linear-gradient(0deg,rgba(5,7,19,.38),transparent 38%);
  }
}
@media(max-width:560px){
  .case-cover{
    margin-top:20px;
    border-radius:22px;
  }
  .case-cover-content{
    padding:34px 22px 30px;
  }
  .case-title{
    font-size:2.5rem;
  }
  .case-cover-copy{
    font-size:.9rem;
  }
  .case-cover-art{
    min-height:500px;
  }
  .case-cover-art figcaption{
    display:none;
  }
}


/* v5: combine storyboard and interactive demo */
.interactive-flow-section{
  background:
    radial-gradient(circle at 18% 32%,rgba(202,61,255,.10),transparent 31rem),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.005));
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.interactive-section-head{margin-bottom:25px}
.interactive-flow-grid{
  display:grid;
  grid-template-columns:minmax(460px,1.1fr) minmax(320px,.9fr);
  gap:24px;
  align-items:start;
}
.interactive-demo-area{
  overflow:hidden;
  border-radius:25px;
  border:1px solid rgba(218,78,255,.27);
  background:linear-gradient(145deg,rgba(25,30,66,.94),rgba(10,13,32,.98));
}
.interactive-live-bar{
  min-height:64px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.025);
}
.interactive-live-bar div{
  display:flex;
  align-items:center;
  gap:9px;
}
.interactive-live-bar b{
  font-size:.76rem;
  letter-spacing:.09em;
}
.interactive-live-bar>span{
  color:var(--muted);
  font-size:.73rem;
}
.live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#aef052;
  box-shadow:0 0 0 5px rgba(174,240,82,.10);
  animation:livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{opacity:.65}
  50%{opacity:1;box-shadow:0 0 0 8px rgba(174,240,82,0)}
}
.interactive-demo-stage{
  min-height:720px;
  display:grid;
  place-items:center;
  padding:30px 22px 26px;
  background:
    radial-gradient(circle at 50% 35%,rgba(197,61,255,.15),transparent 25rem),
    rgba(5,8,24,.28);
}
.interactive-demo-stage .demo-shell{position:relative}
.interactive-flow-aside{
  display:grid;
  gap:15px;
}
.interactive-intro{
  padding:22px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.026);
}
.interactive-intro small{
  color:var(--cyan);
  font-weight:900;
  letter-spacing:.12em;
}
.interactive-intro h3{
  margin:10px 0 9px;
  font-size:1.35rem;
}
.interactive-intro p{
  margin:0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.7;
}
.compact-flow-list{
  display:grid;
  gap:9px;
}
.flow-step-card{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:13px;
  min-height:102px;
  overflow:hidden;
  border-radius:17px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.024);
}
.flow-step-card figure{
  margin:0;
  min-height:102px;
  overflow:hidden;
  background:#1b2146;
}
.flow-step-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.flow-step-card>div{
  align-self:center;
  padding:12px 13px 12px 0;
}
.flow-step-card small{
  color:var(--pink);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.09em;
}
.flow-step-card b{
  display:block;
  margin:5px 0 3px;
  font-size:.84rem;
}
.flow-step-card p{
  margin:0;
  color:var(--muted);
  font-size:.71rem;
  line-height:1.45;
}
.interactive-outcome-key{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.interactive-outcome-key>div{
  padding:13px 8px;
  text-align:center;
  border-radius:15px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.026);
}
.interactive-outcome-key strong{
  display:block;
  color:#f1c7ff;
  font-size:.94rem;
  margin-bottom:5px;
}
.interactive-outcome-key span{
  color:var(--muted);
  font-size:.67rem;
  line-height:1.4;
}
.interactive-demo-stage .demo-panel{
  background:rgba(12,16,39,.95);
}
@media(max-width:980px){
  .interactive-flow-grid{grid-template-columns:1fr}
  .interactive-demo-stage{min-height:690px}
  .interactive-flow-aside{
    grid-template-columns:1fr 1fr;
  }
  .interactive-intro,
  .interactive-outcome-key{
    grid-column:1 / -1;
  }
}
@media(max-width:650px){
  .interactive-live-bar{
    align-items:flex-start;
    flex-direction:column;
  }
  .interactive-demo-stage{
    min-height:600px;
    padding:26px 12px 22px;
  }
  .interactive-flow-aside{grid-template-columns:1fr}
  .interactive-intro,
  .interactive-outcome-key{
    grid-column:auto;
  }
  .flow-step-card{grid-template-columns:72px 1fr}
}


/* v6: simplified portfolio, asset showcase and stronger interactivity */
.compact-section{padding-bottom:78px}
.core-summary-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch
}
.core-summary-main{
  padding:30px;border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(27,33,73,.94),rgba(12,15,37,.96))
}
.core-summary-main small,.sequence-copy small,.demo-focus-copy>small,.summary-compact small{
  color:var(--cyan);font-size:.69rem;font-weight:900;letter-spacing:.12em
}
.core-summary-main h3{font-size:1.65rem;line-height:1.35;margin:12px 0}
.core-summary-main p{margin:0;color:var(--muted);line-height:1.8}
.core-flow-mini{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center
}
.core-flow-mini article{
  min-height:170px;padding:20px;border-radius:21px;border:1px solid var(--line);
  background:rgba(255,255,255,.026);display:flex;flex-direction:column;justify-content:center
}
.core-flow-mini article span{color:var(--pink);font-size:.72rem;font-weight:900}
.core-flow-mini article b{font-size:1.05rem;margin:9px 0 5px}
.core-flow-mini article p{margin:0;color:var(--muted);font-size:.78rem}
.core-flow-mini i{color:var(--pink);font-style:normal;font-weight:900}
.core-decision-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.core-decision-row article{padding:18px;border-radius:17px;border:1px solid var(--line);background:rgba(255,255,255,.022)}
.core-decision-row b{font-size:.86rem}.core-decision-row p{margin:7px 0 0;color:var(--muted);font-size:.76rem;line-height:1.6}

.asset-section{overflow:hidden}
.scene-viewer{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:14px}
.scene-stage{
  position:relative;aspect-ratio:2048/921;border-radius:24px;overflow:hidden;
  border:1px solid var(--line);background:#0a0d20;perspective:900px
}
.scene-stage img{
  width:100%;height:100%;object-fit:cover;transition:opacity .35s ease,transform .18s ease;
  transform-origin:center
}
.scene-stage.switching img{opacity:.18;transform:scale(1.025)}
.scene-stage-overlay{
  position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:55px 25px 23px;background:linear-gradient(transparent,rgba(5,8,22,.82))
}
.scene-stage-overlay>span{font-size:.7rem;font-weight:900;letter-spacing:.12em;color:var(--cyan)}
.scene-stage-overlay div{text-align:right;max-width:520px}
.scene-stage-overlay h3{margin:0 0 5px;font-size:1.2rem}.scene-stage-overlay p{margin:0;color:#d1d6e9;font-size:.76rem}
.scene-tabs{display:grid;gap:9px}
.scene-tab{
  min-height:74px;padding:13px 15px;border-radius:16px;border:1px solid var(--line);
  background:rgba(255,255,255,.025);color:white;text-align:left;cursor:pointer;transition:.22s
}
.scene-tab span{display:block;color:var(--cyan);font-size:.65rem;font-weight:900;margin-bottom:6px}
.scene-tab b{font-size:.8rem}
.scene-tab:hover{transform:translateX(-3px);background:rgba(255,255,255,.055)}
.scene-tab.active{border-color:rgba(213,66,255,.7);background:rgba(200,58,255,.12)}
.sequence-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.sequence-card{
  padding:22px;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(22,27,61,.9),rgba(10,13,33,.95))
}
.sequence-copy h3{margin:8px 0 7px}.sequence-copy p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.65}
.sequence-preview{
  display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:center;margin-top:18px
}
.sequence-track{
  height:170px;border-radius:18px;display:grid;place-items:center;overflow:hidden;
  background:
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25% 75%,rgba(255,255,255,.025) 75%),
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25% 75%,rgba(255,255,255,.025) 75%),
    #161b3b;background-size:24px 24px;background-position:0 0,12px 12px
}
.sequence-track img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 15px 18px rgba(0,0,0,.35));transition:transform .12s}
.sequence-card[data-sequence-card="small"] .sequence-track img{width:108px;height:108px}
.sequence-track img.frame-pop{animation:framePop .18s ease}
@keyframes framePop{0%{transform:translateY(2px) scale(.96)}100%{transform:none}}
.sequence-controls{display:grid;gap:13px}
.sequence-controls button{
  border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:rgba(255,255,255,.04);
  color:white;font-weight:900;cursor:pointer
}
.sequence-controls label{font-size:.72rem;color:var(--muted)}
.sequence-controls input{width:100%;margin-top:8px;accent-color:var(--pink)}
.sequence-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:17px}
.seq-thumb{
  aspect-ratio:1;border-radius:9px;border:1px solid var(--line);background:#171c3b;padding:3px;cursor:pointer;overflow:hidden
}
.seq-thumb img{width:100%;height:100%;object-fit:contain}
.seq-thumb.active{border-color:var(--pink);background:rgba(218,61,255,.12)}

.interactive-v6{
  background:radial-gradient(circle at 20% 34%,rgba(207,62,255,.11),transparent 33rem)
}
.demo-focus-grid{display:grid;grid-template-columns:minmax(430px,1.05fr) minmax(320px,.95fr);gap:24px;align-items:center}
.demo-focus-stage{
  position:relative;min-height:760px;padding:38px 22px 26px;border-radius:26px;
  display:grid;place-items:center;border:1px solid rgba(213,69,255,.32);
  background:linear-gradient(145deg,rgba(26,31,68,.94),rgba(7,10,28,.98))
}
.demo-live-label{
  position:absolute;left:18px;top:17px;display:flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:900;letter-spacing:.09em;color:#dfe3f4
}
.demo-live-label span{width:8px;height:8px;border-radius:50%;background:#a8ed52;animation:livePulse 1.3s infinite}
.demo-focus-copy{padding:10px}
.demo-focus-copy h3{font-size:1.5rem;line-height:1.35;margin:11px 0}.demo-focus-copy>p{color:var(--muted);line-height:1.75}
.demo-rule-list{display:grid;gap:9px;margin-top:20px}
.demo-rule-list article{
  display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center;padding:14px;
  border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.024)
}
.demo-rule-list strong{
  display:grid;place-items:center;height:48px;border-radius:12px;background:rgba(205,61,255,.12);color:#efccff
}
.demo-rule-list b{font-size:.82rem}.demo-rule-list p{margin:4px 0 0;color:var(--muted);font-size:.72rem;line-height:1.45}
.demo-jump{display:inline-flex;margin-top:20px;color:var(--cyan);font-size:.78rem;font-weight:900}
.demo-focus-stage .demo-shell{position:relative}


.video-v6 .video-showcase{margin-top:8px}
.summary-compact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.summary-compact article{padding:27px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.summary-compact h3{margin:10px 0 8px}.summary-compact p{margin:0;color:var(--muted);line-height:1.75}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){
  .core-summary-grid,.sequence-grid,.demo-focus-grid{grid-template-columns:1fr}
  .scene-viewer{grid-template-columns:1fr}
  .scene-tabs{grid-template-columns:repeat(4,1fr)}
  .scene-tab{text-align:center;min-height:64px}
}
@media(max-width:680px){
  .core-flow-mini{grid-template-columns:1fr}.core-flow-mini i{transform:rotate(90deg);text-align:center}
  .core-decision-row,.summary-compact{grid-template-columns:1fr}
  .scene-tabs{grid-template-columns:1fr 1fr}
  .sequence-preview{grid-template-columns:1fr}
  .sequence-track{height:150px}
  .sequence-strip{grid-template-columns:repeat(4,1fr)}
  .demo-focus-stage{min-height:660px;padding-left:10px;padding-right:10px}
}

.portfolio-return{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;gap:8px;padding:7px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(25,19,34,.78);box-shadow:0 14px 40px rgba(0,0,0,.32);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.portfolio-return button,.portfolio-return a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border:0;border-radius:999px;color:#f8f4ea;background:transparent;font:700 12px/1 Arial,"PingFang SC",sans-serif;text-decoration:none;cursor:pointer;transition:color .2s ease,background .2s ease,transform .2s ease}
.portfolio-return a{color:#221d18;background:#d5b37c}
.portfolio-return button:hover,.portfolio-return a:hover{transform:translateY(-2px)}
.portfolio-return button:hover{background:rgba(255,255,255,.12)}
@media(max-width:620px){.portfolio-return{right:10px;bottom:10px;left:10px;justify-content:center}.portfolio-return button,.portfolio-return a{flex:1;padding:0 10px}}