/* ============================================================
   DRAFTREADY.AI PLATFORM — Master Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Bebas+Neue&display=swap');

:root {
  --neon:        #00f5d4;
  --neon-dark:   #00c4a9;
  --neon-dim:    rgba(0,245,212,0.12);
  --purple:      #7c3aed;
  --purple-light:#a78bfa;
  --purple-dim:  rgba(124,58,237,0.15);
  --gold:        #f59e0b;
  --gold-dim:    rgba(245,158,11,0.12);
  --red:         #ef4444;
  --red-dim:     rgba(239,68,68,0.12);
  --blue:        #3b82f6;
  --blue-dim:    rgba(59,130,246,0.12);
  --green:       #22c55e;
  --green-dim:   rgba(34,197,94,0.1);

  --bg:          #080b14;
  --bg2:         #0d1120;
  --bg3:         #111827;
  --bg4:         #1a2035;
  --card:        #0f1623;
  --card2:       #151d2e;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.12);

  --text:        #f0f4ff;
  --text2:       #8892b0;
  --text3:       #4a5568;

  --grad-neon:   linear-gradient(135deg,#00f5d4,#7c3aed);
  --grad-gold:   linear-gradient(135deg,#f59e0b,#ef4444);
  --grad-card:   linear-gradient(145deg,#0f1623,#151d2e);

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-neon: 0 0 40px rgba(0,245,212,0.15);
  --shadow-purple: 0 0 40px rgba(124,58,237,0.2);
  --nav-h: 66px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.6}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}

/* ── Selection ── */
::selection{background:rgba(0,245,212,0.2);color:var(--neon)}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;
  background:rgba(8,11,20,0.88);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
/* Transparent mode — sits over the hero cinematic banner */
.navbar.hero-nav{
  background:rgba(8,11,20,0.15);
  backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;padding:4px 0}
.nav-logo-svg{height:44px;width:auto;filter:drop-shadow(0 0 8px rgba(0,245,212,0.35));transition:filter .25s}
.nav-brand:hover .nav-logo-svg{filter:drop-shadow(0 0 14px rgba(0,245,212,0.6))}

.nav-center{display:flex;align-items:center;gap:2px}
.nav-link{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-sm);text-decoration:none;color:var(--text2);font-size:0.82rem;font-weight:500;transition:all .2s;cursor:pointer;border:none;background:none;white-space:nowrap}
.nav-link:hover{color:var(--text);background:var(--bg4)}
.nav-link.active{color:var(--neon);background:var(--neon-dim)}
.nav-link i{font-size:0.85rem}

/* ════════════════════════════════════════════════════
   MY ACCOUNT DROPDOWN NAV
════════════════════════════════════════════════════ */
.nav-dropdown{
  position:relative;
  display:flex;
  align-items:center;
}

/* Trigger button — glowing neon pill style */
.nav-dropdown-trigger{
  background:linear-gradient(135deg,rgba(0,245,212,.12),rgba(124,58,237,.12)) !important;
  border:1px solid rgba(0,245,212,.3) !important;
  color:var(--neon) !important;
  border-radius:var(--r-full) !important;
  padding:6px 14px !important;
  gap:7px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  transition:all .2s !important;
}
.nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger{
  background:linear-gradient(135deg,rgba(0,245,212,.22),rgba(124,58,237,.22)) !important;
  border-color:var(--neon) !important;
  box-shadow:0 0 16px rgba(0,245,212,.2);
}
.nav-chevron{
  font-size:.65rem !important;
  transition:transform .25s ease;
  margin-left:1px;
}
.nav-dropdown.is-open .nav-chevron{
  transform:rotate(180deg);
}

/* Dropdown panel */
.nav-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  width:280px;
  background:var(--bg2);
  border:1px solid rgba(0,245,212,.2);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,245,212,.06);
  padding:.6rem;
  z-index:2000;
  animation:ddFadeIn .18s ease;
}
.nav-dropdown.is-open .nav-dropdown-menu{
  display:block;
}
@keyframes ddFadeIn{
  from{ opacity:0; transform:translateX(-50%) translateY(-6px); }
  to{   opacity:1; transform:translateX(-50%) translateY(0);    }
}

/* Sections */
.nav-dropdown-section{
  padding:.25rem 0;
}
.nav-dropdown-label{
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text3);
  padding:.3rem .75rem .2rem;
}
.nav-dropdown-divider{
  height:1px;
  background:var(--border);
  margin:.35rem .4rem;
}

/* Each menu item */
.nav-dropdown-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  width:100%;
  padding:.55rem .75rem;
  border:none;
  background:none;
  border-radius:12px;
  cursor:pointer;
  transition:background .15s, transform .15s;
  text-align:left;
}
.nav-dropdown-item:hover{
  background:rgba(255,255,255,.05);
  transform:translateX(3px);
}
.nav-dropdown-item.active{
  background:rgba(0,245,212,.07);
}

/* Icon circle */
.nav-dd-icon{
  width:32px;height:32px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;
  flex-shrink:0;
}

/* Text block */
.nav-dd-text{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.nav-dd-text strong{
  font-size:.82rem;
  font-weight:700;
  color:var(--text);
  line-height:1.2;
}
.nav-dd-text span{
  font-size:.7rem;
  color:var(--text3);
  line-height:1.2;
}

/* Footer note */
.nav-dropdown-footer{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem .75rem .3rem;
  font-size:.68rem;
  color:var(--text3);
}

/* Mobile: flatten dropdown into nav-center column */
@media(max-width:900px){
  .nav-dropdown{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  .nav-dropdown-trigger{
    border-radius:var(--r-sm) !important;
    justify-content:space-between;
  }
  .nav-dropdown-menu{
    position:static;
    transform:none;
    width:100%;
    border-radius:12px;
    box-shadow:none;
    border:1px solid var(--border);
    margin-top:.25rem;
    animation:none;
  }
  .nav-dropdown.is-open .nav-dropdown-menu{
    display:block;
  }
}

.nav-right{display:flex;align-items:center;gap:8px}
.nav-key-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-sm);background:var(--bg4);border:1px solid var(--border2);color:var(--text2);font-size:0.8rem;font-weight:600;cursor:pointer;transition:all .2s}
.nav-key-btn:hover{border-color:var(--neon);color:var(--neon)}
.nav-key-btn.connected{border-color:var(--neon);color:var(--neon);background:var(--neon-dim)}

/* ── Login / User chip ── */
.nav-login-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:var(--r-full);
  background:var(--neon);color:#000;
  font-size:.8rem;font-weight:800;cursor:pointer;
  border:none;transition:all .2s;white-space:nowrap;
}
.nav-login-btn:hover{ background:#fff; transform:translateY(-1px); }
.nav-user-chip{
  display:flex;align-items:center;gap:6px;
  background:var(--bg4);border:1px solid var(--border2);
  border-radius:var(--r-full);padding:3px 10px 3px 3px;
}
.nav-user-avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--grad-neon);border:none;cursor:pointer;
  font-size:.8rem;font-weight:800;color:#000;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nav-user-name{ font-size:.8rem;font-weight:700;color:var(--text);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.nav-user-out{
  background:none;border:none;color:var(--text3);
  cursor:pointer;font-size:.8rem;padding:2px 0 2px 4px;
  transition:color .2s;
}
.nav-user-out:hover{ color:var(--red); }

.nav-profile-btn{width:36px;height:36px;border-radius:50%;background:var(--grad-neon);border:none;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;object-fit:cover}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:5px;background:none;border:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--text2);border-radius:2px;transition:all .3s}

/* ════════════════════════════════════════════════════
   AUTH MODAL
════════════════════════════════════════════════════ */
.auth-modal{ padding:1.75rem; }
.auth-field{ margin-bottom:1rem; }
.auth-field label{
  display:block;font-size:.78rem;font-weight:700;
  color:var(--text2);margin-bottom:.4rem;letter-spacing:.03em;
}
.auth-link{
  background:none;border:none;color:var(--neon);
  font-size:.82rem;font-weight:600;cursor:pointer;
  padding:0;text-decoration:underline;text-underline-offset:2px;
}
.auth-link:hover{ color:#fff; }
.auth-switch{ font-size:.82rem;color:var(--text3);text-align:center;margin-top:.5rem; }
.auth-divider{
  display:flex;align-items:center;gap:.75rem;
  color:var(--text3);font-size:.75rem;
  margin:.85rem 0;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.w-full{ width:100%; }

/* ════════════════════════════════════════════════════
   GATE OVERLAY
════════════════════════════════════════════════════ */
.gate-overlay{
  position:fixed;inset:0;z-index:1500;
  background:rgba(8,11,20,.92);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.gate-overlay-box{
  text-align:center;max-width:460px;width:100%;
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-xl);padding:2.5rem 2rem;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(0,245,212,.08);
  animation:slideUp .3s ease;
}
@keyframes slideUp{ from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }
.gate-overlay-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--neon-dim);border:1px solid rgba(0,245,212,.25);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem;
}
.gate-overlay-icon-i{ font-size:1.5rem;color:var(--neon); }
.gate-overlay-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.9rem;line-height:1.1;color:var(--text);
  margin-bottom:.6rem;
}
.gate-overlay-sub{ font-size:.92rem;color:var(--text2);line-height:1.65; }

/* ============================================================
   PAGES
   ============================================================ */
.page{display:none;min-height:100vh;padding-top:var(--nav-h)}
.page.active{display:block}
.container{max-width:1140px;margin:0 auto;padding:0 1.5rem}
.section{padding:2.5rem 0}

/* ============================================================
   HERO / DASHBOARD
   ============================================================ */
.dash-hero{
  padding:3rem 0 2rem;position:relative;overflow:hidden;
}
.dash-hero::before{
  content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(124,58,237,0.12) 0%,transparent 70%);pointer-events:none;
}
.dash-hero::after{
  content:'';position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,245,212,0.06) 0%,transparent 70%);pointer-events:none;
}
.dash-greeting{font-size:0.8rem;color:var(--neon);font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:.5rem}
.dash-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,6vw,4.5rem);line-height:1;margin-bottom:.75rem}
.dash-name span{background:var(--grad-neon);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.dash-tagline{color:var(--text2);font-size:1rem;max-width:520px;margin-bottom:2rem}

/* ── Stat Cards Row ── */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:1.5rem 0}
.stat-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.25rem 1.5rem;position:relative;overflow:hidden;transition:all .25s;
}
.stat-card::before{content:'';position:absolute;inset:0;opacity:0;background:var(--grad-neon);transition:opacity .3s}
.stat-card:hover{border-color:var(--neon);transform:translateY(-3px);box-shadow:var(--shadow-neon)}
.stat-val{font-size:1.8rem;font-weight:800;line-height:1;margin-bottom:3px}
.stat-lbl{font-size:0.75rem;color:var(--text2);font-weight:500}
.stat-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.8rem;opacity:.12}

/* ── Quick Action Grid ── */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:2rem 0}
.quick-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.5rem;cursor:pointer;text-decoration:none;transition:all .25s;display:block;
  position:relative;overflow:hidden;
}
.quick-card::after{content:'';position:absolute;inset:0;background:var(--grad-neon);opacity:0;transition:opacity .3s}
.quick-card:hover{transform:translateY(-4px);box-shadow:0 8px 40px rgba(0,0,0,0.4)}
.quick-card:hover .quick-icon{transform:scale(1.1)}
.quick-icon{font-size:2rem;margin-bottom:.75rem;display:block;transition:transform .3s}
.quick-title{font-weight:700;font-size:.95rem;margin-bottom:.3rem}
.quick-desc{font-size:.8rem;color:var(--text2);line-height:1.5}
.quick-arrow{position:absolute;top:1rem;right:1rem;color:var(--text3);font-size:.8rem;transition:all .2s}
.quick-card:hover .quick-arrow{color:var(--neon);transform:translateX(3px)}

/* ── Activity Feed ── */
.activity-feed{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem}
.activity-item{display:flex;align-items:flex-start;gap:.85rem;padding:.75rem 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none;padding-bottom:0}
.activity-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;margin-top:2px}
.activity-text{font-size:.85rem;color:var(--text);line-height:1.5}
.activity-time{font-size:.75rem;color:var(--text3);margin-top:2px}

/* ============================================================
   DIGITAL CARD
   ============================================================ */
.card-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding-bottom:3rem;align-items:start}

/* ── Live Card Preview ── */
.digital-card-preview{
  background:linear-gradient(145deg,#0a0e1a,#111827);
  border:1px solid var(--border2);border-radius:var(--r-xl);
  overflow:hidden;position:sticky;top:calc(var(--nav-h) + 1.5rem);
  box-shadow:0 20px 80px rgba(0,0,0,0.6), var(--shadow-neon);
}
/*
  Card banner — overflow is NOT hidden here so the avatar circle
  can overlap upward and remain fully visible above the banner.
  The image itself is clipped by its own absolute+inset positioning.
*/
.card-banner{
  height:180px;
  position:relative;
  background:linear-gradient(135deg,#0d0d1a,#1a0533);
  /* NO overflow:hidden — avatar must poke above this */
}
/* Banner real photo background */
.card-banner-bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  z-index:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0; /* match card corners */
  transition:opacity .3s;
  overflow:hidden; /* clip happens on the img element's own box */
}
.card-banner-gfx{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,rgba(10,0,30,0.55) 0%,rgba(0,20,20,0.45) 100%);
}
.card-banner-pattern{
  position:absolute;inset:0;opacity:.08;z-index:2;
  background-image:repeating-linear-gradient(45deg,var(--neon) 0,var(--neon) 1px,transparent 0,transparent 50%);
  background-size:20px 20px;
}
.card-banner-level{
  position:absolute;top:1rem;right:1rem;z-index:3;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15);border-radius:var(--r-full);
  padding:4px 12px;font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase;
}
.card-share-btn{
  position:absolute;top:1rem;left:1rem;z-index:3;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15);border-radius:var(--r-full);
  padding:6px 12px;font-size:.72rem;color:var(--text2);cursor:pointer;
  display:flex;align-items:center;gap:5px;transition:all .2s;
}
.card-share-btn:hover{color:var(--neon);border-color:var(--neon)}

.card-body{padding:0 1.5rem 1.5rem}
/*
  Avatar wrap floats above the banner using z-index.
  A positive z-index here ensures the circle always renders
  on top regardless of the banner's stacking context.
*/
.card-avatar-wrap{
  margin-top:-52px;
  margin-bottom:.75rem;
  position:relative;
  display:inline-block;
  z-index:10;          /* sits above .card-banner and its children */
}
.card-avatar{
  width:100px;height:100px;border-radius:50%;border:4px solid var(--bg2);
  background:var(--grad-neon);display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;overflow:hidden;
  position:relative;   /* establishes stacking context for the photo */
  z-index:10;
}
/* Photo inside avatar circle */
.card-avatar-photo{
  width:100%;height:100%;object-fit:cover;
  object-position:center 20%; /* default — overridden live by JS slider */
  border-radius:50%;display:block;
}
/* Emoji fallback inside avatar */
#previewAvatarEmoji{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:2.5rem;
}
/* Photo URL input hint */
.card-photo-hint{
  font-size:.72rem;color:var(--text3);margin-top:.35rem;line-height:1.5;
}
.card-verified{
  position:absolute;bottom:4px;right:4px;width:24px;height:24px;
  background:var(--neon);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:#000;font-weight:700;border:2px solid var(--bg2);
}
.card-name{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;line-height:1;letter-spacing:.5px}
.card-title-line{font-size:.85rem;color:var(--text2);margin:.2rem 0 .6rem}
.card-sport-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem}
.sport-badge{
  padding:4px 10px;border-radius:var(--r-full);font-size:.72rem;font-weight:700;
  background:var(--neon-dim);color:var(--neon);border:1px solid rgba(0,245,212,.25);letter-spacing:.3px;
}

/* ── Stat Grid on Card ── */
.card-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:1rem 0}
.card-stat-box{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:var(--r-md);padding:.75rem .5rem;text-align:center;
}
.card-stat-val{font-size:1.2rem;font-weight:800;color:var(--neon);line-height:1}
.card-stat-lbl{font-size:.65rem;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

/* ── Third-Party Stats Link Button (on card preview) ── */
.card-stats-link-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:.5rem .75rem;border-radius:var(--r-md);
  background:rgba(0,245,212,.08);border:1px solid rgba(0,245,212,.3);
  color:var(--neon);font-size:.78rem;font-weight:700;text-decoration:none;
  transition:all .2s;cursor:pointer;
}
.card-stats-link-btn:hover{background:rgba(0,245,212,.16);border-color:rgba(0,245,212,.6);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,245,212,.15)}
.card-stats-verified{
  margin-left:auto;font-size:.66rem;font-weight:800;
  background:rgba(34,197,94,.15);color:var(--green);
  padding:2px 7px;border-radius:20px;border:1px solid rgba(34,197,94,.25);letter-spacing:.3px;
}

/* ── Highlight Reel Button (public card) ── */
.card-highlight-reel-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:.55rem .75rem;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(245,158,11,.08));
  border:1px solid rgba(239,68,68,.35);
  color:#f87171;font-size:.8rem;font-weight:700;text-decoration:none;
  transition:all .2s;cursor:pointer;margin:.5rem 0;
}
.card-highlight-reel-btn:hover{
  background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(245,158,11,.15));
  border-color:rgba(239,68,68,.65);transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(239,68,68,.2);color:#fca5a5;
}
.card-highlight-play{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(239,68,68,.25);border:1px solid rgba(239,68,68,.5);
  font-size:.65rem;color:#f87171;flex-shrink:0;
}

/* ── Stats Source Toggle (card builder) ── */
.stats-source-toggle{
  display:flex;gap:6px;margin:.65rem 0 1rem;
  background:var(--bg3);padding:4px;border-radius:var(--r-md);
}
.stats-src-btn{
  flex:1;padding:.5rem .75rem;border-radius:calc(var(--r-md) - 2px);
  background:transparent;border:none;color:var(--text3);
  font-size:.8rem;font-weight:600;cursor:pointer;transition:all .18s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.stats-src-btn:hover{color:var(--text2)}
.stats-src-btn.active{background:var(--card2);color:var(--neon);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.stats-verified-badge{
  font-size:.63rem;font-weight:800;
  background:rgba(34,197,94,.15);color:var(--green);
  padding:1px 6px;border-radius:20px;border:1px solid rgba(34,197,94,.25);
}

/* ── Stats Link Builder (card builder) ── */
.stats-link-info{
  display:flex;gap:.75rem;align-items:flex-start;
  background:rgba(0,245,212,.05);border:1px solid rgba(0,245,212,.18);
  border-radius:var(--r-md);padding:.75rem .9rem;margin-bottom:.85rem;
}
.stats-platform-btn{font-size:.72rem !important;padding:.25rem .6rem !important}
#statsLinkPreview{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* ── Highlight Clip Row (builder) ── */
.highlight-clip-row{
  display:flex;align-items:flex-start;gap:8px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r-md);padding:.6rem .75rem;margin-bottom:6px;
}
.hcr-num{
  min-width:22px;height:22px;border-radius:50%;
  background:var(--neon-dim);color:var(--neon);
  font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  margin-top:6px;flex-shrink:0;
}
.hcr-fields{flex:1;display:flex;flex-direction:column;gap:5px}
.hcr-del,.ssr-del{
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);
  color:var(--red);border-radius:var(--r-md);padding:5px 8px;
  cursor:pointer;font-size:.75rem;margin-top:4px;flex-shrink:0;transition:all .18s;
}
.hcr-del:hover,.ssr-del:hover{background:rgba(239,68,68,.2);border-color:var(--red)}

/* ── Clip Button on Card Preview ── */
.card-clip-btn{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:.55rem .9rem;border-radius:var(--r-md);
  background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.25);
  color:var(--purple-light);font-size:.8rem;font-weight:700;
  text-decoration:none;transition:all .2s;
}
.card-clip-btn:hover{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.55);transform:translateY(-1px);box-shadow:0 4px 14px rgba(167,139,250,.15)}
.card-clip-btn i.fa-play-circle{color:var(--purple-light);font-size:.95rem}

/* ── Full Game Video Button ── */
.card-game-video-btn{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:.55rem .9rem;border-radius:var(--r-md);
  background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.28);
  color:#60a5fa;font-size:.8rem;font-weight:700;
  text-decoration:none;transition:all .2s;
}
.card-game-video-btn:hover{
  background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.55);
  transform:translateY(-1px);box-shadow:0 4px 14px rgba(59,130,246,.15);
  color:#93c5fd;
}
.card-game-video-btn i.fa-video{color:#60a5fa;font-size:.9rem;flex-shrink:0}

/* ── NCAA Qualifier Badge ── */
.ncaa-qualifier-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:.28rem .7rem;border-radius:var(--r-full);
  background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(251,191,36,.1));
  border:1.5px solid rgba(245,158,11,.55);
  color:#fbbf24;font-size:.7rem;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;
  box-shadow:0 0 10px rgba(245,158,11,.15);
}
.ncaa-qualifier-badge i{ font-size:.75rem; color:#f59e0b; }

/* ── NCAA Toggle Switch ── */
.ncaa-toggle-wrap{ display:inline-flex; }
.ncaa-toggle{
  width:44px;height:24px;border-radius:12px;
  background:var(--bg4);border:1.5px solid var(--border2);
  position:relative;cursor:pointer;transition:background .25s,border-color .25s;
  flex-shrink:0;
}
.ncaa-toggle.active{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  border-color:#f59e0b;
  box-shadow:0 0 10px rgba(245,158,11,.3);
}
.ncaa-toggle-knob{
  position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .25s;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.ncaa-toggle.active .ncaa-toggle-knob{ transform:translateX(20px); }

/* ── Transcript Button ── */
.card-transcript-btn{
  display:flex;align-items:center;gap:9px;
  width:100%;padding:.6rem .95rem;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(167,139,250,.07));
  border:1.5px solid rgba(167,139,250,.35);
  color:#a78bfa;font-size:.8rem;font-weight:700;
  text-decoration:none;transition:all .2s;
  text-align:left;
}
.card-transcript-btn:hover{
  background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(167,139,250,.14));
  border-color:#a78bfa;transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(124,58,237,.2);color:#c4b5fd;
}
.card-transcript-btn i.fa-lock{ color:#a78bfa;font-size:.9rem;flex-shrink:0; }
.transcript-lock-badge{
  margin-left:auto;font-size:.65rem;font-weight:700;letter-spacing:.4px;
  background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.3);
  color:#a78bfa;padding:.15rem .5rem;border-radius:4px;white-space:nowrap;
  text-transform:uppercase;
}

