/* ============================================================
   SoSocial — Homepage REDESIGN (V2), Lusion-inspired.
   Unified DARK theme: one background, one typeface (Inter),
   the generated abstract graphics integrated as section
   backdrops, consistent motion. Loaded AFTER tailwind.css,
   mockups.css and site.css so product mockups keep working.
   ============================================================ */

:root {
  --rd-coral: #F43F5E;
  --rd-indigo: #818CF8;
  --rd-violet: #6366f1;
  --rd-ink: #08090f;
  --rd-ink-2: #0b1020;
  --rd-panel: #10162a;
  --rd-line: rgba(255,255,255,0.10);
  --rd-text: #eef1f8;
  --rd-muted: rgba(238,241,248,0.62);
  --rd-faint: rgba(238,241,248,0.38);
}

.rd {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--rd-text);
  background: var(--rd-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.rd ::selection { background: rgba(244,63,94,0.3); }
/* Neutralise the old serif so typography stays consistent. */
.rd-serif { font-family: 'Inter', system-ui, sans-serif; }

/* ─────────────────────────── NAV ─────────────────────────── */
.rd-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem clamp(1rem, 4vw, 3rem);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.rd-nav.is-scrolled {
  background: rgba(8,9,15,0.7);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--rd-line);
  padding-top: 0.85rem; padding-bottom: 0.85rem;
}
.rd-nav__logo img { height: 2.5rem; width: auto; display: block; filter: brightness(0) invert(1); }
.rd-nav__links { display: none; gap: 2rem; align-items: center; }
.rd-nav__link { font-size: 0.9rem; font-weight: 500; letter-spacing: -0.01em; color: rgba(255,255,255,0.75); transition: color 0.3s ease; }
.rd-nav__link:hover { color: #fff; }
.rd-nav__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--rd-coral); color: #fff; font-weight: 600; font-size: 0.9rem;
  padding: 0.7rem 1.35rem; border-radius: 999px;
  box-shadow: 0 8px 30px -8px rgba(244,63,94,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rd-nav__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(244,63,94,0.7); }
@media (min-width: 900px) { .rd-nav__links { display: flex; } }

/* ─────────────────────────── HERO ─────────────────────────── */
.rd-hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem clamp(1.25rem, 5vw, 4rem) 6rem;
  background: transparent; color: #fff; overflow: hidden;
}
/* Hero shares the global living backdrop; a local scrim deepens the
   contrast behind the big title without introducing a second image. */
.rd-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 28%, rgba(8,9,15,0.1), rgba(8,9,15,0.62) 72%),
    linear-gradient(180deg, rgba(8,9,15,0.45) 0%, rgba(8,9,15,0.12) 42%, rgba(8,9,15,0.55) 100%);
}
.rd-hero__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; }
.rd-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.75rem;
}
.rd-eyebrow::before { content: ''; width: 2rem; height: 1px; background: var(--rd-coral); display: inline-block; }
.rd-hero__title { font-weight: 800; letter-spacing: -0.04em; line-height: 0.92; font-size: clamp(3.1rem, 11vw, 10rem); margin: 0 0 2rem; }
.rd-hero__title .rd-line { display: block; overflow: hidden; }
.rd-hero__title .rd-italic { font-style: italic; font-weight: 500; }
.rd-hero__title .rd-grad,
.rd-grad {
  background: linear-gradient(100deg, var(--rd-coral), #fb7185 40%, var(--rd-indigo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rd-hero__sub { max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.6; color: rgba(255,255,255,0.82); font-weight: 300; margin-bottom: 2.5rem; }
.rd-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ─── Buttons ─── */
.rd-btn { display: inline-flex; align-items: center; gap: 0.6rem; border-radius: 999px; font-weight: 600; font-size: 1rem; padding: 1rem 1.9rem; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; }
.rd-btn--primary { background: var(--rd-coral); color: #fff; box-shadow: 0 12px 40px -10px rgba(244,63,94,0.7); }
.rd-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 20px 55px -12px rgba(244,63,94,0.85); }
.rd-btn--ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(6px); }
.rd-btn--ghost:hover { background: rgba(255,255,255,0.14); transform: translateY(-3px); }
/* legacy modifier kept, mapped to a light-on-dark look */
.rd-btn--dark { background: #fff; color: var(--rd-ink); }
.rd-btn--dark:hover { transform: translateY(-3px); box-shadow: 0 18px 45px -14px rgba(255,255,255,0.25); }

.rd-scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: rgba(255,255,255,0.6); font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; }
.rd-scroll-cue__line { width: 1px; height: 3rem; background: linear-gradient(rgba(255,255,255,0.6), transparent); position: relative; overflow: hidden; }
.rd-scroll-cue__line::after { content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--rd-coral); animation: rd-cue 1.8s ease-in-out infinite; }
@keyframes rd-cue { 0% { top:-100%; } 60%,100% { top:100%; } }

