.page-home{
  --hm-line: rgba(168,199,209,.26);
  --hm-line-soft: rgba(168,199,209,.13);
  --hm-pad: clamp(16px, 4vw, 34px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  overflow-x: hidden;
}
.page-home img{max-width:100%; height:auto; display:block;}
.page-home .band{padding: clamp(42px, 6.4vw, 86px) var(--hm-pad);}
.page-home .kicker{
  display:inline-block;
  margin:0 0 12px;
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--cyan);
}
.page-home .h2{
  font-family: var(--font-narrow);
  font-weight:800;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 14px;
}
.page-home .h3{
  font-family: var(--font-narrow);
  font-weight:800;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height:1.24;
  letter-spacing:-.01em;
  margin:0 0 12px;
}

/* ---------- hero ---------- */
.page-home .hero{
  position:relative;
  isolation:isolate;
  padding: clamp(16px, 3vw, 34px) var(--hm-pad) clamp(32px, 5vw, 66px);
  border-bottom:1px solid var(--hm-line);
}
.page-home .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(168,199,209,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,199,209,.06) 1px, transparent 1px);
  background-size:72px 72px, 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 72%);
}
.page-home .hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
}
.page-home .hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.42;
}
.page-home .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(45,226,197,.20), transparent 58%),
    linear-gradient(180deg, rgba(5,26,43,.42) 0%, rgba(5,26,43,.90) 62%, var(--ink) 100%);
}
.page-home .hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(18px, 3.2vw, 42px);
  border:1px solid rgba(45,226,197,.30);
  background: linear-gradient(168deg, rgba(11,41,64,.78), rgba(5,26,43,.40) 62%, rgba(5,26,43,.68));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.page-home .hero-grid::before{
  content:"";
  position:absolute;
  top:-1px;
  left: clamp(18px, 3vw, 42px);
  width: clamp(64px, 12vw, 140px);
  height:3px;
  background: var(--cyan);
}
.page-home .hero-eyebrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-size:11px;
  letter-spacing:.14em;
}
.page-home .hero-eyebrow .mono{
  font-family: var(--font-mono);
  color: var(--cyan);
}
.page-home .hero-eyebrow-note{color: var(--mist);}
.page-home .hero .display{
  font-family: var(--font-narrow);
  font-weight:800;
  font-size: clamp(32px, 6.2vw, 62px);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 18px;
  text-wrap: balance;
}
.page-home .hero .lead{
  max-width:56ch;
  margin:0 0 26px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height:1.8;
  color: var(--mist);
}
.page-home .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-home .hero-slate{
  border:1px solid var(--hm-line);
  border-left:3px solid var(--cyan);
  background: linear-gradient(180deg, rgba(4,20,31,.94), rgba(11,41,64,.86));
  padding:16px 16px 18px;
  min-width:0;
}
.page-home .slate-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid var(--hm-line);
}
.page-home .slate-label{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  color: var(--mist);
}
.page-home .slate-list{
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .slate-row{
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 6px 11px 14px;
  border-bottom:1px solid var(--hm-line-soft);
  transition: background .2s ease;
}
.page-home .slate-row::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:0;
  background: var(--cyan);
  transform: translateY(-50%);
  transition: height .22s ease;
}
.page-home .slate-row:hover{background: rgba(45,226,197,.08);}
.page-home .slate-row:hover::before{height:70%;}
.page-home .slate-time{
  font-family: var(--font-mono);
  font-size:14px;
  color: var(--cyan);
}
.page-home .slate-name{
  font-size:14px;
  color: var(--paper);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.page-home .slate-pin{
  font-family: var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color: var(--ink);
  background: var(--mist);
  padding:2px 6px;
}
.page-home .slate-foot{
  margin:14px 0 0;
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color: var(--mist);
}
.page-home .status-strip{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-left:3px solid var(--cyan);
  background: linear-gradient(90deg, rgba(45,226,197,.16), rgba(45,226,197,.02));
}
.page-home .status-strip p{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color: var(--paper);
}
.page-home .status-strip strong{color: var(--cyan);}
.page-home .status-dot{
  flex:none;
  width:9px;
  height:9px;
  margin-top:8px;
  border-radius:50%;
  background: var(--cyan);
  box-shadow:0 0 0 4px rgba(45,226,197,.18);
}

/* ---------- steps ---------- */
.page-home .steps-head{
  display:grid;
  gap:6px;
  max-width:760px;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.page-home .steps-head .lead{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color: var(--mist);
}
.page-home .step-rail{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--hm-line);
}
.page-home .step{
  position:relative;
  padding:22px 18px 26px;
  border-bottom:1px solid var(--hm-line-soft);
  background: linear-gradient(180deg, rgba(11,41,64,.52), rgba(11,41,64,.04));
}
.page-home .step::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .3s ease;
}
.page-home .step:hover::before{transform: scaleX(1);}
.page-home .step-no{
  display:inline-block;
  margin-bottom:14px;
  padding:3px 8px;
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  color: var(--cyan);
  background: rgba(45,226,197,.12);
}
.page-home .step p{
  margin:0 0 16px;
  font-size:14.5px;
  line-height:1.78;
  color: var(--mist);
}
.page-home .step-link{
  display:inline-block;
  font-size:13.5px;
  font-weight:600;
  color: var(--paper);
  text-decoration:none;
  border-bottom:1px solid var(--cyan);
  padding-bottom:2px;
  transition: color .2s ease;
}
.page-home .step-link:hover{color: var(--cyan);}

