:root{
  --bg:#060814;
  --bg-soft:#0c1020;
  --bg-deep:#09111e;
  --panel:rgba(10,16,32,.62);
  --panel-strong:rgba(10,14,28,.84);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --white:#f5f7ff;
  --muted:rgba(245,247,255,.74);
  --muted-soft:rgba(245,247,255,.52);
  --blue:#2b4dff;
  --blue-soft:#6c86ff;
  --orange:#FF6A00;
  --orange-vivid:#FF7A18;
  --orange-soft:#FFA24D;
  --glow-blue:rgba(43,77,255,.3);
  --glow-orange:rgba(255,106,0,.24);
  --shadow-lg:0 34px 90px rgba(0,0,0,.45);
  --shadow-md:0 24px 58px rgba(0,0,0,.32);
  --font-title:"Sora",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:138px;
  overflow-x:hidden;
}
body{
  margin:0;
  color:var(--white);
  font-family:var(--font-body);
  overflow-x:hidden;
  max-width:100%;
  background:
    radial-gradient(circle at 12% 16%,rgba(43,77,255,.2),transparent 26%),
    radial-gradient(circle at 84% 12%,rgba(255,106,0,.16),transparent 24%),
    radial-gradient(circle at 50% 100%,rgba(43,77,255,.12),transparent 32%),
    linear-gradient(180deg,#04060f 0%,#08111d 32%,#070b16 68%,#03050c 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  opacity:.12;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.05)'%3E%3Cpath d='M0 .5H140'/%3E%3Cpath d='M.5 0V140'/%3E%3C/g%3E%3C/svg%3E");
}

body::after{
  content:"";
  position:fixed;
  inset:-18%;
  z-index:-3;
  pointer-events:none;
  opacity:.28;
  background:
    radial-gradient(circle at 20% 24%,rgba(43,77,255,.22),transparent 24%),
    radial-gradient(circle at 78% 18%,rgba(255,122,24,.18),transparent 22%),
    radial-gradient(circle at 52% 78%,rgba(108,134,255,.12),transparent 28%);
  filter:blur(34px);
  animation:ambientDrift 22s cubic-bezier(.16,1,.3,1) infinite alternate;
}

@keyframes ambientDrift{
  from{transform:translate3d(-1.5%,0,0) scale(1)}
  to{transform:translate3d(1.5%,1%,0) scale(1.04)}
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}

.page-grid{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,0)) 0 0/100% 160px no-repeat;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}

.section{
  position:relative;
  padding:clamp(72px,8vw,112px) 0;
  scroll-margin-top:132px;
}

.section::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:min(1180px,calc(100% - 40px));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(108,134,255,.14),transparent);
}

.site-header{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:700;
  width:min(1180px,calc(100% - 28px));
  height:76px;
  padding:0 16px 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:999px;
  background:rgba(7,11,22,.55);
  backdrop-filter:blur(20px) saturate(1.18);
  box-shadow:0 16px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s cubic-bezier(.16,1,.3,1),top .35s cubic-bezier(.16,1,.3,1),border-color .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1);
}

.site-header.scrolled{
  top:10px;
  background:rgba(7,11,22,.88);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04);
}

body.near-footer .site-header{
  transform:translate(-50%,-120%);
  opacity:0;
  pointer-events:none;
}

.brand-logo{
  width:94px;
  max-height:46px;
  object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0,0,0,.22));
  opacity:.94;
}

.desktop-nav,
.header-actions{
  display:flex;
  align-items:center;
}

.desktop-nav{gap:26px}

.desktop-nav a{
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-soft);
  transition:color .25s ease,transform .25s ease;
}

.desktop-nav a:hover{
  color:var(--white);
  transform:translateY(-1px);
}

.header-actions{gap:12px}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
  font-weight:800;
  transition:transform .28s ease,box-shadow .28s ease,background .28s ease,border-color .28s ease,filter .28s ease;
  overflow:hidden;
}

.btn::before{
  content:"";
  position:absolute;
  top:-120%;
  left:-30%;
  width:40%;
  height:340%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.34),rgba(255,255,255,0));
  transform:rotate(22deg);
  opacity:0;
  transition:transform .6s ease,opacity .45s ease;
  pointer-events:none;
}

