/* Chatfun homepage + landing-page design system.
   Extracted verbatim from index.html so the SEO landing pages (/random-text-chat,
   /random-video-chat) share one copy of it. */

:root{
  --violet: #DB2777;
  --blue: #EC4899;
  --pink: #F472B6;
  --ink: #0D0B1A;
  --muted: #6B7280;
  --line: #ECEAF7;
  --lav: #FCE7F3;
  --page-bg: #E9EAFB;
  --card-bg: #fff;
  --card-shadow: rgba(45,30,110,0.30);
  --card-shadow-strong: rgba(45,30,110,0.45);
  --surface-shadow: rgba(20,10,60,0.06);
  --surface-shadow-strong: rgba(20,10,60,0.10);
}
/* Dark is the only theme the homepage ever renders in -- a true black
   canvas with the same pink accent trio the chat pages already use. */
html[data-theme="dark"]{
  --ink: #F5F3F7;
  --muted: #9C94A8;
  --line: #241E2C;
  --lav: #2A1522;
  --page-bg: #08070B;
  --card-bg: #121016;
  --card-shadow: rgba(0,0,0,0.7);
  --card-shadow-strong: rgba(0,0,0,0.8);
  --surface-shadow: rgba(0,0,0,0.5);
  --surface-shadow-strong: rgba(0,0,0,0.65);
  --online-green: #22C55E;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{ overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  min-height:100vh;
  font-family:'Poppins',sans-serif;
  background:var(--page-bg);
  color:var(--ink);
  /* flex-direction:column (not the row default) -- a row flex container
     centering a single width:100% child (.shell) hits a real Chromium/
     WebKit rounding bug that renders the child narrower than the
     container and shifted off-center (confirmed on the live site: it
     rendered a few px offset in a 375px-wide viewport instead of filling
     it). Column direction sizes width on the cross axis instead, which
     doesn't hit that bug -- align-items:center centers .shell
     horizontally the same way justify-content:center did before. */
  display:flex; flex-direction:column; align-items:center;
  padding:24px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  position:relative;
  transition:background-color .35s ease, color .35s ease;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(420px 320px at 88% 6%, rgba(120,140,255,0.30), transparent 70%),
    radial-gradient(380px 300px at 4% 96%, rgba(210,150,255,0.32), transparent 70%),
    radial-gradient(420px 320px at 98% 94%, rgba(120,150,255,0.30), transparent 70%);
  background-repeat:no-repeat;
  animation:driftBg 22s ease-in-out infinite alternate;
  transition:opacity .35s ease;
}
/* The page is a single flat dark colour end to end -- this decorative
   glow only showed through wherever nothing opaque covered it (the
   transparent header, the gutters beside the hero), which read as a
   mismatched lighter tint. Off. */
