/*=================================================NEW UV service page===============================*/

/*=================================================
  Zoom Tan UV Page Rebuild
  Scoped under .zt-uv
  Uses Spray Page system for typography, padding, buttons, cards
  Keeps Aura-style hero depth and dark-to-white flow
=================================================*/

.zt-uv{
  background:#fff; /* prevents site body bg image showing through */
  font-family: Futura, "Futura PT", "Trebuchet MS", Arial, sans-serif;
  --zt-purple: #5c0f8c;
  --zt-orange: #ffa000;
}

.zt-uv,
.zt-uv *{
  box-sizing: border-box;
}

.zt-uv h1,
.zt-uv h2,
.zt-uv h3,
.zt-uv h4,
.zt-uv .zt-uv-btn{
  font-family: Futura, "Futura PT", "Trebuchet MS", Arial, sans-serif;
}

.zt-uv-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

/* ======================
   HERO (AURA DEPTH)
   ====================== */

.zt-uv-hero{
  position: relative;
  padding: 11em 0 56px;
  overflow: hidden;
  background: linear-gradient(180deg, #fc1aff -33%, #5C0F81 30%, #37005b 51%, #13002d 80%);
}
/* Orange raised 24/7 badge on hero image */
.zt-uv-hero-media-card { position: relative; } /* ensure positioning context */

.zt-uv-hero-badge24 {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 12px 14px 10px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 160, 0, 0.95), rgba(255, 120, 0, 0.95));
    box-shadow: 0 16px 40px rgb(0 0 0 / 69%), 0 0 0 2px rgba(255, 255, 255, 0.18) inset, 0 0 18px rgba(255, 160, 0, 0.35);
    color: #1a0a27;
    text-align: left;
    max-width: 135px;
}

.zt-uv-hero-badge24-top {
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 30px;
  line-height: 1;
}

.zt-uv-hero-badge24-sub {
  margin-top: 6px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.15;
}

.zt-uv-hero-badge24-sub span {
  font-weight: 700;
  font-size: 11px;
  opacity: 0.9;
}
.zt-uv-hero-mini {
  margin: 10px 0 0;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  line-height: 1.4;
}

.zt-uv-hero-inner{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  position:relative;
  z-index:1;
  align-items: start;
}

/* pill system (spray-derived) */
.zt-uv-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 160, 0, 0.45);
    background: rgba(255, 160, 0, 0.12);
    color: #ffaa1c;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px rgba(0, 0, 0, 0.18), 0 10px 24px rgba(255, 160, 0, 0.12);
}

.zt-uv-pill-dot{
  width:10px;
  height:10px;
  border-radius:99px;
  background:#ffa000;
  box-shadow: 0 0 12px rgba(255,160,0,0.9), 0 0 4px rgba(255,255,255,0.45);
}

.zt-uv-hero-copy h1{
  margin: 18px 0 14px;
  font-size: 54px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #ffffff;
  text-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.zt-uv-subhead{
  margin:0 0 28px;
  font-size:18px;
  line-height:1.45;
  max-width:560px;
  color: rgba(255,255,255,0.92);
}

/* ======================
   BUTTONS (Spray system)
   ====================== */

.zt-uv-hero-ctas{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin: 24px 0 36px;
}

.zt-uv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900 !important;
  letter-spacing:0.02em;
  border:1px solid transparent;
  transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-clip: padding-box;
  -webkit-tap-highlight-color: transparent;
}

.zt-uv-btn:hover{
  text-decoration:none;
  transform: translateY(-3px);
}

.zt-uv-btn:active{
  transform: translateY(-1px);
}

.zt-uv-btn:focus{
  outline: none;
}

.zt-uv-btn:before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.zt-uv-btn-primary{
  background: #ffa000;
  color:#111827 !important;
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    0 14px 34px rgba(255, 160, 0, 0.42),
    0 0 0 6px rgba(255, 160, 0, 0.10);
}

.zt-uv-btn-primary:hover{
  background: #ffb300;
  box-shadow:
    0 18px 45px rgba(255, 160, 0, 0.55),
    0 0 0 8px rgba(255, 160, 0, 0.20);
}

.zt-uv-btn-ghost{
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}

.zt-uv-btn-ghost:hover{
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}

/* ======================
   METRICS (hero)
   ====================== */

.zt-uv-metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}

.zt-uv-metric{
  position:relative;
  border-radius:20px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.zt-uv-metric-label{
  font-size:11px;
  font-weight:900;
  color: rgba(255, 255, 255, 0.45);
  text-transform:uppercase;
  letter-spacing:0.12em;
  display:flex;
  align-items:center;
  gap:6px;
}

.zt-uv-metric-label:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:99px;
  background: rgba(255, 160, 0, 0.55);
}

.zt-uv-metric-value{
  margin-top:4px;
  font-size:16px;
  font-weight:900;
  color: rgba(255,255,255,0.86);
}

/* ======================
   HERO MEDIA: gradient border + backlit glow (Aura style)
   ====================== */

.zt-uv-hero-media-border{
  position:relative;
  border-radius:42px;
  padding: 2px;
  background: linear-gradient(135deg, rgb(171 0 220) 0%, rgb(120 15 209) 52%, rgb(250 161 10) 110%);
  box-shadow:
    0 55px 120px rgba(0,0,0,0.45),
    0 0 40px rgba(92,15,140,0.35),
    0 0 30px rgba(255,160,0,0.18);
}

.zt-uv-hero-media-border:before{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius: 56px;
  background:
    radial-gradient(closest-side, rgba(92,15,140,0.35), transparent 70%),
    radial-gradient(closest-side, rgba(255,160,0,0.22), transparent 72%);
  filter: blur(18px);
  opacity: 0.9;
  pointer-events:none;
}

.zt-uv-hero-media-card{
  position:relative;
  border-radius:40px;
  overflow:hidden;
  background: rgba(10,10,14,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.zt-uv-hero-media-card img{
  width:100%;
  height: 440px;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}

.zt-uv-hero-media-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:36px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 100%);
}

