:root {
  --blue: #2476f3;
  --cyan: #1dd8ee;
  --ink: #0e1c35;
  --muted: #64748b;
  --line: #dbe6f2;
  --topbar-height: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
html.chat-active { scroll-snap-type: none; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #f5f8fc; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--topbar-height);
  padding: 0 clamp(18px, 3vw, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(203, 216, 232, .78);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 5px 25px rgba(20, 52, 96, .05);
  backdrop-filter: blur(18px);
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: #14233c; font-size: 25px; font-weight: 760; letter-spacing: -.9px; text-decoration: none; }
.brand b { color: var(--blue); font-weight: 820; }
.brand-mark { width: 35px; height: 31px; display: inline-flex; }
.brand-mark svg { width: 100%; height: 100%; overflow: visible; }
.brand-mark path:first-child { fill: #2b7ff4; }
.brand-mark path:last-child { fill: #20d4eb; stroke: #fff; stroke-width: 1.3; }
.connection { display: flex; align-items: center; gap: 9px; color: #65758b; font-size: 13px; font-weight: 650; }
.connection i { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
.connection.offline i { background: #94a3b8; box-shadow: 0 0 0 4px #e2e8f0; }
body.mission-in-view .topbar { border-color: rgba(57, 154, 234, .16); background: rgba(4, 29, 65, .72); box-shadow: none; }
body.mission-in-view .brand { color: #fff; }
body.mission-in-view .connection { color: #a9c9eb; }
body.mission-in-view .connection i { box-shadow: 0 0 0 4px rgba(34, 197, 94, .16); }

.scroll-panel { min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }
.home {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: calc(var(--topbar-height) + 42px) 18px 78px;
  background: linear-gradient(rgba(255, 255, 255, .92), rgba(245, 249, 255, .94)), radial-gradient(circle at 20% 0, rgba(36, 118, 243, .12), transparent 33%);
}
.home-inner { position: relative; z-index: 2; width: min(940px, 100%); }
.home-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.home-glow-one { width: 460px; height: 460px; top: 10%; left: -270px; background: radial-gradient(circle, rgba(32, 180, 255, .16), transparent 68%); }
.home-glow-two { width: 520px; height: 520px; right: -310px; bottom: -100px; background: radial-gradient(circle, rgba(36, 118, 243, .14), transparent 68%); }
.hero { max-width: 790px; margin: 0 auto; text-align: center; }
.eyebrow { margin: 0 0 14px; color: var(--blue); font-size: 12px; font-weight: 850; letter-spacing: 2.6px; }
.hero h1 { margin: 0; color: #0b1930; font-size: clamp(44px, 6.5vw, 74px); font-weight: 830; letter-spacing: clamp(-3.8px, -.06em, -2px); line-height: .98; }
.hero h1 span { background: linear-gradient(100deg, #1a6ef0, #19c5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy { max-width: 610px; margin: 21px auto 0; color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.62; }

.start-card { max-width: 760px; margin: 34px auto 0; padding: 18px; border: 1px solid rgba(204, 218, 235, .9); border-radius: 25px; background: rgba(255, 255, 255, .9); box-shadow: 0 24px 65px rgba(31, 65, 116, .12); backdrop-filter: blur(14px); }
.consent-row { display: flex; align-items: center; gap: 13px; padding: 4px 8px 17px; cursor: pointer; user-select: none; }
.consent-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.checkmark { position: relative; flex: 0 0 23px; width: 23px; height: 23px; border: 2px solid #a9bad0; border-radius: 7px; background: #fff; transition: .18s ease; }
.checkmark::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; opacity: 0; transform: rotate(45deg) scale(.7); transition: .18s ease; }
.consent-row input:checked + .checkmark { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px rgba(36, 118, 243, .12); }
.consent-row input:checked + .checkmark::after { opacity: 1; transform: rotate(45deg) scale(1); }
.consent-row input:focus-visible + .checkmark { outline: 3px solid rgba(36, 118, 243, .3); outline-offset: 3px; }
.consent-copy { display: grid; gap: 3px; text-align: left; }
.consent-copy strong { color: #192941; font-size: 14px; line-height: 1.35; }
.consent-copy small { color: #7a8798; font-size: 12px; line-height: 1.35; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.choice {
  position: relative;
  min-height: 66px;
  padding: 0 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, #4098ff 0%, #2372ef 100%);
  box-shadow: 0 10px 22px rgba(27, 105, 231, .24), inset 0 1px 0 rgba(255, 255, 255, .34);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
}
.choice::after { content: ""; position: absolute; top: -15%; right: 7%; width: 14px; height: 135%; border-left: 6px solid rgba(255, 255, 255, .14); border-right: 6px solid rgba(255, 255, 255, .08); transform: skewX(-16deg); }
.choice:hover:not(:disabled) { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 15px 28px rgba(27, 105, 231, .3), inset 0 1px 0 rgba(255, 255, 255, .4); }
.choice:active:not(:disabled) { transform: translateY(0); }
.choice:focus-visible { outline: 3px solid rgba(36, 118, 243, .3); outline-offset: 3px; }
.choice:disabled { color: #8190a5; background: linear-gradient(180deg, #e9eff7, #dce5f0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); cursor: not-allowed; opacity: .78; }
.choice:disabled::after { opacity: .35; }
.choice-icon { min-width: 30px; font-size: 18px; font-weight: 900; }
.video-choice-icon { display: inline-flex; width: 24px; height: 24px; }
.video-choice-icon svg { width: 100%; height: 100%; fill: currentColor; }
.consent-notice { margin: 12px 0 0; color: #7a8798; font-size: 12px; font-weight: 700; text-align: center; }
.consent-notice.ready { color: #16834d; }
.legal-copy { margin: 8px 0 0; color: #7b8798; font-size: 11px; line-height: 1.5; text-align: center; }
.legal-copy a { color: #356da7; font-weight: 700; }

.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 8px; color: #59708f; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; animation: cueBounce 1.8s ease-in-out infinite; }
@keyframes cueBounce { 50% { transform: translateY(4px); } }

.mission {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--topbar-height) + 28px) 20px 86px;
  isolation: isolate;
  color: #fff;
  background: radial-gradient(circle at 88% 12%, rgba(4, 191, 229, .28), transparent 28%), radial-gradient(circle at 12% 85%, rgba(26, 103, 231, .32), transparent 31%), linear-gradient(126deg, #082b54 0%, #03182f 47%, #043d5d 100%);
}
.mission::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(115deg, rgba(14, 89, 151, .2), transparent 37%, rgba(10, 134, 158, .12)); }
.mission-content { position: relative; z-index: 4; width: min(1050px, 100%); text-align: center; }
.mission-logo { display: flex; align-items: center; justify-content: center; gap: 13px; margin-bottom: clamp(24px, 4vh, 40px); color: #fff; font-size: clamp(26px, 3.4vw, 38px); font-weight: 720; letter-spacing: -1.3px; }
.mission-logo b { color: #12baf0; }
.mission-logo-mark { width: clamp(44px, 5vw, 60px); height: clamp(39px, 4.5vw, 53px); display: inline-flex; }
.mission-logo-mark svg { width: 100%; height: 100%; overflow: visible; }
.mission-logo-mark path:first-child { fill: #288bfa; }
.mission-logo-mark path:last-child { fill: #22d2e8; stroke: #062b50; stroke-width: 1.2; }
.vision-label { display: flex; align-items: center; justify-content: center; gap: 34px; margin-bottom: clamp(19px, 3vh, 29px); color: #6fafe2; font-size: clamp(13px, 1.7vw, 19px); font-weight: 520; letter-spacing: clamp(5px, .75vw, 10px); }
.vision-label i { width: 30px; height: 1px; background: #4b91c6; }
.mission h2 { margin: 0; color: #fff; font-size: clamp(46px, 6.7vw, 84px); font-weight: 900; letter-spacing: clamp(-4px, -.055em, -2px); line-height: .96; text-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
.mission h2 span { background: linear-gradient(90deg, #24dce9, #078ff4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mission-copy { margin: clamp(19px, 3vh, 28px) auto 0; color: #d8e6f5; font-size: clamp(16px, 2vw, 22px); line-height: 1.5; }

.mission-cta { min-width: 280px; min-height: 66px; margin-top: clamp(25px, 4vh, 42px); padding: 0 28px 0 34px; display: inline-flex; align-items: center; justify-content: center; gap: 26px; border: 1px solid rgba(103, 236, 255, .42); border-radius: 999px; color: #fff; background: linear-gradient(105deg, #18cce5, #087ef6); box-shadow: 0 13px 32px rgba(3, 120, 242, .3), inset 0 1px 0 rgba(255, 255, 255, .3); font-size: 18px; font-weight: 820; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, filter .2s ease; }
.mission-cta svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.mission-cta:hover:not(:disabled) { transform: translateY(-3px); filter: saturate(1.08); box-shadow: 0 18px 38px rgba(3, 120, 242, .4), inset 0 1px 0 rgba(255, 255, 255, .38); }
.mission-cta:disabled { border-color: rgba(130, 166, 201, .22); color: #8ca8c5; background: rgba(70, 109, 148, .25); box-shadow: none; cursor: not-allowed; }
.mission-cta:focus-visible { outline: 3px solid rgba(70, 218, 255, .4); outline-offset: 4px; }
.mission-consent-hint { min-height: 18px; margin: 10px 0 0; color: #7fa9cf; font-size: 12px; font-weight: 650; }
.mission-consent-hint.ready { color: #6ae1c4; }
.mission-tagline { margin: clamp(22px, 4vh, 42px) 0 0; display: flex; align-items: center; justify-content: center; gap: 15px; color: #79a8d0; font-size: clamp(9px, 1vw, 12px); letter-spacing: clamp(2px, .33vw, 4px); }
.mission-tagline i { width: 4px; height: 4px; border-radius: 50%; background: #149fe2; }

.mission-orb, .mission-ring, .dot-grid, .outline-bubbles { position: absolute; pointer-events: none; }
.mission-orb { border-radius: 50%; }
.orb-top { width: min(38vw, 600px); aspect-ratio: 1; top: -29vw; right: -7vw; border: 3px solid rgba(18, 189, 242, .62); background: radial-gradient(circle at 25% 70%, rgba(13, 199, 224, .42), rgba(8, 90, 163, .13) 46%, rgba(3, 30, 61, .2) 68%); box-shadow: inset 0 0 60px rgba(11, 216, 238, .22), 0 0 50px rgba(12, 164, 232, .13); }
.orb-bottom { width: min(37vw, 560px); aspect-ratio: 1; left: -18vw; bottom: -13vw; border: 3px solid rgba(24, 198, 240, .7); background: radial-gradient(circle at 65% 25%, rgba(8, 194, 239, .55), rgba(12, 86, 184, .35) 48%, rgba(6, 44, 94, .5) 70%); box-shadow: inset 0 0 55px rgba(18, 218, 236, .23); }
.mission-ring { border: 2px solid rgba(8, 143, 236, .48); border-radius: 50%; }
.ring-one { width: 102vw; height: 72vw; left: -33vw; top: 29%; transform: rotate(22deg); }
.ring-two { width: 85vw; height: 64vw; right: -43vw; top: -26vw; transform: rotate(29deg); }
.dot-grid { width: 115px; height: 90px; opacity: .6; background-image: radial-gradient(circle, #5e9bd2 0 3px, transparent 3.5px); background-size: 34px 34px; }
.dots-left { top: 12%; left: 5%; }
.dots-right { right: 6%; bottom: 16%; }
.outline-bubbles { top: 28%; right: 9%; width: 170px; height: 150px; opacity: .55; }
.outline-bubbles i, .outline-bubbles b { position: absolute; display: block; border: 4px solid #0e87d6; border-radius: 35px; }
.outline-bubbles i { width: 112px; height: 82px; top: 0; left: 0; }
.outline-bubbles i::after { content: ""; position: absolute; left: 17px; bottom: -23px; width: 27px; height: 28px; border-left: 4px solid #0e87d6; transform: skew(-31deg); }
.outline-bubbles b { width: 118px; height: 78px; right: 0; bottom: 4px; border-color: #19b9e9; }
.outline-bubbles b::before { content: "•••"; position: absolute; inset: 13px 0 auto; color: #189ee8; font-size: 32px; letter-spacing: 7px; }
.outline-bubbles b::after { content: ""; position: absolute; right: 14px; bottom: -23px; width: 25px; height: 27px; border-right: 4px solid #19b9e9; transform: skew(31deg); }

.mission-footer { position: absolute; z-index: 5; right: clamp(18px, 3vw, 42px); bottom: 19px; left: clamp(18px, 3vw, 42px); display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #658cb1; font-size: 12px; }
.mission-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.mission-footer a { color: #84acd0; font-weight: 650; text-decoration: none; }
.mission-footer a:hover { color: #fff; }

.showcase {
  position: relative;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #020e25;
}
.showcase picture,
.showcase img {
  width: 100%;
  height: 100%;
  display: block;
}
.showcase img {
  object-fit: contain;
  object-position: center;
}
.how-it-works-showcase { background: #f7f9fd; }
.private-sessions-showcase { background: #020e25; }

.chat { height: 100svh; min-height: 100svh; overflow: hidden; padding: calc(var(--topbar-height) + 10px) 12px 12px; background: radial-gradient(circle at 20% 0, rgba(36, 118, 243, .09), transparent 30%), linear-gradient(#fff, #f5f8fc); }
.layout { width: min(1180px, 100%); height: calc(100svh - var(--topbar-height) - 22px); min-height: 0; margin: auto; display: grid; grid-template-columns: 1fr; gap: 12px; }
.layout.video-mode { width: 100%; max-width: none; grid-template-columns: minmax(0, 1fr) clamp(380px, 32vw, 620px); }
.video-area { min-width: 0; min-height: 0; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.video-card { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #1f3350; border-radius: 16px; background: #071428; box-shadow: 0 15px 34px rgba(8, 25, 53, .12); }
.video-card video { width: 100%; height: 100%; object-fit: cover; background: #071428; }
.video-card > span { position: absolute; left: 13px; bottom: 13px; padding: 6px 11px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; color: #fff; background: rgba(3, 12, 28, .64); font-size: 12px; backdrop-filter: blur(8px); }
.placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #91a8c2; }
.chat-card { height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 15px 38px rgba(15, 40, 78, .08); }
.chat-head { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); background: #f8fbff; }
.chat-head strong { display: block; }
.chat-head small { display: block; margin-top: 3px; color: var(--muted); }
.chat-head .moderation-status { margin-top: 5px; color: #73839a; font-size: 11px; font-weight: 700; }
.chat-head .moderation-status.active { color: #16834d; }
.chat-head .moderation-status.degraded { color: #b45309; }
.badge { padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.badge.searching { color: #1f65bf; background: #e9f2ff; }
.badge.connected { color: #15803d; background: #ecfdf3; }
.badge.blocked { color: #a32934; background: #feecef; }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
.message { margin: 0 0 13px; line-height: 1.45; word-break: break-word; }
.message b { margin-right: 7px; }
.message.you b { color: var(--blue); }
.message.stranger b { color: #06a5c6; }
.message.system { color: #64748b; font-style: italic; }
.composer { display: grid; grid-template-columns: 1fr 96px; border-top: 1px solid var(--line); }
textarea { min-height: 70px; padding: 15px; resize: none; border: 0; outline: 0; color: var(--ink); }
textarea:disabled { background: #f8fafc; }
.composer button { border: 0; color: #fff; background: var(--blue); font-weight: 800; cursor: pointer; }
.composer button:disabled { opacity: .45; cursor: not-allowed; }
.controls { display: grid; grid-template-columns: 1fr minmax(105px, .55fr) 1fr; gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: #f8fbff; }
.controls button { padding: 13px 16px; border: 0; border-radius: 11px; font-weight: 800; cursor: pointer; }
.controls button:disabled { opacity: .46; cursor: not-allowed; }
.primary { color: #fff; background: linear-gradient(135deg, #318af7, #1768df); }
.report-button { color: #a32934; background: #feecef; }
.secondary { color: #314158; background: #e7edf5; }

@media (min-width: 1500px) {
  .video-area { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
}

@media (max-width: 850px) {
  :root { --topbar-height: 64px; }
  .brand { font-size: 22px; }
  .brand-mark { width: 31px; height: 28px; }
  .home { padding-top: calc(var(--topbar-height) + 32px); }
  .chat { height: auto; min-height: 100svh; overflow: visible; padding: calc(var(--topbar-height) + 8px) 8px 8px; }
  .layout, .layout.video-mode { width: 100%; height: auto; min-height: calc(100svh - var(--topbar-height) - 16px); grid-template-columns: 1fr; gap: 8px; }
  .video-area { min-height: 42svh; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(260px, 42svh); gap: 8px; }
  .video-card { min-height: 260px; border-radius: 14px; }
  .chat-card { height: auto; min-height: 520px; border-radius: 14px; }
  .outline-bubbles { right: 2%; transform: scale(.7); }
  .dots-left { left: 2%; }
  .dots-right { right: 2%; }
}

@media (max-width: 620px) {
  .topbar { padding-inline: 14px; }
  .connection { gap: 7px; font-size: 11px; white-space: nowrap; }
  .connection i { display: block; width: 8px; height: 8px; }
  .home { padding-inline: 12px; padding-bottom: 66px; }
  .hero h1 { font-size: clamp(42px, 13vw, 60px); }
  .hero-copy { margin-top: 16px; font-size: 15px; }
  .start-card { margin-top: 26px; padding: 12px; border-radius: 20px; }
  .consent-row { align-items: flex-start; padding: 6px 5px 14px; }
  .choices { gap: 9px; }
  .choice { min-height: 58px; padding-inline: 13px; gap: 8px; border-radius: 15px; font-size: 15px; }
  .choice-icon { min-width: 24px; font-size: 15px; }
  .video-choice-icon { width: 21px; height: 21px; }
  .legal-copy { padding-inline: 3px; }
  .scroll-cue { bottom: 12px; }
  .mission { padding: calc(var(--topbar-height) + 22px) 15px 108px; }
  .mission-logo { margin-bottom: 23px; }
  .vision-label { gap: 16px; margin-bottom: 20px; letter-spacing: 5px; }
  .vision-label i { width: 20px; }
  .mission h2 { font-size: clamp(42px, 12vw, 62px); }
  .mission-copy { max-width: 330px; font-size: 15px; }
  .mission-cta { min-width: min(280px, 88vw); min-height: 60px; margin-top: 27px; }
  .mission-tagline { max-width: 330px; margin-inline: auto; flex-wrap: wrap; line-height: 1.5; }
  .mission-footer { align-items: flex-start; flex-direction: column; gap: 8px; bottom: 15px; }
  .mission-footer nav { gap: 12px; }
  .dot-grid, .outline-bubbles { opacity: .25; }
  .orb-top { width: 70vw; top: -30vw; right: -31vw; }
  .orb-bottom { width: 73vw; left: -48vw; bottom: -14vw; }
  .chat { padding-inline: 5px; }
  .video-area { min-height: 0; grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(220px, 34svh)); }
  .composer { grid-template-columns: 1fr 78px; }
  .controls { grid-template-columns: 1fr 1fr; }
  .controls .primary { grid-column: 1 / -1; }
}

@media (max-height: 720px) {
  html { scroll-snap-type: y proximity; }
  .home { padding-top: calc(var(--topbar-height) + 24px); padding-bottom: 52px; }
  .hero h1 { font-size: clamp(40px, 7.5vh, 61px); }
  .hero-copy { margin-top: 13px; }
  .start-card { margin-top: 18px; }
  .mission { padding-top: calc(var(--topbar-height) + 16px); padding-bottom: 72px; }
  .mission-logo { margin-bottom: 16px; }
  .vision-label { margin-bottom: 14px; }
  .mission h2 { font-size: clamp(39px, 9.3vh, 66px); }
  .mission-copy { margin-top: 13px; }
  .mission-cta { min-height: 56px; margin-top: 19px; }
  .mission-tagline { margin-top: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}