/* ─────────────────────── MARQUEE ─────────────────────── */
.rd-marquee { background: transparent; color: #fff; padding: 1.5rem 0; overflow: hidden; white-space: nowrap; position: relative; z-index: 1; }
.rd-marquee__track { display: inline-flex; gap: 3.5rem; align-items: center; animation: rd-marq 28s linear infinite; will-change: transform; }
.rd-marquee__track span { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); display: inline-flex; align-items:center; gap: 0.75rem; }
.rd-marquee__track span::after { content: '✦'; color: var(--rd-coral); }
@keyframes rd-marq { to { transform: translateX(-50%); } }

/* ─────────────── LIVING CSS BACKDROP (recreates the hero abstract) ───────────────
   A single fixed, full-viewport layer sits behind the ENTIRE page. It
   recreates the coral→pink→indigo glossy-liquid look of the hero PNG in
   pure CSS: a deep near-black base, several oversized blurred radial-
   gradient "blobs" (screen-blended so their colours melt together like
   liquid), plus a slowly rotating conic "sheen" for the glossy highlight.
   Each layer drifts / rotates / scales on its own long, offset loop, so
   the composite never repeats obviously — it reads as alive. Every
   .rd-section is transparent, so there are zero seams: the whole page is
   one continuous, moving surface.
   Layer order (bottom→top): base gradient → field of blobs → sheen →
   dark scrim (legibility) → faint grain (kills banding). */
.rd-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(140% 120% at 15% 0%, #12101f 0%, transparent 55%),
    radial-gradient(130% 120% at 85% 100%, #0d1226 0%, transparent 55%),
    var(--rd-ink);
}
/* Two stacked copies of the real abstract hero render. This preserves the
   exact glossy liquid design (it IS the image) rather than approximating it
   with gradients. Each layer is oversized and drifts/breathes continuously so
   the surface feels alive; GSAP also pans them on scroll (see redesign-v2.js)
   so a different region of the artwork shows as you move down the page.
   Layer B is a second, softer render blended on top for organic depth. */
/* Outer layer = scroll pan (GSAP writes its transform). */
.rd-bg__img { position: absolute; inset: -12%; will-change: transform; }
.rd-bg__img--b { opacity: 0.55; mix-blend-mode: screen; }
/* Inner element = the artwork itself + its own continuous "living" drift.
   Splitting the two keeps the CSS keyframe transform from fighting GSAP. */
.rd-bg__inner {
  position: absolute; inset: -6%;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  will-change: transform;
}
.rd-bg__img--a .rd-bg__inner {
  background-image: url("v2-hero-abstract.png");
  animation: rd-bg-drift-a 46s ease-in-out infinite alternate;
}
.rd-bg__img--b .rd-bg__inner {
  background-image: url("v2-abstract-2.png");
  animation: rd-bg-drift-b 62s ease-in-out infinite alternate;
}
/* Slow "living" motion: gentle scale + drift + micro-rotation so the ribbons
   look like they're flowing, without ever cutting to an edge. */
@keyframes rd-bg-drift-a {
  0%   { transform: scale(1.08) translate(0, 0) rotate(0deg); }
  50%  { transform: scale(1.16) translate(-2.5%, 1.5%) rotate(1.2deg); }
  100% { transform: scale(1.1)  translate(2%, -2%) rotate(-1deg); }
}
@keyframes rd-bg-drift-b {
  0%   { transform: scale(1.12) translate(0, 0) rotate(0deg); }
  50%  { transform: scale(1.2)  translate(3%, -2%) rotate(-1.5deg); }
  100% { transform: scale(1.14) translate(-2.5%, 2.5%) rotate(1.4deg); }
}

/* Global scrim keeps white text + light mockups readable everywhere. */
.rd-bg__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(8,9,15,0) 0%, rgba(8,9,15,0.28) 60%, rgba(8,9,15,0.6) 100%),
    linear-gradient(180deg, rgba(8,9,15,0.32) 0%, rgba(8,9,15,0.24) 40%, rgba(8,9,15,0.46) 100%);
}
/* Faint tiled grain removes gradient banding and adds a filmic finish. */
.rd-bg__grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .rd-bg__img { animation: none; }
}

