:root{

--bg:#f2f2f2;
--surface:#ffffff;
--text:#1a1a1a;
--muted:#5f5f5f;
--primary:#0067b8;

--border:rgba(0,0,0,0.08);

}

/* DARK MODE */

body.dark{

--bg:#0f172a;
--surface:#111827;
--text:#f3f4f6;
--muted:#9ca3af;
--border:rgba(255,255,255,0.08);

}

/* RESET */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:
"Segoe UI",
Arial,
sans-serif;

background:var(--bg);

color:var(--text);

transition:0.4s ease;

overflow-x:hidden;

}

/* NAVBAR */

.navbar{

height:54px;

display:flex;
justify-content:space-between;
align-items:center;

padding:0 48px;

background:white;

border-bottom:1px solid var(--border);

position:sticky;
top:0;

z-index:1000;

}

body.dark .navbar{

background:#0f172a;

}

.nav-left{

display:flex;
align-items:center;

gap:34px;

}

.logo{

height:26px;

}

.nav-links{

display:flex;
gap:28px;

}

.nav-links a{

text-decoration:none;

font-size:13px;

color:var(--text);

transition:0.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.theme-btn{

border:none;
background:transparent;

font-size:18px;

cursor:pointer;

}

/* HERO */

.hero{

position:relative;

display:grid;

grid-template-columns:
minmax(520px,620px)
minmax(420px,560px);

justify-content:space-between;

align-items:center;

padding:
40px
70px
40px;

gap:20px;

min-height:520px;

background:
linear-gradient(
90deg,
#2d2d2d 0%,
#494949 42%,
#d9d9d9 100%
);

overflow:hidden;

}

.hero-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,0.55),
rgba(0,0,0,0.08)
);

}

.hero-content{

position:relative;
z-index:2;

max-width:560px;

}

.hero-badge{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:
rgba(255,255,255,0.12);

backdrop-filter:blur(10px);

color:white;

font-size:13px;

margin-bottom:22px;

}

.hero h1{

font-size:44px;

line-height:1.04;

font-weight:600;

letter-spacing:-1.5px;

color:white;

max-width:560px;

}

.hero p{

margin-top:18px;

font-size:17px;

line-height:1.7;

color:
rgba(255,255,255,0.88);

max-width:540px;

}

.hero-buttons{

display:flex;
gap:14px;

margin-top:28px;

}

.btn{

padding:13px 22px;

border-radius:3px;

text-decoration:none;

font-weight:600;

font-size:14px;

transition:0.3s;

}

.primary{

background:#0067b8;
color:white;

}

.secondary{

background:white;
color:#1a1a1a;

}

.btn:hover{

transform:translateY(-2px);

}

.hero-image{

position:relative;
z-index:2;

display:flex;
justify-content:center;

}

.hero-image img{

width:100%;

max-width:520px;

object-fit:cover;

border-radius:4px;

}

/* KPI SECTION */

.kpi-section{

padding:34px 60px;

background:var(--bg);

}

.kpi-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:18px;

}

.kpi-card{

background:var(--surface);

padding:26px;

border:1px solid var(--border);

}

.kpi-card h3{

font-size:32px;

color:var(--primary);

margin-bottom:6px;

}

.kpi-card span{

display:block;

font-size:14px;

color:var(--muted);

}

/* MICROSOFT TILES */

.tiles-section{

padding:
30px
60px
80px;

}

.tiles-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:18px;

}

.tile{

background:white;

transition:0.3s;

border:1px solid var(--border);

}

body.dark .tile{

background:#111827;

}

.tile:hover{

transform:translateY(-4px);

}

.tile img{

width:100%;
height:210px;

object-fit:cover;

}

.tile-content{

padding:22px;

}

.tile-content h3{

font-size:28px;

line-height:1.1;

font-weight:500;

margin-bottom:14px;

}

.tile-content p{

font-size:15px;

line-height:1.7;

color:var(--muted);

margin-bottom:20px;

}

.tile-content a{

text-decoration:none;

font-weight:600;

font-size:14px;

color:var(--primary);

}

/* ENTERPRISE */

.enterprise-section{

padding:
80px
60px;

}

