:root {
  --pink: #ff2f86;
  --pink-2: #ff4c9d;
  --purple: #7b35ff;
  --purple-2: #5b2bff;
  --plum: #2c0756;
  --ink: #1c1038;
  --muted: #716b86;
  --line: #ebe5f5;
  --surface: #ffffff;
  --soft: #faf7ff;
  --lavender: #f1e9ff;
  --green: #19d77d;
  --shadow: 0 30px 80px rgba(54, 19, 105, .14);
  --shadow-soft: 0 18px 50px rgba(63, 33, 118, .10);
  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --grad: linear-gradient(110deg, var(--pink) 0%, #d43be8 46%, var(--purple-2) 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,47,134,.12), rgba(123,53,255,.09));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section-space { padding: 120px 0; }
.page-glow { position: fixed; inset: auto; pointer-events: none; z-index: -2; border-radius: 50%; filter: blur(4px); opacity: .55; }
.page-glow--one { width: 600px; height: 600px; top: -220px; right: -240px; background: radial-gradient(circle, rgba(255,47,134,.20), rgba(123,53,255,.04) 65%, transparent 70%); }
.page-glow--two { width: 620px; height: 620px; bottom: 10%; left: -350px; background: radial-gradient(circle, rgba(123,53,255,.13), transparent 70%); }
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(20px); background: rgba(255,255,255,.82); border-bottom: 1px solid rgba(235,229,245,.7); }
.nav-wrap { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand img { width: 132px; height: 48px; object-fit: contain; }
.primary-nav { display: flex; align-items: center; gap: 30px; font-weight: 650; font-size: 14px; color: #50475e; }
.primary-nav a { transition: .2s ease; }
.primary-nav a:hover { color: var(--pink); }
.nav-cta { background: var(--grad); color: white !important; padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 28px rgba(123,53,255,.22); }
.menu-button { display: none; border: 0; background: transparent; padding: 8px; }
.menu-button span { display: block; width: 24px; height: 2px; background: var(--plum); margin: 5px 0; border-radius: 2px; }
.hero { padding-top: 72px; }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 64px; min-height: 720px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 999px; background: #fff5fb; color: #7a3266; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 6px rgba(255,47,134,.10); }
.eyebrow--center { margin: 0 auto; }
.hero h1, .section-heading h2, .connect-copy h2, .safety-card--hero h2, .faq-intro h2, .download-copy h2 { margin: 22px 0 20px; color: var(--plum); letter-spacing: -.055em; line-height: .98; }
.hero h1 { font-size: clamp(62px, 7vw, 104px); max-width: 700px; }
.hero h1 span, .section-heading h2 span, .connect-copy h2 span, .safety-card--hero h2 span, .faq-intro h2 span, .download-copy h2 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: 19px; line-height: 1.7; color: var(--muted); max-width: 610px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { min-height: 60px; border-radius: 18px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: #fff; background: var(--grad); box-shadow: 0 18px 36px rgba(180, 48, 204, .24); }
.button--primary small { display: block; font-size: 10px; opacity: .78; font-weight: 700; letter-spacing: .04em; line-height: 1.1; }
.play-icon { font-size: 18px; }
.button--secondary { color: var(--plum); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-soft); }
.button--disabled { cursor: default; opacity: .95; }
.hero-proof { margin-top: 36px; display: flex; align-items: center; gap: 14px; }
.hero-proof div:last-child { display: grid; gap: 2px; }
.hero-proof span { color: var(--muted); font-size: 13px; }
.avatar-stack { display: flex; padding-left: 10px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 3px solid white; margin-left: -10px; background-size: cover; background-position: center; box-shadow: 0 5px 15px rgba(37,10,73,.12); }
.avatar--1 { background-image: linear-gradient(#ffb0d4,#ff6bb0); }.avatar--2{ background-image: linear-gradient(#c3b2ff,#7b35ff); }.avatar--3{ background-image: linear-gradient(#ffe2a4,#ffb756); }.avatar--4{ background-image: linear-gradient(#b9f4dc,#2bc982); }
.hero-visual { position: relative; min-height: 660px; }
.hero-orbit { position: absolute; border-radius: 50%; }
.orbit-one { width: 450px; height: 450px; background: radial-gradient(circle at 30% 30%, #fff 0 10%, #ffe1ef 35%, #eee3ff 70%, #fff 100%); top: 90px; left: 70px; }
.orbit-two { width: 230px; height: 230px; border: 1px solid #f0d9ff; right: 0; bottom: 70px; }
.phone-card { position: absolute; overflow: hidden; border-radius: 38px; box-shadow: 0 30px 80px rgba(48,20,92,.19); border: 6px solid white; background: white; }
.phone-card img { width: 100%; height: 100%; object-fit: cover; }
.phone-card--main { width: 330px; height: 586px; left: 145px; top: 34px; transform: rotate(2deg); z-index: 3; }
.phone-card--left { width: 210px; height: 374px; left: 0; bottom: 30px; transform: rotate(-10deg); z-index: 2; }
.phone-card--right { width: 195px; height: 347px; right: 0; top: 205px; transform: rotate(10deg); z-index: 4; }
.floating-pill { position: absolute; z-index: 6; border-radius: 999px; padding: 12px 16px; font-weight: 800; font-size: 13px; box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); }
.floating-pill--live { left: 48px; top: 110px; color: white; background: var(--grad); transform: rotate(-7deg); }
.floating-pill--chat { right: 4px; bottom: 78px; background: rgba(255,255,255,.93); color: var(--plum); }
.value-strip { padding: 24px 0; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-soft); overflow: hidden; }
.value-grid > div { padding: 26px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; border-right: 1px solid var(--line); }
.value-grid > div:last-child { border-right: 0; }
.value-grid > div > span { grid-row: span 2; color: var(--pink); font-size: 22px; }
.value-grid strong { font-size: 14px; }
.value-grid small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.section-heading { max-width: 760px; }
.section-heading.centered { text-align: center; margin: 0 auto 72px; }
.section-heading h2, .connect-copy h2, .safety-card--hero h2, .faq-intro h2, .download-copy h2 { font-size: clamp(44px, 5vw, 72px); }
.section-heading p, .connect-copy p, .safety-card--hero p, .faq-intro p, .download-copy p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.feature-section { background: linear-gradient(180deg, #fff 0%, #fff8fc 50%, #fff 100%); }
.feature-showcase { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; min-height: 680px; margin: 30px 0 110px; }
.feature-showcase--reverse .feature-media { order: 2; }.feature-showcase--reverse .feature-copy { order: 1; }
.feature-media { position: relative; min-height: 620px; }
.device-shell { position: absolute; overflow: hidden; background: #fff; border: 6px solid white; box-shadow: var(--shadow); border-radius: 38px; }
.device-shell img { width: 100%; height: 100%; object-fit: cover; }
.device-shell--large { width: 330px; height: 586px; left: 90px; top: 12px; transform: rotate(-3deg); }
.device-shell--profile { transform: rotate(2deg); left: 100px; }
.device-shell--small { width: 260px; height: 462px; }
.device-shell--front { left: 45px; top: 78px; z-index: 3; transform: rotate(-5deg); }
.device-shell--back { right: 30px; top: 18px; transform: rotate(7deg); }
.dual-device { position: relative; min-height: 560px; }
.mini-card { position: absolute; z-index: 6; background: rgba(255,255,255,.93); border: 1px solid rgba(235,229,245,.9); box-shadow: var(--shadow-soft); padding: 14px 18px; border-radius: 16px; color: var(--plum); font-size: 13px; }
.mini-card strong { margin-left: 8px; }
.mini-card--top { right: 20px; top: 120px; }.mini-card--bottom { left: 16px; bottom: 46px; }.mini-card--message { right: 12px; bottom: 90px; color: var(--pink); }
.feature-copy { max-width: 500px; }
.feature-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--grad); color: white; font-size: 25px; box-shadow: 0 15px 30px rgba(167,58,207,.20); }
.kicker { display: inline-block; margin-top: 20px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; color: #8e4d82; }
.feature-copy h3 { font-size: clamp(38px, 4vw, 58px); line-height: 1.02; letter-spacing: -.045em; color: var(--plum); margin: 14px 0 18px; }
.feature-copy > p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.check-list { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.check-list li { position: relative; padding-left: 32px; font-weight: 650; color: #4e445c; }
.check-list li::before { content: "✓"; position: absolute; left: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--grad); font-size: 12px; }
.feature-stat-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.feature-stat-grid div { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: white; }
.feature-stat-grid strong { display: block; color: var(--plum); margin-bottom: 4px; }
.feature-stat-grid span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-pills { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.profile-pills span, .connect-badges span { padding: 10px 14px; border-radius: 999px; background: #f8f4ff; border: 1px solid #eee5ff; color: #5d3d78; font-weight: 700; font-size: 13px; }
.connect-section { position: relative; overflow: hidden; background: var(--plum); color: white; }
.connect-section::before { content:""; position:absolute; inset:-100px -20%; background: radial-gradient(circle at 25% 40%, rgba(255,47,134,.35), transparent 35%), radial-gradient(circle at 75% 65%, rgba(123,53,255,.42), transparent 38%); opacity:.8; }
.connect-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.connect-copy .eyebrow { background: rgba(255,255,255,.10); color: white; }
.connect-copy h2 { color: white; }.connect-copy p { color: rgba(255,255,255,.72); }
.connect-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }.connect-badges span { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.12); color: white; }
.connect-visual { min-height: 600px; position: relative; }
.connect-screen { position: absolute; overflow: hidden; border-radius: 34px; border: 5px solid rgba(255,255,255,.9); box-shadow: 0 35px 90px rgba(0,0,0,.28); }
.connect-screen img { width:100%;height:100%;object-fit:cover; }
.connect-screen--one { width: 290px; height: 516px; left: 60px; top: 40px; transform: rotate(-6deg); }
.connect-screen--two { width: 260px; height: 462px; right: 10px; top: 110px; transform: rotate(7deg); }
.call-bubble { position: absolute; right: 40px; top: 70px; z-index: 5; background: var(--grad); padding: 14px 20px; border-radius: 20px; box-shadow: 0 18px 45px rgba(255,47,134,.26); font-size: 13px; }
.call-bubble strong { font-size: 22px; display:block; margin-top:3px; }
.safety-section { background: #fff; }
.safety-grid { display:grid; grid-template-columns: 1.45fr repeat(3, .85fr); gap: 18px; align-items: stretch; }
.safety-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 30px; box-shadow: var(--shadow-soft); }
.safety-card--hero { background: var(--grad-soft); padding: 40px; }
.safety-card--hero h2 { font-size: clamp(38px,4vw,58px); }
.safety-card h3 { margin: 18px 0 10px; font-size: 20px; color: var(--plum); }
.safety-card p { color: var(--muted); line-height:1.6; font-size:14px; }
.safety-icon { width: 48px; height:48px; display:grid;place-items:center; border-radius:16px; background:#fff3fa; color:var(--pink); font-weight:900; }
.text-link { display:inline-flex; gap:8px; margin-top:16px; color:var(--purple); font-weight:800; }
.gallery-section { overflow: hidden; background: linear-gradient(180deg,#fff,#fff7fb); }
.gallery-track { margin-top: 50px; display:flex; gap:22px; width:max-content; padding:0 6vw 34px; animation: drift 34s linear infinite; }
.gallery-section:hover .gallery-track { animation-play-state: paused; }
.gallery-card { width: 260px; margin:0; flex:0 0 auto; background:white; border:1px solid var(--line); border-radius:30px; padding:10px; box-shadow:var(--shadow-soft); }
.gallery-card img { width:100%; height:460px; object-fit:cover; border-radius:22px; }
.gallery-card figcaption { padding:14px 10px 8px; font-weight:800; color:var(--plum); }
@keyframes drift { from{ transform:translateX(0); } to{ transform:translateX(-520px);} }
.faq-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:start; }
.faq-list { display:grid; gap:12px; }
.faq-list details { border:1px solid var(--line); border-radius:20px; padding:0 22px; background:white; box-shadow:0 10px 30px rgba(41,19,84,.05); }
.faq-list summary { cursor:pointer; list-style:none; font-weight:800; color:var(--plum); padding:22px 34px 22px 0; position:relative; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:0; top:18px; width:28px; height:28px; display:grid;place-items:center; border-radius:50%; background:#f7f3ff; color:var(--purple); }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { margin:0 0 22px; color:var(--muted); line-height:1.7; }
.download-section { padding: 30px 0 110px; }
.download-card { position:relative; overflow:hidden; min-height:560px; display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:40px; background:linear-gradient(135deg,#fff4fa 0%,#f4efff 55%,#fff 100%); border:1px solid #eadff6; border-radius:44px; padding:56px 64px; box-shadow:var(--shadow); }
.download-card::before { content:""; position:absolute; width:420px;height:420px;border-radius:50%;right:-140px;top:-170px;background:radial-gradient(circle,rgba(255,47,134,.22),transparent 70%); }
.download-logo { width:160px; margin-bottom:20px; }
.download-visual { min-height:480px; position:relative; }
.download-phone { width:280px;height:498px;position:absolute;right:90px;top:-10px;overflow:hidden;border-radius:34px;border:5px solid white;box-shadow:var(--shadow);transform:rotate(5deg); }
.download-phone img { width:100%;height:100%;object-fit:cover; }
.download-spark { position:absolute; color:var(--pink); font-size:46px; }.download-spark--one{right:30px;top:70px}.download-spark--two{left:60px;bottom:80px}
.site-footer { border-top:1px solid var(--line); padding:36px 0; background:#fff; }
.footer-grid { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:30px; }
.footer-brand img { width:110px; }.footer-brand p{margin:2px 0 0;color:var(--muted);font-size:12px}.footer-links{display:flex;gap:20px;font-size:13px;font-weight:700;color:#5c536a}.footer-note{font-size:12px;color:var(--muted)}
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.gallery-track{animation:none}.button{transition:none}}
@media (max-width: 1020px){
  .section-space{padding:90px 0}.hero-grid,.feature-showcase,.connect-grid,.faq-grid{grid-template-columns:1fr;gap:40px}.hero-grid{min-height:auto}.hero-copy{text-align:center}.hero-lead{margin-inline:auto}.hero-actions,.hero-proof{justify-content:center}.hero-visual{min-height:680px;max-width:620px;width:100%;margin:0 auto}.feature-showcase{margin-bottom:70px}.feature-showcase--reverse .feature-media,.feature-showcase--reverse .feature-copy{order:initial}.feature-copy{max-width:680px;margin:0 auto;text-align:center}.check-list{text-align:left;max-width:520px;margin-inline:auto}.feature-media{max-width:650px;width:100%;margin:0 auto}.safety-grid{grid-template-columns:repeat(2,1fr)}.safety-card--hero{grid-column:1/-1}.download-card{grid-template-columns:1fr; text-align:center}.download-copy .hero-actions{justify-content:center}.download-logo{margin-inline:auto}.download-visual{min-height:440px}.download-phone{right:50%;transform:translateX(50%) rotate(4deg)}
}
@media (max-width: 760px){
  .container{width:min(100% - 28px,1180px)}.section-space{padding:72px 0}.nav-wrap{height:70px}.brand img{width:110px}.menu-button{display:block}.primary-nav{position:absolute;left:14px;right:14px;top:76px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:12px;background:white;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft)}.primary-nav.is-open{display:flex}.primary-nav a{padding:12px 14px}.nav-cta{text-align:center;margin-top:6px}.hero{padding-top:40px}.hero h1{font-size:56px}.hero-visual{min-height:550px}.phone-card--main{width:250px;height:444px;left:50%;transform:translateX(-50%) rotate(2deg)}.phone-card--left{width:155px;height:276px;left:0;bottom:22px}.phone-card--right{width:145px;height:258px;right:0;top:200px}.floating-pill--live{left:0;top:115px}.floating-pill--chat{right:0;bottom:30px}.value-grid{grid-template-columns:1fr 1fr}.value-grid>div:nth-child(2){border-right:0}.value-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.section-heading h2,.connect-copy h2,.safety-card--hero h2,.faq-intro h2,.download-copy h2{font-size:44px}.feature-showcase{min-height:auto}.feature-media{min-height:520px}.device-shell--large{width:270px;height:480px;left:50%;transform:translateX(-50%) rotate(-3deg)}.device-shell--profile{transform:translateX(-50%) rotate(2deg)}.device-shell--small{width:210px;height:374px}.device-shell--front{left:0}.device-shell--back{right:0}.mini-card--top{right:0}.feature-copy h3{font-size:40px}.feature-stat-grid{grid-template-columns:1fr 1fr}.connect-visual{min-height:520px}.connect-screen--one{width:220px;height:392px;left:10px}.connect-screen--two{width:200px;height:356px;right:0}.safety-grid{grid-template-columns:1fr}.safety-card--hero{grid-column:auto}.gallery-card{width:215px}.gallery-card img{height:380px}.download-card{padding:36px 22px;border-radius:32px}.download-phone{width:235px;height:418px}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-brand img{margin-inline:auto}.footer-links{justify-content:center;flex-wrap:wrap}.hero-actions{flex-direction:column;align-items:stretch}.button{width:100%}
}
@media (max-width: 520px){
  .hero h1{font-size:48px}.hero-lead{font-size:16px}.hero-visual{min-height:500px}.phone-card--main{width:230px;height:409px}.phone-card--left{width:135px;height:240px}.phone-card--right{width:128px;height:228px;top:190px}.value-grid{grid-template-columns:1fr}.value-grid>div{border-right:0;border-bottom:1px solid var(--line)!important}.value-grid>div:last-child{border-bottom:0!important}.feature-stat-grid{grid-template-columns:1fr}.feature-media{min-height:470px}.device-shell--large{width:240px;height:427px}.device-shell--small{width:175px;height:312px}.dual-device{min-height:450px}.connect-screen--one{width:190px;height:338px}.connect-screen--two{width:165px;height:294px}.download-visual{min-height:390px}.download-phone{width:210px;height:373px}.download-spark--two{left:10px}.section-heading h2,.connect-copy h2,.safety-card--hero h2,.faq-intro h2,.download-copy h2{font-size:38px}
}
:focus-visible { outline: 3px solid rgba(255,47,134,.35); outline-offset: 3px; border-radius: 8px; }