.btn:hover::before{
  transform:translateX(260%) rotate(22deg);
  opacity:1;
}

.btn:active{
  transform:translateY(1px) scale(.985);
}

.btn-primary{
  padding:15px 26px;
  color:#fff;
  background:linear-gradient(135deg,var(--orange) 0%,var(--orange-vivid) 58%,var(--orange-soft) 100%);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 14px 34px rgba(255,106,0,.3),0 0 0 0 rgba(255,106,0,.2),inset 0 1px 0 rgba(255,255,255,.22);
}

.btn-primary:hover{
  transform:translateY(-2px) scale(1.004);
  box-shadow:0 18px 38px rgba(255,106,0,.32),0 0 18px rgba(255,122,24,.2),inset 0 1px 0 rgba(255,255,255,.22);
  filter:saturate(1.08);
}

.btn-glass{
  padding:15px 24px;
  color:var(--white);
  background:rgba(9,15,30,.58);
  border-color:var(--line);
  backdrop-filter:blur(18px);
}

.btn-glass:hover{
  transform:translateY(-2px);
  background:rgba(13,21,40,.82);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 0 18px rgba(108,134,255,.09);
}

.mobile-toggle{
  display:none;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}

.mobile-toggle span{
  width:18px;
  height:2px;
  border-radius:999px;
  background:#fff;
}

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:1001;
  display:grid;
  place-items:center;
  background:rgba(4,6,14,.9);
  backdrop-filter:blur(28px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

.mobile-menu.active{
  opacity:1;
  pointer-events:auto;
}

.mobile-menu nav{
  display:flex;
  flex-direction:column;
  gap:24px;
  text-align:center;
}

.mobile-menu nav a:not(.btn){
  font-family:var(--font-title);
  font-size:clamp(2rem,8vw,4rem);
  font-weight:700;
}

.mobile-close{
  position:absolute;
  top:22px;
  right:22px;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:#fff;
}

.hero{
  min-height:86vh;
  padding-top:126px;
  padding-bottom:48px;
  display:flex;
  align-items:center;
}

.hero-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(360px,.82fr);
  gap:74px;
  align-items:center;
  padding:0;
  border-radius:0;
  background:none;
  border:0;
  box-shadow:none;
  overflow:visible;
}

.hero-shell::before{
  content:"";
  position:absolute;
  inset:-90px -40px -80px auto;
  width:min(520px,48vw);
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(43,77,255,.14),rgba(255,106,0,.12));
  filter:blur(90px);
  opacity:.9;
  transform:translateY(var(--hero-glow-shift,0px));
  pointer-events:none;
  transition:transform .2s linear;
}

.hero-copy,
.hero-visual{position:relative;z-index:1}

.hero-animate{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .95s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--hero-delay,0ms);
}

html.js .hero-animate{
  opacity:0;
  transform:translateY(34px);
  filter:blur(8px);
}

.hero-visual.hero-animate{
  transform:translateY(var(--hero-panel-shift,0px));
}

html.js .hero-visual.hero-animate{
  transform:translateY(calc(34px + var(--hero-panel-shift,0px)));
}

html.js body.is-loaded .hero-animate{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

html.js body.is-loaded .hero-visual.hero-animate{
  transform:translateY(var(--hero-panel-shift,0px));
}

.hero-delay-1{--hero-delay:80ms}
.hero-delay-2{--hero-delay:170ms}
.hero-delay-3{--hero-delay:260ms}
.hero-delay-4{--hero-delay:350ms}
.hero-delay-5{--hero-delay:440ms}
.hero-delay-6{--hero-delay:530ms}
.hero-delay-7{--hero-delay:620ms}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 20px;
  color:var(--orange-soft);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:800;
}

.eyebrow span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 18px rgba(255,106,0,.58);
}

.hero h1,
.section-head h2,
.structure-copy h2,
.microsoft-copy h2,
.contact-copy h2{
  font-family:var(--font-title);
  letter-spacing:0;
}

.hero h1{
  max-width:560px;
  margin-bottom:18px;
  font-size:clamp(2.75rem,4vw,4.05rem);
  line-height:1.04;
}

