html {
  scroll-behavior: smooth;
}

:root {
  --amazon-navy: #131921;
  --amazon-blue: #232f3e;
  --amazon-orange: #ff9900;
  --etsy-orange: #f1641e;
  --cream: #fff8f0;
  --muted: #b8bdc7;
  --line: rgba(255, 255, 255, 0.12);
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, "Segoe UI", sans-serif;
  color: var(--cream);
  background:
    radial-gradient(circle at 12% 10%, rgba(241, 100, 30, 0.18), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(255, 153, 0, 0.14), transparent 28%),
    linear-gradient(135deg, #0b1118, var(--amazon-navy) 55%, #182333);
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(7, 17, 27, 0.72),
      rgba(7, 17, 27, 0.72)
    ),
    url("/logo.png");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.glass-card {
  background: linear-gradient(
    145deg,
    rgba(35, 47, 62, 0.88),
    rgba(19, 25, 33, 0.78)
  );
  border: 1px solid var(--line);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  transition: 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(255, 153, 0, 0.75);
  box-shadow: 0 18px 40px rgba(255, 153, 0, 0.16);
  transform: translateY(-6px);
}

.glow-btn {
  color: #111820;
  background: linear-gradient(
    135deg,
    var(--amazon-orange),
    var(--etsy-orange)
  );
  box-shadow: 0 0 24px rgba(241, 100, 30, 0.32);
  transition: 0.3s ease;
}

.glow-btn:hover {
  background: linear-gradient(
    135deg,
    #ffb52e,
    #ff7a32
  );
  box-shadow: 0 0 34px rgba(241, 100, 30, 0.65);
  transform: translateY(-2px);
}

.soft-card {
  background: rgba(35, 47, 62, 0.72);
  border: 1px solid var(--line);
}

.badge {
  color: #ffb52e;
  background: rgba(241, 100, 30, 0.1);
  border: 1px solid rgba(241, 100, 30, 0.4);
}

.input-field {
  background: rgba(19, 25, 33, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: white;
  transition: 0.25s ease;
}

.input-field::placeholder {
  color: #87919f;
}

.input-field:focus {
  border-color: var(--amazon-orange);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.16);
  outline: none;
}

.etsy-theme {
  border-color: rgba(241, 100, 30, 0.5);
}

.etsy-theme:hover {
  border-color: var(--etsy-orange);
  box-shadow: 0 18px 42px rgba(241, 100, 30, 0.22);
}

.amazon-theme {
  background: linear-gradient(
    145deg,
    var(--amazon-blue),
    var(--amazon-navy)
  );
  border-color: rgba(255, 153, 0, 0.45);
}

.amazon-theme:hover {
  border-color: var(--amazon-orange);
  box-shadow: 0 18px 42px rgba(255, 153, 0, 0.2);
}

.etsy-icon {
  background: rgba(241, 100, 30, 0.14);
  color: var(--etsy-orange);
}

.amazon-icon {
  background: rgba(255, 153, 0, 0.14);
  color: var(--amazon-orange);
}

.text-emerald-400,
.text-emerald-300 {
  color: var(--amazon-orange) !important;
}

.text-cyan-400,
.text-cyan-300 {
  color: var(--etsy-orange) !important;
}

.bg-emerald-500 {
  background-color: var(--amazon-orange) !important;
}

.bg-cyan-400 {
  background-color: var(--etsy-orange) !important;
}

.border-emerald-500,
.border-emerald-400 {
  border-color: rgba(255, 153, 0, 0.65) !important;
}

.border-cyan-400 {
  border-color: rgba(241, 100, 30, 0.65) !important;
}

.bg-gradient-to-r {
  background-image: linear-gradient(
    to right,
    var(--etsy-orange),
    var(--amazon-orange)
  ) !important;
}

footer {
  background: rgba(19, 25, 33, 0.75);
  color: var(--muted);
}

@media (max-width: 768px) {
  .bg-pattern {
    background-size: 260px;
    opacity: 0.99;
  }

  .glass-card:hover {
    transform: none;
  }
}