
:root{
  --navy:#14346c;
  --navy-2:#0c2c5d;
  --navy-3:#071b38;
  --lime:#95e31d;
  --lime-dark:#73bd10;
  --ink:#151a22;
  --muted:#5f6978;
  --paper:#ffffff;
  --soft:#f4f6f9;
  --soft-blue:#edf3fb;
  --line:#dfe5ec;
  --shadow:0 15px 40px rgba(14,42,81,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(223,229,236,.85);
  box-shadow:0 4px 22px rgba(15,42,78,.06);
  backdrop-filter:blur(14px);
}
.site-header-inner{
  max-width:1380px;
  margin:0 auto;
  min-height:86px;
  padding:12px 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex:0 0 auto;
}

.brand-logo{
  display:block;
  width:190px;
  max-width:190px;
  height:auto;
  object-fit:contain;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  font-size:15px;
}
.site-nav a{
  text-decoration:none;
  padding:11px 14px;
  border-radius:9px;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.site-nav a:hover{
  background:#eef3f9;
  color:var(--navy);
}
.site-nav .youtube-link{
  margin-left:5px;
  background:var(--lime);
  color:#101810;
  padding:12px 17px;
  box-shadow:0 5px 15px rgba(149,227,29,.25);
}
.site-nav .youtube-link:hover{
  background:#84d617;
  color:#101810;
  transform:translateY(-1px);
}
.menu-button{
  display:none;
  align-items:center;
  gap:4px;
  background:var(--navy);
  color:#fff;
  border:0;
  border-radius:9px;
  padding:10px 12px;
  font-weight:800;
}
.menu-button span{
  width:16px;
  height:2px;
  background:#fff;
  display:none;
}

.hero-upgraded{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 18%, rgba(149,227,29,.24), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(42,99,181,.28), transparent 35%),
    linear-gradient(125deg,#061a38 0%,#0d3471 48%,#1a5277 72%,#5b9b37 100%);
  color:#fff;
  padding:74px 28px 78px;
}
.hero-upgraded::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to right,rgba(0,0,0,.7),transparent 80%);
}
.hero-grid{
  position:relative;
  z-index:1;
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.75fr);
  gap:62px;
  align-items:center;
}
.hero-copy{min-width:0}
.hero-kicker,
.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.hero-kicker{
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.hero-copy h1{
  margin:18px 0 18px;
  max-width:780px;
  font-size:clamp(45px,5.4vw,76px);
  line-height:.98;
  letter-spacing:-2.1px;
}
.hero-lead{
  margin:0;
  max-width:700px;
  font-size:19px;
  line-height:1.6;
  color:#eaf1fb;
}
.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.hero-pills span{
  font-size:12px;
  font-weight:800;
  color:#fff;
  padding:7px 10px;
  border-radius:7px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.hero-btn{
  display:inline-block;
  padding:14px 19px;
  border-radius:9px;
  text-decoration:none;
  font-weight:900;
  transition:transform .16s ease,box-shadow .16s ease;
}
.hero-btn:hover{transform:translateY(-2px)}
.hero-btn.primary{
  background:#fff;
  color:var(--navy);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.hero-btn.secondary{
  background:var(--lime);
  color:#111;
  box-shadow:0 8px 24px rgba(104,172,20,.24);
}

.hero-feature{
  width:100%;
  background:rgba(255,255,255,.97);
  color:var(--ink);
  border-radius:20px;
  padding:13px;
  box-shadow:0 26px 70px rgba(2,16,38,.34);
  transform:rotate(1deg);
}
.hero-feature-label{
  padding:4px 4px 10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.3px;
  color:var(--navy);
}
.hero-feature-media,
.review-thumb{
  position:relative;
  display:block;
  overflow:hidden;
  background:#10151e;
}
.hero-feature-media{
  aspect-ratio:16/9;
  border-radius:13px;
}
.hero-feature-media img,
.review-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .25s ease;
}
.hero-feature-media:hover img,
.review-thumb:hover img{transform:scale(1.025)}
.play-button{
  position:absolute;
  left:50%;
  top:50%;
  width:52px;
  height:52px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 7px 22px rgba(0,0,0,.35);
}
.play-button::after{
  content:"";
  position:absolute;
  left:21px;
  top:16px;
  border-left:16px solid #0e1a13;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.play-button.large{
  width:64px;
  height:64px;
}
.play-button.large::after{
  left:26px;
  top:19px;
  border-left-width:20px;
  border-top-width:13px;
  border-bottom-width:13px;
}
.hero-feature-copy{
  display:grid;
  gap:4px;
  padding:14px 7px 7px;
}
.hero-feature-copy span{
  color:#647083;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.hero-feature-copy strong{
  font-size:21px;
  color:var(--navy);
}
.hero-feature-copy a{
  margin-top:3px;
  color:var(--navy);
  font-weight:900;
  font-size:14px;
  text-decoration:none;
}

.trust-strip{
  background:#071a35;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
}
.trust-strip-inner{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.trust-strip-inner div{
  position:relative;
  padding:22px 28px 24px;
}
.trust-strip-inner div + div{
  border-left:1px solid rgba(255,255,255,.12);
}
.trust-strip strong{
  display:block;
  color:var(--lime);
  font-size:14px;
  margin-bottom:3px;
}
.trust-strip span{
  display:block;
  font-size:13px;
  color:#cbd7e7;
  line-height:1.4;
}

.home-section{
  max-width:1260px;
  margin:0 auto;
  padding:66px 28px;
}
.featured-section{padding-bottom:76px}
.section-heading-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:28px;
}
.eyebrow{
  color:var(--lime-dark);
  margin-bottom:8px;
}
.eyebrow.light{color:#c4ff65}
.home-section h2{
  margin:0 0 10px;
  font-size:clamp(32px,4vw,44px);
  line-height:1.05;
  text-transform:none !important;
  color:var(--navy-2);
  letter-spacing:-.8px;
}
.home-section .lead{
  margin:0;
  max-width:750px;
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
}
.outline-link{
  flex:0 0 auto;
  text-decoration:none;
  color:var(--navy);
  font-weight:900;
  border:1px solid #cfd9e6;
  border-radius:9px;
  padding:11px 14px;
  background:#fff;
}

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.review-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease;
}
.review-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(14,42,81,.16);
}
.review-thumb{
  aspect-ratio:16/9;
}
.review-card-body{
  padding:20px 20px 22px;
}
.review-tag{
  display:inline-block;
  color:var(--lime-dark);
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  margin-bottom:7px;
}
.review-card h3{
  margin:0 0 8px;
  color:var(--navy);
  font-size:22px;
}
.review-card p{
  margin:0 0 15px;
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}
.text-link{
  color:var(--navy);
  font-weight:900;
  font-size:14px;
  text-decoration:none;
}

.explore-band{
  background:
    linear-gradient(180deg,#f4f7fb 0%,#fff 100%);
  border-top:1px solid #e5ebf2;
  border-bottom:1px solid #e5ebf2;
}
.visual-category-grid{
  align-items:stretch;
}
.category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.category-card{
  position:relative;
  min-height:290px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
  background:#fff;
  box-shadow:0 10px 28px rgba(14,42,81,.08);
  transition:transform .18s ease,box-shadow .18s ease;
}
.category-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(14,42,81,.14);
}
.category-card-primary{
  background:linear-gradient(145deg,#092452,#143e80);
  border-color:#143e80;
  color:#fff;
}
.category-card-youtube{
  background:linear-gradient(145deg,#efffe1,#dff8bd);
  border-color:#c7e9a1;
}
.category-number{
  position:absolute;
  right:22px;
  top:18px;
  font-size:42px;
  font-weight:900;
  color:rgba(20,52,108,.08);
}
.category-card-primary .category-number{
  color:rgba(255,255,255,.10);
}
.category-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:14px;
  margin-bottom:34px;
  background:#eef4fb;
  color:var(--navy);
  font-size:13px;
  font-weight:950;
  letter-spacing:.5px;
}
.category-card-primary .category-icon{
  background:var(--lime);
  color:#0c2210;
}
.category-card-youtube .category-icon{
  background:#fff;
  font-size:25px;
}
.category-card h3{
  margin:0 0 9px;
  font-size:24px;
  color:var(--navy);
}
.category-card-primary h3{color:#fff}
.category-card p{
  color:var(--muted);
  line-height:1.6;
  margin:0 0 18px;
}
.category-card-primary p{color:#dbe8f8}
.category-card a{
  display:inline-block;
  margin-top:auto;
  color:var(--navy);
  font-weight:900;
  text-decoration:none;
}
.category-card-primary a{color:var(--lime)}

.channel-cta{
  padding:62px 28px;
  background:
    radial-gradient(circle at 85% 50%, rgba(149,227,29,.20), transparent 30%),
    linear-gradient(120deg,#071a35,#0d3268);
  color:#fff;
}
.channel-cta-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.channel-cta h2{
  margin:3px 0 0;
  max-width:770px;
  font-size:clamp(28px,3.5vw,42px);
  line-height:1.12;
}
.channel-cta a{
  flex:0 0 auto;
  background:var(--lime);
  color:#111;
  font-weight:900;
  text-decoration:none;
  padding:14px 18px;
  border-radius:9px;
}

.page-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 20%,rgba(149,227,29,.15),transparent 24%),
    linear-gradient(120deg,#edf3fb 0%,#f7f9fc 70%,#eef9e1 100%);
  border-bottom:1px solid var(--line);
  padding:54px 28px 46px;
}
.page-hero::after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-150px;
  width:360px;
  height:360px;
  border-radius:50%;
  border:60px solid rgba(20,52,108,.035);
}
.page-hero-inner{
  position:relative;
  z-index:1;
  max-width:1260px;
  margin:0 auto;
}
.page-hero h1{
  margin:0 0 10px;
  font-size:clamp(38px,5vw,58px);
  letter-spacing:-1.3px;
  color:var(--navy-2);
}
.page-hero p{
  margin:0;
  max-width:850px;
  line-height:1.65;
  color:var(--muted);
  font-size:17px;
}

.jump-nav{
  max-width:1400px;
  margin:26px auto 12px;
  padding:0 18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.jump-nav a{
  background:#edf3fa;
  border:1px solid #d8e1ec;
  color:var(--navy);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  padding:9px 12px;
  border-radius:999px;
  transition:background .15s ease,transform .15s ease;
}
.jump-nav a:hover{
  background:#dfeafb;
  transform:translateY(-1px);
}
.gear-section-block{
  scroll-margin-top:100px;
}

.site-footer{
  margin-top:0;
  background:#06172f;
  color:#fff;
}
.site-footer-inner{
  max-width:1260px;
  margin:0 auto;
  padding:44px 28px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  margin-bottom:18px;
}
.footer-brand strong{
  font-size:22px;
  letter-spacing:.8px;
}
.footer-brand span{
  margin-top:3px;
  color:var(--lime);
  font-weight:900;
  font-size:11px;
  letter-spacing:2.5px;
}
.site-footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px 22px;
  margin:18px 0 22px;
}
.site-footer-links a{
  color:#fff;
  text-decoration:none;
  font-weight:750;
  font-size:14px;
}
.footer-rule{
  height:1px;
  background:rgba(255,255,255,.13);
  margin:0 0 19px;
}
.site-footer small{
  color:#aebbd0;
  line-height:1.6;
}

@media(max-width:1000px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .hero-feature{
    max-width:680px;
    transform:none;
  }
  .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-grid{grid-template-columns:1fr}
  .trust-strip-inner{grid-template-columns:1fr}
  .trust-strip-inner div + div{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.10);
  }
}

@media(max-width:850px){
  .site-header-inner{
    min-height:76px;
    padding:9px 18px;
  }
  .brand{min-width:0}
  .brand-logo{
    width:150px;
    max-width:150px;
  }
  .menu-button{display:flex}
  .site-nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:76px;
    background:#fff;
    padding:14px 18px 20px;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.10);
    flex-direction:column;
    align-items:stretch;
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 10px}
  .site-nav .youtube-link{margin-left:0;text-align:center}
  .section-heading-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .channel-cta-inner{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:650px){
  .hero-upgraded{padding:50px 18px 54px}
  .hero-copy h1{
    font-size:43px;
    letter-spacing:-1.4px;
  }
  .hero-lead{font-size:17px}
  .hero-feature{padding:10px;border-radius:16px}
  .home-section{padding:48px 18px}
  .review-grid{grid-template-columns:1fr}
  .category-card{min-height:0}
  .channel-cta{padding:48px 18px}
  .page-hero{padding:42px 18px 38px}
}


/* ---- PRODUCT PAGE CSS EXTRACTED FROM YOUR FOURTHWALL CUSTOM HTML ---- */



.lo-spotlight {
display:flex; gap:18px; align-items:center; padding:20px;
border-radius:16px;
background:linear-gradient(135deg,#0f3d89 0%,#14346c 55%,#9be22d 100%);
color:#ffffff;
box-shadow:0 6px 18px rgba(0,0,0,.25);
margin:28px 0;
}
.lo-spotlight img{
width:260px; height:160px; object-fit:cover; border-radius:12px;
background:#e9eef7; flex:0 0 260px;
}
.lo-spotlight .lo-badge{
display:inline-block; background:#ffffff22; border:1px solid #ffffff55;
padding:4px 10px; border-radius:999px; font-size:12px;
color:#ffffff; margin-bottom:10px;
}
.lo-spotlight h3{
margin:6px 0 6px; font-size:24px; letter-spacing:.3px; color:#ffffff;
}
.lo-stars{display:flex;gap:2px;margin:6px 0}
.lo-star{width:18px;height:18px;fill:#ffffff;opacity:.9;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.lo-spotlight ul{
margin:8px 0 14px; padding-left:18px;
font-size:14px; line-height:1.35; color:#ffffff;
}
.lo-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lo-spot-btn{
background:#ffffff; color:#0f3d89; text-decoration:none;
font-weight:800; padding:12px 16px; border-radius:10px;
border:2px solid #ffffff; transition:background .2s ease,color .2s ease;
}
.lo-spot-btn:hover{background:#b2ff47; color:#0f3d89;}
.lo-sub{font-size:12px;opacity:.9;color:#ffffff}
@media (max-width:800px){
.lo-spotlight{flex-direction:column;text-align:center}
.lo-spotlight img{width:100%;height:200px}
}



.lo-wrap{
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 18px;
box-sizing:border-box;
}

.lo-sec{
margin:30px 0 45px;
}

.lo-sec h2{
margin:0 0 22px;
font-size:32px;
font-weight:800;
line-height:1.15;
text-transform:none !important;
color:#111;
}

.lo-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:22px;
align-items:stretch;
}

.lo-card{
display:flex;
flex-direction:column;
width:100%;
min-width:0;
background:#ffffff;
border:1px solid #e3e3e3;
border-radius:16px;
overflow:hidden;
box-shadow:0 4px 14px rgba(0,0,0,.09);
transition:transform .2s ease, box-shadow .2s ease;
box-sizing:border-box;
}

.lo-card:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.lo-card img{
display:block;
width:100%;
height:250px;
object-fit:contain;
background:#ffffff;
padding:18px;
box-sizing:border-box;
}

.lo-txt{
display:flex;
flex-direction:column;
flex:1;
padding:20px;
}

.lo-name{
margin:0 0 10px;
font-size:20px;
line-height:1.25;
font-weight:800;
color:#111;
}

.lo-blurb{
margin:0 0 18px;
font-size:15px;
line-height:1.55;
color:#444;
flex-grow:1;
}

.lo-btn{
display:block;
width:100%;
margin-top:auto;
padding:13px 16px;
background:#9be22d;
color:#111 !important;
font-size:15px;
font-weight:800;
line-height:1.2;
text-align:center;
text-decoration:none !important;
border-radius:9px;
box-sizing:border-box;
transition:background .2s ease, transform .2s ease;
}

.lo-btn:hover{
background:#86cc20;
transform:translateY(-1px);
}

/* Tablet */
@media (max-width:1000px){
.lo-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

/* Mobile */
@media (max-width:650px){
.lo-wrap{
padding:0 12px;
}

.lo-grid{
grid-template-columns:1fr;
gap:18px;
}

.lo-card img{
height:230px;
}

.lo-sec h2{
font-size:27px;
}
}



.lo-sec h2{
text-transform:none !important;
margin-bottom:18px;
}

.lo-spotlight {
display:flex;
gap:22px;
align-items:center;
padding:22px;
border-radius:16px;
background:linear-gradient(135deg,#0f3d89 0%,#14346c 55%,#9be22d 100%);
color:#ffffff;
box-shadow:0 6px 18px rgba(0,0,0,.25);
margin:28px 0;
}

.lo-spotlight img{
width:280px;
height:200px;
object-fit:contain;
border-radius:12px;
background:#ffffff;
padding:8px;
flex:0 0 280px;
}

.lo-spotlight-content{
flex:1;
}

.lo-spotlight .lo-badge{
display:inline-block;
background:#ffffff22;
border:1px solid #ffffff55;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:700;
color:#ffffff;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.4px;
}

.lo-spotlight h3{
margin:6px 0 8px;
font-size:26px;
line-height:1.15;
letter-spacing:.2px;
color:#ffffff;
}

.lo-spotlight p{
margin:0 0 12px;
color:#ffffff;
line-height:1.5;
font-size:15px;
}

.lo-features{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:12px 0 16px;
}

.lo-feature{
display:inline-block;
padding:5px 10px;
border-radius:6px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.25);
font-size:12px;
font-weight:700;
color:#ffffff;
}

.lo-button{
display:inline-block;
background:#ffffff;
color:#14346c !important;
font-weight:800;
font-size:15px;
padding:11px 18px;
border-radius:8px;
text-decoration:none !important;
transition:transform .15s ease, box-shadow .15s ease;
}

.lo-button:hover{
transform:translateY(-1px);
box-shadow:0 5px 12px rgba(0,0,0,.22);
}

.lo-disclosure{
margin-top:10px !important;
font-size:11px !important;
opacity:.80;
}

.lo-video{
margin-top:26px;
text-align:center;
}

.lo-video h3{
margin:0 0 12px;
font-size:22px;
text-align:center;
}

.lo-video-wrap{
position:relative;
width:100%;
max-width:550px;
aspect-ratio:16 / 9;
overflow:hidden;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,.18);
margin-left:auto;
margin-right:auto;
}

.lo-video-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}

@media (max-width:700px){
.lo-spotlight{
flex-direction:column;
align-items:stretch;
}

.lo-spotlight img{
width:100%;
height:auto;
max-height:280px;
flex:auto;
box-sizing:border-box;
}

.lo-spotlight h3{
font-size:23px;
}

.lo-video h3{
font-size:20px;
}
}



.lo-sec h2{
text-transform:none !important;
text-align:center;
margin-bottom:22px;
}

.lo-spotlight {
display:flex;
gap:22px;
align-items:center;
padding:22px;
border-radius:16px;
background:linear-gradient(135deg,#0f3d89 0%,#14346c 55%,#9be22d 100%);
color:#ffffff;
box-shadow:0 6px 18px rgba(0,0,0,.25);
margin:0 0 24px;
}

.lo-spotlight img{
width:280px;
height:200px;
object-fit:contain;
border-radius:12px;
background:#ffffff;
padding:8px;
flex:0 0 280px;
box-sizing:border-box;
}

.lo-spotlight-content{
flex:1;
}

.lo-spotlight .lo-badge{
display:inline-block;
background:#ffffff22;
border:1px solid #ffffff55;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:700;
color:#ffffff;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.4px;
}

.lo-spotlight h3{
margin:6px 0 8px;
font-size:26px;
line-height:1.15;
letter-spacing:.2px;
color:#ffffff;
}

.lo-spotlight p{
margin:0 0 12px;
color:#ffffff;
line-height:1.5;
font-size:15px;
}

.lo-features{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:12px 0 16px;
}

.lo-feature{
display:inline-block;
padding:5px 10px;
border-radius:6px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.25);
font-size:12px;
font-weight:700;
color:#ffffff;
}

.lo-button{
display:inline-block;
background:#ffffff;
color:#14346c !important;
font-weight:800;
font-size:15px;
padding:11px 18px;
border-radius:8px;
text-decoration:none !important;
transition:transform .15s ease, box-shadow .15s ease;
}

.lo-button:hover{
transform:translateY(-1px);
box-shadow:0 5px 12px rgba(0,0,0,.22);
}


/* ECOVACS VIDEO SECTION */

.lo-video-section{
margin:34px auto 28px;
text-align:center;
width:100%;
}

.lo-video-section h3{
margin:0 0 16px;
font-size:24px;
color:#14346c;
}

.lo-video-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:20px;
width:100%;
max-width:1100px;
margin:0 auto;
}

.lo-video-wrap{
position:relative;
width:100%;
aspect-ratio:16 / 9;
overflow:hidden;
border-radius:14px;
background:#000000;
box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.lo-video-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}


.lo-disclosure{
margin-top:14px !important;
font-size:11px !important;
color:#666;
text-align:center;
}


@media (max-width:700px){

.lo-spotlight{
flex-direction:column;
align-items:stretch;
}

.lo-spotlight img{
width:100%;
height:auto;
max-height:280px;
flex:auto;
}

.lo-spotlight h3{
font-size:23px;
}

.lo-video-grid{
grid-template-columns:1fr;
gap:16px;
}

.lo-video-section h3{
font-size:21px;
}
}



.lo-video-section{
margin:30px auto 10px;
max-width:550px;
width:100%;
}

.lo-video-title{
text-align:center;
font-size:22px;
font-weight:800;
margin:0 0 14px;
}

.lo-video-wrap{
position:relative;
width:100%;
aspect-ratio:16/9;
}

.lo-video-wrap iframe{
width:100%;
height:100%;
border:none;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,.20);
}



