/* ============================================================
   REFER & EARN — refer-earn.css
   ============================================================ */

.refer {
  position: relative;
  width: 100%;
  padding-block: 140px 160px;
  padding-inline: clamp(40px, 6vw, 120px);
  overflow: hidden;
  z-index: 2;
}

.refer__bg { position: absolute; inset: 0; z-index: -1; }
.refer__particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.refer__orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.36;
  animation: auroraFloat 17s ease-in-out infinite;
  will-change: transform;
}
.refer__orb--1 { width: 440px; height: 440px; background: radial-gradient(circle, var(--c-copper) 0%, transparent 70%); top: -10%; left: -10%; }
.refer__orb--2 { width: 380px; height: 380px; background: radial-gradient(circle, var(--c-rose-gold) 0%, transparent 70%); bottom: -12%; right: -8%; animation-delay: -6s; }

.refer__inner {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: center;
}

/* ---- left illustration ---- */
.refer__visual { display: flex; align-items: center; justify-content: center; }

.refer__illustration {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.refer__illustration-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,155,110,0.32) 0%, rgba(184,118,63,0.1) 45%, transparent 72%);
  filter: blur(20px);
  animation: glowPulse 5s ease-in-out infinite;
  will-change: transform, opacity;
}

.refer__illustration-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(217,155,110,0.3);
  will-change: transform;
}
.refer__illustration-ring--1 { inset: 10%; animation: spin 20s linear infinite; }
.refer__illustration-ring--2 { inset: -4%; border-style: solid; border-color: rgba(227,172,130,0.2); animation: spin 28s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.refer__illustration-icon {
  width: 34%;
  height: 34%;
  fill: none;
  stroke: var(--c-copper-light);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
  animation: coreFloat 6s ease-in-out infinite;
}

/* ---- right content ---- */
.refer__copy { position: relative; }

.refer__benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 34px 0 40px;
}

.refer-benefit {
  position: relative;
  padding: 26px 22px;
  border-radius: var(--radius-m);
  background: var(--c-glass);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.refer-benefit:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 26px rgba(217,155,110,0.12);
}

.refer-benefit__border {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0;
  background: conic-gradient(from var(--refer-angle, 0deg), var(--c-copper), var(--c-rose-gold), var(--c-metal-hi), var(--c-copper));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--dur-fast);
  animation: referRotateBorder 5s linear infinite;
  pointer-events: none;
}
@keyframes referRotateBorder { to { --refer-angle: 360deg; } }
@property --refer-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.refer-benefit:hover .refer-benefit__border { opacity: 1; }

.refer-benefit__glow {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at var(--refer-mx, 50%) var(--refer-my, 50%), rgba(217,155,110,0.16), transparent 60%);
  transition: opacity var(--dur-fast);
  pointer-events: none;
}
.refer-benefit:hover .refer-benefit__glow { opacity: 1; }

.refer-benefit__icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(217,155,110,0.14), rgba(217,155,110,0.02));
  border: 1px solid var(--c-line);
  position: relative; z-index: 2;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.refer-benefit:hover .refer-benefit__icon {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(217,155,110,0.3);
}
.refer-benefit__icon svg {
  width: 22px; height: 22px; fill: none; stroke: var(--c-copper-light);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.refer-benefit h3 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  margin-bottom: 8px; position: relative; z-index: 2; color: var(--c-text-1);
}
.refer-benefit p {
  color: var(--c-text-2); font-size: 0.84rem; line-height: 1.55;
  position: relative; z-index: 2;
}

.refer__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- responsive ---- */
@media (max-width: 1400px) {
  .refer { padding-inline: 60px; }
}
@media (max-width: 1080px) {
  .refer { padding-inline: 40px; }
  .refer__inner { grid-template-columns: 1fr; gap: 50px; text-align: center; }
  .refer__benefits { max-width: 640px; margin-left: auto; margin-right: auto; }
  .refer__cta { justify-content: center; }
}
@media (max-width: 640px) {
  .refer { padding-block: 100px 110px; padding-inline: 20px; }
  .refer__benefits { grid-template-columns: 1fr; }
  .refer__illustration { max-width: 260px; }
  .refer__cta { flex-direction: column; align-items: stretch; }
  .refer__cta .btn { justify-content: center; }
}