.accent-blue{color:#8ea2ff}
.accent-orange{color:var(--orange-soft)}

.hero-text,
.section-head p,
.structure-copy>p,
.microsoft-copy p,
.contact-copy p{
  color:var(--muted);
  line-height:1.78;
  font-size:1.02rem;
}

.hero-text{max-width:620px}

.hero-subtext{
  max-width:500px;
  margin-bottom:0;
  color:var(--muted-soft);
  font-size:.96rem;
  line-height:1.7;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:26px 0 0;
}

.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:24px;
}

.glass-chip{
  flex:1 1 138px;
  max-width:180px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(11,18,36,.72),rgba(8,13,26,.5));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(16px);
}

.glass-chip strong{
  display:block;
  font-family:var(--font-title);
  font-size:26px;
  letter-spacing:0;
}

.glass-chip span{
  color:var(--muted-soft);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.hero-visual{
  min-height:430px;
  display:grid;
  place-items:center;
}

.hero-panel{
  position:relative;
  width:min(100%,390px);
  margin:0 auto;
  padding:22px;
  border-radius:28px;
  background:
    radial-gradient(circle at 80% 16%,rgba(255,106,0,.1),transparent 24%),
    radial-gradient(circle at 14% 80%,rgba(43,77,255,.14),transparent 28%),
    linear-gradient(145deg,rgba(7,11,22,.76),rgba(7,11,22,.58));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:0 26px 72px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(1.2);
}

.hero-panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.hero-panel-top p{
  margin:0;
  color:var(--muted-soft);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.signal{
  display:flex;
  gap:8px;
}

.signal span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.24);
}

.hero-panel-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.metric-card{
  min-height:112px;
  padding:16px;
  border-radius:18px;
  background:rgba(11,17,34,.72);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.metric-card-highlight{
  grid-column:span 2;
  min-height:132px;
}

.metric-label{
  color:var(--muted-soft);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  font-weight:800;
}

.metric-card strong{
  font-family:var(--font-title);
  font-size:clamp(1.5rem,2.6vw,2.25rem);
  letter-spacing:0;
}

.metric-card small{
  color:var(--muted);
  font-size:.92rem;
}

.chart-card{justify-content:flex-start}

.chart-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:62px;
  margin-top:auto;
}

.chart-bars span{
  flex:1;
  border-radius:999px;
  background:linear-gradient(180deg,var(--orange) 0%,var(--blue-soft) 100%);
  box-shadow:0 0 20px rgba(255,106,0,.2);
  animation:bars 5s ease-in-out infinite;
}

.chart-bars span:nth-child(1){height:38%}
.chart-bars span:nth-child(2){height:82%;animation-delay:.15s}
.chart-bars span:nth-child(3){height:55%;animation-delay:.3s}
.chart-bars span:nth-child(4){height:72%;animation-delay:.45s}
.chart-bars span:nth-child(5){height:47%;animation-delay:.6s}
.chart-bars span:nth-child(6){height:90%;animation-delay:.75s}

@keyframes bars{
  0%,100%{transform:scaleY(.96)}
  50%{transform:scaleY(1.06)}
}

.trust-bar{
  padding:24px 0;
  border-block:1px solid rgba(255,255,255,.06);
  background:rgba(7,11,22,.42);
}

.trust-track{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px 40px;
}

.trust-track span{
  color:rgba(245,247,255,.44);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.section-head{
  max-width:720px;
  margin-bottom:clamp(28px,4vw,48px);
}

.section-head.center{
  margin-inline:auto;
  text-align:center;
}

.section-head h2,
.structure-copy h2,
.microsoft-copy h2,
.contact-copy h2{
  margin-bottom:14px;
  font-size:clamp(2rem,3.2vw,3.15rem);
  line-height:1.06;
}

.section-solutions .section-head h2,
.section-metrics .section-head h2,
.section-structure .structure-copy h2,
.section-microsoft .microsoft-copy h2{
  font-size:clamp(2rem,3vw,3rem);
}

.section-solutions{
  background:linear-gradient(180deg,rgba(6,10,20,.38),rgba(6,10,20,0));
}

.solutions-intro{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(320px,.58fr);
  gap:clamp(28px,4vw,44px);
  align-items:center;
  margin-bottom:clamp(28px,4vw,42px);
}

.section-media,
.microsoft-media{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  min-height:auto;
  padding:22px;
  background:
    linear-gradient(180deg,rgba(12,18,34,.72),rgba(7,11,22,.54)),
    linear-gradient(135deg,rgba(43,77,255,.12),transparent 46%,rgba(255,122,24,.1));
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 22px 56px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .32s cubic-bezier(.16,1,.3,1),box-shadow .32s cubic-bezier(.16,1,.3,1);
}

.section-media:hover,
.microsoft-media:hover{
  border-color:rgba(255,122,24,.18);
  box-shadow:0 24px 58px rgba(0,0,0,.34),0 0 18px rgba(43,77,255,.08),inset 0 1px 0 rgba(255,255,255,.05);
}

.abstract-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at var(--mx,72%) var(--my,24%),rgba(255,255,255,.11),transparent 30%),
    linear-gradient(135deg,rgba(255,122,24,.08),transparent 42%,rgba(43,77,255,.08));
  opacity:.78;
  pointer-events:none;
}

