.page-products{
  --products-accent:var(--c-electric-purple);
  --products-neon:var(--c-neon-green);
  --products-deep:var(--c-deep-space);
  --products-paper:var(--c-warm-paper);
  --products-ink:var(--c-ink);
  background:var(--products-deep);
  color:var(--c-white);
  font-family:var(--font-body);
  position:relative;
  overflow-x:hidden;
}

.page-products .section-tag{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:13px;
  font-style:italic;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--products-neon);
  background:rgba(0,255,136,.1);
  border:1px solid rgba(0,255,136,.3);
  padding:6px 14px;
  border-radius:var(--radius-pill);
  margin:0 0 16px;
}

.page-products .section-tag--dark{
  color:var(--products-deep);
  background:rgba(11,27,61,.08);
  border-color:rgba(11,27,61,.2);
}

.page-products .products-hero{
  position:relative;
  padding:56px 0 0;
  background:
    radial-gradient(circle at 85% 20%,rgba(123,47,255,.25),transparent 42%),
    linear-gradient(160deg,var(--products-deep) 0%,var(--products-ink) 100%);
}

.page-products .products-hero::after{
  content:"";
  position:absolute;
  left:-8%;
  right:38%;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg,var(--products-accent),var(--products-neon));
  transform:translateY(50%) skewX(-18deg);
  z-index:2;
}

.page-products .products-hero__grid{
  display:grid;
  gap:40px;
  padding:0 0 72px;
}

.page-products .products-hero__copy{
  max-width:100%;
}

.page-products .products-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-heading);
  font-size:14px;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--products-neon);
  margin-bottom:20px;
}

.page-products .products-hero__eyebrow span{
  color:var(--products-accent);
}

.page-products .products-hero h1{
  font-family:var(--font-heading);
  font-size:clamp(30px,6vw,52px);
  line-height:1.08;
  text-transform:uppercase;
  font-style:italic;
  letter-spacing:.01em;
  margin:0 0 24px;
  color:var(--c-white);
  text-shadow:0 4px 0 rgba(0,0,0,.18);
}

.page-products .products-hero__lead{
  font-size:17px;
  line-height:1.65;
  color:rgba(255,255,255,.82);
  max-width:560px;
  margin-bottom:28px;
}

.page-products .products-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.page-products .products-hero__deck{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  position:relative;
}

.page-products .deck-card{
  background:var(--products-paper);
  color:var(--products-ink);
  border-radius:var(--radius-2);
  padding:20px 12px;
  text-align:center;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:0 14px 28px rgba(0,0,0,.3);
}

.page-products .deck-card--a{
  transform:translateY(16px) rotate(-1.5deg);
  border-top:4px solid var(--products-accent);
}

.page-products .deck-card--b{
  transform:translateY(-6px) rotate(1.2deg);
  border-top:4px solid var(--products-neon);
}

.page-products .deck-card--c{
  transform:translateY(22px) rotate(-.8deg);
  border-top:4px solid var(--c-steel-blue);
}

.page-products .deck-card__num{
  display:block;
  font-family:var(--font-heading);
  font-size:clamp(22px,5vw,28px);
  font-style:italic;
  font-weight:900;
  line-height:1;
  margin-bottom:6px;
}

.page-products .deck-card__label{
  display:block;
  font-size:13px;
  line-height:1.4;
  color:rgba(20,20,20,.72);
}

.page-products .products-hero__ticker{
  position:relative;
  overflow:hidden;
  background:var(--products-ink);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(0,255,136,.25);
  padding:12px 0;
}

.page-products .products-hero__ticker span{
  display:block;
  width:max-content;
  font-family:var(--font-heading);
  font-size:13px;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
  animation:products-ticker 22s linear infinite;
  padding-left:16px;
}

@keyframes products-ticker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@media (prefers-reduced-motion:reduce){
  .page-products .products-hero__ticker span{
    animation:none;
  }
}

.page-products .products-login{
  position:relative;
  padding:72px 0;
  background:
    linear-gradient(135deg,rgba(123,47,255,.12) 0%,transparent 40%),
    var(--products-deep);
}

.page-products .products-login::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:38%;
  height:100%;
  background:linear-gradient(180deg,rgba(123,47,255,.2),transparent 70%);
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
  z-index:0;
}

.page-products .products-login .l-container{
  position:relative;
  z-index:1;
}

.page-products .products-login__head{
  max-width:640px;
  margin-bottom:40px;
}

.page-products .products-login__head h2,
.page-products .products-calendar__content h2,
.page-products .products-devices__head h2,
.page-products .products-data__content h2,
.page-products .products-security__content h2{
  font-family:var(--font-heading);
  font-size:clamp(26px,4.6vw,36px);
  line-height:1.12;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 14px;
}

.page-products .products-login__head p{
  color:rgba(255,255,255,.74);
  line-height:1.65;
  font-size:16px;
}