/* ── Live Stream Button ── */
/* ── Ticket Link Button ── */
.card-ticket-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:.65rem 1rem;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(251,191,36,.07));
  border:1.5px solid rgba(245,158,11,.45);
  color:#fbbf24;font-size:.83rem;font-weight:800;text-decoration:none;
  text-transform:uppercase;letter-spacing:.5px;
  transition:all .2s;margin:.5rem 0;
}
.card-ticket-btn:hover{
  background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(251,191,36,.14));
  border-color:#f59e0b;transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(245,158,11,.2);color:#fde68a;
}
.card-ticket-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(245,158,11,.2);border:1px solid rgba(245,158,11,.4);
  font-size:.75rem;flex-shrink:0;
}

/* ── Merch Link Button ── */
.card-merch-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:.65rem 1rem;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(52,211,153,.07));
  border:1.5px solid rgba(16,185,129,.45);
  color:#34d399;font-size:.83rem;font-weight:800;text-decoration:none;
  text-transform:uppercase;letter-spacing:.5px;
  transition:all .2s;margin:.5rem 0;
}
.card-merch-btn:hover{
  background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(52,211,153,.14));
  border-color:#10b981;transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(16,185,129,.22);color:#6ee7b7;
}
.card-merch-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(16,185,129,.2);border:1px solid rgba(16,185,129,.4);
  font-size:.75rem;flex-shrink:0;
}

.card-live-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:.65rem 1rem;border-radius:var(--r-md);
  background:rgba(239,68,68,.1);border:1.5px solid rgba(239,68,68,.4);
  color:#f87171;font-size:.83rem;font-weight:800;text-decoration:none;
  text-transform:uppercase;letter-spacing:.5px;
  transition:all .2s;animation:live-glow 2.5s ease-in-out infinite;
}
.card-live-btn:hover{background:rgba(239,68,68,.2);border-color:#ef4444;transform:translateY(-1px);box-shadow:0 6px 20px rgba(239,68,68,.25)}
@keyframes live-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.0)}
  50%{box-shadow:0 0 0 5px rgba(239,68,68,.12)}
}
.card-live-dot{
  width:10px;height:10px;border-radius:50%;
  background:#ef4444;flex-shrink:0;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.3)}
}

/* ── Sponsor Billboard (scrolling ticker) ── */
.card-billboard{
  width:100%;overflow:hidden;
  background:rgba(255,255,255,.03);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:.5rem 0;margin:.75rem 0 0;position:relative;
}
/* Fade-out edges so scroll looks seamless */
.card-billboard::before,
.card-billboard::after{
  content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none;
}
.card-billboard::before{left:0;background:linear-gradient(to right,var(--card,#1a1f2e),transparent)}
.card-billboard::after{right:0;background:linear-gradient(to left,var(--card,#1a1f2e),transparent)}
.card-billboard-label{
  font-size:.58rem;font-weight:800;letter-spacing:1.5px;
  color:var(--text3);text-align:center;margin-bottom:.35rem;text-transform:uppercase;
}
.card-billboard-track-wrap{overflow:hidden;width:100%}
.card-billboard-track{
  display:flex;align-items:center;gap:0;
  white-space:nowrap;
  animation:ticker 20s linear infinite;
  will-change:transform;
}
.card-billboard-track:hover{ animation-play-state:paused; }
@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* Each sponsor tile */
.card-billboard-item{
  display:inline-flex;align-items:center;gap:8px;
  padding:.4rem 1.2rem;
  border-right:1px solid rgba(255,255,255,.07);
  color:var(--text2);font-size:.8rem;font-weight:700;
  text-decoration:none;white-space:nowrap;
  transition:all .2s;flex-shrink:0;
}
a.card-billboard-item:hover{
  color:var(--neon);
  background:rgba(0,245,212,.05);
}
a.card-billboard-item:hover .card-billboard-logo{
  filter:brightness(1.15) drop-shadow(0 0 6px rgba(0,245,212,.4));
  transform:scale(1.08);
}
/* Logo image — bigger, pill-shaped tile */
.card-billboard-logo{
  height:32px;
  width:auto;
  max-width:80px;
  object-fit:contain;
  border-radius:6px;
  flex-shrink:0;
  transition:all .2s;
  background:rgba(255,255,255,.06);
  padding:3px 6px;
}
/* Fallback icon when no logo */
.card-billboard-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.2);
  color:var(--gold);font-size:.85rem;flex-shrink:0;
}
.card-billboard-name{
  font-weight:800;font-size:.8rem;
  max-width:90px;overflow:hidden;text-overflow:ellipsis;
}
/* Divider dot between logo and name */
.card-billboard-dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.2);flex-shrink:0;
}

/* ── Sponsor Payment Box ── */
.card-sponsor-pay-box{
  border:1px solid rgba(0,245,212,.2);border-radius:var(--r-md);
  background:rgba(0,245,212,.03);padding:.9rem 1rem;margin:.75rem 0 0;
}
.card-sponsor-pay-title{
  font-size:.78rem;font-weight:800;color:var(--neon);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem;
}
#previewSponsorRate{
  font-size:.75rem;color:var(--text3);margin-bottom:.65rem;line-height:1.5;
  min-height:0;
}
.card-pay-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:.45rem .9rem;border-radius:var(--r-md);
  font-size:.78rem;font-weight:700;text-decoration:none;
  transition:all .18s;flex-shrink:0;
}
.card-pay-btn-cashapp{background:rgba(0,210,91,.12);border:1px solid rgba(0,210,91,.3);color:#00d25b}
.card-pay-btn-cashapp:hover{background:rgba(0,210,91,.22);border-color:#00d25b}
.card-pay-btn-venmo{background:rgba(0,139,208,.12);border:1px solid rgba(0,139,208,.3);color:#008bd0}
.card-pay-btn-venmo:hover{background:rgba(0,139,208,.22);border-color:#008bd0}
.card-pay-btn-paypal{background:rgba(0,70,127,.18);border:1px solid rgba(0,112,186,.3);color:#0070ba}
.card-pay-btn-paypal:hover{background:rgba(0,112,186,.25);border-color:#0070ba}

/* ── Agent / Representative block ── */
.card-agent-box{
  border:1px solid rgba(0,245,212,.22);
  border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(0,245,212,.04),rgba(168,85,247,.04));
  padding:.8rem 1rem;
}
.card-agent-label{
  font-size:.64rem;
  font-weight:900;
  color:var(--neon);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:.4rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.card-agent-name{
  font-size:.95rem;
  font-weight:800;
  color:var(--text);
  line-height:1.2;
}
.card-agent-agency{
  font-size:.75rem;
  color:var(--text3);
  margin:.15rem 0 .5rem;
  font-style:italic;
}
.card-agent-contacts{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.card-agent-contact-link{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.72rem;
  font-weight:600;
  color:var(--neon);
  text-decoration:none;
  background:var(--neon-dim);
  border:1px solid rgba(0,245,212,.2);
  border-radius:var(--r-full);
  padding:3px 9px;
  transition:all .18s;
}
.card-agent-contact-link:hover{
  background:rgba(0,245,212,.15);
  border-color:var(--neon);
}

/* ── Sponsor Slot Row (builder) ── */
.sponsor-slot-row{
  display:flex;align-items:flex-start;gap:8px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r-md);padding:.6rem .75rem;margin-bottom:6px;
}
.ssr-num{
  min-width:22px;height:22px;border-radius:50%;
  background:rgba(245,158,11,.12);color:var(--gold);
  font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  margin-top:6px;flex-shrink:0;
}
.ssr-fields{flex:1;display:flex;flex-direction:column;gap:5px}

/* ── Sponsor Payment Rows (builder) ── */
.spay-grid{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.75rem}
.spay-row{
  display:flex;align-items:center;gap:.6rem;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r-md);padding:.55rem .75rem;
}
.spay-icon{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;
}
.spay-cashapp{background:rgba(0,210,91,.15);color:#00d25b}
.spay-venmo{background:rgba(0,139,208,.15);color:#008bd0}
.spay-paypal{background:rgba(0,112,186,.15);color:#0070ba}
.spay-row .form-input{flex:1;margin:0}

/* ── Video Embed Wrapper (16:9 ratio trick) ── */
#previewVideoEmbed{
  position:relative;width:100%;padding-top:56.25%;
  border-radius:var(--r-md);overflow:hidden;
  background:#000;margin:.75rem 0 0;
}
#previewVideoEmbed iframe{
  position:absolute;top:0;left:0;
  width:100%;height:100%;border:none;
}

/* ── Card Bio ── */
.card-bio{font-size:.84rem;color:var(--text2);line-height:1.7;margin:1rem 0;padding:1rem;background:rgba(255,255,255,.03);border-radius:var(--r-md);border:1px solid var(--border)}

/* ── Card Highlights ── */
.card-highlights{margin:1rem 0}
.highlight-tag{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
  background:var(--purple-dim);border:1px solid rgba(167,139,250,.2);
  color:var(--purple-light);border-radius:var(--r-full);font-size:.75rem;font-weight:600;margin:3px;
}

/* ── Card Actions ── */
.card-actions{display:flex;gap:8px;margin-top:1.25rem}
.card-action-btn{
  flex:1;padding:.65rem;border-radius:var(--r-md);font-size:.8rem;font-weight:700;
  cursor:pointer;border:none;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.card-action-primary{background:var(--grad-neon);color:#000}
.card-action-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,245,212,.3)}
.card-action-secondary{background:var(--bg4);color:var(--text2);border:1px solid var(--border2)}
.card-action-secondary:hover{color:var(--neon);border-color:var(--neon)}

/* ── Card Social ── */
.card-social{display:flex;gap:8px;margin-top:1rem;justify-content:center}
.social-link{
  width:36px;height:36px;border-radius:var(--r-sm);background:var(--bg4);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:.9rem;text-decoration:none;transition:all .2s;
}
.social-link:hover{color:var(--neon);border-color:var(--neon);background:var(--neon-dim)}

/* ── QR Code section ── */
.card-qr{
  margin-top:1rem;padding:1rem;background:rgba(255,255,255,.03);border-radius:var(--r-md);
  border:1px dashed var(--border2);text-align:center;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group{margin-bottom:1.1rem}
.form-label{display:block;font-size:.8rem;font-weight:600;color:var(--text2);margin-bottom:.4rem;letter-spacing:.3px}
.form-control{
  width:100%;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r-sm);
  padding:.7rem 1rem;color:var(--text);font-family:'Inter',sans-serif;font-size:.88rem;
  transition:border-color .2s,box-shadow .2s;resize:vertical;
}
.form-control:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,245,212,.1)}
.form-control::placeholder{color:var(--text3)}
select.form-control{
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238892b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:2.2rem;
}
.form-hint{font-size:.75rem;color:var(--text3);margin-top:.3rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:.65rem 1.4rem;border-radius:var(--r-sm);font-family:'Inter',sans-serif;
  font-size:.875rem;font-weight:700;cursor:pointer;border:none;transition:all .2s;
  text-decoration:none;white-space:nowrap;letter-spacing:.2px;
}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-neon{background:var(--grad-neon);color:#000;box-shadow:0 4px 20px rgba(0,245,212,.25)}
.btn-neon:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,245,212,.35)}
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 4px 20px rgba(124,58,237,.3)}
.btn-purple:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(124,58,237,.4)}
.btn-gold{background:var(--grad-gold);color:#fff}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(245,158,11,.3)}
.btn-ghost{background:var(--bg4);color:var(--text2);border:1px solid var(--border2)}
.btn-ghost:hover{color:var(--neon);border-color:var(--neon);background:var(--neon-dim)}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:.45rem 1rem;font-size:.78rem}
.btn-lg{padding:.85rem 2rem;font-size:1rem}
.btn-block{width:100%}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--r-sm)}

/* ============================================================
   CARDS & PANELS
   ============================================================ */
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.5rem;transition:border-color .2s;
}
.panel:hover{border-color:var(--border2)}
.panel-title{font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:8px;margin-bottom:.3rem}
.panel-sub{font-size:.8rem;color:var(--text3);margin-bottom:1.1rem}
.panel-neon{border-color:rgba(0,245,212,.2);box-shadow:var(--shadow-neon)}
.panel-purple{border-color:rgba(124,58,237,.25);box-shadow:var(--shadow-purple)}
.panel-gold{border-color:rgba(245,158,11,.2)}

/* ── Page Header ── */
.page-head{padding:2.5rem 0 1.5rem;text-align:center}
.page-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:var(--r-full);
  font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:.85rem;
}
.badge-neon{background:var(--neon-dim);color:var(--neon);border:1px solid rgba(0,245,212,.25)}
.badge-purple{background:var(--purple-dim);color:var(--purple-light);border:1px solid rgba(167,139,250,.25)}
.badge-gold{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(245,158,11,.25)}
.page-head h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;letter-spacing:.5px;margin-bottom:.75rem}
.page-head p{color:var(--text2);font-size:1rem;max-width:560px;margin:0 auto}
.grad-text{background:var(--grad-neon);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.grad-text-gold{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ============================================================
   AI OUTPUT
   ============================================================ */
.ai-output-box{
  background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r-md);
  padding:1.25rem;min-height:100px;position:relative;transition:border-color .3s;
}
.ai-output-box.streaming{border-color:var(--neon);box-shadow:0 0 20px rgba(0,245,212,.1)}
.ai-output-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;gap:8px;color:var(--text3);font-size:.85rem}
.ai-output-placeholder i{font-size:2rem;opacity:.3}
.ai-text{font-size:.9rem;line-height:1.8;color:var(--text);white-space:pre-wrap}

/* ── Typing dots ── */
.dots{display:flex;gap:5px;align-items:center}
.dots span{width:7px;height:7px;background:var(--neon);border-radius:50%;animation:dotBounce 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-8px);opacity:1}}

/* ── Spinner ── */
.spinner{width:32px;height:32px;border:2.5px solid var(--border2);border-top-color:var(--neon);border-radius:50%;animation:spin .7s linear infinite}
.spinner-sm{width:16px;height:16px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   RECRUITMENT HUB
   ============================================================ */
.recruit-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:1.5rem;padding-bottom:3rem;align-items:start}

.team-card{
  background:var(--card2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.25rem;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
}
.team-card:hover{border-color:var(--neon);transform:translateY(-2px);box-shadow:var(--shadow-neon)}
.team-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-neon);opacity:0;transition:opacity .2s}
.team-card:hover::before{opacity:1}
.team-logo{width:48px;height:48px;border-radius:var(--r-md);background:var(--grad-neon);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.team-match-score{
  position:absolute;top:.85rem;right:.85rem;
  font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:var(--r-full);
}
.match-hot{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.25)}
.match-warm{background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.25)}
.match-good{background:var(--neon-dim);color:var(--neon);border:1px solid rgba(0,245,212,.25)}

/* ── Application Timeline ── */
.app-timeline{position:relative;padding-left:1.5rem}
.app-timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:1px;background:var(--border2)}
.app-step{position:relative;margin-bottom:1.25rem}
.app-step::before{
  content:'';position:absolute;left:-1.5rem;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--bg4);border:2px solid var(--border2);transition:all .3s;
}
.app-step.done::before{background:var(--neon);border-color:var(--neon);box-shadow:0 0 8px rgba(0,245,212,.5)}
.app-step.active::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(245,158,11,.5)}
.app-step-title{font-size:.85rem;font-weight:700;color:var(--text);line-height:1.3}
.app-step-sub{font-size:.77rem;color:var(--text3);margin-top:2px}

/* ============================================================
   TAGS / PILLS
   ============================================================ */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-full);font-size:.72rem;font-weight:700}
.tag-neon{background:var(--neon-dim);color:var(--neon)}
.tag-purple{background:var(--purple-dim);color:var(--purple-light)}
.tag-gold{background:var(--gold-dim);color:var(--gold)}
.tag-red{background:var(--red-dim);color:#f87171}
.tag-blue{background:var(--blue-dim);color:var(--blue)}
.tag-green{background:var(--green-dim);color:var(--green)}
.tag-gray{background:rgba(255,255,255,.06);color:var(--text3)}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress-wrap{background:rgba(255,255,255,.06);border-radius:var(--r-full);height:6px;overflow:hidden}
.progress-bar{height:100%;border-radius:var(--r-full);background:var(--grad-neon);transition:width .8s ease}
.progress-bar.gold{background:var(--grad-gold)}
.progress-bar.purple{background:linear-gradient(90deg,var(--purple),var(--purple-light))}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--card);border:1px solid var(--border2);border-radius:var(--r-xl);
  padding:2rem;width:100%;max-width:500px;box-shadow:0 30px 80px rgba(0,0,0,.7);
  transform:scale(.95) translateY(20px);transition:transform .25s;
}
.modal-overlay.open .modal{transform:scale(1) translateY(0)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.modal-title{font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:8px}
.modal-close{background:none;border:none;color:var(--text3);font-size:1.1rem;cursor:pointer;padding:4px;transition:color .2s}
.modal-close:hover{color:var(--text)}
.provider-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:.75rem}
.provider-btn{
  padding:10px 8px;border-radius:var(--r-md);background:var(--bg4);border:2px solid var(--border);
  color:var(--text2);font-size:.82rem;font-weight:700;cursor:pointer;text-align:center;
  transition:all .18s;line-height:1.3;
}
.provider-btn:hover{border-color:rgba(0,245,212,.4);color:var(--text);background:var(--bg3)}
.provider-btn.active{border-color:var(--neon);color:var(--neon);background:var(--neon-dim);box-shadow:0 0 0 3px rgba(0,245,212,.1)}
.provider-btn .free-badge{font-size:.66rem;color:var(--green);font-weight:600;display:block;margin-top:3px;opacity:.9}
.provider-btn.active .free-badge{color:var(--neon);opacity:1}

/* API instruction blocks */
.api-inst-block ol li{padding:.05rem 0}
.api-inst-block ol li strong{color:var(--text)}
.api-inst-block a.btn{text-decoration:none;white-space:nowrap}

/* ============================================================
   INCOME CENTER
   ============================================================ */
.income-tabs{display:flex;gap:4px;background:var(--bg3);padding:4px;border-radius:var(--r-md);margin-bottom:1.5rem;overflow-x:auto}
.income-tab{
  flex:1;min-width:100px;padding:8px 14px;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;
  cursor:pointer;border:none;background:none;color:var(--text3);transition:all .2s;white-space:nowrap;
}
.income-tab.active{background:var(--card2);color:var(--neon);box-shadow:var(--shadow)}
.income-panel{display:none}
.income-panel.active{display:block}

/* ── Earnings Chart Wrap ── */
.chart-wrap{height:200px;position:relative}

/* ============================================================
   SHARE CARD MODAL
   ============================================================ */
.share-qr-container{
  background:white;border-radius:var(--r-md);padding:1rem;display:inline-flex;
  align-items:center;justify-content:center;margin:0 auto;display:block;width:fit-content;
}
.share-link-box{
  background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r-md);
  padding:.75rem 1rem;font-size:.85rem;color:var(--neon);word-break:break-all;
  font-family:monospace;cursor:pointer;transition:background .2s;
}
.share-link-box:hover{background:var(--neon-dim)}

/* ============================================================
   COPY BUTTON
   ============================================================ */
.copy-btn{
  position:absolute;top:10px;right:10px;background:var(--bg3);border:1px solid var(--border2);
  color:var(--text3);padding:4px 10px;border-radius:6px;font-size:.72rem;cursor:pointer;
  display:flex;align-items:center;gap:4px;transition:all .2s;
}
.copy-btn:hover{background:var(--neon);color:#000;border-color:var(--neon)}

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  background:var(--card2);border:1px solid var(--border2);border-radius:var(--r-md);
  padding:.85rem 1.2rem;display:flex;align-items:center;gap:10px;min-width:260px;
  pointer-events:all;box-shadow:var(--shadow);animation:toastIn .3s ease;font-size:.85rem;
}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
.toast.info{border-left:3px solid var(--neon)}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{from{transform:translateX(0);opacity:1}to{transform:translateX(110%);opacity:0}}

/* ============================================================
   CHAT BUBBLES
   ============================================================ */
.chat-wrap{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding:4px 0}
.chat-bubble-row{display:flex}
.chat-bubble-row.user{justify-content:flex-end}
.chat-bubble{
  max-width:82%;padding:10px 14px;font-size:.87rem;line-height:1.65;border-radius:14px;
}
.chat-bubble.ai{background:var(--bg4);border:1px solid var(--border);border-radius:14px 14px 14px 4px;color:var(--text)}
.chat-bubble.user{background:var(--neon);color:#000;font-weight:500;border-radius:14px 14px 4px 14px}
.chat-input-row{display:flex;gap:8px;padding-top:1rem;border-top:1px solid var(--border);margin-top:auto}

/* ============================================================
   MISC COMPONENTS
   ============================================================ */
.divider{height:1px;background:var(--border);margin:1.25rem 0}
.section-label{font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:.75rem;display:flex;align-items:center;gap:8px}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.empty-state{text-align:center;padding:3rem 0;color:var(--text3)}
.empty-state i{font-size:2.5rem;opacity:.2;display:block;margin-bottom:.75rem}
.empty-state p{font-size:.85rem}

/* ── Range Slider ── */
input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border2);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--neon);cursor:pointer}

/* ── Checkbox ── */
.check-label{display:flex;align-items:center;gap:7px;font-size:.84rem;cursor:pointer;color:var(--text2)}
.check-label input{accent-color:var(--neon);width:14px;height:14px;cursor:pointer}

/* ============================================================
   MOBILE NAV
   ============================================================ */
