/* ============================================================
   Blue Copper Serum - product layer over the Peptide+ base
   Sapphire drawn from the serum itself, brand cyan kept as accent
   ============================================================ */
:root{
  --sapphire:      #0B3F73;
  --sapphire-2:    #12569A;
  --sapphire-3:    #1E7AC4;
  --sapphire-soft: #EDF4FC;
  --sapphire-line: #D3E4F6;
  /* retint the base design system's dark bands */
  --deep:   #0B3F73;
  --deep-2: #12569A;
}

/* ---------- hero ---------- */
.shero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(30,122,196,.20) 0%, rgba(30,122,196,0) 60%),
    linear-gradient(168deg,#F7FBFF 0%,#EDF4FC 52%,#E2EEFA 100%);
  border-bottom:1px solid var(--sapphire-line);
}
.shero__grid{
  display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center;
  padding:74px 0 78px;
}
.shero__eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sapphire-2); font-weight:600; margin-bottom:18px; display:block;
}
.shero h1{
  font-size:clamp(38px,5.1vw,62px); line-height:1.03; letter-spacing:-.022em;
  font-weight:700; color:var(--sapphire); margin-bottom:20px;
}
.shero h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--sapphire-3),var(--accent-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.shero__lede{ font-size:19px; color:var(--ink-2); max-width:34em; margin-bottom:26px; }
.shero__actives{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.shero__actives span{
  font-size:13px; font-weight:600; color:var(--sapphire-2);
  background:#fff; border:1px solid var(--sapphire-line);
  padding:7px 13px; border-radius:999px;
}
.shero__price{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 20px; padding-top:20px; border-top:1px solid var(--sapphire-line);
}
.shero__price b{ font-size:31px; font-weight:700; color:var(--sapphire); letter-spacing:-.02em; }
.shero__price small{ font-size:14px; color:var(--ink-3); }
.shero__stock{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px;
  font-weight:600; color:#0f7a4a;
}
.shero__stock i{ width:8px; height:8px; border-radius:50%; background:#16a34a; display:inline-block; }
.shero__media{ position:relative; display:flex; justify-content:center; align-items:center; min-height:460px; }
.shero__media::after{
  content:""; position:absolute; z-index:0; width:70%; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle,rgba(30,122,196,.22),transparent 66%);
  filter:blur(12px);
}
.shero__media img{
  position:relative; z-index:1; max-height:520px; width:auto;
  filter:drop-shadow(0 34px 46px rgba(11,63,115,.28));
}
.friction{ font-size:13.5px; color:var(--ink-3); margin-top:14px; }

/* ---------- actives ---------- */
.acts__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.act{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 26px 28px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.act::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--sapphire-3),var(--accent-bright));
}
.act__inci{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sapphire-3); font-weight:600; display:block; margin-bottom:9px;
}
.act h3{ font-size:21px; font-weight:700; color:var(--sapphire); margin-bottom:11px; letter-spacing:-.01em; }
.act p{ font-size:15.5px; color:var(--ink-2); }
.act__role{
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--sapphire-line);
  font-size:13.5px; font-weight:600; color:var(--sapphire-2);
}

