/* TwinShare marketing site — custom styles layered on top of Tailwind CDN
   DARK + NEON LIME · matches the mobile app (canvas #0E0F0D, accent #C6FF3D, Fraunces serif). */

:root {
  --brand:      #C6FF3D;   /* neon lime */
  --brand-deep: #A4E029;
  --brand-soft: #20260F;
  --pink:       #EC4899;
  --coral:      #FB923C;
  --green:      #34D399;
  --canvas:     #0E0F0D;
  --card:       #171914;
  --wash:       #1F221B;
  --line:       #2C3027;
  --ink:        #F3F5EF;
  --ink-soft:   #9AA08F;
  --ink-faint:  #6E7468;
  --on-brand:   #15170F;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(198,255,61,0.28); color: #fff; }

/* ---------- Decorative backgrounds ---------- */
.bg-grain {
  background-image:
    radial-gradient(circle at 15% 18%, rgba(198,255,61,0.10), transparent 42%),
    radial-gradient(circle at 85% 8%,  rgba(236,72,153,0.08), transparent 40%),
    radial-gradient(circle at 50% 110%, rgba(251,146,60,0.06), transparent 55%);
}

.bg-mesh {
  background:
    radial-gradient(55rem 55rem at 80% -10%, rgba(198,255,61,0.16), transparent 60%),
    radial-gradient(45rem 45rem at -10% 30%, rgba(236,72,153,0.12), transparent 55%),
    radial-gradient(38rem 38rem at 60% 120%, rgba(251,146,60,0.10), transparent 55%);
}

/* faint dotted grid for hero depth */
.bg-dots {
  background-image: radial-gradient(rgba(243,245,239,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(60% 60% at 50% 30%, #000 30%, transparent 75%);
}

.text-gradient {
  background: linear-gradient(120deg, #D6FF6B 0%, #C6FF3D 45%, #A4E029 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-vivid {
  background: linear-gradient(110deg, #C6FF3D 0%, #D6FF6B 40%, #34D399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.divider-fade {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,255,61,0.35), transparent);
}

/* ---------- Pills / tags ---------- */
.tag {
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid rgba(198,255,61,0.22);
}

/* ---------- Buttons ---------- */
.btn-gold {
  background: var(--brand);
  color: var(--on-brand) !important;
  box-shadow: 0 12px 30px -14px rgba(198,255,61,0.55);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, background 0.2s ease;
}
.btn-gold:hover {
  transform: translateY(-2px);
  background: var(--brand-deep);
  box-shadow: 0 18px 40px -16px rgba(198,255,61,0.65);
}
.btn-outline {
  background: rgba(255,255,255,0.02);
  color: var(--ink) !important;
  border: 1px solid var(--line);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.2s ease, background 0.2s ease;
}
.btn-outline:hover {
  transform: translateY(-2px);
  border-color: rgba(198,255,61,0.45);
  background: rgba(198,255,61,0.05);
}

/* ---------- Links ---------- */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1.5px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ---------- Cards ---------- */
.shadow-card { box-shadow: 0 10px 34px -16px rgba(0,0,0,0.65); }
.lift { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease; }
.lift:hover { transform: translateY(-4px); border-color: rgba(198,255,61,0.30); }

.feature-card { position: relative; overflow: hidden; }
.feature-card.accent-bar::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--accent, var(--brand)); opacity: 0;
  transition: opacity 0.3s ease;
}
.feature-card.accent-bar:hover::before { opacity: 0.9; }

/* ---------- Navbar ---------- */
#site-nav {
  transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
}
#site-nav.scrolled {
  background-color: rgba(14,15,13,0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 10px 34px -22px rgba(0,0,0,0.8);
  border-color: rgba(44,48,39,0.9);
}
.nav-link { position: relative; color: var(--ink-soft); }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--brand); }

/* Mobile menu — collapse fully when closed so the fixed nav doesn't expand */
#mobile-menu {
  overflow: hidden;
  max-height: 85vh;
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.35s ease;
}
#mobile-menu.hidden-menu { opacity: 0; transform: translateY(-8px); pointer-events: none; max-height: 0; }

/* ---------- FAQ accordion ---------- */
.faq-item .faq-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
  opacity: 0;
}
.faq-item.open .faq-body { opacity: 1; }
.faq-item .faq-icon { transition: transform 0.35s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ---------- Marquee ---------- */
.marquee { display: flex; gap: 2.5rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Floating ---------- */
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 9s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---------- Confetti ---------- */
#confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- Stats ---------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Phone mockup ---------- */
.phone {
  border-radius: 2.5rem;
  background: linear-gradient(160deg, #20241B, #0E0F0D);
  padding: 0.6rem;
  border: 1px solid var(--line);
  box-shadow: 0 50px 90px -34px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
}
.phone-screen {
  border-radius: 2rem; overflow: hidden;
  background: #101109;
  border: 1px solid rgba(44,48,39,0.7);
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .float, .float-slow, .marquee { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Footer ---------- */
.foot-link { color: var(--ink-soft); transition: color 0.2s ease; }
.foot-link:hover { color: var(--brand); }