/* ================================================================
   XI PRO — Main Stylesheet
   Cross Industries, LLC
   Dark Navy + Electric Blue | Sleek Minimal IT Services Theme
================================================================ */

/* ----------------------------------------------------------------
   CSS Custom Properties
---------------------------------------------------------------- */
:root {
    /* Colors */
    --navy-950:   #060b18;
    --navy-900:   #0a0f24;
    --navy-800:   #0d1533;
    --navy-700:   #111d42;
    --navy-600:   #162354;
    --navy-500:   #1d2f6f;

    --blue-600:   #0066cc;
    --blue-500:   #0080ff;
    --blue-400:   #00a8ff;
    --blue-300:   #33bbff;
    --blue-200:   #7dd3fc;
    --blue-glow:  rgba(0, 168, 255, 0.25);

    --white:      #ffffff;
    --gray-50:    #f8fafc;
    --gray-100:   #f1f5f9;
    --gray-200:   #e2e8f0;
    --gray-300:   #cbd5e1;
    --gray-400:   #94a3b8;
    --gray-500:   #64748b;
    --gray-600:   #475569;
    --gray-700:   #334155;
    --gray-800:   #1e293b;
    --gray-900:   #0f172a;

    --green:      #22c55e;
    --yellow:     #f59e0b;
    --red:        #ef4444;

    /* Typography */
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    /* Spacing */
    --container:  1240px;
    --gap:        32px;

    /* Radius */
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  28px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    --shadow-md:  0 4px 16px rgba(0,0,0,.15);
    --shadow-lg:  0 8px 40px rgba(0,0,0,.25);
    --shadow-glow: 0 0 40px rgba(0,168,255,.2);

    /* Transitions */
    --transition: 0.2s ease;
    --transition-slow: 0.4s ease;

    /* Topbar height */
    --topbar-h: 40px;
    --header-h: 70px;
}

/* ----------------------------------------------------------------
   Reset & Base
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gray-800);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--blue-400); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-300); }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    line-height: 1.2;
    font-weight: 700;
    color: var(--gray-900);
}

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.5em; }

/* ----------------------------------------------------------------
   Utilities
---------------------------------------------------------------- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 96px 0; }
.section--gray { background: var(--gray-50); }

.screen-reader-text {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----------------------------------------------------------------
   Buttons
---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
    white-space: nowrap;
}

.btn--primary {
    background: var(--blue-400);
    color: var(--white);
    box-shadow: 0 4px 20px rgba(0,168,255,.35);
}
.btn--primary:hover {
    background: var(--blue-500);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(0,168,255,.45);
}

.btn--outline {
    background: transparent;
    color: var(--blue-400);
    border: 2px solid var(--blue-400);
}
.btn--outline:hover {
    background: var(--blue-400);
    color: var(--white);
}

.btn--ghost {
    background: rgba(255,255,255,.08);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
}
.btn--ghost:hover {
    background: rgba(255,255,255,.15);
    color: var(--white);
    border-color: rgba(255,255,255,.4);
}

.btn--white {
    background: var(--white);
    color: var(--navy-900);
}
.btn--white:hover {
    background: var(--gray-100);
    color: var(--navy-900);
    transform: translateY(-1px);
}

.btn--outline-white {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255,255,255,.5);
}
.btn--outline-white:hover {
    background: rgba(255,255,255,.15);
    color: var(--white);
    border-color: var(--white);
}

.btn--lg { padding: 16px 32px; font-size: 16px; border-radius: var(--radius-md); }
.btn--sm { padding: 8px 16px; font-size: 14px; }
.btn--block { width: 100%; justify-content: center; }

/* ----------------------------------------------------------------
   Badges
---------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.badge--blue {
    background: rgba(0,168,255,.15);
    color: var(--blue-300);
    border: 1px solid rgba(0,168,255,.3);
}

/* ----------------------------------------------------------------
   Topbar
---------------------------------------------------------------- */
.topbar {
    background: var(--navy-950);
    border-bottom: 1px solid rgba(255,255,255,.06);
    height: var(--topbar-h);
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 20px; }
.topbar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-400);
    font-size: 13px;
    text-decoration: none;
    transition: color var(--transition);
}
.topbar__item:hover { color: var(--blue-300); }
.topbar__sep { color: var(--gray-700); }

