/* ==========================================================
   EXPERIENCE — section 02 / channel convergence
   ========================================================== */
.order-section{
  --order-accent:#9fcf78;
  --order-pale:#dce9d1;
  position:relative;
  min-height:185svh;
  background:
    radial-gradient(circle at 50% 45%,rgba(159,207,120,.045),transparent 29%),
    linear-gradient(180deg,#090d0e 0%,#0b1010 48%,#090d0e 100%);
}

.order-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
}

.order-grid{
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 50%,black 0%,transparent 74%);
}

.order-copy{
  position:absolute;
  z-index:5;
  top:13%;
  left:50%;
  width:min(900px,86vw);
  transform:translateX(-50%);
  text-align:center;
  will-change:opacity,transform;
}

.order-copy > p{
  margin:0 0 18px;
  color:#707a7b;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.order-copy h2{
  margin:0;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:clamp(54px,7vw,104px);
  font-weight:600;
  line-height:.9;
  letter-spacing:-.066em;
  color:#eff2f0;
  text-shadow:0 18px 54px rgba(0,0,0,.48);
}

.order-copy h2 span{
  display:block;
  color:var(--order-pale);
  text-shadow:0 0 34px rgba(159,207,120,.08);
}

.order-system{
  position:absolute;
  z-index:3;
  left:50%;
  top:57%;
  width:min(920px,82vw);
  height:min(560px,56vh);
  transform:translate(-50%,-50%) scale(.94);
  transform-origin:center;
  will-change:transform,opacity;
}

.order-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(159,207,120,.08);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.orbit-one{width:62%;aspect-ratio:1.55/1}
.orbit-two{width:82%;aspect-ratio:1.8/1;opacity:.55}

.order-core{
  position:absolute;
  z-index:6;
  left:50%;
  top:50%;
  width:190px;
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%) scale(.72);
  border:1px solid rgba(159,207,120,.19);
  border-radius:50%;
  background:
    radial-gradient(circle at 45% 38%,rgba(159,207,120,.13),transparent 45%),
    rgba(10,15,15,.94);
  box-shadow:
    inset 0 0 54px rgba(159,207,120,.025),
    0 0 80px rgba(159,207,120,.025);
  opacity:.42;
  will-change:transform,opacity,box-shadow;
}

.order-core small{
  color:#64706d;
  font-size:7px;
  font-weight:700;
  letter-spacing:.16em;
}

.order-core strong{
  margin-top:7px;
  color:#edf2ea;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:27px;
  font-weight:600;
  letter-spacing:-.045em;
}

.order-core em{
  margin-top:6px;
  color:#738079;
  font-size:7px;
  font-style:normal;
  letter-spacing:.06em;
}

.core-pulse{
  position:absolute;
  inset:-16px;
  border:1px solid rgba(159,207,120,.08);
  border-radius:50%;
  opacity:0;
}