.lo-sec h2{
text-transform:none !important;
text-align:center;
margin-bottom:12px;
}

.lo-offer-box{
max-width:760px;
margin:0 auto 24px;
padding:14px 18px;
border-radius:12px;
background:#f4f8ee;
border:2px solid #9be22d;
text-align:center;
color:#14346c;
font-size:16px;
line-height:1.4;
}

.lo-offer-box strong{
font-weight:800;
}

.lo-code{
display:inline-block;
margin-left:5px;
padding:4px 9px;
border-radius:6px;
background:#14346c;
color:#ffffff;
font-weight:800;
letter-spacing:.2px;
}

.lo-spotlight {
display:flex;
gap:22px;
align-items:center;
padding:22px;
border-radius:16px;
background:linear-gradient(135deg,#0f3d89 0%,#14346c 55%,#9be22d 100%);
color:#ffffff;
box-shadow:0 6px 18px rgba(0,0,0,.25);
margin:0 0 24px;
}

.lo-spotlight img{
width:280px;
height:200px;
object-fit:contain;
border-radius:12px;
background:#ffffff;
padding:8px;
flex:0 0 280px;
box-sizing:border-box;
}

.lo-spotlight-content{
flex:1;
}

.lo-spotlight .lo-badge{
display:inline-block;
background:#ffffff22;
border:1px solid #ffffff55;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:700;
color:#ffffff;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.4px;
}

.lo-spotlight h3{
margin:6px 0 8px;
font-size:26px;
line-height:1.15;
letter-spacing:.2px;
color:#ffffff;
}

.lo-spotlight p{
margin:0 0 12px;
color:#ffffff;
line-height:1.5;
font-size:15px;
}

.lo-features{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:12px 0 16px;
}

.lo-feature{
display:inline-block;
padding:5px 10px;
border-radius:6px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.25);
font-size:12px;
font-weight:700;
color:#ffffff;
}