@media(max-width:900px){
  .nav-center{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);flex-direction:column;padding:.75rem;gap:2px;z-index:999;max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .nav-center.open{display:flex}
  .nav-link{padding:11px 16px;font-size:.92rem}
  .hamburger{display:flex}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .card-page-grid,.recruit-grid{grid-template-columns:1fr}
  .digital-card-preview{position:relative;top:0}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .navbar{padding:0 1rem}
  .container{padding:0 1rem}
  .page-head h1{font-size:2rem}
}
@media(max-width:500px){
  .card-stats-grid{grid-template-columns:repeat(3,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .quick-grid{grid-template-columns:1fr 1fr}
  .income-tabs{gap:2px}
  .income-tab{min-width:80px;font-size:.75rem;padding:7px 10px}
  .toast-stack{right:.75rem;bottom:.75rem;left:.75rem}
  .toast{min-width:unset}
}

/* ============================================================
   UTILITIES
   ============================================================ */
.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-wrap{flex-wrap:wrap}.gap-1{gap:.5rem}.gap-2{gap:1rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.text-center{text-align:center}.text-right{text-align:right}
.text-neon{color:var(--neon)}.text-gold{color:var(--gold)}.text-muted{color:var(--text3)}
.hidden{display:none!important}
.w-full{width:100%}
.bold{font-weight:700}
.font-bebas{font-family:'Bebas Neue',sans-serif}

/* ============================================================
   SHOWCASE PAGE — Sample Cards + Video Tutorials + Pro Tips
   ============================================================ */

/* ── Filter Bar ── */
.showcase-filter-bar{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.25rem;justify-content:center;
}
.sc-filter{
  padding:7px 16px;border-radius:var(--r-full);background:var(--bg4);border:1px solid var(--border);
  color:var(--text2);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.sc-filter:hover{border-color:var(--neon);color:var(--neon)}
.sc-filter.active{background:var(--neon-dim);border-color:var(--neon);color:var(--neon)}

/* ── Sample Cards Grid ── */
.sample-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:2rem;
  margin-bottom:2.5rem;
}

.sample-card-wrap{
  display:flex;flex-direction:column;gap:.75rem;
  animation:fadeInUp .45s ease both;
}
.sample-card-wrap.hidden{display:none}

/* Scale down cards slightly for gallery view */
.sample-card{
  font-size:.88em;
  transform:scale(1);
  transition:transform .25s, box-shadow .25s;
  cursor:default;
}
.sample-card-wrap:hover .sample-card{
  transform:translateY(-6px);
  box-shadow:0 24px 80px rgba(0,0,0,0.65), 0 0 40px rgba(0,245,212,.12);
}

/* Sport watermark on banner */
.sc-sport-watermark{
  position:absolute;bottom:-8px;left:1rem;
  font-size:5rem;opacity:.14;line-height:1;
  pointer-events:none;user-select:none;
}

/* Recruitment bar used in sample cards */
.sc-recruit-bar{
  background:rgba(0,0,0,.25);
  border:1px solid color-mix(in srgb,var(--rc) 30%,transparent);
  border-radius:10px;padding:.55rem .8rem;font-size:.78rem;
  margin:.7rem 0;display:flex;align-items:center;gap:8px;
}

/* Use Template CTA */
.sc-use-btn{
  width:100%;padding:.7rem;border-radius:var(--r-md);
  background:var(--neon-dim);border:1px solid rgba(0,245,212,.3);
  color:var(--neon);font-weight:700;font-size:.82rem;cursor:pointer;
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.sc-use-btn:hover{background:var(--neon);color:#000;box-shadow:0 0 20px rgba(0,245,212,.35)}

/* ── Showcase CTA Strip ── */
.showcase-cta{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;
  background:linear-gradient(135deg,rgba(0,245,212,.06),rgba(124,58,237,.06));
  border:1px solid var(--border2);border-radius:var(--r-xl);
  padding:2rem 2.5rem;margin:1rem 0 2rem;
}
.showcase-cta-text{flex:1}

/* ── Tutorial Hero ── */
.tutorial-hero{
  text-align:center;padding:2.5rem 1rem 2rem;
}
.tutorial-hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:var(--r-full);
  background:rgba(0,245,212,.08);border:1px solid rgba(0,245,212,.25);
  color:var(--neon);font-size:.78rem;font-weight:700;margin-bottom:.75rem;
}

/* ── Featured Video ── */
.featured-video-wrap{
  background:var(--card2);border:1px solid var(--border2);
  border-radius:var(--r-xl);overflow:hidden;margin-bottom:2rem;
}
.featured-video-label{
  padding:.85rem 1.25rem;font-size:.8rem;font-weight:700;
  color:var(--text2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:6px;
}
.video-embed-box{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
}
.video-embed-box iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;
}
.featured-video-meta{
  padding:1rem 1.25rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--border);
}

/* ── Tutorial Category Filter ── */
.tutorial-cats{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.5rem;
}
.tut-cat{
  padding:6px 14px;border-radius:var(--r-full);background:var(--bg4);
  border:1px solid var(--border);color:var(--text2);font-size:.78rem;
  font-weight:600;cursor:pointer;transition:all .2s;
}
.tut-cat:hover{border-color:var(--neon);color:var(--neon)}
.tut-cat.active{background:var(--neon-dim);border-color:var(--neon);color:var(--neon)}

/* ── Tutorial Grid ── */
.tutorial-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.25rem;
  margin-bottom:3rem;
}
.tut-card{
  background:var(--card2);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;transition:all .25s;
}
.tut-card:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:var(--shadow)}
.tut-card.hidden{display:none}

/* Thumbnail */
.tut-thumb{
  position:relative;height:140px;cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.tut-thumb-bg{position:absolute;inset:0}
.tut-thumb:hover .tut-play-btn{transform:scale(1.12);background:var(--neon);color:#000}
.tut-play-btn{
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  border:2px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1rem;position:relative;z-index:2;
  transition:all .2s;padding-left:3px;
}
.tut-duration{
  position:absolute;bottom:.5rem;right:.6rem;
  background:rgba(0,0,0,.7);color:#fff;
  font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:var(--r-full);
  z-index:2;
}
.tut-thumb-icon{
  position:absolute;top:.6rem;left:.75rem;font-size:1.5rem;z-index:2;
}

/* Tutorial card info */
.tut-info{padding:.85rem 1rem 1rem}
.tut-cat-tag{
  display:inline-block;font-size:.68rem;font-weight:700;
  padding:2px 9px;border-radius:var(--r-full);margin-bottom:.5rem;
}
.tut-setup{ background:rgba(0,245,212,.1);  color:var(--neon);  border:1px solid rgba(0,245,212,.25) }
.tut-card-tag{ background:rgba(124,58,237,.1);color:var(--purple-light);border:1px solid rgba(124,58,237,.25) }
.tut-digitalcard{ background:rgba(124,58,237,.1);color:var(--purple-light);border:1px solid rgba(124,58,237,.25) }
.tut-recruit{ background:rgba(239,68,68,.1); color:var(--red);   border:1px solid rgba(239,68,68,.25) }
.tut-income{  background:rgba(245,158,11,.1);color:var(--gold);  border:1px solid rgba(245,158,11,.25) }
.tut-ai{      background:rgba(167,139,250,.1);color:var(--purple-light);border:1px solid rgba(167,139,250,.25) }
.tut-title{font-weight:800;font-size:.9rem;margin-bottom:.3rem;color:var(--text);line-height:1.35}
.tut-desc{font-size:.78rem;color:var(--text2);line-height:1.55}

/* ── Video Modal Embed ── */
.video-modal-embed{
  position:relative;padding-bottom:56.25%;height:0;
}
.video-modal-embed iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;
}

/* ── Pro Tips Grid ── */
.tips-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1.25rem;
  margin-bottom:2rem;
}
.tip-card{
  background:var(--card2);
  border:1px solid var(--border);
  border-top:3px solid var(--tip-color,var(--neon));
  border-radius:var(--r-lg);
  padding:1.5rem 1.35rem;
  transition:transform .25s, box-shadow .25s;
  position:relative;overflow:hidden;
}
.tip-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:60px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--tip-color,var(--neon)) 8%,transparent),transparent);
  pointer-events:none;
}
.tip-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.tip-num{
  font-family:'Bebas Neue',sans-serif;font-size:3rem;line-height:1;
  color:var(--tip-color,var(--neon));opacity:.18;
  position:absolute;top:.6rem;right:1rem;pointer-events:none;
}
.tip-icon{font-size:1.8rem;margin-bottom:.6rem;display:block}
.tip-title{font-weight:800;font-size:.97rem;margin-bottom:.5rem;color:var(--text);line-height:1.3}
.tip-body{font-size:.82rem;color:var(--text2);line-height:1.65;margin-bottom:1rem}
.tip-action{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.77rem;font-weight:700;color:var(--tip-color,var(--neon));
  background:none;border:none;cursor:pointer;padding:0;
  transition:gap .2s;
}
.tip-action:hover{gap:10px}

/* ── Responsive Showcase ── */
@media(max-width:900px){
  .sample-cards-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
  .showcase-cta{padding:1.5rem;flex-direction:column;text-align:center}
  .tutorial-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .tips-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .sample-cards-grid{grid-template-columns:1fr}
  .tips-grid{grid-template-columns:1fr}
  .tutorial-grid{grid-template-columns:1fr}
  .tut-cat{font-size:.72rem;padding:5px 10px}
}

/* ════════════════════════════════════════════════════
   SAMPLE CARD ATHLETE IMAGES
════════════════════════════════════════════════════ */

/* Banner photo behind gradient */
.sc-banner-img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  opacity:.38;
  z-index:0;
  pointer-events:none;
}
.card-banner{ position:relative; overflow:hidden; }
.card-banner > *{ position:relative; z-index:1; }
.card-banner > .sc-banner-img{ z-index:0; position:absolute; }

/* Avatar with real photo */
.card-avatar.sc-avatar-photo{
  padding:0;overflow:hidden;
  background:var(--bg2);
}
.card-avatar.sc-avatar-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  border-radius:inherit;
}

/* ════════════════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════════════════ */
#page-about{ padding-bottom:4rem; }

/* Hero */
.about-hero{
  text-align:center;
  padding:4rem 1rem 3rem;
  max-width:820px;
  margin:0 auto;
}
.about-hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--neon-dim);color:var(--neon);
  border:1px solid rgba(0,245,212,.3);
  border-radius:var(--r-full);
  padding:5px 16px;font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:1.25rem;
}
.about-hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.6rem,6vw,4.2rem);
  line-height:1.05;
  margin-bottom:1rem;
  color:var(--text);
}
.about-hero-sub{
  font-size:1.05rem;color:var(--text2);
  line-height:1.7;max-width:640px;margin:0 auto 2.5rem;
}
.about-hero-stats{
  display:flex;justify-content:center;
  gap:2.5rem;flex-wrap:wrap;
  padding:2rem;
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
}
.about-stat{ text-align:center; }
.about-stat-num{
  display:block;
  font-family:'Bebas Neue',sans-serif;
  font-size:2.2rem;line-height:1;
  margin-bottom:.2rem;
}
.about-stat-lbl{
  font-size:.75rem;color:var(--text3);
  text-transform:uppercase;letter-spacing:.07em;
}

/* Section wrapper */
.about-section{
  margin-bottom:4rem;
  padding-top:1rem;
}
.about-section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.1;
  margin:.5rem 0 1.75rem;
  color:var(--text);
}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:700;
  color:var(--neon);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.5rem;
}

/* Mission block */
.about-mission{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:3rem;
  align-items:center;
}
.about-mission-text p{
  color:var(--text2);line-height:1.75;font-size:.95rem;margin-bottom:1rem;
}
.about-pillars{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
  margin-top:1.5rem;
}
.about-pillar{
  display:flex;align-items:center;gap:.6rem;
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:.7rem 1rem;
  font-size:.85rem;font-weight:600;color:var(--text);
}
.about-pillar i{ font-size:1rem;flex-shrink:0; }

/* Mission photo card */
.about-mission-card{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:2px solid var(--border2);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.about-sport-img{
  width:100%;height:340px;
  object-fit:cover;object-position:top center;
  display:block;
}
.about-mission-card-label{
  position:absolute;bottom:0;left:0;right:0;
  padding:.75rem 1rem;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
  font-size:.82rem;font-weight:600;color:#fff;
  display:flex;align-items:center;gap:.4rem;
}

/* Steps */
.about-steps{
  display:flex;align-items:flex-start;
  gap:1rem;flex-wrap:wrap;
  justify-content:center;
}
.about-step{
  flex:1;min-width:180px;max-width:220px;
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:1.75rem 1.25rem;
  text-align:center;
  position:relative;
}
.about-step-num{
  font-family:'Bebas Neue',sans-serif;font-size:3rem;line-height:1;
  color:var(--neon);opacity:.15;
  position:absolute;top:.5rem;right:.75rem;
}
.about-step-icon{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--neon-dim);border:1px solid rgba(0,245,212,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:var(--neon);
  margin:0 auto .9rem;
}
.about-step h3{ font-size:.93rem;font-weight:800;margin-bottom:.5rem;color:var(--text); }
.about-step p{ font-size:.8rem;color:var(--text2);line-height:1.6; }
.about-step-arrow{
  font-size:1.2rem;color:var(--border2);
  align-self:center;flex-shrink:0;
  padding-top:1.5rem;
}

/* Sports chips */
.about-sports-grid{
  display:flex;flex-wrap:wrap;gap:.6rem;
  justify-content:center;
  max-width:800px;margin:0 auto;
}
.about-sport-chip{
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-full);
  padding:.45rem 1.1rem;
  font-size:.85rem;font-weight:600;color:var(--text2);
  transition:all .2s;cursor:default;
}
.about-sport-chip:hover{
  border-color:var(--neon);color:var(--neon);
  background:var(--neon-dim);
}

/* Team grid */
.about-team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.5rem;
}
.about-team-card{
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
.about-team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 50px rgba(0,0,0,.45);
}
.about-team-img-wrap{
  width:100%;height:200px;overflow:hidden;
  background:var(--bg2);
}
.about-team-img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
  transition:transform .4s;
}
.about-team-card:hover .about-team-img{ transform:scale(1.05); }
.about-team-name{
  font-family:'Bebas Neue',sans-serif;font-size:1.3rem;
  color:var(--text);padding:.9rem 1rem .1rem;
}
.about-team-role{
  font-size:.72rem;font-weight:700;color:var(--neon);
  text-transform:uppercase;letter-spacing:.07em;
  padding:0 1rem .6rem;
}
.about-team-bio{
  font-size:.8rem;color:var(--text2);line-height:1.6;
  padding:0 1rem .7rem;
}
.about-team-sport{
  font-size:.73rem;color:var(--text3);
  padding:.5rem 1rem .9rem;
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:.4rem;
}

/* ═══════════════════════════════════════════════════
   FULL FEATURE DEMO CARD SECTION
   ═══════════════════════════════════════════════════ */

.demo-card-section{
  text-align:center;
  padding:2rem 0 3rem;
  margin-bottom:1rem;
}
.demo-card-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 16px;border-radius:var(--r-full);
  background:linear-gradient(135deg,rgba(0,245,212,.12),rgba(124,58,237,.12));
  border:1px solid rgba(0,245,212,.35);
  color:var(--neon);font-size:.78rem;font-weight:700;
  letter-spacing:.3px;margin-bottom:.9rem;
  animation:live-glow 2.5s ease-in-out infinite;
}
.demo-card-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.05;margin:.3rem 0 .6rem;
}
.demo-card-sub{
  color:var(--text2);font-size:.92rem;
  max-width:520px;margin:0 auto 2.5rem;
}

/* Stage: callouts + card + callouts */
.demo-card-stage{
  display:grid;
  grid-template-columns:1fr minmax(0,380px) 1fr;
  gap:1.5rem;
  align-items:start;
  max-width:1000px;
  margin:0 auto;
}

/* The demo card itself */
.demo-card-wrap{
  position:relative;
}
.demo-full-card{
  border:2px solid rgba(0,245,212,.25) !important;
  box-shadow:0 0 0 1px rgba(0,245,212,.08),
             0 24px 80px rgba(0,0,0,.6),
             0 0 60px rgba(0,245,212,.06) !important;
}

/* NFT Trading Card in demo stage — constrained to column width */
.demo-nft-card{
  width:100% !important;
  max-width:300px !important;
  height:480px !important;
}

/* PRO badge in banner */
.demo-pro-badge{
  position:absolute;top:.6rem;left:.75rem;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-full);
  background:linear-gradient(135deg,rgba(0,245,212,.2),rgba(124,58,237,.2));
  border:1px solid rgba(0,245,212,.4);
  color:var(--neon);font-size:.65rem;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;
  z-index:3;
}

/* Callout columns */
.demo-callouts{
  position:relative;
  padding-top:2.5rem;
  min-height:600px;
}
.demo-callouts-left{ text-align:right; }
.demo-callouts-right{ text-align:left; }

.demo-callout{
  position:absolute;
  width:100%;
}
.demo-callout.dc-top{ top:14%; }

.dc-label{
  font-size:.75rem;font-weight:700;
  color:var(--text2);line-height:1.35;
  white-space:nowrap;
  display:flex;align-items:center;gap:5px;
  justify-content:flex-end;
}
.demo-callouts-right .dc-label{
  justify-content:flex-start;
}
.dc-line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,245,212,.3));
  margin-top:5px;
  width:100%;
}
.demo-callouts-right .dc-line{
  background:linear-gradient(90deg,rgba(0,245,212,.3),transparent);
}

/* Feature pills row below card */
.demo-feature-pills{
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;
  max-width:700px;
  margin:2rem auto 0;
}
.demo-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:.35rem .85rem;border-radius:var(--r-full);
  background:rgba(0,245,212,.06);
  border:1px solid rgba(0,245,212,.2);
  color:var(--neon);font-size:.75rem;font-weight:600;
  white-space:nowrap;
}

/* Divider between demo and sample cards */
.demo-divider{
  display:flex;align-items:center;gap:1rem;
  margin:2.5rem 0 1.5rem;
}
.demo-divider::before,
.demo-divider::after{
  content:'';flex:1;
  height:1px;background:var(--border);
}
.demo-divider-label{
  font-size:.7rem;font-weight:800;letter-spacing:1.5px;
  color:var(--text3);text-transform:uppercase;white-space:nowrap;
}

/* ── Responsive: collapse callouts on small screens ── */
@media(max-width:860px){
  .demo-card-stage{
    grid-template-columns:1fr;
  }
  .demo-callouts{ display:none; }
  .demo-card-wrap{ max-width:400px;margin:0 auto; }
}

/* ══════════════════════════════════════════════════════════
   NFT TRADING CARD — SHOWCASE SECTION
   ══════════════════════════════════════════════════════════ */

/* Wrapper — adds purple/teal tinted backdrop */
.nft-showcase-section{
  position:relative;
  padding:2.5rem 1.5rem 3rem;
  border-radius:20px;
  background:linear-gradient(
    160deg,
    rgba(124,58,237,.06) 0%,
    rgba(0,245,212,.04) 50%,
    rgba(168,85,247,.06) 100%
  );
  border:1px solid rgba(168,85,247,.18);
  margin-bottom:1rem;
  overflow:hidden;
}

/* Subtle radial glow behind the cards */
.nft-showcase-section::before{
  content:'';
  position:absolute;
  top:30%;left:50%;
  transform:translate(-50%,-50%);
  width:600px;height:300px;
  background:radial-gradient(ellipse,rgba(0,245,212,.07) 0%,transparent 70%);
  pointer-events:none;
}

/* Header area */
.nft-showcase-header{
  text-align:center;
  margin-bottom:2.5rem;
}
.nft-showcase-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 16px;border-radius:var(--r-full);
  background:linear-gradient(135deg,rgba(168,85,247,.14),rgba(0,245,212,.1));
  border:1px solid rgba(168,85,247,.4);
  color:#c084fc;font-size:.78rem;font-weight:700;letter-spacing:.3px;
  margin-bottom:.9rem;
  animation:live-glow 2.5s ease-in-out infinite;
}

/* Stage: left callouts | 3 cards | right callouts */
.nft-showcase-stage{
  display:grid;
  grid-template-columns:140px 1fr 140px;
  gap:1rem;
  align-items:center;
  max-width:1000px;
  margin:0 auto;
}

/* The three-card row */
.nft-showcase-cards-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  perspective:1200px;
}

/* Individual card wraps */
.nft-sc-card-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.65rem;
  position:relative;
}

/* Side cards — slightly smaller + angled in */
.nft-sc-card--left .nft-trading-card,
.nft-sc-card--right .nft-trading-card{
  width:200px;
  height:300px;
  border-radius:14px;
  transition:transform .35s ease, box-shadow .35s ease;
}
.nft-sc-card--left .nft-trading-card .nft-card-inner,
.nft-sc-card--right .nft-trading-card .nft-card-inner{
  min-height:294px;
  padding:0;
}
.nft-sc-card--left .nft-trading-card .nft-card-content,
.nft-sc-card--right .nft-trading-card .nft-card-content{
  padding:.55rem .65rem;
}
.nft-sc-card--left .nft-trading-card .nft-card-athlete-name,
.nft-sc-card--right .nft-trading-card .nft-card-athlete-name{ font-size:1.1rem; }
.nft-sc-card--left .nft-trading-card .nft-card-sport-level,
.nft-sc-card--right .nft-trading-card .nft-card-sport-level{ font-size:.58rem; }
.nft-sc-card--left .nft-trading-card .nft-stat-val,
.nft-sc-card--right .nft-trading-card .nft-stat-val{ font-size:.95rem; }
.nft-sc-card--left .nft-trading-card .nft-stat-lbl,
.nft-sc-card--right .nft-trading-card .nft-stat-lbl{ font-size:.52rem; }
.nft-sc-card--left .nft-trading-card:hover{
  transform:rotateY(6deg) rotateX(-2deg) scale(1.04) !important;
}
.nft-sc-card--right .nft-trading-card:hover{
  transform:rotateY(-6deg) rotateX(-2deg) scale(1.04) !important;
}

/* Centre card — full size, floated up */
.nft-sc-card--center{
  z-index:2;
  margin-top:-1.5rem;
}
.nft-sc-card--center .nft-trading-card{
  transition:transform .35s ease, box-shadow .35s ease;
}
.nft-sc-card--center .nft-trading-card:hover{
  transform:scale(1.07) rotateY(-4deg) rotateX(2deg) !important;
}

/* Pulsing halo ring around centre card */
.nft-sc-hero-ring{
  position:absolute;
  inset:-14px;
  border-radius:26px;
  background:conic-gradient(
    from 0deg,
    rgba(0,245,212,.0) 0%,
    rgba(0,245,212,.45) 25%,
    rgba(168,85,247,.45) 50%,
    rgba(0,245,212,.45) 75%,
    rgba(0,245,212,.0) 100%
  );
  animation:holoSweep 3s linear infinite;
  z-index:-1;
  opacity:.7;
  filter:blur(6px);
  top:-14px;left:-14px;
  right:-14px;bottom:-14px;
  width:calc(100% + 28px);
  height:calc(100% + 28px);
}

/* "Most Popular" badge above centre card */
.nft-sc-center-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,#00f5d4,#7c3aed);
  color:#000;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 12px;
  border-radius:var(--r-full);
  white-space:nowrap;
  z-index:5;
}

/* Label beneath each card */
.nft-sc-card-label{
  font-size:.72rem;
  font-weight:700;
  color:var(--text3);
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:.35rem;
}

/* Callout columns — reuse .demo-callouts positioning */
.nft-co-left,
.nft-co-right{
  min-height:380px;
}

/* ── Responsive ── */
@media(max-width:960px){
  .nft-showcase-stage{
    grid-template-columns:1fr;
  }
  .nft-co-left,
  .nft-co-right{ display:none; }
  .nft-showcase-cards-row{ gap:.75rem; }
  .nft-sc-card--left .nft-trading-card,
  .nft-sc-card--right .nft-trading-card{
    width:170px;
    min-height:250px;
  }
}
@media(max-width:640px){
  .nft-showcase-cards-row{
    flex-direction:column;
    gap:1.5rem;
  }
  .nft-sc-card--left .nft-trading-card,
  .nft-sc-card--center .nft-trading-card,
  .nft-sc-card--right .nft-trading-card{
    width:240px !important;
    min-height:350px !important;
    transform:none !important;
  }
  .nft-sc-card--center{
    margin-top:0;
  }
}