/* ─────────────────────── SECTIONS (transparent) ─────────────────────── */
.rd-section { padding: clamp(5rem, 12vh, 11rem) clamp(1.25rem, 5vw, 4rem); position: relative; z-index: 1; background: transparent; overflow: hidden; }
/* legacy modifiers all resolve to transparent so the shared field shows through */
.rd-section--paper, .rd-section--white, .rd-section--ink { background: transparent; color: var(--rd-text); }
/* Alternating tint: a semi-transparent black panel (same feel as the hero
   scrim) laid over the moving artwork. Breaks the page into distinct bands
   while the living background still shows through. Soft top/bottom feather
   keeps the edges from reading as hard seams. */
.rd-section--tint::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 28%, rgba(8,9,15,0.1), rgba(8,9,15,0.62) 72%),
    linear-gradient(180deg, rgba(8,9,15,0.45) 0%, rgba(8,9,15,0.12) 42%, rgba(8,9,15,0.55) 100%);
}
.rd-container { max-width: 1200px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }
.rd-container--narrow { max-width: 900px; }

.rd-kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rd-coral); margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: 0.6rem; }
.rd-kicker::before { content:'('; opacity:0.5; } .rd-kicker::after { content:')'; opacity:0.5; }

/* Big editorial statement — same family as everything else */
.rd-statement { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(2.2rem, 6vw, 5rem); }
.rd-statement .rd-muted { color: var(--rd-faint); }

.rd-section__head { max-width: 60rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.rd-h2 { font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; font-size: clamp(2.4rem, 6vw, 5rem); margin: 0 0 1.5rem; }
.rd-lead { font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.6; color: var(--rd-muted); font-weight: 300; max-width: 40rem; }

/* Big showcase (product mockup that grows on scroll) */
.rd-showcase { position: relative; }
.rd-showcase__frame { border-radius: clamp(1rem, 2vw, 1.75rem); overflow: hidden; box-shadow: 0 50px 120px -40px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.08); will-change: transform; transform-origin: center; }
.rd-showcase__glow { position: absolute; inset: -12% -6% 0; z-index: 0; filter: blur(90px); opacity: 0.5; background: radial-gradient(50% 60% at 30% 40%, rgba(244,63,94,0.55), transparent 70%), radial-gradient(50% 60% at 75% 60%, rgba(129,140,248,0.55), transparent 70%); pointer-events: none; }

/* Alternating feature rows */
.rd-feature { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; position: relative; z-index: 2; }
.rd-feature + .rd-feature { margin-top: clamp(5rem, 12vw, 9rem); }
@media (min-width: 900px) { .rd-feature { grid-template-columns: 1fr 1fr; } .rd-feature--reverse .rd-feature__media { order: -1; } }
.rd-feature__num { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--rd-coral); letter-spacing: 0.2em; margin-bottom: 1rem; }
.rd-feature__title { font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(1.9rem, 3.4vw, 3rem); margin: 0 0 1.25rem; }
.rd-feature__text { font-size: 1.075rem; line-height: 1.65; color: var(--rd-muted); font-weight: 300; margin-bottom: 1.75rem; }
.rd-feature__list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.85rem; }
.rd-feature__list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.98rem; color: rgba(238,241,248,0.85); }
.rd-feature__list svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--rd-coral); margin-top: 0.1rem; }
.rd-feature__media { position: relative; }
.rd-media-card { border-radius: 1.5rem; overflow: hidden; position: relative; box-shadow: 0 40px 90px -35px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.08); will-change: transform; }
.rd-media-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Big imagery moment (orb) */
.rd-orb-moment { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; position: relative; z-index: 2; }
@media (min-width: 900px) { .rd-orb-moment { grid-template-columns: 1.1fr 0.9fr; } }
.rd-orb-moment__img { will-change: transform; }
.rd-orb-moment__img img { width: 100%; max-width: 30rem; margin: 0 auto; display: block; filter: drop-shadow(0 30px 80px rgba(244,63,94,0.25)); }

