/* ============================================================
   TUNETRADR RECORDS — premium home (SWALAY-grade clone)
   Structure modeled on swalay.talantoncore.in, rebranded to
   Tunetradr's dark + purple/pink/gold identity.
   ============================================================ */

:root {
  /* brand gradient (purple -> pink) + gold accent */
  --p-light: #c084fc;
  --purple: #a855f7;
  --p-deep: #7c3aed;
  --pink: #ff2db2;
  --gold: #f5b324;
  --gold-2: #ffd76a;
  --grad: linear-gradient(135deg, #c084fc 0%, #a855f7 42%, #ff2db2 100%);
  --grad-btn: linear-gradient(135deg, #a855f7 0%, #ff2db2 100%);
  --grad-gold: linear-gradient(135deg, #ffd76a 0%, #f5b324 60%, #c98a12 100%);

  --bg: #06060b;
  --bg-2: #0c0c14;
  --bg-card: #10101a;
  --bg-card-h: #16162400;
  --surface: #ffffff06;
  --white: #fff;
  --text: #fff;
  --text-2: #ffffffa6;
  --text-3: #ffffff59;
  --border: #ffffff12;
  --border-2: #ffffff1f;
  --glow: #a855f740;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 9999px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-d: 'Sora', sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
section { position: relative; }
.container { width: min(var(--maxw), 92vw); margin: 0 auto; }
em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============ ambient background ============ */
.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 600px at 92% 12%, rgba(255,45,178,.12), transparent 60%),
    radial-gradient(1000px 800px at 50% 120%, rgba(124,58,237,.16), transparent 60%);
}
.amb-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.amb-orb.a { width: 460px; height: 460px; left: -120px; top: 20%; background: radial-gradient(circle, rgba(168,85,247,.55), transparent 70%); animation: drift 22s ease-in-out infinite; }
.amb-orb.b { width: 520px; height: 520px; right: -160px; top: 48%; background: radial-gradient(circle, rgba(255,45,178,.4), transparent 70%); animation: drift 26s ease-in-out infinite reverse; }
@keyframes drift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,-50px)} }