/* Values grid */
.about-values-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.25rem;
}
.about-value-card{
  background:var(--card2);
  border:1px solid var(--border);
  border-top:3px solid var(--vc,var(--neon));
  border-radius:var(--r-xl);
  padding:1.75rem 1.5rem;
  position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
.about-value-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:70px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--vc,var(--neon)) 8%,transparent),transparent);
  pointer-events:none;
}
.about-value-card:hover{ transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4); }
.about-value-icon{
  width:46px;height:46px;border-radius:50%;
  background:color-mix(in srgb,var(--vc,var(--neon)) 12%,transparent);
  display:flex;align-items:center;justify-content:center;
  color:var(--vc,var(--neon));font-size:1.1rem;
  margin-bottom:1rem;
}
.about-value-card h3{ font-size:1rem;font-weight:800;margin-bottom:.5rem;color:var(--text); }
.about-value-card p{ font-size:.83rem;color:var(--text2);line-height:1.65; }

/* About CTA */
.about-cta{
  position:relative;overflow:hidden;
  background:var(--card2);border:1px solid var(--border2);
  border-radius:var(--r-xl);
  padding:4rem 2rem;
  text-align:center;
  margin-top:3rem;
}
.about-cta-gfx{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(0,245,212,.1) 0%,transparent 70%),
             radial-gradient(ellipse at 80% 100%,rgba(124,58,237,.1) 0%,transparent 60%);
}
.about-cta-content{ position:relative;z-index:1; }

/* ════════════════════════════════════════════════════
   NFT TRADING CARD TEMPLATE — CARD BUILDER PICKER
════════════════════════════════════════════════════ */

/* Template picker section in card builder */
.card-template-picker{
  position:relative;
  overflow:hidden;
}
.card-template-picker::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(168,85,247,.07) 0%, transparent 65%),
             radial-gradient(ellipse at 80% 50%, rgba(0,245,212,.05) 0%, transparent 65%);
  pointer-events:none;
}

/* Template option cards row */
.ctp-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.85rem;
  position:relative;z-index:1;
}
@media(max-width:500px){ .ctp-row{ grid-template-columns:1fr; } }

/* Individual template option */
.ctp-option{
  border:2px solid var(--border);
  border-radius:var(--r-lg);
  padding:1rem;
  cursor:pointer;
  transition:all .25s ease;
  position:relative;
  background:var(--bg3);
  display:flex;flex-direction:column;gap:.55rem;
}
.ctp-option:hover{
  border-color:rgba(0,245,212,.4);
  background:rgba(0,245,212,.04);
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.ctp-option.active{
  border-color:var(--neon);
  background:rgba(0,245,212,.07);
  box-shadow:0 0 0 1px rgba(0,245,212,.25), 0 8px 32px rgba(0,245,212,.1);
}
.ctp-option.ctp-premium{
  border-color:rgba(168,85,247,.4);
  background:linear-gradient(135deg,rgba(26,0,40,.6) 0%,rgba(15,10,30,.7) 100%);
}
.ctp-option.ctp-premium:hover{
  border-color:rgba(168,85,247,.7);
  background:linear-gradient(135deg,rgba(40,0,60,.7) 0%,rgba(20,10,40,.8) 100%);
  box-shadow:0 0 0 1px rgba(168,85,247,.3), 0 12px 40px rgba(168,85,247,.15);
}
.ctp-option.ctp-premium.active{
  border-color:#a855f7;
  box-shadow:0 0 0 1px rgba(168,85,247,.4), 0 8px 32px rgba(168,85,247,.2);
}

/* Template preview thumbnail */
.ctp-thumb{
  border-radius:var(--r-md);
  overflow:hidden;
  height:90px;
  position:relative;
}
.ctp-thumb-standard{
  background:linear-gradient(135deg,#1a0a3e 0%,#0d2340 100%);
  display:flex;align-items:center;justify-content:center;
  gap:6px;
}
.ctp-thumb-standard .ctp-mini-card{
  width:38px;height:54px;border-radius:5px;
  background:linear-gradient(160deg,#0f1623,#151d2e);
  border:1px solid rgba(0,245,212,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:5px 3px 4px;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.ctp-mini-banner{ width:100%;height:13px;border-radius:3px 3px 0 0;background:linear-gradient(135deg,rgba(0,245,212,.4),rgba(124,58,237,.4));margin-top:-5px;margin-left:-3px;margin-right:-3px;width:calc(100% + 6px); }
.ctp-mini-avatar{ width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#00f5d4,#7c3aed);margin-top:-5px; }
.ctp-mini-name{ width:80%;height:3px;background:rgba(255,255,255,.5);border-radius:2px; }
.ctp-mini-stats{ display:flex;gap:2px; }
.ctp-mini-stat{ width:10px;height:12px;background:rgba(255,255,255,.08);border-radius:2px;border:1px solid rgba(255,255,255,.1); }

/* NFT Trading Card thumbnail */
.ctp-thumb-nft{
  background:linear-gradient(135deg,#0d001a 0%,#1a0028 50%,#0a001a 100%);
  display:flex;align-items:center;justify-content:center;
  gap:8px;
}
.ctp-nft-mini{
  width:46px;height:64px;border-radius:6px;
  position:relative;overflow:hidden;
  border:1.5px solid rgba(168,85,247,.6);
  background:linear-gradient(160deg,#0d001a,#1a0028);
  box-shadow:0 0 12px rgba(168,85,247,.4);
  display:flex;flex-direction:column;align-items:stretch;
}
.ctp-nft-mini:nth-child(2){ border-color:rgba(0,245,212,.7);box-shadow:0 0 16px rgba(0,245,212,.5);transform:scale(1.1);z-index:1; }
.ctp-nft-mini:nth-child(3){ border-color:rgba(245,158,11,.6);box-shadow:0 0 12px rgba(245,158,11,.4); }
.ctp-nft-photo{ flex:1;background:linear-gradient(180deg,rgba(168,85,247,.15),rgba(168,85,247,.05)); display:flex;align-items:center;justify-content:center;font-size:1.1rem; }
.ctp-nft-mini:nth-child(2) .ctp-nft-photo{ background:linear-gradient(180deg,rgba(0,245,212,.15),rgba(0,245,212,.05)); }
.ctp-nft-mini:nth-child(3) .ctp-nft-photo{ background:linear-gradient(180deg,rgba(245,158,11,.15),rgba(245,158,11,.05)); }
.ctp-nft-bar{ height:16px;background:rgba(0,0,0,.7);padding:0 4px;display:flex;align-items:center;justify-content:center; }
.ctp-nft-bar-line{ height:2px;width:80%;background:linear-gradient(90deg,rgba(168,85,247,.7),rgba(0,245,212,.5));border-radius:1px; }
.ctp-nft-mini:nth-child(2) .ctp-nft-bar-line{ background:linear-gradient(90deg,rgba(0,245,212,.9),rgba(168,85,247,.6)); }

/* Template option labels */
.ctp-label{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
}
.ctp-name{
  font-size:.85rem;font-weight:800;color:var(--text);letter-spacing:.01em;
}
.ctp-premium .ctp-name{ color:#c084fc; }
.ctp-badge-std{
  font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--r-full);
  background:rgba(0,245,212,.1);color:var(--neon);border:1px solid rgba(0,245,212,.25);
}
.ctp-badge-premium{
  font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--r-full);
  background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(236,72,153,.15));
  color:#c084fc;border:1px solid rgba(168,85,247,.35);
  display:flex;align-items:center;gap:4px;
}
.ctp-desc{
  font-size:.73rem;color:var(--text3);line-height:1.45;
}
.ctp-premium .ctp-desc{ color:rgba(192,132,252,.6); }

/* Selected checkmark */
.ctp-check{
  position:absolute;top:8px;right:8px;
  width:20px;height:20px;border-radius:50%;
  background:var(--neon);color:#000;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:900;
  opacity:0;transform:scale(0);
  transition:all .2s ease;
}
.ctp-option.active .ctp-check{ opacity:1;transform:scale(1); }
.ctp-premium.active .ctp-check{ background:#a855f7;color:#fff; }

/* Premium pricing line */
.ctp-pricing-line{
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .65rem;
  background:rgba(168,85,247,.1);
  border:1px solid rgba(168,85,247,.25);
  border-radius:var(--r-sm);
  margin-top:.1rem;
}
.ctp-pricing-icon{ font-size:.85rem; }
.ctp-pricing-text{ font-size:.72rem;color:rgba(192,132,252,.85);line-height:1.4; }
.ctp-pricing-text strong{ color:#c084fc; }

/* Lock icon on premium when not active */
.ctp-lock-overlay{
  position:absolute;inset:0;
  border-radius:calc(var(--r-lg) - 2px);
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,0,20,.35);
  backdrop-filter:blur(1px);
  opacity:1;
  transition:opacity .2s;
  pointer-events:none;
}
.ctp-option.active .ctp-lock-overlay,
.ctp-option:hover .ctp-lock-overlay{ opacity:0; }
.ctp-lock-icon{
  width:36px;height:36px;border-radius:50%;
  background:rgba(168,85,247,.25);
  border:1.5px solid rgba(168,85,247,.5);
  display:flex;align-items:center;justify-content:center;
  color:#c084fc;font-size:.9rem;
  box-shadow:0 0 20px rgba(168,85,247,.3);
}

/* Premium Upsell Modal for NFT template */
.nft-tpl-modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  z-index:9000;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.nft-tpl-modal-overlay.open{
  opacity:1;pointer-events:all;
}
.nft-tpl-modal{
  background:linear-gradient(160deg,#0d001a 0%,#110020 50%,#0a0018 100%);
  border:1px solid rgba(168,85,247,.4);
  border-radius:24px;
  max-width:480px;width:100%;
  padding:2rem 1.75rem;
  position:relative;
  box-shadow:0 0 0 1px rgba(168,85,247,.15), 0 40px 80px rgba(0,0,0,.8), 0 0 60px rgba(168,85,247,.15);
  transform:translateY(20px) scale(.97);
  transition:transform .3s ease;
}
.nft-tpl-modal-overlay.open .nft-tpl-modal{
  transform:translateY(0) scale(1);
}
.nft-tpl-modal-close{
  position:absolute;top:14px;right:14px;
  background:rgba(255,255,255,.08);border:none;
  width:32px;height:32px;border-radius:50%;
  color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;transition:all .15s;
}
.nft-tpl-modal-close:hover{ background:rgba(255,255,255,.15);color:var(--text); }

/* Animated holographic mini preview inside modal */
.nft-tpl-modal-preview{
  display:flex;gap:10px;align-items:center;justify-content:center;
  margin:1.25rem 0;
}
.nft-modal-mini{
  width:72px;height:100px;border-radius:10px;
  position:relative;overflow:hidden;
  border:2px solid;
  box-shadow:0 0 20px var(--mc, rgba(168,85,247,.5));
  border-color:var(--mc, rgba(168,85,247,.7));
  background:linear-gradient(160deg,#0d001a,#1a0028);
  display:flex;flex-direction:column;
  transition:transform .3s ease;
}
.nft-modal-mini:hover{ transform:scale(1.06) rotateY(-4deg); }
.nft-modal-mini--center{
  --mc:rgba(0,245,212,.7);
  transform:scale(1.12);z-index:1;
  box-shadow:0 0 30px rgba(0,245,212,.5);
}
.nft-modal-mini--center:hover{ transform:scale(1.16) rotateY(-4deg); }
.nft-modal-mini--gold{ --mc:rgba(245,158,11,.7);box-shadow:0 0 20px rgba(245,158,11,.4); }
.nft-modal-mini-photo{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;
  background:linear-gradient(180deg,rgba(168,85,247,.12),transparent);
}
.nft-modal-mini--center .nft-modal-mini-photo{ background:linear-gradient(180deg,rgba(0,245,212,.15),transparent); }
.nft-modal-mini--gold .nft-modal-mini-photo{ background:linear-gradient(180deg,rgba(245,158,11,.15),transparent); }
.nft-modal-mini-shine{
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);
  background-size:200%;
  animation:holoSweep 2.5s linear infinite;
}
.nft-modal-mini-footer{
  height:22px;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  font-size:.52rem;font-weight:800;letter-spacing:.08em;color:rgba(168,85,247,.9);text-transform:uppercase;
}
.nft-modal-mini--center .nft-modal-mini-footer{ color:rgba(0,245,212,.9); }
.nft-modal-mini--gold .nft-modal-mini-footer{ color:rgba(245,158,11,.9); }

/* Pricing tiers inside modal */
.nft-tpl-pricing-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
  margin:1.25rem 0;
}
.nft-tpl-price-box{
  border:1px solid;border-radius:var(--r-md);
  padding:.85rem .9rem;
  transition:all .2s ease;
  cursor:pointer;
}
.nft-tpl-price-box:hover{ transform:translateY(-2px); }
.nft-tpl-price-box--free{
  border-color:rgba(168,85,247,.3);
  background:rgba(168,85,247,.07);
}
.nft-tpl-price-box--free:hover{
  border-color:rgba(168,85,247,.6);
  background:rgba(168,85,247,.12);
  box-shadow:0 6px 24px rgba(168,85,247,.15);
}
.nft-tpl-price-box--paid{
  border-color:rgba(245,158,11,.3);
  background:rgba(245,158,11,.06);
}
.nft-tpl-price-box--paid:hover{
  border-color:rgba(245,158,11,.6);
  background:rgba(245,158,11,.1);
  box-shadow:0 6px 24px rgba(245,158,11,.12);
}
.nft-tpl-plan-label{
  font-size:.65rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:.3rem;color:rgba(168,85,247,.8);
}
.nft-tpl-price-box--paid .nft-tpl-plan-label{ color:rgba(245,158,11,.8); }
.nft-tpl-price-amt{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.8rem;line-height:1;
  color:#c084fc;
  display:flex;align-items:baseline;gap:3px;
}
.nft-tpl-price-box--paid .nft-tpl-price-amt{ color:var(--gold); }
.nft-tpl-price-amt .nft-curr{ font-size:1rem;font-family:'Inter',sans-serif;font-weight:700; }
.nft-tpl-price-amt .nft-per{ font-size:.7rem;font-family:'Inter',sans-serif;font-weight:500;color:var(--text3); }
.nft-tpl-price-note{ font-size:.71rem;color:var(--text3);margin-top:.25rem;line-height:1.4; }

/* Showcase: varied template cards */
.sc-template-tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 9px;border-radius:var(--r-full);
  margin-bottom:.4rem;
}
.sc-tpl-standard{ background:rgba(0,245,212,.1);color:var(--neon);border:1px solid rgba(0,245,212,.25); }
.sc-tpl-dark{ background:rgba(124,58,237,.12);color:#a78bfa;border:1px solid rgba(124,58,237,.3); }
.sc-tpl-gold{ background:rgba(245,158,11,.1);color:var(--gold);border:1px solid rgba(245,158,11,.25); }
.sc-tpl-fire{ background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.25); }
.sc-tpl-ice{ background:rgba(96,165,250,.1);color:#60a5fa;border:1px solid rgba(96,165,250,.25); }
.sc-tpl-nft{ background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(0,245,212,.1));color:#c084fc;border:1px solid rgba(168,85,247,.35); }

/* NFT Trading Card in showcase sample grid */
.nft-sample-card-wrap{
  position:relative;
}
.nft-sample-card-wrap .sc-use-btn{
  margin-top:.85rem;
  background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(0,245,212,.1));
  border:1px solid rgba(168,85,247,.4);
  color:#c084fc;
}
.nft-sample-card-wrap .sc-use-btn:hover{
  background:linear-gradient(135deg,rgba(168,85,247,.35),rgba(0,245,212,.18));
  border-color:rgba(168,85,247,.65);
  color:#d8b4fe;
  box-shadow:0 6px 24px rgba(168,85,247,.2);
}

/* Dark theme card variant for showcase */
.sample-card.sc-dark-theme .card-banner{
  background:linear-gradient(135deg,#05000f,#0a0520) !important;
}
.sample-card.sc-dark-theme .card-stat-val{ color:#a78bfa; }
.sample-card.sc-dark-theme .card-name{ background:linear-gradient(135deg,#a78bfa,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }

/* Gold theme card variant for showcase */
.sample-card.sc-gold-theme .card-banner{
  background:linear-gradient(135deg,#1a0f00,#2a1800) !important;
}
.sample-card.sc-gold-theme .card-stat-val{ color:var(--gold); }
.sample-card.sc-gold-theme .card-stat-box{ border-color:rgba(245,158,11,.15); }
.sample-card.sc-gold-theme .highlight-chip{ background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2);color:var(--gold); }

/* Fire theme card variant for showcase */
.sample-card.sc-fire-theme .card-banner{
  background:linear-gradient(135deg,#200500,#280a00) !important;
}
.sample-card.sc-fire-theme .card-stat-val{ color:#f97316; }
.sample-card.sc-fire-theme .card-stat-box{ border-color:rgba(249,115,22,.15); }
.sample-card.sc-fire-theme .card-name{ background:linear-gradient(135deg,#f97316,#ef4444);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }

/* Ice theme card variant for showcase */
.sample-card.sc-ice-theme .card-banner{
  background:linear-gradient(135deg,#001525,#001830) !important;
}
.sample-card.sc-ice-theme .card-stat-val{ color:#60a5fa; }
.sample-card.sc-ice-theme .card-stat-box{ border-color:rgba(96,165,250,.15); }
.sample-card.sc-ice-theme .card-name{ background:linear-gradient(135deg,#7dd3fc,#60a5fa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }

/* NFT template in showcase — full trading-card style */
.sample-card-wrap.nft-tpl-sample{ width:100%; }
.nft-tpl-sample .digital-card-preview{
  border:none !important;
  background:transparent !important;
  padding:0 !important;
}
.nft-tpl-showcase-card{
  width:100%;
  border-radius:var(--r-xl);
  overflow:hidden;
  position:relative;
  min-height:440px;
  display:flex;flex-direction:column;
  border:2px solid rgba(168,85,247,.5);
  box-shadow:0 0 0 1px rgba(168,85,247,.1), 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(168,85,247,.2);
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
}
.nft-tpl-showcase-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 0 0 2px rgba(168,85,247,.4), 0 28px 80px rgba(0,0,0,.8), 0 0 60px rgba(168,85,247,.3);
}
.nft-tpl-showcase-card .nft-card-shine{
  opacity:.5;
  animation:holoSweep 3s linear infinite;
}
.nft-tpl-premium-ribbon{
  position:absolute;
  top:14px;left:0;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;font-size:.62rem;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px 4px 10px;
  border-radius:0 var(--r-full) var(--r-full) 0;
  z-index:5;
  box-shadow:0 4px 12px rgba(124,58,237,.5);
  display:flex;align-items:center;gap:5px;
}

/* Pricing page: NFT Template add-on box */
.pc-nft-tpl-addon{
  margin-top:1rem;
  border:1px solid rgba(168,85,247,.35);
  border-radius:var(--r-lg);
  padding:1rem 1.1rem;
  background:linear-gradient(135deg,rgba(26,0,40,.5),rgba(10,0,20,.6));
  position:relative;overflow:hidden;
}
.pc-nft-tpl-addon::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 100% 0%,rgba(168,85,247,.12),transparent 70%);
  pointer-events:none;
}
.pc-nft-tpl-addon-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.6rem;
  position:relative;z-index:1;
}
.pc-nft-tpl-addon-label{
  display:flex;align-items:center;gap:6px;
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#a855f7;
}
.pc-nft-tpl-addon-badge{
  font-size:.62rem;font-weight:800;padding:2px 8px;border-radius:var(--r-full);
  background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(236,72,153,.15));
  color:#c084fc;border:1px solid rgba(168,85,247,.3);
  letter-spacing:.04em;
}
.pc-nft-tpl-name{
  font-weight:800;font-size:.92rem;color:#d8b4fe;
  margin-bottom:.2rem;
  position:relative;z-index:1;
  display:flex;align-items:center;gap:7px;
}
.pc-nft-tpl-price-row{
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  margin:.5rem 0 .65rem;
  position:relative;z-index:1;
}
.pc-nft-tpl-price{
  border-radius:var(--r-md);padding:.35rem .7rem;
  display:flex;align-items:baseline;gap:3px;
}
.pc-nft-tpl-price--free{
  background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);
}
.pc-nft-tpl-price--paid{
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);
}
.pc-nft-tpl-price .nft-tpl-curr{ font-size:.72rem;font-weight:700;color:#a855f7; }
.pc-nft-tpl-price--paid .nft-tpl-curr{ color:var(--gold); }
.pc-nft-tpl-price .nft-tpl-amt{ font-size:1.2rem;font-weight:900;font-family:'Bebas Neue',sans-serif;color:#c084fc;line-height:1; }
.pc-nft-tpl-price--paid .nft-tpl-amt{ color:var(--gold); }
.pc-nft-tpl-price .nft-tpl-per{ font-size:.62rem;color:var(--text3); }
.pc-nft-tpl-plan-note{ font-size:.68rem;color:var(--text3);align-self:flex-end;line-height:1.3; }
.pc-nft-tpl-features{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:3px;
  position:relative;z-index:1;
}
.pc-nft-tpl-features li{
  font-size:.73rem;color:var(--text2);
  display:flex;align-items:center;gap:7px;
}
.pc-nft-tpl-features li i{ color:#a855f7;font-size:.65rem;flex-shrink:0; }
.pc-nft-tpl-btn{
  width:100%;margin-top:.85rem;
  background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(124,58,237,.2));
  border:1px solid rgba(168,85,247,.45);
  color:#c084fc;font-size:.82rem;font-weight:700;
  padding:.6rem;border-radius:var(--r-md);
  cursor:pointer;transition:all .2s ease;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  position:relative;z-index:1;
}
.pc-nft-tpl-btn:hover{
  background:linear-gradient(135deg,rgba(168,85,247,.4),rgba(124,58,237,.3));
  border-color:rgba(168,85,247,.7);
  color:#d8b4fe;
  box-shadow:0 6px 20px rgba(168,85,247,.2);
}

/* ════════════════════════════════════════════════════
   ON-CHAIN MINT TAB
════════════════════════════════════════════════════ */

/* Tab button badge */
.nft-onchain-tab{ position:relative; }
.nft-onchain-badge{
  display:inline-flex;align-items:center;
  font-size:.55rem;font-weight:800;letter-spacing:.07em;
  background:linear-gradient(135deg,#00f5d4,#a855f7);
  color:#000;border-radius:20px;padding:1px 6px;
  margin-left:5px;vertical-align:middle;
  text-transform:uppercase;
}

/* ── Hero banner ── */
.oc-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#06010f 0%,#0a0118 50%,#030b12 100%);
  border:1px solid rgba(168,85,247,.2);
  border-radius:var(--r-xl);padding:2rem 2rem 1.75rem;
  margin-bottom:1.75rem;text-align:center;
}
.oc-hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(168,85,247,.18),transparent 65%),
             radial-gradient(ellipse 50% 40% at 80% 100%,rgba(0,245,212,.1),transparent 60%);
}
.oc-hero-content{ position:relative;z-index:1; }
.oc-hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.35);
  color:#c084fc;border-radius:var(--r-full);
  padding:4px 14px;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.85rem;
}
.oc-hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:2.2rem;letter-spacing:.06em;color:var(--text);
  margin:0 0 .5rem;line-height:1.1;
}
.oc-hero-sub{
  color:var(--text3);font-size:.88rem;max-width:540px;margin:0 auto;
  line-height:1.55;
}
.oc-hero-sub strong{ color:var(--text2); }

/* ── Main two-column grid ── */
.oc-main-grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:1.5rem;
  align-items:start;
}
@media(max-width:900px){ .oc-main-grid{ grid-template-columns:1fr; } }

/* ── Step cards (left column) ── */
.oc-step-card{
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--r-xl);padding:1.15rem;
  margin-bottom:1rem;transition:border-color .2s;
}
.oc-step-card:hover{ border-color:rgba(168,85,247,.3); }

.oc-step-header{
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:.85rem;
}
.oc-step-num{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  color:#fff;font-size:.8rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.oc-step-title{
  font-size:.88rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:5px;
}
.oc-step-sub{
  font-size:.7rem;color:var(--text3);margin-top:1px;
}
.oc-step-status{ margin-left:auto;flex-shrink:0;font-size:1rem; }
.oc-step-body{}
.oc-step-desc{
  font-size:.8rem;color:var(--text3);line-height:1.5;
  margin-bottom:.75rem;
}
.oc-step-desc code{
  background:rgba(0,245,212,.1);color:var(--neon);
  padding:1px 5px;border-radius:3px;font-size:.75rem;
}

/* Key input row */
.oc-key-row{
  display:flex;gap:.5rem;margin-bottom:.5rem;
}
.oc-key-row .input-field{ flex:1;font-size:.82rem; }
.oc-key-actions{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.5rem;
}
.oc-get-key-link{
  font-size:.75rem;color:var(--neon);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;font-weight:600;
}
.oc-get-key-link:hover{ text-decoration:underline; }

/* ── Chain selector ── */
.oc-chain-grid{
  display:flex;flex-direction:column;gap:.55rem;
}
.oc-chain-opt{
  display:flex;align-items:center;gap:.75rem;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:.65rem .85rem;
  cursor:pointer;transition:all .18s;
}
.oc-chain-opt input[type=radio]{ display:none; }
.oc-chain-opt:hover{ border-color:rgba(168,85,247,.35); }
.oc-chain-opt.active{
  border-color:rgba(168,85,247,.55);
  background:rgba(168,85,247,.07);
}
.oc-chain-icon{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.oc-chain-name{
  font-size:.83rem;font-weight:700;color:var(--text);
}
.oc-chain-sub{
  font-size:.68rem;color:var(--text3);margin-top:1px;
}
.oc-chain-badge{
  margin-left:auto;font-size:.6rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  background:rgba(0,245,212,.1);color:var(--neon);
  border:1px solid rgba(0,245,212,.25);
  border-radius:20px;padding:2px 7px;white-space:nowrap;
}

/* ── Other tools row ── */
.oc-tools-row{
  display:flex;flex-direction:column;gap:.55rem;
  margin-top:.25rem;
}
.oc-tool-chip{
  display:flex;align-items:center;gap:.75rem;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:.6rem .85rem;
}
.oc-tool-chip > i{ font-size:1.1rem;flex-shrink:0; }
.oc-tool-chip-name{
  font-size:.82rem;font-weight:700;color:var(--text2);
}
.oc-tool-chip-desc{
  font-size:.68rem;color:var(--text3);margin-top:1px;
}
.oc-tool-chip-link{
  margin-left:auto;color:var(--text3);font-size:.8rem;
  text-decoration:none;transition:color .15s;
}
.oc-tool-chip-link:hover{ color:var(--neon); }

/* ── Right column panels ── */
.oc-mint-col > .panel{ margin-bottom:1rem; }

/* Mini card preview inside select */
.oc-mini-card{
  background:var(--bg3);border-radius:var(--r-md);
  padding:.75rem 1rem;border-left-width:3px;border-left-style:solid;
}
.oc-mini-card-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1rem;letter-spacing:.08em;
}
.oc-mini-card-name{
  font-weight:700;font-size:.88rem;color:var(--text);
  margin:.15rem 0;
}
.oc-mini-card-meta{
  font-size:.72rem;color:var(--text3);
}
.oc-mini-card-minted{
  font-size:.7rem;color:var(--neon);font-weight:700;
  margin-top:.35rem;display:flex;align-items:center;gap:4px;
}

/* Metadata code block */
.oc-metadata-box{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:.85rem;
  max-height:260px;overflow-y:auto;
}
.oc-meta-placeholder{
  color:var(--text3);font-size:.83rem;
  display:flex;align-items:center;gap:.5rem;
}
.oc-meta-pre{
  font-size:.72rem;color:#a5f3fc;
  font-family:'Courier New',monospace;
  margin:0;white-space:pre-wrap;word-break:break-all;
  line-height:1.55;
}

/* ── Mint action panel ── */
.oc-mint-panel{
  background:linear-gradient(135deg,var(--bg2),rgba(168,85,247,.04));
  border-color:rgba(168,85,247,.25) !important;
}

/* Progress steps row */
.oc-progress-steps{
  display:flex;align-items:flex-start;
  gap:0;margin:.75rem 0 1rem;
}
.oc-prog-step{
  display:flex;flex-direction:column;align-items:center;
  flex:1;position:relative;
}
.oc-prog-dot{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg3);border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  z-index:1;transition:all .3s;flex-shrink:0;
}
.oc-prog-dot.oc-prog-active{
  border-color:#a855f7;background:rgba(168,85,247,.15);
  box-shadow:0 0 12px rgba(168,85,247,.5);
  animation:pulseDot .8s ease-in-out infinite alternate;
}
.oc-prog-dot.oc-prog-done{
  border-color:var(--neon);background:rgba(0,245,212,.15);
}
.oc-prog-dot.oc-prog-done::after{
  content:'✓';font-size:.7rem;color:var(--neon);font-weight:900;
}
.oc-prog-dot.oc-prog-error{
  border-color:var(--red);background:rgba(239,68,68,.15);
}
.oc-prog-dot.oc-prog-error::after{
  content:'✕';font-size:.7rem;color:var(--red);font-weight:900;
}
@keyframes pulseDot{
  from{ box-shadow:0 0 8px rgba(168,85,247,.4); }
  to  { box-shadow:0 0 18px rgba(168,85,247,.8); }
}
.oc-prog-line{
  position:absolute;top:14px;left:50%;
  width:100%;height:2px;
  background:linear-gradient(90deg,var(--border2),transparent);
  z-index:0;
}
.oc-prog-label{
  font-size:.63rem;color:var(--text3);text-align:center;
  margin-top:.4rem;line-height:1.3;
}
.oc-prog-label span{ color:var(--text3);font-weight:600; }

/* Keys warning */
.oc-keys-warning{
  display:flex;align-items:flex-start;gap:.6rem;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);
  border-radius:var(--r-md);padding:.6rem .85rem;
  font-size:.78rem;color:#fbbf24;margin-bottom:.85rem;
}
.oc-keys-warning i{ flex-shrink:0;margin-top:2px; }

/* Mint button */
.oc-mint-btn{
  background:linear-gradient(135deg,#a855f7,#7c3aed) !important;
  border-color:rgba(168,85,247,.5) !important;
  font-size:.9rem !important;font-weight:800 !important;
  letter-spacing:.04em !important;
}
.oc-mint-btn:not(:disabled):hover{
  background:linear-gradient(135deg,#c084fc,#a855f7) !important;
  box-shadow:0 8px 28px rgba(168,85,247,.4) !important;
}
.oc-mint-btn:disabled{
  opacity:.45 !important;cursor:not-allowed !important;
}
.oc-mint-note{
  font-size:.68rem;color:var(--text3);text-align:center;
  margin:.6rem 0 0;display:flex;align-items:center;
  justify-content:center;gap:4px;
}
.oc-mint-note::before{ content:'🔒'; }

/* ── Result card ── */
.oc-result-card{
  background:linear-gradient(135deg,rgba(0,245,212,.06),rgba(168,85,247,.05));
  border:1px solid rgba(0,245,212,.25);
  border-radius:var(--r-xl);padding:1.25rem;
  margin-top:1rem;
}
.oc-result-header{
  display:flex;align-items:center;gap:.85rem;margin-bottom:1rem;
}
.oc-result-icon{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:rgba(0,245,212,.15);border:2px solid var(--neon);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--neon);
}
.oc-result-title{
  font-weight:800;font-size:.95rem;color:var(--text);
}
.oc-result-sub{
  font-size:.75rem;color:var(--neon);font-weight:600;margin-top:2px;
}
.oc-result-fields{
  display:grid;grid-template-columns:1fr 1fr;gap:.65rem;
}
@media(max-width:600px){ .oc-result-fields{ grid-template-columns:1fr; } }
.oc-result-field label{
  font-size:.65rem;color:var(--text3);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  display:block;margin-bottom:3px;
}
.oc-result-val{
  font-size:.78rem;color:var(--text);font-weight:600;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:4px 8px;
  word-break:break-all;
}
.oc-hash{
  font-family:'Courier New',monospace;
  font-size:.68rem;color:#a5f3fc;
}

/* ── On-chain history ── */
.oc-history-empty{
  text-align:center;padding:2rem 1rem;color:var(--text3);
  font-size:.85rem;
}
.oc-history-empty i{
  font-size:1.75rem;display:block;margin-bottom:.6rem;
  opacity:.35;
}
.oc-history-row{
  display:flex;align-items:center;gap:.85rem;
  padding:.75rem 0;border-bottom:1px solid var(--border);
}
.oc-history-row:last-child{ border-bottom:none; }
.oc-history-icon{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:#a855f7;
}
.oc-history-info{ flex:1;min-width:0; }
.oc-history-name{
  font-size:.83rem;font-weight:700;color:var(--text);
}
.oc-history-meta{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.7rem;color:var(--text3);margin:.2rem 0;
}
.oc-chain-pill{
  display:inline-block;border-radius:20px;padding:1px 7px;
  font-size:.6rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;
}
.oc-chain-polygon{
  background:rgba(130,71,229,.15);color:#a78bfa;
  border:1px solid rgba(130,71,229,.3);
}
.oc-chain-ethereum{
  background:rgba(98,126,234,.15);color:#818cf8;
  border:1px solid rgba(98,126,234,.3);
}
.oc-chain-rinkeby{
  background:rgba(96,165,250,.12);color:#60a5fa;
  border:1px solid rgba(96,165,250,.25);
}
.oc-history-hash{
  font-family:'Courier New',monospace;
  font-size:.65rem;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:200px;
}
.oc-history-link{
  color:var(--text3);font-size:.8rem;text-decoration:none;
  flex-shrink:0;transition:color .15s;
}
.oc-history-link:hover{ color:var(--neon); }

/* ════════════════════════════════════════════════════
   CONTACT PAGE
════════════════════════════════════════════════════ */
#page-contact{ padding-bottom:4rem; }

.contact-hero{
  text-align:center;
  padding:4rem 1rem 3rem;
  max-width:700px;
  margin:0 auto;
}

/* Two-column layout */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:2rem;
  align-items:start;
  margin-bottom:3rem;
}

/* Form card */
.contact-form-card{
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:2rem;
}
.contact-form-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;color:var(--text);
  margin-bottom:.25rem;
  display:flex;align-items:center;gap:.5rem;
}
.contact-form-title i{ color:var(--neon); }

/* Type pills */
.contact-type-pills{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-bottom:1.5rem;
}
.contact-pill{
  padding:.35rem .85rem;
  border-radius:var(--r-full);
  font-size:.75rem;font-weight:700;
  border:1px solid var(--border2);
  background:var(--bg2);color:var(--text2);
  cursor:pointer;transition:all .2s;
}
.contact-pill:hover{ border-color:var(--neon);color:var(--neon); }
.contact-pill.active{
  background:var(--neon-dim);border-color:rgba(0,245,212,.5);
  color:var(--neon);
}

/* Form fields */
.contact-form{ display:flex;flex-direction:column;gap:1rem; }
.contact-form-row{ display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.contact-field{ display:flex;flex-direction:column;gap:.4rem; }
.contact-label{ font-size:.8rem;font-weight:600;color:var(--text2); }
.contact-label .req{ color:var(--red); }
.contact-form textarea.input-field{ resize:vertical;min-height:110px; }
.contact-consent{ flex-direction:row;align-items:flex-start;gap:.6rem; }
.contact-checkbox-label{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.8rem;color:var(--text2);line-height:1.5;cursor:pointer;
}
.contact-checkbox-label input{ margin-top:2px;accent-color:var(--neon);flex-shrink:0; }

/* Success state */
.contact-success{
  text-align:center;padding:2.5rem 1rem;
  animation:fadeIn .4s ease;
}
.contact-success-icon{
  font-size:3rem;color:var(--neon);margin-bottom:1rem;
}
.contact-success h3{ font-size:1.4rem;font-weight:800;margin-bottom:.5rem; }
.contact-success p{ color:var(--text2);margin-bottom:1.25rem; }

/* Info sidebar cards */
.contact-info-card{
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:1.5rem;
  margin-bottom:1.25rem;
}
.contact-info-title{
  font-size:.93rem;font-weight:800;
  margin-bottom:1rem;color:var(--text);
  display:flex;align-items:center;gap:.5rem;
}

/* Quick action buttons */
.contact-quick-actions{ display:flex;flex-direction:column;gap:.6rem; }
.contact-quick-btn{
  display:flex;align-items:center;gap:.85rem;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:.75rem .9rem;
  cursor:pointer;width:100%;text-align:left;
  transition:all .2s;color:var(--text);
}
.contact-quick-btn:hover{
  border-color:var(--neon);background:var(--neon-dim);
}
.contact-quick-btn > i:first-child{ font-size:1.1rem;flex-shrink:0; }
.contact-quick-btn > div{ flex:1;display:flex;flex-direction:column;gap:2px; }
.contact-quick-btn strong{ font-size:.83rem;font-weight:700; }
.contact-quick-btn span{ font-size:.72rem;color:var(--text3); }
.contact-quick-btn > i:last-child{ font-size:.75rem;color:var(--text3); }

/* Social channels */
.contact-channels{ display:flex;flex-direction:column;gap:.65rem; }
.contact-channel{
  display:flex;align-items:center;gap:.85rem;
  text-decoration:none;color:var(--text);
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:.7rem .9rem;
  transition:all .2s;
}
.contact-channel:hover{ border-color:var(--border2);transform:translateX(3px); }
.contact-channel-icon{
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}
.contact-channel > div{ display:flex;flex-direction:column;gap:2px; }
.contact-channel strong{ font-size:.82rem;font-weight:700; }
.contact-channel span{ font-size:.72rem;color:var(--text3); }

/* FAQ accordion */
.contact-faq-list{ display:flex;flex-direction:column;gap:.5rem; }
.contact-faq-item{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
}
.contact-faq-item summary{
  padding:.75rem 1rem;font-size:.83rem;font-weight:700;
  cursor:pointer;list-style:none;color:var(--text);
  display:flex;justify-content:space-between;align-items:center;
  transition:color .2s;
}
.contact-faq-item summary::after{
  content:'+';font-size:1.1rem;font-weight:400;
  color:var(--neon);flex-shrink:0;margin-left:.5rem;
}
.contact-faq-item[open] summary::after{ content:'−'; }
.contact-faq-item summary:hover{ color:var(--neon); }
.contact-faq-item p{
  padding:.25rem 1rem .9rem;
  font-size:.8rem;color:var(--text2);line-height:1.65;
  border-top:1px solid var(--border);
  margin:0;
}
.contact-faq-card.contact-info-card{ }

/* Location row */
.contact-locations{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1.25rem;
  margin-top:1rem;
}
.contact-location-card{
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:1.5rem;
  text-align:center;
  transition:transform .25s,box-shadow .25s;
}
.contact-location-card:hover{ transform:translateY(-4px);box-shadow:0 12px 35px rgba(0,0,0,.35); }
.contact-location-icon{ font-size:1.6rem;margin-bottom:.75rem; }
.contact-location-card h4{ font-size:.9rem;font-weight:800;margin-bottom:.3rem;color:var(--text); }
.contact-location-card p{ font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.4rem; }
.contact-location-tag{
  display:inline-block;
  font-size:.7rem;color:var(--text3);
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-full);padding:2px 10px;
}

/* ── Responsive About/Contact ── */
@media(max-width:1024px){
  .about-mission{ grid-template-columns:1fr; }
  .about-mission-card{ max-width:500px;margin:0 auto; }
  .contact-layout{ grid-template-columns:1fr; }
}
@media(max-width:700px){
  .about-hero-stats{ gap:1.5rem; }
  .about-steps{ flex-direction:column;align-items:center; }
  .about-step{ max-width:100%;width:100%; }
  .about-step-arrow{ display:none; }
  .about-pillars{ grid-template-columns:1fr; }
  .contact-form-row{ grid-template-columns:1fr; }
  .about-hero-title{ font-size:2.2rem; }
  .contact-locations{ grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .contact-locations{ grid-template-columns:1fr; }
  .about-team-grid{ grid-template-columns:1fr 1fr; }
}

/* ════════════════════════════════════════════════════
   HERO / LANDING PAGE
════════════════════════════════════════════════════ */
#page-hero{ padding-top:0; padding-bottom:0; }

/* ── Cinematic Banner ── */
.hero-banner{
  position:relative;
  height:100vh;
  min-height:560px;
  max-height:100vh;
  /* Centre content vertically — transparent nav floats over the top */
  display:flex;align-items:center;justify-content:flex-start;
  overflow:hidden;
  margin-top:0;
  padding-top:0;
  box-sizing:border-box;
}
.hero-bg-collage{
  position:absolute;inset:0;display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  z-index:0;
}
.hero-bg-img{
  background-size:cover;background-position:center top;
  transition:transform 8s ease;
}
.hero-bg-img:hover{ transform:scale(1.04); }
.hb1{ grid-column:1;grid-row:1 / span 2; }
.hb2{ grid-column:2;grid-row:1; }
.hb3{ grid-column:2;grid-row:2; }
.hb4{ display:none; }
.hero-banner-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to right, rgba(10,15,30,.96) 45%, rgba(10,15,30,.55) 100%),
    linear-gradient(to top, rgba(10,15,30,.9) 0%, transparent 40%);
}
.hero-banner-content{
  position:relative;z-index:2;
  width:100%;
  max-width:700px;
  /* Vertically centred by flex parent; slight top bias so text feels above-centre */
  padding:0 2rem 0 clamp(1.5rem,5vw,4rem);
  margin-top:-4vh;    /* nudge slightly upward from true centre for visual balance */
  animation:fadeInUp .8s ease both;
}
.hero-pre-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,245,212,.08);
  border:1px solid rgba(0,245,212,.25);
  border-radius:var(--r-full);
  padding:5px 14px;
  font-size:.72rem;font-weight:700;
  color:var(--neon);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:1.25rem;
}
.hero-live-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--neon);
  display:inline-block;
  animation:pulse 1.8s ease infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,245,212,.5); }
  50%{ box-shadow:0 0 0 6px rgba(0,245,212,0); }
}
.hero-main-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.6rem,6vw,5.8rem);
  line-height:1.0;
  color:#fff;
  margin-bottom:.75rem;
}
.hero-title-neon{
  background:linear-gradient(90deg,var(--neon),#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub{
  font-size:1rem;color:rgba(255,255,255,.82);
  line-height:1.65;margin-bottom:1.25rem;max-width:540px;
}
.hero-sub strong{ color:#fff; }

/* CTA Buttons */
.hero-cta-row{
  display:flex;gap:.75rem;flex-wrap:wrap;
  margin-bottom:1.25rem;
}
.btn-hero-primary{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--neon);color:#000;
  font-weight:800;font-size:.95rem;
  padding:.85rem 1.75rem;border-radius:var(--r-full);
  border:none;cursor:pointer;
  transition:all .25s;
  box-shadow:0 0 30px rgba(0,245,212,.35);
}
.btn-hero-primary:hover{
  background:#fff;transform:translateY(-2px);
  box-shadow:0 0 45px rgba(0,245,212,.55);
}
.btn-hero-ghost{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.08);color:#fff;
  font-weight:700;font-size:.95rem;
  padding:.85rem 1.75rem;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.2);cursor:pointer;
  transition:all .25s;backdrop-filter:blur(8px);
}
.btn-hero-ghost:hover{
  background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);
}

