/* DJ Omagh — DJ Susie Q | Tyrone Business Hub build */
:root{
  --bg:#070a12;
  --text:#e9ecff;
  --muted:#b7bfdc;
  --muted2:#92a0c9;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 22px;
  --radius2: 28px;
  --max: 1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 15% 10%, rgba(124,77,255,.18), transparent 55%),
              radial-gradient(1100px 700px at 85% 20%, rgba(255,63,164,.14), transparent 52%),
              radial-gradient(900px 600px at 50% 100%, rgba(124,77,255,.12), transparent 55%),
              var(--bg);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.hidden{display:none}
.skip{position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:10px 12px; border-radius:10px; z-index:9999}
.skip:focus{left:12px; top:12px}

.topbar{position:sticky; top:0; z-index:50; backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,10,18,.78), rgba(7,10,18,.35));
  border-bottom:1px solid rgba(255,255,255,.08);}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand__mark{width:42px; height:42px; border-radius:14px; position:relative;
  background: radial-gradient(circle at 30% 30%, rgba(255,63,164,.18), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(124,77,255,.24), transparent 60%),
              rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);}
.brand__mark .disc{position:absolute; inset:10px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 45% 45%, rgba(255,255,255,.18), rgba(255,255,255,.05));}
.brand__mark .pulse{position:absolute; inset:0; border-radius:14px; animation:pulse 2.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,63,164,0)}40%{box-shadow:0 0 0 14px rgba(255,63,164,.10)}100%{box-shadow:0 0 0 26px rgba(255,63,164,0)}}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__name{font-weight:800}
.brand__sub{font-size:12px; color:var(--muted2); font-weight:600}

.nav{display:flex; align-items:center; gap:16px}
.nav a{font-weight:600; color:var(--muted); font-size:14px}
.nav a:hover{color:var(--text)}
.burger{display:none; width:44px; height:44px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.04)}
.burger span{display:block; height:2px; width:18px; background:var(--text); margin:5px auto; border-radius:2px; opacity:.9}
.mobile{border-top:1px solid rgba(255,255,255,.08); background: rgba(7,10,18,.92)}
.mobile__inner{display:grid; gap:12px; padding:14px 0 18px}
.mobile a{color:var(--muted); font-weight:700}
.mobile a:hover{color:var(--text)}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.12); font-weight:800; transition:transform .12s ease, background .12s ease, border-color .12s ease}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:9px 12px; border-radius:14px; font-size:14px}
.btn--solid{background: linear-gradient(135deg, rgba(255,63,164,.95), rgba(124,77,255,.90)); border-color: rgba(255,255,255,.14)}
.btn--solid:hover{filter:brightness(1.06)}
.btn--ghost{background: rgba(255,255,255,.05)}
.btn--ghost:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16)}
.btn--block{width:100%; padding:14px 18px; border-radius:18px}

.hero{position:relative; padding:70px 0 34px; overflow:hidden}
.hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:34px; align-items:center}
.chip{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color:var(--muted); font-weight:700; font-size:13px}
.chip .dot{width:9px; height:9px; border-radius:999px; background: linear-gradient(135deg, rgba(124,77,255,1), rgba(255,63,164,1));
  box-shadow: 0 0 0 6px rgba(255,63,164,.12)}
h1{margin:14px 0 10px; font-size: clamp(38px, 4.6vw, 58px); line-height:1.04; letter-spacing:-.6px}
.glow{background: linear-gradient(90deg, rgba(255,63,164,1), rgba(124,77,255,1)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{margin:0 0 18px; color:var(--muted); font-size:16.5px; line-height:1.55; max-width: 56ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 18px}
.hero__stats{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0}
.stat{padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); min-width: 160px}
.stat__num{font-weight:900}
.stat__label{color:var(--muted2); font-weight:700; font-size:12px; margin-top:4px}
.micro{color:rgba(233,236,255,.72); font-size:12.5px; margin:12px 0 0; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.micro__badge{padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03)}
.micro__sep{opacity:.4}

.hero__visual{position:relative; min-height: 420px}
.visual-card{border-radius: var(--radius2); padding:18px; background: linear-gradient(180deg, rgba(15,23,49,.78), rgba(11,16,32,.78));
  border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow)}
