*{margin:0;padding:0;box-sizing:border-box}
:root{
  --dark:#08090d;
  --dark-2:#10131c;
  --dark-3:#18111c;
  --cream:#fff2e3;
  --cream-2:#f8ddbd;
  --warm:#ff7a3d;
  --rose:#ff3f6e;
  --violet:#8d6cff;
  --mint:#51ffd6;
  --text:#f9efe8;
  --muted:rgba(249,239,232,.72);
  --line:rgba(255,255,255,.12);
}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--dark);
  color:var(--text);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  background:
    radial-gradient(circle at 15% 5%,rgba(255,122,61,.24),transparent 30%),
    radial-gradient(circle at 84% 8%,rgba(141,108,255,.18),transparent 28%),
    radial-gradient(circle at 60% 95%,rgba(81,255,214,.08),transparent 26%),
    linear-gradient(180deg,#07080c 0%,#10131c 48%,#08090d 100%);
}
a{text-decoration:none;color:inherit}
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:90;
  opacity:.08;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:4px 4px;
  mix-blend-mode:soft-light;
}
.cursor-glow{
  position:fixed;
  width:390px;
  height:390px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,61,.15),transparent 66%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:-1;
  transition:.08s linear;
}

/* Accessibility */
.accessibility-toggle{
  position:fixed;
  left:18px;
  bottom:92px;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid var(--line);
  background:linear-gradient(135deg,var(--warm),var(--rose));
  color:white;
  z-index:120;
  cursor:pointer;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}
.accessibility-panel{
  position:fixed;
  left:18px;
  bottom:154px;
  width:235px;
  display:none;
  gap:8px;
  padding:14px;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(10,11,15,.92);
  backdrop-filter:blur(18px);
  z-index:120;
  box-shadow:0 25px 80px rgba(0,0,0,.38);
}
.accessibility-panel.open{display:grid}
.accessibility-panel button,.accessibility-panel a{
  display:block;
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px;
  background:rgba(255,255,255,.07);
  color:white;
  text-align:center;
  cursor:pointer;
  font-size:.92rem;
}
body.high-contrast{background:#000!important;color:#fff!important}
body.high-contrast *{background-color:#000!important;color:#fff!important;border-color:#fff!important}
body.underline-links a{text-decoration:underline!important}
body.readable-font{font-family:Verdana,Arial,sans-serif}

/* Cookie */
.cookie-banner{
  position:fixed;
  right:18px;
  bottom:18px;
  width:min(520px,calc(100% - 36px));
  display:none;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(10,11,15,.94);
  backdrop-filter:blur(18px);
  z-index:125;
  box-shadow:0 25px 80px rgba(0,0,0,.42);
}
.cookie-banner.show{display:grid}
.cookie-banner p{font-size:.92rem;color:var(--muted);line-height:1.65}
.cookie-banner a{color:#ffaf73}
.cookie-banner button{
  border:0;
  border-radius:14px;
  padding:12px 18px;
  color:white;
  cursor:pointer;
  font-weight:900;
  background:linear-gradient(135deg,var(--warm),var(--rose));
}

/* Floating WhatsApp */
.floating-whatsapp{
  position:fixed;
  right:18px;
  bottom:92px;
  z-index:118;
  padding:14px 18px;
  border-radius:999px;
  background:#1fc46b;
  color:white;
  font-weight:950;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}

/* PHONE */
.phone-stage{
  position:fixed;
  right:50%;
  top:50%;
  width:min(360px,31vw);
  height:690px;
  z-index:1;
  pointer-events:none;
  perspective:1800px;
  transform:translate(50%,-50%);
  opacity:.72;
}
.phone-3d{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:translate3d(0,-110vh,-160px) rotateX(74deg) rotateY(0deg) rotateZ(22deg) scale(.78);
  filter:drop-shadow(0 60px 80px rgba(0,0,0,.48));
  transition:filter .2s ease;
  will-change:transform;
  backface-visibility:hidden;
}
.phone-body{
  position:absolute;
  inset:0;
  border-radius:54px;
  padding:16px;
  background:
    linear-gradient(145deg,#2e2b36 0%,#07080c 42%,#393541 74%,#050507 100%);
  transform:translateZ(48px);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 13px 0 25px rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.04);
}
.phone-side{position:absolute;background:linear-gradient(180deg,#050507,#332d39);opacity:.98;border-radius:38px}
.phone-left{right:-21px;top:38px;width:44px;height:610px;transform:rotateY(90deg) translateZ(22px)}
.phone-right{left:-21px;top:38px;width:44px;height:610px;transform:rotateY(90deg) translateZ(-314px)}
.phone-top{left:32px;top:-21px;width:296px;height:46px;transform:rotateX(90deg) translateZ(23px)}
.phone-speaker{
  position:absolute;
  top:22px;
  left:50%;
  width:82px;
  height:8px;
  border-radius:999px;
  background:#030305;
  z-index:4;
  transform:translateX(-50%) translateZ(55px);
}
.phone-screen{
  position:relative;
  backface-visibility:hidden;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:42px;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,159,83,.85),transparent 23%),
    radial-gradient(circle at 82% 24%,rgba(255,63,110,.62),transparent 24%),
    radial-gradient(circle at 70% 86%,rgba(81,255,214,.16),transparent 25%),
    linear-gradient(145deg,#24111c 0%,#131829 56%,#07080d 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.screen-aurora{
  position:absolute;
  inset:-35%;
  background:conic-gradient(from 180deg,transparent,#ff7a3d,transparent,#8d6cff,transparent,#51ffd6,transparent);
  opacity:.22;
  animation:auroraSpin 9s linear infinite;
}
@keyframes auroraSpin{to{transform:rotate(360deg)}}
.browser-bar{
  position:absolute;
  top:48px;
  right:24px;
  left:24px;
  height:36px;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
}
.browser-bar span{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.65}
.browser-bar i{font-style:normal;font-size:.67rem;color:rgba(255,255,255,.62);margin-inline-start:auto}
.screen-content{position:absolute;inset:112px 25px 30px}
.screen-content small{font-size:.82rem;font-weight:950;letter-spacing:.16em;color:#ffb078}
.screen-content h4{font-size:2rem;line-height:1.02;margin-top:18px;letter-spacing:-.04em}
.screen-metric{
  margin-top:24px;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(16px);
}
.screen-metric b{font-size:1.6rem;display:block;color:white}
.screen-metric span{font-size:.78rem;color:rgba(255,255,255,.68)}
.screen-row{display:flex;align-items:center;gap:12px;margin-top:20px}
.screen-row em{width:46px;height:46px;border-radius:16px;background:rgba(255,255,255,.16)}
.screen-row strong{height:15px;border-radius:999px;background:rgba(255,255,255,.2);flex:1}
.screen-row.short strong{max-width:66%}
.screen-button{
  position:absolute;
  right:0;
  bottom:0;
  width:155px;
  height:50px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--warm),var(--rose));
  box-shadow:0 18px 35px rgba(255,63,110,.28);
}
.phone-shadow{
  position:absolute;
  left:50%;
  bottom:12px;
  width:82%;
  height:56px;
  border-radius:50%;
  background:rgba(255,122,61,.2);
  filter:blur(23px);
  opacity:0;
  transform:translateX(-50%) scale(.6);
}
.phone-orbit{
  position:absolute;
  inset:6%;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  transform:rotateX(70deg) rotateZ(20deg);
}
.orbit-two{inset:18%;border-color:rgba(255,122,61,.13);animation:orbitPulse 4s ease-in-out infinite}
@keyframes orbitPulse{50%{opacity:.34;transform:rotateX(70deg) rotateZ(35deg) scale(1.06)}}

/* GLOBAL */
section,header,footer{position:relative}
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:30px 7%;
  position:relative;
  z-index:20;
}
.logo{font-weight:950;letter-spacing:.14em;font-size:1.35rem}
.nav-links{
  display:flex;
  gap:7px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
}
.nav-links a{
  padding:12px 15px;
  color:var(--muted);
  border-radius:999px;
  font-size:.9rem;
  transition:.25s;
}
.nav-links a:hover{background:rgba(255,255,255,.08);color:white}
.nav-cta,.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border-radius:18px;
  padding:15px 24px;
  font-weight:900;
  transition:.3s ease;
  text-align:center;
}
.nav-cta,.btn.primary{
  background:linear-gradient(135deg,var(--warm),var(--rose));
  color:white;
  box-shadow:0 20px 50px rgba(255,80,74,.22);
}
.btn.ghost{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
  color:white;
}
.btn.dark{
  background:#121019;
  color:white;
  border:1px solid rgba(0,0,0,.12);
}
.nav-cta:hover,.btn:hover{transform:translateY(-4px)}

.hero{
  min-height:100vh;
  background:
    radial-gradient(circle at 72% 42%,rgba(255,122,61,.14),transparent 28%),
    radial-gradient(circle at 5% 85%,rgba(141,108,255,.14),transparent 28%),
    linear-gradient(180deg,#08090d 0%,#10131c 100%);
  overflow:hidden;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,9,13,.96) 0%,rgba(8,9,13,.86) 38%,rgba(8,9,13,.28) 100%);
}
.hero-layout{
  min-height:calc(100vh - 96px);
  display:grid;
  grid-template-columns:1.12fr .88fr;
  align-items:center;
  padding:20px 7% 90px;
  gap:40px;
  position:relative;
  z-index:10;
}
.hero-copy{max-width:850px;position:relative;z-index:15}
.eyebrow{
  display:inline-block;
  color:#ffaf73;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.82rem;
  font-weight:950;
  margin-bottom:20px;
}
h1{
  font-size:clamp(3rem,6.7vw,7rem);
  line-height:.96;
  letter-spacing:-.07em;
  margin-bottom:28px;
}
.hero-copy p,.section-head p,.contact-copy p{
  font-size:1.14rem;
  line-height:1.95;
  color:var(--muted);
  max-width:710px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}
.hero-proof{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:42px;
  max-width:740px;
}
.hero-proof div,.floating-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(18px);
  border-radius:24px;
  padding:20px;
}
.hero-proof strong,.floating-card b{display:block;margin-bottom:7px}
.hero-proof span,.floating-card span{color:var(--muted);font-size:.92rem;line-height:1.7}
.hero-side{min-height:560px;position:relative;z-index:13}
.floating-card{
  position:absolute;
  width:250px;
  z-index:10;
  animation:floatCard 5s ease-in-out infinite;
}
.card-a{right:5%;top:14%}
.card-b{left:5%;bottom:12%;animation-delay:-2s}
@keyframes floatCard{50%{transform:translateY(-16px) rotate(-2deg)}}