.enterprise-section h2{

font-size:40px;

line-height:1.12;

margin-bottom:24px;

}

.enterprise-section p{

font-size:17px;

line-height:1.8;

max-width:900px;

color:var(--muted);

}

/* FOOTER */

footer{

padding:40px 60px;

border-top:1px solid var(--border);

font-size:14px;

color:var(--muted);

}

/* CASES HERO */

.case-hero{

position:relative;

display:grid;

grid-template-columns:
minmax(520px,620px)
minmax(400px,540px);

justify-content:space-between;

align-items:center;

padding:
35px
70px
35px;

gap:20px;

min-height:520px;

background:
linear-gradient(
90deg,
#2d2d2d 0%,
#494949 42%,
#d9d9d9 100%
);

overflow:hidden;

}

.case-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,0.55),
rgba(0,0,0,0.08)
);

}

.case-hero-content{

position:relative;
z-index:2;

max-width:560px;

}

.case-badge{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:
rgba(255,255,255,0.12);

color:white;

font-size:13px;

margin-bottom:20px;

backdrop-filter:blur(10px);

}

.case-hero h1{

font-size:44px;

line-height:1.04;

font-weight:600;

letter-spacing:-2px;

color:white;

max-width:560px;

}

.case-hero p{

margin-top:18px;

font-size:16px;

line-height:1.7;

color:
rgba(255,255,255,0.88);

max-width:520px;

}

.case-hero-image{

position:relative;
z-index:2;

display:flex;
justify-content:center;

}

.case-hero-image img{

width:100%;

max-width:500px;

object-fit:cover;

border-radius:4px;

}

/* CASE SECTION */

.case-section{

padding:
80px
60px;

background:var(--surface);

}

.case-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}

.case-image img{

width:100%;

border-radius:4px;

}

.section-label{

font-size:12px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

color:var(--primary);

margin-bottom:16px;

}

.case-text h2{

font-size:34px;

line-height:1.1;

margin-bottom:20px;

}

.case-text p{

font-size:16px;

line-height:1.8;

color:var(--muted);

margin-bottom:18px;

}

.section-title{

font-size:40px;

margin-bottom:36px;

}

/* IMPACT */

.impact-section{

padding:
80px
60px;

background:var(--bg);

}

.impact-container{

display:grid;

grid-template-columns:1fr 360px;

gap:50px;

align-items:start;

}

.impact-left h2{

font-size:38px;

line-height:1.1;

margin-bottom:24px;

}

.impact-list{

list-style:none;

display:grid;

gap:16px;

}

.impact-list li{

font-size:16px;

line-height:1.7;

color:var(--muted);

}

.microsoft-card{

background:var(--surface);

padding:28px;

border:1px solid var(--border);

}

.microsoft-logo{

width:90px;

margin-bottom:24px;

}

.microsoft-card h3{

font-size:22px;

line-height:1.2;

margin-bottom:18px;

}

.microsoft-card p{

font-size:15px;

line-height:1.7;

color:var(--muted);

}

/* REVEAL ANIMATIONS */

.reveal,
.reveal-left,
.reveal-right{

opacity:0;

transition:1s ease;

}

.reveal{

transform:translateY(40px);

}

.reveal-left{

transform:translateX(-50px);

}

.reveal-right{

transform:translateX(50px);

}

.reveal.active,
.reveal-left.active,
.reveal-right.active{

opacity:1;
transform:translate(0);

}

/* RESPONSIVE */

@media(max-width:1100px){

.hero,
.case-hero{

grid-template-columns:1fr;

padding:60px 30px;

}

.hero h1,
.case-hero h1{

font-size:40px;

}

.tiles-grid{

grid-template-columns:1fr;

}

.kpi-grid{

grid-template-columns:1fr 1fr;

}

.case-grid{

grid-template-columns:1fr;

}

.impact-container{

grid-template-columns:1fr;

}

.nav-links{

display:none;

}

}
/* OVERVIEW PAGE */

.overview-hero{

position:relative;

display:grid;

grid-template-columns:
minmax(520px,620px)
minmax(360px,460px);

justify-content:space-between;

align-items:center;

padding:
50px
70px;

min-height:540px;

background:
linear-gradient(
90deg,
#2f2f2f 0%,
#4d4d4d 42%,
#d9d9d9 100%
);

overflow:hidden;

}