/* ---------- panel stack ---------- */
.page-home .panel-head{
  max-width:820px;
  margin-bottom: clamp(22px, 3.4vw, 38px);
}
.page-home .panel-stack{
  display:grid;
  gap: clamp(14px, 2vw, 22px);
}
.page-home .panel-main,
.page-home .panel-side,
.page-home .panel-device,
.page-home .panel-note{min-width:0;}
.page-home .panel-main{
  display:grid;
  gap:22px;
  padding: clamp(20px, 2.6vw, 32px);
}
.page-home .panel-main-body p{
  margin:0 0 16px;
  font-size:14.5px;
  line-height:1.78;
  color: var(--mist);
}
.page-home .panel-main .media-frame{width:100%;}
.page-home .media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-home .chip-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
  padding:0;
}
.page-home .chip-list li{
  padding:5px 10px;
  font-family: var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color: var(--cyan);
  border:1px solid rgba(45,226,197,.4);
  background: rgba(45,226,197,.07);
}
.page-home .panel-side{
  color: var(--ink);
  padding: clamp(20px, 2.6vw, 30px);
}
.page-home .panel-side .h3{color: var(--ink);}
.page-home .panel-side p{
  margin:0 0 18px;
  font-size:14.5px;
  line-height:1.78;
  color: #14364a;
}
.page-home .panel-device{
  display:flex;
  flex-direction:column;
  border:1px solid var(--hm-line);
  background: var(--ink-3);
  overflow:hidden;
}
.page-home .panel-device .media-frame{
  border:0;
  border-bottom:1px solid var(--hm-line);
  flex:1 1 auto;
}
.page-home .device-cap{
  margin:0;
  padding:14px 16px 18px;
  font-size:13.5px;
  line-height:1.72;
  color: var(--mist);
}
.page-home .panel-note{
  padding: clamp(20px, 2.6vw, 30px);
  border:1px solid var(--hm-line);
  background: linear-gradient(200deg, rgba(11,41,64,.82), rgba(4,20,31,.9));
}
.page-home .note-list{
  list-style:none;
  display:grid;
  gap:14px;
  margin:18px 0 0;
  padding:0;
}
.page-home .note-list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  padding-top:14px;
  border-top:1px solid var(--hm-line-soft);
}
.page-home .note-list .mono{
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color: var(--cyan);
}
.page-home .note-list strong{
  display:block;
  margin-bottom:4px;
  font-size:15.5px;
  font-weight:600;
  color: var(--paper);
}
.page-home .note-list p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color: var(--mist);
}

/* ---------- release band ---------- */
.page-home .release{
  border-top:1px solid var(--hm-line-soft);
  border-bottom:1px solid var(--hm-line-soft);
  background: linear-gradient(180deg, rgba(4,20,31,.9), rgba(11,41,64,.55));
}
.page-home .release-pane{
  position:relative;
  overflow:hidden;
  display:grid;
  gap:26px;
  padding: clamp(22px, 3.4vw, 42px);
  border:1px solid var(--hm-line);
  background: linear-gradient(135deg, rgba(11,41,64,.95), rgba(4,20,31,.96));
}
.page-home .release-pane::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background: repeating-linear-gradient(115deg, var(--orange) 0 14px, transparent 14px 28px);
}
.page-home .release-copy p{
  margin:0 0 20px;
  max-width:60ch;
  font-size:15px;
  line-height:1.8;
  color: var(--mist);
}
.page-home .release-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-home .release-specs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:0;
  margin:0;
  border-top:1px solid var(--hm-line);
}
.page-home .release-specs > div{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 0;
  border-bottom:1px solid var(--hm-line-soft);
}
.page-home .release-specs > div:nth-child(odd){
  padding-right:14px;
  border-right:1px solid var(--hm-line-soft);
}
.page-home .release-specs > div:nth-child(even){padding-left:14px;}
.page-home .release-specs dt{
  font-size:11px;
  letter-spacing:.1em;
  color: var(--mist);
}
.page-home .release-specs dd{
  order:-1;
  margin:0;
  font-family: var(--font-mono);
  font-size: clamp(17px, 2.2vw, 22px);
  letter-spacing:-.01em;
  color: var(--cyan);
}