.zt-uv-hero-slogan{
  color:#ffa000;
  font-weight:900;
  letter-spacing:0.2em;
  font-size:14px;
  text-transform:uppercase;
  margin-bottom:10px;
}

.zt-uv-hero-note{
  color: #ffffff;
  font-size: 15px;
  line-height: 1.5;
  max-width: 520px;
}

/* ======================
   OFFER BANNER (UV) like spray
   ====================== */

.zt-uv-offer{
  position: relative;
  z-index: 3;
  margin-top: 30px;
}

.zt-uv-offer-inner{
  border-radius: 21px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  color: #ffffff;
  position: relative;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(255, 160, 0, 0.22), transparent 60%),
    radial-gradient(900px 520px at 85% 85%, rgba(147, 51, 234, 0.22), transparent 62%),
    linear-gradient(90deg, rgb(255 156 0) 0%, rgb(146 0 208 / 94%) 91%);
  box-shadow: 0 14px 27px rgb(51 0 95 / 79%), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.zt-uv-offer-inner:before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.14), transparent 72%),
    radial-gradient(closest-side, rgba(255,160,0,0.12), transparent 72%);
  filter: blur(26px);
  opacity: 0.85;
  pointer-events:none;
}

.zt-uv-offer-copy{
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.zt-uv-offer-eyebrow{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(34 40 54);
  margin-bottom: 8px;
  padding: 0px 10px;
}

.zt-uv-offer-title{
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(131,66,65,0.55);
}

.zt-uv-offer-desc{
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}

.zt-uv-offer-actions{
  position: relative;
  z-index: 1;
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.zt-uv-offer-btn{
  padding: 13px 26px;
}

.zt-uv-offer .zt-uv-btn-ghost{
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.34);
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}

.zt-uv-offer .zt-uv-btn-ghost:hover{
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.52);
}

/* ======================
   BANDS (fix white areas + site bg gaps)
   ====================== */

.zt-uv-band{
  position: relative;
}

.zt-uv-band-white{
  background: #ffffff;
  padding: 80px 0 50px;
}

.zt-uv-band-white:before,
.zt-uv-band-white:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,0.08), transparent);
  pointer-events:none;
}

.zt-uv-band-white:before{ top:0; }
.zt-uv-band-white:after{ bottom:0; }

.zt-uv-band-dark {
    position: relative;
    padding: 92px 0;
    overflow: hidden;
    background: radial-gradient(circle at 15% 10%, rgb(127 0 206 / 55%), transparent 55%), radial-gradient(circle at 75% 65%, rgb(255 0 237 / 22%), transparent 60%), linear-gradient(180deg, #37005e 0%, #190032 55%, #100022 100%);
}

.zt-uv-band-dark:before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.08), transparent 70%),
    radial-gradient(closest-side, rgba(92,15,140,0.22), transparent 72%);
  filter: blur(22px);
  opacity: 0.85;
  pointer-events:none;
}

.zt-uv-band-dark *{
  position: relative;
  z-index: 1;
}

/* ======================
   WHITE AREA TYPOGRAPHY (Spray scale)
   ====================== */

.zt-uv-section-head h2{
  margin:0 0 14px;
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.04em;
  color: var(--zt-purple);
}

.zt-uv-section-head p{
  margin:0;
  font-size:18px;
  color:#475569;
  line-height:1.6;
}

/* two-column block */
.zt-uv-two{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: start;
}

/* side card */
.zt-uv-sidecard{
  border-radius: 26px;
  padding: 22px 22px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(15, 23, 42, 0.04);
}

.zt-uv-sidecard-title{
  font-weight: 900;
  color: #111827;
  margin-bottom: 10px;
}

.zt-uv-sidecard-list{
  margin: 0;
  padding-left: 18px;
  color:#4b5563;
  font-size:15px;
  line-height:1.7;
}

/* cards */
.zt-uv-cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
  margin-top:50px;
}

.zt-uv-cards3-tight{
  margin-top: 34px;
}

.zt-uv-card{
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 32px;
  padding: 30px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(15, 23, 42, 0.03);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.zt-uv-card:hover{
  transform: translateY(-10px);
  border-color: transparent !important;
  background: #ffffff;
  box-shadow:
    0 45px 110px rgba(92, 15, 140, 0.08),
    0 20px 60px rgba(255, 160, 0, 0.07),
    0 0 40px rgba(147, 51, 234, 0.05);
}

.zt-uv-ic-pearl{
  width: 45px;
  height: 45px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-weight: 900;
  font-size: 18px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 15% 15%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, rgba(92, 15, 140, 0.95) 0%, rgba(129, 20, 189, 0.92) 45%, rgba(255, 160, 0, 0.75) 120%);
  box-shadow:
    0 14px 30px rgba(92, 15, 140, 0.18),
    0 10px 24px rgba(255, 160, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.zt-uv-ic-pearl:before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  pointer-events:none;
  opacity: 0.9;
}

.zt-uv-card h3{
  margin:0 0 12px;
  font-size:24px;
  font-weight:900;
  color: #111827;
}

.zt-uv-card p{
  margin:0;
  color:#4b5563;
  font-size:16px;
  line-height:1.7;
}

/* center head */
.zt-uv-center-head{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.zt-uv-center-head h2{
  margin:0 0 12px;
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.04em;
  color: var(--zt-purple);
}

.zt-uv-center-head p{
  margin:0;
  font-size:18px;
  color:#475569;
  line-height:1.6;
}

.zt-uv-center-cta{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}

/* ghost on white bands */
.zt-uv-band-white .zt-uv-btn-ghost{
  background: rgba(92,15,140,0.05);
  border-color: rgba(92,15,140,0.20);
  color: #5c0f8c !important;
  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}

/* ======================
   DARK SPLIT (How it works)
   ====================== */

.zt-uv-split{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:50px;
  align-items:start;
}

.zt-uv-dark-head{
  margin:0 0 10px;
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.04em;
  color: #ffffff;
}

.zt-uv-dark-lede{
  margin: 0 0 24px;
  font-size:18px;
  line-height:1.6;
  color: rgba(255,255,255,0.86);
  max-width: 620px;
}

.zt-uv-step{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 15px;
  padding: 25px 25px 15px;
  border-radius: 25px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
  margin-bottom: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.zt-uv-step-num{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#111827;
  background: var(--zt-orange);
  box-shadow: 0 10px 26px rgba(255, 160, 0, 0.22);
}

.zt-uv-step-body h4{
  margin: 0 0 8px;
  font-size:18px;
  font-weight:900;
  color:#ffffff;
}

.zt-uv-step-body p{
  margin: 0;
  font-size:16px;
  line-height:1.7;
  color: rgba(255,255,255,0.86);
}

/* Callout contrast and pop */
.zt-uv-callout {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}

.zt-uv-mini-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top: 18px;
}

/* right visuals */
.zt-uv-imgcard{
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: 0 25px 70px rgba(0,0,0,0.35);
  margin-bottom:18px;
  background: rgba(0,0,0,0.25);
}

.zt-uv-imgcard img{
  width:100%;
  height:350px;
  object-fit:cover;
  display:block;
}

/* gradient edge variant */
.zt-uv-imgcard-gradient{
  position: relative;
}

.zt-uv-imgcard-gradient:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,160,0,0.75), rgba(92,15,140,0.75), rgba(255,160,0,0.55));
  filter: blur(10px);
  opacity: 0.55;
  pointer-events:none;
}

