:root{
  --bg:#070A1A;
  --bg2:#0B1230;
  --card:rgba(255,255,255,.06);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.12);
  --a:#8B5CF6;
  --b:#22D3EE;
  --c:#FBBF24;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(139,92,246,.30), transparent 60%),
    radial-gradient(900px 700px at 85% 20%, rgba(34,211,238,.22), transparent 55%),
    radial-gradient(900px 700px at 50% 90%, rgba(251,191,36,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{color:inherit}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:#fff; color:#000; border-radius:10px; z-index:99}

.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.row{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* Top bar */
.topbar{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(7,10,26,.55); border-bottom:1px solid var(--line);}
.brand{display:flex; align-items:center; gap:12px; padding:14px 0; text-decoration:none}
.mark{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-weight:900; letter-spacing:.6px; background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(34,211,238,.85)); box-shadow: var(--shadow); overflow:hidden;}
.mark img{width:44px; height:44px; object-fit:cover; border-radius:14px; display:block}
.brand-name{font-weight:900; letter-spacing:.2px}
.brand-tag{font-size:.92rem; color:var(--muted)}

.nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.nav a{text-decoration:none; color:var(--muted); padding:10px 10px; border-radius:12px;}
.nav a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.pill{border:1px solid var(--line); color:var(--text) !important}

/* Hero */
.hero{position:relative; padding:58px 0 26px; background-image: url('assets/backdrop.jpg'); background-size: cover; background-position: center; border-bottom: 1px solid rgba(255,255,255,.10);}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero{background-image: image-set(url('assets/backdrop.webp') type('image/webp'), url('assets/backdrop.jpg') type('image/jpeg'));}
}
.hero::before{content:""; position:absolute; inset:0; background: radial-gradient(900px 700px at 25% 10%, rgba(139,92,246,.30), transparent 55%), radial-gradient(800px 650px at 80% 25%, rgba(34,211,238,.20), transparent 55%), linear-gradient(180deg, rgba(7,10,26,.70), rgba(11,18,48,.84));}
.hero > .wrap{position:relative; z-index:1}

.grid2{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:stretch}
.kicker{display:inline-flex; gap:8px; align-items:center; color:rgba(255,255,255,.80); margin:0 0 12px}

h1{font-size: clamp(2.1rem, 4vw, 3.2rem); line-height:1.05; margin:0 0 12px}
.highlight{background: linear-gradient(90deg, rgba(34,211,238,.95), rgba(139,92,246,.95), rgba(251,191,36,.92)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lead{color:rgba(255,255,255,.80); font-size:1.06rem; line-height:1.6; max-width:55ch}

.cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 14px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:14px; background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(34,211,238,.90)); border:1px solid rgba(255,255,255,.08); text-decoration:none; font-weight:800; box-shadow: var(--shadow); cursor:pointer;}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:rgba(255,255,255,.10); box-shadow:none; color:var(--text)}
.btn.small{padding:10px 14px; border-radius:12px}

.chips{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0}
.chip{border:1px solid rgba(255,255,255,.16); background: rgba(7,10,26,.35); padding:8px 10px; border-radius:999px; color:rgba(255,255,255,.80); font-size:.95rem;}

/* Sections */
.section{padding:62px 0}
.section.compact{padding:30px 0 28px}
.section.alt{background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

h2{font-size: clamp(1.55rem, 2.4vw, 2.1rem); margin:0 0 8px}
.sub{color:var(--muted); margin:0 0 18px; max-width:74ch; line-height:1.6}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.card{border:1px solid var(--line); background: var(--card); border-radius: var(--radius); padding:18px; box-shadow: 0 0 0 rgba(0,0,0,0);}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted); line-height:1.6}

/* Hero showcase card */
.showcase{position:relative; overflow:hidden; padding:22px; min-height:360px; background: radial-gradient(800px 400px at 30% 20%, rgba(251,191,36,.20), transparent 60%), radial-gradient(800px 400px at 70% 30%, rgba(34,211,238,.18), transparent 60%), radial-gradient(900px 600px at 55% 90%, rgba(139,92,246,.25), transparent 60%), rgba(255,255,255,.05);}
.badge{position:absolute; left:18px; top:18px; border:1px solid var(--line); background: rgba(7,10,26,.55); padding:8px 10px; border-radius:999px; font-weight:900; z-index:2;}
.pulse{position:absolute; inset:-80px; background: conic-gradient(from 180deg, rgba(34,211,238,.12), rgba(139,92,246,.18), rgba(251,191,36,.10), rgba(34,211,238,.12)); filter: blur(26px); animation: spin 10s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.wave{position:absolute; left:-10%; right:-10%; height:2px; top:45%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); opacity:.35; transform:rotate(-10deg)}
.wave.w2{top:55%; opacity:.22; transform:rotate(8deg)}
.wave.w3{top:64%; opacity:.16; transform:rotate(-4deg)}

