.page-home{
  --ph-shadow:0 16px 48px rgba(0,0,0,.42);
  --ph-shadow-cyan:10px 10px 0 rgba(0,229,255,.08);
  background:var(--bg-deep);
  overflow-x:clip
}

.page-home .home-breadcrumb{
  padding-top:1.25rem;
  padding-bottom:0
}

.page-home .home-hero{
  position:relative;
  min-height:90vh;
  padding:4.25rem 0 3rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--bg-deep);
  overflow:hidden;
  isolation:isolate
}

.page-home .hero-media{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden
}

.page-home .hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.45;
  filter:saturate(1.15) contrast(1.08) brightness(.82);
  transform:scale(1.06)
}

.page-home .hero-veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,var(--bg-deep) 2%,rgba(10,14,26,.9) 36%,rgba(10,14,26,.5) 68%,rgba(10,14,26,.84) 100%),linear-gradient(180deg,rgba(10,14,26,.55),rgba(10,14,26,.16) 46%,rgba(10,14,26,.86))
}

.page-home .hero-speedlines{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:repeating-linear-gradient(-10deg,rgba(0,229,255,0) 0,rgba(0,229,255,0) 6px,rgba(0,229,255,.14) 6px,rgba(0,229,255,.14) 7px,rgba(0,229,255,0) 7px,rgba(0,229,255,0) 34px);
  opacity:.55
}

.page-home .hero-inner,.page-home .hero-stats{
  position:relative;
  z-index:1
}

.page-home .hero-inner{
  padding-top:1rem
}

.page-home .hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-blue);
  background:rgba(0,229,255,.07);
  border:1px solid rgba(0,229,255,.4);
  padding:.48rem 1.05rem;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%);
  margin:0
}

.page-home .live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-green);
  box-shadow:0 0 0 0 rgba(57,255,20,.55);
  animation:phPulse 2s ease-out infinite
}

@keyframes phPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(57,255,20,.5)}
  50%{box-shadow:0 0 0 7px rgba(57,255,20,0)}
}

.page-home .hero-title{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:clamp(2.7rem,9vw,5.4rem);
  line-height:.96;
  letter-spacing:.012em;
  text-transform:uppercase;
  color:var(--text-primary);
  margin:1.5rem 0 1.1rem;
  overflow-wrap:break-word
}

.page-home .hero-accent-text{
  background:var(--gradient-accent);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  padding-bottom:.08em
}

.page-home .hero-lead{
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.75;
  color:var(--text-secondary);
  max-width:33rem;
  margin:0 0 1.9rem;
  padding-left:1.15rem;
  border-left:4px solid var(--accent-orange)
}

.page-home .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.95rem;
  align-items:center
}

.page-home .hero-chapters{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:2.2rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(37,48,65,.7)
}

.page-home .hero-chapters a{
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--text-secondary);
  text-decoration:none;
  padding:.4rem .8rem;
  background:rgba(18,26,43,.75);
  border:1px solid var(--border-color);
  transition:color .25s,border-color .25s,transform .25s var(--ease-out)
}

.page-home .hero-chapters a:hover{
  color:var(--accent-blue);
  border-color:var(--accent-blue);
  transform:translateY(-2px)
}

.page-home .hero-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem;
  margin-top:2.6rem
}

.page-home .stat-cell{
  background:rgba(18,26,43,.78);
  border:1px solid var(--border-color);
  padding:1.05rem 1.15rem
}

.page-home .stat-num{
  display:block;
  font-family:var(--font-heading);
  font-size:2.1rem;
  line-height:1;
  color:var(--text-primary)
}

.page-home .stat-num.blue{color:var(--accent-blue)}
.page-home .stat-num.orange{color:var(--accent-orange)}
.page-home .stat-num.green{color:var(--accent-green)}

.page-home .stat-cap{
  display:block;
  margin-top:.5rem;
  font-family:var(--font-body);
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-secondary)
}

.page-home .section-heading{
  max-width:47rem;
  margin-bottom:2.4rem
}

.page-home .section-heading h2{
  font-family:var(--font-heading);
  font-size:clamp(2.1rem,5vw,3.2rem);
  line-height:1.02;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--text-primary);
  margin:.8rem 0 .55rem
}

.page-home .section-heading p{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.68;
  color:var(--text-secondary);
  margin:0
}

.page-home .section-tag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-blue);
  background:rgba(0,229,255,.07);
  border:1px solid rgba(0,229,255,.35);
  padding:.38rem .95rem;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 100%,9px 100%)
}

.page-home .section-tag::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent-blue);
  box-shadow:0 0 12px rgba(0,229,255,.7);
  flex:none
}