.zt-uv-dark-mini{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.zt-uv-dark-mini-card{
  border-radius: 22px;
  padding: 16px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 15px 40px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.zt-uv-dark-mini-card h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:900;
  color:#ffffff;
}

.zt-uv-dark-mini-card p{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color: rgba(255,255,255,0.84);
}

/* ======================
   Icon tiles (white band products)
   ====================== */

.zt-uv-ic-tile{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40);
}

.zt-uv-ic-purple{
  background: rgba(92,15,140,0.12);
  border: 1px solid rgba(92,15,140,0.25);
  color: var(--zt-purple);
}

.zt-uv-ic-orange{
  background: rgba(255,160,0,0.12);
  border: 1px solid rgba(255,160,0,0.28);
  color: var(--zt-orange);
}

.zt-uv-ic-purple-soft{
  background: rgba(92,15,140,0.08);
  border: 1px solid rgba(92,15,140,0.20);
  color: var(--zt-purple);
}

/* ======================
   FINAL CTA (dark gradient)
   ====================== */

.zt-uv-final {
    padding: 55px 0 80px;
    background: white;
}

.zt-uv-final-inner{
  border: none;
  border-radius: 32px;
  padding: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(255, 160, 0, 0.22), transparent 60%),
    radial-gradient(900px 520px at 85% 85%, rgba(147, 51, 234, 0.22), transparent 62%),
    linear-gradient(90deg, rgb(255 156 0) 0%, rgb(146 0 208 / 94%) 91%);
  box-shadow: 0 25px 80px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.48);
}

.zt-uv-final-inner:before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.14), transparent 70%),
    radial-gradient(closest-side, rgba(147,51,234,0.14), transparent 72%);
  filter: blur(26px);
  opacity: 0.8;
  pointer-events:none;
}

.zt-uv-final-copy h2{
  margin:0 0 12px;
  font-size: 36px;
  font-weight:900;
  color: #fff;
}

.zt-uv-final-copy p{
  margin:0;
  color: rgba(255,255,255,0.92);
  font-size:18px;
  line-height:1.6;
  max-width: 560px;
}

.zt-uv-final-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  position: relative;
  z-index: 2;
}

.zt-uv-final .zt-uv-btn{
  padding: 14px 30px;
  min-width: 168px;
}

.zt-uv-final .zt-uv-btn-ghost{
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.zt-uv-final .zt-uv-btn-ghost:hover{
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.52);
}

/* ======================
   RESPONSIVE
   ====================== */

@media (max-width: 991px){
  .zt-uv-hero{ padding-top:10em; }
  .zt-uv-hero-inner{ grid-template-columns: 1fr; }
  .zt-uv-hero-copy h1{ font-size: 40px; }
  .zt-uv-hero-media-card img{ height: 360px; }

  .zt-uv-two{ grid-template-columns: 1fr; }
  .zt-uv-cards3{ grid-template-columns: 1fr; gap: 24px; }
  .zt-uv-split{ grid-template-columns: 1fr; }

  .zt-uv-offer-inner{
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 22px;
  }

  .zt-uv-offer-actions{
    width: 100%;
    justify-content: flex-start;
  }

  .zt-uv-offer-btn{
    width: 100%;
  }

  .zt-uv-final-inner{
    flex-direction: column;
    text-align: center;
    padding: 44px 24px;
  }

  .zt-uv-final-actions{
    width: 100%;
    justify-content: center;
  }

  .zt-uv-final .zt-uv-btn{
    width: 100%;
    min-width: 0;
  }

  .zt-uv-dark-mini{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 450px){
  .zt-uv-hero-copy h1{ font-size: 36px; }
  .zt-uv-metrics{ grid-template-columns: 1fr; }
}






/*=================================================spray service page NEW ===============================*/
/*==========================

   Zoom Tan Spray Page Rebuild
   Scoped under .zt-spray
   Brand colors: purple #5c0f8c, orange #ffa000

   ========================== */

.zt-spray{
  background:#fff;
  font-family: Futura, "Futura PT", "Trebuchet MS", Arial, sans-serif;
  --zt-purple: #5c0f8c;
  --zt-orange: #ffa000;
}

.zt-spray,
.zt-spray *{
  box-sizing: border-box;
}

.zt-spray h1,
.zt-spray h2,
.zt-spray h3,
.zt-spray h4,
.zt-spray .zt-spray-btn{
  font-family: Futura, "Futura PT", "Trebuchet MS", Arial, sans-serif;
}

/* subtle purple accent on big headings (NOT hero) */
.zt-spray-section-head h2,
.zt-spray-split-left h2{
  color: var(--zt-purple);
  font-weight: 900;
}

/* ======================
   HERO (SHARPER + MORE MODERN POP)
   ====================== */

.zt-spray-hero{
  position: relative;
  padding: 11em 0 70px;
  overflow: hidden;
  background: linear-gradient(180deg, #fc1aff -33%, #5C0F81 30%, #37005b 51%, #13002d 80%);
}


.zt-spray-hero-media-border {
    padding: 2px;
    border-radius: 44px;
    background: linear-gradient(135deg, rgb(171 0 220) 0%, rgb(120 15 209) 52%, rgb(250 161 10) 110%);
    box-shadow: 0 55px 120px rgba(0, 0, 0, 0.45), 0 0 40px rgba(92, 15, 140, 0.35), 0 0 30px rgba(255, 160, 0, 0.18);
}

.zt-spray-hero-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  position:relative;
  z-index:1;
}

.zt-spray-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 20px;
  border-radius: 999px;

  border: 1px solid rgba(255, 160, 0, 0.45);
  background: rgba(255, 160, 0, 0.12);
  color: #ffaa1c;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  /* UPDATED: slightly cleaner + tighter */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 10px 26px rgba(0,0,0,0.18),
    0 10px 24px rgba(255, 160, 0, 0.12);
}

