@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

:root { --ink:#211d27; --muted:#6f6877; --pink:#ff2f72; --rose:#ffeff5; --lav:#f1efff; --line:rgba(32,28,39,.1); --paper:#fffdfd; --card:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1160px,calc(100% - 48px)); margin:0 auto; }
.nav { height:78px; display:flex; align-items:center; justify-content:space-between; gap:28px; position:relative; z-index:4; }
.brand { display:flex; align-items:center; gap:10px; font-family:Outfit,sans-serif; font-weight:800; font-size:1.35rem; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; color:#fff; background:var(--pink); border-radius:13px; box-shadow:0 10px 24px rgba(255,47,114,.25); font-size:1.2rem; }
.nav-links { display:flex; align-items:center; gap:26px; color:#4f4956; font-weight:600; font-size:.92rem; }
.nav-links a:hover { color:var(--pink); }
.language { appearance:none; border:1px solid var(--line); background:#fff; color:#302b35; padding:9px 28px 9px 12px; border-radius:99px; font:600 .84rem 'DM Sans'; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,#6b6571 50%),linear-gradient(135deg,#6b6571 50%,transparent 50%); background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
.hero { min-height:680px; overflow:hidden; position:relative; padding:76px 0 34px; background:radial-gradient(circle at 77% 27%,#ffe0ed 0,rgba(255,224,237,.55) 21%,transparent 45%),radial-gradient(circle at 20% 90%,#e4e0ff 0,transparent 29%),linear-gradient(118deg,#fff8fb 0%,#fffafd 53%,#f8f6ff 100%); }
.hero:after { content:''; position:absolute; width:520px; height:520px; border:1px solid rgba(255,47,114,.11); border-radius:50%; left:52%; bottom:-260px; }
.hero-grid { display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:42px; position:relative; z-index:1; }
.eyebrow { color:#c7245b; font-size:.85rem; font-weight:700; letter-spacing:.02em; display:flex; align-items:center; gap:7px; margin-bottom:16px; }
h1,h2,h3 { font-family:Outfit,sans-serif; letter-spacing:-.055em; line-height:.99; margin:0; }
h1 { font-size:clamp(3.5rem,6vw,5.9rem); max-width:620px; }
.hero-copy { font-size:1.15rem; max-width:560px; color:#625b69; margin:25px 0 30px; line-height:1.58; }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:10px; min-height:52px; padding:0 21px; border-radius:15px; font-weight:700; font-size:.96rem; transition:.2s transform,.2s box-shadow; }
.button:hover { transform:translateY(-2px); }
.button.primary { color:#fff; background:var(--pink); box-shadow:0 13px 26px rgba(255,47,114,.25); }
.button.secondary { border:1px solid var(--line); background:rgba(255,255,255,.65); }
.available { color:#817a87; font-size:.85rem; margin:15px 0 0; }
.phone-stage { height:545px; position:relative; display:grid; place-items:center; }
.orb { width:435px; height:435px; position:absolute; border-radius:50%; background:linear-gradient(145deg,#ffc0d9,#fde7f0 60%,#ddd5ff); filter:blur(.1px); }
.phone { position:relative; height:535px; border-radius:48px; transform:rotate(4deg); filter:drop-shadow(0 34px 30px rgba(61,32,49,.23)); }
.float-card { position:absolute; border:1px solid rgba(255,255,255,.7); backdrop-filter:blur(14px); background:rgba(255,255,255,.72); border-radius:17px; padding:13px 15px; box-shadow:0 14px 32px rgba(76,42,61,.12); font-weight:700; font-size:.82rem; }
.float-card.ranking { left:0; top:118px; color:#332d39; }.float-card.ranking b { color:#ff2f72; display:block; font-size:1.18rem; }.float-card.votes { right:0; bottom:74px; color:#332d39; }.float-card.votes span{ display:block; color:#867e8e; font-weight:500; font-size:.72rem; }
.marquee { background:#28222e; color:#fff; overflow:hidden; white-space:nowrap; padding:14px 0; font:600 .87rem Outfit,sans-serif; letter-spacing:.04em; }
.marquee span { display:inline-block; animation:slide 28s linear infinite; }.marquee i{ color:#ff5a91; font-style:normal; padding:0 22px; } @keyframes slide { to{transform:translateX(-50%)} }
.section { padding:112px 0; }.section.intro { padding-bottom:58px; }.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; }.section h2 { font-size:clamp(2.55rem,4vw,4.5rem); max-width:620px; }.section-copy { max-width:410px; color:var(--muted); font-size:1.04rem; margin:0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:54px; }.feature { min-height:248px; padding:26px; border-radius:24px; background:#fff; border:1px solid var(--line); transition:.25s transform,.25s box-shadow; }.feature:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(44,26,47,.09)}.feature:nth-child(2){background:var(--rose)}.feature:nth-child(5){background:var(--lav)}.feature-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#fff;color:#ff2f72;box-shadow:0 6px 13px rgba(31,22,37,.07);font-size:1.35rem}.feature h3{font-size:1.45rem;margin:49px 0 8px}.feature p{margin:0;color:var(--muted);font-size:.94rem}
.screen-section { background:#2a2431; color:#fff; overflow:hidden; padding:104px 0 90px; }.screen-section .eyebrow { color:#ff8ab1; }.screen-section h2 { max-width:720px; }.screen-section .section-copy { color:#c9c3ce; margin-top:17px; }.screens { display:flex; justify-content:center; align-items:center; gap:22px; margin-top:58px; height:506px; }.screen { height:425px; border-radius:38px; filter:drop-shadow(0 22px 24px rgba(0,0,0,.34)); transition:.25s transform; }.screen:first-child,.screen:last-child{ opacity:.72; transform:translateY(44px) rotate(-5deg); }.screen:last-child{ transform:translateY(44px) rotate(5deg); }.screen:hover{transform:translateY(0) scale(1.03);opacity:1;z-index:2}
.safety { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }.safety-card { padding:32px; background:#fff1f6; border-radius:30px; position:relative; min-height:365px; overflow:hidden; }.shield { background:#ff2f72; width:128px; height:128px; border-radius:42px 42px 58px 58px; display:grid; place-items:center; color:#fff; font-size:4rem; margin:28px auto; box-shadow:0 22px 38px rgba(255,47,114,.28); }.safety-card:after { content:''; width:220px; height:220px; position:absolute; border:1px solid #ffd1e0; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }.safety-list { list-style:none; padding:0; margin:27px 0 0; display:grid; gap:14px; }.safety-list li { display:flex; align-items:flex-start; gap:12px; }.check{display:grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:#ffe4ee;color:#ff2f72;font-weight:800;font-size:.8rem}.safety-list b{display:block;font-size:1rem}.safety-list span{display:block;color:var(--muted);font-size:.92rem;margin-top:2px}
.download { padding:78px 0; background:linear-gradient(115deg,#ff2f72,#ff5a91 48%,#9066ff); color:#fff; text-align:center; }.download h2{font-size:clamp(2.8rem,5vw,5.1rem);max-width:780px;margin:0 auto}.download p{max-width:540px;margin:20px auto 28px;font-size:1.05rem;color:#fff0f6}.download-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}.store-button{display:inline-flex;align-items:center;gap:12px;text-align:left;padding:9px 18px 9px 13px;border-radius:14px;background:#17141b;color:#fff;box-shadow:0 12px 20px rgba(41,16,30,.2);transition:.2s transform,.2s box-shadow}.store-button:hover,.qr-download:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(41,16,30,.26)}.apple{font-size:2rem}.store-button small{display:block;font-size:.64rem;line-height:1}.store-button strong{font-size:1.22rem;line-height:1.1;font-weight:500}.qr-download{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;text-align:left;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(255,255,255,.14);box-shadow:0 12px 20px rgba(41,16,30,.12);transition:.2s transform,.2s box-shadow}.qr-download img{width:58px;height:58px;border-radius:7px;background:#fff}.qr-download b{display:block;font-size:.89rem}.qr-download small{display:block;max-width:130px;margin-top:2px;color:#fff0f6;font-size:.7rem;line-height:1.25}.store-note{margin-top:14px;font-size:.8rem;color:#ffe4ee}
footer { padding:34px 0; background:#211d27; color:#d0cbd4; }.footer { display:flex; justify-content:space-between; gap:25px; align-items:center; font-size:.86rem; }.footer .brand{color:#fff;font-size:1.05rem}.footer .brand-mark{width:30px;height:30px;border-radius:10px;font-size:.9rem}.footer-nav{display:flex;gap:20px}.footer-nav a:hover{color:#fff}
.legal{padding:80px 0 120px;max-width:800px}.legal h1{font-size:clamp(3rem,5vw,4.7rem);margin:32px 0}.legal h2{font-size:1.65rem;margin:34px 0 9px}.legal p,.legal li{color:#655e6b}.legal ul{padding-left:22px}.legal a{color:#d4205e;text-decoration:underline}.legal .date{color:#8b8390}
@media(max-width:800px){.wrap{width:min(100% - 34px,640px)}.nav{height:70px}.nav-links{display:none}.hero{padding:42px 0 0;min-height:unset}.hero-grid,.safety{grid-template-columns:1fr;gap:32px}.hero-copy{font-size:1.03rem}.phone-stage{height:480px}.phone{height:475px}.orb{width:350px;height:350px}.float-card.ranking{left:-5px;top:85px}.float-card.votes{right:-5px;bottom:38px}.section{padding:76px 0}.section-head{display:block}.section-copy{margin-top:18px}.feature-grid{grid-template-columns:1fr 1fr;margin-top:34px}.feature{min-height:210px;padding:20px}.feature h3{margin-top:35px}.screens{height:410px;gap:8px;margin-top:28px}.screen{height:350px}.screen:first-child,.screen:last-child{display:none}.screen-section{padding:76px 0}.safety-card{min-height:270px}.shield{width:100px;height:100px;font-size:3rem;margin:20px auto}.footer{align-items:flex-start;flex-direction:column}.footer-nav{flex-wrap:wrap}.section h2{line-height:1.04}}
@media(max-width:420px){h1{font-size:3.35rem}.feature-grid{grid-template-columns:1fr}.phone-stage{height:430px}.phone{height:430px}.orb{width:310px;height:310px}.float-card{font-size:.72rem}.actions .button{width:100%}.screens{height:375px}.screen{height:330px}.download-actions{align-items:stretch;flex-direction:column}.store-button,.qr-download{justify-content:center}.qr-download small{max-width:none}}
.feature:nth-child(3) .feature-icon{background:#17141b;border-radius:50%;box-shadow:0 6px 13px rgba(31,22,37,.14);overflow:hidden}
.feature-icon img{display:block;width:100%;height:100%;object-fit:cover}
.phone,.screen{width:auto;max-width:100%;object-fit:contain}
.float-card.ranking{max-width:220px}
.float-card.votes .float-heart{font-size:1.35rem;color:var(--pink)}
.float-card.votes span{font-size:.875rem;color:#625b69}
.language,.eyebrow,.nav-links,.available,.store-note{font-size:.875rem}
.float-card{font-size:.875rem}
.float-card{z-index:2}
.qr-download small{font-size:.875rem;max-width:180px}
.qr-download b{font-size:1rem}
.qr-download img{width:116px;height:116px}
.store-button small{font-size:.875rem}
a:focus-visible,select:focus-visible{outline:3px solid #6c36cc;outline-offset:5px}
@media(max-width:800px){.float-card.ranking{left:0;max-width:170px;top:65px}.float-card.ranking b{font-size:1rem}.float-card.votes{right:0;bottom:32px;max-width:170px}.qr-download{display:none}.hero h1{font-size:clamp(2.7rem,11.5vw,3.8rem);line-height:1.02}.hero-copy{margin:20px 0 24px}.hero .actions .button{width:100%}.hero .phone-stage{margin-top:16px}.hero{padding-top:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee span{animation:none}.button,.feature,.screen,.store-button,.qr-download{transition:none}}
@media(max-width:800px){.hero .float-card{display:none}}