.lo-button{
display:inline-block;
background:#ffffff;
color:#14346c !important;
font-weight:800;
font-size:15px;
padding:11px 18px;
border-radius:8px;
text-decoration:none !important;
transition:transform .15s ease, box-shadow .15s ease;
}

.lo-button:hover{
transform:translateY(-1px);
box-shadow:0 5px 12px rgba(0,0,0,.22);
}


/* MOWRATOR VIDEO SECTION */

.lo-video-section{
margin:34px auto 28px;
text-align:center;
}

.lo-video-section h3{
margin:0 0 16px;
font-size:24px;
color:#14346c;
}

.lo-video-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:20px;
width:100%;
max-width:1100px;
margin:0 auto;
}

.lo-video-wrap{
position:relative;
width:100%;
aspect-ratio:16 / 9;
overflow:hidden;
border-radius:14px;
background:#000000;
box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.lo-video-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}


.lo-disclosure{
margin-top:14px !important;
font-size:11px !important;
color:#666;
text-align:center;
}


@media (max-width:700px){

.lo-spotlight{
flex-direction:column;
align-items:stretch;
}

.lo-spotlight img{
width:100%;
height:auto;
max-height:280px;
flex:auto;
}

.lo-spotlight h3{
font-size:23px;
}

.lo-code{
display:block;
width:max-content;
max-width:100%;
margin:8px auto 0;
}

.lo-video-grid{
grid-template-columns:1fr;
gap:16px;
}

.lo-video-section h3{
font-size:21px;
}

}