.page-home .media-frame{
  position:relative;
  overflow:hidden;
  background:var(--bg-panel);
  border:1px solid var(--border-color)
}

.page-home .media-frame img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover
}

.page-home .home-steps{
  position:relative;
  padding:4.25rem 0 4.5rem;
  border-bottom:1px solid var(--border-color)
}

.page-home .home-steps::before{
  content:'01';
  position:absolute;
  right:1%;
  top:1.6rem;
  font-family:var(--font-heading);
  font-size:clamp(7rem,20vw,14rem);
  line-height:1;
  color:rgba(245,247,250,.025);
  pointer-events:none;
  user-select:none;
  z-index:0
}

.page-home .home-steps .container{
  position:relative;
  z-index:1
}

.page-home .steps-track{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  margin:2.4rem 0 2.6rem
}

.page-home .step-node{
  position:relative;
  display:flex;
  gap:1.1rem;
  align-items:flex-start;
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  padding:1.7rem 1.6rem;
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s
}

.page-home .step-node:hover{
  transform:translateY(-5px);
  box-shadow:10px 10px 0 rgba(0,229,255,.1);
  border-color:rgba(0,229,255,.45)
}

.page-home .node-dot{
  flex:none;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:800;
  color:var(--bg-deep);
  background:var(--accent-blue);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))
}

.page-home .step-node-alt .node-dot{
  background:var(--accent-orange)
}

.page-home .node-copy h3{
  font-family:var(--font-heading);
  font-size:1.4rem;
  line-height:1.1;
  color:var(--text-primary);
  margin:0 0 .5rem
}

.page-home .node-copy p{
  font-family:var(--font-body);
  font-size:.92rem;
  line-height:1.65;
  color:var(--text-secondary);
  margin:0
}

.page-home .step-arrow{
  position:relative;
  flex:none;
  align-self:center;
  width:2.4rem;
  height:2.4rem;
  transform:rotate(90deg)
}

.page-home .step-arrow::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--accent-blue),var(--accent-orange));
  opacity:.6
}

.page-home .step-arrow::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  border-left:9px solid var(--accent-orange);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  transform:translateY(-50%)
}

.page-home .steps-demo{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  padding:1.4rem;
  background:rgba(18,26,43,.52);
  border:1px solid var(--border-color)
}

.page-home .steps-demo .media-frame{
  box-shadow:var(--ph-shadow)
}

.page-home .steps-demo-copy{
  display:flex;
  flex-direction:column;
  gap:1.15rem;
  justify-content:center
}

.page-home .steps-demo-note{
  font-family:var(--font-body);
  font-size:.95rem;
  line-height:1.68;
  color:var(--text-secondary);
  border-left:3px solid var(--accent-orange);
  padding-left:1rem;
  margin:0
}

.page-home .steps-tabs .tab-bar{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap
}

.page-home .steps-tabs .tab-btn{
  font-family:var(--font-body);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text-secondary);
  background:rgba(10,14,26,.72);
  border:1px solid var(--border-color);
  padding:.58rem 1.05rem;
  cursor:pointer;
  transition:color .25s,border-color .25s,background .25s
}

.page-home .steps-tabs .tab-btn:hover,
.page-home .steps-tabs .tab-btn.is-active{
  color:var(--accent-blue);
  border-color:var(--accent-blue);
  background:rgba(0,229,255,.08)
}

.page-home .steps-tabs .tab-panel{
  margin-top:.7rem;
  padding:1rem 1.15rem;
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-top:2px solid var(--accent-blue)
}

.page-home .steps-tabs .tab-panel p{
  font-family:var(--font-body);
  font-size:.9rem;
  line-height:1.65;
  color:var(--text-primary);
  margin:0
}

.page-home .home-features{
  position:relative;
  padding:4.5rem 0;
  background:linear-gradient(175deg,var(--bg-deep) 0%,#0b1322 52%,var(--bg-deep) 100%);
  border-bottom:2px solid var(--border-color)
}

.page-home .home-features::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.55),transparent)
}

.page-home .home-features .container{
  position:relative;
  z-index:1
}

.page-home .features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem
}

.page-home .feature-card{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  padding:1.9rem 1.6rem;
  box-shadow:var(--ph-shadow);
  overflow:hidden;
  transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s
}

.page-home .feature-card:hover{
  transform:translateY(-6px);
  border-color:rgba(0,229,255,.5);
  box-shadow:var(--ph-shadow-cyan)
}

.page-home .feature-card::after{
  content:'';
  position:absolute;
  right:-22px;
  top:-22px;
  width:92px;
  height:92px;
  border:16px solid rgba(0,229,255,.045);
  border-radius:50%;
  pointer-events:none
}

