@font-face {
  font-family:SGT;
  src:local('Arial');
  font-display:swap
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:130px
}
body {
  margin:0;
  background:#fff;
  color:#23202c;
  font-family:SGT,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
body.is-loading {
  overflow:hidden
}
::selection {
  background:#f4c5d8
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:focus-visible,a:focus-visible {
  outline:3px solid #a1459c;
  outline-offset:5px
}
input:focus,textarea:focus,select:focus {
  outline:2px solid #a1459c;
  outline-offset:2px
}
svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.svg-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.container {
  max-width:1280px;
  width:calc(100% - 200px);
  margin-inline:auto
}
.gradient-text {
  background:linear-gradient(105deg,#ff771e 3%,#f35052 44%,#71358c 95%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  letter-spacing:-.05em
}
h2 {
  font-size:clamp(44px,5vw,76px);
  line-height:1.05;
  font-weight:700
}
p {
  color:#72717e;
  line-height:1.65
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:0;
  border-radius:100px;
  padding:18px 29px;
  font-size:16px;
  font-weight:500;
  min-height:54px;
  transition:transform .25s,box-shadow .25s,background .25s
}
.button svg {
  width:18px;
  height:18px
}
.button:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 24px #2920351b
}
.button-orange {
  background:#ff711c;
  color:white
}
.button-orange:hover {
  background:#ef6211
}
.button-dark {
  background:#23202c;
  color:#fff
}
.button-whatsapp {
  background:#1faa52;
  color:#fff
}
.button-whatsapp:hover {
  background:#188f45
}
.text-link {
  display:inline-flex;
  gap:14px;
  align-items:center;
  background:none;
  border:0;
  padding:12px 0;
  font-size:16px;
  transition:color .2s
}
.text-link:hover {
  color:#d44d6b
}
.text-link svg {
  width:18px;
  height:18px
}
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:1000;
  padding:16px;
  background:#fff
}
.skip-link:focus {
  top:20px
}
.navbar {
  position:fixed;
  z-index:50;
  left:28px;
  right:28px;
  top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid rgba(225, 221, 234, .72);
  border-radius:20px;
  padding:10px 23px;
  background:rgba(255, 255, 255, .72);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 8px 28px rgba(35, 25, 50, .055), inset 0 1px 0 rgba(255, 255, 255, .8);
  min-height:74px
}
.navbar .brand img {
  mix-blend-mode:normal
}
.brand {
  display:flex;
  align-items:center;
  flex-shrink:0
}
.brand img {
  width:92px;
  height:45px;
  object-fit:contain;
  mix-blend-mode:multiply
}
.navbar nav {
  display:flex;
  gap:44px
}
.navbar nav a {
  font-size:15px;
  position:relative;
  padding-block:14px
}
.navbar nav a:after {
  content:'';
  position:absolute;
  bottom:6px;
  left:0;
  width:0;
  height:2px;
  background:#f77124;
  transition:width .25s
}
.navbar nav a:hover:after {
  width:100%
}
.nav-cta {
  padding:13px 24px;
  min-height:46px
}
.side-nav {
  position:fixed;
  left:22px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:12px 7px;
  border-radius:30px;
  border:1px solid #e5e3e9;
  background:#fffffff2;
  backdrop-filter:blur(16px);
  box-shadow:0 6px 20px #23202c0c;
  z-index:45
}
.side-nav a {
  display:grid;
  place-items:center;
  width:34px;
  height:40px;
  position:relative;
  color:#55505f;
  border-radius:16px
}
.side-nav svg {
  width:19px;
  height:19px
}
.side-nav a.active {
  color:#ff771e;
  background:#fff1e8
}
.side-nav a span {
  position:absolute;
  left:48px;
  font-size:12px;
  background:#23202c;
  color:white;
  padding:7px 11px;
  border-radius:7px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translateX(-4px);
  transition:.2s
}
.side-nav a:hover span,.side-nav a:focus-visible span {
  opacity:1;
  transform:none
}
.hero {
  padding-top:120px;
  min-height:0
}
.hero-main {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  position:relative;
  min-height:640px
}
.hero-copy {
  position:relative;
  z-index:2;
  padding-block:55px
}
.hero h1 {
  font-size:clamp(65px,6.25vw,96px);
  font-weight:750;
  line-height:1.03;
  letter-spacing:-.052em;
  white-space:nowrap
}
.hero-break {
  display:none
}
.hero-copy p {
  font-size:18px;
  max-width:570px;
  margin-top:30px;
  line-height:1.65
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:32px
}
.hero-art {
  position:relative;
  margin-left:14px;
  width:calc(100% + 60px);
  pointer-events:none;
  z-index:1
}
.hero-art img {
  display:block;
  width:100%;
  height:auto;
  max-height:650px;
  object-fit:contain;
  animation:float 7s ease-in-out infinite
}
.capabilities {
  border-top:1px solid #dedde4;
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:space-between;
  padding-top:32px;
  padding-bottom:28px
}
.capabilities>div {
  display:flex;
  gap:16px;
  align-items:center;
  white-space:nowrap;
  font-size:16px
}
.capabilities>i {
  height:1px;
  background:#dedde4;
  width:80px
}
.cap-icon {
  display:grid;
  place-items:center;
  width:55px;
  height:55px;
  background:#f6f6f8;
  border-radius:50%
}
.cap-icon svg {
  width:25px;
  height:25px
}
.scroll-cue {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:#8b8995;
  font-size:10px;
  letter-spacing:.14em;
  padding:15px 0 30px
}
.scroll-cue svg {
  width:16px;
  height:16px;
  animation:nudge 2s infinite
}
.process {
  padding-block:48px 65px;
  position:relative;
  isolation:isolate
}
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:center;
  margin-bottom:85px
}
.section-heading p {
  font-size:21px;
  max-width:360px
}
.roadmap {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:24%;
  row-gap:65px;
  padding:0 9%;
  margin-top:35px
}
.road-line {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  overflow:visible
}
.road-line path {
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke
}
.road-base {
  stroke:url(#road-gradient);
  stroke-dasharray:2 5;
  opacity:.5
}
.road-progress {
  stroke:url(#road-gradient);
  stroke-width:2!important;
  stroke-dasharray:2 5
}
.road-reveal {
  stroke:#fff;
  stroke-width:6!important;
  stroke-dasharray:3000;
  stroke-dashoffset:3000
}
.step {
  position:relative;
  min-height:238px;
  z-index:1;
  background:transparent;
  align-self:start;
  padding-bottom:12px
}
.step:nth-of-type(3) {
  grid-column:2;
  grid-row:2
}
.step:nth-of-type(4) {
  grid-column:1;
  grid-row:2
}
.step:nth-of-type(5) {
  grid-column:1;
  grid-row:3
}
.step:nth-of-type(6) {
  grid-column:2;
  grid-row:3
}
.step-number {
  position:relative;
  display:grid;
  place-items:center;
  width:55px;
  height:55px;
  font-size:19px;
  font-weight:500;
  border:1.5px solid var(--step-color);
  border-radius:50%;
  background:#fff;
  margin-bottom:20px;
  box-shadow:0 0 0 12px #fff
}
.step-label {
  display:block;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.04em;
  margin-bottom:8px
}
.step h3 {
  font-size:17px;
  font-weight:400;
  color:#716a7c;
  margin-bottom:13px
}
.step p {
  font-size:14px;
  line-height:1.65;
  max-width:330px
}
.step-detail {
  display:block;
  font-size:10px;
  letter-spacing:.025em;
  color:var(--step-color);
  margin-top:16px
}
.process-decor {
  position:absolute;
  inset-block:0;
  left:50%;
  width:calc(100vw - 18px);
  transform:translateX(-50%);
  overflow:clip;
  pointer-events:none;
  z-index:-1
}
.process-star {
  position:absolute;
  stroke:none;
  animation:spin 30s linear infinite
}
.star-left {
  left:5%;
  top:34%;
  width:75px;
  height:75px
}
.star-right {
  left:auto;
  right:5%;
  top:46%;
  width:52px;
  height:52px
}
.process-sphere {
  position:absolute;
  width:340px;
  height:340px;
  opacity:.65
}
.sphere-orange {
  left:-190px;
  top:58%;
  transform:rotate(-18deg)
}
.sphere-purple {
  right:-190px;
  top:71%;
  filter:hue-rotate(240deg);
  transform:rotate(22deg)
}
.js .step.reveal {
  transform:none
}
.showcase {
  height:270svh;
  background:#201127;
  color:#fff;
  margin-top:30px;
  position:relative
}
.showcase-sticky {
  position:sticky;
  top:0;
  height:100svh;
  min-height:650px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#201127 url('assets/waves.png') center/cover no-repeat;
  padding:115px 40px 26px
}
.showcase-heading {
  text-align:center;
  z-index:2;
  position:relative
}
.showcase-heading h2 {
  font-size:clamp(42px,4.5vw,67px);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-.055em
}
.showcase-heading p {
  font-size:17px;
  color:#ccc3d0;
  margin-top:20px
}
.laptop-stage {
  width:min(1000px,80vw);
  min-height:0;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin-top:-15px
}
.laptop-stage img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 25px 20px #09030f90)
}
.showcase-bottom {
  text-align:center;
  position:relative;
  z-index:2
}
.unfold-label {
  font-size:10px;
  letter-spacing:.17em;
  border:1px solid #ffffff80;
  border-radius:30px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:12px 22px
}
.unfold-label svg {
  width:13px;
  height:13px
}
.showcase-bottom p {
  font-size:11px;
  letter-spacing:.06em;
  color:#cbbfd0;
  margin-top:14px
}
.frame-track {
  width:140px;
  height:2px;
  background:#ffffff20;
  margin:12px auto 0
}
.frame-track i {
  display:block;
  width:0;
  height:100%;
  background:#f79465
}
.stack {
  padding:100px 0 70px;
  overflow:hidden
}
.stack-title {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px
}
.stack h2 {
  font-size:28px;
  letter-spacing:-.04em;
  font-weight:500
}
.marquee {
  width:100%;
  overflow:hidden;
  margin:45px 0 30px;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)
}
.marquee-track {
  display:flex;
  width:max-content;
  animation:marquee 28s linear infinite
}
.brand-set {
  display:flex;
  align-items:center;
  flex-shrink:0
}
.tech-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 48px;
  height:58px;
  border-right:1px solid #e0dce6;
  font-size:31px;
  font-weight:600;
  letter-spacing:-.055em;
  white-space:nowrap
}
.tech-brand svg {
  width:38px;
  height:38px;
  stroke:none
}
.tech-brand svg g {
  stroke-linecap:round
}
.next-brand {
  font-size:50px;
  font-weight:500;
  letter-spacing:-.07em
}
.next-brand span {
  font-size:31px;
  letter-spacing:-.055em
}
.stripe-brand {
  font-size:42px;
  font-weight:800
}
.stack-caption {
  text-align:center;
  font-size:14px
}
.booking {
  padding-block:78px 84px;
  border-top:1px solid #e2dfe7
}
.booking-panel {
  max-width:640px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}
