<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" role="img" aria-labelledby="wt-hero-title wt-hero-desc">
  <title id="wt-hero-title">How window tint stops heat and UV</title>
  <desc id="wt-hero-desc">Side-view illustration of a car. Sunlight splits at the tinted driver window: infrared heat and ultraviolet rays are blocked outside while visible light passes through to the driver.</desc>

  <defs>
    <radialGradient id="wt-bg" cx="28%" cy="14%" r="70%">
      <stop offset="0" stop-color="#d8181e" stop-opacity="0.28" />
      <stop offset="0.55" stop-color="#d8181e" stop-opacity="0.05" />
      <stop offset="1" stop-color="#0a0a0a" stop-opacity="0" />
    </radialGradient>
    <linearGradient id="wt-body" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#262626" />
      <stop offset="0.55" stop-color="#141414" />
      <stop offset="1" stop-color="#070707" />
    </linearGradient>
    <linearGradient id="wt-glass" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#1a1a1a" stop-opacity="0.95" />
      <stop offset="1" stop-color="#050505" stop-opacity="0.95" />
    </linearGradient>
    <linearGradient id="wt-film" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0" stop-color="#d8181e" stop-opacity="0.35" />
      <stop offset="1" stop-color="#d8181e" stop-opacity="0.08" />
    </linearGradient>
    <radialGradient id="wt-sun" cx="50%" cy="50%" r="50%">
      <stop offset="0" stop-color="#ffe68a" />
      <stop offset="0.55" stop-color="#ffb93b" />
      <stop offset="1" stop-color="#e07a1c" />
    </radialGradient>
    <filter id="wt-soft" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="8" />
    </filter>
  </defs>

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

  <!-- Subtle 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>

  <!-- Sun -->
  <g transform="translate(118 92)">
    <circle cx="0" cy="0" r="52" fill="url(#wt-sun)" opacity="0.35" filter="url(#wt-soft)" />
    <circle cx="0" cy="0" r="30" fill="url(#wt-sun)" />
    <g stroke="#f1c542" stroke-width="2.5" stroke-linecap="round" opacity="0.75">
      <line x1="0" y1="-48" x2="0" y2="-62" />
      <line x1="-48" y1="0" x2="-62" y2="0" />
      <line x1="0" y1="48" x2="0" y2="62" />
      <line x1="48" y1="0" x2="62" y2="0" />
      <line x1="34" y1="-34" x2="44" y2="-44" />
      <line x1="-34" y1="-34" x2="-44" y2="-44" />
      <line x1="34" y1="34" x2="44" y2="44" />
      <line x1="-34" y1="34" x2="-44" y2="44" />
    </g>
  </g>

  <!-- Ground shadow under car -->
  <ellipse cx="455" cy="400" rx="300" ry="12" fill="#000000" opacity="0.55" />

  <!-- Wheels (drawn first so body overlaps top) -->
  <g>
    <circle cx="278" cy="360" r="36" fill="#0e0e0e" stroke="#2a2a2a" stroke-width="1.5" />
    <circle cx="278" cy="360" r="22" fill="#181818" />
    <circle cx="278" cy="360" r="13" fill="#262626" />
    <circle cx="278" cy="360" r="5" fill="#0a0a0a" />
    <g stroke="#333" stroke-width="1.5">
      <line x1="278" y1="347" x2="278" y2="373" />
      <line x1="265" y1="360" x2="291" y2="360" />
      <line x1="269" y1="351" x2="287" y2="369" />
      <line x1="287" y1="351" x2="269" y2="369" />
    </g>

    <circle cx="628" cy="360" r="36" fill="#0e0e0e" stroke="#2a2a2a" stroke-width="1.5" />
    <circle cx="628" cy="360" r="22" fill="#181818" />
    <circle cx="628" cy="360" r="13" fill="#262626" />
    <circle cx="628" cy="360" r="5" fill="#0a0a0a" />
    <g stroke="#333" stroke-width="1.5">
      <line x1="628" y1="347" x2="628" y2="373" />
      <line x1="615" y1="360" x2="641" y2="360" />
      <line x1="619" y1="351" x2="637" y2="369" />
      <line x1="637" y1="351" x2="619" y2="369" />
    </g>
  </g>

  <!-- Car body (side profile, facing right) -->
  <path d="M185 345
           Q185 310 215 300
           L260 300
           L295 220
           Q340 195 420 192
           Q510 192 555 220
           L595 270
           L695 285
           Q735 290 735 325
           L735 355
           L185 355 Z"
        fill="url(#wt-body)" stroke="#3a3a3a" stroke-width="1.5" />

  <!-- Lower body accent line -->
  <path d="M195 345 L725 345" stroke="#1f1f1f" stroke-width="2" />

  <!-- Door split lines -->
  <g stroke="#2a2a2a" stroke-width="1.2">
    <line x1="390" y1="205" x2="390" y2="340" />
    <line x1="555" y1="230" x2="555" y2="340" />
  </g>
  <!-- Door handles -->
  <rect x="335" y="270" width="32" height="4" rx="2" fill="#4a4a4a" />
  <rect x="450" y="270" width="32" height="4" rx="2" fill="#4a4a4a" />

  <!-- Rear (passenger-door) window -->
  <path d="M302 220 L388 202 L388 240 L308 240 Z"
        fill="url(#wt-glass)" stroke="#2a2a2a" stroke-width="1" />

  <!-- Driver-side FRONT door window (the FEATURED glass) -->
  <g>
    <path d="M393 202 L548 202 L548 240 L393 240 Z"
          fill="url(#wt-glass)" />
    <!-- Film tint overlay -->
    <path d="M393 202 L548 202 L548 240 L393 240 Z"
          fill="url(#wt-film)" />
    <!-- Red edge accent — the film line -->
    <path d="M393 202 L548 202 L548 240 L393 240 Z"
          fill="none" stroke="#d8181e" stroke-width="1.8" opacity="0.9" />
    <!-- Top highlight -->
    <line x1="398" y1="206" x2="540" y2="206" stroke="#ffffff" stroke-width="1" opacity="0.12" />
  </g>

  <!-- Windshield -->
  <path d="M548 202 Q572 202 590 228 L548 240 Z"
        fill="url(#wt-glass)" stroke="#2a2a2a" stroke-width="1" />

  <!-- Driver silhouette inside cabin (behind tinted glass) -->
  <g opacity="0.82">
    <!-- Headrest -->
    <path d="M448 200 L448 236 L432 236 L432 200 Z" fill="#0a0a0a" />
    <!-- Head -->
    <circle cx="462" cy="220" r="13" fill="#1a1a1a" />
    <!-- Torso -->
    <path d="M445 234 Q462 227 480 234 L486 260 L440 260 Z" fill="#141414" />
    <!-- Hand hint -->
    <circle cx="490" cy="258" r="3" fill="#2a2a2a" />
  </g>

  <!-- ================= RAYS ================= -->

  <!-- UV ray — purple — blocked at glass -->
  <g>
    <line x1="158" y1="132" x2="430" y2="205" stroke="#9a4dff" stroke-width="3.5" stroke-linecap="round" />
    <line x1="158" y1="132" x2="430" y2="205" stroke="#c79bff" stroke-width="1" stroke-linecap="round" />
    <g transform="translate(430 205)">
      <circle cx="0" cy="0" r="10" fill="#0a0a0a" stroke="#9a4dff" stroke-width="2" />
      <line x1="-5" y1="-5" x2="5" y2="5" stroke="#c79bff" stroke-width="2.5" stroke-linecap="round" />
      <line x1="-5" y1="5" x2="5" y2="-5" stroke="#c79bff" stroke-width="2.5" stroke-linecap="round" />
    </g>
  </g>

  <!-- IR ray — red — reflects off glass -->
  <g>
    <line x1="178" y1="118" x2="450" y2="210" stroke="#ff3e46" stroke-width="3.5" stroke-linecap="round" />
    <path d="M450 210 Q420 175 370 140" fill="none" stroke="#ff3e46" stroke-width="2.5" stroke-linecap="round" opacity="0.85" stroke-dasharray="5 4" />
    <path d="M378 146 L368 138 L378 132" fill="none" stroke="#ff3e46" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
  </g>

  <!-- Visible-light ray — yellow — passes through -->
  <g>
    <line x1="148" y1="148" x2="418" y2="220" stroke="#f5d55a" stroke-width="3.5" stroke-linecap="round" />
    <line x1="418" y1="220" x2="472" y2="245" stroke="#f5d55a" stroke-width="3" stroke-linecap="round" opacity="0.9" />
    <path d="M465 240 L475 247 L468 252" fill="none" stroke="#f5d55a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
  </g>

  <!-- ================= CALLOUT PILLS ================= -->
  <g font-family="'Bebas Neue', 'Oswald', Impact, sans-serif" letter-spacing="1.2">
    <!-- IR HEAT -->
    <g transform="translate(275 108)">
      <rect x="-62" y="-18" width="152" height="36" rx="18" fill="#0f0f0f" stroke="#ff3e46" stroke-opacity="0.55" />
      <circle cx="-46" cy="0" r="5" fill="#ff3e46" />
      <text x="-34" y="-2" fill="#ffffff" font-size="12">IR HEAT</text>
      <text x="-34" y="13" fill="#ff3e46" font-size="12">BLOCKED 98%</text>
    </g>

    <!-- UV RAYS -->
    <g transform="translate(215 262)">
      <rect x="-62" y="-18" width="152" height="36" rx="18" fill="#0f0f0f" stroke="#9a4dff" stroke-opacity="0.55" />
      <circle cx="-48" cy="0" r="5" fill="#9a4dff" />
      <text x="-36" y="-2" fill="#ffffff" font-size="12">UV RAYS</text>
      <text x="-36" y="13" fill="#c79bff" font-size="12">BLOCKED 99%</text>
    </g>

    <!-- VISIBLE LIGHT -->
    <g transform="translate(595 222)">
      <rect x="-58" y="-18" width="172" height="36" rx="18" fill="#0f0f0f" stroke="#f5d55a" stroke-opacity="0.55" />
      <circle cx="-44" cy="0" r="5" fill="#f5d55a" />
      <text x="-32" y="-2" fill="#ffffff" font-size="12">VISIBLE LIGHT</text>
      <text x="-32" y="13" fill="#f5d55a" font-size="12">PASSES THROUGH</text>
    </g>

    <!-- Dotted connector lines -->
    <g stroke="#3a3a3a" stroke-width="1" stroke-dasharray="3 3" opacity="0.55">
      <line x1="275" y1="126" x2="378" y2="172" />
      <line x1="215" y1="244" x2="420" y2="215" />
      <line x1="595" y1="240" x2="515" y2="258" />
    </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">
      SUNTEK  ·  CARBON  /  CIR  /  EVOLVE
    </text>
  </g>
</svg>