.cta-band{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  padding:34px 7%;
  background:linear-gradient(135deg,#fff2e3,#f8ddbd);
  color:#16110f;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.cta-band span{display:block;color:#a54d25;font-weight:950;margin-bottom:6px}
.cta-band strong{font-size:1.35rem}

.strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,.08);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.strip-item{
  min-height:145px;
  padding:34px 7vw;
  background:#10121a;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.strip-item span{color:#ffaf73;font-weight:950;margin-bottom:10px}
.strip-item strong{font-size:1.35rem}

.services,.process,.packages,.faq,.legal-preview{
  padding:130px 7%;
  background:
    radial-gradient(circle at 85% 0%,rgba(255,122,61,.1),transparent 28%),
    linear-gradient(180deg,#10131c,#08090d);
}
.section-head{max-width:860px;margin-bottom:58px}
.section-head.center{text-align:center;margin-inline:auto}
.section-head h2,.showcase-copy h2,.slice-card h2,.contact-copy h2,.who-card h2{
  font-size:clamp(2.35rem,4.8vw,4.8rem);
  line-height:1.06;
  letter-spacing:-.06em;
  margin-bottom:18px;
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.service-card{
  min-height:360px;
  border:1px solid var(--line);
  border-radius:32px;
  padding:30px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03)),
    radial-gradient(circle at 20% 0%,rgba(255,122,61,.13),transparent 38%);
  box-shadow:0 30px 100px rgba(0,0,0,.22);
  transform-style:preserve-3d;
  transition:.2s ease;
  display:flex;
  flex-direction:column;
}
.service-card:hover{border-color:rgba(255,122,61,.34)}
.service-num{
  width:58px;
  height:58px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--warm),var(--rose));
  font-weight:950;
  margin-bottom:26px;
}
.service-card h3{font-size:1.45rem;margin-bottom:14px}
.service-card p,.faq-list p,.step-card p,.package-card li,.who-card li{
  color:var(--muted);
  line-height:1.8;
}
.service-card a{margin-top:auto;color:#ffaf73;font-weight:950;padding-top:20px}

.who{
  padding:120px 7%;
  background:linear-gradient(135deg,var(--cream),var(--cream-2));
  color:#17110f;
}
.who-card{
  display:grid;
  grid-template-columns:1.05fr .95fr auto;
  gap:34px;
  align-items:center;
  max-width:1220px;
  margin:auto;
  border-radius:42px;
  padding:52px;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 36px 90px rgba(91,43,15,.13);
}
.who-card .eyebrow{color:#cf5729}
.who-card ul{display:grid;gap:12px;list-style:none}
.who-card li{color:#5b463d}
.who-card li:before{content:"✦";color:#cf5729;margin-left:10px}

.dark-showcase{
  padding:140px 7%;
  min-height:760px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  gap:50px;
  background:
    radial-gradient(circle at 68% 22%,rgba(255,122,61,.18),transparent 28%),
    radial-gradient(circle at 20% 82%,rgba(81,255,214,.1),transparent 27%),
    linear-gradient(135deg,#160f18,#101522 55%,#08090d);
}
.showcase-copy{max-width:690px}
.showcase-copy p{color:var(--muted);line-height:1.95;margin-bottom:30px;font-size:1.08rem}
.showcase-actions{display:flex;gap:14px;flex-wrap:wrap}
.showcase-visual{perspective:1200px;min-height:480px}
.browser-window{
  width:min(680px,100%);
  min-height:420px;
  border-radius:34px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),
    radial-gradient(circle at 30% 20%,rgba(255,175,115,.35),transparent 25%),
    linear-gradient(135deg,#201520,#0d1220);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 45px 120px rgba(0,0,0,.38);
  transform:rotateY(-13deg) rotateX(8deg);
  padding:20px;
  animation:windowFloat 6s ease-in-out infinite;
}
@keyframes windowFloat{50%{transform:rotateY(-8deg) rotateX(4deg) translateY(-14px)}}
.window-top{height:42px;display:flex;gap:9px;align-items:center}
.window-top span{width:12px;height:12px;border-radius:50%;background:#fff;opacity:.5}
.window-hero{height:155px;border-radius:26px;background:linear-gradient(135deg,var(--warm),var(--rose));opacity:.9}
.window-lines{display:grid;gap:12px;margin-top:22px}
.window-lines i{height:13px;border-radius:999px;background:rgba(255,255,255,.18)}
.window-lines i:nth-child(2){width:72%}.window-lines i:nth-child(3){width:48%}
.window-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.window-cards b{height:96px;border-radius:24px;background:rgba(255,255,255,.1)}

.light-slice{
  padding:130px 7%;
  background:
    radial-gradient(circle at 10% 10%,rgba(255,122,61,.26),transparent 28%),
    linear-gradient(135deg,var(--cream),var(--cream-2));
  color:#17110f;
}
.slice-card{
  max-width:980px;
  margin:auto;
  border-radius:44px;
  padding:62px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 36px 90px rgba(91,43,15,.13);
}
.slice-card p{max-width:760px;color:#5b463d;font-size:1.12rem;line-height:1.95;margin-bottom:28px}
.slice-card .eyebrow{color:#cf5729}

.timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.timeline-line{
  position:absolute;
  right:0;
  left:0;
  top:40px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--warm),transparent);
  opacity:.5;
}
.step-card{
  position:relative;
  z-index:1;
  border:1px solid var(--line);
  border-radius:30px;
  padding:28px;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(16px);
}
.step-card b{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:20px;
  background:#151820;
  border:1px solid rgba(255,122,61,.35);
  color:#ffaf73;
  margin-bottom:24px;
}
.step-card h3{font-size:1.25rem;margin-bottom:12px}
.section-cta{text-align:center;margin-top:38px}

.package-card{
  max-width:1080px;
  margin:auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr auto;
  gap:36px;
  align-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:38px;
  padding:38px;
  background:
    radial-gradient(circle at 15% 0%,rgba(255,122,61,.16),transparent 28%),
    rgba(255,255,255,.055);
  box-shadow:0 35px 110px rgba(0,0,0,.28);
}
.package-card span{color:#ffaf73;font-weight:950}
.package-card h3{font-size:2rem;line-height:1.15;margin-top:10px}
.package-card ul{list-style:none;display:grid;gap:12px}
.package-card li:before{content:"✦";color:#ffaf73;margin-left:10px}

.faq-list{
  display:grid;
  gap:14px;
  max-width:980px;
}
details{
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px 26px;
  background:rgba(255,255,255,.045);
}
summary{
  cursor:pointer;
  font-size:1.1rem;
  font-weight:950;
}
details p{margin-top:14px}

.legal-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:900px;
  margin:auto;
}
.legal-links a{
  display:grid;
  place-items:center;
  min-height:110px;
  border:1px solid var(--line);
  border-radius:26px;
  background:rgba(255,255,255,.055);
  font-weight:950;
  transition:.25s;
}
.legal-links a:hover{transform:translateY(-6px);border-color:rgba(255,122,61,.35)}

.contact{
  padding:135px 7%;
  background:
    radial-gradient(circle at 16% 18%,rgba(255,122,61,.18),transparent 28%),
    radial-gradient(circle at 82% 90%,rgba(141,108,255,.16),transparent 30%),
    linear-gradient(135deg,#08090d,#18111c);
}
.contact-shell{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:50px;
  align-items:start;
}
.contact-copy{max-width:650px}
.direct-contact{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.direct-contact a{color:#ffaf73;font-weight:950}
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  border:1px solid var(--line);
  border-radius:36px;
  padding:28px;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(18px);
  box-shadow:0 35px 100px rgba(0,0,0,.26);
}
input,textarea,select,button{font:inherit}
input,textarea,select{
  width:100%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:19px;
  padding:18px;
  background:rgba(255,255,255,.07);
  color:white;
  outline:none;
}
select option{color:#111}
textarea{min-height:150px;resize:none;grid-column:1/-1}
.privacy-check{
  grid-column:1/-1;
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:.92rem;
}
.privacy-check input{width:auto}
button{
  grid-column:1/-1;
  border:0;
  border-radius:20px;
  padding:20px;
  cursor:pointer;
  color:white;
  font-weight:950;
  background:linear-gradient(135deg,var(--warm),var(--rose));
  box-shadow:0 20px 50px rgba(255,80,74,.23);
}
::placeholder{color:rgba(255,255,255,.52)}

footer{
  display:flex;
  justify-content:space-between;
  gap:22px;
  padding:42px 7%;
  border-top:1px solid var(--line);
  background:#06070a;
}
footer b{display:block;letter-spacing:.13em;margin-bottom:8px}
footer span{color:var(--muted)}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:white}



/* Testimonials gallery */
.testimonials{
  padding:130px 7%;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,122,61,.14),transparent 28%),
    radial-gradient(circle at 88% 80%,rgba(141,108,255,.12),transparent 30%),
    linear-gradient(180deg,#08090d,#10131c);
  overflow:hidden;
}

.testimonials .section-head strong{
  color:#ffaf73;
  font-weight:950;
}

.testimonial-gallery{
  display:grid;
  grid-template-columns:repeat(6,minmax(180px,1fr));
  gap:18px;
  perspective:1600px;
}

.testimonial-shot{
  position:relative;
  min-height:360px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  box-shadow:0 30px 100px rgba(0,0,0,.26);
  transform-style:preserve-3d;
  transition:transform .45s ease, border-color .35s ease, box-shadow .35s ease;
}

.testimonial-shot:nth-child(1),
.testimonial-shot:nth-child(4){
  transform:translateY(34px) rotate(-2.4deg);
}

.testimonial-shot:nth-child(2),
.testimonial-shot:nth-child(5){
  transform:translateY(-10px) rotate(1.6deg);
}

.testimonial-shot:nth-child(3),
.testimonial-shot:nth-child(6){
  transform:translateY(22px) rotate(-1deg);
}

.testimonial-shot:hover{
  transform:translateY(-18px) rotate(0deg) scale(1.035);
  border-color:rgba(255,122,61,.42);
  box-shadow:0 38px 120px rgba(0,0,0,.34), 0 0 70px rgba(255,122,61,.10);
  z-index:5;
}

.testimonial-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.02);
}

.testimonial-shot span{
  position:absolute;
  right:14px;
  bottom:14px;
  padding:10px 14px;
  border-radius:999px;
  color:white;
  font-size:.84rem;
  font-weight:950;
  background:rgba(8,9,13,.72);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
}

@media(max-width:1180px){
  .testimonial-gallery{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:760px){
  .testimonials{
    padding:88px 6%;
  }

  .testimonial-gallery{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding:10px 0 24px;
    scroll-snap-type:x mandatory;
  }

  .testimonial-shot{
    flex:0 0 78%;
    min-height:430px;
    scroll-snap-align:center;
  }

  .testimonial-shot:nth-child(n){
    transform:none;
  }
}

/* Legal Pages */
.legal-page{
  min-height:100vh;
  padding:34px 7% 100px;
  background:linear-gradient(180deg,#08090d,#10131c);
}
.legal-page .legal-container{
  max-width:980px;
  margin:70px auto 0;
  border:1px solid var(--line);
  border-radius:36px;
  padding:42px;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(18px);
}
.legal-page h1{font-size:clamp(2.4rem,5vw,4.6rem);margin-bottom:20px}
.legal-page h2{margin:34px 0 12px;font-size:1.5rem}
.legal-page p,.legal-page li{color:var(--muted);line-height:1.9}
.legal-page ul{padding-right:22px}
.legal-page .back-home{color:#ffaf73;font-weight:950}



/* Process stacked cards scroll animation */
.process{
  overflow:visible;
}

.process-stack{
  position:relative;
  display:grid;
  gap:0;
  max-width:1040px;
  margin:0 auto;
  padding-bottom:70px;
}

.stack-card{
  position:sticky;
  top:110px;
  min-height:270px;
  display:grid;
  grid-template-columns:96px 1fr;
  gap:26px;
  align-items:start;
  margin-bottom:34px;
  border-radius:34px;
  transform:
    translateY(calc(var(--i) * 18px))
    scale(calc(1 - (var(--i) * .018)));
  background:
    radial-gradient(circle at 8% 0%,rgba(255,122,61,.22),transparent 28%),
    linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
  box-shadow:
    0 30px 100px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  transition:transform .18s linear, opacity .18s linear, filter .18s linear;
  will-change:transform, opacity, filter;
}

.stack-card span{
  display:inline-block;
  color:#ffaf73;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:950;
  margin-bottom:12px;
}

.stack-card h3{
  font-size:clamp(1.7rem,3vw,2.8rem);
  letter-spacing:-.04em;
  margin-bottom:12px;
}

.stack-card p{
  max-width:720px;
  font-size:1.05rem;
}

.stack-card b{
  margin:0;
  width:72px;
  height:72px;
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(255,122,61,.28),rgba(255,63,110,.18)),
    #151820;
  box-shadow:0 18px 50px rgba(255,80,74,.12);
}

.stack-card.is-passed{
  filter:saturate(.86) brightness(.86);
  opacity:.72;
}

.stack-card.is-active{
  border-color:rgba(255,122,61,.42);
  box-shadow:
    0 36px 120px rgba(0,0,0,.36),
    0 0 60px rgba(255,122,61,.08),
    inset 0 0 0 1px rgba(255,255,255,.1);
}

@media(max-width:760px){
  .process-stack{
    padding-bottom:20px;
  }

  .stack-card{
    top:84px;
    min-height:250px;
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:22px;
    transform:
      translateY(calc(var(--i) * 10px))
      scale(calc(1 - (var(--i) * .01)));
  }

  .stack-card b{
    width:58px;
    height:58px;
    border-radius:18px;
  }
}

@media(max-width:1120px){
  .phone-stage{right:50%;top:74%;width:220px;height:430px;opacity:.48;transform:translate(50%,-50%)}
  .hero-layout{grid-template-columns:1fr}
  .hero-side{min-height:330px}
  .service-grid,.timeline{grid-template-columns:repeat(2,1fr)}
  .dark-showcase,.contact-shell,.package-card,.who-card{grid-template-columns:1fr}
  .hero:after{background:linear-gradient(180deg,rgba(8,9,13,.94) 0%,rgba(8,9,13,.84) 55%,rgba(8,9,13,.28) 100%)}
}
@media(max-width:760px){
  .navbar{padding:22px 6%}
  .nav-links,.nav-cta{display:none}
  .hero-layout{padding:20px 6% 70px;min-height:105vh}
  h1{font-size:3.05rem}
  .hero-proof,.strip,.service-grid,.timeline,.contact-form,.legal-links{grid-template-columns:1fr}
  .strip-item{padding:26px 6%}
  .phone-stage{width:162px;height:320px;top:79%;opacity:.42}
  .floating-card{position:relative;width:auto;right:auto;left:auto;top:auto;bottom:auto;margin-top:14px}
  .hero-side{min-height:auto}
  .services,.process,.packages,.faq,.contact,.light-slice,.dark-showcase,.who,.legal-preview{padding:88px 6%}
  .slice-card,.who-card{padding:34px 24px;border-radius:30px}
  .browser-window{transform:none;min-height:330px}
  .window-cards{grid-template-columns:1fr}
  .package-card{padding:26px}
  .cta-band{flex-direction:column;align-items:flex-start}
  .cookie-banner{grid-template-columns:1fr}
  .floating-whatsapp{right:14px;bottom:82px}
  .accessibility-toggle{left:14px;bottom:82px}
  footer{flex-direction:column}
}



/* Unified high-tech background system */
:root{
  --dark:#070a12;
  --dark-2:#0b1020;
  --dark-3:#0f172a;
  --cream:#0b1020;
  --cream-2:#0f172a;
  --warm:#39d7ff;
  --rose:#8d6cff;
  --violet:#7c5cff;
  --mint:#51ffd6;
  --text:#f5f8ff;
  --muted:rgba(229,238,255,.72);
  --line:rgba(129,218,255,.15);
}

body{
  background:#070a12;
}

body:before{
  background:
    radial-gradient(circle at 18% 12%,rgba(57,215,255,.15),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(141,108,255,.14),transparent 28%),
    radial-gradient(circle at 50% 92%,rgba(81,255,214,.10),transparent 30%),
    linear-gradient(180deg,#070a12 0%,#0b1020 46%,#070a12 100%) !important;
}

.tech-bg{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  overflow:hidden;
}

.tech-grid{
  position:absolute;
  inset:-20%;
  background:
    linear-gradient(rgba(57,215,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(57,215,255,.075) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(58deg) translateY(-16%);
  transform-origin:top;
  animation:gridDrift 18s linear infinite;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.22),transparent);
}

@keyframes gridDrift{
  to{background-position:0 72px,72px 0}
}

.code-rain span{
  position:absolute;
  direction:ltr;
  font-family:Consolas,Monaco,monospace;
  font-size:clamp(.72rem,1vw,.95rem);
  color:rgba(129,218,255,.16);
  white-space:nowrap;
  animation:codeFloat 14s ease-in-out infinite;
}

.code-rain span:nth-child(1){top:14%;left:8%;animation-delay:-1s}
.code-rain span:nth-child(2){top:26%;right:6%;animation-delay:-4s}
.code-rain span:nth-child(3){top:48%;left:4%;animation-delay:-7s}
.code-rain span:nth-child(4){top:62%;right:12%;animation-delay:-3s}
.code-rain span:nth-child(5){top:78%;left:18%;animation-delay:-9s}
.code-rain span:nth-child(6){top:88%;right:20%;animation-delay:-6s}

@keyframes codeFloat{
  0%,100%{transform:translate3d(0,0,0);opacity:.12}
  50%{transform:translate3d(0,-22px,0);opacity:.28}
}

.circuit-lines i{
  position:absolute;
  display:block;
  height:1px;
  width:240px;
  background:linear-gradient(90deg,transparent,rgba(81,255,214,.42),transparent);
  animation:circuitMove 7s linear infinite;
  opacity:.25;
}

.circuit-lines i:nth-child(1){top:18%;left:-240px}
.circuit-lines i:nth-child(2){top:36%;right:-240px;animation-delay:-2s}
.circuit-lines i:nth-child(3){top:68%;left:-240px;animation-delay:-4s}
.circuit-lines i:nth-child(4){top:84%;right:-240px;animation-delay:-5s}

@keyframes circuitMove{
  to{transform:translateX(calc(100vw + 480px))}
}

.circuit-lines i:nth-child(even){
  animation-name:circuitMoveReverse;
}

@keyframes circuitMoveReverse{
  to{transform:translateX(calc(-100vw - 480px))}
}

/* Make every section use the same high-tech background */
.hero,
.services,
.process,
.packages,
.faq,
.legal-preview,
.testimonials,
.contact,
.dark-showcase,
.light-slice,
.who,
.legal-page{
  background:
    radial-gradient(circle at 18% 12%,rgba(57,215,255,.11),transparent 30%),
    radial-gradient(circle at 82% 12%,rgba(141,108,255,.10),transparent 30%),
    linear-gradient(180deg,rgba(7,10,18,.96),rgba(11,16,32,.96)) !important;
  color:var(--text) !important;
}

.hero:after{
  background:
    linear-gradient(90deg,rgba(7,10,18,.94) 0%,rgba(7,10,18,.78) 42%,rgba(7,10,18,.24) 100%) !important;
}

.cta-band,
.strip-item{
  background:
    linear-gradient(135deg,rgba(11,16,32,.92),rgba(15,23,42,.92)) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}

.who-card,
.slice-card,
.package-card,
.service-card,
.step-card,
.stack-card,
details,
.contact-form,
.legal-page .legal-container,
.testimonial-shot,
.hero-proof div,
.floating-card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.032)),
    radial-gradient(circle at 20% 0%,rgba(57,215,255,.11),transparent 36%) !important;
  border-color:var(--line) !important;
  box-shadow:0 32px 110px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.035) !important;
  color:var(--text) !important;
}

.service-num,
.step-card b,
.stack-card b,
.nav-cta,
.btn.primary,
button,
.cookie-banner button{
  background:linear-gradient(135deg,#39d7ff,#8d6cff) !important;
  box-shadow:0 20px 55px rgba(57,215,255,.18) !important;
}

.eyebrow,
.strip-item span,
.service-card a,
.package-card span,
.direct-contact a,
.legal-page .back-home,
.cookie-banner a,
.footer-links a:hover,
.who-card .eyebrow,
.slice-card .eyebrow{
  color:#51ffd6 !important;
}

.section-head p,
.hero-copy p,
.contact-copy p,
.service-card p,
.faq-list p,
.step-card p,
.package-card li,
.who-card li,
.slice-card p,
.showcase-copy p,
.legal-page p,
.legal-page li,
footer span{
  color:rgba(229,238,255,.72) !important;
}

.btn.dark{
  background:rgba(255,255,255,.08) !important;
  border:1px solid var(--line) !important;
}

.browser-window,
.phone-screen{
  background:
    radial-gradient(circle at 18% 12%,rgba(57,215,255,.55),transparent 23%),
    radial-gradient(circle at 82% 24%,rgba(141,108,255,.52),transparent 24%),
    radial-gradient(circle at 70% 86%,rgba(81,255,214,.16),transparent 25%),
    linear-gradient(145deg,#08111f 0%,#111827 56%,#05070c 100%) !important;
}

.screen-button,
.window-hero{
  background:linear-gradient(135deg,#39d7ff,#8d6cff) !important;
}

footer{
  background:#05070c !important;
  border-color:var(--line) !important;
}

/* Softer premium motion cards */
.service-card:hover,
.testimonial-shot:hover,
.legal-links a:hover{
  border-color:rgba(81,255,214,.38) !important;
  box-shadow:0 38px 120px rgba(0,0,0,.34),0 0 70px rgba(57,215,255,.10) !important;
}

@media(max-width:760px){
  .tech-grid{
    background-size:54px 54px;
    opacity:.75;
  }

  .code-rain span{
    opacity:.11;
  }
}



/* Hero portrait integration */
.hero-portrait-side{
  position:relative;
  min-height:620px;
  z-index:13;
  isolation:isolate;
}

.hero-portrait-side::before{
  content:"";
  position:absolute;
  inset:2% -6% -4% 0;
  border-radius:44px;
  background:
    radial-gradient(circle at 42% 38%, rgba(57,215,255,.20), transparent 28%),
    radial-gradient(circle at 68% 62%, rgba(141,108,255,.18), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(129,218,255,.10);
  opacity:.78;
  z-index:0;
  pointer-events:none;
  mask-image:linear-gradient(to left, #000 72%, transparent 100%);
}

.hero-portrait-side::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,10,18,.86) 0%, transparent 34%, transparent 72%, rgba(7,10,18,.42) 100%),
    radial-gradient(circle at 42% 42%, transparent 0 31%, rgba(57,215,255,.10) 32%, transparent 48%);
}

.hero-portrait-wrap{
  position:absolute;
  inset:auto 5% -6% auto;
  width:min(430px,82%);
  height:92%;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}

.portrait-glow{
  position:absolute;
  right:50%;
  bottom:8%;
  width:78%;
  height:62%;
  transform:translateX(50%);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(57,215,255,.22), transparent 58%),
    radial-gradient(circle, rgba(141,108,255,.16), transparent 68%);
  filter:blur(20px);
  opacity:.9;
}

.hero-portrait{
  position:relative;
  z-index:2;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:bottom center;
  filter:
    drop-shadow(0 34px 60px rgba(0,0,0,.45))
    drop-shadow(0 0 26px rgba(57,215,255,.10));
  opacity:.96;
}

.hero-portrait-side .floating-card{
  z-index:8;
  box-shadow:
    0 24px 80px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.055) !important;
}

.hero-portrait-side .card-a{
  right:5%;
  top:18%;
}

.hero-portrait-side .card-b{
  right:14%;
  left:auto;
  bottom:14%;
}

@media(max-width:1120px){
  .hero-portrait-side{
    min-height:520px;
  }

  .hero-portrait-wrap{
    right:50%;
    transform:translateX(50%);
    width:min(300px,68%);
    height:80%;
  }

  .hero-portrait-side::before{
    inset:6% 6% 0 6%;
    mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
  }

  .hero-portrait-side .card-a{
    right:6%;
    top:12%;
  }

  .hero-portrait-side .card-b{
    right:auto;
    left:6%;
    bottom:8%;
  }
}

@media(max-width:760px){
  .hero-portrait-side{
    min-height:490px;
    margin-top:12px;
  }

  .hero-portrait-wrap{
    width:min(300px,88%);
    height:88%;
    bottom:-4%;
  }

  .hero-portrait-side::before{
    border-radius:32px;
    inset:8% 0 0 0;
  }

  .hero-portrait-side .floating-card{
    width:min(255px,86%);
    position:absolute;
    margin:0;
  }

  .hero-portrait-side .card-a{
    right:0;
    top:8%;
  }

  .hero-portrait-side .card-b{
    left:0;
    bottom:8%;
  }
}


/* Bigger hero portrait override */
.hero-portrait-side{
  min-height:760px !important;
}

.hero-portrait-wrap{
  width:min(640px,115%) !important;
  height:118% !important;
  right:-4% !important;
  bottom:-12% !important;
}

.hero-portrait{
  height:118% !important;
  max-width:none !important;
  filter:
    drop-shadow(0 50px 90px rgba(0,0,0,.55))
    drop-shadow(0 0 38px rgba(57,215,255,.16)) !important;
}

.portrait-glow{
  width:92% !important;
  height:74% !important;
  opacity:1 !important;
}

.hero-portrait-side .card-a{
  right:2% !important;
  top:14% !important;
}

.hero-portrait-side .card-b{
  right:8% !important;
  bottom:10% !important;
}

@media(max-width:1120px){
  .hero-portrait-side{
    min-height:640px !important;
  }

  .hero-portrait-wrap{
    width:min(520px,105%) !important;
    height:108% !important;
    bottom:-10% !important;
  }

  .hero-portrait{
    height:108% !important;
  }
}

@media(max-width:760px){
  .hero-portrait-side{
    min-height:560px !important;
  }

  .hero-portrait-wrap{
    width:min(390px,115%) !important;
    height:104% !important;
    bottom:-8% !important;
  }

  .hero-portrait{
    height:104% !important;
  }

  .hero-portrait-side .card-a{
    top:4% !important;
  }

  .hero-portrait-side .card-b{
    bottom:4% !important;
  }
}



/* ===== HERO PORTRAIT FIXES ===== */

/* Remove blur/glass overlay from portrait */
.hero-portrait-side::after{
  background:
    linear-gradient(90deg,
      rgba(7,10,18,.55) 0%,
      transparent 22%,
      transparent 82%,
      rgba(7,10,18,.25) 100%) !important;
}

.hero-portrait-side::before{
  backdrop-filter:none !important;
  filter:none !important;
  opacity:.45 !important;
}

/* Make portrait sharp */
.hero-portrait{
  opacity:1 !important;
  image-rendering:auto !important;
  filter:
    drop-shadow(0 40px 70px rgba(0,0,0,.45))
    drop-shadow(0 0 18px rgba(57,215,255,.08)) !important;
}

/* Desktop sizing */
.hero-portrait-wrap{
  overflow:visible !important;
}

.hero-portrait{
  object-fit:contain !important;
  object-position:bottom center !important;
}

/* MOBILE FIX */
@media(max-width:760px){

  .hero-layout{
    overflow:hidden;
  }

  .hero-portrait-side{
    min-height:640px !important;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:visible !important;
  }

  .hero-portrait-wrap{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;

    width:min(430px,100%) !important;
    height:560px !important;

    bottom:-2% !important;

    display:flex !important;
    justify-content:center !important;
    align-items:flex-end !important;
  }

  .hero-portrait{
    width:auto !important;
    height:100% !important;
    max-height:100% !important;
    max-width:100% !important;

    object-fit:contain !important;
    object-position:center bottom !important;
  }

  /* Cards above portrait */
  .hero-portrait-side .floating-card{
    z-index:15 !important;
    backdrop-filter:blur(10px) !important;
  }

  .hero-portrait-side .card-a{
    top:4% !important;
    right:4% !important;
  }

  .hero-portrait-side .card-b{
    bottom:5% !important;
    left:4% !important;
  }
}



/* ===== REMOVE ALL BLUR OVER PORTRAIT ===== */

.hero-portrait-side::before,
.hero-portrait-side::after{
  display:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
  opacity:0 !important;
}

.hero-portrait-wrap{
  isolation:isolate !important;
  overflow:visible !important;
}

.hero-portrait{
  position:relative !important;
  z-index:50 !important;
  opacity:1 !important;

  filter:
    drop-shadow(0 35px 65px rgba(0,0,0,.38))
    drop-shadow(0 0 10px rgba(57,215,255,.05)) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  image-rendering:auto !important;
}

/* Glass only on cards */
.hero-portrait-side .floating-card{
  z-index:60 !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

@media(max-width:760px){

  .hero-portrait-wrap{
    width:min(420px,96vw) !important;
    height:560px !important;
  }

  .hero-portrait{
    height:100% !important;
    width:auto !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    transform:translateZ(0);
  }
}



/* ===== DUO HERO IMAGE ===== */

.hero-portrait-wrap{
  position:absolute;
  inset:auto -4% -8% auto;
  width:min(760px,145%);
  height:115%;
  z-index:3;

  display:flex;
  justify-content:center;
  align-items:flex-end;
}

.hero-duo{
  width:100%;
  height:auto;
  object-fit:contain;

  filter:
    drop-shadow(0 40px 90px rgba(0,0,0,.5));

  opacity:1;

  position:relative;
  z-index:5;
}

.hero-portrait-side::before,
.hero-portrait-side::after{
  display:none !important;
}

.hero-portrait-side{
  min-height:760px !important;
}

.hero-portrait-side .floating-card{
  z-index:20 !important;
}

.hero-portrait-side .card-a{
  top:12% !important;
  right:0 !important;
}

.hero-portrait-side .card-b{
  bottom:8% !important;
  right:8% !important;
  left:auto !important;
}

@media(max-width:760px){

  .hero-portrait-side{
    min-height:640px !important;
  }

  .hero-portrait-wrap{
    width:min(480px,120vw);
    bottom:-2%;
    right:50%;
    transform:translateX(50%);
  }

  .hero-duo{
    width:100%;
  }

  .hero-portrait-side .card-a{
    top:4% !important;
    right:4% !important;
  }

  .hero-portrait-side .card-b{
    bottom:2% !important;
    right:4% !important;
  }
}

/* ===== DEVICES SHOWCASE ===== */

.showcase-visual{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height:650px;
}

.laptop-device{
  position:relative;
  width:720px;

  transform:
    perspective(1800px)
    rotateY(-10deg)
    rotateX(6deg);

  animation:laptopFloat 6s ease-in-out infinite;
}

.laptop-top{
  background:#0b1020;
  border-radius:26px;
  padding:16px;

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 40px 100px rgba(0,0,0,.5);

  overflow:hidden;
}

.laptop-top img{
  width:100%;
  display:block;
  border-radius:16px;
}

.laptop-bottom{
  width:108%;
  height:18px;

  margin:auto;
  margin-top:-2px;

  background:
    linear-gradient(
      90deg,
      #1a2238,
      #2d3b63,
      #1a2238
    );

  border-radius:0 0 30px 30px;

  transform:translateX(-4%);
}

.phone-device{
  position:absolute;

  left:-20px;
  bottom:-10px;

  width:220px;

  background:#070b16;

  border-radius:42px;

  padding:12px;

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 40px 100px rgba(0,0,0,.5);

  overflow:hidden;

  transform:
    perspective(1400px)
    rotateY(18deg)
    rotateX(5deg);

  animation:phoneFloat 5s ease-in-out infinite;
}

.phone-device img{
  width:100%;
  display:block;

  border-radius:30px;
}

.phone-notch{
  position:absolute;

  top:12px;
  left:50%;

  transform:translateX(-50%);

  width:90px;
  height:22px;

  border-radius:999px;

  background:#000;

  z-index:5;
}

@keyframes laptopFloat{
  0%{
    transform:
      perspective(1800px)
      rotateY(-10deg)
      rotateX(6deg)
      translateY(0px);
  }

  50%{
    transform:
      perspective(1800px)
      rotateY(-8deg)
      rotateX(7deg)
      translateY(-12px);
  }

  100%{
    transform:
      perspective(1800px)
      rotateY(-10deg)
      rotateX(6deg)
      translateY(0px);
  }
}

@keyframes phoneFloat{
  0%{
    transform:
      perspective(1400px)
      rotateY(18deg)
      rotateX(5deg)
      translateY(0px);
  }

  50%{
    transform:
      perspective(1400px)
      rotateY(15deg)
      rotateX(6deg)
      translateY(-10px);
  }

  100%{
    transform:
      perspective(1400px)
      rotateY(18deg)
      rotateX(5deg)
      translateY(0px);
  }
}

@media(max-width:980px){

  .showcase-visual{
    min-height:auto;
    padding-top:40px;
  }

  .laptop-device{
    width:100%;
    transform:none;
  }

  .phone-device{
    width:140px;
    left:-10px;
    bottom:-20px;
    transform:none;
  }
}



/* ===== BIGGER HERO PRESENCE ===== */

.hero-layout{
  align-items:stretch !important;
}

.hero-side.hero-portrait-side{
  flex:1 1 52% !important;
  max-width:52% !important;
  min-height:920px !important;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;

  overflow:visible !important;
}

.hero-portrait-wrap{
  position:absolute !important;

  left:-10% !important;
  right:auto !important;

  bottom:-6% !important;

  width:min(980px,165%) !important;
  height:132% !important;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
}

.hero-duo{
  width:100% !important;
  max-width:none !important;

  transform:scale(1.12) !important;

  filter:
    drop-shadow(0 60px 120px rgba(0,0,0,.58))
    drop-shadow(0 0 20px rgba(57,215,255,.08)) !important;
}

.hero-portrait-side .card-a{
  top:10% !important;
  right:4% !important;
}

.hero-portrait-side .card-b{
  bottom:6% !important;
  right:14% !important;
}

/* ===== MOBILE ===== */

@media(max-width:760px){

  .hero-side.hero-portrait-side{
    max-width:100% !important;
    min-height:760px !important;
  }

  .hero-portrait-wrap{
    left:50% !important;
    transform:translateX(-50%) !important;

    width:min(700px,170vw) !important;
    height:128% !important;

    bottom:-4% !important;
  }

  .hero-duo{
    width:100% !important;
    transform:scale(1.22) !important;
  }

  .hero-portrait-side .floating-card{
    z-index:30 !important;
  }

  .hero-portrait-side .card-a{
    top:3% !important;
    right:2% !important;
  }

  .hero-portrait-side .card-b{
    bottom:2% !important;
    right:2% !important;
  }
}



/* ===== FINAL HERO DUO POSITION - LIKE MOCKUP ===== */

.hero-layout{
  grid-template-columns:42% 58% !important;
  align-items:center !important;
  gap:0 !important;
}

.hero-side.hero-portrait-side{
  position:relative !important;
  min-height:760px !important;
  max-width:none !important;
  overflow:visible !important;
  z-index:12 !important;
}

.hero-copy{
  z-index:20 !important;
}

.hero-portrait-wrap{
  position:absolute !important;

  left:-2% !important;
  right:auto !important;
  bottom:-3% !important;

  width:min(620px,125%) !important;
  height:auto !important;

  transform:none !important;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
}

.hero-duo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;

  transform:none !important;
  transform-origin:left bottom !important;

  opacity:1 !important;

  filter:
    drop-shadow(0 45px 90px rgba(0,0,0,.56))
    drop-shadow(0 0 18px rgba(57,215,255,.08)) !important;
}

.hero-portrait-side::before,
.hero-portrait-side::after{
  display:none !important;
}

/* Cards stay over the image, like the mockup */
.hero-portrait-side .floating-card{
  z-index:40 !important;
  width:250px !important;
}

.hero-portrait-side .card-a{
  top:17% !important;
  right:9% !important;
  left:auto !important;
}

.hero-portrait-side .card-b{
  bottom:10% !important;
  right:18% !important;
  left:auto !important;
}

/* Tablet */
@media(max-width:1120px){
  .hero-layout{
    grid-template-columns:1fr !important;
  }

  .hero-side.hero-portrait-side{
    min-height:650px !important;
  }

  .hero-portrait-wrap{
    left:50% !important;
    bottom:-2% !important;
    width:min(560px,105vw) !important;
    transform:translateX(-50%) !important;
    justify-content:center !important;
  }

  .hero-portrait-side .card-a{
    top:7% !important;
    right:7% !important;
  }

  .hero-portrait-side .card-b{
    bottom:6% !important;
    left:7% !important;
    right:auto !important;
  }
}

/* Mobile */
@media(max-width:760px){
  .hero-side.hero-portrait-side{
    min-height:640px !important;
  }

  .hero-portrait-wrap{
    width:min(520px,128vw) !important;
    bottom:-2% !important;
  }

  .hero-duo{
    width:100% !important;
  }

  .hero-portrait-side .floating-card{
    width:min(245px,78vw) !important;
  }

  .hero-portrait-side .card-a{
    top:5% !important;
    right:3% !important;
  }

  .hero-portrait-side .card-b{
    bottom:4% !important;
    left:3% !important;
    right:auto !important;
  }
}



/* ===== HERO FULL LEFT SIDE IMAGE ===== */

.hero-portrait-wrap{
  position:absolute !important;
  left:-8% !important;
  bottom:-6% !important;

  width:52vw !important;
  max-width:920px !important;
  min-width:720px !important;

  height:115% !important;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;

  z-index:5 !important;
}

.hero-duo{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;

  filter:
    drop-shadow(0 45px 90px rgba(0,0,0,.55))
    drop-shadow(0 0 25px rgba(57,215,255,.08)) !important;

  opacity:1 !important;
}

@media(max-width:760px){

  .hero-side.hero-portrait-side{
    min-height:720px !important;
  }

  .hero-portrait-wrap{
    left:50% !important;
    transform:translateX(-50%) !important;

    width:128vw !important;
    min-width:auto !important;
    max-width:none !important;

    bottom:-10% !important;
  }

  .hero-duo{
    width:100% !important;
  }

}



/* =====================================================
   FINAL PREMIUM HERO UPGRADE
   Full-left image, stronger composition, no site-wide changes
===================================================== */

.hero{
  min-height:100vh !important;
  overflow:hidden !important;
  position:relative !important;
}

.hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 18% 55%, rgba(57,215,255,.18), transparent 34%),
    radial-gradient(circle at 62% 18%, rgba(141,108,255,.14), transparent 28%),
    linear-gradient(90deg, rgba(7,10,18,.18) 0%, rgba(7,10,18,.08) 38%, rgba(7,10,18,.72) 78%, rgba(7,10,18,.92) 100%) !important;
}

.hero:after{
  z-index:2 !important;
  background:
    linear-gradient(90deg,
      rgba(7,10,18,.08) 0%,
      rgba(7,10,18,.10) 34%,
      rgba(7,10,18,.48) 56%,
      rgba(7,10,18,.94) 100%) !important;
}

.hero-layout{
  position:relative !important;
  z-index:10 !important;
  display:grid !important;
  grid-template-columns:48% 52% !important;
  min-height:calc(100vh - 96px) !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:0 7% 0 7% !important;
}

/* In RTL, the aside is visually on the left because it is second in the grid */
.hero-copy{
  align-self:center !important;
  max-width:820px !important;
  z-index:30 !important;
  padding:70px 0 90px !important;
}

.hero-copy h1{
  font-size:clamp(4rem, 6.2vw, 7.2rem) !important;
  line-height:.92 !important;
  letter-spacing:-.075em !important;
  text-shadow:0 28px 80px rgba(0,0,0,.46) !important;
}

.hero-copy p{
  max-width:720px !important;
  font-size:1.18rem !important;
}

.hero-actions{
  margin-top:42px !important;
}

.hero-actions .btn{
  min-height:58px !important;
  padding-inline:28px !important;
}

.hero-proof{
  margin-top:46px !important;
}

/* Full left visual stage */
.hero-side.hero-portrait-side{
  position:relative !important;
  align-self:stretch !important;
  min-height:calc(100vh - 96px) !important;
  height:auto !important;
  max-width:none !important;
  overflow:visible !important;
  z-index:18 !important;
  isolation:isolate !important;
}

.hero-side.hero-portrait-side::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:6% -10% 0 -16% !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:0 44px 0 0 !important;
  background:
    radial-gradient(circle at 48% 50%, rgba(57,215,255,.24), transparent 34%),
    radial-gradient(circle at 35% 78%, rgba(141,108,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
  border:1px solid rgba(129,218,255,.09) !important;
  opacity:.9 !important;
}

.hero-side.hero-portrait-side::after{
  display:none !important;
}

/* Make the people fill the entire left side */
.hero-portrait-wrap{
  position:absolute !important;
  left:-22% !important;
  right:auto !important;
  bottom:-1% !important;

  width:74vw !important;
  max-width:1180px !important;
  min-width:900px !important;
  height:104% !important;

  transform:none !important;
  z-index:8 !important;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  pointer-events:none !important;
  overflow:visible !important;
}

.hero-duo{
  display:block !important;
  width:auto !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:left bottom !important;
  opacity:1 !important;
  transform:none !important;
  filter:
    drop-shadow(0 70px 130px rgba(0,0,0,.62))
    drop-shadow(0 0 28px rgba(57,215,255,.10)) !important;
}

/* Cards float on top, not behind */
.hero-portrait-side .floating-card{
  z-index:40 !important;
  width:270px !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  border-color:rgba(129,218,255,.18) !important;
}

.hero-portrait-side .card-a{
  top:16% !important;
  right:16% !important;
  left:auto !important;
}

.hero-portrait-side .card-b{
  bottom:12% !important;
  right:28% !important;
  left:auto !important;
}

/* Add a premium floor glow under the image */
.hero-portrait-side .portrait-glow{
  display:block !important;
  position:absolute !important;
  left:8% !important;
  right:auto !important;
  bottom:2% !important;
  width:78% !important;
  height:34% !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle, rgba(57,215,255,.20), transparent 58%),
    radial-gradient(circle, rgba(141,108,255,.12), transparent 72%) !important;
  filter:blur(28px) !important;
  opacity:1 !important;
  z-index:1 !important;
}

/* Tablet */
@media(max-width:1120px){
  .hero-layout{
    grid-template-columns:1fr !important;
    padding:0 6% 70px !important;
  }

  .hero-copy{
    padding:60px 0 30px !important;
  }

  .hero-side.hero-portrait-side{
    min-height:720px !important;
  }

  .hero-portrait-wrap{
    left:50% !important;
    transform:translateX(-50%) !important;
    width:118vw !important;
    min-width:auto !important;
    max-width:none !important;
    height:105% !important;
    bottom:-4% !important;
    justify-content:center !important;
  }

  .hero-duo{
    height:100% !important;
    width:auto !important;
    object-position:center bottom !important;
  }

  .hero-portrait-side .card-a{
    top:7% !important;
    right:6% !important;
  }

  .hero-portrait-side .card-b{
    bottom:7% !important;
    left:6% !important;
    right:auto !important;
  }
}

/* Mobile */
@media(max-width:760px){
  .hero{
    min-height:auto !important;
  }

  .hero-layout{
    min-height:auto !important;
    padding:10px 6% 64px !important;
  }

  .hero-copy{
    padding:50px 0 18px !important;
  }

  .hero-copy h1{
    font-size:clamp(3.2rem, 17vw, 4.8rem) !important;
  }

  .hero-side.hero-portrait-side{
    min-height:760px !important;
    margin-top:0 !important;
  }

  .hero-portrait-wrap{
    width:152vw !important;
    height:112% !important;
    bottom:-8% !important;
  }

  .hero-duo{
    height:100% !important;
    width:auto !important;
  }

  .hero-portrait-side .floating-card{
    width:min(250px,78vw) !important;
  }

  .hero-portrait-side .card-a{
    top:4% !important;
    right:2% !important;
  }

  .hero-portrait-side .card-b{
    bottom:4% !important;
    left:2% !important;
    right:auto !important;
  }
}


/* ===== PERFECT MOBILE HERO FIT ===== */

@media(max-width:760px){

  .hero-portrait-wrap{
    width:min(300px,68%) !important;
    height:80% !important;
    bottom:0 !important;
  }

  .hero-duo{
    object-fit:contain !important;
  }

}



/* ===== SECTION ENTRANCE ANIMATIONS - EXCEPT PROCESS ===== */

.section-track:not(.hero):not(.process){
  opacity:0;
  transform:translateY(55px);
  filter:blur(10px);
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.19,1,.22,1),
    filter .9s ease;
  will-change:opacity, transform, filter;
}

.section-track:not(.hero):not(.process).section-visible
{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.section-track:not(.process) .section-head,
.section-track:not(.process) .service-card,
.section-track:not(.process) .who-card,
.section-track:not(.process) .showcase-copy,
.section-track:not(.process) .showcase-visual,
.section-track:not(.process) .slice-card,
.section-track:not(.process) .package-card,
.section-track:not(.process) .faq-list details,
.section-track:not(.process) .testimonial-shot,
.section-track:not(.process) .contact-copy,
.section-track:not(.process) .contact-form,
.section-track:not(.process) .legal-links a,
.section-track:not(.process) .strip-item,
.section-track:not(.process) .cta-band > *{
  opacity:0;
  transform:translateY(34px) scale(.98);
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.19,1,.22,1);
}

.section-track:not(.process).section-visible .section-head,
.section-track:not(.process).section-visible .service-card,
.section-track:not(.process).section-visible .who-card,
.section-track:not(.process).section-visible .showcase-copy,
.section-track:not(.process).section-visible .showcase-visual,
.section-track:not(.process).section-visible .slice-card,
.section-track:not(.process).section-visible .package-card,
.section-track:not(.process).section-visible .faq-list details,
.section-track:not(.process).section-visible .testimonial-shot,
.section-track:not(.process).section-visible .contact-copy,
.section-track:not(.process).section-visible .contact-form,
.section-track:not(.process).section-visible .legal-links a,
.section-track:not(.process).section-visible .strip-item,
.section-track:not(.process).section-visible .cta-band > *{
  opacity:1;
  transform:translateY(0) scale(1);
}

.section-track:not(.process).section-visible .service-card:nth-child(1),
.section-track:not(.process).section-visible .strip-item:nth-child(1),
.section-track:not(.process).section-visible .testimonial-shot:nth-child(1),
.section-track:not(.process).section-visible .faq-list details:nth-child(1){
  transition-delay:.08s;
}

.section-track:not(.process).section-visible .service-card:nth-child(2),
.section-track:not(.process).section-visible .strip-item:nth-child(2),
.section-track:not(.process).section-visible .testimonial-shot:nth-child(2),
.section-track:not(.process).section-visible .faq-list details:nth-child(2){
  transition-delay:.16s;
}

.section-track:not(.process).section-visible .service-card:nth-child(3),
.section-track:not(.process).section-visible .strip-item:nth-child(3),
.section-track:not(.process).section-visible .testimonial-shot:nth-child(3),
.section-track:not(.process).section-visible .faq-list details:nth-child(3){
  transition-delay:.24s;
}

.section-track:not(.process).section-visible .service-card:nth-child(4),
.section-track:not(.process).section-visible .testimonial-shot:nth-child(4),
.section-track:not(.process).section-visible .faq-list details:nth-child(4){
  transition-delay:.32s;
}

.section-track:not(.process).section-visible .testimonial-shot:nth-child(5){
  transition-delay:.40s;
}

.section-track:not(.process).section-visible .testimonial-shot:nth-child(6){
  transition-delay:.48s;
}

.hero.section-track{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

@media(prefers-reduced-motion:reduce){
  .section-track,
  .section-track *{
    transition:none !important;
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
  }
}



/* =====================================================
   FINAL: REMOVE BIG HERO GLASS BOX + SMOOTHER PERFORMANCE
===================================================== */

/* Remove only the big glass panel behind the hero people */
.hero-side.hero-portrait-side::before,
.hero-side.hero-portrait-side::after,
.hero-portrait-side::before,
.hero-portrait-side::after{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
  border:0 !important;
}

/* Keep a premium glow behind the image, not a glass container */
.hero-portrait-wrap::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:4% !important;
  transform:translateX(-50%) !important;
  width:82% !important;
  height:62% !important;
  border-radius:50% !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 45% 55%, rgba(57,215,255,.20), transparent 56%),
    radial-gradient(circle at 58% 42%, rgba(141,108,255,.14), transparent 66%) !important;
  filter:blur(30px) !important;
}

/* Make the image sharp and free, outside any container feeling */
.hero-duo{
  position:relative !important;
  z-index:3 !important;
  opacity:1 !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transform:translateZ(0) !important;
  filter:
    drop-shadow(0 58px 118px rgba(0,0,0,.58))
    drop-shadow(0 0 20px rgba(57,215,255,.08)) !important;
}

/* Cards stay glassy, but only the cards */
.hero-portrait-side .floating-card{
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035)) !important;
}

