/* IT Experts sp. z o.o. — Main Stylesheet */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;overflow-x:hidden}
nav{background:linear-gradient(135deg,#0047AB 0%,#003380 100%);padding:1rem 0;position:fixed;width:100%;top:0;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.nav-container{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;gap:1rem}
.logo-container{display:flex;align-items:center;gap:15px;transition:transform .3s;flex:0 0 auto;min-width:300px}
.logo-container:hover{transform:scale(1.05)}
.logo{width:60px;height:60px}
.logo svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(100,181,246,.5))}
.logo-text{color:#fff;font-size:1.4rem;font-weight:700;letter-spacing:1px;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap}
.logo-text .company-type{font-size:.85rem;font-weight:600;display:block;margin-top:2px;opacity:.9;margin-left:3.2ch;white-space:nowrap}
.nav-links{display:flex;gap:2.0rem;list-style:none;flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
.nav-links a{color:#fff;text-decoration:none;font-weight:500;transition:all .3s;position:relative;padding:5px 0;font-size:.98rem;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#64B5F6;transition:width .3s}
.nav-links a:hover::after{width:100%}
.hero{background:linear-gradient(135deg,#0047AB 0%,#003380 50%,#001a4d 100%);color:#fff;padding:180px 2rem 120px;text-align:center;position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center}
.floating-elements{position:absolute;width:100%;height:100%;top:0;left:0}
.floating-element{position:absolute;background:rgba(100,181,246,.1);border-radius:50%;animation:float-up 15s infinite}
.floating-element:nth-child(1){width:80px;height:80px;left:10%;animation-delay:0s}
.floating-element:nth-child(2){width:120px;height:120px;left:70%;animation-delay:3s}
.floating-element:nth-child(3){width:60px;height:60px;left:40%;animation-delay:6s}
@keyframes float-up{0%{bottom:-150px;opacity:0;transform:translateX(0) rotate(0)}50%{opacity:.8;transform:translateX(100px) rotate(180deg)}100%{bottom:100%;opacity:0;transform:translateX(-100px) rotate(360deg)}}
.hero-content{max-width:1000px;margin:0 auto;position:relative;z-index:1}
.hero h1{font-size:4rem;margin-bottom:1.5rem;animation:slideIn 1s ease}
.hero .subtitle{font-size:1.5rem;margin-bottom:1rem;animation:slideIn 1s ease .2s both}
.hero p{font-size:1.2rem;margin-bottom:2.5rem;animation:slideIn 1s ease .4s both}
@keyframes slideIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.cta-buttons{display:flex;gap:1.5rem;justify-content:center;animation:slideIn 1s ease .6s both}
.cta-button{display:inline-block;background:#fff;color:#0047AB;padding:18px 45px;text-decoration:none;border-radius:50px;font-weight:700;font-size:1.1rem;transition:all .3s}
.cta-button:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.4)}
.cta-button-secondary{background:transparent;color:#fff;border:2px solid #fff}
.cta-button-secondary:hover{background:#fff;color:#0047AB}
.stats{background:linear-gradient(135deg,#001a4d 0%,#003380 100%);color:#fff;padding:80px 2rem}
.stats-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:3rem;text-align:center}
.stat-item{transition:transform .3s}
.stat-item:hover{transform:translateY(-10px)}
.stat-number{font-size:3.5rem;font-weight:700;color:#64B5F6}
section{padding:100px 2rem}
.container{max-width:1400px;margin:0 auto}
.section-title{text-align:center;font-size:3rem;color:#0047AB;margin-bottom:1rem}
.section-subtitle{text-align:center;font-size:1.3rem;color:#666;margin-bottom:4rem}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2.5rem}
.service-card{background:#fff;padding:3rem;border-radius:20px;box-shadow:0 8px 30px rgba(0,71,171,.1);transition:all .4s;border-top:5px solid #0047AB}
.service-card:hover{transform:translateY(-15px);box-shadow:0 20px 50px rgba(0,71,171,.25)}
.service-icon{width:80px;height:80px;background:linear-gradient(135deg,#0047AB,#003380);border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;font-size:36px}
.service-card h3{color:#0047AB;font-size:1.7rem;margin-bottom:1rem}
.service-card p{color:#666;line-height:1.8;margin-bottom:1.5rem}
.contact{background:linear-gradient(135deg,#0047AB 0%,#003380 100%);color:#fff}
.contact .section-title,.contact .section-subtitle{color:#fff}
.contact-info{max-width:800px;margin:0 auto;background:#fff;padding:3rem;border-radius:20px;color:#333}
.contact-item{margin-bottom:2rem;padding:1.5rem;background:#f8f9fa;border-radius:10px;border-left:4px solid #0047AB}
.contact-item h3{color:#0047AB;font-size:1.3rem;margin-bottom:.5rem}
.contact-item p{font-size:1.1rem;line-height:1.8;margin:.3rem 0}
.contact-item a{color:#0047AB;text-decoration:none;font-weight:600}
.contact-item a:hover{text-decoration:underline}
footer{background:#001a4d;color:#fff;padding:3rem 2rem;text-align:center}

@media (max-width:1200px){
  .nav-container{padding:0 1.5rem}
  .nav-links{gap:1.4rem}
  .nav-links a{font-size:.92rem}
  .logo-container{min-width:260px}
  .logo-text{font-size:1.25rem}
  .logo-text .company-type{font-size:.8rem}
}

@media (max-width:768px){.nav-links{display:none}.hero h1{font-size:2.5rem}.services-grid{grid-template-columns:1fr}.cta-buttons{flex-direction:column}}
.lang-switch{display:flex;gap:6px;align-items:center}
.lang-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;padding:5px 8px;border-radius:9px;cursor:pointer;font-size:.75rem;font-weight:700;transition:all .25s;line-height:1;display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:54px;white-space:nowrap}
.lang-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.18)}
.lang-btn.active{background:#fff;color:#0047AB;border-color:#fff}
.nav-right{display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;flex:1 1 auto;justify-content:flex-end}
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
.cookie-banner{position:fixed;bottom:20px;left:20px;right:20px;background:#0047AB;color:#fff;padding:1rem 1.2rem;border-radius:10px;box-shadow:0 5px 20px rgba(0,0,0,.4);display:none;z-index:2000}
.cookie-banner.show{display:block}
.cookie-banner-inner{display:flex;gap:14px;align-items:center;justify-content:space-between}
.cookie-text{font-size:.95rem;line-height:1.35;color:rgba(255,255,255,.92);margin:0}
.cookie-actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-btn{border-radius:10px;padding:10px 12px;font-size:.9rem;cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:rgba(255,255,255,.95)}
.cookie-btn.primary{background:rgba(255,255,255,.18)}
.cookie-btn:hover{filter:brightness(1.06)}
@media (max-width:768px){.cookie-banner{left:12px;right:12px;bottom:12px}.cookie-banner-inner{flex-direction:column;align-items:flex-start}.cookie-actions{width:100%}.cookie-btn{flex:1;width:100%;text-align:center}}


/* === Mobile & small screens improvements (desktop unchanged) === */
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);color:#fff;cursor:pointer;
  font-size:20px;line-height:1;transition:transform .2s,background .2s}
.nav-toggle:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}
img,video,iframe{max-width:100%;height:auto}
.hero{min-height:100svh} /* better on iOS dynamic bars */

@media (max-width: 980px){
  nav{padding:.75rem 0}
  .nav-container{padding:0 12px}
  .logo-container{min-width:0;gap:10px}
  .logo{width:48px;height:48px}
  .logo-text{font-size:1.15rem}
  .logo-text .company-type{font-size:.78rem;margin-left:3.2ch}
  .nav-right{gap:10px}
  .nav-toggle{display:inline-flex}
  /* turn the link row into a dropdown panel */
  .nav-links{
    position:fixed; top:calc(74px + env(safe-area-inset-top)); left:12px; right:12px;
    background:rgba(0,26,77,.96); backdrop-filter:blur(10px);
    padding:14px 16px; border-radius:14px;
    display:none; flex-direction:column; gap:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    max-height:calc(100vh - 100px); overflow:auto;
  }
  nav.itx-open .nav-links{display:flex}
  .nav-links a{font-size:1.05rem;padding:8px 0}
  .nav-links a::after{display:none}
  .lang-switch{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .lang-btn{min-width:56px;height:30px;padding:5px 8px;border-radius:10px;font-size:.75rem}
  .hero{padding:150px 16px 90px}
  .hero h1{font-size:2.6rem}
  section{padding:80px 16px}
  .services-grid{grid-template-columns:1fr;gap:18px}
  .service-card{padding:2rem}
}

@media (max-width: 420px){
  .logo-text{font-size:1.05rem}
  .logo-text .company-type{font-size:.74rem}
  .nav-toggle{width:38px;height:38px}
}

.m365-partner-note{margin-top:14px;opacity:.95}

.hero-quick-contact{margin-top:18px;font-size:1.05rem;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.hero-quick-contact a{color:#fff;text-decoration:underline;font-weight:700}
.hero-quick-contact .sep{opacity:.65}
@media (max-width: 520px){.hero-quick-contact{font-size:1rem;gap:10px}}




/* iOS safe-area support (non-invasive) */
@supports (padding: max(0px)) {
  nav{padding-top: calc(1rem + env(safe-area-inset-top));}
  .hero{padding-top: calc(180px + env(safe-area-inset-top));}
}

/* Performance & anchor offsets */
html{scroll-padding-top:90px;-webkit-tap-highlight-color:transparent}
@media (max-width: 980px){html{scroll-padding-top:92px}}
section:not(.hero){content-visibility:auto;contain-intrinsic-size: 1px 900px}
/* Accessibility & mobile text rendering */
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}


/* === Typography & heading polish (all languages, mobile-first) === */
/* Prevent overflow on long words (DE/ES/EL), keep layout stable */
:where(h1,h2,h3,p,li){overflow-wrap:anywhere;word-break:normal;hyphens:auto}

/* HERO: balanced wrapping and consistent rhythm across devices */
.hero-content{padding-inline:4px}
.hero h1{
  font-size:clamp(2.15rem, 4.2vw + 1rem, 4rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  max-width:22ch;
  margin-left:auto;
  margin-right:auto;
  text-wrap:balance;
}
.hero .subtitle{
  font-size:clamp(1.05rem, 1.25vw + 0.95rem, 1.5rem);
  line-height:1.35;
  max-width:70ch;
  margin-left:auto;
  margin-right:auto;
  text-wrap:balance;
}
.hero p{
  font-size:clamp(1rem, 0.65vw + 0.95rem, 1.2rem);
  line-height:1.6;
  max-width:70ch;
  margin-left:auto;
  margin-right:auto;
  text-wrap:pretty;
}

/* Section headings: responsive, neat line-height */
.section-title{
  font-size:clamp(2rem, 2.4vw + 1rem, 3rem);
  line-height:1.15;
  text-wrap:balance;
}
.section-subtitle{
  font-size:clamp(1.05rem, 0.9vw + 0.95rem, 1.3rem);
  line-height:1.5;
  max-width:80ch;
  margin-left:auto;
  margin-right:auto;
  text-wrap:pretty;
}

/* Cards headings: avoid oversized titles on small screens */
.service-card h3{
  font-size:clamp(1.25rem, 1.05vw + 1rem, 1.7rem);
  line-height:1.25;
  text-wrap:balance;
}

/* Touch targets and spacing on very small screens */
@media (max-width: 420px){
  .cta-button{padding:16px 34px;font-size:1.02rem}
  .hero{padding-left:14px;padding-right:14px}
  .hero-quick-contact{gap:8px}
}

/* Safari/iOS: better font rendering and prevent accidental zoom on tap */
input,select,textarea,button{font-size:16px}



/* === Microsoft 365 Section === */
.itx-m365{
            --primary-blue: #0047AB;
            --primary-blue-dark: #003380;
            --primary-blue-darker: #001a4d;
            --accent-blue: #64B5F6;
            --accent-blue-light: #90CAF9;
            --ms-orange: #F25022;
            --ms-green: #7FBA00;
            --ms-yellow: #FFB900;
            --dark-bg: #001a4d;
            --dark-surface: #002766;
            --dark-border: #0047AB;
            --text-primary: #FFFFFF;
            --text-secondary: #B8D4F0;
            --gradient-primary: linear-gradient(135deg, #0047AB 0%, #003380 100%);
            --gradient-hero: linear-gradient(135deg, #0047AB 0%, #003380 50%, #001a4d 100%);
            --gradient-mesh: radial-gradient(at 40% 20%, rgba(100, 181, 246, 0.15) 0px, transparent 50%),
                            radial-gradient(at 80% 0%, rgba(0, 71, 171, 0.2) 0px, transparent 50%),
                            radial-gradient(at 0% 50%, rgba(100, 181, 246, 0.1) 0px, transparent 50%),
                            radial-gradient(at 80% 50%, rgba(144, 202, 249, 0.1) 0px, transparent 50%),
                            radial-gradient(at 0% 100%, rgba(100, 181, 246, 0.1) 0px, transparent 50%);
        }.itx-m365 *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }.itx-m365{
            scroll-behavior: smooth;
        }.itx-m365{
            font-family: "Sora", "Segoe UI", sans-serif;
            background-color: var(--dark-bg);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }.itx-m365 nav{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 1rem 2rem;
            background: linear-gradient(135deg, #0047AB 0%, #003380 100%);
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        }.itx-m365 .nav-container{
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }.itx-m365 .logo{
            display: flex;
            align-items: center;
            text-decoration: none;
        }.itx-m365 .logo-svg{
            height: 45px;
            width: auto;
        }.itx-m365 .nav-links{
            display: flex;
            gap: 2rem;
            list-style: none;
        }.itx-m365 .nav-links a{
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            transition: color 0.3s ease;
            position: relative;
        }.itx-m365 .nav-links a:hover{
            color: var(--text-primary);
        }.itx-m365 .nav-links a::after{
            content: "";
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-blue);
            transition: width 0.3s ease;
        }.itx-m365 .nav-links a:hover::after{
            width: 100%;
        }.itx-m365 .nav-cta{
            background: var(--accent-blue);
            color: #001a4d;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }.itx-m365 .nav-cta:hover{
            background: var(--accent-blue-light);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(100, 181, 246, 0.4);
        }.itx-m365 .hero{
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            padding: 8rem 2rem 4rem;
            background: var(--gradient-hero);
            overflow: hidden;
        }.itx-m365 .hero::before{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: var(--gradient-mesh);
            pointer-events: none;
        }.itx-m365 .floating-elements{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }.itx-m365 .floating-element{
            position: absolute;
            background: rgba(100, 181, 246, 0.1);
            border-radius: 50%;
            animation: float-up 15s infinite;
        }.itx-m365 .floating-element:nth-child(1){
            width: 80px;
            height: 80px;
            left: 10%;
            animation-delay: 0s;
        }.itx-m365 .floating-element:nth-child(2){
            width: 120px;
            height: 120px;
            left: 70%;
            animation-delay: 3s;
        }.itx-m365 .floating-element:nth-child(3){
            width: 60px;
            height: 60px;
            left: 40%;
            animation-delay: 6s;
        }.itx-m365 .floating-element:nth-child(4){
            width: 100px;
            height: 100px;
            left: 85%;
            animation-delay: 9s;
        }.itx-m365 .floating-element:nth-child(5){
            width: 70px;
            height: 70px;
            left: 25%;
            animation-delay: 12s;
        }@keyframes float-up {
            0% {
                bottom: -150px;
                opacity: 0;
                transform: translateX(0) rotate(0deg);
            }
            50% {
                opacity: 0.8;
                transform: translateX(100px) rotate(180deg);
            }
            100% {
                bottom: 100%;
                opacity: 0;
                transform: translateX(-100px) rotate(360deg);
            }
        }.itx-m365 .hero-container{
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }.itx-m365 .hero-content h1{
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            color: #FFFFFF;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }.itx-m365 .hero-content h1 span{
            color: var(--accent-blue);
        }.itx-m365 .hero-content p{
            font-size: 1.125rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
            max-width: 540px;
        }.itx-m365 .hero-buttons{
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }.itx-m365 .btn-primary{
            background: var(--accent-blue);
            color: #001a4d;
            padding: 1rem 2rem;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }.itx-m365 .btn-primary:hover{
            background: var(--accent-blue-light);
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(100, 181, 246, 0.5);
        }.itx-m365 .btn-secondary{
            background: transparent;
            color: var(--text-primary);
            padding: 1rem 2rem;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            font-size: 1rem;
        }.itx-m365 .btn-secondary:hover{
            border-color: var(--accent-blue);
            background: rgba(100, 181, 246, 0.1);
            transform: translateY(-3px);
        }.itx-m365 .hero-visual{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }.itx-m365 .hero-image-container{
            position: relative;
            animation: float 6s ease-in-out infinite;
        }@keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }.itx-m365 .hero-image-container img{
            max-width: 100%;
            height: auto;
            border-radius: 24px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
        }.itx-m365 .benefits{
            padding: 6rem 2rem;
            background: #f8fafc;
            position: relative;
        }.itx-m365 .benefits::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-blue), var(--primary-blue));
        }.itx-m365 .section-container{
            max-width: 1400px;
            margin: 0 auto;
        }.itx-m365 .section-header{
            text-align: center;
            margin-bottom: 4rem;
        }.itx-m365 .section-tag{
            display: inline-block;
            background: rgba(0, 71, 171, 0.1);
            color: var(--primary-blue);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 1rem;
            border: 1px solid rgba(0, 71, 171, 0.2);
        }.itx-m365 .section-title{
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            margin-bottom: 1rem;
            color: #1a1a2e;
        }.itx-m365 .section-subtitle{
            font-size: 1.125rem;
            color: #555;
            max-width: 600px;
            margin: 0 auto;
        }.itx-m365 .benefits-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }.itx-m365 .benefit-card{
            background: #ffffff;
            border-radius: 20px;
            padding: 2.5rem;
            border: 1px solid #e0e7ef;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }.itx-m365 .benefit-card::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-blue));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }.itx-m365 .benefit-card:hover{
            transform: translateY(-8px);
            border-color: var(--primary-blue);
            box-shadow: 0 25px 50px rgba(0, 71, 171, 0.15);
        }.itx-m365 .benefit-card:hover::before{
            transform: scaleX(1);
        }.itx-m365 .benefit-icon{
            width: 64px;
            height: 64px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 1.75rem;
        }.itx-m365 .benefit-card:nth-child(1) .benefit-icon{
            background: linear-gradient(135deg, rgba(0, 71, 171, 0.15), rgba(0, 71, 171, 0.05));
            color: var(--primary-blue);
        }.itx-m365 .benefit-card:nth-child(2) .benefit-icon{
            background: linear-gradient(135deg, rgba(100, 181, 246, 0.3), rgba(100, 181, 246, 0.1));
            color: var(--primary-blue);
        }.itx-m365 .benefit-card:nth-child(3) .benefit-icon{
            background: linear-gradient(135deg, rgba(0, 51, 128, 0.15), rgba(0, 51, 128, 0.05));
            color: var(--primary-blue-dark);
        }.itx-m365 .benefit-card h3{
            font-size: 1.375rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #1a1a2e;
        }.itx-m365 .benefit-card p{
            color: #555;
            line-height: 1.7;
        }.itx-m365 .services{
            padding: 6rem 2rem;
            background: var(--gradient-hero);
        }.itx-m365 .services .section-title, .itx-m365 .services .section-subtitle{
            color: #ffffff;
        }.itx-m365 .services .section-tag{
            background: rgba(100, 181, 246, 0.2);
            color: var(--accent-blue);
            border-color: rgba(100, 181, 246, 0.3);
        }.itx-m365 .services-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }.itx-m365 .service-card{
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.15);
            transition: all 0.3s ease;
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }.itx-m365 .service-card:hover{
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--accent-blue);
            transform: translateX(8px);
        }.itx-m365 .service-icon{
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: var(--accent-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }.itx-m365 .service-icon svg{
            color: #001a4d;
        }.itx-m365 .service-icon img{
            width: 28px;
            height: 28px;
            filter: brightness(0) invert(1);
        }.itx-m365 .service-content h3{
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #ffffff;
        }.itx-m365 .service-content p{
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
        }.itx-m365 .process{
            padding: 6rem 2rem;
            background: #f8fafc;
        }.itx-m365 .process .section-title{
            color: #1a1a2e;
        }.itx-m365 .process .section-subtitle{
            color: #555;
        }.itx-m365 .process-timeline{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            position: relative;
        }.itx-m365 .process-timeline::before{
            content: "";
            position: absolute;
            top: 40px;
            left: 10%;
            right: 10%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-blue), var(--primary-blue-dark), var(--primary-blue));
        }.itx-m365 .process-step{
            text-align: center;
            position: relative;
        }.itx-m365 .step-number{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #ffffff;
            border: 3px solid #e0e7ef;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            font-weight: 700;
            margin: 0 auto 1.5rem;
            position: relative;
            z-index: 1;
            transition: all 0.3s ease;
        }.itx-m365 .process-step:nth-child(1) .step-number{ border-color: var(--primary-blue); color: var(--primary-blue); }.itx-m365 .process-step:nth-child(2) .step-number{ border-color: var(--accent-blue); color: var(--primary-blue); }.itx-m365 .process-step:nth-child(3) .step-number{ border-color: var(--primary-blue-dark); color: var(--primary-blue-dark); }.itx-m365 .process-step:nth-child(4) .step-number{ border-color: var(--primary-blue); color: var(--primary-blue); }.itx-m365 .process-step:hover .step-number{
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(0, 71, 171, 0.3);
        }.itx-m365 .process-step h3{
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #1a1a2e;
        }.itx-m365 .process-step p{
            font-size: 0.9rem;
            color: #555;
            line-height: 1.6;
        }.itx-m365 .about{
            padding: 6rem 2rem;
            background: var(--gradient-hero);
        }.itx-m365 .about .section-tag{
            background: rgba(100, 181, 246, 0.2);
            color: var(--accent-blue);
            border-color: rgba(100, 181, 246, 0.3);
        }.itx-m365 .about-container{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }.itx-m365 .about-content h2{
            font-size: clamp(2rem, 4vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: #ffffff;
        }.itx-m365 .about-content p{
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
            font-size: 1.1rem;
            line-height: 1.8;
        }.itx-m365 .about-features{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }.itx-m365 .about-feature{
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }.itx-m365 .about-feature-icon{
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: rgba(100, 181, 246, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-blue);
        }.itx-m365 .about-feature span{
            font-weight: 500;
            font-size: 0.95rem;
            color: #ffffff;
        }.itx-m365 .about-visual{
            display: flex;
            justify-content: center;
            position: relative;
        }.itx-m365 .about-cards{
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }.itx-m365 .stat-card{
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            border: 1px solid rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.3s ease;
        }.itx-m365 .stat-card:hover{
            transform: translateX(10px);
            border-color: var(--accent-blue);
            background: rgba(255, 255, 255, 0.15);
        }.itx-m365 .stat-number{
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent-blue);
        }.itx-m365 .stat-label{
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.85);
        }.itx-m365 .faq{
            padding: 6rem 2rem;
            background: #f8fafc;
        }.itx-m365 .faq .section-title{
            color: #1a1a2e;
        }.itx-m365 .faq .section-subtitle{
            color: #555;
        }.itx-m365 .faq-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }.itx-m365 .faq-item{
            background: #ffffff;
            border-radius: 16px;
            padding: 2rem;
            border: 1px solid #e0e7ef;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }.itx-m365 .faq-item:hover{
            border-color: var(--primary-blue);
            box-shadow: 0 10px 30px rgba(0, 71, 171, 0.1);
        }.itx-m365 .faq-question{
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            color: #1a1a2e;
        }.itx-m365 .faq-question::before{
            content: "?";
            width: 28px;
            height: 28px;
            background: var(--gradient-primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            font-weight: 700;
            flex-shrink: 0;
            color: #ffffff;
        }.itx-m365 .faq-answer{
            color: #555;
            line-height: 1.7;
            padding-left: 2.5rem;
        }.itx-m365 .form-row{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }.itx-m365 .form-group{
            margin-bottom: 1.5rem;
        }.itx-m365 .form-group label{
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            font-size: 0.9rem;
            color: #1a1a2e;
        }.itx-m365 .form-group input, .itx-m365 .form-group select, .itx-m365 .form-group textarea{
            width: 100%;
            padding: 1rem 1.25rem;
            background: #f8fafc;
            border: 1px solid #e0e7ef;
            border-radius: 12px;
            color: #1a1a2e;
            font-family: inherit;
            font-size: 1rem;
            transition: all 0.3s ease;
        }.itx-m365 .form-group input:focus, .itx-m365 .form-group select:focus, .itx-m365 .form-group textarea:focus{
            outline: none;
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.1);
        }.itx-m365 .form-group textarea{
            min-height: 120px;
            resize: vertical;
        }.itx-m365 .form-group select{
            cursor: pointer;
        }.itx-m365 .submit-btn{
            width: 100%;
            padding: 1.25rem;
            background: var(--gradient-primary);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }.itx-m365 .submit-btn:hover{
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(0, 71, 171, 0.4);
        }.itx-m365 footer{
            background: #0d1a33;
            padding: 4rem 2rem 2rem;
            border-top: 3px solid var(--primary-blue);
        }.itx-m365 .footer-container{
            max-width: 1400px;
            margin: 0 auto;
        }.itx-m365 .footer-top{
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 3rem;
        }.itx-m365 .footer-brand p{
            color: rgba(255, 255, 255, 0.7);
            margin-top: 1rem;
            font-size: 0.9rem;
            line-height: 1.7;
        }.itx-m365 .footer-column h4{
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: #ffffff;
        }.itx-m365 .footer-column ul{
            list-style: none;
        }.itx-m365 .footer-column li{
            margin-bottom: 0.75rem;
        }.itx-m365 .footer-column a{
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }.itx-m365 .footer-column a:hover{
            color: var(--accent-blue);
        }.itx-m365 .footer-bottom{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }.itx-m365 .footer-copyright{
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.875rem;
        }.itx-m365 .footer-badges{
            display: flex;
            gap: 1rem;
            align-items: center;
        }.itx-m365 .partner-badge{
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.8);
        }@media (max-width: 1024px) {.itx-m365 .hero-container, .itx-m365 .about-container, .itx-m365 .process-timeline{
                grid-template-columns: repeat(2, 1fr);
            }.itx-m365 .process-timeline::before{
                display: none;
            }.itx-m365 .footer-top{
                grid-template-columns: repeat(2, 1fr);
            }}@media (max-width: 768px) {.itx-m365 .nav-links{
                display: none;
            }.itx-m365 .hero-content h1{
                font-size: 2rem;
            }.itx-m365 .microsoft-grid{
                gap: 1rem;
            }.itx-m365 .ms-logo-item{
                width: 100px;
                height: 100px;
            }.itx-m365 .process-timeline{
                grid-template-columns: 1fr;
            }.itx-m365 .form-row{
                grid-template-columns: 1fr;
            }.itx-m365 .faq-grid{
                grid-template-columns: 1fr;
            }.itx-m365 .footer-top{
                grid-template-columns: 1fr;
            }.itx-m365 .footer-bottom{
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }}@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }.itx-m365 .animate-in{
            animation: fadeInUp 0.6s ease forwards;
        }.itx-m365 .delay-1{ animation-delay: 0.1s; }.itx-m365 .delay-2{ animation-delay: 0.2s; }.itx-m365 .delay-3{ animation-delay: 0.3s; }.itx-m365 .delay-4{ animation-delay: 0.4s; }.itx-m365 .contact{
            background: linear-gradient(135deg, #0047AB 0%, #003380 100%);
            color: white;
        }.itx-m365 .contact .section-subtitle{
            color: white;
        }.itx-m365 .contact-info{
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 3rem;
            border-radius: 20px;
            color: #333;
        }.itx-m365 .contact-item{
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 4px solid #0047AB;
        }.itx-m365 .contact-item h3{
            color: #0047AB;
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }.itx-m365 .contact-item p{
            font-size: 1.1rem;
            line-height: 1.8;
            margin: 0.3rem 0;
        }.itx-m365 .contact-item a{
            color: #0047AB;
            text-decoration: none;
            font-weight: 600;
        }.itx-m365 .contact-item a:hover{
            text-decoration: underline;
        }.itx-m365 .contact-info{ padding: 1.8rem; }.itx-m365 .contact-item{ padding: 1.2rem; margin-bottom: 1.2rem; }.itx-m365 .backbar{max-width:1200px;margin:14px auto 0;padding:0 18px;display:flex;align-items:center}.itx-m365 .backlink{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:inherit;text-decoration:none;font-weight:800;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px)}.itx-m365 .backlink:hover{background:rgba(255,255,255,.10)}

/* === Subpage styles === */
.subpage-hero{background:linear-gradient(135deg,#0047AB 0%,#003380 50%,#001a4d 100%);color:#fff;padding:160px 2rem 80px;text-align:center;position:relative;overflow:hidden}
.subpage-hero h1{font-size:clamp(2rem,4vw,3rem);max-width:900px;margin:0 auto 1rem;text-wrap:balance;line-height:1.15}
.subpage-hero .lead{font-size:clamp(1rem,1.2vw,1.2rem);max-width:700px;margin:0 auto;opacity:.9;line-height:1.6}
.breadcrumbs{max-width:1400px;margin:0 auto;padding:14px 2rem 0;font-size:.9rem;color:#666}
.breadcrumbs a{color:#0047AB;text-decoration:none;font-weight:500}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs .sep{margin:0 8px;opacity:.5}
.content-section{max-width:900px;margin:0 auto;padding:60px 2rem}
.content-section h2{color:#0047AB;font-size:clamp(1.4rem,2vw,2rem);margin:2.5rem 0 1rem;line-height:1.2;text-wrap:balance}
.content-section h3{color:#003380;font-size:1.25rem;margin:2rem 0 .8rem}
.content-section p{color:#444;line-height:1.8;margin-bottom:1rem}
.content-section ul,.content-section ol{color:#444;line-height:1.8;margin-bottom:1rem;padding-left:1.5rem}
.content-section li{margin-bottom:.5rem}
.content-section strong{color:#333}
.cta-box{background:linear-gradient(135deg,#0047AB 0%,#003380 100%);color:#fff;padding:2.5rem;border-radius:20px;text-align:center;margin:3rem 0}
.cta-box h3{font-size:1.5rem;margin-bottom:1rem;color:#ff4444 !important}
.cta-box p{margin-bottom:.5rem;color:#ff4444 !important}
.cta-box a{color:#90CAF9 !important;font-weight:700;text-decoration:none}
.cta-box a:hover{text-decoration:underline;color:#fff !important}
.software-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:1.5rem 0}
.software-card{background:#f8f9fa;padding:1.8rem;border-radius:14px;border-left:4px solid #0047AB}
.software-card h4{color:#0047AB;margin-bottom:.5rem;font-size:1.1rem}
.software-card p{color:#555;font-size:.95rem;line-height:1.6;margin:0}
.nav-dropdown{position:relative}
.nav-dropdown-content{display:none;position:absolute;top:100%;left:0;background:rgba(0,26,77,.96);backdrop-filter:blur(10px);border-radius:12px;padding:10px 0;min-width:240px;box-shadow:0 15px 40px rgba(0,0,0,.3);z-index:1001}
.nav-dropdown:hover .nav-dropdown-content{display:block}
.nav-dropdown-content a{display:block;padding:10px 20px;white-space:nowrap;font-size:.95rem}
@media(max-width:980px){
  .nav-dropdown-content{position:static;display:block;background:transparent;box-shadow:none;padding:0 0 0 16px;border-radius:0;backdrop-filter:none}
  .nav-dropdown-content a{padding:6px 0;font-size:1rem}
  .subpage-hero{padding:130px 16px 60px}
  .content-section{padding:40px 16px}
  .software-grid{grid-template-columns:1fr}
}