.visual-card__top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.visual-title{font-weight:900}
.visual-pill{font-weight:900; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(124,77,255,.18)}
.equalizer{display:flex; gap:8px; align-items:flex-end; height: 180px; padding:18px 8px 10px; margin:10px 0 6px; border-radius: 20px;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08)}
.equalizer span{width:10%; border-radius: 12px; background: linear-gradient(180deg, rgba(255,63,164,.95), rgba(124,77,255,.85)); opacity:.85;
  transform-origin: bottom; animation: bounce 1.2s infinite ease-in-out}
.equalizer span:nth-child(2){animation-delay:.05s}
.equalizer span:nth-child(3){animation-delay:.12s}
.equalizer span:nth-child(4){animation-delay:.18s}
.equalizer span:nth-child(5){animation-delay:.24s}
.equalizer span:nth-child(6){animation-delay:.30s}
.equalizer span:nth-child(7){animation-delay:.36s}
.equalizer span:nth-child(8){animation-delay:.42s}
.equalizer span:nth-child(9){animation-delay:.48s}
.equalizer span:nth-child(10){animation-delay:.54s}
@keyframes bounce{0%,100%{height:20%}50%{height:95%}}
.visual-meta{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin:10px 0 14px}
.meta{border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); padding:12px 12px}
.meta__label{color:var(--muted2); font-size:12px; font-weight:800}
.meta__value{font-weight:900; margin-top:4px}
.visual-logos{display:flex; flex-wrap:wrap; gap:10px}
.logo-chip{padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); font-weight:800; font-size:12px; color:rgba(233,236,255,.85)}
.glow-orb{position:absolute; border-radius:999px; filter: blur(20px); opacity:.9; pointer-events:none}
.glow-orb--a{width:260px;height:260px; left:-70px; top:40px; background: rgba(255,63,164,.20)}
.glow-orb--b{width:220px;height:220px; right:-70px; top:10px; background: rgba(124,77,255,.22)}
.glow-orb--c{width:320px;height:320px; right:20px; bottom:-120px; background: rgba(255,63,164,.10)}
.hero__wave{position:absolute; left:0; right:0; bottom:-2px; height:90px; background: linear-gradient(to top, rgba(7,10,18,1), rgba(7,10,18,0)); opacity:.95}

.strip{padding:16px 0 18px}
.strip__inner{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px}
.strip__item{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius: 18px; border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03); color:rgba(233,236,255,.84); font-weight:800; font-size:13px}
.strip__icon{width:26px; height:26px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,63,164,.12);
  border:1px solid rgba(255,255,255,.12)}

.section{padding:68px 0}
.section--alt{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06)}
.section__head{max-width: 760px}
.section__head h2{margin:0 0 10px; font-size: clamp(28px, 3.2vw, 40px)}
.section__sub{margin:0; color:var(--muted); line-height:1.6}

.cards{margin-top:22px; display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.card{border-radius: var(--radius); border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); padding:18px; box-shadow: 0 14px 40px rgba(0,0,0,.22)}
.card__icon{width:44px; height:44px; border-radius: 16px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); font-size:18px}
.card h3{margin:12px 0 8px; font-size:18px}
.card p{margin:0 0 10px; color:var(--muted); line-height:1.6}

.ticks{list-style:none; padding:0; margin:0}
.ticks li{position:relative; padding-left:22px; margin:10px 0; color:rgba(233,236,255,.82); font-weight:700; font-size:13.5px}
.ticks li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:4px;
  background: linear-gradient(135deg, rgba(255,63,164,1), rgba(124,77,255,1)); box-shadow: 0 0 0 5px rgba(255,63,164,.10)}

.callout{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03)}
.callout h3{margin:0 0 6px}
.callout p{margin:0; color:var(--muted); line-height:1.6}
.callout__right{display:flex; gap:10px; flex-wrap:wrap}

.pricing{margin-top:22px; display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.price{border-radius: var(--radius2); border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); padding:18px; position:relative;
  box-shadow: 0 14px 40px rgba(0,0,0,.20)}
.price__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.price__top h3{margin:0; font-size:18px}
.price__tag{font-weight:900; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04)}
.price__body{margin:12px 0 14px}
.price--featured{border-color: rgba(255,63,164,.20); background: linear-gradient(180deg, rgba(255,63,164,.10), rgba(124,77,255,.08))}
.price__ribbon{position:absolute; top:14px; left:14px; font-weight:1000; font-size:11px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(124,77,255,.20)}
.fineprint{margin:16px 0 0; color:rgba(233,236,255,.70); font-size:13px; line-height:1.6}