/* ----------------------------------------------------------------
   Site Header
---------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 15, 36, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    height: var(--header-h);
    transition: all var(--transition-slow);
}

.site-header.scrolled {
    background: rgba(6, 11, 24, 0.98);
    box-shadow: 0 4px 30px rgba(0,0,0,.4);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: 24px;
}

/* Logo */
.site-branding .custom-logo { height: 48px; width: auto; }
.site-title-link { text-decoration: none; }
.site-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -.02em;
}

/* Primary Nav */
.main-nav { flex: 1; }
.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    color: var(--gray-300);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.nav-menu > li > a:hover,
.nav-menu > li.active > a,
.nav-menu > li.current-menu-item > a {
    color: var(--white);
    background: rgba(0,168,255,.1);
}
.nav-menu > li.active > a { color: var(--blue-400); }

/* Dropdown */
.nav-menu .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--navy-800);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    padding: 8px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition);
    box-shadow: var(--shadow-lg);
}
.nav-menu > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-menu .sub-menu li a {
    display: block;
    padding: 10px 16px;
    color: var(--gray-300);
    font-size: 14px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition);
}
.nav-menu .sub-menu li a:hover {
    background: rgba(0,168,255,.1);
    color: var(--blue-300);
    padding-left: 20px;
}

/* Header Actions */
.header__actions { display: flex; align-items: center; gap: 12px; }

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.08);
    transition: background var(--transition);
}
.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--white);
    border-radius: 2px;
    transition: all var(--transition);
    transform-origin: center;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:hover { background: rgba(255,255,255,.15); }

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--navy-900);
    z-index: 999;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu__inner { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.mobile-nav-menu { list-style: none; padding: 0; }
.mobile-nav-menu li a {
    display: block;
    padding: 14px 16px;
    color: var(--gray-200);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: all var(--transition);
}
.mobile-nav-menu li a:hover { background: rgba(0,168,255,.1); color: var(--blue-300); }
.mobile-nav-menu .sub-menu { list-style: none; padding: 0 0 0 16px; }
.mobile-nav-menu .sub-menu li a { font-size: 14px; color: var(--gray-400); border-bottom: none; }
.mobile-menu__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }

/* ----------------------------------------------------------------
   Hero Section
---------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--navy-900);
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.hero__bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,168,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,168,255,.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.8) 40%, transparent 80%);
}

/* ----------------------------------------------------------------
   Hero Service Links (inline list)
---------------------------------------------------------------- */
.hero-service-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
}
.hero-service-links__label {
    color: var(--gray-500);
    font-weight: 500;
}
.hero-service-links__item {
    color: var(--blue-300);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}
.hero-service-links__item:hover {
    color: var(--white);
    text-decoration: underline;
}
.hero-service-links__sep {
    color: var(--gray-700);
    user-select: none;
}

/* ---------------------------------------------------------------- */
.hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.hero__orb--1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0,168,255,.18) 0%, transparent 70%);
    top: -200px;
    right: -100px;
}
.hero__orb--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0,80,200,.15) 0%, transparent 70%);
    bottom: -100px;
    left: -50px;
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

.hero__eyebrow { margin-bottom: 20px; }

/* Accreditation badges in the hero (GTIA, Microsoft).
   Brand rules for both: scale proportionally, never alter. No border-radius
   (would clip GTIA's red border and notched corner), no filter, no opacity,
   no overlay, no recolouring. The 28px gap is deliberate — Microsoft's badge
   guidelines require clear space and forbid combining its badge with other
   logos into a single piece of artwork, so these must read as separate marks. */

.hero__headline {
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 900;
    color: var(--white);
    line-height: 1.08;
    letter-spacing: -.03em;
    margin-bottom: 24px;
}

.hero__sub {
    font-size: 18px;
    color: var(--gray-400);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 520px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.hero__trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-400);
    font-size: 14px;
    font-weight: 500;
}

/* Hero Dashboard Visual */
.hero__visual { position: relative; }

