/* CHAKOGA® — shared styles. Self-hosted Manrope (no third-party requests). */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-400.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-500.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-600.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-700.woff2) format('woff2');}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;color:#fff;font-family:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;}
body.page-landing{background:#0C1027;}
body.page-legal{background:linear-gradient(180deg,#2E51BF 0%,#0C1027 100%) fixed;min-height:100vh;}
a{color:#a8b8ff;text-decoration:none;}
a:hover{color:#ff5ec8;}
::selection{background:#E0409B;color:#fff;}
img{max-width:100%;}

/* Keyframes (were in the design export) */
@keyframes orbFloat{0%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,-80px) scale(1.15);}100%{transform:translate(0,0) scale(1);}}
@keyframes orbFloat2{0%{transform:translate(0,0) scale(1);}50%{transform:translate(-80px,60px) scale(.9);}100%{transform:translate(0,0) scale(1);}}
@keyframes pulseRing{0%{transform:scale(1);opacity:.5;}100%{transform:scale(2.6);opacity:0;}}
@keyframes heroIn{from{opacity:0;transform:translateY(50px);}to{opacity:1;transform:translateY(0);}}
@keyframes phoneBob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-18px) rotate(-2.5deg);}}
@keyframes eqBar{0%,100%{transform:scaleY(.3);}50%{transform:scaleY(1);}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Hover utilities — replace the design's `style-hover` attributes.
   !important is needed to beat inline base values on the same property. */
.hv-lift{transition:transform .25s ease;}
.hv-lift:hover{transform:translateY(-6px)!important;}
.hv-nudge{transition:transform .2s ease;}
.hv-nudge:hover{transform:translateY(-2px)!important;}
.hv-cta{transition:transform .2s ease,box-shadow .25s ease;}
.hv-cta:hover{transform:translateY(-2px)!important;box-shadow:0 12px 48px rgba(224,64,155,.65)!important;}
.hv-ghost{transition:background .2s ease;}
.hv-ghost:hover{background:rgba(255,255,255,.14)!important;}
.link-light{color:rgba(255,255,255,.85);transition:color .2s ease;}
.link-light:hover{color:#ff5ec8;}

/* Nav glass-on-scroll (class toggled by app.js) */
#ck-nav{background:transparent;border-bottom:1px solid transparent;transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;}
#ck-nav.scrolled{background:rgba(12,16,39,.72);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}

/* Native FAQ accordion */
.faq{border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.05);overflow:hidden;}
.faq+.faq{margin-top:14px;}
.faq>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;font-size:17px;font-weight:600;color:#fff;list-style:none;}
.faq>summary::-webkit-details-marker{display:none;}
.faq>summary::after{content:"+";font-size:22px;color:#ff5ec8;flex:none;line-height:1;}
.faq[open]>summary::after{content:"\2212";}
.faq>summary:hover{background:rgba(255,255,255,.04);}
.faq .faq-body{padding:0 24px 22px;font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.75);}

/* Responsive (from the design export) */
@media (max-width:900px){.ck-hero-h1{font-size:clamp(44px,12vw,72px)!important;}.ck-grid2{grid-template-columns:1fr!important;}.ck-grid3{grid-template-columns:1fr!important;}}
@media (max-width:760px){.ck-nav-links{display:none!important;}}

/* Store-graphics slider (native scroll-snap, no library) */
.slider{margin-top:56px;display:flex;align-items:center;gap:16px;}
.slider-track{flex:1;min-width:0;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);}
.slider-track::-webkit-scrollbar{display:none;}
.slide{flex:0 0 auto;width:min(280px,72vw);aspect-ratio:720/1564;object-fit:cover;border-radius:30px;scroll-snap-align:center;border:1px solid rgba(255,255,255,.10);display:block;}
.slider-nav{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease;}
.slider-nav svg{display:block;}
.slider-nav:hover{background:rgba(224,64,155,.55);border-color:transparent;}
.slider-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:10px;}
.slider-dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:background .2s ease,transform .2s ease;}
.slider-dots button:hover{background:rgba(255,255,255,.5);}
.slider-dots button.active{background:linear-gradient(90deg,#7B2FF7,#E0409B);transform:scale(1.35);}
@media (max-width:760px){.slider-nav{display:none;}}

/* Mobile: the 3 phones start stacked and fan open on scroll (--fan set by app.js, 0..1) */
@media (max-width:760px){
  .phone-fan{display:block!important;position:relative;height:min(144vw,560px);margin-top:36px!important;--fan:0;}
  .phone-fan-item{position:absolute!important;left:50%;bottom:0;width:min(208px,55vw)!important;transform-origin:bottom center;opacity:1!important;transition:none!important;}
  .phone-fan-item:nth-child(1){z-index:1;transform:translateX(-50%) translateX(calc(var(--fan) * -42%)) rotate(calc(var(--fan) * -12deg))!important;}
  .phone-fan-item:nth-child(2){z-index:3;transform:translateX(-50%) translateY(calc(var(--fan) * -5%))!important;}
  .phone-fan-item:nth-child(3){z-index:2;transform:translateX(-50%) translateX(calc(var(--fan) * 42%)) rotate(calc(var(--fan) * 12deg))!important;}
}

/* Respect reduced-motion: no animations, everything visible */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  [data-reveal]{opacity:1!important;transform:none!important;}
}