.lo-sec h2{
text-transform:none !important;
margin-bottom:18px;
}

/* NAVIMOW DISCOUNT OFFER */
.lo-offer{
text-align:center;
background:#f5f7fa;
border:2px solid #9be22d;
border-radius:14px;
padding:18px 20px;
margin:0 0 24px;
box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.lo-offer-title{
margin:0 0 6px;
font-size:20px;
line-height:1.25;
font-weight:800;
color:#14346c;
}

.lo-offer-text{
margin:0 0 12px !important;
font-size:15px !important;
line-height:1.5;
color:#333 !important;
}

.lo-code{
display:inline-block;
margin:4px 0 14px;
padding:7px 13px;
background:#14346c;
border-radius:6px;
color:#ffffff;
font-size:15px;
font-weight:800;
letter-spacing:.3px;
}

.lo-offer-button{
display:block;
width:max-content;
max-width:100%;
margin:0 auto;
background:#9be22d;
color:#111111 !important;
font-size:15px;
font-weight:800;
padding:11px 20px;
border-radius:8px;
text-decoration:none !important;
transition:transform .15s ease, box-shadow .15s ease;
}

.lo-offer-button:hover{
transform:translateY(-1px);
box-shadow:0 5px 12px rgba(0,0,0,.18);
}

.lo-spotlight {
display:flex;
gap:22px;
align-items:center;
padding:22px;
border-radius:16px;
background:linear-gradient(135deg,#0f3d89 0%,#14346c 55%,#9be22d 100%);
color:#ffffff;
box-shadow:0 6px 18px rgba(0,0,0,.25);
margin:0 0 24px;
}

.lo-spotlight img{
width:280px;
height:200px;
object-fit:contain;
border-radius:12px;
background:#ffffff;
padding:8px;
flex:0 0 280px;
box-sizing:border-box;
}

.lo-spotlight-content{
flex:1;
}

.lo-spotlight .lo-badge{
display:inline-block;
background:#ffffff22;
border:1px solid #ffffff55;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:700;
color:#ffffff;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.4px;
}

.lo-spotlight h3{
margin:6px 0 8px;
font-size:26px;
line-height:1.15;
letter-spacing:.2px;
color:#ffffff;
}

.lo-spotlight p{
margin:0 0 12px;
color:#ffffff;
line-height:1.5;
font-size:15px;
}

.lo-features{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:12px 0 16px;
}

.lo-feature{
display:inline-block;
padding:5px 10px;
border-radius:6px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.25);
font-size:12px;
font-weight:700;
color:#ffffff;
}

.lo-button{
display:inline-block;
background:#ffffff;
color:#14346c !important;
font-weight:800;
font-size:15px;
padding:11px 18px;
border-radius:8px;
text-decoration:none !important;
transition:transform .15s ease, box-shadow .15s ease;
}

.lo-button:hover{
transform:translateY(-1px);
box-shadow:0 5px 12px rgba(0,0,0,.22);
}


/* NAVIMOW VIDEO SECTION */

.lo-video-section{
margin:34px auto 28px;
text-align:center;
width:100%;
}

.lo-video-section h3{
margin:0 0 16px;
font-size:24px;
color:#14346c;
}

.lo-video-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:20px;
width:100%;
max-width:1100px;
margin:0 auto;
}

