:root {
  /* Accent palette */
  --red-light: #f61a6f;
  --red-dark:  #b72472;
  --blue-light:#29e8e3;
  --blue-dark: #3eb4d6;
}

/* Reusable nav link (de-accented contact uses this) */
.nav-link {
  @apply text-gray-300 hover:text-white transition-colors;
  font-weight: 600;
}

/* Accent title span */
.title-accent {
  background: linear-gradient(90deg, var(--red-light), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(246,26,111,0.25));
}

/* Buttons */
.btn-primary {
  @apply px-4 py-2 rounded-lg text-base font-semibold;
  background: linear-gradient(90deg, var(--red-dark), var(--red-light));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 160ms ease, filter 160ms ease;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }

.btn-gradient {
  @apply px-5 py-3 rounded-xl font-semibold tracking-wide;
  background: linear-gradient(90deg, var(--red-light), var(--blue-dark));
  color: #111;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-gradient:hover { filter: brightness(1.05); }

/* Links */
.link-accent {
  color: var(--blue-light);
  text-decoration: none;
  position: relative;
  font-weight: 600;
}
.link-accent::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--blue-light), var(--red-light));
  opacity: 0.4;
  transition: opacity 160ms ease;
}
.link-accent:hover::after { opacity: 1; }

/* Section heading — CAPS + bold + larger */
.section-heading {
  @apply text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-wide mb-8;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--red-dark), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subsection-heading {
  @apply text-2xl sm:text-3xl font-bold uppercase tracking-wide mb-6;
  color: #e5e7eb; /* gray-200 */
}


/* Inputs (larger paddings & nicer focus) */
.input {
  @apply w-full px-5 py-3 rounded-2xl bg-white/5 text-gray-100 placeholder-gray-400 border border-white/10 focus:outline-none focus:ring-2 focus:ring-cyan-300/40 focus:border-cyan-300/30;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  backdrop-filter: blur(2px);
}

/* Featured links with favicon */
.featured-link {
  @apply inline-flex items-center gap-3 px-3 py-2 rounded-lg bg-white/5 hover:bg-white/10 transition-colors;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Soft radial behind hero */
.hero-gradient {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(41,232,227,0.12), transparent 60%),
    radial-gradient(800px 400px at 20% 10%, rgba(246,26,111,0.10), transparent 60%),
    radial-gradient(800px 400px at 80% 15%, rgba(62,180,214,0.10), transparent 60%);
}

/* Glitch effect for About text (static) */
.glitch {
  position: relative;
  display: inline-block;
  font-size: clamp(1.54rem, 3.36vw, 2.1rem);
  line-height: 1.7;
  text-shadow:
    0 0 8px rgba(246,26,111,0.25),
    0 0 8px rgba(41,232,227,0.25);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
}

.glitch::before {
  color: var(--red-light);
  transform: translate(1px, 0);
  clip-path: inset(0 0 45% 0);
  /* animation removed */
}

.glitch::after {
  color: var(--blue-light);
  transform: translate(-1px, 0);
  clip-path: inset(55% 0 0 0);
  /* animation removed */
}


/* Light input fields: white background + black text */
.input-light {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #fff;
  color: #000;
  border: 1px solid rgba(0,0,0,0.2);
  font-size: 1rem;
}

.input-light::placeholder {
  color: #555; /* darker placeholder */
}

.input-light:focus {
  outline: none;
  border-color: var(--blue-dark);
  box-shadow: 0 0 0 2px rgba(62,180,214,0.3);
}

/* Invert logo to white */
.unity-logo {
  filter: brightness(0) invert(1);
}