:root {
  --page-bg: #f6f7f9;
  --surface: #ffffff;
  --text: #0e1116;
  --muted: rgba(14, 17, 22, 0.68);
  --muted-2: rgba(14, 17, 22, 0.55);
  --ring: rgba(14, 17, 22, 0.08);
  --shadow: 0 22px 60px rgba(15, 20, 28, 0.12);
  --shadow-2: 0 14px 36px rgba(15, 20, 28, 0.1);
  --radius: 22px;
  --radius-lg: 28px;
  --container: 1180px;
  --col-narrow: 0.86fr;
  --col-wide: 1.54fr;
  --layout-ratio: 1024 / 536;
  --card-gap: clamp(16px, 2vw, 28px);
  --layout-pad: clamp(14px, 2.2vw, 22px);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Striped Dark Background */
.striped-bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  background: repeating-linear-gradient(
    45deg,
    #000 0px,
    #111 2px,
    #000 4px,
    #222 6px
  );
}

/* Blur + Noise Overlay */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;

  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(45px) grayscale(20%);
  -webkit-backdrop-filter: blur(45px) grayscale(20%);
}

body {
  margin: 0;
  font-family:
    "Raleway",
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  color: var(--text);
  background: black;
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 3px solid rgba(56, 92, 255, 0.45);
  outline-offset: 3px;
  border-radius: 10px;
}

.fullscreen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  --frame-pad: clamp(14px, 2.6vw, 44px);
  padding: 5px;
}

.pillars {
  position: relative;
  padding: 0;

  overflow: hidden;
}

.pillars--fullscreen {
  width: 100%;
  height: 95vh;
  aspect-ratio: var(--layout-ratio);
}

.pillars::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(
      760px 520px at 40% 20%,
      rgba(56, 92, 255, 0.1),
      transparent 58%
    ),
    radial-gradient(
      620px 480px at 82% 32%,
      rgba(0, 166, 124, 0.1),
      transparent 56%
    ),
    radial-gradient(
      620px 520px at 76% 86%,
      rgba(255, 111, 60, 0.1),
      transparent 56%
    );
  pointer-events: none;
}

.card {
  position: relative;
  display: block;
  transform-origin: center;
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--card-image);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 60px rgba(14, 17, 22, 0.22);
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
  cursor: pointer;
}

.card:hover {
  transform: scale(1.03);
  box-shadow: 0 22px 76px rgba(14, 17, 22, 0.26);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      700px 320px at 25% 18%,
      rgba(255, 255, 255, 0.14),
      transparent 62%
    ),
    radial-gradient(
      620px 380px at 78% 82%,
      rgba(0, 0, 0, 0.14),
      transparent 60%
    ),
    linear-gradient(0deg, rgba(14, 17, 22, 0.62), rgba(14, 17, 22, 0.06));
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 0;
}

.card__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: calc(100% - 48px);
  padding: 14px 18px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.96);
  font-weight: 100;
  font-size: 19px;
  letter-spacing: 0.2px;
  line-height: 1.15;
  text-align: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
  will-change: transform, opacity;
}

.badge__cactos {
  font-family: "Monoton", sans-serif;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  font-size: 26px !important;
}

.badge__buyme {
  font-family:
    "Nunito",
    "Raleway",
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  color: #fec309;
  font-weight: 900;
  font-size: 26px !important;
}

.card__badge.badge-1 .badge__cactos {
  color: #2fbf71;
}

.card__badge.badge-2 .badge__cactos {
  color: #fe9800;
}

.card__badge.badge-3 .badge__cactos {
  color: #b7792e;
}

.card__badge.badge-4 .badge__cactos {
  color: #00b4d8;
}