/* Social proof strip */
.hero-social-proof{
  display:flex;align-items:center;gap:.9rem;
  flex-wrap:wrap;
}
.hero-proof-avatars{ display:flex; }
.hero-proof-av{
  width:36px;height:36px;border-radius:50%;
  object-fit:cover;object-position:top;
  border:2px solid var(--bg);
  margin-left:-10px;
}
.hero-proof-avatars .hero-proof-av:first-child{ margin-left:0; }
.hero-proof-text{ font-size:.82rem;color:rgba(255,255,255,.75); }
.hero-proof-text strong{ color:#fff; }

/* Scroll hint */
.hero-scroll-hint{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  z-index:2;color:rgba(255,255,255,.4);font-size:1.1rem;
  animation:bounce 2s ease infinite;
}
@keyframes bounce{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(8px); }
}

/* ── Ticker ── */
.hero-ticker{
  background:var(--neon);
  overflow:hidden;padding:.55rem 0;
}
.hero-ticker-track{
  display:inline-flex;gap:2.5rem;
  white-space:nowrap;
  animation:ticker 30s linear infinite;
  font-size:.8rem;font-weight:700;color:#000;
}
.hero-ticker-track span{ flex-shrink:0; }
.ticker-sep{ opacity:.4; }
@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ── Stats Belt ── */
.hero-stats-belt{
  background:var(--card2);
  border-bottom:1px solid var(--border);
  padding:1.5rem 0;
}
.hsb-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  justify-items:center;
  gap:.5rem;
}
.hsb-item{
  text-align:center;width:100%;
  animation:hsbFadeUp .6s ease both;
}
.hsb-item:nth-child(1){ animation-delay:.05s; }
.hsb-item:nth-child(3){ animation-delay:.15s; }
.hsb-item:nth-child(5){ animation-delay:.25s; }
.hsb-item:nth-child(7){ animation-delay:.35s; }
.hsb-item:nth-child(9){ animation-delay:.45s; }
@keyframes hsbFadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{   opacity:1; transform:translateY(0); }
}
.hsb-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:2.6rem;line-height:1;
  background:linear-gradient(90deg,var(--neon),#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hsb-label{ font-size:.73rem;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-top:.3rem; }
.hsb-divider{ width:1px;height:48px;background:var(--border2);flex-shrink:0; }

/* ── Section wrapper ── */
.hero-section{ padding:3.5rem 0; }
.hero-section-header{ text-align:center;margin-bottom:3rem; }
.hero-section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.1;color:var(--text);
  margin:.5rem 0 .9rem;
}
.hero-section-sub{
  font-size:1rem;color:var(--text2);
  max-width:560px;margin:0 auto;line-height:1.7;
}