.lo-video-wrap{
position:relative;
width:100%;
aspect-ratio:16 / 9;
overflow:hidden;
border-radius:14px;
background:#000000;
box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.lo-video-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}


.lo-disclosure{
margin-top:14px !important;
font-size:11px !important;
color:#666;
text-align:center;
}


@media (max-width:700px){

.lo-spotlight{
flex-direction:column;
align-items:stretch;
}

.lo-spotlight img{
width:100%;
height:auto;
max-height:280px;
flex:auto;
}

.lo-spotlight h3{
font-size:23px;
}

.lo-offer{
padding:16px;
}

.lo-offer-title{
font-size:19px;
}

.lo-video-grid{
grid-template-columns:1fr;
gap:16px;
}

.lo-video-section h3{
font-size:21px;
}
}



.lo-sec h2{
text-transform:none !important;
margin-bottom:18px;
}

.lo-spotlight {
display:flex;
gap:22px;
align-items:center;
padding:22px;
border-radius:16px;
background:linear-gradient(135deg,#0f3d89 0%,#14346c 55%,#9be22d 100%);
color:#ffffff;
box-shadow:0 6px 18px rgba(0,0,0,.25);
margin:0 0 24px;
}

.lo-spotlight img{
width:280px;
height:200px;
object-fit:contain;
border-radius:12px;
background:#ffffff;
padding:8px;
flex:0 0 280px;
box-sizing:border-box;
}

.lo-spotlight-content{
flex:1;
}

.lo-spotlight .lo-badge{
display:inline-block;
background:#ffffff22;
border:1px solid #ffffff55;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:700;
color:#ffffff;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.4px;
}

.lo-spotlight h3{
margin:6px 0 8px;
font-size:26px;
line-height:1.15;
letter-spacing:.2px;
color:#ffffff;
}

.lo-spotlight p{
margin:0 0 12px;
color:#ffffff;
line-height:1.5;
font-size:15px;
}

.lo-features{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:12px 0 16px;
}

.lo-feature{
display:inline-block;
padding:5px 10px;
border-radius:6px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.25);
font-size:12px;
font-weight:700;
color:#ffffff;
}