html[data-theme="dark"] body::before{ display:none; }
@keyframes driftBg{
  0%{ background-position:0 0, 0 0, 0 0; }
  100%{ background-position:-24px 14px, 18px -10px, -14px -18px; }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes softPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,0.45); } 50%{ box-shadow:0 0 0 5px rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
button, .tag, .mode-card-btn, .gender-btn, a{ touch-action:manipulation; }
.site-header, .card, .faq-section, .site-footer{ animation:fadeUp .6s ease both; }
.card{ animation-delay:.05s; }
.faq-section{ animation-delay:.1s; }
.site-footer{ animation-delay:.15s; }
.card{
  width:100%;
  position:relative;
}

.hp-wordmark{ font-weight:800; font-size:1.15rem; margin:0; color:var(--ink); }
.hp-wordmark .s2{ color:var(--violet); }

.hp-menu{ display:none; flex-direction:column; gap:2px; background:var(--card-bg); border-radius:16px; box-shadow:0 12px 30px var(--surface-shadow-strong); padding:8px; position:absolute; top:calc(100% + 8px); left:4px; right:4px; z-index:30; }
.hp-menu.open{ display:flex; animation:fadeUp .25s ease both; }
.hp-menu a{ padding:10px 14px; border-radius:10px; font-size:0.85rem; font-weight:600; color:var(--ink); text-decoration:none; transition:background-color .15s ease, color .15s ease; }
.hp-menu a:hover{ background:var(--lav); color:var(--violet); }
.hp-menu-gender-picker{ display:none; flex-direction:column; gap:6px; padding:4px 14px 8px; }
.hp-menu-gender-picker.open{ display:flex; }
.hp-menu-gender-row{ display:flex; gap:6px; }
.hp-gender-pick-btn{ flex:1; border:1.5px solid var(--line); background:var(--card-bg); border-radius:10px; padding:8px 4px; font-size:0.78rem; font-weight:700; color:var(--ink); cursor:pointer; font-family:inherit; }
.hp-gender-pick-btn.active{ border-color:var(--violet); background:var(--lav); color:var(--violet); }
.hp-gender-confirm-btn{ border:none; border-radius:10px; padding:8px; background:linear-gradient(100deg,var(--blue),var(--violet) 55%,var(--pink)); color:#fff; font-weight:700; font-size:0.78rem; cursor:pointer; font-family:inherit; }

.online-dot{ width:8px; height:8px; border-radius:50%; background:#22C55E; flex-shrink:0; animation:softPulse 2.2s ease-in-out infinite; }
.hp-stats-pill{ display:flex; align-items:center; justify-content:center; gap:10px; background:var(--card-bg); box-shadow:0 4px 14px var(--surface-shadow); border-radius:999px; padding:9px 18px; margin:14px 0 0; align-self:center; font-size:0.8rem; font-weight:600; color:var(--muted); transition:background-color .3s ease; }
.hp-stats-online{ display:flex; align-items:center; gap:7px; font-weight:700; }
.hp-stats-count{ color:#16A34A; }
.hp-stats-online-word{ color:var(--ink); }
.hp-stats-sep{ width:1px; height:14px; background:var(--line); }
.hp-stats-anon{ display:flex; align-items:center; gap:6px; color:var(--muted); font-weight:600; }
.hp-stats-shield{ flex-shrink:0; }

.hero-wrap{ margin:22px 0 6px; text-align:center; font-weight:inherit; }
.hero-copy-heading{ margin:0; display:block; font-weight:inherit; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-card-wordmark{ display:block; text-align:center; font-weight:900; letter-spacing:-0.01em; font-size:clamp(1.7rem,8vw,2.3rem); color:var(--ink); }
.hero-card-wordmark .s2{ background:linear-gradient(100deg,var(--blue),var(--violet) 60%,var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.desc{ color:var(--muted); font-size:0.92rem; line-height:1.55; margin:18px auto 22px; max-width:320px; text-align:center; }

.badge-row{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 24px; }
.badge-item{ display:flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:600; color:var(--muted); line-height:1.2; white-space:nowrap; }
.badge-icon{ width:17px; height:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.badge-sep{ width:1px; height:14px; background:var(--line); flex-shrink:0; }
@media (max-width:360px){ .badge-row{ flex-wrap:wrap; row-gap:10px; } }

.ads-section{ margin:4px 0 22px; padding-top:18px; }
.ads-section-divider{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ads-section-divider::before, .ads-section-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.ads-section-divider span{ font-size:0.66rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#B3AFCB; white-space:nowrap; }

.ad-slot{ background:var(--card-bg); border:1px dashed var(--line); border-radius:14px; padding:12px 12px 14px; margin-bottom:14px; }
.ad-slot-secondary{ margin-bottom:0; }
.ad-slot-label-row{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:8px; }
.ad-slot-label{ display:block; text-align:center; font-size:0.6rem; letter-spacing:0.1em; font-weight:700; color:#A79AD1; text-transform:uppercase; }
.about-ads-link{ display:inline-flex; align-items:center; gap:3px; font-size:0.62rem; font-weight:700; color:#A79AD1; text-decoration:none; letter-spacing:0.02em; text-transform:none; }
.about-ads-link:hover{ color:var(--violet); }
.about-ads-link svg{ flex-shrink:0; }
.ad-slot iframe{ display:block; width:100%; height:250px; max-width:300px; margin:0 auto; border:none; border-radius:12px; background:#fff; }
.ad-slot-secondary iframe{ height:50px; max-width:320px; }

/* Standalone sponsored block between content sections (300x250). */
.ads-section-inline{ margin:8px 0 28px; padding:0 6px; }
.ads-section-inline .ad-slot{ margin-bottom:0; }
.ad-slot-rect iframe{ height:250px; max-width:300px; }
/* Native banner sizes itself to its rows, so give it a flexible box
   rather than the 300x250 the other slots assume. */
.ad-slot-native iframe{ height:320px; max-width:100%; }

@media (max-width:959px){
  /* This slot holds a fixed 320x50 banner. On narrow phones the card's
     side padding left less than 320px of room, so the ad rendered
     squeezed. Break this slot out to the full viewport width (undoing
     the page's side padding) so there's always enough room to show
     the banner at its real size, uncompressed. */
  .ad-slot-secondary{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-bottom:0;
    border-radius:0;
    border-left:none;
    border-right:none;
    padding:10px 12px 12px;
  }
}

.mode-grid{ display:flex; gap:14px; margin-bottom:22px; align-items:stretch; }
.mode-card{ flex:1 1 0; min-width:0; border-radius:24px; padding:26px 14px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.mode-card-text{ background:var(--card-bg); border:1.5px solid var(--line); box-shadow:0 4px 14px var(--surface-shadow); }
.mode-card-video{ background:linear-gradient(135deg,var(--blue),var(--violet) 85%); box-shadow:0 12px 26px -10px rgba(108,60,245,0.55); }
.mode-card-icon{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; background:#EAF2FE; flex-shrink:0; }
.mode-card-video .mode-card-icon{ background:rgba(255,255,255,0.22); }
.mode-card h3{ font-size:1.02rem; font-weight:800; margin:0 0 6px; color:var(--ink); }
.mode-card-video h3{ color:#fff; }
.mode-card p{ font-size:0.74rem; line-height:1.45; color:var(--muted); margin:0 0 18px; }
.mode-card-video p{ color:rgba(255,255,255,0.9); }
.mode-card-btn{ width:100%; border:none; border-radius:999px; padding:12px 6px; font-weight:700; font-size:0.72rem; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; white-space:nowrap; transition:transform .15s ease, box-shadow .2s ease; margin-top:auto; }
.mode-card-btn:active{ transform:scale(0.97); }
.mode-card-btn:hover{ transform:translateY(-1px); }
.mode-card-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.mode-card-btn-text{ background:linear-gradient(135deg,#35A0FD,#0B69FE 85%); color:#fff; box-shadow:0 10px 20px -8px rgba(11,105,254,0.55); }
.mode-card-btn-video{ background:#fff; color:var(--violet); box-shadow:0 6px 16px -6px rgba(20,10,60,0.25); }

.field-label{ font-size:0.9rem; font-weight:700; color:var(--ink); margin-bottom:12px; text-align:center; }

.search-box{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:999px; padding:13px 18px; margin-bottom:14px; color:#B3B7C9; font-size:0.82rem; background:var(--card-bg); transition:border-color .2s ease, box-shadow .2s ease; }
.search-box:focus-within{ border-color:#C9B8FC; box-shadow:0 0 0 4px rgba(108,60,245,0.10); }
.search-box svg{ flex-shrink:0; }
.interest-input{ border:none; background:transparent; outline:none; flex:1; min-width:0; font:inherit; font-size:0.82rem; color:var(--ink); }
.interest-input::placeholder{ color:#B3B7C9; }

.tag-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.tag-grid-extra{ max-height:0; opacity:0; overflow:hidden; margin-bottom:0; transition:max-height .3s ease, opacity .25s ease, margin-bottom .3s ease; }
.tag-grid-extra.open{ max-height:120px; opacity:1; margin-bottom:22px; }
.tag{ flex:1 1 calc(25% - 6px); border:none; background:var(--lav); border-radius:999px; padding:9px 6px; font-size:0.74rem; font-weight:600; color:var(--violet); display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; cursor:pointer; transition:transform .15s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.tag span{ transition:transform .2s ease; }
.tag-ic{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:rgba(236,72,153,0.16); }
.tag:hover{ transform:translateY(-1px); box-shadow:0 4px 10px var(--surface-shadow); }
.tag:active{ transform:translateY(0) scale(0.95); }
.tag:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.tag.selected{ background:linear-gradient(100deg,var(--blue),var(--violet)); color:#fff; box-shadow:0 6px 14px -4px rgba(108,60,245,0.55); }
.tag.selected span{ transform:rotate(45deg); }
.tag.selected .tag-ic{ transform:none; background:rgba(255,255,255,0.25) !important; }
.tag-more{ color:var(--muted); }
.tag-more-icon{ font-size:0.95rem; line-height:1; }
.tag-more.open .tag-more-icon{ transform:rotate(45deg); }

.start-btn{ width:100%; border:none; border-radius:999px; padding:17px; background:linear-gradient(100deg,var(--blue),var(--violet) 55%,var(--pink)); background-size:180% 100%; background-position:0% 0%; color:#fff; font-weight:700; font-size:1.02rem; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 16px 30px -12px rgba(124,60,245,0.55); cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, background-position .5s ease; animation:ctaPulse 2.6s ease-in-out infinite; }
.start-btn:hover{ transform:translateY(-2px); box-shadow:0 20px 36px -12px rgba(124,60,245,0.65); background-position:100% 0%; }
.start-btn:active{ transform:translateY(0) scale(0.98); }
.start-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 16px 30px -12px rgba(124,60,245,0.55); } 50%{ box-shadow:0 18px 34px -10px rgba(124,60,245,0.75); } }

.start-sub{ text-align:center; font-size:0.78rem; color:var(--muted); margin:0 0 22px; padding:0 6px; line-height:1.5; }

.mod-box{ display:flex; gap:12px; align-items:flex-start; background:var(--lav); border-radius:16px; padding:14px 16px; margin-bottom:24px; }
.mod-icon{ width:32px; height:32px; border-radius:10px; flex-shrink:0; background:rgba(236,72,153,0.16); display:flex; align-items:center; justify-content:center; }
.mod-box strong{ font-size:0.85rem; color:var(--violet); display:block; font-weight:700; }
.mod-box p{ font-size:0.78rem; color:var(--muted); margin:3px 0 0; }

.feat-grid{ display:flex; gap:10px; margin-bottom:22px; }
.feat{ flex:1 1 0; min-width:0; background:var(--card-bg); border-radius:18px; padding:14px 12px 16px; box-shadow:0 4px 18px var(--surface-shadow); transition:transform .2s ease, box-shadow .2s ease, background-color .3s ease; }
.feat:hover{ transform:translateY(-3px); box-shadow:0 10px 24px var(--surface-shadow-strong); }
.feat-icon{ width:42px; height:42px; flex-shrink:0; border-radius:13px; margin-bottom:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(236,72,153,0.14); border:1px solid rgba(236,72,153,0.22); }
.feat h3{ font-size:0.8rem; font-weight:700; margin:0 0 5px; color:var(--ink); line-height:1.25; }
.feat p{ font-size:0.7rem; color:var(--muted); line-height:1.4; margin:0; }

/* Two short sign-off lines. Side by side, the right one got squeezed
   into a ragged three-line block, so they stack and centre by default
   and only share a row once there's genuinely width for it. */
.foot-row{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-top:16px; margin-top:6px; border-top:1px solid var(--line);
  font-size:0.78rem; font-weight:600; text-align:center;
}
.foot-left, .foot-right{ display:flex; align-items:center; gap:7px; }
.foot-left{ color:var(--pink); }
.foot-right{ color:var(--muted); font-weight:500; }
.foot-left svg, .foot-right svg{ flex-shrink:0; }
@media (min-width:520px){
  .foot-row{ flex-direction:row; justify-content:space-between; text-align:left; gap:18px; }
}

/* ── Identity fields (name / gender) ─────────────────────── */
.id-row{ display:flex; gap:10px; margin-bottom:14px; }
.id-input{ flex:1; min-width:0; border:1.5px solid var(--line); border-radius:999px; padding:12px 18px; font-family:inherit; font-size:0.85rem; color:var(--ink); outline:none; background:var(--card-bg); transition:border-color .2s ease, box-shadow .2s ease; }
.generated-username{ font-weight:700; color:var(--violet); background:var(--lav); border-color:#C9B8FC; }
.field-note{ font-size:0.76rem; color:var(--muted); margin:-6px 0 14px; line-height:1.4; }
.id-input:focus{ border-color:#C9B8FC; box-shadow:0 0 0 4px rgba(108,60,245,0.12); }
.gender-pick{ display:flex; gap:12px; }
.gate-gender-known{ display:none; align-items:center; justify-content:space-between; gap:10px; border:1.5px solid var(--line); background:var(--surface-2,var(--card-bg)); border-radius:16px; padding:13px 15px; margin-bottom:14px; }
.gate-gender-known.show{ display:flex; }
.gate-gender-known span{ font-size:0.86rem; font-weight:700; color:var(--ink); }
.gate-gender-change-btn{ flex-shrink:0; border:none; background:none; color:var(--violet); font-weight:700; font-size:0.78rem; font-family:inherit; cursor:pointer; text-decoration:underline; }
/* Gender cards. The icon is inline SVG rather than the old ♂/♀ emoji --
   those render as flat blue/pink system glyphs that fought the site's
   pink palette and looked pasted-on. The active state was also still
   using a hardcoded #C9B8FC lavender border left over from the old
   violet/blue palette; it's pink now like everything else. */
.gender-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:9px;
  border:1.5px solid var(--line); background:var(--surface-2,var(--card-bg)); border-radius:18px;
  padding:16px 8px 14px; font-family:inherit; font-size:0.88rem; font-weight:700;
  color:var(--muted); cursor:pointer; position:relative; overflow:hidden;
  transition:transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.gender-btn .gender-ic{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,0.05); color:var(--muted);
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.gender-btn .gender-ic svg{ width:21px; height:21px; }
.gender-btn:hover{ transform:translateY(-2px); border-color:rgba(219,39,119,0.35); }
.gender-btn:active{ transform:translateY(0) scale(0.97); }
.gender-btn:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.gender-btn.active{
  background:linear-gradient(170deg, rgba(219,39,119,0.16), rgba(219,39,119,0.05));
  border-color:var(--violet); color:var(--ink);
  box-shadow:0 0 0 3px rgba(219,39,119,0.14);
}
.gender-btn.active .gender-ic{
  background:linear-gradient(140deg,var(--blue),var(--violet) 60%,var(--pink));
  color:#fff; transform:scale(1.04);
}
.field-err{ color:#E4416B; font-size:0.74rem; font-weight:600; margin:-6px 0 12px; display:none; }

/* ── Chat page (formerly an overlay, now its own route) ──── */
.chat-card{ width:440px; max-width:100%; height:min(640px,92vh); background:var(--card-bg); border-radius:28px; box-shadow:0 40px 70px -30px var(--card-shadow-strong); display:flex; flex-direction:column; overflow:hidden; }
.chat-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
.chat-head-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.chat-avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1rem; }
.chat-who-name{ font-weight:700; font-size:0.92rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-who-sub{ font-size:0.72rem; color:var(--muted); }
.chat-head-actions{ display:flex; gap:6px; flex-shrink:0; }
.chat-icon-btn{ width:32px; height:32px; border-radius:50%; border:none; background:var(--lav); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--violet); font-size:0.9rem; }
.chat-icon-btn.danger{ background:#FDE3EA; color:#E4416B; }
.chat-body{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:8px; background:#FAF9FF; }
.chat-status{ text-align:center; color:var(--muted); font-size:0.8rem; font-weight:600; margin:auto; padding:20px; }
.chat-status .spin{ width:26px; height:26px; margin:0 auto 12px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--violet); animation:spin 0.8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.msg-row{ display:flex; }
.msg-row.me{ justify-content:flex-end; }
.bubble{ max-width:78%; padding:9px 14px; border-radius:16px; font-size:0.86rem; line-height:1.4; word-wrap:break-word; }
.msg-row.me .bubble{ background:linear-gradient(100deg,var(--blue),var(--violet)); color:#fff; border-bottom-right-radius:4px; }
.msg-row.them .bubble{ background:var(--card-bg); color:var(--ink); box-shadow:0 2px 8px var(--surface-shadow); border-bottom-left-radius:4px; }
.msg-row.sys{ justify-content:center; }
.msg-row.sys .bubble{ background:transparent; color:#9CA0AE; font-size:0.74rem; text-align:center; max-width:100%; }
.typing-dots{ font-size:0.76rem; color:var(--muted); padding:0 18px 4px; min-height:16px; }
.chat-input-row{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.chat-input{ flex:1; border:1.5px solid var(--line); border-radius:999px; padding:11px 16px; font-family:inherit; font-size:0.85rem; outline:none; }
.chat-input:focus{ border-color:#C9B8FC; }
.chat-send{ width:42px; height:42px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--blue),var(--violet)); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.chat-send:disabled{ opacity:0.5; cursor:default; }

/* ── Video-chat specific bits ─────────────────────────────── */
.video-stage{ position:relative; background:#0D0B1A; flex:1; }
.video-remote{ width:100%; height:100%; object-fit:cover; background:#151225; }
.video-local{ position:absolute; width:104px; height:140px; right:12px; bottom:12px; border-radius:14px; object-fit:cover; box-shadow:0 6px 18px rgba(0,0,0,0.4); border:2px solid rgba(255,255,255,0.5); background:#000; }
.video-controls{ position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:10px; }
.vbtn{ width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,0.14); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; backdrop-filter:blur(4px); }
.vbtn.off{ background:#E4416B; }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:600; color:var(--muted); text-decoration:none; margin-bottom:14px; }

/* ── Shell / responsive marketing layout (desktop) ────────── */
.shell{ width:460px; max-width:100%; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.shell > *{ min-width:0; }
.header-cta{ display:none; }
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--page-bg);
  margin:0 -16px; padding-left:16px; padding-right:16px;
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 6px 20px var(--surface-shadow); }

/* Live online counter in the header, matching the pill used elsewhere. */
.head-online-pill{
  display:flex; align-items:center; gap:6px;
  background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.25);
  border-radius:999px; padding:6px 12px;
  color:#4ADE80; font-size:0.78rem; font-weight:700; white-space:nowrap;
}

/* On the homepage, the header sits directly above the dark hero-v2
   block with no page background visible between them -- so until the
   visitor scrolls (is-scrolled), let it go transparent over the dark
   hero instead of showing as a light bar. Once scrolled past the
   hero it flips back to the normal light chrome. */
body.has-dark-hero .site-header:not(.is-scrolled){
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.has-dark-hero .site-header:not(.is-scrolled) .hp-wordmark{ color:#fff; }
body.has-dark-hero .site-header:not(.is-scrolled) .hp-menu a{ color:#fff; }
body.has-dark-hero .site-header:not(.is-scrolled) .hp-menu a:hover{ background:rgba(255,255,255,0.12); color:#fff; }
/* Menu button. The shared .moon-btn styling was written for a moon/sun
   theme toggle, so it tilts on hover -- which reads as a glitch on a
   hamburger. Squared-off rounded button, no rotation. */
body.has-dark-hero .site-header .moon-btn{
  width:38px; height:38px; border-radius:12px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  box-shadow:none;
  transition:background-color .2s ease, border-color .2s ease;
}
body.has-dark-hero .site-header .moon-btn:hover{
  transform:none; background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.18); box-shadow:none;
}
body.has-dark-hero .site-header .moon-btn:active{ transform:scale(0.94); }
body.has-dark-hero .site-header .moon-btn svg path{ stroke:#F5F3F7; }
body.has-dark-hero .site-header:not(.is-scrolled) .moon-btn svg path{ fill:#fff; }
body.has-dark-hero .site-header:not(.is-scrolled) #menu-toggle svg path{ stroke:#fff; }

/* ============================================================
   HERO v4 -- dark background (matches header/page), gradient used
   only as accents: badge text, the highlighted heading word, the
   active pill, and the CTA button.
   ============================================================ */
.hero-v2{
  position:relative;
  width:100%; max-width:460px; margin:0 auto;
  padding:34px 4px 26px;
  background:var(--page-bg);
  font-family:'Poppins',sans-serif;
  text-align:left;
}
.hero-badge{
  display:block; font-size:0.72rem; font-weight:800; letter-spacing:0.09em;
  margin-bottom:12px;
  background:linear-gradient(100deg,var(--blue),var(--violet),var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-heading{
  color:#fff; font-size:2.05rem; font-weight:800;
  line-height:1.18; letter-spacing:-0.02em; margin:0 0 14px;
}
.hero-heading .s2{
  background:linear-gradient(100deg,var(--blue),var(--violet),var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-subheading{ color:#A9A2BC; font-size:0.92rem; line-height:1.68; margin:0 0 26px; }

.hero-mode-pills{
  display:flex; gap:4px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  border-radius:999px; padding:5px; margin:0 0 14px; width:100%;
}
.hero-pill{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  border:none; background:transparent; color:#A9A2BC;
  border-radius:999px; padding:11px 6px; font-weight:600; font-size:0.86rem;
  cursor:pointer; font-family:inherit; transition:color .2s ease;
}
.hero-pill:hover{ color:#fff; }
.hero-pill.active{
  background:linear-gradient(100deg,var(--blue),var(--violet) 55%,var(--pink));
  color:#fff; font-weight:700;
}

.hero-cta-btn{
  display:flex; align-items:center; justify-content:center; gap:11px; width:100%;
  margin:0; border:none; border-radius:999px; padding:18px;
  background:linear-gradient(100deg,var(--blue),var(--violet) 55%,var(--pink));
  color:#fff; font-weight:700; font-size:1.02rem; letter-spacing:-0.01em;
  cursor:pointer; font-family:inherit;
  box-shadow:0 16px 34px -14px rgba(219,39,119,0.6), inset 0 1px 0 rgba(255,255,255,0.22);
  transition:transform .18s ease, box-shadow .25s ease;
}
.hero-cta-btn:hover{ transform:translateY(-1px); box-shadow:0 22px 40px -14px rgba(219,39,119,0.75), inset 0 1px 0 rgba(255,255,255,0.28); }
.hero-cta-btn:active{ transform:translateY(0); }
.hero-cta-btn svg{ flex-shrink:0; }
#hero-cta-icon{ opacity:0.95; }

.hero-cta-note{ color:#A9A2BC; font-size:0.82rem; line-height:1.6; margin:14px 0 0; }
.hero-cta-note .s2{ color:var(--pink); font-weight:700; }
.hero-cta-switch{ color:var(--pink); font-weight:700; cursor:pointer; }
.hero-cta-switch:hover{ text-decoration:underline; }

.hero-trust-line{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  color:#8F8898; font-size:0.78rem; font-weight:600; margin:22px 0 20px;
}

.hero-alt-line{ color:#8F8898; font-size:0.82rem; line-height:1.68; margin:0 0 22px; }
.hero-alt-line a{ color:#A9A2BC; font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.hero-alt-line a:hover{ color:#fff; }

.hero-online-strip{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; padding:14px 16px; margin-bottom:18px; text-align:left;
}
.hero-avatar-stack{ display:flex; flex-shrink:0; }
.hero-avatar{
  width:36px; height:36px; border-radius:50%;
  border:2.5px solid var(--page-bg); margin-left:-12px;
  object-fit:cover; display:block; background:#2A2233;
  box-shadow:0 0 0 1px rgba(255,255,255,0.10);
}
.hero-avatar-stack .hero-avatar:first-child{ margin-left:0; }
.hero-online-text{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:130px; }
.hero-online-count{ color:#F5F3F7; font-size:0.86rem; font-weight:600; display:flex; align-items:center; gap:7px; line-height:1.25; }
.hero-online-count strong{ color:#34D399; font-weight:800; }
.hero-online-count .online-dot{
  width:8px; height:8px; border-radius:50%; background:#34D399; flex-shrink:0;
  box-shadow:0 0 0 3px rgba(52,211,153,0.16);
}
.hero-online-sub{ color:#8F8898; font-size:0.75rem; }

/* Sign-in prompt. The link reads as a small outlined pill rather than
   underlined text -- underlined bold white looked like an unstyled
   default link next to everything else here. */
.hero-signin-row{
  display:flex; align-items:center; justify-content:center; gap:9px;
  color:#8F8898; font-size:0.82rem; margin:0 0 4px;
}
.hero-signin-row button{
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.04);
  color:var(--pink); font-weight:700; font-size:0.8rem; font-family:inherit;
  padding:7px 16px; border-radius:999px; cursor:pointer; text-decoration:none;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hero-signin-row button:hover{
  background:rgba(236,72,153,0.12); border-color:rgba(236,72,153,0.45); color:#fff;
}
.hero-signin-row button:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }

.hero-region{ display:block; }
.hero-copy{ display:none; }

.hero-doodle{ display:none; }

.how-section{ margin:6px 0 4px; }
.how-title{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 16px; text-align:center; }
.how-grid{ display:flex; flex-direction:column; gap:10px; }
.how-step{ background:var(--card-bg); border-radius:16px; padding:16px 18px; box-shadow:0 4px 18px var(--surface-shadow); display:flex; align-items:center; gap:14px; }
.how-num{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--violet)); color:#fff; font-weight:800; font-size:0.95rem; display:flex; align-items:center; justify-content:center; }
.how-step h3{ font-size:0.88rem; font-weight:700; margin:0 0 2px; color:var(--ink); }
.how-step p{ font-size:0.78rem; color:var(--muted); margin:0; line-height:1.4; }

.about-section{ margin:8px 0 28px; padding:0 6px; }
.about-title{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 14px; text-align:center; }
.about-card{ background:var(--card-bg); border-radius:22px; padding:22px 20px; box-shadow:0 4px 18px var(--surface-shadow); transition:background-color .3s ease; }
.about-section p{ font-size:0.86rem; color:var(--muted); line-height:1.65; margin:0 0 12px; }
.about-section p:last-child{ margin-bottom:0; }
.about-section a{ color:var(--violet); font-weight:600; text-decoration:none; }

.compare-section{ margin:8px 0 28px; padding:0 6px; }
.compare-title{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 10px; text-align:center; }
.compare-intro{ font-size:0.86rem; color:var(--muted); line-height:1.65; text-align:center; max-width:420px; margin:0 auto 18px; }
.compare-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; box-shadow:0 4px 18px var(--surface-shadow); background:var(--card-bg); transition:background-color .3s ease; }
.compare-table{ width:100%; border-collapse:collapse; font-size:0.78rem; }
.compare-table th, .compare-table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.compare-table tr:last-child td{ border-bottom:none; }
.compare-table thead th{ font-size:0.76rem; font-weight:800; color:var(--ink); background:var(--lav); white-space:nowrap; }
.compare-table td:first-child, .compare-table th:first-child{ position:sticky; left:0; z-index:2; white-space:normal; min-width:112px; font-weight:600; color:var(--ink); background:var(--card-bg); }
.compare-table thead th:first-child{ background:var(--lav); z-index:3; }
.compare-table th.us-col, .compare-table td.us-col{ background:rgba(108,60,245,0.07); }
.compare-table thead th.us-col{ color:var(--violet); }
.compare-table td:first-child{ box-shadow:1px 0 0 var(--line); }
.val-yes{ color:#1DA34A; font-weight:700; }
.val-no{ color:#E4344A; font-weight:700; }
.val-limited{ color:#C98A12; font-weight:700; }
.val-yes::before{ content:"✓ "; }
.val-no::before{ content:"✕ "; }
.val-limited::before{ content:"± "; }
.compare-note{ font-size:0.8rem; color:var(--muted); text-align:center; line-height:1.6; margin:16px 4px 0; }
.compare-note a{ color:var(--violet); font-weight:700; text-decoration:none; }
.compare-note a:hover{ text-decoration:underline; }
.about-section a:hover{ text-decoration:underline; }

/* ── Stats row. Kept as real markup (not just the numbers baked into
   the showcase artwork) so the figures are indexable and readable by
   screen readers. ─────────────────────────────────────────────── */
.stats-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0 28px; padding:0 6px; }
.stat-tile{
  background:var(--card-bg); border:1px solid var(--line); border-radius:18px;
  padding:20px 12px; text-align:center; box-shadow:0 4px 18px var(--surface-shadow);
}
.stat-tile strong{ display:block; font-size:1.45rem; font-weight:800; color:var(--blue); margin-bottom:4px; letter-spacing:-0.01em; }
.stat-tile span{ font-size:0.74rem; color:var(--muted); font-weight:600; }

/* ── Showcase image, sits between the section heading and the copy. ── */
.showcase-img{
  display:block; width:100%; height:auto; margin:0 0 16px;
  border-radius:18px; border:1px solid var(--line);
  box-shadow:0 8px 30px var(--surface-shadow);
}

/* ── Feature list blocks (icon + heading + text, stacked) ── */
.feature-list-section{ margin:8px 0 28px; padding:0 6px; }
.feature-list-title{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 16px; text-align:center; }
.feature-list{ display:flex; flex-direction:column; gap:10px; }
.feature-list-item{ display:flex; gap:14px; align-items:flex-start; background:var(--card-bg); border-radius:18px; padding:16px 18px; box-shadow:0 4px 18px var(--surface-shadow); transition:background-color .3s ease; }
.feature-list-icon{ flex-shrink:0; width:40px; height:40px; border-radius:12px; background:var(--lav); color:var(--violet); display:flex; align-items:center; justify-content:center; }
.feature-list-item h3{ font-size:0.92rem; font-weight:700; color:var(--ink); margin:0 0 4px; }
.feature-list-item p{ font-size:0.8rem; color:var(--muted); line-height:1.5; margin:0; }

/* ── Testimonials ──────────────────────────────────────── */
.testimonials-section{ margin:8px 0 28px; padding:0 6px; }
.testimonials-title{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 16px; text-align:center; }
.testimonials-grid{ display:flex; flex-direction:column; gap:12px; }
.testimonial-card{ background:var(--card-bg); border-radius:18px; padding:18px 20px; box-shadow:0 4px 18px var(--surface-shadow); transition:background-color .3s ease; }
.testimonial-mark{ color:var(--pink); font-size:1.6rem; font-weight:800; line-height:1; margin-bottom:4px; display:block; }
.testimonial-card h3{ font-size:0.92rem; font-weight:700; color:var(--ink); margin:0 0 3px; }
.testimonial-sub{ font-size:0.76rem; color:var(--muted); margin:0 0 10px; }
.testimonial-text{ font-size:0.84rem; color:var(--muted); line-height:1.55; font-style:italic; margin:0 0 10px; }
.testimonial-author{ font-size:0.78rem; color:var(--violet); font-weight:700; }

.blog-preview-section{ margin:8px 0 28px; padding:0 6px; }
.blog-preview-title{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 6px; text-align:center; }
.blog-preview-intro{ font-size:0.86rem; color:var(--muted); line-height:1.6; text-align:center; max-width:420px; margin:0 auto 18px; }
.blog-preview-grid{ display:flex; flex-direction:column; gap:16px; }
.blog-preview-card{ display:block; text-decoration:none; background:var(--card-bg, #fff); border-radius:20px; overflow:hidden; box-shadow:0 4px 18px var(--surface-shadow); transition:transform .2s ease, box-shadow .2s ease; }
.blog-preview-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px var(--surface-shadow-strong, rgba(20,10,60,0.1)); }
.blog-preview-card img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.blog-preview-body{ padding:16px 18px 18px; }
.blog-preview-tag{ display:inline-block; font-size:0.68rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--violet); background:var(--lav); padding:4px 10px; border-radius:999px; margin-bottom:8px; }
.blog-preview-card h3{ font-size:1rem; font-weight:700; color:var(--ink); margin:0 0 6px; }
.blog-preview-card p{ font-size:0.82rem; color:var(--muted); line-height:1.55; margin:0 0 10px; }
.blog-preview-read{ font-size:0.78rem; font-weight:700; color:var(--violet); }

.final-cta{
  margin:8px 0 32px; padding:34px 22px; border-radius:26px; text-align:center;
  background:linear-gradient(135deg,var(--blue),var(--violet) 85%);
  box-shadow:0 20px 40px -18px rgba(108,60,245,0.5);
}
.final-cta h2{ font-size:1.25rem; font-weight:800; color:#fff; margin:0 0 8px; }
.final-cta p{ font-size:0.86rem; color:rgba(255,255,255,0.85); margin:0 0 20px; }
.final-cta-btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:#fff; color:var(--violet); font-weight:700; font-size:0.92rem;
  padding:13px 26px; border-radius:999px; box-shadow:0 10px 24px -8px rgba(0,0,0,0.35);
  transition:transform .18s ease, box-shadow .2s ease;
}
.final-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(0,0,0,0.4); }

/* ── Footer (mobile-first: brand + accordion columns) ─────── */
.footer-top{ display:flex; flex-direction:column; width:100%; margin-top:4px; text-align:left; }
.footer-brand{ padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid var(--line); text-align:left; }
.footer-brand p{ font-size:0.82rem; color:var(--muted); line-height:1.55; margin:12px 0 0; max-width:340px; }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social-btn{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:color .2s ease, border-color .2s ease;
}
.footer-social-btn:hover{ color:var(--violet); border-color:var(--violet); }

.footer-col{ border-bottom:1px solid var(--line); }
.footer-col > summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 2px; font-size:0.76rem; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink); cursor:pointer; list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.footer-col > summary::-webkit-details-marker{ display:none; }
.footer-col > summary::after{
  content:"+"; font-size:1.05rem; font-weight:600; color:var(--muted); flex-shrink:0;
  transition:transform .2s ease;
}
.footer-col[open] > summary::after{ content:"\2212"; }
.footer-col-links{ display:flex; flex-direction:column; gap:2px; padding:0 2px 14px; }
.footer-col-links a{ font-size:0.85rem; font-weight:500; color:var(--muted); text-decoration:none; padding:6px 0; }
.footer-col-links a:hover{ color:var(--violet); }

.site-footer .footer-copy{ text-align:center; padding-top:16px; margin-top:6px; border-top:1px solid var(--line); width:100%; }
.footer-legal-note{ font-size:0.72rem; color:var(--muted); line-height:1.5; text-align:center; margin-top:8px; padding:0 4px 20px; }

@media (min-width:960px){
  .shell{ width:100%; max-width:1180px; padding:0 32px; gap:0; }

  .site-header{ padding:10px 0; }
  .header-cta{
    display:inline-flex; align-items:center; white-space:nowrap;
    background:linear-gradient(100deg,var(--blue),var(--violet) 65%); color:#fff;
    font-weight:700; font-size:0.82rem; padding:10px 20px; border-radius:999px;
    text-decoration:none; box-shadow:0 10px 20px -10px rgba(124,60,245,0.6);
    transition:transform .18s ease, box-shadow .2s ease;
  }
  .header-cta:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(124,60,245,0.7); }

  /* flex:1 + a 30px gap stretched the nav across the whole header and
     broke links mid-word ("Sign / In"). Sized to content instead, and
     each link is kept on one line. */
  .hp-menu{
    display:flex !important; position:static; flex-direction:row; align-items:center;
    gap:22px; background:transparent; box-shadow:none; padding:0; margin:0 0 0 36px;
  }
  .hp-menu a{ font-size:0.88rem; white-space:nowrap; padding:8px 2px; }
  .site-header{ gap:16px; }
  .site-header .head-right{ margin-left:auto; }
  #menu-toggle{ display:none; }

  .hero-region{
    display:grid; grid-template-columns:1fr 460px; gap:60px; align-items:start;
    margin:32px 0 76px;
  }
  .hero-copy{ display:block; padding-top:8px; }
  .page-wrap .hero-wrap{ display:none; }
  .page-wrap .card{ padding-top:26px; }
  .hero-text-wordmark{ display:block; font-weight:900; letter-spacing:-0.02em; font-size:clamp(2.6rem,5.2vw,3.8rem); line-height:1; color:var(--ink); }
  .hero-text-wordmark .s2{ background:linear-gradient(100deg,var(--blue),var(--violet) 60%,var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero-copy-sub{ font-size:1.08rem; line-height:1.6; color:var(--muted); max-width:440px; margin:22px 0 30px; }
  .hero-points{ list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; gap:16px; max-width:460px; }
  .hero-points li{ display:flex; align-items:flex-start; gap:14px; }
  .hero-point-ic{ flex-shrink:0; width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
  .hero-points strong{ display:block; font-size:0.92rem; color:var(--ink); font-weight:700; margin-bottom:2px; }
  .hero-points span{ display:block; font-size:0.82rem; color:var(--muted); line-height:1.45; max-width:380px; }
  .hero-copy-trust{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .hero-copy-online{ display:flex; align-items:center; gap:7px; font-size:0.85rem; font-weight:700; color:var(--violet); background:var(--card-bg); box-shadow:0 3px 10px var(--surface-shadow-strong); padding:8px 16px; border-radius:999px; }
  .hero-copy-anon{ font-size:0.8rem; font-weight:600; color:var(--muted); }

  .page-wrap{ width:460px; margin:0; position:relative; }
  .hero-doodle{ display:block; position:absolute; top:-108px; right:-52px; width:128px; height:auto; pointer-events:none; opacity:0.92; }
  html[data-theme="dark"] .hero-doodle{ filter:invert(1) hue-rotate(180deg); opacity:0.75; }

  .how-section{ margin:0 0 64px; }
  .how-title{ font-size:1.7rem; margin-bottom:28px; }
  .how-grid{ flex-direction:row; gap:20px; }
  .how-step{ flex:1; flex-direction:column; align-items:flex-start; text-align:left; padding:26px 24px; gap:0; }
  .how-num{ margin-bottom:14px; }
  .how-step h3{ font-size:1rem; margin-bottom:6px; }
  .how-step p{ font-size:0.84rem; }

  /* Wider than a pure text column so the showcase artwork has room to
     breathe; the paragraph card is capped separately below. */
  .about-section{ max-width:900px; margin:0 auto 56px; padding:0; text-align:center; }
  .about-card{ max-width:720px; margin:0 auto; }
  .about-title{ font-size:1.7rem; }
  .about-card{ padding:36px 44px; }
  .about-section p{ font-size:0.92rem; }

  .showcase-img{ border-radius:22px; margin-bottom:26px; }

  .stats-row{ max-width:900px; margin:0 auto 56px; grid-template-columns:repeat(4,1fr); gap:20px; padding:0; }
  .stat-tile{ padding:28px 16px; }
  .stat-tile strong{ font-size:1.9rem; }
  .stat-tile span{ font-size:0.82rem; }

  .feature-list-section{ max-width:900px; margin:0 auto 56px; padding:0; }
  .feature-list-title{ font-size:1.7rem; }
  .feature-list{ flex-direction:row; gap:20px; }
  .feature-list-item{ flex:1; flex-direction:column; padding:24px 22px; }
  .feature-list-icon{ margin-bottom:8px; }
  .feature-list-item h3{ font-size:0.98rem; }
  .feature-list-item p{ font-size:0.84rem; }

  .testimonials-section{ max-width:900px; margin:0 auto 56px; padding:0; }
  .testimonials-title{ font-size:1.7rem; }
  .testimonials-grid{ flex-direction:row; flex-wrap:wrap; gap:16px; }
  .testimonial-card{ flex:1 1 calc(33.333% - 16px); min-width:240px; }

  .compare-section{ max-width:900px; margin:0 auto 56px; padding:0; }
  .compare-title{ font-size:1.7rem; }
  .compare-intro{ font-size:0.92rem; max-width:560px; }
  .compare-table{ font-size:0.85rem; }
  .compare-table th, .compare-table td{ padding:14px 18px; }

  .blog-preview-section{ max-width:900px; margin:0 auto 56px; padding:0; }
  .blog-preview-title{ font-size:1.7rem; }
  .blog-preview-intro{ font-size:0.92rem; max-width:560px; }
  .blog-preview-grid{ flex-direction:row; gap:22px; }
  .blog-preview-card{ flex:1; }
  .blog-preview-card h3{ font-size:1.08rem; }
  .blog-preview-card p{ font-size:0.85rem; }

  .final-cta{ max-width:820px; margin:0 auto 64px; padding:48px 40px; }
  .final-cta h2{ font-size:1.7rem; }
  .final-cta p{ font-size:0.95rem; }

  .faq-section{ max-width:820px; margin:0 auto 64px; padding:0; }
  .faq-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }

  .site-footer{ border-top:1px solid var(--line); padding:40px 0 8px; align-items:stretch; text-align:left; gap:0; }
  .footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:28px; text-align:left; }
  .footer-brand{ padding-bottom:0; margin-bottom:0; border-bottom:none; }
  .footer-brand p{ max-width:280px; }
  .footer-col{ border-bottom:none; }
  .footer-col > summary{ padding:0 0 12px; cursor:default; pointer-events:none; }
  .footer-col > summary::after{ display:none; }
  .footer-col-links{ padding:0; gap:9px; }
  .footer-col-links a{ font-size:0.82rem; padding:0; }
  .site-footer .footer-copy{ text-align:left; padding-top:18px; margin-top:0; border-top:1px solid var(--line); width:100%; }
  .footer-legal-note{ font-size:0.74rem; text-align:left; margin-top:10px; padding:0 0 24px; }

  /* ── Hero (desktop). Left-aligning a narrow column on a wide screen
     left a large dead area to its right, so the whole block centres
     and the inner elements centre with it. ── */
  .hero-v2{
    max-width:760px; margin:20px auto 64px; padding:56px 0 44px;
    text-align:center;
  }
  .hero-badge{ font-size:0.78rem; }
  .hero-heading{ font-size:3.2rem; margin-bottom:18px; }
  .hero-subheading{ font-size:1.05rem; max-width:620px; margin:0 auto 32px; }
  .hero-mode-pills{ max-width:430px; margin-left:auto; margin-right:auto; }
  .hero-cta-btn{ max-width:430px; margin-left:auto; margin-right:auto; }
  .hero-cta-note{ font-size:0.9rem; }
  .hero-trust-line{ font-size:0.84rem; gap:10px 26px; justify-content:center; }
  .hero-alt-line{ font-size:0.88rem; max-width:640px; margin:0 auto 24px; }
  .hero-online-strip{ max-width:430px; margin-left:auto; margin-right:auto; }

  .page-wrap{ margin:0 auto; }
}

@media (min-width:1180px){
  .hero-region{ grid-template-columns:1fr 480px; }
}

/* ── Mobile refinements ───────────────────────────────────── */
@media (max-width:480px){
  /* Real <input> fields under 16px trigger an unwanted auto-zoom
     on focus in iOS Safari — bump them to 16px on small screens
     only, so the desktop type scale is untouched. */
  .id-input, .chat-input{ font-size:16px; }
}
@media (max-width:340px){
  .feat-grid{ flex-direction:column; }
  .feat{ display:flex; align-items:center; gap:12px; text-align:left; padding:12px 14px; }
  .feat-icon{ margin-bottom:0; }
}

  .gate-overlay{
    display:none; position:fixed; inset:0; background:rgba(13,11,26,0.55);
    align-items:center; justify-content:center; padding:20px; z-index:999;
  }
  .gate-overlay.open{ display:flex; }
  .gate-card{
    width:420px; max-width:100%; background:var(--card-bg); border-radius:28px;
    padding:26px 24px 22px; box-shadow:0 40px 70px -30px var(--card-shadow-strong);
    position:relative; animation:fadeUp .3s ease both; overflow:hidden;
  }
  /* A soft pink bloom across the top edge, so the card reads as part of
     the site's accent language instead of a plain grey sheet. */
  .gate-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:150px; pointer-events:none;
    background:radial-gradient(120% 100% at 50% 0%, rgba(219,39,119,0.18), transparent 70%);
  }
  .gate-card > *{ position:relative; z-index:1; }
  .gate-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .gate-title{ font-size:1.12rem; font-weight:800; color:var(--ink); letter-spacing:-0.01em; }
  .gate-close{
    border:none; background:rgba(255,255,255,0.07); color:var(--muted); width:32px; height:32px;
    border-radius:50%; font-size:1.1rem; line-height:1; cursor:pointer;
    display:grid; place-items:center; transition:background-color .2s ease, color .2s ease;
  }
  .gate-close:hover{ background:rgba(255,255,255,0.13); color:var(--ink); }
  .gate-check-row{ margin-top:20px; display:flex; flex-direction:column; gap:12px; }
  /* The 18+ confirmation is the one thing the visitor MUST actively do,
     so it gets a real tappable row rather than a bare default checkbox
     floating next to text. The native input is kept for accessibility
     (label/keyboard/screen readers) but visually replaced below. */
  .gate-check{
    display:flex; align-items:center; gap:12px; font-size:0.86rem; color:var(--ink);
    line-height:1.45; cursor:pointer; border:1.5px solid var(--line); border-radius:16px;
    padding:13px 15px; background:var(--surface-2,var(--card-bg));
    transition:border-color .2s ease, background-color .2s ease;
  }
  .gate-check:hover{ border-color:rgba(219,39,119,0.4); }
  .gate-check input{
    position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none;
  }
  .gate-check .gate-box{
    flex-shrink:0; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
    border:1.8px solid var(--line); background:rgba(255,255,255,0.04); color:transparent;
    transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
  }
  .gate-check .gate-box svg{ width:14px; height:14px; }
  .gate-check input:checked ~ .gate-box{
    background:linear-gradient(140deg,var(--blue),var(--violet) 60%,var(--pink));
    border-color:transparent; color:#fff; transform:scale(1.05);
  }
  .gate-check:has(input:checked){
    border-color:var(--violet);
    background:linear-gradient(170deg, rgba(219,39,119,0.14), rgba(219,39,119,0.04));
  }
  .gate-check input:focus-visible ~ .gate-box{ outline:2px solid var(--violet); outline-offset:2px; }
  .gate-check a{ color:var(--violet); font-weight:600; text-decoration:none; }
  .gate-check a:hover{ text-decoration:underline; }
  /* Reassurance that this is a one-time ask, now that the answer sticks. */
  .gate-remember-note{
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin-top:14px; font-size:0.74rem; font-weight:600; color:var(--muted);
  }
  .gate-remember-note svg{ width:13px; height:13px; flex-shrink:0; }
  .gate-err{
    display:none; margin-top:14px; font-size:0.8rem; font-weight:600; color:#E14F63;
    background:#FDECEE; border-radius:12px; padding:10px 14px; animation:fadeUp .2s ease both;
  }
  html[data-theme="dark"] .gate-err{ background:rgba(228,79,99,0.16); color:#FF8FA0; }
  .gate-continue-btn{ width:100%; margin-top:18px; justify-content:center; }
  /* Disabled used to be a flat opacity:0.5, which read as a dead/broken
     button rather than "one step left". Keep the pink identity, drop the
     lift and glow instead. */
  .gate-continue-btn:disabled{
    opacity:1; cursor:default; filter:saturate(0.45) brightness(0.72);
    box-shadow:none; transform:none;
  }
  .gate-terms-note{ text-align:center; font-size:0.72rem; color:var(--muted); margin-top:12px; line-height:1.4; }
  .gate-terms-note a{ color:var(--violet); font-weight:600; text-decoration:none; }
  .gate-terms-note a:hover{ text-decoration:underline; }

  /* -- Sign-in modal (VIP-only, reuses the gate-overlay look) -- */
  .signin-modal{
    width:400px; max-width:100%; background:var(--card-bg); border-radius:28px;
    padding:26px 24px 22px; box-shadow:0 40px 70px -30px var(--card-shadow-strong);
    position:relative; animation:fadeUp .3s ease both; text-align:left;
  }
  .signin-modal .gate-title{ margin-bottom:4px; }
  .signin-modal-sub{ font-size:0.84rem; color:var(--muted); margin:0 0 18px; line-height:1.45; }
  .signin-field-label{ font-size:0.82rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
  .signin-input{
    width:100%; border:1.5px solid var(--line); border-radius:999px; padding:12px 18px;
    font-family:inherit; font-size:0.85rem; color:var(--ink); background:var(--card-bg); outline:none; margin-bottom:14px;
  }
  .signin-input:focus{ border-color:#C9B8FC; }
  .signin-tabs{ display:flex; gap:6px; margin-bottom:16px; background:var(--lav); border-radius:14px; padding:4px; }
  .signin-tab{ flex:1; border:none; background:transparent; padding:9px 6px; border-radius:11px; font-size:0.76rem; font-weight:700; color:var(--muted); cursor:pointer; font-family:inherit; }
  .signin-tab.active{ background:var(--card-bg); color:var(--violet); box-shadow:0 2px 6px var(--surface-shadow); }
  .signin-step{ display:none; }
  .signin-step.show{ display:block; }
  .signin-masked{ text-align:center; font-size:0.82rem; color:var(--muted); margin-bottom:14px; }
  .signin-masked strong{ color:var(--ink); }
  .signin-otp-input{
    width:100%; border:1.5px solid var(--line); border-radius:14px; padding:14px; text-align:center;
    font-family:monospace; font-size:1.4rem; letter-spacing:0.5em; font-weight:700; color:var(--ink);
    background:var(--card-bg); outline:none; margin-bottom:14px;
  }
  .signin-otp-input:focus{ border-color:#C9B8FC; }
  .signin-status-msg{ display:none; text-align:center; font-size:0.82rem; font-weight:600; padding:12px; border-radius:12px; margin-bottom:14px; }
  .signin-status-msg.show{ display:block; }
  .signin-status-msg.ok{ background:#DCFCE7; color:#15803D; }
  .signin-status-msg.err{ background:#FDECEE; color:#E14F63; }
  /* These render inside the dark sign-in modal, so the pale light-theme
     fills need dark equivalents -- same treatment .gate-err already has. */
  html[data-theme="dark"] .signin-status-msg.ok{ background:rgba(34,197,94,0.16); color:#6EE7A8; }
  html[data-theme="dark"] .signin-status-msg.err{ background:rgba(228,79,99,0.16); color:#FF8FA0; }
  .signin-resend-row{ text-align:center; margin-top:12px; }
  .signin-resend-row button{ border:none; background:none; color:var(--violet); font-weight:700; font-size:0.78rem; font-family:inherit; cursor:pointer; }

/* ═══════════════════════════════════════════════════════════════════
   SEO landing pages  (/random-text-chat, /random-video-chat)
   Built from the same pieces as the homepage; only the components the
   homepage doesn't have live here.
   ═══════════════════════════════════════════════════════════════════ */

/* Links inside how-step copy (the homepage now links to the landing pages there). */
.how-step p a{ color:var(--violet); font-weight:600; text-decoration:none; }
.how-step p a:hover{ text-decoration:underline; }

/* The final CTA is a <button> on landing pages (it starts the chat
   directly) rather than an anchor, so it needs the button resets. */
button.final-cta-btn{ border:none; font-family:inherit; cursor:pointer; }

/* Breadcrumb line at the top of the hero. */
.crumbs{ font-size:0.76rem; color:#8F8898; margin:0 0 16px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.crumbs a{ color:#A9A2BC; text-decoration:none; font-weight:500; }
.crumbs a:hover{ color:#fff; text-decoration:underline; }
.crumbs [aria-current]{ color:#D9D3E6; font-weight:600; }
.crumbs-sep{ opacity:.55; }

/* Body-copy links inside the long-form section cards. */
.duo-more, .opener-note a{ color:var(--violet); font-weight:700; text-decoration:none; }

/* ── Text vs. video pair ─────────────────────────────────────────── */
.duo-section{ margin:8px 0 28px; padding:0 6px; }
.duo-title{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 6px; text-align:center; }
.duo-intro{ font-size:0.86rem; color:var(--muted); line-height:1.6; text-align:center; max-width:420px; margin:0 auto 18px; }
.duo-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.duo-card{
  display:flex; flex-direction:column; background:var(--card-bg); border:1.5px solid var(--line);
  border-radius:22px; padding:20px 20px 18px; box-shadow:0 4px 18px var(--surface-shadow);
}
.duo-card.is-here{ border-color:var(--violet); box-shadow:0 0 0 3px rgba(219,39,119,0.12), 0 4px 18px var(--surface-shadow); }
.duo-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.duo-card-ic{
  width:40px; height:40px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--violet) 70%,var(--pink));
}
.duo-card-ic svg{ width:20px; height:20px; }
.duo-card h3{ font-size:1rem; font-weight:800; color:var(--ink); margin:0; }
.duo-card-tag{
  margin-left:auto; font-size:0.64rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--violet); background:var(--lav); padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.duo-card ul{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.duo-card li{ position:relative; padding-left:26px; font-size:0.83rem; color:var(--muted); line-height:1.5; }
.duo-card li::before{
  content:''; position:absolute; left:0; top:2px; width:17px; height:17px; border-radius:50%;
  background:rgba(219,39,119,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F472B6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}
.duo-btn{
  width:100%; border:none; border-radius:999px; padding:13px 16px; font-family:inherit; font-weight:700;
  font-size:0.88rem; color:#fff; cursor:pointer;
  background:linear-gradient(100deg,var(--blue),var(--violet) 55%,var(--pink));
  box-shadow:0 12px 24px -12px rgba(219,39,119,0.6); transition:transform .15s ease, box-shadow .2s ease;
}
.duo-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 28px -12px rgba(219,39,119,0.75); }
.duo-btn:active{ transform:translateY(0); }
.duo-more{ display:block; text-align:center; margin-top:12px; font-size:0.78rem; }
.duo-more:hover{ text-decoration:underline; }

/* ── Conversation starters ───────────────────────────────────────── */
.opener-section{ margin:8px 0 28px; padding:0 6px; }
.opener-title{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 6px; text-align:center; }
.opener-intro{ font-size:0.86rem; color:var(--muted); line-height:1.6; text-align:center; max-width:440px; margin:0 auto 18px; }
.opener-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.opener{
  display:flex; gap:12px; align-items:flex-start; background:var(--card-bg); border-radius:16px;
  padding:14px 16px; box-shadow:0 4px 18px var(--surface-shadow);
}
.opener-mark{ flex-shrink:0; color:var(--pink); font-size:1.7rem; font-weight:800; line-height:0.9; margin-top:4px; }
.opener p{ margin:0; font-size:0.86rem; color:var(--ink); font-weight:600; line-height:1.5; }
.opener-note{ text-align:center; font-size:0.82rem; color:var(--muted); line-height:1.6; margin:16px 6px 0; }
.opener-note a:hover{ text-decoration:underline; }

@media (min-width:600px){
  .opener-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:960px){
  .crumbs{ justify-content:center; font-size:0.8rem; margin-bottom:22px; }

  .duo-section{ max-width:900px; margin:0 auto 56px; padding:0; }
  .duo-title{ font-size:1.7rem; }
  .duo-intro{ font-size:0.92rem; max-width:560px; }
  .duo-grid{ grid-template-columns:1fr 1fr; gap:20px; }
  .duo-card{ padding:26px 26px 22px; }
  .duo-card li{ font-size:0.88rem; }

  .opener-section{ max-width:900px; margin:0 auto 56px; padding:0; }
  .opener-title{ font-size:1.7rem; }
  .opener-intro{ font-size:0.92rem; max-width:560px; }
  .opener-grid{ gap:14px; }
  .opener{ padding:18px 20px; }
  .opener p{ font-size:0.9rem; }
}

/* Step title + text share one column next to the number. Previously the h3 and
   the paragraph were separate flex items, which squeezed long titles into a
   narrow column on phones. */
.how-step-body{ min-width:0; flex:1; }