.card__badge.badge-1,
.card__badge.badge-3 {
  background: rgb(45 91 168 / 58%);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .card__badge.badge-1 .badge__cactos,
  .card__badge.badge-2 .badge__cactos,
  .card__badge.badge-3 .badge__cactos,
  .card__badge.badge-4 .badge__cactos {
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
  }

  .card__badge.badge-1 .badge__cactos {
    background-image: linear-gradient(90deg, #fec309, #fec309 55%, #fec309);
  }

  .card__badge.badge-2 .badge__cactos {
    background-image: linear-gradient(90deg, #ffd18c, #fe9800 55%, #ff6b00);
  }

  .card__badge.badge-3 .badge__cactos {
    background-image: linear-gradient(90deg, #fec309, #fec309 55%, #fec309);
  }

  .card__badge.badge-4 .badge__cactos {
    background-image: linear-gradient(90deg, #9ae8ff, #00b4d8 55%, #0077b6);
  }
}

.card__sparkle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0.08)
  );
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  z-index: 2;
}

.card__sparkle svg {
  width: 18px;
  height: 18px;
}

.core-wrap {
  position: absolute;
  z-index: 3;
  width: clamp(140px, 15vw, 176px);
  height: clamp(140px, 15vw, 176px);
  border-radius: 50%;
  background: #2e5caa;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 22px 34px rgba(0, 0, 0, 0.28),
    inset 0 -10px 18px rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: border-radius 220ms ease;
}

.pillars--fullscreen:has(.card--1:hover) .core-wrap,
.pillars--fullscreen:has(.card--1:focus-visible) .core-wrap {
  border-radius: 50%;
  border-top-left-radius: 9px;
}

.pillars--fullscreen:has(.card--2:hover) .core-wrap,
.pillars--fullscreen:has(.card--2:focus-visible) .core-wrap {
  border-radius: 50%;
  border-top-right-radius: 9px;
}

.pillars--fullscreen:has(.card--3:hover) .core-wrap,
.pillars--fullscreen:has(.card--3:focus-visible) .core-wrap {
  border-radius: 50%;
  border-bottom-left-radius: 9px;
}

.pillars--fullscreen:has(.card--4:hover) .core-wrap,
.pillars--fullscreen:has(.card--4:focus-visible) .core-wrap {
  border-radius: 50%;
  border-bottom-right-radius: 9px;
}

.core__text {
  font-family:
    "Nunito",
    "Raleway",
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  color: #fec309;
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 40px);
  letter-spacing: 0.6px;
  text-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
}

.core {
  position: relative;
  width: clamp(128px, 14vw, 162px);
  height: clamp(128px, 14vw, 162px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.1),
      transparent 44%
    ),
    linear-gradient(145deg, rgba(14, 17, 22, 0.96), rgba(14, 17, 22, 0.74));
  box-shadow: 0 22px 60px rgba(14, 17, 22, 0.24);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  pointer-events: auto;
}

.core--mark::before,
.core--mark::after {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 20px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0.08)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

.core--mark::after {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
  transform: translate(26px, -22px);
}

/* Absolute layout (matches the reference proportions, avoids "row" wrappers). */
.pillars--fullscreen {
  --gap: var(--card-gap);
  --pad: var(--layout-pad);
  --usable-w: calc(100% - (var(--pad) * 2) - var(--gap));
  --usable-h: calc(100% - (var(--pad) * 2) - var(--gap));
  --half-h: calc(var(--usable-h) / 2);
  --w-top-left: calc(var(--usable-w) * 0.5);
  --w-top-right: calc(var(--usable-w) - var(--w-top-left));
  --w-bot-left: calc(var(--usable-w) * 0.5);
  --w-bot-right: calc(var(--usable-w) - var(--w-bot-left));
  --seam-x: calc(var(--pad) + var(--w-top-left) + (var(--gap) / 2));
  --seam-y: calc(var(--pad) + var(--half-h) + (var(--gap) / 2));
}

.pillars--fullscreen > .card--1 {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  width: var(--w-top-left);
  height: var(--half-h);
  z-index: 1;
}

.pillars--fullscreen > .card--2 {
  position: absolute;
  left: calc(var(--pad) + var(--w-top-left) + var(--gap));
  top: var(--pad);
  width: var(--w-top-right);
  height: var(--half-h);
  z-index: 1;
}

.pillars--fullscreen > .card--3 {
  position: absolute;
  left: var(--pad);
  top: calc(var(--pad) + var(--half-h) + var(--gap));
  width: var(--w-bot-left);
  height: var(--half-h);
  z-index: 1;
}

.pillars--fullscreen > .card--4 {
  position: absolute;
  left: calc(var(--pad) + var(--w-bot-left) + var(--gap));
  top: calc(var(--pad) + var(--half-h) + var(--gap));
  width: var(--w-bot-right);
  height: var(--half-h);
  z-index: 1;
  background-position: 0 -172px;
}

.pillars--fullscreen > .core-wrap {
  left: var(--seam-x);
  top: var(--seam-y);
  transform: translate(-50%, -50%);
}

@media (max-width: 860px) {
  .pillars--fullscreen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .pillars--fullscreen {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
  }

  .pillars--fullscreen > .card {
    position: relative;
    inset: auto;
    width: 100%;
    height: 240px;
  }

  .pillars--fullscreen > .core-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
    order: 3;
  }

  .pillars--fullscreen > .card--1 {
    order: 1;
  }

  .pillars--fullscreen > .card--2 {
    order: 2;
  }

  .pillars--fullscreen > .card--3 {
    order: 4;
  }

  .pillars--fullscreen > .card--4 {
    order: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}