/* ============================================================
   MKE3X — GLOBAL STYLES  (mobile-first, dark)
   ============================================================ */

:root{
  /* Palette */
  --bg:            #050506;
  --bg-2:          #0b0b0f;
  --surface:       rgba(255,255,255,.045);
  --surface-2:     rgba(255,255,255,.08);
  --border:        rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --text:          #f6f7fb;
  --muted:         #9a9ba6;
  --muted-2:       #6a6b76;

  --accent:        #a855f7;   /* electric purple */
  --accent-2:      #c084fc;
  --glow:          rgba(168,85,247,.55);

  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Metrics */
  --nav-h: 60px;
  --radius: 16px;
  --radius-sm: 11px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 620px;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}

/* Ambient background wash shared across pages */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(90% 60% at 90% 110%, rgba(120,70,255,.12), transparent 60%),
    var(--bg);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.03; mix-blend-mode:overlay; pointer-events:none;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- Typography helpers ---------- */
.display{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.02; }
.eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.section-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,7vw,2.3rem); letter-spacing:-.02em; }
.lede{ color:var(--muted); font-size:1rem; max-width:46ch; }

/* ============================================================
   NAV  (top bar + hamburger drawer)
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
  background:linear-gradient(180deg, rgba(5,5,6,.85), rgba(5,5,6,0));
  backdrop-filter:blur(10px);
}
.brand{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  letter-spacing:.06em; display:inline-flex; align-items:center;
}
.brand .x{ color:#fff; }

.burger{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--border); background:var(--surface);
}
.burger span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; position:relative; transition:.3s var(--ease); }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text); border-radius:2px; transition:.3s var(--ease);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .burger span::after{ top:0; transform:rotate(-45deg); }

/* Drawer */
.drawer{
  position:fixed; inset:0; z-index:70;
  background:rgba(4,4,6,.72); backdrop-filter:blur(22px) saturate(120%);
  display:flex; flex-direction:column; justify-content:center; padding:0 30px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
body.menu-open .drawer{ opacity:1; visibility:visible; }
.drawer nav{ display:flex; flex-direction:column; gap:0; align-items:center; text-align:center; }
.drawer a{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,11vw,3.2rem); letter-spacing:.005em; line-height:1.04;
  padding:.02em 0; color:var(--text);
  transform:translateY(14px); opacity:0;
  transition:color .25s, transform .5s var(--ease), opacity .5s var(--ease);
  display:block;
}
.drawer a:hover,.drawer a.active{ color:var(--text); }
.menu-socials{ display:flex; gap:24px; justify-content:center; margin-top:24px; }
.menu-socials a{ color:var(--text); width:30px; height:30px; display:grid; place-items:center; transition:color .2s; }
.menu-socials a:hover{ color:var(--accent); }
.menu-socials svg{ width:27px; height:27px; }

body.menu-open .drawer a{ transform:translateY(0); opacity:1; }
body.menu-open .drawer a:nth-child(1){ transition-delay:.06s; }
body.menu-open .drawer a:nth-child(2){ transition-delay:.11s; }
body.menu-open .drawer a:nth-child(3){ transition-delay:.16s; }
body.menu-open .drawer a:nth-child(4){ transition-delay:.21s; }
body.menu-open .drawer a:nth-child(5){ transition-delay:.26s; }
body.menu-open .drawer a:nth-child(6){ transition-delay:.31s; }
.drawer .drawer-foot{
  position:absolute; bottom:34px; left:30px; right:30px;
  display:flex; gap:14px; align-items:center; color:var(--muted); font-size:.85rem;
}
.drawer .drawer-foot a{ font-size:.85rem; font-family:var(--font-body); color:var(--muted); }
.drawer .drawer-foot a:hover{ color:var(--text); }

/* ============================================================
   Shared components
   ============================================================ */
.page{ padding:calc(var(--nav-h) + 26px) 20px 90px; max-width:var(--maxw); margin:0 auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6ch;
  padding:13px 20px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid var(--border-strong); background:var(--surface);
  transition:transform .2s var(--ease), background .2s, border-color .2s;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent); border-color:transparent; color:#fff; box-shadow:0 8px 30px -8px var(--glow); }
.btn-primary:hover{ background:var(--accent-2); }
.btn svg{ width:18px; height:18px; }

.pill{
  display:inline-flex; align-items:center; gap:.5ch; padding:6px 12px;
  border-radius:999px; border:1px solid var(--border); background:var(--surface);
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}

/* DSP badges — bottom center of the home page */
.dsp-bar{
  position:fixed; z-index:60; left:50%; right:auto;
  transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 20px);
  display:flex; flex-direction:row; gap:20px; align-items:center;
}
#cornerIg{ color:#E1306C; }
#cornerTt{ color:#fff; }
.dsp-badge{
  width:28px; height:28px; display:grid; place-items:center;
  transition:transform .2s var(--ease), opacity .2s;
}
.dsp-badge:hover{ transform:translateY(-2px); }
.dsp-badge svg{ width:25px; height:25px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
#cornerSpotify{ color:#1DB954; }
#cornerApple{ color:#fa2f5b; }

.footer-note{ text-align:center; color:var(--muted-2); font-size:.78rem; margin-top:54px; letter-spacing:.04em; }

/* Floating VIDEOS side tab */
.video-tab{
  position:fixed; right:0; top:50%; z-index:65;
  transform:translate(100%, -50%);
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#000;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:700;
  letter-spacing:.12em; font-size:.8rem;
  padding:15px 9px; border-radius:10px 0 0 10px;
  box-shadow:-8px 0 26px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.15);
  transition:transform .55s var(--ease), padding .2s;
}
.video-tab.show{ transform:translate(0, -50%); }
.video-tab:hover{ padding-right:12px; }
.video-tab:active{ transform:translate(0, -50%) scale(.96); }

/* Reveal-on-load utility */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
}