/* ============================================================================
   home.css — homepage-only "based & freaky" art direction.
   Loaded ONLY by index.html, scoped under body.home, so the shared SEO/article
   pages (content.css) stay clean. Never restyles #app (the in-call UI).
   Palette: void black + neon cyan→violet→magenta triad, film grain, staring eyes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

.home {
  --void: #050507;
  --ink: #f3f3fb;
  --dim: #9a9aac;
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --magenta: #ff2d78;
  --glass: rgba(18,18,26,.55);
  --glass-line: rgba(255,255,255,.09);
  --neon: linear-gradient(120deg, var(--cyan), var(--violet) 52%, var(--magenta));

  background: var(--void);
  color: var(--ink);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}
/* landing-only accent override so dynamically-injected bits (stats badge, install
   button) pick up the neon theme without touching the teal in-call UI. */
.home #landing { --accent: var(--magenta); --accent-hover: #ff5a93; }

/* ---------------------------------------------------------------- FX layer */
.fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.home header, .home #landing { position: relative; z-index: 1; }

/* live neon constellation canvas (the dynamic centerpiece) */
.webfx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .42; mix-blend-mode: screen; }
.orb-a { width: 46vw; height: 46vw; background: radial-gradient(circle, var(--cyan), transparent 65%);    top: -14vw; left: -10vw;  animation: drift1 22s ease-in-out infinite; }
.orb-b { width: 42vw; height: 42vw; background: radial-gradient(circle, var(--magenta), transparent 65%); top: 6vw;   right: -12vw; animation: drift2 26s ease-in-out infinite; }
.orb-c { width: 40vw; height: 40vw; background: radial-gradient(circle, var(--violet), transparent 64%);  top: 30vw;  left: 24vw;   animation: drift3 30s ease-in-out infinite; }
@keyframes drift1 { 50% { transform: translate(8vw, 6vw)  scale(1.15); } }
@keyframes drift2 { 50% { transform: translate(-7vw, 9vw) scale(1.1); } }
@keyframes drift3 { 50% { transform: translate(5vw, -8vw) scale(1.2); } }

/* film grain — fractal noise data URI, the single biggest "expensive" tell */
.grain { position: absolute; inset: -50%; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 6s steps(6) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-2%)} 80%{transform:translate(4%,2%)} }

/* scanlines + vignette for a CRT/surveillance edge */
.scan { position: absolute; inset: 0; opacity: .4;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
  -webkit-mask: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%);
          mask: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%); }
.home::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% -10%, transparent 50%, rgba(5,5,7,.85) 100%); }
/* In a call the decorative layer must not haze over the app UI — drop it entirely
   (also stops the orb/grain animations from costing client CPU mid-WebRTC). */
.home.in-call .fx, .home.in-call::after { display: none !important; }

/* ------------------------------------------------------------------ Header */
.home header { padding: 4px 2px; margin-bottom: 8px; }
.home .wordmark { font-family: 'Space Grotesk'; font-size: 22px; font-weight: 700; letter-spacing: -.03em;
  background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home .brand:hover .wordmark { animation: glitch .35s steps(2) 2; }
@keyframes glitch { 0%{filter:none;transform:none} 50%{filter:drop-shadow(2px 0 var(--magenta)) drop-shadow(-2px 0 var(--cyan));transform:translateX(-1px)} }
.home .tag { color: var(--cyan); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); text-shadow: 0 0 10px rgba(34,211,238,.5); }
.home .share-btn { color: var(--ink); background: rgba(255,255,255,.04); border-color: var(--glass-line); backdrop-filter: blur(8px); }
.home .share-btn:hover:not(:disabled) { border-color: var(--magenta); background: rgba(255,45,120,.12); }
.home .online { color: var(--dim); }
.home .online-dot { background: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.18), 0 0 12px var(--cyan); animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .55; } }

/* -------------------------------------------------------------------- Hero */
.home .hero { padding: clamp(24px, 6vh, 72px) 0 56px; align-items: center; }
.home .hero-text { flex: 1 1 420px; }

/* staggered entrance reveal — makes the first paint feel designed, not loaded */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.home .hero-text > * { animation: rise .7s both cubic-bezier(.2,.7,.2,1); }
.home .eyebrow { animation-delay: .05s; }
.home .hero h1 { animation-delay: .14s; }
.home .lede { animation-delay: .28s; }
.home .trust { animation-delay: .42s; }
.home .hero .card { animation: rise .8s .34s both cubic-bezier(.2,.7,.2,1); }

.home .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--glass-line); background: rgba(255,255,255,.03); backdrop-filter: blur(8px);
  padding: 6px 12px; border-radius: 100px; margin-bottom: 22px; }
.home .eyebrow b { color: var(--cyan); font-weight: 700; }