.lo-button{
display:inline-block;
background:#ffffff;
color:#14346c !important;
font-weight:800;
font-size:15px;
padding:11px 18px;
border-radius:8px;
text-decoration:none !important;
transition:transform .15s ease, box-shadow .15s ease;
}

.lo-button:hover{
transform:translateY(-1px);
box-shadow:0 5px 12px rgba(0,0,0,.22);
}


/* WORX VIDEO SECTION */

.lo-video-section{
margin:30px auto 28px;
max-width:550px;
width:100%;
text-align:center;
}

.lo-video-title{
margin:0 0 14px;
font-size:22px;
font-weight:800;
color:#14346c;
text-align:center;
}

.lo-video-wrap{
position:relative;
width:100%;
aspect-ratio:16 / 9;
overflow:hidden;
border-radius:14px;
background:#000000;
box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.lo-video-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}


.lo-disclosure{
margin-top:14px !important;
font-size:11px !important;
color:#666;
text-align:center;
opacity:.80;
}


@media (max-width:700px){

.lo-spotlight{
flex-direction:column;
align-items:stretch;
}

.lo-spotlight img{
width:100%;
height:auto;
max-height:280px;
flex:auto;
}

.lo-spotlight h3{
font-size:23px;
}

.lo-video-title{
font-size:20px;
}
}




