<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 500" width="900" height="500">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#F8F0FF"/>
      <stop offset="50%" stop-color="#F0E8FF"/>
      <stop offset="100%" stop-color="#E8F0FF"/>
    </linearGradient>
    <linearGradient id="capsuleBody" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#B050C8"/>
      <stop offset="50%" stop-color="#8830B0"/>
      <stop offset="100%" stop-color="#6820A0"/>
    </linearGradient>
    <linearGradient id="capsuleCap" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#E060D0"/>
      <stop offset="100%" stop-color="#C040B0"/>
    </linearGradient>
    <linearGradient id="capsuleShine" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="white" stop-opacity="0.45"/>
      <stop offset="100%" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#9040B8"/>
      <stop offset="100%" stop-color="#6030A0"/>
    </linearGradient>
    <radialGradient id="glow1" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#C070E0" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#C070E0" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="glow2" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#6090FF" stop-opacity="0.3"/>
      <stop offset="100%" stop-color="#6090FF" stop-opacity="0"/>
    </radialGradient>
    <filter id="blur10">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
    <filter id="blur5">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
    <filter id="shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#8030A0" flood-opacity="0.25"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="900" height="500" fill="url(#bg)"/>

  <!-- Background glows -->
  <circle cx="260" cy="250" r="280" fill="url(#glow1)" filter="url(#blur10)" opacity="0.7"/>
  <circle cx="680" cy="280" r="240" fill="url(#glow2)" filter="url(#blur10)" opacity="0.5"/>

  <!-- Subtle grid lines -->
  <g stroke="#C0A0E0" stroke-width="0.5" opacity="0.12">
    <line x1="0" y1="62" x2="900" y2="62"/>
    <line x1="0" y1="124" x2="900" y2="124"/>
    <line x1="0" y1="186" x2="900" y2="186"/>
    <line x1="0" y1="248" x2="900" y2="248"/>
    <line x1="0" y1="310" x2="900" y2="310"/>
    <line x1="0" y1="372" x2="900" y2="372"/>
    <line x1="0" y1="434" x2="900" y2="434"/>
    <line x1="75" y1="0" x2="75" y2="500"/>
    <line x1="150" y1="0" x2="150" y2="500"/>
    <line x1="225" y1="0" x2="225" y2="500"/>
    <line x1="300" y1="0" x2="300" y2="500"/>
    <line x1="375" y1="0" x2="375" y2="500"/>
    <line x1="450" y1="0" x2="450" y2="500"/>
    <line x1="525" y1="0" x2="525" y2="500"/>
    <line x1="600" y1="0" x2="600" y2="500"/>
    <line x1="675" y1="0" x2="675" y2="500"/>
    <line x1="750" y1="0" x2="750" y2="500"/>
    <line x1="825" y1="0" x2="825" y2="500"/>
  </g>

  <!-- Hexagonal molecular lattice (right side) -->
  <!-- Inositol-style hexagonal ring network -->
  <g transform="translate(620, 250)" opacity="0.55">
    <!-- Central large hexagon -->
    <polygon points="0,-70 60,-35 60,35 0,70 -60,35 -60,-35" fill="none" stroke="url(#hexGrad)" stroke-width="2.5"/>
    <circle cx="0" cy="-70" r="8" fill="#9040B8"/>
    <circle cx="60" cy="-35" r="8" fill="#9040B8"/>
    <circle cx="60" cy="35" r="8" fill="#9040B8"/>
    <circle cx="0" cy="70" r="8" fill="#9040B8"/>
    <circle cx="-60" cy="35" r="8" fill="#9040B8"/>
    <circle cx="-60" cy="-35" r="8" fill="#9040B8"/>
    <!-- Center node -->
    <circle cx="0" cy="0" r="14" fill="#7030A8" opacity="0.8"/>
    <circle cx="0" cy="0" r="8" fill="#C070D8" opacity="0.6"/>
    <!-- OH groups on each vertex -->
    <line x1="0" y1="-70" x2="0" y2="-92" stroke="#A050C0" stroke-width="2"/>
    <circle cx="0" cy="-92" r="6" fill="#B060C8" opacity="0.8"/>
    <line x1="60" y1="-35" x2="78" y2="-46" stroke="#A050C0" stroke-width="2"/>
    <circle cx="78" cy="-46" r="6" fill="#B060C8" opacity="0.8"/>
    <line x1="60" y1="35" x2="78" y2="46" stroke="#A050C0" stroke-width="2"/>
    <circle cx="78" cy="46" r="6" fill="#B060C8" opacity="0.8"/>
    <line x1="0" y1="70" x2="0" y2="92" stroke="#A050C0" stroke-width="2"/>
    <circle cx="0" cy="92" r="6" fill="#B060C8" opacity="0.8"/>
    <line x1="-60" y1="35" x2="-78" y2="46" stroke="#A050C0" stroke-width="2"/>
    <circle cx="-78" cy="46" r="6" fill="#B060C8" opacity="0.8"/>
    <line x1="-60" y1="-35" x2="-78" y2="-46" stroke="#A050C0" stroke-width="2"/>
    <circle cx="-78" cy="-46" r="6" fill="#B060C8" opacity="0.8"/>

    <!-- Surrounding hexagons (lattice pattern) -->
    <!-- Top hex -->
    <g transform="translate(0,-140)">
      <polygon points="0,-50 43,-25 43,25 0,50 -43,25 -43,-25" fill="none" stroke="#8030B0" stroke-width="2" opacity="0.6"/>
      <circle cx="0" cy="-50" r="5" fill="#8030B0" opacity="0.7"/>
      <circle cx="43" cy="-25" r="5" fill="#8030B0" opacity="0.7"/>
      <circle cx="43" cy="25" r="5" fill="#8030B0" opacity="0.7"/>
      <circle cx="0" cy="50" r="5" fill="#8030B0" opacity="0.7"/>
      <circle cx="-43" cy="25" r="5" fill="#8030B0" opacity="0.7"/>
      <circle cx="-43" cy="-25" r="5" fill="#8030B0" opacity="0.7"/>
      <circle cx="0" cy="0" r="9" fill="#7030A0" opacity="0.7"/>
    </g>
    <!-- Top-right hex -->
    <g transform="translate(120,-70)">
      <polygon points="0,-50 43,-25 43,25 0,50 -43,25 -43,-25" fill="none" stroke="#8030B0" stroke-width="2" opacity="0.55"/>
      <circle cx="0" cy="-50" r="5" fill="#8030B0" opacity="0.65"/>
      <circle cx="43" cy="-25" r="5" fill="#8030B0" opacity="0.65"/>
      <circle cx="43" cy="25" r="5" fill="#8030B0" opacity="0.65"/>
      <circle cx="0" cy="50" r="5" fill="#8030B0" opacity="0.65"/>
      <circle cx="-43" cy="25" r="5" fill="#8030B0" opacity="0.65"/>
      <circle cx="-43" cy="-25" r="5" fill="#8030B0" opacity="0.65"/>
      <circle cx="0" cy="0" r="9" fill="#7030A0" opacity="0.65"/>
    </g>
    <!-- Bottom-right hex -->
    <g transform="translate(120,70)">
      <polygon points="0,-50 43,-25 43,25 0,50 -43,25 -43,-25" fill="none" stroke="#8030B0" stroke-width="2" opacity="0.5"/>
      <circle cx="0" cy="-50" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="43" cy="-25" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="43" cy="25" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="0" cy="50" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="-43" cy="25" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="-43" cy="-25" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="0" cy="0" r="9" fill="#7030A0" opacity="0.6"/>
    </g>
    <!-- Bottom hex -->
    <g transform="translate(0,140)">
      <polygon points="0,-50 43,-25 43,25 0,50 -43,25 -43,-25" fill="none" stroke="#8030B0" stroke-width="2" opacity="0.5"/>
      <circle cx="0" cy="-50" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="43" cy="-25" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="43" cy="25" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="0" cy="50" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="-43" cy="25" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="-43" cy="-25" r="5" fill="#8030B0" opacity="0.6"/>
      <circle cx="0" cy="0" r="9" fill="#7030A0" opacity="0.6"/>
    </g>
  </g>

  <!-- Main CAPSULE (center-left) -->
  <g transform="translate(270, 250)" filter="url(#shadow)">
    <!-- Capsule shadow/glow -->
    <ellipse cx="0" cy="0" rx="90" ry="55" fill="#9030B0" opacity="0.15" filter="url(#blur5)"/>
    <!-- Capsule bottom half (body - purple) -->
    <rect x="-85" y="-40" width="170" height="80" rx="40" fill="url(#capsuleBody)"/>
    <!-- Capsule top half (cap - pink/magenta) -->
    <rect x="-85" y="-40" width="85" height="80" rx="0" fill="url(#capsuleCap)"/>
    <!-- Left rounded cap end -->
    <ellipse cx="-85" cy="0" rx="40" ry="40" fill="url(#capsuleCap)"/>
    <!-- Right rounded cap end -->
    <ellipse cx="85" cy="0" rx="40" ry="40" fill="url(#capsuleBody)"/>
    <!-- Separation line -->
    <line x1="0" y1="-40" x2="0" y2="40" stroke="white" stroke-width="2.5" opacity="0.4"/>
    <!-- Shine on capsule -->
    <path d="M-75,-28 C-50,-42 20,-42 60,-28" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" opacity="0.35"/>
    <ellipse cx="-30" cy="-15" rx="30" ry="12" fill="url(#capsuleShine)"/>
    <!-- Inositol label inside -->
    <text x="-42" y="-5" font-size="11" fill="white" opacity="0.8" font-family="Georgia, serif" font-style="italic">Myo-Inositol</text>
    <text x="-42" y="14" font-size="10" fill="white" opacity="0.65" font-family="Georgia, serif" font-style="italic">D-Chiro 40:1</text>
    <!-- Small bubbles inside capsule (ingredient dots) -->
    <circle cx="55" cy="-10" r="5" fill="white" opacity="0.15"/>
    <circle cx="70" cy="8" r="4" fill="white" opacity="0.15"/>
    <circle cx="58" cy="18" r="3" fill="white" opacity="0.12"/>
  </g>

  <!-- Quality badge / shield (top area) -->
  <g transform="translate(130, 160)">
    <!-- Shield shape -->
    <path d="M0,-42 L30,-28 L30,10 C30,30 0,45 0,45 C0,45 -30,30 -30,10 L-30,-28 Z" fill="#8030B0" opacity="0.85"/>
    <path d="M0,-34 L23,-22 L23,8 C23,24 0,37 0,37 C0,37 -23,24 -23,8 L-23,-22 Z" fill="none" stroke="white" stroke-width="1.5" opacity="0.4"/>
    <!-- Checkmark -->
    <path d="M-12,2 L-4,12 L14,-10" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
    <!-- UK badge -->
    <text x="0" y="-48" text-anchor="middle" font-size="10" fill="#8030B0" opacity="0.75" font-family="Georgia, serif">UK</text>
  </g>

  <!-- 40:1 ratio visual (circular split) -->
  <g transform="translate(130, 330)">
    <!-- Outer ring -->
    <circle cx="0" cy="0" r="50" fill="none" stroke="#C060D0" stroke-width="2.5" opacity="0.7"/>
    <!-- 40 part arc (large) - Myo-Inositol -->
    <path d="M0,-50 A50,50 0 1,1 -49.5,-7 L0,0 Z" fill="#9040B8" opacity="0.6"/>
    <!-- 1 part arc (small) - D-Chiro -->
    <path d="M-49.5,-7 A50,50 0 0,1 0,-50 L0,0 Z" fill="#E060C8" opacity="0.7"/>
    <!-- Center -->
    <circle cx="0" cy="0" r="28" fill="white" opacity="0.85"/>
    <text x="0" y="-5" text-anchor="middle" font-size="13" font-weight="bold" fill="#7030A0" font-family="Georgia, serif">40:1</text>
    <text x="0" y="10" text-anchor="middle" font-size="8" fill="#9050B0" font-family="Georgia, serif">omjer</text>
    <!-- Labels -->
    <text x="22" y="-22" font-size="9" fill="#7030A0" opacity="0.8" font-family="Georgia, serif">Myo</text>
    <text x="-42" y="22" font-size="9" fill="#C050B8" opacity="0.8" font-family="Georgia, serif">D-C</text>
  </g>

  <!-- Small floating molecules around capsule -->
  <g opacity="0.45">
    <g transform="translate(180, 160)">
      <circle cx="0" cy="0" r="5" fill="#9040B8"/>
      <circle cx="14" cy="-8" r="4" fill="#B060C8"/>
      <circle cx="14" cy="8" r="4" fill="#7830A8"/>
      <line x1="0" y1="0" x2="14" y2="-8" stroke="#9040B8" stroke-width="1.5"/>
      <line x1="0" y1="0" x2="14" y2="8" stroke="#9040B8" stroke-width="1.5"/>
    </g>
    <g transform="translate(400, 140)">
      <circle cx="0" cy="0" r="5" fill="#8030B0"/>
      <circle cx="-14" cy="-8" r="4" fill="#A050C0"/>
      <circle cx="0" cy="16" r="4" fill="#8838A8"/>
      <circle cx="14" cy="-8" r="4" fill="#C060D0"/>
      <line x1="0" y1="0" x2="-14" y2="-8" stroke="#8030B0" stroke-width="1.5"/>
      <line x1="0" y1="0" x2="0" y2="16" stroke="#8030B0" stroke-width="1.5"/>
      <line x1="0" y1="0" x2="14" y2="-8" stroke="#8030B0" stroke-width="1.5"/>
    </g>
    <g transform="translate(400, 360)">
      <circle cx="0" cy="0" r="6" fill="#A040B8"/>
      <circle cx="16" cy="9" r="4" fill="#C060D0"/>
      <circle cx="-16" cy="9" r="4" fill="#8030A8"/>
      <circle cx="0" cy="-18" r="4" fill="#B050C0"/>
      <line x1="0" y1="0" x2="16" y2="9" stroke="#A040B8" stroke-width="1.5"/>
      <line x1="0" y1="0" x2="-16" y2="9" stroke="#A040B8" stroke-width="1.5"/>
      <line x1="0" y1="0" x2="0" y2="-18" stroke="#A040B8" stroke-width="1.5"/>
    </g>
  </g>

  <!-- OVA Lab text badge (top center) -->
  <g transform="translate(450, 75)">
    <rect x="-90" y="-28" width="180" height="50" rx="25" fill="#8030B0" opacity="0.15"/>
    <rect x="-90" y="-28" width="180" height="50" rx="25" fill="none" stroke="#9040B8" stroke-width="1.5" opacity="0.4"/>
    <text x="0" y="-4" text-anchor="middle" font-size="16" font-weight="bold" fill="#6020A0" opacity="0.85" font-family="Georgia, serif">OVA Lab</text>
    <text x="0" y="14" text-anchor="middle" font-size="9" fill="#8040B0" opacity="0.7" font-family="Georgia, serif">d.o.o. Bosnia &amp; Herzegovina</text>
  </g>

  <!-- Clean horizontal divider lines (lab aesthetic) -->
  <line x1="40" y1="460" x2="860" y2="460" stroke="#C0A0E0" stroke-width="0.8" opacity="0.25"/>
  <line x1="40" y1="468" x2="860" y2="468" stroke="#C0A0E0" stroke-width="0.5" opacity="0.15"/>

  <!-- Corner decorations -->
  <circle cx="870" cy="460" r="50" fill="#D0B0F0" opacity="0.15"/>
  <circle cx="30" cy="460" r="45" fill="#B8D0FF" opacity="0.12"/>
  <circle cx="870" cy="50" r="40" fill="#D0B0F0" opacity="0.12"/>
</svg>
