* { box-sizing: border-box; margin: 0; padding: 0; }
  body {


  
    font-family: "Poppins", sans-serif;
    background: #0f172a;
    color: #fff;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
  }

  .circle-wrapper {
	  
    position: relative;
    width: 360px;
    height: 360px;
    display: grid;
    place-items: center;
   z-index: -1;
  }
  
  .outer {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: conic-gradient(
      #005b78 0deg 118deg,
      #056a53 125deg 235deg,
      #7a1c28 242deg 360deg
    );
    box-shadow: 0 0 30px rgba(0,0,0,0.6), inset 0 0 20px rgba(255,255,255,0.05);
    z-index: 0;
  }

  svg.outer-text-svg {
    position: absolute;
    width: 360px;
    height: 360px;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
  }

  .inner {
	  
    position: relative;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background: conic-gradient(
      #00b4d8 0deg 120deg,
      #00b09b 120deg 240deg,
      #ff416c 240deg 360deg
    );
    display: grid;
    place-items: center;
    z-index: 3;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
  }
  .inner::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    background: #0f172a;
    border-radius: 50%;
    z-index: 1;
  }

  .price { 
    position: absolute;
	font-size: 24px;
    font-weight: 700;
    text-shadow: 0 2px 5px rgba(0,0,0,0.35);
    transform-origin: center center;
  }
  .p1 { transform: rotate(60deg) translate(0, -95px) rotate(-60deg); }
  .p2 { transform: rotate(180deg) translate(0, -95px) rotate(-180deg); }
  .p3 { transform: rotate(300deg) translate(0, -95px) rotate(-300deg); }
  .p4 { z-index: 4; color: #facc15; font-size: 42px; }


  #ludo {
	 
	  padding:15px;
	  border:1px solid white;
	  border-radius:20px;
  color: #9ca3af;
  font-size: 24px;
  }

.inner-preko-neta-svg {
  position: absolute;
padding-top:14px;
  width: 250px;
  height: 250px;
  z-index: 5;
  pointer-events: none;
}


  @media (max-width: 480px) {
    .circle-wrapper { width: 280px; height: 280px; }
    .outer, svg.outer-text-svg { width: 280px; height: 280px; }
    .inner { width: 210px; height: 210px; }
    .price { font-size: 18px; }
    .p4 { font-size: 20px; }
  }