/* =====================================================
   Syberra — 21st.dev Effects
   HeroGeometric shapes + GlowingEffect borders
   ===================================================== */

/* ── Hero Overrides ─────────────────────────────────── */

.hero {
  background: #030303;
  overflow: hidden;
}

/* Soft radial overlay matching HeroGeometric */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(99,102,241,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(244,63,94,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Hide old orbs / grid */
.hero-bg,
.hero-grid,
.hero-particles {
  display: none;
}

/* ── Hero Content Upgrade ───────────────────────────── */

.hero-content {
  position: relative;
  z-index: 2;
}

/* Badge with red dot */
.hero-badge-geo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
  animation: heroFadeUp 1s 0.5s cubic-bezier(0.25, 0.4, 0.25, 1) both;
}

.hero-badge-geo .badge-identity {
  height: 16px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* Gradient hero title */
.hero-title-geo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  animation: heroFadeUp 1s 0.7s cubic-bezier(0.25, 0.4, 0.25, 1) both;
}

.hero-title-geo .line-1 {
  display: block;
  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0.8));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-title-geo .line-2 {
  display: block;
  background: linear-gradient(90deg, #a5b4fc, rgba(255,255,255,0.9), #fda4af);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-content > p {
  animation: heroFadeUp 1s 0.9s cubic-bezier(0.25, 0.4, 0.25, 1) both;
}

.hero-buttons {
  animation: heroFadeUp 1s 1.1s cubic-bezier(0.25, 0.4, 0.25, 1) both;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gradient fade at top and bottom of hero */
.hero-fade-edges {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, #030303 0%, transparent 15%, transparent 85%, #030303 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Glowing Effect on Cards ────────────────────────── */

.step-card,
.icon-card {
  position: relative;
  isolation: isolate;
}

.glow-border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    transparent 0deg,
    #dd7bbb   20deg,
    #d79f1e   45deg,
    #5a922c   70deg,
    #4c7894   95deg,
    transparent 115deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.step-card:hover .glow-border,
.icon-card:hover .glow-border {
  opacity: 1;
}

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width: 768px) {
  .es-1 { width: 340px; height: 90px; }
  .es-2 { width: 280px; height: 80px; }
  .es-3 { width: 180px; height: 55px; }
  .es-4 { width: 130px; height: 44px; }
  .es-5 { width: 100px; height: 32px; }
}