.home .hero h1 { font-family: 'Space Grotesk'; font-weight: 700;
  font-size: clamp(40px, 7vw, 76px); line-height: .98; letter-spacing: -.035em; margin: 0 0 20px; }
.home .hero h1 .flux { background: var(--neon); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: flux 7s linear infinite; }
@keyframes flux { to { background-position: 200% center; } }

.home .lede { font-size: clamp(16px, 1.7vw, 19px); color: #c3c3d2; line-height: 1.5; max-width: 30em; margin: 0 0 26px; }
.home .lede b { color: var(--ink); font-weight: 600; }

/* trust strip — keeps the differentiator visible, looks like a spec sheet */
.home .trust { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; margin: 0; }
.home .trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--dim);
  border: 1px solid var(--glass-line); background: rgba(255,255,255,.03); border-radius: 100px; padding: 7px 13px; }
.home .trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.home .trust li:nth-child(2)::before { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.home .trust li:nth-child(3)::before { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }

/* -------------------------------------------------------------- Gate card */
.home .hero .card { width: 430px; max-width: 100%; margin: 0; padding: 26px;
  border: 1px solid transparent; border-radius: 22px;
  background: linear-gradient(var(--glass), var(--glass)) padding-box,
              linear-gradient(140deg, rgba(34,211,238,.5), rgba(139,92,246,.35) 50%, rgba(255,45,120,.5)) border-box;
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 60px -30px var(--violet); }
.home .card h2 { font-family: 'Space Grotesk'; font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.home .card > p { color: var(--dim); font-size: 13.5px; line-height: 1.55; }

.home .check { font-size: 13.5px; color: #cfcfdd; }
.home .check input { appearance: none; -webkit-appearance: none; width: 19px; height: 19px; flex: 0 0 auto;
  border: 1.5px solid var(--glass-line); border-radius: 6px; background: rgba(0,0,0,.3); cursor: pointer; position: relative; transition: .15s; }
.home .check input:checked { background: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 16px rgba(255,45,120,.6); }
.home .check input:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.home .mode-choice { gap: 10px; }
.home .enter-btn { padding: 15px; border-radius: 13px; font-size: 15px; letter-spacing: -.01em; position: relative; overflow: hidden; }
.home .enter-btn:not(.ghost) { color: #fff; border: 0;
  background: linear-gradient(120deg, var(--magenta), var(--violet)); background-size: 160% auto;
  box-shadow: 0 8px 30px -8px var(--magenta), 0 0 0 1px rgba(255,255,255,.06) inset;
  animation: ctaGlow 3.4s ease-in-out infinite; }
@keyframes ctaGlow { 50% { box-shadow: 0 8px 40px -6px var(--violet), 0 0 0 1px rgba(255,255,255,.06) inset; background-position: 100% center; } }
.home .enter-btn:not(.ghost):hover { transform: translateY(-1px); }
.home .enter-btn:not(.ghost)::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); }
.home .enter-btn:not(.ghost):hover::after { animation: sweep .7s ease; }
@keyframes sweep { to { left: 160%; } }
.home .enter-btn.ghost { background: rgba(255,255,255,.04); border: 1px solid var(--glass-line); color: var(--ink); }
.home .enter-btn.ghost:hover { border-color: var(--cyan); background: rgba(34,211,238,.1); color: #fff; }

/* --------------------------------------------------------- Lower sections */
.home .lp h2, .home .hero h1 { text-wrap: balance; }
.home .lp h2 { font-family: 'Space Grotesk'; font-weight: 700; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.025em; color: var(--ink); }
.home .lp > p { color: var(--dim); }
.home .lp > p a { color: var(--cyan); }
.home .lp > p a:hover { color: var(--magenta); }

.home .steps li, .home .feature, .home .faq details {
  background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px); border-radius: 16px;
  transition: border-color .2s, transform .2s; }
.home .feature:hover { border-color: rgba(139,92,246,.5); transform: translateY(-2px); }
.home .steps li::before { background: linear-gradient(135deg, var(--cyan), var(--violet)); box-shadow: 0 0 16px rgba(139,92,246,.5); }
.home .feature h3 { color: var(--ink); }
.home .faq summary { color: var(--ink); }
.home .faq summary::after { color: var(--magenta); }

.home .site-footer { border-top: 1px solid var(--glass-line); }
.home .foot-cols strong { background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home .foot-cols nav a:hover { color: var(--cyan); }

/* ---------------------------------------------------------- a11y / mobile */
@media (prefers-reduced-motion: reduce) {
  .orb, .grain, .home .online-dot, .home .hero h1 .flux, .home .enter-btn:not(.ghost),
  .home .hero-text > *, .home .hero .card { animation: none !important; }
}
@media (max-width: 760px) {
  .home .hero { padding: 18px 0 34px; }
  .home .hero .card { width: 100%; }
}