.story-hero{padding: 96px 0 64px; text-align: center;}
  .story-hero .kicker{font-family:'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);}
  .story-hero h1{font-family:'Instrument Serif', serif; font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.025em; margin: 18px 0 16px;}
  .story-hero h1 em{font-style: italic; color: var(--accent);}
  .story-hero p{font-size: 18px; color: var(--ink-2); max-width: 640px; margin: 0 auto;}
  .story-hero .who{margin-top: 28px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 999px; background: var(--bg-warm); border: 1px solid var(--line);}
  .story-hero .who .av{width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.75 0.08 30), oklch(0.45 0.16 352)); color:#fff; font-weight: 400; font-size: 13px; display: flex; align-items: center; justify-content: center;}
  .story-hero .who span{font-size: 13px; color: var(--ink-2);}

  /* Scrollytelling layout */
  .scrolly{padding: 0 0 80px;}
  .scrolly-wrap{display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1240px; margin: 0 auto; padding: 0 28px;}
  .scrolly-text{display: flex; flex-direction: column; gap: 30vh;}
  .scene{min-height: 60vh; display: flex; flex-direction: column; justify-content: center;}
  .scene .time{font-family:'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase;}
  .scene h2{font-family:'Instrument Serif', serif; font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 18px;}
  .scene h2 em{font-style: italic; color: var(--accent);}
  .scene p{font-size: 17px; color: var(--ink-2); line-height: 1.6; max-width: 460px;}
  .scene .stat{margin-top: 28px; padding: 18px; background: var(--bg-warm); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; max-width: 460px;}
  .scene .stat .v{font-family:'Instrument Serif', serif; font-size: 32px; color: var(--accent); line-height: 1; margin-bottom: 6px;}
  .scene .stat .l{font-size: 13px; color: var(--ink-2);}

  /* Sticky right column: phone mockup */
  .scrolly-sticky{position: sticky; top: 100px; height: 80vh; display: flex; align-items: center; justify-content: center;}
  .phone{
    width: 320px; height: 640px;
    background: var(--ink); border-radius: 44px;
    padding: 14px;
    box-shadow: 0 40px 100px -50px oklch(0.17 0.04 330 / 0.5);
    position: relative;
  }
  .phone::before{content:""; position:absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 100px; height: 26px; background: var(--ink); border-radius: 14px; z-index: 5;}
  .phone-screen{width: 100%; height: 100%; background: var(--bg); border-radius: 32px; overflow: hidden; position: relative;}
  
  /* Phone scenes — stacked, only one visible at a time */
  .phone-scene{position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;}
  .phone-scene.active{opacity: 1;}
  .ps-top{padding: 52px 18px 14px; background: var(--accent-soft);}
  .ps-top h3{margin: 0; font-family:'Instrument Serif', serif; font-weight: 400; font-size: 20px; line-height: 1.1;}
  .ps-top small{font-size: 11px; color: var(--accent-ink); display: block; margin-top: 4px; font-family:'JetBrains Mono', monospace; letter-spacing: 0.06em;}
  .ps-body{padding: 16px;}

  .ps-row{padding: 11px 12px; margin-bottom: 8px; background: var(--bg-warm); border-radius: 10px; font-size: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px;}
  .ps-row b{display: block; font-size: 12px; font-weight: 400; margin-bottom: 2px;}
  .ps-row small{font-size: 10px; color: var(--ink-3); display: block;}
  .ps-row .tag{font-size: 9px; padding: 3px 6px; border-radius: 999px; align-self: start; font-family:'JetBrains Mono', monospace; letter-spacing: 0.05em; background: #fff;}
  .ps-row .tag.ok{background: oklch(0.92 0.05 150); color: oklch(0.32 0.08 150);}
  .ps-row .tag.warn{background: var(--accent-soft); color: var(--accent-ink);}
  .ps-row .tag.live{background: var(--accent); color: #fff;}

  .ps-banner{background: var(--accent); color: #fff; padding: 12px 16px; font-size: 12px; line-height: 1.4;}
  .ps-banner b{display: block; font-size: 13px; margin-bottom: 4px;}

  .ps-map{aspect-ratio: 1; margin: 14px 16px; border-radius: 12px; position: relative; overflow: hidden;
    background:
      radial-gradient(circle at 30% 40%, color-mix(in oklab, var(--accent-soft) 60%, transparent) 0%, transparent 35%),
      repeating-linear-gradient(45deg, var(--bg-warm), var(--bg-warm) 10px, color-mix(in oklab, var(--bg-warm) 78%, var(--ink-3)) 10px, color-mix(in oklab, var(--bg-warm) 78%, var(--ink-3)) 11px);
  }
  .ps-pin{position: absolute; width: 20px; height: 20px; background: var(--accent); color: #fff; border-radius: 50%; font-size: 10px; font-weight: 400; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); box-shadow: 0 4px 10px oklch(0.17 0.04 330 / 0.3);}

  .ps-card{margin: 14px 16px; padding: 14px; border-radius: 12px; background: var(--ink); color: var(--bg);}
  .ps-card .v{font-family:'Instrument Serif', serif; font-size: 36px; line-height: 1; color: oklch(0.85 0.15 350);}
  .ps-card .l{font-size: 11px; color: color-mix(in oklab, var(--bg) 70%, transparent); margin-top: 4px; font-family:'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase;}

  /* Outro */
  .outro{padding: 100px 0; text-align: center; background: var(--ink); color: var(--bg);}
  .outro h2{font-family:'Instrument Serif', serif; font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 18px;}
  .outro h2 em{color: oklch(0.85 0.15 350); font-style: italic;}
  .outro p{color: color-mix(in oklab, var(--bg) 75%, transparent); font-size: 18px; max-width: 540px; margin: 0 auto 32px;}

  @media (max-width: 960px){
    .scrolly-wrap{grid-template-columns: 1fr; gap: 0;}
    .scrolly-sticky{display: none;}
    .scene{min-height: auto; padding: 32px 0;}
    .scrolly-text{gap: 0;}
    .scene-mobile-mock{display: block;}
  }
  @media (min-width: 961px){
    .scene-mobile-mock{display: none;}
  }
  /* Mobile inline mock as alternative for non-sticky scrollytelling */
  .scene-mobile-mock{margin-top: 24px; padding: 20px; background: var(--bg-warm); border-radius: 14px; max-width: 460px;}
  .scene-mobile-mock .mini{font-family:'JetBrains Mono', monospace; font-size: 11px; line-height: 1.7;}