/* App Shuffle – Shared styles for index.html and random.html */

:root {
  --hu-primary: #6c47ff;
  --hu-primary-600: #5a38f2;
  --hu-dark: #0b1020;
  --hu-text: #1f2330;
  --hu-muted: #6b7280;
  --hu-soft: #f5f7fb;
  --hu-accent: #ff9900;
  --hu-border: #e5e7eb;
}

html, body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--hu-text);
}

/* Brand / Navbar */
.brand-text { font-weight: 800; letter-spacing: -0.2px; }
.brand-dot { color: var(--hu-primary); }
.navbar-brand span.logo {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08); margin-right: 8px;
}
.navbar { background: #ffffffcc; backdrop-filter: saturate(180%) blur(10px); }

/* Hero */
.hero { position: relative; padding-top: 96px; padding-bottom: 48px; }
.gradient-text {
  background: linear-gradient(90deg, var(--hu-primary) 0%, #ff3d9a 55%, #ffa63b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--hu-muted); max-width: 680px; margin-inline: auto; }
.dotted-path {
  position: absolute; right: 6%; top: 10%; width: 120px; height: 420px;
  background-image: radial-gradient(var(--hu-border) 2px, transparent 2px);
  background-size: 12px 12px; -webkit-mask: linear-gradient(180deg, black, transparent 85%);
  mask: linear-gradient(180deg, black, transparent 85%);
  opacity: 0.6; border-radius: 120px 120px 0 0; transform: rotate(8deg);
}
.arrow { position: absolute; right: 6%; top: 42%; font-size: 22px; color: #f59e0b; transform: rotate(-10deg); }

/* Trust bar */
.trust-card { border: 1px solid var(--hu-border); background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(17, 24, 39, 0.06); }
.logo-pill {  height: 64px; object-fit: contain; }

/* Feature cards */
.feature-card { border: 1px solid var(--hu-border); border-radius: 14px; background: #fff; padding: 20px; height: 100%; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.04); }
.feature-title { font-weight: 700; font-size: 1rem; }
.feature-text { color: var(--hu-muted); font-size: 0.95rem; }

/* Awards */
.awards { background: #0d1b3d; color: #ecf0ff; }
.awards h3 { color: #ffffff; }

/* CTA */
.cta-card { border-radius: 18px; background: linear-gradient(135deg, rgba(108,71,255,0.12), rgba(255,61,154,0.12)); border: 1px dashed rgba(108,71,255,0.35); }
.cta-card .lead { color: #e0e3ee; }

/* Footer */
.footer-top { border-top: 1px solid var(--hu-border); }
.footer a { color: #4b5563; text-decoration: none; }
.footer a:hover { color: var(--hu-primary); }

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--hu-primary);
  --bs-btn-border-color: var(--hu-primary);
  --bs-btn-hover-bg: var(--hu-primary-600);
  --bs-btn-hover-border-color: var(--hu-primary-600);
  --bs-btn-focus-shadow-rgb: 108,71,255;
}

.small-muted { color: var(--hu-muted); font-size: 0.9rem; }

/* Random page specific */
.screenshot-frame { border: 1px solid var(--hu-border); border-radius: 16px; box-shadow: 0 16px 40px rgba(17,24,39,.12); overflow: hidden; background: white; }
.browser-topbar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: linear-gradient(180deg, #f9fafb, #eef2f7); border-bottom: 1px solid var(--hu-border); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }
.screenshot-viewport { aspect-ratio: 16/9; width: 100%; background: linear-gradient(135deg, #fafafa, #f3f6fb); }
.screenshot-viewport img { width: 100%; height: 100%; object-fit: contain; }
.screenshot-frame.full { border-radius: 0; }
.screenshot-viewport.full {  }

.details-card { border: 1px solid var(--hu-border); border-radius: 16px; padding: 20px; background: #fff; box-shadow: 0 8px 24px rgba(17,24,39,.06); }
.badge-outline { background: #fff; border: 1px solid var(--hu-border); color: #374151; }
.avatar { width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.avatar img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
@media (min-width: 992px) {
  .avatar { width: 96px; height: 96px; }
}

/* Smaller avatar variant for Shuffle page */
.avatar-sm { width: 64px; height: 64px; }
@media (min-width: 992px) {
  .avatar-sm { width: 96px; height: 96px; }
}

/* Social/link styles */
.icon-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 8px; text-decoration: none; border: none; background: transparent; font-weight: 600; }
.icon-link:hover { background: #f3f4f6; }
.icon-link.website { color: #111827; }
.icon-link.linkedin { color: #0a66c2; }
.icon-link.facebook { color: #1877f2; }
.icon-link.twitter { color: #000000; }
.icon-link.crunchbase { color: #0288d1; }
.website-text { display: inline-flex; align-items: center; color: #111827; text-decoration: none; font-weight: 400; padding: 0; }
.website-text:hover { text-decoration: underline; }

/* Bootstrap container width override (1320 -> 1200) */
@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl { max-width: 1200px; }
}