/* Additions on top of the original compiled Tailwind (tailwind.css is untouched) */

/* Vike shine keyframes from the original vike-react stylesheet */
@keyframes vike-react-shine{to{background-position-x:-200%}}


/* Swipe areas: let the page scroll vertically, we handle horizontal */
.js-swipe{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.js-swipe img{-webkit-user-drag:none;user-drag:none;pointer-events:none}

/* About 8win: line clamp (3 lines on mobile, 1 on desktop, as on the live site) */
.about-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3}
@media(min-width:48rem){.about-text{-webkit-line-clamp:1}}
.about-text.is-open{display:block;-webkit-line-clamp:unset;overflow:visible}

/* Why Choose: fade-in when the page changes */
@keyframes wc-fade{from{opacity:0}to{opacity:1}}
.wc-card{animation:wc-fade .5s ease-in-out}

/* Testimonials fade */
.t-fade{transition:opacity .5s ease-in-out}
.t-fade.is-out{opacity:0!important}

/* Coming Soon modal */
#coming-soon{display:none}
#coming-soon.is-open{display:flex}

/* Star gradient */
.t-star{background:linear-gradient(90deg,#FBBB2E 0%,#FBCD57 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ============ Site header / nav (added for SEO subpages) ============ */
.site-header{position:sticky;top:0;z-index:40;background:#121212;border-bottom:1px solid #2a2a2a}
.site-header__inner{max-width:80rem;margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.brand{font-weight:800;font-size:24px;letter-spacing:.5px;text-decoration:none;line-height:1;display:inline-flex;align-items:center}
.brand img{height:36px;width:auto;display:block}
.nav-desktop{display:none;align-items:center;gap:22px}
.nav-desktop a{color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:color .15s}
.nav-desktop a:hover,.nav-desktop a.is-active{color:#FBCD57}
.nav-cta{background:#FBCD57;color:#000!important;padding:7px 16px;border-radius:6px;font-weight:700}
.nav-cta:hover{background:#e6bb45}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;top:60px;left:0;right:0;background:#121212;border-bottom:1px solid #2a2a2a;z-index:39;transform:translateY(-120%);transition:transform .28s ease;max-height:calc(100vh - 60px);overflow-y:auto}
.drawer.is-open{transform:translateY(0)}
.drawer a{display:block;color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:14px 20px;border-top:1px solid #222}
.drawer a:first-child{border-top:0}
.drawer a.is-active{color:#FBCD57}
.drawer .nav-cta{margin:14px 20px;text-align:center;display:block}
.drawer-backdrop{position:fixed;inset:60px 0 0;background:rgba(0,0,0,.5);z-index:38;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-backdrop.is-open{opacity:1;pointer-events:auto}
@media(min-width:64rem){.nav-desktop{display:flex}.burger{display:none}.drawer,.drawer-backdrop{display:none}}

/* ============ Content subpages ============ */
.page-wrap{max-width:62rem;margin:0 auto;padding:40px 20px 64px}
.breadcrumb{font-size:13px;color:#9ca3af;margin-bottom:18px}
.breadcrumb a{color:#9ca3af;text-decoration:none}.breadcrumb a:hover{color:#FBCD57}
.breadcrumb span{color:#FBCD57}
.page-wrap h1{font-size:30px;line-height:1.2;font-weight:800;color:#FBCD57;margin-bottom:16px}
.page-wrap h2{font-size:20px;font-weight:700;color:#FBCD57;margin:28px 0 10px}
.page-wrap p{font-size:14px;line-height:1.7;color:#e5e5e5;margin-bottom:12px;font-weight:500}
.page-wrap ul{margin:0 0 14px 20px;list-style:disc}
.page-wrap li{font-size:14px;line-height:1.7;color:#e5e5e5;margin-bottom:6px;font-weight:500}
.page-wrap a.inline{color:#FBCD57;text-decoration:underline}
.page-cta{display:inline-block;background:#FBCD57;color:#000;font-weight:700;padding:11px 26px;border-radius:6px;text-decoration:none;margin:20px 0 8px}
.page-cta:hover{background:#e6bb45}
.cross-links{margin-top:40px;padding-top:24px;border-top:1px solid #2a2a2a}
.cross-links h2{font-size:16px;margin-bottom:12px}
.cross-links .grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:48rem){.cross-links .grid{grid-template-columns:1fr 1fr 1fr}}
.cross-links a{display:block;background:#121212;border:1px solid #2a2a2a;border-radius:8px;padding:14px 16px;color:#fff;text-decoration:none;font-weight:600;font-size:14px;transition:border-color .15s}
.cross-links a:hover{border-color:#FBCD57;color:#FBCD57}
.faq-item{border-bottom:1px solid #2a2a2a;padding:16px 0}
.faq-item h2{margin:0 0 8px;font-size:16px}
.rg-note{background:#121212;border:1px solid #2a2a2a;border-radius:8px;padding:14px 16px;margin-top:28px;font-size:12px;color:#9ca3af;line-height:1.6}
.page-banner{display:block;margin:0 0 24px}
.page-banner img{display:block;width:100%;height:auto;border-radius:10px}