.page-products .products-login__layout{
  display:grid;
  gap:36px;
}

.page-products .products-login__steps-panel{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-3);
  padding:28px 22px;
  position:relative;
}

.page-products .login-steps{
  list-style:none;
  margin:0 0 24px;
  padding:0;
}

.page-products .login-steps__item{
  position:relative;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:16px;
  padding:0 0 28px;
}

.page-products .login-steps__item:not(:last-child)::after{
  content:"";
  position:absolute;
  left:25px;
  top:52px;
  bottom:4px;
  width:2px;
  background:linear-gradient(180deg,var(--products-accent),transparent);
}

.page-products .login-steps__index{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:14px;
  background:var(--products-accent);
  color:var(--c-white);
  font-family:var(--font-heading);
  font-size:18px;
  font-style:italic;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}

.page-products .login-steps__body h3{
  font-family:var(--font-heading);
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--c-white);
  margin:0 0 6px;
}

.page-products .login-steps__body p{
  color:rgba(255,255,255,.66);
  font-size:15px;
  line-height:1.6;
  margin:0;
}

.page-products .products-login__tip{
  background:rgba(0,255,136,.08);
  border-left:3px solid var(--products-neon);
  border-radius:0 var(--radius-2) var(--radius-2) 0;
  padding:14px 16px;
  font-size:15px;
  color:rgba(255,255,255,.84);
  line-height:1.6;
  margin:0 0 20px;
}

.page-products .products-login__steps-panel .btn{
  margin-top:6px;
}

.page-products .products-login__media{
  margin:0;
  position:relative;
}

.page-products .products-login__img{
  width:100%;
  height:auto;
  border-radius:var(--radius-3);
  box-shadow:0 24px 48px rgba(0,0,0,.38);
  display:block;
  transform:rotate(-1.2deg);
}

.page-products .products-login__media figcaption{
  margin-top:12px;
  font-size:14px;
  color:rgba(255,255,255,.62);
  letter-spacing:.05em;
}

.page-products .products-calendar{
  padding:72px 0;
  background:var(--products-paper);
  color:var(--products-ink);
}

.page-products .products-calendar__layout{
  display:grid;
  gap:32px;
  align-items:center;
}

.page-products .products-calendar__media{
  margin:0;
}

.page-products .products-calendar__img{
  width:100%;
  height:auto;
  border-radius:var(--radius-3);
  display:block;
  box-shadow:0 18px 36px rgba(11,27,61,.22);
}

.page-products .products-calendar__media figcaption{
  margin-top:12px;
  font-size:14px;
  color:rgba(20,20,20,.6);
  letter-spacing:.05em;
}

.page-products .products-calendar__content h2{
  color:var(--products-ink);
}

.page-products .products-calendar__content > p{
  color:rgba(20,20,20,.68);
  line-height:1.68;
  margin-bottom:20px;
}

.page-products .feature-list{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  display:grid;
  gap:14px;
}

.page-products .feature-list__item{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:12px;
  align-items:start;
}

.page-products .feature-list__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:rgba(123,47,255,.14);
  color:var(--products-accent);
  font-size:14px;
}

.page-products .feature-list__item strong{
  display:block;
  font-family:var(--font-heading);
  font-size:16px;
  text-transform:uppercase;
  color:var(--products-ink);
  letter-spacing:.02em;
  margin-bottom:4px;
}

.page-products .feature-list__item p{
  margin:0;
  color:rgba(20,20,20,.6);
  font-size:14px;
  line-height:1.55;
}

.page-products .feature-list--light .feature-list__item strong{
  color:var(--c-white);
}

.page-products .feature-list--light .feature-list__item p{
  color:rgba(255,255,255,.66);
}

.page-products .feature-list--light .feature-list__icon{
  background:rgba(0,255,136,.16);
  color:var(--products-neon);
}

.page-products .products-calendar__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.page-products .products-devices{
  padding:72px 0;
  background:var(--products-ink);
  color:var(--c-white);
}

.page-products .products-devices__head{
  max-width:700px;
  margin-bottom:36px;
}

.page-products .products-devices__head > p{
  color:rgba(255,255,255,.64);
  line-height:1.65;
}

.page-products .products-devices__media{
  margin:0 0 40px;
}

.page-products .products-devices__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius-3);
  box-shadow:0 20px 44px rgba(0,0,0,.5);
}

.page-products .products-devices__media figcaption{
  margin-top:12px;
  font-size:14px;
  color:rgba(255,255,255,.5);
  letter-spacing:.05em;
}

.page-products .products-devices__grid{
  display:grid;
  gap:16px;
}

.page-products .device-point{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-2);
  padding:24px;
  position:relative;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast);
}

.page-products .device-point:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(0,0,0,.3);
  border-color:rgba(0,255,136,.4);
}