.gallery{margin-top:22px; display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:12px}
.tile{position:relative; border-radius: var(--radius2); border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); min-height: 180px; overflow:hidden}
.tile__label{position:absolute; left:14px; bottom:14px; font-weight:1000; padding:8px 10px; border-radius: 16px; border:1px solid rgba(255,255,255,.12); background: rgba(7,10,18,.55)}
.tile--a{grid-row: span 2; min-height: 372px}

.formwrap{margin-top:22px; display:grid; grid-template-columns: 1.25fr .75fr; gap:14px; align-items:start}
.form{border-radius: var(--radius2); border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding:18px; box-shadow: 0 14px 40px rgba(0,0,0,.20)}
label{display:block; font-weight:800; color:rgba(233,236,255,.88); font-size:13.5px}
input, select, textarea{width:100%; margin-top:7px; padding:12px 12px; border-radius: 16px; border:1px solid rgba(255,255,255,.12); background: rgba(7,10,18,.38); color:var(--text); outline:none; font: inherit}
input:focus, select:focus, textarea:focus{border-color: rgba(255,63,164,.38); box-shadow: 0 0 0 4px rgba(255,63,164,.10)}
textarea{resize:vertical}
.grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-bottom:12px}
.form__note{margin:12px 0 0; color:rgba(233,236,255,.64); font-size:12.5px; line-height:1.5}
.side__card{border-radius: var(--radius2); border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding:18px; box-shadow: 0 14px 40px rgba(0,0,0,.20)}
.divider{height:1px; background: rgba(255,255,255,.10); margin:14px 0}
.side__small{margin:0 0 12px; color:rgba(233,236,255,.72); line-height:1.55; font-size:13px}

.faq{margin-top:16px; display:grid; gap:10px; max-width: 900px}
.faq__item{border-radius: 18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding: 12px 14px}
.faq__item summary{cursor:pointer; font-weight:900; list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__body{margin-top:10px; color:rgba(233,236,255,.74); line-height:1.6}

.final{padding:64px 0; border-top:1px solid rgba(255,255,255,.06); background: radial-gradient(800px 400px at 50% 0%, rgba(255,63,164,.12), transparent 60%)}
.final__inner{border-radius: var(--radius2); border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding:24px; text-align:center; box-shadow: var(--shadow)}
.final__inner h2{margin:0 0 8px}
.final__inner p{margin:0 0 14px; color:var(--muted); line-height:1.6}
.final__cta{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}

.footer{padding:22px 0 28px; border-top:1px solid rgba(255,255,255,.06)}
.footer__inner{display:flex; gap:16px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap}
.footer__brand{font-weight:1000}
.footer__small{color:rgba(233,236,255,.62); font-weight:700; margin-top:4px; font-size:13px}
.footer__links{display:flex; gap:14px; flex-wrap:wrap; color:rgba(233,236,255,.72); font-weight:800; font-size:13px}
.footer__note{flex-basis:100%; color:rgba(233,236,255,.60); font-size:12.5px; line-height:1.5}
.footer__note a{color:rgba(233,236,255,.85); text-decoration:underline; text-underline-offset:3px}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease}
.reveal.on{opacity:1; transform:none}

.thanks{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px 18px}
.thanks__wrap{width:100%; max-width: 720px}
.thanks__card{border-radius: var(--radius2); border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding:26px; text-align:center; box-shadow: var(--shadow)}
.thanks__icon{width:56px; height:56px; border-radius: 20px; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(124,77,255,.28), rgba(255,63,164,.18)); font-weight:1000}
.thanks__small{color:rgba(233,236,255,.62); font-weight:600; font-size:12.5px; line-height:1.5; margin-top:12px}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; gap:18px}
  .hero__visual{min-height:360px}
  .strip__inner{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .tile--a{grid-row:auto; min-height: 220px}
  .formwrap{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .equalizer span{animation:none; height:40%}
  .brand__mark .pulse{animation:none}
  .reveal{opacity:1; transform:none}
}


/* Susie Q additions */
.brand{gap:12px}
.brand__logo{
  width:54px;
  height:auto;
  display:block;
  padding:10px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.hero__contact{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  font-size:14px;
  color:var(--text);
  text-decoration:none;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.pill:hover{background: rgba(255,255,255,.09)}
.footer__tiny{
  text-align:center;
  padding:14px 0 22px;
  color: rgba(233,236,255,.65);
  font-size:12px;
}