.booking .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:#a8608f;
  margin:0 0 24px
}
.booking h2 {
  font-size:clamp(38px,3.7vw,56px);
  line-height:1.08;
  letter-spacing:-.055em
}
.booking-lead {
  font-size:17px;
  line-height:1.7;
  color:#6d6478;
  margin-top:20px;
  max-width:430px
}
.booking-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:34px
}
.booking-facts {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 28px;
  width:100%;
  max-width:480px;
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid #e9e5ee;
  list-style:none
}
.booking-facts li {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  color:#6d6478
}
.booking-facts svg {
  width:17px;
  height:17px;
  color:#c1608c
}
.booking-form-wrap label {
  font-size:13px;
  display:block;
  margin:0 0 9px;
  font-weight:500
}
.booking-form-wrap input,.booking-form-wrap textarea,.booking-form-wrap select {
  border:1px solid #dcd9e3;
  border-radius:7px;
  background:white;
  color:#23202c;
  padding:13px 15px;
  width:100%;
  font-size:14px;
  min-width:0;
  margin:0 0 21px;
  transition:border .2s
}
.booking-form-wrap input::placeholder,.booking-form-wrap textarea::placeholder {
  color:#a09aa8
}
.booking-form-wrap input {
  min-height:46px
}
.booking-form-wrap textarea {
  resize:vertical;
  min-height:100px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.form-row>* {
  min-width:0
}
.form-row input,.form-row select {
  height:46px;
  margin-bottom:8px
}
.timezone {
  font-size:11px;
  margin:0 0 20px;
  text-align:right
}
.submit-button {
  width:100%;
  font-size:15px;
  padding:17px 20px
}
.form-note {
  font-size:11px;
  line-height:1.7;
  text-align:center;
  margin-top:15px;
  color:#88808e
}
.booking-result {
  border-top:1px solid #e2dfe7;
  padding-top:25px
}
.result-icon {
  display:grid;
  place-items:center;
  background:#f5e9f2;
  color:#8b3b83;
  border-radius:50%;
  width:50px;
  height:50px;
  font-size:24px;
  margin-bottom:20px
}
.booking-result h3 {
  font-size:28px;
  letter-spacing:-.04em;
  margin-bottom:18px
}
.booking-result p {
  font-size:15px;
  margin-bottom:16px
}
.booking-result .button {
  margin:5px 0 8px
}
.booking-result .text-link {
  display:flex;
  width:max-content;
  font-size:14px
}
.booking-result .form-note {
  text-align:left;
  font-size:11px
}
.footer {
  border-top:1px solid #e2dfe7;
  display:flex;
  align-items:center;
  gap:24px;
  min-height:110px;
  padding-block:25px
}
.footer .brand {
  border-right:1px solid #e2dfe7;
  padding-right:22px
}
.footer p {
  font-size:14px
}
.footer>span {
  margin-left:auto;
  color:#8e8798;
  font-size:12px
}
.back-top {
  width:35px;
  height:35px;
  display:grid;
  place-items:center
}
.back-top svg {
  width:17px;
  height:17px
}
.mobile-only {
  display:none
}
.loader {
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none
}
.js .loader {
  display:block
}
.loader[hidden] {
  display:none
}
.loader-half {
  position:absolute;
  left:0;
  right:0;
  background:#fff;
  transition:transform .55s cubic-bezier(.77,0,.175,1);
  height:50.1%
}
.loader-top {
  top:0;
  border-bottom:1px solid #e9e1eb
}
.loader-bottom {
  bottom:0
}
.loader-center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:min(400px,80vw);
  transition:opacity .3s
}
.loader-center img {
  width:103px;
  height:auto;
  margin-bottom:28px
}
.load-number {
  font-size:13px;
  font-weight:500;
  color:#8d7d99;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  margin-bottom:11px
}
.load-track {
  height:2px;
  background:#efe9f1;
  margin-top:0;
  width:100%
}
.load-track i {
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#ff771e,#e84645,#64337e)
}
.loader-center p {
  font-size:12px;
  margin-top:20px
}
.loader.is-opening .loader-center {
  opacity:0
}
.loader.is-opening .loader-top {
  transform:translateY(-101%)
}
.loader.is-opening .loader-bottom {
  transform:translateY(101%)
}
.js .navbar {
  transform:translateY(-140%);
  opacity:0;
  transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .6s
}
.loaded .navbar {
  transform:none;
  opacity:1
}
.js .hero-copy,.js .hero-art {
  opacity:0;
  transform:translateY(32px);
  transition:opacity 1s,transform 1.2s cubic-bezier(.22,1,.36,1)
}
.loaded .hero-copy {
  opacity:1;
  transform:none;
  transition-delay:.25s
}
.loaded .hero-art {
  opacity:1;
  transform:none;
  transition-delay:.45s
}
.js .side-nav {
  opacity:0;
  transition:opacity .8s .5s
}
.loaded .side-nav {
  opacity:1
}
.js .reveal {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s,transform .8s cubic-bezier(.22,1,.36,1)
}
.js .reveal.visible {
  opacity:1;
  transform:none
}
@keyframes float {
  50% {
    transform:translateY(-12px)
  }
}
@keyframes nudge {
  50% {
    transform:translateY(5px)
  }
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes marquee {
  to {
    transform:translateX(-50%)
  }
}
@media(min-width:1550px) {
  .hero-main {
    min-height:700px
  }
  .hero-art {
    margin-left:0
  }
  .hero h1 {
    font-size:96px
  }
}
@media(max-width:1250px) {
  .container {
    width:calc(100% - 170px)
  }
  .hero-main {
    min-height:590px
  }
  .hero h1 {
    font-size:75px;
    white-space:normal
  }
  .hero-break {
    display:block
  }
  .hero-art {
    width:calc(100% + 50px);
    margin-left:0
  }
  .hero-copy p {
    font-size:16px
  }
  .hero-actions {
    gap:20px;
    flex-wrap:wrap
  }
  .hero-actions .button,.hero-actions .text-link {
    font-size:14px
  }
  .capabilities>i {
    display:none
  }
  .capabilities>div {
    font-size:13px;
    gap:10px
  }
  .cap-icon {
    width:44px;
    height:44px
  }
  .booking h2 {
    font-size:50px
  }
  .roadmap {
    column-gap:20%;
    padding-inline:6%
  }
  .section-heading p {
    font-size:18px;
    max-width:300px
  }
}
@media(max-width:900px) {
  .container {
    width:calc(100% - 120px);
    margin-left:85px;
    margin-right:35px
  }
  /* The container sits 25px right of centre here (85px/35px gutters clear the side dock), so
     centring the full-bleed decor on it pushed its right edge past the viewport and scrolled the
     page sideways. Anchor it to the container's own edges instead of the viewport's midpoint. */
  .process-decor {
    left:-85px;
    right:-35px;
    width:auto;
    transform:none
  }
  .navbar {
    left:18px;
    right:18px;
    padding-inline:16px
  }
  .navbar nav {
    gap:25px
  }
  .side-nav {
    left:16px
  }
  .hero-main {
    grid-template-columns:1fr 1fr;
    min-height:580px
  }
  .hero h1 {
    font-size:60px
  }
  .hero-art {
    width:calc(100% + 15px)
  }
  .hero-actions {
    gap:12px;
    margin-top:22px
  }
  .hero-copy p {
    font-size:15px
  }
  .capabilities {
    gap:18px
  }
  .capabilities>div {
    font-size:12px;
    gap:8px
  }
  .cap-icon {
    width:34px;
    height:34px
  }
  .cap-icon svg {
    width:18px;
    height:18px
  }
  .section-heading {
    gap:35px
  }
  .section-heading h2 {
    font-size:49px
  }
  .section-heading p {
    font-size:16px;
    max-width:260px
  }
  .process {
    padding-top:48px
  }
  .roadmap {
    column-gap:15%;
    padding-inline:3%
  }
  .step-label {
    font-size:24px
  }
  .step-detail {
    font-size:9px
  }
  .showcase-sticky {
    padding-inline:20px
  }
  .showcase-heading p {
    font-size:15px
  }
  .laptop-stage {
    width:92vw
  }
  .booking h2 {
    font-size:41px
  }
  .booking-lead {
    font-size:16px
  }
  .footer {
    gap:15px
  }
  .footer p {
    font-size:12px
  }
  .footer>span {
    font-size:10px
  }
  .form-row {
    gap:10px
  }
}
@media(max-width:650px) {
  html {
    scroll-padding-top:100px
  }
  .container {
    width:calc(100% - 44px);
    margin-inline:22px
  }
  .navbar {
    left:12px;
    right:12px;
    top:12px;
    min-height:64px;
    border-radius:18px;
    padding:6px 12px
  }
  .navbar .brand img {
    width:72px;
    height:36px
  }
  .navbar nav {
    display:none
  }
  .nav-cta {
    min-height:40px;
    padding:10px 17px;
    font-size:13px
  }
  .nav-cta svg {
    width:15px;
    height:15px
  }
  .side-nav {
    top:auto;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    flex-direction:row;
    border-radius:28px;
    padding:5px 9px;
    gap:8px;
    box-shadow:0 6px 30px #23202c1a
  }
  .side-nav a {
    width:40px;
    height:40px
  }
  .side-nav a span {
    display:none
  }
  .hero {
    padding-top:105px;
    min-height:0
  }
  .hero-main {
    display:flex;
    flex-direction:column;
    min-height:0
  }
  .hero-copy {
    padding:30px 0 10px;
    width:100%
  }
  .hero h1 {
    font-size:clamp(45px,11.6vw,74px);
    line-height:1.05;
    letter-spacing:-.05em
  }
  .hero-break {
    display:none
  }
  .hero h1 .gradient-text {
    display:inline
  }
  .hero-copy p {
    font-size:15px;
    max-width:100%;
    margin-top:23px;
    line-height:1.7
  }
  .hero-actions {
    margin-top:25px;
    gap:20px
  }
  .hero-actions .button {
    padding:15px 21px;
    font-size:13px;
    min-height:48px
  }
  .hero-actions .text-link {
    font-size:12px;
    gap:7px
  }
  .hero-art {
    margin:0;
    width:100%;
    max-width:420px;
    height:365px
  }
  .hero-art img {
    height:100%;
    object-fit:contain
  }
  .capabilities {
    padding-block:23px;
    align-items:flex-start;
    gap:12px
  }
  .capabilities>div {
    flex-direction:column;
    align-items:center;
    gap:10px;
    font-size:10px;
    white-space:normal;
    text-align:center;
    line-height:1.5;
    flex:1
  }
  .cap-icon {
    width:38px;
    height:38px
  }
  .scroll-cue {
    font-size:8px;
    gap:8px;
    padding:6px 0 22px
  }
  .process {
    padding-block:32px 40px
  }
  .section-heading {
    display:block;
    margin-bottom:40px
  }
  .section-heading h2 {
    font-size:47px
  }
  .section-heading p {
    font-size:16px;
    max-width:100%;
    margin-top:24px
  }
  .roadmap {
    display:flex;
    flex-direction:column;
    gap:32px;
    padding:0 0 0 26px;
    margin-left:24px;
    border-left:1px dashed #ddbbd2;
    margin-top:45px
  }
  .road-line {
    display:none
  }
  .step {
    min-height:0;
    padding-left:34px;
    background:transparent
  }
  .step-number {
    position:absolute;
    left:-49px;
    top:0;
    width:43px;
    height:43px;
    font-size:15px;
    box-shadow:0 0 0 8px #fff;
    margin:0
  }
  .step-label {
    font-size:25px;
    margin:5px 0 8px
  }
  .step h3 {
    font-size:15px;
    margin-bottom:10px
  }
  .step p {
    font-size:14px;
    max-width:100%
  }
  .step-detail {
    font-size:10px;
    margin-top:12px
  }
  .process-decor {
    display:none
  }
  .showcase {
    height:210svh;
    margin-top:30px
  }
  .showcase-sticky {
    height:100svh;
    min-height:590px;
    padding:100px 15px 88px;
    justify-content:center;
    background-position:center
  }
  .showcase-heading h2 {
    font-size:44px
  }
  .showcase-heading p {
    font-size:13px;
    line-height:1.6;
    margin-top:17px
  }
  .mobile-only {
    display:block
  }
  .laptop-stage {
    width:116%;
    margin-top:-10px;
    max-height:350px;
    min-height:230px;
    flex:1
  }
  .showcase-bottom p {
    font-size:9px;
    letter-spacing:.02em;
    margin-top:13px
  }
  .unfold-label {
    padding:10px 17px;
    font-size:8px
  }
  .stack {
    padding:65px 0 48px
  }
  .stack-title {
    gap:12px;
    padding-inline:22px
  }
  .stack h2 {
    font-size:22px
  }
  .marquee {
    margin:28px 0 23px
  }
  .tech-brand {
    font-size:24px;
    padding:0 28px;
    height:40px;
    gap:10px
  }
  .tech-brand svg {
    width:30px;
    height:30px
  }
  .next-brand {
    font-size:38px
  }
  .next-brand span {
    font-size:24px
  }
  .stripe-brand {
    font-size:34px
  }
  .stack-caption {
    font-size:12px;
    padding-inline:20px
  }
  .booking {
    padding-block:48px 50px
  }
  .booking h2 {
    font-size:38px
  }
  .booking-lead {
    font-size:16px;
    margin-top:16px
  }
  .booking-facts {
    margin-top:34px;
    gap:10px 22px
  }
  .booking-form-wrap input,.booking-form-wrap textarea,.booking-form-wrap select {
    font-size:16px
  }
  .form-row {
    gap:14px
  }
  .booking-form-wrap label {
    font-size:12px
  }
  .timezone {
    font-size:10px
  }
  .footer {
    padding:23px 0 105px;
    flex-wrap:wrap;
    gap:12px;
    min-height:0
  }
  .footer .brand img {
    width:70px;
    height:34px
  }
  .footer .brand {
    padding-right:14px
  }
  .footer p {
    font-size:12px
  }
  .footer>span {
    margin-left:0;
    flex-basis:calc(100% - 50px);
    font-size:10px;
    margin-top:3px
  }
  .back-top {
    margin-left:auto
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .reveal {
    opacity:1!important;
    transform:none!important
  }
  .showcase {
    height:auto
  }
  .showcase-sticky {
    position:relative;
    height:800px;
    min-height:0
  }
  .showcase .laptop-stage {
    min-height:260px
  }
  .marquee-track {
    animation:none
  }
  .unfold-label {
    display:none
  }
  .frame-track {
    display:none
  }
  .loader {
    display:none!important
  }
  .navbar {
    transform:none!important;
    opacity:1!important
  }
  .hero-copy,.hero-art,.side-nav {
    opacity:1!important;
    transform:none!important
  }
  .side-nav {
    transform:translateY(-50%)!important
  }
  .showcase-bottom p {
    display:none
  }
}
@media(max-width:650px) and (prefers-reduced-motion:reduce) {
  .side-nav {
    transform:translateX(-50%)!important
  }
  .showcase-sticky {
    height:650px
  }
}
/* A moving highlight sits over the original orange-to-purple lettering. */ .hero h1 .gradient-text {
  background-image: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.85) 49%, transparent 60%), linear-gradient(105deg, #ff771e 3%, #f35052 44%, #71358c 95%);
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  animation: text-shine 4.8s ease-in-out infinite;
}
@keyframes text-shine {
  0%, 15% {
    background-position: 150% 0, 0 0;
  }
  65%, 100% {
    background-position: -100% 0, 0 0;
  }
}
/* A quiet, repeating signal connects strategy, craft, and launch. */
.capabilities { position:relative; }
.capabilities::before {
  content:''; position:absolute; top:-1px; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,transparent 0%,#ff771e 40%,#e84665 65%,#71358c 85%,transparent);
  transform:scaleX(0); transform-origin:left;
  animation:cap-rail 9s ease-in-out infinite;
}
.capabilities>div { --cap-delay:0s; }
.capabilities>div:nth-of-type(2) { --cap-delay:3s; }
.capabilities>div:nth-of-type(3) { --cap-delay:6s; }
.cap-icon { position:relative; animation:cap-glow 9s ease-in-out var(--cap-delay) infinite; }
.cap-icon::after {
  content:''; position:absolute; inset:-5px; border:1px solid #f1798c; border-radius:50%;
  opacity:0; animation:cap-ring 9s ease-out var(--cap-delay) infinite;
}
.cap-icon svg { animation:cap-lift 9s ease-in-out var(--cap-delay) infinite; }
.capabilities>.network-cable {
  display:block; position:relative; flex:1; min-width:35px; max-width:180px;
  width:auto; height:48px; overflow:visible; background:none;
}
.network-cable svg {display:block;width:100%;height:48px;overflow:visible;}
.network-cable svg * {vector-effect:non-scaling-stroke;}
.cable-sheath {stroke:#ede6ef;stroke-width:6;}
.cable-core {stroke:#c3accb;stroke-width:1.4;}
.cable-return {stroke:#e0d0e5;stroke-width:1;}
.cable-packet {stroke:#ff844c;stroke-width:2.5;stroke-dasharray:16 184;filter:drop-shadow(0 0 3px #fa864a);animation:network-transmit 2.8s linear infinite;}
.packet-return {stroke:#9955d1;stroke-width:1.8;stroke-dasharray:8 192;animation:network-transmit 3.7s linear infinite reverse;filter:drop-shadow(0 0 3px #9955d1);}
.network-cable:nth-of-type(2) .cable-packet {animation-delay:-1.4s;}
.cable-port {fill:#fff;stroke:#bfa5c9;stroke-width:1;}
.port-light {fill:#e78052;stroke:none;animation:network-port 2.8s ease-in-out infinite;}
.receiving-light {fill:#9a58bf;animation-delay:1.4s;}
@keyframes network-transmit {from {stroke-dashoffset:200;} to {stroke-dashoffset:0;}}
@keyframes network-port {0%,100% {opacity:.35;} 45%,65% {opacity:1;}}
@keyframes cap-rail { 0% { transform:scaleX(0);opacity:0; } 8% {opacity:.7;} 85% {transform:scaleX(1);opacity:.7;} 100% {transform:scaleX(1);opacity:0;} }
@keyframes cap-glow { 0%,35%,100% {background:#f6f6f8;color:#23202c;} 10%,24% {background:#fff0e8;color:#df5a38;box-shadow:0 5px 20px #ed786421;} }
@keyframes cap-ring { 0%,35%,100% {opacity:0;transform:scale(.9);} 10% {opacity:.5;} 30% {opacity:0;transform:scale(1.18);} }
@keyframes cap-lift { 0%,35%,100% {transform:translateY(0) rotate(0);} 12% {transform:translateY(-3px) rotate(-8deg);} 24% {transform:translateY(0) rotate(4deg);} }
@media(min-width:651px) {
  .step-number { transition:background .3s,color .3s,box-shadow .3s; }
  .step.is-reached .step-number {
    color:#fff; background:var(--step-color);
    box-shadow:0 0 0 9px #fff,0 0 0 13px color-mix(in srgb,var(--step-color) 18%,transparent),0 0 30px color-mix(in srgb,var(--step-color) 30%,transparent);
  }
}
.about {
  position:relative; isolation:isolate; overflow:hidden; background:#100d18;
  color:#fff; min-height:760px; margin:20px 0 65px;
}
.about-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% center; z-index:-3; }
.about::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#100d18f7 0%,#100d18df 25%,#100d1840 55%,transparent 80%); z-index:-2; }
.about-inner { padding-block:90px 38px; min-height:760px; display:flex; flex-direction:column; justify-content:space-between; }
.about-copy { max-width:480px; }
.eyebrow { font-size:11px; letter-spacing:.18em; font-weight:600; }
.about .eyebrow { display:flex;align-items:center;gap:10px;color:#f5b19b;margin:0 0 28px; }
.eyebrow>span { width:6px;height:6px;border-radius:50%;background:#ff8d5e;box-shadow:0 0 12px #ff8d5e; }
.about h2 { font-size:clamp(45px,4.2vw,66px);line-height:1.08;letter-spacing:-.05em; }
.about h2 span {color:#eeb4ca;}
.about-copy>p:not(.eyebrow) {font-size:16px;line-height:1.8;color:#c4bccf;margin-top:24px;max-width:420px;}
.about .text-link {color:#ffd3c1;font-size:14px;margin-top:22px;}
.about-principles {display:flex;gap:45px;border-top:1px solid #ffffff26;padding-top:24px;margin-top:60px;}
.about-principles span {font-size:12px;color:#e4dbe9;}
.about-principles b {font-size:10px;color:#ce8aab;margin-right:12px;font-weight:400;}
.about-scan {position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;background:linear-gradient(180deg,transparent 45%,#ea80ce20 49.8%,#f5c2eb50 50%,transparent 50.3%);background-size:100% 220%;animation:about-scan 12s linear infinite;}
@keyframes about-scan {from {background-position:0 150%;}to {background-position:0 -100%;}}
.footer-legal {display:flex;gap:20px;align-items:center;font-size:11px;color:#726879;}
.footer-legal a:hover,.legal-note a:hover {color:#c14676;}
.legal-note {margin-top:8px;}
.booking-availability {margin:0 0 18px;}
.booking-availability p {font-size:12px;line-height:1.6;}
.booking-availability .is-error {color:#b33153;}
.booking-availability .text-link {font-size:12px;color:#8d3887;padding:6px 0;}
.booking-form-wrap button:disabled {opacity:.55;cursor:wait;transform:none;box-shadow:none;}
.booking-form-wrap select:disabled {background:#f7f5f8;color:#88808e;}
.booking-honeypot {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.cal-fallback {display:block;text-align:center;font-size:12px;margin-top:16px;color:#8d3887;text-decoration:underline;text-underline-offset:4px;}
.cal-embed #cal-embed-note {margin:0 0 18px;text-align:left;}
/* No border or panel of our own: Cal.com's booker draws its own card, so a wrapper box only framed
   the empty margins either side of it. min-height reserves space during load. */
.cal-embed #cal-embed-frame {min-height:420px;}
.cal-embed #cal-embed-frame iframe {display:block;width:100%;border:0;}
.cal-embed .cal-fallback {margin-top:20px;}

/* Booking modal. Its width is set per mode: the calendar needs 776px+ for Cal.com's horizontal
   layout, while the custom form reads better in a narrow column, so the dialog sizes to whichever
   is in use. Widths stay under the point where Cal.com starts centring its card inside the frame. */
.booking-modal {
  border:0;
  padding:0;
  border-radius:22px;
  background:#fff;
  color:#23202c;
  width:min(560px,calc(100vw - 32px));
  max-width:none;
  max-height:min(880px,calc(100vh - 40px));
  box-shadow:0 30px 90px #29203533;
  overflow:hidden;
}
.booking-modal.is-embed {width:min(860px,calc(100vw - 32px));}
.booking-modal[open] {display:flex;flex-direction:column;}
.booking-modal::backdrop {background:#1a1520c4;}
.booking-modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px 18px;
  border-bottom:1px solid #ece8f0;
}
.booking-modal-head h2 {font-size:20px;letter-spacing:-.035em;}
.booking-modal-head p {font-size:12px;color:#88808e;margin-top:6px;}
.booking-modal-close {
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:1px solid #e5e1ea;
  border-radius:50%;
  background:#fff;
  color:#5d5566;
  display:grid;
  place-items:center;
  transition:background .2s,border-color .2s,color .2s;
}
.booking-modal-close:hover {background:#f6f3f8;border-color:#d5cede;color:#23202c;}
.booking-modal-close svg {width:16px;height:16px;}
.booking-modal-body {overflow-y:auto;padding:24px 24px 28px;}
.booking-modal-body>form {margin-inline:auto;max-width:520px;}
.booking-modal .booking-result {border-top:0;padding-top:0;max-width:520px;margin-inline:auto;}
body.modal-open {overflow:hidden;}
@media (prefers-reduced-motion:no-preference) {
  .booking-modal[open] {animation:modal-in .24s cubic-bezier(.2,.7,.3,1);}
  .booking-modal[open]::backdrop {animation:modal-fade .24s ease-out;}
}
@keyframes modal-in {from {opacity:0;transform:translateY(14px) scale(.985);}to {opacity:1;transform:none;}}
@keyframes modal-fade {from {opacity:0;}to {opacity:1;}}
@media (max-width:650px) {
  .booking-modal,.booking-modal.is-embed {
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    max-width:100vw;
    margin:0;
    border-radius:0;
  }
  .booking-modal-head {padding:16px 18px 14px;}
  .booking-modal-head h2 {font-size:18px;}
  .booking-modal-body {padding:20px 18px 26px;}
}
#booking-reference {overflow-wrap:anywhere;}
.legal-note a,.legal-content p a {text-decoration:underline;text-underline-offset:3px;}
.legal-content {max-width:780px;width:calc(100% - 48px);margin:170px auto 80px;}
.legal-content>.eyebrow {color:#9c4c7e;margin-bottom:22px;}
.legal-content h1 {font-size:clamp(44px,6vw,76px);line-height:1.1;}
.legal-intro {font-size:21px;margin-top:20px;}
.legal-date {font-size:12px;margin:22px 0 50px;}
.legal-content section {border-top:1px solid #e5e0e9;padding:28px 0;}
.legal-content h2 {font-size:23px;letter-spacing:-.025em;line-height:1.4;display:flex;gap:18px;margin-bottom:15px;}
.legal-content h2 span {color:#c56a87;font-size:12px;padding-top:8px;font-weight:400;}
.legal-content section p {font-size:15px;line-height:1.85;}
.legal-page .footer {justify-content:space-between;}
@media(max-width:900px) {
  .about-copy {max-width:390px;}
  .about::before {background:linear-gradient(90deg,#100d18f7,#100d18bb 45%,#100d1830);}
  .about-principles {gap:22px;}
  .footer {flex-wrap:wrap;}
  .footer-legal {gap:16px;}
}
@media(max-width:650px) {
  .side-nav {gap:4px;padding-inline:7px;}
  .about {min-height:880px;margin:8px 0 28px;}
  .about-inner {min-height:880px;padding-block:48px 28px;}
  .about-art {top:auto;bottom:60px;height:500px;object-position:74% center;}
  .about::before {background:linear-gradient(180deg,#100d18 0%,#100d18f5 32%,#100d1850 52%,transparent 68%,#100d18 100%);}
  .about-copy {max-width:100%;}
  .about h2 {font-size:43px;}
  .about-copy>p:not(.eyebrow) {font-size:14px;margin-top:18px;line-height:1.75;}
  .about .eyebrow {margin-bottom:21px;font-size:10px;}
  .about .text-link {font-size:13px;margin-top:12px;}
  .about-principles {gap:10px;justify-content:space-between;margin-top:310px;padding-top:20px;}
  .about-principles span {font-size:10px;max-width:95px;line-height:1.6;}
  .about-principles b {display:block;margin-bottom:5px;}
  .footer-legal {flex-basis:100%;gap:22px;order:3;}
  .legal-page .footer {padding-bottom:30px;}
  .legal-content {margin-top:125px;margin-bottom:45px;}
  .legal-content h2 {font-size:21px;}
  .legal-content section p {font-size:14px;}
}
/* The final node carries a small, continuous corona of electric arcs. */
.electric-node {isolation:isolate;}
.electric-node .number-value {position:relative;z-index:2;}
.electric-field {
  position:absolute;left:-17px;top:-17px;width:calc(100% + 34px);height:calc(100% + 34px);
  overflow:visible;pointer-events:none;z-index:1;fill:none;
}
.electric-halo {stroke:#a15ce0;stroke-width:2;opacity:.22;filter:blur(2px);}
.electric-arc {stroke:#a555de;stroke-width:1.7;stroke-linejoin:miter;filter:drop-shadow(0 0 2px #ae6fe5) drop-shadow(0 0 5px #d8a6f0);transform-origin:50% 50%;}
.arc-one {stroke-dasharray:60 15 25 10 85 105;animation:electric-current 2.6s linear infinite,electric-shiver 1.7s ease-in-out infinite;}
.arc-two {stroke:#dc9cf0;stroke-width:1.3;stroke-dasharray:35 25 75 165;animation:electric-current 3.4s linear infinite reverse,electric-shiver 2.3s ease-in-out -.8s infinite;}
.electric-sparks {stroke:#b975dd;stroke-width:1.2;opacity:.4;animation:electric-shiver 2.1s ease-in-out infinite;}
@keyframes electric-current {to {stroke-dashoffset:-300;}}
@keyframes electric-shiver {0%,100% {opacity:.55;transform:rotate(-2deg) scale(.98);} 45% {opacity:1;transform:rotate(2deg) scale(1.025);} 65% {opacity:.75;transform:rotate(-1deg) scale(1);}}
@media (min-width:651px) and (max-width:1100px) {
  .capabilities {gap:12px;}
  .capabilities>div {white-space:normal;flex-shrink:1;}
  .capabilities>.network-cable {min-width:32px;}
}
@media (max-width:650px) {
  .capabilities>.network-cable {
    position:absolute;top:23px;left:calc(16.666% + 24px);width:calc(33.333% - 48px);
    min-width:0;max-width:none;height:38px;
  }
  .capabilities>.network-cable:nth-of-type(2) {left:calc(50% + 24px);}
  .network-cable svg {height:38px;}
}
@media (prefers-reduced-motion:reduce) {
  .cable-packet {stroke-dashoffset:70;filter:none;}
  .electric-arc {stroke-dashoffset:0;filter:none;opacity:.7;}
  .electric-sparks {opacity:.4;}
}
/* On phones, the connector fills down to stage six, then gently resets. */ @media (max-width:650px) {
  .roadmap::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 21.5px;
    left: -2px;
    width: 3px;
    height: var(--mobile-road-height, 100%);
    border-radius: 3px;
    background: linear-gradient(#ff771e, #e84665 45%, #64337e);
    transform: scaleY(0);
    transform-origin: center top;
    animation: mobile-road-flow 12s linear infinite;
  }
  .step-number {
    animation: mobile-node-pulse 12s linear infinite;
    animation-delay: calc(var(--flow-step, 0) * 1.8s);
  }
}
@keyframes mobile-road-flow {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  75%, 88% {
    transform: scaleY(1);
    opacity: 1;
  }
  97% {
    transform: scaleY(1);
    opacity: 0;
  }
  98%, 100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
@keyframes mobile-node-pulse {
  0%, 15%, 100% {
    background: #fff;
    color: #23202c;
    box-shadow: 0 0 0 8px #fff;
  }
  3%, 10% {
    background: var(--step-color);
    color: #fff;
    box-shadow: 0 0 0 8px #fff, 0 0 0 12px color-mix(in srgb, var(--step-color) 16%, transparent);
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero h1 .gradient-text {
    background-image: linear-gradient(105deg, #ff771e 3%, #f35052 44%, #71358c 95%);
    background-size: 100% 100%;
    background-position: 0 0;
  }
  .roadmap::after {
    display: none;
  }
}

/* Finish pass: consistent typography, quieter detail, and shorter entrances. */
:root {--ease-out:cubic-bezier(.22,.68,0,1);--ink:#25232b;--muted:#706d78;}
html {scrollbar-gutter:stable;}
body {font-family:'Segoe UI',Arial,sans-serif;color:var(--ink);}
h1,h2 {font-weight:600;letter-spacing:-.035em;}
p {color:var(--muted);}
.navbar {border-radius:18px;box-shadow:0 5px 24px #27203006,inset 0 1px 0 #ffffffa0;}
.navbar nav a {font-size:14px;font-weight:500;}
.side-nav {box-shadow:0 4px 16px #23202c06;border-color:#e9e5ec;}
.side-nav a {transition:background .25s,color .25s;}
.button {font-size:15px;font-weight:500;transition:transform .25s var(--ease-out),background .25s,box-shadow .25s;}
.button:hover {transform:translateY(-1px);box-shadow:0 4px 12px #2920350d;}
.button:active {transform:translateY(0);}
.button-whatsapp {background:#fff;color:#38343d;box-shadow:inset 0 0 0 1px #dcd8e1;}
.button-whatsapp svg {color:#258f51;}
.button-whatsapp:hover {background:#f8faf8;box-shadow:inset 0 0 0 1px #b8cabc;}
.hero-main {grid-template-columns:1.1fr 1fr;min-height:600px;gap:22px;}
.hero h1 {font-size:clamp(60px,5.2vw,82px);font-weight:600;line-height:1.08;letter-spacing:-.045em;white-space:normal;}
.hero h1 .gradient-text {background-image:linear-gradient(110deg,transparent 41%,#ffffff70 50%,transparent 59%),linear-gradient(105deg,#ff771e 3%,#f35052 44%,#71358c 95%);animation-duration:8s;}
.hero-break {display:none;}
.hero-copy p {max-width:480px;font-size:17px;line-height:1.75;margin-top:27px;}
.hero-art {width:105%;margin-left:0;}
.hero-art img {max-height:590px;animation:float-settled 10s ease-in-out infinite;}
@keyframes float-settled {50% {transform:translateY(-5px);}}
.hero-actions {margin-top:30px;gap:26px;}
.hero-actions .text-link {font-size:14px;}
.capabilities {padding-block:28px;}
.capabilities>div {font-size:14px;}
.capabilities::before,.cap-icon::after {display:none;}
.cap-icon,.cap-icon svg {animation:none;}
.cap-icon {background:#f7f6f8;color:#605965;}
.cable-sheath {stroke-width:4;opacity:.65;}
.cable-packet {stroke-width:1.8;filter:drop-shadow(0 0 1px #fa864a);animation-duration:4.5s;}
.packet-return {stroke-width:1.4;filter:none;animation-duration:5.5s;}
.scroll-cue {font-size:9px;letter-spacing:.12em;padding-bottom:22px;}
.scroll-cue svg {animation-duration:3.5s;}
.about {margin-top:20px;margin-bottom:72px;}
.about-inner {padding-top:88px;}
.about h2 {font-size:clamp(43px,4.4vw,64px);font-weight:500;letter-spacing:-.035em;line-height:1.1;}
.about h2 span {color:#e2c9da;}
.about-copy>p:not(.eyebrow) {font-size:16px;line-height:1.8;max-width:405px;color:#c6c0cc;}
.about-scan {opacity:.09;animation-duration:18s;}
.about-principles {gap:44px;}
.about-principles b {color:#b894a9;}
.section-heading {margin-bottom:64px;}
.section-heading h2 {font-size:clamp(40px,4.5vw,64px);line-height:1.12;letter-spacing:-.04em;}
.section-heading p {font-size:17px;line-height:1.8;max-width:310px;}
.process-sphere {opacity:.28;}
.process-star {animation:none;opacity:.65;scale:.72;}
.step-label {font-size:25px;font-weight:600;letter-spacing:-.025em;}
.step h3 {font-size:15px;line-height:1.5;}
.step p {font-size:14px;line-height:1.75;}
.step-detail {font-size:11px;line-height:1.7;opacity:.85;}
.step-number {font-size:17px;font-weight:500;}
.electric-halo {opacity:.12;}
.electric-arc {stroke-width:1.35;filter:drop-shadow(0 0 2px #bd87e0);}
.arc-one {animation-duration:3.6s,2.8s;}
.arc-two {animation-duration:4.8s,3.4s;}
.electric-sparks {stroke-width:1;animation-duration:3.6s;}
.showcase-heading h2 {font-size:clamp(42px,4.4vw,64px);letter-spacing:-.035em;line-height:1.12;}
.showcase-heading p {font-size:16px;line-height:1.7;}
.showcase-sticky {background-image:linear-gradient(#17102026,#17102026),url('assets/waves.png');}
.laptop-stage .laptop-blend {position:absolute;inset:0;pointer-events:none;}
.stack h2 {font-size:26px;font-weight:500;letter-spacing:-.025em;}
.tech-brand {font-size:28px;font-weight:600;letter-spacing:-.035em;}
.next-brand {font-size:44px;}
.stripe-brand {font-size:38px;}
.marquee-track {animation-duration:36s;}
.booking h2 {font-size:clamp(44px,4.6vw,64px);font-weight:600;line-height:1.1;letter-spacing:-.04em;}
.booking h2 .gradient-text {color:#746178;background:none;}
.booking-lead {max-width:460px;font-size:17px;line-height:1.8;}
.booking-facts {padding-left:0;}
.booking-modal {border-radius:16px;box-shadow:0 20px 70px #20162833;}
.booking-modal::backdrop {background:#201c287a;backdrop-filter:blur(6px);}
.booking-modal-head h2 {font-weight:600;letter-spacing:-.02em;}
.booking-form-wrap input,.booking-form-wrap textarea,.booking-form-wrap select {border-radius:6px;transition:border-color .2s,box-shadow .2s;}
.js .navbar {transition:transform .65s var(--ease-out),opacity .45s;}
.js .hero-copy,.js .hero-art {transform:translateY(18px);transition:opacity .65s,transform .8s var(--ease-out);}
.loaded .hero-copy,.loaded .hero-art {transform:none;}
.loaded .hero-copy {transition-delay:.08s;}
.loaded .hero-art {transition-delay:.16s;}
.js .reveal {transform:translateY(16px);transition:opacity .6s,transform .7s var(--ease-out);}
.js .reveal.visible {transform:none;}
.js .step.reveal {transform:none;}
@media(min-width:651px) {
  .step.is-reached .step-number {box-shadow:0 0 0 8px #fff,0 0 0 10px color-mix(in srgb,var(--step-color) 13%,transparent);}
}
@media(max-width:1050px) and (min-width:651px) {
  .hero-main {gap:12px;min-height:570px;}
  .hero h1 {font-size:clamp(48px,5.8vw,62px);}
  .hero-copy p {font-size:15px;}
  .hero-art {width:100%;}
  .capabilities>div {font-size:12px;}
}
@media(max-width:650px) {
  .hero-main {min-height:0;gap:0;}
  .hero h1 {font-size:clamp(43px,11.7vw,70px);letter-spacing:-.04em;}
  .hero-copy p {font-size:15px;line-height:1.8;}
  .hero-art {width:100%;height:330px;}
  .hero-actions {gap:20px;}
  .hero-actions .text-link {font-size:12px;}
  .capabilities {padding-block:23px;}
  .capabilities>div {font-size:10px;}
  .about {margin-bottom:40px;}
  .about-inner {padding-top:46px;}
  .about h2 {font-size:42px;}
  .about-copy>p:not(.eyebrow) {font-size:15px;line-height:1.75;}
  .about-principles {gap:14px;}
  .section-heading {margin-bottom:40px;}
  .section-heading h2 {font-size:40px;}
  .section-heading p {max-width:100%;font-size:15px;}
  .step-label {font-size:24px;}
  .step-detail {font-size:10px;}
  .showcase-heading h2 {font-size:42px;}
  .showcase-heading p {font-size:14px;}
  .stack h2 {font-size:24px;}
  .tech-brand {font-size:24px;}
  .stripe-brand {font-size:34px;}
  .next-brand {font-size:38px;}
  .booking h2 {font-size:45px;}
  .booking-lead {font-size:16px;}
  .booking-modal {border-radius:0;}
}
@media(prefers-reduced-motion:reduce) {
  .hero h1 .gradient-text {background-image:linear-gradient(105deg,#ff771e,#f35052 44%,#71358c);}
}

/* Company information and finishing details shared by every page. */
.navbar nav a.active {color:#773f80;}
.navbar nav a.active::after {width:100%;height:1.5px;}
.navbar nav a:focus-visible::after {width:100%;}
.text-link svg,.button svg {transition:transform .25s var(--ease-out);}
.text-link:hover svg,.button:hover svg {transform:translate(2px,-2px);}
.hero-actions .text-link:hover svg {transform:translateY(3px);}
.hero-copy,.hero-art,.section-heading>* {min-width:0;}
.step-detail {color:color-mix(in srgb,var(--step-color) 78%,#25232b);opacity:1;}
.stack {padding-block:80px 72px;}
.stack-title {padding-inline:22px;}
.stack-caption {max-width:500px;margin-inline:auto;padding-inline:22px;line-height:1.7;}
.booking {padding-block:85px 90px;}
.booking-actions {gap:12px;}
.booking-facts {margin-bottom:0;}
.booking-modal-body {overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d8d0de transparent;}
.booking-modal-close {min-width:40px;min-height:40px;}
.booking-form-wrap label {color:#514b59;font-weight:500;}
.booking-form-wrap input:focus,.booking-form-wrap textarea:focus,.booking-form-wrap select:focus {outline:0;border-color:#986c9e;box-shadow:0 0 0 3px #a673af18;}
.site-footer {border-top:1px solid #e4dfe8;background:#fbfafc;padding-block:56px 0;}
.footer-main {display:grid;grid-template-columns:1.2fr .65fr 1fr;gap:64px;padding-bottom:42px;}
.footer-identity .brand {width:max-content;margin-bottom:20px;}
.footer-identity .brand img {width:90px;height:44px;mix-blend-mode:normal;}
.company-name {font-size:17px;font-weight:600;line-height:1.5;color:#312b38;max-width:290px;}
.company-line {font-size:13px;line-height:1.75;margin-top:12px;max-width:250px;}
.footer-label,.company-details dt {font-size:11px;font-weight:600;letter-spacing:.025em;color:#786e80;}
.footer-explore {display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.footer-explore .footer-label {margin-bottom:7px;}
.footer-explore a {font-size:13px;line-height:1.6;padding-block:3px;color:#514859;transition:color .2s;}
.footer-explore a:hover,.footer-top:hover {color:#a74475;}
.company-details {margin:0;}
.company-details>div+div {margin-top:18px;}
.company-details dt {display:flex;gap:10px;align-items:center;margin-bottom:7px;}
.company-details dd {margin:0;font-size:13px;color:#514859;line-height:1.8;}
.company-details address {font-style:normal;}
.sample-tag {font-size:9px;font-weight:500;letter-spacing:0;color:#896b84;background:#efe9f1;border-radius:3px;padding:1px 5px;}
.sample-note {font-size:10px;line-height:1.7;color:#8c8191;margin-top:13px;max-width:280px;}
.footer-bottom {display:flex;align-items:center;gap:28px;border-top:1px solid #e4dfe8;padding-block:22px;}
.footer-bottom>p {font-size:10px;color:#8c8191;margin-right:auto;}
.footer-bottom .footer-legal {font-size:11px;gap:22px;}
.footer-top {display:inline-flex;align-items:center;gap:10px;font-size:11px;color:#665b70;white-space:nowrap;}
.footer-top span {font-size:17px;}
.legal-company {padding:25px 28px;margin:0 0 36px;background:#f8f6fa;border:1px solid #eee8f0;border-radius:10px;}
.legal-company .company-name {max-width:none;margin:8px 0 20px;font-size:18px;}
.legal-company .company-details {display:grid;grid-template-columns:1.2fr 1fr;gap:24px;}
.legal-company .company-details>div+div {margin:0;}
.legal-company .sample-note {max-width:none;}
.legal-date {margin-bottom:30px;}
@media(max-width:1050px) {
  .footer-main {gap:32px;grid-template-columns:1.2fr .8fr 1fr;}
  .footer-bottom {flex-wrap:wrap;gap:16px 24px;}
  .footer-bottom>p {flex-basis:100%;}
  .footer-top {margin-left:auto;}
}
@media(max-width:650px) {
  .side-nav {bottom:calc(12px + env(safe-area-inset-bottom,0px));}
  .step-number,.electric-node.step-number {position:absolute;left:-49px;top:0;}
  .roadmap {border-left-color:transparent;}
  .roadmap::before {content:'';position:absolute;top:21.5px;left:-1px;height:var(--mobile-road-height);border-left:1px dashed #ddbbd2;}
  .step {padding-bottom:4px;}
  .step-label {margin-top:4px;line-height:1.35;}
  .step h3 {margin-bottom:8px;}
  .about {min-height:0;}
  .about-inner {min-height:0;padding-bottom:26px;}
  .about-art {height:440px;bottom:74px;object-position:74% center;}
  .about-principles {margin-top:330px;}
  .stack {padding-block:54px 48px;}
  .booking {padding-block:52px 60px;}
  .booking-actions {width:100%;max-width:340px;}
  .booking-actions .button {flex:1 1 100%;min-height:50px;}
  .booking-facts {font-size:12px;gap:16px;}
  .booking-facts li {font-size:11px;gap:6px;}
  .site-footer {padding-top:38px;padding-bottom:calc(85px + env(safe-area-inset-bottom,0px));}
  .footer-main {grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:30px;}
  .footer-identity {grid-column:1 / -1;}
  .footer-identity .brand {margin-bottom:15px;}
  .company-name {max-width:290px;font-size:18px;}
  .company-line {max-width:none;margin-top:8px;}
  .footer-company {min-width:0;}
  .company-details dd {font-size:12px;overflow-wrap:anywhere;}
  .company-details dt {flex-wrap:wrap;gap:4px 6px;font-size:10px;}
  .footer-explore a {font-size:12px;padding-block:6px;}
  .sample-note {font-size:9px;}
  .footer-bottom {gap:16px 14px;padding-block:20px;}
  .footer-bottom>p {font-size:10px;line-height:1.8;}
  .footer-bottom .footer-legal {flex-basis:auto;order:0;gap:16px;font-size:10px;}
  .footer-top {font-size:10px;}
  .legal-company {padding:22px 20px;}
  .legal-company .company-details {grid-template-columns:1fr;gap:18px;}
  .legal-company .sample-note {font-size:11px;}
  .legal-page .site-footer {padding-bottom:0;}
}
@media(max-width:360px) {
  .hero-actions {gap:9px;}
  .hero-actions .button {padding-inline:17px;}
  .hero-actions .text-link {font-size:11px;}
  .section-heading h2 {font-size:35px;}
  .booking-facts {gap:10px;}
  .footer-main {grid-template-columns:1fr;}
  .footer-identity {grid-column:auto;}
}

/* Viewport-sized desktop entrance and a top-anchored portrait crop. */
@media (min-width:901px) {
  .hero {min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-top:114px;}
  .hero-main {flex:1;min-height:0;}
  .hero-copy {padding-block:30px;}
  .hero-art {width:100%;}
  .hero-art img {height:clamp(220px,calc(100dvh - 300px),590px);}
  .hero .capabilities {flex-shrink:0;padding-block:22px;}
  .hero .scroll-cue {flex-shrink:0;padding-block:10px 22px;}
  .hero + .about {margin-top:0;}
}
.about-art {object-position:65% top;}
@media (max-width:650px) {
  .about-art {object-position:74% top;}
}

/* Shared appearance controls and scroll-aware header, including legal pages. */
.nav-actions {display:flex;align-items:center;gap:14px;}
.theme-toggle {display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid var(--border);border-radius:50%;color:var(--ink);background:var(--surface);transition:background .2s,border-color .2s;}
.theme-toggle:hover {background:var(--surface-raised);border-color:#a877a9;}
.theme-toggle svg {width:20px;height:20px;}
.theme-sun {display:none;}
[data-theme=dark] .theme-sun {display:block;}
[data-theme=dark] .theme-moon {display:none;}
.navbar,.js .navbar {transition:transform .35s var(--ease-out),opacity .3s;}
.navbar.is-scroll-hidden:not(:has(:focus-visible)) {transform:translateY(calc(-100% - 32px));pointer-events:none;}
@media (prefers-reduced-motion:reduce) {
  .navbar.is-scroll-hidden:not(:has(:focus-visible)) {transform:translateY(calc(-100% - 32px))!important;}
}
@media (max-width:650px) {
  .nav-actions {gap:8px;}
  .theme-toggle {width:40px;height:40px;padding:9px;}
}

:root {color-scheme:light;--page:#fff;--surface:#fff;--surface-raised:#f7f5f9;--border:#e4dfe8;--ink:#25232b;--muted:#706d78;}
:root[data-theme=dark] {color-scheme:dark;--page:#100d18;--surface:#1b1625;--surface-raised:#262031;--border:#393043;--ink:#f4eff7;--muted:#b5aabd;}
body {background:var(--page);color:var(--ink);}
[data-theme=dark] ::selection {background:#714365;color:#fff;}
[data-theme=dark] .navbar {background:#1b1625d9;border-color:var(--border);box-shadow:0 5px 24px #00000020,inset 0 1px 0 #ffffff09;}
[data-theme=dark] .navbar nav a.active {color:#e0a5df;}
[data-theme=dark] .side-nav {background:#1b1625ed;border-color:var(--border);box-shadow:0 6px 20px #0003;}
[data-theme=dark] .side-nav a {color:#c2b5cd;}
[data-theme=dark] .side-nav a.active {color:#ffac79;background:#40291f;}
[data-theme=dark] .button-dark {background:#f0e8f6;color:#211729;}
[data-theme=dark] .button-dark:hover {background:#fff;}
[data-theme=dark] .button-whatsapp {background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);}
[data-theme=dark] .button-whatsapp:hover {background:var(--surface-raised);}
[data-theme=dark] .button-whatsapp svg {color:#6bd794;}
[data-theme=dark] .hero h1 .gradient-text {background-image:linear-gradient(110deg,transparent 41%,#ffffff40 50%,transparent 59%),linear-gradient(105deg,#ff8a40 3%,#ff677b 44%,#ba7bdd 95%);}
[data-theme=dark] .capabilities,[data-theme=dark] .booking,[data-theme=dark] .booking-facts,[data-theme=dark] .footer-bottom,[data-theme=dark] .tech-brand,[data-theme=dark] .legal-content section {border-color:var(--border);}
[data-theme=dark] .cap-icon {background:var(--surface-raised);color:#cebdd8;}
[data-theme=dark] .scroll-cue {color:var(--muted);}
[data-theme=dark] .cable-sheath {stroke:#46324f;}
[data-theme=dark] .cable-core {stroke:#9872b1;}
[data-theme=dark] .cable-return {stroke:#715282;}
[data-theme=dark] .cable-port {fill:var(--surface);stroke:#a180b7;}
[data-theme=dark] .step-number {background:var(--page);color:var(--ink);box-shadow:0 0 0 8px var(--page);}
[data-theme=dark] .step h3 {color:#cab9d4;}
[data-theme=dark] .step-detail {color:color-mix(in srgb,var(--step-color) 55%,#f5d8ff);}
[data-theme=dark] .booking h2 .gradient-text {color:#cbb0d5;}
[data-theme=dark] .booking-lead,[data-theme=dark] .booking-facts li,[data-theme=dark] .form-note,[data-theme=dark] .booking-modal-head p {color:var(--muted);}
[data-theme=dark] .booking .eyebrow {color:#d79ac1;}
[data-theme=dark] .booking-modal {background:var(--surface);color:var(--ink);}
[data-theme=dark] .booking-modal-head {border-color:var(--border);}
[data-theme=dark] .booking-modal-close,[data-theme=dark] .booking-form-wrap input,[data-theme=dark] .booking-form-wrap textarea,[data-theme=dark] .booking-form-wrap select {background:var(--page);color:var(--ink);border-color:var(--border);}
[data-theme=dark] .booking-modal-close:hover {background:var(--surface-raised);}
[data-theme=dark] .booking-form-wrap label {color:#d5c9df;}
[data-theme=dark] .booking-form-wrap select:disabled {background:var(--surface-raised);color:var(--muted);}
[data-theme=dark] .booking-availability .is-error {color:#ff97ab;}
[data-theme=dark] .cal-fallback,[data-theme=dark] .booking-availability .text-link {color:#dba0e0;}
[data-theme=dark] .result-icon {background:#42243d;color:#f0c2ee;}
[data-theme=dark] .site-footer {background:#15101e;border-color:var(--border);}
[data-theme=dark] .company-name {color:var(--ink);}
[data-theme=dark] .footer-explore a,[data-theme=dark] .company-details dd,[data-theme=dark] .footer-top,[data-theme=dark] .footer-legal {color:#c9bbd3;}
[data-theme=dark] .footer-label,[data-theme=dark] .company-details dt,[data-theme=dark] .sample-note,[data-theme=dark] .footer-bottom>p {color:var(--muted);}
[data-theme=dark] .sample-tag {background:#302238;color:#d6b0d0;}
[data-theme=dark] .legal-company {background:var(--surface);border-color:var(--border);}
[data-theme=dark] .legal-content>.eyebrow {color:#d79ac1;}
[data-theme=dark] .loader-half,[data-theme=dark] .skip-link {background:var(--page);}
[data-theme=dark] .loader-top {border-color:var(--border);}
[data-theme=dark] .load-track {background:var(--border);}
[data-theme=dark] .load-number {color:var(--muted);}
@media (min-width:651px) {
  [data-theme=dark] .step.is-reached .step-number {background:var(--step-color);color:#fff;box-shadow:0 0 0 8px var(--page),0 0 0 10px color-mix(in srgb,var(--step-color) 30%,transparent);}
}
@media (max-width:650px) {
  [data-theme=dark] .step-number {animation-name:mobile-node-pulse-dark;}
}
@keyframes mobile-node-pulse-dark {
  0%,15%,100% {background:var(--page);color:var(--ink);box-shadow:0 0 0 8px var(--page);}
  3%,10% {background:var(--step-color);color:#fff;box-shadow:0 0 0 8px var(--page),0 0 0 12px color-mix(in srgb,var(--step-color) 30%,transparent);}
}

/* Keep the mobile portrait below the project link. */
@media (max-width:650px) { .about-principles {margin-top:400px;} }

/* Keep the opening sections on one centered, proportional content grid. */
@media (min-width:901px) {
  .hero .container,.about-inner.container {max-width:1600px;width:calc(100% - 200px);}
  .hero-main {grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,72px);}
  .hero h1 {font-size:clamp(48px,4.8vw,92px);}
  .hero-copy p {font-size:18px;max-width:510px;}
  .hero-art {display:flex;align-items:center;justify-content:center;}
  .hero-art img {width:100%;height:clamp(240px,calc(100dvh - 300px),700px);max-height:700px;}
}
.about {min-height:0;margin-top:0;margin-bottom:64px;}
.about::before {display:none;}
.about-inner {
  min-height:0;display:grid;grid-template-columns:1fr 1fr;
  margin-inline:auto;
  align-items:center;column-gap:clamp(32px,4vw,72px);row-gap:40px;
  padding-block:clamp(64px,5vw,96px) 40px;
}
.about-copy {width:100%;max-width:560px;}
.about h2 {font-size:clamp(42px,4vw,72px);}
.about-copy>p:not(.eyebrow) {font-size:18px;max-width:510px;}
.about-visual {
  position:relative;width:100%;height:auto;aspect-ratio:1.15;max-height:640px;
  overflow:hidden;isolation:isolate;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 96%,transparent);
}
.about-visual .about-art {
  position:absolute;inset:0 0 0 auto;width:auto;max-width:none;height:100%;
  object-fit:contain;object-position:right center;z-index:0;
}
.about-principles {
  grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);
  align-items:center;gap:24px;margin-top:0;padding-top:26px;text-align:center;
}
.about-principles span {font-size:13px;max-width:none;}
@media (min-width:651px) and (max-width:1050px) {
  .about-inner {column-gap:28px;}
  .about-copy>p:not(.eyebrow) {font-size:15px;}
  .hero-copy p {font-size:15px;}
}
@media (min-width:651px) and (max-width:900px) {
  .about-inner {grid-template-columns:1fr;}
  .about-copy {max-width:none;}
  .about-visual {max-width:600px;justify-self:center;}
}
@media (max-width:650px) {
  .about {margin-bottom:40px;}
  .about-inner {grid-template-columns:1fr;gap:28px;padding-block:52px 28px;}
  .about-copy {max-width:none;}
  .about h2 {font-size:42px;}
  .about-copy>p:not(.eyebrow) {font-size:15px;}
  .about-visual {height:auto;aspect-ratio:1.05;}
  .about-principles {gap:14px;padding-top:22px;margin-top:0;}
  .about-principles span {font-size:10px;}
  .about-principles b {margin-right:0;}
}