:root{
  --bg:#020a14;
  --panel:#081a2b;
  --panel-soft:rgba(8,26,43,.78);
  --line:rgba(65,174,255,.15);
  --text:#eef8ff;
  --muted:#8ea9bb;
  --cyan:#22d3ee;
  --blue:#2f8cff;
  --aqua:#2dd4bf;
  --yellow:#fde047;
  --orange:#fb923c;
  --purple:#a855f7;
  --magenta:#d946ef;
  --shadow:0 30px 80px rgba(0,0,0,.42)
}

body{
  color:var(--text);
  background:
    radial-gradient(circle at 50% 0,rgba(35,120,255,.12),transparent 38%),
    linear-gradient(180deg,#020a14,#03101d 50%,#020a14);
  font-family:Manrope,system-ui,sans-serif;
  line-height:1.55
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.28;
  background-image:
    linear-gradient(rgba(48,138,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(48,138,255,.035) 1px,transparent 1px);
  background-size:48px 48px
}

.pdu-main{min-height:70vh}

.pdu-page-hero{
  max-width:900px;
  margin:0 auto;
  padding:95px 24px 55px;
  text-align:center
}

.pdu-page-hero>span,
.pdu-kicker{
  color:var(--cyan);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.pdu-page-hero h1{
  margin:14px 0;
  font-size:clamp(2.6rem,6vw,5rem);
  line-height:1.02;
  letter-spacing:-.055em
}

.pdu-page-hero p{
  color:var(--muted)
}

.pdu-button{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border-radius:12px;
  color:#03101b;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  font-weight:800
}

.pdu-button.secondary{
  color:#fff;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025)
}