.hp-story { --bg:#070d1a; --panel:#0b1324; --panel2:#0d1628; --chip:#101b31; --line:#1a2742; --line2:#22314f; --text:#e6edf7; --head:#f3f6fb; --muted:#b4c1d6; --dim:#93a3bd; --accent:#3b82f6; --accent2:#3b82f6; --ease:opacity 450ms ease,transform 450ms ease,filter 450ms ease; display:none; }
  /* Stage */
  .hp-story { position: relative; height: 600px; border-radius: 18px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
  .hp-story .layer { position: absolute; transition: var(--ease); }
  .hp-story .off { opacity: 0; transform: translateY(14px); pointer-events: none; }
  .hp-story .on { opacity: 1; transform: none; }

  .hp-story .files { right: 32px; top: 24px; width: 44%; background: var(--panel2); border: 1px solid #1d2a46; border-radius: 14px; }
  .hp-story .files.dim { opacity: 0; filter: blur(4px); transform: scale(.97); pointer-events: none; }
  .hp-story .files.gone { opacity: 0; filter: blur(4px); transform: scale(.97); }
  .hp-story .files-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #1d2a46; }
  .hp-story .files-head strong { font-size: 14px; display: flex; gap: 10px; align-items: center; }
  .hp-story .files-head small { font-size: 12px; color: var(--dim); }
  .hp-story .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px; }
  .hp-story .file { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: var(--chip); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
  .hp-story .file span { font-size: 12px; color: #c9d4e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
  .hp-story .file small { font-size: 11px; color: #7f8fa8; flex: none; }

  .hp-story .founder { inset: 0; }
  .hp-story .founder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 40%; }
  .hp-story .founder .fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,13,26,.94) 0%, rgba(7,13,26,.8) 34%, rgba(7,13,26,.15) 62%, rgba(7,13,26,0) 100%); }
  .hp-story .intro { position: absolute; left: 64px; top: 50%; transform: translateY(-58%); max-width: 600px; display: flex; flex-direction: column; gap: 14px; }
  .hp-story .intro p { margin: 0; font-family: 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.18; letter-spacing: -.5px; }
  .hp-story .intro p:nth-child(1) { color: var(--accent2); }
  .hp-story .intro p:nth-child(2) { color: var(--head); }
  .hp-story .intro p:nth-child(3) { color: var(--muted); font-weight: 600; font-size: 30px; }
  .hp-story .w { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity 380ms ease, transform 380ms ease; transition-delay: 0ms; }
  .hp-story .founder.reveal .w { opacity: 1; transform: none; transition-delay: var(--d); }
  .hp-story .drtext { left: 64px; top: 50%; margin-top: -60px; width: 44%; }
  .hp-story .drtext p { margin: 0; font-family: 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.18; }

  .hp-story .quick { inset: 0; padding: 40px 120px 76px; display: flex; align-items: center; justify-content: center; text-align: center; }
  .hp-story .quick p { margin: 0; max-width: 900px; font-family: 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 46px; line-height: 1.15; letter-spacing: -.5px; color: var(--head); }
  .hp-story .answer, .hp-story .final { inset: 0; padding: 40px 48px 76px; display: flex; align-items: center; gap: 48px; }
  .hp-story .answer .txt { flex: 0 0 38%; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .hp-story .final .txt { flex: 0 0 46%; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .hp-story .tag { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; color: var(--accent2); text-transform: uppercase; }
  .hp-story .q { margin: 0; font-family: 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 38px; line-height: 1.15; letter-spacing: -.5px; color: var(--head); }
  .hp-story .cap { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
  .hp-story .pic { flex: 1 1 auto; height: 100%; display: flex; align-items: center; justify-content: center; min-width: 0; }
  .hp-story .pic img { max-width: 100%; max-height: 470px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
  .hp-story .final .pic img { max-height: 500px; }

  .hp-story .bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 22px; display: flex; align-items: center; gap: 18px; background: linear-gradient(0deg, rgba(7,13,26,.92), rgba(7,13,26,0)); z-index: 5; }
  .hp-story .theme { margin: 0; flex: none; font-size: 13px; color: #c3cee0; font-style: italic; }
  .hp-story .segs { flex: 1 1 auto; display: flex; gap: 3px; align-items: center; min-width: 0; }
  .hp-story .seg { height: 6px; min-width: 4px; padding: 0; border: none; border-radius: 3px; cursor: pointer; background: #24324f; }
  .hp-story .seg.done { background: var(--accent); }
  .hp-story .seg.now { background: var(--accent2); }
  .hp-story .count { flex: none; font-size: 12px; color: var(--dim); min-width: 112px; text-align: right; }
  .hp-story .play { flex: none; width: 44px; height: 44px; border-radius: 22px; border: 1px solid #2c3d61; background: #0f1a30; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }


@media(min-width:1024px) {
 .hp-has-story .hp-layout { grid-template-columns:1fr; grid-template-areas:'intro' 'story' 'audiences' 'trust'; gap:24px; padding-top:28px; }
 .hp-has-story .hp-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:36px; text-align:left; padding:0; }
 .hp-has-story .hp-eyebrow { grid-column:1; margin:0 0 12px; color:#3b82f6; }
 .hp-has-story h1 { grid-column:1; font-size:clamp(36px,3vw,48px)!important; margin:0 0 12px; }
 .hp-has-story h1 span { color:#3b82f6; }
 .hp-has-story .hp-lead { grid-column:1; max-width:800px; margin:0; font-size:17px; }
 .hp-has-story .hp-intro>.ddscore-btn { grid-column:2; grid-row:1 / span 3; align-self:end; }
 .hp-has-story .hp-report { display:none; }
 .hp-story { display:block; grid-area:story; width:100%; height:clamp(440px,calc(100svh - 330px),640px); isolation:isolate; }
}
.hp-story .intro { left:48px; max-width:49%; }
.hp-story .intro p,.hp-story .drtext p { font-size:clamp(28px,2.8vw,40px); }
.hp-story .intro p:nth-child(3) { font-size:clamp(23px,2.1vw,30px); }
.hp-story .answer,.hp-story .final { padding:32px 40px 72px; gap:36px; }
.hp-story .q { font-size:clamp(28px,2.75vw,38px); }
.hp-story .pic { min-height:0; }
.hp-story .pic img,.hp-story .final .pic img { max-height:100%; width:auto; height:auto; }
.hp-story .pic img[src*="exit-scenarios-card-en-clean"] { border:0; box-shadow:none; clip-path:inset(1.9% 1.1% round 12px); }
.hp-story .final .q { font-size:clamp(28px,2.85vw,40px)!important; }
.hp-story .intro p,.hp-story .drtext p,.hp-story .q,.hp-story .quick p { font-weight:550; }
.hp-story .intro p:nth-child(3) { font-weight:500; }
.hp-story .final { padding:20px 28px 68px; gap:24px; }
.hp-story .final .txt { flex-basis:36%; }
.hp-story-score { position:relative; height:100%; aspect-ratio:6 / 5; max-width:100%; overflow:hidden; border-radius:12px; }
.hp-story .final .hp-story-score img { position:absolute; width:110.08%; max-width:none; height:auto; max-height:none; left:-5.86%; top:-15.12%; border:0; border-radius:0; box-shadow:none; }
.hp-story .files { top:18px; bottom:76px; display:flex; flex-direction:column; }
.hp-story .files-head { flex:none; gap:10px; padding:12px; }
.hp-story .files-head strong { min-width:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-story .files-head small { flex:none; font-size:10px; }
.hp-story .grid { flex:1; min-height:0; grid-template-rows:repeat(12,minmax(0,1fr)); gap:4px; padding:8px; }
.hp-story .file { min-height:0; padding:3px 7px; }
.hp-story .file span { font-size:11px; }
.hp-story .file small { font-size:10px; }
.hp-story .bar { gap:14px; }
.hp-story .theme { max-width:290px; font-size:12px; }
.hp-story .seg { position:relative; height:24px; background:transparent; border-radius:0; }
.hp-story .seg::before { content:''; position:absolute; top:9px; left:0; right:0; height:6px; border-radius:3px; background:#24324f; }
.hp-story .seg.done,.hp-story .seg.now { background:transparent; }
.hp-story .seg.done::before { background:var(--accent); }
.hp-story .seg.now::before { background:#f3f6fb; }
.hp-story a { color:var(--accent2); text-decoration:none; }
.hp-story .cta { display:inline-block; background:var(--accent); color:#fff; font-weight:600; padding:15px 28px; border-radius:8px; }
.hp-story .ghost { display:inline-block; border:1px solid #2c3d61; color:#c9d4e6; font-weight:500; padding:14px 24px; border-radius:8px; }
.hp-story a:focus-visible,.hp-story button:focus-visible { outline:2px solid #8ab4ff; outline-offset:5px; }
.hp-has-story .hp-audiences { padding-top:28px; }
.hp-has-story .hp-audiences-heading { margin:0 0 32px; color:#fff; text-align:center; font-size:clamp(24px,2.4vw,32px); font-weight:550; line-height:1.25; }
@media(min-width:1024px) and (max-width:1190px) { .hp-story .theme { display:none; } .hp-has-story .hp-intro { column-gap:22px; } }
@media(prefers-reduced-motion:reduce) { .hp-story .layer,.hp-story .w { transition:none; } .hp-story .w { opacity:1; transform:none; } }