.overview-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,0.55),
rgba(0,0,0,0.08)
);

}

.overview-content{

position:relative;
z-index:2;

max-width:560px;

color:white;

}

.overview-image{

position:relative;
z-index:2;

display:flex;
justify-content:center;

}

.overview-image img{

width:100%;
max-width:420px;

border-radius:4px;

object-fit:cover;

box-shadow:
0 20px 50px rgba(0,0,0,0.25);

}

.overview-section{

padding:
80px
60px;

background:var(--surface);

}

.overview-grid{

display:grid;

grid-template-columns:1fr 420px;

gap:60px;

align-items:start;

}

.overview-text h2{

font-size:42px;

line-height:1.08;

margin-bottom:24px;

}

.overview-text p{

font-size:17px;

line-height:1.9;

color:var(--muted);

margin-bottom:22px;

}

.overview-cards{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

.mini-card{

background:var(--bg);

padding:26px;

border:1px solid var(--border);

}

.mini-card h3{

font-size:26px;

margin-bottom:8px;

color:var(--primary);

}

.mini-card span{

font-size:14px;

color:var(--muted);

display:block;

line-height:1.5;

}

@media(max-width:1100px){

.overview-hero{

grid-template-columns:1fr;

padding:60px 30px;

}

.overview-grid{

grid-template-columns:1fr;

}

.overview-text h2{

font-size:36px;

}

}
/* SUPPORT PAGE */

.support-hero{

position:relative;

display:flex;

align-items:center;

padding:
70px
70px;

min-height:520px;

background:
url('https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=2070&auto=format&fit=crop')
center/cover;

overflow:hidden;

}

.support-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,0.70),
rgba(0,0,0,0.20)
);

}

.support-content{

position:relative;
z-index:2;

max-width:620px;

color:white;

}

.support-overview{

padding:
80px
60px;

background:var(--surface);

}

.support-grid{

display:grid;

grid-template-columns:1fr 420px;

gap:60px;

align-items:start;

}

.support-text h2{

font-size:42px;

line-height:1.08;

margin-bottom:24px;

}

.support-text p{

font-size:17px;

line-height:1.9;

color:var(--muted);

margin-bottom:22px;

}

.plans-section{

padding:
90px
60px;

}

.plans-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:26px;

margin-top:50px;

}

.plan-card{

background:var(--surface);

padding:34px;

border:1px solid var(--border);

transition:.35s;

}

.plan-card:hover{

transform:translateY(-6px);

box-shadow:0 15px 40px rgba(0,0,0,0.08);

}

.plan-card.featured{

border:2px solid var(--primary);

transform:scale(1.03);

}

.plan-tag{

display:inline-block;

padding:8px 14px;

background:rgba(0,120,212,0.10);

color:var(--primary);

font-size:12px;

font-weight:600;

margin-bottom:20px;

border-radius:999px;

}

.plan-card h3{

font-size:30px;

margin-bottom:18px;

}

.plan-card p{

line-height:1.8;

color:var(--muted);

margin-bottom:22px;

}

.plan-card ul{

padding-left:18px;

line-height:2;

color:var(--muted);

}

@media(max-width:1100px){

.support-grid{

grid-template-columns:1fr;

}

.plans-grid{

grid-template-columns:1fr;

}

.support-hero{

padding:60px 30px;

}

}
/* MOBILE MENU */

.mobile-menu-btn{

display:none;

background:none;
border:none;

font-size:28px;

cursor:pointer;

color:var(--text);

margin-left:18px;

}

.mobile-menu{

display:none;

position:absolute;

top:72px;
left:0;
right:0;

background:var(--bg);

padding:20px;

border-top:1px solid var(--border);

box-shadow:0 10px 30px rgba(0,0,0,0.08);

z-index:999;

}

.mobile-menu a{

display:block;

padding:14px 0;

text-decoration:none;

color:var(--text);

font-size:16px;

border-bottom:1px solid var(--border);

}

/* MOBILE NAVBAR */

