/*
  Venus 360 Logo Kit
  Clean CSS variables + layout helpers for the SVG files.
  Use with inline SVG or with <img> containers.
*/

.v360-logo,
.v360-logo-svg {
  --v360-navy: #001B5D;
  --v360-navy-deep: #00123F;
  --v360-blue: #0B64F6;
  --v360-blue-light: #1680FF;
  --v360-paper: #FFFFFF;
  --v360-shadow: 0 18px 45px rgba(0, 27, 93, .14);
}

.v360-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--v360-navy);
}

.v360-logo svg,
.v360-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.v360-logo--full {
  width: clamp(220px, 42vw, 520px);
}

.v360-logo--mark {
  width: clamp(56px, 16vw, 180px);
}

.v360-logo--card {
  padding: clamp(16px, 3vw, 34px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 52% 30%, rgba(11, 100, 246, .12), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  box-shadow: var(--v360-shadow);
  backdrop-filter: blur(18px);
}

.v360-logo-svg {
  --v360-navy: #001B5D;
  --v360-navy-deep: #00123F;
  --v360-blue: #0B64F6;
  --v360-blue-light: #1680FF;
  --v360-paper: #FFFFFF;
}

/* Optional construction layer. Add .show-guides to inline SVG only. */
.v360-logo-svg.show-guides .v360-guides {
  display: block;
}

.v360-logo--mono .v360-blue,
.v360-logo--mono .v360-stroke-navy,
.v360-logo--mono .v360-navy,
.v360-logo--mono .v360-eye,
.v360-logo--mono .v360-text-venus,
.v360-logo--mono .v360-text-360 {
  fill: currentColor;
  stroke: currentColor;
}

/* Small interaction polish for website headers. */
.v360-logo--interactive {
  transition: transform .22s ease, filter .22s ease;
  transform-origin: center;
}

.v360-logo--interactive:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 10px 22px rgba(0, 72, 255, .16));
}

@media (prefers-color-scheme: dark) {
  .v360-logo,
  .v360-logo-svg {
    --v360-paper: #F7FAFF;
    --v360-shadow: 0 18px 55px rgba(0, 0, 0, .34);
  }

  .v360-logo--card {
    background:
      radial-gradient(circle at 52% 30%, rgba(11, 100, 246, .22), transparent 40%),
      linear-gradient(180deg, rgba(11, 17, 38, .82), rgba(8, 13, 30, .72));
    border: 1px solid rgba(255,255,255,.08);
  }
}