/* ===== HERO ===== */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--black);
}
.particle-canvas{
  position:absolute;inset:0;
  z-index:0;
  width:100%;height:100%;
  display:block;
}

.hero-content{
  position:relative;
  z-index:2;
  padding-top:var(--nav-h);
}
.hero-headline{
  font-family:var(--display);
  font-size:clamp(48px,9vw,132px);
  line-height:.94;
  text-transform:uppercase;
  margin-top:18px;
}
.hero-headline .word{
  display:inline-block;
  opacity:0;
  transform:translateY(40px);
}
.hero-sub{
  margin-top:26px;
  font-size:18px;
  color:var(--grey-400);
  max-width:420px;
}
.hero-cta{
  margin-top:44px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* ===== CHAPTERS ===== */
.chapter{
  border-top:1px solid var(--grey-900);
  padding:72px 0;
}
.chapter:last-of-type{padding-bottom:48px;}
@media (max-width:768px){.chapter{padding:48px 0;}}
.chapter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.chapter-grid.reverse .chapter-copy{order:2;}
.chapter-grid.reverse .chapter-visual{order:1;}
@media (max-width:900px){
  .chapter-grid, .chapter-grid.reverse{grid-template-columns:1fr;}
  .chapter-grid.reverse .chapter-copy, .chapter-grid.reverse .chapter-visual{order:unset;}
}
.chapter-num{
  font-family:var(--display);
  font-size:14px;
  color:var(--grey-600);
  letter-spacing:.1em;
}
.chapter-copy h3{
  font-family:var(--display);
  font-size:clamp(28px,4vw,42px);
  text-transform:uppercase;
  margin:14px 0 18px;
  line-height:1.08;
}
.chapter-copy p{
  color:var(--grey-400);
  font-size:16px;
  line-height:1.65;
  max-width:440px;
}
.chapter-list{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chapter-list li{
  font-size:14px;
  padding-left:22px;
  position:relative;
  color:var(--grey-200);
}
.chapter-list li::before{
  content:'';
  position:absolute;
  left:0;top:8px;
  width:10px;height:1px;
  background:var(--grey-400);
}
.chapter-list-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 20px;
}
@media (max-width:480px){.chapter-list-grid{grid-template-columns:1fr;}}

.chapter-visual{
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* mock website window */
.mock-window{
  width:100%;
  max-width:420px;
  background:var(--grey-900);
  border:1px solid var(--grey-600);
  border-radius:10px;
  overflow:hidden;
}
.mock-bar{
  display:flex;
  gap:6px;
  padding:12px 14px;
  border-bottom:1px solid var(--grey-600);
}
.mock-bar span{width:8px;height:8px;border-radius:50%;background:var(--grey-600);}
.mock-block{background:var(--grey-600);opacity:.35;margin:16px;border-radius:4px;}
.mb-1{height:22px;width:60%;}
.mb-2{height:80px;}
.mb-3{height:80px;width:80%;}

/* mock chart */
.mock-chart{width:100%;max-width:420px;}
.mock-bar-chart{
  display:flex;
  align-items:flex-end;
  gap:14px;
  height:220px;
  border-bottom:1px solid var(--grey-600);
  padding-bottom:2px;
}
.mock-bar-chart span{
  flex:1;
  background:linear-gradient(to top,var(--white),var(--grey-600));
  height:0;
  border-radius:3px 3px 0 0;
  transition:height .9s var(--ease), transform .3s var(--ease);
  cursor:pointer;
  position:relative;
}
.mock-bar-chart.in-view span{height:var(--h);}
.mock-bar-chart.in-view span:hover{transform:scaleY(1.18);transform-origin:bottom;}

/* flip card */
.mock-card{
  width:280px;height:340px;
  perspective:1200px;
  cursor:pointer;
}
.mock-card-face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  border-radius:14px;
  border:1px solid var(--grey-600);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .7s var(--ease);
  padding:24px;
  text-align:center;
}
.mock-card-face.front{background:var(--white);color:var(--black);transform:rotateY(0deg);}
.mock-card-face.front p{font-size:12px;color:var(--grey-600);text-transform:uppercase;letter-spacing:.1em;margin-top:8px;}
.mock-card-mark{font-family:var(--display);font-size:46px;}
.mock-card-face.back{background:var(--grey-900);transform:rotateY(180deg);}
.mock-card.flipped .front{transform:rotateY(-180deg);}
.mock-card.flipped .back{transform:rotateY(0deg);}
@media (max-width:768px){.mock-card{width:100%;max-width:280px;}}

/* ===== PROCESS ===== */
.process-line{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
  padding-top:36px;
}
.process-line::before{
  content:'';
  position:absolute;
  top:5px;left:0;right:0;
  height:1px;
  background:var(--grey-900);
}
.process-line-fill{
  position:absolute;
  top:5px;left:0;
  height:1px;
  width:0%;
  background:var(--white);
  transition:width 1.6s var(--ease);
}
.process-step h5{
  font-family:var(--display);
  font-size:15px;
  text-transform:uppercase;
  margin:20px 0 8px;
}
.process-step p{font-size:13px;color:var(--grey-400);line-height:1.5;}
.ps-dot{
  position:absolute;
  top:0;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--black);
  border:1px solid var(--grey-600);
  transition:background .4s, border-color .4s;
}
.process-step{position:relative;}
.process-step.hit .ps-dot{background:var(--white);border-color:var(--white);}
@media (max-width:768px){
  .process-line{grid-template-columns:1fr;gap:36px;}
  .process-line::before, .process-line-fill{display:none;}
  .ps-dot{display:none;}
}