/* ── Problem vs Solution ── */
.hero-problem{ background:var(--bg); }
.hero-problem-grid{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:2rem;align-items:start;
}
.hero-col-label{
  display:flex;align-items:center;gap:.5rem;
  font-family:'Bebas Neue',sans-serif;font-size:1.3rem;
  letter-spacing:.05em;margin-bottom:1.25rem;
}
.hero-col-label.bad{ color:#ef4444; }
.hero-col-label.good{ color:var(--neon); }
.hero-compare-list{ display:flex;flex-direction:column;gap:.65rem; }
.hcl-item{
  display:flex;align-items:flex-start;gap:.65rem;
  padding:.7rem .9rem;
  border-radius:var(--r-lg);
  font-size:.88rem;line-height:1.5;
}
.hcl-item i{ flex-shrink:0;margin-top:2px;font-size:.85rem; }
.hcl-item.bad{
  background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.15);
  color:var(--text2);
}
.hcl-item.bad i{ color:#ef4444; }
.hcl-item.good{
  background:rgba(0,245,212,.06);border:1px solid rgba(0,245,212,.15);
  color:var(--text);
}
.hcl-item.good i{ color:var(--neon); }
.hcl-item.good strong{ color:var(--neon); }
.hero-vs-badge{
  font-family:'Bebas Neue',sans-serif;font-size:2rem;
  color:var(--border2);padding-top:3.5rem;
  flex-shrink:0;
}

/* ── NIL Results grid ── */
.nil-results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.5rem;
  margin-bottom:3rem;
}
.nil-result-card{
  background:var(--card2);
  border:1px solid var(--border);
  border-left:4px solid var(--nc,var(--neon));
  border-radius:var(--r-xl);
  padding:1.5rem;
  transition:transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.nil-result-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:80px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--nc,var(--neon)) 7%,transparent),transparent);
  pointer-events:none;
}
.nil-result-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 45px rgba(0,0,0,.4);
}
.nil-card-type{
  font-size:.72rem;font-weight:700;color:var(--nc,var(--neon));
  text-transform:uppercase;letter-spacing:.08em;
  display:flex;align-items:center;gap:.35rem;
  margin-bottom:.5rem;
}
.nil-card-amount{
  font-family:'Bebas Neue',sans-serif;
  font-size:2.4rem;line-height:1;color:var(--text);
  margin-bottom:.5rem;
}
.nil-card-desc{
  font-size:.82rem;color:var(--text2);line-height:1.65;margin-bottom:1rem;
}
.nil-card-athlete{
  display:flex;align-items:center;gap:.65rem;
  margin-bottom:.75rem;
}
.nil-av{
  width:40px;height:40px;border-radius:50%;
  object-fit:cover;object-position:top;
  border:2px solid var(--nc,var(--neon));
  flex-shrink:0;
}
.nil-name{ font-weight:700;font-size:.85rem;color:var(--text); }
.nil-sport{ font-size:.75rem;color:var(--text3); }
.nil-card-verified{
  font-size:.72rem;color:var(--nc,var(--neon));
  display:flex;align-items:center;gap:.3rem;
}

/* ── Testimonials ── */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem;
  margin-top:1rem;
}
.testi-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:1.5rem;
  transition:transform .25s,box-shadow .25s;
}
.testi-card:hover{
  transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.testi-stars{
  color:var(--gold);font-size:1rem;letter-spacing:2px;
  margin-bottom:.75rem;
}
.testi-quote{
  font-size:.88rem;color:var(--text2);line-height:1.7;
  margin-bottom:1.1rem;font-style:italic;
}
.testi-person{
  display:flex;align-items:center;gap:.7rem;
  border-top:1px solid var(--border);padding-top:.9rem;
}
.testi-av{
  width:44px;height:44px;border-radius:50%;
  object-fit:cover;object-position:top;
  border:2px solid var(--border2);flex-shrink:0;
}
.testi-name{ font-weight:700;font-size:.85rem;color:var(--text); }
.testi-role{ font-size:.75rem;color:var(--text3); }

/* ── Hero Features ── */
.hero-features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
}
.hf-card{
  background:var(--card2);border:1px solid var(--border);
  border-top:3px solid var(--hfc,var(--neon));
  border-radius:var(--r-xl);padding:1.75rem 1.5rem;
  transition:transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.hf-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:70px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hfc,var(--neon)) 8%,transparent),transparent);
  pointer-events:none;
}
.hf-card:hover{
  transform:translateY(-5px);box-shadow:0 14px 45px rgba(0,0,0,.4);
}
.hf-icon{
  width:50px;height:50px;border-radius:50%;
  background:color-mix(in srgb,var(--hfc,var(--neon)) 12%,transparent);
  display:flex;align-items:center;justify-content:center;
  color:var(--hfc,var(--neon));font-size:1.25rem;
  margin-bottom:1rem;
  border:1px solid color-mix(in srgb,var(--hfc,var(--neon)) 25%,transparent);
}
.hf-card h3{
  font-size:1rem;font-weight:800;margin-bottom:.5rem;color:var(--text);
}
.hf-card p{
  font-size:.83rem;color:var(--text2);line-height:1.65;margin-bottom:.9rem;
}
.hf-result{
  font-size:.75rem;font-weight:700;color:var(--hfc,var(--neon));
  display:flex;align-items:center;gap:.4rem;
  background:color-mix(in srgb,var(--hfc,var(--neon)) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--hfc,var(--neon)) 20%,transparent);
  border-radius:var(--r-full);padding:.35rem .75rem;
  width:fit-content;
}

/* ── Mosaic ── */
.hero-mosaic-section{
  display:grid;grid-template-columns:1fr 420px;
  min-height:420px;
}
.hero-mosaic{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:4px;
  overflow:hidden;
}
.hm-col{
  display:grid;grid-template-rows:1fr 1fr;gap:4px;
}
.hm-item{
  background-size:cover;background-position:center;
  position:relative;overflow:hidden;
  transition:transform .5s;
  cursor:default;
}
.hm-item:hover{ transform:scale(1.03); }
.hm-tall{ grid-row:1 / span 2; }
.hm-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 50%);
  display:flex;align-items:flex-end;padding:.75rem;
}
.hm-tag{
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  color:#fff;font-size:.75rem;font-weight:700;
  padding:.3rem .7rem;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.15);
}
.hero-mosaic-text{
  background:var(--bg2);
  display:flex;flex-direction:column;justify-content:center;
  padding:3rem 2.5rem;
  border-left:1px solid var(--border);
}
.hero-mosaic-text p{
  color:var(--text2);line-height:1.75;font-size:.95rem;
  margin-bottom:1.75rem;
}

/* ── Final CTA ── */
.hero-final-cta{
  position:relative;
  background:var(--bg2);
  padding:4rem 1rem;
  text-align:center;
  border-top:1px solid var(--border2);
  overflow:hidden;
}
.hero-final-cta-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(0,245,212,.1) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 50%,rgba(124,58,237,.12) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 0%,rgba(245,158,11,.07) 0%,transparent 60%);
}
.hero-final-cta-inner{ position:relative;z-index:1;max-width:680px;margin:0 auto; }
.hero-final-icon{
  font-size:2.6rem;margin-bottom:.75rem;
  filter:drop-shadow(0 0 20px rgba(0,245,212,.6));
}
.hero-final-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,4.5vw,3.6rem);
  line-height:1.1;color:var(--text);margin-bottom:.75rem;
}
.hero-final-sub{
  font-size:.95rem;color:var(--text2);
  line-height:1.65;max-width:540px;
  margin:0 auto 1.5rem;
}
.hero-final-sub strong{ color:var(--text); }
.hero-trust-badges{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;
  margin-top:1rem;
}
.hero-trust-badges span{
  display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:var(--text3);
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-full);padding:.35rem .9rem;
}
.hero-trust-badges span i{ color:var(--neon);font-size:.8rem; }

/* ════════════════════════════════════════════════════
   HERO PAGE — RESPONSIVE BREAKPOINTS
════════════════════════════════════════════════════ */

/* ── Medium screens: 1024px and below ── */
@media(max-width:1024px){
  /* Mosaic sidebar narrows */
  .hero-mosaic-section{ grid-template-columns:1fr 340px; }
}

/* ── Tablet: 900px and below ── */
@media(max-width:900px){
  .hero-banner{
    min-height:500px;
  }
  .hero-banner-content{
    max-width:100%;
    padding:0 1.75rem;
    margin-top:-3vh;
  }
  /* Title: tighter at tablet so it stays 2 lines or fewer */
  .hero-main-title{
    font-size:clamp(2.4rem,5.5vw,4.2rem);
  }
  /* Problem grid: keep 3-col but tighten gap and text */
  .hero-problem-grid{
    grid-template-columns:1fr auto 1fr;
    gap:.75rem;
  }
  .hcl-item{ font-size:.82rem; padding:.55rem .75rem; }
  /* Mosaic: stack text below image grid */
  .hero-mosaic-section{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .hero-mosaic-text{
    border-left:none;
    border-top:1px solid var(--border);
    padding:2rem 1.5rem;
  }
  /* Stats belt: all 5 items in one row, drop the flex min-width */
  .hsb-grid{
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    gap:.25rem;
  }
  .hsb-num{ font-size:2rem; }
  .hsb-label{ font-size:.65rem; }
  /* Final CTA */
  .hero-final-cta{ padding:3.5rem 1rem; }
}

/* ── Mobile: 640px and below ── */
@media(max-width:640px){
  .hero-banner{
    min-height:100svh;
    align-items:center;
  }
  .hero-banner-content{
    padding:0 1.25rem;
    margin-top:-5vh; /* nudge above true centre on mobile */
  }
  .hero-main-title{
    font-size:clamp(2rem,9.5vw,3rem);
    margin-bottom:.45rem;
  }
  .hero-pre-badge{ margin-bottom:.6rem; font-size:.68rem; }
  .hero-sub{
    font-size:.88rem;
    margin-bottom:.85rem;
    line-height:1.55;
  }
  .hero-cta-row{
    margin-bottom:.75rem;
    gap:.5rem;
  }
  .btn-hero-primary,.btn-hero-ghost{
    font-size:.84rem;
    padding:.7rem 1.2rem;
  }
  /* Hide social proof on very small screens */
  .hero-social-proof{ display:none; }
  /* Stats belt: 3 items per row, no dividers */
  .hero-stats-belt{ padding:1.25rem 0; }
  .hsb-grid{
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:auto;
    gap:.65rem;
    justify-items:center;
  }
  .hsb-divider{ display:none; }
  .hsb-num{ font-size:1.8rem; }
  .hsb-label{ font-size:.62rem; }
  /* Problem/Solution: single column */
  .hero-problem-grid{
    grid-template-columns:1fr;
    gap:.75rem;
  }
  .hero-vs-badge{ display:none; }
  /* Mosaic: hide image grid, keep text panel only */
  .hero-mosaic{ display:none; }
  .hero-mosaic-section{ grid-template-columns:1fr; }
  /* Sections */
  .hero-section{ padding:2.25rem 0; }
  .hero-section-header{ margin-bottom:1.5rem; }
  .hero-final-cta{ padding:2.5rem 1rem; }
  .hero-final-icon{ font-size:2.2rem; margin-bottom:.6rem; }
  /* Cards / grids */
  .nil-results-grid{ gap:.85rem; }
  .testimonials-grid{ gap:.85rem; }
  .hero-features-grid{ gap:.85rem; }
}

/* ════════════════════════════════════════════════════
   PRICING PAGE
════════════════════════════════════════════════════ */
#page-pricing{ padding-bottom:4rem; }

.pricing-hero{
  text-align:center;padding:4rem 1rem 2.5rem;
  max-width:700px;margin:0 auto;
}
.pricing-toggle-row{
  display:flex;align-items:center;justify-content:center;gap:.85rem;
  margin-top:1.5rem;flex-wrap:wrap;
}
.pt-label{ font-size:.88rem;color:var(--text2);font-weight:600; }
.pricing-toggle{
  position:relative;display:inline-block;
  width:50px;height:26px;
}
.pricing-toggle input{ opacity:0;width:0;height:0; }
.pt-slider{
  position:absolute;inset:0;
  background:var(--border2);border-radius:var(--r-full);
  cursor:pointer;transition:.3s;
}
.pt-slider::before{
  content:'';position:absolute;
  width:20px;height:20px;border-radius:50%;
  background:#fff;left:3px;top:3px;
  transition:.3s;
}
.pricing-toggle input:checked + .pt-slider{ background:var(--neon); }
.pricing-toggle input:checked + .pt-slider::before{ transform:translateX(24px); }
.pt-save-badge{
  background:var(--neon);color:#000;
  font-size:.7rem;font-weight:800;
  padding:2px 8px;border-radius:var(--r-full);
  margin-left:.3rem;
}

/* Pricing cards */
.pricing-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
  margin:0 0 3rem;
  align-items:start;
}
.pricing-card{
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:2rem 1.75rem;
  transition:transform .25s,box-shadow .25s;
  position:relative;
}
.pricing-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 50px rgba(0,0,0,.35);
}
.pc-featured{
  border-color:rgba(0,245,212,.4);
  background:var(--card);
  box-shadow:0 0 40px rgba(0,245,212,.1);
  transform:scale(1.02);
}
.pc-featured:hover{ transform:scale(1.02) translateY(-4px); }
.pc-popular-ribbon{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--neon);color:#000;
  font-size:.72rem;font-weight:800;
  padding:4px 14px;border-radius:var(--r-full);
  white-space:nowrap;
}
.pc-team{ border-color:rgba(59,130,246,.3); }
.pc-tier-badge{
  display:inline-block;
  font-size:.7rem;font-weight:800;letter-spacing:.1em;
  padding:3px 12px;border-radius:var(--r-full);
  margin-bottom:.75rem;
}
.pc-name{
  font-family:'Bebas Neue',sans-serif;font-size:1.8rem;
  line-height:1;color:var(--text);margin-bottom:.5rem;
}
.pc-price-wrap{ margin-bottom:.75rem; }
.pc-price{
  display:flex;align-items:flex-start;gap:2px;
  color:var(--text);
}
.pc-curr{
  font-size:1.3rem;font-weight:700;margin-top:.4rem;color:var(--text2);
}
.pc-amt{
  font-family:'Bebas Neue',sans-serif;font-size:3.5rem;line-height:1;
}
.pc-period{
  font-size:.78rem;color:var(--text3);margin-top:.2rem;
}
.pc-desc{
  font-size:.85rem;color:var(--text2);line-height:1.6;
  margin-bottom:1.25rem;border-bottom:1px solid var(--border);
  padding-bottom:1.25rem;
}
.pc-cta{
  width:100%;padding:.8rem;border-radius:var(--r-full);
  font-size:.88rem;font-weight:700;
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-bottom:1.25rem;border:none;
}
.pc-cta-ghost{
  background:var(--bg2);color:var(--text);
  border:1px solid var(--border2);
}
.pc-cta-ghost:hover{ background:var(--border);border-color:var(--text3); }
.pc-cta-primary{
  background:var(--neon);color:#000;
  box-shadow:0 0 25px rgba(0,245,212,.3);
}
.pc-cta-primary:hover{ background:#fff;box-shadow:0 0 35px rgba(0,245,212,.5); }
.pc-cta-team{
  background:rgba(59,130,246,.15);color:var(--blue);
  border:1px solid rgba(59,130,246,.35);
}
.pc-cta-team:hover{ background:var(--blue);color:#fff; }
.pc-features-label{
  font-size:.75rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:.75rem;
}
.pc-features{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:.5rem;
}
.pc-features li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.83rem;line-height:1.45;
}
.pc-features li.yes{ color:var(--text); }
.pc-features li.no{ color:var(--text3); }
.pc-features li i{ font-size:.75rem;flex-shrink:0;margin-top:2px; }
.pc-features li.yes i{ color:var(--neon); }
.pc-features li.no i{ color:var(--border2); }

/* NFT Add-on Box */
.pc-addon-box{
  margin-top:1.5rem;
  border:1px solid rgba(255,200,50,.25);
  border-radius:var(--r-lg);
  background:rgba(255,200,50,.04);
  padding:1.1rem 1.2rem 1rem;
  position:relative;
}
.pc-addon-box--pro{
  border-color:rgba(0,245,212,.3);
  background:rgba(0,245,212,.04);
}
.pc-addon-box--team{
  border-color:rgba(59,130,246,.3);
  background:rgba(59,130,246,.04);
}
.pc-addon-label{
  font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:.4rem;
  display:flex;align-items:center;gap:.4rem;
}
.pc-addon-box--pro .pc-addon-label{ color:var(--neon); }
.pc-addon-box--team .pc-addon-label{ color:var(--blue); }
.pc-addon-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.15rem;color:var(--text);
  margin-bottom:.35rem;letter-spacing:.03em;
}
.pc-addon-price{
  display:flex;align-items:flex-end;gap:1px;
  font-family:'Bebas Neue',sans-serif;font-size:2rem;
  color:var(--gold);line-height:1;margin-bottom:.6rem;
}
.pc-addon-box--pro .pc-addon-price{ color:var(--neon); }
.pc-addon-box--team .pc-addon-price{ color:var(--blue); }
.pc-addon-price .pc-curr{ font-size:1rem;font-weight:700;margin-bottom:.15rem; }
.pc-addon-per{
  font-family:'Inter',sans-serif;font-size:.75rem;
  font-weight:600;color:var(--text3);margin-bottom:.2rem;margin-left:2px;
}
.pc-addon-features{
  list-style:none;padding:0;margin:0 0 .85rem;
  display:flex;flex-direction:column;gap:.38rem;
}
.pc-addon-features li{
  display:flex;align-items:flex-start;gap:.5rem;
  font-size:.8rem;color:var(--text2);line-height:1.4;
}
.pc-addon-features li i{
  font-size:.7rem;flex-shrink:0;margin-top:2px;
  color:var(--gold);
}
.pc-addon-box--pro .pc-addon-features li i{ color:var(--neon); }
.pc-addon-box--team .pc-addon-features li i{ color:var(--blue); }
.pc-addon-btn{
  width:100%;padding:.6rem .8rem;
  border-radius:var(--r-full);
  font-size:.8rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  border:1px solid rgba(255,200,50,.4);
  background:rgba(255,200,50,.1);color:var(--gold);
  transition:all .2s;
}
.pc-addon-box--pro .pc-addon-btn{
  border-color:rgba(0,245,212,.35);
  background:rgba(0,245,212,.1);color:var(--neon);
}
.pc-addon-box--team .pc-addon-btn{
  border-color:rgba(59,130,246,.35);
  background:rgba(59,130,246,.1);color:var(--blue);
}
.pc-addon-btn:hover{
  background:var(--gold);color:#000;
  box-shadow:0 0 18px rgba(255,200,50,.35);
}
.pc-addon-box--pro .pc-addon-btn:hover{
  background:var(--neon);color:#000;
  box-shadow:0 0 18px rgba(0,245,212,.35);
}
.pc-addon-box--team .pc-addon-btn:hover{
  background:var(--blue);color:#fff;
  box-shadow:0 0 18px rgba(59,130,246,.35);
}

/* Comparison table */
.pricing-compare-section{ margin:2rem 0; }
.pricing-compare-title{
  font-family:'Bebas Neue',sans-serif;font-size:1.8rem;
  color:var(--text);margin-bottom:1.25rem;text-align:center;
}
.pricing-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);border-radius:var(--r-xl);
  background:var(--card2);
}
.pricing-table{
  width:100%;border-collapse:collapse;font-size:.83rem;
}
.pricing-table th{
  padding:.8rem 1rem;text-align:center;
  background:var(--bg2);color:var(--text);font-weight:700;
  border-bottom:1px solid var(--border);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
}
.pricing-table th.pt-feat-col{ text-align:left;width:38%; }
.pricing-table th.pt-pro-col{ background:rgba(0,245,212,.06);color:var(--neon); }
.pricing-table th.pt-team-col{ background:rgba(59,130,246,.06);color:var(--blue); }
.pt-badge-pro{ font-size:.8rem; }
.pricing-table td{
  padding:.65rem 1rem;text-align:center;
  border-bottom:1px solid var(--border);color:var(--text2);
}
.pricing-table td:first-child{ text-align:left;color:var(--text); }
.pricing-table tr.pt-category td{
  background:var(--bg);font-weight:700;color:var(--text3);
  font-size:.75rem;letter-spacing:.06em;padding:.5rem 1rem;
}
.pricing-table tbody tr:last-child td{ border-bottom:none; }
.pricing-table tbody tr:hover td{ background:rgba(255,255,255,.02); }

/* FAQ */
.pricing-faq-section{ margin:2rem 0; }
.pricing-faq-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}

/* ════════════════════════════════════════════════════
   TEAM CARD PAGE
════════════════════════════════════════════════════ */
#page-team{ padding-bottom:4rem; }

.team-hero{
  text-align:center;
  padding:3.5rem 1rem 2rem;
  max-width:680px;margin:0 auto;
}

/* Main layout */
.team-layout{
  display:grid;grid-template-columns:1fr 380px;
  gap:2rem;align-items:start;
  margin-bottom:1rem;
}

/* Form col */
.team-section-card{
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:1.75rem;
}
.team-section-title{
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;
  color:var(--text);margin-bottom:1rem;
  display:flex;align-items:center;gap:.5rem;
}
.team-form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.85rem;
}
.team-form-row3{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:.85rem;
  margin-top:.85rem;
}

/* Coach card preview */
.team-preview-col{ position:sticky;top:80px; }
.team-card-preview{
  background:linear-gradient(145deg,#0a1628,#1a0a3e);
  border:1px solid rgba(59,130,246,.3);
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.tcp-banner{
  height:90px;position:relative;overflow:hidden;
}
.tcp-banner-gfx{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(59,130,246,.5),rgba(124,58,237,.4));
}
.tcp-banner-level{
  position:absolute;top:.5rem;right:.75rem;
  font-size:.62rem;font-weight:800;letter-spacing:.12em;
  color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.3);
  padding:2px 8px;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.15);
}
.tcp-body{ padding:1rem 1.25rem 1.25rem; }
.tcp-avatar-wrap{
  display:flex;align-items:flex-end;gap:.5rem;
  margin-top:-36px;margin-bottom:.75rem;
  position:relative;
}
.tcp-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  border:3px solid #0a1628;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#fff;flex-shrink:0;
}
.tcp-verified{
  background:var(--neon);color:#000;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:900;
  margin-bottom:4px;
  border:2px solid #0a1628;
}
.tcp-name{
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;
  line-height:1;color:#fff;margin-bottom:.2rem;
}
.tcp-title{ font-size:.75rem;color:rgba(255,255,255,.6);margin-bottom:.65rem; }
.tcp-badges{ display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.85rem; }
.tcp-badge{
  font-size:.68rem;font-weight:700;padding:2px 9px;
  border-radius:var(--r-full);
}
.tcp-stats{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:.5rem;margin-bottom:.85rem;
}
.tcp-stat{
  background:rgba(255,255,255,.06);
  border-radius:var(--r-lg);padding:.55rem .5rem;
  text-align:center;border:1px solid rgba(255,255,255,.08);
}
.tcp-stat-val{
  font-family:'Bebas Neue',sans-serif;font-size:1.3rem;
  color:#fff;line-height:1;
}
.tcp-stat-lbl{ font-size:.62rem;color:rgba(255,255,255,.45);margin-top:2px; }
.tcp-bio{
  font-size:.78rem;color:rgba(255,255,255,.55);
  line-height:1.6;margin-bottom:.85rem;font-style:italic;
}
.tcp-actions{ display:flex;gap:.5rem; }