.zt-spray-pill-dot{
  width:10px;
  height:10px;
  border-radius:99px;
  background:#ffa000;
  box-shadow: 0 0 12px rgba(255,160,0,0.9), 0 0 4px rgba(255,255,255,0.45);
}

.zt-spray-hero-copy h1 {
    margin: 18px 0 14px;
    font-size: 54px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #ffffff;
    text-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.zt-spray-subhead{
  margin:0 0 28px;
  font-size:18px;
  line-height:1.45;
  max-width:560px;
  color: rgba(255,255,255,0.92);
}

.zt-spray-hero-ctas{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin: 24px 0 36px;
}

/* ======================
    product cards
   ====================== */

.zt-uv-card-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 14px;
    box-shadow: 0 18px 45px rgba(92, 15, 140, .25);
}


/* ======================
   247 section
   ====================== */

.zt-uv-app247{
  background: #ffffff;
  padding: 54px 0 0; /* no bottom padding so phones can pop out */
  overflow: visible;
}

.zt-uv-app247-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr; /* phones left, card right */
  gap: 28px;
  align-items: end;
  min-height: 340px;
}

/* Phones image: outside the card, left side, dropping below section */
.zt-uv-app247-phones{
  position: relative;
  align-self: end;
  display: flex;
  justify-content: flex-start;
}

.zt-uv-app247-phones img{
  width: min(520px, 100%);
  height: auto;
  display: block;
  transform: translateY(34px); /* POP OUT from bottom */
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.25));
}

/* Right aligned raised card */
.zt-uv-app247-card {
    justify-self: end;
    width: 100%;
    max-width: 560px;
    border-radius: 22px;
    padding: 26px 26px 55px;
}

.zt-uv-app247-tag{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: #5c0f8c;
  background: rgba(92,15,140,.08);
  border: 1px solid rgba(92,15,140,.14);
}
.zt-uv-app247-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 15px;
    border-radius: 999px;
    border: 1px solid rgb(255 160 0 / 36%);
    background: rgb(255 160 0 / 40%);
    color: #14002e;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0%), 0 7px 16px rgb(0 0 0 / 11%), 0 10px 24px rgba(255, 160, 0, 0.12);
    margin-bottom: 10px;
}

.zt-uv-app247-title {
    margin: 0 0 14px;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--zt-purple);
}

.zt-uv-app247-desc {
    margin: 0;
    font-size: 18px;
    color: #475569;
    line-height: 1.6;
    padding-bottom: 21px;
}

.zt-uv-app247-link{
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 800;
  color: #5c0f8c;
  text-decoration: none;
}
.zt-uv-app247-link:hover{ text-decoration: underline; }

.zt-uv-app247-buttons{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.zt-uv-storebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 56px;
    background: linear-gradient(90deg, #8500a4, rgba(18, 0, 45, .92));
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .14);
}
.zt-uv-storebtn:hover{ font-weight: bold; color: orange; transform: translateY(-1px); }

/* Mobile stack */
@media (max-width: 960px){
  .zt-uv-app247-inner{
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .zt-uv-app247-card{ justify-self: start; max-width: 100%; }
  .zt-uv-app247-phones img{ transform: translateY(18px); }
}

/* ======================
   BUTTONS (FLAT GLASS & GLOW)
   ====================== */

.zt-spray-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900 !important;
  letter-spacing:0.02em;
  border:1px solid transparent;
  transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  z-index: 1;

  overflow: hidden;
  background-clip: padding-box;
  -webkit-tap-highlight-color: transparent;
}

.zt-spray-btn:hover{
  text-decoration:none;
  transform: translateY(-3px);
}

.zt-spray-btn:active{
  transform: translateY(-1px);
}

.zt-spray-btn:focus{
  outline: none;
}

.zt-spray-btn:before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* Flat Orange Primary */
.zt-spray-btn-primary{
  background: #ffa000;
  color:#111827 !important;
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    0 14px 34px rgba(255, 160, 0, 0.42),
    0 0 0 6px rgba(255, 160, 0, 0.10);
}

.zt-spray-btn-primary:hover{
  background: #ffb300;
  box-shadow:
    0 18px 45px rgba(255, 160, 0, 0.55),
    0 0 0 8px rgba(255, 160, 0, 0.20);
}