.art{position:absolute; right:16px; top:64px; width:128px; height:128px; border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.20); box-shadow: var(--shadow); z-index:2; background: rgba(7,10,26,.35);}
.art img{width:100%; height:100%; object-fit:cover; display:block}

.showcase-body{position:relative; z-index:2; padding-top:72px; padding-right:168px; display:flex; flex-direction:column; gap:10px}
.showcase-h{margin:0; font-size:1.05rem; letter-spacing:.2px}
.showcase-p{margin:0; color:var(--muted); line-height:1.6}

.mini-grid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; margin-top:6px}
.mini-item{border:1px solid rgba(255,255,255,.14); background: rgba(7,10,26,.35); border-radius:14px; padding:10px 12px}
.mini-k{font-size:.85rem; color:var(--muted); font-weight:800}
.mini-v{font-weight:900; margin-top:2px}

.cta-tight{margin:10px 0 0}

.dot{width:6px; height:6px; border-radius:99px; background:linear-gradient(135deg, var(--b), var(--a))}

/* Banner + QR */
.banner{display:grid; grid-template-columns: 1.3fr .7fr; gap:18px; align-items:center; padding:22px;}
.banner .sub{margin:0 0 12px}
.h3{font-size:1.25rem; margin:0 0 6px}
.qr{display:flex; justify-content:flex-end}
.qr-card{display:flex; gap:12px; align-items:center; text-decoration:none; border:1px solid rgba(255,255,255,.14); background: rgba(7,10,26,.35); padding:12px 14px; border-radius:16px; min-width:260px;}
.qr-card:hover{background: rgba(255,255,255,.06)}
.qr-card img{width:96px; height:96px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04)}
.qr-meta{display:flex; flex-direction:column; gap:4px}
.qr-title{font-weight:900}
.qr-note{color:var(--muted); font-size:.92rem}

/* Art band */
.artband{position:relative; overflow:hidden; padding:56px 0}
.artband::before{content:""; position:absolute; inset:0; background-image:url('assets/backdrop.jpg'); background-size:cover; background-position:center; opacity:.18; transform:scale(1.05)}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .artband::before{background-image:image-set(url('assets/backdrop.webp') type('image/webp'), url('assets/backdrop.jpg') type('image/jpeg'));}
}
.artband::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,10,26,.86), rgba(11,18,48,.90));}
.artband .wrap{position:relative; z-index:1}
.band{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); border-radius: var(--radius); padding:20px; box-shadow: var(--shadow)}
.band-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.band-pill{border:1px solid rgba(255,255,255,.14); background: rgba(7,10,26,.35); padding:8px 10px; border-radius:999px; color:rgba(255,255,255,.82); font-weight:800; font-size:.92rem}
.band-cta{display:flex; flex-direction:column; gap:10px; min-width:220px}

/* Packages */
.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:stretch}
.price{position:relative}
.price ul{margin:10px 0 14px; padding:0 0 0 18px; color:var(--muted); line-height:1.65}
.price-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.amount{font-weight:900; font-size:1.4rem}

.featured{background: linear-gradient(180deg, rgba(139,92,246,.16), rgba(34,211,238,.10)); border-color: rgba(34,211,238,.28);}
.price.featured{padding-top:26px}
.ribbon{position:absolute; top:-12px; left:16px; padding:7px 10px; border-radius:999px; font-size:.9rem; font-weight:900; background: rgba(251,191,36,.18); border: 1px solid rgba(251,191,36,.32); box-shadow: var(--shadow)}

/* Fancy background for packages */
.artbg{position:relative; overflow:hidden}
.artbg::before{content:""; position:absolute; inset:0; background-image:url('assets/backdrop.jpg'); background-size:cover; background-position:center; opacity:.10; transform:scale(1.06)}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .artbg::before{background-image:image-set(url('assets/backdrop.webp') type('image/webp'), url('assets/backdrop.jpg') type('image/jpeg'));}
}
.artbg::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,10,26,.88), rgba(11,18,48,.92));}
.artbg > .wrap{position:relative; z-index:1}