.hero__dashboard {
    background: rgba(13, 21, 51, 0.8);
    border: 1px solid rgba(0,168,255,.2);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,168,255,.1);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.dash-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: all var(--transition);
}
.dash-card:hover { border-color: rgba(0,168,255,.3); }

.dash-card--status {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
}
.dash-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-card__icon--green { background: rgba(34,197,94,.15); color: var(--green); }

.dash-card__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 4px; }
.dash-card__value { font-size: 13px; font-weight: 600; color: var(--green); }

.dash-card__big { font-size: 32px; font-weight: 800; color: var(--white); letter-spacing: -.02em; font-family: var(--font-display); }
.dash-card__big--blue { color: var(--blue-400); }
.dash-card__sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

.dash-bar { height: 4px; background: rgba(255,255,255,.1); border-radius: 4px; margin-top: 12px; overflow: hidden; }
.dash-bar__fill { height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--blue-300)); border-radius: 4px; }

.dash-card--tickets { grid-column: 1 / -1; }
.dash-ticket { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; color: var(--gray-300); }
.dash-ticket:last-child { border-bottom: none; }
.dash-ticket__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-ticket__dot--green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dash-ticket__dot--blue  { background: var(--blue-400); box-shadow: 0 0 8px var(--blue-400); }
.dash-ticket__dot--yellow{ background: var(--yellow); }
.dash-ticket__time { margin-left: auto; font-size: 11px; color: var(--gray-500); }

/* ----------------------------------------------------------------
   Section Headers
---------------------------------------------------------------- */
.section-header {
    text-align: center;
    margin-bottom: 64px;
}
.section-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue-400);
    margin-bottom: 12px;
}
.section-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: 16px;
    line-height: 1.1;
}
.section-sub {
    font-size: 17px;
    color: var(--gray-500);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.7;
}
.section-footer { text-align: center; margin-top: 48px; }

/* ----------------------------------------------------------------
   Services Grid
---------------------------------------------------------------- */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
    transform: scaleX(0);
    transition: transform var(--transition-slow);
    transform-origin: left;
}
.service-card:hover { border-color: rgba(0,168,255,.3); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.1); }
.service-card:hover::before { transform: scaleX(1); }

.service-card__icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(0,168,255,.12), rgba(0,168,255,.05));
    border: 1px solid rgba(0,168,255,.2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-400);
    flex-shrink: 0;
}

.service-card__title { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.service-card__desc { color: var(--gray-600); font-size: 15px; line-height: 1.7; flex: 1; }

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue-500);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: gap var(--transition);
}
.service-card__link:hover { gap: 10px; color: var(--blue-400); }

.service-card--dark {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
    border-color: rgba(0,168,255,.2);
    color: var(--white);
}
.service-card--dark:hover { border-color: var(--blue-400); }
.service-card--dark .service-card__title { color: var(--white); }
.service-card--dark .service-card__desc { color: var(--gray-400); }
.service-card__icon--light { background: rgba(0,168,255,.15); border-color: rgba(0,168,255,.3); }

/* ----------------------------------------------------------------
   Stats Bar
---------------------------------------------------------------- */
.stats-bar {
    background: var(--navy-900);
    padding: 56px 0;
    border-top: 1px solid rgba(0,168,255,.1);
    border-bottom: 1px solid rgba(0,168,255,.1);
}
.stats-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
    /* Stats use different type sizes, so stretch would leave each label at a
       different height. Aligning to the row's end puts every label on one
       baseline regardless of how tall its number is. */
    align-items: end;
}
.stat-item__number {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 900;
    color: var(--white);
    line-height: 1;
    letter-spacing: -.03em;
    margin-bottom: 8px;
}
/* Suffix — the small blue unit after a figure, e.g. the "%" in 99.9%. */
.stat-item__number span { color: var(--blue-400); font-size: 32px; }
/* Count-up target injected by main.js. Must NOT inherit the suffix styling
   above, or the animated figure turns blue and shrinks to 32px. */
.stat-item__number .stat-item__count {
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}
/* For stats phrased as words rather than a figure. */
.stat-item__number--phrase { font-size: 28px; letter-spacing: -.01em; }
.stat-item__label { font-size: 14px; color: var(--gray-500); font-weight: 500; }

