.hero-section {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: calc(var(--nav-height) + 32px) 36px calc(var(--footer-height) + 32px);
}

.hero {
    background: linear-gradient(135deg, #007CAD 0%, #2B3C4E 100%);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 1240px; min-height: 440px;
    display: flex; align-items: center;
}

.hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
        rgba(0,60,90,0.97) 0%, rgba(0,70,105,0.80) 35%,
        rgba(20,45,65,0.35) 65%, rgba(43,60,78,0.0) 100%);
}

.hero-code-bg {
    position: absolute; top: 0; right: 0; bottom: 0; width: 68%;
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    color: rgba(255,255,255,0.15);
}

.hero-body {
    position: relative; z-index: 2;
    padding: 56px 48px; max-width: 50%;
}

.hero-heading {
    font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
    color: var(--hero-text); margin-bottom: 20px;
}

.hero-sub {
    font-size: 16px; line-height: 1.65; max-width: 42ch;
    color: var(--hero-sub); margin-bottom: 32px;
}

.btn-hero {
    font-size: 15px; font-weight: 600; padding: 14px 32px; min-width: 200px;
    border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 8px;
}

.btn-hero-primary {
    background: var(--hero-btn-bg); color: var(--hero-btn-color);
    box-shadow: var(--hero-btn-shadow);
}

.btn-hero-secondary {
    background: transparent; color: var(--hero-text);
    border: 1.5px solid var(--hero-outline-border);
}

:root {
    --hd-blue: #007CAD; --hd-blue-hover: #0090c8;
    --hd-slate: #2B3C4E; --hd-slate-dark: #1e2b38;
    --bg-primary: #FAFBFC; --bg-secondary: #F0F2F5; --bg-card: #FFFFFF;
    --text-primary: #1A2332; --text-secondary: #5A6B7D; --text-tertiary: #8896A6;
    --border-subtle: rgba(43, 60, 78, 0.1); --border-medium: rgba(43, 60, 78, 0.18);
    --icon-color: #2B3C4E; --icon-bg: rgba(0, 124, 173, 0.06);
    --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 28px 24px;
    transition: all var(--transition); position: relative; overflow: hidden;
}

.service-card:hover {
    border-color: rgba(0,124,173,0.25); transform: translateY(-3px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}