.visual-halo{
  position:absolute;
  width:180px;
  height:180px;
  right:-72px;
  top:-42px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,24,.22),transparent 62%);
  filter:blur(6px);
}

.media-main-card{
  position:relative;
  z-index:2;
  padding:18px;
  border-radius:20px;
  background:rgba(7,11,22,.58);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(16px) saturate(1.16);
}

.media-main-card span,
.metric-kicker{
  display:inline-flex;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:var(--white);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.media-main-card strong{
  display:block;
  max-width:280px;
  font-family:var(--font-title);
  font-size:1.35rem;
  line-height:1.08;
  letter-spacing:0;
}

.media-main-card p{
  max-width:310px;
  margin:10px 0 0;
  color:var(--muted-soft);
  font-size:.88rem;
  line-height:1.55;
}

.network-map{
  position:relative;
  min-height:118px;
  z-index:1;
}

.network-node{
  position:absolute;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:var(--orange-soft);
  background:rgba(8,13,26,.7);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 30px rgba(0,0,0,.28),0 0 24px rgba(255,122,24,.12);
}

.network-node svg{width:21px;height:21px}
.node-a{left:4%;top:26%}
.node-b{left:42%;top:5%;color:#8ea2ff}
.node-c{right:7%;top:34%}
.node-d{left:35%;bottom:4%;color:#8ea2ff}

.network-line{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(108,134,255,.52),rgba(255,122,24,.42),transparent);
  transform-origin:left center;
}

.line-a{left:18%;top:38%;width:46%;transform:rotate(-18deg)}
.line-b{left:51%;top:30%;width:35%;transform:rotate(25deg)}
.line-c{left:26%;top:65%;width:46%;transform:rotate(-11deg)}

.media-chip-row{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.media-chip-row span,
.cloud-status div{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border-radius:999px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  background:rgba(7,11,22,.52);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}

.cloud-orbit{
  position:absolute;
  inset:118px 26px auto;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  opacity:.28;
}

.cloud-orbit span{
  min-height:72px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:var(--orange-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
}

.cloud-orbit span:nth-child(2){color:#8ea2ff;transform:translateY(18px)}
.cloud-orbit span:nth-child(3){transform:translateY(2px)}
.cloud-orbit svg{width:24px;height:24px}

.cloud-status{
  position:relative;
  z-index:3;
  display:grid;
  gap:8px;
}

.cloud-status div{
  justify-content:flex-start;
  border-radius:14px;
}

.cloud-status span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange-vivid);
  box-shadow:0 0 14px rgba(255,122,24,.55);
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,22px);
  align-items:stretch;
}

.service-card{
  position:relative;
  grid-column:span 4;
  min-height:unset;
  height:auto;
  padding:clamp(22px,2vw,28px);
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(9,15,30,.84),rgba(7,11,22,.68)),
    linear-gradient(135deg,rgba(43,77,255,.08),transparent 45%,rgba(255,106,0,.09));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease,background .32s ease;
}

.service-card::after,
.insight-card::after,
.contact-card::after,
.process-grid article::after,
.metric-showcase::after,
.metric-tile::after,
.metric-card-pro::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}

.service-card::before,
.insight-card::before,
.contact-card::before,
.process-grid article::before,
.metric-showcase::before,
.metric-tile::before,
.metric-card-pro::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 34%);
  opacity:0;
  transition:opacity .26s ease;
  pointer-events:none;
}

