*{
  box-sizing:border-box;
}
html,
body{
  min-height:100%;
}
body{
  margin:0;
  background:var(--dark-bg);
  font-family:Inter,sans-serif;
  color:var(--classic-white);
  position:relative;
}
.brandWrapper{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  margin-top:5px;
}
.logoImage{
  width:42px;
  height:42px;
  object-fit:contain;
}
body.light{
  background:var(--light-bg-alt);
  color:var(--dark-bg);
}
body.light{
  scrollbar-color:var(--dark-bg) var(--transparent);
}
*::-webkit-scrollbar-track{
  background:var(--transparent);
}
*::-webkit-scrollbar-thumb{
  background:var(--scrollbar-var(--classic-white));
  border-radius:999px;
}
body.light *::-webkit-scrollbar-thumb{
  background:var(--dark-bg);
}
.homeHeader{
  width:100%;
  min-height:70px;
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:20;
}
.brandName{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.3px;
  cursor:pointer;
}
.headerCenterLinks{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  align-items:center;
}
.headerLink,
.headerLoginBtn{
  height:34px;
  padding:0 16px;
  border-radius:11px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  border:none;
}
.headerLink{
  background:var(--transparent);
  color:var(--text-muted);
}
.headerLink:hover{
  color:var(--classic-white);
  background:var(--dark-card);
}
.headerLoginBtn{
  background:var(--primary);
  color:var(--classic-white);
}
.headerLoginBtn:hover{
  background:var(--primary-hover);
}
.headerPricingBtn{
  background:none;
  border:none;
  box-shadow:none;
  color:var(--classic-white);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  padding:0;
}
body.light .headerPricingBtn{
  color:var(--dark-bg);
}
.headerPricingBtn:hover{
  color:var(--primary);
}
.themeIcon{
  font-size:18px;
}
.homePage{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:26px 24px 70px 24px;
}
.heroSection{
  position:relative;
  margin-top:-30px;
  overflow:hidden;
  min-height:450px;
  padding:72px 42px;
  border-radius:28px;
  background:linear-gradient(135deg,var(--dark-card) 0%,var(--dark-bg) 58%,var(--hero-deep-purple) 100%);
  border:1px solid var(--dark-border);
  box-shadow:0 24px 65px var(--shadow-card);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.heroGlow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:var(--primary-soft);
  filter:blur(40px);
  top:-140px;
  right:-110px;
}
.heroBadge,
.sectionLabel{
  width:fit-content;
  margin-top:-20px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--primary-badge-bg);
  color:var(--soft-blue);
  font-size:14px;
  font-weight:800;
  margin-bottom:18px;
}
.heroSection h1{
  position:relative;
  margin:0;
  font-size:54px;
  line-height:1.03;
  letter-spacing:-1.8px;
  color:var(--classic-white);
}
.heroSection h1 span{
  color:var(--soft-blue);
}
.heroSubtitle{
  position:relative;
  max-width:680px;
  margin:24px 0 0 0;
  color:var(--light-border);
  font-size:18px;
  line-height:1.5;
}
.heroText{
  position:relative;
  max-width:760px;
  margin:14px 0 0 0;
  color:var(--text-muted);
  font-size:15px;
  line-height:1.6;
}
.mainCta{
  position:relative;
  margin-top:32px;
  height:44px;
  padding:0 26px;
  border:none;
  border-radius:14px;
  background:var(--primary);
  color:var(--classic-white);
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 30px var(--primary-cta-shadow);
}
.mainCta:hover{
  background:var(--primary-hover);
  transform:translateY(-1px);
}
.sectionCard,
.finalCtaSection{
  margin-top:32px;
  padding:36px;
  border-radius:24px;
  background:var(--dark-card);
  border:1px solid var(--dark-border);
  box-shadow:0 18px 45px var(--shadow-soft);
}
.sectionCard h2,
.finalCtaSection h2,
.toolsTitle{
  margin:0;
  font-size:32px;
  line-height:1.15;
  letter-spacing:-.8px;
}
.sectionCard p,
.finalCtaSection p{
  max-width:820px;
  color:var(--light-border);
  font-size:15px;
  line-height:1.65;
}
.painList{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:22px 0;
}
.painList div,
.queuePoints div,
.audienceGrid div{
  padding:14px;
  border-radius:14px;
  background:var(--dark-bg);
  border:1px solid var(--dark-border);
  color:var(--light-border);
  font-size:13px;
  font-weight:700;
}
.benefitsGrid{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.benefitCard,
.toolCard{
  padding:24px;
  border-radius:22px;
  background:var(--dark-card);
  border:1px solid var(--dark-border);
  box-shadow:0 18px 45px var(--shadow-home-soft);
}
.highlightedBenefit{
  border-color:var(--primary);
  box-shadow:0 18px 45px var(--primary-badge-bg);
}
.benefitIcon{
  font-size:28px;
  margin-bottom:12px;
}
.benefitCard h3,
.toolCard h3{
  margin:0 0 10px 0;
  font-size:20px;
  color:var(--classic-white);
}
.benefitStat{
  color:var(--soft-blue);
  font-size:13px;
  font-weight:900;
  margin-bottom:12px;
}
.benefitCard p,
.toolCard p{
  margin:0;
  color:var(--light-border);
  font-size:14px;
  line-height:1.6;
}
.tinyNote{
  margin:12px 0 0 4px;
  color:var(--text-muted);
  font-size:12px;
}
.queuePoints{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:22px 0;
}
.queueClosing{
  color:var(--classic-white) !important;
  font-weight:800;
}
.toolsSection{
  margin-top:42px;
}
.centered{
  margin-left:auto;
  margin-right:auto;
}
.toolsTitle{
  text-align:center;
  margin-bottom:24px;
}
.toolsGrid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
.toolCard{
  position:relative;
  overflow:hidden;
}
.toolTopLine{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--primary);
}
.injectorToolCard{
  border-color:var(--primary-strong-border);
}
.audienceGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:22px;
}
.finalCtaSection{
  text-align:center;
  background:linear-gradient(135deg,var(--dark-card),var(--hero-deep-purple));
}
.finalCtaSection p{
  margin-left:auto;
  margin-right:auto;
}
.homeFooter{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px 34px 24px;
  display:flex;
  justify-content:space-between;
  color:var(--text-muted);
  font-size:12px;
}
.footerLinks{
  display:flex;
  gap:16px;
}
.footerLinks span{
  cursor:pointer;
}
.footerLinks span:hover{
  color:var(--classic-white);
}
body.light .heroSection,
body.light .sectionCard,
body.light .benefitCard,
body.light .toolCard,
body.light .finalCtaSection{
  background:var(--classic-white);
  border:1px solid var(--light-border);
  box-shadow:0 16px 40px var(--shadow-light-nav);
}
body.light .heroSection h1,
body.light .sectionCard h2,
body.light .finalCtaSection h2,
body.light .toolsTitle,
body.light .benefitCard h3,
body.light .toolCard h3{
  color:var(--dark-bg);
}
body.light .heroSubtitle,
body.light .sectionCard p,
body.light .finalCtaSection p,
body.light .benefitCard p,
body.light .toolCard p{
  color:var(--dark-border);
}
body.light .heroText,
body.light .tinyNote{
  color:var(--text-muted-light);
}
body.light .painList div,
body.light .queuePoints div,
body.light .audienceGrid div{
  background:var(--light-input);
  border:1px solid var(--light-border);
  color:var(--dark-bg);
}
body.light .headerLink:hover{
  background:var(--light-row-border);
  color:var(--dark-bg);
}
body.light .footerLinks span:hover{
  color:var(--dark-bg);
}
@media (max-width:767px){
  .homeHeader{
    padding:14px 14px 8px 14px;
    min-height:58px;
  }
  .sectionLabel{
    margin-top:5px;
  }
  .logoImage{
    width:40px;
    height:40px;
    object-fit:contain;
  }
  .headerCenterLinks{
    display:none;
  }
  .topRightControls{
    gap:8px;
  }
  .homePage{
    padding:12px 12px 42px 12px;
  }
  .heroSection{
    min-height:auto;
    margin-top:20px;
    padding:42px 18px;
    border-radius:22px;
  }
  .heroSection h1{
    font-size:34px;
    line-height:1.08;
    letter-spacing:-1px;
  }
  .heroSubtitle{
    font-size:15px;
  }
  .heroText{
    font-size:13px;
  }
  .headerCenterLinks{
    position:absolute;
    left:50%;
    margin-top:60px;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    align-items:center;
  }
  .headerLink,
  .headerLoginBtn{
    height:34px;
    padding:0 16px;
    margin-top:20px;
    border-radius:11px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    border:none;
  }
  .headerLink{
    background:var(--transparent);
   color:var(--text-muted);
  }
  .headerLink:hover{
    color:var(--classic-white);
    background:var(--dark-card);
  }
  .headerLoginBtn{
    background:var(--primary);
    color:var(--classic-white);
  }
  .headerLoginBtn:hover{
    background:var(--primary-hover);
  }
  .headerPricingBtn{
    background:none;
    border:none;
    box-shadow:none;
    color:var(--classic-white);
    font-size:14px;
    margin-top:20px;
    font-weight:600;
    cursor:pointer;
    padding:0;
  }
  body.light .headerPricingBtn{
    color:var(--dark-bg);
  }
  .headerPricingBtn:hover{
    color:var(--primary);
  }
  .mainCta{
    width:100%;
    height:44px;
  }
  .sectionCard,
  .finalCtaSection{
    margin-top:18px;
    padding:22px 16px;
    border-radius:20px;
  }
  .forceRepaint{
    transform:translateZ(0);
  }
  .sectionCard h2,
  .finalCtaSection h2,
  .toolsTitle{
    font-size:25px;
  }
  .sectionCard p,
  .finalCtaSection p{
    font-size:13px;
  }
  .painList,
  .benefitsGrid,
  .queuePoints,
  .toolsGrid,
  .audienceGrid{
    grid-template-columns:1fr;
  }
  .benefitsGrid,
  .toolsSection{
    margin-top:18px;
  }
  .benefitCard,
  .toolCard{
    padding:20px;
    border-radius:20px;
  }
  .homeFooter{
    padding:0 14px 28px 14px;
    flex-direction:column;
    gap:10px;
    text-align:center;
  }
  .footerLinks{
    justify-content:center;
    flex-wrap:wrap;
  }
}