.page-products .device-point__num{
  font-family:var(--font-heading);
  font-size:26px;
  font-style:italic;
  color:var(--products-accent);
  display:inline-block;
  margin-bottom:10px;
  line-height:1;
}

.page-products .device-point h3{
  font-family:var(--font-heading);
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 8px;
  color:var(--c-white);
}

.page-products .device-point p{
  color:rgba(255,255,255,.62);
  font-size:15px;
  line-height:1.6;
  margin:0;
}

.page-products .products-devices__note{
  margin-top:24px;
  color:rgba(255,255,255,.6);
  font-size:14px;
  border-left:3px solid var(--products-accent);
  padding-left:14px;
  line-height:1.6;
}

.page-products .products-data{
  position:relative;
  padding:72px 0;
  background:
    radial-gradient(circle at 10% 90%,rgba(123,47,255,.26),transparent 40%),
    linear-gradient(150deg,var(--products-deep),var(--products-ink) 80%);
  color:var(--c-white);
}

.page-products .products-data::before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:70px;
  height:70px;
  background:var(--products-neon);
  opacity:.2;
  clip-path:polygon(100% 0,0 100%,100% 100%);
}

.page-products .products-data .l-container{
  position:relative;
  z-index:1;
}

.page-products .products-data__layout{
  display:grid;
  gap:36px;
  align-items:center;
}

.page-products .products-data__content > p:not(.section-tag){
  color:rgba(255,255,255,.66);
  line-height:1.68;
}

.page-products .products-data__content .feature-list{
  margin-top:20px;
}

.page-products .products-data__extra{
  margin:18px 0 24px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border-right:2px solid var(--products-neon);
  border-radius:var(--radius-1);
  color:rgba(255,255,255,.62);
  font-size:14px;
  line-height:1.6;
}

.page-products .products-data__content .btn{
  margin-top:6px;
}

.page-products .products-data__media{
  margin:0;
}

.page-products .products-data__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius-3);
  box-shadow:0 24px 48px rgba(0,0,0,.4);
}

.page-products .products-data__media figcaption{
  margin-top:12px;
  color:rgba(255,255,255,.55);
  font-size:14px;
  letter-spacing:.05em;
}

.page-products .products-security{
  padding:72px 0;
  background:var(--products-paper);
  color:var(--products-ink);
}

.page-products .products-security__layout{
  display:grid;
  gap:32px;
  align-items:center;
}

.page-products .products-security__media{
  margin:0;
}

.page-products .products-security__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius-3);
  box-shadow:0 20px 44px rgba(11,27,61,.25);
}

.page-products .products-security__content h2{
  color:var(--products-ink);
}

.page-products .products-security__content > p{
  color:rgba(20,20,20,.7);
  line-height:1.68;
  margin-bottom:24px;
}

.page-products .products-security__rows{
  display:grid;
  gap:12px;
  border-top:1px solid rgba(20,20,20,.12);
  padding-top:20px;
}

.page-products .security-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 0;
  border-bottom:1px dashed rgba(20,20,20,.2);
}

.page-products .security-row__label{
  font-family:var(--font-heading);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(20,20,20,.55);
}

.page-products .security-row__value{
  font-weight:700;
  color:var(--products-ink);
}

.page-products .security-row__link{
  color:var(--products-accent);
  text-decoration:none;
  font-weight:700;
  border-bottom:2px solid var(--products-neon);
  padding-bottom:2px;
}

@media (min-width:768px){
  .page-products .products-hero__grid{
    grid-template-columns:1.2fr .8fr;
    gap:56px;
    align-items:end;
  }

  .page-products .products-hero{
    padding:88px 0 0;
  }

  .page-products .products-hero__grid{
    padding-bottom:88px;
  }

  .page-products .products-login__layout{
    grid-template-columns:.9fr 1.1fr;
    gap:48px;
    align-items:center;
  }

  .page-products .products-calendar__layout{
    grid-template-columns:1fr 1fr;
    gap:56px;
  }

  .page-products .products-calendar__media{
    order:-1;
  }

  .page-products .products-devices__grid{
    grid-template-columns:repeat(3,1fr);
  }

  .page-products .products-data__layout{
    grid-template-columns:1fr 1fr;
    gap:56px;
  }

  .page-products .products-security__layout{
    grid-template-columns:1.2fr .8fr;
    gap:48px;
  }

  .page-products .products-security__media{
    order:-1;
    margin:0;
  }
}

@media (min-width:1200px){
  .page-products .products-hero__deck{
    transform:translateX(8px);
  }

  .page-products .deck-card{
    padding:24px 18px;
  }

  .page-products .deck-card__num{
    font-size:32px;
  }

  .page-products .products-login,
  .page-products .products-calendar,
  .page-products .products-devices,
  .page-products .products-data,
  .page-products .products-security{
    padding:96px 0;
  }
}