.service-card:hover,
.insight-card:hover,
.contact-card:hover,
.process-grid article:hover,
.metric-showcase:hover,
.metric-tile:hover,
.metric-card-pro:hover{
  transform:translateY(-2px) scale(1.002);
  border-color:rgba(108,134,255,.16);
  box-shadow:0 20px 48px rgba(0,0,0,.34),0 0 18px rgba(43,77,255,.1),inset 0 1px 0 rgba(255,255,255,.05);
}

.service-card:hover::before,
.insight-card:hover::before,
.contact-card:hover::before,
.process-grid article:hover::before,
.metric-showcase:hover::before,
.metric-tile:hover::before,
.metric-card-pro:hover::before{
  opacity:1;
}

.service-card-wide{grid-column:span 8}
.service-card-feature{grid-column:span 8}
.service-card-feature{
  grid-column:span 12;
}

.service-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
}

.icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:var(--orange);
  background:linear-gradient(180deg,rgba(255,106,0,.18),rgba(255,122,24,.08));
  border:1px solid rgba(255,106,0,.34);
  box-shadow:0 0 26px rgba(255,106,0,.12);
}

.icon svg{
  width:24px;
  height:24px;
  animation:iconFloat 3.8s ease-in-out infinite;
}

@keyframes iconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

.service-kicker{
  padding:9px 14px;
  border-radius:999px;
  color:var(--muted);
  background:rgba(10,16,30,.64);
  border:1px solid rgba(255,255,255,.06);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.service-card h3,
.stack-points h3,
.insight-card h3,
.contact-card h3,
.process-grid h3,
.metric-showcase h3{
  font-family:var(--font-title);
  letter-spacing:0;
}

.service-card h3{
  margin-bottom:14px;
  font-size:clamp(1.28rem,1.7vw,1.58rem);
  line-height:1.22;
}

.service-card p,
.stack-points p,
.insight-card p,
.process-grid p,
.faq-grid p,
.contact-card p,
.metric-showcase p,
.metric-tile span,
.footer p,
.footer a{
  color:var(--muted);
  line-height:1.7;
}

.section-metrics{
  background:
    radial-gradient(circle at 18% 22%,rgba(43,77,255,.08),transparent 24%),
    linear-gradient(180deg,rgba(10,16,30,.58),rgba(7,11,22,.46));
}

.metrics-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,20px);
  align-items:stretch;
}

.metric-showcase,
.metric-tile,
.metric-card-pro{
  position:relative;
  min-height:210px;
  padding:22px;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(136,162,255,.18);
  box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);
  background:
    linear-gradient(180deg,rgba(12,18,34,.82),rgba(8,13,26,.68)),
    linear-gradient(135deg,rgba(43,77,255,.08),transparent 45%,rgba(255,106,0,.08));
}

.metric-card-pro{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  border-radius:22px;
}

.metric-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:var(--orange-soft);
  background:linear-gradient(180deg,rgba(255,106,0,.16),rgba(255,122,24,.07));
  border:1px solid rgba(255,122,24,.26);
}

.metric-icon svg{
  width:21px;
  height:21px;
}

.metric-label-pro{
  color:var(--muted-soft);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.metric-card-pro strong{
  display:block;
  font-family:var(--font-title);
  font-size:clamp(2.05rem,3vw,2.8rem);
  line-height:1;
  letter-spacing:-.04em;
}

.metric-card-pro p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.55;
}

.metric-bar{
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.metric-bar span{
  display:block;
  width:var(--bar,70%);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--orange),var(--orange-soft),var(--blue-soft));
  box-shadow:0 0 14px rgba(255,122,24,.26);
}

.metric-showcase{
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  align-self:stretch;
  border-color:rgba(255,106,0,.34);
  box-shadow:0 22px 54px rgba(0,0,0,.34),0 0 24px rgba(255,106,0,.12),inset 0 1px 0 rgba(255,255,255,.04);
}

.metric-ring{
  position:relative;
  width:116px;
  height:116px;
  margin:6px auto 12px;
}

.metric-ring svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.metric-ring circle{
  fill:none;
  stroke:rgba(255,255,255,.12);
  stroke-width:10;
}