/* Stats */
.rd-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem clamp(1rem,4vw,4rem); position: relative; z-index: 2; }
@media (min-width: 800px) { .rd-stats { grid-template-columns: repeat(4, 1fr); } }
.rd-stat__num { font-weight: 800; letter-spacing: -0.04em; font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1; }
.rd-stat__label { margin-top: 0.75rem; font-size: 0.95rem; color: var(--rd-muted); }

/* So Chat immersive */
.rd-chat { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; position: relative; z-index: 2; }
@media (min-width: 900px) { .rd-chat { grid-template-columns: 0.9fr 1.1fr; } }
.rd-chip { display:inline-flex; align-items:center; gap:0.4rem; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.82rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }

/* Creative suite / integrations grid cards */
.rd-bento {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  position: relative; z-index: 2;
}
@media (min-width: 760px) {
  .rd-bento { grid-template-columns: 1fr 1fr; }
  .rd-bento__card--span2 { grid-column: span 2; }
}
.rd-bento--two { grid-template-columns: 1fr; }
@media (min-width: 900px) { .rd-bento--two { grid-template-columns: 1fr 1fr; } }
.rd-bento__card {
  border-radius: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rd-bento__label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--rd-coral); margin-bottom: 0.9rem;
}
.rd-bento__title {
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); margin: 0 0 0.75rem; color: #fff;
}
.rd-bento__text { font-size: 0.98rem; line-height: 1.6; color: var(--rd-muted); font-weight: 300; margin: 0; }
.rd-bento__list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.65rem; }
.rd-bento__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; color: rgba(238,241,248,0.85); }
.rd-bento__list svg { flex-shrink: 0; width: 1.1rem; height: 1.1rem; color: var(--rd-coral); margin-top: 0.1rem; }
.rd-bento__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.rd-bento__media {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
}
.rd-bento__media > div:first-child { flex: 1; min-width: 12rem; }
.rd-bento__media img {
  width: 180px; height: 180px; object-fit: cover; border-radius: 1rem;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* Dark-themed FAQ (overrides light ed-faq from mockups.css) */
.rd-faq { position: relative; z-index: 2; max-width: 48rem; margin: 0 auto; }
.rd .ed-faq__item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  margin-bottom: 0.65rem;
}
.rd .ed-faq__item[open] { background: rgba(255,255,255,0.06); border-color: rgba(244,63,94,0.35); }
.rd .ed-faq__q { color: #fff; font-weight: 600; }
.rd .ed-faq__a { color: var(--rd-muted); font-weight: 300; }
.rd .ed-faq__a strong { color: #fff; font-weight: 600; }
.rd .ed-faq__icon {
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border-color: transparent;
}
.rd .ed-faq__item[open] .ed-faq__icon { background: var(--rd-coral); color: #fff; }
.rd .ed-faq__num { color: var(--rd-coral); }

/* CTA */
.rd-cta { text-align: center; }
.rd-cta__inner { position: relative; z-index: 2; }

/* Footer — transparent so the living backdrop carries through to the end */
.rd-footer { background: transparent; color: #fff; padding: 5rem clamp(1.25rem,5vw,4rem) 2.5rem; position: relative; z-index: 1; }
.rd-footer__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 700px) { .rd-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.rd-footer h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.5); margin-bottom: 1rem; }
.rd-footer a { color: rgba(255,255,255,0.7); font-size: 0.92rem; transition: color 0.2s ease; display: block; margin-bottom: 0.6rem; }
.rd-footer a:hover { color: #fff; }
.rd-footer__logo { height: 2.25rem; margin-bottom: 1rem; }
.rd-footer__bar { max-width: 1200px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--rd-line); font-size: 0.85rem; color: rgba(255,255,255,0.45); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .rd-scroll-cue__line::after, .rd-marquee__track { animation: none; }
}

/* ───────── Ported nav, re-themed for the dark V2 page (V2-only) ─────────
   These override site.css because redesign-v2.css loads after it AND is
   only linked from index-v2.html, so the live site is unaffected.
   ID-scoped selectors beat Tailwind's utility classes without !important. */
#main-nav .desktop-nav a,
#main-nav a.desktop-only {
  color: #fff;
}
#main-nav .desktop-nav a:hover,
#main-nav a.desktop-only:hover {
  color: var(--rd-coral);
}
/* Mega-menu chevron follows the link colour (uses currentColor). */
#main-nav .mega-chevron { color: inherit; }
/* Scrolled pill: black at 50% instead of white. */
#main-nav.scrolled > div:first-child {
  background: rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,0.5),
    0 4px 12px -4px rgba(0,0,0,0.35);
}