.page-home .feature-card-orange::after{
  border-color:rgba(255,106,0,.045)
}

.page-home .feature-num{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:2.5rem;
  line-height:1;
  color:var(--accent-blue);
  opacity:.52;
  margin-bottom:1.05rem
}

.page-home .feature-card-orange .feature-num{
  color:var(--accent-orange)
}

.page-home .feature-card h3{
  font-family:var(--font-heading);
  font-size:1.55rem;
  line-height:1.12;
  color:var(--text-primary);
  margin:0 0 .7rem
}

.page-home .feature-card p{
  font-family:var(--font-body);
  font-size:.92rem;
  line-height:1.65;
  color:var(--text-secondary);
  margin:0
}

.page-home .home-realtime{
  position:relative;
  padding:4.5rem 0;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border-color)
}

.page-home .home-realtime::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:32%;
  height:4px;
  background:var(--gradient-accent)
}

.page-home .home-realtime::after{
  content:'03';
  position:absolute;
  right:1.5%;
  bottom:1.2rem;
  font-family:var(--font-heading);
  font-size:clamp(6rem,16vw,11rem);
  line-height:1;
  color:rgba(245,247,250,.022);
  pointer-events:none;
  user-select:none
}

.page-home .realtime-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:center
}

.page-home .realtime-copy p{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.72;
  color:var(--text-secondary);
  max-width:34rem;
  margin-top:.6rem
}

.page-home .realtime-copy ul{
  list-style:none;
  padding:0;
  margin:1.5rem 0 2.1rem;
  display:grid;
  gap:.8rem
}

.page-home .realtime-copy li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  font-family:var(--font-body);
  font-size:.93rem;
  line-height:1.6;
  color:var(--text-primary);
  background:rgba(10,14,26,.35);
  border:1px solid var(--border-color);
  padding:.85rem 1rem
}

.page-home .realtime-copy li::before{
  content:'▸';
  color:var(--accent-orange);
  font-weight:700;
  flex:none
}

.page-home .realtime-visual{
  position:relative
}

.page-home .realtime-visual::after{
  content:'';
  position:absolute;
  left:1rem;
  bottom:-1rem;
  width:52%;
  height:6px;
  background:var(--accent-orange);
  transform:skewX(-24deg);
  z-index:1
}

.page-home .realtime-visual .media-frame{
  box-shadow:10px 10px 0 rgba(0,0,0,.32)
}

.page-home .home-promise{
  position:relative;
  padding:4.5rem 0;
  background:var(--bg-deep)
}

.page-home .home-promise::before{
  content:'04';
  position:absolute;
  left:1%;
  bottom:1rem;
  font-family:var(--font-heading);
  font-size:clamp(7rem,18vw,12rem);
  line-height:1;
  color:rgba(245,247,250,.022);
  pointer-events:none;
  user-select:none
}

.page-home .promise-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:2.6rem;
  align-items:center
}

.page-home .promise-media .media-frame{
  box-shadow:14px 14px 0 rgba(0,229,255,.07)
}

.page-home .promise-copy h2{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4.8vw,3rem);
  line-height:1.04;
  text-transform:uppercase;
  color:var(--text-primary);
  margin:.8rem 0 .7rem
}

.page-home .promise-copy>p{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.72;
  color:var(--text-secondary);
  max-width:35rem
}

.page-home .promise-quote{
  margin:1.8rem 0;
  padding:1.3rem 1.5rem;
  background:var(--bg-panel);
  border-left:4px solid var(--accent-green);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--text-primary)
}

.page-home .promise-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.85rem
}

.page-home .meta-box{
  padding:1.15rem .8rem;
  background:rgba(18,26,43,.72);
  border:1px solid var(--border-color);
  text-align:center
}

.page-home .meta-value{
  display:block;
  font-family:var(--font-heading);
  font-size:1.7rem;
  line-height:1;
  color:var(--accent-blue)
}

.page-home .meta-orange .meta-value{color:var(--accent-orange)}
.page-home .meta-green .meta-value{color:var(--accent-green)}

.page-home .meta-label{
  display:block;
  font-family:var(--font-body);
  font-size:.73rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-top:.45rem
}

.page-home .home-explore{
  padding:4.25rem 0 5rem;
  background:#080c16;
  border-top:1px solid var(--border-color)
}

.page-home .explore-tiles{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:2.4rem
}

.page-home .explore-tile{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.45rem 1.6rem;
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  text-decoration:none;
  transition:transform .3s var(--ease-out),border-color .3s,background .3s
}

