.hero-planner{padding: 88px 0 64px; position: relative; overflow:hidden;}
  .hero-planner::before{content:""; position:absolute; right: -200px; top: -150px; width: 600px; height: 600px;
    background: radial-gradient(circle, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%);
    filter: blur(40px); pointer-events: none;}
  .hero-planner > *{position: relative; z-index: 1;}
  .hero-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;}

  /* Map mock */
  .map-mock{
    aspect-ratio: 4/3;
    background:
      radial-gradient(circle at 25% 40%, color-mix(in oklab, var(--accent-soft) 60%, transparent) 0%, transparent 35%),
      radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--accent-soft) 40%, transparent) 0%, transparent 30%),
      repeating-linear-gradient(45deg, var(--bg-warm), var(--bg-warm) 18px, color-mix(in oklab, var(--bg-warm) 78%, var(--ink-3)) 18px, color-mix(in oklab, var(--bg-warm) 78%, var(--ink-3)) 19px);
    border-radius: 18px;
    border: 1px solid var(--line);
    position: relative;
    box-shadow: 0 30px 80px -50px oklch(0.17 0.04 330 / 0.4);
  }
  .map-mock .route{position:absolute; inset:0;}
  .pin{position: absolute; transform: translate(-50%, -100%);}
  .pin .dot{width: 36px; height: 36px; background: var(--accent); color:#fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 16px oklch(0.17 0.04 330 / 0.4); font-weight: 400; font-size: 13px;}
  .pin .dot span{transform: rotate(45deg);}
  .pin .label{position: absolute; top: 4px; left: 38px; background: #fff; padding: 6px 12px; border-radius: 8px; font-size: 11px; white-space: nowrap; box-shadow: 0 4px 14px oklch(0.17 0.04 330 / 0.15); font-family:'JetBrains Mono', monospace; line-height: 1.3;}
  .pin .label b{display:block; font-family:'Manrope', sans-serif; font-size: 11px;}
  .pin.start .dot{background: var(--ink); }

  /* before/after panels */
  .ba-panel{
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; font-family:'JetBrains Mono', monospace; font-size: 12px; line-height: 1.8;
  }
  .ba-row{display:flex; justify-content:space-between; padding: 4px 0;}
  .ba-row.head{font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px;}
  .ba-row .v{font-weight: 400; color: var(--ink);}
  .ba-row.savings{margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--accent); font-weight: 400;}

  /* features grid */
  .features-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px;}
  .feat-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding: 32px;}
  .feat-card .n{font-family:'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--accent);}
  .feat-card h4{font-family:'Instrument Serif', serif; font-weight: 400; font-size: 26px; margin: 12px 0 10px; line-height: 1.1;}
  .feat-card p{font-size: 14.5px; color: var(--ink-2); margin: 0;}

  /* how it works */
  .hiw{display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px;}
  .step{background:#fff; border:1px solid var(--line); border-radius: 14px; padding: 28px;}
  .step .n{font-family:'Instrument Serif', serif; font-size: 48px; color: var(--accent); line-height: 1;}
  .step h4{font-family:'Instrument Serif', serif; font-weight: 400; font-size: 22px; margin: 14px 0 6px;}
  .step p{font-size: 13.5px; color: var(--ink-2); margin: 0;}

  /* use cases */
  .uc-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px;}
  .uc{background:#fff; border:1px solid var(--line); border-radius:14px; padding: 24px 22px;}
  .uc h5{font-family:'Instrument Serif', serif; font-weight: 400; font-size: 22px; margin: 0 0 4px;}
  .uc small{font-size: 12px; color: var(--ink-3);}

  /* dark testimonial band */
  .quote-band{background: var(--ink); color: var(--bg); padding: 80px 0; text-align:center;}
  .quote-band p{font-family:'Instrument Serif', serif; font-style: italic; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2; letter-spacing: -0.02em; max-width: 820px; margin: 0 auto 24px;}
  .quote-band cite{font-style: normal; font-family:'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: color-mix(in oklab, var(--bg) 60%, transparent);}

  /* numbers strip */
  .nums{display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 64px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-warm);}
  .nums .v{font-family:'Instrument Serif', serif; font-size: 64px; line-height:1; letter-spacing:-0.02em;}
  .nums .v em{font-style: italic; color: var(--accent);}
  .nums .l{font-size: 13px; color: var(--ink-2); margin-top: 6px;}

  @media(max-width:960px){.hero-grid, .features-grid, .hiw, .uc-grid, .nums{grid-template-columns:1fr;}}
  @media(max-width:760px){.features-grid, .hiw{grid-template-columns:1fr 1fr;} .uc-grid{grid-template-columns:1fr 1fr;} .nums{grid-template-columns:1fr 1fr;}}