/* Performance: keep entrance animations, remove expensive full-section blur */
.section-track:not(.process){
  filter:none !important;
  will-change:opacity, transform !important;
}

.section-track:not(.process).section-visible{
  filter:none !important;
}

/* Smooth rendering hints without visual changes */
.hero,
.hero-layout,
.hero-copy,
.hero-portrait-side,
.hero-portrait-wrap,
.hero-duo,
.service-card,
.stack-card,
.testimonial-shot,
.laptop-device,
.phone-device{
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transform-style:preserve-3d;
}

/* Avoid unnecessary repaint pressure */
.tech-bg,
.grain,
.cursor-glow,
.phone-stage{
  pointer-events:none !important;
}

/* Images render smoothly */
img{
  image-rendering:auto;
}

/* Mobile: no glass panel, image fits cleanly */
@media(max-width:760px){
  .hero-portrait-wrap::before{
    width:86% !important;
    height:52% !important;
    bottom:8% !important;
    filter:blur(24px) !important;
  }

  .hero-duo{
    filter:
      drop-shadow(0 42px 82px rgba(0,0,0,.54))
      drop-shadow(0 0 14px rgba(57,215,255,.08)) !important;
  }
}

/* =====================================================
   ALLSET UPDATE: MARKETING POSITIONING + SPEED BOOST
===================================================== */
.marketing-engine{
  position:relative;
  padding:118px 6%;
  z-index:2;
}
.engine-grid{
  width:min(1120px,100%);
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.engine-grid article{
  position:relative;
  overflow:hidden;
  min-height:250px;
  padding:30px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 20% 0%,rgba(57,215,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  box-shadow:0 30px 90px rgba(0,0,0,.28);
}
.engine-grid article::before{
  content:"";
  position:absolute;
  inset:auto -18% -35% auto;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(141,108,255,.22),transparent 68%);
  pointer-events:none;
}
.engine-grid span{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  margin-bottom:24px;
  background:linear-gradient(135deg,#39d7ff,#8d6cff);
  color:#fff;
  font-weight:950;
  box-shadow:0 18px 42px rgba(57,215,255,.18);
}
.engine-grid h3{
  font-size:1.45rem;
  margin-bottom:12px;
}
.engine-grid p{
  color:rgba(229,238,255,.72);
  line-height:1.85;
}

/* The services grid now includes 6 cards */
.service-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Motion performance tuning */
.code-rain span:nth-child(even){display:none;}
.code-rain{opacity:.42;}
.code-rain span{animation-duration:28s !important;}
.circuit-lines i{animation-duration:14s !important;}
.tech-grid{animation-duration:34s !important;}
.screen-aurora{animation-duration:18s !important; opacity:.16 !important;}
.orbit-two{animation-duration:8s !important;}
.floating-card{animation-duration:8s !important;}
.laptop-device,.phone-device{animation-duration:10s !important;}
.cursor-glow{will-change:transform,opacity;}

body.performance-mobile .cursor-glow,
body.performance-mobile .phone-orbit,
body.performance-mobile .code-rain,
body.performance-mobile .circuit-lines{
  display:none !important;
}
body.performance-mobile .screen-aurora,
body.performance-mobile .floating-card,
body.performance-mobile .laptop-device,
body.performance-mobile .phone-device{
  animation:none !important;
}
body.performance-mobile .phone-3d{
  filter:drop-shadow(0 34px 48px rgba(0,0,0,.34)) !important;
}
html.page-hidden *,
html.page-hidden *::before,
html.page-hidden *::after{
  animation-play-state:paused !important;
}

@media(max-width:1120px){
  .engine-grid,.service-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .marketing-engine{padding:88px 6%;}
  .engine-grid,.service-grid{grid-template-columns:1fr;}
  .engine-grid article{min-height:auto;padding:24px;border-radius:26px;}
  .grain{opacity:.045;}
  .tech-grid{opacity:.45;}
}

/* =====================================================
   UPDATE: Solution map stations + smoother transparent 3D phone
===================================================== */
.phone-stage{
  opacity:.54 !important;
  mix-blend-mode:screen;
}
.phone-3d{
  filter:drop-shadow(0 42px 62px rgba(0,0,0,.34)) !important;
}
.phone-body,
.phone-side,
.phone-screen{
  opacity:.88;
}
.journey-map{
  position:relative;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:26px !important;
  padding:34px 10px 8px;
}
.journey-map::before{
  content:"";
  position:absolute;
  top:88px;
  right:8%;
  left:8%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(57,215,255,.12),rgba(57,215,255,.75),rgba(141,108,255,.75),rgba(255,159,83,.72),rgba(57,215,255,.12));
  box-shadow:0 0 28px rgba(57,215,255,.28);
  z-index:0;
}
.journey-station{
  isolation:isolate;
  overflow:visible !important;
  min-height:285px !important;
  padding:34px 26px 28px !important;
  border-radius:34px !important;
  background:
    radial-gradient(circle at 50% -10%,rgba(57,215,255,.16),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028)) !important;
}
.journey-station:nth-child(even){
  transform:translateY(38px);
}
.journey-station::after{
  content:"";
  position:absolute;
  top:-20px;
  right:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  transform:translateX(50%);
  background:#39d7ff;
  box-shadow:0 0 0 9px rgba(57,215,255,.12),0 0 30px rgba(57,215,255,.75);
  z-index:2;
}
.journey-station span{
  position:relative;
  z-index:3;
  width:54px !important;
  height:54px !important;
  margin-bottom:18px !important;
  border:1px solid rgba(255,255,255,.22);
}
.journey-station small{
  display:block;
  margin-bottom:10px;
  color:rgba(57,215,255,.86);
  font-weight:900;
  letter-spacing:.02em;
}
.journey-station h3{
  font-size:1.38rem !important;
}
.journey-station p{
  font-size:.98rem;
}