/* ---------- help band ---------- */
.page-home .help-inner{
  display:grid;
  gap:26px;
}
.page-home .help-copy p{
  margin:0;
  max-width:56ch;
  font-size:15px;
  line-height:1.8;
  color: var(--mist);
}
.page-home .help-links{
  display:grid;
  gap:12px;
}
.page-home .help-link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border:1px solid var(--hm-line);
  background: rgba(11,41,64,.62);
  color: var(--paper);
  text-decoration:none;
  transition: border-color .2s ease, background .2s ease;
}
.page-home .help-link:hover{
  border-color: var(--cyan);
  background: rgba(45,226,197,.08);
}
.page-home .help-link .mono{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color: var(--cyan);
}
.page-home .help-link strong{
  font-size:15.5px;
  font-weight:600;
}
.page-home .help-arrow{
  font-size:16px;
  color: var(--orange);
}

/* ---------- trust ---------- */
.page-home .trust{
  background: linear-gradient(180deg, rgba(11,41,64,.55), var(--ink));
}
.page-home .trust-grid{
  display:grid;
  gap:30px;
}
.page-home .trust-copy p{
  margin:0 0 24px;
  max-width:58ch;
  font-size:15px;
  line-height:1.82;
  color: var(--mist);
}
.page-home .trust-stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin:0;
  border-top:1px solid var(--hm-line);
}
.page-home .trust-stats > div{
  display:flex;
  flex-direction:column;
  padding:16px 0;
  border-bottom:1px solid var(--hm-line-soft);
}
.page-home .trust-stats > div:nth-child(odd){
  padding-right:14px;
  border-right:1px solid var(--hm-line-soft);
}
.page-home .trust-stats > div:nth-child(even){padding-left:14px;}
.page-home .trust-stats dd{
  order:-1;
  margin:0 0 6px;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing:-.02em;
  color: var(--cyan);
}
.page-home .trust-stats dt{
  margin:0;
  font-size:12.5px;
  line-height:1.62;
  color: var(--mist);
}

/* ---------- responsive ---------- */
@media (min-width: 760px){
  .page-home .step-rail{grid-template-columns: repeat(3, minmax(0,1fr));}
  .page-home .step{
    border-bottom:0;
    border-right:1px solid var(--hm-line-soft);
    padding:26px 22px 30px;
  }
  .page-home .step:last-child{border-right:0;}
}

@media (min-width: 900px){
  .page-home .panel-stack{
    grid-template-columns: repeat(12, minmax(0,1fr));
    grid-template-areas:
      "main main main main main main main side side side side side"
      "device device device device note note note note note note note note";
    align-items: stretch;
  }
  .page-home .panel-main{grid-area: main;}
  .page-home .panel-side{grid-area: side;}
  .page-home .panel-device{grid-area: device;}
  .page-home .panel-note{grid-area: note;}

  .page-home .release-pane{
    grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
    align-items:start;
    gap:36px;
  }
  .page-home .help-inner{
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;
    gap:44px;
  }
  .page-home .trust-grid{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items:start;
    gap:48px;
  }
}

@media (min-width: 980px){
  .page-home .hero-grid{
    grid-template-columns: minmax(0,1.3fr) minmax(300px,.78fr);
    align-items:start;
    gap: clamp(24px, 3vw, 44px);
  }
}

@media (max-width: 420px){
  .page-home .slate-row{
    grid-template-columns:50px minmax(0,1fr);
    row-gap:4px;
  }
  .page-home .slate-pin{grid-column:2; justify-self:start;}
}

@media (prefers-reduced-motion: reduce){
  .page-home .slate-row,
  .page-home .slate-row::before,
  .page-home .step::before,
  .page-home .help-link{transition:none;}
}
<<<END>>>