/* SinsParadise — public site. Tokens mirror packages/design-tokens (dark, ethereal, editorial). */
:root {
  --bg: #0a0a0a; --bg-2: #111014; --fg: #f5f5f5; --fg-2: #a3a3a3; --fg-3: #737373;
  --violet: #8b5cf6; --rose: #ec4899; --amber: #f59e0b;
  --glass: rgba(255,255,255,.06); --glass-strong: rgba(255,255,255,.12);
  --line: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.2);
  --grad: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
  --radius: 28px; --max: 1160px;
  --font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg { display:block; max-width:100%; }
a { color:inherit; }
:focus-visible { outline:2px solid #a78bfa; outline-offset:3px; border-radius:8px; }
.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; }
.skip { position:absolute; left:16px; top:-60px; z-index:100; background:#fff; color:#0a0a0a; padding:10px 16px; border-radius:999px; font-weight:500; text-decoration:none; }
.skip:focus { top:12px; }

/* Mist backdrop */
.mist { position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 15% -5%, rgba(109,74,224,.35), transparent 70%),
    radial-gradient(55vw 45vh at 95% 10%, rgba(194,65,127,.22), transparent 70%),
    radial-gradient(70vw 60vh at 50% 110%, rgba(59,29,79,.55), transparent 70%),
    var(--bg); }
.grain { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Layout */
.wrap { width:min(var(--max), 100% - 32px); margin-inline:auto; }
section { padding:112px 0; }
.eyebrow { display:inline-block; font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#c4b5fd; margin-bottom:16px; }
h1,h2,h3 { margin:0; font-weight:300; letter-spacing:-0.035em; line-height:1.02; }
h1 { font-size:clamp(48px,8.2vw,104px); }
h2 { font-size:clamp(38px,5.2vw,64px); }
h3 { font-size:26px; letter-spacing:-0.02em; line-height:1.15; font-weight:400; }
p { margin:0; }
.lede { font-size:clamp(18px,1.6vw,21px); color:var(--fg-2); max-width:640px; }
.center { text-align:center; margin-inline:auto; }
.section-head { max-width:760px; margin-bottom:64px; }
.section-head .lede { margin-top:20px; }
.section-head.center { text-align:center; margin-inline:auto; }
.section-head.center .lede { margin-inline:auto; }
.gradient-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:6px 6px 6px 24px; border-radius:999px; font:500 16px/1 var(--font); text-decoration:none; border:1px solid var(--line-strong); background:var(--glass); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); color:var(--fg); transition:transform .2s ease, background .2s ease; cursor:pointer; }
.btn:hover { transform:translateY(-1px); background:var(--glass-strong); }
.btn .dot { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; color:#0a0a0a; }
.btn.ghost { padding:6px 24px; background:transparent; }
.btn.white { background:#fff; color:#0a0a0a; border-color:#fff; }
.btn.white .dot { background:#0a0a0a; color:#fff; }

/* Nav */
.nav { position:sticky; top:0; z-index:50; padding:14px 0; transition:background .3s ease; }
.nav.scrolled { background:rgba(10,10,10,.72); -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:500; font-size:19px; letter-spacing:-0.02em; }
.brand-mark { width:32px; height:32px; }
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0; }
.nav-links a { text-decoration:none; color:var(--fg-2); font-size:15px; transition:color .2s ease; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color:var(--fg); }
.nav-cta { display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:999px; background:#fff; color:#0a0a0a; font-weight:500; font-size:15px; text-decoration:none; }
.menu-btn { display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:var(--glass); color:var(--fg); cursor:pointer; }

/* Hero */
.hero { position:relative; padding:96px 0 64px; text-align:center; isolation:isolate; }
.hero-photo { position:absolute; inset:-80px 0 0; z-index:-1; background:linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,.72) 55%, #0a0a0a 100%), radial-gradient(80% 60% at 50% 30%, transparent 0%, rgba(10,10,10,.6) 100%), var(--photo, none) center 30% / cover no-repeat; }
.badge { display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border-radius:999px; border:1px solid var(--line-strong); background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); font-size:14px; color:var(--fg-2); margin-bottom:36px; }
.badge b { display:inline-grid; place-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--grad); color:#fff; font-size:12px; font-weight:600; letter-spacing:.04em; }
.hero .lede { margin:28px auto 0; }
.hero-ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:44px; }
.pills { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:56px; padding:0; list-style:none; }
.pills li { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); font-size:14px; color:var(--fg-2); }
.pills li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--grad); }

