/* Promptly Built visual refresh: calmer motion, tighter rhythm, clearer hierarchy. */
:root {
  --pb-bg: #050817;
  --pb-border: rgba(148, 163, 184, 0.18);
  --pb-muted: #a8b3c7;
}

html { background: var(--pb-bg); }

body.bg-mesh {
  background-color: var(--pb-bg) !important;
  background-image: radial-gradient(circle at 8% 0%, rgba(59, 130, 246, 0.18), transparent 34%), radial-gradient(circle at 92% 18%, rgba(139, 92, 246, 0.12), transparent 30%), linear-gradient(180deg, #050817 0%, #070b1d 52%, #050817 100%);
  color: var(--pb-muted);
}

nav {
  background: rgba(5, 8, 23, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  padding-block: 0.7rem !important;
}

nav > div { min-height: 2.75rem; }
nav a { transition-duration: 180ms !important; }
.gradient-text { background-size: 100% auto !important; animation: none !important; }

/* Keep content readable while optional reveal scripts load. */
[data-aos] { opacity: 1 !important; transform: none !important; }

.glass-card {
  background: linear-gradient(145deg, rgba(20, 30, 55, 0.76), rgba(9, 14, 32, 0.78)) !important;
  border-color: var(--pb-border) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.16);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}

.glass-card:hover { transform: translateY(-4px) !important; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28) !important; }
header { max-width: 980px; margin-inline: auto; }
header h1 { text-wrap: balance; }
section { scroll-margin-top: 5rem; }
#features, #portfolio, #plans, #contact { padding-block: clamp(4.5rem, 8vw, 7rem) !important; }
#portfolio img { filter: saturate(0.9) contrast(1.04); }
#portfolio .group:hover img { transform: scale(1.035) !important; }
#plans .glass-card { min-height: 100%; }

@media (max-width: 767px) {
  nav > div { padding-inline: 1rem !important; }
  header h1 { font-size: clamp(2.75rem, 13vw, 4.5rem) !important; line-height: 0.98; }
  header p { font-size: 1.05rem !important; }
  #features, #portfolio, #plans, #contact { padding-block: 4rem !important; }
}

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