/* CENTER THE TWO AERATOR PRODUCT CARDS */
.lo-aerator-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 340px));
justify-content:center;
gap:22px;
width:100%;
margin:0 auto;
}


/* VIDEO SECTION */
.lo-video-section{
margin:30px auto 28px;
max-width:550px;
width:100%;
text-align:center;
}

.lo-video-title{
margin:0 0 14px;
font-size:22px;
font-weight:800;
color:#14346c;
text-align:center;
}

.lo-video-wrap{
position:relative;
width:100%;
aspect-ratio:16 / 9;
overflow:hidden;
border-radius:14px;
background:#000000;
box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.lo-video-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}


@media (max-width:700px){

.lo-aerator-grid{
grid-template-columns:minmax(0, 1fr);
max-width:400px;
}

.lo-video-title{
font-size:20px;
}

}




/* ---- SITE-WIDE POLISH OVERRIDES ---- */
.gear-section-block{
  max-width:1440px;
  margin:0 auto;
  padding:8px 0;
}
.gear-section-block .container.wrapper{
  max-width:none !important;
}
.gear-section-block .lo-sec{
  margin-top:34px;
}
.gear-section-block .lo-sec h2{
  color:#0c2c5d !important;
  letter-spacing:-.5px;
}
.lo-card,
.lo-spotlight{
  transition:transform .18s ease,box-shadow .18s ease;
}
.lo-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(14,42,81,.13) !important;
}
.lo-spotlight{
  box-shadow:0 12px 28px rgba(14,42,81,.18) !important;
}
