/* HTTP Studio marketing site — custom styles layered on top of Tailwind CDN utilities */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* ---- Hero mesh background ---- */
.hero-mesh {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.14), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(6, 182, 212, 0.14), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.10), transparent 55%);
}
.dark .hero-mesh {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.22), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(6, 182, 212, 0.18), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.14), transparent 55%);
}

/* ---- Reveal-on-scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Product card ---- */
.product-card {
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  padding: 1.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.dark .product-card {
  border-color: rgb(30 41 59);
  background: rgb(15 23 42 / 0.5);
}
.product-card:hover {
  border-color: rgb(147 197 253);
  box-shadow: 0 10px 30px -12px rgba(37, 99, 235, 0.25);
  transform: translateY(-3px);
}
.dark .product-card:hover {
  border-color: rgb(30 64 175);
  box-shadow: 0 10px 30px -12px rgba(37, 99, 235, 0.35);
}

/* ---- Event card (larger feature cards) ---- */
.event-card {
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  padding: 2rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.dark .event-card {
  border-color: rgb(30 41 59);
  background: rgb(15 23 42 / 0.5);
}
.event-card:hover {
  border-color: rgb(196 181 253);
  box-shadow: 0 10px 30px -12px rgba(139, 92, 246, 0.25);
  transform: translateY(-3px);
}

/* ---- Icon badge ---- */
.icon-badge {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: rgb(239 246 255);
  color: rgb(37 99 235);
}
.dark .icon-badge {
  background: rgba(37, 99, 235, 0.12);
  color: rgb(96 165 250);
}
.icon-badge svg { width: 1.375rem; height: 1.375rem; }

.icon-badge[data-accent="violet"] { background: rgb(245 243 255); color: rgb(124 58 237); }
.dark .icon-badge[data-accent="violet"] { background: rgba(124, 58, 237, 0.14); color: rgb(196 181 253); }

.icon-badge[data-accent="emerald"] { background: rgb(236 253 245); color: rgb(5 150 105); }
.dark .icon-badge[data-accent="emerald"] { background: rgba(5, 150, 105, 0.16); color: rgb(110 231 183); }

.icon-badge[data-accent="rose"] { background: rgb(255 241 242); color: rgb(225 29 72); }
.dark .icon-badge[data-accent="rose"] { background: rgba(225, 29, 72, 0.14); color: rgb(253 164 175); }

/* ---- Feature list ---- */
.feature-list {
  margin-top: 0.875rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgb(71 85 105);
}
.dark .feature-list { color: rgb(148 163 184); }
.feature-list li {
  position: relative;
  padding-left: 1.1rem;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.5;
}

/* ---- Card thumbnail (screenshot with graceful fallback) ---- */
.thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 0.65rem;
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, rgb(239 246 255), rgb(219 234 254));
}
.dark .thumb-wrap { background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(37,99,235,0.06)); }
.thumb-wrap[data-accent="violet"] { background: linear-gradient(135deg, rgb(245 243 255), rgb(233 213 255)); }
.dark .thumb-wrap[data-accent="violet"] { background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(124,58,237,0.06)); }
.thumb-wrap[data-accent="emerald"] { background: linear-gradient(135deg, rgb(236 253 245), rgb(209 250 229)); }
.dark .thumb-wrap[data-accent="emerald"] { background: linear-gradient(135deg, rgba(5,150,105,0.18), rgba(5,150,105,0.06)); }
.thumb-wrap[data-accent="rose"] { background: linear-gradient(135deg, rgb(255 241 242), rgb(254 205 211)); }
.dark .thumb-wrap[data-accent="rose"] { background: linear-gradient(135deg, rgba(225,29,72,0.18), rgba(225,29,72,0.06)); }

.thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 2;
  transition: transform 0.5s ease;
}
.product-card:hover .thumb-img,
.event-card:hover .thumb-img { transform: scale(1.045); }

.thumb-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgb(37 99 235);
}
.dark .thumb-fallback { color: rgb(96 165 250); }
.thumb-wrap[data-accent="violet"] .thumb-fallback { color: rgb(124 58 237); }
.dark .thumb-wrap[data-accent="violet"] .thumb-fallback { color: rgb(196 181 253); }
.thumb-wrap[data-accent="emerald"] .thumb-fallback { color: rgb(5 150 105); }
.dark .thumb-wrap[data-accent="emerald"] .thumb-fallback { color: rgb(110 231 183); }
.thumb-wrap[data-accent="rose"] .thumb-fallback { color: rgb(225 29 72); }
.dark .thumb-wrap[data-accent="rose"] .thumb-fallback { color: rgb(253 164 175); }
.thumb-fallback svg { width: 2rem; height: 2rem; opacity: 0.55; }
.thumb-fallback span {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

/* ---- Showcase slider ---- */
.slider-viewport {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -20px rgba(15, 23, 42, 0.35);
  outline: none;
}
.slider-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  touch-action: pan-y;
}
.slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16 / 8.2;
  background: linear-gradient(135deg, rgb(30 41 59), rgb(15 23 42));
}
.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 2;
}
.slide-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}
.slide-fallback svg { width: 3rem; height: 3rem; opacity: 0.6; }
.slide-fallback span {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.slide-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 2rem 1.75rem 1.5rem;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.88), rgba(2, 6, 23, 0.35) 65%, transparent);
  color: #fff;
}
.slide-caption strong { display: block; font-size: 1.0625rem; font-weight: 700; }
.slide-caption span { display: block; font-size: 0.75rem; opacity: 0.75; margin-top: 0.15rem; }

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease;
  cursor: pointer;
}
.slider-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.slider-arrow.left { left: 1rem; }
.slider-arrow.right { right: 1rem; }
.slider-arrow svg { width: 1.25rem; height: 1.25rem; }

.slider-dots {
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 0.4rem;
}
.slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.slider-dot.active { width: 22px; background: #fff; }