/* ============================================================
   Billy Digitals — AWARD THEME (BLUE / brand accent)
   Award-agency finish over the agency base (loaded LAST).
   • Near-black canvas #0A0A0A · off-white type #F5F5F0
   • High-contrast display SERIF headlines (Playfair Display)
     with clean Inter body
   • Single BRAND-BLUE accent (#8052ff → cyan #9a6bff), kept
     disciplined — matches the Billy logo
   • Floating asymmetric BENTO service tiles
   Transform/colour only. Base: style.css → theme-agency.css → here.
   ============================================================ */
:root{
  --bg:#0a0a0a; --bg-2:#0a0a0a;
  --card:transparent; --card-hover:rgba(245,245,240,.05);
  --border:rgba(245,245,240,.15);
  --text:#f5f5f0; --muted:#9a988f; --silver:#c7c5bc;
  --c1:#8052ff; --c2:#9a6bff; --c3:#b39dff;
  --blue:#8052ff; --cyan:#9a6bff;
  --grad:linear-gradient(100deg,#8052ff,#9a6bff 55%,#b39dff);
  --grad-btn:linear-gradient(100deg,#8052ff,#9a6bff 55%,#b39dff); --shadow:none;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-display:'Playfair Display',Georgia,serif;
}
body{background:#0a0a0a;color:#f5f5f0;font-family:'Inter',system-ui,sans-serif;font-weight:400}
::selection{background:#8052ff;color:#fff}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#243044}
.hero{background:#0a0a0a!important}
.section-alt{background:#080808}

/* ---------- DISPLAY SERIF: monumental, high-contrast ---------- */
.hero h1,.section-head h2,.statement h2,.pz-word,.panel h3,.foot-brand,
.threed-copy h2,.big-quote{
  font-family:var(--serif)!important;font-weight:700!important;
  letter-spacing:-.015em!important;color:#f5f5f0}
.hero h1{font-size:clamp(3rem,12.5vw,8.6rem);line-height:.94;font-weight:700!important}
.section-head h2{font-size:clamp(2.5rem,6vw,5rem);line-height:1.0}
.statement h2{font-family:var(--serif)!important;line-height:1.05}
.pz-word{font-family:var(--serif)!important;font-weight:700;letter-spacing:-.02em}
/* accent words → high-contrast serif ITALIC with flowing blue→cyan gradient */
.hero h1 .accent,.grad{font-family:var(--serif)!important;font-style:italic!important;font-weight:600!important;
  background:linear-gradient(100deg,#8052ff,#9a6bff 50%,#b39dff)!important;
  background-size:220% auto!important;-webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;animation:awGrad 6s linear infinite}
@keyframes awGrad{to{background-position:220% center}}
.hw-bot{font-family:var(--serif)!important;font-style:italic!important;
  background:none!important;-webkit-text-fill-color:#9a6bff!important;color:#9a6bff!important}
.pz-word .lime{font-style:italic;color:#9a6bff}
/* sub-headings stay clean grotesk for legibility */
.card h3,.offer h3,.plan h3,.stat h3,.faq-item h3,.host-card h3,.tinfo h3{
  font-family:'Space Grotesk',sans-serif!important;font-weight:600!important;letter-spacing:-.02em!important}
p,.sub,.section-head .sub,.hero-sub,.card p,.panel p,.footer-grid p{color:var(--silver);font-weight:400}

/* eyebrows / tags — blue, wide tracking */
.eyebrow,.tag,.cw-label,.ps-label,.hero-badge,.pz-eyebrow{
  color:#9a6bff!important;background:transparent!important;border-color:rgba(128,82,255,.4)!important;
  text-transform:uppercase;letter-spacing:.18em;font-weight:600;font-family:'Space Grotesk',sans-serif!important}

/* ---------- header ---------- */
.site-header.scrolled{background:rgba(10,10,10,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(245,245,240,.1)!important}

/* ---------- primary CTA → filled blue gradient pill (brand) ---------- */
.btn-primary,.nav-cta{background:var(--grad)!important;color:#fff!important;border:2px solid transparent!important;
  box-shadow:0 10px 30px -10px rgba(128,82,255,.6)!important}
.btn-primary:hover,.nav-cta:hover{filter:brightness(1.08);box-shadow:0 14px 40px -10px rgba(128,82,255,.7)!important}
.btn-ghost{background:transparent;border:2px solid rgba(245,245,240,.35);color:#f5f5f0}
.btn-ghost:hover{border-color:#9a6bff;color:#fff}

/* ---------- flat cards on near-black ---------- */
.card,.tcard,.offer,.plan,.host-card,.ccard,.contact-form,.why-strip>div,.faq-item,.testi,.review-card{
  background:transparent!important;border:1px solid rgba(245,245,240,.13)!important;box-shadow:none!important}
.card:hover,.tcard:hover,.offer:hover{background:rgba(128,82,255,.05)!important;border-color:#8052ff!important}
.card-icon{background:transparent!important;color:#9a6bff!important;border:1px solid rgba(128,82,255,.4)!important}

/* ---------- FLOATING ASYMMETRIC BENTO service tiles ---------- */
@media (min-width:761px){
  .panels{display:grid;grid-template-columns:1.25fr 1fr;grid-auto-rows:1fr;gap:20px;padding-top:clamp(30px,4vw,60px)}
  .panel{margin-bottom:0;min-height:0}
  .panel.p-blue{grid-row:span 2;min-height:520px;align-content:center}      /* tall hero tile */
  .panel.p-blue h3{font-size:clamp(2.4rem,4.4vw,3.6rem)}
  .panels .panel{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
  .panels .panel:hover{transform:translateY(-6px)}
}
.panel{border-radius:26px}
.panel h3{font-family:var(--serif)!important;font-weight:700!important;letter-spacing:-.015em!important}
.panel.p-blue{background:linear-gradient(150deg,#8052ff,#b39dff)!important;color:#fff!important;border:0!important}
.panel.p-purple,.panel.p-cream{background:#111111!important;color:#f5f5f0!important;border:1px solid rgba(245,245,240,.14)!important}
.panel.p-blue h3,.panel.p-blue p{color:#fff!important}
.panel.p-purple h3,.panel.p-cream h3,.panel.p-purple p,.panel.p-cream p{color:#f5f5f0!important}
.panel.p-blue .ptags span{border-color:rgba(255,255,255,.5)!important;color:#fff!important}
.panel.p-purple .ptags span,.panel.p-cream .ptags span{border-color:rgba(245,245,240,.32)!important;color:#f5f5f0!important}
.panel.p-blue .wire-globe{color:#fff}
.panel.p-purple .wire-globe,.panel.p-cream .wire-globe{color:#9a6bff}

/* ---------- statement pill / spinning badge ---------- */
.statement h2{color:#f5f5f0}
.hl-pill{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(128,82,255,.35)}
.spin-badge{color:#f5f5f0}.spin-badge .core{background:var(--grad-btn);color:#fff}
.wire-globe{color:#9a6bff}

/* ---------- gallery / filters / marquee / trust ---------- */
.tcat{color:var(--muted)}.tlink{color:#9a6bff}
.filter-chip,.tfilter button{background:transparent;border:1px solid rgba(245,245,240,.2);color:var(--muted)}
.filter-chip.active,.tfilter button.active{background:var(--grad);color:#fff;border-color:transparent}
.cw-pills span{background:rgba(10,10,10,.6);color:#f5f5f0;border:1px solid rgba(245,245,240,.25)}
.pnum,.stat h3 span{color:#9a6bff}
.marquee{border-color:rgba(245,245,240,.12)}.marquee li{color:#4a4a46}
.marquee li::after,.marquee span::after{color:#9a6bff}
.trust-name,.ps-chip{color:#f5f5f0;background:transparent;border-color:rgba(245,245,240,.2)}
.ps-chip b{color:#9a6bff}

/* ---------- forms ---------- */
input,select,textarea{background:transparent;border:1px solid rgba(245,245,240,.2);color:#f5f5f0}
input::placeholder,textarea::placeholder{color:#6a6a66}

/* ---------- footer ---------- */
.site-footer{background:#080808;border-top:1px solid rgba(245,245,240,.12)}
.footer-grid ul a:hover,.socials a:hover{color:#9a6bff}
.socials a{border-color:rgba(245,245,240,.2);color:#f5f5f0}
.socials a:hover{border-color:#9a6bff}
.wow-aurora::before{background:radial-gradient(circle,rgba(128,82,255,.16),transparent 70%)}
.wow-aurora::after{background:radial-gradient(circle,rgba(128,82,255,.10),transparent 70%)}

/* ============================================================
   PERFECTION PASS — single brand-blue accent + rhythm
   ============================================================ */
.section-head h2{margin-bottom:.44em}
.section-head .sub,.section-head p.sub{max-width:52ch;margin-left:auto;margin-right:auto}

/* service + 3D/SEO icons → uniform blue, no coloured halos */
.services-grid .card .card-icon,.offer-grid .offer .card-icon,.card-icon{
  background:rgba(128,82,255,.08)!important;color:#9a6bff!important;
  border:1px solid rgba(128,82,255,.45)!important;box-shadow:none!important}
.services-grid .card::after,.offer-grid .offer::after{background:var(--grad)!important}
.services-grid .card:hover,.offer-grid .offer:hover{border-color:#8052ff!important}

/* limited-offer ribbon → blue gradient block + charcoal split */
.offer-ribbon{border:1px solid rgba(128,82,255,.3)!important;box-shadow:0 30px 70px -34px rgba(0,0,0,.8)!important}
.offer-main{background:linear-gradient(140deg,#8052ff,#b39dff)!important;color:#fff!important}
.offer-head,.offer-head strong,.offer-sub,.offer-sub b{color:#fff!important}
.offer-flag{background:rgba(0,0,0,.22)!important;color:#fff!important}
.offer-split{background:#111111!important}
.offer-3{background:#0a0a0a!important;color:#9a6bff!important}
.offer-split p{color:var(--muted)!important}.offer-split p strong{color:#f5f5f0!important}

/* most-popular plan → blue frame + blue badge */
.plan-featured{background:linear-gradient(170deg,rgba(128,82,255,.10),transparent 60%)!important;
  border-color:rgba(128,82,255,.55)!important;box-shadow:0 24px 60px -28px rgba(128,82,255,.3)!important}
.plan-badge{background:var(--grad)!important;color:#fff!important}
.plan li::before{color:#9a6bff!important}

/* animated electric plan rings → all blue/cyan family */
#plans .plan .blaze{--bz1:#8052ff!important;--bz2:#9a6bff!important;--bz3:#b39dff!important}
#plans .plan-featured .blaze{--bz1:#8052ff!important;--bz2:#c4b5fd!important;--bz3:#b39dff!important}
#plans .plan-featured ~ .plan .blaze{--bz1:#b39dff!important;--bz2:#9a6bff!important;--bz3:#6d28d9!important}
.pay-off{background:linear-gradient(90deg,#8052ff,#9a6bff)!important;color:#fff!important}

/* calm the old violet/magenta orbs + rainbow marquee → brand blue */
.orb-2,.orb-3{background:rgba(128,82,255,.12)!important}
.marquee li:nth-child(3n+1),.marquee li:nth-child(3n+2){color:#4a4a46!important}
.tcard:hover .tthumb{box-shadow:0 20px 52px -16px rgba(128,82,255,.4)!important}

/* crisp blue focus states */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #9a6bff;outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:#9a6bff!important}
.tlink:hover,.footer-grid ul a:hover,.nav-links a:hover{color:#9a6bff}

/* generous award whitespace */
.section{padding-top:clamp(72px,9vw,132px);padding-bottom:clamp(72px,9vw,132px)}

/* ============================================================
   DALA SIGNATURE — amber eyebrows / sparks over the violet base.
   Violet #8052ff is the single vivid accent; amber #ffb829 marks
   the small uppercase labels and selection, exactly like Dala.
   ============================================================ */
:root{--amber:#ffb829}
.eyebrow,.tag,.cw-label,.ps-label,.hero-badge,.pz-eyebrow{
  color:#ffb829!important;border-color:rgba(255,184,41,.32)!important}
.hw-bot{-webkit-text-fill-color:#ffb829!important;color:#ffb829!important}
::selection{background:#8052ff;color:#fff}
/* violet hero orbs + amber spark */
.orb-1{background:rgba(128,82,255,.28)!important}
.orb-2{background:rgba(128,82,255,.20)!important}
.orb-3{background:rgba(255,184,41,.12)!important}
.wow-aurora::after{background:radial-gradient(circle,rgba(255,184,41,.10),transparent 70%)}
.wow-spot{background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),rgba(128,82,255,.18),rgba(255,184,41,.05) 42%,transparent 72%)}

/* let the fixed constellation show through EVERY section (loaded last,
   so it beats the opaque .hero / .section-alt backgrounds above) */
.hero,.section,.section-alt,.statement,.panels-sec,.pinzoom{background:transparent!important}
.section-alt{background:transparent!important}