<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" role="img" aria-labelledby="ppf-hero-title ppf-hero-desc">
  <title id="ppf-hero-title">How paint protection film defends your vehicle</title>
  <desc id="ppf-hero-desc">Side-view illustration of a modern sedan. Rocks and road debris strike the front-end panels but deflect off a red-glowing paint protection film barrier, leaving the paint untouched.</desc>

  <defs>
    <radialGradient id="ppf-bg" cx="28%" cy="14%" r="72%">
      <stop offset="0" stop-color="#d8181e" stop-opacity="0.30" />
      <stop offset="0.55" stop-color="#d8181e" stop-opacity="0.05" />
      <stop offset="1" stop-color="#0a0a0a" stop-opacity="0" />
    </radialGradient>

    <linearGradient id="ppf-body" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#2a2a2a" />
      <stop offset="0.5" stop-color="#141414" />
      <stop offset="1" stop-color="#070707" />
    </linearGradient>

    <linearGradient id="ppf-body-lower" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#161616" />
      <stop offset="1" stop-color="#050505" />
    </linearGradient>

    <linearGradient id="ppf-glass" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#1a1a1a" stop-opacity="0.96" />
      <stop offset="1" stop-color="#050505" stop-opacity="0.96" />
    </linearGradient>

    <!-- Film shield glow gradient (used along hood + bumper line) -->
    <linearGradient id="ppf-shield" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0" stop-color="#ff4d55" stop-opacity="0.0" />
      <stop offset="0.15" stop-color="#ff4d55" stop-opacity="0.9" />
      <stop offset="0.5" stop-color="#ff8388" stop-opacity="1.0" />
      <stop offset="0.85" stop-color="#ff4d55" stop-opacity="0.9" />
      <stop offset="1" stop-color="#ff4d55" stop-opacity="0.0" />
    </linearGradient>

    <!-- Impact burst radial -->
    <radialGradient id="ppf-burst" cx="50%" cy="50%" r="50%">
      <stop offset="0" stop-color="#fff2b0" stop-opacity="1" />
      <stop offset="0.3" stop-color="#ffb93b" stop-opacity="0.9" />
      <stop offset="0.7" stop-color="#d8181e" stop-opacity="0.6" />
      <stop offset="1" stop-color="#d8181e" stop-opacity="0" />
    </radialGradient>

    <filter id="ppf-soft" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="12" />
    </filter>

    <filter id="ppf-soft-sm" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" />
    </filter>

    <!-- Rock symbols -->
    <symbol id="rock-a" viewBox="0 0 40 32">
      <polygon points="4,16 10,4 22,2 34,8 38,20 30,30 14,30 6,24"
               fill="#5a5a5a" stroke="#7a7a7a" stroke-width="1" stroke-linejoin="round" />
      <polygon points="12,12 18,8 24,10 22,16 16,18" fill="#7a7a7a" opacity="0.65" />
      <polygon points="22,20 28,18 30,24 24,26" fill="#2a2a2a" opacity="0.7" />
    </symbol>

    <symbol id="rock-b" viewBox="0 0 40 32">
      <polygon points="6,14 14,4 28,6 36,16 32,28 18,28 8,22"
               fill="#4a4a4a" stroke="#6a6a6a" stroke-width="1" stroke-linejoin="round" />
      <polygon points="14,10 22,8 26,14 18,16" fill="#6a6a6a" opacity="0.6" />
      <polygon points="20,18 26,16 28,22 22,24" fill="#2a2a2a" opacity="0.65" />
    </symbol>
  </defs>

  <!-- Background -->
  <rect x="0" y="0" width="800" height="500" fill="#0a0a0a" />
  <rect x="0" y="0" width="800" height="500" fill="url(#ppf-bg)" />

  <!-- Ground lines -->
  <g stroke="#1a1a1a" stroke-width="1">
    <line x1="0" y1="410" x2="800" y2="410" />
    <line x1="0" y1="430" x2="800" y2="430" opacity="0.6" />
    <line x1="0" y1="455" x2="800" y2="455" opacity="0.35" />
  </g>

  <!-- Ground shadow under car -->
  <ellipse cx="440" cy="398" rx="310" ry="13" fill="#000000" opacity="0.6" filter="url(#ppf-soft-sm)" />

  <!-- ================= WHEELS (drawn first) ================= -->
  <g>
    <!-- Rear wheel -->
    <circle cx="245" cy="360" r="38" fill="#0e0e0e" stroke="#2a2a2a" stroke-width="1.5" />
    <circle cx="245" cy="360" r="24" fill="#181818" />
    <circle cx="245" cy="360" r="14" fill="#262626" />
    <circle cx="245" cy="360" r="5" fill="#0a0a0a" />
    <g stroke="#3a3a3a" stroke-width="1.6" stroke-linecap="round">
      <line x1="245" y1="346" x2="245" y2="374" />
      <line x1="231" y1="360" x2="259" y2="360" />
      <line x1="235" y1="350" x2="255" y2="370" />
      <line x1="255" y1="350" x2="235" y2="370" />
    </g>

    <!-- Front wheel -->
    <circle cx="625" cy="360" r="38" fill="#0e0e0e" stroke="#2a2a2a" stroke-width="1.5" />
    <circle cx="625" cy="360" r="24" fill="#181818" />
    <circle cx="625" cy="360" r="14" fill="#262626" />
    <circle cx="625" cy="360" r="5" fill="#0a0a0a" />
    <g stroke="#3a3a3a" stroke-width="1.6" stroke-linecap="round">
      <line x1="625" y1="346" x2="625" y2="374" />
      <line x1="611" y1="360" x2="639" y2="360" />
      <line x1="615" y1="350" x2="635" y2="370" />
      <line x1="635" y1="350" x2="615" y2="370" />
    </g>
  </g>

  <!-- ================= CAR BODY (cleaner sedan proportions) ================= -->
  <!-- Lower sill (darker, under character line) -->
  <path d="M 138 345
           Q 128 342 128 330
           L 128 320
           Q 130 312 145 310
           L 740 310
           Q 755 312 755 330
           L 755 345 Z"
        fill="url(#ppf-body-lower)" stroke="#2a2a2a" stroke-width="1.2" />

  <!-- Upper body / greenhouse -->
  <path d="M 145 310
           L 228 302
           Q 244 300 254 288
           L 292 218
           Q 330 196 400 193
           L 452 193
           Q 510 196 536 218
           L 566 248
           L 600 268
           L 706 282
           Q 742 286 750 308
           L 750 310 Z"
        fill="url(#ppf-body)" stroke="#3a3a3a" stroke-width="1.5" />

  <!-- Body character line (thin highlight along waist) -->
  <line x1="150" y1="310" x2="746" y2="310" stroke="#1a1a1a" stroke-width="1" opacity="0.9" />
  <line x1="152" y1="312" x2="744" y2="312" stroke="#3a3a3a" stroke-width="0.6" opacity="0.55" />

  <!-- Door split lines -->
  <g stroke="#2a2a2a" stroke-width="1.2">
    <line x1="395" y1="200" x2="395" y2="340" />
    <line x1="540" y1="220" x2="540" y2="340" />
  </g>

  <!-- Door handles -->
  <rect x="325" y="272" width="34" height="4" rx="2" fill="#4a4a4a" />
  <rect x="445" y="272" width="34" height="4" rx="2" fill="#4a4a4a" />

  <!-- ================= WINDOWS ================= -->
  <!-- Rear passenger window -->
  <path d="M 298 222 L 392 200 L 392 240 L 305 240 Z"
        fill="url(#ppf-glass)" stroke="#2a2a2a" stroke-width="1" />

  <!-- Front/driver window -->
  <path d="M 398 200 L 534 220 L 534 240 L 398 240 Z"
        fill="url(#ppf-glass)" stroke="#2a2a2a" stroke-width="1" />

  <!-- Windshield (leading glass) -->
  <path d="M 540 222 L 564 246 L 540 240 Z"
        fill="url(#ppf-glass)" stroke="#2a2a2a" stroke-width="1" />

  <!-- ================= PPF SHIELD ================= -->
  <!-- Soft red glow along protected panels (hood + fender + bumper) -->
  <g>
    <!-- Large blur glow -->
    <path d="M 566 248 L 600 268 L 706 282 Q 742 286 750 308 L 750 335"
          fill="none" stroke="#d8181e" stroke-width="24"
          stroke-linecap="round" opacity="0.22"
          filter="url(#ppf-soft)" />

    <!-- Sharp film line -->
    <path d="M 566 246 L 600 266 L 706 280 Q 744 284 752 308 L 752 335"
          fill="none" stroke="#ff4d55" stroke-width="2.6"
          stroke-linecap="round" opacity="0.95" />

    <!-- Inner highlight -->
    <path d="M 572 246 L 602 264 L 706 278 Q 742 282 749 307"
          fill="none" stroke="#ffe6e6" stroke-width="0.9"
          stroke-linecap="round" opacity="0.6" />
  </g>

  <!-- ================= ROCKS + TRAJECTORIES ================= -->

  <!-- Rock #1 — MAIN: mid-strike on hood, bouncing off (dominant story element) -->
  <g>
    <!-- Incoming trajectory (solid grey, fading in) -->
    <line x1="430" y1="50" x2="660" y2="268"
          stroke="#888" stroke-width="1.6"
          stroke-linecap="round" stroke-dasharray="5 5" opacity="0.65" />

    <!-- Impact burst -->
    <g transform="translate(668 274)">
      <circle cx="0" cy="0" r="58" fill="url(#ppf-burst)" opacity="0.9" filter="url(#ppf-soft-sm)" />
      <circle cx="0" cy="0" r="28" fill="url(#ppf-burst)" opacity="1" />
      <!-- Ray flicks -->
      <g stroke="#ffb93b" stroke-width="2.8" stroke-linecap="round" opacity="0.92">
        <line x1="-28" y1="-22" x2="-44" y2="-34" />
        <line x1="30"  y1="-20" x2="46"  y2="-30" />
        <line x1="-2"  y1="-30" x2="-4"  y2="-50" />
        <line x1="24"  y1="22"  x2="38"  y2="36" />
        <line x1="-26" y1="18"  x2="-40" y2="28" />
        <line x1="6"   y1="30"  x2="12"  y2="48" />
      </g>
    </g>

    <!-- Deflection arc (bouncing up and back) -->
    <path d="M 665 266 Q 628 210 555 160"
          fill="none" stroke="#ff4d55" stroke-width="2.8"
          stroke-linecap="round" stroke-dasharray="6 5" opacity="0.92" />
    <path d="M 562 166 L 552 156 L 568 152"
          fill="none" stroke="#ff4d55" stroke-width="2.8"
          stroke-linecap="round" stroke-linejoin="round" />

    <!-- The rock itself (mid-deflection, above impact) -->
    <g transform="translate(640 232) rotate(22)">
      <use href="#rock-a" x="-26" y="-21" width="52" height="42" />
    </g>
  </g>

  <!-- Rock #2 — smaller, incoming toward bumper -->
  <g>
    <line x1="760" y1="90" x2="734" y2="300"
          stroke="#888" stroke-width="1.3"
          stroke-linecap="round" stroke-dasharray="5 5" opacity="0.55" />
    <g transform="translate(742 240) rotate(-16)">
      <use href="#rock-b" x="-18" y="-14" width="36" height="28" />
    </g>
  </g>

  <!-- Rock #3 — already deflected, flying away upper-left (past the callout) -->
  <g>
    <path d="M 600 260 Q 500 215 400 150"
          fill="none" stroke="#ff4d55" stroke-width="1.8"
          stroke-linecap="round" stroke-dasharray="5 6" opacity="0.5" />
    <g transform="translate(408 146) rotate(-28)">
      <use href="#rock-a" x="-14" y="-11" width="28" height="22" />
    </g>
  </g>

  <!-- ================= CALLOUT PILLS ================= -->
  <g font-family="'Bebas Neue', 'Oswald', Impact, sans-serif" letter-spacing="1.2">
    <!-- SELF-HEALING (upper-left, connector to hood) -->
    <g transform="translate(140 200)">
      <rect x="-82" y="-20" width="178" height="40" rx="20" fill="#0f0f0f" stroke="#ff4d55" stroke-opacity="0.6" />
      <circle cx="-64" cy="0" r="5" fill="#ff4d55" />
      <text x="-52" y="-3" fill="#ffffff" font-size="12">SELF-HEALING</text>
      <text x="-52" y="13" fill="#ff4d55" font-size="12">FILM REFLOWS</text>
    </g>

    <!-- ROCK CHIPS / DEFLECTED (top-center, pointing at impact) -->
    <g transform="translate(400 90)">
      <rect x="-82" y="-20" width="168" height="40" rx="20" fill="#0f0f0f" stroke="#ffb93b" stroke-opacity="0.65" />
      <circle cx="-64" cy="0" r="5" fill="#ffb93b" />
      <text x="-52" y="-3" fill="#ffffff" font-size="12">ROCK CHIPS</text>
      <text x="-52" y="13" fill="#ffb93b" font-size="12">DEFLECTED</text>
    </g>

    <!-- OPTICALLY CLEAR (upper-right) -->
    <g transform="translate(690 175)">
      <rect x="-76" y="-20" width="162" height="40" rx="20" fill="#0f0f0f" stroke="#ffffff" stroke-opacity="0.4" />
      <circle cx="-60" cy="0" r="5" fill="#ffffff" opacity="0.85" />
      <text x="-48" y="-3" fill="#ffffff" font-size="12">OPTICALLY CLEAR</text>
      <text x="-48" y="13" fill="#cccccc" font-size="12">10-YEAR WARRANTY</text>
    </g>

    <!-- Dotted connector lines (subtle, guiding the eye) -->
    <g stroke="#3a3a3a" stroke-width="1" stroke-dasharray="3 4" opacity="0.55">
      <line x1="236" y1="202" x2="600" y2="270" />
      <line x1="400" y1="112" x2="660" y2="258" />
      <line x1="690" y1="197" x2="742" y2="292" />
    </g>
  </g>

  <!-- Brand strip -->
  <g font-family="'Bebas Neue', 'Oswald', Impact, sans-serif" letter-spacing="4">
    <text x="400" y="478" text-anchor="middle" fill="#6a6a6a" font-size="12">
      PAINT PROTECTION FILM  ·  SELF-HEALING URETHANE  ·  10-YEAR WARRANTY
    </text>
  </g>
</svg>
