/* =========================================================
   Home Ultra (v1) — cinematic, performance-friendly, Web3/SaaS
   ========================================================= */
.hx{max-width:1180px;margin:0 auto;padding:10px 0 26px;}
.hx *{box-sizing:border-box;}
.hx-hero{position:relative;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);box-shadow:0 18px 70px rgba(0,0,0,.28);padding:22px;}
@media (max-width:640px){.hx-hero{padding:16px;border-radius:22px;}}

.hx-aurora{position:absolute;inset:-40%;pointer-events:none;filter:blur(32px);opacity:.55;transform:translateZ(0);}
.hx-aurora:before,.hx-aurora:after{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:radial-gradient(circle at 30% 40%, rgba(124,58,237,.55), rgba(0,0,0,0) 55%),
             radial-gradient(circle at 70% 55%, rgba(56,189,248,.45), rgba(0,0,0,0) 55%),
             radial-gradient(circle at 50% 20%, rgba(16,185,129,.28), rgba(0,0,0,0) 60%);
}
.hx-aurora:after{opacity:.75;transform:scale(1.08) rotate(8deg);}
@media (prefers-reduced-motion:no-preference){
  .hx-aurora{animation:hxFloat 12s ease-in-out infinite;}
  @keyframes hxFloat{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(18px,-14px,0) scale(1.02);}}
}

.hx-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start;}
@media (max-width:980px){.hx-grid{grid-template-columns:1fr;gap:14px;}}

.hx-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:700;font-size:12px;letter-spacing:.3px;}
.hx-dot{width:8px;height:8px;border-radius:999px;background:rgba(16,185,129,.95);box-shadow:0 0 0 6px rgba(16,185,129,.12);}
.hx-title{margin:14px 0 8px 0;font-size:42px;line-height:1.06;letter-spacing:-.02em;}
@media (max-width:640px){.hx-title{font-size:34px;}}
.hx-title-grad{
  background:linear-gradient(90deg, rgba(56,189,248,1), rgba(124,58,237,1), rgba(16,185,129,1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hx-sub{margin:0;color:rgba(255,255,255,.82);max-width:54ch;font-size:15px;line-height:1.55;}

.hx-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.hx-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:11px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);font-weight:800;
  text-decoration:none;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.hx-btn:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(0,0,0,.22);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.085);}
.hx-btn:active{transform:translateY(0px);}
.hx-btn--ghost{background:transparent;border-color:rgba(255,255,255,.10);}
.hx-btn--primary{
  border-color:rgba(56,189,248,.22);
  background:linear-gradient(180deg, rgba(56,189,248,.22), rgba(124,58,237,.16));
  box-shadow:0 18px 44px rgba(56,189,248,.10);
  overflow:hidden;
}
.hx-btn--primary:before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
  transform:translateX(-120%);opacity:.8;
}
@media (prefers-reduced-motion:no-preference){
  .hx-btn--primary:hover:before{animation:hxShine .9s ease;}
  @keyframes hxShine{to{transform:translateX(120%);}}
}
.hx-btn-meta{font-size:11px;font-weight:900;letter-spacing:.2px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);}

.hx-trustrow{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;}
.hx-badge{font-size:12px;font-weight:800;letter-spacing:.15px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);}

.hx-steps{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (max-width:980px){.hx-steps{grid-template-columns:1fr;}}
.hx-step{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.hx-step-ico{flex:0 0 auto;width:28px;height:28px;border-radius:10px;display:grid;place-items:center;font-weight:900;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);}
.hx-step-title{font-weight:900;}
.hx-step-sub{margin-top:4px;font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.45;}
.hx-ok{color:rgba(16,185,129,.95);font-weight:900;}
.hx-warn{color:rgba(245,158,11,.95);font-weight:900;}
.hx-muted{color:rgba(255,255,255,.70);}

.hx-card{position:relative;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));box-shadow:0 26px 70px rgba(0,0,0,.32);padding:16px;overflow:hidden;transform:translateZ(0);}
.hx-card-glow{position:absolute;inset:-40%;background:radial-gradient(circle at 30% 30%, rgba(56,189,248,.18), rgba(0,0,0,0) 50%),
                                     radial-gradient(circle at 70% 65%, rgba(124,58,237,.20), rgba(0,0,0,0) 55%),
                                     radial-gradient(circle at 55% 15%, rgba(16,185,129,.12), rgba(0,0,0,0) 60%);
  filter:blur(20px);opacity:.9;pointer-events:none;
}
.hx-card-top{display:flex;justify-content:space-between;gap:10px;align-items:center;}
.hx-card-label{font-weight:900;font-size:12px;letter-spacing:.25px;text-transform:uppercase;color:rgba(255,255,255,.75);}
.hx-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.16);font-size:12px;}
.hx-chip-dot{width:7px;height:7px;border-radius:999px;background:rgba(56,189,248,.95);box-shadow:0 0 0 6px rgba(56,189,248,.12);}

.hx-metrics{margin-top:12px;display:grid;gap:10px;}
.hx-metric{position:relative;padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.12);}
.hx-metric-k{font-size:12px;font-weight:900;letter-spacing:.2px;color:rgba(255,255,255,.70);text-transform:uppercase;}
.hx-metric-v{margin-top:6px;font-size:16px;font-weight:950;}
.hx-metric-s{margin-top:4px;font-size:12px;color:rgba(255,255,255,.72);}

