/* ============================================================
   THE SERVICE WARRIORS — Conversion Factory reskin (water blue)
   Layer loaded AFTER index.COJbd50J.css
   Structure, copy and layout are untouched; skin only.
   ============================================================ */

/* ---------- 1. Conversion Factory typefaces ---------- */
@font-face{font-family:radioGrotesk;src:url(../fonts/RadioGrotesk-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:radioGrotesk;src:url(../fonts/RadioGrotesk-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:radioGrotesk;src:url(../fonts/RadioGrotesk-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:radioGrotesk;src:url(../fonts/RadioGrotesk-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:radioGroteskHeading;src:url(../fonts/RadioGrotesk-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:radioGroteskHeading;src:url(../fonts/RadioGrotesk-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:writer;src:url(../fonts/Writer-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:writer;src:url(../fonts/Writer-ThinItalic.woff2) format("woff2");font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:writer;src:url(../fonts/Writer-RegularItalic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ---------- 2. Water palette ---------- */
:root{
  --font-body:radioGrotesk,"Helvetica Neue",Arial,sans-serif;
  --font-heading:radioGroteskHeading,radioGrotesk,"Helvetica Neue",Arial,sans-serif;
  --font-accent:writer,Georgia,serif;

  /* Conversion Factory, 1:1 */
  --w-abyss:#020a64;   /* royal-950 */
  --w-deep:#030f7a;
  --w-mid:#0018c4;
  --w-base:#0024ff;    /* royal-600 — the page */
  --w-lite:#2f4dff;
  --aqua:#4274ff;      /* the blue half of CF's bevel */
  --aqua-br:#8fa8ff;
  --foam:#dfdabb;      /* parchment — the italic clause */
  --ink:#080e1a;       /* CF card black */
  --ink-2:#0a1230;

  --line:#4274ff3d;
  --line-soft:#aebcff1f;
  --text:#ffffff;
  --text-2:#ffffffeb;
  --text-3:#ffffffdb;

  --background:var(--w-base);
  --foreground:#fff;
  --card:var(--ink);
  --primary:var(--aqua);
  --border:var(--line);
  --ring:var(--aqua-br);
  --radius:1.25rem;
}

/* ---------- 3. Base ---------- */
body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  color:var(--text);
  background:var(--w-base);
}
h1,h2,h3,.section-title h2,.conversion h2,.final-banner h2,.image-caption h2,.vsl-scene h2{
  font-family:var(--font-heading);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.15;
}
/* CF signature: the accent clause is PP Writer, thin, italic, foam */
em,h1 em,h2 em,h3 em,.hero h1 em,.vsl-poster-copy em,.vsl-scene h2 em{
  font-family:var(--font-accent)!important;
  font-style:italic!important;
  font-weight:100!important;
  color:var(--foam)!important;
  background:none!important;
  -webkit-text-fill-color:var(--foam)!important;
  letter-spacing:-.01em;
}
p{line-height:1.65}
:focus-visible{outline:2px solid var(--aqua-br);outline-offset:5px}
::selection{background:var(--aqua);color:#020a64}

/* ---------- 4. Brushed light, CF style ---------- */
/* Long soft diagonal sweeps over a flat water field — the brushed treatment
   CF uses, in this palette. No waves, no motion. */
body{
  background:
    radial-gradient(1200px 620px at 10% -6%,#4274ff26,#0000 68%),
    radial-gradient(1000px 520px at 90% 2%,#2f4dff2e,#0000 70%),
    linear-gradient(117deg,
      #0000 4%, #ffffff0d 11%, #ffffff05 15%, #0000 22%,
      #0000 44%, #ffffff0a 51%, #0000 58%,
      #0000 74%, #ffffff0f 82%, #ffffff05 86%, #0000 93%),
    #0024ff;
  background-attachment:fixed;
}

.hero-wrap{
  background:
    radial-gradient(900px 460px at 12% -4%,#5b74ff54,#0000 66%),
    radial-gradient(820px 430px at 90% 4%,#2f4dff4d,#0000 68%),
    linear-gradient(117deg,
      #0000 5%, #ffffff12 12%, #ffffff06 17%, #0000 24%,
      #0000 46%, #ffffff0a 53%, #0000 60%,
      #0000 76%, #ffffff0d 84%, #0000 91%),
    linear-gradient(180deg,#0024ff 0%,#0021ef 46%,#001cd2 78%,#0019c4 100%);
  position:relative;
}
.hero-wrap:before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(540px 210px at 28% 24%,#9fb3ff1a,#0000 70%),
    radial-gradient(640px 240px at 74% 42%,#4274ff14,#0000 72%);
  height:auto;
}
.hero-wrap>*{position:relative;z-index:2}

.tinted-band{
  background:
    linear-gradient(117deg,#0000 6%,#ffffff0a 13%,#0000 21%,#0000 70%,#ffffff0a 80%,#0000 88%),
    linear-gradient(180deg,#020c70,#02118c 55%,#020c70);
  border-top:1px solid #8fa8ff2e;
  border-bottom:1px solid #8fa8ff2e;
  position:relative;
}

.final-banner{background:var(--w-abyss);position:relative;border-top:1px solid #8fa8ff2e}
.final-banner:after{
  background:linear-gradient(90deg,#020a64f2 8%,#030f7ae0 42%,#0018c466 100%);
}

/* ---------- 5. Navigation ---------- */
.nav-links{color:var(--text-2);font-size:15px}
.nav-links a:hover{color:var(--foam)}
.brand-logo{filter:brightness(0) invert(1);opacity:.97}

/* ---------- 6. Buttons — CF pill ---------- */
.cta{
  font-family:var(--font-heading)!important;
  font-weight:700!important;
  font-size:15px!important;
  border-radius:999px!important;
  border:0!important;
  color:var(--w-abyss)!important;
  background:linear-gradient(180deg,#fff 17%,#fff 50%,#e8e8e8 100%)!important;
  box-shadow:0 1px 1px #0000001a,0 2px 4px #00000014,0 5px 10px #0000000f!important;
  height:54px!important;
  padding:0 8px 0 26px!important;
  gap:16px!important;
  transition:transform .2s,box-shadow .2s!important;
}
.cta:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#fff 17%,#fff 55%,#dcdcdc 100%)!important;
  box-shadow:0 2px 3px #00000017,0 8px 18px #0000001f,0 14px 34px #0000001a!important;
}
.cta>svg{
  width:34px!important;height:34px!important;
  padding:9px;box-sizing:border-box;
  border-radius:999px;
  background:var(--w-abyss);
  color:#fff;
  flex-shrink:0;
}
.nav-cta{
  height:42px!important;
  font-size:14px!important;
  padding:0 6px 0 18px!important;
  gap:10px!important;
  color:var(--w-abyss)!important;
  background:#fff!important;
}
.nav-cta>svg{width:28px!important;height:28px!important;padding:7px}

/* ---------- 7. Eyebrows ---------- */
.eyebrow,.form-eyebrow,.compare-label,.card-number,.step-note,.offer-label,.vsl-kicker,.hero-tag,.service-strip>span{
  font-family:var(--font-heading)!important;
  font-weight:500!important;
  font-size:13px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
  color:#ffffff99!important;
}
.hero-tag span{background:var(--aqua-br);box-shadow:0 0 14px var(--aqua-br)}
.offer-label,.form-eyebrow{color:#0024ff!important}
.step-note,.card-number{color:#aebcffb3!important}
.vsl-kicker{color:#c4cfffd9!important}

/* ---------- 8. Cards — CF black card + bright ring ---------- */
.benefit,.vsl-shell,.comparison-grid article,.inclusions [data-slot=accordion-item]{
  background:linear-gradient(160deg,#0a1230,#080e1a 65%)!important;
  border:1.5px solid #4274ff4d!important;
  box-shadow:0 0 0 1px #0a123033,0 0 34px #4274ff1f,0 20px 46px #00141f4d!important;
}
.benefit{border-radius:22px!important}
.vsl-shell{border-radius:26px!important}
.comparison-grid article{border-radius:22px 0 0 22px!important}
.comparison-grid .comparison-good{
  background:linear-gradient(150deg,#2f4dff,#020a64 72%)!important;
  border-color:#8fa8ff7a!important;
  border-radius:0 22px 22px 0!important;
  box-shadow:0 0 44px #4274ff33,0 20px 46px #00141f59!important;
}
.comparison-good .compare-label,.comparison-good svg{color:var(--aqua-br)!important}
.comparison-good p{color:#ffffff}
.comparison-grid p{color:var(--text-3)}
.comparison-grid svg{color:#8b95a6}
.comparison-grid h3{font-family:var(--font-heading);letter-spacing:-.02em}

.benefit h3{font-family:var(--font-heading);letter-spacing:-.02em}
.benefit p{color:var(--text-3)}
.benefit.small>svg{color:var(--aqua-br)}

/* inner mock UI */
.mini-plan{
  background:#0d1638!important;
  border:1px solid #4274ff4d!important;
  border-radius:16px!important;
  box-shadow:0 18px 38px #00141f66!important;
}
.mini-plan>span{color:var(--foam)}
.mini-plan>div{border-top-color:#4274ff30}
.mini-plan b{color:#ffffff}
.mini-plan>div svg{color:var(--aqua-br)}
.ad-preview{
  background:#0d1638!important;
  border:1px solid #4274ff4d!important;
  border-radius:16px!important;
}
.ad-avatar{background:var(--aqua)!important;color:#020a64}
.ad-preview small{color:#9aa6d6}
.ad-preview>p{color:#eef1ff}
.ad-image{border-radius:8px}
.ad-bottom span{background:#0024ff;color:#ffffff;border-radius:999px;padding:5px 10px}

/* ---------- 9. Stats / steps / lists ---------- */
.stats>div{border-right-color:#4274ff30}
.stats strong{font-family:var(--font-heading);letter-spacing:-.03em}
.stats strong span{color:var(--aqua-br)}
.stats h3{font-family:var(--font-heading)}
.stats p{color:var(--text-3)}
.section-description{color:var(--text-3)}
.service-strip{border-bottom:0!important}
.service-strip>div{color:var(--text-2)}
.service-strip svg{color:var(--aqua-br)}
.step{border:1.5px solid #8fa8ff7a;color:var(--foam);font-family:var(--font-heading)}
.steps h3{font-family:var(--font-heading);letter-spacing:-.02em}
.steps p{color:var(--text-3)}
.fit-list p{border-bottom-color:#4274ff2e;color:var(--text-2)}
.fit-list svg{color:var(--aqua-br)}
.fit-foot{color:var(--text-3)}
.center{color:var(--text-3)}
.microcopy,.fine-print,.vsl-intro,.hero-description{color:var(--text-3)}
.hero-description{font-size:18px}

/* ---------- 10. Accordions ---------- */
.inclusions [data-slot=accordion-item]{border-radius:14px!important;margin-bottom:10px}
.inclusions [data-slot=accordion-trigger] b{color:var(--aqua-br);font-family:var(--font-heading)}
.inclusions [data-slot=accordion-content]>div{color:var(--text-3)}
.faq [data-slot=accordion-item]{border-color:#4274ff30!important;background:none!important;box-shadow:none!important}
.faq [data-slot=accordion-trigger]{font-family:var(--font-heading);font-weight:500}
.faq [data-slot=accordion-content]>div{color:var(--text-3)}

/* ---------- 11. Light cards (offer + enquiry) ---------- */
.offer-card,.enquiry-card{
  background:#f8f9fb!important;
  border:1px solid #fff!important;
  border-radius:26px!important;
  color:#020a64!important;
  box-shadow:0 0 70px #4274ff2e,0 26px 60px #00141f40!important;
}
.offer-card h3,.enquiry-card h3{font-family:var(--font-heading);letter-spacing:-.025em}
.offer-card>p,.enquiry-card form>p{color:#55607a}
.price-text{font-family:var(--font-heading);border-bottom-color:#e2e6ec}
.price-text span{color:#8b95a6}
.offer-card li svg{color:var(--w-base)}
.offer-card small,.success p{color:#8b95a6}
.enquiry-card label{font-family:var(--font-heading);font-weight:500}
.enquiry-card label span{color:#8b95a6}
.enquiry-card input{
  border-radius:999px!important;
  border:1px solid #e2e6ec!important;
  background:#fff!important;
  padding:0 18px!important;
  height:48px!important;
  color:#020a64!important;
}
.enquiry-card input:focus{border-color:var(--w-base)!important;box-shadow:0 0 0 3px #4274ff33!important}
.enquiry-card input::placeholder{color:#8b95a6}
.success>svg{color:var(--w-base)}
.success button{background:var(--w-base);border-radius:999px;font-family:var(--font-heading);font-weight:700}
.privacy-note{color:#8b95a6}

/* pill inverted for light surfaces */
.offer-card .cta,.enquiry-card .cta{
  background:linear-gradient(180deg,#0024ff 0%,#0018c4 55%,#0014a8 100%)!important;
  color:#fff!important;
  box-shadow:0 1px 1px #080e1a1f,0 2px 6px #080e1a1f,0 10px 22px #080e1a24!important;
}
.offer-card .cta:hover,.enquiry-card .cta:hover{
  background:linear-gradient(180deg,#2f4dff 0%,#0024ff 55%,#0018c4 100%)!important;
}
.offer-card .cta>svg,.enquiry-card .cta>svg{background:#fff;color:#030f7a}

/* ---------- 12. Conversion block ---------- */
.conversion-copy>p:not(.eyebrow){color:var(--text-3)}
.next-steps h3{font-family:var(--font-heading)}
.next-steps p{color:var(--text-2)}
.next-steps p span{border:1.5px solid #8fa8ff7a;color:var(--foam);font-family:var(--font-heading)}
.no-obligation{color:var(--text-3)}
.no-obligation svg{color:var(--aqua-br)}

/* ---------- 13. VSL player ---------- */
.vsl-shade{background:linear-gradient(90deg,#020a64f2,#030f7ac2 45%,#0018c447 100%),linear-gradient(#0000 50%,#020a64e0)}
.is-started .vsl-shade{background:linear-gradient(90deg,#020a64fa,#030f7af2 65%,#030f7abf)}
.vsl-topline{color:#ffffff}
.vsl-topline b{color:var(--aqua-br)}
.vsl-format{color:#c4cfff}
.vsl-poster-copy strong{font-family:var(--font-heading);letter-spacing:-.025em}
.vsl-watch-label{color:#eef1ff}
.vsl-play-group{font-family:var(--font-heading)}
.vsl-play-group small{color:#c4cfff}
.vsl-play-circle{
  background:linear-gradient(180deg,#fff 20%,#e8e8e8)!important;
  border:0!important;
  box-shadow:0 0 0 10px #ffffff1f,0 0 55px #4274ff99!important;
}
.vsl-play-circle svg{color:var(--w-abyss)}
.vsl-controls{background:#060b2e;border-top-color:#4274ff30}
.vsl-controls button:hover{background:#0f2196}
.vsl-time span{color:#9aa6d6}
.vsl-controls progress{background:#0e1a6e}
.vsl-controls progress::-webkit-progress-bar{background:#0e1a6e}
.vsl-controls progress::-webkit-progress-value{background:var(--aqua-br)}
.vsl-controls progress::-moz-progress-bar{background:var(--aqua-br)}
.vsl-control-label{color:#9aa6d6}
.vsl-chapters{border-top-color:#4274ff30}
.vsl-chapters button{color:var(--text-2);border-radius:12px}
.vsl-chapters button span{color:#9aa6d6}
.vsl-chapters button:hover,.vsl-chapters button.active{background:#0f2196;color:#fff}
.vsl-chapters button.active span{color:var(--aqua-br)}
.vsl-trust{color:var(--text-2)}
.vsl-trust svg{color:var(--aqua-br)}
.vsl-scene>p{color:var(--text-2)}
.vsl-scene li{color:#ffffff}
.vsl-scene li svg{color:var(--aqua-br)}

/* ---------- 14. Hero image / ownership pill ---------- */
.hero-image{border:1.5px solid #4274ff4d;border-radius:22px;box-shadow:0 0 60px #4274ff26}
.image-shade{background:linear-gradient(90deg,#020a64e0,#0000 74%),linear-gradient(#0000 55%,#020a64b3)}
.ownership-pill{
  background:#080e1ad9;
  border:1px solid #4274ff4d;
  border-radius:999px;
}
.ownership-pill svg{color:var(--aqua-br)}
.ownership-pill small{color:#b4c0ee}

/* ---------- 15. Footer & misc ---------- */
.footer{border-top:1px solid #4274ff26}
.footer p,.footer>a{color:var(--text-3)}
.footer>a:hover{color:var(--foam)}
.menu-toggle{color:var(--foam)!important}

@media (max-width:600px){
  .nav-links{background:#030f7a;border:1px solid #4274ff4d;border-radius:18px}
}
.skip-link{border-radius:999px;background:#fff;color:var(--w-abyss)}