/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#0A0A18;color:#fff;
  font-family:"Hanken Grotesque",system-ui,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:#FF5FA8;text-decoration:none}
a:hover{color:#ff86c1}
::selection{background:#FF5FA8;color:#0A0A18}
img{display:block}
.display{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-0.035em}
.serif-italic{font-family:'Fraunces',serif;font-style:italic}
.nowrap{white-space:nowrap}

/* ---------- keyframes ---------- */
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-7vw,-5vh) scale(0.95)}100%{transform:translate(0,0) scale(1.1)}}
@keyframes drift3{0%{transform:translate(0,0)}50%{transform:translate(6vw,-8vh) scale(1.2)}100%{transform:translate(0,0)}}
@keyframes drift4{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-9vw,7vh) scale(1.1)}100%{transform:translate(0,0) scale(1)}}
@keyframes spark{0%{transform:translate(0,0) scale(1);opacity:.5}50%{transform:translate(10vw,-6vh) scale(1.3);opacity:.85}100%{transform:translate(0,0) scale(1);opacity:.5}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}
@keyframes floaty2{0%{transform:translateY(0)}50%{transform:translateY(-22px)}100%{transform:translateY(0)}}
@keyframes bob{0%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}100%{transform:translateY(0) rotate(-2deg)}}
@keyframes scrollcue{0%{transform:translateY(0);opacity:.9}50%{transform:translateY(8px);opacity:.4}100%{transform:translateY(0);opacity:.9}}
@keyframes phbloom{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}
@keyframes phfly{0%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(10px,-16px) rotate(8deg)}100%{transform:translate(0,0) rotate(-6deg)}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(120px)}
.b1{top:-14%;left:-8%;width:52vw;height:52vw;background:radial-gradient(circle,#5B7CFF 0%,rgba(91,124,255,0) 68%);opacity:.55;animation:drift1 26s ease-in-out infinite}
.b2{top:8%;right:-12%;width:56vw;height:56vw;background:radial-gradient(circle,#B14BFF 0%,rgba(177,75,255,0) 68%);opacity:.5;animation:drift2 32s ease-in-out infinite}
.b3{bottom:-10%;left:12%;width:48vw;height:48vw;background:radial-gradient(circle,#FF5FA8 0%,rgba(255,95,168,0) 68%);opacity:.45;animation:drift3 29s ease-in-out infinite}
.b4{top:40%;left:34%;width:42vw;height:42vw;background:radial-gradient(circle,#5B7CFF 0%,rgba(91,124,255,0) 70%);opacity:.32;animation:drift4 36s ease-in-out infinite}
.b5{top:24%;right:22%;width:20vw;height:20vw;background:radial-gradient(circle,#2ED9E0 0%,rgba(46,217,224,0) 70%);filter:blur(110px);opacity:.3;animation:spark 24s ease-in-out infinite}

.page{position:relative;z-index:2}

/* ---------- nav ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;
  padding:14px 28px;background:rgba(10,10,24,0.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);transition:background .3s ease,border-color .3s ease;
}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.brand-mark{width:40px;height:40px;border-radius:12px;object-fit:cover;box-shadow:0 0 22px rgba(177,75,255,0.55)}
.brand-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:23px;letter-spacing:-0.03em}
.nav-links{display:flex;gap:22px;margin-left:6px}
.nav-links a{color:#C8C8E6;font-size:15px;font-weight:500}
.nav-cta{margin-left:auto}
.btn-cream{
  display:inline-block;cursor:pointer;font-family:'Hanken Grotesque',sans-serif;font-weight:600;font-size:15px;
  color:#1A1236;padding:11px 20px;border-radius:999px;background:linear-gradient(#F7EFDD,#EFE3CB);
  box-shadow:0 4px 0 #D9CBAE,0 10px 22px rgba(0,0,0,0.4);transition:transform .12s ease,box-shadow .12s ease;
}
.btn-cream:hover{color:#1A1236}
.btn-cream:active{transform:translateY(3px);box-shadow:0 1px 0 #D9CBAE,0 5px 12px rgba(0,0,0,0.4)}
.nav-spacer{height:72px}

/* ---------- ticker ---------- */
.ticker-wrap{position:relative;overflow:hidden;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.03)}
.ticker{display:flex;width:max-content;animation:marquee 32s linear infinite;will-change:transform}
.ticker-item{display:inline-flex;align-items:center;gap:16px;padding:0 16px;font-size:16px;font-weight:600;color:#C8C8E6;white-space:nowrap}
.ticker-dot{font-size:14px;opacity:.9}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;padding:40px 24px 60px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-fly{position:absolute;top:5%;right:8%;z-index:4;animation:bob 9s ease-in-out infinite;will-change:transform}
.hero-fly-img{width:92px;height:92px;border-radius:24px;object-fit:cover;box-shadow:0 0 60px rgba(177,75,255,0.6)}

.hero-phone{position:absolute;will-change:transform}
.phone-back{left:5%;top:16%;z-index:1;animation:floaty 8s ease-in-out infinite}
.phone-back .phone-tilt{transform:rotate(-13deg) scale(0.56);transform-origin:top left;opacity:0.82;filter:blur(1.1px)}
.phone-left{left:8%;bottom:-6%;z-index:3;animation:floaty2 9s ease-in-out infinite}
.phone-left .phone-tilt{transform:rotate(-4deg) scale(0.78);transform-origin:bottom left}
.phone-right{right:7%;bottom:2%;z-index:3;animation:floaty 8.5s ease-in-out infinite}
.phone-right .phone-tilt{transform:rotate(8deg) scale(0.7);transform-origin:bottom right}

.hero-copy{position:relative;z-index:3;text-align:center;max-width:1100px}
.hero-title{line-height:0.86;margin:0;color:#fff;font-size:clamp(72px,16vw,240px);text-shadow:0 8px 60px rgba(10,10,24,0.7)}
.hero-title span{display:block}
.hero-sub{font-family:'Fraunces',serif;font-size:clamp(17px,2.1vw,25px);color:#C8C8E6;max-width:560px;margin:26px auto 0;line-height:1.4}
.hero-sub em{font-style:italic;color:#fff}
.badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.badges.center{justify-content:center}

.scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:#C8C8E6;font-size:13px;animation:scrollcue 2.2s ease-in-out infinite}

/* ---------- store badge ---------- */
.store-badge{
  display:inline-flex;align-items:center;gap:11px;padding:11px 18px;border-radius:14px;background:#000;
  border:1px solid rgba(255,255,255,0.22);box-shadow:0 10px 26px rgba(0,0,0,0.45);transition:transform .12s ease;
}
.store-badge:active{transform:translateY(2px)}
.store-badge .sb-text{display:flex;flex-direction:column;line-height:1.05}
.store-badge .sb-top{font-size:11px;color:#d8d8ea}
.store-badge .sb-bottom{font-size:19px;font-weight:700;color:#fff;letter-spacing:-0.01em}

/* ---------- how it works ---------- */
.how{position:relative;padding:70px 24px 90px;max-width:1180px;margin:0 auto}
.section-title{font-size:clamp(52px,10vw,150px);line-height:0.9;margin:0 0 34px;text-align:center;color:#fff}
.how-stage{position:relative;display:flex;align-items:center;gap:18px;justify-content:center}
.how-arrow{
  flex:none;cursor:pointer;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);backdrop-filter:blur(14px);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .12s ease;
}
.how-arrow:active{transform:scale(0.92)}
.how-viewport{flex:1;max-width:920px;overflow:hidden;border-radius:26px}
.how-track{display:flex;transition:transform .5s cubic-bezier(.6,.05,.2,1);will-change:transform}
.how-slide{flex:0 0 100%;box-sizing:border-box;padding:6px}
.how-card{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:center;
  background:linear-gradient(160deg,rgba(12,12,26,0.72),rgba(7,7,16,0.6));
  border:1px solid rgba(255,255,255,0.1);border-radius:26px;padding:34px;height:320px;
  box-shadow:0 34px 90px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.06);
}
.how-num{font-family:'Bricolage Grotesque',sans-serif;color:#FF5FA8;font-weight:800;font-size:20px;margin-bottom:12px}
.how-heading{font-size:clamp(30px,4vw,46px);line-height:0.95;margin:0 0 14px;color:#fff;letter-spacing:-0.03em}
.how-body{font-size:17px;line-height:1.5;color:#C8C8E6;margin:0;max-width:380px}
.how-art{display:flex;justify-content:center}
.how-dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.how-dots button{cursor:pointer;border:none;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,0.22);transition:all .3s ease;padding:0}
.how-dots button.active{width:30px;background:#FF5FA8}

/* ---------- feature sections ---------- */
.feature{position:relative;padding:90px 24px;max-width:1180px;margin:0 auto;min-height:80vh;display:flex;align-items:center}
.feature-right{justify-content:flex-end}
.chips{position:absolute;inset:0;pointer-events:none}
.chip{
  position:absolute;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(14px);border-radius:20px;padding:14px 18px;font-size:16px;font-weight:600;color:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);white-space:nowrap;will-change:transform;
}
.chip.chip-dim{padding:12px 16px;font-size:15px;color:#C8C8E6}
.chip.chip-pink{background:rgba(255,95,168,0.16);border-color:rgba(255,95,168,0.42);font-weight:700;box-shadow:0 20px 50px rgba(255,95,168,0.25)}
.chip[data-speed="0.16"]{animation:floaty 7s ease-in-out infinite}
.chip[data-speed="0.26"]{animation:floaty2 8s ease-in-out infinite}
.chip[data-speed="0.12"]{animation:floaty 9s ease-in-out infinite}
.chip[data-speed="0.2"]{animation:floaty2 7.5s ease-in-out infinite}
.chip[data-speed="0.3"]{animation:floaty 8.5s ease-in-out infinite}

.person-chip{
  position:absolute;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);backdrop-filter:blur(14px);border-radius:20px;padding:12px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);white-space:nowrap;will-change:transform;
}
.person-chip.person-on{background:rgba(255,95,168,0.14);border-color:rgba(255,95,168,0.4);box-shadow:0 20px 50px rgba(255,95,168,0.22)}
.person-chip[data-speed="0.18"]{animation:floaty 7.5s ease-in-out infinite}
.person-chip[data-speed="0.28"]{animation:floaty2 8s ease-in-out infinite}
.person-chip[data-speed="0.14"]{animation:floaty 9s ease-in-out infinite}
.person-chip[data-speed="0.22"]{animation:floaty2 8.5s ease-in-out infinite}
.ava{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.person-meta{display:flex;flex-direction:column}
.person-name{font-weight:600;color:#fff;font-size:16px}
.person-sub{font-size:13px;color:#C8C8E6}
.person-sub.on{color:#ffb9d8}
.person-heart{font-size:22px;margin-left:6px}

.feature-copy{position:relative;z-index:2;max-width:560px}
.feature-copy.align-right{max-width:520px;text-align:right}
.feature-title{font-size:clamp(56px,11vw,168px);line-height:0.85;margin:0;color:#fff}
.feature-title span{display:block}
.feature-body{font-size:19px;line-height:1.5;color:#C8C8E6;margin:24px 0 0;max-width:420px}
.feature-copy.align-right .feature-body{font-family:'Fraunces',serif;font-style:italic;font-size:20px;line-height:1.45;margin-left:auto;max-width:400px}

/* ---------- safe by design ---------- */
.safe{position:relative;padding:90px 24px;max-width:1200px;margin:0 auto}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.pillar{
  position:relative;background:linear-gradient(160deg,rgba(12,12,26,0.72),rgba(7,7,16,0.6));
  border:1px solid rgba(255,255,255,0.1);border-radius:26px;padding:34px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.06);
}
.pillar-glow{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,95,168,0.35),transparent 70%);filter:blur(20px)}
.pillar-icon{font-size:30px;position:relative;margin-bottom:14px}
.pillar-title{font-size:22px;margin:0 0 10px;color:#fff;position:relative;letter-spacing:-0.02em}
.pillar-body{font-size:15px;line-height:1.5;color:#C8C8E6;margin:0;position:relative}
.safe-link{text-align:center;margin-top:32px}
.safe-link a{font-size:16px;font-weight:600}

/* ---------- final cta ---------- */
.final{position:relative;padding:100px 24px 110px;text-align:center;overflow:hidden}
.fly-deco{position:absolute}
.fly-deco.f1{top:9%;left:12%;font-size:34px;animation:floaty 8s ease-in-out infinite;opacity:.8}
.fly-deco.f2{top:22%;right:14%;font-size:26px;animation:floaty2 7s ease-in-out infinite;opacity:.7}
.fly-deco.f3{bottom:18%;left:20%;font-size:22px;animation:bob 9s ease-in-out infinite;opacity:.6}
.fly-deco.f4{bottom:26%;right:22%;font-size:30px;animation:floaty 7.5s ease-in-out infinite;opacity:.75}
.final-mark-wrap{position:relative;display:inline-flex;margin-bottom:6px}
.final-mark{width:82px;height:82px;border-radius:22px;object-fit:cover;box-shadow:0 0 70px rgba(177,75,255,0.7);animation:bob 8s ease-in-out infinite}
.final-title{font-size:clamp(64px,14vw,220px);line-height:0.84;margin:14px 0 0;color:#fff}
.final-title span{display:block}
.final-sub{font-family:'Fraunces',serif;font-size:clamp(19px,2.4vw,28px);color:#fff;margin:26px auto 0;max-width:560px}

/* ---------- footer ---------- */
#footer{position:relative;padding:56px 28px 48px;border-top:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.03)}
.footer-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.footer-links a{color:#C8C8E6;font-size:15px}
.footer-tag{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:#C8C8E6}

/* ---------- phone mockup (built by main.js) ---------- */
.phone{position:relative;width:300px;height:650px;border-radius:48px;background:linear-gradient(155deg,#191922,#0B0B12);padding:11px;box-shadow:0 40px 90px rgba(0,0,0,0.6),0 0 70px rgba(120,90,220,0.4),inset 0 1px 2px rgba(255,255,255,0.14),inset 0 -2px 4px rgba(0,0,0,0.6)}
.phone .btn-l1{position:absolute;left:-3px;top:150px;width:3px;height:34px;border-radius:3px 0 0 3px;background:#25252f}
.phone .btn-l2{position:absolute;left:-3px;top:198px;width:3px;height:56px;border-radius:3px 0 0 3px;background:#25252f}
.phone .btn-l3{position:absolute;left:-3px;top:266px;width:3px;height:56px;border-radius:3px 0 0 3px;background:#25252f}
.phone .btn-r1{position:absolute;right:-3px;top:210px;width:3px;height:74px;border-radius:0 3px 3px 0;background:#25252f}
.phone-screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#0A0A18}
.phone-aura{position:absolute;border-radius:50%;filter:blur(34px)}
.phone-glass{position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,0.08),transparent 30%);pointer-events:none;z-index:6}
.phone-island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:96px;height:28px;background:#000;border-radius:999px;z-index:7;display:flex;align-items:center;justify-content:flex-end;padding-right:9px}
.phone-island span{width:8px;height:8px;border-radius:50%;background:#14141c;box-shadow:inset 0 0 3px rgba(90,120,255,0.5)}
.phone-status{position:absolute;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:16px 22px 0;z-index:6}
.phone-status .t{font-size:14px;font-weight:600;color:#fff}
.phone-status .r{display:flex;align-items:center;gap:5px}
.phone-content{position:absolute;top:50px;left:0;right:0;bottom:0;padding:6px 16px 18px;z-index:5;display:flex;flex-direction:column}
.phone-col{display:flex;flex-direction:column;height:100%}
.phone-topbar{display:flex;align-items:center;justify-content:space-between;padding:4px 0 12px}
.phone-tab-active{font-size:15px;font-weight:700;color:#fff}
.phone-tab{position:relative;font-size:15px;font-weight:500;color:#8f8fb8}
.phone-tab .badge-dot{position:absolute;top:-1px;right:-8px;width:6px;height:6px;border-radius:50%;background:#FF5FA8;box-shadow:0 0 6px #FF5FA8}
.phone-pill{align-self:center;background:rgba(255,95,168,0.16);border:1px solid rgba(255,95,168,0.42);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;color:#FF5FA8;margin-bottom:12px;box-shadow:0 0 20px rgba(255,95,168,0.25)}
.phone-card{flex:1;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:22px;padding:16px 15px;backdrop-filter:blur(14px);display:flex;flex-direction:column}
.phone-h{font-family:'Fraunces',serif;font-size:20px;font-weight:500;color:#fff;line-height:1.05}
.phone-p{font-size:12px;color:#C8C8E6;margin-top:6px;line-height:1.35}
.phone-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.13);border-radius:12px;padding:9px 12px;margin-top:12px}
.phone-search span{font-size:12px;color:#8f8fb8}
.phone-rows{display:flex;flex-direction:column;gap:9px;margin-top:13px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .how-card{grid-template-columns:1fr;height:auto;gap:18px;padding:26px}
  .how-body{max-width:none}
  .how-art{margin-top:4px}
}
@media (max-width:768px){
  #nav{gap:14px;padding:12px 18px}
  .hero{min-height:auto;padding:48px 22px 64px}
  .hero-phone{display:none}
  .hero-fly{top:2%;right:4%}
  .hero-fly-img{width:64px;height:64px}
  .scrollcue{display:none}
  .feature{min-height:auto;padding:64px 22px}
  .feature-right{justify-content:flex-start}
  .chips{display:none}
  .feature-copy,.feature-copy.align-right{max-width:none;text-align:left}
  .feature-copy.align-right .feature-body{margin-left:0}
  .how{padding:48px 20px 60px}
  .safe{padding:64px 20px}
  .final{padding:72px 22px 84px}
  .how-arrow{width:44px;height:44px}
}
@media (max-width:420px){
  .badges{gap:10px}
  .store-badge{padding:10px 14px}
  .store-badge .sb-bottom{font-size:17px}
}