@media(max-width:1120px){
  .journey-map{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px !important;}
  .journey-map::before{display:none;}
  .journey-station:nth-child(even){transform:none;}
}
@media(max-width:760px){
  .phone-stage{
    top:72% !important;
    width:188px !important;
    height:372px !important;
    opacity:.31 !important;
    perspective:1400px !important;
  }
  .phone-body,.phone-side,.phone-screen{opacity:.82;}
  .phone-3d{filter:drop-shadow(0 28px 38px rgba(0,0,0,.28)) !important;}
  .journey-map{
    grid-template-columns:1fr !important;
    gap:22px !important;
    margin-top:24px !important;
    padding-right:34px;
  }
  .journey-map::before{
    display:block;
    top:38px;
    bottom:38px;
    right:18px;
    left:auto;
    width:3px;
    height:auto;
    background:linear-gradient(180deg,rgba(57,215,255,.15),rgba(57,215,255,.8),rgba(141,108,255,.75),rgba(255,159,83,.7));
  }
  .journey-station{
    min-height:auto !important;
    padding:24px 24px 24px !important;
    border-radius:28px !important;
  }
  .journey-station::after{
    top:32px;
    right:-26px;
    transform:none;
    width:15px;
    height:15px;
  }
  .journey-station span{
    width:46px !important;
    height:46px !important;
  }
}