.hx-card-bottom{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.hx-mini{display:inline-flex;gap:8px;align-items:center;padding:9px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);text-decoration:none;color:rgba(255,255,255,.86);font-weight:900;font-size:12px;transition:transform .18s ease, background .18s ease, border-color .18s ease;}
.hx-mini:hover{transform:translateY(-1px);background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.16);}
.hx-mini-ico{opacity:.9}

.hx-note{margin-top:12px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:18px;border:1px solid rgba(245,158,11,.18);background:rgba(245,158,11,.06);color:rgba(255,255,255,.86);}
.hx-note-dot{width:8px;height:8px;border-radius:999px;background:rgba(245,158,11,.95);box-shadow:0 0 0 6px rgba(245,158,11,.10);margin-top:4px;}

.hx-proof{margin-top:16px;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);box-shadow:0 18px 60px rgba(0,0,0,.22);padding:16px;}
.hx-proof-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.hx-h2{margin:0;font-size:18px;font-weight:950;}
.hx-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:rgba(255,255,255,.90);font-weight:900;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);padding:10px 12px;border-radius:14px;transition:transform .18s ease, background .18s ease, border-color .18s ease;}
.hx-link:hover{transform:translateY(-1px);background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.18);}
.hx-tablewrap{margin-top:12px;overflow:auto;}
.hx-table{width:100%;border-collapse:collapse;font-size:13px;}
.hx-table th,.hx-table td{padding:10px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);white-space:nowrap;}
.hx-table th{font-size:12px;color:rgba(255,255,255,.70);text-transform:uppercase;letter-spacing:.25px;}
.hx-table tr:hover td{background:rgba(255,255,255,.03);}

.hx-features{margin-top:16px;}
.hx-featuregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:980px){.hx-featuregrid{grid-template-columns:1fr;}}
.hx-feature{position:relative;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .18s ease, border-color .18s ease, background .18s ease;}
.hx-feature:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.045);}
.hx-feature-ico{font-size:18px;}
.hx-feature-title{margin-top:10px;font-weight:950;}
.hx-feature-sub{margin-top:6px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.5;}

/* subtle reveal */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease;}
  [data-reveal].is-in{opacity:1;transform:translateY(0);}
}

/* VIP teaser */
.hx-vip{margin-top:18px;}
.hx-vip-card{border-radius:24px;border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);box-shadow:0 24px 80px rgba(0,0,0,.45);
  display:grid;grid-template-columns: 1.25fr .75fr;gap:14px;padding: 18px; position:relative; overflow:hidden;}
.hx-vip-card::before{content:"";position:absolute;inset:-60px -40px auto -40px;height:220px;
  background: radial-gradient(520px 220px at 20% 40%, rgba(34,255,214,.14), transparent 60%),
              radial-gradient(520px 220px at 70% 40%, rgba(124,92,255,.16), transparent 60%);
  filter: blur(16px); opacity:.9; pointer-events:none;}
.hx-vip-left,.hx-vip-right{position:relative;}
.hx-vip-kicker{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.hx-vip-title{margin:12px 0 6px;font-family:"Space Grotesk","Inter",system-ui;font-size:22px;}
.hx-vip-sub{margin:0 0 12px;opacity:.82;max-width: 64ch;}
.hx-vip-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hx-vip-right{display:grid;gap:10px;align-content:start;}
.hx-vip-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);font-weight:800;}
.hx-vip-dot{width:8px;height:8px;border-radius:999px;background: rgba(124,92,255,.85);box-shadow:0 0 0 6px rgba(124,92,255,.14);}
.hx-vip-mini{border-radius:18px;border:1px solid rgba(255,255,255,.10);background: rgba(0,0,0,.14);padding:12px;}
.hx-vip-mini-title{font-weight:900;margin:0 0 6px;}
.hx-vip-mini-text{opacity:.78;font-size:12px;line-height:1.45;}
@media (max-width: 980px){.hx-vip-card{grid-template-columns:1fr;}}


/* Unified Recent Payout Cards — CryptoFaucet V107 */
.hx-proof--cards .hx-payout-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hx-payout-card{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 32px rgba(0,0,0,.18);overflow:hidden}
.hx-payout-card--fresh{box-shadow:0 0 0 1px rgba(34,197,94,.20),0 0 30px rgba(34,197,94,.14),0 14px 32px rgba(0,0,0,.18)}
.hx-payout-card--fresh:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,197,94,.11),transparent 60%);pointer-events:none}
.hx-payout-avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#22d3ee,#a3e635);color:#06110d;font-weight:950;box-shadow:0 0 0 5px rgba(45,212,191,.10)}
.hx-payout-main{min-width:0;flex:1}
.hx-payout-to{font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-payout-meta{margin-top:4px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;color:rgba(255,255,255,.62);font-size:12px}
.hx-provider{display:inline-flex;border:1px solid rgba(45,212,191,.22);background:rgba(45,212,191,.10);color:#99f6e4;border-radius:999px;padding:3px 7px;font-weight:900}
.hx-payout-amount{font-weight:950;color:#86efac;white-space:nowrap}
@media(max-width:1100px){.hx-proof--cards .hx-payout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hx-proof--cards .hx-payout-grid{grid-template-columns:1fr}.hx-payout-card{border-radius:18px}}