.metric-ring .progress{
  stroke:url(#metricGradient);
  stroke-linecap:round;
  stroke-dasharray:289;
  stroke-dashoffset:289;
  filter:drop-shadow(0 0 12px rgba(255,122,24,.35));
  transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1);
}

.metric-showcase.active .metric-ring .progress,
.metrics-grid.active .metric-showcase .metric-ring .progress{
  stroke-dashoffset:calc(289 - (289 * var(--progress) / 100));
}

.metric-ring strong{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-title);
  font-size:1.72rem;
  letter-spacing:0;
  white-space:nowrap;
}

.metric-ring strong>span{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
}

.metric-tile{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.metric-tile strong{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-title);
  font-size:clamp(2rem,3vw,2.65rem);
  letter-spacing:0;
}

.metric-showcase p{
  max-width:230px;
  margin:0 auto;
  font-size:.92rem;
}

.metric-kicker{
  align-self:stretch;
  justify-content:center;
  margin-bottom:10px;
}

.section-structure{
  background:
    radial-gradient(circle at 84% 18%,rgba(43,77,255,.12),transparent 22%),
    linear-gradient(180deg,rgba(6,10,20,0),rgba(6,10,20,.34));
}

.structure{
  padding-top:clamp(72px,8vw,104px);
}

.structure-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,4vw,48px);
  align-items:start;
}

.stack-points{
  display:grid;
  gap:12px;
  margin-top:24px;
}

.stack-points article,
.process-grid article{
  position:relative;
  padding:18px 20px;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(10,16,30,.8),rgba(7,11,22,.62));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.stack-points strong,
.process-grid span{
  display:inline-flex;
  margin-bottom:10px;
  color:var(--orange-soft);
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.stack-points h3,
.process-grid h3{
  margin-bottom:8px;
  font-size:1.16rem;
}

.structure-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,20px);
  align-items:stretch;
}

.insight-card{
  position:relative;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(10,16,30,.82),rgba(7,11,22,.64));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.04);
}

.insight-main{
  grid-column:span 2;
  min-height:auto;
  justify-content:space-between;
  background:
    radial-gradient(circle at 80% 14%,rgba(255,106,0,.13),transparent 25%),
    radial-gradient(circle at 10% 90%,rgba(43,77,255,.14),transparent 30%),
    linear-gradient(180deg,rgba(10,16,30,.86),rgba(7,11,22,.68));
}

.insight-top{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted-soft);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--orange),var(--orange-soft));
  box-shadow:0 0 18px rgba(255,106,0,.46);
}

.insight-main h3{
  max-width:560px;
  margin:16px 0 22px;
  font-size:clamp(1.55rem,2.2vw,2.12rem);
  line-height:1.14;
}

.insight-meter{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.insight-meter div{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(9,15,30,.74);
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:baseline;
  gap:8px;
}

.insight-card h3{
  display:block;
  font-family:var(--font-title);
  letter-spacing:0;
}

.insight-meter strong{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  font-family:var(--font-title);
  font-size:clamp(1.28rem,1.7vw,1.5rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--white);
  flex:0 0 auto;
}

.insight-meter strong span{
  color:inherit;
  font-size:inherit;
  line-height:inherit;
}

.insight-meter div>span{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.25;
}

.insight-card:not(.insight-main) h3{
  margin-bottom:10px;
  font-size:clamp(1.8rem,3vw,2.45rem);
}

.section-microsoft{
  background:
    radial-gradient(circle at 80% 18%,rgba(255,106,0,.12),transparent 22%),
    linear-gradient(135deg,rgba(7,11,22,.26),rgba(10,16,30,.56));
}

.microsoft-shell{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,42px);
  padding:clamp(28px,4vw,42px);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(9,15,30,.84),rgba(7,11,22,.68));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.04);
}

.microsoft-stack{
  display:grid;
  gap:22px;
  align-content:start;
}

.microsoft-media{
  min-height:auto;
  max-height:none;
}

.faq-grid{
  display:grid;
  gap:14px;
  align-content:start;
}

.faq-grid details{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(10,16,30,.74);
  overflow:hidden;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}

.faq-grid details[open]{
  border-color:rgba(255,106,0,.26);
  background:rgba(34,20,10,.42);
}

