/* Inter fallback — matches Inter metrics to avoid layout shift on font swap */
@font-face {
 font-family: 'Inter Fallback';
 src: local('Arial');
 size-adjust: 107%;
 ascent-override: 90%;
 descent-override: 22%;
 line-gap-override: 0%;
}

 :root {
 --blue: #0d5ed9;
 --blue-light: #00aaff;
 --blue-grad: linear-gradient(135deg, #1a6fff, #00aaff);
 --navy: #0a1a3a;
 --muted: #4a6fa5;
 --bg: #f0f4ff;
 --white: #ffffff;
 --border: #d0ddf5;
 --card-shadow: 0 4px 24px rgba(26,111,255,0.08);
 }

 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; }

 body {
 background: var(--bg);
 color: var(--navy);
 line-height: 1.7;
 font-family: 'Inter', 'Inter Fallback', sans-serif;
 }

 /* ─── UTILS ─── */
 .gradient-text {
 background: var(--blue-grad);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }
 .accent-bar {
 width: 48px; height: 3px;
 background: var(--blue-grad);
 border-radius: 2px;
 margin-bottom: 2rem;
 }
 .section-tag {
 display: inline-block;
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 3px;
 text-transform: uppercase;
 color: var(--blue);
 background: rgba(26,111,255,0.08);
 padding: 0.3rem 0.9rem;
 border-radius: 20px;
 margin-bottom: 1.2rem;
 }

 /* ─── NAV ─── */
 nav {
 background: var(--white);
 border-bottom: 1px solid var(--border);
 height: 64px;
 padding: 0 3rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 position: sticky;
 top: 0;
 z-index: 200;
 }
 .nav-logo {
 text-decoration: none;
 display: flex;
 align-items: center;
 }
 .nav-logo img {
 height: 55px;
 width: auto;
 aspect-ratio: 246/110;
 display: block;
 }
 .nav-center {
 display: flex;
 gap: 0.25rem;
 list-style: none;
 }
 .nav-center a {
 text-decoration: none;
 font-size: 0.88rem;
 font-weight: 500;
 color: var(--muted);
 padding: 0.4rem 0.85rem;
 border-radius: 6px;
 transition: color 0.15s, background 0.15s;
 white-space: nowrap;
 }
 .nav-center a:hover { color: var(--blue); background: rgba(26,111,255,0.06); }
 .nav-right { display: flex; align-items: center; gap: 1rem; }
 .hamburger {
 display: none;
 flex-direction: column;
 gap: 5px;
 cursor: pointer;
 padding: 4px;
 background: none;
 border: none;
 }
 .hamburger span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; display: block; transition: all 0.2s; }

 /* ─── HERO ─── */
 #home {
 min-height: calc(100vh - 64px);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 5rem 3rem;
 position: relative;
 overflow: hidden;
 }
 .hero-glow {
 position: absolute;
 width: 800px; height: 800px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(26,111,255,0.09) 0%, transparent 65%);
 top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 pointer-events: none;
 }
 .hero-inner {
 max-width: 720px;
 text-align: center;
 position: relative;
 z-index: 1;
 }
 .hero-inner h1 {
 font-size: 4rem;
 font-weight: 800;
 line-height: 1.12;
 color: var(--navy);
 margin-bottom: 1.5rem;
 }
 .hero-inner h1 em {
 font-style: normal;
 background: var(--blue-grad);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }
 .hero-inner p {
 font-size: 1.12rem;
 color: var(--muted);
 max-width: 540px;
 margin: 0 auto 2.5rem;
 line-height: 1.85;
 }
 .hero-cta {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 background: var(--blue-grad);
 color: white;
 font-size: 0.95rem;
 font-weight: 600;
 padding: 0.8rem 2rem;
 border-radius: 8px;
 text-decoration: none;
 transition: opacity 0.2s, transform 0.2s;
 font-family: inherit;
 border: none;
 cursor: pointer;
 }
 .hero-cta:hover { opacity: 0.9; transform: translateY(-1px); }
 .hero-badges {
 display: flex;
 justify-content: center;
 gap: 1.5rem;
 margin-top: 3rem;
 flex-wrap: wrap;
 }
 .hero-badge {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 font-size: 0.82rem;
 color: var(--muted);
 font-weight: 500;
 }
 .hero-badge svg { color: var(--blue); }

 /* ─── STATS ─── */
 #stats {
 background: var(--white);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 padding: 2.5rem 3rem;
 }
 .stats-inner {
 max-width: 1100px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2rem;
 text-align: center;
 }
 .stat-number {
 display: block;
 font-size: 2.4rem;
 font-weight: 800;
 line-height: 1;
 margin-bottom: 0.4rem;
 background: var(--blue-grad);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }
 .stat-label {
 display: block;
 font-size: 0.85rem;
 color: var(--muted);
 font-weight: 500;
 }

 /* ─── ABOUT ─── */
 #about {
 background: var(--white);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 padding: 6rem 3rem;
 }
 .section-inner { max-width: 1100px; margin: 0 auto; }
 #about .section-inner { text-align: center; max-width: 760px; }
 #about .accent-bar { margin: 0.9rem auto 0.5rem; }
 #about h2 { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.5rem; line-height: 1.2; }
 .about-body {
 font-size: 1rem;
 color: var(--muted);
 line-height: 1.85;
 margin: 1.5rem auto 3rem;
 max-width: 680px;
 }
 .vendor-bar { border-top: 1px solid var(--border); padding-top: 2.5rem; }
 .vendor-bar-label {
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: var(--muted);
 margin-bottom: 1.6rem;
 }
 .vendor-track-wrap {
 overflow: hidden;
 position: relative;
 }
 .vendor-track-wrap::before,
 .vendor-track-wrap::after {
 content: '';
 position: absolute;
 top: 0; bottom: 0;
 width: 80px;
 z-index: 2;
 pointer-events: none;
 }
 .vendor-track-wrap::before {
 left: 0;
 background: linear-gradient(to right, var(--white), transparent);
 }
 .vendor-track-wrap::after {
 right: 0;
 background: linear-gradient(to left, var(--white), transparent);
 }
 .vendor-track {
 display: flex;
 gap: 3.5rem;
 align-items: center;
 width: max-content;
 animation: vendor-scroll 20s linear infinite;
 }
 .vendor-track:hover { animation-play-state: paused; }
 @keyframes vendor-scroll {
 0%   { transform: translateX(0); }
 100% { transform: translateX(-50%); }
 }
 .vendor-logo {
 height: 64px;
 width: auto;
 opacity: 0.55;
 filter: grayscale(100%);
 transition: opacity 0.2s, filter 0.2s;
 flex-shrink: 0;
 }
 .vendor-logo:hover { opacity: 1; filter: grayscale(0%); }

 /* ─── SERVICES ─── */
 #services { padding: 6rem 3rem; background: var(--bg); }
 #services h2 { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.5rem; }
 .services-intro {
 font-size: 1rem;
 color: var(--muted);
 margin-bottom: 3rem;
 max-width: 560px;
 }
 .services-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
 }
 .service-card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 2.2rem;
 transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
 }
 .service-card:hover {
 border-color: var(--blue);
 box-shadow: 0 8px 32px rgba(26,111,255,0.12);
 transform: translateY(-3px);
 }
 .svc-icon {
 width: 48px; height: 48px;
 background: var(--blue-grad);
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.4rem;
 margin: 0 auto 1.3rem;
 }
 .service-card h3 {
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--navy);
 margin-bottom: 0.7rem;
 }
 .service-card p {
 font-size: 0.9rem;
 color: var(--muted);
 line-height: 1.8;
 }
 .svc-cta {
 display: inline-block;
 margin-top: 1.2rem;
 font-size: 0.88rem;
 font-weight: 600;
 color: var(--blue);
 text-decoration: none;
 transition: opacity 0.15s;
 }
 .svc-cta:hover { opacity: 0.85; }

 /* ─── SOLUTIONS ─── */
 #solutions {
     padding: 6rem 3rem;
     background: var(--white);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
 }
 #solutions h2 { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.5rem; }
 .solutions-intro {
     font-size: 1rem;
     color: var(--muted);
     margin-bottom: 3rem;
     max-width: 600px;
 }
 .solutions-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.5rem;
 }
 .sol-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 1.8rem 1.6rem;
     transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
     display: flex;
     flex-direction: column;
 }
 .sol-card:hover {
     border-color: var(--blue);
     box-shadow: 0 8px 32px rgba(26,111,255,0.12);
     transform: translateY(-3px);
 }
 .vendor-badge {
     display: inline-block;
     font-size: 0.65rem;
     font-weight: 700;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     color: var(--white);
     padding: 0.2rem 0.65rem;
     border-radius: 20px;
     margin-bottom: 1.1rem;
     align-self: flex-start;
 }
 .badge-microsoft { background: #0078d4; }
 .badge-cisco     { background: #1070a0; }
 .badge-aruba     { background: #c44b00; }
 .badge-redhat    { background: #ee0000; }
 .badge-hikvision { background: #c8102e; }
 .badge-acronis   { background: #b83810; }
 .sol-card h3 {
     font-size: 0.95rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 0.6rem;
     white-space: nowrap;
 }
 .sol-card p {
     font-size: 0.88rem;
     color: var(--muted);
     line-height: 1.8;
     flex: 1;
 }
 .sol-cta {
     display: inline-block;
     margin-top: 1.1rem;
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--blue);
     text-decoration: none;
     transition: opacity 0.15s;
 }
 .sol-cta:hover { opacity: 0.85; }

 /* ─── VENDORS ─── */
 #vendors {
 background: var(--white);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 padding: 6rem 3rem;
 }
 #vendors h2 { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.5rem; }
 .partners-intro {
 font-size: 1rem;
 color: var(--muted);
 max-width: 560px;
 margin-bottom: 3rem;
 }
 .partners-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
 }
 .partner-card {
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 2rem;
 display: flex;
 flex-direction: column;
 gap: 1rem;
 transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
 background: var(--bg);
 }
 .partner-card:hover {
 border-color: var(--blue);
 box-shadow: 0 8px 32px rgba(26,111,255,0.12);
 transform: translateY(-3px);
 }
 .partner-logo-wrap {
 height: 140px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 1rem;
 border-bottom: 1px solid var(--border);
 padding-bottom: 1rem;
 }
 .partner-logo-wrap img {
 max-height: 120px;
 width: 100%;
 max-width: 100%;
 object-fit: contain;
 }
 .partner-card h3 {
 font-size: 0.88rem;
 font-weight: 700;
 color: var(--navy);
 margin-bottom: 0.2rem;
 }
 .partner-card p {
 font-size: 0.85rem;
 color: var(--muted);
 line-height: 1.7;
 }

 /* ─── TESTIMONIALS ─── */
 #testimonials {
 background: var(--white);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 padding: 6rem 3rem;
 }
 #testimonials h2 { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.5rem; }
 .testimonials-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
 }
 .testimonial-card {
 background: var(--bg);
 border: 1px solid var(--border);
 border-left: 4px solid var(--blue);
 border-radius: 0 14px 14px 0;
 padding: 2rem;
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
 }
 .testimonial-quote {
 font-size: 0.95rem;
 color: var(--navy);
 line-height: 1.85;
 font-style: italic;
 flex: 1;
 }
 .testimonial-author { display: flex; flex-direction: column; gap: 0.2rem; }
 .testimonial-name { font-size: 0.88rem; font-weight: 700; color: var(--navy); }
 .testimonial-title { font-size: 0.82rem; color: var(--muted); }
 .testimonial-company { font-size: 0.82rem; color: var(--muted); }

 /* ─── WHY ─── */
 #why { padding: 6rem 3rem; background: var(--bg); }
 #why h2 { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.5rem; }
 .why-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1.5rem;
 }
 .why-card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 2rem;
 transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
 }
 .why-card:hover {
 border-color: var(--blue);
 box-shadow: var(--card-shadow);
 transform: translateY(-3px);
 }
 .why-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 0.7rem; }
 .why-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.8; }

 /* ─── VISION 2030 ─── */
 #vision {
 background: var(--navy);
 padding: 4.5rem 3rem;
 position: relative;
 overflow: hidden;
 }
 #vision::before {
 content: '';
 position: absolute;
 top: -100px; right: -100px;
 width: 400px; height: 400px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(26,111,255,0.15) 0%, transparent 70%);
 pointer-events: none;
 }
 .vision-inner {
 max-width: 1100px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: center;
 gap: 3rem;
 position: relative;
 z-index: 1;
 }
 .vision-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 background: rgba(26,111,255,0.2);
 border: 1px solid rgba(26,111,255,0.4);
 color: #7fb8ff;
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 2px;
 text-transform: uppercase;
 padding: 0.3rem 0.9rem;
 border-radius: 20px;
 margin-bottom: 1.2rem;
 }
 #vision h2 {
 font-size: 2rem;
 font-weight: 800;
 color: white;
 margin-bottom: 1rem;
 line-height: 1.3;
 }
 #vision p {
 font-size: 0.98rem;
 color: rgba(255,255,255,0.6);
 max-width: 560px;
 line-height: 1.85;
 }
 .vision-logo {
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .vision-logo img {
 max-width: 280px;
 width: 100%;
 height: auto;
 object-fit: contain;
 }

 /* ─── WHO WE SERVE ─── */

 /* ─── CONTACT ─── */
 #contact {
 background: var(--bg);
 border-top: 1px solid var(--border);
 padding: 6rem 3rem;
 }
 .contact-inner {
 max-width: 700px;
 margin: 0 auto;
 }
 #contact h2 {
 font-size: 2.4rem;
 font-weight: 800;
 color: var(--navy);
 line-height: 1.2;
 margin-bottom: 0.5rem;
 }
 .contact-sub {
 font-size: 1rem;
 color: var(--muted);
 margin-bottom: 2.5rem;
 }
 .contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
 .form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1.2rem;
 }
 .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
 .form-group label {
 font-size: 0.85rem;
 font-weight: 600;
 color: var(--navy);
 }
 .form-group input,
 .form-group select,
 .form-group textarea {
 padding: 0.7rem 1rem;
 border: 1px solid var(--border);
 border-radius: 8px;
 font-size: 0.92rem;
 font-family: inherit;
 color: var(--navy);
 background: var(--white);
 transition: border-color 0.15s, box-shadow 0.15s;
 outline: none;
 }
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
 border-color: var(--blue);
 box-shadow: 0 0 0 3px rgba(26,111,255,0.1);
 }
 .form-group textarea { resize: vertical; }
 .form-group select { cursor: pointer; }
 .form-submit {
 background: var(--blue-grad);
 color: white;
 font-size: 1rem;
 font-weight: 700;
 padding: 0.9rem 2rem;
 border-radius: 8px;
 border: none;
 cursor: pointer;
 font-family: inherit;
 transition: opacity 0.2s, transform 0.2s;
 width: 100%;
 }
 .form-submit:hover { opacity: 0.9; transform: translateY(-1px); }
 .form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
 .form-error {
 color: #c0392b;
 font-size: 0.88rem;
 font-weight: 600;
 background: rgba(192,57,43,0.07);
 border: 1px solid rgba(192,57,43,0.2);
 border-radius: 8px;
 padding: 0.6rem 1rem;
 }
 .form-success {
 text-align: center;
 padding: 3rem 1rem;
 }
 .form-success-icon {
 width: 72px;
 height: 72px;
 border-radius: 50%;
 background: var(--blue-grad);
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 1.5rem;
 }
 .form-success h3 {
 font-size: 1.8rem;
 font-weight: 800;
 color: var(--navy);
 margin-bottom: 0.5rem;
 }
 .form-success p {
 font-size: 1rem;
 color: var(--muted);
 }

 /* ─── FOOTER ─── */
 footer {
 background: var(--navy);
 padding: 3.5rem 3rem 2rem;
 }
 .footer-grid {
 max-width: 1100px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1fr;
 gap: 2rem;
 padding-bottom: 3rem;
 border-bottom: 1px solid rgba(255,255,255,0.08);
 }
 .footer-brand p {
 font-size: 0.9rem;
 color: rgba(255,255,255,0.55);
 max-width: 280px;
 line-height: 1.8;
 margin-top: 1rem;
 }
 .footer-col h3 {
 font-size: 0.8rem;
 font-weight: 700;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: rgba(255,255,255,0.5);
 margin-bottom: 1.2rem;
 }
 .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
 .footer-col ul li a {
 text-decoration: none;
 font-size: 0.9rem;
 color: rgba(255,255,255,0.5);
 transition: color 0.15s;
 }
 .footer-col ul li a:hover { color: white; }
 .footer-bottom {
 max-width: 1100px;
 margin: 2rem auto 0;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.82rem;
 color: rgba(255,255,255,0.5);
 flex-wrap: wrap;
 gap: 0.5rem;
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 900px) {
 .solutions-grid { grid-template-columns: repeat(2, 1fr); }
 .services-grid { grid-template-columns: repeat(2, 1fr); }
 .partners-grid { grid-template-columns: repeat(2, 1fr); }
 .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1.5rem; }
 .footer-brand { grid-column: auto; }
 .stats-inner { grid-template-columns: repeat(2, 1fr); }
 .why-grid { grid-template-columns: repeat(2, 1fr); }
 .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 768px) {
 nav { padding: 0 1.5rem; }
 .nav-center {
 display: none;
 position: absolute;
 top: 64px; left: 0; right: 0;
 background: var(--white);
 border-bottom: 1px solid var(--border);
 flex-direction: column;
 padding: 0.8rem 1.5rem;
 gap: 0;
 }
 .nav-center.open { display: flex; }
 .nav-center a { padding: 0.65rem 0.5rem; }
 .hamburger { display: flex; }

 #home { padding: 3rem 1.5rem; min-height: auto; }
 .hero-inner h1 { font-size: 2.8rem; }

 #testimonials { padding: 4rem 1.5rem; }
 .testimonials-grid { grid-template-columns: 1fr; }
 #why { padding: 4rem 1.5rem; }
 .why-grid { grid-template-columns: 1fr; }
 #about, #services, #vendors { padding: 4rem 1.5rem; }
 #solutions { padding: 4rem 1.5rem; }
 .solutions-grid { grid-template-columns: repeat(2, 1fr); }
 .services-grid { grid-template-columns: 1fr; }
 .partners-grid { grid-template-columns: 1fr; }
 .vision-inner { grid-template-columns: 1fr; }
 .vision-logo { display: none; }
 #vision { padding: 3.5rem 1.5rem; }
 #contact { padding: 4rem 1.5rem; }
 .form-row { grid-template-columns: 1fr; }
 footer { padding: 3rem 1.5rem 2rem; }
 .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
 .footer-brand { grid-column: auto; }
 .footer-bottom { flex-direction: column; text-align: center; }
 #stats { padding: 2rem 1.5rem; }
 .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
 }

/* ─── FOOTER LINKS ─── */
.footer-logo {
  height: 64px;
  width: auto;
  aspect-ratio: 246/110;
  display: block;
  margin-bottom: 0.5rem;
}

.footer-phone {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.footer-phone:hover { opacity: 1; }

.footer-directions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue-light);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.footer-directions:hover { opacity: 1; }