/* ---------- stack band ---------- */
.stackband{ background:linear-gradient(150deg,var(--sapphire) 0%,var(--sapphire-2) 68%,#17639F 100%); color:var(--on-deep); }
.stackband .section-head h2{ color:#fff; }
.stackband .lede{ color:var(--on-deep-2); }
.stack3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; }
.stack3 div{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg); padding:26px 24px;
}
.stack3 b{ display:block; font-size:16.5px; color:#fff; margin-bottom:8px; }
.stack3 p{ font-size:15px; color:var(--on-deep-2); }

/* ---------- how to use ---------- */
.use__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:u; }
.use__step{ position:relative; padding-top:52px; }
.use__step::before{
  counter-increment:u; content:counter(u);
  position:absolute; top:0; left:0; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--mono); font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--sapphire-2),var(--sapphire-3));
}
.use__step h4{ font-size:16.5px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.use__step p{ font-size:15px; color:var(--ink-2); }
.usenote{
  margin-top:30px; padding:16px 20px; border-radius:var(--radius-lg);
  background:var(--sapphire-soft); border:1px solid var(--sapphire-line);
  font-size:14.5px; color:var(--sapphire-2); font-weight:600;
}

/* ---------- buy ---------- */
.buy{ background:var(--sapphire-soft); border-top:1px solid var(--sapphire-line); border-bottom:1px solid var(--sapphire-line); }
.buy__card{
  background:#fff; border:1px solid var(--sapphire-line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); display:grid; grid-template-columns:.85fr 1.15fr;
  gap:0; overflow:hidden; max-width:940px; margin:0 auto;
}
.buy__media{ background:#fff; display:grid; place-items:center; padding:26px; border-right:1px solid var(--line-soft); }
.buy__media img{ max-width:100%; height:auto; }
.buy__body{ padding:38px 38px 34px; }
.buy__body h3{ font-size:26px; font-weight:700; color:var(--sapphire); margin-bottom:6px; letter-spacing:-.015em; }
.buy__size{ font-size:14px; color:var(--ink-3); margin-bottom:20px; }
.buy__price{ font-size:36px; font-weight:700; color:var(--ink); letter-spacing:-.02em; margin-bottom:4px; }
.buy__incl{ list-style:none; margin:20px 0 24px; }
.buy__incl li{ font-size:15px; color:var(--ink-2); padding:7px 0 7px 26px; position:relative; }
.buy__incl li::before{
  content:""; position:absolute; left:0; top:14px; width:13px; height:7px;
  border-left:2px solid var(--sapphire-3); border-bottom:2px solid var(--sapphire-3);
  transform:rotate(-45deg);
}

/* ---------- ingredients ---------- */
.inci{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 28px; box-shadow:var(--shadow);
}
.inci h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sapphire-3); margin-bottom:12px; }
.inci p{ font-size:14.5px; color:var(--ink-2); line-height:1.75; }

/* ---------- misc ---------- */
.btn{ border-radius:8px; }
.reviews__note{ font-size:13.5px; color:var(--ink-3); margin-top:20px; text-align:center; }
.footer__legal a{ text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .shero__grid{ grid-template-columns:1fr; gap:24px; padding:52px 0 58px; }
  .shero__media{ min-height:340px; order:-1; }
  .shero__media img{ max-height:340px; }
  .acts__grid,.stack3{ grid-template-columns:1fr; }
  .use__grid{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .buy__card{ grid-template-columns:1fr; }
  .buy__media{ border-right:0; border-bottom:1px solid var(--line-soft); }
  .buy__body{ padding:30px 26px 28px; }
}
@media (max-width:560px){
  .use__grid{ grid-template-columns:1fr; }
  .shero__price b{ font-size:27px; }
  .buy__price{ font-size:30px; }
}

/* ============================================================
   Heading colour: sapphire ramp instead of the base cyan
   (base sets -webkit-text-fill-color, so it must be overridden)
   ============================================================ */
h1, h2{
  background-image:linear-gradient(178deg,#2A86CE 0%,#12569A 52%,#0B3F73 100%);
  filter:drop-shadow(0 3px 14px rgba(18,86,154,.18));
}
.shero h1 em{
  background-image:linear-gradient(96deg,#1E7AC4 0%,var(--accent) 60%,var(--accent-bright) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* dark bands need solid white type */
.stackband h2, .cta h2, .why h2{
  background:none; background-image:none;
  -webkit-text-fill-color:#fff; color:#fff; filter:none;
}

/* ---------- FAQ affordance ---------- */
.faq__q{ position:relative; padding-right:34px; cursor:pointer; }
.faq__q::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--sapphire-3); border-bottom:2px solid var(--sapphire-3);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq__item[open] .faq__q::after{ transform:translateY(-30%) rotate(-135deg); }

/* ---------- sticky scroll CTA ---------- */
#stickycta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  transform:translateY(110%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  background:rgba(11,63,115,.97);
  -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -8px 28px -12px rgba(11,63,115,.6);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
}
#stickycta.is-on{ transform:translateY(0); }
#stickycta .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.sticky__txt{ min-width:0; }
.sticky__txt b{ display:block; color:#fff; font-size:15.5px; font-weight:700; line-height:1.25; }
.sticky__txt span{ display:block; color:#B7D4EE; font-size:13px; margin-top:2px; }
#stickycta .btn{ flex:0 0 auto; }
@media (max-width:640px){
  #stickycta .wrap{ gap:12px; }
  .sticky__txt b{ font-size:14.5px; }
  .sticky__txt span{ font-size:12px; }
  #stickycta .btn{ padding:12px 16px; font-size:14.5px; }
}