/* =====================================================
   MIXOO PRO — Typography, 3D, Aurora, Stunning Layer
   Loaded AFTER mixoo.css to override base styles.
   ===================================================== */

/* ---------- TYPOGRAPHY ---------- */
/* Airbnb Cereal — drop licensed files into /fonts/ to activate.
   Falls back gracefully to Manrope (Google) which is visually similar. */
@font-face{font-family:'Airbnb Cereal';src:url('/fonts/AirbnbCereal-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Airbnb Cereal';src:url('/fonts/AirbnbCereal-Book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Airbnb Cereal';src:url('/fonts/AirbnbCereal-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Airbnb Cereal';src:url('/fonts/AirbnbCereal-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Airbnb Cereal';src:url('/fonts/AirbnbCereal-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Airbnb Cereal';src:url('/fonts/AirbnbCereal-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

body{font-family:'Airbnb Cereal','Manrope','Inter',system-ui,sans-serif !important;font-feature-settings:"ss01","cv11"}
h1,h2,h3,h4,h5,h6{font-family:'Airbnb Cereal','Manrope','Plus Jakarta Sans',sans-serif !important;font-weight:800;letter-spacing:-0.025em}
[dir="rtl"] body,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6{font-family:'Alexandria','Cairo',sans-serif !important}

/* ---------- AURORA / NOISE BACKGROUND ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 800px at 15% -10%,rgba(124,58,237,.32),transparent 60%),
    radial-gradient(1000px 700px at 85% 10%,rgba(236,72,153,.28),transparent 60%),
    radial-gradient(900px 700px at 50% 100%,rgba(249,115,22,.18),transparent 60%),
    #06030F;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* aurora ribbon behind hero */
.aurora{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;overflow:hidden;filter:blur(60px);opacity:.55}
.aurora i{position:absolute;display:block;width:60vw;height:60vw;border-radius:50%;mix-blend-mode:screen;animation:auroraDrift 22s ease-in-out infinite}
.aurora i:nth-child(1){background:radial-gradient(circle,#7C3AED 0%,transparent 60%);top:-20%;left:-10%}
.aurora i:nth-child(2){background:radial-gradient(circle,#EC4899 0%,transparent 60%);top:10%;right:-15%;animation-delay:-7s;animation-duration:26s}
.aurora i:nth-child(3){background:radial-gradient(circle,#F97316 0%,transparent 60%);bottom:-30%;left:30%;animation-delay:-14s;animation-duration:30s}
@keyframes auroraDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(8%,-6%,0) scale(1.1)}
  66%{transform:translate3d(-6%,8%,0) scale(.95)}
}

/* ---------- NAV CHROME ---------- */
.nav.scrolled{background:rgba(8,4,20,.55) !important;border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 20px 60px -20px rgba(124,58,237,.35)}
.nav-links a{position:relative;font-weight:500}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;border-radius:2px;background:var(--grad);transition:all .35s var(--ease);transform:translateX(-50%)}
.nav-links a:hover::after{width:100%}

/* ---------- BUTTONS — premium gloss ---------- */
.btn{letter-spacing:-.005em;font-weight:600}
.btn-primary{
  background:linear-gradient(135deg,#8B5CF6 0%,#EC4899 50%,#F97316 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -10px 24px rgba(124,58,237,.5) inset,
    0 14px 40px rgba(236,72,153,.45),
    0 4px 12px rgba(0,0,0,.4);
  position:relative;overflow:hidden;
}
.btn-primary::after{content:"";position:absolute;inset:1px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%);pointer-events:none}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -10px 24px rgba(124,58,237,.55) inset,0 24px 60px rgba(236,72,153,.6),0 6px 16px rgba(0,0,0,.45)}
.btn-outline{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.14)}

/* ---------- HERO 3D ---------- */
.hero{perspective:1600px}
.hero h1{font-weight:900;letter-spacing:-.04em;line-height:1.02;text-shadow:0 4px 40px rgba(124,58,237,.25)}
.hero .grad-text{background:linear-gradient(120deg,#fff 0%,#E9D5FF 35%,#F9A8D4 65%,#FED7AA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:19px;color:rgba(255,255,255,.78);font-weight:400}

/* phone — true 3D tilt + chrome */
.phone-wrap{transform-style:preserve-3d}
.phone{
  width:320px;height:640px;border-radius:54px;
  background:linear-gradient(155deg,#1a0f33 0%,#0a0518 100%);
  border:10px solid #050208;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 60px 120px -30px rgba(124,58,237,.55),
    0 30px 60px -20px rgba(236,72,153,.4),
    0 0 80px rgba(249,115,22,.18);
  transform:rotateY(-14deg) rotateX(8deg) rotateZ(-3deg);
  transition:transform .6s var(--ease);
  will-change:transform;
}
.phone-wrap:hover .phone{transform:rotateY(-8deg) rotateX(4deg) rotateZ(-1deg) scale(1.02)}
.phone::after{
  content:"";position:absolute;inset:0;border-radius:44px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 30%,transparent 70%,rgba(255,255,255,.06) 100%);
  mix-blend-mode:overlay;
}
.chip{
  background:linear-gradient(135deg,rgba(30,18,55,.92),rgba(15,8,30,.92)) !important;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06) inset !important;
  backdrop-filter:blur(20px);
  font-weight:600;
}

/* ---------- SCREENSHOT SHOWCASE ---------- */
.showcase{padding:120px 0;position:relative;overflow:hidden}
.showcase .glow{opacity:.25}
.showcase-stage{
  position:relative;
  display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:40px;
  align-items:center;justify-items:center;
  perspective:2000px;perspective-origin:50% 40%;
  margin-top:60px;
}
.shot{
  --rot:0deg;--ty:0px;--scale:1;--z:0;
  width:280px;aspect-ratio:9/19.5;border-radius:42px;
  background:linear-gradient(160deg,#1a0f33,#0a0518);
  border:8px solid #050208;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 50px 100px -20px rgba(124,58,237,.5),
    0 20px 50px rgba(0,0,0,.5);
  transform:translateY(var(--ty)) rotateY(var(--rot)) scale(var(--scale));
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
  position:relative;overflow:hidden;
}
.shot::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:90px;height:22px;background:#000;border-radius:18px;z-index:5}
.shot::after{content:"";position:absolute;inset:0;border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,transparent 35%,transparent 65%,rgba(255,255,255,.08) 100%);mix-blend-mode:overlay;pointer-events:none}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.placeholder{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:13px;text-align:center;padding:60px 24px;font-weight:500;letter-spacing:.02em}
.shot.placeholder span{display:block;margin-top:12px;font-size:11px;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:.15em}
.shot-left{--rot:18deg;--ty:30px;--scale:.9}
.shot-center{--rot:0deg;--ty:-20px;--scale:1.05;z-index:2}
.shot-right{--rot:-18deg;--ty:30px;--scale:.9}
.showcase-stage:hover .shot-left{--rot:14deg;--ty:20px}
.showcase-stage:hover .shot-right{--rot:-14deg;--ty:20px}
@media(max-width:900px){
  .showcase-stage{grid-template-columns:1fr;gap:48px}
  .shot{--rot:0deg !important;--ty:0px !important;--scale:1 !important;width:260px}
}

/* ---------- 3D EARN CARDS ---------- */
.earn-card,.feat,.story{
  background:linear-gradient(155deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 60px -20px rgba(0,0,0,.5);
  transform-style:preserve-3d;
}
.earn-card{padding:44px}
.earn-card .earn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:18px;font-size:32px;
  background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(236,72,153,.18));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px -8px rgba(124,58,237,.5),0 1px 0 rgba(255,255,255,.1) inset;
  transform:translateZ(20px);
}
.earn-card:hover{transform:translateY(-8px) rotateX(2deg) rotateY(-2deg);border-color:rgba(236,72,153,.35) !important;box-shadow:0 50px 100px -30px rgba(236,72,153,.45),0 1px 0 rgba(255,255,255,.1) inset}
.feat{padding:32px}
.feat .feat-icon{display:inline-flex;width:48px;height:48px;border-radius:14px;align-items:center;justify-content:center;font-size:24px;background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(236,72,153,.15));border:1px solid rgba(255,255,255,.08)}

/* ---------- STATS BANNER — premium ---------- */
.stats-banner{
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.18),transparent 50%),
    linear-gradient(135deg,#4C1D95 0%,#7C3AED 30%,#EC4899 65%,#F97316 100%) !important;
  border-radius:32px;margin:0 24px;padding:96px 0 !important;
  box-shadow:0 60px 120px -30px rgba(236,72,153,.5);
  position:relative;overflow:hidden;
}
.stats-banner::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/></svg>");mix-blend-mode:overlay;opacity:.4;pointer-events:none}
.stat-num{font-weight:900 !important;letter-spacing:-.04em;text-shadow:0 4px 20px rgba(0,0,0,.3)}

/* ---------- MARQUEE (trust strip) ---------- */
.marquee{overflow:hidden;padding:32px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(8,4,20,.4);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:60px;width:max-content;animation:marqueeMove 38s linear infinite}
.marquee-item{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap}
.marquee-item .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#EC4899,#F97316)}
@keyframes marqueeMove{to{transform:translateX(-50%)}}

/* ---------- CTA refinement ---------- */
.cta{padding:140px 0 !important}
.cta h2{font-weight:900;letter-spacing:-.04em}
.store{
  background:linear-gradient(155deg,#0c0820,#000) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06) inset;
}

/* ---------- footer polish ---------- */
.footer{background:linear-gradient(180deg,transparent,#020108) !important}

/* ---------- reveal upgrade ---------- */
.reveal{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}

/* ---------- selection ---------- */
::selection{background:rgba(236,72,153,.4);color:#fff}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#06030F}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7C3AED,#EC4899);border-radius:10px}