/* Steps */
.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:14px}
.step .num{width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-weight:900; background: rgba(255,255,255,.07); border:1px solid var(--line); margin-bottom:10px;}

/* FAQ */
.faq{display:grid; gap:10px; margin-top:14px}
summary{cursor:pointer; font-weight:900}

/* Contact */
.contact-cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:12px}

/* Samples */
.samples{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:14px}

/* Audio */
audio{width:100%; margin-top:12px}

/* Facebook embed */
.fb{padding:14px}
.fb iframe{width:100%; max-width:100%; border-radius:16px}

/* Social embeds */
.social-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; align-items:start}
.social-card{padding:14px}
.social-card h3{margin:0 0 10px}
.ig{overflow:hidden}
.ig .instagram-media{margin:0 auto !important; max-width:100% !important; width:100% !important}

/* Callouts */
.tight{padding:14px}
.callout .bullets{display:grid; gap:10px; margin-top:10px}
.callout .bullet{display:flex; gap:10px; align-items:flex-start; color:var(--muted)}

/* Forms */
.form{padding:18px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
label{color:var(--muted); font-weight:800}
input, select, textarea{border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); padding:12px 12px; outline:none;}
input:focus, select:focus, textarea:focus{border-color: rgba(34,211,238,.55)}
.checks{display:grid; gap:8px; color:var(--muted)}
.checks input{margin-right:8px}
.hidden{display:none}
.fine{color:var(--muted); font-size:.92rem; margin:10px 0 0}

/* Footer */
.footer{padding:22px 0; border-top:1px solid var(--line)}
.foot{align-items:flex-start}
.muted{color:var(--muted)}

/* Request page */
.page-hero{padding:44px 0 18px; border-bottom:1px solid rgba(255,255,255,.10)}
.page-hero .lead{max-width:72ch}
.form-layout{display:grid; grid-template-columns: .9fr 1.1fr; gap:16px; align-items:start}
.sidebar{position:sticky; top:84px}
.sidebar h3{margin:0 0 10px}
.sidebar .mini-list{display:grid; gap:8px; color:var(--muted); line-height:1.6}
.sidebar .mini-list a{color:var(--text)}

.stepper{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.progress{height:10px; background: rgba(255,255,255,.08); border:1px solid var(--line); border-radius:999px; overflow:hidden}
.progress > div{height:100%; width:0%; background: linear-gradient(90deg, rgba(34,211,238,.9), rgba(139,92,246,.9));}
.step-indicator{color:var(--muted); font-weight:900}

.form-step{display:none}
.form-step.active{display:block}
.form-step h3{margin:0 0 8px}
.form-step .sub{margin:0 0 14px}

.grid2a{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.radio-row{display:grid; gap:10px}
.radio-row label{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-weight:800}
.radio-row input{margin-top:3px}

.error{color:#fff; background: rgba(244,63,94,.14); border:1px solid rgba(244,63,94,.28); padding:10px 12px; border-radius:14px; margin:10px 0}
.form-nav{display:flex; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap}
.btn.secondary{background: rgba(255,255,255,.10); box-shadow:none}
.btn.secondary:hover{background: rgba(255,255,255,.14)}
.btn[disabled]{opacity:.55; cursor:not-allowed; filter:none}

.agreement-box{max-height:280px; overflow:auto; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(7,10,26,.25)}
.agreement-box .checks{gap:10px}

/* Responsive */
@media (max-width: 920px){
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
  .samples{grid-template-columns:1fr}
  .banner{grid-template-columns:1fr}
  .social-grid{grid-template-columns:1fr}
  .qr{justify-content:flex-start}
  .nav{display:none}
  .form-layout{grid-template-columns:1fr}
  .sidebar{position:static}

  .showcase-body{padding-right:0}
  .art{right:12px; top:72px; width:110px; height:110px}
  .band{flex-direction:column; align-items:flex-start}
  .band-cta{flex-direction:row; width:100%;}
}

@media (max-width: 520px){
  .cards{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr}
  .art{right:12px; top:78px; width:96px; height:96px}
  .qr-card{min-width:0; width:100%}
  .band-cta{flex-direction:column}
}

/* Fix dropdown option visibility (dark theme) */
select {
  color: inherit;
}

select option,
select optgroup {
  background: #111;   /* dark background for the dropdown list */
  color: #fff;        /* readable text */
}