/* -----------------------------------------------------------
   BeSeen - Coming Soon (static)
   Typography: Unbounded + Archivo
   ----------------------------------------------------------- */

:root {
  --paper: #f9f7f2;
  --ink: #0e0e12;
  --ink-soft: rgba(14, 14, 18, 0.72);
  --accent-1: #ff4d00;
  --accent-2: #00c2ff;
  --accent-3: #ffb800;
  --accent-4: #7a5cff;
  --shadow: rgba(12, 12, 18, 0.2);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  overflow: hidden;
  font-family: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Bold gradient mesh background */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  background: radial-gradient(900px 520px at 10% 20%, rgba(255, 77, 0, 0.18), transparent 62%),
    radial-gradient(820px 640px at 90% 10%, rgba(0, 194, 255, 0.2), transparent 60%),
    radial-gradient(960px 680px at 75% 85%, rgba(122, 92, 255, 0.2), transparent 60%),
    radial-gradient(700px 520px at 20% 85%, rgba(255, 184, 0, 0.22), transparent 60%),
    linear-gradient(130deg, #ffffff 0%, #f6f1e6 55%, #ffffff 100%);
  filter: saturate(120%) contrast(108%);
  animation: float 16s ease-in-out infinite alternate;
  z-index: -3;
}

@keyframes float {
  0% { transform: translate3d(-1%, -2%, 0) scale(1.02); }
  100% { transform: translate3d(1%, 1%, 0) scale(1.05); }
}

/* Subtle grain overlay (SVG data URI) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: -2;
}

.topbar {
  position: fixed;
  top: clamp(18px, 3vw, 32px);
  right: clamp(18px, 4vw, 48px);
  z-index: 2;
}

.brand {
  font-family: "Unbounded", "Archivo", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(12px, 1.4vw, 16px);
  padding: 12px 18px;
  color: #fdfbf8;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 12px 36px var(--shadow);
}

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px);
  text-align: center;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  width: min(70vw, 740px);
  height: min(70vw, 740px);
  border-radius: 50%;
  background: conic-gradient(
    from 120deg,
    rgba(255, 77, 0, 0.18),
    rgba(255, 184, 0, 0.18),
    rgba(0, 194, 255, 0.18),
    rgba(122, 92, 255, 0.18),
    rgba(255, 77, 0, 0.18)
  );
  filter: blur(2px);
  opacity: 0.75;
  z-index: -1;
}

.headline {
  margin: 0;
  font-family: "Unbounded", "Archivo", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.95;
  font-size: clamp(52px, 10vw, 162px);
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--ink) 20%, #1f1f2e 50%, var(--ink) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 28px 60px rgba(10, 10, 14, 0.2);
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}