/* ----------------------------------------------------------------
   Features Grid
---------------------------------------------------------------- */
.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.feature-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: all var(--transition-slow);
}
.feature-card:hover { border-color: rgba(0,168,255,.25); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.08); }

.feature-card__icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(0,168,255,.12), rgba(0,168,255,.04));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-400);
    margin-bottom: 20px;
}
.feature-card__title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.feature-card__desc { color: var(--gray-600); font-size: 15px; line-height: 1.7; }

/* ----------------------------------------------------------------
   Blog Preview
---------------------------------------------------------------- */
.blog-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blog-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.1); border-color: var(--gray-300); }

.blog-card__img { overflow: hidden; }
.blog-card__img img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .blog-card__img img { transform: scale(1.05); }

.blog-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.blog-card__meta { display: flex; align-items: center; gap: 12px; }
.blog-card__cat a { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--blue-500); text-decoration: none; }
.blog-card__date { font-size: 12px; color: var(--gray-400); }

.blog-card__title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.blog-card__title a { color: var(--gray-900); text-decoration: none; transition: color var(--transition); }
.blog-card__title a:hover { color: var(--blue-500); }

.blog-card__excerpt { color: var(--gray-500); font-size: 14px; line-height: 1.7; flex: 1; }
.blog-card__link { color: var(--blue-500); font-size: 14px; font-weight: 600; text-decoration: none; margin-top: auto; }
.blog-card__link:hover { color: var(--blue-400); }

/* Posts grid (archive) */
.posts-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }

/* ----------------------------------------------------------------
   CTA Strip
---------------------------------------------------------------- */
.cta-strip {
    background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%);
    border-top: 1px solid rgba(0,168,255,.15);
    border-bottom: 1px solid rgba(0,168,255,.15);
    padding: 72px 0;
    position: relative;
    overflow: hidden;
}
.cta-strip::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0,168,255,.12) 0%, transparent 70%);
    pointer-events: none;
}
.cta-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.cta-strip__text h2 { font-size: 32px; color: var(--white); font-weight: 800; margin-bottom: 8px; }
.cta-strip__text p { color: var(--gray-400); font-size: 16px; }
.cta-strip__actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ----------------------------------------------------------------
   Site Footer
---------------------------------------------------------------- */
.site-footer {
    background: var(--navy-950);
    border-top: 1px solid rgba(255,255,255,.06);
}

.footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding: 72px 0 48px;
}

.footer__col--brand .custom-logo { height: 44px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .9; }
.footer__logo-text { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 16px; display: block; }
.footer__tagline { color: var(--gray-500); font-size: 14px; line-height: 1.7; margin-bottom: 20px; max-width: 280px; }
.footer__phone, .footer__email { display: block; color: var(--gray-400); font-size: 14px; text-decoration: none; transition: color var(--transition); margin-bottom: 6px; }
.footer__phone:hover, .footer__email:hover { color: var(--blue-300); }

.footer__col-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 20px; }

.footer__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__links a { color: var(--gray-400); font-size: 14px; text-decoration: none; transition: color var(--transition); }
.footer__links a:hover { color: var(--blue-300); }

.footer__badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,168,255,.06);
    border: 1px solid rgba(0,168,255,.15);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 20px;
    color: var(--gray-300);
    font-size: 13px;
    line-height: 1.4;
}

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 24px 0;
}
.footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; }
.footer__copy, .footer__legal { font-size: 13px; color: var(--gray-600); margin: 0; }
.footer__copy a, .footer__legal a { color: var(--gray-500); text-decoration: none; transition: color var(--transition); }
.footer__copy a:hover, .footer__legal a:hover { color: var(--gray-300); }

/* ----------------------------------------------------------------
   Page Hero (Inner Pages)
---------------------------------------------------------------- */
.page-hero--inner {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
    padding: 64px 0 56px;
    border-bottom: 1px solid rgba(0,168,255,.1);
    position: relative;
    overflow: hidden;
}
.page-hero--inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(0,168,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,168,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
}
.page-hero__title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--white); position: relative; }

.blog-post-hero .blog-card__cat a { color: var(--blue-300); font-size: 13px; }
.post-meta { color: var(--gray-400); font-size: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; position: relative; }