/* Roster section */
.team-roster-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.5rem;
}
.team-roster-count{
  font-size:.75rem;font-weight:700;color:var(--neon);
  background:var(--neon-dim);border:1px solid rgba(0,245,212,.25);
  padding:2px 10px;border-radius:var(--r-full);
  font-family:inherit;
}
.team-roster-filters{
  display:flex;gap:.75rem;flex-wrap:wrap;
  margin-bottom:1rem;
}
.team-roster-table-wrap{
  overflow-x:auto;border-radius:var(--r-lg);
  border:1px solid var(--border);
}
.team-roster-table{
  width:100%;border-collapse:collapse;font-size:.83rem;
}
.team-roster-table th{
  padding:.7rem 1rem;text-align:left;
  background:var(--bg2);color:var(--text3);
  font-size:.73rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--border);
}
.team-roster-table td{
  padding:.7rem 1rem;
  border-bottom:1px solid var(--border);
  color:var(--text2);vertical-align:middle;
}
.team-roster-table tbody tr:last-child td{ border-bottom:none; }
.team-roster-table tbody tr:hover td{ background:rgba(255,255,255,.02); }
.roster-empty{ text-align:center;padding:3rem 1rem;color:var(--text3); }

/* Roster row elements */
.ra-name{ font-weight:700;color:var(--text);font-size:.87rem; }
.ra-pos{ font-size:.74rem;color:var(--text3); }
.ra-sport-badge{
  display:inline-block;
  font-size:.7rem;font-weight:700;padding:2px 8px;
  border-radius:var(--r-full);
  background:var(--neon-dim);color:var(--neon);
  border:1px solid rgba(0,245,212,.2);
}
.ra-status{
  font-size:.72rem;font-weight:700;padding:3px 9px;
  border-radius:var(--r-full);
}
.ra-status.recruiting{ background:rgba(0,245,212,.1);color:var(--neon);border:1px solid rgba(0,245,212,.2); }
.ra-status.open{ background:rgba(245,158,11,.1);color:var(--gold);border:1px solid rgba(245,158,11,.2); }
.ra-status.committed{ background:rgba(34,197,94,.1);color:var(--green);border:1px solid rgba(34,197,94,.2); }
.ra-status.placed{ background:rgba(124,58,237,.1);color:var(--purple-light);border:1px solid rgba(124,58,237,.2); }
.ra-actions{ display:flex;gap:.4rem;flex-wrap:wrap; }
.ra-btn{
  font-size:.7rem;font-weight:700;padding:.3rem .65rem;
  border-radius:var(--r-full);cursor:pointer;transition:all .2s;
  border:none;
}
.ra-btn-send{ background:var(--neon-dim);color:var(--neon);border:1px solid rgba(0,245,212,.25); }
.ra-btn-send:hover{ background:var(--neon);color:#000; }
.ra-btn-view{ background:var(--bg2);color:var(--text2);border:1px solid var(--border); }
.ra-btn-view:hover{ border-color:var(--neon);color:var(--neon); }
.ra-btn-del{ background:rgba(239,68,68,.08);color:#ef4444;border:1px solid rgba(239,68,68,.2); }
.ra-btn-del:hover{ background:#ef4444;color:#fff; }

/* Send to Scout */
.send-scout-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.85rem;
}
.send-scout-actions{
  display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap;
}

/* Sent log */
#sentLog{ display:flex;flex-direction:column;gap:.5rem; }
.sent-log-item{
  display:flex;align-items:center;gap:.75rem;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:.65rem .9rem;
  font-size:.8rem;
}
.sent-log-item i{ color:var(--neon);flex-shrink:0; }
.sent-log-info{ flex:1; }
.sent-log-time{ color:var(--text3);font-size:.72rem;flex-shrink:0; }

/* Analytics */
.team-analytics-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.ta-card{
  background:var(--bg2);border:1px solid var(--border);
  border-top:3px solid var(--tac,var(--neon));
  border-radius:var(--r-xl);padding:1.25rem;
  text-align:center;position:relative;overflow:hidden;
  transition:transform .2s;
}
.ta-card:hover{ transform:translateY(-3px); }
.ta-val{
  font-family:'Bebas Neue',sans-serif;font-size:2.8rem;
  color:var(--tac,var(--neon));line-height:1;
}
.ta-lbl{
  font-size:.72rem;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;margin-top:.3rem;
}
.ta-icon{
  position:absolute;bottom:.5rem;right:.75rem;
  font-size:2rem;opacity:.08;color:var(--tac,var(--neon));
}

/* Modal footer */
.modal-footer{
  display:flex;justify-content:flex-end;gap:.75rem;
  padding:1rem 1.5rem;border-top:1px solid var(--border);
  background:var(--bg2);
}

/* ── Responsive: Pricing / Team (non-hero rules kept here) ── */
@media(max-width:1100px){
  /* team layout */
  .team-layout{ grid-template-columns:1fr; }
  .team-preview-col{ position:static; }
  .team-analytics-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:900px){
  /* pricing */
  .pricing-cards-grid{ grid-template-columns:1fr; }
  .pc-featured{ transform:none; }
  .pc-featured:hover{ transform:translateY(-4px); }
  .pricing-faq-grid{ grid-template-columns:1fr; }
  .pricing-table-wrap{ font-size:.78rem; }
  /* recruit */
  .send-scout-grid{ grid-template-columns:1fr; }
}
@media(max-width:700px){
  /* team */
  .team-form-grid{ grid-template-columns:1fr; }
  .team-form-row3{ grid-template-columns:1fr 1fr; }
  .team-analytics-grid{ grid-template-columns:1fr 1fr; }
  .team-roster-filters{ flex-direction:column; }
  .team-roster-filters .input-field{ max-width:100% !important; }
}

/* ============================================================
   NFT TRADING CARDS
   ============================================================ */

/* ── Page layout ── */
.nft-mint-grid{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:1.75rem;
  align-items:start;
}
.nft-designer-panel,
.nft-preview-panel{
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:var(--r-xl);
  padding:1.5rem;
}

/* ── Fields ── */
.nft-field{ margin-bottom:1rem; }
.nft-field label{
  display:block;
  font-size:.8rem;
  font-weight:600;
  color:var(--text2);
  margin-bottom:.35rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.nft-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}

/* ── Supply quick-pick buttons ── */
.nft-supply-row{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.nft-supply-btn{
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:var(--r-full);
  color:var(--text2);
  font-size:.75rem;
  font-weight:700;
  padding:5px 12px;
  cursor:pointer;
  transition:all .18s;
}
.nft-supply-btn:hover,
.nft-supply-btn.active{
  background:var(--neon-dim);
  border-color:var(--neon);
  color:var(--neon);
}

/* ══════════════════════════════════════════════════════════════
   ██  HOLOGRAPHIC TRADING CARD  ██
   Premium collector card — chrome border · stadium beams
   PRIME badge · crystal corners · holo shine sweep
   ══════════════════════════════════════════════════════════════ */

/* Keyframe: holographic shimmer sweep */
@keyframes holoSweep {
  0%   { background-position: 200% 50%; }
  100% { background-position:-200% 50%; }
}
@keyframes cornerPulse {
  0%,100% { opacity:.7; transform:scale(1);   }
  50%     { opacity:1;  transform:scale(1.15); }
}
@keyframes beamPulse {
  0%,100% { opacity:.18; }
  50%     { opacity:.28; }
}
@keyframes primeBadgeShimmer {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

.nft-card-preview-wrap{
  display:flex;
  justify-content:center;
  perspective:1100px;
  padding:1.5rem 0 .75rem;
}

/* ── Card shell ── */
.nft-trading-card{
  position:relative;
  width:260px;
  height:420px;         /* fixed height for full-body photo */
  border-radius:18px;
  padding:0;
  overflow:hidden;
  cursor:default;
  --nft-accent: #00f5d4;

  border:3px solid transparent;
  background-clip:padding-box;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.07),
    0 20px 60px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.18);

  background-image:
    linear-gradient(160deg,rgba(255,255,255,.04) 0%,transparent 40%,transparent 60%,rgba(255,255,255,.03) 100%);

  transition:transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s ease;
  transform-style:preserve-3d;
}

/* Prism chrome border via pseudo */
.nft-trading-card::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:20px;
  background:linear-gradient(
    135deg,
    #ffffff44 0%,
    var(--nft-accent) 20%,
    #ffffff22 35%,
    rgba(255,255,255,.6) 50%,
    #ffffff22 65%,
    var(--nft-accent) 80%,
    #ffffff44 100%
  );
  background-size:300% 300%;
  animation:holoSweep 4s linear infinite;
  z-index:0;
  pointer-events:none;
}

/* Stadium spotlight beams */
.nft-trading-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    conic-gradient(from 260deg at 50% -10%,
      transparent 0deg,
      rgba(255,255,255,.13) 8deg,
      transparent 16deg,
      transparent 30deg,
      rgba(255,255,255,.09) 38deg,
      transparent 46deg,
      transparent 60deg,
      rgba(255,255,255,.07) 66deg,
      transparent 74deg
    );
  animation:beamPulse 3s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}

.nft-trading-card:hover{
  transform:rotateY(-8deg) rotateX(4deg) scale(1.04);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.12),
    0 30px 80px rgba(0,0,0,.8),
    0 0 50px var(--nft-accent, rgba(0,245,212,.3)),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Card inner wrapper — sits above pseudo layers */
.nft-card-inner{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:0;
  min-height:414px;
}

/* ── Full-body photo zone ── */
.nft-card-photo{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.nft-card-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;  /* shows head+torso, never clips top of player */
  display:block;
}
/* Fallback emoji avatar when no photo */
.nft-card-photo-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:5rem;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.08),rgba(0,0,0,.4));
}

/* Gradient overlay — darkens bottom so text is readable */
.nft-card-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.55) 0%,       /* dark top for header */
    rgba(0,0,0,.0)  30%,      /* clear window — show athlete */
    rgba(0,0,0,.0)  52%,
    rgba(0,0,0,.82) 76%,      /* strong fade for stat bar */
    rgba(0,0,0,.95) 100%
  );
}

/* Content layer — floats above photo + overlay */
.nft-card-content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:.7rem .85rem;
}

/* Header stays at top */
.nft-card-content .nft-card-header{
  margin-bottom:0;
}

/* Spacer pushes name/stats to bottom */
.nft-card-content .nft-card-spacer{
  flex:1;
}

/* Name block at bottom */
.nft-card-content .nft-card-athlete-name{
  margin-bottom:.05rem;
}
.nft-card-content .nft-card-sport-level{
  margin:.0 0 .35rem;
}
.nft-card-content .nft-card-stat-bar{
  margin-bottom:.35rem;
}
.nft-card-content .nft-card-highlight{
  margin-bottom:.3rem;
}

/* ── Holographic shine sweep (moves on hover via JS-injected mousemove) ── */
.nft-card-shine{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.09) 40%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.09) 60%,
    transparent 80%
  );
  background-size:200% 200%;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:9;
  opacity:0;
  transition:opacity .2s;
}
.nft-trading-card:hover .nft-card-shine{
  opacity:1;
  animation:holoSweep 1.8s linear infinite;
}

/* ── Crystal corner shards ── */
.nft-corner{
  position:absolute;
  width:22px;
  height:22px;
  z-index:8;
  pointer-events:none;
  animation:cornerPulse 2.8s ease-in-out infinite;
}
.nft-corner--tl{ top:7px;  left:7px;  }
.nft-corner--tr{ top:7px;  right:7px; animation-delay:.7s; }
.nft-corner--bl{ bottom:7px; left:7px;  animation-delay:1.4s; }
.nft-corner--br{ bottom:7px; right:7px; animation-delay:2.1s; }
.nft-corner svg{ width:100%; height:100%; }

/* ── Header row: series badge + card number ── */
.nft-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.55rem;
}

/* PRIME-style iridescent series badge */
.nft-series-badge{
  font-family:'Bebas Neue', sans-serif;
  font-size:.78rem;
  letter-spacing:.14em;
  color:transparent;
  background:linear-gradient(90deg,#00f5d4,#a855f7,#f59e0b,#00f5d4);
  background-size:300% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:primeBadgeShimmer 3s ease-in-out infinite;
  text-transform:uppercase;
  padding:2px 0;
  line-height:1;
}

.nft-card-num{
  font-family:'Bebas Neue', sans-serif;
  font-size:.82rem;
  font-weight:800;
  color:rgba(255,255,255,.45);
  letter-spacing:.1em;
}

/* ── Rarity accent glow (decorative, behind photo) ── */
.nft-rarity-glow{
  position:absolute;
  bottom:0;left:0;right:0;
  height:180px;
  pointer-events:none;
  z-index:2;
  background:radial-gradient(
    ellipse 80% 60% at 50% 100%,
    var(--nft-accent-glow, rgba(0,245,212,.25)),
    transparent 70%
  );
}

/* ── Athlete name — large Bebas Neue ── */
.nft-card-athlete-name{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.45rem;
  letter-spacing:.1em;
  color:#fff;
  text-align:center;
  line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  margin-bottom:.1rem;
}

/* ── Sport · Level subline ── */
.nft-card-sport-level{
  font-size:.68rem;
  color:rgba(255,255,255,.5);
  text-align:center;
  margin:.15rem 0 .55rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ── Stats block ── */
.nft-card-stat-bar{
  display:flex;
  justify-content:space-around;
  background:rgba(0,0,0,.35);
  border-radius:10px;
  padding:.5rem .25rem;
  margin-bottom:.5rem;
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(4px);
}
.nft-stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
}
.nft-stat-val{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.1rem;
  letter-spacing:.06em;
  color:var(--nft-accent);
  line-height:1;
  text-shadow:0 0 10px var(--nft-accent);
}
.nft-stat-lbl{
  font-size:.56rem;
  color:rgba(255,255,255,.4);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-top:1px;
}

/* ── Highlight quote ── */
.nft-card-highlight{
  font-size:.67rem;
  color:rgba(255,255,255,.78);
  text-align:center;
  background:rgba(255,255,255,.06);
  border-left:2px solid var(--nft-accent);
  border-radius:4px;
  padding:.3rem .65rem;
  margin-bottom:.4rem;
  font-style:italic;
  min-height:0;
}

/* ── Fan message ── */
.nft-card-message{
  font-size:.63rem;
  color:rgba(255,255,255,.4);
  text-align:center;
  margin-bottom:.4rem;
  min-height:0;
  font-style:italic;
}

/* ── Footer bar ── */
.nft-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:.45rem;
  margin-top:auto;
}

/* Rarity pill with colour accent */
.nft-rarity-pill{
  font-family:'Bebas Neue', sans-serif;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nft-supply-tag{
  font-size:.58rem;
  color:rgba(255,255,255,.38);
  font-weight:600;
  letter-spacing:.04em;
}

/* DraftReady brand micro-text */
.nft-brand-tag{
  font-size:.52rem;
  font-weight:900;
  font-family:'Bebas Neue', sans-serif;
  color:var(--nft-accent);
  opacity:.55;
  letter-spacing:.12em;
}

/* ── Price display under preview ── */
.nft-price-display{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  margin-top:.85rem;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:var(--r-full);
  padding:.45rem 1.25rem;
}
.nft-price-label{
  font-size:.75rem;
  color:var(--text3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.nft-price-val{
  font-size:1.15rem;
  font-weight:900;
  color:var(--neon);
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:.06em;
}
.nft-royalty-tag{
  font-size:.72rem;
  color:var(--text3);
}

/* ── Collection grid ── */
.nft-collection-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.25rem;
  flex-wrap:wrap;
  gap:.75rem;
}
.nft-count-chip{
  background:var(--neon-dim);
  color:var(--neon);
  border-radius:var(--r-full);
  padding:3px 10px;
  font-size:.78rem;
  font-weight:700;
}
.nft-collection-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:1.25rem;
}
.nft-mini-card-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.65rem;
}
.nft-trading-card--mini{
  width:170px;
  height:250px;
  border-radius:13px;
}
.nft-trading-card--mini .nft-card-inner{
  padding:0;
  min-height:244px;
}
.nft-trading-card--mini .nft-card-content{
  padding:.5rem .6rem;
}
.nft-trading-card--mini .nft-card-athlete-name{ font-size:.95rem; }
.nft-trading-card--mini .nft-card-sport-level{ font-size:.55rem; }
.nft-trading-card--mini .nft-stat-val{ font-size:.88rem; }
.nft-trading-card--mini .nft-stat-lbl{ font-size:.5rem; }
.nft-trading-card--mini .nft-card-header .nft-series-badge{ font-size:.58rem; }
.nft-trading-card--mini .nft-card-header .nft-card-num{ font-size:.65rem; }
.nft-trading-card--mini:hover{
  transform:rotateY(-5deg) rotateX(3deg) scale(1.04);
}
.nft-mini-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  width:160px;
}
.nft-mini-price{
  font-size:.92rem;
  font-weight:900;
  color:var(--neon);
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:.06em;
}
.nft-mini-price--free{
  color:var(--text3);
  font-size:.78rem;
  font-family:inherit;
  font-weight:600;
}
.nft-mini-btns{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  justify-content:center;
}
.nft-sold-out-badge{
  background:rgba(239,68,68,.15);
  color:var(--red);
  border:1px solid rgba(239,68,68,.3);
  border-radius:var(--r-full);
  font-size:.65rem;
  font-weight:800;
  padding:2px 8px;
  letter-spacing:.06em;
}
.nft-remain-badge{
  background:var(--neon-dim);
  color:var(--neon);
  border-radius:var(--r-full);
  font-size:.65rem;
  font-weight:700;
  padding:2px 8px;
}
.nft-delete-btn{ color:var(--red) !important; }

/* ── Marketplace ── */
.nft-market-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:1.5rem;
  flex-wrap:wrap;
  gap:1rem;
}
.nft-market-stats{
  display:flex;
  gap:1rem;
}
.nft-mstat{
  text-align:center;
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:var(--r-lg);
  padding:.5rem .85rem;
  min-width:60px;
}
.nft-mstat span{
  display:block;
  font-size:1.2rem;
  font-weight:900;
  font-family:'Bebas Neue', sans-serif;
  color:var(--text);
  letter-spacing:.05em;
}
.nft-mstat label{
  font-size:.65rem;
  color:var(--text3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.nft-mstat-gold span{ color:var(--gold); }
.nft-listings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:1.25rem;
}
.nft-sales-log{
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.nft-sale-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.65rem 1rem;
  border-bottom:1px solid var(--border);
  gap:.5rem;
  flex-wrap:wrap;
  font-size:.82rem;
}
.nft-sale-row:last-child{ border-bottom:none; }
.nft-sale-card{ font-weight:700; color:var(--text); flex:1; min-width:100px; }
.nft-sale-buyer{ color:var(--text2); flex:1; }
.nft-sale-amt{ color:var(--neon); font-weight:800; }
.nft-sale-date{ color:var(--text3); font-size:.75rem; }

/* ── Send to Fans ── */
.nft-send-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.75rem;
  align-items:start;
}
.nft-send-left,
.nft-send-right{
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:var(--r-xl);
  padding:1.5rem;
}
.nft-link-row{
  display:flex;
  gap:.5rem;
  align-items:center;
}
.nft-sent-log{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.nft-sent-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:.65rem 1rem;
  border-bottom:1px solid var(--border);
  gap:.5rem;
  flex-wrap:wrap;
  font-size:.82rem;
}
.nft-sent-row:last-child{ border-bottom:none; }
.nft-sent-info{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nft-sent-card{ font-weight:700; color:var(--text); }
.nft-sent-to{ color:var(--text2); font-size:.78rem; }
.nft-sent-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.nft-sent-token{ font-size:.68rem; color:var(--purple-light); font-weight:700; letter-spacing:.06em; }
.nft-sent-date{ font-size:.72rem; color:var(--text3); }

/* ── Empty state ── */
.nft-empty-state{
  text-align:center;
  padding:3rem 1.5rem;
  color:var(--text3);
  grid-column:1/-1;
}
.nft-empty-state i{
  font-size:2.5rem;
  color:var(--border2);
  margin-bottom:.85rem;
  display:block;
}
.nft-empty-state p{
  margin-bottom:1.25rem;
  line-height:1.6;
  font-size:.92rem;
}

/* ════════════════════════════════════════════════════
   DASHBOARD ADDITIONS — Inbox, Analytics, Profile, Onboarding
════════════════════════════════════════════════════ */

/* ── Inquiries Inbox ── */
.inbox-item:hover{ background:rgba(255,255,255,.03) !important; }
.inbox-item-unread{ border-left:3px solid var(--purple-light) !important; }
#inboxList{ scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
#inboxList::-webkit-scrollbar{ width:4px; }
#inboxList::-webkit-scrollbar-track{ background:transparent; }
#inboxList::-webkit-scrollbar-thumb{ background:var(--border2); border-radius:4px; }

/* ── NFT Preview Overlay (card builder) ── */
.nft-preview-active{
  outline: 2px solid rgba(168,85,247,.5);
  box-shadow: 0 0 40px rgba(168,85,247,.2), 0 0 0 4px rgba(168,85,247,.08);
  transition: box-shadow .3s, outline .3s;
}
.nft-preview-overlay{
  position:relative;
  z-index:10;
  background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(0,245,212,.08));
  border-bottom:1px solid rgba(168,85,247,.25);
  padding:.55rem .85rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  overflow:hidden;
}
.nft-ov-header{
  display:flex;align-items:center;gap:.65rem;width:100%;
}
.nft-ov-gem{
  font-size:1.1rem;
  background:linear-gradient(135deg,#a855f7,#00f5d4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;flex-shrink:0;
}
.nft-ov-label{
  font-family:'Bebas Neue',sans-serif;
  font-size:.82rem;letter-spacing:.12em;
  color:#c084fc;line-height:1;
}
.nft-ov-series{
  font-size:.65rem;color:rgba(192,132,252,.6);margin-top:1px;
}
.nft-ov-badge{
  margin-left:auto;flex-shrink:0;
  font-family:'Bebas Neue',sans-serif;font-size:.72rem;
  background:rgba(168,85,247,.2);border:1px solid rgba(168,85,247,.35);
  color:#c084fc;padding:2px 8px;border-radius:var(--r-full);
  letter-spacing:.08em;
}
.nft-ov-foil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 30%, rgba(255,255,255,.08) 45%,
    rgba(168,85,247,.12) 50%, rgba(0,245,212,.08) 55%,
    transparent 70%);
  background-size:200% 100%;
  animation:nftOvShimmer 2.5s linear infinite;
}
@keyframes nftOvShimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* ── Onboarding Modal ── */
.ob-level-btn{
  transition:border-color .15s,color .15s,background .15s;
  border-radius:var(--r-md) !important;
  justify-content:center;
  gap:.4rem;
}
.ob-level-btn.active{
  border-color:var(--neon) !important;
  color:var(--neon) !important;
  background:rgba(0,245,212,.07) !important;
}
#onboardingModal .modal-box{
  border:1px solid rgba(168,85,247,.25);
  box-shadow:0 20px 80px rgba(0,0,0,.7),0 0 60px rgba(168,85,247,.15);
}