/* =====================================================
   PREMIUM TWISTED ROADMAP + MORE SUBTLE 3D PHONE
===================================================== */
.phone-stage{
  opacity:.36 !important;
  mix-blend-mode:screen;
}
.phone-3d{
  filter:drop-shadow(0 36px 54px rgba(0,0,0,.30)) !important;
}
.phone-body,
.phone-side,
.phone-screen{
  opacity:.78 !important;
}
.phone-orbit{
  opacity:.38 !important;
}


.premium-roadmap{
  position:relative;
  overflow:hidden;
  padding-top:118px;
  padding-bottom:126px;
}
.premium-roadmap::before{
  content:"";
  position:absolute;
  inset:4% -18%;
  background:
    radial-gradient(circle at 18% 34%,rgba(255,122,61,.12),transparent 28%),
    radial-gradient(circle at 70% 42%,rgba(255,63,110,.10),transparent 30%),
    radial-gradient(circle at 82% 68%,rgba(141,108,255,.11),transparent 30%);
  pointer-events:none;
}
.flight-roadmap{
  position:relative;
  width:min(1180px,94vw);
  height:640px;
  margin:58px auto 0;
  border-radius:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible;
  isolation:isolate;
}
.flight-roadmap::before{
  display:none !important;
}
.road-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.70;
}
.road-shadow,
.road-line,
.road-dash{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.road-shadow{
  stroke:rgba(0,0,0,.34);
  stroke-width:18;
  transform:translateY(10px);
}
.road-line{
  stroke:url(#goldRoadGradient);
  stroke-width:6.5;
  filter:url(#roadGlow);
}
.road-dash{
  stroke:rgba(255,255,255,.30);
  stroke-width:1.4;
  stroke-dasharray:13 22;
  animation:roadDash 11s linear infinite;
}
.road-comet{
  fill:var(--mint);
  filter:drop-shadow(0 0 8px rgba(81,255,214,.95)) drop-shadow(0 0 24px rgba(255,63,110,.50));
}
@keyframes roadDash{to{stroke-dashoffset:-260;}}

.road-station{
  position:absolute;
  z-index:4;
  width:245px;
  min-height:auto;
  padding:0;
  border-radius:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  transform:translate(-50%,-50%);
  transition:transform .35s ease, filter .35s ease;
}
.road-station::before{display:none !important;}
.road-station span{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin:0 0 13px auto;
  border-radius:50%;
  color:#151515;
  background:linear-gradient(135deg,var(--warm),var(--rose) 52%,var(--violet));
  font-weight:1000;
  box-shadow:0 0 22px rgba(255,63,110,.34),0 0 34px rgba(141,108,255,.20);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  opacity:.82;
}
.road-station h3{
  margin:0 0 8px;
  font-size:1.24rem;
  color:var(--cream-2);
  text-shadow:0 3px 14px rgba(0,0,0,.92),0 0 18px rgba(255,122,61,.18);
}
.road-station p{
  margin:0;
  color:rgba(255,255,255,.80);
  line-height:1.72;
  font-size:.96rem;
  text-shadow:0 3px 14px rgba(0,0,0,.96),0 0 18px rgba(0,0,0,.76);
}
.road-station.is-lit,
.road-station:hover{
  transform:translate(-50%,-50%) scale(1.055);
  filter:drop-shadow(0 0 22px rgba(255,63,110,.22)) drop-shadow(0 0 18px rgba(81,255,214,.13));
}
.road-station.is-lit span{animation:stationPulse 1.25s ease both;}
.road-station.is-lit h3{color:#fff2e3;text-shadow:0 0 20px rgba(255,122,61,.35),0 0 28px rgba(141,108,255,.22);}
.road-station.is-lit span{opacity:1;box-shadow:0 0 18px rgba(255,122,61,.75),0 0 34px rgba(255,63,110,.48),0 0 42px rgba(81,255,214,.18);}
@keyframes stationPulse{
  0%,100%{transform:rotate(0deg) scale(1);}
  45%{transform:rotate(-5deg) scale(1.12);}
}
.station-1{left:88%;top:18%;}

.station-2{left:15%;top:25%;}

.station-3{left:24%;top:56%;}

.station-4{left:66%;top:48%;}

.station-5{left:80%;top:76%;}

.station-6{left:18%;top:84%;}
.final-station h3{font-size:1.40rem;color:var(--cream-2);}

@media(max-width:760px){
  .phone-stage{
    top:72% !important;
    width:202px !important;
    height:398px !important;
    opacity:.24 !important;
    perspective:1600px !important;
  }
  .phone-body,.phone-side,.phone-screen{opacity:.70 !important;}
  .phone-orbit{opacity:.24 !important;}
  .phone-3d{filter:drop-shadow(0 25px 34px rgba(0,0,0,.24)) !important;}
  .premium-roadmap{padding:86px 0 96px;}
  .premium-roadmap .section-head{padding-inline:6%;}
  .flight-roadmap{
    width:94vw;
    height:980px;
    margin-top:42px;
    overflow:visible;
  }
  .road-svg{
    width:122%;
    left:-11%;
    opacity:.86;
  }
  .road-shadow{stroke-width:15;}
  .road-line{stroke-width:5.8;}
  .road-dash{stroke-width:1.2;stroke-dasharray:10 18;}
  .road-station{
    width:min(185px,47vw);
    padding:0;
  }
  .road-station span{width:42px;height:42px;margin-bottom:10px;font-size:.9rem;}
  .road-station h3{font-size:1.02rem;line-height:1.25;}
  .road-station p{font-size:.82rem;line-height:1.55;}
  .station-1{left:76%;top:8%;}
  .station-2{left:24%;top:23%;}
  .station-4{left:73%;top:38%;}
  .station-3{left:25%;top:54%;}
  .station-5{left:74%;top:70%;}
  .station-6{left:25%;top:86%;}
}


/* Perfect roadmap light sync update */
.road-comet{
  transition:filter .18s ease;
  transform-box:fill-box;
  transform-origin:center;
}
.road-station{
  opacity:.72;
}
.road-station span,
.road-station h3,
.road-station p{
  transition:color .35s ease, text-shadow .35s ease, opacity .35s ease, transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.road-station.is-lit{
  opacity:1;
}
.road-station.is-lit p{
  color:rgba(255,255,255,.94);
  text-shadow:0 0 16px rgba(255,122,61,.18),0 0 22px rgba(255,63,110,.14),0 4px 16px rgba(0,0,0,.88);
}
.road-station.is-hit span{
  transform:scale(1.18) rotate(-5deg);
  filter:brightness(1.16);
}
.road-station.is-hit h3{
  transform:translateY(-2px);
}
.road-station.is-hit p{
  transform:translateY(-1px);
}

/* Mobile roadmap fit fix */
@media (max-width: 760px){
  .premium-roadmap{
    overflow:hidden;
    padding:82px 0 88px !important;
  }
  .premium-roadmap .section-head{
    padding-inline:5% !important;
  }
  .flight-roadmap{
    width:100% !important;
    max-width:100vw !important;
    height:1040px !important;
    margin:34px auto 0 !important;
    overflow:visible !important;
    box-sizing:border-box;
  }
  .road-svg{
    width:100% !important;
    left:0 !important;
    right:0 !important;
    height:100% !important;
    opacity:.78 !important;
  }
  .road-shadow{stroke-width:12 !important;}
  .road-line{stroke-width:5.2 !important;}
  .road-dash{stroke-width:1 !important;stroke-dasharray:9 16 !important;}
  .road-comet{r:8;}
  .road-station{
    width:42vw !important;
    max-width:168px !important;
    min-width:138px !important;
    box-sizing:border-box;
  }
  .road-station span{
    width:38px !important;
    height:38px !important;
    margin-bottom:8px !important;
    font-size:.82rem !important;
  }
  .road-station h3{
    font-size:.94rem !important;
    line-height:1.22 !important;
    margin-bottom:6px !important;
  }
  .road-station p{
    font-size:.76rem !important;
    line-height:1.48 !important;
  }
  .station-1{left:68% !important;top:8% !important;}
  .station-2{left:32% !important;top:23% !important;}
  .station-3{left:68% !important;top:39% !important;}
  .station-4{left:32% !important;top:55% !important;}
  .station-5{left:68% !important;top:71% !important;}
  .station-6{left:32% !important;top:87% !important;}
}

@media (max-width: 390px){
  .flight-roadmap{height:1080px !important;}
  .road-station{width:40vw !important;min-width:128px !important;}
  .station-1{left:67% !important;}
  .station-2{left:33% !important;}
  .station-4{left:67% !important;}
  .station-3{left:33% !important;}
  .station-5{left:67% !important;}
  .station-6{left:33% !important;}
}


/* ==============================
   ALLSET Premium Intro - stable, JS-driven, no stuck frames
   ============================== */
body.intro-active{
  overflow:hidden;
}
html.intro-skip body.intro-active{
  overflow:auto;
}
html.intro-skip .intro-overlay{
  display:none!important;
}

/* Hide real hero pieces while the intro flies into their exact positions */
html.intro-skip body.intro-active .navbar,
html.intro-skip body.intro-active .hero-copy > .eyebrow,
html.intro-skip body.intro-active .hero-copy > h1,
html.intro-skip body.intro-active .hero-copy > p,
html.intro-skip body.intro-active .hero-actions,
html.intro-skip body.intro-active .hero-proof,
html.intro-skip body.intro-active .hero-side{
  opacity:1!important;
}

body.intro-active .navbar,
body.intro-active .hero-copy > .eyebrow,
body.intro-active .hero-copy > h1,
body.intro-active .hero-copy > p,
body.intro-active .hero-actions,
body.intro-active .hero-proof,
body.intro-active .hero-side{
  opacity:0;
}

.logo.brand-logo{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  line-height:.9;
  letter-spacing:.14em;
}
.logo.brand-logo strong{
  font-size:1.25rem;
  letter-spacing:.16em;
}
.logo.brand-logo small{
  font-size:.55rem;
  letter-spacing:.24em;
  color:var(--mint);
  font-weight:950;
}

.intro-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,122,61,.20),transparent 26%),
    radial-gradient(circle at 82% 18%,rgba(141,108,255,.22),transparent 30%),
    radial-gradient(circle at 54% 88%,rgba(81,255,214,.12),transparent 26%),
    rgba(5,6,10,.985);
  opacity:1;
  visibility:visible;
  will-change:opacity;
}
.intro-overlay.title-docked{
  background:
    radial-gradient(circle at 18% 22%,rgba(255,122,61,.15),transparent 26%),
    radial-gradient(circle at 82% 18%,rgba(141,108,255,.18),transparent 30%),
    radial-gradient(circle at 54% 88%,rgba(81,255,214,.10),transparent 26%),
    rgba(4,5,9,.975);
  transition:background .55s ease;
}
.intro-overlay.is-fading{
  opacity:0;
  visibility:hidden;
  transition:opacity .42s cubic-bezier(.19,1,.22,1), visibility .42s;
}
.intro-noise{
  position:absolute;
  inset:0;
  opacity:.09;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:4px 4px;
  mix-blend-mode:soft-light;
}
.intro-glow{
  position:absolute;
  width:44vw;
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(70px);
  opacity:.24;
  transform:translate3d(0,0,0);
  animation:introGlowFloat 4.8s ease-in-out infinite alternate;
}
.intro-glow-a{right:-12vw;top:-12vw;background:var(--rose)}
.intro-glow-b{left:-10vw;bottom:-14vw;background:var(--violet);animation-delay:-1.2s}

.intro-title{
  position:absolute;
  left:50%;
  top:50%;
  width:min(88vw,1180px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  direction:rtl;
  text-align:right;
  font-weight:950;
  line-height:1.02;
  letter-spacing:-.07em;
  font-size:clamp(2.45rem,7vw,7.4rem);
  color:#fff;
  text-shadow:0 0 46px rgba(255,63,110,.20);
  opacity:1;
  transform:translate3d(-50%,-50%,0) scale(var(--intro-title-start-scale,1.28));
  transform-origin:center center;
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.intro-title.is-docking{
  transform:translate3d(
    calc(-50% + var(--intro-title-dx,0px)),
    calc(-50% + var(--intro-title-dy,0px)),
    0
  ) scale(1);
  transition:transform .82s cubic-bezier(.16,1,.3,1), text-shadow .82s cubic-bezier(.16,1,.3,1);
  text-shadow:0 0 18px rgba(255,122,61,.10);
}
.intro-title.is-handoff{
  opacity:0;
  transition:opacity .24s linear;
}
.intro-title-line{
  display:block;
  width:100%;
  direction:rtl;
  text-align:inherit;
  white-space:normal;
}
.intro-char{
  display:inline-block;
  opacity:0;
  transform:translate3d(10px,0,0);
  filter:blur(8px);
  will-change:transform, opacity, filter;
}
.intro-title.is-writing .intro-char{
  animation:introCharRtl .42s cubic-bezier(.22,1,.36,1) forwards;
}
.intro-space{display:inline-block;width:.32em}

.intro-brand{
  position:absolute;
  top:50%;
  left:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18em;
  opacity:0;
  text-align:center;
  color:#fff;
  transform:translate3d(-50%,-50%,0) scale(.88);
  filter:drop-shadow(0 0 30px rgba(81,255,214,.16));
  transform-origin:center center;
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.intro-brand.is-in{
  opacity:1;
  transform:translate3d(-50%,-50%,0) scale(1);
  transition:opacity .18s linear, transform .18s cubic-bezier(.16,1,.3,1);
}
.intro-brand.is-docking{
  opacity:.98;
  transform:translate3d(
    calc(-50% + var(--intro-brand-dx,0px)),
    calc(-50% + var(--intro-brand-dy,0px)),
    0
  ) scale(var(--intro-brand-scale,.18));
  transition:transform .64s cubic-bezier(.19,1,.22,1), opacity .64s cubic-bezier(.19,1,.22,1), filter .64s cubic-bezier(.19,1,.22,1);
  filter:drop-shadow(0 0 12px rgba(81,255,214,.12));
}
.intro-brand.is-handoff{
  opacity:0;
  transition:opacity .20s linear;
}
.intro-brand strong{
  font-size:clamp(3.6rem,10vw,10rem);
  letter-spacing:.14em;
  line-height:.83;
}
.intro-brand small{
  font-size:clamp(.95rem,2.2vw,2rem);
  letter-spacing:.38em;
  font-weight:950;
  color:var(--mint);
}


.intro-brand-char{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,18px,0) scale(.92);
  filter:blur(10px);
  will-change:transform, opacity, filter;
}
.intro-brand.is-in .intro-brand-char{
  animation:introBrandChar .46s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-brand-space{width:.18em}

body.intro-ready .navbar,
body.intro-ready .hero-copy > h1,
body.intro-ready .brand-logo{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  filter:none!important;
}
body.intro-ready .hero-copy > .eyebrow,
body.intro-ready .hero-copy > p,
body.intro-ready .hero-actions,
body.intro-ready .hero-proof{
  animation:heroIntroSoftIn .62s cubic-bezier(.19,1,.22,1) forwards;
}
body.intro-ready .hero-copy > .eyebrow{animation-delay:.08s}
body.intro-ready .hero-copy > p{animation-delay:.14s}
body.intro-ready .hero-actions{animation-delay:.22s}
body.intro-ready .hero-proof{animation-delay:.30s}

.hero-portrait-wrap,
.hero-duo,
.hero-portrait-side .floating-card{
  will-change:transform, opacity, filter;
}
body.intro-active .hero-portrait-wrap{
  opacity:0;
  transform:translate3d(0,54px,0) scale(.96);
  filter:blur(18px) saturate(.86);
}
body.intro-ready .hero-side{
  opacity:1!important;
}
body.intro-ready .hero-portrait-wrap{
  animation:foundersCinematicIn 1.05s cubic-bezier(.16,1,.3,1) .10s forwards;
}
body.intro-active .hero-portrait-side .floating-card{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.98);
}
body.intro-ready .hero-portrait-side .card-a{
  animation:cardCinematicIn .62s cubic-bezier(.19,1,.22,1) .62s forwards;
}
body.intro-ready .hero-portrait-side .card-b{
  animation:cardCinematicIn .62s cubic-bezier(.19,1,.22,1) .76s forwards;
}

@keyframes introCharRtl{
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@keyframes introBrandChar{
  to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes introGlowFloat{
  to{transform:translate3d(4vw,3vh,0) scale(1.08);opacity:.12}
}
@keyframes heroIntroSoftIn{
  from{opacity:0;transform:translate3d(0,14px,0);filter:blur(8px)}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@keyframes foundersCinematicIn{
  0%{opacity:0;transform:translate3d(0,54px,0) scale(.96);filter:blur(18px) saturate(.86)}
  55%{opacity:1;filter:blur(3px) saturate(1.03)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0) saturate(1)}
}
@keyframes cardCinematicIn{
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@media(max-width:760px){
  .intro-title{
    max-width:92vw;
    transform:translate3d(-50%,-50%,0) scale(var(--intro-title-start-scale,1.12));
  }
  .intro-brand strong{font-size:clamp(3.1rem,16vw,5.9rem)}
  .intro-brand small{font-size:clamp(.78rem,4vw,1.12rem)}
  .logo.brand-logo strong{font-size:1.05rem}
  .logo.brand-logo small{font-size:.48rem}
  body.intro-active .hero-portrait-wrap{
    transform:translate3d(0,36px,0) scale(.97);
    filter:blur(14px) saturate(.9);
  }
  body.intro-ready .hero-portrait-wrap{
    animation:foundersCinematicIn .9s cubic-bezier(.16,1,.3,1) .08s forwards;
  }
}

@media(prefers-reduced-motion:reduce){
  body.intro-active{overflow:auto}
  .intro-overlay{display:none!important}
  body.intro-active .navbar,
  body.intro-active .hero-copy > .eyebrow,
  body.intro-active .hero-copy > h1,
  body.intro-active .hero-copy > p,
  body.intro-active .hero-actions,
  body.intro-active .hero-proof,
  body.intro-active .hero-side{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    filter:none!important;
  }
}

/* =====================================================
   Final ALLSET intro fixes: every visit + no logo overlap + data flow background
===================================================== */
html.intro-pending body.intro-active{overflow:hidden;}
html.intro-done body{overflow-x:hidden;}

/* 3D phone removed on desktop and mobile */
.phone-stage{display:none !important;}

.data-flow{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
  opacity:.85;
  contain:layout paint;
}
.data-flow i{
  position:absolute;
  right:-28%;
  width:42vw;
  max-width:620px;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,122,61,.05),rgba(255,122,61,.78),rgba(255,63,110,.72),rgba(141,108,255,.58),transparent);
  box-shadow:
    0 0 16px rgba(255,122,61,.22),
    0 0 34px rgba(255,63,110,.12);
  transform:translate3d(0,0,0) rotate(-13deg);
  animation:dataFlowMove 4.8s linear infinite;
  will-change:transform, opacity;
}
.data-flow i:nth-child(1){top:16%;animation-duration:4.2s;animation-delay:-.4s;opacity:.72}
.data-flow i:nth-child(2){top:28%;animation-duration:5.4s;animation-delay:-2.0s;opacity:.54;width:34vw}
.data-flow i:nth-child(3){top:40%;animation-duration:4.8s;animation-delay:-1.1s;opacity:.62;width:48vw}
.data-flow i:nth-child(4){top:52%;animation-duration:5.8s;animation-delay:-3.0s;opacity:.46;width:28vw}
.data-flow i:nth-child(5){top:64%;animation-duration:4.6s;animation-delay:-2.5s;opacity:.64;width:44vw}
.data-flow i:nth-child(6){top:76%;animation-duration:6.2s;animation-delay:-1.6s;opacity:.42;width:32vw}
.data-flow i:nth-child(7){top:22%;animation-duration:6.6s;animation-delay:-4.1s;opacity:.34;width:22vw;background:linear-gradient(90deg,transparent,rgba(81,255,214,.50),rgba(141,108,255,.45),transparent)}
.data-flow i:nth-child(8){top:86%;animation-duration:5.2s;animation-delay:-.8s;opacity:.36;width:26vw;background:linear-gradient(90deg,transparent,rgba(141,108,255,.52),rgba(255,63,110,.48),transparent)}

.intro-data-flow{
  z-index:0;
  opacity:.95;
  mix-blend-mode:screen;
}
.intro-noise,
.intro-glow,
.intro-title,
.intro-brand{z-index:2;}
.intro-overlay.brand-stage .intro-title{
  text-shadow:0 0 12px rgba(255,122,61,.06);
}
.intro-overlay.brand-stage{
  background:
    radial-gradient(circle at 50% 50%,rgba(141,108,255,.13),transparent 28%),
    radial-gradient(circle at 18% 22%,rgba(255,122,61,.12),transparent 26%),
    radial-gradient(circle at 82% 18%,rgba(141,108,255,.15),transparent 30%),
    rgba(4,5,9,.975);
}
.intro-brand{
  z-index:4;
}

.hero{isolation:isolate;}
.hero-data-flow{
  z-index:1;
  opacity:.38;
  mix-blend-mode:screen;
}
.hero-data-flow i{
  animation-duration:7.5s;
  opacity:.48;
}
.hero-layout,.navbar{position:relative;z-index:10;}

@keyframes dataFlowMove{
  0%{transform:translate3d(0,0,0) rotate(-13deg);opacity:0;}
  12%{opacity:1;}
  82%{opacity:.9;}
  100%{transform:translate3d(-145vw,0,0) rotate(-13deg);opacity:0;}
}

@media(max-width:760px){
  .data-flow i{width:70vw;right:-52%;animation-duration:5.2s;}
  .hero-data-flow{opacity:.28;}
  .intro-data-flow{opacity:.72;}
}

@media(prefers-reduced-motion:reduce){
  .data-flow{display:none!important;}
}

/* =====================================================
   FINAL FIX: mobile intro no cut/no overlap + desktop flow trails
===================================================== */
.intro-title,
.intro-brand{
  max-width:92vw;
  contain:layout paint style;
}
.intro-title{
  overflow:visible;
  padding-inline:1px;
}
.intro-brand{
  overflow:visible;
}
.intro-title.is-mobile-out{
  opacity:0;
  transform:translate3d(-50%,calc(-50% - 26px),0) scale(.96) !important;
  filter:blur(10px);
  transition:opacity .46s cubic-bezier(.19,1,.22,1), transform .46s cubic-bezier(.19,1,.22,1), filter .46s cubic-bezier(.19,1,.22,1);
  pointer-events:none;
}

/* Octopus/data-flow trail behind the moving title/logo on desktop */
.intro-title::before,
.intro-title::after,
.intro-brand::before,
.intro-brand::after{
  content:"";
  position:absolute;
  top:50%;
  pointer-events:none;
  opacity:0;
  transform:translateY(-50%) scaleX(.2);
  transform-origin:right center;
  border-radius:999px;
  filter:blur(.2px);
  will-change:transform, opacity;
}
.intro-title::before,
.intro-brand::before{
  right:92%;
  width:min(34vw,520px);
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(141,108,255,.58),rgba(255,63,110,.75),rgba(255,122,61,.92));
  box-shadow:0 0 20px rgba(255,63,110,.18),0 0 36px rgba(141,108,255,.14);
}
.intro-title::after,
.intro-brand::after{
  right:88%;
  width:min(22vw,330px);
  height:1px;
  margin-top:16px;
  background:linear-gradient(90deg,transparent,rgba(81,255,214,.46),rgba(141,108,255,.65),rgba(255,63,110,.72));
  box-shadow:0 0 20px rgba(81,255,214,.12);
}
.intro-overlay.title-trail-on .intro-title::before,
.intro-overlay.brand-trail-on .intro-brand::before{
  animation:introTentacleTrail .82s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-overlay.title-trail-on .intro-title::after,
.intro-overlay.brand-trail-on .intro-brand::after{
  animation:introTentacleTrailSoft .82s cubic-bezier(.16,1,.3,1) .05s forwards;
}
@keyframes introTentacleTrail{
  0%{opacity:0;transform:translateY(-50%) scaleX(.05)}
  25%{opacity:.85;transform:translateY(-50%) scaleX(1)}
  100%{opacity:0;transform:translateY(-50%) scaleX(.18)}
}
@keyframes introTentacleTrailSoft{
  0%{opacity:0;transform:translateY(-50%) rotate(-5deg) scaleX(.05)}
  30%{opacity:.72;transform:translateY(-50%) rotate(-5deg) scaleX(1)}
  100%{opacity:0;transform:translateY(-50%) rotate(-5deg) scaleX(.16)}
}

@media(max-width:760px){
  .intro-overlay{
    overflow:hidden;
  }
  .intro-title{
    width:92vw !important;
    max-width:92vw !important;
    top:45% !important;
    font-size:clamp(1.82rem,10vw,3.12rem) !important;
    line-height:1.12 !important;
    letter-spacing:-.05em !important;
    text-align:right !important;
    transform:translate3d(-50%,-50%,0) scale(1) !important;
    text-wrap:balance;
    word-break:normal;
    overflow:visible !important;
  }
  .intro-title-line{
    display:block;
    white-space:normal !important;
    overflow:visible !important;
  }
  .intro-title.is-docking{
    transform:translate3d(-50%,-50%,0) scale(1) !important;
  }
  .intro-title.is-mobile-out{
    transform:translate3d(-50%,calc(-50% - 22px),0) scale(.96) !important;
  }
  .intro-brand{
    top:50% !important;
    z-index:5 !important;
  }
  .intro-brand strong{
    font-size:clamp(2.75rem,15vw,5.45rem) !important;
    letter-spacing:.12em !important;
  }
  .intro-brand small{
    font-size:clamp(.78rem,4.2vw,1.12rem) !important;
    letter-spacing:.28em !important;
  }
  .intro-title::before,
  .intro-title::after,
  .intro-brand::before,
  .intro-brand::after{
    display:none !important;
  }
  .intro-data-flow{
    opacity:.58 !important;
  }
  .data-flow i{
    width:82vw !important;
    right:-66% !important;
    opacity:.45;
  }
  body.intro-ready .hero-copy > .eyebrow,
  body.intro-ready .hero-copy > p,
  body.intro-ready .hero-actions,
  body.intro-ready .hero-proof{
    animation-duration:.48s;
  }
}

/* =====================================================
   ALLSET clean logo-only intro + premium data-flow background
   latest requested version
===================================================== */
.phone-stage{display:none !important;}

html.intro-pending body.intro-active{
  overflow:hidden !important;
}

body.intro-active .navbar,
body.intro-active .hero-copy > .eyebrow,
body.intro-active .hero-copy > h1,
body.intro-active .hero-copy > p,
body.intro-active .hero-actions,
body.intro-active .hero-proof,
body.intro-active .hero-side{
  opacity:0 !important;
  pointer-events:none;
}

body.intro-ready .navbar,
body.intro-ready .hero-copy > .eyebrow,
body.intro-ready .hero-copy > h1,
body.intro-ready .hero-copy > p,
body.intro-ready .hero-actions,
body.intro-ready .hero-proof,
body.intro-ready .hero-side{
  opacity:1 !important;
  pointer-events:auto;
}

body.intro-ready .navbar{
  animation:allsetNavIn .56s cubic-bezier(.19,1,.22,1) both;
}
body.intro-ready .hero-copy > .eyebrow{animation:allsetHeroIn .62s cubic-bezier(.19,1,.22,1) .04s both;}
body.intro-ready .hero-copy > h1{animation:allsetHeroIn .66s cubic-bezier(.19,1,.22,1) .10s both;}
body.intro-ready .hero-copy > p{animation:allsetHeroIn .66s cubic-bezier(.19,1,.22,1) .18s both;}
body.intro-ready .hero-actions{animation:allsetHeroIn .62s cubic-bezier(.19,1,.22,1) .26s both;}
body.intro-ready .hero-proof{animation:allsetHeroIn .62s cubic-bezier(.19,1,.22,1) .34s both;}
body.intro-ready .hero-side{animation:allsetFoundersIn .95s cubic-bezier(.16,1,.3,1) .18s both;}

.intro-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,63,110,.14),transparent 26%),
    radial-gradient(circle at 15% 20%,rgba(255,122,61,.18),transparent 30%),
    radial-gradient(circle at 86% 22%,rgba(141,108,255,.18),transparent 32%),
    radial-gradient(circle at 55% 88%,rgba(81,255,214,.10),transparent 28%),
    rgba(5,6,10,.985) !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:opacity .68s cubic-bezier(.19,1,.22,1), visibility .68s !important;
}
.intro-overlay.is-fading{
  opacity:0 !important;
  visibility:hidden !important;
}

/* no title in the intro anymore */
.intro-title{
  display:none !important;
}

.logo.brand-logo{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:1px !important;
  line-height:.9 !important;
  letter-spacing:.14em !important;
}
.logo.brand-logo strong{
  font-size:1.25rem !important;
  letter-spacing:.16em !important;
}
.logo.brand-logo small{
  font-size:.55rem !important;
  letter-spacing:.24em !important;
  color:var(--mint) !important;
  font-weight:950 !important;
}

.intro-brand{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  z-index:4 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.2em !important;
  text-align:center !important;
  color:#fff !important;
  opacity:0 !important;
  transform:translate3d(-50%,-50%,0) scale(.84) !important;
  transform-origin:center center !important;
  will-change:transform, opacity, filter !important;
  backface-visibility:hidden !important;
  filter:drop-shadow(0 0 42px rgba(81,255,214,.20)) !important;
}
.intro-brand:before{
  content:"";
  position:absolute;
  inset:-38% -26%;
  border-radius:50%;
  z-index:-1;
  background:
    radial-gradient(circle,rgba(255,122,61,.16),transparent 54%),
    radial-gradient(circle at 70% 35%,rgba(141,108,255,.16),transparent 52%);
  filter:blur(6px);
  opacity:.92;
  animation:allsetIntroHalo 2.8s ease-in-out infinite alternate;
}
.intro-brand.is-in{
  opacity:1 !important;
  transform:translate3d(-50%,-50%,0) scale(1) !important;
  transition:opacity .32s ease, transform .72s cubic-bezier(.16,1,.3,1), filter .72s ease !important;
}
.intro-brand.is-docking{
  opacity:.98 !important;
  transform:translate3d(
    calc(-50% + var(--intro-brand-dx,0px)),
    calc(-50% + var(--intro-brand-dy,0px)),
    0
  ) scale(var(--intro-brand-scale,.18)) !important;
  filter:drop-shadow(0 0 14px rgba(81,255,214,.14)) !important;
  transition:transform .92s cubic-bezier(.19,1,.22,1), opacity .92s cubic-bezier(.19,1,.22,1), filter .92s cubic-bezier(.19,1,.22,1) !important;
}
.intro-brand.is-handoff{
  opacity:0 !important;
  transition:opacity .28s linear !important;
}
.intro-brand strong{
  font-size:clamp(4.1rem,11vw,11rem) !important;
  letter-spacing:.145em !important;
  line-height:.82 !important;
  font-weight:950 !important;
}
.intro-brand small{
  font-size:clamp(1rem,2.45vw,2.1rem) !important;
  letter-spacing:.38em !important;
  color:var(--mint) !important;
  font-weight:950 !important;
}
.intro-brand-char{
  display:inline-block !important;
  opacity:0;
  transform:translate3d(0,22px,0) scale(.92);
  filter:blur(12px);
  will-change:transform, opacity, filter;
}
.intro-brand.is-in .intro-brand-char{
  animation:allsetLogoLetter .62s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-brand-space{width:.18em !important;}

/* Premium flow lines in intro and hero */
.data-flow{
  position:absolute !important;
  inset:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:1 !important;
  opacity:.82 !important;
  contain:layout paint !important;
}
.data-flow i{
  position:absolute !important;
  right:-34% !important;
  width:48vw !important;
  max-width:720px !important;
  height:1px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,transparent,rgba(255,122,61,.05),rgba(255,122,61,.82),rgba(255,63,110,.74),rgba(141,108,255,.62),transparent) !important;
  box-shadow:0 0 18px rgba(255,122,61,.22),0 0 38px rgba(255,63,110,.12) !important;
  transform:translate3d(0,0,0) rotate(-13deg) !important;
  animation:allsetDataFlow 5s linear infinite !important;
  will-change:transform, opacity !important;
}
.data-flow i:nth-child(1){top:13% !important;animation-duration:4.2s !important;animation-delay:-.3s !important;opacity:.74 !important;}
.data-flow i:nth-child(2){top:25% !important;animation-duration:5.4s !important;animation-delay:-1.8s !important;opacity:.50 !important;width:34vw !important;}
.data-flow i:nth-child(3){top:38% !important;animation-duration:4.7s !important;animation-delay:-1.1s !important;opacity:.64 !important;width:54vw !important;}
.data-flow i:nth-child(4){top:51% !important;animation-duration:5.8s !important;animation-delay:-3s !important;opacity:.42 !important;width:30vw !important;}
.data-flow i:nth-child(5){top:64% !important;animation-duration:4.6s !important;animation-delay:-2.4s !important;opacity:.64 !important;width:46vw !important;}
.data-flow i:nth-child(6){top:76% !important;animation-duration:6.2s !important;animation-delay:-1.5s !important;opacity:.40 !important;width:31vw !important;}
.data-flow i:nth-child(7){top:21% !important;animation-duration:6.5s !important;animation-delay:-4s !important;opacity:.36 !important;width:24vw !important;background:linear-gradient(90deg,transparent,rgba(81,255,214,.54),rgba(141,108,255,.48),transparent) !important;}
.data-flow i:nth-child(8){top:86% !important;animation-duration:5.2s !important;animation-delay:-.7s !important;opacity:.36 !important;width:28vw !important;background:linear-gradient(90deg,transparent,rgba(141,108,255,.54),rgba(255,63,110,.50),transparent) !important;}
.intro-data-flow{
  z-index:0 !important;
  opacity:1 !important;
  mix-blend-mode:screen !important;
}
.hero-data-flow{
  z-index:3 !important;
  opacity:.34 !important;
  mix-blend-mode:screen !important;
}
.hero > *:not(.hero-data-flow){position:relative;}

.intro-overlay.brand-trail-on:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:42vw;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,122,61,.82),rgba(255,63,110,.62),rgba(141,108,255,.38),transparent);
  filter:blur(.2px) drop-shadow(0 0 18px rgba(255,63,110,.20));
  transform:translate3d(-50%,-50%,0) rotate(-13deg) scaleX(0);
  transform-origin:right center;
  animation:allsetDockTrail .92s cubic-bezier(.19,1,.22,1) forwards;
  z-index:3;
  pointer-events:none;
}

