:root {
--az-navy: #071525;
--az-ink: #10233b;
--az-blue: #0a6f8f;
--az-cyan: #40d4df;
--az-gold: #ff9d42;
--az-coral: #ff6b4a;
--az-cream: #fff9f2;
--az-cloud: #f4f8fb;
--az-border: rgba(16, 35, 59, .11);
--az-shadow: 0 28px 80px rgba(7, 21, 37, .13);
}
html {
scroll-padding-top: 20px
}
body {
font-family: "Inter", system-ui, sans-serif;
background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
overflow-x: hidden
}
h1, h2, h3, h4 {
font-family: "Inter", system-ui, sans-serif;
letter-spacing: -.035em
}
p {
font-size: 1.02rem
}
section {
padding: 0 0
}
.page-progress {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--az-gold), var(--az-coral), var(--az-cyan));
box-shadow: 0 0 18px rgba(255, 157, 66, .7)
}
.floating-contact {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1000;
display: flex;
align-items: center;
gap: 9px;
padding: 13px 18px;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--az-coral), var(--az-gold));
box-shadow: 0 18px 40px rgba(255, 107, 74, .3);
font-weight: 800;
transition: .3s
}
.floating-contact:hover {
transform: translateY(-4px) scale(1.02)
}

.az360-section {
min-height: 860px;
padding: 150px 0 62px;
background: radial-gradient(circle at 12% 18%, rgba(64, 212, 223, .22), transparent 28%), radial-gradient(circle at 87% 15%, rgba(255, 157, 66, .22), transparent 27%), radial-gradient(circle at 55% 95%, rgba(255, 107, 74, .14), transparent 32%), linear-gradient(145deg, #04111e 0%, #092b42 56%, #0b526a 100%)
}
.az360-section:before {
content: "";
position: absolute;
inset: 0;
opacity: .18;
background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(to bottom, #000, transparent 92%)
}
.az360-title {
max-width: 1350px;
margin: 28px auto 20px;
font-size: clamp(3.1rem, 6.4vw, 4rem);
line-height: 1.01
}
.az360-title span {
background: linear-gradient(90deg, #8cf1f4, #fff 48%, #ffc57f);
-webkit-background-clip: text;
background-clip: text;
color: transparent
}
.az360-tagline {
max-width: 1150px;
margin: 0 auto 14px
}
.az360-copy {
font-size: 1.12rem
}
.az360-btn-primary, .az360-btn-secondary {
padding: 16px 24px;
border-radius: 14px;
transition: .3s
}
.az360-btn-primary {
background: linear-gradient(135deg, var(--az-gold), #ffc066);
box-shadow: 0 18px 38px rgba(255, 157, 66, .22)
}
.az360-btn-primary:hover, .az360-btn-secondary:hover {
transform: translateY(-4px)
}
.az360-btn-secondary {
backdrop-filter: blur(16px);
background: rgba(255, 255, 255, .08)
}
.az360-floating-card {
width: 245px;
border-radius: 22px;
background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
animation: floatCard 5s ease-in-out infinite
}
.az360-card-right {
animation-delay: -2.5s
}
@keyframes floatCard {
50% {
transform: translateY(-12px)
}
}
.az360-services {
margin-top: 96px;
border-radius: 22px;
background: rgba(255, 255, 255, .09);
backdrop-filter: blur(18px);
box-shadow: 0 24px 70px rgba(0, 0, 0, .18)
}
.az360-service-item {
padding: 24px 14px;
background: rgba(3, 18, 31, .52);
transition: .3s
}
.az360-service-item:hover {
background: rgba(255, 255, 255, .10);
transform: translateY(-4px)
}
.ms-az-intro {
background: linear-gradient(180deg, #fff8ee, #fff)
}
.ms-az-intro .container {
max-width: 1150px
}
.ms-az-intro h2 {
font-size: clamp(2.4rem, 4.8vw, 4rem)
}
.ms-az-heading {
max-width:1150px;
margin-bottom: 54px
}
.ms-az-benefit-card, .ms-az-report-card, .ms-az-small-industry, .ms-az-trust-card, .ms-az-service-card {
border-radius: 24px;
border: 1px solid var(--az-border);
box-shadow: 0 14px 45px rgba(7, 21, 37, .065);
position: relative;
overflow: hidden
}
.ms-az-benefit-card:before, .ms-az-report-card:before, .ms-az-service-card:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: linear-gradient(90deg, var(--az-cyan), var(--az-gold), var(--az-coral));
transform: scaleX(0);
transform-origin: left;
transition: .35s
}
.ms-az-benefit-card:hover:before, .ms-az-report-card:hover:before, .ms-az-service-card:hover:before {
transform: scaleX(1)
}
.ms-az-benefit-card:hover, .ms-az-report-card:hover, .ms-az-small-industry:hover, .ms-az-trust-card:hover, .ms-az-service-card:hover {
transform: translateY(-9px);
box-shadow: var(--az-shadow)
}
.ms-az-benefit-icon, .ms-az-service-icon, .ms-az-industry-icon {
width: 62px;
height: 62px;
border-radius: 19px;
background: linear-gradient(145deg, rgba(64, 212, 223, .18), rgba(10, 111, 143, .08));
box-shadow: inset 0 0 0 1px rgba(10, 111, 143, .1)
}
.ms-az-check-grid div {
padding: 16px 18px;
border-radius: 15px;
background: rgba(255, 255, 255, .82);
box-shadow: 0 10px 30px rgba(7, 21, 37, .055);
backdrop-filter: blur(8px)
}
.ms-az-approach {
background: linear-gradient(180deg, #f5fafc, #fff)
}
.visual-card {
min-height: 470px;
border-radius: 32px;
position: relative;
overflow: hidden;
box-shadow: 0 35px 90px rgba(7, 21, 37, .18)
}
.growth-dashboard {
padding: 25px;
background: radial-gradient(circle at 100% 0, rgba(64, 212, 223, .2), transparent 35%), linear-gradient(145deg, #071a2e, #0b3f59);
color: #fff
}
.dashboard-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 18px;
border-bottom: 1px solid rgba(255, 255, 255, .12);
font-weight: 800
}
.dashboard-top b {
font-size: .72rem;
padding: 6px 9px;
border-radius: 999px;
background: rgba(72, 222, 128, .16);
color: #7ff2a8
}
.dashboard-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 20px 0
}
.dashboard-metrics>div {
padding: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1)
}
.dashboard-metrics small, .dashboard-metrics span {
display: block;
color: #bcd2df
}
.dashboard-metrics strong {
display: block;
font-size:2.2em;
font-family: "Inter", system-ui, sans-serif;
margin: 0px 0;
font-weight:800;
}
.dashboard-chart {
position: relative;
height: 210px;
border-radius: 20px;
background: rgba(255, 255, 255, .04);
overflow: hidden
}
.dashboard-chart svg {
position: absolute;
inset: auto 0 0;
width: 100%;
height: 100%
}
.chart-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
background-size: 44px 44px
}
.dashboard-channels {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 18px
}
.dashboard-channels span {
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .09);
font-size: .82rem
}
.ms-az-ai, .ms-az-geo, .ms-az-trust {
background: radial-gradient(circle at 15% 15%, rgba(64, 212, 223, .12), transparent 28%), radial-gradient(circle at 88% 80%, rgba(255, 157, 66, .13), transparent 28%), linear-gradient(145deg, #061522, #092f48)
}
.ai-ecosystem {
min-height: 480px;
background: radial-gradient(circle at center, rgba(64, 212, 223, .12), transparent 35%), linear-gradient(145deg, #06111e, #0a3048);
border: 1px solid rgba(255, 255, 255, .12)
}
.ai-core {
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
width: 190px;
height: 190px;
transform: translate(-50%, -50%);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
background: linear-gradient(145deg, rgba(64, 212, 223, .24), rgba(255, 255, 255, .07));
border: 1px solid rgba(255, 255, 255, .22);
box-shadow: 0 0 70px rgba(64, 212, 223, .22)
}
.ai-core i {
font-size: 2rem;
color: #8ff4f5;
margin-bottom: 10px
}
.ai-core small {
color: #bcd2df
}
.ai-core-ring {
position: absolute;
inset: -15px;
border: 1px dashed rgba(255, 255, 255, .2);
border-radius: 50%;
animation: spin 18s linear infinite
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
.ai-orbit {
position: absolute;
left: 50%;
top: 50%;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 50%;
transform: translate(-50%, -50%)
}
.orbit-a {
width: 340px;
height: 340px
}
.orbit-b {
width: 440px;
height: 440px
}
.ai-chip {
position: absolute;
padding: 10px 14px;
border-radius: 13px;
color: #fff;
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .14);
backdrop-filter: blur(10px);
box-shadow: 0 14px 30px rgba(0, 0, 0, .15);
font-weight: 700
}
.ai-chip i {
color: var(--az-gold);
margin-right: 7px
}
.chip-1 {
left: 8%;
top: 16%
}
.chip-2 {
right: 7%;
top: 20%
}
.chip-3 {
right: 4%;
bottom: 18%
}
.chip-4 {
left: 9%;
bottom: 16%
}
.chip-5 {
left: 50%;
top: 5%;
transform: translateX(-50%)
}
.ms-az-funnel {
background: linear-gradient(180deg, #fff, #f5fafc)
}
.ms-az-funnel-item {
border-radius: 22px;
box-shadow: 0 12px 38px rgba(7, 21, 37, .06);
transition: .3s
}
.ms-az-funnel-item:hover {
transform: translateY(-8px)
}
.ms-az-funnel-item>i {
width: 52px;
height: 52px;
margin: 14px auto;
display: grid;
place-items: center;
border-radius: 16px;
background: rgba(10, 111, 143, .08)
}
.ms-az-service-card {
padding: 34px
}
.ms-az-service-card ul {
list-style: none;
padding: 0
}
.ms-az-service-card li {
position: relative;
padding-left: 22px
}
.ms-az-service-card li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--az-coral);
font-weight: 900
}
.ms-az-market {
background: #061522
}
.ms-az-market-content, .ms-az-market-visual {
min-height: 590px
}
.ms-az-market-visual {
position: relative;
overflow: hidden;
background: radial-gradient(circle at center, rgba(255, 157, 66, .22), transparent 35%), linear-gradient(145deg, #0b3550, #071a2a)
}
.ms-az-market-visual:before, .ms-az-market-visual:after {
content: "";
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .13)
}
.ms-az-market-visual:before {
width: 360px;
height: 360px
}
.ms-az-market-visual:after {
width: 500px;
height: 500px
}
.market-skyline {
z-index: 2
}
.market-skyline i {
filter: drop-shadow(0 18px 35px rgba(255, 157, 66, .24))
}
.ms-az-industry-card {
border-radius: 28px;
overflow: hidden;
box-shadow: 0 18px 55px rgba(7, 21, 37, .08);
transition: .35s
}
.ms-az-industry-card:hover {
transform: translateY(-8px);
box-shadow: var(--az-shadow)
}
.ms-az-industry-visual {
min-height: 210px;
position: relative;
overflow: hidden
}
.ms-az-industry-visual:before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
background-size: 34px 34px
}
.ms-az-industry-visual i {
position: relative;
z-index: 2;
filter: drop-shadow(0 16px 25px rgba(0, 0, 0, .18))
}
.ms-az-city-grid div {
border-radius: 16px;
background: linear-gradient(145deg, #fff, #f5fafc);
box-shadow: 0 12px 34px rgba(7, 21, 37, .055);
transition: .3s
}
.ms-az-city-grid div:hover {
transform: translateY(-5px);
border-color: rgba(255, 157, 66, .35)
}
.accordion-item {
border-radius: 18px !important;
box-shadow: 0 12px 34px rgba(7, 21, 37, .055);
transition: .25s
}
.accordion-item:hover {
box-shadow: 0 18px 45px rgba(7, 21, 37, .09)
}
.accordion-button {
font-family: "Inter", system-ui, sans-serif;
font-size: 1.03rem;
padding: 22px 24px
}
.accordion-button:after {
content: "+";
float: right;
font-size: 1.35rem;
color: var(--az-coral)!important;
}
.accordion-button[aria-expanded="true"]:after {
content: "−"
}
.ms-az-final-cta {
padding: 120px 0;
background: radial-gradient(circle at 20% 10%, rgba(64, 212, 223, .22), transparent 30%), radial-gradient(circle at 85% 85%, rgba(255, 157, 66, .22), transparent 30%), linear-gradient(145deg, #071525, #0a5068)
}
.ms-az-final-cta:before {
content: "";
position: absolute;
inset: 20px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 30px;
pointer-events: none
}
.ms-az-final-cta h2 {
font-size: clamp(2.4rem, 5vw, 4.6rem)
}
.reveal-item {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease
}
.reveal-item.is-visible {
opacity: 1;
transform: none
}
@media(max-width:1199px) {
.az360-section {
min-height: auto
}
.visual-card {
min-height: 440px
}
}
@media(max-width:991px) {
section {
padding: 84px 0
}
.az360-section {
padding-top: 115px
}
.az360-title {
font-size: clamp(3rem, 8vw, 5rem)
}
.floating-contact span {
display: none
}
.floating-contact {
width: 52px;
height: 52px;
padding: 0;
justify-content: center
}
.ms-az-market-content,  .ms-az-market-visual {
min-height: auto
}
.ms-az-market-visual {
min-height: 470px
}
}
@media(max-width:767px) {
.container {
width: min(100% - 28px, 1240px)
}
section {
padding: 10px 0
}
.az360-section {
padding: 95px 0 38px
}
.az360-title {
font-size: clamp(2.55rem, 12vw, 3.5rem)
}
.az360-copy {
font-size: 1rem
}
.az360-services {
margin-top: 56px
}
.dashboard-metrics {
grid-template-columns: 1fr
}
.dashboard-chart {
height: 160px
}
.visual-card {
min-height: 420px
}
.ai-ecosystem {
min-height: 430px
}
.orbit-b {
width: 350px;
height: 350px
}
.orbit-a {
width: 280px;
height: 280px
}
.ai-core {
width: 160px;
height: 160px
}
.ai-chip {
font-size: .76rem;
padding: 8px 10px
}
.ms-az-final-cta:before {
inset: 10px
}
.floating-contact {
right: 14px;
bottom: 14px
}
}
@media(max-width:480px) {
.az360-title {
font-size: 2.45rem
}
.visual-card {
border-radius: 24px
}
.growth-dashboard {
padding: 18px
}
.dashboard-metrics strong {
font-size: 1.8rem
}
.ai-chip {
position: absolute
}
.chip-1 {
left: 3%;
top: 10%
}
.chip-2 {
right: 3%;
top: 15%
}
.chip-3 {
right: 2%;
bottom: 12%
}
.chip-4 {
left: 2%;
bottom: 13%
}
.chip-5 {
top: 3%
}
.ms-az-service-card {
padding: 25px
}
.floating-contact {
display: none
}
}
@media(prefers-reduced-motion:reduce) {
* {
scroll-behavior: auto !important;
animation: none !important;
transition: none !important
}
.reveal-item {
opacity: 1;
transform: none
}
}