/* =========================================================
   CURATORLAB HOME — GLASS NIGHT / GLASS DAY
   Header, logo, brand, controls and dropdown remain untouched.
   Theme switch: body.light = Glass Day / default = Glass Night.
   ========================================================= */
:root{
  --home-night-border:rgba(137,164,204,.26);
  --home-day-border:rgba(119,136,170,.26);
}
body{
  overflow-x:hidden;
  background:
    radial-gradient(circle at 7% 14%,rgba(99,102,241,.13),transparent 29%),
    radial-gradient(circle at 91% 84%,rgba(139,92,246,.12),transparent 30%),
    radial-gradient(circle at 88% 8%,rgba(34,197,94,.06),transparent 24%),
    linear-gradient(145deg,#050b17 0%,#091324 46%,#07101d 100%)!important;
}
body.light{
  background:
    radial-gradient(circle at 7% 16%,rgba(99,102,241,.13),transparent 31%),
    radial-gradient(circle at 92% 86%,rgba(168,85,247,.12),transparent 29%),
    radial-gradient(circle at 86% 8%,rgba(34,197,94,.08),transparent 22%),
    linear-gradient(145deg,#f8faff 0%,#edf3ff 48%,#f7f9ff 100%)!important;
}
body::before,body::after{
  content:"";
  position:fixed;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
}
body::before{
  width:620px;
  height:620px;
  top:-260px;
  left:-250px;
  opacity:.18;
  filter:blur(150px);
  background:#5b5cf0;
}
body::after{
  width:560px;
  height:560px;
  right:-220px;
  bottom:-260px;
  opacity:.15;
  filter:blur(150px);
  background:#8b5cf6;
}
body.light::before{opacity:.12}
body.light::after{opacity:.10}
.heroSection{
  min-height:470px!important;
  border:1px solid var(--home-night-border)!important;
  background:linear-gradient(145deg,rgba(19,33,54,.74),rgba(10,20,37,.67))!important;
  box-shadow:0 30px 85px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
}
.heroSection::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 5%,rgba(99,102,241,.16),transparent 30%),
    radial-gradient(circle at 92% 12%,rgba(34,197,94,.07),transparent 24%);
}
body.light .heroSection{
  background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(244,247,255,.62))!important;
  border-color:rgba(133,148,179,.25)!important;
  box-shadow:0 28px 76px rgba(71,85,105,.16),inset 0 1px 0 rgba(255,255,255,.86)!important;
}
.heroGlow{
  background:rgba(99,102,241,.20)!important;
  filter:blur(55px)!important;
}
body.light .heroGlow{background:rgba(99,102,241,.13)!important}
.heroBadge,.sectionLabel{
  border:1px solid rgba(126,126,255,.26)!important;
  background:rgba(99,102,241,.13)!important;
  color:#b9c2ff!important;
}
body.light .heroBadge,body.light .sectionLabel{
  background:rgba(99,102,241,.09)!important;
  border-color:rgba(99,102,241,.17)!important;
  color:#4f46e5!important;
}
.heroSection h1{
  font-size:56px!important;
  color:#ffffff!important;
}
.heroSection h1 span{
  background:linear-gradient(135deg,#aeb8ff,#7f78ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
body.light .heroSection h1{color:#17213a!important}
body.light .heroSection h1 span{
  background:linear-gradient(135deg,#5b5cf0,#7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.heroSubtitle{color:#dce4f0!important}
.heroText{color:#9eabc0!important}
body.light .heroSubtitle{color:#39445c!important}
body.light .heroText{color:#667085!important}
.mainCta{
  height:46px!important;
  border:1px solid rgba(133,134,255,.58)!important;
  background:linear-gradient(135deg,#706cff,#585cf2)!important;
  box-shadow:0 12px 28px rgba(99,102,241,.28),inset 0 1px 0 rgba(255,255,255,.16)!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
.mainCta:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 17px 34px rgba(99,102,241,.35),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.sectionCard,.finalCtaSection,.benefitCard,.toolCard{
  border:1px solid var(--home-night-border)!important;
  background:linear-gradient(145deg,rgba(19,33,54,.72),rgba(10,20,37,.66))!important;
  box-shadow:0 22px 58px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(130%)!important;
}
body.light .sectionCard,body.light .finalCtaSection,body.light .benefitCard,body.light .toolCard{
  background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(246,248,255,.68))!important;
  border-color:rgba(133,148,179,.26)!important;
  box-shadow:0 18px 46px rgba(71,85,105,.11),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
.sectionCard h2,.finalCtaSection h2,.toolsTitle,.benefitCard h3,.toolCard h3{color:#ffffff!important}
body.light .sectionCard h2,body.light .finalCtaSection h2,body.light .toolsTitle,body.light .benefitCard h3,body.light .toolCard h3{color:#17213a!important}
.sectionCard p,.finalCtaSection p{color:#c8d1df!important}
.benefitCard p,.toolCard p{color:#bdc8d8!important}
body.light .sectionCard p,body.light .finalCtaSection p{color:#536078!important}
body.light .benefitCard p,body.light .toolCard p{color:#59667e!important}
.painList div,.queuePoints div,.audienceGrid div{
  border:1px solid rgba(137,164,204,.20)!important;
  background:linear-gradient(145deg,rgba(8,17,32,.75),rgba(12,22,39,.64))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  color:#d6deea!important;
}
body.light .painList div,body.light .queuePoints div,body.light .audienceGrid div{
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(239,243,251,.74))!important;
  border-color:rgba(133,148,179,.22)!important;
  color:#33405a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.90)!important;
}
.benefitCard,.toolCard{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.benefitCard:hover,.toolCard:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(126,126,255,.43)!important;
  box-shadow:0 26px 62px rgba(0,0,0,.30),0 0 24px rgba(99,102,241,.05),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.light .benefitCard:hover,body.light .toolCard:hover{
  box-shadow:0 24px 56px rgba(71,85,105,.14),0 0 22px rgba(99,102,241,.055),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.highlightedBenefit{
  border-color:rgba(126,126,255,.62)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.25),0 0 30px rgba(99,102,241,.10),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.light .highlightedBenefit{
  border-color:rgba(99,102,241,.42)!important;
  box-shadow:0 20px 48px rgba(71,85,105,.11),0 0 26px rgba(99,102,241,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.benefitIcon{
  width:48px!important;
  height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(126,126,255,.24)!important;
  border-radius:15px!important;
  background:rgba(99,102,241,.13)!important;
}
body.light .benefitIcon{
  background:rgba(99,102,241,.08)!important;
  border-color:rgba(99,102,241,.15)!important;
}
.benefitStat{color:#aeb8ff!important}
body.light .benefitStat{color:#5b5cf0!important}
.queueClosing{color:#ffffff!important}
body.light .queueClosing{color:#17213a!important}
.toolTopLine{background:linear-gradient(90deg,#706cff,#8b5cf6,#34d399)!important}
.finalCtaSection{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(27,38,65,.80),rgba(42,22,77,.68))!important;
}
.finalCtaSection::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(99,102,241,.18),transparent 45%);
}
body.light .finalCtaSection{
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(240,241,255,.72))!important;
}
.finalCtaSection h2,.finalCtaSection p,.finalCtaSection .mainCta{position:relative}
.tinyNote,.homeFooter{color:#8d9aaf!important}
body.light .tinyNote,body.light .homeFooter{color:#748096!important}
.footerLinks span:hover{color:#ffffff!important}
body.light .footerLinks span:hover{color:#17213a!important}
@media(max-width:900px){
  .homePage{padding-left:16px!important;padding-right:16px!important}
  .benefitsGrid{grid-template-columns:1fr!important}
  .toolsGrid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:767px){
  .heroSection{min-height:auto!important}
  .heroSection h1{
    font-size:35px!important;
    line-height:1.08!important;
    letter-spacing:-1.2px!important;
  }
  .sectionCard,.finalCtaSection{
    margin-top:18px!important;
    padding:22px 16px!important;
    border-radius:20px!important;
  }
  .painList,.queuePoints,.audienceGrid,.toolsGrid{grid-template-columns:1fr!important}
}
@media(max-width:430px){
  .heroSection h1{font-size:31px!important}
}