@keyframes allsetLogoLetter{
  to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);}
}
@keyframes allsetDataFlow{
  0%{transform:translate3d(0,0,0) rotate(-13deg);opacity:.08;}
  12%{opacity:.82;}
  100%{transform:translate3d(-158vw,0,0) rotate(-13deg);opacity:.04;}
}
@keyframes allsetIntroHalo{
  to{transform:scale(1.08) rotate(5deg);opacity:.68;}
}
@keyframes allsetDockTrail{
  0%{transform:translate3d(-50%,-50%,0) rotate(-13deg) scaleX(0);opacity:0;}
  20%{opacity:1;}
  100%{transform:translate3d(-50%,-50%,0) rotate(-13deg) scaleX(1);opacity:0;}
}
@keyframes allsetHeroIn{
  from{opacity:0;transform:translate3d(0,22px,0);filter:blur(10px);}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0);}
}
@keyframes allsetNavIn{
  from{opacity:0;transform:translate3d(0,-12px,0);filter:blur(8px);}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0);}
}
@keyframes allsetFoundersIn{
  from{opacity:0;transform:translate3d(0,46px,0) scale(.97);filter:blur(18px) saturate(.9);}
  to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0) saturate(1);}
}

@media(max-width:760px){
  .intro-brand strong{font-size:clamp(3.2rem,17vw,6rem) !important;letter-spacing:.12em !important;}
  .intro-brand small{font-size:clamp(.78rem,4vw,1.1rem) !important;letter-spacing:.30em !important;}
  .intro-brand:before{inset:-42% -18%;}
  .data-flow i{width:66vw !important;right:-56% !important;}
  .hero-data-flow{opacity:.26 !important;}
  .logo.brand-logo strong{font-size:1.05rem !important;}
  .logo.brand-logo small{font-size:.48rem !important;}
}

