/* =====================
   CryptoX Styles (External CSS)
   ===================== */
:root{
  --bg: #0f1115;          /* page */
  --elev-1:#141821;       /* cards */
  --elev-2:#0b0e14;       /* header/footer */
  --muted:#8b94a7;        /* secondary text */
  --text:#e8ecf1;         /* primary text */
  --primary:#22e3a7;      /* accent green */
  --primary-2:#7cf7d6;    /* soft accent */
  --accent:#5b8cff;       /* blue */
  --danger:#ff5c6c;       
  --warn:#ffcf5a;
  --ok:#47e995;
  --border: rgba(255,255,255,.06);
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --ring: 0 0 0 3px rgba(34,227,167,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji"; background: var(--bg); color:var(--text); line-height:1.55; overflow-x:hidden }
body.no-scroll{overflow:hidden}

a{color:var(--primary); text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1200px; margin-inline:auto; padding:24px}

/* ===== Animated Background ===== */
.bg-anim{position:fixed; inset:0; z-index:-1; pointer-events:none}
.bg-anim svg{width:100%; height:100%; display:block}
.blob{opacity:.28; filter:blur(32px)}
@keyframes floatA{0%{transform:translate(-8%, -6%)}50%{transform:translate(6%, 4%)}100%{transform:translate(-8%, -6%)}}
@keyframes floatB{0%{transform:translate(8%, 12%)}50%{transform:translate(-6%, -10%)}100%{transform:translate(8%, 12%)}}
.blob.a{animation: floatA 28s ease-in-out infinite}
.blob.b{animation: floatB 36s ease-in-out infinite}
.orbit{position:absolute; inset:0}
.orbit svg{position:absolute; width:60vmax; height:60vmax; left:50%; top:40%; transform:translate(-50%,-50%)}
.spin-slow{animation:spin 50s linear infinite}
.spin-rev{animation:spin 70s linear infinite reverse}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ===== Header ===== */
header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(11,14,20,.85), rgba(11,14,20,.55)); border-bottom:1px solid var(--border) }
.nav{display:flex; align-items:center; gap:16px; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; font-weight:700}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#1de5a0,#5b8cff); display:grid; place-items:center; box-shadow:var(--shadow)}
.tag{padding:6px 10px;border-radius:999px;background:#0e131b;border:1px solid var(--border); color:var(--muted); font-size:12px}

.nav-links{display:flex; gap:10px; align-items:center}
.btn{cursor:pointer; border:1px solid var(--border); background:#131824; color:var(--text); padding:10px 14px; border-radius:12px; transition:.25s; font-weight:600}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,#1de5a0,#37e6be); color:#05130e}
.btn.ghost{background:#0e131b}
.hamburger{display:none; background:#0e131b}

/* ===== Hero ===== */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:stretch}
@media (max-width: 980px){.hero{grid-template-columns:1fr}}

/* Carousel */
.carousel{ position:relative; overflow:hidden; border-radius:var(--radius-xl); border:1px solid var(--border); background:#0d121a; min-height:280px; box-shadow:var(--shadow) }
.slides{display:flex; width:100%; height:100%; transition: transform .6s cubic-bezier(.2,.8,.2,1)}
.slide{min-width:100%; display:grid; place-items:center; padding:36px; background: radial-gradient(600px 220px at 20% 0%, rgba(124,247,214,.14), transparent 60%), radial-gradient(700px 240px at 80% 100%, rgba(91,140,255,.12), transparent 60%)}
.slide-inner{display:grid; place-items:center; gap:14px; text-align:center}
.slide h3{margin:0; font-size:28px}
.slide p{margin:0; color:var(--muted)}
.dots{position:absolute; inset:auto 0 12px; display:flex; justify-content:center; gap:8px}
.dot{width:8px;height:8px;border-radius:999px;background:#2a3446; border:1px solid var(--border)}
.dot.active{background:var(--primary)}

/* Hero card (wallet + quick stats) */
.panel{border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--elev-1); box-shadow:var(--shadow); padding:18px; transition:transform .25s ease, box-shadow .25s ease}
.panel:hover{transform:translateY(-2px)}
.panel + .panel{margin-top:14px}
.panel-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.status{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px}
.status .dot{width:8px;height:8px;border-radius:50%; background:var(--danger)}
.status.ok .dot{background:var(--ok)}
.wallet-actions{display:flex; gap:10px}

.kv{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.kv .cell{background:#0e131b; border:1px solid var(--border); border-radius:12px; padding:12px}
.kv h4{margin:0 0 4px 0; font-size:13px; color:var(--muted)}
.kv .val{font-weight:700}

/* VIP table */
.vip{display:grid; grid-template-columns:1fr; gap:10px}
.vip .row{display:grid; grid-template-columns:140px 1fr 130px; gap:10px; padding:12px; background:#0e131b; border-radius:12px; border:1px solid var(--border); transition:background .2s}
.vip .row:hover{background:#121827}
.vip .row.header{background:transparent; border:none; padding:6px 12px; color:var(--muted)}
.vip .row .badge{display:inline-flex; align-items:center; gap:8px; font-weight:700}
.badge .pill{width:8px;height:8px;border-radius:999px;background:var(--warn)}
.vip .apy{font-weight:800; color:var(--primary)}

/* Sections */
section{padding:44px 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width: 980px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--elev-1); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden}
.card:hover{transform:translateY(-3px)}
.card h3{margin-top:0}
.icon{width:36px;height:36px}

/* Feature card "stock-image" style overlays */
.card::before{content:""; position:absolute; inset:0; opacity:.18; pointer-events:none; background-size:cover; background-position:center; filter:contrast(110%) saturate(110%)}
.bg-wallet::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 600%22><defs><linearGradient id=%22a%22 x1=%220%22 x2=%221%22 y1=%220%22 y2=%221%22><stop stop-color=%22%231de5a0%22/><stop offset=%221%22 stop-color=%22%235b8cff%22/></linearGradient></defs><rect width=%221200%22 height=%22600%22 fill=%22%2311181f%22/><g fill=%22none%22 stroke=%22url(%23a)%22 stroke-width=%2230%22 opacity=%22.9%22><rect x=%2290%22 y=%2250%22 rx=%2280%22 width=%22800%22 height=%22480%22/><circle cx=%22700%22 cy=%22300%22 r=%2280%22/></g></svg>')}
.bg-multi::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 600%22><defs><linearGradient id=%22b%22 x1=%220%22 x2=%221%22 y1=%221%22 y2=%220%22><stop stop-color=%22%235b8cff%22/><stop offset=%221%22 stop-color=%22%237cf7d6%22/></linearGradient></defs><rect width=%221200%22 height=%22600%22 fill=%22%2311181f%22/><g fill=%22none%22 stroke=%22url(%23b)%22 stroke-width=%2230%22 opacity=%22.9%22 stroke-linecap=%22round%22><path d=%22M80 520c160-260 240-360 430-360s270 130 430 360%22/><path d=%22M140 520c160-200 240-280 430-280s270 90 430 280%22/></g></svg>')}
.bg-reward::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 600%22><defs><linearGradient id=%22c%22 x1=%220%22 x2=%220%22 y1=%221%22 y2=%220%22><stop stop-color=%22%231de5a0%22/><stop offset=%221%22 stop-color=%22%237cf7d6%22/></linearGradient></defs><rect width=%221200%22 height=%22600%22 fill=%22%2311181f%22/><g opacity=%22.95%22><rect x=%2290%22 y=%22420%22 width=%22200%22 height=%22140%22 rx=%2230%22 fill=%22%2320303f%22/><rect x=%22320%22 y=%22330%22 width=%22220%22 height=%22230%22 rx=%2230%22 fill=%22%23293a52%22/><rect x=%22570%22 y=%22230%22 width=%22240%22 height=%22330%22 rx=%2230%22 fill=%22url(%23c)%22/></g></svg>')}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* FAQ */
details{background:#0e131b; border:1px solid var(--border); border-radius:12px; padding:14px}
details + details{margin-top:10px}
summary{cursor:pointer; font-weight:700}

/* Footer */
footer{border-top:1px solid var(--border); background:var(--elev-2); margin-top:40px}
.footer{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}

/* Utilities */
.flex{display:flex; gap:12px; align-items:center}
.muted{color:var(--muted)}
.pill{padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#0e131b; font-size:12px}
.mono{font-variant-numeric: tabular-nums}

/* Mobile nav */
@media (max-width: 760px){ .nav-links{display:none} .hamburger{display:inline-flex} }

/* Motion-reduction preference */
@media (prefers-reduced-motion: reduce){ .btn:hover{transform:none} .panel:hover,.card:hover{transform:none} .slides{transition:none} }

/* ===== Modals (BEM) ===== */
.modal{position:fixed; inset:0; display:none}
.modal.open{display:block}
.modal__overlay{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(4px); opacity:0; transition: opacity .25s}
.modal.open .modal__overlay{opacity:1}
.modal__dialog{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96); width:min(900px,92vw); max-height:min(80vh,880px); background:var(--elev-1); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; opacity:0; transition: opacity .25s, transform .25s}
.modal.open .modal__dialog{opacity:1; transform:translate(-50%,-50%) scale(1)}
.modal__header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border)}
.modal__title{margin:0; font-size:18px}
.modal__close{cursor:pointer; border:none; background:#0e131b; color:var(--text); padding:8px 10px; border-radius:10px; border:1px solid var(--border)}
.modal__content{padding:16px; max-height:calc(min(80vh,880px) - 62px); overflow:auto}
.modal__content h3{margin-top:1.2em}
.modal__content p{color:var(--muted)}

/* ===== Consent Banner ===== */
.consent{position:fixed; left:0; right:0; bottom:0; z-index:90; background:rgba(11,14,20,.96); border-top:1px solid var(--border); display:flex; align-items:center; gap:16px; justify-content:space-between; padding:12px 16px; transform:translateY(110%); transition:transform .4s ease}
.consent.show{transform:translateY(0)}
.consent p{margin:0; color:var(--muted); font-size:14px}


.fab-stack{position:fixed; right:18px; bottom:120px; display:flex; flex-direction:column; gap:12px; z-index:150}
@media (max-width:760px){ .fab-stack{ right:12px; bottom:130px; gap:10px } }
.fab{width:64px;height:64px;border-radius:999px;background:var(--elev-1);border:1px solid var(--border);box-shadow:var(--shadow);display:grid;place-items:center;transition:transform .2s ease, box-shadow .2s ease; overflow:hidden; position:relative}
.fab:hover{transform:translateY(-2px) scale(1.06)}
.fab img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.fab::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
/* Ensure modals overlay above FABs */
.modal{z-index:200}
.modal__dialog--iframe{ width:min(1000px,92vw); max-height:min(86vh,900px) }
.modal__content--iframe{ padding:0; height:calc(min(86vh,900px) - 62px) }
.modal__content--iframe iframe{ width:100%; height:100%; border:0; background:#0e131b }
    .modal__overlay{z-index:0}
.modal__dialog{z-index:1}