/* ===== REACH ===== */
.reach{border-top:1px solid var(--grey-900);text-align:center;}
.reach-inner h2{
  font-family:var(--display);
  font-size:clamp(34px,7vw,84px);
  text-transform:uppercase;
  line-height:1.05;
  margin-bottom:44px;
}
.btn-lg{padding:20px 44px;font-size:16px;}

/* ===== WIREFRAME-TO-SITE ANIMATION ===== */
.wireframe-window{
  width:100%;
  max-width:440px;
  background:var(--grey-900);
  border:1px solid var(--grey-600);
  border-radius:10px;
  overflow:hidden;
  position:relative;
}
.wf-bar{
  display:flex;
  gap:6px;
  padding:12px 14px;
  border-bottom:1px solid var(--grey-600);
}
.wf-bar span{width:8px;height:8px;border-radius:50%;background:var(--grey-600);}
.wf-stage{padding:20px;display:flex;flex-direction:column;gap:12px;min-height:260px;}
.wf-box{
  border:1px dashed var(--grey-600);
  border-radius:4px;
  background:transparent;
  opacity:0;
  transform:scaleY(0.3);
  transform-origin:top;
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .5s var(--ease), border-style .5s;
}
.wf-box.filled{
  border-style:solid;
  background:var(--grey-600);
  opacity:.4;
}
.wf-nav{height:20px;width:40%;}
.wf-hero{height:70px;}
.wf-row{display:flex;gap:12px;}
.wf-card{height:50px;flex:1;}
.wf-footer{height:24px;}
.wf-box.show{opacity:1;transform:scaleY(1);}
.wf-caption{
  display:block;
  padding:10px 20px 16px;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grey-600);
}