/* Flat Glass Ghost */
.zt-spray-btn-ghost{
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}

.zt-spray-btn-ghost:hover{
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Adjust ghost for sections with white background */
.zt-spray-section .zt-spray-btn-ghost{
  background: rgba(92,15,140,0.05);
  border-color: rgba(92,15,140,0.20);
  color: #5c0f8c !important;
  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}

/* MINI CTA row in “How it works” */
.zt-spray-mini-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top: 22px;
}

/* ======================
   METRICS (MINIMALIST GLASS)
   ====================== */
.zt-spray-metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}

.zt-spray-metric{
  position:relative;
  border-radius:20px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.zt-spray-metric-label{
  font-size:11px;
  font-weight:900;
  color: rgba(255, 255, 255, 0.4);
  text-transform:uppercase;
  letter-spacing:0.12em;
  display:flex;
  align-items:center;
  gap:6px;
}

.zt-spray-metric-label:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:99px;
  background: rgba(255, 160, 0, 0.5);
}

.zt-spray-metric-value{
  margin-top:4px;
  font-size:16px;
  font-weight:900;
  color: rgba(255,255,255,0.85);
}

/* hero media */
.zt-spray-hero-media-card{
  position:relative;
  border-radius:40px;
  overflow:hidden;

  /* UPDATED: remove “border boxy edge”, rely on shadow */
  border: none;
  box-shadow:
    0 55px 120px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.14); /* crisp edge without looking like a border */
}

.zt-spray-hero-media-card img{
  width:100%;
  height: 440px;
  object-fit:cover;
  display:block;
}

.zt-spray-hero-media-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:36px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 100%);
}

.zt-spray-hero-slogan{
  color:#ffa000;
  font-weight:900;
  letter-spacing:0.2em;
  font-size:14px;
  text-transform:uppercase;
  margin-bottom:10px;
}

.zt-spray-hero-note{
  color: #ffffff;
  font-size: 15px;
  line-height: 1.5;
  max-width: 520px;
}

/* ======================
   SECTIONS & PANELS
   ====================== */
.zt-spray-section {
    padding: 80px 0 45px;
}

.zt-spray-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.zt-spray-section-head h2{
  margin:0 0 14px;
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.04em;
  color: var(--zt-purple);
}

.zt-spray-section-head p{
  margin:0;
  font-size:18px;
  color:#475569;
  line-height:1.6;
}

/* row version used in Prep section */
.zt-spray-section-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 20px;
  margin-bottom: 24px;
}

/* ======================
   NEW: Section Divider Background for HOW IT WORKS
   (adds contrast + breaks up white)
   ====================== */

/* your HTML already uses: .zt-spray-section-split */
.zt-spray-section-split{
  position: relative;
  padding: 92px 0; /* slightly more “feature” feeling */
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(92,15,140,0.08), transparent 60%),
    radial-gradient(900px 600px at 85% 90%, rgba(255,160,0,0.08), transparent 62%),
    linear-gradient(180deg, #fbf9ff 0%, #ffffff 100%);
}

/* soft separators so it feels like a distinct band */
.zt-spray-section-split:before,
.zt-spray-section-split:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,0.08), transparent);
  pointer-events:none;
}

.zt-spray-section-split:before{ top:0; }
.zt-spray-section-split:after{ bottom:0; }

/* why choose cards */
.zt-spray-cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
  margin-top:50px;
}

.zt-spray .zt-spray-card{
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 32px;
  padding: 30px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(15, 23, 42, 0.03);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.spheadstyle{
  font-size: 35px !important;
}

.zt-spray .zt-spray-card:hover{
  transform: translateY(-10px);
  border-color: transparent !important;
  background: #ffffff;
  box-shadow:
    0 45px 110px rgba(92, 15, 140, 0.08),
    0 20px 60px rgba(255, 160, 0, 0.07),
    0 0 40px rgba(147, 51, 234, 0.05);
}

/* icons */
.zt-spray-ic-pearl{
  width: 45px;
  height: 45px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-weight: 900;
  font-size: 18px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 15% 15%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, rgba(92, 15, 140, 0.95) 0%, rgba(129, 20, 189, 0.92) 45%, rgba(255, 160, 0, 0.75) 120%);
  box-shadow:
    0 14px 30px rgba(92, 15, 140, 0.18),
    0 10px 24px rgba(255, 160, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.zt-spray-ic-pearl:before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  pointer-events:none;
  opacity: 0.9;
}

.zt-spray-card h3{
  margin:0 0 12px;
  font-size:24px;
  font-weight:900;
  color: #111827;
}

.zt-spray-card p{
  margin:0;
  color:#4b5563;
  font-size:16px;
  line-height:1.7;
}

/* Prep & After Care panels */
.zt-spray-cards2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  margin-top:24px;
}

.zt-spray-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 25px 25px 15px;
    border-radius: 25px;
    border: 1px solid #f3f4f6;
    background: #fff;
    box-shadow: 0 15px 40px rgb(96 77 115 / 10%);
    margin-bottom: 7px;
}

.zt-spray-panel h3{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 900;
  color: var(--zt-purple);
}

.zt-spray-panel ul{
  margin: 0 0 24px;
  padding-left: 20px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  flex-grow: 1;
}

/* Banner */
.zt-spray-banner{
  margin-top:30px;
  border-radius:32px;
  overflow:hidden;
  border:1px solid #f1f5f9;
  box-shadow: 0 40px 80px rgba(0,0,0,0.12);
}

.zt-spray-banner img{
  width:100%;
  max-height:400px;
  object-fit:cover;
  display:block;
}

/* Step-by-step */
.zt-spray-split{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:50px;
  align-items:start;
}

.zt-spray-lede{
  margin: 0 0 24px;
  font-size:18px;
  line-height:1.6;
  color:#475569;
  max-width: 620px;
}

