.logo {
    display: flex;
    align-items: center;
    gap: 2vmin; /* Reduced from 4vmin */
}

.shape {
    width: 10vmin; /* Reduced from 14vmin */
    height: 10vmin;
    transform-style: preserve-3d;
}

.shape svg {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Base ring styling */
.ring {
    fill: none;
    stroke-width: 0.4vmin; /* Reduced from 0.6vmin */
    stroke-linecap: round;
    stroke-dasharray: 4 10;
    transform-box: fill-box;
    transform-origin: center center;
}

/* Gradient rings: 1 & 3 */
.ring1,
.ring3 {
    stroke: url(#grad);
    filter:
            drop-shadow(0 0 0.7vmin #97e14d) /* Reduced from 1vmin */
            drop-shadow(0 0 0.7vmin #97e14d);
}

/* White rings: 2 & 4 */
.ring2,
.ring4 {
    stroke: #fff;
    filter: drop-shadow(0 0 0.3vmin #fff); /* Reduced from 0.5vmin */
}

/* Ring 1: tilt X, spin around Z in 8s, dots orbit */
.ring1 {
    transform: rotateX(60deg);
    animation:
            spin1 8s linear infinite,
            dash1 0.6s linear infinite;
}
@keyframes spin1 {
    to { transform: rotateX(60deg) rotateZ(360deg); }
}
@keyframes dash1 {
    to { stroke-dashoffset: -10; } /* Adjusted for smaller size */
}

/* Ring 2: tilt Y, spin around Z (rev) in 6s, dots orbit rev */
.ring2 {
    transform: rotateY(60deg);
    animation:
            spin2 6s linear infinite reverse,
            dash2 0.5s linear infinite reverse;
}
@keyframes spin2 {
    to { transform: rotateY(60deg) rotateZ(-360deg); }
}
@keyframes dash2 {
    to { stroke-dashoffset: 10; } /* Adjusted for smaller size */
}

/* Ring 3: tilt Z+X, spin around Y in 5s, dots orbit */
.ring3 {
    transform: rotateZ(60deg) rotateX(30deg);
    animation:
            spin3 5s linear infinite,
            dash3 0.7s linear infinite;
}
@keyframes spin3 {
    to { transform: rotateZ(60deg) rotateX(30deg) rotateY(360deg); }
}
@keyframes dash3 {
    to { stroke-dashoffset: -10; } /* Adjusted for smaller size */
}

/* Ring 4: tilt Y+X, spin around X in 7s, dots orbit */
.ring4 {
    transform: rotateY(-45deg) rotateX(30deg);
    animation:
            spin4 7s linear infinite,
            dash4 0.4s linear infinite;
}
@keyframes spin4 {
    to { transform: rotateY(-45deg) rotateX(30deg) rotateX(360deg); }
}
@keyframes dash4 {
    to { stroke-dashoffset: 10; } /* Adjusted for smaller size */
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-text .main {
    font-size: 4vmin; /* Reduced from 6vmin */
    font-weight: 800;
    color: #fff; /* White for Stratamize */
}

.logo-text .sub {
    font-size: 2vmin; /* Reduced from 3vmin */
    color: #97e14d; /* Green for Payments */
    opacity: 0.7;
    margin-top: 0.5vmin;
}