/* ===== STACKED DECK ===== */
.chapter-visual{flex-direction:column;gap:20px;}
.deck{
  position:relative;
  width:220px;
  height:280px;
}
.deck-card{
  position:absolute;
  inset:0;
  background:var(--grey-900);
  border:1px solid var(--grey-600);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:20px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  cursor:pointer;
}
.deck-demo{
  width:80px;height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.demo-logo .dl-mark{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--white);
  color:var(--black);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-size:22px;
}
.demo-card{flex-direction:column;width:100%;padding:0 6px;}
.demo-card .dc-line{display:block;height:6px;background:var(--grey-400);border-radius:2px;margin:4px 0;}
.demo-card .dc-1{width:70%;}
.demo-card .dc-2{width:45%;background:var(--grey-600);}
.demo-brochure{gap:4px;}
.demo-brochure .db-fold{width:16px;height:64px;background:var(--grey-600);border-radius:2px;}
.demo-brochure .db-fold:nth-child(2){background:var(--grey-400);}
.demo-post .dp-sq{width:60px;height:60px;border-radius:8px;background:linear-gradient(135deg,var(--grey-400),var(--grey-900));}
.demo-deck{flex-direction:column;width:70%;gap:6px;}
.demo-deck .dd-bar{display:block;height:8px;border-radius:2px;background:var(--grey-600);}
.demo-deck .dd-1{width:100%;}
.demo-deck .dd-2{width:75%;background:var(--grey-400);}
.demo-deck .dd-3{width:55%;}
.deck-label{
  font-family:var(--display);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.deck-hint{
  font-size:12px;
  color:var(--grey-600);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ===== ROADMAP ===== */
.roadmap-wrap{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}
.roadmap-svg{
  width:100%;
  height:auto;
  display:block;
}
.roadmap-stop{
  position:absolute;
  width:42%;
  transform:translateY(-50%);
}
.rs-left{left:0;text-align:right;padding-right:6%;}
.rs-right{right:0;text-align:left;padding-left:6%;}
.roadmap-stop h5{
  font-family:var(--display);
  font-size:clamp(18px,2.6vw,28px);
  text-transform:uppercase;
  margin-bottom:10px;
}
.roadmap-stop p{font-size:15px;color:var(--grey-400);line-height:1.55;max-width:320px;}
.rs-dot{display:none;}
.roadmap-destination{
  position:absolute;
  left:50%;
  top:96%;
  transform:translate(-50%,-50%);
  width:80px;height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.dest-ring{
  position:absolute;inset:0;
  width:100%;height:100%;
  fill:none;
  stroke:var(--white);
  stroke-width:1.4;
  opacity:0;
  animation:none;
}
.dest-flag{
  width:32px;height:32px;
  color:var(--white);
  position:relative;
  z-index:1;
  transform:scale(0.85);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.roadmap-destination:hover .dest-flag{transform:scale(1.35) rotate(-6deg);}

/* Reached state: triggered by JS once the moving dot arrives at the destination */
.roadmap-destination.reached .dest-flag{transform:scale(1.2);}
.roadmap-destination.reached .dest-ring{
  opacity:.3;
  animation:destPulse 2.4s ease-out infinite;
}
@keyframes destPulse{
  0%{transform:scale(0.8);opacity:.5;}
  100%{transform:scale(1.6);opacity:0;}
}
@media (max-width:760px){
  .roadmap-stop{position:static;width:100%;text-align:left !important;padding:0 0 0 32px !important;margin-bottom:64px;transform:none;}
  .roadmap-svg{display:none;}
  .rs-dot{
    display:block;
    position:absolute;left:0;top:4px;
    width:10px;height:10px;border-radius:50%;
    border:1px solid var(--grey-600);
  }
}

/* ===== BLOG SPOTLIGHT (homepage teaser) ===== */
.blog-teaser{border-top:1px solid var(--grey-900);}
.blog-spotlight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media (max-width:900px){.blog-spotlight-grid{grid-template-columns:1fr;}}
.blog-spot-card{
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--grey-900);
  background:var(--grey-900);
}
.blog-spot-thumb{
  height:180px;
  position:relative;
  background:radial-gradient(circle at 30% 30%, #2a2a2a, #0a0a0a 70%);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  filter:grayscale(1) contrast(1.05);
  transition:filter .5s var(--ease), transform .6s var(--ease);
}
.blog-spot-card:hover .blog-spot-thumb{filter:grayscale(0);transform:scale(1.03);}
.spot-mask{
  position:absolute;
  width:220px;height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  left:var(--mx,50%);
  top:var(--my,50%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:opacity .3s;
  opacity:0;
}
.blog-spot-card:hover .spot-mask{opacity:1;}
.blog-spot-info{padding:20px;}
.blog-spot-info h4{
  font-family:var(--display);
  font-size:15px;
  text-transform:uppercase;
  line-height:1.3;
  margin:10px 0 8px;
}
.blog-spot-info p{font-size:13px;color:var(--grey-400);line-height:1.5;}