.zt-spray-step{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 15px;
  padding: 25px 25px 15px;
  border-radius: 25px;
  border: 1px solid #f3f4f6;
  background: #fff;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
  margin-bottom: 7px;
}

.zt-spray-step-num{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background: var(--zt-purple);
  box-shadow: 0 8px 20px rgba(92, 15, 140, 0.15);
}

.zt-spray-step-num-orange{
  background: var(--zt-orange);
  color:#111827;
  box-shadow: 0 8px 20px rgba(255, 160, 0, 0.15);
}

.zt-spray-step-body h4{
  margin: 0 0 8px;
  font-size:18px;
  font-weight:900;
  color:#111827;
}

.zt-spray-step-body p{
  margin: 0;
  font-size:16px;
  line-height:1.7;
  color:#4b5563;
}

.zt-spray-callout{
  margin-top:20px;
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(255,160,0,0.3);
  background: rgba(255,160,0,0.1);
  font-weight:800;
  color:#0f172a;
  line-height:1.5;
}

/* images */
.zt-spray-imgcard{
  border-radius:32px;
  overflow:hidden;
  border:1px solid #f1f5f9;
  box-shadow: 0 25px 60px rgba(0,0,0,0.1);
  margin-bottom:28px;
}

.zt-spray-imgcard img{
  width:100%;
  height:350px;
  object-fit:cover;
  display:block;
}

/* ======================
   SPECIAL OFFER BANNER (ADD)
   Place this anywhere after your hero styles (recommended)
   ====================== */

.zt-spray-offer {
    position: relative;
    z-index: 3;
    margin-top: 30px;
}

.zt-spray-offer-inner {
    border-radius: 21px;
    padding: 26px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient(900px 420px at 10% 10%, rgba(255, 160, 0, 0.22), transparent 60%), radial-gradient(900px 520px at 85% 85%, rgba(147, 51, 234, 0.22), transparent 62%), linear-gradient(90deg, rgb(255 156 0) 0%, rgb(146 0 208 / 94%) 91%);
    box-shadow: 0 14px 27px rgb(51 0 95 / 79%), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.zt-spray-offer-inner:before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.14), transparent 72%),
    radial-gradient(closest-side, rgba(255,160,0,0.12), transparent 72%);
  filter: blur(26px);
  opacity: 0.85;
  pointer-events:none;
}

.zt-spray-offer-copy{
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.zt-spray-offer-eyebrow {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(34 40 54);
    margin-bottom: 8px;
    padding: 0px 10px;
}

.zt-spray-offer-title {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 0 10px #83424199;
}

.zt-spray-offer-desc{
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}

.zt-spray-offer-actions{
  position: relative;
  z-index: 1;
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* make offer buttons slightly tighter */
.zt-spray-offer-btn{
  padding: 13px 26px;
}

/* ensure ghost looks good on the colored banner */
.zt-spray-offer .zt-spray-btn-ghost{
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.34);
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}

.zt-spray-offer .zt-spray-btn-ghost:hover{
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.52);
}

/* OPTIONAL: give the Why section a little less top padding since banner adds spacing */
#why.zt-spray-section{
  padding-top: 64px; /* was 80px */
}

/* responsive */
@media (max-width: 991px){

  .zt-spray-offer-inner{
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 22px;
  }

  .zt-spray-offer-actions{
    width: 100%;
    justify-content: flex-start;
  }

  .zt-spray-offer-btn{
    width: 100%;
  }

  .zt-spray-offer-title{
    font-size: 26px;
  }
}




/* ======================
   FINAL CTA (BIGGER + CLOSER + MORE “FINAL”)
   ====================== */

/* UPDATED: reduce the dead space above CTA and make it feel intentional */
.zt-spray-final {
    padding: 0px 0 80px;
}

.zt-spray-final-inner {
    border: none;
    border-radius: 32px;
    padding: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(900px 420px at 10% 10%, rgba(255, 160, 0, 0.22), transparent 60%), radial-gradient(900px 520px at 85% 85%, rgba(147, 51, 234, 0.22), transparent 62%), linear-gradient(90deg, rgb(255 156 0) 0%, rgb(146 0 208 / 94%) 91%);
    box-shadow: 0 25px 80px rgb(15 23 42 / 35%), 0 0 0 1px rgba(15, 23, 42, 0.05);
    border: 1px solid #ffffff7a;
}

/* subtle highlight “beam” */
.zt-spray-final-inner:before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.14), transparent 70%),
    radial-gradient(closest-side, rgba(147,51,234,0.14), transparent 72%);
  filter: blur(26px);
  opacity: 0.8;
  pointer-events:none;
}

.zt-spray-final-inner h2{
  margin:0 0 12px;
  font-size: 36px;
  font-weight:900;
  color: #fff;
}

.zt-spray-final-inner p{
  margin:0;
  color: #fff;
  font-size:18px;
  line-height:1.6;
  max-width: 560px;
}

.zt-spray-final-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  position: relative;
  z-index: 2;
}

/* make buttons feel “primary CTA sized” */
.zt-spray-final .zt-spray-btn{
  padding: 14px 30px;
  min-width: 168px;
}

/* ghost button in FINAL CTA so it doesn't white-out */
.zt-spray-final .zt-spray-btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #ffffff !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.zt-spray-final .zt-spray-btn-ghost:hover{
  background: rgba(255,255,255,0.90);
  border-color: rgba(92,15,140,0.32);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.40);
}