.page-home .explore-tile:hover{
  transform:translateX(8px);
  border-color:rgba(255,106,0,.55);
  background:#151e31
}

.page-home .explore-tile-text{
  display:flex;
  flex-direction:column;
  gap:.3rem
}

.page-home .tile-label{
  font-family:var(--font-heading);
  font-size:1.4rem;
  line-height:1.1;
  color:var(--text-primary)
}

.page-home .tile-desc{
  font-family:var(--font-body);
  font-size:.85rem;
  color:var(--text-secondary)
}

.page-home .tile-arrow{
  flex:none;
  font-family:var(--font-heading);
  font-size:1.8rem;
  color:var(--accent-orange);
  transition:transform .3s var(--ease-out)
}

.page-home .explore-tile:hover .tile-arrow{
  transform:translateX(4px)
}

.page-home a:focus-visible,
.page-home button:focus-visible{
  outline:2px solid var(--accent-orange);
  outline-offset:3px
}

@media (min-width:768px){
  .page-home .home-hero{
    min-height:92vh;
    padding:4.5rem 0
  }

  .page-home .hero-title{
    font-size:clamp(3.6rem,7vw,5.6rem)
  }

  .page-home .hero-lead{
    font-size:1.1rem;
    max-width:36rem
  }

  .page-home .hero-stats{
    grid-template-columns:repeat(4,1fr);
    gap:0;
    margin-top:3.4rem
  }

  .page-home .stat-cell{
    background:transparent;
    border:none;
    border-top:2px solid var(--border-color);
    padding:1.5rem 1.7rem .4rem 0
  }

  .page-home .stat-cell+.stat-cell{
    border-left:1px solid rgba(37,48,65,.35);
    padding-left:1.7rem
  }

  .page-home .stat-num{
    font-size:2.7rem
  }

  .page-home .steps-track{
    flex-direction:row;
    gap:2.4rem;
    align-items:stretch
  }

  .page-home .step-node{
    flex:1;
    flex-direction:column;
    gap:1.2rem;
    padding:2.2rem 2rem
  }

  .page-home .step-arrow{
    transform:rotate(0deg);
    width:3.2rem
  }

  .page-home .steps-demo{
    grid-template-columns:1.1fr .9fr;
    gap:2.2rem;
    padding:2.2rem
  }

  .page-home .home-steps,
  .page-home .home-features,
  .page-home .home-realtime,
  .page-home .home-promise,
  .page-home .home-explore{
    padding:5.5rem 0
  }

  .page-home .features-grid{
    grid-template-columns:1fr 1fr;
    gap:1.5rem
  }

  .page-home .feature-card:first-child{
    grid-row:span 2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:3rem 2.5rem;
    background:linear-gradient(135deg,rgba(0,229,255,.14) 0%,var(--bg-panel) 62%)
  }

  .page-home .feature-card:first-child .feature-num{
    font-size:4rem;
    margin-bottom:1.6rem
  }

  .page-home .feature-card:first-child h3{
    font-size:2.35rem
  }

  .page-home .feature-card:first-child p{
    font-size:1.05rem;
    max-width:22rem
  }

  .page-home .feature-card:not(:first-child){
    min-height:180px;
    padding:2.1rem 1.9rem
  }

  .page-home .realtime-panel{
    grid-template-columns:1.1fr .9fr;
    gap:3.5rem
  }

  .page-home .promise-grid{
    grid-template-columns:.92fr 1.08fr;
    gap:4rem
  }

  .page-home .promise-meta{
    gap:1rem
  }

  .page-home .meta-box{
    padding:1.4rem 1rem
  }

  .page-home .explore-tiles{
    grid-template-columns:1fr 1fr;
    gap:1.2rem
  }

  .page-home .explore-tile:first-child,
  .page-home .explore-tile:last-child{
    grid-column:span 2
  }

  .page-home .explore-tile{
    min-height:130px;
    padding:1.7rem 1.9rem
  }

  .page-home .explore-tile:first-child .tile-label{
    font-size:1.9rem
  }
}

@media (min-width:1200px){
  .page-home .hero-title{
    font-size:clamp(4.2rem,6.5vw,6.2rem)
  }

  .page-home .hero-chapters{
    gap:.8rem
  }

  .page-home .hero-chapters a{
    padding:.5rem 1rem
  }

  .page-home .features-grid{
    gap:1.7rem
  }

  .page-home .home-steps .container{
    max-width:min(var(--content-max),1080px)
  }
}

@media (prefers-reduced-motion:reduce){
  .page-home *,
  .page-home *::before,
  .page-home *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important
  }
}