/* Phones */
.phones { display:flex; justify-content:center; align-items:flex-end; gap:28px; margin-top:16px; perspective:1600px; }
.phone { position:relative; width:280px; aspect-ratio:9/19; border-radius:44px; padding:10px; background:linear-gradient(160deg,#2a2733,#0f0e12); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 80px -20px rgba(0,0,0,.8), 0 0 120px -40px rgba(139,92,246,.5); flex-shrink:0; }
.phone.side { width:250px; opacity:.92; }
.phone.left { transform:rotateY(12deg) translateY(24px); }
.phone.right { transform:rotateY(-12deg) translateY(24px); }
.screen { position:relative; height:100%; border-radius:36px; overflow:hidden; background:radial-gradient(120% 60% at 20% 0%, rgba(109,74,224,.45), transparent 60%), radial-gradient(90% 50% at 100% 100%, rgba(194,65,127,.35), transparent 60%), #0a0a0a; display:flex; flex-direction:column; padding:44px 14px 14px; font-size:12px; }
.screen::before { content:''; position:absolute; top:12px; left:50%; translate:-50% 0; width:86px; height:24px; border-radius:999px; background:#000; }
.s-title { font-size:26px; font-weight:300; letter-spacing:-0.03em; margin:2px 4px 12px; }
.s-glass { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); border-radius:22px; }
.card-photo { position:relative; flex:1; border-radius:26px; overflow:hidden; background:radial-gradient(60% 45% at 35% 35%, rgba(236,72,153,.75), transparent 70%), radial-gradient(55% 50% at 70% 60%, rgba(139,92,246,.85), transparent 70%), radial-gradient(80% 60% at 50% 100%, #1b1024, transparent 80%), #140c1c; }
.card-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.8), transparent 55%); }
.card-info { position:absolute; left:14px; right:14px; bottom:14px; z-index:1; }
.card-info strong { display:block; font-size:20px; font-weight:400; letter-spacing:-0.02em; }
.card-info span { color:rgba(255,255,255,.7); }
.tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.tag { padding:4px 9px; border-radius:999px; font-size:10px; font-weight:500; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.1); }
.tag.love { background:var(--grad); border-color:transparent; }
.card-actions { display:flex; justify-content:center; gap:12px; margin-top:12px; }
.circle { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); }
.circle.white { background:#fff; color:#0a0a0a; width:auto; padding:0 6px 0 16px; gap:8px; display:inline-flex; align-items:center; border-radius:999px; font-weight:500; }
.circle.white i { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#0a0a0a; color:#fff; font-style:normal; }
.chat-head { display:flex; align-items:center; gap:8px; padding:0 2px 10px; }
.avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:500; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); }
.chat-head small { display:block; color:var(--fg-3); font-size:10px; }
.day { align-self:center; font-size:10px; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--fg-2); margin:4px 0 10px; }
.bubble { max-width:78%; padding:8px 12px; border-radius:18px; margin-bottom:4px; line-height:1.35; }
.bubble.them { align-self:flex-start; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-bottom-left-radius:6px; }
.bubble.me { align-self:flex-end; background:#fff; color:#0a0a0a; border-bottom-right-radius:6px; }
.photo-bubble { align-self:flex-start; width:62%; aspect-ratio:4/3; border-radius:18px; overflow:hidden; position:relative; background:radial-gradient(50% 50% at 30% 40%, rgba(245,158,11,.7), transparent 70%), radial-gradient(60% 60% at 70% 70%, rgba(236,72,153,.7), transparent 70%), #2a1630; filter:saturate(1.1); margin-bottom:2px; }
.photo-bubble span { position:absolute; inset:auto 8px 8px; font-size:10px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.reactions { display:flex; gap:4px; margin:0 0 8px; }
.reactions.right { justify-content:flex-end; }
.reactions span { padding:2px 7px; border-radius:999px; font-size:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); }
.reactions span.mine { border-color:rgba(196,181,253,.6); background:rgba(167,139,250,.25); }
.big-emoji { align-self:flex-end; font-size:30px; line-height:1.1; margin:2px 0 6px; }
.composer { margin-top:auto; display:flex; align-items:center; gap:6px; padding:6px 6px 6px 12px; border-radius:999px; color:var(--fg-3); }
.composer em { flex:1; font-style:normal; }
.composer .send { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#0a0a0a; }
.album { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:0 8px; }
.lock { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#0a0a0a; box-shadow:0 16px 48px -8px rgba(139,92,246,.7); }
.album h4 { margin:6px 0 0; font-size:22px; font-weight:300; letter-spacing:-0.02em; }
.album p { color:var(--fg-2); font-size:11px; }
.field { width:100%; text-align:left; padding:10px 14px; color:var(--fg-3); }
.album .circle.white { width:100%; justify-content:space-between; }

/* Features */
.feature { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:72px; padding:56px 0; }
.feature.flip .feature-copy { order:2; }
.feature-copy h3 { font-size:clamp(30px,3.4vw,44px); font-weight:300; letter-spacing:-0.03em; margin:8px 0 18px; }
.feature-copy p { color:var(--fg-2); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:0; list-style:none; }
.chips li { padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); font-size:14px; }
.visual { position:relative; min-height:380px; border-radius:var(--radius); border:1px solid var(--line); background:radial-gradient(70% 60% at 20% 20%, rgba(109,74,224,.28), transparent 70%), radial-gradient(60% 60% at 90% 90%, rgba(194,65,127,.22), transparent 70%), rgba(255,255,255,.02); overflow:hidden; display:grid; place-items:center; padding:32px; }
.glass-card { border:1px solid var(--line-strong); background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-radius:24px; padding:20px; }
.desire-board { width:min(420px,100%); display:grid; gap:14px; }
.desire-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stance { padding:6px 12px; border-radius:999px; font-size:13px; font-weight:500; border:1px solid var(--line-strong); }
.stance.love { background:var(--grad); border-color:transparent; }
.stance.curious { background:rgba(167,139,250,.18); border-color:rgba(196,181,253,.45); }
.stance.limit { background:rgba(239,68,68,.14); border-color:rgba(248,113,113,.45); color:#fecaca; }
.connect-stack { width:min(400px,100%); display:grid; gap:12px; }
.connect-stack .bubble { max-width:88%; font-size:15px; }
.link-map { position:relative; width:min(420px,100%); aspect-ratio:1.2; }
.node { position:absolute; display:grid; place-items:center; width:84px; height:84px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); font-size:14px; text-align:center; line-height:1.2; }
.node.you { background:#fff; color:#0a0a0a; font-weight:500; }
.link-map svg { position:absolute; inset:0; width:100%; height:100%; }
.event-card { width:min(400px,100%); }
.event-card .date { display:inline-block; font-size:13px; color:#c4b5fd; margin-bottom:6px; }
.event-card h4 { margin:0 0 6px; font-size:24px; font-weight:400; letter-spacing:-0.02em; }
.event-card p { color:var(--fg-2); font-size:15px; }
.event-meta { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* Privacy grid */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tile { padding:30px; border-radius:var(--radius); border:1px solid var(--line); background:rgba(255,255,255,.035); transition:border-color .25s ease, transform .25s ease; }
.tile:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.tile .icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid var(--line-strong); margin-bottom:22px; font-size:22px; }
.tile h3 { font-size:21px; margin-bottom:10px; }
.tile p { color:var(--fg-2); font-size:16px; }

/* Safety band */
.band { border-radius:40px; border:1px solid var(--line-strong); background:radial-gradient(60% 80% at 0% 0%, rgba(109,74,224,.35), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(194,65,127,.25), transparent 70%), rgba(255,255,255,.03); padding:clamp(32px,6vw,72px); display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.band ul { list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.band li { display:grid; grid-template-columns:28px 1fr; gap:12px; color:var(--fg-2); }
.band li strong { color:var(--fg); font-weight:500; }
.check { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#0a0a0a; font-size:14px; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:step; }
.step { padding:32px; border-radius:var(--radius); border:1px solid var(--line); background:rgba(255,255,255,.03); }
.step .num { font-size:56px; font-weight:200; letter-spacing:-0.04em; line-height:1; margin-bottom:20px; }
.step h3 { font-size:22px; margin-bottom:10px; }
.step p { color:var(--fg-2); }

/* FAQ */
.faq { max-width:820px; margin-inline:auto; display:grid; gap:12px; }
.faq details { border-radius:22px; border:1px solid var(--line); background:rgba(255,255,255,.03); padding:0 24px; }
.faq details[open] { border-color:var(--line-strong); background:rgba(255,255,255,.05); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-size:18px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-size:24px; font-weight:300; color:var(--fg-2); transition:transform .2s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--fg-2); padding:0 0 22px; }

/* Final CTA + footer */
.final { position:relative; text-align:center; padding:140px 0 120px; isolation:isolate; }
.final .lede { margin:20px auto 40px; }
footer { border-top:1px solid var(--line); padding:56px 0 40px; color:var(--fg-2); font-size:15px; }
.foot { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot h4 { margin:0 0 14px; color:var(--fg); font-weight:500; font-size:15px; }
.foot ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot a { text-decoration:none; }
.foot a:hover { color:var(--fg); }
.legal { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:14px; color:var(--fg-3); }
.age { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); font-size:12px; font-weight:600; color:var(--fg); }

/* Motion — a CSS-only fade-in that ALWAYS finishes on its own. Content is visible by default;
   the animation can never leave a section stuck hidden (no JS dependency for visibility). */
.reveal { opacity:1; }
html.js .reveal { animation: reveal-rise .7s ease both; }
@keyframes reveal-rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
.float { animation:float 7s ease-in-out infinite; }
.float.delay { animation-delay:-3.5s; }
@keyframes float { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } html.js .reveal { animation:none; } .float { animation:none; } }

/* Responsive */
@media (max-width:1000px) {
  .phone.side { display:none; }
  .feature, .band { grid-template-columns:1fr; gap:36px; }
  .feature.flip .feature-copy { order:0; }
  .grid-3, .steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  body { font-size:16px; }
  section { padding:80px 0; }
  .nav-links { display:none; position:absolute; top:72px; left:16px; right:16px; flex-direction:column; align-items:stretch; gap:0; padding:8px; border-radius:24px; border:1px solid var(--line-strong); background:#141218; box-shadow:0 24px 60px -12px rgba(0,0,0,.8); }
  .nav-links.open { display:flex; }
  .nav-links a { display:block; padding:14px 16px; font-size:17px; }
  .menu-btn { display:grid; place-items:center; }
  .nav-cta { display:none; }
  .grid-3, .steps, .foot { grid-template-columns:1fr; }
  .visual { min-height:320px; padding:20px; }
  .phone { width:min(280px,78vw); }
  .btn { width:100%; justify-content:space-between; }
  .btn.ghost { justify-content:center; }
}


/* ── Sub-page: Trust & Safety / policy layout ───────────────────────────── */
.page-hero { padding:88px 0 40px; text-align:left; }
.page-hero .lede { margin-top:24px; }
.toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; padding:0; list-style:none; }
.toc a { display:inline-block; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); text-decoration:none; font-size:14px; color:var(--fg-2); }
.toc a:hover { color:var(--fg); border-color:var(--line-strong); }
.policy { display:grid; grid-template-columns:280px 1fr; gap:56px; padding:56px 0; border-top:1px solid var(--line); }
.policy h2 { font-size:clamp(30px,3.2vw,40px); position:sticky; top:96px; align-self:start; }
.policy .body { display:grid; gap:18px; color:var(--fg-2); max-width:720px; }
.policy .body strong { color:var(--fg); font-weight:500; }
.policy .body a { color:#c4b5fd; text-underline-offset:3px; }
.policy ul { margin:0; padding-left:20px; display:grid; gap:10px; }
.callout { border-radius:22px; border:1px solid rgba(248,113,113,.35); background:rgba(239,68,68,.08); padding:22px 24px; color:#fecaca; }
.callout strong { color:#fff; }
.resources { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.resource { display:grid; gap:4px; padding:18px 22px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.03); text-decoration:none; }
.resource:hover { border-color:var(--line-strong); }
.resource b { color:var(--fg); font-weight:500; }
.resource span { color:var(--fg-2); font-size:14px; }
.updated { font-size:14px; color:var(--fg-3); margin-top:16px; }

/* ── Sub-page: Membership / pricing ─────────────────────────────────────── */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.compare h3 { margin-bottom:16px; }
.compare ul { display:grid; gap:10px; list-style:none; padding:0; margin:0; }
.compare li { position:relative; padding-left:28px; color:var(--fg-2); }
.compare li::before { content:'✓'; position:absolute; left:0; color:var(--fg); }
.compare .member { border-color:rgba(236,72,153,.35); }
.compare .member li { color:var(--fg); }
.pricing-note { margin-top:24px; text-align:center; font-size:14px; color:var(--fg-3); }
.pricing-note a { color:var(--fg-2); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:1000px) { .policy { grid-template-columns:1fr; gap:20px; } .policy h2 { position:static; } }
@media (max-width:900px) { .compare { grid-template-columns:1fr; } }
@media (max-width:760px) { .resources { grid-template-columns:1fr; } }