/* ===================== FONTS ===================== */
@font-face{font-family:'Vchoney';src:url('HoneyTrial-RegularDeck.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vchoney';src:url('HoneyTrial-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Vchoney Banner';src:url('HoneyTrial-SemiBoldBanner.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Vchoney Banner';src:url('HoneyTrial-BoldBanner.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Inter from Google CDN-style local fallback (system Inter via Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===================== RESET ===================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',Arial,sans-serif;color:#0a0a0a;background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ===================== LAYOUT ===================== */
.page-wrap.is-gradient{background:linear-gradient(rgba(146,195,250,0.20),#ffffff 38%,#ffffff);overflow:clip}
.main-wrap{position:relative}
.padding-global{width:100%;max-width:1280px;margin:0 auto;padding:0 5vw}

/* ===================== HERO ===================== */
.section_hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:90px 0 90px}
.section_hero .padding-global{position:relative;z-index:2}
.hero_content{display:flex;flex-direction:column;align-items:center;text-align:center}

/* Logo wordmark (sticker style) */
.hero_logo{margin-bottom:24px}
.hero_logo-img{width:210px;height:auto;filter:drop-shadow(0 6px 14px rgba(120,150,200,.20))}

/* Release badge (asset) */
.release-badge{display:block;width:205px;height:auto;margin-bottom:28px;filter:drop-shadow(0 6px 16px rgba(138,63,180,.25))}

/* H1 */
.heading{font-family:'Vchoney',serif;font-weight:400;font-size:72px;line-height:1.1;letter-spacing:-0.48px;color:#000;margin-bottom:18px}
.hero_subtext{font-family:'Inter',sans-serif;font-weight:400;font-size:22px;line-height:1.45;color:#6b7480;max-width:460px;margin-bottom:40px}

/* Hero card – single linked image (QR + download) */
.hero_card-link{display:block;width:290px;max-width:80vw;transition:transform .25s ease}
.hero_card-link:hover{transform:translateY(-4px)}
.hero_card-img{width:100%;height:auto;margin-top:-20px;filter:drop-shadow(0 24px 55px rgba(120,150,200,.30))}
/* Compact Apple-style pill shown instead of the QR card on mobile, matching the production site */
.hero_download-btn{display:none;align-items:center;justify-content:center;gap:8px;width:fit-content;margin:0 auto;padding:16px 32px;background:#fff;border-radius:36px;box-shadow:0 4px 8px rgba(0,0,0,.2);font-family:'Inter',sans-serif;font-weight:700;font-size:16px;letter-spacing:-0.48px;color:#000}
.hero_download-icon{flex-shrink:0}

/* Floating cloud stickers (white cloud + sparkle, one shared shadow) */
.sticker{position:absolute;z-index:3;pointer-events:none;opacity:0}
.cloud-group{position:relative;width:100%;filter:drop-shadow(0 8px 16px rgba(120,150,200,.28));pointer-events:auto;transition:filter .35s ease}
.cloud-shape{width:100%;height:auto;display:block}
.cloud-spark{position:absolute;top:50%;left:50%;width:55.5%;height:auto;transform:translate(-50%,-50%)}
.cloud-video{position:absolute;top:50%;left:50%;width:55.5%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .35s ease;-webkit-mask-image:url(cloud-spark.png);mask-image:url(cloud-spark.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.cloud-group:hover{filter:drop-shadow(0 14px 30px rgba(120,150,200,.5))}
.cloud-group:hover .cloud-video{opacity:1}
.sticker--cloud-1{top:33%;left:2%;width:175px}
.sticker--cloud-2{top:13%;right:2%;width:232px}
.sticker--cloud-3{top:64%;left:11%;width:120px}
.sticker--cloud-4{top:72%;right:7%;width:138px}
/* angle each cloud outward (left clouds lean left, right clouds lean right) */
.sticker--cloud-1 .cloud-group{transform:rotate(-8deg)}
.sticker--cloud-2 .cloud-group{transform:rotate(8deg)}
.sticker--cloud-3 .cloud-group{transform:rotate(-12deg)}
.sticker--cloud-4 .cloud-group{transform:rotate(11deg)}

/* ===================== MARQUEE ===================== */
.header_marqee{position:relative;z-index:3;padding:10px 0;background:transparent}
.header_marquee-row{display:flex;overflow:hidden;white-space:nowrap;width:100%}
.header_marquee-row.is-bottom{margin-top:4px}
.marquee_track{display:flex;flex-shrink:0;will-change:transform;animation:marquee-scroll 30s linear infinite}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.header_marquee-row[data-marquee="right"] .marquee_track{animation-direction:reverse}
.marquee_track span{font-family:'Vchoney',serif;font-weight:400;font-size:22px;color:#2b88f3;padding:0 18px;line-height:1}

/* ===================== MOCKUP SECTIONS ===================== */
.section_mockup{padding:90px 0}
.section_mockup.is-blue{background:linear-gradient(180deg,#dbe7fb,#cfe0fa)}
.mockup_content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px;margin:0 auto}
.mockup_h{font-family:'Vchoney',serif;font-weight:400;font-size:41.6px;line-height:1.25;letter-spacing:.832px;color:#000;margin-bottom:14px;max-width:560px}
.mockup_subline{font-family:'Vchoney',serif;font-weight:400;font-size:22px;color:#2b88f3;margin-bottom:40px}
.mockup_body{font-family:'Inter',sans-serif;font-size:19px;line-height:1.6;color:#7b8694;max-width:560px;margin-top:20px}

/* iPhone mockup */
.phone-mockup{width:330px;max-width:80vw;position:relative}
.phone-screen{position:absolute;top:3.4%;left:5.33%;right:5.33%;bottom:0;overflow:hidden;border-radius:9.93% 9.93% 0 0/6.44% 6.44% 0 0;z-index:1}
.phone-screen-media{display:block;width:100%;height:auto}
/* mockup5 bonus sticker still is framed slightly differently than the video sources; nudge it up so its status-bar dynamic island lines up with the one drawn on the phone frame graphic */
img.phone-screen-media{transform:translateY(-1%)}
.phone-frame{position:relative;z-index:2;display:block;width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(90,120,170,.25))}

/* ===================== TAG / CARDS ===================== */
.section_tag{padding:60px 0 90px;text-align:center}
.tag_h{margin:0 auto 56px}
.tag_row{display:flex;align-items:center;justify-content:center;gap:0}
.tag_img{border-radius:22px;box-shadow:0 18px 40px rgba(90,120,170,.22);height:auto}
.tag_img.is-1{width:200px;z-index:1}
.tag_img.is-2{width:236px;z-index:2}
.tag_img:not(.is-1):not(.is-2){width:268px;z-index:3}
.tag_row .tag_slide:nth-child(1){transform:rotate(-9deg) translateX(34px)}
.tag_row .tag_slide:nth-child(2){transform:rotate(-4.5deg) translateX(16px)}
.tag_row .tag_slide:nth-child(3){transform:translateY(-10px)}
.tag_row .tag_slide:nth-child(4){transform:rotate(4.5deg) translateX(-16px)}
.tag_row .tag_slide:nth-child(5){transform:rotate(9deg) translateX(-34px)}

/* ===================== FOOTER ===================== */
.section_footer{background:#fff;padding:110px 0 70px;text-align:center}
.footer_sparkle{width:96px;margin:0 auto 36px}
.footer_sparkle img{width:100%;height:auto}
.footer_h{font-family:'Vchoney',serif;font-weight:400;font-size:40px;line-height:1.3;color:#000;margin-bottom:48px}
.footer_h a{text-decoration:underline;text-underline-offset:3px}
.footer_links{display:flex;justify-content:center;gap:34px;font-family:'Inter',sans-serif;font-size:16px;color:#8a93a1}
.footer_links a{transition:color .2s}
.footer_links a:hover{color:#2b88f3}
.footer_copyright{margin-bottom:18px;font-family:'Inter',sans-serif;font-size:16px;color:#8a93a1}

/* ===================== REVEAL ANIMATION DEFAULTS ===================== */
.reveal,.reveal-up{opacity:0}

/* ===================== RESPONSIVE ===================== */
@media (max-width:991px){
  .heading{font-size:58px}
  .mockup_h{font-size:36px}
  .sticker--cloud-2{width:180px}
  .sticker--cloud-1{width:150px}
}
@media (max-width:767px){
  .section_hero{min-height:0;justify-content:flex-start;padding:56px 0 242px}
  .hero_logo-img{width:170px}
  .release-badge{width:178px}
  .heading{font-size:72px;letter-spacing:-0.48px}
  .hero_subtext{font-size:18px;max-width:340px;margin-bottom:8px}
  .hero_card-link{width:250px}
  .hero_card-img{display:none}
  .hero_download-btn{display:flex}
  .mockup_h{font-size:30px;line-height:1.22}
  .mockup_subline{font-size:19px}
  .mockup_body{font-size:17px}
  .marquee_track span{font-size:19px;padding:0 12px}
  .section_mockup{padding:64px 0}
  .phone-mockup{width:270px}
  /* cards stack into a tighter fan on mobile */
  .tag_h{margin-bottom:28px}
  .tag_row{position:relative;height:480px}
  .tag_slide{position:absolute;top:50%;left:50%}
  .tag_img.is-1,.tag_img.is-2,.tag_img:not(.is-1):not(.is-2){width:220px}
  .footer_h{font-size:30px}
  .sticker--cloud-1,.sticker--cloud-2{display:none}
  
  .sticker--cloud-3{width:82px;top:auto;bottom:130px;left:19%}
  .sticker--cloud-4{width:196px;top:auto;bottom:20px;left:26%;right:auto}
}

/* ==================== SPARKLE CURSOR ==================== */
@media (pointer:fine){
  body{cursor:url('cursor-sparkle.svg') 20 20,auto}
  a,button{cursor:pointer}
}