/* Futuristic neon + glassmorphism (tiny stylesheet) */
:root{
  --bg:#050612;
  --text:#eaf0ff;
  --muted:#aab3d1;
  --card:#0c0e24cc; /* translucent */
  --line:rgba(255,255,255,0.12);
  --brand:#7b7cf6;
  --brand2:#00e5ff;
  --pink:#ff4fd8;
  --cyan:#00f6d2;
  --violet:#8a63ff;--accent: #8B5CF6;      /* primary (purple) */
  --accent-hover: #7C3AED;/* a bit deeper */
  --muted: #334155;       /* secondary button */
  --text-on-accent: #ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:#a7b5ff;text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{font-weight:800;margin:0 0 10px}
.section-title{font-family:Orbitron,Inter,sans-serif;letter-spacing:.5px;text-transform:uppercase}

.container{max-width:1080px;margin:0 auto;padding:20px}

/* Background layers */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg__gradient{
  position:absolute;inset:-20%;
  background:conic-gradient(from 180deg at 50% 50%, #0000, #182063, #0000, #2b0c3f, #0000, #042b2f, #0000);
  filter:blur(80px) saturate(120%); animation:spin 28s linear infinite;
}
.bg__noise{
  position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="0.07"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="2" seed="2"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  mix-blend-mode:overlay;
}
.bg__grid{
  position:absolute;inset:0;
  background:
    linear-gradient(transparent 95%, rgba(168,180,255,0.08) 95%) 0 0/100% 24px,
    linear-gradient(90deg, transparent 95%, rgba(168,180,255,0.08) 95%) 0 0/24px 100%;
  mask-image: radial-gradient(circle at 50% 20%, #000 40%, transparent 80%);
}
.bg__orbs::before,
.bg__orbs::after{
  content:""; position:absolute; width:60vmin; height:60vmin; border-radius:50%;
  filter: blur(40px);
}
.bg__orbs::before{ top:10%; left:-10%; background:radial-gradient(circle,#7b7cf6 0%, #0000 60%); opacity:.25; }
.bg__orbs::after{ bottom:-10%; right:-10%; background:radial-gradient(circle,#00e5ff 0%, #0000 60%); opacity:.22; }
@keyframes spin{to{transform:rotate(360deg)}}

/* Glass effect containers */
.glass{
  background:var(--card);
  border:1px solid var(--line);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius:16px;
}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.brand{display:flex;gap:10px;align-items:center;font-family:Orbitron,Inter,sans-serif;font-weight:800}
.brand-text{letter-spacing:.6px}
.nav-links a{margin-left:16px;color:var(--muted)}
.nav-links a:hover{color:#e6e9ff}

/* Hero */
.hero{padding:80px 20px 30px;text-align:left}
.glow-text{
  font-size: clamp(36px, 6vw, 60px);
  line-height:1.05;
  background:linear-gradient(90deg, var(--brand), var(--brand2) 60%, #fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 18px rgba(123,124,246,.18);
}
.glow-text em{font-style:normal;text-shadow:0 0 22px rgba(0,229,255,.22)}
.subtitle{color:var(--muted);max-width:720px;margin-top:8px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 6px}
.chip{
  padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.06);
  border:1px solid var(--line); color:#cfd6ff; font-weight:600; font-size:14px;
}

/* Buttons */
.btn{
  display:inline-block; padding:10px 14px; border-radius:10px;
  background: var(--accent); color: var(--text-on-accent);
  text-decoration:none; font-weight:600;
}
.btn:hover{ background: var(--accent-hover); }.btn.small{padding:8px 12px;font-size:14px}
.btn-ghost:hover{background:rgba(255,255,255,0.1)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));border:0;box-shadow:0 6px 28px rgba(0,229,255,.15)}
.btn-primary .btn-glow{position:absolute;inset:-2px;border-radius:14px; background:radial-gradient(60% 80% at 30% 20%, rgba(0,229,255,.45), transparent 60%), radial-gradient(50% 60% at 80% 80%, rgba(123,124,246,.4), transparent 60%); filter:blur(14px); opacity:.6; pointer-events:none}
.cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}

/* Apps/Card */
.apps{padding:26px 20px;display:grid;gap:24px}
.card{padding:18px;border-radius:16px;border:1px solid var(--line);transform-style:preserve-3d;transition:transform .2s ease}
.card-header{display:flex;gap:8px;margin-bottom:6px;opacity:.8}
.dot{width:10px;height:10px;border-radius:50%}
.dot--cyan{background:var(--cyan)}
.dot--pink{background:var(--pink)}
.dot--violet{background:var(--violet)}
.card-cta{margin-top:12px;display:flex;gap:10px}

/* Page blocks */
.page{padding:22px;margin-top:16px}
.footer{margin:30px 0 40px;padding:14px 18px;text-align:center;color:#c9cff7}

/* Small */
@media (max-width:640px){
  .nav{padding:10px 12px}
  .nav-links a{margin-left:12px}
  .hero{padding-top:60px}
}
.muted{color:var(--muted)}
/* === Merch (scoped; doesn't touch global styles) === */
.merch{ padding:56px 0; }
.merch .wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }
.merch .head{ margin-bottom:16px; }
.merch .head .section-title{ color:#eaf0ff; }
.merch .lead{ color:var(--muted); max-width:720px; }

.merch .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }

.merch-grid{
  list-style:none; padding:0; margin:22px 0 0;
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.merch .card{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease;
}
.merch .card:hover{ transform:translateY(-2px); box-shadow:0 12px 38px rgba(0,0,0,.32); }

.merch .thumb{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  background: radial-gradient(60% 80% at 50% 40%, rgba(255,255,255,.06), transparent 70%);
}
.merch .card-body{ padding:12px 14px 16px; }
.merch .title{ font-size:16px; margin:0 0 6px; }
.merch .meta{ font-size:13px; color:var(--muted); }

.merch .mini{ font-size:12px; color:var(--muted); margin-top:12px; }

/* === Merch: compact layout (more items side-by-side) === */
.merch .merch-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0,1fr)); /* phones: 2-up */
}

/* tablet: 3-up */
@media (min-width:640px){
  .merch .merch-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* desktop: 4-up */
@media (min-width:1024px){
  .merch .merch-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* slightly smaller cards/buttons/text to match the tighter grid */
.merch .card-body{ padding:10px 12px; }
.merch .title{ font-size:14px; margin:0 0 6px; }
.merch .meta{ font-size:12px; }
.merch .btn.small{ padding:6px 10px; font-size:13px; }

/* keep thumbnails square but visually lighter */
.merch .thumb{
  aspect-ratio:1/1; object-fit:cover; width:100%;
  background:radial-gradient(60% 80% at 50% 40%, rgba(255,255,255,.05), transparent 70%);
}

/* === Merch: force multi-column layout + kill bullets === */
.merch ul,
.merch li { list-style: none; margin: 0; padding: 0; }

/* Use flex as a bullet-proof fallback (works everywhere) */
.merch .merch-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}

/* phones: 2-up */
.merch .merch-grid > li{
  flex: 1 1 calc(50% - 12px);
  max-width: calc(50% - 12px);
}

/* tablet: 3-up */
@media (min-width: 640px){
  .merch .merch-grid > li{
    flex-basis: calc(33.333% - 12px);
    max-width: calc(33.333% - 12px);
  }
}

/* desktop: 4-up */
@media (min-width: 1024px){
  .merch .merch-grid > li{
    flex-basis: calc(25% - 12px);
    max-width: calc(25% - 12px);
  }
}

/* tidy up the internals so cards feel lighter in the tighter grid */
.merch .card-body{ padding:10px 12px; }
.merch .title{ font-size:14px; margin:0 0 6px; }
.merch .meta{ font-size:12px; }
.merch .btn.small{ padding:6px 10px; font-size:13px; }

/* keep images neatly square */
.merch .thumb{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background: radial-gradient(60% 80% at 50% 40%, rgba(255,255,255,.05), transparent 70%);
}
/* Footer: centered card, aligned to container width */
footer.footer{
  max-width:1080px;        /* lock to same width as .container */
  margin:48px auto 64px;   /* center it */
  padding:18px 22px;
  text-align:center;
  border-radius:16px;
}
footer.footer.glass{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 8px 32px rgba(0,0,0,.25);  /* subtle lift to match cards */
}
footer.footer p{ margin:6px 0; }
/* Full-bleed bar with centered inner container */
.site-footer{
  margin-top:48px;
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
}
.site-footer .footer{
  margin:0 auto;           /* keep inner box centered */
  box-shadow:none;         /* optional: flatter */
}
/* Center the CTA button on each merch card (without touching header CTAs) */
.merch .card .cta-row{
  justify-content: center;   /* center horizontally */
  width: 100%;
}

/* optional: make single-button rows tighter */
.merch .card .cta-row { gap: 0; }
.merch .card .cta-row .btn.small { margin: 0 auto; }
/* Support: squared tip buttons (same colors as chips) */
#support .btn-tip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px;          /* square like .btn */
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  color:#cfd6ff; font-weight:800; font-size:14px; text-decoration:none;
}
#support .btn-tip:hover{ background:rgba(255,255,255,0.10); color:#eaf0ff; }
/* Merch: QR explainer */
.merch .qr-note{
  color:#cfd6ff; opacity:.92; margin:8px 0 4px; max-width:720px;
}
.merch .perks{
  list-style:none; padding:0; margin:10px 0 6px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.merch .perks li{
  font-size:13px; color:#cfd6ff;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,0.06); border:1px solid var(--line);
}
/* Merch: keep the QR sentence on one line on desktop */
@media (min-width: 900px){
  .merch .qr-note{
    max-width: none;     /* remove the 720px cap */
    white-space: nowrap; /* prevent wrapping */
  }
}



/* ===== Mobile polish (phones) ===== */
@media (max-width: 480px){
  html,body{ font-size:15px; }

  .container{ padding:16px; }

  /* Nav */
  .nav{ padding:10px 12px; }
  .brand{ gap:8px; }
  .brand-text{ font-size:18px; }
  .nav-links a{ margin-left:12px; font-size:14px; }

  /* Hero */
  .hero{ padding:54px 16px 12px; }
  .glow-text{ font-size:28px; line-height:1.15; }
  .subtitle{ font-size:14px; }
  .chips{ gap:8px; margin-top:12px; }
  .chip{ padding:6px 10px; font-size:12px; }

  /* Buttons */
  .btn{ font-size:15px; padding:10px 14px; border-radius:12px; }
  .btn.small{ font-size:14px; padding:8px 12px; }

  /* “Our apps” card */
  .apps{ padding:16px 0; }
  .apps .card{ padding:16px; }
  .apps .card h3{ font-size:22px; }
  .apps .card p{ font-size:15px; }
  .card-cta{ gap:10px; }

  /* Support block (overrides inline sizes) */
  #support{ padding:20px !important; }
  #support h2{ font-size:22px !important; }
  #support p{ font-size:15px !important; }
  #support a[style]{ padding:10px 14px !important; font-size:15px !important; border-radius:10px !important; }
  #support .btn-tip{ padding:8px 12px; font-size:13px; }

  /* Merch header/explainer */
  .section-title{ font-size:20px; }
  .merch .head{ margin-bottom:12px; }
  .merch .qr-note{ white-space:normal; font-size:14px; }
  .merch .perks{ gap:6px; }
  .merch .perks li{ font-size:12px; padding:6px 9px; }
  .merch .merch-grid{ gap:10px; }
  .merch .card-body{ padding:10px 12px; }
}

/* Extra-small phones */
@media (max-width: 360px){
  .glow-text{ font-size:24px; }
  .btn{ font-size:14px; }
}
/* ===== Extra mobile polish ===== */

/* phones */
@media (max-width: 480px){

  html,body{ font-size:14.5px; }
  .container{ padding:14px; }

  /* Nav */
  .nav{ padding:8px 10px; border-radius:12px; }
  .brand-text{ font-size:16px; letter-spacing:.2px; }
  .nav-links a{ font-size:13px; margin-left:10px; }

  /* Hero */
  .hero{ padding:46px 14px 10px; }
  .glow-text{ font-size:26px; line-height:1.15; margin:0 0 8px; }
  .subtitle{ font-size:14px; }

  /* Chips: 2-up grid, smaller */
  .chips{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .chip{ width:100%; padding:6px 9px; font-size:12px; }

  /* Hero CTAs: tidy spacing, can be full-width */
  .cta{ gap:10px; }
  .hero .cta .btn{ width:100%; max-width:320px; }

  /* “Our apps” section */
  .section-title{ font-size:18px; }
  .apps{ padding:12px 0; }
  .apps .card{ padding:14px; border-radius:14px; }
  .apps .card h3{ font-size:20px; }
  .apps .card p{ font-size:14px; }

  /* Support block */
  #support{ padding:18px !important; border-radius:14px !important; }
  #support h2{ font-size:20px !important; }
  #support p{ font-size:14px !important; }
  #support a[style]{ padding:10px 14px !important; font-size:15px !important; border-radius:10px !important; }
  #support .btn-tip{ padding:8px 12px; font-size:13px; }

  /* Merch header/explainer */
  .merch .head{ margin-bottom:10px; }
  .merch .qr-note{ white-space:normal; font-size:14px; }
  .merch .perks{ gap:6px; }
  .merch .perks li{ font-size:12px; padding:6px 8px; }

  /* Merch grid/cards smaller */
  .merch .merch-grid{ gap:10px; }
  .merch .card{ border-radius:14px; }
  .merch .card-body{ padding:10px 12px; }
  .merch .title{ font-size:15px; }
  .merch .meta{ font-size:12px; }
  .merch .btn.small{ padding:8px 10px; font-size:13px; }

  /* Merch header CTA not oversized */
  .merch .head .btn{ width:100%; max-width:300px; }
}

/* very small phones: make merch 1-up so nothing feels cramped */
@media (max-width: 360px){
  .glow-text{ font-size:22px; }
  .merch .merch-grid > li{
    flex-basis: 100%;
    max-width: 100%;
  }
  .btn{ font-size:14px; }
}

/* Footer trim on mobile */
@media (max-width: 480px){
  footer.footer,
  .site-footer .footer{
    padding:12px 14px;
    border-radius:12px;
  }
  footer.footer p,
  .site-footer .footer p{ font-size:13px; line-height:1.5; }
}/* Phones & small tablets */
@media (max-width:640px){
  /* hero buttons a little shorter */
  .hero .cta .btn{ padding:10px 14px; font-size:16px; }

  /* "Shop the collection" button shorter too */
  .merch .head .btn{ padding:10px 14px; font-size:16px; }

  /* card CTA buttons a touch smaller */
  .merch .card .btn.small{ padding:8px 12px; font-size:14px; }
}
@media (max-width:640px){
  #support{ padding:18px !important; }
  #support h2{ font-size:20px !important; margin:0 0 8px !important; }
  #support p{ font-size:14px !important; }
  #support a[style]{ padding:9px 12px !important; font-size:14px !important; border-radius:10px !important; }
  #support .btn-tip{ padding:7px 10px; font-size:13px; border-radius:10px; }
}
/* Phones: use a 4:5 portrait crop instead of a square */
@media (max-width:640px){
  .merch .thumb{
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
  }
  .merch .title{ font-size:13px; }
  .merch .meta{ font-size:12px; }
  .merch .card-body{ padding:10px 12px; }
}
@media (max-width:640px){
  footer.footer{ padding:12px 16px; }
  footer.footer p{ margin:4px 0; font-size:13px; }
  /* hide duplicate Privacy link in footer on phones */
  footer.footer a[href="/privacy"]{ display:none; }
}
/* --- NAV FIX OVERRIDES (keep at end of file) --- */
.nav { display:flex; align-items:center; justify-content:space-between; }
.nav .nav-links { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.nav .nav-links a { display:inline-flex; margin-left:0 !important; white-space:nowrap; }
@media (max-width: 640px){ .nav .nav-links { gap:14px; } }