/* bighand99s.net — shared site CSS (header, footer, tokens, cards, slider engines).
   Page-unique rules live in each page's inline <style>. */

:root{
  --ink:#070d1a;
  --ink2:#0d1730;
  --ink3:#152142;
  --line:rgba(167,139,250,.22);
  --txt:#e9ecf7;
  --mut:#a6b0cd;
  --violet:#a78bfa;
  --violet2:#7c5cf5;
  --gold:#ffc83d;
  --gold2:#f0a91d;
  --btn:#2b2f7a;
  --btn2:#3b3fa0;
  --ok:#34d399;
  --warn:#fb7185;
  --rad:14px;
  --wrap:1120px;
  --ff:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff);background:var(--ink);color:var(--txt);
  line-height:1.72;font-size:17px;overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* ---------- skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);
  color:#211603;padding:10px 18px;font-weight:700;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* ---------- animated backdrop (unique to .net: drifting mesh + grid) ---------- */
.mesh{position:fixed;inset:-30%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 32% at 22% 26%,rgba(124,92,245,.34),transparent 62%),
    radial-gradient(34% 30% at 78% 22%,rgba(255,200,61,.16),transparent 60%),
    radial-gradient(42% 38% at 60% 84%,rgba(52,211,153,.14),transparent 64%);
  filter:blur(52px);animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.08)}
  100%{transform:translate3d(3%,-2%,0) scale(1.03)}
}
.gridlines{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(167,139,250,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(167,139,250,.07) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(60% 55% at 50% 0%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 0%,#000,transparent 78%);
  animation:gridpan 26s linear infinite}
@keyframes gridpan{to{background-position:64px 64px,64px 64px}}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
main{display:block}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(7,13,26,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;gap:14px;position:relative}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{height:38px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links a{color:var(--txt);font-size:14.5px;font-weight:600;padding:8px 11px;
  border-radius:9px;white-space:nowrap;transition:.18s}
.nav-links a:hover{background:rgba(167,139,250,.14);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--gold);background:rgba(255,200,61,.1)}
.btn-cta{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#231704!important;font-weight:800!important;padding:9px 18px!important;
  border-radius:999px!important;box-shadow:0 6px 20px rgba(255,200,61,.28)}
.btn-cta:hover{background:linear-gradient(135deg,#ffd66b,var(--gold))!important;transform:translateY(-1px)}
.btn-cta::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%{left:-120%}55%{left:130%}100%{left:130%}}
.burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);
  color:var(--txt);width:42px;height:40px;border-radius:10px;font-size:19px;cursor:pointer}

@media(max-width:940px){
  .burger{display:block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;margin-left:0;
    background:#0a1123;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);padding:10px 14px 16px;
    display:none;box-shadow:0 18px 40px rgba(0,0,0,.55)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 10px}
  .btn-cta{text-align:center;margin-top:6px}
}

/* ---------- breadcrumb ---------- */
.crumb{font-size:13.5px;color:var(--mut);padding:16px 0 2px}
.crumb a{color:var(--mut)}
.crumb span{color:var(--violet)}

/* ---------- headings ---------- */
h1{font-size:clamp(27px,4.6vw,42px);line-height:1.2;margin:.35em 0 .45em;letter-spacing:-.4px}
h2{font-size:clamp(21px,3vw,29px);line-height:1.28;margin:1.9em 0 .5em;letter-spacing:-.2px}
h3{font-size:clamp(18px,2.3vw,21.5px);margin:1.5em 0 .4em;color:#f4f1ff}
h4{font-size:17.5px;margin:1.2em 0 .35em;color:var(--gold)}
p{margin:0 0 1.05em}

/* ---------- quotable answer box (AEO) ---------- */
.answer{background:linear-gradient(135deg,rgba(124,92,245,.16),rgba(255,200,61,.07));
  border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--rad);padding:18px 20px;margin:18px 0 26px;font-size:17.5px}
.answer p:last-child{margin:0}

/* ---------- login / signup card ---------- */
.login-wrap{display:flex;justify-content:center;padding:26px 0 8px}
/* Login / sign-up cards stay STATIC — no rotating border, no sheen, no reveal.
   Animation on this site belongs to the money-page sliders and images only. */
.login-card{position:relative;width:100%;max-width:430px;background:#0e1a35;
  border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.lb-title{text-align:center;font-size:25px;margin:2px 0 18px;color:#fff;font-weight:800}
.lb-field{display:flex;align-items:center;background:#f4f6fb;border-radius:10px;
  margin-bottom:12px;overflow:hidden}
.lb-field input{flex:1;border:0;background:transparent;padding:13px 14px;
  font-size:15.5px;color:#101830;font-family:var(--ff);outline:none}
.lb-ic{width:46px;display:flex;align-items:center;justify-content:center;
  background:#dfe4ee;align-self:stretch;color:#3a4463;font-size:16px}
.lb-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--btn);color:#fff;font-weight:700;
  font-size:16px;padding:13px 16px;border-radius:10px;margin-top:8px;
  transition:background .15s ease}
.lb-btn:hover{background:var(--btn2);text-decoration:none}
.lb-btn.alt{background:#1d4f6b}
.lb-btn.alt:hover{background:#25708f}
.lb-note{font-size:11.8px;color:#8e99b8;text-align:center;margin:14px 0 0;line-height:1.6}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0 10px}
.trust div{background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:12px;padding:14px 12px;text-align:center;font-size:13.5px;color:var(--mut)}
.trust b{display:block;color:var(--gold);font-size:19px;margin-bottom:3px}
@media(max-width:640px){.trust{grid-template-columns:repeat(2,1fr)}}

/* ---------- generic cards / grids ---------- */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:22px 0}
.kv div{background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px}
.kv b{display:block;color:var(--gold);font-size:13px;text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:4px}

table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15.5px}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
th,td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
th{background:rgba(124,92,245,.16);color:#fff;font-weight:700}
tbody tr:nth-child(even){background:rgba(255,255,255,.03)}

blockquote{margin:22px 0;padding:14px 18px;border-left:4px solid var(--violet);
  background:rgba(124,92,245,.1);border-radius:0 12px 12px 0;color:#dfe3f4}

/* ---------- money CTA band ---------- */
.money-cta{background:linear-gradient(135deg,rgba(124,92,245,.24),rgba(255,200,61,.12));
  border:1px solid var(--line);border-radius:18px;padding:26px 24px;margin:34px 0;text-align:center}
.money-cta h2{margin-top:0}
.money-cta .btn-cta{display:inline-block;font-size:17px;padding:13px 30px!important}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;
  background:rgba(255,255,255,.035);overflow:hidden}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:700;color:#fff;list-style:none;
  position:relative;padding-right:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;color:var(--gold);
  font-size:22px;transition:.25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 18px 14px;color:var(--mut)}

/* ---------- SEO box + popular searches ---------- */
.seo-box{background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:16px;padding:22px 22px 18px;margin:34px 0 8px}
.seo-box h2{margin-top:0;font-size:21px}
.seo-box p{color:var(--mut);font-size:15.5px}
.also-search{margin:26px 0 40px}
.also-search h2{font-size:20px;margin-bottom:12px}
.also-search ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0}
.also-search li{background:rgba(167,139,250,.12);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;font-size:13.6px;color:#cdd4ea;transition:.2s}
.also-search li:hover{background:rgba(255,200,61,.16);color:#fff;transform:translateY(-2px)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);background:rgba(6,10,22,.86);margin-top:44px;
  padding:32px 0 26px;font-size:14.5px;color:var(--mut)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.ftr img{height:40px;margin-bottom:10px}
.ftr h3{font-size:15px;color:#fff;margin:0 0 10px;text-transform:uppercase;letter-spacing:.7px}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:7px}
.ftr a{color:var(--mut)}
.ftr a:hover{color:var(--gold)}
.ftr-btm{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;
  font-size:12.8px;line-height:1.7}
@media(max-width:780px){.ftr-grid{grid-template-columns:1fr}}

/* ---------- whatsapp float ---------- */
.wa{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;z-index:80;
  box-shadow:0 8px 24px rgba(37,211,102,.45);animation:pulse 2.3s infinite}
.wa svg{width:34px;height:34px;fill:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ================= SLIDER ENGINES =================
   One markup, five animation modes. A page picks its mode with
   data-anim on .slider: fade | push | flip | curtain | stack
   Images are never cropped: aspect-ratio 16/9 + object-fit contain. */
.slider{position:relative;width:100%;max-width:900px;margin:26px auto 8px;
  aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:#060b17;perspective:1400px}
.slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .7s ease,transform .7s cubic-bezier(.5,.05,.2,1),
             clip-path .7s cubic-bezier(.5,.05,.2,1),filter .7s ease;
  backface-visibility:hidden;will-change:transform,opacity}
.slide img{width:100%;height:100%;object-fit:contain;display:block}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(4,8,18,.9));
  padding:26px 18px 12px;font-size:14px;color:#e6e9f6}
.slide.on{opacity:1;visibility:visible;z-index:2}

/* fade + soft blur */
[data-anim="fade"] .slide{filter:blur(9px);transform:scale(1.015)}
[data-anim="fade"] .slide.on{filter:blur(0);transform:none}
/* horizontal push */
[data-anim="push"] .slide{transform:translateX(102%)}
[data-anim="push"] .slide.on{transform:translateX(0);opacity:1}
[data-anim="push"] .slide.prev{transform:translateX(-102%);opacity:1;visibility:visible}
/* 3D flip */
[data-anim="flip"] .slide{transform:rotateY(88deg) scale(.9);transform-origin:left center}
[data-anim="flip"] .slide.on{transform:rotateY(0) scale(1)}
/* curtain wipe */
[data-anim="curtain"] .slide{clip-path:inset(0 0 0 100%);opacity:1;visibility:visible}
[data-anim="curtain"] .slide.on{clip-path:inset(0 0 0 0);z-index:2}
/* card stack */
[data-anim="stack"] .slide{transform:translateY(14%) scale(.86);opacity:0}
[data-anim="stack"] .slide.on{transform:none;opacity:1}
[data-anim="stack"] .slide.prev{transform:translateY(-9%) scale(1.06);opacity:0;visibility:visible}

.slider-dots{display:flex;justify-content:center;gap:9px;margin:12px 0 4px}
.slider-dots button{width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.2);transition:.25s}
.slider-dots button[aria-current="true"]{background:var(--gold);width:26px;border-radius:999px}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ---------- panel pages (login / sign-up): calm, no motion ----------
   User decision 5 Aug 2026: login and sign-up screens must look like a normal
   login panel. Motion on this site belongs to the money-page sliders and images. */
body.panel .mesh,
body.panel .gridlines,
body.panel .btn-cta::after{animation:none}
body.panel .rv{opacity:1;transform:none;transition:none}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .slide{transform:none!important;filter:none!important;clip-path:none!important}
}