@media(prefers-reduced-motion:reduce){
  .intro-overlay{display:none !important;}
  body.intro-active{overflow:auto !important;}
  body.intro-active .navbar,
  body.intro-active .hero-copy > .eyebrow,
  body.intro-active .hero-copy > h1,
  body.intro-active .hero-copy > p,
  body.intro-active .hero-actions,
  body.intro-active .hero-proof,
  body.intro-active .hero-side{opacity:1 !important;pointer-events:auto !important;animation:none !important;}
  .data-flow i{animation:none !important;opacity:.18 !important;}
}

/* =====================================================
   ALLSET — HERO 100X PREMIUM UPGRADE
   Cinematic composition, data-flow depth, founder focus
===================================================== */
.hero{
  min-height:100svh !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(141,108,255,.20), transparent 30%),
    radial-gradient(circle at 38% 70%, rgba(57,215,255,.13), transparent 30%),
    radial-gradient(circle at 16% 14%, rgba(81,255,214,.08), transparent 24%),
    linear-gradient(135deg,#05070c 0%,#0b1020 46%,#06070c 100%) !important;
}

.hero-atmosphere{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-atmosphere::before{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    linear-gradient(115deg, transparent 0 31%, rgba(57,215,255,.105) 32%, transparent 35% 60%, rgba(141,108,255,.09) 61%, transparent 64%),
    repeating-linear-gradient(115deg, transparent 0 90px, rgba(255,255,255,.035) 91px 92px, transparent 93px 170px);
  opacity:.58;
  transform:translate3d(-5%,0,0);
  animation:heroFlowDrift 16s linear infinite;
  will-change:transform;
}
.hero-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 68% 38%, transparent 0 28%, rgba(57,215,255,.06) 29%, transparent 46%),
    linear-gradient(90deg, rgba(5,7,12,.86) 0%, rgba(5,7,12,.58) 36%, rgba(5,7,12,.18) 65%, rgba(5,7,12,.72) 100%);
}
.hero-atmosphere span{
  position:absolute;
  height:1px;
  width:clamp(170px,24vw,390px);
  border-radius:999px;
  opacity:.72;
  background:linear-gradient(90deg, transparent, rgba(57,215,255,.85), rgba(141,108,255,.62), transparent);
  filter:drop-shadow(0 0 12px rgba(57,215,255,.35));
  animation:heroLightLane 8s linear infinite;
}
.hero-atmosphere span:nth-child(1){top:18%;left:-12%;animation-delay:-1s}
.hero-atmosphere span:nth-child(2){top:38%;left:-18%;animation-delay:-4.4s;background:linear-gradient(90deg,transparent,rgba(81,255,214,.65),rgba(57,215,255,.78),transparent)}
.hero-atmosphere span:nth-child(3){top:62%;left:-16%;animation-delay:-2.7s;background:linear-gradient(90deg,transparent,rgba(141,108,255,.80),rgba(255,63,110,.46),transparent)}
.hero-atmosphere span:nth-child(4){top:78%;left:-20%;animation-delay:-6.1s}

