*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f2e9;color:#15120f;font-family:"DM Sans",sans-serif;overflow-x:hidden}
body.menu-open{overflow:hidden}

/* ── NAV ── */
.nav{
  height:78px;position:fixed;z-index:20;inset:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6vw;transition:background .3s,box-shadow .3s
}
.nav.scrolled{
  background:#f7f2e9ef;backdrop-filter:blur(15px);box-shadow:0 1px #ddd
}
.brand{font:700 21px "Space Grotesk";color:#15120f;text-decoration:none}
.brand i,footer i{font-style:normal;color:#ff541b;font-size:34px}
.desktop-nav{display:flex;gap:32px}
.desktop-nav a{
  text-decoration:none;color:#514a40;font-size:13px;
  transition:color .2s
}
.desktop-nav a:hover{color:#ff541b}
.nav-actions{display:flex;align-items:center;gap:12px}
.navbtn{
  background:#15120f!important;color:#fff!important;
  padding:12px 20px!important;font-size:13px;font-weight:700;
  text-decoration:none
}
.menu{
  display:none;background:none;border:0;font-size:24px;
  cursor:pointer;color:#15120f;line-height:1;padding:4px 2px
}

/* Mobile nav — links only */
.mobile-nav{
  position:fixed;inset:78px 0 auto;z-index:19;
  background:#f7f2e9;border-bottom:1px solid #ddd3c4;
  display:flex;flex-direction:column;padding:8px 6vw 24px;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s
}
.mobile-nav.open{
  opacity:1;transform:none;pointer-events:auto
}
.mobile-nav a{
  padding:14px 0;border-bottom:1px solid #e8dece;
  text-decoration:none;color:#15120f;
  font:700 17px "Space Grotesk"
}
.mobile-nav a:last-child{border:0}

/* ── BUTTONS ── */
.btn{
  display:inline-block!important;
  padding:16px 24px!important;
  border-radius:999px!important;
  font-weight:700;font-size:14px;
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease
}
.btn:hover{transform:translateY(-2px)}
.orange{
  background:#ff541b!important;color:#fff!important;
  box-shadow:0 2px 0 #c73a0f
}
.orange:hover{box-shadow:0 6px 18px #ff541b40}
.darkbtn{
  background:#15120f!important;color:#fff!important;
  box-shadow:0 2px 0 #000
}
.darkbtn:hover{box-shadow:0 6px 18px #15120f30}
.lightbtn{
  background:#f7f2e9!important;color:#15120f!important;
  box-shadow:0 2px 0 #d4c9b8
}
.lightbtn:hover{box-shadow:0 6px 18px #15120f18}
.text-link{
  color:#15120f;text-decoration:none;font-weight:700;font-size:13px
}

/* ── HERO ── */
.hero{
  min-height:790px;padding:150px 7vw 90px;
  display:grid;grid-template-columns:48% 52%;align-items:center;
  border-bottom:1px solid #ddd3c4
}
.hero small,.intro small,.feature>small,.darkcopy>small,.cta small{
  font-size:10px;letter-spacing:.15em;font-weight:700;color:#ff541b
}
.hero h1{
  font:700 clamp(68px,9vw,135px)/.82 "Space Grotesk";
  letter-spacing:-.08em;margin:25px 0 35px
}
.hero h1 em,h2 em,.intro span,.feature em,.cta em{
  color:#ff541b;font-style:normal
}
.hero p{max-width:500px;font-size:20px;line-height:1.5;color:#625b50}
.actions{display:flex;gap:25px;align-items:center;margin-top:35px}
.heroart{height:560px;position:relative}
.semi{
  position:absolute;right:3%;top:0;
  font:700 550px/.65 "Space Grotesk";color:#ff541b
}
.orbit{
  position:absolute;width:90%;height:70%;left:4%;top:15%;
  border-top:3px solid #15120f;border-radius:50%;transform:rotate(-18deg)
}
.orbit:after{
  content:"";position:absolute;right:0;top:-8px;
  width:16px;height:16px;border-radius:50%;background:#ff541b;
  animation:orbit-dot 3.5s ease-in-out infinite
}
@keyframes orbit-dot{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.85}
}
.card{
  position:absolute;background:#fff;border:1px solid #ddd3c2;
  padding:18px;box-shadow:0 20px 45px #15120f18;
  display:flex;flex-direction:column;gap:5px
}
.card small{font-size:9px;letter-spacing:.12em;color:#8c8376}
.card strong{font:700 16px "Space Grotesk"}
.card span{font-size:11px;color:#766e63}
.order{left:2%;bottom:13%;transform:rotate(-3deg)}
.rider{
  right:0;top:13%;background:#15120f;color:#fff;
  flex-direction:row;gap:10px;transform:rotate(3deg)
}
.rider>b{color:#ff541b}
.rider small{color:#ff9670}
.circle{
  position:absolute;left:44%;top:40%;width:105px;height:105px;
  border:2px solid;border-radius:50%;display:grid;place-items:center;
  font:700 38px "Space Grotesk";background:#f7f2e9
}
.heroart label{
  position:absolute;right:5%;bottom:4%;
  font:700 10px "Space Grotesk";letter-spacing:.15em
}

/* ── TICKER ── */
.ticker{
  overflow:hidden;white-space:nowrap;background:#ff541b;
  font:700 clamp(32px,5vw,65px) "Space Grotesk";
  padding:16px 0;letter-spacing:-.05em
}
.ticker b{color:#f7f2e9;margin:0 25px}

/* ── SECTIONS ── */
.section{padding:150px 7vw}
.intro{
  display:grid;grid-template-columns:1fr 1.4fr .8fr;
  gap:30px;align-items:end
}
.intro h2,.feature h2{
  font:700 clamp(50px,6vw,88px)/.9 "Space Grotesk";
  letter-spacing:-.065em;margin:0
}
.intro p,.feature>p{line-height:1.6;color:#625b50}

.routegrid{
  margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:#d8cdbb
}
.routegrid article{
  min-height:400px;padding:32px;position:relative;background:#f7f2e9
}
.routegrid .cream{background:#e8dece}
.routegrid .black{background:#15120f;color:#fff}
.routegrid article i{
  display:block;font-style:normal;font-size:65px;
  color:#ff541b;margin:60px 0 25px
}
.routegrid h3{font:700 34px "Space Grotesk";margin:0}
.routegrid p{max-width:290px;color:#6b6358;line-height:1.5}
.black p{color:#bbb2a7!important}
.routegrid article>b{
  position:absolute;bottom:25px;right:30px;color:#ff541b;font-size:27px
}

/* Customers */
.split{
  padding:120px 8vw;background:#e8dece;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center
}
.phonewrap{height:590px;display:grid;place-items:center;position:relative}
.phone{
  width:270px;height:530px;border:8px solid #15120f;background:#fff;
  border-radius:38px;padding:20px;box-shadow:25px 30px #ff541b;z-index:1
}
.notch{
  width:80px;height:20px;background:#15120f;border-radius:20px;
  margin:-5px auto 25px
}
.phonetop{display:flex;justify-content:space-between;font:700 16px "Space Grotesk"}
.phone>small{
  display:block;margin-top:50px;color:#999;
  font-size:9px;letter-spacing:.15em
}
.phone h3{font:700 30px/.9 "Space Grotesk"}
.food{
  height:170px;background:#ff541b;padding:25px;
  display:flex;flex-direction:column;justify-content:end;
  font:700 40px/.75 "Space Grotesk";transform:rotate(-2deg);margin:20px -8px
}
.food small{font-size:12px}
.item{
  display:flex;gap:10px;align-items:center;margin-top:25px;color:#ff541b
}
.item span{flex:1;color:#15120f}
.item small{display:block;color:#888;font-size:10px}
.phonesemi{
  position:absolute;right:0;bottom:-40px;color:#ff541b;
  font:700 350px/.7 "Space Grotesk";opacity:.9
}
.feature ul{list-style:none;padding:0;margin:40px 0}
.feature li{border-top:1px solid #c9beab;padding:15px 0;font-size:14px}
.feature li b{color:#ff541b;margin-right:25px}

/* Network / MOVE */
.dark{
  background:#15120f;color:#fff;padding:130px 7vw;min-height:600px;
  display:grid;grid-template-columns:1.4fr .7fr;align-items:center
}
.giant{
  font:700 clamp(130px,22vw,340px)/.7 "Space Grotesk";
  letter-spacing:-.1em;color:#ff541b
}
.giant span{color:#fff}
.darkcopy{max-width:400px}
.darkcopy p{font-size:20px;line-height:1.5;color:#c5bdb2}
.net-steps{
  display:flex;align-items:center;gap:18px;margin-top:50px;flex-wrap:wrap
}
.net-steps b{font:700 30px "Space Grotesk";color:#ff541b}
.net-steps b small{
  display:block;color:#777;font:700 9px "DM Sans";letter-spacing:.15em
}
.step-line{
  width:28px;height:2px;background:#ff541b55;
  position:relative;flex-shrink:0
}
.step-line::after{
  content:"";position:absolute;left:0;top:-3px;
  width:8px;height:8px;border-radius:50%;background:#ff541b;
  animation:step-run 2.8s ease-in-out infinite
}
@keyframes step-run{
  0%{left:0;opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{left:calc(100% - 8px);opacity:0}
}

/* Features */
.featuresgrid{
  margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid #d8cdbb;border-left:1px solid #d8cdbb
}
.featuresgrid article{
  min-height:230px;padding:30px;
  border-right:1px solid #d8cdbb;border-bottom:1px solid #d8cdbb
}
.featuresgrid small{
  font-size:10px;letter-spacing:.12em;color:#ff541b;font-weight:700
}
.featuresgrid h3{font:700 27px "Space Grotesk";margin-top:45px}
.featuresgrid p{color:#6b6358;line-height:1.5}

/* Final CTA */
.cta{
  padding:150px 20px;text-align:center;background:#ff541b;
  position:relative;overflow:hidden
}
.cta-inner{position:relative;z-index:1}
.cta h2{
  font:700 clamp(85px,14vw,200px)/.72 "Space Grotesk";
  letter-spacing:-.09em;margin:28px 0
}
.cta p{max-width:420px;margin:0 auto 40px;color:#35251e;font-size:17px;line-height:1.5}
.ctasemi{
  position:absolute;font:700 600px/.6 "Space Grotesk";
  color:#f7f2e922;left:-80px;top:-30px;pointer-events:none
}

/* Footer */
footer{
  background:#15120f;color:#c7bfb4;padding:55px 7vw;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;gap:20px;flex-wrap:wrap
}
footer>b{color:#fff;font:700 20px "Space Grotesk"}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:none}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .orbit:after,.step-line::after{animation:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* ── RESPONSIVE ── */
@media(max-width:850px){
  .desktop-nav{display:none}
  .menu{display:block}
  /* CTA stays visible on mobile */
  .navbtn{display:inline-block!important;padding:10px 16px!important;font-size:12px}

  .hero{grid-template-columns:1fr;padding-top:130px}
  .heroart{height:440px}
  .semi{font-size:390px}
  .intro,.routegrid,.split,.dark{grid-template-columns:1fr}
  .intro p{max-width:500px}
  .featuresgrid{grid-template-columns:1fr 1fr}
  .dark{gap:70px}
  .giant{font-size:130px}
  footer{flex-direction:column;align-items:flex-start;gap:12px}
}

@media(max-width:520px){
  .hero h1{font-size:62px}
  .hero p{font-size:17px}
  .heroart{height:390px}
  .semi{font-size:300px}
  .circle{width:75px;height:75px}
  .section{padding:95px 20px}
  .intro h2,.feature h2{font-size:55px}
  .routegrid{gap:1px}
  .featuresgrid{grid-template-columns:1fr}
  .split{padding:90px 20px}
  .phonesemi{font-size:270px}
  .dark{padding:100px 20px}
  .giant{font-size:105px}
  .cta h2{font-size:95px}
  .actions{flex-direction:column;align-items:flex-start}
  footer{padding:40px 20px}
  .nav{padding:0 4vw}
  .net-steps{gap:12px}
  .step-line{width:18px}
}