/* ── User Profile Panel ── */
#userProfilePanel #profileViewMode{
  gap:1.25rem;
}
#profileEditMode .form-row > div{ display:flex;flex-direction:column; }

/* ── Responsive grid-2 for analytics/inbox row ── */
@media(max-width:700px){
  #analyticsPanel,#inboxPanel{ width:100%; }
}

/* ── Tab panel spacing ── */
.nft-tab-panel{ padding-top:1.5rem; }

/* ── Responsive ── */
@media(max-width:1100px){
  .nft-mint-grid{ grid-template-columns:1fr; }
  .nft-card-preview-wrap{ padding:1.5rem 0; }
}
@media(max-width:768px){
  .nft-field-row{ grid-template-columns:1fr; }
  .nft-send-grid{ grid-template-columns:1fr; }
  .nft-market-header{ flex-direction:column; }
  .nft-collection-grid,
  .nft-listings-grid{ grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); }
}

/* ════════════════════════════════════════════════════
   NFT PHOTO INPUT UI — Preset buttons & tips
════════════════════════════════════════════════════ */
.nft-photo-tips{
  font-size:.72rem;
  color:var(--text3);
  margin-bottom:.55rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  line-height:1.4;
}
.nft-photo-tips i{
  color:var(--gold);
  flex-shrink:0;
}
.nft-photo-presets{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  margin-top:.2rem;
}
.nft-photo-preset-btn{
  background:var(--bg2);
  border:1px solid var(--border2);
  color:var(--text2);
  border-radius:var(--r-full);
  padding:.3rem .75rem;
  font-size:.72rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  font-family:inherit;
  letter-spacing:.02em;
}
.nft-photo-preset-btn:hover{
  border-color:var(--neon);
  color:var(--neon);
  background:var(--neon-dim);
  box-shadow:0 0 10px rgba(0,245,212,.18);
}
.nft-photo-preset-clear{
  color:var(--red);
  border-color:rgba(239,68,68,.3);
}
.nft-photo-preset-clear:hover{
  border-color:var(--red);
  color:#fff;
  background:rgba(239,68,68,.15);
  box-shadow:none;
}

/* ════════════════════════════════════════════════════
   OWNER / FOUNDER CARD — About Page
════════════════════════════════════════════════════ */
.about-team-card--owner{
  grid-column: 1 / -1;           /* full width row */
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  align-items: stretch;
  border: 2px solid rgba(0,245,212,.35);
  box-shadow: 0 0 40px rgba(0,245,212,.08), 0 20px 60px rgba(0,0,0,.45);
  position: relative;
  overflow: visible;
}
.about-owner-badge{
  position: absolute;
  top: -14px;
  left: 1.5rem;
  background: linear-gradient(90deg, var(--neon), #7c3aed);
  color: #000;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  gap: .4rem;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0,245,212,.4);
}
.about-team-card--owner .about-team-img-wrap{
  width: 240px;
  height: 100%;
  min-height: 280px;
  flex-shrink: 0;
}
.about-team-card--owner .about-team-img{
  object-position: center top;
}
.about-team-card--owner .about-team-name{
  font-size: 1.65rem;
  padding-top: 1.5rem;
}
.about-team-card--owner .about-team-role{
  font-size: .8rem;
  color: var(--neon);
  padding-bottom: .5rem;
}
.about-team-card--owner .about-team-bio{
  font-size: .87rem;
  line-height: 1.7;
  max-width: 640px;
}
@media(max-width:768px){
  .about-team-card--owner{
    grid-template-columns: 1fr;
  }
  .about-team-card--owner .about-team-img-wrap{
    width: 100%;
    height: 240px;
  }
}

/* ════════════════════════════════════════════════════
   POWERED-BY FOOTER STRIP
════════════════════════════════════════════════════ */
.site-powered-footer{
  background: linear-gradient(135deg, rgba(0,245,212,.04), rgba(124,58,237,.06));
  border-top: 1px solid rgba(0,245,212,.18);
  padding: 1.5rem 2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.site-powered-footer .spf-logo{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.site-powered-footer .spf-logo i{
  color: var(--neon);
  font-size: 1rem;
}
.site-powered-footer .spf-brand{
  font-weight: 900;
  background: linear-gradient(90deg, var(--neon), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: .82rem;
  letter-spacing: .02em;
}
.site-powered-footer .spf-sep{
  color: var(--border2);
  font-size: .9rem;
}
.site-powered-footer .spf-copy{
  font-size: .73rem;
  color: var(--text3);
}

/* ════════════════════════════════════════════════════
   NFT BUILDER PREVIEW — Card Template Swap
════════════════════════════════════════════════════ */

/* Entrance keyframe */
@keyframes nftBuilderEntrance{
  from{ opacity:0; transform:translateY(24px) scale(.93); }
  to  { opacity:1; transform:translateY(0)    scale(1);   }
}

/* Outer wrapper: centers card + adds purple ambient glow backdrop */
.nft-builder-preview-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:.5rem 0 1.25rem;
}

/*
 * Chrome-border outer ring — sits OUTSIDE the overflow:hidden card shell
 * so the animated prism gradient is always visible.
 */
.nft-builder-chrome-ring{
  position:relative;
  width:292px;   /* card(280) + 6px border on each side */
  height:432px;  /* card(420) + 6px border on each side */
  border-radius:22px;
  padding:3px;   /* the chrome border thickness */
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.55) 0%,
    #a855f7 20%,
    rgba(255,255,255,.25) 40%,
    rgba(0,245,212,.8)    55%,
    rgba(255,255,255,.25) 70%,
    #a855f7 85%,
    rgba(255,255,255,.55) 100%
  );
  background-size:300% 300%;
  animation:holoSweep 3.5s linear infinite,
            nftBuilderEntrance .5s cubic-bezier(.22,1,.36,1) both;
  box-shadow:
    0 0 0 1px rgba(168,85,247,.18),
    0 0 40px rgba(168,85,247,.5),
    0 0 80px rgba(168,85,247,.22),
    0 28px 80px rgba(0,0,0,.95);
}

/* The actual NFT card shell — fills the chrome ring inner area */
.nft-builder-card{
  width: 100%;
  height: 100%;
  border-radius: 19px;  /* chrome-ring(22) minus padding(3) */
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .4s ease;
  cursor: default;
  background: linear-gradient(160deg,#08041a 0%,#0d0320 45%,#06020f 100%);
}
/* Hover tilt on the chrome ring wrapper */
.nft-builder-chrome-ring:hover{
  transform: rotateY(-7deg) rotateX(3deg) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(168,85,247,.28),
    0 0 60px rgba(168,85,247,.65),
    0 0 120px rgba(168,85,247,.3),
    0 34px 90px rgba(0,0,0,.98);
}

/* Stadium-beam overlay inside card (pseudo on card) */
.nft-builder-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    conic-gradient(from 260deg at 50% -10%,
      transparent 0deg,
      rgba(255,255,255,.12) 8deg,
      transparent 16deg,
      transparent 30deg,
      rgba(255,255,255,.08) 38deg,
      transparent 46deg,
      transparent 60deg,
      rgba(255,255,255,.06) 66deg,
      transparent 74deg
    );
  animation:beamPulse 3s ease-in-out infinite;
  pointer-events:none;
  z-index:6;
}

/*
 * Inner layout: photo fills the CARD shell (not inner), overlay+glow+content
 * are all positioned relative to the card shell via nft-card-inner.
 */
.nft-builder-card .nft-card-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:420px;
  display:flex;
  flex-direction:column;
}

/* Photo — absolute within the card shell (same as .nft-card-photo) */
.nft-builder-card .nft-card-photo{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.nft-builder-card .nft-card-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 12%;
  display:block;
}

/* Gradient overlay — darkens bottom for readability */
.nft-builder-card .nft-card-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.80) 0%,
    rgba(0,0,0,.18) 24%,
    rgba(0,0,0,.0)  42%,
    rgba(0,0,0,.0)  54%,
    rgba(0,0,0,.85) 72%,
    rgba(0,0,0,.98) 100%
  );
}

/* Rarity glow — purple bloom at bottom */
.nft-builder-card .nft-rarity-glow{
  position:absolute;
  bottom:0;left:0;right:0;
  height:180px;
  pointer-events:none;
  z-index:2;
  background:radial-gradient(
    ellipse 85% 65% at 50% 100%,
    rgba(168,85,247,.55) 0%,
    transparent 70%
  );
}

/* Content — floats above everything */
.nft-builder-card .nft-card-content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  padding:.85rem .85rem .75rem;
  height:100%;
  min-height:420px;
}

.nft-builder-card .nft-card-spacer{
  flex:1;
  min-height:55px;
}

/* Typography */
.nft-builder-card .nft-card-athlete-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  letter-spacing:.12em;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.9),0 0 30px rgba(168,85,247,.4);
  line-height:1.05;
  margin-bottom:.2rem;
  word-break:break-word;
}
.nft-builder-card .nft-card-sport-level{
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(255,255,255,.52);
  text-transform:uppercase;
  margin-bottom:.4rem;
}

/* Stats bar */
.nft-builder-card .nft-card-stat-bar{
  display:flex;
  justify-content:space-around;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(168,85,247,.25);
  border-radius:10px;
  padding:.5rem .35rem;
  margin-bottom:.35rem;
  backdrop-filter:blur(8px);
}
.nft-builder-card .nft-stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.nft-builder-card .nft-stat-val{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.35rem;
  line-height:1;
  color:#c084fc;
  text-shadow:0 0 18px rgba(168,85,247,.9),0 0 40px rgba(168,85,247,.4);
}
.nft-builder-card .nft-stat-lbl{
  font-size:.52rem;
  font-weight:800;
  letter-spacing:.08em;
  color:rgba(255,255,255,.42);
  text-transform:uppercase;
}

/* Highlight quote */
.nft-builder-card .nft-card-highlight{
  font-size:.62rem;
  font-style:italic;
  color:rgba(255,255,255,.62);
  text-align:center;
  background:rgba(168,85,247,.08);
  border-left:2px solid rgba(168,85,247,.6);
  border-radius:4px;
  padding:.3rem .65rem;
  margin-bottom:.4rem;
  line-height:1.4;
  word-break:break-word;
}

/* Footer */
.nft-builder-card .nft-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:.45rem;
  border-top:1px solid rgba(168,85,247,.18);
  margin-top:auto;
}
.nft-builder-card .nft-rarity-pill{
  font-family:'Bebas Neue',sans-serif;
  font-size:.68rem;
  letter-spacing:.1em;
}
.nft-builder-card .nft-supply-tag{
  font-size:.55rem;
  color:rgba(255,255,255,.35);
  font-weight:600;
}
.nft-builder-card .nft-brand-tag{
  font-size:.5rem;
  font-weight:900;
  font-family:'Bebas Neue',sans-serif;
  color:#c084fc;
  opacity:.7;
  letter-spacing:.12em;
}

/* Corner shards + shine stay on top */
.nft-builder-card .nft-corner{ z-index:5; }
.nft-builder-card .nft-card-shine{ z-index:4; opacity:.5; }

/* Template switch button at bottom */
#nftCardPreview .btn{
  border-radius: var(--r-full);
}

/* Pulsing label under the NFT card in builder */
.nft-builder-active-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#c084fc;
  animation:live-glow 2.5s ease-in-out infinite;
}
.nft-builder-sublabel{
  font-size:.7rem;color:var(--text3);margin-top:.25rem;
}

/* ============================================================
   MOBILE FIRST — Comprehensive Mobile Polish
   Targets: iOS/Android tap targets, safe-area, zoom fix,
   layout clarity, modals, card.html, nav, buttons
   ============================================================ */

/* ── Global mobile resets ── */
* { -webkit-tap-highlight-color: transparent; }

/* Prevent iOS font-size zoom on input focus — must be 16px+ */
input, textarea, select {
  font-size: 16px !important;
}
/* But keep label/placeholder text visually small via transform trick */
@media(max-width:768px){
  .input-field {
    font-size: 16px !important;
    min-height: 48px;
  }
  textarea.input-field {
    min-height: 100px;
  }
}

/* ── Minimum 44px tap targets on all interactive elements ── */
@media(max-width:768px){
  button, .btn, .nav-link, .income-tab, .sc-filter,
  .card-pay-btn, .pub-share-btn, .card-contact-btn,
  .card-highlight-reel-btn, .card-stats-link-btn, .card-ticket-btn, .card-merch-btn,
  .btn-hero-primary, .btn-hero-ghost {
    min-height: 44px;
  }
  /* Social icon buttons — circular, keep square */
  .card-social-btn, .sc-social-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Safe area padding for notched iPhones (X, 11, 12, 13, 14, 15) ── */
@supports(padding: env(safe-area-inset-bottom)){
  .navbar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-overlay {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .nav-center.open {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Modals: max-height + scroll on mobile so nothing is cut off ── */
@media(max-width:640px){
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 92svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1.25rem 2rem;
    width: 100%;
    max-width: 100%;
  }
  /* Drag handle indicator */
  .modal::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: 0 auto 1.25rem;
  }
  .modal-head { margin-bottom: 1rem; }
}

/* ── Navbar: mobile right-side compression ── */
@media(max-width:900px){
  .nav-right { gap: 4px; }
  /* API Key — icon only, hide text label */
  .nav-key-btn { padding: 7px 10px; }
  .nav-key-label,
  #apiKeyLabel { display: none !important; }
  /* User chip — hide name text, keep avatar + sign-out */
  .nav-user-name { display: none !important; }
  .nav-user-chip { padding: 3px 6px 3px 3px !important; }
}
/* ── Small phones (≤480px): hide API Key button entirely, lives in hamburger menu ── */
@media(max-width:480px){
  .navbar { padding: 0 .75rem; }
  .nav-key-btn { display: none !important; }
  /* Reveal it inside the open drawer */
  .nav-center.open .nav-api-key-mobile { display: flex !important; }
}

/* ── Nav hamburger menu: better spacing + readable tap targets ── */
@media(max-width:900px){
  .nav-center .nav-link {
    padding: 14px 16px;
    font-size: .95rem;
    border-radius: var(--r-md);
    min-height: 48px;
  }
  .nav-center { gap: 4px; padding: 1rem; }
}

/* ── Page container: tighter on small phones ── */
@media(max-width:400px){
  .container { padding: 0 .75rem; }
  .section { padding: 1.5rem 0; }
  .page-head { padding: 1.5rem 0 1rem; }
  .page-head h1 { font-size: 1.75rem; }
}

/* ── Dashboard: single-column stat cards on tiny screens ── */
@media(max-width:380px){
  .stat-row { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .stat-card { padding: 1rem; }
  .dash-name { font-size: 2.2rem; }
  .dash-tagline { font-size: .88rem; }
}

/* ── Card builder: full-width preview on mobile ── */
@media(max-width:900px){
  .card-page-grid { grid-template-columns: 1fr; }
  .digital-card-preview {
    position: relative; top: 0;
    max-width: 420px; margin: 0 auto;
  }
  /* Stack share btn and demo btn side by side on card banner */
  .card-banner { min-height: 90px; }
}

/* ── Card preview: full width on phones ── */
@media(max-width:480px){
  .digital-card-preview { width: 100%; }
  .card-banner-level { font-size: .6rem; padding: 2px 7px; }
  .card-name { font-size: 1.3rem; letter-spacing: .08em; }
  .card-title-line { font-size: .78rem; }
  .card-stat-val { font-size: 1.15rem; }
  .card-bio { font-size: .82rem; line-height: 1.6; }
}

/* ── Tabs: scroll horizontally on small screens ── */
@media(max-width:600px){
  .income-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .income-tabs::-webkit-scrollbar { display: none; }
  .income-tab {
    flex-shrink: 0;
    min-width: 90px;
    font-size: .78rem;
    padding: 8px 12px;
    white-space: nowrap;
  }
}

/* ── Section labels: readable on mobile ── */
@media(max-width:480px){
  .section-label { font-size: .72rem; }
  .panel { padding: 1rem; }
  .panel-title { font-size: .92rem; }
  .page-badge { font-size: .65rem; padding: 4px 12px; }
}

/* ── Hero page: CTA buttons full-width on phones ── */
@media(max-width:480px){
  .hero-cta-row {
    flex-direction: column;
    gap: .6rem;
  }
  .btn-hero-primary,
  .btn-hero-ghost {
    width: 100%;
    justify-content: center;
    font-size: .88rem;
    padding: .8rem 1rem;
  }
  .hero-pre-badge { font-size: .65rem; padding: 4px 10px; }
  .hero-main-title { font-size: clamp(1.9rem, 8.5vw, 2.8rem); }
  .hero-sub { font-size: .85rem; }
  /* Stats belt: 2+3 layout on tiny screens */
  .hsb-grid {
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }
  .hsb-item:nth-child(9) { grid-column: 1 / -1; } /* last item full-width */
  .hsb-num { font-size: 1.65rem; }
  .hsb-label { font-size: .6rem; }
  .hsb-divider { display: none; }
}

/* ── Hero NIL result cards: single column on phones ── */
@media(max-width:500px){
  .nil-results-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .hero-features-grid { grid-template-columns: 1fr; }
  .nil-result-card { padding: 1.15rem; }
  .nil-card-amount { font-size: 2rem; }
  .testi-card { padding: 1.15rem; }
  .hf-card { padding: 1.25rem; }
}

/* ── Pricing: stack billing toggle neatly ── */
@media(max-width:480px){
  .pricing-toggle-row { flex-direction: column; gap: .6rem; }
  .pricing-cards-grid { gap: 1rem; }
  .pricing-card { padding: 1.5rem 1.25rem; }
  .pc-amt { font-size: 3rem; }
  .pricing-faq-grid { grid-template-columns: 1fr; }
}

/* ── Showcase page: filter bar scrollable ── */
@media(max-width:480px){
  .showcase-filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .showcase-filter-bar::-webkit-scrollbar { display: none; }
  .sc-filter { flex-shrink: 0; }
  /* Demo callouts hidden on mobile (already done at 860px, re-enforce) */
  .demo-callouts { display: none !important; }
  .demo-card-stage { grid-template-columns: 1fr; }
  .demo-card-wrap { max-width: 100%; }
}

/* ── Share modal: stack share buttons vertically ── */
@media(max-width:480px){
  /* grid-template-columns already 1fr 1fr from inline styles — override modals */
  .modal .btn-ghost, .modal .btn-neon { min-height: 44px; }
  .share-link-box { font-size: .78rem; padding: .65rem .85rem; }
}

/* ── Team page: simplify roster table on mobile ── */
@media(max-width:600px){
  .team-roster-table th:nth-child(n+5),
  .team-roster-table td:nth-child(n+5) {
    display: none; /* hide extra columns, keep name/sport/status/actions */
  }
  .team-analytics-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .ta-val { font-size: 2.2rem; }
}

/* ── NFT / Showcase builder: single column at 768px ── */
@media(max-width:768px){
  .nft-mint-grid { grid-template-columns: 1fr; }
  .nft-field-row { grid-template-columns: 1fr; }
  .nft-builder-chrome-ring {
    width: 260px; height: 385px;
  }
}

/* ── About page: owner card full width on mobile ── */
@media(max-width:600px){
  .about-team-card--owner {
    grid-template-columns: 1fr;
  }
  .about-team-card--owner .about-team-img-wrap {
    width: 100%; height: 220px;
  }
}

/* ── General text readability on very narrow screens ── */
@media(max-width:360px){
  body { font-size: 14px; }
  .container { padding: 0 .65rem; }
  .btn, .btn-sm { font-size: .78rem; padding: .5rem .85rem; }
  .card-name { font-size: 1.15rem; }
  .card-bio { font-size: .8rem; }
}

/* ── Prevent horizontal overflow on any page ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
img, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}

/* ── Smooth scrolling + momentum on iOS ── */
.nav-center, .income-tabs, .showcase-filter-bar,
.team-roster-table-wrap, .pricing-table-wrap,
.modal, .pub-contact-box {
  -webkit-overflow-scrolling: touch;
}

/* ── Remove hover effects on touch devices (prevents sticky hover) ── */
@media(hover:none){
  .nil-result-card:hover,
  .testi-card:hover,
  .hf-card:hover,
  .stat-card:hover,
  .pricing-card:hover,
  .about-value-card:hover { transform: none; box-shadow: none; }
  .btn-hero-primary:hover { transform: none; }
  .nft-trading-card:hover { transform: none; }
  .nft-builder-chrome-ring:hover { transform: none; }
  .card-highlight-reel-btn:hover,
  .card-ticket-btn:hover,
  .card-merch-btn:hover { transform: none; }
  .card-stats-link-btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════
   AUTH MODAL — Sign In / Sign Up / Demo
═══════════════════════════════════════════ */
#authModal {
  z-index: 10000;
}
#authModal .auth-modal-box {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,.8), 0 0 0 1px rgba(0,245,212,.06);
  transform: scale(.96) translateY(16px);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
#authModal.open .auth-modal-box {
  transform: scale(1) translateY(0);
}

/* Nav Login button — visible to guests */
.nav-login-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: linear-gradient(135deg, #00f5d4, #7c3aed);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: .45rem 1rem;
  cursor: pointer;
  letter-spacing: .3px;
  transition: opacity .2s, transform .15s;
  white-space: nowrap;
}
.nav-login-btn:hover { opacity: .88; transform: translateY(-1px); }

/* Demo banner padding compensation for navbar */
body[style*="padding-top"] .navbar {
  top: 36px;
}

/* Auth modal mobile sheet */
@media(max-width: 480px) {
  #authModal {
    align-items: flex-end;
    padding: 0;
  }
  #authModal .auth-modal-box {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-width: 100%;
    max-height: 95svh;
    overflow-y: auto;
  }
}