/* ============ PRELOADER ============ */
.preloader {
  position: fixed; inset: 0; z-index: 10000; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px;
  transition: opacity .6s var(--ease), visibility .6s;
}
.preloader { transition: opacity .35s var(--ease), visibility .35s; }
.preloader.done { opacity: 0; visibility: hidden; }
.preloader-logo { display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateY(18px); animation: plFade .4s var(--ease-out) .05s forwards; }
.preloader-logo img { width: 72px; height: 72px; object-fit: contain; }
.preloader-logo .pl-name { font-family: var(--font-d); font-weight: 800; font-size: 1.9rem; letter-spacing: -.5px; }
.preloader-logo .pl-name span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.preloader-bar-track { width: 200px; height: 3px; background: #ffffff14; border-radius: 2px; overflow: hidden; opacity: 0; animation: plFade .25s var(--ease-out) .15s forwards; }
.preloader-bar { height: 100%; width: 0; background: var(--grad); border-radius: 2px; animation: plProg .55s var(--ease-out) .05s forwards; }
@keyframes plFade { to { opacity: 1; transform: none; } }
@keyframes plProg { to { width: 100%; } }

/* ============ NAVBAR ============ */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: .4s var(--ease); }
.navbar.scrolled { background: rgba(8,8,14,.72); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(var(--maxw),94vw); margin: 0 auto; padding: 16px 0; transition: .4s var(--ease); }
.navbar.scrolled .nav-inner { padding: 11px 0; }
.nav-logo { display: flex; align-items: center; gap: 11px; }
.nav-logo img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(245,179,36,.25)); }
.nav-logo .nl-text { display: flex; flex-direction: column; line-height: 1.02; }
.nav-logo .nl-name { font-family: var(--font-d); font-weight: 800; font-size: 16px; letter-spacing: .2px; }
.nav-logo .nl-name span { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-logo .nl-sub { font-size: 9px; letter-spacing: 3px; color: var(--text-3); text-transform: uppercase; }
.nav-center { display: flex; gap: 4px; }
.nav-link { font-size: 14.5px; font-weight: 500; color: var(--text-2); padding: 9px 15px; border-radius: var(--r-md); transition: .22s; }
.nav-link:hover { color: #fff; background: #ffffff0a; }
.nav-link.active { color: #fff; background: rgba(168,85,247,.16); }
.nav-right { display: flex; align-items: center; gap: 10px; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-weight: 600; font-size: 14.5px;
  padding: 11px 22px; border-radius: var(--r-pill); border: none; cursor: pointer; color: #fff; background: var(--grad-btn);
  box-shadow: 0 10px 30px rgba(168,85,247,.32); transition: .3s var(--ease); white-space: nowrap;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(255,45,178,.42); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-weight: 600; font-size: 14.5px;
  padding: 11px 22px; border-radius: var(--r-pill); cursor: pointer; color: #fff; background: transparent; border: 1px solid var(--border-2);
  transition: .3s var(--ease); white-space: nowrap;
}
.btn-outline:hover { background: #ffffff0d; border-color: #ffffff40; transform: translateY(-2px); }
.btn-gold { background: var(--grad-gold); color: #1a1206; box-shadow: 0 10px 30px rgba(245,179,36,.3); }
.btn-gold:hover { box-shadow: 0 16px 44px rgba(245,179,36,.45); }
.btn-lg { padding: 15px 30px; font-size: 16px; }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

/* mobile nav */
.mobile-nav { position: fixed; inset: 0; z-index: 1100; background: rgba(6,6,11,.98); backdrop-filter: blur(20px); transform: translateX(100%); transition: .4s var(--ease); display: none; flex-direction: column; padding: 22px; }
.mobile-nav.open { transform: none; }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; }
.mobile-close { background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; }
.mobile-nav-links { display: flex; flex-direction: column; gap: 6px; margin-top: 36px; }
.mobile-nav-links a { font-family: var(--font-d); font-size: 26px; font-weight: 600; color: var(--text-2); padding: 12px 0; }
.mobile-nav-links a:hover { color: #fff; }
.mobile-nav-bottom { margin-top: auto; }
.mobile-nav-bottom .btn-primary { width: 100%; justify-content: center; }

/* ============ HERO ============ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 60px; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-overlay { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,6,11,.72) 0%, rgba(6,6,11,.55) 40%, rgba(6,6,11,.92) 100%),
    radial-gradient(1000px 700px at 70% 30%, rgba(168,85,247,.28), transparent 60%);
}
.hero-inner { text-align: center; max-width: 920px; margin: 0 auto; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: #f0e6ff; background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.3);
  margin-bottom: 26px; backdrop-filter: blur(6px);
}
.hero-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--p-light); box-shadow: 0 0 10px var(--p-light); animation: blink 1.8s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero h1 { font-family: var(--font-d); font-weight: 800; font-size: clamp(42px, 7vw, 88px); line-height: 1.02; letter-spacing: -2px; margin-bottom: 22px; }
.hero h1 .line { display: block; }
.hero-sub { font-size: clamp(16px, 2vw, 20px); color: var(--text-2); max-width: 620px; margin: 0 auto 38px; }
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; }
.hero-stats { display: flex; gap: 56px; justify-content: center; flex-wrap: wrap; }
.hero-stat .num { font-family: var(--font-d); font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -1px; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stat .lbl { font-size: 13px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1.4px; margin-top: 2px; }
.scroll-ind { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-3); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.scroll-ind .mouse { width: 24px; height: 38px; border: 2px solid var(--border-2); border-radius: 14px; position: relative; }
.scroll-ind .mouse::before { content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 4px; height: 7px; border-radius: 2px; background: var(--p-light); animation: scrolly 1.6s infinite; }
@keyframes scrolly { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,12px)} }

/* Optimize hero padding on mobile/tablet or short screen heights to prevent scroll indicator overlap */
@media (max-width: 768px), (max-height: 800px) {
  .hero { padding-bottom: 120px; }
}

/* ============ SECTION HEAD ============ */
.section-head { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.section-tag { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 16px; }
.section-title { font-family: var(--font-d); font-weight: 800; font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -1px; line-height: 1.08; margin-bottom: 14px; }
.section-sub { color: var(--text-2); font-size: 17px; }

/* ============ PLATFORMS MARQUEE ============ */
.platforms-sec { padding: 90px 0 70px; }
.platforms-head { text-align: center; margin-bottom: 44px; }
.platforms-head h2 { font-family: var(--font-d); font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.5px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee + .marquee { margin-top: 22px; }
.marquee-track { display: flex; gap: 20px; width: max-content; animation: scroll-x 42s linear infinite; }
.marquee.rev .marquee-track { animation-direction: reverse; }
/* keep the logo marquee running even on hover (never pause) */
.marquee-track { animation-play-state: running !important; }
@keyframes scroll-x { to { transform: translateX(-50%); } }
.plat-chip {
  display: flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); white-space: nowrap; transition: .3s var(--ease);
  font-weight: 600; font-size: 17px; color: var(--text-2);
}
.plat-chip:hover { border-color: var(--border-2); background: #ffffff0d; color: #fff; transform: translateY(-3px); }
.plat-chip img { width: 26px; height: 26px; object-fit: contain; }

/* ============ WHY GRID (tilt cards) ============ */
.why-sec { padding: 90px 0; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-card {
  position: relative; padding: 32px 28px; border-radius: var(--r-lg); background: linear-gradient(180deg, #13131f, #0e0e17);
  border: 1px solid var(--border); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; overflow: hidden;
  transform-style: preserve-3d; will-change: transform;
}
.why-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: .4s;
  background: radial-gradient(360px 200px at var(--mx,50%) var(--my,0%), rgba(168,85,247,.16), transparent 70%); }
.why-card:hover { border-color: rgba(168,85,247,.4); box-shadow: 0 20px 48px rgba(0,0,0,.4); }
.why-icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; color: #fff; margin-bottom: 20px; background: var(--grad-btn); box-shadow: 0 10px 26px rgba(168,85,247,.35); }
.why-card h3 { font-family: var(--font-d); font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.why-card p { color: var(--text-2); font-size: 14.5px; }

/* ============ ECOSYSTEM ============ */
.eco-sec { padding: 80px 0; }
.eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 44px; }
.eco-card { text-align: center; padding: 34px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: .35s var(--ease); }
.eco-card:hover { transform: translateY(-6px); border-color: rgba(255,45,178,.4); background: #ffffff0a; }
.eco-card .eco-ic { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.3); color: var(--p-light); }
.eco-card h3 { font-family: var(--font-d); font-size: 19px; margin-bottom: 8px; }
.eco-card p { color: var(--text-2); font-size: 14px; }
.eco-cta { text-align: center; }

/* ============ DASHBOARD / TOOLS ============ */
.tools-sec { padding: 90px 0; }
.dash-wrap { position: relative; border-radius: var(--r-xl); padding: 14px; background: linear-gradient(180deg, #13131f, #0c0c14); border: 1px solid var(--border); box-shadow: var(--shadow, 0 40px 100px rgba(0,0,0,.6)); margin-bottom: 60px; overflow: hidden; }
.dash-wrap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0%, rgba(168,85,247,.2), transparent 60%); pointer-events: none; }
.dash-wrap img { width: 100%; border-radius: var(--r-lg); position: relative; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tool-card { padding: 28px 24px; border-radius: var(--r-lg); background: linear-gradient(180deg, #13131f, #0e0e17); border: 1px solid var(--border); transition: .35s var(--ease); }
.tool-card:hover { transform: translateY(-5px); border-color: rgba(168,85,247,.4); }
.tool-card .tlabel { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--p-light); margin-bottom: 14px; }
.tool-card .tic { font-size: 26px; margin-bottom: 14px; }
.tool-card h3 { font-family: var(--font-d); font-size: 19px; margin-bottom: 8px; }
.tool-card p { color: var(--text-2); font-size: 14px; }

/* ============ TRENDING / CHARTS ============ */
.charts-sec { padding: 80px 0; }
.charts-panel { max-width: 760px; margin: 0 auto; border-radius: var(--r-xl); background: linear-gradient(180deg, #12121d, #0c0c14); border: 1px solid var(--border); overflow: hidden; }
.chart-row { display: flex; align-items: center; gap: 18px; padding: 16px 24px; border-bottom: 1px solid var(--border); transition: .25s; }
.chart-row:last-child { border-bottom: none; }
.chart-row:hover { background: #ffffff06; }
.chart-row .rank { font-family: var(--font-d); font-weight: 800; font-size: 20px; width: 30px; color: var(--text-3); }
.chart-row .cover { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #1a1a26; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.chart-row .cover img { width: 100%; height: 100%; object-fit: cover; }
.chart-row .meta { flex: 1; min-width: 0; }
.chart-row .meta .t { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-row .meta .a { font-size: 13px; color: var(--text-3); }
.chart-row .open { font-size: 13px; color: var(--text-3); transition: .25s; }
.chart-row:hover .open { color: var(--p-light); }
.chart-loading { padding: 40px; text-align: center; color: var(--text-3); font-size: 14px; }
.chart-row .eqbars { display: flex; align-items: flex-end; gap: 3px; height: 24px; flex-shrink: 0; }
.chart-row .eqbars span { width: 3px; background: var(--grad-btn); border-radius: 2px; animation: eq 1.2s ease-in-out infinite; }
@keyframes eq { 0%,100%{height:30%} 50%{height:100%} }

/* ============ PRICING ============ */
.pricing-sec { padding: 90px 0; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 36px 30px; border-radius: var(--r-xl); background: linear-gradient(180deg, #13131f, #0c0c14); border: 1px solid var(--border); transition: .35s var(--ease); }
.price-card:hover { transform: translateY(-6px); border-color: var(--border-2); }
.price-card.featured { border-color: rgba(168,85,247,.55); box-shadow: 0 30px 80px rgba(124,58,237,.28); transform: scale(1.03); }
.price-card.featured:hover { transform: scale(1.03) translateY(-6px); }
.plan-badge { position: absolute; top: 18px; right: 18px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--grad-btn); color: #fff; }
.plan-name { font-family: var(--font-d); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-2); }
.plan-price { font-family: var(--font-d); font-size: 44px; font-weight: 800; letter-spacing: -1.5px; margin: 12px 0 2px; }
.plan-price small { font-size: 16px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.plan-note { font-size: 13px; color: var(--text-3); }
.plan-royalty { margin: 16px 0 20px; padding: 10px 14px; border-radius: var(--r-md); background: rgba(245,179,36,.1); border: 1px solid rgba(245,179,36,.25); font-size: 14px; color: #ffe6a8; }
.plan-royalty b { color: var(--gold-2); }
.plan-feats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; flex: 1; }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.plan-feats .chk { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(168,85,247,.18); color: var(--p-light); font-size: 11px; margin-top: 1px; }
.price-card .btn-primary, .price-card .btn-outline { width: 100%; justify-content: center; }
.price-foot { text-align: center; color: var(--text-3); font-size: 13.5px; margin-top: 28px; }
.price-foot a { color: var(--p-light); }

/* ============ WE'RE ASSOCIATED WITH (dark trust wall) ============ */
.assoc-sec { padding: 80px 0; }
.assoc-eyebrow { display:block; text-align:center; font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:16px; }
.assoc-title { text-align: center; font-family: var(--font-d); font-weight: 800; font-size: clamp(28px, 4vw, 46px); letter-spacing:-1px; line-height:1.1; }
.assoc-sub { text-align: center; color: var(--text-2); font-size: 16px; margin: 14px auto 44px; max-width: 600px; }
.assoc-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.assoc-logo { flex-shrink:0; width:150px; height:98px; padding:16px 20px; display:grid; place-items:center;
  background: linear-gradient(180deg, #14151e, #0d0e15); border-radius: var(--r-lg); border:1px solid var(--border);
  transition:.3s var(--ease); }
.assoc-logo:hover { transform: translateY(-5px); border-color: rgba(168,85,247,.45); box-shadow: 0 18px 44px rgba(124,58,237,.22); }
.assoc-logo img { max-height: 56px; max-width: 124px; width: auto; object-fit: contain; }
@media (max-width:520px){ .assoc-logo{ width:138px; height:90px; padding:16px 18px; } }

/* ============ COMMUNITY (artists) ============ */
.community-sec { padding: 80px 0; }
.artists-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.artists-track { display: flex; gap: 20px; width: max-content; animation: scroll-x 50s linear infinite; }
/* keep the artist marquee moving even on hover (never pause) */
.artists-track { animation-play-state: running !important; }
.artist-card { width: 200px; height: 250px; border-radius: var(--r-lg); position: relative; overflow: hidden; flex-shrink: 0; display: flex; align-items: flex-end; border: 1px solid var(--border); transition: border-color .25s, box-shadow .25s; }
/* on hover: highlight just the card's outline (marquee keeps moving) */
.artist-card:hover { border-color: rgba(168,85,247,.8); box-shadow: 0 0 0 1px rgba(168,85,247,.55), 0 0 20px rgba(168,85,247,.3); }
.artist-card .av { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-d); font-weight: 800; font-size: 54px; color: #ffffff22; }
.artist-card .ac-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.artist-card .info { position: relative; z-index: 2; width: 100%; padding: 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); }
.artist-card .info .nm { font-weight: 700; font-size: 15px; }
.artist-card .info .gr { font-size: 12px; color: var(--text-3); }
.demo-note { display: block; text-align: center; color: var(--text-3); font-size: 12.5px; margin-top: 24px; font-style: italic; }

/* ============ CTA ============ */
.cta-sec { padding: 90px 0; position: relative; }
.cta-box { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 76px 40px; text-align: center; background: linear-gradient(135deg, rgba(168,85,247,.2), rgba(255,45,178,.14)); border: 1px solid rgba(168,85,247,.3); }
.cta-orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.cta-orb-1 { width: 400px; height: 400px; background: rgba(168,85,247,.4); top: -180px; left: -100px; }
.cta-orb-2 { width: 400px; height: 400px; background: rgba(255,45,178,.35); bottom: -200px; right: -120px; }
.cta-box h2 { position: relative; font-family: var(--font-d); font-weight: 800; font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -1px; margin-bottom: 16px; }
.cta-box p { position: relative; color: var(--text-2); font-size: 18px; margin-bottom: 32px; }
.cta-btns { position: relative; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============ CONTACT ============ */
.contact-sec { padding: 60px 0 100px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.contact-left h2 { font-family: var(--font-d); font-weight: 800; font-size: clamp(30px, 4vw, 46px); letter-spacing: -1px; margin-bottom: 14px; }
.contact-left p { color: var(--text-2); font-size: 17px; margin-bottom: 28px; }
.social-row { display: flex; gap: 12px; }
.social-row a { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); font-size: 18px; color: var(--text-2); transition: .3s; }
.social-row a:hover { background: var(--grad-btn); color: #fff; transform: translateY(-3px); border-color: transparent; }
.contact-form { padding: 36px; border-radius: var(--r-xl); background: linear-gradient(180deg, #13131f, #0c0c14); border: 1px solid var(--border); }
.contact-form .row { margin-bottom: 18px; }
.contact-form label { display: block; font-size: 13px; color: var(--text-2); font-weight: 600; margin-bottom: 8px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--r-md); background: rgba(0,0,0,.3); border: 1px solid var(--border-2);
  color: #fff; font-family: inherit; font-size: 15px; outline: none; transition: .25s;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(168,85,247,.6); box-shadow: 0 0 0 4px rgba(168,85,247,.16); }
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form .btn-primary { width: 100%; justify-content: center; margin-top: 6px; }
/* honeypot — kept in the DOM for bots, hidden from real users & screen readers */
.tt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tt-form-msg { margin: 14px 0 0; font-size: 14px; font-weight: 600; min-height: 1em; }
.tt-form-msg.is-ok  { color: #37d99b; }
.tt-form-msg.is-err { color: #ff6b6b; }
.tt-form button[disabled] { opacity: .7; cursor: progress; }

/* ============ FOOTER ============ */
.footer { border-top: 1px solid var(--border); padding: 70px 0 34px; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p { color: var(--text-2); font-size: 14px; max-width: 280px; margin-bottom: 18px; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); transition: .3s; }
.footer-socials a:hover { background: var(--grad-btn); color: #fff; transform: translateY(-3px); border-color: transparent; }
.footer-col h4 { font-family: var(--font-d); font-size: 14px; margin-bottom: 16px; }
.footer-col a { display: block; color: var(--text-2); font-size: 14px; padding: 6px 0; transition: .2s; }
.footer-col a:hover { color: #fff; padding-left: 4px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13.5px; flex-wrap: wrap; gap: 8px; text-align: center; }
.footer-bottom i { color: var(--pink); }

/* ============ BACK TO TOP ============ */
.back-top { position: fixed; bottom: 28px; right: 28px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: var(--grad-btn); color: #fff; font-size: 17px; box-shadow: 0 12px 30px rgba(168,85,247,.4); opacity: 0; transform: translateY(20px); pointer-events: none; transition: .35s var(--ease); }
.back-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { transform: translateY(-3px); }

/* ============ SCROLL REVEAL ============ */
[data-anim] { opacity: 0; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-anim="fade-up"] { transform: translateY(40px); }
[data-anim="fade-right"] { transform: translateX(-40px); }
[data-anim="fade-left"] { transform: translateX(40px); }
[data-anim].in { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  .nav-center, .nav-right .btn-outline, .nav-right .btn-primary { display: none; }
  .hamburger { display: flex; }
  .mobile-nav { display: flex; }
  .why-grid, .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .eco-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .why-grid, .tools-grid, .eco-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: 32px; }
  .hero { padding-top: 100px; }
  .hero-tag { font-size: 11px; padding: 6px 12px; margin-bottom: 20px; }
}

/* ============================================================
   INNER PAGES (about / services / pricing / contact)
   ============================================================ */
.page-hero { padding: 160px 0 60px; text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 360px at 50% 0%, rgba(168,85,247,.22), transparent 65%); }
.breadcrumb { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 13px; color: var(--text-3); margin-bottom: 18px; }
.breadcrumb a { color: var(--text-2); } .breadcrumb a:hover { color: #fff; }
.breadcrumb i { font-size: 9px; }
.page-hero h1 { font-family: var(--font-d); font-weight: 800; font-size: clamp(36px, 5.4vw, 64px); letter-spacing: -1.5px; line-height: 1.05; }
.page-hero p { color: var(--text-2); font-size: clamp(15px,1.7vw,18px); max-width: 600px; margin: 18px auto 0; }

/* generic section + prose */
.sec { padding: 70px 0; }
.sec-narrow { max-width: 820px; margin: 0 auto; }
.prose p { color: var(--text-2); font-size: 16px; margin-bottom: 18px; }
.prose h2 { font-family: var(--font-d); font-size: clamp(26px,3.4vw,38px); letter-spacing: -.5px; margin: 10px 0 16px; }

/* two-column feature row */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.split.rev .split-media { order: 2; }
.split-media { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); background: linear-gradient(160deg,#15151f,#0c0c14); aspect-ratio: 4/3; display: grid; place-items: center; position: relative; }
.split-media .big-ic { font-size: 90px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.split-media::after { content:''; position:absolute; inset:0; background: radial-gradient(400px 220px at 50% 0%, rgba(168,85,247,.18), transparent 70%); }
.split-copy h2 { font-family: var(--font-d); font-size: clamp(26px,3.2vw,36px); letter-spacing:-.5px; margin-bottom: 14px; }
.split-copy p { color: var(--text-2); font-size: 15.5px; margin-bottom: 18px; }
.ticks { display: flex; flex-direction: column; gap: 12px; }
.ticks li { display:flex; gap:11px; align-items:flex-start; font-size:15px; }
.ticks .chk { flex-shrink:0; width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(168,85,247,.18);color:var(--p-light);font-size:11px;margin-top:1px; }

/* services grid (reuse why-card look) */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

/* value cards */
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value-card { padding:28px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); transition:.3s var(--ease); }
.value-card:hover { transform:translateY(-5px); border-color:rgba(168,85,247,.4); }
.value-card .vic { font-size:30px; margin-bottom:14px; }
.value-card h3 { font-family:var(--font-d); font-size:19px; margin-bottom:8px; }
.value-card p { color:var(--text-2); font-size:14px; }

/* about stats strip */
.about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-radius:24px; padding:42px 28px;
  background:linear-gradient(135deg, rgba(168,85,247,.14), rgba(255,45,178,.08)); border:1px solid rgba(168,85,247,.22); }
.about-stats .cell { text-align:center; }
.about-stats .num { font-family:var(--font-d); font-size:clamp(30px,3.6vw,44px); font-weight:800; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.about-stats .lbl { color:var(--text-2); font-size:13.5px; margin-top:6px; }

/* pricing toggle */
.bill-toggle { display:flex; gap:6px; justify-content:center; margin: -14px auto 44px; padding:5px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); width:max-content; }
.bill-toggle button { font-family:inherit; border:none; cursor:pointer; padding:9px 22px; border-radius:var(--r-pill); background:transparent; color:var(--text-2); font-weight:600; font-size:14px; transition:.25s; }
.bill-toggle button.on { background:var(--grad-btn); color:#fff; }
.bill-toggle .save { font-size:11px; color:var(--gold-2); margin-left:6px; }

/* faq */
.faq-wrap { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); overflow:hidden; transition:.3s; }
.faq-item.open { border-color:rgba(168,85,247,.4); }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; cursor:pointer; font-weight:600; font-size:16px; }
.faq-q .ic { color:var(--p-light); font-size:22px; transition:.3s; }
.faq-item.open .faq-q .ic { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease), padding .35s var(--ease); padding:0 22px; color:var(--text-2); font-size:15px; }
.faq-item.open .faq-a { max-height:280px; padding:0 22px 20px; }

/* contact info cards */
.contact-info { display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.info-card { display:flex; gap:14px; align-items:center; padding:16px 18px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); }
.info-card .ic { width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.28);color:var(--p-light); }
.info-card .k { font-size:12px; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; }
.info-card .v { font-weight:600; font-size:15px; }

@media (max-width:1000px){ .svc-grid,.value-grid{grid-template-columns:repeat(2,1fr);} .about-stats{grid-template-columns:repeat(2,1fr);gap:30px;} .split{grid-template-columns:1fr;gap:32px;} .split.rev .split-media{order:0;} }
@media (max-width:640px){ .svc-grid,.value-grid{grid-template-columns:1fr;} .about-stats{grid-template-columns:1fr;} }

/* ============================================================
   MORE INNER-PAGE COMPONENTS (process / legal / partners)
   ============================================================ */
/* numbered process steps */
.process { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
.pstep { position:relative; padding:30px 24px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); transition:.3s var(--ease); }
.pstep:hover { transform:translateY(-5px); border-color:rgba(168,85,247,.4); }
.pstep .n { counter-increment:step; width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:15px;color:#fff;background:var(--grad-btn);box-shadow:0 8px 22px rgba(168,85,247,.4);margin-bottom:16px; }
.pstep .n::before { content:'0' counter(step); }
.pstep h3 { font-family:var(--font-d); font-size:18px; margin-bottom:8px; }
.pstep p { color:var(--text-2); font-size:14px; }

/* partner grid */
.partner-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.partner-tile { aspect-ratio:3/2; display:grid; place-items:center; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); padding:18px; transition:.3s var(--ease); gap:8px; }
.partner-tile:hover { transform:translateY(-4px); border-color:rgba(168,85,247,.4); background:#ffffff0a; }
.partner-tile img { max-height:36px; max-width:90px; width:auto; object-fit:contain; opacity:.85; }
.partner-tile span { font-weight:600; font-size:13px; color:var(--text-2); }

/* legal prose */
.legal { max-width:820px; margin:0 auto; }
.legal .updated { color:var(--text-3); font-size:13px; margin-bottom:28px; }
.legal h2 { font-family:var(--font-d); font-size:22px; margin:30px 0 12px; }
.legal h3 { font-family:var(--font-d); font-size:17px; margin:22px 0 10px; color:var(--text); }
.legal p { color:var(--text-2); font-size:15.5px; margin-bottom:14px; }
.legal ul.bullets { list-style:disc; padding-left:22px; margin-bottom:14px; }
.legal ul.bullets li { color:var(--text-2); font-size:15px; margin-bottom:8px; }
.legal a { color:var(--p-light); }
.legal .note-box { padding:16px 18px; border-radius:var(--r-md); background:rgba(245,179,36,.08); border:1px solid rgba(245,179,36,.22); color:#ffe6a8; font-size:13.5px; margin:20px 0; }
.legal ol.bullets { list-style:decimal; padding-left:22px; margin-bottom:14px; }
.legal ol.bullets li { color:var(--text-2); font-size:15px; margin-bottom:8px; }
.legal li b { color:var(--text); }

/* legal pages — two-column layout with sticky "On this page" contents */
.legal-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:54px; align-items:start; max-width:1080px; margin:0 auto; }
.legal.legal-body { max-width:none; margin:0; }
.legal-body h2 { scroll-margin-top:96px; }
.legal-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:22px; }
.legal-pill { font-size:12px; font-weight:600; color:var(--text-2); padding:6px 13px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); display:inline-flex; align-items:center; gap:7px; }
.legal-pill i { color:var(--p-light); }
.legal-summary { padding:18px 20px; border-radius:var(--r-md); background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(255,45,178,.05)); border:1px solid rgba(168,85,247,.24); margin-bottom:32px; }
.legal-summary h3 { font-family:var(--font-d); font-size:15px; margin:0 0 6px; color:#fff; display:flex; align-items:center; gap:8px; }
.legal-summary h3 i { color:var(--p-light); }
.legal-summary p { color:var(--text-2); font-size:14px; margin:0; }
.legal-aside { position:sticky; top:100px; display:flex; flex-direction:column; gap:20px; }
.legal-contact { font-size:13.5px; line-height:1.6; color:var(--text-2); }
.legal-contact a { color:var(--p-light); word-break:break-word; }
.legal-contact .lc-row { display:flex; gap:9px; align-items:flex-start; margin-top:9px; }
.legal-contact .lc-row i { color:var(--p-light); margin-top:3px; width:14px; text-align:center; flex-shrink:0; }
@media (max-width:900px){ .legal-layout{ grid-template-columns:1fr; gap:0; } .legal-aside{ display:none; } }

@media (max-width:1000px){ .process{grid-template-columns:repeat(2,1fr);} .partner-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .process{grid-template-columns:1fr;} .partner-grid{grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   BLOG + PROJECTS (portfolio)
   ============================================================ */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card { border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(180deg,#13131f,#0e0e17); border:1px solid var(--border); transition:.35s var(--ease); display:flex; flex-direction:column; }
.blog-card:hover { transform:translateY(-6px); border-color:rgba(168,85,247,.4); box-shadow:0 24px 60px rgba(124,58,237,.18); }
.blog-thumb { aspect-ratio:16/9; position:relative; display:grid; place-items:center; font-size:42px; color:#ffffff55; }
.blog-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.3)); }
.blog-body { padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-cat { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--p-light); }
.blog-card h3 { font-family:var(--font-d); font-size:18px; line-height:1.3; }
.blog-card p { color:var(--text-2); font-size:14px; flex:1; }
.blog-meta { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--text-3); margin-top:6px; }
.blog-meta .read { color:var(--p-light); font-weight:600; }

/* ============================================================
   BLOG POST — single-article reading view
   (admin duplicates _blog-post-template.html for a new post)
   ============================================================ */
.post-hero { padding:140px 0 0; text-align:center; position:relative; overflow:hidden; }
.post-hero::before { content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 80% at 50% 0%, rgba(168,85,247,.18), transparent 70%); }
.post-hero .post-cat { display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--p-light); padding:6px 15px; border-radius:var(--r-pill); background:rgba(168,85,247,.1); border:1px solid rgba(168,85,247,.28); margin-bottom:20px; }
.post-hero h1 { font-family:var(--font-d); font-weight:800; font-size:clamp(28px,4.2vw,48px); letter-spacing:-1px; line-height:1.14; max-width:860px; margin:0 auto; }
.post-meta-top { display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; color:var(--text-3); font-size:13.5px; margin-top:24px; }
.post-meta-top .pm-author { display:flex; align-items:center; gap:9px; color:var(--text-2); font-weight:500; }
.pm-avatar { width:32px; height:32px; border-radius:50%; background:var(--grad-btn); display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff; font-family:var(--font-d); }
.post-meta-top .dot { width:3px; height:3px; border-radius:50%; background:var(--text-3); }

.post-banner { max-width:980px; margin:42px auto 0; aspect-ratio:16/7; border-radius:var(--r-lg); display:grid; place-items:center; font-size:62px; color:#ffffff55; position:relative; overflow:hidden; border:1px solid var(--border); }
.post-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.38)); }
.post-banner i { position:relative; z-index:1; }

.post { max-width:760px; margin:0 auto; }
.post-back { display:inline-flex; align-items:center; gap:8px; color:var(--text-2); font-size:14px; margin-bottom:26px; }
.post-back:hover { color:#fff; }
.post .lead { font-size:19px; line-height:1.75; color:var(--text); margin-bottom:26px; font-weight:300; }
.post h2 { font-family:var(--font-d); font-size:clamp(22px,3vw,27px); font-weight:700; margin:40px 0 14px; letter-spacing:-.4px; }
.post h3 { font-family:var(--font-d); font-size:19px; font-weight:600; margin:28px 0 10px; }
.post p { color:var(--text-2); font-size:16.5px; line-height:1.85; margin-bottom:18px; }
.post a { color:var(--p-light); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(168,85,247,.4); }
.post a:hover { text-decoration-color:var(--p-light); }
.post ul, .post ol { margin:0 0 20px; padding-left:24px; }
.post ul { list-style:disc; } .post ol { list-style:decimal; }
.post li { color:var(--text-2); font-size:16px; line-height:1.75; margin-bottom:10px; padding-left:4px; }
.post li::marker { color:var(--p-light); }
.post li b, .post li strong, .post p b, .post p strong { color:var(--text); font-weight:600; }
.post blockquote { margin:30px 0; padding:18px 26px; border-left:3px solid var(--purple); background:linear-gradient(90deg,rgba(168,85,247,.09),transparent); border-radius:0 var(--r-md) var(--r-md) 0; font-family:var(--font-d); font-size:18px; line-height:1.6; color:var(--text); font-style:italic; }
.post .callout { display:flex; gap:14px; padding:18px 20px; border-radius:var(--r-md); background:rgba(245,179,36,.08); border:1px solid rgba(245,179,36,.22); margin:26px 0; }
.post .callout i { color:var(--gold); font-size:18px; margin-top:3px; }
.post .callout p { color:#ffe6a8; font-size:14.5px; line-height:1.65; margin:0; }
.post hr { border:0; border-top:1px solid var(--border); margin:36px 0; }

.post-foot { max-width:760px; margin:0 auto; }
.post-tags { display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 0; }
.post-tags a { font-size:12.5px; color:var(--text-2); padding:6px 14px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); text-decoration:none; }
.post-tags a:hover { border-color:rgba(168,85,247,.4); color:#fff; }
.post-share { display:flex; align-items:center; gap:12px; margin-top:28px; padding-top:26px; border-top:1px solid var(--border); }
.post-share span { font-size:13px; color:var(--text-3); margin-right:2px; }
.post-share a { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--text-2); transition:.3s var(--ease); }
.post-share a:hover { border-color:rgba(168,85,247,.5); color:#fff; transform:translateY(-2px); }

@media (max-width:640px){ .post-hero{padding-top:120px;} .post-banner{aspect-ratio:16/10;font-size:46px;margin-top:30px;} .post .lead{font-size:17px;} .post p{font-size:16px;} }

/* ============================================================
   ARTICLE — SWALAY-style two-column post (verified byline,
   share rail + "In This Article" table of contents)
   ============================================================ */
.article-wrap { padding:128px 0 0; }
.breadcrumb.article-crumb { justify-content:flex-start; margin-bottom:22px; }
.article-head { max-width:880px; }
.article-head .post-cat { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:#dcc6ff; padding:7px 15px; border-radius:var(--r-pill); background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(255,45,178,.16)); border:1px solid rgba(168,85,247,.34); margin-bottom:22px; }
.article-head h1 { font-family:var(--font-d); font-weight:800; font-size:clamp(30px,4.6vw,52px); letter-spacing:-1.2px; line-height:1.1; margin-bottom:20px; }
.article-lead { font-size:19px; line-height:1.7; color:var(--text-2); font-weight:300; max-width:780px; }

.article-byline { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:30px; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.byl-left { display:flex; align-items:center; gap:13px; }
.byl-avatar { width:46px; height:46px; border-radius:50%; background:var(--grad-btn); display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:15px; color:#fff; flex-shrink:0; }
.byl-name { display:flex; align-items:center; gap:7px; font-weight:600; font-size:15px; }
.byl-sub { font-size:13px; color:var(--text-3); margin-top:1px; }
.byl-right { display:flex; gap:20px; color:var(--text-3); font-size:13.5px; }
.byl-right span { display:flex; align-items:center; gap:7px; }
.byl-right i { color:var(--p-light); }

/* verified badge + hover/focus tooltip */
.verified { position:relative; display:inline-flex; cursor:help; color:#3ea6ff; outline:none; }
.verified > i { font-size:15px; }
.verified-tip { position:absolute; top:calc(100% + 11px); left:50%; transform:translateX(-24px) translateY(6px); width:282px; padding:13px 15px; border-radius:var(--r-md); background:#0d0d18; border:1px solid var(--border-2); box-shadow:0 20px 54px rgba(0,0,0,.6); color:var(--text-2); font-size:12.5px; line-height:1.6; font-weight:400; opacity:0; visibility:hidden; transition:.25s var(--ease); z-index:40; pointer-events:none; }
.verified-tip b { color:#3ea6ff; font-weight:600; }
.verified-tip::before { content:''; position:absolute; bottom:100%; left:28px; border:7px solid transparent; border-bottom-color:#0d0d18; }
.verified:hover .verified-tip, .verified:focus-visible .verified-tip, .verified:focus-within .verified-tip { opacity:1; visibility:visible; transform:translateX(-24px) translateY(0); }

.article-banner { margin:32px 0 46px; aspect-ratio:16/6.2; border-radius:var(--r-lg); display:grid; place-items:center; font-size:66px; color:#ffffff55; position:relative; overflow:hidden; border:1px solid var(--border); }
.article-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.4)); }
.article-banner i { position:relative; z-index:1; }

.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:54px; align-items:start; }
.post.article-body { max-width:none; margin:0; }
.article-body h2 { scroll-margin-top:96px; }

.article-aside { position:sticky; top:100px; display:flex; flex-direction:column; gap:22px; }
.aside-box { border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; background:linear-gradient(180deg,#13131f,#0e0e17); }
.aside-box h4 { font-size:11px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--text-3); margin-bottom:15px; }
.share-row { display:flex; gap:10px; }
.share-row a, .share-row button { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--text-2); cursor:pointer; transition:.3s var(--ease); font-size:15px; font-family:inherit; }
.share-row a:hover, .share-row button:hover { color:#fff; transform:translateY(-2px); }
.share-row .s-x:hover { background:#000; border-color:#000; }
.share-row .s-wa:hover { background:#25d366; border-color:#25d366; }
.share-row .s-li:hover { background:#0a66c2; border-color:#0a66c2; }
.share-row .s-cp:hover { border-color:var(--purple); color:var(--p-light); }
.share-row .s-cp.copied { border-color:#25d366; color:#25d366; transform:none; }

.post-toc { display:flex; flex-direction:column; }
.post-toc a { font-size:13.5px; line-height:1.45; color:var(--text-3); padding:8px 0 8px 14px; border-left:2px solid var(--border); transition:.25s var(--ease); }
.post-toc a:hover { color:var(--text-2); }
.post-toc a.active { color:var(--p-light); border-left-color:var(--purple); font-weight:500; }

.author-card { display:flex; gap:16px; align-items:flex-start; margin-top:36px; padding:22px; border-radius:var(--r-lg); border:1px solid var(--border); background:linear-gradient(180deg,#13131f,#0e0e17); }
.author-card .byl-avatar { width:52px; height:52px; font-size:17px; }
.ac-name { display:flex; align-items:center; gap:7px; font-family:var(--font-d); font-weight:700; font-size:16px; }
.author-card p { color:var(--text-2); font-size:14px; line-height:1.65; margin:6px 0 0; }

@media (max-width:900px){
  .article-layout { grid-template-columns:1fr; gap:36px; }
  .article-aside { position:static; flex-direction:row; flex-wrap:wrap; }
  .article-aside .aside-box { flex:1; min-width:260px; }
}
@media (max-width:640px){
  .article-wrap { padding-top:108px; }
  .byl-right { width:100%; justify-content:flex-start; }
  .article-banner { aspect-ratio:16/9; font-size:48px; }
  .article-head .article-lead { font-size:17px; }
}

/* projects / portfolio */
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.work-card { position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); aspect-ratio:1/1; display:flex; align-items:flex-end; background:#10101a; transition:.35s var(--ease); }
.work-card:hover { transform:translateY(-5px); border-color:rgba(168,85,247,.45); }
.work-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.5s var(--ease); }
.work-card:hover img { transform:scale(1.06); }
.work-card .work-info { position:relative; width:100%; padding:18px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.82)); }
.work-card .work-info .wt { font-weight:700; font-size:16px; }
.work-card .work-info .ws { font-size:13px; color:var(--text-3); }
.work-card .work-badge { position:absolute; top:14px; left:14px; z-index:2; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); background:rgba(0,0,0,.55); backdrop-filter:blur(6px); color:#fff; border:1px solid var(--border-2); }

@media (max-width:1000px){ .blog-grid,.work-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .blog-grid,.work-grid{grid-template-columns:1fr;} }

/* ============================================================
   ABOUT — brand-name story + mission
   ============================================================ */
.name-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; max-width:920px; margin:0 auto; }
.name-card { position:relative; padding:38px 32px; border-radius:var(--r-xl); background:linear-gradient(180deg,#14151e,#0d0e15); border:1px solid var(--border); text-align:center; transition:.35s var(--ease); overflow:hidden; }
.name-card::after { content:''; position:absolute; inset:0; opacity:0; transition:.4s; background:radial-gradient(300px 160px at 50% 0%, rgba(168,85,247,.18), transparent 70%); }
.name-card:hover { transform:translateY(-6px); border-color:rgba(168,85,247,.4); box-shadow:0 20px 48px rgba(0,0,0,.4); }
.name-card .dev { font-family:var(--font-d); font-size:54px; font-weight:800; line-height:1.5; padding:4px 0 8px; margin-bottom:10px; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.name-card h3 { font-family:var(--font-d); font-size:24px; margin-bottom:10px; }
.name-card h3 span { color:var(--text-3); font-weight:500; font-size:16px; }
.name-card p { color:var(--text-2); font-size:15px; position:relative; }
.name-plus { font-family:var(--font-d); font-size:40px; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; text-align:center; }
.name-tagline { text-align:center; font-family:var(--font-d); font-size:clamp(20px,2.6vw,28px); font-weight:600; margin-top:38px; color:var(--text); }

.mission-box { position:relative; overflow:hidden; max-width:880px; margin:0 auto; text-align:center; padding:56px 44px; border-radius:var(--r-xl);
  background:linear-gradient(135deg, rgba(168,85,247,.16), rgba(255,45,178,.1)); border:1px solid rgba(168,85,247,.28); }
.mission-box .section-tag { margin-bottom:14px; }
.mission-box h2 { font-family:var(--font-d); font-weight:800; font-size:clamp(28px,3.6vw,42px); letter-spacing:-1px; margin-bottom:18px; }
.mission-box p { color:var(--text); font-size:clamp(16px,1.8vw,19px); line-height:1.7; max-width:720px; margin:0 auto; }

@media (max-width:760px){
  .name-grid { grid-template-columns:1fr; }
  .name-plus { padding:4px 0; }
}

/* ============================================================
   ABOUT — video hero + brand assets
   ============================================================ */
.about-hero { padding: 160px 0 80px; overflow: hidden; }
.about-hero::before { display: none; }            /* drop the page-hero radial so video shows */
.about-hero > .container { position: relative; z-index: 2; }
.about-hero .hero-overlay {
  background:
    linear-gradient(180deg, rgba(6,6,11,.72) 0%, rgba(6,6,11,.6) 45%, rgba(6,6,11,.96) 100%),
    radial-gradient(900px 500px at 50% 20%, rgba(168,85,247,.26), transparent 60%);
}

.brand-assets { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items:center;
  border-radius: var(--r-xl); padding: 40px; background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(255,45,178,.07));
  border: 1px solid rgba(168,85,247,.24); }
.ba-logo { border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--border); background:#000; }
.ba-logo img { width:100%; display:block; }
.ba-copy .section-tag { margin-bottom: 12px; }
.ba-copy h2 { font-family:var(--font-d); font-weight:800; font-size:clamp(26px,3.4vw,40px); letter-spacing:-1px; margin-bottom:14px; }
.ba-copy p { color:var(--text-2); font-size:15.5px; margin-bottom:24px; max-width:520px; }

@media (max-width:760px){ .brand-assets { grid-template-columns:1fr; gap:28px; padding:28px; text-align:center; } .ba-copy p{margin-left:auto;margin-right:auto;} }

/* ============================================================
   ABOUT — real photos in split + gallery
   ============================================================ */
.split-media img { width:100%; height:100%; object-fit:cover; display:block; }
.split-media:has(img)::after { background:linear-gradient(180deg, rgba(168,85,247,.12), transparent 60%); }

/* gallery — every genre, every stage */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:215px; gap:16px; }
.gallery-item { position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); }
.gallery-item.gi-tall { grid-row:span 2; }
.gallery-item.gi-wide { grid-column:span 2; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gallery-item:hover img { transform:scale(1.07); }
.gallery-item figcaption { position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px; background:linear-gradient(180deg, transparent 45%, rgba(6,6,11,.82)); }
.gallery-item .gi-cat { font-family:var(--font-d); font-weight:700; font-size:15px; color:#fff; padding:7px 14px; border-radius:var(--r-pill); background:rgba(168,85,247,.3); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); }
@media (max-width:860px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; } .gallery-item.gi-tall{grid-row:span 2;} .gallery-item.gi-wide{grid-column:span 2;} }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } .gallery-item.gi-wide,.gallery-item.gi-tall{grid-column:auto;grid-row:auto;} }

/* ============================================================
   ABOUT — big floating "Tune + Tradr" wordmark (SWALAY-style)
   ============================================================ */
.brand-name-head { text-align:center; margin-bottom:54px; }
.brand-name-head .section-tag { margin-bottom:18px; }
.brand-wordmark { display:flex; align-items:center; justify-content:center; gap:.18em;
  font-family:var(--font-d); font-weight:800; letter-spacing:-2px; line-height:1;
  font-size:clamp(56px,11vw,140px); }
.brand-wordmark span { display:inline-block; }
/* "Tune" — solid, white→gold sheen */
.wm-fill { background:linear-gradient(180deg,#ffffff 0%,#ffe9b0 60%,#f5b324 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 30px rgba(245,179,36,.25));
  animation: wmFloat 4.2s var(--ease) infinite; }
/* "Tradr" — outlined / hollow */
.wm-outline { color:transparent; -webkit-text-stroke:2px #c084fc;
  filter:drop-shadow(0 8px 30px rgba(168,85,247,.35));
  animation: wmFloat 4.2s var(--ease) infinite; animation-delay:-2.1s; }
.wm-plus { font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: wmPulse 4.2s var(--ease) infinite; }
@keyframes wmFloat { 0%,100%{ transform:translateY(14px); } 50%{ transform:translateY(-14px); } }
@keyframes wmPulse { 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.12); opacity:1; } }
.brand-dev { font-family:var(--font-d); font-weight:700; font-size:clamp(22px,3.4vw,38px); margin-top:8px; line-height:1.5; padding-bottom:6px;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-dev span { -webkit-text-fill-color:initial; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding:0 .15em; }
@media (prefers-reduced-motion: reduce){ .wm-fill,.wm-outline,.wm-plus{ animation:none; } }

/* ============================================================
   GLOBAL DISTRIBUTION ORBIT (animated)
   ============================================================ */
.globe-sec { overflow:hidden; }
.globe-viz { position:relative; width:min(560px,92vw); aspect-ratio:1; margin:46px auto 10px; }
.globe-viz::before { /* soft glow behind */
  content:''; position:absolute; inset:18%; border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,.22), transparent 70%); filter:blur(20px); }

/* faint orbit rings */
.gv-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px dashed rgba(255,255,255,.1); }
.gv-ring.r1 { width:100%; height:100%; }
.gv-ring.r2 { width:62%; height:62%; border-color:rgba(255,255,255,.08); }

/* glowing core */
.gv-core { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4;
  width:132px; height:132px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle, rgba(40,30,60,.95), rgba(10,10,18,.96));
  border:1px solid rgba(168,85,247,.5); box-shadow:0 0 60px rgba(168,85,247,.45), inset 0 0 30px rgba(168,85,247,.25);
  animation:gvCore 3.6s var(--ease) infinite; }
.gv-core img { width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(245,179,36,.3)); }
@keyframes gvCore { 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.06); } }

/* sonar pulses */
.gv-pulse { position:absolute; top:50%; left:50%; width:132px; height:132px; border-radius:50%;
  border:1px solid rgba(168,85,247,.55); transform:translate(-50%,-50%); z-index:1; opacity:0;
  animation:gvSonar 3.6s ease-out infinite; }
.gv-pulse.p2 { animation-delay:1.2s; } .gv-pulse.p3 { animation-delay:2.4s; }
@keyframes gvSonar { 0%{ transform:translate(-50%,-50%) scale(1); opacity:.7; } 100%{ transform:translate(-50%,-50%) scale(3.3); opacity:0; } }

/* orbiting nodes — each wrapper spins; chip counter-spins to stay upright */
.gv-orbit { position:absolute; top:50%; left:50%; border-radius:50%; z-index:3;
  animation:gvOrbit var(--dur,38s) linear infinite; animation-delay:var(--d,0s); }
.gv-orbit.outer { width:100%; height:100%; }
.gv-orbit.inner { width:62%; height:62%; animation-direction:reverse; }
.gv-node { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); }
.gv-chip { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-size:24px;
  background:linear-gradient(180deg,#17171f,#0e0e16); border:1px solid var(--border-2);
  box-shadow:0 10px 24px rgba(0,0,0,.55); animation:gvChip var(--dur,38s) linear infinite reverse; animation-delay:var(--d,0s); }
.gv-orbit.inner .gv-chip { animation-direction:normal; }
.gv-chip img { width:28px; height:28px; object-fit:contain; }
@keyframes gvOrbit { from{ transform:translate(-50%,-50%) rotate(0); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes gvChip { from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

/* center badge */
.gv-badge { position:absolute; top:50%; left:50%; transform:translate(-50%,38px); z-index:5;
  font-family:var(--font-d); font-weight:700; font-size:12px; letter-spacing:.5px; color:#fff;
  padding:5px 12px; border-radius:var(--r-pill); background:var(--grad-btn); box-shadow:0 8px 20px rgba(168,85,247,.4); }

@media (max-width:520px){ .gv-chip{ width:44px; height:44px; font-size:20px; } .gv-chip img{ width:23px; height:23px; } .gv-core{ width:108px; height:108px; } .gv-core img{ width:62px; height:62px; } }
@media (prefers-reduced-motion: reduce){ .gv-orbit,.gv-chip,.gv-pulse,.gv-core{ animation:none; } }

/* ============ pricing: "not included" feature ============ */
.plan-feats li.no { color:var(--text-3); }
.plan-feats li.no .chk { background:rgba(255,90,90,.14); color:#ff6b6b; }
.feat-tag { font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--f-gold,#f5b324); background:rgba(245,179,36,.14); border:1px solid rgba(245,179,36,.3); padding:1px 7px; border-radius:20px; margin-left:6px; white-space:nowrap; align-self:center; }
.plan-feats li.no .feat-tag { color:var(--text-3); background:#ffffff0a; border-color:var(--border); }

/* ============================================================
   BUILT ON TRUST — badge grid (About)
   ============================================================ */
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.trust-badge { text-align:center; padding:30px 18px 26px; border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 50% 0%, rgba(168,85,247,.1), var(--surface));
  border:1px solid var(--border); transition:.35s var(--ease); }
.trust-badge:hover { transform:translateY(-5px); border-color:rgba(168,85,247,.4); box-shadow:0 18px 44px rgba(124,58,237,.18); }
.trust-ring { position:relative; width:92px; height:92px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(168,85,247,.32); background:radial-gradient(circle, rgba(168,85,247,.14), transparent 70%); }
.trust-ring::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed rgba(255,255,255,.1); }
.trust-ring i { font-size:30px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.trust-ring .tick { position:absolute; bottom:0; right:6px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-btn); color:#fff; font-size:11px; border:2px solid var(--bg); }
.trust-badge h3 { font-family:var(--font-d); font-size:15.5px; font-weight:700; margin-bottom:5px; }
.trust-badge p { font-size:12.5px; color:var(--text-3); line-height:1.5; }
@media (max-width:1000px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .trust-grid{ grid-template-columns:1fr; } }

/* ============================================================
   MEMBERSHIPS & AFFILIATIONS — certificate cards (About)
   ============================================================ */
.member-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.member-card { position:relative; text-align:center; padding:30px 24px 26px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#14131c,#0e0d15); border:1px solid rgba(245,179,36,.22);
  box-shadow:0 14px 40px rgba(0,0,0,.4); transition:.35s var(--ease); overflow:hidden; }
.member-card::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(180deg, rgba(245,179,36,.35), transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.member-card:hover { transform:translateY(-6px); border-color:rgba(245,179,36,.5); box-shadow:0 24px 60px rgba(245,179,36,.14); }
.member-seal { position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; color:#1a1206; background:var(--grad-gold); box-shadow:0 6px 16px rgba(245,179,36,.4); }
.member-logo { height:96px; margin:0 auto 18px; padding:14px 22px; border-radius:var(--r-md); background:#fff;
  display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.member-logo img { max-height:64px; max-width:130px; width:auto; object-fit:contain; }
.member-logo .wordmark { font-family:var(--font-d); font-weight:800; font-size:25px; letter-spacing:-1px; display:inline-flex; align-items:center; }
.member-logo .wordmark b { font-weight:800; }
.wm-lf { font-style:italic; color:#15151c; } .wm-lf b { color:#274690; }
.lf-tri { width:0; height:0; margin-left:4px; border-left:13px solid #274690; border-top:9px solid transparent; border-bottom:9px solid transparent; }
.member-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--gold-2); padding:4px 12px; border-radius:var(--r-pill); background:rgba(245,179,36,.12); border:1px solid rgba(245,179,36,.28); margin-bottom:10px; }
.member-card h3 { font-family:var(--font-d); font-size:18px; font-weight:700; }
.member-card p { color:var(--text-2); font-size:13px; margin-top:3px; }
@media (max-width:860px){ .member-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .member-grid{ grid-template-columns:1fr; } }

/* ============================================================
   ECOSYSTEM — 4 pillars around central artist collage
   ============================================================ */
.eco-sec { padding: 90px 0; }
.eco-stage { position:relative; max-width:1060px; margin:30px auto 0; min-height:620px; }

/* corner pillar cards */
.eco-pillar { position:absolute; width:290px; padding:26px 24px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#13131f,#0d0d15); border:1px solid var(--border); box-shadow:0 18px 50px rgba(0,0,0,.45);
  transition:.35s var(--ease); z-index:3; }
.eco-pillar:hover { transform:translateY(-5px); border-color:rgba(168,85,247,.4); }
.eco-pillar .ep-num { position:absolute; top:14px; right:18px; font-family:var(--font-d); font-weight:800; font-size:42px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.45; }
.eco-pillar .ep-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:19px; color:#fff;
  background:var(--grad-btn); box-shadow:0 8px 20px rgba(168,85,247,.4); margin-bottom:14px; }
.eco-pillar h3 { font-family:var(--font-d); font-size:19px; margin-bottom:8px; }
.eco-pillar p { color:var(--text-2); font-size:13.5px; }
.ep-tl { top:0; left:0; } .ep-tr { top:0; right:0; }
.ep-bl { bottom:0; left:0; } .ep-br { bottom:0; right:0; }

/* central collage */
.eco-collage { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:420px; height:420px; z-index:2; }
/* soft circular stage disc (no hard edge — artists overflow it cleanly, like SwaLay) */
.eco-collage::before { content:''; position:absolute; inset:-4%; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 44%, rgba(46,28,68,.6), rgba(9,9,16,0) 70%); }
.eco-glow { position:absolute; inset:2%; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(168,85,247,.28), transparent 66%); filter:blur(22px); }
.eco-orbit { position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(255,255,255,.1); z-index:1;
  box-shadow:inset 0 0 60px rgba(168,85,247,.1); animation:gvChip 60s linear infinite; }
/* faces layer overflows the sides, but fades out at the bottom so no cutout
   sticks out below the circle with a hard edge */
.eco-faces { position:absolute; inset:0; z-index:2;
  -webkit-mask-image:linear-gradient(to bottom, #000 68%, transparent 90%);
  mask-image:linear-gradient(to bottom, #000 68%, transparent 90%); }
.eco-faces .ec-ph { position:absolute; inset:0; display:grid; place-items:center; font-size:46px; color:#ffffff22; }
/* artist cutouts (background removed) overlapping as a group; soft bottom fade so no hard cut */
.ec-cut { position:absolute; transform:translateX(-50%); width:auto; object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55)); animation:ecoSway 5s var(--ease) infinite; will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 99%);
  mask-image:linear-gradient(to bottom, #000 80%, transparent 99%); }
.ec-cut.lead { filter:drop-shadow(0 10px 22px rgba(168,85,247,.45)); }
@keyframes ecoSway { 0%,100%{ transform:translateX(-50%) translateY(4px); } 50%{ transform:translateX(-50%) translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ .ec-cut,.eco-orbit{ animation:none; } }
.eco-badge { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); z-index:30;
  font-family:var(--font-d); font-weight:700; font-size:12px; color:#fff; padding:7px 16px; border-radius:var(--r-pill);
  background:var(--grad-btn); box-shadow:0 10px 24px rgba(168,85,247,.55); white-space:nowrap; }

@media (max-width:980px){
  .eco-stage { min-height:0; max-width:560px; }
  /* relative (not static) so each .ep-num badge stays in ITS pillar corner,
     instead of escaping to the top-right of the whole section over the collage */
  .eco-pillar, .ep-tl, .ep-tr, .ep-bl, .ep-br { position:relative; inset:auto; width:auto; }
  .eco-collage { position:relative; top:0; left:0; transform:none; margin:10px auto 36px; width:min(380px,82vw); height:min(380px,82vw); }
  .eco-stage { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .eco-collage { grid-column:1 / -1; order:-1; }
}
@media (max-width:560px){ .eco-stage{ grid-template-columns:1fr; } }

/* ============ services: 3-step process centering ============ */
.process.p3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .process.p3{ grid-template-columns:1fr; } }

/* ============================================================
   SERVICES — distribution dashboard mockup
   ============================================================ */
.split-media.has-dash { background:linear-gradient(160deg,#15151f,#0b0b12); padding:20px; aspect-ratio:auto; height:auto; }
.split-media.has-dash::after { display:none; }
.svc-dash { position:relative; z-index:2; width:100%; border-radius:16px; background:linear-gradient(180deg,#101019,#0b0b12);
  border:1px solid var(--border); box-shadow:0 20px 50px rgba(0,0,0,.5); overflow:hidden; }
.svc-dash-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); }
.svc-dash-top .dots { display:flex; gap:6px; }
.svc-dash-top .dots i { width:10px; height:10px; border-radius:50%; }
.svc-dash-top .dots i:nth-child(1){ background:#ff5f57; } .svc-dash-top .dots i:nth-child(2){ background:#febc2e; } .svc-dash-top .dots i:nth-child(3){ background:#28c840; }
.svc-dash-title { font-size:12.5px; font-weight:600; color:var(--text-3); }
.svc-dash-rows { padding:14px; display:flex; flex-direction:column; gap:12px; }
.svc-dash-row { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--border); transition:.3s var(--ease); }
.svc-dash-row:hover { transform:translateX(3px); border-color:var(--border-2); }
.sd-logo { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
.sd-logo img { width:21px; height:21px; object-fit:contain; }
.sd-logo i { font-size:18px; color:#fff; }
.sd-name { font-weight:600; font-size:15px; flex:1; }
.sd-live { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#28c840; }
.sd-live::before { content:''; width:7px; height:7px; border-radius:50%; background:#28c840; box-shadow:0 0 8px #28c840; animation:pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* ============================================================
   COMMUNITY PAGE
   ============================================================ */
.spotlight-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.spotlight-grid .artist-card { width:auto; height:230px; }
@media (max-width:1000px){ .spotlight-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .spotlight-grid{ grid-template-columns:repeat(2,1fr); } }

/* community voices — review cards */
.trust-head { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }
.trust-stars { color:#00b67a; font-size:20px; letter-spacing:2px; }
.trust-head .tp { font-weight:600; color:var(--text-2); font-size:14px; }
.trust-head .tp b { color:#00b67a; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-card { display:flex; flex-direction:column; padding:28px; border-radius:var(--r-lg); background:linear-gradient(180deg,#13131f,#0e0e17); border:1px solid var(--border); transition:.35s var(--ease); }
.review-card:hover { transform:translateY(-5px); border-color:rgba(0,182,122,.4); }
.review-card .rstars { color:#00b67a; font-size:15px; letter-spacing:2px; margin-bottom:14px; }
.review-card p { color:var(--text); font-size:15px; line-height:1.6; margin-bottom:20px; flex:1; }
.review-who { display:flex; align-items:center; gap:12px; }
.review-who .rav { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; background:var(--grad); flex-shrink:0; }
.review-who .rav.rav-img { background:none; overflow:hidden; }
.review-who .rav.rav-img img { width:100%; height:100%; object-fit:cover; }
.review-who .rn { font-weight:700; font-size:14.5px; }
.review-who .rr { font-size:12.5px; color:var(--text-3); }
.review-foot { text-align:center; margin-top:30px; }
.review-note { text-align:center; color:var(--text-3); font-size:12.5px; margin-top:16px; font-style:italic; }

/* newsletter */
.newsletter { max-width:680px; margin:0 auto; text-align:center; padding:50px 40px; border-radius:var(--r-xl);
  background:linear-gradient(135deg, rgba(168,85,247,.16), rgba(255,45,178,.1)); border:1px solid rgba(168,85,247,.3); }
.newsletter h2 { font-family:var(--font-d); font-weight:800; font-size:clamp(26px,3.6vw,40px); letter-spacing:-1px; margin-bottom:12px; }
.newsletter p { color:var(--text-2); font-size:16px; margin-bottom:26px; }
.news-form { display:flex; gap:12px; max-width:460px; margin:0 auto; }
.news-form input { flex:1; padding:14px 18px; border-radius:var(--r-pill); background:rgba(0,0,0,.3); border:1px solid var(--border-2); color:#fff; font-family:inherit; font-size:15px; outline:none; }
.news-form input:focus { border-color:rgba(168,85,247,.6); }
@media (max-width:1000px){ .review-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .news-form{ flex-direction:column; } }

/* ============================================================
   PRICING PAGE — badges, Maestro, compare table, Vevo, YT marketing
   ============================================================ */
.price-badges { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.price-badge { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--text-2); }
.price-badge i { color:var(--p-light); }

/* Maestro — major artists & labels */
.maestro { position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:34px; align-items:center; max-width:1000px; margin:0 auto;
  padding:38px 42px; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(135deg, rgba(245,179,36,.12), rgba(168,85,247,.14)); border:1px solid rgba(245,179,36,.32); }
.maestro .m-tag { display:inline-block; font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#1a1206; background:var(--grad-gold); padding:5px 12px; border-radius:var(--r-pill); margin-bottom:14px; }
.maestro h3 { font-family:var(--font-d); font-weight:800; font-size:clamp(26px,3.4vw,38px); letter-spacing:-1px; }
.maestro p { color:var(--text-2); font-size:15px; margin:8px 0 16px; }
.maestro .m-feats { display:flex; flex-wrap:wrap; gap:8px 20px; }
.maestro .m-feats span { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text); }
.maestro .m-feats i { color:var(--gold-2); }
.maestro .m-right { text-align:center; }
.maestro .m-price { font-family:var(--font-d); font-weight:800; font-size:40px; letter-spacing:-1px; }
.maestro .m-price small { display:block; font-size:13px; color:var(--text-3); font-weight:500; margin-top:2px; }
.maestro .btn-gold { margin-top:16px; }
@media (max-width:760px){ .maestro{ grid-template-columns:1fr; gap:22px; text-align:center; padding:30px 24px; } .maestro .m-feats{ justify-content:center; } }

/* compare plans table */
.cmp-wrap { overflow-x:auto; border-radius:var(--r-xl); border:1px solid var(--border); background:linear-gradient(180deg,#101019,#0b0b12); }
.cmp { width:100%; border-collapse:collapse; min-width:760px; }
.cmp th, .cmp td { padding:15px 18px; text-align:center; border-bottom:1px solid var(--border); font-size:14px; color:var(--text-2); }
.cmp thead th { padding:22px 18px; vertical-align:top; }
.cmp th:first-child, .cmp td:first-child { text-align:left; color:var(--text); font-weight:500; }
.cmp .ph-name { display:block; font-family:var(--font-d); font-weight:800; font-size:18px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cmp .ph-price { display:block; font-size:12px; color:var(--text-3); font-weight:500; margin-top:3px; }
.cmp tr.cat td { background:rgba(168,85,247,.08); color:var(--p-light); font-weight:700; font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; }
.cmp td .yes { color:#34d399; font-size:15px; } .cmp td .no { color:var(--text-3); font-size:14px; }
.cmp .col-hi { background:rgba(168,85,247,.07); }
.cmp-note { font-size:11px; color:var(--text-3); font-weight:400; }
.cmp tbody tr:hover td { background:#ffffff05; }
.cmp tbody tr:hover td.col-hi { background:rgba(168,85,247,.12); }

/* vevo */
.vevo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:0 auto; }
@media (max-width:700px){ .vevo-grid{ grid-template-columns:1fr; } }

/* youtube marketing */
.ytm { max-width:760px; margin:0 auto; padding:36px; border-radius:var(--r-xl); background:linear-gradient(180deg,#13131f,#0c0c14); border:1px solid var(--border); text-align:center; }
.ytm .ytm-head { font-family:var(--font-d); font-weight:800; font-size:22px; margin-bottom:4px; }
.ytm .ytm-sub { color:var(--text-2); font-size:14px; margin-bottom:22px; }
.ytm-list { display:flex; flex-direction:column; gap:12px; max-width:420px; margin:0 auto 24px; }
.ytm-list li { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); font-size:14.5px; }
.ytm-list li b { color:var(--gold-2); font-family:var(--font-d); }

/* pricing: centered 2-card layout + store strip */
.price-grid.two { grid-template-columns:repeat(2,1fr); max-width:800px; margin-left:auto; margin-right:auto; }
@media (max-width:1000px){ .price-grid.two{ grid-template-columns:1fr; } }
.price-grid.one { grid-template-columns:minmax(0,400px); justify-content:center; max-width:none; }
.price-marquee { padding:14px 0 0; }

/* ============================================================
   PRICING v2 — gap, lyrics, copyright, YT rates, artists-with-us
   ============================================================ */
.bill-toggle { margin-top: 56px; }   /* ample gap after the store strip */

/* lyrics distribution mini-plan */
.lyrics-plan { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; max-width:1000px; margin:0 auto;
  padding:32px 38px; border-radius:var(--r-xl); background:linear-gradient(135deg, rgba(168,85,247,.14), rgba(20,20,30,.6)); border:1px solid rgba(168,85,247,.28); }
.lyrics-plan .lp-ic { font-size:26px; color:var(--p-light); margin-bottom:10px; }
.lyrics-plan h3 { font-family:var(--font-d); font-weight:800; font-size:clamp(24px,3vw,32px); }
.lyrics-plan p { color:var(--text-2); font-size:14.5px; margin:8px 0 14px; max-width:600px; }
.lyrics-plan .lp-cond { display:flex; flex-direction:column; gap:8px; }
.lyrics-plan .lp-cond span { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--text-2); }
.lyrics-plan .lp-cond i { color:var(--gold-2); margin-top:3px; }
.lyrics-plan .lp-price { text-align:center; }
.lyrics-plan .lp-price .amt { font-family:var(--font-d); font-weight:800; font-size:42px; letter-spacing:-1px; }
.lyrics-plan .lp-price .amt small { font-size:14px; color:var(--text-3); font-weight:500; }
@media (max-width:760px){ .lyrics-plan{ grid-template-columns:1fr; text-align:center; } .lyrics-plan .lp-cond span{ justify-content:center; } .lyrics-plan p{ margin-inline:auto; } }

/* copyright registration */
.copyright-box { max-width:1080px; margin:0 auto; border-radius:var(--r-xl); background:linear-gradient(180deg,#101019,#0b0b12); border:1px solid var(--border); padding:34px; }
.cr-top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.cr-brand { display:flex; align-items:center; gap:12px; }
.cr-brand .cr-logo { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.4); color:#5b9bff; font-size:18px; }
.cr-brand b { font-family:var(--font-d); font-size:18px; }
.cr-brand small { display:block; color:var(--text-3); font-size:11.5px; }
.cr-badge { font-size:11px; font-weight:700; letter-spacing:.6px; color:#5b9bff; padding:8px 14px; border-radius:var(--r-pill); border:1px solid rgba(59,130,246,.4); background:rgba(59,130,246,.1); }
.cr-body { display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:center; margin-top:26px; }
.cr-cert { position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:#0a0a12; cursor:pointer; max-height:300px; max-width:560px; margin:0 auto; }
.cr-cert img { width:100%; display:block; }
.cr-cert::after { content:''; position:absolute; left:0; right:0; bottom:0; height:130px; background:linear-gradient(to top,#0a0a12 8%,rgba(10,10,18,0)); pointer-events:none; }
.cr-cert-ov { position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; justify-content:center; gap:8px; padding-bottom:18px; font-size:13px; font-weight:600; color:#fff; background:linear-gradient(to top,rgba(6,6,11,.55),rgba(6,6,11,0) 55%); opacity:0; transition:.25s var(--ease); }
.cr-cert:hover .cr-cert-ov, .cr-cert:focus-visible .cr-cert-ov { opacity:1; }
.cr-cert-ov i { font-size:15px; }
.cr-cap { text-align:center; font-size:12px; color:var(--text-3); padding:10px; }

/* certificate lightbox */
.cert-modal { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:34px 24px; }
.cert-modal.open { display:flex; }
.cert-modal-bg { position:absolute; inset:0; background:rgba(0,0,0,.86); backdrop-filter:blur(6px); }
.cert-modal-inner { position:relative; z-index:1; max-width:540px; width:100%; max-height:92vh; overflow:auto; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.6); }
.cert-modal-inner img { width:100%; display:block; }
.cert-modal-inner::-webkit-scrollbar { width:8px; } .cert-modal-inner::-webkit-scrollbar-thumb { background:#ffffff30; border-radius:8px; }
.cert-modal-close { position:absolute; top:10px; right:10px; z-index:3; width:40px; height:40px; border-radius:50%; border:none; background:#fff; color:#111; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.4); transition:.2s; }
.cert-modal-close:hover { transform:scale(1.08); background:var(--p-light); color:#fff; }
/* mock certificate (placeholder until real image is added) */
.cert-mock { aspect-ratio:1/1.16; background:linear-gradient(180deg,#f4efe2,#e9e2d0); border:10px solid var(--gold); position:relative; padding:24px 22px; color:#3a3320; font-family:Georgia,serif; }
.cert-mock .cm-head { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #b9892a; padding-bottom:10px; }
.cert-mock .cm-head .cm-emb { width:34px; height:34px; border-radius:50%; background:radial-gradient(circle,#138808,#0a5c06); }
.cert-mock h4 { color:#9a2a2a; font-size:15px; text-align:center; margin:10px 0; }
.cert-mock .cm-line { height:9px; background:#cfc6ad; border-radius:3px; margin:9px 0; }
.cert-mock .cm-line.s { width:60%; } .cert-mock .cm-line.m{ width:85%; }
.cert-mock .cm-seal { position:absolute; bottom:20px; right:20px; width:58px; height:58px; border-radius:50%; border:2px dashed #b9892a; display:grid; place-items:center; font-size:9px; color:#9a2a2a; text-align:center; }
.cr-feats { display:flex; flex-direction:column; gap:12px; }
.cr-feat { display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); }
.cr-feat i { color:#5b9bff; font-size:18px; margin-top:2px; }
.cr-feat b { font-size:14.5px; } .cr-feat p { color:var(--text-3); font-size:12.5px; margin-top:2px; }
.cr-fee { padding:24px; border-radius:var(--r-lg); background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(168,85,247,.1)); border:1px solid rgba(59,130,246,.3); text-align:center; }
.cr-fee .cf-label { font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-3); }
.cr-fee .cf-amt { font-family:var(--font-d); font-weight:800; font-size:40px; }
.cr-fee .cf-amt small { font-size:14px; color:var(--text-3); font-weight:500; }
.cr-fee .cf-note { font-size:12px; color:var(--text-3); margin-top:8px; }
@media (max-width:820px){ .cr-body{ grid-template-columns:1fr; } }

/* youtube marketing rates */
.yt-bundles { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:30px; }
@media (max-width:860px){ .yt-bundles{ grid-template-columns:1fr; } }
.yt-rates { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border); }
.yt-rates table { width:100%; border-collapse:collapse; min-width:680px; }
.yt-rates th, .yt-rates td { padding:14px 16px; border-bottom:1px solid var(--border); font-size:13.5px; text-align:center; color:var(--text-2); }
.yt-rates th:first-child, .yt-rates td:first-child { text-align:left; color:var(--text); font-family:var(--font-d); font-weight:700; }
.yt-rates thead th { background:#0e0e17; color:var(--p-light); font-size:12px; letter-spacing:.5px; }

/* artists with us — waveform spotlight */
.spotlight-wave { position:relative; overflow:hidden; }
.sw-bars { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:120px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 2%; z-index:0; opacity:.55; pointer-events:none; }
.sw-bars span { flex:1; min-width:2px; max-width:6px; height:100%; border-radius:30px; transform-origin:center; background:linear-gradient(180deg,transparent,var(--p-light) 30%,var(--pink) 70%,transparent); animation:swEq 1.5s ease-in-out infinite; }
.sw-line { position:absolute; left:0; right:0; top:50%; height:2px; background:linear-gradient(90deg,transparent,rgba(168,85,247,.55),rgba(255,45,178,.55),transparent); z-index:0; animation:swLinePulse 3s ease-in-out infinite; }
@keyframes swEq { 0%,100%{ transform:scaleY(.14); } 50%{ transform:scaleY(1); } }
@keyframes swLinePulse { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .sw-bars span,.sw-line{ animation:none; } .sw-bars span{ transform:scaleY(.5); } }
.aw-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.aw-card { position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/4; border:1px solid var(--border-2);
  background:#10101a; display:flex; align-items:flex-end; transition:.35s var(--ease); box-shadow:0 16px 40px rgba(0,0,0,.5); }
.aw-card:hover { transform:translateY(-14px); border-color:rgba(168,85,247,.85);
  box-shadow:0 28px 60px rgba(0,0,0,.6), 0 0 0 1.5px rgba(168,85,247,.8), 0 0 26px rgba(168,85,247,.55), 0 0 50px rgba(255,45,178,.4); }
.aw-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.aw-card .aw-info { position:relative; z-index:2; width:100%; padding:16px; background:linear-gradient(180deg,transparent,rgba(6,6,11,.92)); }
.aw-card .aw-genre { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#fff; padding:4px 10px; border-radius:var(--r-pill); background:rgba(0,0,0,.5); border:1px solid var(--border-2); backdrop-filter:blur(6px); margin-bottom:8px; }
.aw-card .aw-name { font-family:var(--font-d); font-weight:700; font-size:16px; line-height:1.15; }
.aw-card .aw-on { font-size:12px; color:var(--p-light); margin-top:2px; }
@media (max-width:1000px){ .aw-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .aw-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   MUSIC PUBLISHING PAGE
   ============================================================ */
.value-grid.four { grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .value-grid.four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .value-grid.four{ grid-template-columns:1fr; } }

/* image hero */
.pub-hero { position:relative; overflow:hidden; }
.pub-hero::before { content:''; position:absolute; inset:0; background:url('img/publishing/pub-mic.jpg') center/cover no-repeat; opacity:.16; z-index:0; transform:scale(1.05); }
.pub-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,6,11,.5), var(--bg) 92%); z-index:0; }
.pub-hero .container { position:relative; z-index:1; }
.pub-eyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--p-light); background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.3); padding:6px 14px; border-radius:var(--r-pill); margin-bottom:18px; }

/* royalty card icon chip */
.value-card .vic.chip { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-size:24px; margin:0 auto 14px; background:linear-gradient(140deg, rgba(168,85,247,.22), rgba(255,45,178,.16)); border:1px solid var(--border-2); color:var(--p-light); }

/* parallax banner */
.pub-banner { position:relative; border-radius:26px; overflow:hidden; min-height:320px; display:grid; place-items:center; text-align:center; padding:64px 30px; border:1px solid var(--border); }
.pub-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.06); transition:transform 8s ease; }
.pub-banner:hover img { transform:scale(1.12); }
.pub-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(20,8,40,.85), rgba(6,6,11,.78)); z-index:1; }
.pub-banner .pb-inner { position:relative; z-index:2; max-width:780px; }
.pub-banner .pb-inner h2 { font-family:var(--font-d); font-size:clamp(24px,3.4vw,40px); letter-spacing:-.5px; line-height:1.15; margin-bottom:14px; }
.pub-banner .pb-inner p { color:var(--text-2); font-size:16px; margin-bottom:24px; }

/* ============================================================
   RIGHTS MANAGEMENT PAGE
   ============================================================ */
.rm-hero { position:relative; overflow:hidden; }
.rm-hero::before { content:''; position:absolute; inset:0; background:url('img/rights/rm-hero.jpg') center/cover no-repeat; opacity:.14; z-index:0; transform:scale(1.05); }
.rm-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,6,11,.55), var(--bg) 92%); z-index:0; }
.rm-hero .container { position:relative; z-index:1; }

/* three pillars */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pillar { position:relative; border-radius:var(--r-lg); border:1px solid var(--border); background:linear-gradient(180deg,#101019,#0b0b12); padding:32px 26px; overflow:hidden; transition:.35s var(--ease); }
.pillar:hover { transform:translateY(-6px); border-color:rgba(168,85,247,.5); box-shadow:0 22px 50px rgba(0,0,0,.5); }
.pillar::before { content:''; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--grad); opacity:.85; }
.pillar .pic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:22px; margin-bottom:16px; background:linear-gradient(140deg, rgba(168,85,247,.22), rgba(255,45,178,.16)); border:1px solid var(--border-2); color:var(--p-light); }
.pillar h3 { font-family:var(--font-d); font-size:19px; margin-bottom:8px; }
.pillar p { color:var(--text-2); font-size:14.5px; }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr; } }

/* ============================================================
   VERIFY ARTIST PAGE
   ============================================================ */
.va-hero { position:relative; overflow:hidden; }
.va-hero::before { content:''; position:absolute; inset:0; background:url('img/verify/va-hero.jpg') center/cover no-repeat; opacity:.15; z-index:0; transform:scale(1.05); }
.va-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,6,11,.55), var(--bg) 92%); z-index:0; }
.va-hero .container { position:relative; z-index:1; }

/* method cards: numbered */
.method-card { position:relative; counter-increment:vmethod; }
.method-card .vic.chip { position:relative; }
.method-card .mnum { position:absolute; top:18px; right:18px; font-family:var(--font-d); font-weight:800; font-size:30px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(168,85,247,.4); opacity:.7; }
.va-note { max-width:760px; margin:22px auto 0; text-align:center; font-size:13.5px; color:var(--text-3); background:rgba(245,179,36,.08); border:1px solid rgba(245,179,36,.25); border-radius:14px; padding:14px 20px; }
.va-note i { color:#f5b324; margin-right:6px; }

/* ============================================================
   USER GUIDELINES — image hero + do/don't comparison
   ============================================================ */
.ug-hero { position:relative; overflow:hidden; }
.ug-hero::before { content:''; position:absolute; inset:0; background:url('img/guidelines/ug-hero.jpg') center/cover no-repeat; opacity:.18; z-index:0; transform:scale(1.05); }
.ug-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,6,11,.5), var(--bg) 92%); z-index:0; }
.ug-hero .container { position:relative; z-index:1; }

/* danger-tinted value cards (zero-tolerance / not allowed) */
.value-card.guard .vic.chip { background:rgba(255,73,110,.14); color:#ff6b8a; }
.value-card.guard:hover { border-color:rgba(255,73,110,.4); }

/* do / don't comparison */
.dodont { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dd-card { border-radius:var(--r-lg); border:1px solid var(--border); padding:28px; background:linear-gradient(180deg,#13131f,#0e0e17); }
.dd-card.do { border-color:rgba(52,211,153,.26); background:linear-gradient(180deg,rgba(52,211,153,.06),#0e0e17); }
.dd-card.dont { border-color:rgba(255,73,110,.24); background:linear-gradient(180deg,rgba(255,73,110,.06),#0e0e17); }
.dd-head { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.dd-head .di { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.dd-card.do .dd-head .di { background:rgba(52,211,153,.16); color:#34d399; }
.dd-card.dont .dd-head .di { background:rgba(255,73,110,.16); color:#ff6b8a; }
.dd-head h3 { font-family:var(--font-d); font-size:19px; }
.dd-list { display:flex; flex-direction:column; gap:14px; }
.dd-list li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.55; color:var(--text-2); }
.dd-list li i { flex-shrink:0; margin-top:4px; font-size:12px; }
.dd-card.do .dd-list li i { color:#34d399; }
.dd-card.dont .dd-list li i { color:#ff6b8a; }
@media (max-width:760px){ .dodont{ grid-template-columns:1fr; } }

/* ============================================================
   ABOUT — interactive "Our Journey" media
   ============================================================ */
.journey-media { position:relative; perspective:1100px; }
.jm-frame { position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--border);
  aspect-ratio:4/3; transform-style:preserve-3d; transition:transform .18s ease, box-shadow .35s ease;
  box-shadow:0 24px 60px rgba(0,0,0,.5); will-change:transform; }
.journey-media:hover .jm-frame { box-shadow:0 34px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(168,85,247,.45); }
.jm-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.jm-frame::after { content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:0;
  transition:opacity .3s; background:radial-gradient(320px 220px at var(--mx,50%) var(--my,40%), rgba(168,85,247,.35), transparent 62%); }
.journey-media:hover .jm-frame::after { opacity:1; }
.jm-shine { position:absolute; inset:0; pointer-events:none; transform:translateX(-120%);
  background:linear-gradient(120deg, transparent 32%, rgba(255,255,255,.16) 50%, transparent 68%); }
.journey-media:hover .jm-shine { animation:jmShine 1.1s ease; }
@keyframes jmShine { to { transform:translateX(120%); } }

.jm-badge { position:absolute; z-index:3; border-radius:16px; background:rgba(14,14,22,.72); backdrop-filter:blur(12px);
  border:1px solid var(--border-2); box-shadow:0 14px 34px rgba(0,0,0,.45); transition:transform .18s ease; }
.jm-badge .jb-inner { display:flex; align-items:center; gap:10px; padding:12px 16px; }
.jm-badge .jb-num { font-family:var(--font-d); font-weight:800; font-size:21px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.jm-badge .jb-lbl { font-size:10.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.6px; }
.jm-badge .jb-txt { display:flex; flex-direction:column; gap:3px; }
.jm-badge i { color:var(--p-light); font-size:19px; }
.jm-badge-1 { top:20px; left:-24px; }
.jm-badge-1 .jb-inner { flex-direction:column; align-items:flex-start; gap:2px; }
.jm-badge-2 { bottom:26px; right:-22px; }
/* float lives on inner so JS parallax (on .jm-badge) doesn't fight it */
.jm-badge-1 .jb-float { animation:jmFloat 5s ease-in-out infinite; }
.jm-badge-2 .jb-float { animation:jmFloat 5s ease-in-out infinite 1.3s; }
@keyframes jmFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (max-width:1000px){ .jm-badge-1{ left:10px; } .jm-badge-2{ right:10px; } }
@media (prefers-reduced-motion: reduce){ .jm-badge-1 .jb-float,.jm-badge-2 .jb-float{ animation:none; } }

/* ============================================================
   PARTNERS PAGE — categorized store grids
   ============================================================ */
.store-cat { margin-top:44px; }
.store-cat:first-of-type { margin-top:30px; }
.store-cat-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.store-cat-head h3 { font-family:var(--font-d); font-weight:700; font-size:18px; white-space:nowrap; }
.store-cat-head h3 i { color:var(--p-light); margin-right:8px; }
.store-cat-head .scline { flex:1; height:1px; background:linear-gradient(90deg,var(--border-2),transparent); }
.store-cat-head .scnum { font-size:12px; color:var(--text-3); white-space:nowrap; }
.store-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:13px; }
.store-tile { display:flex; align-items:center; justify-content:center; gap:11px; padding:15px 16px; border-radius:14px;
  border:1px solid var(--border); background:linear-gradient(180deg,#101019,#0b0b12); transition:.3s var(--ease);
  min-height:62px; text-align:left; }
.store-tile:hover { transform:translateY(-4px); border-color:rgba(168,85,247,.5);
  box-shadow:0 14px 32px rgba(0,0,0,.45); background:linear-gradient(180deg,#15151f,#0c0c14); }
.store-tile img { width:26px; height:26px; object-fit:contain; flex-shrink:0; transition:.3s; }
.store-tile i { width:26px; font-size:22px; text-align:center; flex-shrink:0; }
.store-tile:hover img { transform:scale(1.08); }
.store-tile b { font-family:var(--font); font-weight:600; font-size:13.5px; color:var(--text-2); letter-spacing:.2px; transition:.3s; line-height:1.2; }
.store-tile:hover b { color:#fff; }
@media (max-width:1000px){ .store-grid{ grid-template-columns:repeat(3,1fr); } }
/* Mobile: small, dense icon-only circles (~7 per row) + tight spacing, Swalay-style */
@media (max-width:680px){
  .store-cat{ margin-top:30px; }
  .store-cat:first-of-type{ margin-top:20px; }
  .store-cat-head{ margin-bottom:14px; }
  .store-cat-head h3{ font-size:15px; }
  /* fixed-size circles centered in each cell — no aspect-ratio/stretch surprises */
  .store-grid{ grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:13px; justify-items:center; align-items:center; }
  .store-tile{ width:38px; height:38px; min-height:0; align-self:center; flex-direction:column; padding:0; gap:0; border-radius:50%; }
  .store-tile b{ display:none; }                       /* icons only, like Swalay */
  .store-tile img, .store-tile i{ width:19px; height:19px; font-size:17px; }
}

/* ============================================================
   PARTNERS — community, world map, work-with
   ============================================================ */
/* work-with: center the small set */
.workwith-grid { grid-template-columns:repeat(4,1fr); max-width:780px; margin:0 auto; }
@media (max-width:680px){ .workwith-grid{ grid-template-columns:repeat(2,1fr); } }

/* community feature cards */
.comm-list { display:flex; flex-direction:column; gap:16px; max-width:780px; margin:34px auto 0; }
.comm-card { position:relative; padding:20px 30px 20px 64px; border-radius:16px; border:1px solid var(--border);
  background:linear-gradient(180deg,#101019,#0b0b12); text-align:center; transition:.3s var(--ease); }
.comm-card:hover { border-color:rgba(168,85,247,.5); transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.4); }
.comm-card .cc-ic { position:absolute; left:22px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%;
  background:rgba(168,85,247,.18); color:var(--p-light); display:grid; place-items:center; font-size:13px; }
.comm-card h3 { font-family:var(--font-d); font-weight:700; font-size:17px; margin-bottom:4px; }
.comm-card p { color:var(--text-2); font-size:14px; }

/* artist collage (arched fan + hover popup) */
.comm-collage { position:relative; display:flex; justify-content:center; align-items:flex-end; margin-top:50px; min-height:340px; }
.comm-fan { position:relative; z-index:2; display:flex; justify-content:center; align-items:flex-end; }
.comm-collage::before { content:''; position:absolute; bottom:30px; left:50%; transform:translateX(-50%); width:min(820px,92%); height:240px;
  background:radial-gradient(ellipse at center, rgba(168,85,247,.22), transparent 70%); filter:blur(10px); z-index:0; }
/* animated stage backdrop: soft blobs + moving concentric arcs */
.comm-bg { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.comm-bg .cb-blob { position:absolute; border-radius:50%; filter:blur(36px); }
.comm-bg .b1 { width:340px; height:300px; left:22%; bottom:18px; background:radial-gradient(circle, rgba(60,30,95,.7), transparent 70%); }
.comm-bg .b2 { width:400px; height:340px; left:50%; bottom:0; transform:translateX(-50%); background:radial-gradient(circle, rgba(42,28,82,.85), transparent 70%); }
.comm-bg .b3 { width:320px; height:280px; right:20%; bottom:22px; background:radial-gradient(circle, rgba(72,24,78,.62), transparent 70%); }
.comm-bg .cb-arc { position:absolute; left:50%; top:60%; width:760px; height:760px; border:1.5px solid rgba(168,85,247,.45); border-radius:50%;
  transform:translate(-50%,-50%) scale(.28); opacity:0; animation:cbRipple 6s linear infinite; }
.comm-bg .a1 { animation-delay:0s; }
.comm-bg .a2 { animation-delay:2s; border-color:rgba(168,85,247,.4); }
.comm-bg .a3 { animation-delay:4s; border-color:rgba(255,45,178,.34); }
@keyframes cbRipple {
  0%   { transform:translate(-50%,-50%) scale(.28); opacity:0; }
  12%  { opacity:.9; }
  100% { transform:translate(-50%,-50%) scale(1.12); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .comm-bg .cb-arc{ animation:none; opacity:.4; transform:translate(-50%,-50%) scale(.8); } }
.comm-artist { position:relative; width:170px; margin:0 -16px; cursor:pointer; z-index:1; transition:transform .4s var(--ease); }
.comm-artist img { width:100%; height:300px; object-fit:contain; object-position:bottom; display:block;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.55)); transition:.4s var(--ease);
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.4) 80%, transparent 96%);
  mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.4) 80%, transparent 96%); }
.comm-artist:nth-child(1){ transform:translateY(46px); z-index:1; }
.comm-artist:nth-child(2){ transform:translateY(16px); z-index:2; }
.comm-artist:nth-child(3){ transform:translateY(-6px); z-index:3; }
.comm-artist:nth-child(4){ transform:translateY(-6px); z-index:3; }
.comm-artist:nth-child(5){ transform:translateY(-6px); z-index:2; }
/* Moni's cutout is a head-shoulders bust (others are full-body) — lift & enlarge
   it a touch so her face lines up with the rest instead of sitting low */
.comm-artist:nth-child(5) img{ transform:scale(1.28); transform-origin:center bottom; }
.comm-artist:nth-child(6){ transform:translateY(46px); z-index:1; }
.comm-artist:hover { transform:translateY(-14px) scale(1.05); z-index:20; }
.comm-pop { position:absolute; left:50%; top:-8px; transform:translate(-50%,-6px); opacity:0; pointer-events:none;
  background:rgba(14,14,22,.92); backdrop-filter:blur(10px); border:1px solid var(--border-2); border-radius:12px;
  padding:9px 14px; white-space:nowrap; box-shadow:0 14px 30px rgba(0,0,0,.5); transition:.3s var(--ease); z-index:30; }
.comm-artist:hover .comm-pop { opacity:1; transform:translate(-50%,-16px); }
.comm-pop .cp-name { font-family:var(--font-d); font-weight:700; font-size:14px; }
.comm-pop .cp-genre { font-size:11.5px; color:var(--p-light); }
.comm-pop::after { content:''; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%) rotate(45deg); width:10px; height:10px;
  background:rgba(14,14,22,.92); border-right:1px solid var(--border-2); border-bottom:1px solid var(--border-2); }
@media (max-width:760px){
  /* No scroll — show ALL artists on screen as a clean 3-per-row grid (2 rows) */
  .comm-collage{ overflow:visible; justify-content:center; align-items:flex-end; min-height:0; padding:14px 4px 0; }
  .comm-fan{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 2px; width:100%; align-items:end; }
  .comm-artist{ width:auto; margin:0; }
  .comm-artist img{ width:100%; height:auto; max-height:200px; }
  .comm-artist:nth-child(5) img{ transform:none; }   /* undo the desktop-only enlarge so it doesn't overflow the cell */
  /* remove the fanned vertical offsets so nothing is clipped */
  .comm-artist, .comm-artist:nth-child(1), .comm-artist:nth-child(2), .comm-artist:nth-child(3),
  .comm-artist:nth-child(4), .comm-artist:nth-child(5), .comm-artist:nth-child(6){ transform:none; }
  .comm-artist:hover{ transform:translateY(-6px) scale(1.03); }
}

/* world map */
.world-wrap { position:relative; max-width:1040px; margin:30px auto 0; }
.world-map { width:100%; display:block; opacity:.55; }
.world-lines { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.world-lines .wl { fill:none; stroke:rgba(168,85,247,.55); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:5 7; vector-effect:non-scaling-stroke; animation:wlFlow 1.3s linear infinite; }
@keyframes wlFlow { to { stroke-dashoffset:-24; } }
@media (prefers-reduced-motion: reduce){ .world-lines .wl{ animation:none; } }
.world-pt { position:absolute; transform:translate(-50%,-50%); z-index:2; }
.world-pt .wp-dot { display:block; width:9px; height:9px; border-radius:50%; background:var(--p-light); box-shadow:0 0 10px 2px rgba(168,85,247,.6); margin:0 auto; }
.world-pt .wp-lbl { font-size:9.5px; letter-spacing:.5px; color:var(--text-2); margin-top:4px; text-transform:uppercase; }
.world-india { position:absolute; left:69%; top:50%; transform:translate(-50%,-50%); z-index:3; text-align:center; }
.world-india .wi-dot { width:16px; height:16px; border-radius:50%; background:var(--p-light); box-shadow:0 0 26px 8px rgba(168,85,247,.8); margin:0 auto; position:relative; z-index:2; }
.world-india .wi-ring { position:absolute; left:50%; top:8px; width:16px; height:16px; border:2px solid var(--p-light); border-radius:50%;
  transform:translate(-50%,-50%); animation:wiPulse 2.8s ease-out infinite; }
.world-india .wi-ring.d2 { animation-delay:1.4s; }
.world-india .wi-lbl { font-family:var(--font-d); font-weight:700; font-size:12px; letter-spacing:1px; color:#fff; margin-top:8px; }
@keyframes wiPulse { 0%{ width:16px; height:16px; opacity:.8; } 100%{ width:130px; height:130px; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .world-india .wi-ring{ animation:none; } }
@media (max-width:640px){ .world-pt .wp-lbl{ display:none; } }

/* partners contact form 2-col rows */
.contact-form .form-2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form .form-2col .row { margin-bottom:0; }
@media (max-width:560px){ .contact-form .form-2col { grid-template-columns:1fr; } }

/* footer contact (email/phone from CMS settings) */
.footer-contact{display:flex;flex-direction:column;gap:7px;margin:14px 0 6px}
.footer-contact a{color:var(--text-2);font-size:13.5px;display:inline-flex;align-items:center;gap:9px;transition:.2s}
.footer-contact a:hover{color:#fff}
.footer-contact i{color:var(--p-light);width:15px;text-align:center}

/* ============================================================
   MOBILE RESPONSIVENESS FIXES
   ============================================================ */

/* Home pricing preview (base .price-grid = 3-col) — stack on small screens */
@media (max-width:1000px){
  .price-grid{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; }
}

/* Mobile footer — brand full-width on top, link columns 2-up, tidy spacing */
@media (max-width:640px){
  .footer{ padding:52px 0 28px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px 20px; margin-bottom:34px; text-align:center; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-brand p{ max-width:none; }
  /* center-aligned mobile footer (Swalay-style) */
  .footer-brand .nav-logo{ justify-content:center; }
  .footer-contact{ align-items:center; }
  .footer-socials{ justify-content:center; }
  .footer-col a:hover{ padding-left:0; }   /* no left shift when centered */
  .footer-bottom{ justify-content:center; text-align:center; }
}
@media (max-width:340px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* Compare-plans & Rate-Card tables — keep the first (label) column pinned while
   the plan/rate columns scroll, so nothing looks "cut off". */
@media (max-width:640px){
  .cmp{ min-width:540px; }
  .cmp th, .cmp td{ padding:12px 12px; font-size:13px; }
  .cmp thead th{ padding:16px 12px; }
  .cmp .ph-name{ font-size:15px; }
  .cmp th:first-child, .cmp td:first-child{ position:sticky; left:0; z-index:2; background:#101019; box-shadow:1px 0 0 var(--border); }
  .cmp tr.cat td:first-child{ background:#15111f; }

  .yt-rates table{ min-width:500px; }
  .yt-rates th, .yt-rates td{ padding:11px 12px; font-size:12.5px; }
  .yt-rates th:first-child, .yt-rates td:first-child{ position:sticky; left:0; z-index:2; background:#0e0e17; box-shadow:1px 0 0 var(--border); }
}

/* (Partners store grid mobile styling lives with the .store-grid rules above.) */

/* ============================================================
   SIGNATURE CURSOR — desktop / fine-pointer devices only
   Spinning brand-gradient halo + leading glow-dot + ambient glow.
   Expands into a halo over buttons, pinches on click, and disappears
   to a normal text caret while typing.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  html.cursor-on, html.cursor-on *{ cursor:none !important; }
  html.cursor-on input, html.cursor-on textarea, html.cursor-on select,
  html.cursor-on [contenteditable="true"]{ cursor:text !important; }
  /* buttons/links keep the native hand pointer (Swalay-style) */
  html.cursor-on a, html.cursor-on button, html.cursor-on [role="button"], html.cursor-on label,
  html.cursor-on summary, html.cursor-on .btn-primary, html.cursor-on .btn-outline,
  html.cursor-on .bill-toggle button{ cursor:pointer !important; }
}
.tt-cur-glow, .tt-cur-dot, .tt-cur-ring-wrap{
  position:fixed; left:0; top:0; pointer-events:none; will-change:transform;
  z-index:100000; opacity:0; transition:opacity .3s;
}
.tt-cur-glow{ z-index:99998; }
html.cursor-ready .tt-cur-glow, html.cursor-ready .tt-cur-dot, html.cursor-ready .tt-cur-ring-wrap{ opacity:1; }
html.cur-text .tt-cur-glow, html.cur-text .tt-cur-dot, html.cur-text .tt-cur-ring-wrap{ opacity:0; }

.tt-cur-glow span{ display:block; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,.32), transparent 68%); filter:blur(5px); transition:background .3s; }
.tt-cur-dot span{ display:block; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:#fff; box-shadow:0 0 10px 1px rgba(255,45,178,.9), 0 0 4px rgba(255,255,255,.9); transition:transform .2s; }
.tt-cur-ring{ display:block; width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%;
  background:conic-gradient(from 0deg, #a855f7, #ff2db2, #f5b324, #a855f7);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation:ttCurSpin 3.4s linear infinite;
  transition:width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s; }
@keyframes ttCurSpin{ to{ transform:rotate(360deg); } }

/* over a button/link: the native hand pointer shows (see cursor:pointer above);
   the halo softens into a filled highlight disc, dot & ambient glow tuck away */
html.cur-hover .tt-cur-ring{ width:44px; height:44px; margin:-22px 0 0 -22px;
  -webkit-mask:none; mask:none; animation:none;
  background:radial-gradient(circle, rgba(168,85,247,.26), rgba(255,45,178,.13) 55%, transparent 74%); }
html.cur-hover .tt-cur-dot span{ transform:scale(0); }
html.cur-hover .tt-cur-glow{ opacity:0; }
/* pinch on click */
html.cur-down .tt-cur-ring{ width:34px; height:34px; margin:-17px 0 0 -17px; }
@media (prefers-reduced-motion: reduce){ .tt-cur-ring{ animation:none; } }