@media(max-width:950px){

.nav-links{

display:none;

}

.mobile-menu-btn{

display:block;

}

.hero{

padding:50px 24px;

min-height:auto;

}

.hero h1{

font-size:34px;

line-height:1.08;

}

.hero p{

font-size:15px;

}

.overview-hero{

padding:50px 24px;

}

.support-hero{

padding:50px 24px;

}

.tiles-grid{

grid-template-columns:1fr;

}

}
.nav-right{

display:flex;
align-items:center;
gap:14px;

}

.mobile-menu-btn{

display:none;

background:none;
border:none;

font-size:28px;

cursor:pointer;

color:var(--text);

}

.mobile-menu{

display:none;

position:absolute;

top:72px;
left:0;
right:0;

background:var(--bg);

padding:20px;

border-top:1px solid var(--border);

box-shadow:0 10px 30px rgba(0,0,0,0.08);

z-index:999;

}

.mobile-menu a{

display:block;

padding:14px 0;

text-decoration:none;

color:var(--text);

font-size:16px;

border-bottom:1px solid var(--border);

}

@media(max-width:950px){

.nav-links{

display:none;

}

.mobile-menu-btn{

display:block;

}

}
/* ======================================================
   COST OPTIMIZATION PAGE
====================================================== */

.cost-hero{

position:relative;

display:grid;

grid-template-columns:
minmax(520px,620px)
minmax(420px,560px);

justify-content:space-between;

align-items:center;

padding:
50px
70px;

gap:30px;

min-height:520px;

background:
linear-gradient(
90deg,
#2d2d2d 0%,
#4c4c4c 45%,
#d9d9d9 100%
);

overflow:hidden;

}

.cost-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,0.60),
rgba(0,0,0,0.10)
);

}

.cost-content{

position:relative;
z-index:2;

max-width:560px;

color:white;

}

.cost-content h1{

font-size:44px;

line-height:1.05;

font-weight:600;

letter-spacing:-1.5px;

margin-bottom:20px;

}

.cost-content p{

font-size:17px;

line-height:1.8;

color:rgba(255,255,255,0.88);

}

.cost-image{

position:relative;
z-index:2;

display:flex;
justify-content:center;

}

.cost-image img{

width:100%;

max-width:520px;

border-radius:4px;

object-fit:cover;

}

/* SECTIONS */

.cost-section{

padding:
55px
60px;

background:var(--surface);

}

.cost-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:28px;

margin-top:40px;

}

.cost-card{

background:var(--surface);

border:1px solid var(--border);

transition:.35s;

overflow:hidden;

}

.cost-card:hover{

transform:translateY(-5px);

box-shadow:
0 12px 30px rgba(0,0,0,0.08);

}

.cost-card img{

width:100%;

height:230px;

object-fit:cover;

}

.cost-card-content{

padding:28px;

}

.cost-card-content h3{

font-size:28px;

line-height:1.1;

margin-bottom:14px;

}

.cost-card-content p{

font-size:15px;

line-height:1.8;

color:var(--muted);

}

/* KPI */

.cost-kpis{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

margin-top:50px;

}

.cost-kpi{

background:var(--surface);

border:1px solid var(--border);

padding:28px;

}

.cost-kpi h2{

font-size:42px;

color:var(--primary);

margin-bottom:8px;

}

.cost-kpi span{

font-size:14px;

color:var(--muted);

line-height:1.6;

display:block;

}

/* MICROSOFT STYLE LABEL */

.section-mini{

font-size:12px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

color:var(--primary);

margin-bottom:16px;

}

/* RESPONSIVE */

@media(max-width:1100px){

.cost-hero{

grid-template-columns:1fr;

padding:60px 30px;

}

.cost-grid{

grid-template-columns:1fr;

}

.cost-kpis{

grid-template-columns:1fr;

}

.cost-content h1{

font-size:36px;

}

}
/* =========================================
   MOBILE MENU FIX FINAL
========================================= */

.mobile-menu{

display:none;
flex-direction:column;

}

.mobile-menu.active{

display:flex;

}

/* DESKTOP */

.mobile-menu-btn{

display:none;

}

/* MOBILE */

@media(max-width:950px){

.mobile-menu-btn{

display:block;

}

}