/* responsive */
@media (max-width: 991px){
  .zt-spray-hero{ padding-top:10em; }
  .zt-spray-hero-inner{ grid-template-columns: 1fr; }
  .zt-spray-cards3, .zt-spray-cards2{ grid-template-columns: 1fr; gap: 24px; }
  .zt-spray-split{ grid-template-columns: 1fr; }
  .zt-spray-hero-copy h1{ font-size: 40px; }
  .zt-spray-hero-media-card img{ height: 360px; }

  .zt-spray-section-split{
    padding: 72px 0;
  }

  .zt-spray-final{
    padding: 44px 0 90px;
    margin-top: -18px;
  }

  .zt-spray-final-inner{
    flex-direction: column;
    text-align: center;
    padding: 44px 24px;
  }

  .zt-spray-section-head-row{
    flex-direction: column;
    align-items: flex-start;
  }

  .zt-spray-final .zt-spray-btn{
    width: 100%;
    min-width: 0;
  }

  .zt-spray-final-actions{
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 450px){
  .zt-spray-hero-inner{ grid-template-columns: 1fr; }
}

/* =========================
   RAPID SPRAY FEATURE SECTION
   ========================= */

.zt-spray-rapid {
  padding: 56px 0;
  position: relative;
  overflow: hidden;
  border-radius: 0; /* full-width section */
}

/* Rich purple background (not flat) */
.zt-spray-rapid::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 28% 30%, rgba(155, 81, 224, 0.55), rgba(92, 15, 140, 0.0) 60%),
    radial-gradient(820px 520px at 80% 55%, rgba(255, 160, 0, 0.14), rgba(92, 15, 140, 0.0) 62%),
    linear-gradient(180deg, rgba(63, 14, 97, 0.95), rgba(92, 15, 140, 0.92));
  pointer-events:none;
}

.zt-spray-rapid::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,0.08), transparent 60%);
  pointer-events:none;
}

.zt-spray-rapid .zt-spray-wrap{
  position: relative;
  z-index: 1;
}

.zt-spray-rapid-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 26px;
  align-items: center;
}

/* Left visual card */
.zt-spray-rapid-visual {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 22px 60px rgba(0,0,0,0.26);
  min-height: 300px;
  background: rgba(255,255,255,0.06);
}

.zt-spray-rapid-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  opacity: 0.92;
}



.zt-spray-rapid-visual-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 10px;
  padding: 18px;
  color:#fff;
}

.zt-spray-rapid-kicker{
  display:inline-flex;
  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

.zt-spray-rapid-headline{
  margin:0;
  font-size: 26px;
  line-height: 1.12;
  font-weight: 900;
}

.zt-spray-rapid-caption{
  margin:0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  max-width: 46ch;
}

.zt-spray-rapid-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.zt-spray-rapid-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
}

/* Right side text - matches page hierarchy */
.zt-spray-rapid-content{
  color: #fff;
}

.zt-spray-rapid-content h2{
  margin: 0 0 8px 0;
  font-size: 35px; /* closer to your other big headings */
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.zt-spray-rapid-content p{
  margin: 0 0 16px 0;
  font-size: 18px; /* bigger, like you wanted */
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  max-width: 60ch;
}

/* Raised option cards only */
.zt-spray-rapid-options{
  display:grid;
  gap: 12px;
}

.zt-spray-rapid-option{
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.24);
}

.zt-spray-rapid-option-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 6px;
}

/* Option titles become h3 and match site sizing */
.zt-spray-rapid-option h3{
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  color: #111827;
}

/* Orange pop on time tags */
.zt-spray-rapid-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 16px;
    white-space: nowrap;
    color: rgba(17, 24, 39, 0.92);
    background: rgb(255 160 0 / 35%);
    border: 1px solid rgba(255, 160, 0, 0.55);
    box-shadow: 0 10px 22px rgba(255, 160, 0, 0.25);
}

.zt-spray-rapid-option p{
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(17,24,39,0.72);
}

/* Placeholder if no image */
.zt-spray-rapid-visual-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,0.82);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 16px;
}


/* =========================
   ZT DEMO PAGE (STANDALONE)
   ========================= */

#content.zt-demo,
.zt-demo {
  background:#fff;
  font-family:"futura-pt","Futura PT","Futura","Trebuchet MS",Arial,sans-serif;
  color:#0f172a;
}
h1, h2, h3, h4, h5, h6 {
    font-family:"futura-pt","Futura PT","Futura","Trebuchet MS",Arial,sans-serif;
}

/* =========================
   HERO
   ========================= */

.zt-demo-hero{
  padding:200px 20px 80px;
  border-bottom:1px solid #f3f0f8;
  background: linear-gradient(180deg, transparent 86%, #ddd3ee38 99%);
}

.zt-demo-hero-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr; /* match spray */
  gap: 40px; /* match spray */
  align-items: start;
}

.zt-demo-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:5px 15px;
  border-radius:999px;
  border:1px solid rgb(255 160 0 / 36%);
  background:rgb(255 160 0 / 40%);
  color:#14002e;
  font-weight:900;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0%), 0 7px 16px rgb(0 0 0 / 11%), 0 10px 24px rgba(255,160,0,0.12);
  margin-bottom:10px;
}

.zt-demo-pill-dot{
  width:10px;
  height:10px;
  border-radius:99px;
  background:#ffa000;
  box-shadow:0 0 12px rgba(255,160,0,0.9), 0 0 4px rgba(255,255,255,0.45);
}

.zt-demo-title{
  margin: 18px 0 14px;
  font-size: 54px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #5c0f8c;
}

.zt-demo-subhead{
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.45;
  max-width: 560px;
  color: #475569;
}