.faq-grid summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  cursor:pointer;
  font-weight:800;
  list-style:none;
}

.faq-grid summary::-webkit-details-marker{display:none}

.faq-grid summary svg{
  transition:transform .25s ease,color .25s ease;
}

.faq-grid details[open] summary svg{
  transform:rotate(180deg);
  color:var(--orange);
}

.faq-grid p{
  margin:0;
  padding:0 20px 18px;
}

.section-process{
  background:
    radial-gradient(circle at 20% 14%,rgba(43,77,255,.08),transparent 22%),
    linear-gradient(180deg,rgba(6,10,20,0),rgba(6,10,20,.3));
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,20px);
}

.process-grid article{
  min-height:auto;
}

.section-contact{
  background:
    linear-gradient(135deg,rgba(43,77,255,.1),rgba(6,10,20,.12) 32%,rgba(255,106,0,.12) 100%);
}

.contact-shell{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(28px,4vw,48px);
  align-items:stretch;
}

.contact-pills{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.contact-pills span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(10,16,30,.64);
  border:1px solid rgba(255,255,255,.06);
  color:var(--muted);
}

.contact-pills svg{
  width:17px;
  height:17px;
  color:var(--orange);
}

.contact-card{
  position:relative;
  padding:34px;
  overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(circle at 80% 12%,rgba(255,106,0,.12),transparent 24%),
    linear-gradient(180deg,rgba(10,16,30,.84),rgba(7,11,22,.66));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.04);
}

.contact-card h3{
  margin-bottom:14px;
  font-size:1.55rem;
}

.contact-button{
  width:100%;
  margin:28px 0 22px;
  min-height:58px;
  font-size:1rem;
}

.contact-link{
  display:block;
  margin-top:10px;
  color:var(--white);
  opacity:.88;
}

.footer{
  position:relative;
  padding:64px 0 24px;
  border-top:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg,rgba(8,13,26,.72),rgba(3,6,12,.92)),
    radial-gradient(circle at 82% 0%,rgba(255,106,0,.08),transparent 34%);
}

.footer::before{
  content:"";
  position:absolute;
  left:50%;
  top:18px;
  width:min(1180px,calc(100% - 40px));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,106,0,.18),rgba(108,134,255,.12),transparent);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.35fr .8fr 1fr;
  gap:42px;
  align-items:start;
}

.footer-logo{
  width:138px;
  margin-bottom:16px;
  filter:brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0,0,0,.18));
  opacity:.9;
}