/* ----------------------------------------------------------------
   Content Layout
---------------------------------------------------------------- */
.content-wrap { padding-top: 60px; padding-bottom: 80px; }

.content-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
}

.main-content--full { grid-column: 1 / -1; }

/* Entry Content */
.entry-content { line-height: 1.8; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { margin: 1.6em 0 .6em; }
.entry-content h2 { font-size: 28px; }
.entry-content h3 { font-size: 22px; }
.entry-content p { margin-bottom: 1.2em; color: var(--gray-700); }
.entry-content ul, .entry-content ol { margin-bottom: 1.2em; color: var(--gray-700); }
.entry-content li { margin-bottom: .4em; }
.entry-content img { border-radius: var(--radius-md); margin: 24px 0; }
.entry-content blockquote {
    border-left: 3px solid var(--blue-400);
    padding: 16px 24px;
    margin: 24px 0;
    background: var(--gray-50);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--gray-600);
    font-style: italic;
}
.entry-content a { color: var(--blue-500); text-decoration: underline; }
.entry-content a:hover { color: var(--blue-400); }
.entry-content code { background: var(--gray-100); padding: 2px 6px; border-radius: 4px; font-size: .875em; }
.entry-content pre { background: var(--gray-900); color: var(--gray-200); padding: 24px; border-radius: var(--radius-md); overflow-x: auto; margin: 24px 0; }

/* Post thumbnail */
.post-thumbnail { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; }
.post-thumbnail img { width: 100%; height: 400px; object-fit: cover; }

/* Post navigation */
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--gray-200);
}
.post-nav__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition);
}
.post-nav__item:hover { border-color: var(--blue-400); background: var(--white); }
.post-nav__label { font-size: 12px; color: var(--gray-400); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.post-nav__title { font-size: 14px; color: var(--gray-700); font-weight: 600; }
.post-nav__item--next { text-align: right; }

/* Post tags */
.post-tags { margin-top: 24px; font-size: 14px; color: var(--gray-500); }
.post-tags .tags-label { font-weight: 600; color: var(--gray-700); }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; gap: 24px; }
.widget { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px; }
.widget-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--gray-900); padding-bottom: 12px; border-bottom: 2px solid var(--blue-400); }

/* Pagination */
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.pagination .page-numbers { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); color: var(--gray-700); font-size: 14px; text-decoration: none; transition: all var(--transition); }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--blue-500); color: var(--white); border-color: var(--blue-500); }

/* 404 */
.error-404__icon { margin-bottom: 24px; display: flex; justify-content: center; }
.error-404 h2 { font-size: 32px; margin-bottom: 16px; }
.error-404 p { color: var(--gray-500); margin-bottom: 0; }

/* No results */
.no-results { color: var(--gray-500); text-align: center; padding: 48px; }

/* Page article */
.page-article { max-width: 860px; margin: 0 auto; }

/* ----------------------------------------------------------------
   Animations
---------------------------------------------------------------- */
.animate-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-in--delay { transition-delay: 0.2s; }

/* ----------------------------------------------------------------
   Trust / Industry Membership (GTIA)
---------------------------------------------------------------- */
/* --ms-w      rendered width of the Microsoft image file.
   --ms-mark   the visible lockup inside it. The supplied artwork sits on a
               600x600 canvas with the mark spanning 540px, so the lockup is
               90% of the rendered width. Microsoft's floor is 72px for the
               lockup itself, not the padded canvas — hence measuring the mark.
   --ms-clear  required clear space = one symbol height, from Microsoft's own
               16px-symbol-at-72px-lockup ratio. */
.trust__inner {
    --ms-w: 240px;
    --ms-render: max(var(--ms-w), 80px);
    --ms-mark: calc(var(--ms-render) * 0.9);
    --ms-clear: calc(var(--ms-mark) * 16 / 72);

    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 64px;
    align-items: center;
}

.trust__badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ms-clear);
}

/* Both badges must be reproduced exactly as supplied. Scale proportionally and
   nothing else — no border-radius (clips GTIA's red border and notched corner),
   no filters, no opacity, no recolouring, no overlays. */
.trust__badge { display: block; line-height: 0; }
.trust__badge img { display: block; height: auto; }

