* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font, Inter, system-ui, sans-serif); background: var(--bg); color: var(--text); overflow-x: hidden; }
a { color: var(--link); text-decoration: none; }
.theme-dark { background:
radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--primary), transparent 62%), transparent 28%),
radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--secondary), transparent 66%), transparent 30%),
linear-gradient(135deg, #050508 0%, #101018 46%, #06070a 100%);
}
.theme-dark::before {
content: "";
position: fixed;
inset: -20%;
z-index: -1;
pointer-events: none;
opacity: .38;
background:
radial-gradient(circle at 24% 34%, color-mix(in srgb, var(--primary), transparent 56%), transparent 18%),
radial-gradient(circle at 76% 62%, color-mix(in srgb, var(--accent), transparent 72%), transparent 20%),
radial-gradient(circle at 50% 92%, color-mix(in srgb, var(--secondary), transparent 64%), transparent 24%);
filter: blur(28px);
animation: neonFloat 12s ease-in-out infinite alternate;
}
.theme-dark main, .theme-dark .site-nav, .theme-dark .site-footer { position: relative; z-index: 1; }
.site-nav { background: color-mix(in srgb, var(--header), transparent 12%); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.navbar-brand { color: var(--text); display: flex; align-items: center; gap: 10px; }
.navbar-brand img { width: 38px; height: 38px; object-fit: contain; }
.nav-link { color: var(--text); opacity: .88; }
.nav-link:hover { color: var(--link); }
.navbar-toggler { border-color: rgba(255,255,255,.3); filter: invert(1); }
.btn-brand { background: linear-gradient(135deg, var(--button), var(--hover)); color: #fff; border: 0; border-radius: var(--radius); font-weight: 800; box-shadow: 0 14px 34px color-mix(in srgb, var(--button), transparent 62%); }
.btn-brand:hover { background: linear-gradient(135deg, var(--hover), var(--button)); color: #fff; transform: translateY(-1px); }
.hero { min-height: 86vh; display: flex; align-items: center; background:
linear-gradient(90deg, rgba(5,5,8,.92), rgba(5,5,8,.50)),
radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--primary), transparent 48%), transparent 24%),
radial-gradient(circle at 88% 72%, color-mix(in srgb, var(--secondary), transparent 56%), transparent 28%);
background-size: cover; background-position: center; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: 6%; top: 18%; width: min(360px, 42vw); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 90deg, var(--primary), var(--accent), var(--secondary), var(--primary)); filter: blur(18px); opacity: .28; animation: slowSpin 16s linear infinite; }
.hero-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; mix-blend-mode: screen; pointer-events: none; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,4,8,.94) 0%, rgba(4,4,8,.72) 44%, rgba(4,4,8,.30) 100%); z-index: 1; pointer-events: none; }
.hero .container { position: relative; z-index: 2; }
.hero-copy { width: min(760px, 100%); padding: 96px 0; position: relative; z-index: 2; }
.eyebrow, .section-head span { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.hero h1 { font-size: clamp(42px, 7vw, 92px); line-height: .95; margin: 14px 0 22px; font-weight: 900; letter-spacing: 0; }
.lead { color: color-mix(in srgb, var(--text), transparent 22%); max-width: 680px; }
.social-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.social-row a { border: 1px solid rgba(255,255,255,.16); padding: 9px 13px; border-radius: var(--radius); color: var(--text); background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.social-row a:hover { border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.section { padding: 82px 0; }
.section-alt { background: color-mix(in srgb, var(--card), transparent 22%); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.section-head { margin-bottom: 30px; max-width: 720px; }
.section-head h2, .split h2, .contact-layout h2 { font-size: clamp(30px, 4vw, 52px); margin-top: 8px; font-weight: 850; letter-spacing: 0; }
.grid-3, .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.info-card, .price-card, .contact-form { background: linear-gradient(180deg, color-mix(in srgb, var(--card), #fff 4%), var(--card)); border: 1px solid rgba(255,255,255,.11); border-radius: var(--radius); padding: 26px; box-shadow: 0 22px 60px rgba(0,0,0,.26); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.info-card:hover, .price-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--primary), #fff 18%); box-shadow: 0 28px 70px rgba(0,0,0,.34); }
.info-card h3 { font-size: 22px; }
.info-card p, .price-card p, .split p, .contact-layout p { color: color-mix(in srgb, var(--text), transparent 22%); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.testimonial-card { position: relative; overflow: hidden; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--card), #fff 5%), color-mix(in srgb, var(--card), #000 10%)); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 28px; box-shadow: 0 24px 70px rgba(0,0,0,.30); }
.testimonial-card::before { content: "\201C"; position: absolute; right: 22px; top: -22px; font-size: 132px; line-height: 1; font-weight: 900; color: color-mix(in srgb, var(--primary), transparent 76%); pointer-events: none; }
.testimonial-card::after { content: ""; position: absolute; inset: auto -30% -48% 20%; height: 170px; background: radial-gradient(circle, color-mix(in srgb, var(--secondary), transparent 64%), transparent 68%); filter: blur(22px); pointer-events: none; }
.testimonial-stars { display: flex; gap: 4px; color: rgba(255,255,255,.22); font-size: 18px; position: relative; z-index: 1; }
.testimonial-stars .is-filled { color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent), transparent 55%); }
.testimonial-quote { color: color-mix(in srgb, var(--text), transparent 13%); font-size: 18px; line-height: 1.65; margin: 0; position: relative; z-index: 1; }
.testimonial-person { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.testimonial-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-weight: 900; box-shadow: 0 10px 30px color-mix(in srgb, var(--primary), transparent 68%); }
.testimonial-person strong { display: block; color: var(--text); }
.testimonial-person small { display: block; color: color-mix(in srgb, var(--text), transparent 42%); margin-top: 2px; }
.icon { width: 42px; height: 42px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border-radius: var(--radius); font-weight: 900; margin-bottom: 16px; box-shadow: 0 10px 28px color-mix(in srgb, var(--primary), transparent 62%); }
.price-card.highlight { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 62%), 0 24px 70px rgba(0,0,0,.36); }
.plan-name { color: var(--accent) !important; text-transform: uppercase; font-weight: 800; }
.price-card h3 { font-size: 34px; font-weight: 900; }
.price-card ul { padding-left: 0; list-style: none; margin: 22px 0; display: grid; gap: 10px; }
.price-card li::before { content: "\2713"; color: var(--accent); margin-right: 10px; }
.split, .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center; }
.section-image { width: 100%; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); }
.narrow { max-width: 860px; }
.accordion-item, .accordion-button { background: var(--card); color: var(--text); border-color: rgba(255,255,255,.1); }
.accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--primary), var(--card) 72%); color: #fff; }
.form-control { border-radius: var(--radius); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--text); }
.form-control::placeholder { color: rgba(255,255,255,.58); }
.hidden-field { position: absolute; left: -10000px; }
.site-footer { padding: 28px 0; background: var(--footer); border-top: 1px solid rgba(255,255,255,.08); color: color-mix(in srgb, var(--text), transparent 22%); }
.theme-light { --bg: #f7f7fb; --card: #fff; --text: #101014; --header: #fff; --footer: #101014; }
.theme-light .btn-outline-light { color: #101014; border-color: #101014; }
.theme-light .navbar-toggler { filter: none; }
.admin-login { min-height: 100vh; display: grid; place-items: center; background: #0b0b10; color: #fff; padding: 20px; }
.login-card { width: min(430px, 100%); background: #15151d; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 28px; display: grid; gap: 14px; }
.login-card h1 { font-size: 28px; }
.admin-body { background: #f4f6fb; color: #15151d; display: grid; grid-template-columns: 292px minmax(0, 1fr); min-height: 100vh; }
.admin-side { background: #10131c; color: #fff; padding: 20px 18px; position: sticky; top: 0; height: 100vh; overflow: auto; border-right: 1px solid rgba(255,255,255,.08); }
.admin-brand { display: flex; align-items: center; gap: 12px; padding: 8px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 16px; }
.admin-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: #e43f5a; font-weight: 900; color: #fff; }
.admin-side h1 { font-size: 20px; margin: 0; line-height: 1.1; }
.admin-side small { color: rgba(255,255,255,.54); }
.admin-nav { display: grid; gap: 16px; }
.admin-nav-group p { color: rgba(255,255,255,.42); font-size: 11px; font-weight: 800; margin: 0 0 7px; padding: 0 10px; text-transform: uppercase; letter-spacing: 0; }
.admin-side a { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.76); padding: 10px 12px; border-radius: 8px; margin-bottom: 4px; font-size: 14px; transition: background .18s ease, color .18s ease, transform .18s ease; }
.admin-side a.active, .admin-side a:hover { background: #e43f5a; color: #fff; transform: translateX(2px); }
.admin-side-actions { border-top: 1px solid rgba(255,255,255,.08); margin-top: 18px; padding-top: 14px; }
.admin-side-actions a { background: rgba(255,255,255,.06); }
.admin-main { padding: 28px; overflow-x: auto; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid #e6e9f2; border-radius: 8px; padding: 18px 20px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(15,23,42,.04); }
.admin-topbar span { color: #667085; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.admin-topbar h2 { margin: 3px 0 0; font-size: 26px; font-weight: 850; letter-spacing: 0; }
.admin-top-actions { display: flex; align-items: center; gap: 10px; }
.admin-menu-btn { display: none; border: 1px solid #d7dbe7; background: #fff; color: #11131a; min-height: 34px; padding: 6px 12px; border-radius: 8px; font-weight: 800; }
.admin-backdrop { display: none; }
.admin-main > h2 { font-size: 20px; margin: 20px 0 8px; }
.admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 22px 0; }
.admin-card { background: #fff; border: 1px solid #e6e9f2; border-radius: 8px; padding: 22px; display: grid; gap: 6px; box-shadow: 0 10px 30px rgba(15,23,42,.04); }
.admin-card strong { font-size: 34px; line-height: 1; }
.admin-card span { color: #667085; font-weight: 700; }
.admin-form, .inline-editor { background: #fff; border: 1px solid #e6e9f2; border-radius: 8px; padding: 20px; margin: 18px 0; display: grid; gap: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.04); }
.form-grid, .inline-editor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.admin-body .form-label, .admin-body label { color: #344054; font-size: 13px; font-weight: 700; }
.admin-body .form-control { background: #fff; color: #11131a; border-color: #d7dbe7; min-height: 42px; }
.admin-body textarea.form-control { min-height: 110px; }
.admin-body .form-control:focus { border-color: #e43f5a; box-shadow: 0 0 0 .2rem rgba(228,63,90,.12); }
.admin-table { background: #fff; border: 1px solid #e6e9f2; border-radius: 8px; overflow: hidden; min-width: 760px; box-shadow: 0 10px 30px rgba(15,23,42,.04); }
.admin-table th { color: #667085; font-size: 12px; text-transform: uppercase; background: #f8fafc; }
.admin-table td, .admin-table th { padding: 13px 14px; vertical-align: middle; }
.table-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.table-actions a { font-weight: 800; }
.checks { display: flex; gap: 18px; flex-wrap: wrap; }
.muted { color: #667085; }
@keyframes neonFloat {
0% { transform: translate3d(-2%, -1%, 0) scale(1); }
100% { transform: translate3d(2%, 2%, 0) scale(1.08); }
}
@keyframes slowSpin {
to { transform: rotate(360deg); }
}
@media (max-width: 992px) {
.grid-3, .pricing-grid, .testimonial-grid, .split, .contact-layout, .admin-grid, .form-grid, .inline-editor { grid-template-columns: 1fr; }
.admin-body { grid-template-columns: 1fr; }
.admin-side { position: fixed; left: 0; top: 0; z-index: 40; width: min(320px, 86vw); height: 100vh; padding: 16px; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 24px 0 70px rgba(0,0,0,.32); }
.admin-sidebar-open .admin-side { transform: translateX(0); }
.admin-sidebar-open { overflow: hidden; }
.admin-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(5,8,16,.58); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.admin-sidebar-open .admin-backdrop { opacity: 1; pointer-events: auto; }
.admin-brand { margin-bottom: 12px; padding-bottom: 12px; }
.admin-nav { display: grid; gap: 14px; overflow: visible; padding-bottom: 4px; }
.admin-nav-group { min-width: 0; }
.admin-side-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; }
.admin-side-actions a { flex: 1; justify-content: center; }
.admin-main { padding: 16px; }
.admin-topbar { align-items: flex-start; padding: 16px; position: sticky; top: 0; z-index: 20; }
.admin-topbar h2 { font-size: 22px; }
.admin-top-actions { align-items: flex-end; flex-direction: column; }
.admin-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
.admin-table { min-width: 640px; }
.section { padding: 60px 0; }
.hero { min-height: auto; }
.hero-motion { opacity: .64; }
}
/* Acid-noir public website */
.music-site { --lime:#7cda24; --ink:#050605; --panel:#111411; --muted:#a2a99f; margin:0; background:var(--ink); color:#f4f7f2; font-family:'Space Grotesk',sans-serif; overflow-x:hidden; }
.music-site * { box-sizing:border-box; }
.music-site a { color:inherit; text-decoration:none; }
.music-site .container { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.noise { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.065; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation:grain .25s steps(2) infinite; }
.music-site .site-nav { height:92px; padding:0 max(24px,calc((100vw - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; position:absolute; inset:0 0 auto; z-index:15; background:linear-gradient(#050605,transparent); border:0; box-shadow:none; }
.navbar-brand { display:flex; align-items:center; gap:12px; font-family:'Syne',sans-serif; font-size:21px; font-weight:800; letter-spacing:-.04em; text-transform:uppercase; }
.navbar-brand img { width:42px; height:42px; object-fit:contain; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; color:#050605; background:var(--lime); border-radius:50%; font-size:20px; }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links>a { position:relative; color:#cdd2ca; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; transition:.2s ease; }
.nav-links>a:not(.nav-cta)::after { content:''; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--lime); transition:.25s ease; }
.nav-links>a:hover,.nav-links>a.active { color:#fff; }
.nav-links>a:hover::after,.nav-links>a.active::after { right:0; }
.nav-links .nav-cta { color:#050605; background:var(--lime); padding:13px 20px; border-radius:100px; }
.menu-toggle { display:none; background:none; border:0; width:42px; height:42px; }
.menu-toggle i { display:block; height:2px; margin:7px 3px; background:#fff; }
.hero-home { min-height:100svh; position:relative; display:flex; align-items:center; overflow:hidden; background:radial-gradient(circle at 77% 44%,#26371b 0,rgba(10,12,9,.2) 28%,transparent 55%),linear-gradient(110deg,#050605 24%,#0b0e0a 100%); }
.hero-grid { position:absolute; inset:0; opacity:.14; background-image:linear-gradient(rgba(124,218,36,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(124,218,36,.16) 1px,transparent 1px); background-size:90px 90px; mask-image:linear-gradient(90deg,transparent,#000 55%,transparent); transform:perspective(700px) rotateX(60deg) scale(1.5) translateY(20%); animation:gridDrift 12s linear infinite; }
.hero-glow { position:absolute; width:520px; height:520px; right:6%; top:18%; border-radius:50%; background:var(--lime); opacity:.1; filter:blur(80px); animation:breathe 6s ease-in-out infinite; }
.vinyl { position:absolute; width:min(46vw,620px); aspect-ratio:1; right:-4%; top:50%; transform:translateY(-50%); border-radius:50%; background:repeating-radial-gradient(circle,#141814 0 3px,#070807 4px 9px); box-shadow:-20px 20px 100px #000,0 0 120px rgba(124,218,36,.12); animation:vinylSpin 20s linear infinite; }
.vinyl::before { content:''; position:absolute; inset:32%; border-radius:50%; background:radial-gradient(circle,#050605 0 14%,var(--lime) 15% 65%,#1f2819 66%); box-shadow:0 0 45px rgba(124,218,36,.35); }
.vinyl::after { content:'PULSEDROP'; position:absolute; inset:43%; display:grid; place-items:center; border-radius:50%; color:#050605; font:bold 9px 'Space Grotesk'; letter-spacing:.1em; }
.hero-content { position:relative; z-index:2; padding-block:150px 90px; }
.eyebrow { color:var(--lime)!important; font-size:12px; font-weight:700; letter-spacing:.18em!important; text-transform:uppercase; margin:0 0 22px; }
.hero-home h1,.page-hero h1 { max-width:900px; font:800 clamp(58px,9.3vw,140px)/.78 'Syne',sans-serif; letter-spacing:-.085em; margin:0; text-transform:uppercase; }
.hero-home h1 span,.page-hero h1 span,.section h2 span { color:var(--lime); }
.hero-line { font-size:clamp(20px,2.2vw,31px); font-weight:600; margin:40px 0 8px; }
.hero-sub { max-width:580px; color:var(--muted); font-size:16px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:34px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:22px; width:max-content; padding:17px 25px; border:0; border-radius:100px; font:700 13px 'Space Grotesk'; text-transform:uppercase; letter-spacing:.1em; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-3px); box-shadow:0 16px 45px rgba(124,218,36,.2); }
.button.lime { background:var(--lime); color:#050605; }
.button.dark { background:#050605; color:#fff; }
.text-link { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid #596055; padding-bottom:7px; }
.text-link span { color:var(--lime); margin-left:8px; }
.scroll-cue { position:absolute; right:34px; bottom:42px; display:flex; align-items:center; gap:10px; color:#888f85; font-size:10px; text-transform:uppercase; letter-spacing:.18em; writing-mode:vertical-rl; }
.scroll-cue span { width:1px; height:56px; background:linear-gradient(var(--lime),transparent); }
.ticker { overflow:hidden; background:var(--lime); color:#070907; padding:15px 0; font-weight:800; letter-spacing:.15em; white-space:nowrap; transform:rotate(-1deg) scale(1.02); }
.ticker div { animation:ticker 25s linear infinite; }
.section { position:relative; padding:130px 0; }
.intro-grid { display:grid; grid-template-columns:1fr 2fr; gap:60px; }
.section h2 { font:800 clamp(42px,6vw,82px)/.94 'Syne',sans-serif; letter-spacing:-.06em; margin:0 0 25px; text-transform:uppercase; }
.section h2 em { color:var(--lime); font-style:normal; }
.intro-grid>div>p { max-width:650px; color:var(--muted); font-size:19px; line-height:1.7; margin-bottom:32px; }
.feature-band { background:#0c0f0c; border-block:1px solid #20251f; }
.section-title { max-width:800px; margin-bottom:60px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#293027; border:1px solid #293027; }
.feature-card { min-height:370px; padding:34px; background:#0c0f0c; transition:.3s; }
.feature-card:hover { background:#121712; }
.feature-number { color:#687064; font-size:12px; }
.line-icon { color:var(--lime); font-size:45px; margin:65px 0 30px; }
.feature-card h3 { font:700 24px/1.1 'Syne'; letter-spacing:-.04em; }
.feature-card p { color:var(--muted); line-height:1.7; }
.cta-slab { overflow:hidden; text-align:center; background:radial-gradient(circle at 50% 50%,#192514,transparent 50%); }
.cta-slab h2 { font-size:clamp(48px,8vw,110px); }
.cta-slab .button { margin:30px auto 0; }
.page-hero { min-height:72vh; display:flex; align-items:flex-end; padding:170px 0 90px; position:relative; overflow:hidden; background:linear-gradient(135deg,#050605,#0d110c); border-bottom:1px solid #232922; }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { font-size:clamp(54px,8vw,112px); }
.page-hero .lead { max-width:660px; color:var(--muted); font-size:18px; line-height:1.65; margin-top:32px; }
.orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.14; }
.orb-a { width:440px;height:440px;background:var(--lime);right:5%;top:5%;animation:breathe 7s infinite; }
.orb-b { width:260px;height:260px;background:#fff;right:30%;bottom:-20%;opacity:.04; }
.process-list { border-top:1px solid #2a3028; }
.process-step { display:grid; grid-template-columns:100px 1.2fr 1fr; align-items:center; gap:40px; padding:48px 12px; border-bottom:1px solid #2a3028; }
.process-step>span { color:var(--lime); font-size:13px; }
.process-step h2 { font-size:clamp(30px,4vw,54px); margin:0; }
.process-step p { color:var(--muted); line-height:1.7; }
.mini-cta { background:#0c0f0c; }
.mini-cta .container { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.mini-cta h2 { margin:0; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.price-card { min-height:610px; padding:48px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #2b3129; border-radius:24px; background:#0e110e; }
.price-card.highlight { color:#071006; background:var(--lime); border-color:var(--lime); box-shadow:0 30px 100px rgba(124,218,36,.12); }
.plan-name { color:inherit!important; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.price-card h2 { font-size:clamp(46px,5vw,70px); margin:16px 0; }
.price-card p { color:inherit; opacity:.7; }
.price-card ul { list-style:none; padding:0; display:grid; gap:16px; }
.price-card li { display:flex; gap:12px; }
.price-card li span { color:var(--lime); }
.price-card.highlight li span { color:#050605; }
.price-card .button { width:100%; }
.pricing-note { color:var(--muted); max-width:850px; margin:24px auto 0; font-size:13px; }
.artist-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.artist-panel { position:sticky; top:40px; align-self:start; min-height:520px; padding:45px; background:var(--lime); color:#061005; border-radius:24px; }
.artist-panel>span { font:800 clamp(70px,10vw,140px)/1 'Syne'; letter-spacing:-.08em; }
.artist-panel h2 { font-size:43px; margin-top:70px; }
.artist-panel p { line-height:1.7; }
.benefit { display:grid; grid-template-columns:48px 1fr; gap:20px; padding:35px 0; border-bottom:1px solid #2a3028; }
.benefit>span { color:var(--lime); }
.benefit h3 { font:700 27px 'Syne'; margin:0 0 12px; }
.benefit p { color:var(--muted); line-height:1.7; }
.quote-section { background:#0c0f0c; }
blockquote { font:700 clamp(30px,5vw,62px)/1.1 'Syne'; margin:30px 0; max-width:1000px; letter-spacing:-.04em; }
blockquote cite { display:block; color:var(--lime); font:600 13px 'Space Grotesk'; margin-top:30px; text-transform:uppercase; letter-spacing:.14em; }
.faq-list { max-width:980px; }
.faq-item { border-bottom:1px solid #2a3028; }
.faq-item summary { list-style:none; display:grid; grid-template-columns:60px 1fr 40px; align-items:center; gap:20px; padding:32px 0; cursor:pointer; font:700 clamp(20px,3vw,32px) 'Syne'; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary span { color:var(--lime); font:500 12px 'Space Grotesk'; }
.faq-item summary i { font-style:normal; font:300 38px 'Space Grotesk'; transition:.25s; }
.faq-item[open] summary i { transform:rotate(45deg); color:var(--lime); }
.faq-item>p { color:var(--muted); max-width:780px; padding:0 40px 35px 80px; line-height:1.8; }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.contact-aside h2 { font-size:48px; }
.contact-aside>p { color:var(--muted); line-height:1.7; }
.contact-aside dl { margin-top:50px; }
.contact-aside dt { color:var(--lime); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-top:25px; }
.contact-aside dd { margin:7px 0; font-size:18px; }
.contact-form { padding:45px; background:#0e110e; border:1px solid #293027; border-radius:22px; }
.contact-form label { display:grid; gap:9px; color:#b6bcb3; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.contact-form label small { color:#666d63; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:25px; }
.contact-form>label { margin-bottom:28px; }
.contact-form input,.contact-form textarea,.contact-form select { width:100%; color:#fff; background:transparent; border:0; border-bottom:1px solid #3a4137; border-radius:0; padding:13px 2px; outline:none; font:16px 'Space Grotesk'; }
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus { border-color:var(--lime); }
.contact-form select option { background:#111; }
.form-alert { margin-bottom:24px; padding:14px; border:1px solid var(--lime); color:var(--lime); }
.site-footer { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:50px; padding:75px max(24px,calc((100vw - 1160px)/2)) 30px; color:var(--muted); background:#090b09; border-top:1px solid #242a22; }
.footer-brand { color:#fff!important; font:800 24px 'Syne'; text-transform:uppercase; }
.site-footer p { max-width:330px; }
.footer-links,.footer-socials { display:grid; align-content:start; gap:12px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.site-footer a:hover { color:var(--lime); }
.site-footer small { grid-column:1/-1; border-top:1px solid #242a22; padding-top:25px; font-size:11px; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@keyframes grain { 0%{transform:translate(0)}25%{transform:translate(2%,-2%)}50%{transform:translate(-2%,2%)}75%{transform:translate(1%,3%)}100%{transform:translate(0)} }
@keyframes gridDrift { to{background-position:0 90px,90px 0} }
@keyframes vinylSpin { from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)} }
@keyframes breathe { 50%{transform:scale(1.18);opacity:.2} }
@keyframes ticker { to{transform:translateX(-50%)} }
@media(max-width:900px){
.music-site .site-nav{height:76px}.menu-toggle{display:block}.nav-links{position:fixed;inset:0;z-index:-1;background:#080a08;display:flex;flex-direction:column;justify-content:center;gap:28px;opacity:0;pointer-events:none;transition:.25s}.nav-open .nav-links{opacity:1;pointer-events:auto}.nav-links>a{font-size:20px}.vinyl{width:78vw;right:-38%;opacity:.55}.hero-home h1{font-size:clamp(52px,16vw,100px)}.feature-grid,.pricing-grid,.artist-grid,.contact-grid{grid-template-columns:1fr}.intro-grid{grid-template-columns:1fr}.process-step{grid-template-columns:55px 1fr}.process-step p{grid-column:2}.mini-cta .container{display:block}.mini-cta .button{margin-top:25px}.artist-panel{position:relative;top:0}.site-footer{grid-template-columns:1fr 1fr}.site-footer>div:first-child{grid-column:1/-1}
}
@media(max-width:600px){
.music-site .container{width:min(100% - 30px,1160px)}.hero-content{padding-top:125px}.hero-home h1,.page-hero h1{line-height:.84}.hero-sub{font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column}.vinyl{top:32%;opacity:.3}.scroll-cue{display:none}.section{padding:85px 0}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:auto}.page-hero{min-height:65vh;padding-bottom:65px}.process-step{padding:35px 0;gap:15px}.price-card{padding:30px;min-height:560px}.artist-panel{min-height:430px;padding:30px}.artist-panel h2{font-size:34px}.faq-item summary{grid-template-columns:35px 1fr 28px}.faq-item>p{padding-left:55px}.field-row{grid-template-columns:1fr}.contact-form{padding:25px}.site-footer{grid-template-columns:1fr}.site-footer>div:first-child{grid-column:auto}.site-footer small{grid-column:auto}
}
/* Clean Phonk admin interface */
.admin-body{--admin-accent:#7cda24;--admin-ink:#10140f;--admin-muted:#687066;--admin-line:#dfe5dc;background:#f3f6f1;color:var(--admin-ink);font-family:'Space Grotesk',Arial,sans-serif}
.admin-side{background:#080a08;border-right:1px solid #20261e;padding:22px 16px}
.admin-brand{padding:5px 8px 20px;margin-bottom:20px;border-color:#252b23}
.admin-brand-mark{width:44px;height:44px;border-radius:13px;background:var(--admin-accent);color:#071006;box-shadow:0 0 30px rgba(124,218,36,.18)}
.admin-side h1{max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;letter-spacing:-.03em}
.admin-side small{font-size:11px;color:#8d9689}
.admin-nav{gap:18px}.admin-nav-group p{padding:0 11px;margin-bottom:7px;color:#697164;font-size:9px;letter-spacing:.16em}
.admin-side a{padding:10px 12px;border:1px solid transparent;border-radius:9px;color:#c7cec3;font-size:13px;font-weight:650}
.admin-side a.active,.admin-side a:hover{transform:none;background:rgba(124,218,36,.11);border-color:rgba(124,218,36,.24);color:var(--admin-accent)}
.admin-side-actions{border-color:#252b23}.admin-side-actions a{background:#121611}
.admin-main{padding:26px 30px 45px;max-width:1600px;width:100%}
.admin-topbar{padding:17px 20px;margin-bottom:24px;border:1px solid var(--admin-line);border-radius:14px;box-shadow:0 8px 30px rgba(25,35,22,.05)}
.admin-topbar span{color:#7a8376;font-size:9px;letter-spacing:.15em}.admin-topbar h2{margin-top:4px;font-size:24px;letter-spacing:-.035em}
.admin-main>h2{margin:6px 0 13px;font-size:20px;letter-spacing:-.025em}.admin-intro,.admin-body .muted{max-width:700px;color:var(--admin-muted);font-size:14px;line-height:1.65}
.admin-grid{gap:14px;margin:18px 0}.admin-card{position:relative;overflow:hidden;padding:21px;border-color:var(--admin-line);border-radius:14px;box-shadow:0 8px 30px rgba(25,35,22,.04)}
.admin-card::after{content:'';position:absolute;right:-18px;bottom:-22px;width:70px;height:70px;border-radius:50%;background:rgba(124,218,36,.1)}
.admin-card strong{font-size:31px;letter-spacing:-.05em}.admin-card span{color:var(--admin-muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.admin-form,.inline-editor{padding:22px;border-color:var(--admin-line);border-radius:14px;gap:17px;box-shadow:0 8px 30px rgba(25,35,22,.04)}
.admin-body .form-label,.admin-body label{display:grid;gap:7px;color:#424b3f;font-size:11px;line-height:1.35;letter-spacing:.02em}
.admin-body .form-control{min-height:44px;padding:10px 12px;border:1px solid #d4dbd1;border-radius:9px;background:#fbfcfa;color:#11150f;font-size:13px;box-shadow:none}
.admin-body textarea.form-control{min-height:115px;resize:vertical}.admin-body .form-control:focus{border-color:var(--admin-accent);background:#fff;box-shadow:0 0 0 3px rgba(124,218,36,.13)}
.admin-body input[type=file]{padding:8px}.admin-body input[type=checkbox]{accent-color:var(--admin-accent)}
.admin-body .btn,.admin-body button{border-radius:9px;font-weight:750}.admin-body .btn-brand{border-color:var(--admin-accent);background:var(--admin-accent);color:#071006}.admin-body .btn-brand:hover{background:#68bd1b;border-color:#68bd1b;color:#071006}
.admin-table{margin-top:16px;border-color:var(--admin-line);border-radius:13px;box-shadow:0 8px 30px rgba(25,35,22,.04)}
.admin-table th{padding:12px 14px;background:#eef2ec;color:#687066;font-size:10px;letter-spacing:.09em}.admin-table td{padding:13px 14px;border-color:#e8ece6;color:#2f362d;font-size:13px}
.table-actions a{color:#4b8d14;font-size:12px;text-decoration:none}.table-actions .text-danger{color:#c53a45!important}
.admin-body .alert{border:0;border-radius:10px;font-size:13px}.checks{display:flex;flex-wrap:wrap;gap:18px}.checks label{display:flex;grid-auto-flow:column;align-items:center;justify-content:flex-start;gap:8px}
.admin-login{background:radial-gradient(circle at 75% 18%,rgba(124,218,36,.15),transparent 30%),#050605;font-family:'Space Grotesk',Arial,sans-serif}
.login-card{width:min(430px,100%);padding:32px;border:1px solid #252d22;border-radius:18px;background:rgba(13,17,12,.96);box-shadow:0 28px 90px rgba(0,0,0,.55);gap:17px}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:5px}.login-brand>span{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#7cda24;color:#071006;font-weight:900}
.login-card h1{margin:0;font-size:24px;letter-spacing:-.04em}.login-card p{margin:4px 0 0;color:#8e988a;font-size:12px}.login-card label{display:grid;gap:7px;color:#cad1c6;font-size:11px;font-weight:700}
.login-card .form-control{min-height:48px;border:1px solid #2a3228;border-radius:10px;background:#0a0d09;color:#fff}.login-card .form-control:focus{border-color:#7cda24;box-shadow:0 0 0 3px rgba(124,218,36,.13)}
.login-card .btn{min-height:49px;border:0;border-radius:10px;background:#7cda24;color:#071006;font-weight:800}.login-card small{color:#6f786c;text-align:center;font-size:10px}
@media(max-width:992px){.admin-main{max-width:none;padding:14px}.admin-topbar{border-radius:12px}.admin-side{padding:18px 14px}}
@media(max-width:600px){
.admin-main{padding:9px}.admin-topbar{padding:12px 13px;margin-bottom:13px;border-radius:11px}.admin-topbar h2{font-size:18px}
.admin-grid{grid-template-columns:1fr 1fr;gap:9px}.admin-card{padding:14px;border-radius:11px}.admin-card strong{font-size:24px}.admin-card span{font-size:9px}
.admin-form,.inline-editor{padding:13px;border-radius:11px;gap:13px}.admin-body .form-control{font-size:16px}
.admin-table{border-radius:10px}.login-card{padding:24px 19px}.login-brand>span{width:42px;height:42px}.login-card h1{font-size:21px}
}
/* Desktop hero keeps its original left-side composition. */
@media(min-width:901px){
.hero-home .hero-content{display:block;text-align:left}
.hero-home .eyebrow,.hero-home h1,.hero-home .hero-sub{margin-left:0;margin-right:0}
.hero-home .hero-actions{justify-content:flex-start;margin-left:0;margin-right:0}
.hero-logo-platforms{margin-left:auto;margin-right:auto}
}
@media(prefers-reduced-motion:reduce){.noise,.hero-grid,.hero-glow,.vinyl,.ticker div{animation:none}.reveal{opacity:1;transform:none}}
/* Phonk-focused homepage: compact, nocturnal, restrained */
.hero-home { min-height:100svh; background:radial-gradient(circle at 75% 35%,rgba(124,218,36,.11),transparent 28%),linear-gradient(115deg,#030403 20%,#090c08 75%,#020302); }
.hero-home::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(3,4,3,.96) 0%,rgba(3,4,3,.72) 42%,rgba(3,4,3,.1) 76%),linear-gradient(0deg,#030403 0%,transparent 25%); }
.hero-home .hero-content { z-index:4; }
.hero-home h1 { font-size:clamp(70px,11.2vw,164px); text-shadow:5px 5px 0 rgba(124,218,36,.08); }
.hero-home h1 span { display:inline-block; color:#edf0eb; -webkit-text-stroke:1px rgba(124,218,36,.65); text-shadow:7px 7px 0 rgba(124,218,36,.13); }
.hero-home .hero-sub { max-width:460px; margin-top:32px; font-size:18px; color:#b4bbb1; }
.phonk-art { position:absolute; z-index:2; inset:0 0 0 43%; overflow:hidden; }
.phonk-art::before { content:''; position:absolute; inset:0; opacity:.32; background:repeating-linear-gradient(105deg,transparent 0 28px,rgba(124,218,36,.07) 29px,transparent 31px); transform:skewX(-12deg); }
.moon { position:absolute; width:min(28vw,390px); aspect-ratio:1; right:10%; top:13%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#d9ffb8 0,#7cda24 25%,#2b3d1e 62%,#0a0d09 72%); opacity:.72; filter:saturate(.7) contrast(1.4); box-shadow:0 0 90px rgba(124,218,36,.24); }
.moon::after { content:''; position:absolute; inset:0; border-radius:inherit; opacity:.3; background:radial-gradient(circle at 65% 23%,#050605 0 4%,transparent 5%),radial-gradient(circle at 31% 60%,#050605 0 8%,transparent 9%),radial-gradient(circle at 72% 68%,#050605 0 6%,transparent 7%); }
.road { position:absolute; width:120%; height:47%; left:-10%; bottom:-12%; background:linear-gradient(165deg,transparent 0 31%,#151914 32% 34%,#030403 35%); transform:perspective(600px) rotateX(12deg); }
.road::after { content:''; position:absolute; width:52%; height:2px; left:35%; top:52%; background:repeating-linear-gradient(90deg,var(--lime) 0 34px,transparent 35px 62px); opacity:.55; transform:rotate(-5deg); }
.car { position:absolute; width:min(37vw,520px); height:150px; right:4%; bottom:16%; border-radius:48% 55% 12% 14%/55% 60% 18% 20%; background:linear-gradient(165deg,#242b21 0 16%,#070907 17% 62%,#111610 63%); box-shadow:0 20px 22px #000,0 -3px 0 rgba(124,218,36,.4); transform:skewX(-8deg); }
.car::before { content:''; position:absolute; width:49%; height:47%; left:28%; top:-29%; border-radius:70% 70% 5% 5%; background:linear-gradient(150deg,#182116,#050605 68%); border-top:2px solid rgba(124,218,36,.3); transform:skewX(18deg); }
.car::after { content:''; position:absolute; width:86%; height:4px; left:7%; bottom:22%; background:var(--lime); opacity:.68; box-shadow:0 0 18px var(--lime); }
.car i,.car i::after { position:absolute; content:''; width:72px; aspect-ratio:1; bottom:-25px; border-radius:50%; background:radial-gradient(circle,#252b23 0 17%,#080908 18% 54%,#30382d 55% 60%,#050605 61%); box-shadow:0 0 0 4px #020302; }
.car i { left:15%; }.car i::after { left:300px; bottom:0; }
.speed { position:absolute; height:1px; right:0; background:linear-gradient(90deg,transparent,var(--lime)); opacity:.35; animation:speedLine 1.4s ease-in infinite; }
.speed-a { width:58%; top:29%; }.speed-b { width:37%; top:43%; animation-delay:.4s; }.speed-c { width:65%; top:64%; animation-delay:.8s; }
.track-stamp { position:absolute; z-index:5; right:32px; bottom:30px; color:#7d8679; font-size:10px; line-height:1.6; text-align:right; letter-spacing:.16em; }
.track-stamp b { color:var(--lime); font-weight:600; }
.home-core { padding:105px 0 120px; background:#060806; }
.home-core .container { display:grid; grid-template-columns:1.05fr 1fr; gap:70px 100px; align-items:end; }
.home-core-copy h2 { font-size:clamp(50px,7vw,96px); }
.home-core-copy>p:last-child { max-width:470px; color:var(--muted); font-size:18px; line-height:1.65; }
.home-points { border-top:1px solid #343a31; }
.home-points article { display:grid; grid-template-columns:45px 120px 1fr; gap:15px; align-items:center; padding:24px 0; border-bottom:1px solid #343a31; }
.home-points span { color:var(--lime); font-size:11px; }
.home-points h3 { margin:0; font:700 21px 'Syne'; text-transform:uppercase; }
.home-points p { margin:0; color:var(--muted); font-size:14px; }
.home-final-cta { grid-column:2; }
@keyframes speedLine { 0%{transform:translateX(60%);opacity:0}35%{opacity:.4}100%{transform:translateX(-45%);opacity:0} }
/* Public mobile navigation */
@media(max-width:900px){
.music-site .site-nav{position:absolute;padding-inline:20px}.menu-toggle{position:relative;z-index:30;cursor:pointer}.nav-links{z-index:20;padding:95px 24px 45px}.nav-open .menu-toggle i:first-child{transform:translateY(4.5px) rotate(45deg)}.nav-open .menu-toggle i:last-child{transform:translateY(-4.5px) rotate(-45deg)}.menu-toggle i{transition:.2s}
.phonk-art{inset:0 0 0 23%;opacity:.58}.moon{width:58vw;right:-4%;top:14%}.car{width:70vw;right:-20%;bottom:18%}.car i::after{left:40vw}.hero-home::after{background:linear-gradient(90deg,rgba(3,4,3,.96),rgba(3,4,3,.58) 80%,transparent),linear-gradient(0deg,#030403,transparent 35%)}
.home-core .container{grid-template-columns:1fr;gap:42px}.home-final-cta{grid-column:1}
}
@media(max-width:600px){
.hero-home{min-height:760px}.hero-home .hero-content{padding-top:130px;padding-bottom:130px}.hero-home h1{font-size:clamp(62px,20vw,92px)}.hero-home .hero-sub{font-size:16px;max-width:310px}.phonk-art{inset:0 -30% 0 22%;opacity:.42}.moon{width:76vw;top:15%}.car{width:95vw;bottom:14%;height:105px}.car i,.car i::after{width:52px}.track-stamp{display:none}.ticker{font-size:12px}.home-core{padding:80px 0}.home-points article{grid-template-columns:34px 95px 1fr;gap:10px}.home-points h3{font-size:17px}.home-points p{font-size:12px}
}
/* Admin responsiveness and touch-friendly controls */
.admin-body .btn,.admin-body button,.admin-body input,.admin-body select,.admin-body textarea { max-width:100%; }
.admin-body img { max-width:100%;height:auto; }
.admin-main { min-width:0; }
@media(max-width:992px){
.admin-body{display:block}.admin-main{width:100%;padding:14px}.admin-topbar{top:0;margin-bottom:14px;border-radius:0 0 8px 8px}.admin-top-actions{flex-direction:row;align-items:center}.admin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-card{padding:16px}.admin-card strong{font-size:27px}.admin-form,.inline-editor{padding:16px;margin:12px 0}.form-grid,.inline-editor{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-table{display:block;width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.admin-table tbody{min-width:680px;display:table;width:100%}.admin-table-wrap,.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:600px){
.admin-main{padding:10px}.admin-topbar{padding:12px;align-items:center}.admin-topbar span{display:none}.admin-topbar h2{font-size:19px}.admin-top-actions>a{display:none}.admin-grid{grid-template-columns:1fr 1fr}.admin-card{padding:14px}.admin-card strong{font-size:24px}.admin-form,.inline-editor{padding:13px}.form-grid,.inline-editor{grid-template-columns:1fr}.checks{gap:10px;display:grid}.admin-body .btn,.admin-body button{min-height:42px}.admin-table td,.admin-table th{padding:11px 10px}.table-actions{flex-wrap:nowrap}.admin-menu-btn{min-width:70px}.admin-side{width:min(300px,88vw)}
}
/* Final small-screen balance */
@media(max-width:600px){
html{font-size:15px}.music-site{overflow-x:hidden}.music-site .container{width:calc(100% - 36px)}
.music-site .site-nav{height:68px;padding:0 18px}.navbar-brand{font-size:17px;gap:9px}.brand-mark,.navbar-brand img{width:34px;height:34px}.menu-toggle{width:38px;height:38px}
.nav-links{align-items:flex-start;justify-content:flex-start;padding:105px 26px 35px;gap:22px}.nav-links>a{font-size:18px}.nav-links .nav-cta{margin-top:8px;padding:13px 20px}
.hero-home{min-height:680px;align-items:flex-start}.hero-home .hero-content{padding:116px 0 82px}.hero-home .eyebrow{max-width:270px;font-size:9px;line-height:1.5;margin-bottom:15px}.hero-home h1{max-width:330px;font-size:clamp(48px,14.5vw,62px);line-height:.88;letter-spacing:-.065em;text-shadow:3px 3px 0 rgba(124,218,36,.08)}.hero-home h1 span{text-shadow:3px 3px 0 rgba(124,218,36,.12)}
.hero-home .hero-sub{max-width:280px;margin-top:24px;font-size:14px;line-height:1.55}.hero-actions{width:100%;margin-top:27px;gap:18px}.hero-actions .button{width:100%;max-width:260px;padding:15px 19px}.hero-actions .text-link{font-size:11px}
.phonk-art{inset:205px -24% 0 30%;opacity:.26}.moon{width:62vw;right:5%;top:4%}.car{width:78vw;height:82px;right:0;bottom:12%}.car::before{top:-24%}.car i,.car i::after{width:43px;bottom:-17px}.car i::after{left:43vw}.road{bottom:-8%;height:39%}.speed{display:none}
.ticker{padding:11px 0;font-size:9px;letter-spacing:.12em;transform:none}
.home-core{padding:66px 0 75px}.home-core .container{gap:32px}.home-core-copy .eyebrow{font-size:9px;margin-bottom:14px}.home-core-copy h2,.section h2{font-size:38px;line-height:.96;letter-spacing:-.045em}.home-core-copy>p:last-child{font-size:15px;line-height:1.55}
.home-points article{grid-template-columns:28px 82px 1fr;padding:19px 0}.home-points span{font-size:9px}.home-points h3{font-size:15px}.home-points p{font-size:11px;line-height:1.4}.home-final-cta{width:100%;max-width:220px}
.page-hero{min-height:500px;padding:120px 0 62px}.page-hero h1{font-size:44px;line-height:.9;letter-spacing:-.055em}.page-hero .lead{font-size:15px;line-height:1.55;margin-top:22px}.section{padding:68px 0}
.process-step{grid-template-columns:28px 1fr;padding:27px 0}.process-step h2{font-size:27px}.process-step p{font-size:14px;margin:0}.mini-cta h2{font-size:38px}
.price-card{min-height:auto;padding:25px;border-radius:16px;gap:32px}.price-card h2{font-size:39px}.price-card li{font-size:13px}.artist-panel{min-height:350px}.artist-panel>span{font-size:74px}.artist-panel h2{font-size:29px;margin-top:55px}.benefit h3{font-size:22px}
.faq-item summary{font-size:17px;padding:24px 0;gap:8px}.faq-item>p{padding:0 0 25px 43px;font-size:14px}.contact-grid{gap:38px}.contact-aside h2{font-size:34px}.contact-form{padding:20px;border-radius:14px}.contact-form .button{width:100%}
.site-footer{padding:52px 18px 25px;gap:28px}.footer-brand{font-size:20px}
.admin-main{overflow-x:hidden}.admin-grid{grid-template-columns:1fr}.admin-topbar{position:sticky}.admin-form,.inline-editor{width:100%;overflow:hidden}.admin-table{border-radius:6px}.admin-table tbody{min-width:620px}.admin-body input,.admin-body select,.admin-body textarea{font-size:16px}
}
@media(max-width:380px){
.hero-home h1{font-size:46px}.hero-home{min-height:650px}.hero-home .hero-content{padding-top:106px}.home-core-copy h2,.section h2{font-size:34px}.page-hero h1{font-size:39px}.home-points article{grid-template-columns:24px 72px 1fr}.home-points h3{font-size:14px}
}
/* Refined readable type scale */
.hero-home h1,.page-hero h1,.section h2,.process-step h2,.price-card h2,.artist-panel h2,blockquote { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.045em; }
.hero-home h1 { max-width:760px; font-size:clamp(58px,7.2vw,104px); line-height:.86; }
.hero-home h1 span { -webkit-text-stroke:0; }
.hero-home .hero-sub { font-size:17px; line-height:1.6; }
.section h2 { font-size:clamp(38px,4.8vw,66px); line-height:1; }
.home-core-copy h2 { font-size:clamp(44px,5.4vw,72px); }
.page-hero h1 { max-width:820px; font-size:clamp(52px,6.3vw,86px); line-height:.9; }
.page-hero .lead { font-size:17px; }
.process-step h2 { font-size:clamp(30px,3.2vw,45px); line-height:1; }
.price-card h2 { font-size:clamp(40px,4vw,56px); line-height:1; }
.artist-panel h2 { font-size:38px; line-height:1.05; }
blockquote { font-size:clamp(28px,4vw,50px); line-height:1.15; }
.feature-card h3,.benefit h3,.home-points h3 { font-family:'Space Grotesk',sans-serif; letter-spacing:-.025em; }
@media(max-width:900px){
.hero-home h1{font-size:clamp(54px,10vw,76px);max-width:580px}.page-hero h1{font-size:clamp(46px,8vw,68px)}.section h2,.home-core-copy h2{font-size:clamp(38px,6vw,52px)}
}
@media(max-width:600px){
.hero-home h1{max-width:310px;font-size:46px;line-height:.9;letter-spacing:-.04em}.hero-home .hero-sub{font-size:14px;line-height:1.55}.section h2,.home-core-copy h2{font-size:32px;line-height:1.02;letter-spacing:-.03em}.page-hero h1{font-size:38px;line-height:.94;letter-spacing:-.035em}.page-hero .lead{font-size:14px}.process-step h2{font-size:24px}.price-card h2{font-size:34px}.artist-panel h2{font-size:27px}.benefit h3{font-size:20px}blockquote{font-size:26px;line-height:1.2}
}
@media(max-width:380px){
.hero-home h1{font-size:42px}.section h2,.home-core-copy h2{font-size:29px}.page-hero h1{font-size:34px}
}
/* Mobile text flow and clearly visible menu */
@media(max-width:900px){
.menu-toggle{display:grid;place-content:center;gap:4px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--lime);box-shadow:0 8px 28px rgba(124,218,36,.24)}
.menu-toggle span{display:block;width:19px;height:2px;margin:0;background:#071006;border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.nav-open .menu-toggle span:first-child{transform:translateY(6px) rotate(45deg)}
.nav-open .menu-toggle span:nth-child(2){opacity:0}
.nav-open .menu-toggle span:last-child{transform:translateY(-6px) rotate(-45deg)}
.nav-links{background:rgba(5,7,5,.98);backdrop-filter:blur(18px)}
}
@media(max-width:600px){
.music-site h1,.music-site h2,.music-site h3{overflow-wrap:normal;word-break:normal;hyphens:none}
.hero-home h1{font-size:42px;line-height:1.02;letter-spacing:-.025em}.hero-home h1 span{display:inline-block;margin-top:3px}
.hero-home .hero-sub{margin-top:20px;line-height:1.65}
.home-core-copy h2,.section h2{font-size:30px;line-height:1.12;letter-spacing:-.02em;margin-bottom:18px}.home-core-copy h2 span,.section h2 span{display:inline-block;margin-top:2px}
.page-hero h1{font-size:36px;line-height:1.08;letter-spacing:-.02em}.page-hero h1 span{display:inline-block;margin-top:2px}.page-hero .lead{line-height:1.65;margin-top:18px}
.process-step h2{font-size:23px;line-height:1.15}.price-card h2{font-size:32px;line-height:1.1}.artist-panel h2{font-size:26px;line-height:1.12}.benefit h3{font-size:19px;line-height:1.2}
.eyebrow{line-height:1.55;letter-spacing:.12em!important}.home-points h3{line-height:1.2}.home-points p{line-height:1.5}
.nav-links>a{width:100%;padding:5px 0;font-size:17px;line-height:1.3}.nav-links .nav-cta{width:auto;padding:13px 20px}
}
@media(max-width:380px){
.hero-home h1{font-size:38px}.home-core-copy h2,.section h2{font-size:28px}.page-hero h1{font-size:32px}
}
/* Editable clickable platform rail */
.platform-strip{position:relative;z-index:6;overflow:hidden;background:var(--lime);color:#061005;border-block:1px solid #9ef552}
.platform-track{display:flex;width:max-content;animation:platformMove 28s linear infinite}
.platform-link{display:flex;align-items:center;gap:10px;min-width:max-content;padding:14px 28px;border-right:1px solid rgba(5,16,5,.22);font-size:12px;letter-spacing:.11em;text-transform:uppercase;transition:background .2s}
.platform-link:hover{background:#9bf050;color:#061005}
.platform-logo{width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;border-radius:50%;background:#061005;color:var(--lime);font-size:11px;font-weight:800;overflow:hidden}
.platform-logo img{width:15px;height:15px;object-fit:contain;filter:grayscale(1) brightness(4)}
@keyframes platformMove{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.platform-track{animation:none}}
@media(max-width:900px){
.nav-links{background:#020302!important;color:#fff!important;backdrop-filter:none;border-left:1px solid #20251f}
.nav-links>a,.nav-links>a.active,.nav-links>a:hover{color:#fff!important;opacity:1}
.nav-links>a:not(.nav-cta)::after{background:var(--lime)}
.nav-links .nav-cta{color:#061005!important}
}
@media(max-width:600px){
.platform-link{padding:11px 18px;font-size:10px;gap:8px}.platform-logo{width:22px;height:22px;flex-basis:22px}.platform-logo img{width:13px;height:13px}
.hero-home{min-height:620px}.hero-home .hero-content{padding:105px 0 68px}.hero-home h1{font-size:36px;line-height:1.08}.hero-home .hero-sub{max-width:265px}.phonk-art{inset:190px -22% 0 35%}.home-core{padding-top:58px}
.home-points article{grid-template-columns:25px 105px 1fr;align-items:start}.home-points h3{font-size:14px}.home-points p{font-size:11px}
}
@media(max-width:380px){.hero-home h1{font-size:34px}.home-points article{grid-template-columns:22px 92px 1fr}}
/* Logo-only platform row below the original ticker */
.logo-platforms{background:#080a08;border-bottom:1px solid #242a22;padding:34px 0}
.logo-platform-grid{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px 34px}
.logo-platform-grid a{width:86px;height:54px;display:grid;place-items:center;padding:10px 14px;border:1px solid #272d25;border-radius:12px;background:#0e110e;transition:transform .2s,border-color .2s,background .2s}
.logo-platform-grid a:hover{transform:translateY(-3px);border-color:var(--lime);background:#141914}
.logo-platform-grid img{display:block;max-width:58px;max-height:30px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(2.2);opacity:.82}
.logo-platform-grid a:hover img{filter:none;opacity:1}
@media(max-width:600px){.logo-platforms{padding:24px 0}.logo-platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.logo-platform-grid a{width:100%;height:48px;padding:9px}.logo-platform-grid img{max-width:42px;max-height:24px}}
/* Transparent hero platform logos below the main CTA */
.hero-logo-platforms{width:min(520px,100%);margin:28px auto 0}
.hero-home .hero-actions{width:min(520px,100%);justify-content:center;margin-left:auto;margin-right:auto}
.hero-logo-platforms .logo-platform-grid{justify-content:center;gap:18px 28px}
.hero-logo-platforms .logo-platform-grid a{width:auto;height:34px;min-width:44px;padding:2px 4px;border:0;border-radius:0;background:transparent;box-shadow:none}
.hero-logo-platforms .logo-platform-grid a:hover{transform:translateY(-2px);border:0;background:transparent}
.hero-logo-platforms .logo-platform-grid img{max-width:48px;max-height:25px;filter:grayscale(1) brightness(3);opacity:.76}
.hero-logo-platforms .logo-platform-grid a:hover img{filter:none;opacity:1}
@media(max-width:600px){.hero-home .hero-actions{justify-content:center;max-width:280px;margin-left:auto;margin-right:auto}.hero-logo-platforms{margin:24px auto 0;max-width:280px}.hero-logo-platforms .logo-platform-grid{display:flex;justify-content:center;gap:14px 20px}.hero-logo-platforms .logo-platform-grid a{width:auto;height:28px;min-width:34px;padding:0}.hero-logo-platforms .logo-platform-grid img{max-width:38px;max-height:21px}}
.live-clock .live-time{color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.12em}
@media(max-width:600px){.track-stamp.live-clock{display:block;right:16px;bottom:16px;font-size:8px;line-height:1.6}.live-clock .live-time{font-size:10px}}
/* Text-only phonk wordmark, controlled by Admin Website Name */
.brand-wordmark{position:relative;display:inline-block;max-width:min(42vw,360px);overflow:hidden;color:var(--logo-color);font:800 24px/1 'Space Grotesk',sans-serif;letter-spacing:-.07em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;transform:skewX(-7deg);text-shadow:2px 2px 0 rgba(124,218,36,.38)}
.brand-wordmark::after{content:attr(data-text);position:absolute;left:2px;top:2px;z-index:-1;color:var(--lime);opacity:.32;clip-path:inset(55% 0 12% 0)}
.navbar-brand:hover .brand-wordmark{color:var(--lime);text-shadow:2px 2px 0 rgba(255,255,255,.18)}
@media(max-width:600px){.brand-wordmark{font-size:19px;letter-spacing:-.055em}}
/* Reference-style mobile drawer */
.mobile-start,.mobile-login,.mobile-blog{display:none}
@media(max-width:900px){
.music-site .site-nav{z-index:50;background:transparent}
.nav-links{inset:0 0 0 68px!important;width:auto;height:100dvh;padding:108px 30px 40px 42px!important;align-items:flex-start!important;justify-content:flex-start!important;gap:26px!important;background:#000!important;border:0!important;opacity:1!important;transform:translateX(100%);pointer-events:none;transition:transform .28s ease;z-index:20!important}
.nav-open .nav-links{transform:translateX(0);pointer-events:auto}
.nav-open{overflow:hidden}
.nav-links>a{width:auto!important;padding:0!important;color:#fff!important;font-size:18px!important;font-weight:700!important;line-height:1.35!important;letter-spacing:0!important;text-transform:none!important;border:0!important}
.nav-links>a::after{display:none!important}.nav-links .mobile-extra{display:none!important}.nav-links .nav-cta{display:none!important}
.nav-links .mobile-start,.nav-links .mobile-blog{display:block!important}.nav-links .mobile-login{display:flex!important;width:100%!important;height:56px;margin-top:4px;align-items:center;justify-content:center;border-radius:999px!important;background:var(--lime)!important;color:#050605!important;font-size:17px!important}
.menu-toggle{z-index:35}.nav-open .menu-toggle{background:transparent;box-shadow:none}.nav-open .menu-toggle span{background:var(--lime);width:22px}.nav-open .menu-toggle span:first-child{transform:translateY(6px) rotate(45deg)}.nav-open .menu-toggle span:last-child{transform:translateY(-6px) rotate(-45deg)}
.navbar-brand{z-index:34;max-width:58px;overflow:visible}.nav-open .brand-wordmark{font-size:18px;max-width:64px;color:#fff}
}
@media(max-width:380px){.nav-links{left:60px!important;padding-left:30px!important;padding-right:24px!important}}
/* Responsive animated Phonk hero photography */
.hero-home.has-live-background{background-repeat:no-repeat;background-position:center center,82% center;background-size:100% 100%,auto 111%;animation:carSceneDrive 7s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.hero-home.has-live-background::after{background:linear-gradient(90deg,rgba(3,4,3,.94) 0%,rgba(3,4,3,.72) 43%,rgba(3,4,3,.14) 77%),linear-gradient(0deg,rgba(3,4,3,.86),transparent 42%)}
@keyframes carSceneDrive{0%{background-position:center center,84% 52%;background-size:100% 100%,auto 108%}45%{background-position:center center,73% 49%;background-size:100% 100%,auto 112%}100%{background-position:center center,62% 47%;background-size:100% 100%,auto 116%}}
@media(max-width:900px){.hero-home.has-live-background{background-position:center center,68% center;background-size:100% 100%,auto 105%}.hero-home.has-live-background::after{background:linear-gradient(90deg,rgba(3,4,3,.94),rgba(3,4,3,.58) 72%,rgba(3,4,3,.18)),linear-gradient(0deg,rgba(3,4,3,.88),transparent 50%)}}
@media(max-width:600px){.hero-home.has-live-background{background-position:center center,78% center;background-size:100% 100%,auto 104%;animation-name:carSceneDriveMobile;animation-duration:6.5s}.hero-home.has-live-background::after{background:linear-gradient(90deg,rgba(3,4,3,.9),rgba(3,4,3,.52)),linear-gradient(0deg,rgba(3,4,3,.94),transparent 58%)}@keyframes carSceneDriveMobile{0%{background-position:center center,84% 52%;background-size:100% 100%,auto 103%}50%{background-position:center center,73% 49%;background-size:100% 100%,auto 107%}100%{background-position:center center,61% 47%;background-size:100% 100%,auto 111%}}}
@media(prefers-reduced-motion:reduce){.hero-home.has-live-background{animation:none}}
/* Driving illusion: fast road streaks, tire smoke and subtle camera energy */
.drive-motion{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.drive-motion i{position:absolute;right:-20%;height:2px;width:58%;background:linear-gradient(90deg,transparent,rgba(190,255,145,.12),rgba(190,255,145,.7));filter:blur(.3px);opacity:0;transform:skewX(-24deg);animation:roadRush 1.8s linear infinite}
.drive-motion i:nth-child(1){top:25%;animation-delay:0s}.drive-motion i:nth-child(2){top:42%;width:40%;animation-delay:.45s}.drive-motion i:nth-child(3){top:61%;width:70%;animation-delay:.9s}.drive-motion i:nth-child(4){top:76%;width:48%;animation-delay:1.3s}
.drive-motion span{position:absolute;right:4%;bottom:8%;width:42%;height:28%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(210,230,205,.23),rgba(124,218,36,.1) 34%,transparent 68%);filter:blur(22px);opacity:.45;animation:smokePulse 2.6s ease-in-out infinite alternate,smokeTravel 7s cubic-bezier(.45,.05,.55,.95) infinite alternate}
@keyframes roadRush{0%{transform:translateX(35%) skewX(-24deg);opacity:0}20%{opacity:.55}100%{transform:translateX(-150%) skewX(-24deg);opacity:0}}
@keyframes smokePulse{0%{transform:translate3d(8%,4%,0) scale(.82);opacity:.22}100%{transform:translate3d(-5%,-5%,0) scale(1.18);opacity:.56}}
@keyframes smokeTravel{0%{right:-8%}100%{right:18%}}
@media(max-width:600px){.drive-motion i{width:85%;height:1px}.drive-motion span{right:-18%;bottom:14%;width:75%;height:22%;opacity:.32;animation:smokePulse 2.6s ease-in-out infinite alternate,smokeTravelMobile 6.5s cubic-bezier(.45,.05,.55,.95) infinite alternate}@keyframes smokeTravelMobile{0%{right:-28%}100%{right:8%}}}
@media(prefers-reduced-motion:reduce){.drive-motion{display:none}}
/* Real drifting footage: car body, slide and original wheels move together */
.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 54%;filter:saturate(.65) contrast(1.18) brightness(.58) hue-rotate(30deg);pointer-events:none}
.hero-home.has-live-background:has(.hero-video){animation:none;background-size:cover}
.hero-home:has(.hero-video)::after{z-index:1;background:linear-gradient(90deg,rgba(3,4,3,.94) 0%,rgba(3,4,3,.66) 46%,rgba(3,4,3,.2) 78%),linear-gradient(0deg,rgba(3,4,3,.78),transparent 48%)}
.hero-home:has(.hero-video) .hero-grid{z-index:2}.hero-home:has(.hero-video) .hero-glow{z-index:2}
.video-credit{position:absolute;z-index:5;left:16px;bottom:13px;color:rgba(255,255,255,.34);font-size:8px;letter-spacing:.04em}
.video-credit:hover{color:var(--lime)}
@media(max-width:900px){.hero-video{object-position:58% center}}
@media(max-width:600px){.hero-video{object-position:62% center;filter:saturate(.65) contrast(1.2) brightness(.5) hue-rotate(30deg)}.video-credit{left:12px;bottom:8px;font-size:6px}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
/* Rotating rim highlights follow the car travel path */
.wheel-rig{position:absolute;right:3%;bottom:13%;width:43%;height:23%;opacity:.48;animation:wheelRigTravel 7s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.wheel{position:absolute;bottom:3%;width:clamp(58px,6.2vw,102px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(124,218,36,.95) 0 5deg,transparent 6deg 22deg);border:2px solid rgba(124,218,36,.55);box-shadow:0 0 15px rgba(124,218,36,.35),inset 0 0 14px rgba(124,218,36,.25);filter:blur(.35px);animation:wheelSpin .42s linear infinite}
.wheel::after{content:'';position:absolute;inset:30%;border-radius:50%;border:2px solid rgba(230,255,220,.5);box-shadow:0 0 8px rgba(124,218,36,.6)}
.wheel-rear{left:4%}.wheel-front{right:1%}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
@keyframes wheelRigTravel{0%{transform:translate3d(13vw,1.5%,0) scale(.97)}45%{transform:translate3d(2vw,0,0) scale(1)}100%{transform:translate3d(-10vw,-1%,0) scale(1.04)}}
@media(max-width:900px){.wheel-rig{right:-2%;bottom:17%;width:52%;height:18%}.wheel{width:clamp(46px,9vw,76px)}}
@media(max-width:600px){.wheel-rig{right:-17%;bottom:17%;width:72%;height:17%;opacity:.4;animation-name:wheelRigTravelMobile;animation-duration:6.5s}.wheel{width:44px}.wheel-rear{left:8%}.wheel-front{right:2%}@keyframes wheelRigTravelMobile{0%{transform:translate3d(18vw,1%,0) scale(.92)}50%{transform:translate3d(3vw,0,0) scale(.98)}100%{transform:translate3d(-14vw,-1%,0) scale(1.04)}}}
.home-pricing{padding-top:95px;background:#070907;border-top:1px solid #20251f}
.home-pricing .section-head{margin:0 auto 42px;text-align:center}
.home-pricing .section-head>p:last-child{color:var(--muted);margin-top:14px}
@media(min-width:901px){.hero-home .hero-actions{justify-content:flex-start;margin-left:0;margin-right:0}}
@media(max-width:600px){.home-pricing{padding-top:64px}.home-pricing .section-head{margin-bottom:28px}}
/* Final small-screen pass: fluid widths, tighter rhythm and touch-friendly controls. */
@media(max-width:600px){
.music-site .container{width:calc(100% - 32px);max-width:100%}
.hero-home{min-height:100svh;overflow:hidden}
.hero-home .hero-content{width:calc(100% - 32px);padding:94px 0 82px;text-align:left}
.hero-home .eyebrow{max-width:100%;font-size:9px;margin-bottom:13px}
.hero-home h1{width:100%;max-width:295px;font-size:clamp(40px,12.5vw,50px);line-height:.94;overflow-wrap:normal}
.hero-home .hero-sub{max-width:270px;margin-top:18px;font-size:13px;line-height:1.5}
.hero-home .hero-actions{width:100%;max-width:245px;margin:22px 0 0;align-items:stretch}
.hero-actions .button{width:100%;min-height:50px;padding:13px 18px;font-size:11px}
.hero-logo-platforms{max-width:100%;margin:21px 0 0}
.hero-logo-platforms .logo-platform-grid{justify-content:flex-start;flex-wrap:wrap;gap:12px 17px}
.track-stamp.live-clock{right:12px;bottom:12px}
.ticker{overflow:hidden;white-space:nowrap}
.home-core,.home-pricing{padding:56px 0}
.home-core .container{gap:28px}
.home-points article{grid-template-columns:24px 1fr;gap:7px 12px;padding:16px 0}
.home-points article p{grid-column:2;max-width:none}
.home-final-cta{max-width:100%;width:100%}
.home-pricing .section-head{text-align:left;margin:0 0 25px}
.pricing-grid{gap:16px}
.price-card{width:100%;min-width:0;padding:22px;gap:25px;border-radius:15px}
.price-card h2{font-size:32px}.price-card ul{gap:12px;margin:0}.price-card li{font-size:12px;line-height:1.45}
.price-card .button{min-height:50px;font-size:11px}
.site-footer{padding-left:16px;padding-right:16px}
}
@media(max-width:360px){
.music-site .container,.hero-home .hero-content{width:calc(100% - 24px)}
.hero-home h1{font-size:38px}.hero-home .hero-sub{font-size:12px}
.nav-links{left:56px!important;padding-left:25px!important;padding-right:18px!important}
}
/* Keep the complete text wordmark visible beside the mobile menu control. */
@media(max-width:600px){
.music-site .site-nav{gap:12px}
.navbar-brand,.nav-open .navbar-brand{width:auto;max-width:calc(100vw - 86px);min-width:0;overflow:visible}
.brand-wordmark,.nav-open .brand-wordmark{display:block;max-width:calc(100vw - 86px);overflow:visible;text-overflow:clip;font-size:clamp(15px,5vw,19px);letter-spacing:-.055em}
.menu-toggle{flex:0 0 38px}
}
@media(max-width:360px){
.navbar-brand,.nav-open .navbar-brand,.brand-wordmark,.nav-open .brand-wordmark{max-width:calc(100vw - 76px)}
.brand-wordmark,.nav-open .brand-wordmark{font-size:15px}
}
/* Balanced pricing-page typography and spacing. */
.pricing-section{padding:88px 0 72px}
.pricing-section .pricing-grid{gap:24px}
.pricing-section .price-card{min-height:520px;padding:38px;gap:34px}
.pricing-section .plan-name{margin:0 0 12px;font-size:11px;line-height:1.4}
.pricing-section .price-card h2{margin:0 0 17px;font-size:clamp(40px,4.4vw,58px);line-height:1}
.pricing-section .price-card p{max-width:420px;margin:0;font-size:15px;line-height:1.65}
.pricing-section .price-card ul{margin:0;gap:13px}
.pricing-section .price-card li{align-items:flex-start;font-size:14px;line-height:1.5}
.pricing-section .price-card li span{flex:0 0 auto}
.pricing-section .pricing-note{padding:0 16px;margin-top:25px;text-align:center;line-height:1.55}
.submit-music-section{padding:72px 0;background:#0b0e0a;border-top:1px solid #252b23}
.submit-music-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center}
.submit-music-inner h2{margin:7px 0 0;font:700 clamp(38px,5vw,68px)/1 'Space Grotesk',sans-serif;letter-spacing:-.05em}
.submit-music-inner .button{flex:0 0 auto;margin-left:auto;margin-right:auto}
@media(max-width:600px){.submit-music-section{padding:50px 0}.submit-music-inner{display:flex;gap:23px;text-align:center}.submit-music-inner h2{font-size:34px;line-height:1.05}.submit-music-inner .button{width:min(100%,280px);margin:0 auto}}
@media(max-width:900px){
.pricing-section{padding:65px 0}.pricing-section .pricing-grid{gap:18px}
.pricing-section .price-card{min-height:0;padding:30px;gap:28px}
}
@media(max-width:600px){
.page-hero{min-height:auto;padding:112px 0 54px;align-items:flex-end}
.page-hero .eyebrow{font-size:9px;margin-bottom:14px}
.page-hero h1{max-width:300px;font-size:36px;line-height:1.02;margin:0}
.page-hero .lead{max-width:300px;margin-top:17px;font-size:13px;line-height:1.55}
.pricing-section{padding:44px 0 50px}
.pricing-section .pricing-grid{gap:14px}
.pricing-section .price-card{padding:22px;gap:24px;border-radius:15px}
.pricing-section .plan-name{font-size:9px;margin-bottom:9px}
.pricing-section .price-card h2{font-size:32px;margin-bottom:13px}
.pricing-section .price-card p{font-size:13px;line-height:1.55}
.pricing-section .price-card li{font-size:12px;line-height:1.45}
.pricing-section .price-card .button{margin-top:2px}
.pricing-section .pricing-note{margin-top:20px;font-size:10px}
}
/* Blog and SEO content */
.blog-masthead{padding:165px 0 80px;background:radial-gradient(circle at 78% 28%,rgba(124,218,36,.14),transparent 30%),linear-gradient(135deg,#050605,#0d110c);border-bottom:1px solid #252b23}
.blog-masthead h1{margin:13px 0 24px;font-size:clamp(62px,9vw,126px);line-height:.82;letter-spacing:-.07em}.blog-masthead h1 span{color:var(--lime)}.blog-masthead>div>p:last-child{max-width:600px;color:var(--muted);font-size:17px;line-height:1.65}
.blog-section{background:#070907}.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.blog-featured{display:grid;grid-template-columns:1.2fr 1fr;min-height:500px;overflow:hidden;border:1px solid #283025;border-radius:22px;background:#0e110e}
.blog-featured-media{display:grid;place-items:center;min-height:500px;overflow:hidden;background:radial-gradient(circle,rgba(124,218,36,.2),transparent 45%),#090b09;color:var(--lime);font:800 32px 'Syne'}.blog-featured-media img{width:100%;height:100%;object-fit:cover}
.blog-featured-copy{display:flex;flex-direction:column;justify-content:center;padding:46px}.blog-featured-copy h2{margin:15px 0;font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.05em}.blog-featured-copy>p{color:var(--muted);line-height:1.7}
.blog-labels{display:flex;align-items:center;gap:12px;color:#899184;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.blog-labels span{padding:6px 9px;border-radius:999px;background:rgba(124,218,36,.12);color:var(--lime)}.blog-byline{margin-top:17px;color:#7e877a;font-size:11px}
.blog-section-title{margin:85px 0 30px}.blog-section-title h2{margin-top:7px;font-size:clamp(38px,5vw,62px)}
.blog-card{overflow:hidden;border:1px solid #252b23;border-radius:20px;background:#0e110e}
.blog-card-media{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(circle at 70% 30%,rgba(124,218,36,.25),transparent 35%),#090b09;color:var(--lime);font:800 42px 'Syne'}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.blog-card:hover .blog-card-media img{transform:scale(1.04)}
.blog-card-copy{padding:27px}.blog-card time,.blog-post-meta{color:#818a7d;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.blog-card h2{margin:10px 0 12px;font-size:clamp(24px,3vw,36px);line-height:1.08;letter-spacing:-.04em}.blog-card p{color:var(--muted);line-height:1.65}
.blog-read,.blog-back{display:inline-block;margin-top:15px;color:var(--lime);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.blog-empty{padding:80px 0;text-align:center}.blog-empty h2{font-size:42px}
.blog-post-head{padding:165px 0 70px;background:linear-gradient(135deg,#050605,#10150e);border-bottom:1px solid #252b23}
.blog-post-head h1{margin:14px 0 24px;font-size:clamp(48px,7vw,92px);line-height:.94;letter-spacing:-.055em}.blog-back{margin:0 0 35px}
.blog-post-meta{display:flex;gap:20px}.blog-cover{margin-top:55px}.blog-cover img{width:100%;max-height:650px;object-fit:cover;border-radius:20px;border:1px solid #252b23}
.blog-content{max-width:780px;padding-top:60px;padding-bottom:90px;color:#d5dbd1;font-size:18px;line-height:1.9;white-space:normal}
.blog-editor .blog-content-input{min-height:330px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}.blog-featured{grid-template-columns:1fr}.blog-featured-media{min-height:360px}.blog-post-head{padding-top:125px}}
@media(max-width:600px){
.blog-masthead{padding:112px 0 54px}.blog-masthead h1{font-size:48px;line-height:.88}.blog-masthead>div>p:last-child{font-size:13px}.blog-featured{min-height:0;border-radius:15px}.blog-featured-media{min-height:220px}.blog-featured-copy{padding:22px}.blog-featured-copy h2{font-size:29px}.blog-section-title{margin:55px 0 24px}
.blog-section{padding:45px 0}.blog-grid{gap:15px}.blog-card{border-radius:15px}.blog-card-copy{padding:20px}.blog-card h2{font-size:25px}.blog-card p{font-size:13px}
.blog-post-head{padding:105px 0 48px}.blog-post-head h1{font-size:38px;line-height:1.03}.blog-back{margin-bottom:27px}.blog-post-meta{display:grid;gap:6px}
.blog-cover{margin-top:25px}.blog-cover img{border-radius:13px}.blog-content{padding-top:35px;padding-bottom:60px;font-size:15px;line-height:1.75}
}
/* Auto-generated image-style wordmark from the Admin Website Name text. */
.navbar-brand{position:relative;isolation:isolate;padding:9px 14px 9px 18px;border:1px solid rgba(124,218,36,.22);border-radius:4px 14px 4px 14px;background:linear-gradient(135deg,rgba(124,218,36,.13),rgba(4,6,4,.62) 52%,rgba(255,255,255,.035));box-shadow:inset 3px 0 0 var(--lime),0 12px 35px rgba(0,0,0,.24);transform:skewX(-5deg)}
.navbar-brand::before,.navbar-brand::after{content:'';position:absolute;pointer-events:none}.navbar-brand::before{right:7px;top:5px;width:18px;height:2px;background:var(--lime);box-shadow:0 5px 0 rgba(124,218,36,.42)}.navbar-brand::after{left:6px;bottom:5px;width:7px;height:7px;border-left:1px solid var(--lime);border-bottom:1px solid var(--lime)}
.navbar-brand .brand-wordmark{overflow:visible;max-width:none;font-family:var(--logo-font);font-size:var(--logo-size);font-weight:800;line-height:1;letter-spacing:-.07em;transform:none;text-shadow:2px 2px 0 rgba(124,218,36,.4),-1px 0 0 rgba(255,255,255,.12)}
.navbar-brand .brand-wordmark::before{content:'';position:absolute;left:0;right:0;top:48%;height:1px;background:rgba(255,255,255,.22);mix-blend-mode:screen}.navbar-brand .brand-wordmark::after{left:3px;top:2px;z-index:-1;color:var(--lime);opacity:.38;clip-path:inset(52% 0 8% 0)}
.footer-brand{display:inline-block}.footer-brand .footer-wordmark{max-width:100%;font-size:24px;transform:skewX(-6deg);overflow:visible}
@media(max-width:600px){
.navbar-brand,.nav-open .navbar-brand{max-width:calc(100vw - 78px);padding:8px 12px 8px 15px}
.navbar-brand .brand-wordmark,.nav-open .navbar-brand .brand-wordmark{max-width:calc(100vw - 108px);font-size:clamp(14px,4.6vw,18px);white-space:nowrap}
.footer-brand .footer-wordmark{max-width:calc(100vw - 32px);font-size:20px}
}
/* Phonk monogram and centered mobile hero composition. */
.navbar-brand{gap:9px}.brand-emblem{position:relative;display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:50% 44% 50% 38%;background:repeating-conic-gradient(from 25deg,rgba(124,218,36,.95) 0 8deg,#10150e 9deg 22deg);color:#fff;font:800 14px/1 'Syne';text-shadow:1px 1px 0 #000;box-shadow:0 0 0 2px #080a08,0 0 20px rgba(124,218,36,.3);transform:rotate(-8deg)}
.brand-emblem::before{content:'';position:absolute;inset:5px;border-radius:50%;background:#080a08;z-index:-1}.brand-emblem::after{content:'';position:absolute;width:130%;height:4px;background:rgba(255,255,255,.38);transform:rotate(-25deg)}
@media(max-width:600px){
.hero-home .hero-content{display:flex;flex-direction:column;align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.hero-home .eyebrow,.hero-home h1,.hero-home .hero-sub{margin-left:auto;margin-right:auto;text-align:center}
.hero-home .hero-actions{justify-content:center;align-items:center;margin-left:auto;margin-right:auto}
.hero-home .hero-actions .button{margin-left:auto;margin-right:auto}
.hero-logo-platforms{width:100%;max-width:300px;margin-left:auto;margin-right:auto}
.hero-logo-platforms .logo-platform-grid{justify-content:center;align-items:center;gap:15px 20px}
.hero-logo-platforms .logo-platform-grid a{display:grid;place-items:center}
.brand-emblem{flex-basis:25px;width:25px;height:25px;font-size:11px}
.navbar-brand,.nav-open .navbar-brand{gap:7px;max-width:calc(100vw - 76px)}
.navbar-brand .brand-wordmark,.nav-open .navbar-brand .brand-wordmark{max-width:calc(100vw - 119px);font-size:clamp(13px,4.2vw,17px)}
}
/* Text-only logo: no frame, badge, border or surrounding shape. */
.navbar-brand,.nav-open .navbar-brand{width:auto;max-width:calc(100vw - 82px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;gap:0;overflow:visible}
.navbar-brand::before,.navbar-brand::after{display:none}
.navbar-brand .brand-wordmark{position:relative;display:block;max-width:calc(100vw - 82px);overflow:visible;color:var(--logo-color);font-family:var(--logo-font);font-size:var(--logo-size);font-weight:800;line-height:1;letter-spacing:-.07em;white-space:nowrap;transform:skewX(-6deg);text-shadow:2px 2px 0 rgba(124,218,36,.42)}
.navbar-brand .brand-wordmark::before{display:none}
.navbar-brand .brand-wordmark::after{display:block;left:2px;top:2px;opacity:.3}
@media(max-width:600px){.navbar-brand,.nav-open .navbar-brand{max-width:calc(100vw - 75px)}.navbar-brand .brand-wordmark,.nav-open .navbar-brand .brand-wordmark{max-width:calc(100vw - 75px);font-size:clamp(14px,4.8vw,var(--logo-size))}}
/* Stylish text-only Phonk wordmark. */
.navbar-brand .brand-wordmark{letter-spacing:-.035em;transform:skewX(-4deg) scaleY(1.08);transform-origin:left center;text-shadow:2px 2px 0 rgba(124,218,36,.58),-1px -1px 0 rgba(255,255,255,.15),0 0 18px rgba(124,218,36,.12)}
.navbar-brand .brand-wordmark::after{left:3px;top:2px;color:var(--lime);opacity:.34;clip-path:polygon(0 48%,100% 41%,100% 67%,0 72%);transform:translateX(1px)}
.navbar-brand:hover .brand-wordmark{color:#fff;text-shadow:3px 2px 0 var(--lime),-2px 0 0 rgba(255,255,255,.16),0 0 22px rgba(124,218,36,.24)}
.footer-brand .footer-wordmark{letter-spacing:-.03em;text-shadow:2px 2px 0 rgba(124,218,36,.5)}
/* Readable final wordmark: bold Phonk character without obscuring the name. */
.navbar-brand .brand-wordmark,.nav-open .navbar-brand .brand-wordmark{font-family:var(--logo-font);font-weight:800;letter-spacing:-.015em;line-height:1.05;transform:none;color:var(--logo-color);text-shadow:1.5px 1.5px 0 rgba(124,218,36,.5),0 0 12px rgba(0,0,0,.45)}
.navbar-brand .brand-wordmark::before,.navbar-brand .brand-wordmark::after{display:none}
.navbar-brand:hover .brand-wordmark{color:var(--logo-color);text-shadow:2px 2px 0 var(--lime),0 0 14px rgba(124,218,36,.16)}
.footer-brand .footer-wordmark{font-family:var(--logo-font);letter-spacing:-.015em;transform:none}
@media(max-width:600px){.navbar-brand .brand-wordmark,.nav-open .navbar-brand .brand-wordmark{font-size:clamp(15px,4.8vw,var(--logo-size));letter-spacing:0}}