.order-node{
  position:absolute;
  z-index:5;
  min-width:138px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:13px;
  background:rgba(13,18,19,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 48px rgba(0,0,0,.18);
  opacity:.4;
  will-change:transform,opacity;
}

.order-node small{
  display:block;
  color:var(--order-accent);
  font-size:6px;
  font-weight:700;
  letter-spacing:.14em;
}

.order-node strong{
  display:block;
  margin-top:5px;
  color:#c6cfca;
  font-family:Inter,sans-serif;
  font-size:10px;
  font-weight:600;
}

.node-instagram{left:2%;top:17%}
.node-whatsapp{right:0;top:22%}
.node-google{left:8%;bottom:10%}
.node-reservas{right:4%;bottom:8%}

.order-line{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  transform-origin:0 0;
  background:linear-gradient(90deg,rgba(159,207,120,.55),rgba(159,207,120,.04));
  opacity:0;
  will-change:width,opacity;
}

.line-instagram{transform:rotate(205deg)}
.line-whatsapp{transform:rotate(-28deg)}
.line-google{transform:rotate(151deg)}
.line-reservas{transform:rotate(31deg)}

.order-result{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:9%;
  width:min(700px,84vw);
  transform:translate(-50%,24px);
  text-align:center;
  opacity:0;
  will-change:transform,opacity;
}

.order-result p{
  margin:0;
  color:#edf1ee;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:clamp(26px,3vw,42px);
  font-weight:600;
  letter-spacing:-.045em;
}

.order-result span{
  display:block;
  margin-top:10px;
  color:#7f8988;
  font-size:11px;
}

.order-progress{
  position:absolute;
  z-index:10;
  right:28px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#677170;
  font-size:7px;
  font-weight:700;
  letter-spacing:.14em;
}

.order-progress > span{
  width:26px;
  color:#cbd3cf;
  text-align:right;
  font-size:12px;
  letter-spacing:-.02em;
}

.order-progress i{
  width:54px;
  height:1px;
  background:linear-gradient(90deg,var(--order-accent) var(--order-p,0%),rgba(255,255,255,.07) 0);
}

@media(max-width:760px){
  .order-section{min-height:185svh}
  .order-copy{top:14%;width:90vw}
  .order-copy h2{font-size:clamp(48px,13vw,68px)}
  .order-system{top:58%;width:94vw;height:47vh}
  .order-node{min-width:108px;padding:10px 11px}
  .order-node strong{font-size:8px}
  .order-core{width:145px}
  .order-core strong{font-size:22px}
  .node-instagram{left:1%;top:12%}
  .node-whatsapp{right:1%;top:18%}
  .node-google{left:3%;bottom:9%}
  .node-reservas{right:1%;bottom:8%}
  .order-result{bottom:10%}
  .order-result span{font-size:10px;line-height:1.5}
  .order-progress{right:17px;bottom:19px}
}


/* ==========================================================
   EXPERIENCE — section 03 / capabilities
   ========================================================== */
.cap-section{
  --cap-accent:#9fcf78;
  --cap-pale:#dce9d1;
  position:relative;
  min-height:240svh;
  background:
    radial-gradient(circle at 58% 44%,rgba(159,207,120,.045),transparent 31%),
    linear-gradient(180deg,#090d0e 0%,#0c1111 48%,#090d0e 100%);
}
.cap-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.cap-grid,.plans-x-grid,.process-x-grid,.final-x-grid{
  position:absolute;inset:0;opacity:.17;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 55% 48%,black 0%,transparent 75%);
}
.cap-heading{
  position:absolute;z-index:7;left:50%;top:9%;width:min(880px,82vw);
  transform:translateX(-50%);text-align:center;will-change:opacity,transform;
}
.cap-heading>p,.plans-x-heading>p,.process-x-heading>p,.direct-x-inner>p:first-child,.before-x-heading>p,.final-x-inner>p{
  margin:0 0 14px;color:#6e7879;font-size:8px;font-weight:700;letter-spacing:.18em
}
.cap-heading h2,.plans-x-heading h2,.process-x-heading h2,.direct-x-inner h2,.before-x-heading h2,.final-x-inner h2{
  margin:0;color:#edf1ef;font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:600;line-height:.92;letter-spacing:-.06em
}
.cap-heading h2{font-size:clamp(45px,6vw,88px)}
.cap-heading h2 span,.plans-x-heading h2 span,.process-x-heading h2 span,.direct-x-inner h2 span,.before-x-heading h2 span,.final-x-inner h2 span{
  display:block;color:var(--cap-pale,#dce9d1);text-shadow:0 0 30px rgba(159,207,120,.08)
}
.cap-index{position:absolute;z-index:10;left:28px;top:50%;display:flex;flex-direction:column;gap:8px;transform:translateY(-50%)}
.cap-tab{
  width:145px;display:grid;grid-template-columns:1fr;align-items:center;gap:7px;
  padding:9px 10px;border:1px solid transparent;border-radius:10px;background:transparent;
  color:#586263;text-align:left;transition:.35s ease
}
.cap-tab span{color:#4f5a5b;font-size:7px;letter-spacing:.12em}
.cap-tab strong{font-family:Inter,sans-serif;font-size:8px;font-weight:700;letter-spacing:.13em}
.cap-tab.active{color:#dbe3dd;border-color:rgba(159,207,120,.15);background:rgba(159,207,120,.035);transform:translateX(6px)}
.cap-tab.active span{color:var(--cap-accent)}
.cap-stage{
  position:absolute;z-index:3;left:50%;top:57%;width:min(900px,70vw);height:min(560px,58vh);
  transform:translate(-50%,-50%) scale(.96);will-change:transform,opacity
}
.cap-window{
  width:100%;height:100%;overflow:hidden;border:1px solid rgba(255,255,255,.085);border-radius:27px;
  background:rgba(8,12,13,.84);box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 42px 130px rgba(0,0,0,.32)
}
.cap-browserbar{
  height:46px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.06);color:#596365;font-size:6px;font-weight:700;letter-spacing:.12em
}
.cap-browserbar em{justify-self:end;color:var(--cap-accent);font-style:normal}
.cap-dots{display:flex;gap:5px}.cap-dots i{width:5px;height:5px;border-radius:50%;background:#394143}
.cap-canvas{position:relative;height:calc(100% - 46px);overflow:hidden;background:radial-gradient(circle at 73% 38%,rgba(159,207,120,.04),transparent 28%),#0b1011}
.cap-canvas-grid{position:absolute;inset:0;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:46px 46px}
.cap-navline{position:absolute;left:6%;right:6%;top:7%;display:flex;align-items:center;justify-content:space-between}
.cap-logo-mark{width:11px;height:11px;border-radius:50%;background:var(--cap-accent);box-shadow:0 0 20px rgba(159,207,120,.22)}
.cap-navline div{display:flex;gap:8px}.cap-navline i{display:block;width:34px;height:3px;border-radius:3px;background:#2c3435}
.cap-copyblock{position:absolute;left:7%;top:27%;width:45%}
.cap-copyblock small{color:var(--cap-accent);font-size:7px;letter-spacing:.15em}
.cap-copyblock strong{display:block;margin-top:10px;color:#e7ece8;font:600 clamp(29px,3.4vw,54px)/.96 "Plus Jakarta Sans",sans-serif;letter-spacing:-.055em}
.cap-copyblock strong.muted{margin-top:2px;color:#87918c}
.cap-copyblock p{max-width:280px;margin:15px 0 0;color:#6d7777;font-size:9px;line-height:1.65}
.cap-action{position:absolute;left:7%;top:67%;padding:10px 13px;border:1px solid rgba(159,207,120,.14);border-radius:999px;color:#bfc8c3;font-size:7px}
.cap-action span{margin-left:16px;color:var(--cap-accent)}
.cap-panel{position:absolute;right:6%;top:17%;width:38%;height:64%;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:20px;background:#0e1314}
.cap-panel-shape{position:absolute;border:1px solid rgba(159,207,120,.13);background:rgba(159,207,120,.025)}
.shape-one{width:54%;aspect-ratio:1;left:22%;top:18%;border-radius:48% 52% 62% 38%/40% 48% 52% 60%;transform:rotate(23deg)}
.shape-two{width:31%;aspect-ratio:1;right:13%;bottom:18%;border-radius:50%}
.cap-panel>span{position:absolute;left:14px;bottom:13px;color:#5c6667;font-size:6px;letter-spacing:.12em}
.cap-dev-overlay,.cap-direction-overlay,.cap-ai-overlay{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity,transform}
.dev-code{position:absolute;left:7%;top:26%;display:flex;flex-direction:column;gap:12px}
.dev-code span{color:#7e8988;font:500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.dev-code b{display:inline-block;width:28px;color:var(--cap-accent);font-weight:500}
.dev-nodes{position:absolute;right:9%;top:20%;width:35%;height:55%;border:1px solid rgba(159,207,120,.08);border-radius:18px}
.dev-nodes i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cap-accent);box-shadow:0 0 18px rgba(159,207,120,.25)}
.dev-nodes i:nth-child(1){left:12%;top:18%}.dev-nodes i:nth-child(2){left:38%;top:58%}.dev-nodes i:nth-child(3){right:18%;top:34%}.dev-nodes i:nth-child(4){right:8%;bottom:12%}
.dev-nodes svg{position:absolute;inset:0;width:100%;height:100%}.dev-nodes path{fill:none;stroke:rgba(159,207,120,.20);stroke-width:.7}
.direction-frame{position:absolute;border:1px solid rgba(159,207,120,.15);border-radius:20px;background:rgba(159,207,120,.02)}
.frame-a{left:15%;top:19%;width:40%;height:55%;transform:rotate(-4deg)}
.frame-b{right:13%;top:24%;width:38%;height:50%;transform:rotate(5deg)}
.direction-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#dce6dc;font:600 clamp(22px,2.6vw,40px)/1 "Plus Jakarta Sans";letter-spacing:-.04em;white-space:nowrap}
.ai-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(159,207,120,.12);border-radius:50%;transform:translate(-50%,-50%)}
.orbit-a{width:42%;aspect-ratio:1}.orbit-b{width:64%;aspect-ratio:1}
.ai-core{position:absolute;left:50%;top:50%;width:140px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translate(-50%,-50%);border:1px solid rgba(159,207,120,.17);border-radius:50%;background:radial-gradient(circle,rgba(159,207,120,.09),transparent 62%)}
.ai-core span{color:#e3ebe2;font:600 30px/1 "Plus Jakarta Sans"}.ai-core small{margin-top:6px;color:#65706b;font-size:6px;letter-spacing:.13em}
.ai-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cap-accent);box-shadow:0 0 20px rgba(159,207,120,.25)}
.dot-1{left:23%;top:31%}.dot-2{right:22%;top:28%}.dot-3{left:31%;bottom:20%}.dot-4{right:29%;bottom:18%}
.cap-description{position:absolute;z-index:8;right:34px;top:50%;width:230px;transform:translateY(-50%);text-align:right}
.cap-description small{color:var(--cap-accent);font-size:7px;letter-spacing:.15em}
.cap-description strong{display:block;margin-top:7px;color:#dce2de;font:600 18px/1.1 "Plus Jakarta Sans";letter-spacing:-.03em}
.cap-description p{margin:9px 0 0;color:#677173;font-size:9px;line-height:1.5}
.cap-progress,.plans-x-counter,.process-x-counter{
  position:absolute;z-index:10;right:28px;bottom:24px;display:flex;align-items:center;gap:10px;color:#677170;font-size:7px;font-weight:700;letter-spacing:.14em
}
.cap-progress>span,.plans-x-counter>span,.process-x-counter>span{width:32px;color:#cbd3cf;text-align:right;font-size:12px;letter-spacing:-.02em}
.cap-progress i,.plans-x-counter i,.process-x-counter i{width:54px;height:1px;background:linear-gradient(90deg,var(--cap-accent) var(--cap-p,0%),rgba(255,255,255,.07) 0)}
.cap-final{position:absolute;z-index:9;left:50%;bottom:8%;transform:translate(-50%,28px);text-align:center;opacity:0}
.cap-final span{display:block;color:#7b8584;font-size:9px;letter-spacing:.12em}
.cap-final strong{display:block;margin-top:7px;color:#e7ece8;font:600 clamp(25px,3vw,40px)/1 "Plus Jakarta Sans";letter-spacing:-.045em}

/* ==========================================================
   EXPERIENCE — section 04 / plans
   ========================================================== */
.plans-x{
  --cap-accent:#9fcf78;--cap-pale:#dce9d1;
  position:relative;min-height:330svh;background:linear-gradient(180deg,#090d0e,#0b1010 50%,#090d0e)
}
.plans-x-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.plans-x-heading{position:absolute;z-index:7;left:50%;top:9%;width:min(820px,84vw);transform:translateX(-50%);text-align:center}
.plans-x-heading h2{font-size:clamp(44px,5.6vw,82px)}
.plans-banner-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:20px;
  padding:0 18px;
  border:1px solid rgba(159,207,120,.22);
  border-radius:999px;
  background:rgba(159,207,120,.055);
  color:#e4ebe6;
  text-decoration:none;
  font-size:11.5px;
  font-weight:650;
  letter-spacing:.01em;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;
}
.plans-banner-cta:hover,
.plans-banner-cta:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(159,207,120,.34);
  background:rgba(159,207,120,.09);
  box-shadow:0 18px 42px rgba(0,0,0,.20),0 0 28px rgba(159,207,120,.08);
  outline:none;
}
.plans-x-stage{position:absolute;z-index:4;left:50%;top:58%;width:min(1080px,86vw);height:54vh;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:14px}
.plan-x{
  position:relative;width:29%;min-width:0;height:64%;padding:20px 20px 18px;border:1px solid rgba(255,255,255,.07);border-radius:22px;background:rgba(12,17,18,.84);
  opacity:.48;transform:scale(.90);transition:transform .5s ease,opacity .5s ease,border-color .5s ease,box-shadow .5s ease,width .5s ease;height .5s ease
}
.plan-x.active{width:38%;height:88%;opacity:1;transform:scale(1);border-color:rgba(159,207,120,.19);box-shadow:0 30px 90px rgba(0,0,0,.28),0 0 70px rgba(159,207,120,.025)}
.plan-x-top{display:flex;align-items:center;justify-content:space-between;color:#5f696a;font-size:7px;letter-spacing:.13em}
.plan-x-top span{color:var(--cap-accent)}.plan-x-top em{font-style:normal}
.plan-x h3{margin:22px 0 0;color:#e5ebe7;font:600 clamp(24px,2.3vw,36px)/1 "Plus Jakarta Sans";letter-spacing:-.04em}
.plan-x-price{margin-top:12px}.plan-x-price strong{display:block;color:#cfd8d2;font:600 clamp(20px,2vw,30px)/1 "Plus Jakarta Sans";letter-spacing:-.035em}.plan-x-price small{display:block;margin-top:5px;color:#5e6869;font-size:7px}
.plan-x p{margin:16px 0 0;color:#778181;font-size:9px;line-height:1.5}
.plan-x ul{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:7px}
.plan-x li{position:relative;padding-left:13px;color:#9da6a2;font-size:8px}.plan-x li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;border-radius:50%;background:var(--cap-accent)}
.plans-x-detail{position:absolute;z-index:7;left:34px;bottom:26px;width:320px}
.plans-x-detail>span{color:var(--cap-accent);font-size:7px;letter-spacing:.15em}
.plans-x-detail>strong{display:block;margin-top:6px;color:#dbe2de;font:600 18px/1.1 "Plus Jakarta Sans";letter-spacing:-.03em}
.plans-x-detail>p{margin:7px 0 0;color:#697373;font-size:9px;line-height:1.5}
.plans-x-cta{position:absolute;z-index:12;right:34px;top:100px;padding:11px 15px;border:1px solid rgba(159,207,120,.16);border-radius:999px;color:#dbe3dd;background:rgba(159,207,120,.035);font-size:8px;text-decoration:none}

/* ==========================================================
   EXPERIENCE — section 05 / process
   ========================================================== */
.process-x{
  --cap-accent:#9fcf78;--cap-pale:#dce9d1;
  position:relative;min-height:300svh;background:linear-gradient(180deg,#090d0e,#0c1111 52%,#090d0e)
}
.process-x-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.process-x-heading{position:absolute;left:8%;top:12%;z-index:6}
.process-x-heading h2{font-size:clamp(48px,6vw,90px)}
.process-x-track{position:absolute;left:8%;top:47%;width:52%;transform:translateY(-50%);display:flex;flex-direction:column;gap:23px}
.process-x-line{position:absolute;left:19px;top:20px;bottom:20px;width:1px;background:rgba(255,255,255,.07)}
.process-x-line i{display:block;width:1px;height:var(--process-p,0%);background:var(--cap-accent);box-shadow:0 0 12px rgba(159,207,120,.18)}
.process-step-x{position:relative;z-index:2;display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start;opacity:.30;transition:.35s ease}
.process-step-x>span{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.075);border-radius:50%;background:#0b1011;color:#5f6969;font-size:8px}
.process-step-x strong{display:block;color:#aab2ae;font:600 18px/1.1 "Plus Jakarta Sans";letter-spacing:-.03em}
.process-step-x p{margin:5px 0 0;color:#5f6969;font-size:9px}
.process-step-x.active{opacity:1;transform:translateX(8px)}.process-step-x.active>span{color:var(--cap-accent);border-color:rgba(159,207,120,.16);box-shadow:0 0 30px rgba(159,207,120,.04)}.process-step-x.active strong{color:#e1e7e3}
.process-x-side{position:absolute;right:7%;top:50%;width:34%;transform:translateY(-50%);padding:28px;border:1px solid rgba(255,255,255,.075);border-radius:24px;background:rgba(12,17,18,.8)}
.process-x-side small{color:var(--cap-accent);font-size:7px;letter-spacing:.15em}
.process-x-side strong{display:block;margin-top:12px;color:#e2e8e4;font:600 clamp(27px,3vw,43px)/1 "Plus Jakarta Sans";letter-spacing:-.045em}
.process-x-side p{margin:16px 0 0;color:#7a8483;font-size:10px;line-height:1.6}

/* ==========================================================
   EXPERIENCE — direct / faq / final
   ========================================================== */
.direct-x,.before-x,.final-x{
  --cap-accent:#9fcf78;--cap-pale:#dce9d1;
  position:relative;background:#090d0e
}
.direct-x{min-height:100svh;display:grid;place-items:center;border-top:1px solid rgba(255,255,255,.035)}
.direct-x-inner{width:min(1040px,86vw);text-align:center}
.direct-x-inner h2{font-size:clamp(54px,7vw,102px)}
.direct-x-meta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:34px}
.direct-x-meta span{padding:9px 12px;border:1px solid rgba(255,255,255,.07);border-radius:999px;color:#778180;font-size:8px;letter-spacing:.1em}
.direct-x-copy{max-width:520px;margin:28px auto 0;color:#7a8483;font-size:11px;line-height:1.7}
.direct-x a{display:inline-block;margin-top:28px;color:#dbe2de;text-decoration:none;font-size:10px}
.before-x{padding:120px 0}
.before-x-inner{width:min(1000px,86vw);margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.before-x-heading h2{font-size:clamp(42px,5vw,68px)}
.before-x-items{border-top:1px solid rgba(255,255,255,.07)}
.before-x-items details{border-bottom:1px solid rgba(255,255,255,.07);padding:0}
.before-x-items summary{display:flex;gap:14px;align-items:center;padding:20px 0;color:#cbd3cf;cursor:pointer;font:500 14px/1.2 Inter,sans-serif;list-style:none}
.before-x-items summary::-webkit-details-marker{display:none}
.before-x-items summary span{color:var(--cap-accent);font-size:7px;letter-spacing:.12em}
.before-x-items details p{margin:0;padding:0 0 20px 28px;color:#6f7978;font-size:10px;line-height:1.65}
.final-x{min-height:100svh;display:grid;place-items:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.035)}
.final-x-inner{position:relative;z-index:3;width:min(1080px,88vw);text-align:center}
.final-x-inner h2{font-size:clamp(56px,7.8vw,116px)}
.final-x-actions{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:12px}
.final-x-actions a{padding:13px 18px;border:1px solid rgba(159,207,120,.18);border-radius:999px;background:rgba(159,207,120,.045);color:#e3e9e4;text-decoration:none;font-size:10px}
.final-x-actions small{color:#5f6968;font-size:8px}

@media(max-width:980px){
  .cap-section{min-height:240svh}.cap-index{left:14px}.cap-stage{width:76vw}.cap-description{right:20px;width:180px}
  .plans-x-stage{width:94vw}.plans-x-detail{left:20px}.plans-x-cta{right:20px}
  .process-x-track{left:5%;width:48%}.process-x-side{right:5%;width:41%}
}
@media(max-width:720px){
  .cap-section{min-height:240svh}
  .cap-heading{top:11%;width:92vw}.cap-heading h2{font-size:clamp(42px,12vw,60px)}
  .cap-index{left:50%;top:auto;bottom:72px;transform:translateX(-50%);flex-direction:row;width:92vw;justify-content:center;gap:3px}
  .cap-tab{width:auto;grid-template-columns:1fr;padding:8px 9px;text-align:center}.cap-tab span{display:none}.cap-tab strong{font-size:6px}.cap-tab.active{transform:translateY(-3px)}
  .cap-stage{top:54%;width:94vw;height:51vh}.cap-copyblock{width:56%}.cap-copyblock strong{font-size:clamp(24px,8vw,34px)}.cap-panel{right:4%;width:39%}.cap-description{display:none}.cap-final{bottom:13%}
  .plans-x{min-height:300svh}.plans-x-heading{top:10%;width:92vw}.plans-x-heading h2{font-size:clamp(42px,11.5vw,58px)}
  .plans-banner-cta{
    min-height:42px;
    margin-top:16px;
    padding:0 16px;
    font-size:10.5px;
  }
  .plans-x-stage{top:55%;width:96vw;height:58vh;gap:6px}.plan-x{padding:15px 12px;width:21%;height:52%;overflow:hidden}.plan-x.active{width:58%;height:86%}
  .plan-x:not(.active) h3{font-size:13px;writing-mode:vertical-rl;transform:rotate(180deg);margin:14px auto 0}.plan-x:not(.active) .plan-x-price,.plan-x:not(.active) p,.plan-x:not(.active) ul{display:none}
  .plan-x-top em{display:none}.plan-x h3{font-size:24px}.plan-x-price strong{font-size:19px}.plan-x li{font-size:7px}
  .plans-x-detail{left:18px;bottom:18px;width:245px}.plans-x-cta{top:78px;right:16px;font-size:7px}
  .process-x{min-height:270svh}.process-x-heading{left:20px;top:12%}.process-x-heading h2{font-size:clamp(44px,12vw,62px)}
  .process-x-track{left:20px;top:50%;width:45%;gap:20px}.process-step-x{grid-template-columns:32px 1fr;gap:10px}.process-step-x>span{width:32px;height:32px}.process-step-x strong{font-size:14px}.process-step-x p{font-size:7px}.process-x-line{left:15px}
  .process-x-side{right:14px;top:52%;width:43%;padding:18px}.process-x-side strong{font-size:24px}.process-x-side p{font-size:8px}
  .direct-x-inner h2{font-size:clamp(48px,13vw,68px)}.before-x{padding:90px 0}.before-x-inner{grid-template-columns:1fr;gap:42px}.before-x-heading h2{font-size:48px}
  .final-x-inner h2{font-size:clamp(50px,14vw,72px)}
}


/* ==========================================================
   ART DIRECTION PASS — continuity / light / interaction
   ========================================================== */
:root{
  --scene-accent:#9fcf78;
  --scene-pale:#dce9d1;
  --scene-fog:rgba(159,207,120,.05);
  --mx:50%;
  --my:50%;
}

main{
  position:relative;
  isolation:isolate;
}

main > section{
  position:relative;
}

main > section::after{
  content:"";
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  bottom:-1px;
  height:120px;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(7,10,11,.72) 72%,#090d0e 100%);
}

.order-section::before,
.cap-section::before,
.plans-x::before,
.process-x::before,
.direct-x::before,
.before-x::before,
.final-x::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle 240px at var(--mx) var(--my),rgba(159,207,120,.055),transparent 72%);
  opacity:.75;
  transition:opacity .3s ease;
}

.site-header{
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}

.site-header.scrolled{
  background:rgba(9,13,14,.58);
  border-bottom:1px solid rgba(255,255,255,.045);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}

.desktop-nav a{
  position:relative;
  transition:color .28s ease;
}

.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:1px;
  transform:scaleX(0);
  transform-origin:left center;
  background:var(--scene-accent);
  box-shadow:0 0 12px rgba(159,207,120,.16);
  transition:transform .3s ease;
}

.desktop-nav a.active{
  color:#dfe6e1;
}

.desktop-nav a.active::after{
  transform:scaleX(1);
}

.nav-cta{
  transition:transform .28s ease,border-color .28s ease,background .28s ease;
}

.nav-cta:hover{
  transform:translateY(-2px);
  border-color:rgba(159,207,120,.24);
  background:rgba(159,207,120,.055);
}

.cap-window,
.plan-x,
.process-x-side,
.before-x-items details{
  transition:
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

.cap-window:hover,
.process-x-side:hover{
  border-color:rgba(159,207,120,.15);
  box-shadow:0 42px 130px rgba(0,0,0,.36),0 0 70px rgba(159,207,120,.02);
}

.plan-x{
  cursor:pointer;
}

.plan-x:hover{
  border-color:rgba(159,207,120,.13);
}

.plan-x.active{
  transform:scale(1) translateY(-6px);
}

.cap-tab,
.plan-x,
.process-step-x,
.before-x-items summary,
.final-x-actions a,
.direct-x a{
  -webkit-tap-highlight-color:transparent;
}

.cap-tab:focus-visible,
.plan-x:focus-visible,
.final-x-actions a:focus-visible,
.direct-x a:focus-visible{
  outline:1px solid rgba(159,207,120,.55);
  outline-offset:4px;
}

.direct-x{
  overflow:hidden;
}

.direct-x::after{
  background:
    linear-gradient(to bottom,transparent,rgba(7,10,11,.78) 78%,#090d0e 100%);
}

.direct-x-inner{
  position:relative;
  z-index:3;
}

.direct-x-inner::before{
  content:"";
  position:absolute;
  left:50%;
  top:-90px;
  width:1px;
  height:70px;
  background:linear-gradient(to bottom,transparent,rgba(159,207,120,.35));
  transform:translateX(-50%);
}

.direct-x-meta span{
  transform:translateY(0);
  transition:transform .35s ease,border-color .35s ease,color .35s ease;
}

.direct-x-meta span:hover{
  transform:translateY(-4px);
  border-color:rgba(159,207,120,.16);
  color:#cbd4ce;
}

.direct-x a{
  position:relative;
}

.direct-x a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:1px;
  background:var(--scene-accent);
  transform:scaleX(.18);
  transform-origin:left;
  transition:transform .3s ease;
}

.direct-x a:hover::after{
  transform:scaleX(1);
}

.before-x-items details{
  position:relative;
  overflow:hidden;
}

.before-x-items details::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background:var(--scene-accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s ease;
}

.before-x-items details[open]{
  background:linear-gradient(90deg,rgba(159,207,120,.025),transparent 55%);
}

.before-x-items details[open]::before{
  transform:scaleY(1);
}

.before-x-items summary{
  transition:padding-left .3s ease,color .3s ease;
}

.before-x-items details[open] summary{
  padding-left:12px;
  color:#e0e6e2;
}

.final-x{
  min-height:110svh;
}

.final-x::before{
  background:
    radial-gradient(circle 330px at var(--mx) var(--my),rgba(159,207,120,.075),transparent 68%),
    radial-gradient(circle at 50% 55%,rgba(159,207,120,.04),transparent 32%);
}

.final-x-inner{
  transition:transform .4s ease;
}

.final-x-actions a{
  position:relative;
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.final-x-actions a::before{
  content:"";
  position:absolute;
  width:70px;
  height:120px;
  top:-42px;
  left:-95px;
  transform:rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transition:left .65s ease;
}

.final-x-actions a:hover{
  transform:translateY(-3px);
  border-color:rgba(159,207,120,.28);
  box-shadow:0 14px 40px rgba(0,0,0,.22),0 0 26px rgba(159,207,120,.035);
}

.final-x-actions a:hover::before{
  left:130%;
}

footer{
  border-top:1px solid rgba(255,255,255,.04);
  background:#080b0c;
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

@media(max-width:720px){
  .order-section::before,
  .cap-section::before,
  .plans-x::before,
  .process-x::before,
  .direct-x::before,
  .before-x::before,
  .final-x::before{
    opacity:.35;
  }

  main > section::after{
    height:70px;
  }

  .final-x{
    min-height:100svh;
  }
}


/* ==========================================================
   CAPABILITIES + PLANS — composition and timing refinement
   ========================================================== */
.cap-section{
  min-height:240svh;
}

.cap-heading{
  top:8.2%;
}

.cap-index{
  left:3vw;
  gap:10px;
}

.cap-tab{
  width:154px;
  padding:10px 11px;
}

.cap-tab::before{
  content:"";
  position:absolute;
  left:-10px;
  width:2px;
  height:18px;
  border-radius:2px;
  background:var(--cap-accent);
  opacity:0;
  transform:scaleY(.3);
  transition:.3s ease;
}

.cap-tab{
  position:relative;
}

.cap-tab.active::before{
  opacity:.75;
  transform:scaleY(1);
}

.cap-stage{
  left:51.5%;
  top:56.5%;
  width:min(960px,72vw);
  height:min(590px,60vh);
}

.cap-window{
  border-radius:30px;
  background:
    radial-gradient(circle at 75% 34%,rgba(159,207,120,.035),transparent 30%),
    rgba(8,12,13,.88);
}

.cap-canvas{
  background:
    radial-gradient(circle at 72% 38%,rgba(159,207,120,.045),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.008),transparent 44%),
    #0b1011;
}

.cap-description{
  right:3.6vw;
  width:245px;
}

.cap-description strong{
  font-size:20px;
}

.cap-description p{
  font-size:9.5px;
}

.cap-dev-overlay,
.cap-direction-overlay,
.cap-ai-overlay,
.layer-design{
  transition:opacity .18s linear,transform .22s ease;
}

.cap-dev-overlay{
  transform:translateY(5px) scale(.985);
}

.cap-direction-overlay{
  transform:scale(.985);
}

.cap-ai-overlay{
  transform:scale(.96);
}

.cap-dev-overlay[style*="opacity: 1"],
.cap-direction-overlay[style*="opacity: 1"],
.cap-ai-overlay[style*="opacity: 1"]{
  transform:none;
}

.cap-final{
  bottom:7.2%;
}

.plans-x{
  min-height:370svh;
}

.plans-x-heading{
  top:8.2%;
}

.plans-x-stage{
  top:57%;
  width:min(1160px,89vw);
  height:58vh;
  gap:12px;
}

.plan-x{
  --focus:0;
  width:calc(24% + (var(--focus) * 20%));
  height:calc(58% + (var(--focus) * 30%));
  opacity:calc(.42 + (var(--focus) * .58));
  transform:
    translateY(calc(var(--focus) * -7px))
    scale(calc(.92 + (var(--focus) * .08)));
  border-color:rgba(159,207,120,calc(.065 + (var(--focus) * .15)));
  background:
    radial-gradient(circle at 75% 20%,rgba(159,207,120,calc(var(--focus) * .055)),transparent 34%),
    rgba(12,17,18,.86);
  box-shadow:
    0 calc(16px + (var(--focus) * 22px))
    calc(48px + (var(--focus) * 52px))
    rgba(0,0,0,calc(.16 + (var(--focus) * .14))),
    0 0 calc(var(--focus) * 70px) rgba(159,207,120,.025);
  transition:
    width .16s linear,
    height .16s linear,
    opacity .16s linear,
    transform .16s linear,
    border-color .16s linear,
    background .16s linear,
    box-shadow .16s linear;
  overflow:hidden;
}

.plan-x.active{
  width:calc(24% + (var(--focus) * 20%));
  height:calc(58% + (var(--focus) * 30%));
  opacity:calc(.42 + (var(--focus) * .58));
  transform:
    translateY(calc(var(--focus) * -7px))
    scale(calc(.92 + (var(--focus) * .08)));
  border-color:rgba(159,207,120,calc(.065 + (var(--focus) * .15)));
  box-shadow:
    0 calc(16px + (var(--focus) * 22px))
    calc(48px + (var(--focus) * 52px))
    rgba(0,0,0,calc(.16 + (var(--focus) * .14))),
    0 0 calc(var(--focus) * 70px) rgba(159,207,120,.025);
}

.plan-x::after{
  position:absolute;
  right:15px;
  bottom:9px;
  color:rgba(255,255,255,calc(.018 + (var(--focus) * .025)));
  font:600 clamp(74px,8vw,126px)/.8 "Plus Jakarta Sans",sans-serif;
  letter-spacing:-.08em;
  pointer-events:none;
  z-index:0;
}

.plan-x:nth-child(1)::after{content:"01"}
.plan-x:nth-child(2)::after{content:"02"}
.plan-x:nth-child(3)::after{content:"03"}

.plan-x > *{
  position:relative;
  z-index:1;
}

.plan-x p,
.plan-x ul,
.plan-x-price{
  opacity:calc(.52 + (var(--focus) * .48));
}

.plan-x h3{
  font-size:clamp(23px,2.4vw,38px);
}

.plan-x-price strong{
  font-size:clamp(20px,2.1vw,32px);
}

.plans-x-detail{
  left:3.2vw;
  bottom:3.6vh;
  width:340px;
}

.plans-x-detail>strong{
  font-size:20px;
}

.plans-x-cta{
  top:92px;
  right:3.2vw;
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}

.plans-x-cta:hover{
  transform:translateY(-2px);
  border-color:rgba(159,207,120,.28);
  background:rgba(159,207,120,.06);
}

@media(max-width:980px){
  .cap-stage{
    left:52%;
    width:74vw;
  }

  .cap-description{
    right:2vw;
    width:190px;
  }

  .plans-x-stage{
    width:94vw;
  }
}

@media(max-width:720px){
  .cap-section{min-height:240svh}

  .cap-heading{top:10%}

  .cap-stage{
    left:50%;
    top:54%;
    width:94vw;
    height:52vh;
  }

  .cap-tab::before{
    display:none;
  }

  .plans-x{min-height:330svh}

  .plans-x-stage{
    top:55%;
    width:96vw;
    height:58vh;
    gap:6px;
  }

  .plan-x{
    width:calc(18% + (var(--focus) * 48%));
    height:calc(48% + (var(--focus) * 38%));
    padding:14px 11px;
  }

  .plan-x.active{
    width:calc(18% + (var(--focus) * 48%));
    height:calc(48% + (var(--focus) * 38%));
  }

  .plan-x:not(.active){
    min-width:52px;
  }

  .plan-x::after{
    font-size:68px;
  }

  .plans-x-detail{
    left:17px;
    bottom:18px;
    width:235px;
  }
}


/* ==========================================================
   PROCESS + CLOSE — narrative refinement
   ========================================================== */
.master-film{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:0;
  background:#090d0e;
}

.process-x{
  min-height:340svh;
}

.process-x-heading{
  top:11%;
  will-change:transform,opacity;
}

.process-x-track{
  top:52%;
  gap:26px;
}

.process-step-x{
  --step-focus:0;
  opacity:calc(.20 + (var(--step-focus) * .80));
  transform:
    translateX(calc(var(--step-focus) * 10px))
    scale(calc(.985 + (var(--step-focus) * .015)));
  transition:
    opacity .14s linear,
    transform .14s linear;
}

.process-step-x>span{
  color:rgba(255,255,255,calc(.30 + (var(--step-focus) * .45)));
  border-color:rgba(159,207,120,calc(.05 + (var(--step-focus) * .16)));
  box-shadow:0 0 calc(var(--step-focus) * 34px) rgba(159,207,120,.045);
  transition:none;
}

.process-step-x strong{
  color:rgba(220,229,223,calc(.40 + (var(--step-focus) * .60)));
  transition:none;
}

.process-step-x p{
  color:rgba(118,129,127,calc(.48 + (var(--step-focus) * .52)));
  transition:none;
}

.process-step-x.active{
  transform:
    translateX(calc(var(--step-focus) * 10px))
    scale(calc(.985 + (var(--step-focus) * .015)));
}

.process-x-side{
  overflow:hidden;
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:164px;
  background:
    radial-gradient(circle at 50% 24%,rgba(159,207,120,.052),transparent 31%),
    rgba(12,17,18,.82);
}

.process-orbit{
  position:absolute;
  left:50%;
  top:26%;
  width:180px;
  aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--process-angle,0deg));
  transition:transform .18s linear;
}

.process-orbit-ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(159,207,120,.10);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.process-orbit-ring.ring-one{width:92px;height:92px}
.process-orbit-ring.ring-two{width:154px;height:154px;opacity:.58}

.process-orbit-core{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--cap-accent);
  box-shadow:
    0 0 22px rgba(159,207,120,.26),
    0 0 72px rgba(159,207,120,.08);
}

.process-orbit-node{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#53605b;
  border:1px solid rgba(255,255,255,.08);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}

.orbit-node-1{left:50%;top:4%;transform:translateX(-50%)}
.orbit-node-2{right:4%;top:50%;transform:translateY(-50%)}
.orbit-node-3{left:50%;bottom:4%;transform:translateX(-50%)}
.orbit-node-4{left:4%;top:50%;transform:translateY(-50%)}

.process-orbit-node.active{
  background:var(--cap-accent);
  box-shadow:0 0 20px rgba(159,207,120,.28);
  transform:scale(1.38);
}

.orbit-node-1.active{transform:translateX(-50%) scale(1.38)}
.orbit-node-2.active{transform:translateY(-50%) scale(1.38)}
.orbit-node-3.active{transform:translateX(-50%) scale(1.38)}
.orbit-node-4.active{transform:translateY(-50%) scale(1.38)}

.process-x-side small,
.process-x-side strong,
.process-x-side p{
  position:relative;
  z-index:2;
}

.process-x-side strong{
  max-width:360px;
}

.process-x-side p{
  max-width:390px;
}

.direct-x{
  min-height:112svh;
}

.direct-x-inner{
  transform:translateY(-1vh);
}

.before-x{
  padding:145px 0 155px;
}

.final-x{
  min-height:118svh;
}

.final-x-status{
  width:max-content;
  margin:0 auto 28px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#6b7573;
  font-size:7px;
  font-weight:700;
  letter-spacing:.15em;
}

.final-x-status span{
  color:#cbd4ce;
  font:600 12px/1 "Plus Jakarta Sans",sans-serif;
}

.final-x-status i{
  width:72px;
  height:1px;
  background:linear-gradient(90deg,var(--cap-accent) 100%,rgba(255,255,255,.06) 0);
  box-shadow:0 0 18px rgba(159,207,120,.12);
}

.final-x-inner h2{
  text-shadow:
    0 20px 60px rgba(0,0,0,.44),
    0 0 40px rgba(159,207,120,.045);
}

.final-x-actions{
  margin-top:44px;
}

@media(max-width:720px){
  .process-x{
    min-height:300svh;
  }

  .process-x-side{
    min-height:300px;
    padding:145px 18px 18px;
  }

  .process-orbit{
    top:25%;
    width:145px;
  }

  .process-orbit-ring.ring-one{width:76px;height:76px}
  .process-orbit-ring.ring-two{width:126px;height:126px}

  .direct-x{
    min-height:100svh;
  }

  .before-x{
    padding:100px 0 110px;
  }

  .final-x{
    min-height:104svh;
  }

  .final-x-status{
    margin-bottom:22px;
  }
}


/* ==========================================================
   MASTER FILM — full-page scroll scrub
   ========================================================== */
.master-film{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  background:#080c0d;
  transition:opacity .7s ease;
}

.master-film.ready{
  opacity:1;
}

.master-film video{
  position:absolute;
  inset:-3%;
  width:106%;
  height:106%;
  object-fit:cover;
  object-position:center center;
  opacity:var(--film-opacity,.30);
  filter:
    brightness(.58)
    contrast(1.08)
    saturate(.86);
  transform:scale(1.015);
  will-change:opacity,transform;
}

.master-film::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 44%,transparent 0%,rgba(5,8,9,.08) 42%,rgba(5,8,9,.42) 100%),
    linear-gradient(180deg,rgba(6,9,10,.18),rgba(6,9,10,.05) 44%,rgba(6,9,10,.30));
}

main{
  position:relative;
  z-index:2;
}

footer{
  position:relative;
  z-index:2;
}

.hero-v3{
  background:transparent;
}

.hero-v3-sticky{
  background:
    radial-gradient(circle at 76% 34%,rgba(159,207,120,.055),transparent 28%),
    radial-gradient(circle at 19% 76%,rgba(80,117,108,.035),transparent 30%),
    linear-gradient(180deg,rgba(11,15,16,.74) 0%,rgba(9,12,13,.76) 100%);
}

.order-section,
.cap-section,
.plans-x,
.process-x{
  background:
    radial-gradient(circle at 55% 45%,rgba(159,207,120,.028),transparent 30%),
    linear-gradient(180deg,rgba(9,13,14,.80),rgba(11,16,16,.70) 48%,rgba(9,13,14,.82));
}

.direct-x,
.before-x,
.final-x{
  background:
    linear-gradient(180deg,rgba(9,13,14,.80),rgba(9,13,14,.72));
}

.cap-window,
.plan-x,
.process-x-side{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.final-x::before{
  background:
    radial-gradient(circle 330px at var(--mx) var(--my),rgba(159,207,120,.055),transparent 68%),
    radial-gradient(circle at 50% 55%,rgba(159,207,120,.025),transparent 32%);
}

@media(max-width:720px){
  .master-film video{
    inset:-7%;
    width:114%;
    height:114%;
    opacity:var(--film-opacity,.23);
    filter:brightness(.50) contrast(1.05) saturate(.82);
  }

  .order-section,
  .cap-section,
  .plans-x,
  .process-x{
    background:
      linear-gradient(180deg,rgba(9,13,14,.86),rgba(10,15,15,.76) 48%,rgba(9,13,14,.88));
  }
}

@media(prefers-reduced-motion:reduce){
  .master-film video{
    opacity:.20;
  }
}


/* ==========================================================
   CINEMATIC PASS — video-first / compact UI / kinetic copy
   ========================================================== */
.master-film video{
  inset:-4%;
  width:108%;
  height:108%;
  opacity:var(--film-opacity,.64);
  filter:
    brightness(var(--film-brightness,.82))
    contrast(1.06)
    saturate(.94);
  transform:
    translate3d(0,var(--film-y,0px),0)
    scale(var(--film-scale,1.035));
}

.master-film::after{
  background:
    radial-gradient(circle at 50% 48%,transparent 0%,transparent 46%,rgba(5,8,9,.12) 78%,rgba(5,8,9,.23) 100%),
    linear-gradient(180deg,rgba(6,9,10,.07),transparent 38%,rgba(6,9,10,.09));
}

main > section::after{
  opacity:.16;
  height:70px;
}

.order-section,
.cap-section,
.plans-x,
.process-x{
  background:
    linear-gradient(180deg,rgba(9,13,14,.24),rgba(9,13,14,.12) 48%,rgba(9,13,14,.26));
}

.direct-x,
.before-x,
.final-x{
  background:linear-gradient(180deg,rgba(9,13,14,.20),rgba(9,13,14,.10));
}

.hero-v3-sticky{
  background:
    radial-gradient(circle at 76% 34%,rgba(159,207,120,.025),transparent 26%),
    linear-gradient(180deg,rgba(9,12,13,.26),rgba(9,12,13,.18));
}

.hero-v3-ui{
  background:
    radial-gradient(circle at 72% 34%,rgba(159,207,120,.035),transparent 25%),
    linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),
    rgba(8,12,13,.42);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.hero-v3-bg,
.order-grid,
.cap-grid,
.plans-x-grid,
.process-x-grid,
.final-x-grid{
  opacity:.10;
}

/* Channel system becomes annotation, not a wall */
.order-system{
  width:min(760px,68vw);
  height:min(460px,49vh);
  top:59%;
}

.order-core{
  width:142px;
  background:
    radial-gradient(circle at 45% 38%,rgba(159,207,120,.10),transparent 46%),
    rgba(10,15,15,.48);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.order-core strong{font-size:22px}
.order-core em{font-size:6px}

.order-node{
  min-width:105px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(13,18,19,.38);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 10px 30px rgba(0,0,0,.11);
}

.order-node strong{font-size:8px}
.order-node small{font-size:5px}
.order-result{bottom:7.5%}
.order-result p{font-size:clamp(23px,2.5vw,34px)}
.order-result span{font-size:9px}

/* Capabilities becomes a compact control surface */
.cap-stage{
  left:54%;
  top:58%;
  width:min(720px,58vw);
  height:min(430px,46vh);
}

.cap-window{
  border-radius:22px;
  background:
    radial-gradient(circle at 75% 34%,rgba(159,207,120,.025),transparent 30%),
    rgba(8,12,13,.38);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.cap-browserbar{height:38px}
.cap-canvas{height:calc(100% - 38px)}
.cap-copyblock strong{font-size:clamp(25px,2.8vw,44px)}
.cap-copyblock p{font-size:8px}
.cap-panel{border-radius:15px}
.cap-tab{width:132px;padding:8px 9px}
.cap-description{width:205px}
.cap-description strong{font-size:17px}
.cap-description p{font-size:8px}

/* Plans as compact selectable modules */
.plans-x-stage{
  top:60%;
  width:min(900px,73vw);
  height:46vh;
  gap:9px;
}

.plan-x{
  width:calc(22% + (var(--focus) * 15%));
  height:calc(48% + (var(--focus) * 26%));
  padding:16px 15px 14px;
  border-radius:17px;
  background:
    radial-gradient(circle at 75% 20%,rgba(159,207,120,calc(var(--focus) * .04)),transparent 34%),
    rgba(12,17,18,.40);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.plan-x.active{
  width:calc(22% + (var(--focus) * 15%));
  height:calc(48% + (var(--focus) * 26%));
}

.plan-x h3{
  margin-top:15px;
  font-size:clamp(19px,1.9vw,29px);
}

.plan-x-price{margin-top:9px}
.plan-x-price strong{font-size:clamp(17px,1.7vw,24px)}
.plan-x p{margin-top:10px;font-size:8px}
.plan-x ul{margin-top:12px;gap:5px}
.plan-x li{font-size:7px}
.plan-x::after{font-size:clamp(56px,6vw,90px)}
.plans-x-detail{width:295px}
.plans-x-detail>strong{font-size:17px}
.plans-x-detail>p{font-size:8px}

/* Process: timeline + smaller live module */
.process-x-track{
  width:45%;
  gap:20px;
}

.process-x-side{
  right:8%;
  width:29%;
  min-height:250px;
  padding:122px 20px 20px;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 24%,rgba(159,207,120,.035),transparent 31%),
    rgba(12,17,18,.34);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.process-orbit{
  width:135px;
  top:25%;
}

.process-orbit-ring.ring-one{width:70px;height:70px}
.process-orbit-ring.ring-two{width:116px;height:116px}
.process-x-side strong{font-size:clamp(22px,2.4vw,34px)}
.process-x-side p{font-size:8px}

/* Text floats over film instead of sitting on opaque blocks */
.order-copy h2,
.cap-heading h2,
.plans-x-heading h2,
.process-x-heading h2,
.direct-x-inner h2,
.before-x-heading h2,
.final-x-inner h2{
  text-shadow:
    0 10px 28px rgba(0,0,0,.62),
    0 2px 6px rgba(0,0,0,.56);
}

.kinetic-copy{
  will-change:transform,opacity,filter;
  transform:
    translate3d(0,var(--kinetic-y,0px),0)
    scale(var(--kinetic-scale,1));
  opacity:var(--kinetic-opacity,1);
  filter:blur(var(--kinetic-blur,0px));
}

.kinetic-drift{
  will-change:transform,opacity;
  transform:translate3d(var(--kinetic-x,0px),var(--kinetic-y,0px),0);
  opacity:var(--kinetic-opacity,1);
}

@media(max-width:980px){
  .cap-stage{left:52%;width:66vw}
  .plans-x-stage{width:84vw}
  .process-x-side{right:5%;width:34%}
}

@media(max-width:720px){
  .master-film video{
    inset:-8%;
    width:116%;
    height:116%;
    opacity:var(--film-opacity,.48);
    filter:
      brightness(var(--film-brightness,.72))
      contrast(1.04)
      saturate(.90);
  }

  .master-film::after{
    background:
      radial-gradient(circle at 50% 48%,transparent 0%,transparent 42%,rgba(5,8,9,.10) 75%,rgba(5,8,9,.18) 100%),
      linear-gradient(180deg,rgba(6,9,10,.08),transparent 42%,rgba(6,9,10,.10));
  }

  .order-section,
  .cap-section,
  .plans-x,
  .process-x{
    background:linear-gradient(180deg,rgba(9,13,14,.31),rgba(9,13,14,.17) 50%,rgba(9,13,14,.33));
  }

  .hero-v3-sticky{
    background:linear-gradient(180deg,rgba(9,12,13,.33),rgba(9,12,13,.21));
  }

  .order-system{
    width:88vw;
    height:42vh;
  }

  .order-node{
    min-width:88px;
    padding:7px 8px;
  }

  .order-core{width:122px}

  .cap-stage{
    left:50%;
    top:56%;
    width:88vw;
    height:44vh;
  }

  .cap-index{bottom:60px}
  .cap-tab{padding:7px 8px}

  .plans-x-stage{
    top:57%;
    width:90vw;
    height:49vh;
  }

  .plan-x{
    width:calc(14% + (var(--focus) * 54%));
    height:calc(42% + (var(--focus) * 34%));
    padding:12px 9px;
  }

  .plan-x.active{
    width:calc(14% + (var(--focus) * 54%));
    height:calc(42% + (var(--focus) * 34%));
  }

  .process-x-track{
    left:16px;
    width:44%;
  }

  .process-x-side{
    right:12px;
    width:44%;
    min-height:255px;
    padding:125px 14px 15px;
  }

  .process-orbit{width:120px}
}


/* ==========================================================
   CAPABILITIES — premium editorial overlay
   ========================================================== */
.cap-editorial{
  min-height:240svh;
  background:linear-gradient(180deg,rgba(9,13,14,.18),rgba(9,13,14,.08) 50%,rgba(9,13,14,.20));
}

.cap-editorial .cap-sticky{
  background:transparent;
}

.cap-editorial .cap-heading{
  left:6.5vw;
  top:11vh;
  width:min(560px,44vw);
  transform:none;
  text-align:left;
  opacity:1!important;
  z-index:12;
}

.cap-editorial .cap-heading>p{
  margin-bottom:12px;
  color:#93a09b;
  opacity:1;
}

.cap-editorial .cap-heading h2{
  font-size:clamp(48px,6.1vw,92px);
  color:#f1f4f2;
  opacity:1!important;
  filter:none!important;
  text-shadow:
    0 10px 34px rgba(0,0,0,.76),
    0 2px 8px rgba(0,0,0,.64);
}

.cap-editorial .cap-heading h2 span{
  color:#dce9d1;
  opacity:1;
}

.cap-editorial .cap-index{
  left:6.5vw;
  top:auto;
  bottom:9vh;
  transform:none;
  z-index:13;
  gap:6px;
}

.cap-editorial .cap-tab{
  min-height:44px;
  width:138px;
  padding:8px 9px;
  border-radius:9px;
  background:rgba(8,12,13,.18);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.cap-editorial .cap-tab.active{
  background:rgba(10,16,14,.46);
  border-color:rgba(159,207,120,.25);
  transform:translateX(6px);
  color:#f0f4f1;
}

.cap-editorial .cap-stage.cap-scene{
  position:absolute;
  left:57%;
  top:56%;
  width:min(940px,70vw);
  height:min(600px,66vh);
  transform:translate(-50%,-50%);
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  pointer-events:none;
  z-index:4;
}

.cap-scene::before{
  content:"";
  position:absolute;
  inset:6% 4%;
  border:1px solid rgba(255,255,255,.035);
  border-radius:28px;
  opacity:.32;
}

.cap-layer{
  position:absolute;
  inset:0;
  opacity:var(--layer-opacity,0);
  transform:scale(calc(.985 + (var(--layer-depth,0) * .015)));
  transition:opacity .10s linear,transform .16s ease;
  will-change:opacity,transform;
}

.cap-layer-design .design-vline,
.cap-layer-design .design-hline{
  position:absolute;
  background:linear-gradient(180deg,transparent,rgba(159,207,120,.34),transparent);
  box-shadow:0 0 18px rgba(159,207,120,.045);
}

.cap-layer-design .design-vline{
  top:12%;
  bottom:10%;
  width:1px;
}
.cap-layer-design .line-a{left:29%}
.cap-layer-design .line-b{right:31%}

.cap-layer-design .design-hline{
  left:12%;
  right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(159,207,120,.28),transparent);
}
.cap-layer-design .line-c{top:33%}
.cap-layer-design .line-d{bottom:31%}

.design-block{
  position:absolute;
  border:1px solid rgba(220,233,209,.22);
  background:rgba(220,233,209,.018);
}
.design-block.block-a{
  left:18%;
  top:24%;
  width:24%;
  height:17%;
}
.design-block.block-b{
  right:18%;
  bottom:20%;
  width:31%;
  height:22%;
}
.design-tag{
  position:absolute;
  right:10%;
  top:17%;
  padding:10px 12px;
  border:1px solid rgba(159,207,120,.14);
  border-radius:10px;
  background:rgba(8,12,13,.42);
  color:#d7e8cc;
  font-size:13px;
  line-height:1;
  font-weight:700;
  letter-spacing:.10em;
  text-shadow:0 3px 16px rgba(0,0,0,.72);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.dev-map{
  position:absolute;
  inset:15% 13%;
  width:74%;
  height:70%;
  overflow:visible;
}
.dev-map path{
  fill:none;
  stroke:rgba(159,207,120,.38);
  stroke-width:.55;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 8px rgba(159,207,120,.10));
}
.cap-layer-dev .dev-dot{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b9dba0;
  box-shadow:0 0 20px rgba(159,207,120,.38);
}
.cap-layer-dev .dot-a{left:20%;top:35%}
.cap-layer-dev .dot-b{left:44%;top:52%}
.cap-layer-dev .dot-c{right:27%;top:31%}
.cap-layer-dev .dot-d{right:15%;bottom:26%}
.dev-label{
  position:absolute;
  left:13%;
  bottom:12%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  max-width:320px;
  padding:11px 13px 12px;
  border:1px solid rgba(159,207,120,.14);
  border-radius:11px;
  background:rgba(8,12,13,.46);
  text-shadow:0 3px 16px rgba(0,0,0,.72);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.dev-label span{
  color:#c9e5b6;
  font-size:13px;
  line-height:1;
  font-weight:700;
  letter-spacing:.10em;
}
.dev-label strong{
  color:#d4dcd7;
  font-size:12px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:.01em;
}

.direction-crop{
  position:absolute;
  border:1px solid rgba(220,233,209,.24);
  background:rgba(10,14,15,.025);
}
.direction-crop.crop-a{
  left:20%;
  top:18%;
  width:37%;
  height:54%;
  transform:rotate(-3deg);
}
.direction-crop.crop-b{
  right:16%;
  top:28%;
  width:32%;
  height:44%;
  transform:rotate(4deg);
}
.direction-axis{
  position:absolute;
  background:rgba(159,207,120,.26);
}
.direction-axis.axis-x{
  left:12%;
  right:10%;
  top:50%;
  height:1px;
}
.direction-axis.axis-y{
  top:12%;
  bottom:10%;
  left:50%;
  width:1px;
}
.direction-mark{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:#edf3ec;
  font:600 clamp(20px,2.4vw,34px)/1 "Plus Jakarta Sans",sans-serif;
  letter-spacing:-.045em;
  text-shadow:0 4px 18px rgba(0,0,0,.65);
}

.ai-ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(159,207,120,.22);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 34px rgba(159,207,120,.025);
}
.ai-ring-a{width:170px;height:170px}
.ai-ring-b{width:300px;height:300px;opacity:.70}
.ai-ring-c{width:430px;height:430px;opacity:.32}
.ai-point{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#a7d380;
  box-shadow:0 0 20px rgba(159,207,120,.40);
}
.ai-point.point-a{left:31%;top:29%}
.ai-point.point-b{right:27%;top:34%}
.ai-point.point-c{right:36%;bottom:21%}
.ai-center{
  position:absolute;
  left:50%;
  top:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:112px;
  height:112px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(159,207,120,.13),rgba(8,12,13,.10) 56%,transparent 72%);
}
.ai-center b{
  color:#edf4eb;
  font:600 27px/1 "Plus Jakarta Sans",sans-serif;
}
.ai-center small{
  margin-top:6px;
  color:#8ba084;
  font-size:6px;
  letter-spacing:.14em;
}

.cap-scene-crosshair{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  transform:translate(-50%,-50%);
  opacity:.62;
}
.cap-scene-crosshair i,
.cap-scene-crosshair span{
  position:absolute;
  background:#b3d794;
}
.cap-scene-crosshair i{left:50%;top:0;bottom:0;width:1px}
.cap-scene-crosshair span{top:50%;left:0;right:0;height:1px}

.cap-editorial .cap-description.cap-microcard{
  right:6vw;
  top:auto;
  bottom:10vh;
  width:220px;
  padding:15px 16px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(8,12,13,.48);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-align:left;
  transform:none;
  opacity:1!important;
  box-shadow:0 16px 48px rgba(0,0,0,.18);
  transition:transform .20s ease,border-color .20s ease;
}

.cap-editorial .cap-description small{
  color:#9fcf78;
  font-size:7px;
}
.cap-editorial .cap-description strong{
  margin-top:7px;
  color:#f0f4f1;
  font-size:18px;
  line-height:1.06;
}
.cap-editorial .cap-description p{
  margin-top:8px;
  color:#aab5af;
  font-size:8px;
  line-height:1.45;
}

.cap-editorial .cap-progress{
  right:6vw;
  bottom:4vh;
}

.cap-editorial .cap-final{
  bottom:6.5vh;
}
.cap-editorial .cap-final span,
.cap-editorial .cap-final strong{
  text-shadow:0 6px 20px rgba(0,0,0,.70);
}

@media(max-width:980px){
  .cap-editorial .cap-heading{
    width:54vw;
  }

  .cap-editorial .cap-stage.cap-scene{
    left:56%;
    width:76vw;
  }

  .cap-editorial .cap-description.cap-microcard{
    right:3.5vw;
  }
}

@media(max-width:720px){
  .cap-editorial{
    min-height:240svh;
  }

  .cap-editorial .cap-heading{
    left:18px;
    top:11vh;
    width:88vw;
  }

  .cap-editorial .cap-heading h2{
    font-size:clamp(45px,13vw,64px);
  }

  .cap-editorial .cap-stage.cap-scene{
    left:50%;
    top:55%;
    width:96vw;
    height:48vh;
  }

  .cap-editorial .cap-index{
    left:16px;
    bottom:8vh;
    flex-direction:row;
    gap:4px;
  }

  .cap-editorial .cap-tab{
    width:auto;
    min-width:0;
    padding:7px 8px;
    grid-template-columns:auto;
  }

  .cap-editorial .cap-tab strong{
    display:block;
    font-size:8px;
    letter-spacing:.10em;
  }

  .cap-editorial .cap-tab span{
    display:none;
  }

  .cap-editorial .cap-description.cap-microcard{
    right:14px;
    bottom:14vh;
    width:185px;
    padding:12px 13px 13px;
  }

  .cap-editorial .cap-description strong{
    font-size:15px;
  }

  .cap-editorial .cap-progress{
    right:14px;
    bottom:4vh;
  }

  .ai-ring-a{width:120px;height:120px}
  .ai-ring-b{width:220px;height:220px}
  .ai-ring-c{width:310px;height:310px}

  .cap-editorial .cap-final{
    bottom:6vh;
  }
}


/* ==========================================================
   FAQ + FINAL CTA — clarity / interaction pass
   ========================================================== */
.before-x,
.final-x{
  background:
    radial-gradient(circle at 50% 22%,rgba(159,207,120,.035),transparent 34%),
    linear-gradient(180deg,rgba(9,13,14,.90),rgba(9,13,14,.84));
}

.before-x-heading > p,
.final-x-inner > p{
  color:#9ba7a2;
  font-size:9px;
}

.before-x-heading h2,
.final-x-inner h2{
  opacity:1 !important;
  filter:none !important;
  color:#f2f5f3;
  text-shadow:
    0 16px 44px rgba(0,0,0,.56),
    0 0 28px rgba(159,207,120,.04);
}

.before-x-heading h2 span,
.final-x-inner h2 span{
  color:#dce9d1;
}

.before-x-items{
  border-top-color:rgba(255,255,255,.12);
}

.before-x-items details{
  position:relative;
  border-bottom-color:rgba(255,255,255,.10);
  border-radius:14px;
  transition:
    background .24s ease,
    border-color .24s ease,
    transform .24s var(--ease),
    box-shadow .24s ease;
}

.before-x-items details::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(90deg,rgba(159,207,120,.055),transparent 62%);
  transition:opacity .24s ease;
}

.before-x-items details:hover,
.before-x-items details:focus-within,
.before-x-items details[open]{
  border-color:rgba(159,207,120,.20);
  background:rgba(255,255,255,.025);
  transform:translateX(4px);
  box-shadow:inset 3px 0 0 rgba(159,207,120,.44);
}

.before-x-items details:hover::before,
.before-x-items details:focus-within::before,
.before-x-items details[open]::before{
  opacity:1;
}

.before-x-items summary{
  position:relative;
  z-index:1;
  padding:23px 46px 23px 14px;
  color:#e1e7e3;
  font-size:15px;
  font-weight:600;
  transition:color .2s ease;
}

.before-x-items summary::after{
  content:"+";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#9fcf78;
  font-size:22px;
  font-weight:400;
  line-height:1;
  transition:transform .22s ease,color .22s ease;
}

.before-x-items details[open] summary::after{
  transform:translateY(-50%) rotate(45deg);
  color:#dce9d1;
}

.before-x-items summary span{
  min-width:20px;
  color:#a9d783;
  font-size:8px;
}

.before-x-items details p{
  position:relative;
  z-index:1;
  max-width:650px;
  margin:0;
  padding:0 46px 24px 48px;
  color:#aab5b0;
  font-size:12.5px;
  line-height:1.7;
}

.final-x-inner{
  transition:transform .24s var(--ease);
}

.final-x-actions{
  gap:14px;
}

.final-x-actions a{
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-color:rgba(159,207,120,.34);
  background:
    linear-gradient(180deg,rgba(159,207,120,.16),rgba(159,207,120,.08));
  color:#f1f5f2;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 44px rgba(0,0,0,.22);
}

.final-x-actions a:hover,
.final-x-actions a:focus-visible{
  transform:translateY(-4px) scale(1.015);
  border-color:rgba(159,207,120,.56);
  background:
    linear-gradient(180deg,rgba(159,207,120,.23),rgba(159,207,120,.11));
  box-shadow:
    0 20px 52px rgba(0,0,0,.30),
    0 0 34px rgba(159,207,120,.08);
  outline:none;
}

.final-x-actions small{
  color:#929d98;
  font-size:10px;
}

footer{
  background:#080b0c;
}

.footer-grid{
  color:#949d99;
  font-size:12px;
}

.footer-grid strong{
  color:#eef2ef;
}

.footer-grid > div:first-child span{
  color:#aab3af;
}

.footer-links a{
  color:#aeb7b2;
  transition:color .2s ease,transform .2s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible{
  color:#e9efe9;
  transform:translateY(-2px);
  outline:none;
}

@media(max-width:720px){
  .before-x-heading > p,
  .final-x-inner > p{
    font-size:8.5px;
  }

  .before-x-items summary{
    padding:21px 44px 21px 12px;
    font-size:14px;
    line-height:1.35;
  }

  .before-x-items details p{
    padding:0 16px 22px 42px;
    font-size:12px;
  }

  .before-x-items details:hover,
  .before-x-items details:focus-within,
  .before-x-items details[open]{
    transform:none;
  }

  .final-x-actions a{
    min-height:54px;
    padding:0 22px;
    font-size:12px;
  }

  .footer-grid{
    font-size:11px;
  }
}


/* ==========================================================
   CLOSE ZONE — unified translucent surface
   ========================================================== */
.direct-x,
.before-x,
.final-x{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 52% 18%,rgba(159,207,120,.045),transparent 34%),
    linear-gradient(180deg,rgba(11,16,16,.72),rgba(9,13,14,.62));
}

.direct-x::before,
.before-x::before,
.final-x::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008)),
    rgba(8,12,13,.18);
  backdrop-filter:blur(12px) saturate(108%);
  -webkit-backdrop-filter:blur(12px) saturate(108%);
}

.direct-x{
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:0;
}

.before-x{
  border-top:0;
  border-bottom:0;
}

.final-x{
  border-top:0;
}

.direct-x::after,
.before-x::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:min(980px,82vw);
  height:1px;
  transform:translateX(-50%);
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.055) 18%,rgba(159,207,120,.10) 50%,rgba(255,255,255,.055) 82%,transparent);
  opacity:.72;
  pointer-events:none;
}

.before-x-inner,
.direct-x-inner,
.final-x-inner{
  position:relative;
  z-index:2;
}

@media(max-width:720px){
  .direct-x,
  .before-x,
  .final-x{
    background:
      radial-gradient(circle at 50% 16%,rgba(159,207,120,.04),transparent 38%),
      linear-gradient(180deg,rgba(11,16,16,.80),rgba(9,13,14,.72));
  }

  .direct-x::before,
  .before-x::before,
  .final-x::before{
    backdrop-filter:blur(9px) saturate(104%);
    -webkit-backdrop-filter:blur(9px) saturate(104%);
  }

  .direct-x::after,
  .before-x::after{
    width:88vw;
    opacity:.58;
  }
}


/* ==========================================================
   CLOSE ZONE — one continuous translucent backdrop
   ========================================================== */
.close-zone{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 14%,rgba(159,207,120,.04),transparent 34%),
    linear-gradient(180deg,rgba(9,13,14,.62),rgba(9,13,14,.54));
  border-top:1px solid rgba(255,255,255,.045);
}

.close-zone::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),
    rgba(8,12,13,.14);
  backdrop-filter:blur(12px) saturate(108%);
  -webkit-backdrop-filter:blur(12px) saturate(108%);
}

.close-zone > .direct-x,
.close-zone > .before-x,
.close-zone > .final-x{
  position:relative;
  z-index:1;
  background:transparent !important;
  border-top:0 !important;
}

.close-zone > .direct-x::before,
.close-zone > .before-x::before,
.close-zone > .final-x::before{
  display:none !important;
}

.close-zone > .direct-x::after,
.close-zone > .before-x::after{
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.045) 18%,rgba(159,207,120,.08) 50%,rgba(255,255,255,.045) 82%,transparent);
  opacity:.46;
}

.close-zone > .final-x{
  overflow:hidden;
}

@media(max-width:720px){
  .close-zone{
    background:
      radial-gradient(circle at 50% 12%,rgba(159,207,120,.035),transparent 38%),
      linear-gradient(180deg,rgba(9,13,14,.70),rgba(9,13,14,.64));
  }

  .close-zone::before{
    backdrop-filter:blur(9px) saturate(104%);
    -webkit-backdrop-filter:blur(9px) saturate(104%);
  }
}


/* ==========================================================
   GLOBAL READABILITY — larger body copy, titles unchanged
   ========================================================== */

/* Eyebrows / section labels */
.order-copy > p,
.cap-heading > p,
.plans-x-heading > p,
.process-x-heading > p,
.direct-x-inner > p:first-child,
.before-x-heading > p,
.final-x-inner > p{
  font-size:10.5px;
  color:#919c98;
}

/* Channel system */
.order-core small{
  font-size:9px;
}
.order-core em{
  font-size:10.5px;
  line-height:1.45;
}
.order-node{
  min-width:154px;
  padding:14px 16px;
}
.order-node small{
  font-size:8.5px;
}
.order-node strong{
  font-size:13px;
}
.order-result span{
  font-size:13px;
  line-height:1.55;
}
.order-progress,
.cap-progress,
.plans-x-counter,
.process-x-counter{
  font-size:9px;
}
.order-progress > span,
.cap-progress > span,
.plans-x-counter > span,
.process-x-counter > span{
  font-size:14px;
}

/* Capabilities */
.cap-tab span{
  font-size:8.5px;
}
.cap-tab strong{
  font-size:10.5px;
}
.cap-description small,
.cap-editorial .cap-description small{
  font-size:9px;
}
.cap-description strong,
.cap-editorial .cap-description strong{
  font-size:20px;
}
.cap-description p,
.cap-editorial .cap-description p{
  font-size:12px;
  line-height:1.6;
}
.cap-final span{
  font-size:11px;
}

/* Plans */
.plan-x-top{
  font-size:9.5px;
}
.plan-x-price small{
  font-size:10.5px;
}
.plan-x p{
  font-size:12.5px;
  line-height:1.62;
}
.plan-x ul{
  gap:9px;
}
.plan-x li{
  font-size:11.5px;
  line-height:1.45;
}
.plans-x-detail{
  width:360px;
}
.plans-x-detail > span{
  font-size:9.5px;
}
.plans-x-detail > strong{
  font-size:20px;
}
.plans-x-detail > p{
  font-size:12.5px;
  line-height:1.6;
}
.plans-x-cta{
  padding:13px 18px;
  font-size:11.5px;
}

/* Process */
.process-step-x > span{
  font-size:10px;
}
.process-step-x strong{
  font-size:20px;
}
.process-step-x p{
  margin-top:7px;
  font-size:12.5px;
  line-height:1.5;
}
.process-x-side small{
  font-size:9px;
}
.process-x-side p{
  font-size:13px;
  line-height:1.65;
}

/* Direct / FAQ / close */
.direct-x-meta span{
  padding:10px 14px;
  font-size:11px;
}
.direct-x-copy{
  max-width:620px;
  font-size:14px;
  line-height:1.75;
}
.direct-x a{
  font-size:12.5px;
}
.before-x-items summary{
  font-size:16px;
}
.before-x-items summary span{
  font-size:9px;
}
.before-x-items details p{
  font-size:14px;
  line-height:1.72;
}
.final-x-actions a{
  font-size:13.5px;
}
.final-x-actions small{
  font-size:12px;
}
.footer-grid{
  font-size:13px;
}

/* Preserve comfortable sizing on tablets and phones */
@media(max-width:980px){
  .order-node strong{font-size:12.5px}
  .plan-x p{font-size:12px}
  .plan-x li{font-size:11px}
  .process-step-x p{font-size:12px}
}

@media(max-width:720px){
  .order-copy > p,
  .cap-heading > p,
  .plans-x-heading > p,
  .process-x-heading > p,
  .direct-x-inner > p:first-child,
  .before-x-heading > p,
  .final-x-inner > p{
    font-size:9.5px;
  }

  .order-node{
    min-width:118px;
    padding:11px 12px;
  }
  .order-node small{font-size:7.5px}
  .order-node strong{font-size:10.5px}
  .order-core small{font-size:8px}
  .order-core em{font-size:9px}
  .order-result span{font-size:11.5px}

  .cap-tab strong{font-size:9px}
  .cap-description p,
  .cap-editorial .cap-description p{
    font-size:11px;
  }

  .plan-x-top{font-size:8.5px}
  .plan-x-price small{font-size:9px}
  .plan-x p{font-size:11.5px}
  .plan-x li{font-size:10.5px}
  .plans-x-detail > span{font-size:8.5px}
  .plans-x-detail > p{font-size:11.5px}
  .plans-x-cta{font-size:10.5px}

  .process-step-x > span{font-size:9px}
  .process-step-x strong{font-size:16px}
  .process-step-x p{font-size:10.5px}
  .process-x-side small{font-size:8px}
  .process-x-side p{font-size:11px}

  .direct-x-meta span{font-size:10px}
  .direct-x-copy{font-size:13px}
  .direct-x a{font-size:11.5px}
  .before-x-items summary{font-size:15px}
  .before-x-items details p{font-size:13px}
  .final-x-actions a{font-size:12.5px}
  .final-x-actions small{font-size:11px}
  .footer-grid{font-size:12px}
}

/* ==========================================================
   CAPABILITIES — clean exclusive states
   ========================================================== */
.cap-editorial .cap-layer{
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,transform .28s ease;
}

.cap-editorial .cap-layer.active{
  opacity:.78;
  visibility:visible;
  transform:scale(1);
}

.cap-editorial .cap-layer-design.active{opacity:.62}
.cap-editorial .cap-layer-dev.active{opacity:.58}
.cap-editorial .cap-layer-direction.active{opacity:.54}
.cap-editorial .cap-layer-ai.active{opacity:.50}

.cap-editorial .direction-mark{
  font-size:clamp(17px,2vw,28px);
  opacity:.76;
}

.cap-editorial .ai-center b{
  font-size:24px;
}

.cap-editorial .cap-description.cap-microcard{
  width:240px;
  padding:16px 17px 17px;
  background:rgba(8,12,13,.58);
  border-color:rgba(255,255,255,.09);
}

.cap-editorial .cap-description small{font-size:9px}
.cap-editorial .cap-description strong{
  margin-top:8px;
  font-size:20px;
  line-height:1.1;
}
.cap-editorial .cap-description p{
  margin-top:8px;
  font-size:12px;
  line-height:1.55;
}

@media(max-width:720px){
  .cap-editorial .cap-description.cap-microcard{
    left:18px;
    right:18px;
    bottom:14vh;
    width:auto;
  }

  .cap-editorial .cap-description strong{font-size:17px}
  .cap-editorial .cap-description p{font-size:11.5px}

  .cap-editorial .direction-mark{
    font-size:18px;
  }

  .cap-editorial .ai-center b{
    font-size:22px;
  }
}


/* ==========================================================
   CLOSE ZONE — one sticky scroll / three stages
   ========================================================== */
.close-zone{
  position:relative;
  min-height:300svh;
  isolation:isolate;
  background:
    radial-gradient(circle at 52% 24%,rgba(159,207,120,.045),transparent 34%),
    linear-gradient(180deg,rgba(9,13,14,.66),rgba(8,12,13,.58));
  border-top:1px solid rgba(255,255,255,.045);
}

.close-zone::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.005)),
    rgba(7,11,12,.13);
  backdrop-filter:blur(13px) saturate(108%);
  -webkit-backdrop-filter:blur(13px) saturate(108%);
}

.close-zone-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  z-index:1;
}

.close-zone-sticky::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.15;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 48%,black 0%,transparent 76%);
}

.close-zone > .close-zone-sticky > .close-panel{
  --close-opacity:0;
  --close-y:26px;
  position:absolute !important;
  inset:0;
  z-index:2;
  width:100%;
  height:100svh;
  min-height:0 !important;
  padding:0 !important;
  display:grid;
  place-items:center;
  overflow:visible;
  background:transparent !important;
  border:0 !important;
  opacity:var(--close-opacity);
  transform:translate3d(0,var(--close-y),0);
  pointer-events:none;
  will-change:opacity,transform;
}

.close-zone > .close-zone-sticky > .close-panel.is-interactive{
  pointer-events:auto;
}

.close-zone > .close-zone-sticky > .close-panel::before,
.close-zone > .close-zone-sticky > .close-panel::after{
  display:none !important;
}

.close-zone .direct-x-inner,
.close-zone .before-x-inner,
.close-zone .final-x-inner{
  position:relative;
  z-index:3;
}

.close-zone .before-x-inner{
  width:min(1040px,86vw);
  margin:0 auto;
}

.close-zone .final-x-grid{
  opacity:.10;
}

.close-zone-progress{
  position:absolute;
  right:5vw;
  bottom:4vh;
  z-index:6;
  display:grid;
  grid-template-columns:auto 86px auto;
  align-items:center;
  gap:10px;
  color:#738078;
  font-size:8px;
  letter-spacing:.13em;
  pointer-events:none;
}

.close-zone-progress > span{
  color:#dce9d1;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.close-zone-progress > i{
  position:relative;
  display:block;
  width:86px;
  height:1px;
  overflow:hidden;
  background:rgba(255,255,255,.12);
}

.close-zone-progress > i > b{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--close-progress,0%);
  background:#9fcf78;
  box-shadow:0 0 14px rgba(159,207,120,.24);
}

.close-zone-progress > small{
  font-size:7px;
  color:#69736f;
}

@media(max-width:720px){
  .close-zone{
    min-height:300svh;
    background:
      radial-gradient(circle at 50% 20%,rgba(159,207,120,.04),transparent 40%),
      linear-gradient(180deg,rgba(9,13,14,.74),rgba(8,12,13,.66));
  }

  .close-zone::before{
    backdrop-filter:blur(10px) saturate(104%);
    -webkit-backdrop-filter:blur(10px) saturate(104%);
  }

  .close-zone .direct-x-inner,
  .close-zone .before-x-inner,
  .close-zone .final-x-inner{
    width:calc(100vw - 36px);
  }

  .close-zone .before-x-inner{
    display:block;
  }

  .close-zone .before-x-heading{
    margin-bottom:26px;
  }

  .close-zone .before-x-heading h2{
    font-size:clamp(42px,12vw,58px);
  }

  .close-zone .before-x-items summary{
    padding:18px 42px 18px 10px;
  }

  .close-zone .before-x-items details p{
    padding:0 14px 18px 38px;
  }

  .close-zone-progress{
    right:14px;
    bottom:2.2vh;
    grid-template-columns:auto 56px;
  }

  .close-zone-progress > i{
    width:56px;
  }

  .close-zone-progress > small{
    display:none;
  }
}


/* ==========================================================
   TYPOGRAPHY FOCUS — enter once, stay sharp
   ========================================================== */
.kinetic-copy{
  transform-origin:left center;
}

.plans-x-heading .kinetic-copy,
.process-x-heading .kinetic-copy,
.order-copy .kinetic-copy{
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

@media(max-width:720px){
  .kinetic-copy{
    will-change:transform,opacity,filter;
  }
}


/* ==========================================================
   CLOSE ZONE — title + body scroll choreography
   ========================================================== */
.close-zone .direct-x-inner > p:first-child,
.close-zone .direct-x-inner > h2,
.close-zone .before-x-heading,
.close-zone .final-x-inner > p,
.close-zone .final-x-inner > h2{
  opacity:var(--close-title-opacity,1);
  transform:translate3d(0,var(--close-title-y,0px),0);
  filter:blur(var(--close-title-blur,0px));
  will-change:transform,opacity,filter;
}

.close-zone .direct-x-meta,
.close-zone .direct-x-copy,
.close-zone .direct-x-inner > a,
.close-zone .before-x-items,
.close-zone .final-x-status,
.close-zone .final-x-actions{
  opacity:var(--close-body-opacity,1);
  transform:translate3d(0,var(--close-body-y,0px),0);
  filter:blur(var(--close-body-blur,0px));
  will-change:transform,opacity,filter;
}

.close-zone .direct-x-inner > p:first-child,
.close-zone .direct-x-inner > h2,
.close-zone .before-x-heading,
.close-zone .final-x-inner > p,
.close-zone .final-x-inner > h2,
.close-zone .direct-x-meta,
.close-zone .direct-x-copy,
.close-zone .direct-x-inner > a,
.close-zone .before-x-items,
.close-zone .final-x-status,
.close-zone .final-x-actions{
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

@media(max-width:720px){
  .close-zone .direct-x-inner > p:first-child,
  .close-zone .direct-x-inner > h2,
  .close-zone .before-x-heading,
  .close-zone .final-x-inner > p,
  .close-zone .final-x-inner > h2,
  .close-zone .direct-x-meta,
  .close-zone .direct-x-copy,
  .close-zone .direct-x-inner > a,
  .close-zone .before-x-items,
  .close-zone .final-x-status,
  .close-zone .final-x-actions{
    transform:translate3d(0,var(--close-title-y,0px),0);
  }

  .close-zone .direct-x-meta,
  .close-zone .direct-x-copy,
  .close-zone .direct-x-inner > a,
  .close-zone .before-x-items,
  .close-zone .final-x-status,
  .close-zone .final-x-actions{
    transform:translate3d(0,var(--close-body-y,0px),0);
  }
}


/* ==========================================================
   PROCESS — readable focus / hold / release
   ========================================================== */
.process-x{
  min-height:360svh;
}

.process-x-heading{
  opacity:.62;
  filter:blur(1.8px);
  will-change:transform,opacity,filter;
}

.process-x-track{
  gap:26px;
}

.process-step-x{
  --step-opacity:.36;
  --step-blur:0px;
  --step-y:0px;
  --step-scale:1;
  opacity:var(--step-opacity) !important;
  filter:blur(var(--step-blur));
  transform:translate3d(0,var(--step-y),0) scale(var(--step-scale));
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease;
  will-change:transform,opacity,filter;
}

.process-step-x > span{
  width:42px;
  height:42px;
  font-size:9px;
  color:#7f8a85;
}

.process-step-x strong{
  font-size:21px;
  line-height:1.12;
  color:#c4cdc8;
}

.process-step-x p{
  margin-top:7px;
  max-width:430px;
  color:#929d98;
  font-size:13px;
  line-height:1.55;
}

.process-step-x.active{
  transform:translate3d(8px,var(--step-y),0) scale(var(--step-scale));
}

.process-step-x.active > span{
  color:var(--cap-accent);
  border-color:rgba(159,207,120,.22);
  box-shadow:0 0 28px rgba(159,207,120,.05);
}

.process-step-x.active strong{
  color:#f0f3f1;
}

.process-step-x.active p{
  color:#b8c1bc;
}

.process-x-side{
  --process-side-opacity:.62;
  --process-side-blur:1.7px;
  --process-side-y:10px;
  opacity:var(--process-side-opacity) !important;
  filter:blur(var(--process-side-blur));
  transform:translate3d(0,calc(-50% + var(--process-side-y)),0) !important;
  will-change:transform,opacity,filter;
}

.process-x-side small{
  font-size:9.5px;
}

.process-x-side strong{
  font-size:clamp(30px,3.2vw,46px);
}

.process-x-side p{
  margin-top:16px;
  color:#aeb8b2;
  font-size:13.5px;
  line-height:1.62;
}

@media(max-width:980px){
  .process-step-x strong{font-size:19px}
  .process-step-x p{font-size:12.5px}
  .process-x-side p{font-size:12.5px}
}

@media(max-width:720px){
  .process-x{
    min-height:380svh;
  }

  .process-x-track{
    gap:18px;
  }

  .process-step-x{
    grid-template-columns:36px 1fr;
    gap:11px;
  }

  .process-step-x > span{
    width:36px;
    height:36px;
    font-size:8.5px;
  }

  .process-step-x strong{
    font-size:16px;
  }

  .process-step-x p{
    margin-top:5px;
    font-size:11.5px;
    line-height:1.45;
  }

  .process-x-side{
    padding:118px 15px 16px;
  }

  .process-x-side small{
    font-size:8.5px;
  }

  .process-x-side strong{
    font-size:24px;
  }

  .process-x-side p{
    font-size:11.5px;
    line-height:1.5;
  }
}


/* ==========================================================
   PLANS — CTA anchored below recommended Web Pro
   ========================================================== */
.plans-x-cta{
  position:absolute;
  z-index:14;
  right:auto !important;
  left:50%;
  top:84%;
  transform:translateX(-50%);
  padding:12px 18px;
  white-space:nowrap;
  font-size:11.5px;
  line-height:1;
  background:rgba(159,207,120,.055);
  border-color:rgba(159,207,120,.20);
  box-shadow:0 14px 34px rgba(0,0,0,.20);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.plans-x-cta:hover{
  background:rgba(159,207,120,.09);
  border-color:rgba(159,207,120,.30);
}

@media(max-width:720px){
  .plans-x-cta{
    right:auto !important;
    left:50%;
    top:80%;
    transform:translateX(-50%);
    padding:11px 15px;
    font-size:10.5px;
  }
}


/* ==========================================================
   PLANS — static centered CTA with breathing room
   ========================================================== */
.plans-x-cta{
  position:absolute !important;
  z-index:14;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:5.5vh;
  transform:translateX(-50%) !important;
  padding:12px 18px;
  white-space:nowrap;
  font-size:11.5px;
  line-height:1;
  background:rgba(159,207,120,.045);
  border:1px solid rgba(159,207,120,.18);
  box-shadow:none;
  transition:
    box-shadow .22s ease,
    border-color .22s ease,
    color .22s ease,
    background .22s ease;
}

.plans-x-cta:hover,
.plans-x-cta:focus-visible{
  transform:translateX(-50%) !important;
  background:rgba(159,207,120,.05);
  border-color:rgba(159,207,120,.30);
  box-shadow:
    0 0 18px rgba(159,207,120,.16),
    0 0 34px rgba(159,207,120,.07);
}

@media(max-width:720px){
  .plans-x-cta{
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:5.8vh;
    transform:translateX(-50%) !important;
    padding:11px 15px;
    font-size:10.5px;
  }

  .plans-x-cta:hover,
  .plans-x-cta:focus-visible{
    transform:translateX(-50%) !important;
  }
}


/* ==========================================================
   ORDER — channel hub glow-up
   ========================================================== */
.order-system{
  top:59%;
  width:min(980px,86vw);
  height:min(570px,58vh);
}

.order-node{
  min-width:162px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-color:rgba(255,255,255,.085);
  background:rgba(10,15,16,.72);
  backdrop-filter:blur(16px) saturate(112%);
  -webkit-backdrop-filter:blur(16px) saturate(112%);
  box-shadow:
    0 18px 46px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.order-node strong{
  margin:0;
  color:#d6ddd9;
  font-size:12px;
  font-weight:600;
}

.order-brand-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:
    radial-gradient(circle at 35% 30%,rgba(159,207,120,.08),transparent 60%),
    rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.order-brand-icon img{
  width:16px;
  height:16px;
  display:block;
  opacity:.92;
}

.order-calendar-icon{
  position:relative;
}

.order-calendar-icon::before{
  content:"";
  width:15px;
  height:14px;
  border:1px solid #dce4df;
  border-radius:3px;
  opacity:.88;
}

.order-calendar-icon::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:11px;
  height:1px;
  background:#dce4df;
  opacity:.78;
}

.order-calendar-icon i{
  position:absolute;
  top:7px;
  width:1px;
  height:4px;
  background:#9fcf78;
}

.order-calendar-icon i:first-child{left:11px}
.order-calendar-icon i:nth-child(2){right:11px}

.order-calendar-icon b{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#9fcf78;
  bottom:9px;
  right:10px;
}

.node-instagram{left:0;top:15%}
.node-whatsapp{right:0;top:18%}
.node-google{left:4%;bottom:10%}
.node-reservas{right:1%;bottom:8%}

.order-core{
  width:330px;
  height:245px;
  aspect-ratio:auto;
  padding:0;
  border:0;
  border-radius:24px;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}

.order-core-browser{
  position:absolute;
  inset:0 0 54px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  background:
    radial-gradient(circle at 70% 35%,rgba(159,207,120,.08),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.009)),
    rgba(8,12,13,.90);
  box-shadow:
    0 28px 75px rgba(0,0,0,.40),
    0 0 42px rgba(159,207,120,.055),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.order-core-bar{
  height:34px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 11px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.order-core-bar > span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#3f4946;
}

.order-core-bar > span:first-child{
  background:#8ebd70;
  box-shadow:0 0 10px rgba(159,207,120,.25);
}

.order-core-bar em{
  margin-left:auto;
  color:#6f7b75;
  font-size:5.5px;
  font-style:normal;
  letter-spacing:.10em;
}

.order-core-screen{
  position:relative;
  height:calc(100% - 34px);
  padding:22px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:14px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:28px 28px;
}

.order-core-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.order-core-copy i{
  width:28%;
  height:4px;
  border-radius:999px;
  background:#9fcf78;
  opacity:.76;
  margin-bottom:11px;
}

.order-core-copy b{
  display:block;
  width:86%;
  height:12px;
  margin-bottom:7px;
  border-radius:999px;
  background:#e8eeea;
}

.order-core-copy b:nth-of-type(2){
  width:61%;
}

.order-core-copy span{
  width:42%;
  height:22px;
  margin-top:12px;
  border:1px solid rgba(159,207,120,.22);
  border-radius:999px;
  background:rgba(159,207,120,.055);
}

.order-core-card{
  position:relative;
  align-self:center;
  height:82%;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:
    linear-gradient(150deg,rgba(159,207,120,.07),rgba(255,255,255,.01)),
    rgba(14,20,20,.66);
}

.order-core-card span{
  position:absolute;
  left:14px;
  height:4px;
  border-radius:999px;
  background:#79847f;
}

.order-core-card span:first-child{
  bottom:29%;
  width:42%;
  background:#9fcf78;
}

.order-core-card span:nth-child(2){
  bottom:20%;
  width:59%;
}

.order-core-card i{
  position:absolute;
  width:52%;
  aspect-ratio:1;
  right:10%;
  top:12%;
  border:1px solid rgba(159,207,120,.16);
  border-radius:43% 57% 54% 46%;
  transform:rotate(13deg);
  background:linear-gradient(145deg,rgba(159,207,120,.09),transparent 68%);
}

.order-core-label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
}

.order-core-label small{
  color:#9fcf78;
  font-size:8px;
  letter-spacing:.15em;
}

.order-core-label strong{
  display:inline-block;
  margin:0 0 0 7px;
  color:#eef2ef;
  font-size:22px;
  letter-spacing:-.04em;
}

.core-pulse{
  inset:-18px -24px 34px;
  border-radius:30px;
  border-color:rgba(159,207,120,.11);
}

.order-orbit{
  border-color:rgba(159,207,120,.10);
}

.orbit-one{
  width:66%;
  aspect-ratio:1.7/1;
}

.orbit-two{
  width:88%;
  aspect-ratio:2/1;
  opacity:.48;
}

@media(max-width:760px){
  .order-system{
    top:60%;
    width:96vw;
    height:48vh;
  }

  .order-node{
    min-width:0;
    padding:9px 10px;
    gap:8px;
  }

  .order-node strong{
    font-size:9.5px;
  }

  .order-brand-icon{
    width:27px;
    height:27px;
    flex-basis:27px;
    border-radius:8px;
  }

  .order-brand-icon img{
    width:14px;
    height:14px;
  }

  .node-instagram{left:1%;top:12%}
  .node-whatsapp{right:1%;top:17%}
  .node-google{left:2%;bottom:10%}
  .node-reservas{right:1%;bottom:8%}

  .order-core{
    width:min(245px,62vw);
    height:195px;
  }

  .order-core-browser{
    inset:0 0 45px;
    border-radius:18px;
  }

  .order-core-screen{
    padding:15px;
    gap:10px;
  }

  .order-core-bar{
    height:29px;
  }

  .order-core-label small{
    font-size:7px;
  }

  .order-core-label strong{
    font-size:18px;
  }

  .orbit-one{width:72%}
  .orbit-two{width:94%}
}


/* ==========================================================
   ORDER — centered responsive composition
   ========================================================== */
.order-copy{
  left:50%;
  width:min(900px,88vw);
  text-align:center;
}

.order-system{
  left:50%;
  top:59%;
  width:min(940px,88vw);
  height:min(560px,57vh);
  transform-origin:50% 50%;
}

.order-core{
  left:50%;
  top:50%;
}

.order-orbit{
  left:50%;
  top:50%;
}

.order-node{
  width:176px;
  min-width:176px;
  justify-content:flex-start;
}

.node-instagram{
  left:3%;
  right:auto;
  top:17%;
  bottom:auto;
}

.node-whatsapp{
  right:3%;
  left:auto;
  top:17%;
  bottom:auto;
}

.node-google{
  left:3%;
  right:auto;
  bottom:11%;
  top:auto;
}

.node-reservas{
  right:3%;
  left:auto;
  bottom:11%;
  top:auto;
}

.line-instagram{transform:rotate(210deg)}
.line-whatsapp{transform:rotate(-30deg)}
.line-google{transform:rotate(150deg)}
.line-reservas{transform:rotate(30deg)}

.order-result{
  left:50%;
  width:min(720px,86vw);
  text-align:center;
}

.order-progress{
  left:50%;
  right:auto;
  bottom:22px;
  transform:translateX(-50%);
}

@media(max-width:980px){
  .order-system{
    width:min(860px,92vw);
  }

  .order-node{
    width:158px;
    min-width:158px;
  }

  .node-instagram,
  .node-google{left:2%}

  .node-whatsapp,
  .node-reservas{right:2%}
}

@media(max-width:760px){
  .order-copy{
    left:50%;
    top:12.5%;
    width:92vw;
  }

  .order-copy > p{
    margin-bottom:12px;
    text-align:center;
  }

  .order-copy h2{
    font-size:clamp(44px,12.2vw,62px);
    line-height:.92;
    text-align:center;
  }

  .order-system{
    left:50%;
    top:58%;
    width:96vw;
    height:50vh;
  }

  .order-core{
    left:50%;
    top:50%;
    width:min(230px,58vw);
    height:184px;
  }

  .order-node{
    width:132px;
    min-width:132px;
    padding:8px 9px;
    gap:7px;
  }

  .order-node strong{
    font-size:9px;
    line-height:1.1;
  }

  .order-brand-icon{
    width:25px;
    height:25px;
    flex-basis:25px;
  }

  .node-instagram{
    left:2%;
    top:12%;
  }

  .node-whatsapp{
    right:2%;
    top:12%;
  }

  .node-google{
    left:2%;
    bottom:10%;
  }

  .node-reservas{
    right:2%;
    bottom:10%;
  }

  .orbit-one{
    width:70%;
  }

  .orbit-two{
    width:94%;
  }

  .order-result{
    left:50%;
    bottom:8%;
    width:88vw;
    text-align:center;
  }

  .order-result p{
    font-size:clamp(23px,7.2vw,31px);
  }

  .order-result span{
    max-width:330px;
    margin:9px auto 0;
    font-size:11px;
    line-height:1.45;
  }

  .order-progress{
    left:50%;
    right:auto;
    bottom:15px;
    transform:translateX(-50%);
  }
}

@media(max-width:430px){
  .order-system{
    width:98vw;
  }

  .order-node{
    width:120px;
    min-width:120px;
    padding:7px 8px;
  }

  .order-node strong{
    font-size:8.5px;
  }

  .order-brand-icon{
    width:23px;
    height:23px;
    flex-basis:23px;
  }

  .order-core{
    width:min(216px,56vw);
    height:174px;
  }
}


/* ==========================================================
   ORDER — safe centered mobile layout
   ========================================================== */
@media(max-width:760px){
  .order-copy{
    top:17%;
    width:90vw;
  }

  .order-copy > p{
    margin-bottom:11px;
  }

  .order-copy h2{
    font-size:clamp(42px,11.8vw,60px);
    line-height:.92;
  }

  .order-system{
    left:50%;
    top:59.5%;
    width:90vw;
    height:48vh;
  }

  .order-node{
    width:116px;
    min-width:116px;
    padding:8px 9px;
    gap:7px;
    border-radius:12px;
  }

  .order-node strong{
    font-size:9px;
    line-height:1.1;
  }

  .order-brand-icon{
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:8px;
  }

  .order-brand-icon img{
    width:13px;
    height:13px;
  }

  .node-instagram{
    left:8%;
    top:13%;
  }

  .node-whatsapp{
    right:8%;
    top:13%;
  }

  .node-google{
    left:8%;
    bottom:12%;
  }

  .node-reservas{
    right:8%;
    bottom:12%;
  }

  .order-core{
    width:min(214px,54vw);
    height:172px;
  }

  .order-core-browser{
    inset:0 0 42px;
  }

  .order-core-label small{
    font-size:6.8px;
  }

  .order-core-label strong{
    font-size:17px;
  }

  .orbit-one{width:68%}
  .orbit-two{width:90%}

  .order-result{
    bottom:8.5%;
    width:84vw;
  }

  .order-result p{
    font-size:clamp(21px,6.5vw,28px);
    line-height:1.02;
  }

  .order-result span{
    max-width:300px;
    margin:8px auto 0;
    font-size:10px;
    line-height:1.45;
  }

  .order-progress{
    left:50%;
    right:auto;
    bottom:14px;
    transform:translateX(-50%);
  }
}

@media(max-width:430px){
  .order-copy{
    top:18%;
    width:92vw;
  }

  .order-system{
    width:92vw;
    top:60%;
  }

  .order-node{
    width:108px;
    min-width:108px;
    padding:7px 8px;
  }

  .node-instagram,
  .node-google{left:7%}

  .node-whatsapp,
  .node-reservas{right:7%}

  .order-core{
    width:min(202px,53vw);
    height:164px;
  }
}


/* ==========================================================
   PLANS — cleaner labels / lateral numbering only
   ========================================================== */
.plans-x-heading{
  top:10%;
}

.plans-x-heading > p{
  display:none !important;
}

.plan-x-top{
  justify-content:flex-end;
}

.plan-x-top > span{
  display:none;
}

.plan-x-top em{
  color:#8d9993;
}

.plan-x.active .plan-x-top em{
  color:#9fcf78;
}

@media(max-width:720px){
  .plans-x-heading{
    top:10.5%;
  }

  .plan-x-top{
    justify-content:flex-start;
  }

  .plan-x-top em{
    display:none;
  }

  .plan-x.active .plan-x-top{
    justify-content:flex-end;
  }

  .plan-x.active .plan-x-top em{
    display:block;
    font-size:7px;
    letter-spacing:.13em;
  }

  .plan-x:not(.active) .plan-x-top{
    justify-content:center;
  }

  .plan-x:not(.active) .plan-x-top > span{
    display:block;
    color:#9fcf78;
    font-size:7px;
    letter-spacing:.12em;
  }
}


/* ==========================================================
   ORDER — real portfolio screen + icons emerging from frame
   ========================================================== */
.order-core{
  width:390px;
  height:292px;
}

.order-core-browser-real{
  inset:0 0 48px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  background:#080c0d;
  box-shadow:
    0 30px 78px rgba(0,0,0,.44),
    0 0 44px rgba(159,207,120,.07),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.order-core-screen-real{
  position:relative;
  height:calc(100% - 34px);
  overflow:hidden;
  padding:0;
  display:block;
  background:#0a0e0f;
}

.order-core-shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 42%;
  transform:scale(1.015);
  filter:saturate(.88) contrast(1.025) brightness(.90);
}

.order-core-screen-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(159,207,120,.025),transparent 30%),
    radial-gradient(circle at 50% 50%,transparent 52%,rgba(4,7,8,.18) 100%);
  box-shadow:inset 0 0 35px rgba(0,0,0,.28);
}

.order-core-label{
  bottom:2px;
}

.order-system .order-node{
  z-index:12;
  width:auto;
  min-width:0;
  padding:8px 10px 8px 8px;
  gap:8px;
  border-color:rgba(159,207,120,.14);
  background:rgba(8,12,13,.84);
  box-shadow:
    0 14px 34px rgba(0,0,0,.32),
    0 0 18px rgba(159,207,120,.045),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.order-system .order-brand-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-color:rgba(159,207,120,.15);
  background:
    radial-gradient(circle at 38% 30%,rgba(159,207,120,.13),transparent 58%),
    rgba(255,255,255,.025);
  box-shadow:
    0 0 16px rgba(159,207,120,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.order-system .node-instagram{
  left:calc(50% - 265px);
  top:calc(50% - 130px);
}

.order-system .node-whatsapp{
  right:auto;
  left:calc(50% + 165px);
  top:calc(50% - 130px);
}

.order-system .node-google{
  left:calc(50% - 250px);
  bottom:auto;
  top:calc(50% + 73px);
}

.order-system .node-reservas{
  right:auto;
  left:calc(50% + 154px);
  bottom:auto;
  top:calc(50% + 73px);
}

.order-system .order-line{
  opacity:.30;
}

@media(max-width:980px){
  .order-core{
    width:350px;
    height:265px;
  }

  .order-system .node-instagram{
    left:calc(50% - 235px);
    top:calc(50% - 118px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 142px);
    top:calc(50% - 118px);
  }

  .order-system .node-google{
    left:calc(50% - 225px);
    top:calc(50% + 62px);
  }

  .order-system .node-reservas{
    left:calc(50% + 136px);
    top:calc(50% + 62px);
  }
}

@media(max-width:760px){
  .order-core{
    width:min(250px,62vw);
    height:190px;
  }

  .order-core-browser-real{
    inset:0 0 38px;
    border-radius:17px;
  }

  .order-core-bar{
    height:27px;
    padding:0 8px;
  }

  .order-core-bar > span{
    width:4px;
    height:4px;
  }

  .order-core-bar em{
    font-size:4.7px;
  }

  .order-core-screen-real{
    height:calc(100% - 27px);
  }

  .order-core-shot{
    object-position:center 40%;
    transform:scale(1.02);
  }

  .order-system .order-node{
    padding:6px;
    border-radius:11px;
  }

  .order-system .order-node strong{
    display:none;
  }

  .order-system .order-brand-icon{
    width:29px;
    height:29px;
    flex:0 0 29px;
    border-radius:9px;
  }

  .order-system .order-brand-icon img{
    width:15px;
    height:15px;
  }

  .order-system .node-instagram{
    left:calc(50% - 166px);
    top:calc(50% - 92px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 123px);
    top:calc(50% - 92px);
  }

  .order-system .node-google{
    left:calc(50% - 164px);
    top:calc(50% + 54px);
  }

  .order-system .node-reservas{
    left:calc(50% + 121px);
    top:calc(50% + 54px);
  }

  .order-core-label small{
    font-size:6px;
  }

  .order-core-label strong{
    font-size:15px;
  }
}

@media(max-width:430px){
  .order-core{
    width:min(232px,60vw);
    height:180px;
  }

  .order-system .node-instagram{
    left:calc(50% - 151px);
    top:calc(50% - 86px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 109px);
    top:calc(50% - 86px);
  }

  .order-system .node-google{
    left:calc(50% - 149px);
    top:calc(50% + 49px);
  }

  .order-system .node-reservas{
    left:calc(50% + 107px);
    top:calc(50% + 49px);
  }
}


/* ==========================================================
   ORDER — icons tight to portfolio screen
   ========================================================== */
.order-system .node-instagram{
  left:calc(50% - 238px);
  top:calc(50% - 123px);
}

.order-system .node-whatsapp{
  left:calc(50% + 152px);
  top:calc(50% - 123px);
}

.order-system .node-google{
  left:calc(50% - 230px);
  top:calc(50% + 64px);
}

.order-system .node-reservas{
  left:calc(50% + 146px);
  top:calc(50% + 64px);
}

.order-system .order-node{
  box-shadow:
    0 12px 28px rgba(0,0,0,.34),
    0 0 20px rgba(159,207,120,.08),
    inset 0 1px 0 rgba(255,255,255,.035);
}

@media(max-width:980px){
  .order-system .node-instagram{
    left:calc(50% - 218px);
    top:calc(50% - 112px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 138px);
    top:calc(50% - 112px);
  }

  .order-system .node-google{
    left:calc(50% - 210px);
    top:calc(50% + 58px);
  }

  .order-system .node-reservas{
    left:calc(50% + 132px);
    top:calc(50% + 58px);
  }
}

@media(max-width:760px){
  .order-system .node-instagram{
    left:calc(50% - 151px);
    top:calc(50% - 88px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 110px);
    top:calc(50% - 88px);
  }

  .order-system .node-google{
    left:calc(50% - 149px);
    top:calc(50% + 50px);
  }

  .order-system .node-reservas{
    left:calc(50% + 108px);
    top:calc(50% + 50px);
  }
}

@media(max-width:430px){
  .order-system .node-instagram{
    left:calc(50% - 141px);
    top:calc(50% - 82px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 100px);
    top:calc(50% - 82px);
  }

  .order-system .node-google{
    left:calc(50% - 139px);
    top:calc(50% + 47px);
  }

  .order-system .node-reservas{
    left:calc(50% + 98px);
    top:calc(50% + 47px);
  }
}


/* ==========================================================
   ORDER — exact HD mockup, no nested browser
   ========================================================== */
.order-system{
  width:min(1120px,94vw);
  height:min(620px,62vh);
}

.order-core{
  width:525px;
  height:430px;
  aspect-ratio:auto;
  display:block;
  border:0;
  border-radius:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

.order-core-frame{
  position:absolute;
  inset:0 0 36px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:
    0 34px 82px rgba(0,0,0,.34),
    0 0 48px rgba(159,207,120,.055);
}

.order-core-shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  transform:none;
  filter:none;
}

.order-core-label{
  bottom:0;
}

.core-pulse{
  inset:-18px -28px 28px;
  border-radius:34px;
}

.order-system .node-instagram{
  left:calc(50% - 340px);
  top:calc(50% - 176px);
}

.order-system .node-whatsapp{
  right:auto;
  left:calc(50% + 228px);
  top:calc(50% - 176px);
}

.order-system .node-google{
  left:calc(50% - 330px);
  bottom:auto;
  top:calc(50% + 112px);
}

.order-system .node-reservas{
  right:auto;
  left:calc(50% + 218px);
  bottom:auto;
  top:calc(50% + 112px);
}

@media(max-width:980px){
  .order-system{
    width:96vw;
    height:min(590px,61vh);
  }

  .order-core{
    width:460px;
    height:378px;
  }

  .order-system .node-instagram{
    left:calc(50% - 304px);
    top:calc(50% - 154px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 194px);
    top:calc(50% - 154px);
  }

  .order-system .node-google{
    left:calc(50% - 294px);
    top:calc(50% + 96px);
  }

  .order-system .node-reservas{
    left:calc(50% + 184px);
    top:calc(50% + 96px);
  }
}

@media(max-width:760px){
  .order-system{
    top:59%;
    width:98vw;
    height:50vh;
  }

  .order-core{
    width:min(310px,76vw);
    height:min(268px,65vw);
  }

  .order-core-frame{
    inset:0 0 31px;
    box-shadow:
      0 22px 54px rgba(0,0,0,.32),
      0 0 32px rgba(159,207,120,.045);
  }

  .order-system .order-node{
    padding:6px;
    border-radius:11px;
  }

  .order-system .order-node strong{
    display:none;
  }

  .order-system .node-instagram{
    left:calc(50% - 190px);
    top:calc(50% - 118px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 148px);
    top:calc(50% - 118px);
  }

  .order-system .node-google{
    left:calc(50% - 186px);
    top:calc(50% + 74px);
  }

  .order-system .node-reservas{
    left:calc(50% + 144px);
    top:calc(50% + 74px);
  }

  .order-core-label small{
    font-size:6.2px;
  }

  .order-core-label strong{
    font-size:16px;
  }
}

@media(max-width:430px){
  .order-core{
    width:min(286px,78vw);
    height:min(247px,67vw);
  }

  .order-system .node-instagram{
    left:calc(50% - 174px);
    top:calc(50% - 108px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 134px);
    top:calc(50% - 108px);
  }

  .order-system .node-google{
    left:calc(50% - 170px);
    top:calc(50% + 67px);
  }

  .order-system .node-reservas{
    left:calc(50% + 130px);
    top:calc(50% + 67px);
  }
}

/* Capability scene readability — design + development */
@media(max-width:720px){
  .design-tag{
    right:7%;
    top:17%;
    padding:8px 10px;
    font-size:10px;
    letter-spacing:.08em;
  }

  .dev-label{
    left:7%;
    right:7%;
    bottom:10%;
    max-width:none;
    padding:9px 10px 10px;
  }

  .dev-label span{
    font-size:10px;
  }

  .dev-label strong{
    font-size:10px;
    line-height:1.35;
  }
}


/* ==========================================================
   CAPABILITIES — centered scroll narrative
   ========================================================== */
.cap-editorial .cap-stage.cap-scene{
  isolation:isolate;
}

.cap-editorial .cap-layer{
  z-index:1;
}

.cap-editorial .cap-layer-design.active{opacity:.46}
.cap-editorial .cap-layer-dev.active{opacity:.44}
.cap-editorial .cap-layer-direction.active{opacity:.42}
.cap-editorial .cap-layer-ai.active{opacity:.46}

.cap-focus-copy{
  position:absolute;
  z-index:8;
  left:50%;
  top:50%;
  width:min(560px,72%);
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  opacity:1;
  transition:
    opacity .11s ease,
    transform .16s cubic-bezier(.2,.8,.2,1),
    filter .16s ease;
}

.cap-focus-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:145%;
  height:220%;
  transform:translate(-50%,-50%);
  background:radial-gradient(
    ellipse at center,
    rgba(7,11,12,.82) 0%,
    rgba(7,11,12,.58) 30%,
    rgba(7,11,12,.18) 58%,
    transparent 76%
  );
  filter:blur(8px);
  pointer-events:none;
}

.cap-focus-copy strong{
  display:block;
  color:#f1f5f2;
  font:700 clamp(38px,5vw,64px)/.94 "Plus Jakarta Sans",sans-serif;
  letter-spacing:-.055em;
  text-shadow:
    0 12px 32px rgba(0,0,0,.70),
    0 0 30px rgba(159,207,120,.055);
}

.cap-focus-copy p{
  margin:13px auto 0;
  max-width:520px;
  color:#c2cec7;
  font:500 clamp(14px,1.35vw,18px)/1.45 Inter,sans-serif;
  letter-spacing:-.015em;
  text-shadow:0 6px 22px rgba(0,0,0,.76);
}

.cap-focus-copy.is-changing{
  opacity:0;
  transform:translate(-50%,calc(-50% - 15px));
  filter:blur(3px);
}

/* Internal labels are intentionally suppressed: the centered narrative is the only
   typographic focal point while the geometry stays as visual context. */
.design-tag,
.dev-label,
.direction-mark,
.ai-center > b,
.ai-center > small{
  display:none !important;
}

.ai-center{
  z-index:2;
  width:132px;
  height:132px;
  opacity:.72;
  background:
    radial-gradient(circle,rgba(159,207,120,.11),rgba(8,12,13,.08) 54%,transparent 72%);
}

.cap-editorial .cap-index{
  opacity:.82;
}

.cap-editorial .cap-tab:not(.active){
  opacity:1;
  color:#c2cdbd;
}

.cap-editorial .cap-tab.active{
  opacity:1;
}

@media(max-width:980px){
  .cap-focus-copy{
    width:min(520px,70vw);
  }
}

@media(max-width:720px){
  .cap-editorial .cap-stage.cap-scene{
    top:56%;
  }

  .cap-focus-copy{
    top:48%;
    width:82vw;
  }

  .cap-focus-copy strong{
    font-size:clamp(34px,10vw,48px);
  }

  .cap-focus-copy p{
    margin-top:10px;
    max-width:78vw;
    font-size:13px;
    line-height:1.45;
  }

  .cap-focus-copy::before{
    width:125%;
    height:190%;
  }

  .cap-editorial .cap-index{
    left:50%;
    bottom:7vh;
    width:92vw;
    transform:translateX(-50%);
    justify-content:center;
  }

  .cap-editorial .cap-tab{
    padding:8px 10px;
  }

  .cap-editorial .cap-tab strong{
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .cap-focus-copy{
    transition:none;
  }
}


/* ==========================================================
   FINAL RESPONSIVE + BACKDROP PASS
   mobile centered / desktop rails / film visible
   ========================================================== */

/* Keep the scrubbed master film visible through most of the experience. */
.master-film{
  background:#070b0c;
}
.master-film::after{
  background:
    radial-gradient(circle at 50% 46%,transparent 0%,transparent 50%,rgba(5,8,9,.08) 78%,rgba(5,8,9,.16) 100%),
    linear-gradient(180deg,rgba(6,9,10,.035),transparent 42%,rgba(6,9,10,.055));
}
.master-film video{
  opacity:var(--film-opacity,.76);
  filter:
    brightness(var(--film-brightness,.86))
    contrast(1.045)
    saturate(.96);
}

/* Section shells become translucent instead of replacing the background. */
.order-section,
.cap-section,
.plans-x,
.process-x{
  background:
    radial-gradient(circle at 50% 48%,rgba(159,207,120,.018),transparent 34%),
    linear-gradient(180deg,rgba(8,12,13,.15),rgba(8,12,13,.07) 48%,rgba(8,12,13,.17));
}
.order-sticky,
.cap-sticky,
.plans-x-sticky,
.process-x-sticky{
  background:transparent;
}
.close-zone{
  background:
    radial-gradient(circle at 50% 24%,rgba(159,207,120,.018),transparent 38%),
    linear-gradient(180deg,rgba(8,12,13,.18),rgba(8,12,13,.10));
}
.close-zone::before{
  background:rgba(7,11,12,.045);
  backdrop-filter:blur(4px) saturate(104%);
  -webkit-backdrop-filter:blur(4px) saturate(104%);
}
.close-zone-sticky::before{
  opacity:.08;
}

/* Desktop: use one visual rail so headings and interactive groups feel deliberate. */
@media(min-width:981px){
  .order-copy,
  .plans-x-heading{
    width:min(920px,76vw);
  }

  .order-system{
    width:min(1080px,88vw);
  }

  .cap-editorial .cap-heading{
    left:max(5vw,calc(50% - 590px));
    width:min(520px,40vw);
  }

  .cap-editorial .cap-index{
    left:max(5vw,calc(50% - 590px));
  }

  .cap-editorial .cap-stage.cap-scene{
    left:60%;
    width:min(820px,62vw);
    height:min(590px,64vh);
  }

  .plans-x-stage{
    width:min(1120px,88vw);
    gap:18px;
  }

  .plans-x-detail{
    left:max(5vw,calc(50% - 560px));
    width:min(360px,29vw);
  }

  .process-x-heading{
    left:max(5vw,calc(50% - 570px));
  }

  .process-x-track{
    left:max(5vw,calc(50% - 570px));
    width:min(520px,43vw);
  }

  .process-x-side{
    right:max(5vw,calc(50% - 570px));
    width:min(390px,32vw);
  }

  .close-zone .direct-x-inner,
  .close-zone .before-x-inner,
  .close-zone .final-x-inner{
    width:min(1100px,86vw);
  }
}

/* Mobile: every major composition sits on the center axis. */
@media(max-width:720px){
  .master-film video{
    inset:-7%;
    width:114%;
    height:114%;
    opacity:var(--film-opacity,.66);
    filter:
      brightness(var(--film-brightness,.80))
      contrast(1.035)
      saturate(.92);
  }

  .master-film::after{
    background:
      radial-gradient(circle at 50% 48%,transparent 0%,transparent 46%,rgba(5,8,9,.07) 78%,rgba(5,8,9,.13) 100%),
      linear-gradient(180deg,rgba(6,9,10,.045),transparent 45%,rgba(6,9,10,.06));
  }

  .order-section,
  .cap-section,
  .plans-x,
  .process-x{
    background:
      linear-gradient(180deg,rgba(8,12,13,.22),rgba(8,12,13,.10) 50%,rgba(8,12,13,.24));
  }

  .close-zone{
    background:
      radial-gradient(circle at 50% 22%,rgba(159,207,120,.018),transparent 42%),
      linear-gradient(180deg,rgba(8,12,13,.24),rgba(8,12,13,.14));
  }

  .close-zone::before{
    background:rgba(7,11,12,.035);
    backdrop-filter:blur(3px) saturate(102%);
    -webkit-backdrop-filter:blur(3px) saturate(102%);
  }

  /* Order */
  .order-copy{
    left:50%;
    width:92vw;
    text-align:center;
  }
  .order-system{
    left:50%;
    width:94vw;
  }
  .order-result{
    left:50%;
    width:88vw;
    text-align:center;
  }

  /* Capabilities */
  .cap-editorial .cap-heading{
    left:50%;
    top:9.5vh;
    width:92vw;
    transform:translateX(-50%);
    text-align:center;
  }
  .cap-editorial .cap-heading h2{
    font-size:clamp(40px,11.5vw,58px);
  }
  .cap-editorial .cap-stage.cap-scene{
    left:50%;
    top:54%;
    width:92vw;
    height:47vh;
    transform:translate(-50%,-50%);
  }
  .cap-editorial .cap-index{
    left:50%;
    right:auto;
    bottom:6.5vh;
    width:94vw;
    transform:translateX(-50%);
    justify-content:center;
  }
  .cap-editorial .cap-final{
    left:50%;
    right:auto;
    width:88vw;
    text-align:center;
    transform:translateX(-50%);
  }
  .cap-progress{
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }

  /* Plans */
  .plans-x-heading{
    left:50%;
    width:92vw;
    transform:translateX(-50%);
    text-align:center;
  }
  .plans-x-stage{
    left:50%;
    top:53%;
    width:94vw;
    height:54vh;
    transform:translate(-50%,-50%);
    justify-content:center;
  }
  .plan-x{
    text-align:center;
  }
  .plan-x ul{
    width:max-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }
  .plans-x-detail{
    left:50% !important;
    right:auto !important;
    bottom:11.5vh;
    width:min(340px,86vw);
    transform:translateX(-50%);
    text-align:center;
  }
  .plans-x-detail > p{
    margin-left:auto;
    margin-right:auto;
  }
  .plans-x-counter{
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
  .plans-x-cta{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }

  /* Process becomes one centered composition instead of a left/right split. */
  .process-x{
    min-height:390svh;
  }
  .process-x-heading{
    left:0;
    top:8.5%;
    width:100%;
    padding:0 20px;
    text-align:center;
  }
  .process-x-heading h2{
    font-size:clamp(42px,11.5vw,58px);
  }
  .process-x-track{
    left:50%;
    top:39%;
    width:86vw;
    transform:translate(-50%,-50%);
    gap:12px;
  }
  .process-step-x{
    grid-template-columns:34px 1fr;
    gap:11px;
    text-align:left;
  }
  .process-step-x > span{
    width:34px;
    height:34px;
  }
  .process-step-x strong{
    font-size:15px;
  }
  .process-step-x p{
    font-size:10.5px;
    line-height:1.38;
  }
  .process-x-side{
    left:50%;
    right:auto;
    top:73%;
    width:86vw;
    min-height:178px;
    padding:78px 18px 16px;
    text-align:center;
    transform:translate3d(-50%,calc(-50% + var(--process-side-y)),0) !important;
  }
  .process-orbit{
    top:27%;
    width:92px;
  }
  .process-orbit-ring.ring-one{width:52px;height:52px}
  .process-orbit-ring.ring-two{width:86px;height:86px}
  .process-x-side strong,
  .process-x-side p{
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
  }
  .process-x-counter{
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }

  /* Close / FAQ / footer */
  .close-zone .direct-x-inner,
  .close-zone .before-x-inner,
  .close-zone .final-x-inner{
    width:calc(100vw - 32px);
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .close-zone .before-x-heading{
    text-align:center;
  }
  .close-zone .before-x-items{
    width:100%;
    margin:0 auto;
    text-align:left;
  }
  .close-zone .before-x-items details{
    background:rgba(8,12,13,.18);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .direct-x-copy,
  .final-x-actions small{
    margin-left:auto;
    margin-right:auto;
  }
  .close-zone-progress{
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
  .footer-grid{
    text-align:center;
  }
  .footer-grid > div:first-child,
  .footer-links{
    justify-content:center;
  }
}


/* ==========================================================
   MOBILE PRECISION CENTERING — recording pass
   ========================================================== */
@media(max-width:720px){
  /* Capabilities heading: JS animates Y only, so centering must not depend on translateX. */
  .cap-editorial .cap-heading{
    left:0;
    right:0;
    top:9.5vh;
    width:100%;
    padding:0 20px;
    transform:none;
    text-align:center;
  }

  .cap-editorial .cap-index{
    bottom:82px;
  }

  .cap-editorial .cap-final{
    bottom:116px;
  }

  .cap-progress{
    bottom:82px;
  }

  /* Pull the channel icons inward so the whole network reads as one centered composition. */
  .order-system .node-instagram{
    left:calc(50% - 142px);
    top:calc(50% - 104px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 104px);
    top:calc(50% - 104px);
  }

  .order-system .node-google{
    left:calc(50% - 140px);
    top:calc(50% + 62px);
  }

  .order-system .node-reservas{
    left:calc(50% + 102px);
    top:calc(50% + 62px);
  }

  /* The active plan is treated as the focal card; the persistent mobile CTA replaces the local CTA. */
  .plans-x-stage{
    --plans-mobile-shift:0px;
    transform:translate(-50%,-50%) translateX(var(--plans-mobile-shift));
    transition:transform .18s linear;
  }

  .plans-x-cta{
    display:none !important;
  }

  /* Keep the process column visually centered while retaining its readable left-aligned step text. */
  .process-x-track{
    width:min(330px,84vw);
  }

  .process-x-side{
    width:min(330px,86vw);
  }
}

@media(max-width:430px){
  .order-system .node-instagram{
    left:calc(50% - 132px);
  }

  .order-system .node-whatsapp{
    left:calc(50% + 94px);
  }

  .order-system .node-google{
    left:calc(50% - 130px);
  }

  .order-system .node-reservas{
    left:calc(50% + 92px);
  }
}

/* Conversion V2: reading sections use natural document flow. */
.plans-comparison,.process-overview,.close-flow{
  position:relative;z-index:2;color:#edf2ec;
  background:linear-gradient(180deg,rgba(9,13,14,.72),rgba(9,13,14,.86));
}
.flow-inner{width:min(1180px,calc(100% - 64px));margin-inline:auto;padding-block:88px}
.flow-inner h2{margin:0;font-size:clamp(32px,4.1vw,58px);line-height:1.08;letter-spacing:-.045em;font-weight:600}
.flow-inner h2 span{display:block;color:#a5b4a1}
.comparison-heading{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:36px}
.comparison-heading .plans-banner-cta,.contact-actions a{
  position:static;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:14px 22px;border:1px solid #b2d68e;border-radius:999px;
  background:#b2d68e;color:#10180d;font-size:15px;font-weight:700;text-decoration:none;
  white-space:normal;flex-shrink:0;transform:none;opacity:1;
}
.comparison-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-option{min-width:0;padding:28px 24px;background:rgba(14,22,20,.9);border:1px solid #465346;border-radius:22px}
.plan-option.pro{border-color:#a1c37f}
.plan-option-top{display:flex;justify-content:space-between;gap:12px;color:#b8c9af;font-size:11px;letter-spacing:.08em}
.plan-option-top em{font-style:normal}
.plan-option h3{margin:26px 0 16px;font-size:26px;letter-spacing:-.035em}
.plan-option-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.plan-option-price strong{font-size:clamp(25px,2.6vw,34px);letter-spacing:-.04em}
.plan-option-price small{font-size:14px;color:#c2cdbd}
.plan-option p{min-height:3em;margin:20px 0;color:#d2dbce;font-size:16px;line-height:1.5}
.plan-option ul{margin:0;padding-left:20px;color:#edf2ec;font-size:15px;line-height:1.6}
.plan-option li+li{margin-top:8px}
.process-overview{border-block:1px solid rgba(173,197,156,.18)}
.process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:40px 0 0}
.process-steps li{border-top:1px solid #627459;padding-top:20px}
.process-steps span{color:#b2d68e;font-size:13px}
.process-steps h3{font-size:22px;margin:18px 0 10px}
.process-steps p,.direct-copy{font-size:17px;line-height:1.65;color:#d2dbce;margin:0}
.direct-summary .flow-inner{padding-bottom:72px}
.direct-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:28px 0 20px;color:#b2d68e;font-size:13px}
.direct-copy{max-width:680px;margin-bottom:24px}
.direct-summary a{color:#dbe8d2;text-underline-offset:5px;line-height:1.5}
.faq-summary{border-block:1px solid rgba(173,197,156,.18)}
.faq-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:64px}
.faq-heading>p,.contact-summary .flow-inner>p{color:#b2d68e;font-size:12px;letter-spacing:.12em;margin:0 0 20px}
.faq-items details{border-bottom:1px solid #52604d;padding:4px 0}
.faq-items summary{cursor:pointer;padding:20px 0;font-size:18px;font-weight:600;line-height:1.5;scroll-margin-block:100px}
.faq-items summary span{color:#b2d68e;font-size:12px;margin-right:10px}
.faq-items details p{font-size:16px;line-height:1.65;color:#d2dbce;margin:0 0 24px}
.contact-actions{display:flex;align-items:center;gap:32px;margin-top:36px}
.contact-actions small{max-width:500px;color:#d2dbce;font-size:14px;line-height:1.7}
.flow-inner a:focus-visible,.faq-items summary:focus-visible,.cap-tab:focus-visible{outline:3px solid #e0f4c2;outline-offset:6px}
@media(max-width:900px){
  .comparison-grid{grid-template-columns:1fr}
  .plan-option p{min-height:0}
  .comparison-heading{align-items:flex-start;flex-direction:column;gap:24px}
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-layout{grid-template-columns:1fr;gap:28px}
}
@media(max-width:600px){
  .flow-inner{width:calc(100% - 40px);padding-block:60px}
  .plan-option{padding:26px 24px}
  .process-steps{grid-template-columns:1fr;gap:24px;margin-top:32px}
  .process-steps h3{margin-top:12px}
  .contact-actions{align-items:flex-start;flex-direction:column;gap:22px}
  .contact-summary .flow-inner{padding-bottom:88px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cap-editorial .cap-layer,.cap-editorial .cap-layer *{animation:none!important;transition:none!important}
  .cap-focus-copy,.cap-tab{transition:none!important}
}