@keyframes heroFlowDrift{to{transform:translate3d(7%,0,0)}}
@keyframes heroLightLane{to{transform:translate3d(140vw,0,0)}}

.hero .navbar{
  z-index:60 !important;
  padding-top:28px !important;
}
.hero-layout{
  z-index:30 !important;
  grid-template-columns:minmax(0,1fr) minmax(420px,.92fr) !important;
  gap:clamp(28px,4vw,74px) !important;
  padding-top:10px !important;
  align-items:center !important;
}
.hero-copy{
  position:relative !important;
  padding-block:clamp(46px,7vh,96px) !important;
}
.hero-copy::before{
  content:"";
  position:absolute;
  inset:-16% -7% -10% -5%;
  z-index:-1;
  border-radius:42px;
  background:
    radial-gradient(circle at 92% 16%, rgba(57,215,255,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  opacity:.72;
  mask-image:linear-gradient(90deg,#000 0 68%,transparent 100%);
}
.hero-eyebrow{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  margin-bottom:22px !important;
  border:1px solid rgba(129,218,255,.16);
  border-radius:999px;
  color:rgba(207,255,247,.92) !important;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 16px 55px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  text-transform:none !important;
  letter-spacing:.04em !important;
}
.hero-eyebrow i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#51ffd6;
  box-shadow:0 0 18px rgba(81,255,214,.85);
  animation:heroDotPulse 1.8s ease-in-out infinite;
}
@keyframes heroDotPulse{50%{transform:scale(1.45);opacity:.55}}

.hero-title,
.hero-copy h1{
  position:relative;
  max-width:880px;
  font-size:clamp(3.8rem,6.7vw,7.6rem) !important;
  line-height:.89 !important;
  letter-spacing:-.085em !important;
  margin-bottom:26px !important;
  text-wrap:balance;
  background:linear-gradient(180deg,#ffffff 0%,#e9f7ff 42%,#b8c5ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  filter:drop-shadow(0 28px 75px rgba(0,0,0,.52));
}
.hero-title::after,
.hero-copy h1::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-18px;
  width:min(320px,48%);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#51ffd6,#39d7ff,#8d6cff,transparent);
  box-shadow:0 0 20px rgba(57,215,255,.35);
}
.hero-copy p{
  max-width:720px !important;
  font-size:clamp(1rem,1.18vw,1.22rem) !important;
  line-height:1.88 !important;
}
.hero-main-cta{
  position:relative;
  overflow:hidden;
  gap:12px;
}
.hero-main-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(110%);
  animation:ctaSweep 3.7s ease-in-out infinite;
}
.hero-main-cta em{font-style:normal;font-size:1.2rem;transition:transform .25s ease}
.hero-main-cta:hover em{transform:translateX(-6px)}
@keyframes ctaSweep{0%,45%{transform:translateX(110%)}70%,100%{transform:translateX(-110%)}}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  max-width:720px;
  margin-top:28px;
}
.hero-metrics div{
  min-height:86px;
  padding:15px 14px;
  border:1px solid rgba(129,218,255,.13);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 22px 70px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.025);
}
.hero-metrics b{
  display:block;
  color:#51ffd6;
  font-size:.9rem;
  margin-bottom:8px;
  letter-spacing:.12em;
}
.hero-metrics span{
  display:block;
  color:rgba(235,245,255,.82);
  font-weight:900;
  font-size:.94rem;
}
.hero-proof{
  gap:12px !important;
  margin-top:28px !important;
}
.hero-proof div{
  border-radius:24px !important;
  transition:transform .35s cubic-bezier(.19,1,.22,1), border-color .35s ease, box-shadow .35s ease;
}
.hero-proof div:hover{
  transform:translateY(-6px);
  border-color:rgba(81,255,214,.28) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.28),0 0 40px rgba(57,215,255,.08) !important;
}

.hero-portrait-side{
  transform-style:preserve-3d;
  perspective:1400px;
}
.hero-orbit-system{
  position:absolute;
  inset:7% -4% 6% 0;
  z-index:2;
  pointer-events:none;
  opacity:.88;
  transform:translateZ(0);
}
.hero-orbit-system .orbit{
  position:absolute;
  inset:8% 2% 10% 5%;
  border:1px solid rgba(129,218,255,.13);
  border-radius:50%;
  transform:rotate(-12deg);
  box-shadow:inset 0 0 35px rgba(57,215,255,.035),0 0 35px rgba(57,215,255,.04);
}
.hero-orbit-system .orbit-b{inset:17% 12% 18% 18%;border-color:rgba(141,108,255,.16);animation:heroOrbitBreath 5.2s ease-in-out infinite}
.hero-orbit-system .orbit-c{inset:30% 24% 30% 30%;border-color:rgba(81,255,214,.14);animation:heroOrbitBreath 6.4s ease-in-out infinite reverse}
.hero-orbit-system .orbit-dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#51ffd6;
  box-shadow:0 0 20px rgba(81,255,214,.9),0 0 42px rgba(57,215,255,.45);
}
.hero-orbit-system .dot-a{right:20%;top:18%;animation:heroDotFloat 4.4s ease-in-out infinite}
.hero-orbit-system .dot-b{left:23%;bottom:22%;background:#8d6cff;animation:heroDotFloat 5.6s ease-in-out infinite reverse}
@keyframes heroOrbitBreath{50%{transform:rotate(-5deg) scale(1.035);opacity:.58}}
@keyframes heroDotFloat{50%{transform:translate3d(18px,-16px,0) scale(1.35)}}

.hero-side.hero-portrait-side::before{
  display:block !important;
  inset:7% -8% -5% -12% !important;
  border-radius:50px !important;
  background:
    radial-gradient(circle at 44% 48%, rgba(57,215,255,.19), transparent 34%),
    radial-gradient(circle at 62% 76%, rgba(141,108,255,.14), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
  opacity:.72 !important;
  border-color:rgba(129,218,255,.08) !important;
}
.hero-portrait-wrap{
  transform:translate3d(0,0,0) !important;
  transition:transform .18s ease-out !important;
}
.hero-duo{
  filter:
    drop-shadow(0 85px 145px rgba(0,0,0,.66))
    drop-shadow(0 0 46px rgba(57,215,255,.14)) !important;
  animation:foundersFloat 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes foundersFloat{50%{transform:translate3d(0,-12px,0) scale(1.006)}}
.hero-portrait-side .floating-card{
  border-radius:24px !important;
  background:linear-gradient(145deg,rgba(8,14,27,.72),rgba(8,14,27,.42)) !important;
  border-color:rgba(129,218,255,.17) !important;
}
.hero-portrait-side .floating-card b{color:#fff}
.hero-portrait-side .floating-card span{color:rgba(235,245,255,.72) !important}

@media(max-width:1120px){
  .hero-layout{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }
  .hero-copy::before{display:none}
  .hero-metrics{grid-template-columns:repeat(2,1fr)}
  .hero-orbit-system{inset:8% 0 8% 0;opacity:.62}
}

@media(max-width:760px){
  .hero{
    min-height:auto !important;
  }
  .hero-atmosphere::before{opacity:.32;animation-duration:24s}
  .hero-atmosphere span{opacity:.38;width:180px;animation-duration:10s}
  .hero-layout{
    padding:0 5.5% 54px !important;
  }
  .hero-copy{
    padding:36px 0 12px !important;
  }
  .hero-eyebrow{
    max-width:100%;
    font-size:.72rem !important;
    line-height:1.35;
    padding:8px 12px;
  }
  .hero-copy h1,
  .hero-title{
    font-size:clamp(2.92rem,13.6vw,4.3rem) !important;
    line-height:.94 !important;
    letter-spacing:-.072em !important;
    margin-bottom:24px !important;
  }
  .hero-title::after,
  .hero-copy h1::after{
    width:62%;
    bottom:-13px;
  }
  .hero-copy p{
    font-size:.98rem !important;
    line-height:1.78 !important;
  }
  .hero-actions{
    gap:10px !important;
    margin-top:26px !important;
  }
  .hero-actions .btn{
    width:100%;
    min-height:54px !important;
  }
  .hero-metrics{
    grid-template-columns:repeat(2,1fr);
    gap:9px;
    margin-top:22px;
  }
  .hero-metrics div{
    min-height:74px;
    border-radius:18px;
    padding:12px;
  }
  .hero-metrics span{font-size:.86rem}
  .hero-proof{
    display:none !important;
  }
  .hero-side.hero-portrait-side{
    min-height:540px !important;
  }
  .hero-portrait-wrap{
    width:min(390px,112vw) !important;
    height:500px !important;
    bottom:-5% !important;
  }
  .hero-orbit-system{
    inset:6% -8% 2% -8%;
    opacity:.5;
  }
  .hero-portrait-side .floating-card{
    width:min(230px,78vw) !important;
    padding:16px !important;
    font-size:.92rem;
  }
  .hero-portrait-side .card-a{top:3% !important;right:0 !important}
  .hero-portrait-side .card-b{bottom:2% !important;left:0 !important;right:auto !important}
}

@media (prefers-reduced-motion: reduce){
  .hero-atmosphere::before,
  .hero-atmosphere span,
  .hero-duo,
  .hero-orbit-system .orbit,
  .hero-orbit-system .orbit-dot,
  .hero-main-cta::before{
    animation:none !important;
  }
}
.intro-brand,
.intro-brand strong,
.intro-brand small{
  direction:ltr;
  unicode-bidi:isolate;
}

/* ===== ALLSET PROJECT FINAL STABILITY FIXES ===== */
html, body { min-height: 100%; }
body.intro-active { overflow: hidden; }
.intro-overlay { pointer-events: none; }
.intro-brand,
.intro-brand strong,
.intro-brand small,
.brand-logo,
.brand-logo strong,
.brand-logo small{
  direction:ltr !important;
  unicode-bidi:isolate !important;
}
.brand-logo{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.brand-logo small{font-size:.56em;letter-spacing:.22em;opacity:.8;}

.hero.section-track,
.process.section-track{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}
.section-track:not(.hero):not(.process){
  opacity:0 !important;
  transform:translateY(55px) !important;
  visibility:visible !important;
  transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1) !important;
  will-change:opacity,transform;
}
.section-track:not(.hero):not(.process).section-visible,
.section-track.force-visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}
.section-track:not(.hero):not(.process).section-visible .section-head,
.section-track:not(.hero):not(.process).section-visible .service-card,
.section-track:not(.hero):not(.process).section-visible .who-card,
.section-track:not(.hero):not(.process).section-visible .showcase-copy,
.section-track:not(.hero):not(.process).section-visible .showcase-visual,
.section-track:not(.hero):not(.process).section-visible .slice-card,
.section-track:not(.hero):not(.process).section-visible .package-card,
.section-track:not(.hero):not(.process).section-visible .faq-list details,
.section-track:not(.hero):not(.process).section-visible .testimonial-shot,
.section-track:not(.hero):not(.process).section-visible .contact-copy,
.section-track:not(.hero):not(.process).section-visible .contact-form,
.section-track:not(.hero):not(.process).section-visible .legal-links a,
.section-track:not(.hero):not(.process).section-visible .strip-item{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}
.premium-roadmap.section-visible .road-line,
.premium-roadmap.section-visible .road-dash{opacity:1;}
.road-comet{
  filter:drop-shadow(0 0 16px rgba(81,255,214,.95)) drop-shadow(0 0 28px rgba(57,215,255,.65));
  transition:cx .08s linear, cy .08s linear;
}
.road-station.is-lit{opacity:1 !important;}
.road-station.is-hit{transform:translateY(-8px) scale(1.04) !important;}
@media (prefers-reduced-motion: reduce){
  .section-track{opacity:1 !important;transform:none !important;}
}

/* ===== FINAL USER FIX: mobile hero image centered + roadmap automatic movement ===== */
@media (max-width: 760px){
  .hero-side.hero-portrait-side{
    min-height:520px !important;
    height:auto !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    overflow:visible !important;
    margin-top:8px !important;
  }

  .hero-portrait-wrap{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    top:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:430px !important;
    transform:none !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    overflow:visible !important;
    margin:0 auto !important;
  }

  .hero-duo{
    width:min(92vw,430px) !important;
    max-width:92vw !important;
    height:auto !important;
    max-height:510px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    margin:0 auto !important;
    transform:none !important;
  }

  .hero-portrait-side .floating-card{
    display:none !important;
  }
}

@media (max-width: 420px){
  .hero-side.hero-portrait-side{
    min-height:470px !important;
  }
  .hero-portrait-wrap{
    min-height:390px !important;
  }
  .hero-duo{
    width:94vw !important;
    max-height:455px !important;
  }
}

.road-comet{
  transition:none !important;
  will-change:cx, cy;
}

.road-station.is-hit{
  transform:translate(-50%, -50%) translateY(-8px) scale(1.05) !important;
}

.road-station.is-lit{
  filter:drop-shadow(0 0 20px rgba(81,255,214,.14));
}

.flight-roadmap.roadmap-playing .road-line{
  filter:url(#roadGlow) drop-shadow(0 0 16px rgba(81,255,214,.24));
}

/* ===== FINAL BRAND LOGO + TRANSPARENT FAVICON INTEGRATION ===== */
.logo.brand-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  line-height:0 !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
}
.logo.brand-logo img{
  display:block !important;
  width:clamp(138px, 13vw, 230px) !important;
  height:auto !important;
  max-height:58px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 14px rgba(64,245,210,.10)) drop-shadow(0 0 16px rgba(255,96,48,.08));
}
.intro-brand{
  width:min(76vw, 860px) !important;
  max-width:860px !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
}
.intro-brand img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:210px !important;
  object-fit:contain !important;
  opacity:0;
  transform:translateY(18px) scale(.96);
  animation:introLogoImageIn 1.05s cubic-bezier(.19,1,.22,1) .12s forwards;
  filter:drop-shadow(0 0 24px rgba(64,245,210,.16)) drop-shadow(0 0 28px rgba(255,96,48,.14));
}
.intro-brand::before,
.intro-brand::after{
  pointer-events:none !important;
}
@keyframes introLogoImageIn{
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:760px){
  .logo.brand-logo img{
    width:clamp(125px, 34vw, 170px) !important;
    max-height:48px !important;
  }
  .intro-brand{
    width:min(84vw, 560px) !important;
  }
  .intro-brand img{
    max-height:155px !important;
  }
}