.footer nav,
.footer-grid div:last-child{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer h3{
  margin-bottom:8px;
  font-size:12px;
  color:var(--orange-soft);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.footer p,
.footer a{
  font-size:.94rem;
}

.footer a{
  transition:color .24s ease,transform .24s ease;
}

.footer nav a:hover,
.footer-grid div:last-child a:hover{
  color:var(--white);
  transform:translateX(2px);
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:38px;
  padding-top:18px;
  border-top:1px solid rgba(108,134,255,.12);
}

.footer-bottom p{
  margin:0;
  font-size:.82rem;
  color:var(--muted-soft);
}

.dev-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:rgba(10,16,30,.5);
  color:var(--muted-soft);
  font-size:8px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.dev-brand img{
  width:92px;
  max-height:26px;
  object-fit:contain;
  opacity:.86;
  filter:saturate(.95);
}

.dev-brand:hover{
  border-color:rgba(255,106,0,.24);
  color:var(--white);
}

.whatsapp{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:900;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(180deg,#25d366,#1ba954);
  box-shadow:0 18px 44px rgba(37,211,102,.3);
  transition:opacity .28s ease,transform .28s ease;
}

.whatsapp svg{
  width:31px;
  height:31px;
}

body.near-footer .whatsapp{
  opacity:0;
  pointer-events:none;
  transform:translateY(18px);
}

.cookie{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:1100;
  width:min(420px,calc(100vw - 48px));
  padding:24px;
  border-radius:24px;
  background:rgba(7,11,22,.94);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow-lg);
  display:none;
}

.cookie.show{display:block}

.cookie h3{
  margin-bottom:8px;
  font-family:var(--font-title);
}

.cookie p{
  color:var(--muted);
  line-height:1.6;
}

.cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.cookie button{
  border-radius:12px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
}

.cookie button:last-child{
  background:var(--orange);
  border-color:var(--orange);
}

.cookie label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.cookie small{
  display:block;
  color:var(--muted-soft);
}

.reveal{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1),
    filter .85s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}

body.reveal-ready .reveal{
  opacity:0;
  transform:translateY(32px);
  filter:blur(6px);
}

body.reveal-ready .reveal.active{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.delay-1{--reveal-delay:120ms}
.magnetic{will-change:transform}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }

  .reveal,
  .hero-animate{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@media(max-width:1100px){
  .desktop-nav,
  .header-actions{
    display:none;
  }

  .mobile-toggle{
    display:flex;
  }

  .hero-shell,
  .solutions-intro,
  .structure-grid,
  .microsoft-shell,
  .contact-shell{
    grid-template-columns:1fr;
  }

  .hero{
    padding-top:118px;
  }

  .hero-visual{
    min-height:430px;
  }

  .hero-panel{
    margin-right:10px;
  }

  .service-card,
  .service-card-wide,
  .service-card-feature{
    grid-column:span 6;
  }

  .service-card-feature{
    grid-column:span 12;
  }

  .metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  .metric-showcase{
    grid-column:span 2;
  }

  .process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
}

@media(max-width:760px){
  .container{
    width:min(100% - 28px,1180px);
  }

  .section{
    padding:64px 0;
    scroll-margin-top:96px;
  }

  .section::after{
    width:calc(100% - 28px);
  }

  .site-header{
    height:66px;
    padding:0 10px 0 18px;
  }

  .brand-logo{
    width:78px;
  }

  .microsoft-shell,
  .contact-card{
    padding:24px;
  }

  .hero h1{
    font-size:2.25rem;
    line-height:1.08;
  }

  .hero-text{
    font-size:.96rem;
    line-height:1.65;
  }

  .hero-subtext{
    font-size:.9rem;
    line-height:1.62;
  }

  .hero-actions .btn{
    padding:14px 22px;
    width:100%;
  }

  .hero-proof{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .glass-chip{
    max-width:none;
    min-width:0;
  }

  .hero-visual{
    min-height:auto;
  }

  .hero-panel{
    width:min(100%,360px);
    margin:0 auto;
    padding:18px;
  }

  .hero-panel-grid{
    grid-template-columns:1fr;
  }

  .metric-card-highlight{
    grid-column:span 1;
  }

  .section-media,
  .microsoft-media{
    padding:18px;
  }

  .network-map{
    min-height:108px;
  }

  .media-main-card{
    padding:16px;
  }

  .cloud-orbit{
    display:none;
  }

  .visual-halo{
    display:none;
  }

  .service-grid,
  .structure-cards,
  .process-grid,
  .footer-grid,
  .metrics-grid{
    grid-template-columns:1fr;
  }

  .service-card,
  .service-card-wide,
  .service-card-feature,
  .metric-showcase{
    grid-column:span 1;
  }

  .metric-showcase,
  .metric-tile,
  .metric-card-pro{
    min-height:auto;
    padding:18px;
  }

  .metric-ring{
    width:104px;
    height:104px;
    margin:8px auto 12px;
  }

  .metric-ring strong{
    font-size:1.55rem;
  }

  .metric-showcase p{
    max-width:260px;
    font-size:.88rem;
    line-height:1.55;
  }

  .metric-kicker{
    padding:7px 10px;
    font-size:10px;
  }

  .insight-main{
    grid-column:span 1;
  }

  .insight-meter{
    grid-template-columns:1fr;
  }

  .insight-meter div{
    align-items:center;
  }

  .contact-shell,
  .footer-bottom,
  .hero-actions{
    align-items:stretch;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer{
    padding:58px 0 28px;
  }

  .footer p,
  .footer a{
    font-size:.86rem;
  }

  .footer-logo{
    width:122px;
  }

  .dev-brand img{
    width:88px;
  }

  .cookie{
    left:14px;
    right:14px;
    bottom:14px;
    width:auto;
  }

  .whatsapp{
    right:16px;
    bottom:16px;
    width:54px;
    height:54px;
  }

  .whatsapp svg{
    width:28px;
    height:28px;
  }
}