.zt-demo-hero-actions{
  margin-top: 24px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* =========================
   BUTTONS
   ========================= */

.zt-demo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:0.02em;
  border:1px solid transparent;
  transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.zt-demo-btn:before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.zt-demo-btn-primary{
  background:#ffa000;
  color:#111827 !important;
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    0 14px 34px rgba(255, 160, 0, 0.42),
    0 0 0 6px rgba(255, 160, 0, 0.10);
}

.zt-demo-btn-primary:hover{
  background:#ffb300;
  box-shadow:
    0 18px 45px rgba(255, 160, 0, 0.55),
    0 0 0 8px rgba(255, 160, 0, 0.20);
}

.zt-demo-btn-secondary{
  background:#fff;
  color:#5c0f8c !important;
  border:1px solid rgba(92,15,140,0.20);
  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}

.zt-demo-btn-secondary:hover{
  box-shadow: 0 18px 42px rgba(15,23,42,0.12);
}

.zt-demo-btn:hover{ transform: translateY(-3px); text-decoration:none; }
.zt-demo-btn:active{ transform: translateY(-1px); }

/* =========================
   HERO MEDIA IMAGE CARD
   ========================= */

/* HERO MEDIA: remove gradient border, make it a bigger clean card w/ shadow */
.zt-demo-media-border{
  padding: 0;               /* kill the “border” frame */
  border-radius: 40px;
  background: transparent;  /* no gradient */
  box-shadow: none;
}

.zt-demo-media-card {
    border-radius: 40px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 20px 60px rgb(0 0 0 / 24%), 0 0 0 1px rgba(15, 23, 42, 0.06);
    border: 1px solid #ffffff6e;
}

/* Make the hero image feel “bigger” like the spray hero */
.zt-demo-media-card img{
  width:100%;
  height: 440px;
  object-fit: cover;
  display:block;
}

.zt-demo-media-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding: 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 100%);
  color:#fff;
}

.zt-demo-media-title{
  font-weight:900;
  letter-spacing:0.2em;
  font-size:14px;
  text-transform:uppercase;
  margin-bottom:10px;
}

.zt-demo-media-note{
  font-size:15px;
  line-height:1.5;
  color: rgba(255,255,255,0.92);
  max-width: 520px;
}

/* =========================
   MAIN
   ========================= */

.zt-demo-main{
  padding:70px 20px 90px;
}

.zt-demo-wrap{
  max-width:1200px;
  margin:0 auto;
}

.zt-demo-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
  overflow:hidden;
}

.zt-demo-card-head{
  padding:22px 26px;
  background: linear-gradient(90deg, rgba(92,15,140,0.95), rgba(255,160,0,0.95));
  color:#fff;
}

.zt-demo-h2{
  margin:0;
  font-size:22px;
  font-weight:900;
}

.zt-demo-lead{
  margin:6px 0 0;
  font-size:14px;
  color:rgba(255,255,255,0.92);
}

.zt-demo-card-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:28px;
  padding:35px;
}

.zt-demo-video-shell {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 35px rgb(0 0 0 / 11%);
}

.zt-demo-video{
  width:100%;
  display:block;
  border-radius:16px;
}

.zt-demo-expect{
  padding:6px 0;
}

.zt-demo-h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:900;
  color:#0f172a;
}

.zt-demo-bullets{
  list-style:none;
  padding:0;
  margin:0 0 18px;
}

.zt-demo-bullets li{
  display:flex;
  gap:10px;
  margin-bottom:10px;
  color:#334155;
  line-height:1.5;
}

.zt-demo-bullet-ic{
  width:22px;
  height:22px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background: linear-gradient(180deg, rgba(92,15,140,0.95), rgba(255,160,0,0.95));
  flex:0 0 22px;
  margin-top:2px;
}

.zt-demo-card-actions{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px;
}

.zt-demo-link{
  color:#5c0f81;
  font-weight:700;
  text-decoration:none;
}

.zt-demo-link:hover{
  text-decoration:underline;
}

/* =========================
   FINAL CTA
   ========================= */

.zt-demo-final{
  padding: 0 20px 90px;
  background: #fff;
}

.zt-demo-final-inner{
  border: none;
  border-radius: 32px;
  padding: 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:56px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(255, 160, 0, 0.22), transparent 60%),
    radial-gradient(900px 520px at 85% 85%, rgba(147, 51, 234, 0.22), transparent 62%),
    linear-gradient(90deg, rgb(255 156 0) 0%, rgb(146 0 208 / 94%) 91%);
  box-shadow: 0 25px 80px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(255,255,255,0.48);
}

.zt-demo-final-inner:before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.14), transparent 70%),
    radial-gradient(closest-side, rgba(147,51,234,0.14), transparent 72%);
  filter: blur(26px);
  opacity: 0.8;
  pointer-events:none;
}

.zt-demo-final-copy{ position: relative; z-index: 1; }

.zt-demo-final-title{
  margin:0 0 12px;
  font-size: 36px;
  font-weight:900;
  color:#fff;
}

.zt-demo-final-sub{
  margin:0;
  color: rgba(255,255,255,0.92);
  font-size:18px;
  line-height:1.6;
  max-width: 560px;
}

.zt-demo-final-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  position: relative;
  z-index: 2;
}
/* Make CTA buttons feel “final CTA sized” */
.zt-demo-final .zt-demo-btn{
  padding: 14px 30px;
  min-width: 168px;
}

/* Ensure secondary looks good on the gradient */
.zt-demo-final .zt-demo-btn-secondary{
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.zt-demo-final .zt-demo-btn-secondary:hover{
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.52);
}



/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 991px){
  .zt-demo-hero-inner{
    grid-template-columns:1fr;
  }
  .zt-demo-title{
    font-size:40px;
  }
  .zt-demo-card-grid{
    grid-template-columns:1fr;
  }
  .zt-demo-final-inner{
    flex-direction: column;
    text-align: center;
    padding: 44px 24px;
  }

  .zt-demo-final-actions{
    width: 100%;
    justify-content: center;
  }

  .zt-demo-final .zt-demo-btn{
    width: 100%;
    min-width: 0;
  }
}



/* Responsive */
@media (max-width: 900px){
  .zt-spray-rapid{
    padding: 38px 0;
  }
  .zt-spray-rapid-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .zt-spray-rapid-visual{
    min-height: 230px;
  }
  .zt-spray-rapid-content h2{

  }
}
@media (max-width: 450px){
  .zt-spray-metrics{ grid-template-columns: 1fr; }
  .zt-demo-title{
    font-size: 36px;
  }
}