/* Campaign art direction: the reference's typographic impact and dark laboratory
   imagery, with product information kept as editable text. */
:root {
  --campaign-deep: #020913;
  --campaign-cyan: #42dcef;
  --campaign-ice: #e7f8ff;
}

.header {
  position: relative;
  z-index: 3;
  background: #020b16;
  border-bottom-color: #5fbde128;
}
.brand svg {
  width: 38px;
  height: 43px;
  stroke: #60d9f2;
  stroke-width: 1.65;
  stroke-linecap: round;
}
.brand span {
  letter-spacing: .18em;
  font-weight: 550;
}
.brand small {
  letter-spacing: .19em;
  text-transform: uppercase;
  font-size: 9px;
  color: #b6d3e3;
}
.hero {
  display: block;
  position: relative;
  width: 100%;
  min-height: 790px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--campaign-deep);
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/assets/lab-hero.webp') 72% center / cover no-repeat;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #020913 2%, #020913ed 28%, #020913a8 52%, #02091315 84%),
    linear-gradient(0deg, #020913 0%, transparent 18%, transparent 76%, #02091340 100%);
}
.hero-inner {
  min-height: 790px;
  display: flex;
  align-items: center;
  padding-block: 72px 84px;
}
.hero-copy {
  max-width: 780px;
}
.hero-copy::before {
  display: none;
}
.hero .intro {
  color: #86d9ed;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  margin-bottom: 27px;
}
.hero h1 {
  font-family: 'Arial Black', 'Bahnschrift', 'Segoe UI', sans-serif;
  font-size: clamp(48px, 5.65vw, 86px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.052em;
  text-transform: uppercase;
  margin-bottom: 30px;
  text-wrap: balance;
  text-shadow: 0 4px 26px #0008;
}
.hero h1 span,
.hero h1 strong {
  display: block;
}
.hero h1 strong {
  max-width: 760px;
  font-weight: inherit;
  color: #64e9f2;
  background: linear-gradient(155deg, #e1ffff 2%, #6eeaf0 36%, #04bcd7 88%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-description {
  max-width: 600px;
  color: #e5f2f8;
  font-size: clamp(16px, 1.42vw, 20px);
  line-height: 1.55;
  margin-bottom: 24px;
}
.hero-points {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 0;
  max-width: 695px;
  padding: 13px 0;
  margin-bottom: 22px;
  border-block: 1px solid #67d5ef55;
}
.hero-points span {
  color: #d7edf4;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
  white-space: nowrap;
  padding-inline: 15px;
  border-right: 1px solid #67d5ef55;
}
.hero-points span:first-child { padding-left: 0; }
.hero-points span:last-child { border-right: 0; }
.hero .team-note {
  color: #b8d5e1;
  max-width: 610px;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 26px;
  border-left-color: #52c9e0;
}
.hero .button {
  min-height: 68px;
  padding: 15px 30px;
  border-radius: 999px;
  border-color: #8af7ff;
  background: linear-gradient(180deg, #11c3d7, #0684a4);
  box-shadow: inset 0 2px 1px #d9ffff7a, 0 0 0 1px #20cae642, 0 9px 35px #00cdf038;
  color: white;
  font-family: 'Bahnschrift', 'Arial', sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .015em;
}
.hero .button:hover {
  background: linear-gradient(180deg, #35d8e9, #0895b5);
  color: white;
  box-shadow: 0 12px 38px #00cdf050;
}
.hero .button .whatsapp-icon {
  width: 27px;
  height: 27px;
}
.hero .cta-note {
  color: #d0e4ea;
  margin-top: 14px;
}
.hero .privacy-note {
  color: #acc9d4;
}
.access-strip {
  background: #061626;
  border-top-color: #3faaca33;
}
#consent-dialog {
  position: fixed;
  inset: auto 20px 20px auto;
  margin: 0;
  z-index: 8;
  width: min(420px, calc(100% - 40px));
  max-width: none;
  box-shadow: 0 20px 60px #000a;
}
#consent-dialog .consent-content { padding: 22px; }
#consent-dialog h2 { font-size: 20px; margin-bottom: 9px; }
#consent-dialog #consent-description { font-size: 12px; line-height: 1.5; }
#consent-dialog .consent-actions { gap: 7px; margin-bottom: 12px; }
#consent-dialog .consent-actions button { min-height: 44px; font-size: 12px; }

@media (max-width: 1050px) {
  .hero,
  .hero-inner { min-height: 725px; }
  .hero-copy { max-width: 680px; }
  .hero h1 { font-size: clamp(46px, 6vw, 70px); }
  .hero-photo { background-position: 68% center; }
  .hero::after { background: linear-gradient(90deg, #020913 1%, #020913ef 34%, #020913b0 66%, #02091320 100%); }
}
@media (max-width: 760px) {
  .brand small { letter-spacing: .12em; }
  .hero,
  .hero-inner { min-height: 790px; }
  .hero-photo { background-position: 65% bottom; opacity: .72; }
  .hero::after {
    background: linear-gradient(180deg, #020913f5 0%, #020913eb 37%, #020913b8 69%, #02091324 100%);
  }
  .hero-inner {
    display: block;
    padding-block: 48px 220px;
  }
  .hero h1 { font-size: clamp(42px, 7.8vw, 64px); max-width: 630px; }
  .hero-description { max-width: 550px; }
}
@media (max-width: 640px) {
  #consent-dialog {
    left: 12px;
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: auto;
  }
  #consent-dialog .consent-content { padding: 16px; }
  #consent-dialog h2 { font-size: 17px; }
  #consent-dialog #consent-description { font-size: 11px; }
  .header { min-height: 82px; }
  .brand { gap: 8px; }
  .brand svg { width: 28px; height: 35px; }
  .brand span { font-size: 14px; letter-spacing: .09em; }
  .brand small { font-size: 6px; letter-spacing: .1em; margin-top: 6px; }
  .hero { min-height: 0; }
  .hero-inner { min-height: 0; padding-block: 42px 215px; }
  .hero-photo { background-position: 64% bottom; }
  .hero h1 { font-size: clamp(39px, 10.6vw, 58px); letter-spacing: -.057em; line-height: 1; margin-bottom: 24px; }
  .hero .intro { font-size: 9px; letter-spacing: .2em; margin-bottom: 20px; }
  .hero-description { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
  .hero-points { display: grid; grid-template-columns: 1fr; gap: 8px; padding-block: 13px; margin-bottom: 17px; }
  .hero-points span { border: 0; padding: 0 0 0 16px; position: relative; font-size: 11px; }
  .hero-points span::before { content: '✓'; position: absolute; left: 0; color: #63e9f2; }
  .hero .team-note { font-size: 12px; margin-bottom: 22px; }
  .hero .button { width: 100%; min-height: 62px; padding-inline: 14px; font-size: 14px; }
  .hero .button > span { margin-left: auto; }
  .hero .cta-note { font-size: 11px; }
  .hero .privacy-note { font-size: 10px; }
}
@media (max-width: 350px) {
  .brand span { font-size: 13px; }
  .brand small { font-size: 5.5px; }
  .hero h1 { font-size: 36px; }
  .hero .button { font-size: 12px; }
}