/* GTIA — square. */
a.trust__badge { transition: transform .3s ease; }
a.trust__badge:hover { transform: translateY(-4px); }
a.trust__badge img { width: 240px; }

/* Microsoft — width-driven so the artwork keeps its own ratio. Never set both
   dimensions on the image. No hover movement on this one.

   The supplied file is a 600x600 canvas with the lockup occupying only
   y=235..364, so ~39% of the height above and below is blank white canvas.
   Left alone that dead space stacks on top of the flex gap and reads as a
   hole in the layout.

   The fix is a viewport: the wrapper is exactly as tall as the lockup and
   clips, while the image is offset inside it. Only blank canvas is clipped —
   the mark is fully visible and undistorted.

   Do NOT do this with a negative margin on the image instead. That shifts the
   whole opaque box upward and paints it over the GTIA badge above, which is
   only masked when GTIA's hover transform lifts it into a new paint layer.

   NOTE: the 235/600 and 129/600 ratios are tuned to THIS file's cropping. A
   Partner Center download with tighter margins needs them retuned, or the
   wrapper reverted to height:auto with no offset. */
.trust__badge--ms {
    width: var(--ms-render);
    height: calc(var(--ms-render) * 129 / 600);
    overflow: hidden;
}
.trust__badge--ms img {
    width: var(--ms-render);
    margin-top: calc(var(--ms-render) * -235 / 600);
}

.trust__title {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: 18px;
}
.trust__desc {
    font-size: 17px;
    line-height: 1.75;
    color: var(--gray-500);
    margin-bottom: 24px;
}
.trust__points {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.trust__points li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--gray-600);
}
.trust__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue-glow);
    box-shadow: inset 0 0 0 2px var(--blue-400);
}
.trust__points li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    width: 6px;
    height: 3px;
    border-left: 2px solid var(--blue-400);
    border-bottom: 2px solid var(--blue-400);
    transform: rotate(-45deg);
}

/* ----------------------------------------------------------------
   Responsive
---------------------------------------------------------------- */

/* Tablet: 1024px */
@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; gap: 48px; text-align: center; }
    .hero__sub { margin: 0 auto 36px; }
    .hero__actions { justify-content: center; }
    .hero__trust { justify-content: center; }
    .hero__visual { display: none; }

    .services__grid { grid-template-columns: repeat(2, 1fr); }
    .features__grid { grid-template-columns: repeat(2, 1fr); }
    .blog-preview__grid { grid-template-columns: repeat(2, 1fr); }
    .stats-bar__grid { grid-template-columns: repeat(2, 1fr); }

    .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer__col--brand { grid-column: 1 / -1; }

    .cta-strip__inner { flex-direction: column; text-align: center; }
    .cta-strip__actions { justify-content: center; }

    .trust__inner { grid-template-columns: 260px 1fr; gap: 40px; }
}

/* Mobile: 768px */
@media (max-width: 768px) {
    :root { --header-h: 60px; }

    .main-nav { display: none; }
    .nav-toggle { display: flex; }

    .topbar { display: none; }

    .services__grid { grid-template-columns: 1fr; }
    .features__grid { grid-template-columns: 1fr; }
    .blog-preview__grid { grid-template-columns: 1fr; }
    .stats-bar__grid { grid-template-columns: repeat(2, 1fr); }

    .section { padding: 64px 0; }
    .section-header { margin-bottom: 40px; }

    .footer__top { grid-template-columns: 1fr; gap: 28px; padding: 48px 0 32px; }
    .footer__col--brand { grid-column: auto; }

    .footer__bottom-inner { flex-direction: column; gap: 8px; text-align: center; }

    .content-layout { grid-template-columns: 1fr; }

    .post-nav { grid-template-columns: 1fr; }

    .stat-item__number { font-size: 40px; }

    .btn--lg { padding: 14px 24px; font-size: 15px; }

    .cta-strip { padding: 48px 0; }

    .trust__inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .trust__badges { align-items: center; }
    .trust__points { display: inline-block; text-align: left; }
}

/* Small mobile: 480px */
@media (max-width: 480px) {
    .hero__headline { font-size: 32px; }
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { justify-content: center; }
    .stats-bar__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}