/* =====================================================
   HOME SECURE CONNECT — v9.0 (MERGED)
   Design: AT&T-Inspired Corporate Professional
   Fonts: Sora (headings) + DM Sans (body)
   Merged from: homestyle.css + style.css
   Single source of truth — do NOT load other CSS files.
   ===================================================== */

:root {
    --hsc-blue:    #0057b8;
    --hsc-blue-dk: #003d82;
    --hsc-blue-lt: #e8f0fb;
    --hsc-accent:  #0099cc;
    --hsc-accent-dk: #007aa3;
    /* legacy alias so existing var(--hsc-red) references now render brand teal */
    --hsc-red:     #0099cc;
    --hsc-red-dk:  #007aa3;
    --hsc-dark:  #0d1b2a;
    --hsc-navy:  #0f2044;
    --hsc-text:  #374151;
    --hsc-muted: #6b7280;
    --hsc-light: #f5f7fa;
    --hsc-border:#e2e8f0;
    --hsc-white: #ffffff;
    --hsc-shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06);
    --hsc-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.07);
    --hsc-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.09);
    --hsc-shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.13);
    --hsc-radius-sm: 10px;
    --hsc-radius:    16px;
    --hsc-radius-lg: 24px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--hsc-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

main {
    display: block;
    overflow-x: clip;
    max-width: 100vw;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Sora', sans-serif;
    color: var(--hsc-dark);
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

p {
    line-height: 1.7;
}

a {
    transition: color .2s ease;
}

.hsc-section {
    padding: 96px 0;
}

/* Utility: position context for sticky children inside a row */
.fixed-index {
    position: relative;
}

/* ── STICKY HEADER CONTAINER */
header.sticky-top {
    display: block !important;
    width: 100% !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
}

/* ── TOP INFO BAR */
.hsc-top-bar {
    background-color: var(--hsc-blue);
    width: 100%;
    z-index: 1030;
    transition: background-color 0.3s;
}
.top-bar-link {
    color: #ffffff !important;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease;
}
.top-bar-link:hover {
    opacity: 0.9;
}

/* Inner-page (non-carousel) hero override */
.hsc-hero.d-flex {
    height: auto;
    min-height: 40vh;
    max-height: none;
}

@media (max-width: 768px) {
    .hsc-section {
        padding: 64px 0;
    }
}

/* ===== COLOUR HELPERS ===== */
.text-hsc-blue {
    color: var(--hsc-blue) !important;
}

.text-hsc-red {
    color: var(--hsc-red) !important;
}

.text-hsc-dark {
    color: var(--hsc-dark) !important;
}

.bg-hsc-light {
    background-color: var(--hsc-light) !important;
}

.text-danger {
    color: var(--hsc-red) !important;
}

.text-primary {
    color: var(--hsc-blue) !important;
}

.bg-primary {
    background-color: var(--hsc-blue) !important;
}

.border-primary {
    border-color: var(--hsc-blue) !important;
}

/* ===== BUTTONS ===== */
.btn {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    padding: 11px 24px;
    transition: all .2s ease;
    letter-spacing: 0.1px;
}

.btn-primary {
    background: var(--hsc-blue);
    border-color: var(--hsc-blue);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--hsc-blue-dk);
    border-color: var(--hsc-blue-dk);
    transform: translateY(-1px);
}

/* btn-hsc-cta — main CTA button (replaces old btn-danger) */
.btn-hsc-cta,
.btn-danger {
    background: linear-gradient(135deg, var(--hsc-blue) 0%, var(--hsc-accent) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 87, 184, 0.25);
}

.btn-hsc-cta:hover,
.btn-hsc-cta:focus,
.btn-danger:hover,
.btn-danger:focus {
    background: linear-gradient(135deg, var(--hsc-blue-dk) 0%, var(--hsc-accent-dk) 100%);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 87, 184, 0.35);
}

.btn-outline-primary {
    color: var(--hsc-blue);
    border-color: var(--hsc-blue);
}

.btn-outline-primary:hover {
    background: var(--hsc-blue);
    border-color: var(--hsc-blue);
    color: #fff;
    transform: translateY(-1px);
}

/* -- Navbar phone CTA button -- */
.navbar-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--hsc-blue) 0%, var(--hsc-accent) 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.3px;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    box-shadow: 0 0 0 0 rgba(0, 153, 204, 0.45),
                0 4px 14px rgba(0, 87, 184, 0.30);
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.navbar-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.18) 50%,
        transparent 100%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

.navbar-cta:hover {
    background: linear-gradient(135deg, var(--hsc-accent) 0%, var(--hsc-blue) 100%) !important;
    color: #fff !important;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 0 4px rgba(0, 153, 204, 0.20),
                0 8px 24px rgba(0, 87, 184, 0.40);
}

.navbar-cta:hover::before {
    transform: translateX(120%);
}

.navbar-cta i {
    font-size: 0.78rem;
}

.btn-light {
    font-weight: 600;
    border-radius: 8px;
}

/* ===== SECTION BADGE ===== */
.hsc-badge {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hsc-blue);
    background: #f0f7ff;
    border: 1px solid #cce4ff;
    border-radius: 50px;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 87, 184, 0.05);
}

.hsc-badge-red {
    color: var(--hsc-red);
    background: rgba(230, 57, 70, 0.07);
    border-color: rgba(230, 57, 70, 0.2);
}

.hsc-badge-light {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ===== SVG BACKGROUNDS ===== */
.hsc-bg-dots {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%230057b8' fill-opacity='0.045'/%3E%3C/svg%3E");
}

.hsc-bg-grid {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230057b8' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 0h48v48H0z'/%3E%3C/g%3E%3C/svg%3E");
}

.hsc-bg-lines {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230057b8' stroke-opacity='0.04' stroke-width='1'%3E%3Cpath d='M0 60L60 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* =====================================================
   NAVBAR — SHARED (all breakpoints)
   ===================================================== */
.navbar {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: #0d1e30 !important;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 2px 20px rgba(0,0,0,0.25);
    position: relative;
}



.navbar-brand-text span { color: var(--hsc-blue); }

.navbar-logo {
    max-width: 160px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Nav link + mega-toggle shared style */
.navbar-nav .nav-link,
.navbar-nav .mega-toggle {
    font-size: 13.5px;
    font-weight: 500;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 6px;
    transition: all .2s;
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.navbar-nav .nav-link:hover,
.navbar-nav .mega-toggle:hover {
    color: #4d9fff !important;
    background: var(--hsc-blue-lt);
}

/* Caret icon */
.mega-toggle .bi-chevron-down {
    font-size: 0.65rem;
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

/* =====================================================
   MEGA MENU — SHARED COMPONENT STYLES (global)
   ===================================================== */
.mega-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg,#f0f7ff 0%,#e0efff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--hsc-blue);
    box-shadow: 0 4px 10px rgba(0,87,184,0.06);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.mega-links-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mega-link-item {
    display: block;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: transparent;
}

.mega-link-item:hover {
    background-color: #f8fafc;
    color: var(--hsc-blue-dk);
    transform: translateX(4px);
}

.mega-action-link {
    color: var(--hsc-blue);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
}

.mega-action-link:hover {
    gap: 10px;
    color: var(--hsc-blue-dk);
    background: #f0f7ff;
}

.custom-zip-input { border-color: #e2e8f0; }
.custom-zip-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.1);
    border-color: #cbd5e1;
}

.bg-mega-sidebar-premium {
    background: linear-gradient(135deg, var(--hsc-blue) 0%, #00c2ff 100%);
    position: relative;
    overflow: hidden;
}

.mega-contact-pill {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.1);
    padding: 12px 16px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
}

.mega-contact-pill .mc-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--hsc-blue);
}

.mega-contact-pill .mc-text { display: flex; flex-direction: column; }

.mega-contact-pill .mc-label {
    font-size: 0.75rem; font-weight: 600;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase; letter-spacing: 0.5px;
}

.mega-contact-pill .mc-phone {
    color: #fff; font-weight: 800; font-size: 1.05rem;
    text-decoration: none; font-family: 'Sora', sans-serif;
}


/* =====================================================
   MEGA MENU — DESKTOP (>=992px)
   ===================================================== */
@media (min-width: 992px) {

    .navbar-toggler { display: none; }

    .navbar-collapse { display: flex !important; }

    .mega-menu-wrapper {
        position: static !important;
    }

    .custom-mega-menu {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 100% !important;
        transform: translateX(-50%) translateY(10px);
        width: min(1350px, 98vw);
        border-radius: 12px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
        box-shadow: 0 12px 45px rgba(0,0,0,0.12);
        z-index: 1050;
        background: #fff;
    }

    .mega-menu-wrapper:hover .custom-mega-menu,
    .mega-menu-wrapper:focus-within .custom-mega-menu,
    .mega-menu-wrapper.mega-open .custom-mega-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .mega-menu-wrapper:hover .mega-toggle .bi-chevron-down,
    .mega-menu-wrapper.mega-open .mega-toggle .bi-chevron-down {
        transform: rotate(180deg);
    }

    .border-end-lg { border-right: 1px solid #f1f5f9; }

    .bg-mega-sidebar-premium { border-radius: 0 12px 12px 0; }
}

/* =====================================================
   NAVBAR + MEGA MENU — MOBILE (<992px)
   ===================================================== */
@media (max-width: 991.98px) {

    /* White hamburger icon on dark navbar */
    .navbar-toggler-icon { filter: invert(1); }

    /* The collapsible container */
    .navbar-collapse {
        background: #0f273d;
        padding: 0.5rem 1rem 1.25rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        border-radius: 0 0 12px 12px;
        max-height: calc(100dvh - 62px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Stack the nav list and the CTA button vertically */
    .navbar-collapse .navbar-nav {
        flex-direction: column;
        width: 100%;
        margin: 0 !important;
    }

    /* Each nav item full-width */
    .navbar-nav .nav-item {
        width: 100%;
    }

    /* Nav links and mega-toggle full-width, justify text+caret */
    .navbar-nav .nav-link,
    .navbar-nav .mega-toggle {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.7rem 0.25rem !important;
        color: rgba(255,255,255,0.9) !important;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        border-radius: 0 !important;
    }

    .navbar-nav .nav-link:last-child { border-bottom: none; }

    /* Caret rotates when sub-menu is open */
    .mega-menu-wrapper.mega-open .mega-toggle .bi-chevron-down {
        transform: rotate(180deg);
    }

    /* Pull the CTA button block below the nav list */
    .navbar-collapse > div[class*="d-flex"] {
        width: 100%;
        padding-top: 0.75rem;
    }

    /* Make CTA phone button full-width on mobile */
    .navbar-cta {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    /* -- MOBILE MEGA MENU -- */
    /* Hidden by default */
    .mega-menu-wrapper .custom-mega-menu {
        display: none !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: hidden !important;
    }

    /* Shown when .mega-open added via JS */
    .mega-menu-wrapper.mega-open .custom-mega-menu {
        display: block !important;
    }

    /* Columns stack vertically */
    .custom-mega-menu .row.g-0 {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
    }

    .custom-mega-menu .col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.9rem 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    }

    .custom-mega-menu .col-lg-3:last-child {
        border-bottom: none !important;
    }

    /* Colour overrides — light text on dark bg */
    .custom-mega-menu .fw-700,
    .custom-mega-menu .text-dark {
        color: rgba(255,255,255,0.95) !important;
    }

    .custom-mega-menu .text-muted {
        color: rgba(255,255,255,0.55) !important;
    }

    .mega-link-item {
        color: rgba(255,255,255,0.8) !important;
    }

    .mega-link-item:hover {
        background: rgba(255,255,255,0.06) !important;
        color: #fff !important;
        transform: none !important;
    }

    .mega-action-link {
        color: #93c5fd !important;
    }

    .mega-action-link:hover {
        background: rgba(255,255,255,0.06) !important;
        color: #fff !important;
    }

    .mega-icon-box {
        background: rgba(255,255,255,0.1) !important;
        color: #93c5fd !important;
        box-shadow: none !important;
    }

    .bg-mega-sidebar-premium {
        border-radius: 8px !important;
        margin-top: 0 !important;
        padding: 1rem !important;
    }

    .text-hsc-blue { color: #4d9fff !important; }
}

/* =====================================================
   HERO — 3-SLIDE CAROUSEL
   ===================================================== */
.hsc-hero {
    position: relative;
    height: 78vh;
    min-height: 520px;
    max-height: 720px;
}

.hsc-slide {
    height: 78vh;
    min-height: 520px;
    max-height: 720px;
}

.hsc-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hsc-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg, rgba(13, 27, 42, 0.93) 0%, rgba(13, 27, 42, 0.68) 55%, rgba(13, 27, 42, 0.22) 100%);
}

.hsc-eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4d9fff;
    border: 1px solid rgba(77, 159, 255, 0.35);
    background: rgba(77, 159, 255, 0.08);
    border-radius: 50px;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1.1rem;
    display: inline-block;
}

.hsc-hero-heading {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.5rem, 5.5vw, 4.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 1.25rem;
    letter-spacing: -1.5px;
}

.hsc-hero-sub {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 520px;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hsc-tel-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color .2s;
}

.hsc-tel-link:hover {
    color: #fff;
}

.hsc-indicators {
    bottom: 32px;
}

.hsc-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    border: none;
    opacity: 1;
    transition: all .35s ease;
    margin: 0 4px;
}

.hsc-indicators .active {
    background: var(--hsc-red);
    width: 30px;
    border-radius: 5px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    backdrop-filter: blur(6px);
    transition: background .25s;
    opacity: 1;
}

.carousel-control-prev {
    left: 28px;
}

.carousel-control-next {
    right: 28px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(255, 255, 255, 0.22);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 18px;
    height: 18px;
}

/* =====================================================
   TRUST BAR
   ===================================================== */
.hsc-trust-item {
    text-align: center;
    padding: 2rem 1.25rem;
    position: relative;
}

.hsc-trust-item+.hsc-trust-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--hsc-border);
}

.hsc-trust-icon {
    font-size: 1.6rem;
    color: var(--hsc-blue);
    margin-bottom: 0.6rem;
    display: block;
}

.hsc-trust-num {
    font-family: 'Sora', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--hsc-dark);
    line-height: 1;
    display: block;
}

.hsc-trust-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--hsc-muted);
    margin-top: 0.3rem;
    display: block;
}

/* =====================================================
   SERVICE CARDS (v2 — Icon-based, no images)
   ===================================================== */
.hsc-service-card-v2 {
    border-radius: var(--hsc-radius-lg);
    padding: 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all .4s cubic-bezier(.25, .46, .45, .94);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Card 1 — Security (Red accent) */
.hsc-card-red {
    background: rgba(230, 57, 70, 0.06);
    border: 1px solid rgba(230, 57, 70, 0.22);
}

.hsc-card-red::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hsc-red), #ff8a9a);
}

.hsc-card-red:hover {
    border-color: rgba(230, 57, 70, 0.42);
    background: rgba(230, 57, 70, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(230, 57, 70, 0.12);
}

/* Card 2 — Internet (Blue accent) */
.hsc-card-blue {
    background: rgba(0, 87, 184, 0.06);
    border: 1px solid rgba(0, 87, 184, 0.22);
}

.hsc-card-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hsc-blue), #60aeff);
}

.hsc-card-blue:hover {
    border-color: rgba(0, 87, 184, 0.42);
    background: rgba(0, 87, 184, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 87, 184, 0.12);
}

/* Card header with icon + title */
.hsc-svc-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.hsc-svc-icon-lg {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 16px;
    background: rgba(230, 57, 70, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--hsc-red);
    flex-shrink: 0;
    border: 1px solid rgba(230, 57, 70, 0.25);
}

.hsc-svc-icon-blue {
    background: rgba(0, 87, 184, 0.15);
    color: var(--hsc-blue);
    border-color: rgba(0, 87, 184, 0.25);
}

.hsc-svc-num {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.hsc-card-red .hsc-svc-num {
    color: var(--hsc-red);
}

.hsc-card-blue .hsc-svc-num {
    color: var(--hsc-blue);
}

.hsc-service-card-v2 h3 {
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.hsc-svc-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Sub-section label inside service card */
.hsc-svc-sublabel {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    margin-top: 0.85rem;
    padding: 3px 10px;
    border-radius: 20px;
}

.hsc-card-red .hsc-svc-sublabel {
    color: var(--hsc-red);
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.2);
}

.hsc-card-blue .hsc-svc-sublabel {
    color: #60aeff;
    background: rgba(0, 87, 184, 0.15);
    border: 1px solid rgba(0, 87, 184, 0.25);
}

.hsc-svc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.15rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.hsc-svc-list li {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.68);
    display: flex;
    align-items: center;
    gap: 7px;
}

.hsc-svc-list li i {
    font-size: 0.65rem;
    flex-shrink: 0;
}

.hsc-card-red .hsc-svc-list li i {
    color: var(--hsc-red);
}

.hsc-card-blue .hsc-svc-list li i {
    color: var(--hsc-blue);
}

.hsc-svc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    padding-bottom: 3px;
    transition: gap .3s ease;
    margin-top: auto;
    padding-top: 1.5rem;
}

.hsc-card-red .hsc-svc-link {
    border-bottom: 2px solid var(--hsc-red);
}

.hsc-card-blue .hsc-svc-link {
    border-bottom: 2px solid var(--hsc-blue);
}

.hsc-svc-link:hover {
    gap: 14px;
    color: #fff;
}

/* =====================================================
   HOW IT WORKS
   ===================================================== */
.hsc-step-wrap {
    position: relative;
}

.hsc-step-line {
    position: absolute;
    top: 36px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, var(--hsc-blue) 0%, var(--hsc-red) 100%);
    opacity: 0.12;
    z-index: 0;
}

@media (max-width:767px) {
    .hsc-step-line {
        display: none;
    }
}

.hsc-step-item {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 0.4rem;
}

.hsc-step-num {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--hsc-blue);
    color: var(--hsc-blue);
    font-family: 'Sora', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    transition: all .3s ease;
    position: relative;
    z-index: 2;
    box-shadow: var(--hsc-shadow-sm);
}

.hsc-step-item:hover .hsc-step-num {
    background: var(--hsc-blue);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 87, 184, 0.38);
    transform: scale(1.06);
}

.hsc-step-item h5 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hsc-dark);
    margin-bottom: 0.5rem;
}

.hsc-step-item p {
    font-size: 0.82rem;
    color: var(--hsc-muted);
    line-height: 1.6;
    margin: 0;
}

/* =====================================================
   FEATURE IMAGE CARDS (hover)
   ===================================================== */
.hsc-feat-card {
    position: relative;
    border-radius: var(--hsc-radius);
    overflow: hidden;
    cursor: pointer;
    height: 300px;
    box-shadow: var(--hsc-shadow-sm);
    transition: transform .4s ease, box-shadow .4s ease;
}

.hsc-feat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hsc-shadow-lg);
}

.hsc-feat-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.25, .46, .45, .94);
}

.hsc-feat-card:hover img {
    transform: scale(1.09);
}

.hsc-feat-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 27, 42, 0.95) 0%, rgba(13, 27, 42, 0.35) 55%, transparent 100%);
    transition: background .4s ease;
    z-index: 1;
}

.hsc-feat-card:hover .hsc-feat-grad {
    background: linear-gradient(to top, rgba(13, 27, 42, 0.98) 0%, rgba(13, 27, 42, 0.68) 65%, rgba(13, 27, 42, 0.15) 100%);
}

.hsc-feat-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    color: #fff;
    z-index: 2;
}

.hsc-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 0.75rem;
    transition: all .35s ease;
}

.hsc-feat-card:hover .hsc-feat-icon {
    background: var(--hsc-red);
    border-color: var(--hsc-red);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.42);
}

.hsc-feat-body h5 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.hsc-feat-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    margin: 0;
    opacity: 0.8;
    transform: translateY(6px);
    transition: all .38s ease;
}

.hsc-feat-card:hover .hsc-feat-text {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   INTERNET FEATURE ITEMS
   ===================================================== */
.hsc-inet-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--hsc-border);
    border-radius: var(--hsc-radius-sm);
    transition: all .3s ease;
    box-shadow: var(--hsc-shadow-xs);
    height: 100%;
}

.hsc-inet-item:hover {
    border-color: rgba(0, 87, 184, 0.22);
    box-shadow: var(--hsc-shadow-md);
    transform: translateY(-3px);
}

.hsc-inet-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 87, 184, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--hsc-blue);
    flex-shrink: 0;
    transition: all .3s ease;
}

.hsc-inet-item:hover .hsc-inet-icon {
    background: var(--hsc-blue);
    color: #fff;
}

.hsc-inet-icon-red {
    background: rgba(0, 153, 204, 0.08) !important;
    color: var(--hsc-accent) !important;
}

.hsc-inet-item:hover .hsc-inet-icon-red {
    background: var(--hsc-accent) !important;
    color: #fff !important;
}

.hsc-inet-item h6 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--hsc-dark);
    margin-bottom: 0.2rem;
}

.hsc-inet-item p {
    font-size: 0.83rem;
    color: var(--hsc-muted);
    margin: 0;
    line-height: 1.55;
}

/* =====================================================
   WHY CHOOSE US CARDS
   ===================================================== */
.hsc-why-card {
    background: #fff;
    border: 1px solid var(--hsc-border);
    border-radius: var(--hsc-radius);
    padding: 2rem;
    height: 100%;
    transition: all .3s ease;
    box-shadow: var(--hsc-shadow-xs);
}

.hsc-why-card:hover {
    border-color: rgba(0, 87, 184, 0.25);
    box-shadow: 0 14px 36px rgba(0, 87, 184, 0.09);
    transform: translateY(-5px);
}

.hsc-why-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(0, 87, 184, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--hsc-blue);
    margin-bottom: 1.2rem;
    transition: all .3s ease;
}

.hsc-why-card:hover .hsc-why-icon {
    background: var(--hsc-blue);
    color: #fff;
    transform: scale(1.04);
}

.hsc-why-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.65rem;
}

.hsc-why-card p {
    font-size: 0.88rem;
    color: var(--hsc-muted);
    line-height: 1.68;
    margin: 0;
}

/* =====================================================
   PROVIDER BANNER
   ===================================================== */
.hsc-provider-banner {
    background: linear-gradient(135deg, var(--hsc-blue) 0%, var(--hsc-blue-dk) 100%);
    border-radius: var(--hsc-radius);
    padding: 2.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
}

.hsc-provider-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.035'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hsc-provider-banner h4 {
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.hsc-provider-banner p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    margin: 0;
}

.hsc-provider-banner-dark {
    background: linear-gradient(135deg, var(--hsc-dark) 0%, var(--hsc-navy) 100%);
}

/* ===== CALLOUT ===== */
.hsc-callout {
    background: rgba(0, 87, 184, 0.04);
    border: 1px solid rgba(0, 87, 184, 0.14);
    border-left: 4px solid var(--hsc-blue);
    border-radius: var(--hsc-radius-sm);
    padding: 1.5rem 2rem;
}

.hsc-callout h5 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--hsc-dark);
    margin-bottom: 0.4rem;
}

.hsc-callout p {
    font-size: 0.88rem;
    color: var(--hsc-muted);
    line-height: 1.65;
    margin: 0;
}

/* =====================================================
   FAQ ACCORDION
   ===================================================== */
.hsc-faq .accordion-item {
    background: #fff !important;
    border: 1px solid var(--hsc-border) !important;
    border-radius: var(--hsc-radius-sm) !important;
    margin-bottom: 0.65rem;
    overflow: hidden;
    transition: box-shadow .25s ease;
}

.hsc-faq .accordion-item:hover {
    box-shadow: var(--hsc-shadow-md);
}

.hsc-faq .accordion-button {
    font-family: 'Sora', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hsc-dark);
    background: #fff;
    padding: 1.2rem 1.5rem;
    border-radius: var(--hsc-radius-sm) !important;
    box-shadow: none !important;
}

.hsc-faq .accordion-button:not(.collapsed) {
    color: var(--hsc-blue);
    background: #fff;
    border-bottom: 1px solid var(--hsc-border);
    border-radius: var(--hsc-radius-sm) var(--hsc-radius-sm) 0 0 !important;
}

.hsc-faq .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230057b8' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    filter: none;
}

.hsc-faq .accordion-body {
    font-size: 0.9rem;
    color: var(--hsc-muted);
    line-height: 1.72;
    padding: 1.2rem 1.5rem;
}

/* =====================================================
   CTA SECTION
   ===================================================== */
.hsc-cta-section {
    background: linear-gradient(135deg, #0d1b2a 0%, #0f2044 100%);
    position: relative;
    overflow: hidden;
}

.hsc-cta-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 87, 184, 0.22) 0%, transparent 72%);
    top: -200px;
    right: -100px;
    pointer-events: none;
}

.hsc-cta-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 57, 70, 0.16) 0%, transparent 70%);
    bottom: -150px;
    left: -80px;
    pointer-events: none;
}

.hsc-cta-section h2 {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
}

.hsc-cta-section p {
    color: rgba(255, 255, 255, 0.72);
}

.hsc-trust-check {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hsc-trust-check i {
    color: var(--hsc-red);
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
    background: #0d1b2a;
    color: #fff;
    padding-top: 60px;
    padding-bottom: 30px;
}

.footer .footer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: #fff;
}

.footer p {
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.65;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 9px;
}

.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color .25s;
}

.footer-links a::before {
    content: '»';
    color: var(--hsc-red);
}

.footer-links a:hover {
    color: #fff;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 50%;
    margin-right: 8px;
    text-decoration: none;
    transition: all .25s;
}

.social-icons a:hover {
    background: var(--hsc-blue);
    transform: translateY(-2px);
}

.footer-advisor-badge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
}

.footer-advisor-badge i {
    color: var(--hsc-blue);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-advisor-badge strong {
    display: block;
    color: #fff;
    font-size: 0.82rem;
    margin-bottom: 3px;
}

.footer-advisor-badge span {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.4;
}

.footer-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.25rem;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-contact-item i {
    color: var(--hsc-red);
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-contact-item h5 {
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.footer-contact-item p {
    margin: 0;
    color: #94a3b8;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: 0.82rem;
}

.footer-contact-item p a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .25s;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.footer-contact-item p a:hover {
    color: #fff;
}

.subscribe-box {
    position: relative;
    margin-bottom: 28px;
}

.subscribe-box input {
    width: 100%;
    padding: 11px 48px 11px 18px;
    border-radius: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    font-size: 0.88rem;
    outline: none;
}

.subscribe-box input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.subscribe-box button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: transparent;
    border: none;
    color: var(--hsc-red);
    padding: 0 14px;
    cursor: pointer;
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.83rem;
    color: #64748b;
}

.legal-text {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.65);
    line-height: 1.6;
    margin-top: 18px;
}

/* ===== SCROLL TOP ===== */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hsc-blue);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    box-shadow: 0 4px 14px rgba(0, 87, 184, 0.45);
}

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    bottom: 40px;
}

@media (max-width: 991px) {

    .hsc-hero,
    .hsc-slide {
        height: 70vh;
        min-height: 480px;
        max-height: none;
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }
}

@media (max-width: 767px) {
    .hsc-hero {
        min-height: 420px;
        height: 65vh;
    }

    .hsc-slide {
        min-height: 420px;
        height: 65vh;
    }

    .hsc-hero-heading {
        font-size: 1.9rem;
        letter-spacing: -0.5px;
        line-height: 1.1;
    }

    .hsc-hero-sub {
        font-size: 0.92rem;
        margin-bottom: 1.25rem;
    }

    .hsc-eyebrow {
        font-size: 0.65rem;
        margin-bottom: 0.5rem;
    }

    .hsc-svc-list {
        grid-template-columns: 1fr;
    }

    .hsc-trust-item+.hsc-trust-item::before {
        display: none;
    }

    .hsc-provider-banner {
        padding: 1.75rem 1.5rem;
    }

    .hsc-callout {
        padding: 1.25rem;
    }
}

/* ======== UNIQUE SECTION DESIGNS ======== */

/* Brand Statement - light grid bg */
.brand-statement-section {
    background: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230057b8' stroke-opacity='0.04' stroke-width='1'%3E%3Cpath d='M0 0h48v48H0z'/%3E%3C/g%3E%3C/svg%3E");
    border-bottom: 1px solid var(--hsc-border);
}

.brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f0f7ff;
    border: 1px solid #cce4ff;
    border-radius: 50px;
    padding: 0.35rem 0.95rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hsc-blue);
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 87, 184, 0.05);
}

.brand-statement-section h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--hsc-dark);
    line-height: 1.25;
}

.brand-stat-box {
    border-left: 3px solid var(--hsc-blue);
    padding-left: 1rem;
}

.brand-stat-box .num {
    font-family: 'Sora', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--hsc-blue);
    display: block;
    line-height: 1;
}

.brand-stat-box .lbl {
    font-size: 0.78rem;
    color: var(--hsc-muted);
    font-weight: 500;
    margin-top: 2px;
}

/* What We Offer - dark section */
.offer-section {
    background: var(--hsc-dark);
    position: relative;
    overflow: hidden;
    z-index: 1;
}


.hsc-v2-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 2;
}

.hsc-v2-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
}

.hsc-v2-media-container {
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.hsc-v2-content-box {
    padding: 2.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.hsc-v2-tag-label {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #3b82f6;
    margin-bottom: 1rem;
}

.hsc-v2-main-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

/* Feature Grid System */
.hsc-v2-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.hsc-v2-group-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
    border-left: 2px solid #3b82f6;
    padding-left: 10px;
}

.hsc-v2-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hsc-v2-feature-item {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
}

.hsc-v2-feature-item i {
    color: #3b82f6;
    margin-right: 10px;
    font-size: 0.9rem;
}

.hsc-v2-full-width-group {
    grid-column: span 2;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hsc-v2-action-btn {
    margin-top: auto;
    padding-top: 2rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: gap 0.3s ease;
}

.hsc-v2-action-btn:hover {
    color: #3b82f6;
    gap: 15px;
}

/* How It Works - light with dots */
.how-section {
    background: var(--hsc-light);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%230057b8' fill-opacity='0.045'/%3E%3C/svg%3E");
}

/* Security Deep Dive - white + image right */
.security-section {
    background: #fff;
}

.security-img-col {
    position: relative;
}

.security-main-img {
    border-radius: var(--hsc-radius-lg);
    overflow: hidden;
    box-shadow: var(--hsc-shadow-lg);
    position: relative;
}

.security-main-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.security-badge-float {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: var(--hsc-blue);
    color: #fff;
    border-radius: var(--hsc-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 12px 32px rgba(0, 87, 184, 0.35);
    min-width: 180px;
}

.security-badge-float .num {
    font-family: 'Sora', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    display: block;
    line-height: 1;
}

.security-badge-float .lbl {
    font-size: 0.78rem;
    opacity: 0.85;
    margin-top: 4px;
    display: block;
}

/* Internet Section - navy bg + right col cards */
.hsc-nav-tabs {
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hsc-nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.6);
    border-radius: 40px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: none;
    background: transparent;
}

.hsc-nav-tabs .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.hsc-nav-tabs .nav-link.active {
    color: #fff;
    background: var(--hsc-blue);
    box-shadow: 0 4px 15px rgba(0, 87, 184, 0.4);
}

/* Internet Section - navy bg + right col cards */
.internet-section {
    background: var(--hsc-navy);
    position: relative;
    overflow: hidden;
}

.internet-section::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 87, 184, 0.18) 0%, transparent 70%);
    top: -150px;
    right: -100px;
    pointer-events: none;
}

.internet-section h2,
.internet-section h3,
.internet-section h4,
.internet-section h5,
.internet-section h6 {
    color: #fff;
}

/* Why Choose - light blue tint */
.why-section {
    background: #f0f5ff;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230057b8' stroke-opacity='0.04' stroke-width='1'%3E%3Cpath d='M0 60L60 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* FAQ - white with clean layout */
.faq-section {
    background: #fff;
}

/* Section heading styles */
.section-heading {
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: var(--hsc-dark);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.section-heading-light {
    color: #fff;
}

.section-sub {
    font-size: 1rem;
    color: var(--hsc-muted);
    max-width: 620px;
    line-height: 1.7;
}

/* Divider line decoration */
.hsc-divider-accent {
    width: 56px;
    height: 4px;
    background: var(--hsc-red);
    border-radius: 2px;
    margin-bottom: 1.25rem;
}

.hsc-divider-accent-center {
    margin-left: auto;
    margin-right: auto;
}

/* Internet item card in dark bg */
.hsc-inet-item-dark {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.hsc-inet-item-dark:hover {
    border-color: rgba(0, 87, 184, 0.5);
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-3px);
}

.hsc-inet-item-dark h6 {
    color: #fff;
}

.hsc-inet-item-dark p {
    color: rgba(255, 255, 255, 0.6);
}

.hsc-inet-icon-dark {
    background: rgba(0, 87, 184, 0.25) !important;
}

.hsc-inet-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    margin: 1.5rem 0;
}

/* Offer card inside dark section */
.offer-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--hsc-radius-lg);
    padding: 2.5rem;
    height: 100%;
    transition: all .3s ease;
}

.offer-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 87, 184, 0.4);
    transform: translateY(-4px);
}

.offer-card-number {
    font-family: 'Sora', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hsc-red);
    margin-bottom: 0.5rem;
    display: block;
}

.offer-card h3 {
    font-size: 1.45rem;
    margin-bottom: 0.75rem;
}

.offer-card>p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
}

.offer-sub-heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 1.25rem 0 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.25rem;
}

.offer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offer-list li {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0.55rem;
}

.offer-list li i {
    color: var(--hsc-red);
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Section number label */
.section-num-tag {
    font-family: 'Sora', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 87, 184, 0.06);
    position: absolute;
    top: -10px;
    right: 0;
    letter-spacing: -4px;
    pointer-events: none;
    user-select: none;
}

/* ATT-inspired promo strip */
.promo-strip {
    background: var(--hsc-blue);
    padding: 10px 0;
}

.promo-strip p {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    margin: 0;
}

.promo-strip a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    text-decoration: underline;
}

/* Wireless section cards */
.wireless-plan-card {
    background: #fff;
    border: 1px solid var(--hsc-border);
    border-radius: var(--hsc-radius);
    padding: 1.75rem;
    transition: all .3s ease;
    box-shadow: var(--hsc-shadow-xs);
}

.wireless-plan-card:hover {
    border-color: rgba(0, 87, 184, 0.25);
    box-shadow: var(--hsc-shadow-md);
    transform: translateY(-4px);
}

.wireless-plan-card .plan-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(0, 87, 184, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--hsc-blue);
    margin-bottom: 1rem;
}

.wireless-plan-card h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.wireless-plan-card p {
    font-size: 0.84rem;
    color: var(--hsc-muted);
    margin: 0;
    line-height: 1.6;
}

/* Curved divider top */
.wave-top {
    position: relative;
}

.wave-top::before {
    content: '';
    display: block;
    width: 100%;
    height: 60px;
    background: inherit;
    clip-path: ellipse(55% 100% at 50% 100%);
    margin-top: -59px;
}

/* ATT banner strip image */
.hero-img-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(13, 27, 42, 0.88) 0%, transparent 100%);
    padding: 2rem;
    border-radius: 0 0 var(--hsc-radius-lg) var(--hsc-radius-lg);
}

/* =====================================================
   GRADIENT HEADING SPANS
   ===================================================== */
.hsc-heading-grad {
    background: linear-gradient(110deg, #60b4ff 0%, #00d4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* For headings on white/light backgrounds */
.hsc-heading-grad-dark {
    background: linear-gradient(110deg, var(--hsc-blue) 0%, #0099ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =====================================================
   HERO TRUST PILLS  (below CTA buttons in hero slides)
   ===================================================== */
.hsc-hero-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.25rem;
}

.hsc-htpill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50px;
    padding: 0.38rem 0.9rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease;
}

.hsc-htpill i {
    font-size: 0.75rem;
    color: #60c8ff;
}

.hsc-htpill:hover {
    background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 576px) {
    .hsc-hero-trust-pills {
        gap: 0.45rem;
    }

    .hsc-htpill {
        font-size: 0.66rem;
        padding: 0.32rem 0.7rem;
    }
}

/* =====================================================
   HOW IT WORKS — v2 (Bold 01/02/03 numbers)
   ===================================================== */
.hsc-step-v2 {
    background: #fff;
    border: 1px solid var(--hsc-border);
    border-radius: var(--hsc-radius);
    padding: 2rem 1.75rem;
    height: 100%;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: var(--hsc-shadow-xs);
    overflow: hidden;
}

.hsc-step-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hsc-blue), #00c2ff);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hsc-step-v2:hover {
    border-color: rgba(0, 87, 184, 0.2);
    box-shadow: var(--hsc-shadow-md);
    transform: translateY(-4px);
}

.hsc-step-v2:hover::before {
    opacity: 1;
}

.hsc-step-v2-num {
    font-family: 'Sora', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
    background: linear-gradient(135deg, var(--hsc-blue) 0%, #00c2ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.85;
}

.hsc-step-v2 h5 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--hsc-dark);
    margin-bottom: 0.65rem;
}

.hsc-step-v2 p {
    font-size: 0.85rem;
    color: var(--hsc-muted);
    line-height: 1.7;
    margin: 0;
}

/* CTA Card inside How It Works grid */
.hsc-step-v2-cta {
    background: linear-gradient(135deg, var(--hsc-blue) 0%, #0042a8 100%);
    border: none;
    box-shadow: 0 16px 48px rgba(0, 87, 184, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hsc-step-v2-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 56px rgba(0, 87, 184, 0.38);
    border-color: transparent;
}

.hsc-step-v2-cta::before {
    display: none;
}

.hsc-step-v2-cta-inner {
    text-align: center;
    padding: 0.5rem;
}

.hsc-step-v2-cta-icon {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    display: block;
}

/* =====================================================
   IMPROVED BRAND STAT BOX
   ===================================================== */
.brand-stat-box {
    border-left: 3px solid var(--hsc-blue);
    padding: 0.75rem 0 0.75rem 1.25rem;
    background: #f8faff;
    border-radius: 0 var(--hsc-radius-sm) var(--hsc-radius-sm) 0;
    transition: all 0.3s ease;
    border-top: 1px solid var(--hsc-border);
    border-bottom: 1px solid var(--hsc-border);
    border-right: 1px solid var(--hsc-border);
}

.brand-stat-box:hover {
    background: #f0f7ff;
    border-left-color: var(--hsc-blue);
    transform: translateX(4px);
}

.brand-stat-box .num {
    font-family: 'Sora', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--hsc-blue);
    display: block;
    line-height: 1;
    background: linear-gradient(110deg, var(--hsc-blue) 0%, #0099ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-stat-box .lbl {
    font-size: 0.78rem;
    color: var(--hsc-muted);
    font-weight: 500;
    margin-top: 4px;
    display: block;
    line-height: 1.4;
}

/* =====================================================
   WHY CARDS — gradient top on hover
   ===================================================== */
.hsc-why-card {
    position: relative;
    overflow: hidden;
}

.hsc-why-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hsc-blue), #00c2ff);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hsc-why-card:hover::after {
    opacity: 1;
}

/* =====================================================
   SECTION HEADING: Security & Internet sections
   ===================================================== */
.security-section .section-heading,
.how-section .section-heading,
.why-section .section-heading,
.faq-section .section-heading {
    letter-spacing: -0.5px;
}

/* =====================================================
   OFFER SECTION — improved dark service cards
   ===================================================== */
.offer-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='1'%3E%3Cpath d='M0 60L60 0'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* =====================================================
   RESPONSIVE POLISH
   ===================================================== */
@media (max-width: 767px) {
    .hsc-step-v2-num {
        font-size: 2.8rem;
    }

    .hsc-step-v2 {
        padding: 1.5rem 1.25rem;
    }

    .brand-stat-box .num {
        font-size: 1.75rem;
    }

    .hsc-hero-trust-pills {
        display: none;
    }
}



@media (max-width: 575px) {
    .hsc-step-v2-cta {
        min-height: 180px;
    }
}

/* =====================================================
   FOOTER CONTACT v2 — compact icon + text rows
   ===================================================== */
.footer-contact-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.footer-contact-v2-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.fci-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(0, 87, 184, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: var(--hsc-blue);
    margin-top: 1px;
    border: 1px solid rgba(0, 87, 184, 0.18);
    transition: background 0.2s ease, color 0.2s ease;
}

.footer-contact-v2-item:hover .fci-icon {
    background: var(--hsc-blue);
    color: #fff;
}

.fci-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    line-height: 1;
    margin-bottom: 3px;
}

.fci-value {
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

a.fci-value:hover {
    color: #60c8ff;
}

/* Footer bottom link */
.footer-bottom-link {
    color: #64748b;
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s ease;
}

.footer-bottom-link:hover {
    color: #94a3b8;
}

/* Responsive: stack footer contact on very small screens */
@media (max-width: 380px) {
    .footer-contact-v2-item {
        gap: 0.65rem;
    }

    .fci-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}


/* =====================================================
   SVC2 — PREMIUM SERVICES SECTION
   ===================================================== */
.svc2-section {
    padding: 100px 0 80px;
    background: #f8fafc;
    position: relative;
    overflow: hidden;
}

.svc2-section::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0,87,184,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Header */
.svc2-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
}

.svc2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f0fe;
    color: var(--hsc-blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 18px;
}

.svc2-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #0f1c2e;
    line-height: 1.15;
    margin-bottom: 16px;
}

.svc2-grad {
    background: linear-gradient(135deg, var(--hsc-blue) 0%, #00b4d8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.svc2-subtitle {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* Grid */
.svc2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

@media (max-width: 991px) {
    .svc2-grid { grid-template-columns: 1fr; }
}

/* Card */
.svc2-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #e8edf3;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.svc2-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 24px 24px 0 0;
}

.svc2-card--security::before { background: linear-gradient(90deg, #0057b8, #3b82f6); }
.svc2-card--internet::before  { background: linear-gradient(90deg, #059669, #10b981); }

.svc2-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
}

.svc2-card-inner {
    padding: 36px 32px 32px;
    position: relative;
}

/* Number watermark */
.svc2-num {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: 'Sora', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    color: #f1f5f9;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

/* Icon */
.svc2-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.svc2-card:hover .svc2-icon-wrap { transform: scale(1.08); }

.svc2-icon--blue  { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.svc2-icon--green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }

/* Service label (e.g. "Service 01") */
.svc2-service-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
}

/* Card title */
.svc2-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f1c2e;
    margin-bottom: 12px;
    line-height: 1.3;
}

/* Card desc */
.svc2-card-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Feature groups */
.svc2-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}

.svc2-feat-group {}

.svc2-feat-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #94a3b8;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.svc2-feat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.svc2-feat-pills span {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    transition: all 0.2s ease;
    cursor: default;
}

.svc2-card--security:hover .svc2-feat-pills span { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.svc2-card--internet:hover .svc2-feat-pills span { border-color: #a7f3d0; background: #f0fdf4; color: #065f46; }

/* CTA link */
.svc2-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    background: #eff6ff;
    color: #1d4ed8;
}

.svc2-cta:hover {
    background: #1d4ed8;
    color: #fff;
    gap: 12px;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(29,78,216,0.25);
}

.svc2-cta--green { background: #f0fdf4; color: #065f46; }
.svc2-cta--green:hover {
    background: #059669;
    color: #fff;
    box-shadow: 0 8px 24px rgba(5,150,105,0.25);
}

/* Trust bar */
.svc2-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 56px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8edf3;
    padding: 20px 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.svc2-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 28px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

.svc2-trust-item i {
    font-size: 1.1rem;
    color: var(--hsc-blue);
}

.svc2-trust-divider {
    width: 1px;
    height: 28px;
    background: #e2e8f0;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .svc2-trust { padding: 16px; }
    .svc2-trust-item { padding: 8px 16px; font-size: 0.8rem; }
    .svc2-trust-divider:nth-child(4) { display: none; }
}


/* =====================================================
   CALL FAB (Floating Action Button)
   ===================================================== */
.hsc-call-fab {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 9999;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--hsc-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 24px rgba(0,87,184,0.35);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.hsc-call-fab:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 14px 32px rgba(0,87,184,0.45);
    color: #fff;
}
@media (max-width: 479px) {
    .hsc-call-fab { bottom: 20px; left: 16px; width: 52px; height: 52px; font-size: 1.25rem; }
}


/* =====================================================
   MERGED FROM: test.css → main.css
   Component styles, security cameras, internet pages,
   hero sliders, service cards, FAQ, CTA band, footer,
   and responsive breakpoints.
   ===================================================== */

/* ── RESET & BASE */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --blue: #1557c0;
    --blue-dk: #0d3d8f;
    --blue-lt: #dbeafe;
    --teal: #0899e6;
    --teal-dk: #0670a8;
    --teal-lt: #e0f4fd;
    --ink: #0d1117;
    --ink2: #374151;
    --muted: #6b7280;
    --bg: #f4f6fa;
    --surface: #fff;
    --border: #e4e8ef;
    --sh: 0 2px 12px rgba(13, 17, 23, .06);
    --sh-md: 0 8px 32px rgba(13, 17, 23, .1);
    --sh-lg: 0 24px 60px rgba(13, 17, 23, .14);
    --fh: 'Bricolage Grotesque', sans-serif;
    --fb: 'Inter', sans-serif;
}

body {
    font-family: var(--fb);
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

a {
    text-decoration: none;
    color: inherit
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

ul {
    list-style: none
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--fh);
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--ink)
}



/* ── REVEAL ANIMATIONS */
.rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s ease, transform .75s ease
}

.rv.in {
    opacity: 1;
    transform: none
}

.rv.d1 {
    transition-delay: .1s
}

.rv.d2 {
    transition-delay: .2s
}

.rv.d3 {
    transition-delay: .3s
}

/* ── CHIP LABELS */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: var(--blue-lt);
    color: var(--blue);
    border: 1px solid rgba(21, 87, 192, .2);
    margin-bottom: 1.2rem
}

.chip.grn {
    background: var(--teal-lt);
    color: var(--teal-dk);
    border-color: rgba(8, 153, 230, .25)
}

/* ── GRADIENT TEXT */
.grad {
    background: linear-gradient(110deg, var(--blue), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.grad-grn {
    background: linear-gradient(110deg, var(--teal), #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

/* ── TYPOGRAPHY */
.sec-h {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    margin-bottom: 1rem
}

.sec-p {
    font-size: 1rem;
    color: var(--ink2);
    line-height: 1.75;
    max-width: 560px
}

.text-center .sec-p {
    margin-left: auto;
    margin-right: auto
}

/* ── BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fb);
    font-size: .92rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 100px;
    border: none;
    transition: all .25s;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none
}

/* Force consistent color — blocks Bootstrap black text bleed */
.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none
}

/* PRIMARY — Blue (used on dark backgrounds) */
.btn-blue {
    background: var(--blue);
    color: #fff
}

.btn-blue:hover,
.btn-blue:focus {
    background: var(--blue-dk);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(21, 87, 192, .3)
}

/* PRIMARY ALT — White (slider CTA, on dark/image backgrounds) */
.btn-wht {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .13)
}

.btn-wht:hover,
.btn-wht:focus {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(21, 87, 192, .25)
}

/* PRIMARY GREEN — Teal (internet/wireless CTAs) */
.btn-grn {
    background: var(--teal);
    color: #fff
}

.btn-grn:hover,
.btn-grn:focus {
    background: var(--teal-dk);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(8, 153, 230, .35)
}

/* SECONDARY — Outlined (light backgrounds) */
.btn-out {
    background: transparent;
    color: var(--blue);
    border: 1.5px solid var(--blue);
    box-shadow: none
}

.btn-out:hover,
.btn-out:focus {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(21, 87, 192, .2)
}

/* GHOST — Semi-transparent (on dark/gradient backgrounds) */
.btn-ghost {
    background: rgba(255, 255, 255, .13);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .28)
}

.btn-ghost:hover,
.btn-ghost:focus {
    background: rgba(255, 255, 255, .25);
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    transform: translateY(-2px)
}

/* PHONE — Subtle transparent (CTA band) */
.btn-phone {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .22)
}

.btn-phone:hover,
.btn-phone:focus {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
    transform: translateY(-2px)
}

.a-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--blue);
    transition: gap .2s
}

.a-link:hover {
    gap: 10px
}

.a-link.grn {
    color: var(--teal)
}

/* ── CONTAINER */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem
}

/* ── NAV */
.hsc-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04)
}

.nav-logo {
    height: 44px;
    width: auto
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem
}

.nav-link {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink2);
    transition: color .2s
}

.nav-link:hover {
    color: var(--blue)
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: var(--blue);
    padding: 10px 24px;
    border-radius: 100px;
    transition: all .25s
}

.nav-cta:hover {
    background: var(--blue-dk);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(21, 87, 192, .25)
}

@media(max-width:767px) {
    .hsc-nav {
        padding: 0 1.5rem;
        height: 68px
    }

    .nav-links {
        gap: 1rem
    }

    .nav-link {
        display: none
    }

    .nav-logo {
        height: 36px
    }
}

/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
    position: relative;
    height: 75vh;
    min-height: 500px;
    max-height: 680px;
    overflow: hidden;
    margin-top: 0;
    background: #0a0f1e
}

@media(max-width:767px) {
    .hero {
        height: 480px;
        min-height: 480px;
        max-height: 520px;
    }

    .hero-track {
        height: 100%;
    }

    .hero-slide {
        height: 100%;
        min-height: 480px;
    }
}

/* Track — only translateX, no scale here */
.hero-track {
    display: flex;
    width: 400%;
    height: 100%;
    transition: transform .9s cubic-bezier(.77, 0, .175, 1);
    will-change: transform;
    background: #0a0f1e
}

/* Slide — plain container, NO transform so flex layout is stable */
.hero-slide {
    flex: 0 0 25%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #0a0f1e;
    isolation: isolate
}

/* Inner background div — Ken Burns via @keyframes (survives GPU layer eviction) */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.08) translate3d(0, 0, 0);
    z-index: 0
}

/* Active slide: start the Ken Burns animation */
.hero-slide.on .hero-slide-bg {
    animation: kb-zoom 8s ease forwards
}

@keyframes kb-zoom {
    from {
        transform: scale(1.08) translate3d(0, 0, 0)
    }

    to {
        transform: scale(1) translate3d(0, 0, 0)
    }
}

/* Gradient overlay */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg,
            rgba(5, 10, 24, .88) 0%,
            rgba(5, 10, 24, .52) 50%,
            rgba(5, 10, 24, .12) 100%)
}

@media(max-width:767px) {
    .hero-slide::after {
        background: linear-gradient(180deg,
                rgba(5, 10, 24, .55) 0%,
                rgba(5, 10, 24, .92) 60%,
                rgba(5, 10, 24, .98) 100%)
    }
}

/* Content layer sits above overlay */
.hero-body {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding-bottom: 3.5rem
}

.hero-body .container {
    text-align: left;
    width: 100%
}

@media(max-width:767px) {
    .hero-body {
        align-items: center;
        padding: 2rem 0 3.5rem;
    }

    .hero-body .container {
        text-align: center;
        padding: 0 1.25rem;
    }
}

.h-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--blue-lt);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 100px;
    padding: .3rem .85rem;
    margin-bottom: 1.1rem
}

.h-title {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -.03em;
    margin-bottom: 1.1rem;
    max-width: 820px
}

.h-sub {
    font-size: clamp(.98rem, 1.8vw, 1.15rem);
    color: rgba(255, 255, 255, .82);
    max-width: 520px;
    line-height: 1.65;
    margin-bottom: 2.2rem
}

@media(max-width:767px) {
    .h-title {
        font-size: 2.2rem;
        line-height: 1.12;
        margin-bottom: .85rem
    }

    .h-sub {
        font-size: .97rem;
        line-height: 1.55;
        margin-bottom: 1.6rem;
        max-width: 100%
    }

    .hero-body .btn {
        width: 100%;
        justify-content: center
    }
}

.hero-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 20;
    background: rgba(255, 255, 255, .1)
}

.hero-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--blue), var(--teal));
    transition: width 6s linear
}

.hero-dots {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 10px;
    align-items: center
}

.hdot {
    width: 9px;
    height: 9px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .3);
    border: none;
    transition: all .35s;
    padding: 0;
    cursor: pointer
}

.hdot.on {
    width: 32px;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, .4)
}

.hero-count {
    position: absolute;
    bottom: 1.85rem;
    right: 2rem;
    z-index: 20;
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .35);
    letter-spacing: .06em;
    font-family: var(--fh)
}

/* ── TRUST STRIP */
.trust {
    background: var(--surface);
    border-bottom: 1px solid var(--border)
}

.trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

@media(max-width:767px) {
    .trust-row {
        grid-template-columns: 1fr 1fr
    }
}

.trust-col {
    padding: 2rem 1.5rem;
    border-right: 1px solid var(--border);
    text-align: center
}

.trust-col:last-child {
    border-right: none
}

@media(max-width:767px) {
    .trust-col {
        border-bottom: 1px solid var(--border);
        border-right: none
    }

    .trust-col:nth-child(odd) {
        border-right: 1px solid var(--border)
    }
}

.trust-val {
    font-family: var(--fh);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.trust-lbl {
    font-size: .82rem;
    font-weight: 600;
    color: var(--blue);
    margin: .2rem 0 .1rem
}

.trust-note {
    font-size: .72rem;
    color: var(--muted)
}

/* ── SECTIONS */
.sec {
    padding: 5.5rem 0
}

.sec-wht {
    background: var(--surface)
}

/* ── RICH DARK SERVICES BG */
.sec-rich {
    background: #060d1f;
    background-image:
        radial-gradient(ellipse at 15% 50%, rgba(8, 153, 230, .18) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(21, 87, 192, .2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(8, 153, 230, .1) 0%, transparent 40%);
    position: relative;
}

.sec-rich .chip {
    background: rgba(8, 153, 230, .15);
    color: #7dd3fc;
    border-color: rgba(8, 153, 230, .3)
}

.sec-rich .sec-h {
    color: #f1f5f9
}

.sec-rich .grad {
    background: linear-gradient(110deg, #60a5fa, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.sec-rich .sec-p {
    color: rgba(255, 255, 255, .6)
}

/* Dark glassmorphism service cards */
.sec-rich .svc-card {
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .08);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.sec-rich .svc-card:hover {
    background: rgba(255, 255, 255, .09);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .15);
    border-color: rgba(8, 153, 230, .35);
}

.sec-rich .svc-card h3 {
    color: #f1f5f9
}

.sec-rich .svc-card>p {
    color: rgba(255, 255, 255, .65)
}

.sec-rich .svc-tag {
    color: rgba(255, 255, 255, .4)
}

.sec-rich .svc-ico.ico-b {
    background: rgba(21, 87, 192, .3);
    color: #93c5fd
}

.sec-rich .svc-ico.ico-g {
    background: rgba(8, 153, 230, .25);
    color: #7dd3fc
}

.sec-rich .chklist li {
    color: rgba(255, 255, 255, .75)
}

.sec-rich .chklist li i {
    color: #38bdf8
}

.sec-rich .chklist.grn li i {
    color: #38bdf8
}

.sec-rich .a-link {
    color: #60a5fa
}

.sec-rich .a-link:hover {
    color: #93c5fd
}

.sec-rich .a-link.grn {
    color: #38bdf8
}

/* Force grn card to match dark glassmorphism — no white gradient */
.sec-rich .svc-card.grn {
    background: rgba(255, 255, 255, .05) !important;
    background-image: linear-gradient(145deg, #054162 0%, #0899e6 100%) !important;
    border-color: rgba(255, 255, 255, .08);
}

.sec-rich .svc-card.grn:hover {
    border-color: rgba(8, 153, 230, .35) !important;
    background: rgba(255, 255, 255, .09) !important;
}


/* ── SERVICE CARDS GRID */
.svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem
}

@media(max-width:991px) {
    .svc-grid {
        grid-template-columns: 1fr
    }
}

/* ── Dark gradient card 1 (Security) */
.svc-card {
    background: linear-gradient(145deg, #0d1b35 0%, #1a3464 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 2.5rem 2.25rem;
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(13, 27, 53, .35)
}

.svc-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease
}

/* ── Teal gradient card 2 (Internet) */
.svc-card.grn {
    background: linear-gradient(145deg, #054162 0%, #0899e6 100%) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 8px 32px rgba(8, 153, 230, .3)
}

.svc-card.grn::after {
    background: linear-gradient(90deg, #38bdf8, #fff)
}

.svc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(13, 27, 53, .4)
}

.svc-card.grn:hover {
    box-shadow: 0 24px 50px rgba(8, 153, 230, .4) !important
}

.svc-card:hover::after {
    transform: scaleX(1)
}

/* Text overrides for dark cards */
.svc-card h3 {
    color: #f1f5f9;
    font-size: 1.5rem;
    margin-bottom: .8rem
}

.svc-card>p {
    color: rgba(255, 255, 255, .7);
    font-size: .97rem;
    line-height: 1.65;
    margin-bottom: 1.75rem
}

.svc-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin-bottom: .7rem;
    display: block
}

.svc-ico {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 1.6rem;
    flex-shrink: 0
}

.ico-b {
    background: rgba(255, 255, 255, .12);
    color: #93c5fd
}

.ico-g {
    background: rgba(255, 255, 255, .2);
    color: #fff
}

.chklist {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: 2rem;
    flex-grow: 1
}

.chklist li {
    display: flex;
    gap: 10px;
    font-size: .94rem;
    color: rgba(255, 255, 255, .8);
    align-items: flex-start;
    line-height: 1.5
}

.chklist li i {
    font-size: 1.05rem;
    margin-top: 1px;
    flex-shrink: 0;
    color: #60a5fa
}

.chklist.grn li i {
    color: rgba(255, 255, 255, .9)
}

/* a-link overrides ONLY inside dark service cards */
.svc-card .a-link {
    color: #93c5fd
}

.svc-card .a-link:hover {
    gap: 10px;
    color: #fff
}

.svc-card .a-link.grn {
    color: rgba(255, 255, 255, .9)
}

.svc-card .a-link.grn:hover {
    color: #fff
}

/* ── RICH PROCESS UI */
.proc-rich {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 4rem;
    align-items: center
}

@media(max-width:991px) {
    .proc-rich {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }
}

.proc-list {
    display: flex;
    flex-direction: column;
    gap: 0
}

.proc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 1.5rem 2rem 2rem;
    border-left: 3px solid var(--border);
    cursor: pointer;
    transition: all .3s ease;
    position: relative
}

.proc-item::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--blue);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s ease
}

.proc-item.active::before {
    transform: scaleY(1)
}

.proc-item:hover {
    background: var(--bg)
}

.proc-item.active {
    background: var(--surface);
    box-shadow: var(--sh-md);
    border-radius: 0 16px 16px 0;
    border-left-color: transparent;
    z-index: 1
}

.pi-main {
    display: flex;
    gap: 1.5rem;
    flex-grow: 1;
    align-items: flex-start
}

.pi-num {
    font-family: var(--fh);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--muted);
    transition: color .3s;
    margin-top: -3px
}

.proc-item.active .pi-num {
    color: var(--blue)
}

.pi-text h4 {
    font-family: var(--fh);
    font-size: 1.3rem;
    margin-bottom: .5rem;
    color: var(--ink);
    transition: color .3s
}

.proc-item.active .pi-text h4 {
    color: var(--blue)
}

.pi-text p {
    font-size: .95rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    display: none
}

.proc-item.active .pi-text p {
    display: block;
    animation: fadeUp .4s ease forwards
}

.pi-arrow {
    font-size: 1.2rem;
    color: var(--muted);
    opacity: 0;
    transform: translateX(-10px);
    transition: all .3s ease
}

.proc-item:hover .pi-arrow {
    opacity: .5;
    transform: translateX(-4px)
}

.proc-item.active .pi-arrow {
    opacity: 1;
    color: var(--blue);
    transform: translateX(0)
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.proc-visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: var(--sh-lg);
    background: var(--border)
}

.proc-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .4s ease
}

.proc-cta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 2rem 2rem;
    background: linear-gradient(to top, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0.6) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap
}

.pc-text {
    color: #fff;
    font-family: var(--fh);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3)
}

.pc-text span {
    display: block;
    font-size: .9rem;
    font-family: var(--fb);
    color: rgba(255, 255, 255, .8);
    font-weight: 400;
    margin-top: 5px;
    text-shadow: none
}

@media(max-width:991px) {
    .proc-visual {
        aspect-ratio: 16/10;
        order: -1
    }

    .proc-item {
        padding: 1.5rem 1rem
    }

    .proc-cta {
        padding: 2rem 1.5rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem
    }
}

/* ── DEEP DIVE SECTIONS */
.dd-layout {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 5rem;
    align-items: center
}

.dd-layout.flip {
    grid-template-columns: 6fr 5fr
}

.dd-layout.flip .dd-text {
    order: 2
}

.dd-layout.flip .dd-photo {
    order: 1
}

@media(max-width:991px) {

    .dd-layout,
    .dd-layout.flip {
        grid-template-columns: 1fr;
        gap: 4rem
    }

    .dd-layout.flip .dd-text,
    .dd-layout.flip .dd-photo {
        order: unset
    }
}

.dd-photo {
    position: relative;
    z-index: 1;
}

.dd-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
    transition: transform .5s ease;
}

.dd-photo:hover img {
    transform: scale(1.03);
}

.dd-badge {
    position: absolute;
    bottom: -2rem;
    left: 2.5rem;
    right: 2.5rem;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 2;
}

.dd-photo:hover .dd-badge {
    transform: translateY(-5px);
}

.dd-badge .bico {
    font-size: 1.8rem;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(21, 87, 192, 0.25);
}

.dd-badge .bico.grn {
    background: linear-gradient(135deg, var(--teal), #10b981);
    box-shadow: 0 8px 20px rgba(8, 153, 230, 0.25);
}

.dd-badge strong {
    font-family: var(--fh);
    font-size: 1rem;
    display: block;
    color: var(--ink);
    font-weight: 700
}

.dd-badge span {
    font-size: .82rem;
    color: var(--muted)
}

.tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2.5rem
}

.tile {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%);
    border: 1px solid rgba(21, 87, 192, 0.08);
    border-radius: 20px;
    padding: 1.25rem;
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .02);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(21, 87, 192, 0.4), rgba(8, 153, 230, 0.4));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.tile.grn::before {
    background: linear-gradient(135deg, rgba(8, 153, 230, 0.4), rgba(34, 197, 94, 0.4));
}

.tile:hover::before {
    opacity: 1;
}

.tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(21, 87, 192, .08);
    background: #fff;
}

.tile.grn:hover {
    box-shadow: 0 15px 35px rgba(8, 153, 230, .08);
}

.tile-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: linear-gradient(135deg, rgba(21, 87, 192, 0.06), rgba(8, 153, 230, 0.06));
    color: var(--blue);
    margin-bottom: 1rem;
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(21, 87, 192, 0.1);
}

.tile:hover .tile-ico {
    background: linear-gradient(135deg, var(--blue), var(--teal));
    color: #fff;
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 8px 20px rgba(21, 87, 192, .25);
    border-color: transparent;
}

.tile-ico.grn {
    background: linear-gradient(135deg, rgba(8, 153, 230, 0.06), rgba(34, 197, 94, 0.06));
    color: var(--teal);
    border-color: rgba(8, 153, 230, 0.1);
}

.tile.grn:hover .tile-ico {
    background: linear-gradient(135deg, var(--teal), #10b981);
    color: #fff;
    box-shadow: 0 8px 20px rgba(8, 153, 230, .25);
    border-color: transparent;
}

.tile h5 {
    font-family: var(--fh);
    font-size: 1rem;
    margin-bottom: .3rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.tile p {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0
}

.dd-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

@media(max-width:575px) {
    .tiles {
        grid-template-columns: 1fr
    }

    .dd-badge {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 10px
    }
}

/* ── INTERACTIVE IMAGE CARDS (EXPERT UI) ── */
.image-why-card {
    position: relative;
    height: 340px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer
}

.iwc-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
    transform: scale(1.02)
}

.iwc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .95) 0%, rgba(15, 23, 42, .4) 50%, rgba(15, 23, 42, .1) 100%);
    transition: all .5s ease
}

.image-why-card:hover .iwc-bg {
    transform: scale(1.1)
}

.image-why-card:hover .iwc-overlay {
    background: linear-gradient(to top, rgba(15, 23, 42, .95) 0%, rgba(21, 87, 192, .6) 100%)
}

.iwc-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%
}

.iwc-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all .5s cubic-bezier(.2, .8, .2, 1);
    transform: translateY(20px);
    border: 1px solid rgba(255, 255, 255, .2)
}

.iwc-text-wrap {
    transition: all .5s cubic-bezier(.2, .8, .2, 1);
    transform: translateY(15px)
}

.image-why-card:hover .iwc-icon {
    transform: translateY(0) scale(1.1);
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .3)
}

.image-why-card:hover .iwc-text-wrap {
    transform: translateY(0)
}

.iwc-text-wrap h4 {
    font-family: var(--fh);
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: .5rem;
    color: #fff;
    letter-spacing: -.5px
}

.iwc-text-wrap p {
    font-size: 1rem;
    color: rgba(255, 255, 255, .7);
    line-height: 1.6;
    margin: 0;
    opacity: .8;
    transition: opacity .5s
}

.image-why-card:hover .iwc-text-wrap p {
    opacity: 1;
    color: rgba(255, 255, 255, .95)
}

@media(max-width:767px) {
    .image-why-card {
        height: 300px
    }

    .iwc-content {
        padding: 1.75rem
    }
}

/* ── FAQ */
.faq-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5rem;
    align-items: start
}

@media(max-width:991px) {
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }
}

details {
    border-bottom: 1px solid var(--border)
}

details:first-child {
    border-top: 1px solid var(--border)
}

summary {
    font-family: var(--fh);
    font-size: 1.08rem;
    font-weight: 600;
    padding: 1.25rem 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ink);
    gap: 1rem;
    user-select: none
}

summary::-webkit-details-marker {
    display: none
}

summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--muted);
    transition: transform .3s;
    flex-shrink: 0;
    line-height: 1
}

details[open] summary {
    color: var(--blue)
}

details[open] summary::after {
    transform: rotate(45deg);
    color: var(--blue)
}

.faq-ans {
    font-size: .97rem;
    color: var(--ink2);
    line-height: 1.8;
    padding: 0 2rem 1.5rem 0
}

/* ── CTA BAND */
.cta-band {
    background: #0a1628;
    border-radius: 28px;
    padding: 5rem 3rem;
    text-align: center;
    margin-bottom: 4rem;
    background-image: radial-gradient(ellipse at 15% 60%, rgba(21, 87, 192, .35) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 40%, rgba(14, 165, 233, .2) 0%, transparent 55%)
}

.cta-band h2 {
    font-family: var(--fh);
    color: #fff;
    font-size: clamp(1.9rem, 3.5vw, 2.9rem);
    margin-bottom: .8rem
}

.cta-band>p {
    color: rgba(255, 255, 255, .6);
    font-size: 1rem;
    max-width: 440px;
    margin: 0 auto 2.75rem;
    line-height: 1.7
}

.cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center
}

@media(max-width:575px) {
    .cta-band {
        padding: 3.5rem 1.75rem;
        border-radius: 20px
    }
}

/* ── CUSTOM FOOTER */
.hsc-footer {
    background: #040914;
    color: rgba(255, 255, 255, .6);
    padding: 6rem 2rem 2rem;
    position: relative;
    overflow: hidden;
    margin-top: 0
}

.hsc-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
}

.hf-top {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    margin-bottom: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto
}

.hf-brand {
    flex: 1;
    min-width: 300px;
    max-width: 400px
}

.hf-logo {
    height: 44px;
    width: auto;
    margin-bottom: 1.5rem
}

.hf-desc {
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem
}

.hf-social {
    display: flex;
    gap: 1rem
}

.hf-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    transition: all .3s;
    text-decoration: none
}

.hf-social a:hover {
    background: var(--blue);
    transform: translateY(-3px);
    color: #fff
}

.hf-links-group {
    display: flex;
    gap: 4rem;
    flex: 1;
    min-width: 300px
}

.hf-col {
    flex: 1
}

.hf-col h4,
.hf-contact h4 {
    color: #fff;
    font-family: var(--fh);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    font-weight: 700
}

.hf-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.hf-col a {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    transition: color .3s;
    font-size: .9rem
}

.hf-col a:hover {
    color: #fff
}

.hf-contact {
    flex: 1;
    min-width: 280px
}

.hfc-items {
    display: flex;
    flex-direction: column;
    gap: 1.2rem
}

.hfc-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem
}

.hfc-row i {
    color: var(--blue);
    font-size: 1.2rem;
    margin-top: 2px
}

.hfc-row span {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 2px
}

.hfc-row a,
.hfc-row strong {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: color .3s;
    font-size: .95rem
}

.hfc-row a:hover {
    color: var(--blue-lt)
}

.hf-legal {
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin: 0 auto 2rem;
    max-width: 1200px
}

.hf-legal p {
    font-size: .75rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .4);
    margin: 0;
    text-align: justify
}

.hf-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .85rem;
    max-width: 1200px;
    margin: 0 auto
}

.hfb-right {
    display: flex;
    gap: 1.5rem
}

.hfb-right a {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    transition: color .3s
}

.hfb-right a:hover {
    color: #fff
}

@media(max-width:991px) {
    .hf-links-group {
        flex-direction: column;
        gap: 2.5rem
    }

    .hf-top {
        gap: 3rem
    }

    .hf-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center
    }
}

/* ── FAB CALL BUTTON */
.fab-call {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 8000;
    display: flex;
    align-items: center;
    gap: 0;
    background: #0899e6;
    color: #fff;
    border-radius: 100px;
    padding: 0;
    height: 56px;
    width: 220px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(8, 153, 230, .4);
    transition: width .4s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
    text-decoration: none;
    cursor: pointer
}

.fab-call i {
    font-size: 1.35rem;
    flex-shrink: 0;
    width: 56px;
    text-align: center;
    line-height: 56px
}

.fab-call-label {
    font-family: var(--fb);
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 1;
    max-width: 160px;
    overflow: hidden;
    transition: opacity .3s, max-width .4s cubic-bezier(.2, .8, .2, 1);
    padding-right: 1.25rem
}

.fab-call:hover {
    box-shadow: 0 12px 32px rgba(8, 153, 230, .5)
}

.fab-call::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 100px;
    border: 2px solid rgba(8, 153, 230, .4);
    animation: fab-pulse 2.4s ease-out infinite;
    pointer-events: none
}

@keyframes fab-pulse {
    0% {
        transform: scale(1);
        opacity: .8
    }

    70% {
        transform: scale(1.35);
        opacity: 0
    }

    100% {
        transform: scale(1.35);
        opacity: 0
    }
}

/* ── SCROLL TO TOP */
.fab-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 8000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1557c0;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s, transform .3s, background .2s, box-shadow .2s;
    box-shadow: 0 6px 20px rgba(21, 87, 192, .35);
    pointer-events: none
}

.fab-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto
}

.fab-top:hover {
    background: var(--blue-dk);
    box-shadow: 0 10px 28px rgba(21, 87, 192, .45);
    transform: translateY(-3px)
}

@media(max-width:767px) {
    .fab-call {
        bottom: 1.25rem;
        left: 1.25rem;
        height: 46px;
        width: 190px;
        border-radius: 100px;
    }

    .fab-call-label {
        display: inline-block;
        opacity: 1;
        max-width: 140px;
        font-size: 0.8rem;
        padding-right: 1rem;
    }

    .fab-call i {
        width: 46px;
        line-height: 46px;
        font-size: 1.1rem
    }

    .fab-top {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 44px;
        height: 44px;
        font-size: 1rem
    }
}

/* ── SEC HEAD helper */
.sec-head {
    max-width: 600px;
    margin-bottom: 3.5rem
}

.sec-small {
    max-width: 520px;
    margin-bottom: 3.5rem
}


/* ════════════════════════════════════════
   PRODUCTION-READY MOBILE FIXES
   ════════════════════════════════════════ */

/* ── Tablet (≤991px) ── */
@media(max-width:991px) {

    /* Sections */
    .sec {
        padding: 4rem 0
    }

    /* Service cards */
    .svc-grid {
        grid-template-columns: 1fr
    }

    /* DD badge — avoid overflow on split layout */
    .dd-badge {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.25rem;
        padding: 1rem 1.25rem;
        gap: 12px
    }

    .dd-badge strong {
        font-size: .95rem
    }

    /* Why cards — full height on tablet */
    .image-why-card {
        height: 300px
    }

    /* Tiles stay 2-col on tablet */
    .tiles {
        grid-template-columns: repeat(2, 1fr)
    }

    /* CTA band */
    .cta-btns {
        flex-direction: column;
        align-items: center
    }

    /* Footer links */
    .hf-links-group {
        flex-direction: column;
        gap: 2rem
    }

    .hf-top {
        gap: 2.5rem
    }

    .hf-bottom {
        flex-direction: column;
        text-align: center
    }
}

/* ── Mobile (≤767px) ── */
@media(max-width:767px) {

    /* Base */
    .container {
        padding: 0 1.25rem
    }

    .sec {
        padding: 3.5rem 0
    }

    /* Typography scale-down */
    .sec-h {
        font-size: 1.75rem !important;
        letter-spacing: -.02em
    }

    .sec-p {
        font-size: .95rem
    }

    h2.sec-h {
        margin-bottom: .85rem
    }

    /* Trust strip — 2 cols */
    .trust-row {
        grid-template-columns: 1fr 1fr
    }

    .trust-col {
        padding: 1.5rem 1rem
    }

    .trust-val {
        font-size: 1.4rem
    }

    /* Service cards */
    .svc-card {
        padding: 2rem 1.5rem
    }

    .svc-grid {
        gap: 1.25rem
    }

    /* Process section */
    .proc-rich {
        gap: 2rem
    }

    .proc-item {
        padding: 1.25rem 1rem
    }

    .pi-text h4 {
        font-size: 1.1rem
    }

    .proc-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.75rem 1.5rem
    }

    .pc-text {
        font-size: 1.1rem
    }

    /* Deep Dive */
    .dd-layout,
    .dd-layout.flip {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .dd-layout.flip .dd-text,
    .dd-layout.flip .dd-photo {
        order: unset
    }

    .dd-text .sec-h {
        font-size: 1.65rem
    }

    .tiles {
        grid-template-columns: 1fr 1fr;
        gap: .85rem
    }

    .tile {
        padding: 1.15rem
    }

    .tile-ico {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 1rem
    }

    .dd-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start
    }

    .dd-actions .btn {
        width: 100%;
        justify-content: center
    }

    .dd-badge {
        position: static;
        margin-top: 1.5rem;
        border-radius: 14px;
        padding: 1rem 1.25rem;
        gap: 12px;
        background: rgba(255, 255, 255, .97)
    }

    .dd-photo {
        aspect-ratio: 16/10
    }

    /* Why Section */
    #why-us .container {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    #why-us h2 {
        font-size: 1.75rem !important
    }

    .image-why-card {
        height: 260px
    }

    .iwc-content {
        padding: 1.5rem
    }

    .iwc-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        margin-bottom: 1rem;
        transform: none
    }

    .iwc-text-wrap {
        transform: none
    }

    .iwc-text-wrap h4 {
        font-size: 1.2rem
    }

    .iwc-text-wrap p {
        font-size: .9rem;
        opacity: 1;
        color: rgba(255, 255, 255, .85)
    }

    /* FAQ */
    .faq-layout {
        display: flex;
        flex-direction: column;
        gap: 2rem
    }

    .faq-left {
        display: contents;
    }

    .faq-header {
        order: 1;
    }

    .faq-layout>div:last-child {
        order: 2;
    }

    .faq-contact {
        order: 3;
        margin-top: 1rem;
    }

    summary {
        font-size: 1rem;
        padding: 1rem 0
    }

    .faq-ans {
        font-size: .93rem;
        padding-bottom: 1.25rem
    }

    /* CTA Band */
    .cta-band {
        padding: 3rem 1.5rem;
        border-radius: 18px
    }

    .cta-band h2 {
        font-size: 1.7rem
    }

    .cta-btns {
        flex-direction: column;
        align-items: center
    }

    .cta-btns .btn {
        width: 100%;
        justify-content: center
    }

    /* Footer */
    .hf-brand {
        min-width: unset;
        max-width: 100%
    }

    .hsc-footer {
        padding: 4rem 1.5rem 2rem
    }

    .hf-top {
        flex-direction: column;
        gap: 2.5rem
    }

    .hf-links-group {
        flex-direction: column;
        gap: 2rem;
        min-width: unset
    }

    .hf-bottom {
        flex-direction: column;
        text-align: center;
        gap: .75rem
    }

    .hfb-right {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem
    }

    /* Buttons */
    .btn {
        font-size: .88rem;
        padding: 11px 22px
    }
}

/* ── Small Mobile (≤480px) ── */
@media(max-width:480px) {
    .tiles {
        grid-template-columns: 1fr
    }

    .tile {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem
    }

    .tile-ico {
        flex-shrink: 0;
        margin-bottom: 0
    }

    .trust-row {
        grid-template-columns: 1fr
    }

    .trust-col {
        border-right: none !important;
        border-bottom: 1px solid var(--border)
    }

    .trust-col:last-child {
        border-bottom: none
    }

    .image-why-card {
        height: 240px
    }

    .iwc-text-wrap h4 {
        font-size: 1.1rem
    }

    .iwc-text-wrap p {
        display: none
    }

    .hero-count {
        display: none
    }

    .proc-visual {
        aspect-ratio: 4/3
    }

    .hf-social a {
        width: 36px;
        height: 36px;
        font-size: .9rem
    }

    .hf-col h4 {
        font-size: 1rem;
        margin-bottom: 1rem
    }
}

/* ── Touch Device: Disable hover effects that feel broken ── */
@media(hover:none) {
    .image-why-card .iwc-icon {
        transform: none
    }

    .image-why-card .iwc-text-wrap {
        transform: none
    }

    .image-why-card:hover .iwc-bg {
        transform: scale(1.02)
    }

    .tile:hover {
        transform: none;
        box-shadow: none
    }

    .svc-card:hover {
        transform: none;
        box-shadow: var(--sh)
    }

    .svc-card:hover::after {
        transform: scaleX(1)
    }

    .proc-item:hover {
        background: none
    }
}

/* ══════════════════════════════════════
   PARTNER LOGOS STRIP
══════════════════════════════════════ */
.partner-logos {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 1.6rem 0;
}

.pl-label {
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-bottom: 1.1rem;
}

.pl-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem 2.5rem;
}

.pl-badge {
    font-family: var(--fh);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    opacity: .55;
    transition: opacity .25s;
    cursor: default;
    user-select: none;
}

.pl-badge:hover {
    opacity: 1;
}

@media(max-width:600px) {
    .pl-row {
        gap: .6rem 1.5rem;
    }

    .pl-badge {
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════ */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

@media(max-width:991px) {
    .testi-grid {
        grid-template-columns: 1fr;
    }
}

.testi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem 1.75rem 1.6rem;
    box-shadow: var(--sh);
    position: relative;
    transition: transform .3s, box-shadow .3s;
    display: flex;
    flex-direction: column;
}

.testi-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-md);
}

.testi-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 1.1rem;
    color: #f59e0b;
    font-size: .9rem;
}

.testi-quote {
    position: relative;
    flex: 1;
    margin-bottom: 1.5rem;
}

.testi-qt {
    display: block;
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: .6;
    color: var(--blue-lt);
    margin-bottom: .4rem;
    pointer-events: none;
}

.testi-body {
    font-size: .95rem;
    line-height: 1.72;
    color: var(--ink2);
}

.testi-author {
    display: flex;
    align-items: center;
    gap: .875rem;
    border-top: 1px solid var(--border);
    padding-top: 1.1rem;
}

.testi-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    flex-shrink: 0;
}

.testi-name {
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink);
}

.testi-loc {
    font-size: .76rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}

.testi-badge {
    margin-left: auto;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--blue-lt);
    color: var(--blue);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   QUOTE FORM
══════════════════════════════════════ */
.quote-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

@media(max-width:991px) {
    .quote-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.quote-text .sec-h {
    margin-bottom: .9rem;
}

.quote-text .sec-p {
    margin-bottom: 1.75rem;
}

.quote-perks {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.quote-perks li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .93rem;
    font-weight: 500;
    color: var(--ink2);
}

.quote-perks li i {
    color: var(--blue);
    font-size: 1rem;
    flex-shrink: 0;
}

.quote-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2.25rem 2rem 2rem;
    box-shadow: var(--sh-lg);
}

@media(max-width:600px) {
    .quote-form {
        padding: 1.5rem 1.25rem;
    }
}

.qf-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.qf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media(max-width:600px) {
    .qf-row {
        gap: .6rem;
    }
}

.qf-group {
    margin-bottom: 1rem;
}

.qf-group label {
    display: block;
    font-size: .79rem;
    font-weight: 600;
    color: var(--ink2);
    margin-bottom: .4rem;
    letter-spacing: .01em;
}

.qf-group input,
.qf-group select {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: .7rem 1rem;
    font-size: .95rem;
    font-family: var(--fb);
    color: var(--ink);
    background: var(--bg);
    transition: border-color .2s, background .2s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

@media(max-width:600px) {
    .qf-group label {
        font-size: .72rem;
    }

    .qf-group input,
    .qf-group select {
        padding: .6rem .75rem;
        font-size: .88rem;
    }
}

.qf-group input:focus,
.qf-group select:focus {
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(21, 87, 192, .1);
}

.qf-submit {
    width: 100%;
    justify-content: center;
    padding: .9rem;
    font-size: 1rem;
    border-radius: 10px;
    margin-top: .5rem;
}

.qf-note {
    text-align: center;
    font-size: .73rem;
    color: var(--muted);
    margin-top: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* ── Legal disclaimer below submit button */
.qf-legal {
    margin-top: 1rem;
    padding: .85rem 1rem;
    background: #f8faff;
    border: 1px solid #e2e8f4;
    border-radius: 8px;
    font-size: .69rem;
    color: #6b7280;
    line-height: 1.55;
}

.qf-legal ol {
    margin: .4rem 0 0 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.qf-legal ol li {
    padding-left: .15rem;
}

.qf-legal a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qf-legal a:hover {
    color: var(--blue-dk, #0f40a0);
}

/* ── Quote Form Alerts */
.qf-alert-success,
.qf-alert-error {
    border-radius: 10px;
    padding: .85rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.qf-alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1.5px solid #bbf7d0;
}

.qf-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1.5px solid #fecaca;
}

/* ── Consent Checkbox */
.qf-consent {
    margin-bottom: 1rem;
}

.qf-consent-label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
}

.qf-consent-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--blue);
    cursor: pointer;
}

.qf-consent-label span {
    font-size: .76rem;
    color: var(--muted);
    line-height: 1.55;
}

/* ── Per-field validation states */
.qf-has-error input,
.qf-has-error select,
.qf-has-error.qf-consent {
    border-color: #ef4444 !important;
    background: #fff5f5;
}

.qf-has-error input:focus,
.qf-has-error select:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
    border-color: #ef4444 !important;
}

.qf-field-error {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .74rem;
    font-weight: 600;
    color: #dc2626;
    margin-top: .35rem;
}

.qf-field-error i {
    font-size: .8rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — complete redesign
   ═══════════════════════════════════════════════════════════ */

/* Hero */
.ct-hero {
    background: linear-gradient(135deg, #0a0f1e 0%, #0f1e3a 100%);
    padding: 7rem 0 4rem;
    text-align: center;
}

.ct-hero-h {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.12;
    letter-spacing: -.025em;
    margin-bottom: 1.1rem;
}

.ct-hero-p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .72);
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.65;
}

.ct-hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .65rem;
}

.ct-hero-badges span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
    font-weight: 600;
    border-radius: 100px;
    padding: .4rem 1rem;
}

.ct-hero-badges i {
    color: var(--blue-lt);
}

/* Body layout */
.ct-body {
    background: #f4f6fa;
    padding: 4rem 0 5rem;
}

.ct-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: start;
}

@media(max-width:1024px) {
    .ct-layout {
        grid-template-columns: 280px 1fr;
        gap: 2rem;
    }
}

@media(max-width:767px) {
    .ct-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .ct-hero {
        padding: 6rem 0 3rem;
    }
}

/* Info sidebar */
.ct-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ct-info-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.15rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    overflow: hidden;
}

/* Only the text div gets flex:1 — NOT the icon */
.ct-info-card>div:not(.ct-info-ico) {
    min-width: 0;
    flex: 1;
}

.ct-info-ico {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.ct-info-lbl {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin-bottom: .15rem;
}

.ct-info-val {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

a.ct-info-val:hover {
    color: var(--blue);
}

.ct-info-note {
    font-size: .74rem;
    color: var(--muted);
    margin-top: .1rem;
    line-height: 1.35;
}

.ct-trust-row {
    background: linear-gradient(135deg, #1557c0, #0899e6);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ct-trust-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}

.ct-trust-item i {
    color: #fff;
    font-size: .88rem;
}

/* Form card */
.ct-form-wrap {
    background: #fff;
    border-radius: 20px;
    padding: 2.25rem 2rem 2rem;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .07);
    border-top: 4px solid var(--blue);
}

.ct-form-head {
    margin-bottom: 1.75rem;
}

.ct-form-head h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: .3rem;
}

.ct-form-head p {
    font-size: .92rem;
    color: var(--muted);
    margin: 0;
}

/* Alerts */
.ct-alert {
    border-radius: 10px;
    padding: .9rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.ct-alert-ok {
    background: #f0fdf4;
    color: #166534;
    border: 1.5px solid #bbf7d0;
}

.ct-alert-err {
    background: #fef2f2;
    color: #991b1b;
    border: 1.5px solid #fecaca;
}

/* 2-column row — always 2 cols, even on mobile */
.ct-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
    margin-bottom: .85rem;
}

@media(max-width:400px) {
    .ct-row-2 {
        gap: .6rem;
    }
}

/* Fields */
.ct-field {
    display: flex;
    flex-direction: column;
    margin-bottom: .85rem;
}

.ct-field-full {
    grid-column: 1 / -1;
}

.ct-field label,
.ct-field>label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--ink2);
    letter-spacing: .01em;
    margin-bottom: .38rem;
    text-transform: uppercase;
}

.ct-field input,
.ct-field textarea,
.ct-field select {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: .7rem .9rem;
    font-size: .93rem;
    font-family: var(--fb);
    color: var(--ink);
    background: #f9fafb;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

.ct-field input:focus,
.ct-field textarea:focus {
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(21, 87, 192, .1);
}

.ct-field textarea {
    resize: vertical;
    min-height: 90px;
}

.ct-optional {
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    font-size: .75rem;
}

/* Service cards — always 2×2 grid */
.ct-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin-top: .4rem;
}

.ct-svc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: .85rem .5rem;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, background .2s, box-shadow .2s;
    background: #f9fafb;
}

.ct-svc-card input[type="radio"] {
    display: none;
}

.ct-svc-card i {
    font-size: 1.4rem;
    color: var(--muted);
    transition: color .2s;
}

.ct-svc-card span {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink2);
}

.ct-svc-card:hover,
.ct-svc-card.selected {
    border-color: var(--blue);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(21, 87, 192, .09);
}

.ct-svc-card:hover i,
.ct-svc-card.selected i {
    color: var(--blue);
}

.ct-svc-card.selected span {
    color: var(--blue);
}

/* Consent */
.ct-consent {
    margin: .75rem 0 1rem;
}

.ct-consent-label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
}

.ct-consent-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--blue);
    cursor: pointer;
}

.ct-consent-label span {
    font-size: .76rem;
    color: var(--muted);
    line-height: 1.55;
}

.ct-consent-label a {
    color: var(--blue);
    text-decoration: underline;
}

/* reCAPTCHA */
.ct-recaptcha {
    margin: .75rem 0 1rem;
    transform-origin: left;
}

@media(max-width:360px) {
    .ct-recaptcha {
        transform: scale(.88);
    }
}

/* Submit */
.ct-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .95rem;
    background: linear-gradient(135deg, #1557c0, #0899e6);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(21, 87, 192, .28);
}

.ct-submit:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(21, 87, 192, .35);
}

.ct-submit:active {
    transform: translateY(0);
}

.ct-privacy-note {
    text-align: center;
    font-size: .72rem;
    color: var(--muted);
    margin-top: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Service card selection via JS */

/* ── STATS COUNTER BAR ── */
.stats-bar {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
}

.stats-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(21, 87, 192, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
    justify-content: center;
    padding: 1rem 1.5rem;
    text-align: left;
}

.stat-ico {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #60a5fa;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
}

.stat-num {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    background: linear-gradient(135deg, #fff 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.01em;
    margin-bottom: 0.15rem;
}

.stat-sub {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.stat-divider {
    width: 1px;
    height: 70px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Counter animation */
.stat-num {
    transition: color 0.3s;
}

@media (max-width: 768px) {
    .stats-grid {
        flex-direction: column;
        gap: 0;
    }

    .stat-item {
        width: 100%;
        padding: 1.4rem 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        justify-content: flex-start;
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    .stat-divider {
        display: none;
    }

    .stat-num {
        font-size: 2.2rem;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .stat-item {
        padding: 1rem 1rem;
        gap: 1rem;
    }

    .stat-ico {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }

    .stat-num {
        font-size: 2.2rem;
    }
}

/* ═══════════════════════════════════════════════
   PREMIUM SECURITY DEEP DIVE — New Design
   ═══════════════════════════════════════════════ */

.sec-security {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 7rem;
    background: linear-gradient(160deg, #f8faff 0%, #f0f4ff 40%, #edf6fd 100%);
}

.sec-deco-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

.sec-security-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* ── Left text column */
.sdd-text {
    display: flex;
    flex-direction: column;
}

.sdd-heading {
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-family: var(--fh);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.03em;
    margin: 1rem 0 1.25rem;
}

.sdd-grad {
    background: linear-gradient(100deg, #1557c0 10%, #0899e6 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sdd-desc {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ink2);
    margin: 0 0 2rem;
}

/* Feature list */
.sdd-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sdd-features li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .9rem 1.1rem;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(21, 87, 192, .08);
    border-radius: 14px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    backdrop-filter: blur(4px);
}

.sdd-features li:hover {
    background: #fff;
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(21, 87, 192, .08);
}

.sdd-ficon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1557c0, #0899e6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: .05rem;
    box-shadow: 0 4px 12px rgba(21, 87, 192, .25);
}

.sdd-features li strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .18rem;
    font-family: var(--fh);
}

.sdd-features li span {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
}

/* Actions */
.sdd-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.sdd-call {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--blue);
    text-decoration: none;
    transition: color .2s;
}

.sdd-call:hover {
    color: var(--teal);
}

.sdd-disclaimer {
    font-size: .75rem;
    color: var(--muted);
    margin: 0;
}

/* ── Right visual column */
.sdd-visual {
    position: relative;
}

/* Glowing blob */
.sdd-blob {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: radial-gradient(ellipse at center, rgba(21, 87, 192, .12) 0%, rgba(8, 153, 230, .06) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    animation: blobPulse 5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes blobPulse {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: .7;
    }

    50% {
        transform: scale(1.08) translate(4px, -8px);
        opacity: 1;
    }

    100% {
        transform: scale(.95) translate(-4px, 6px);
        opacity: .8;
    }
}

/* Image wrapper */
.sdd-img-wrap {
    position: relative;
    z-index: 1;
    border-radius: 28px;
    overflow: visible;
}

.sdd-img-wrap img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(13, 17, 23, .14), 0 0 0 1px rgba(21, 87, 192, .06);
    display: block;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1);
}

.sdd-img-wrap:hover img {
    transform: scale(1.02);
}

/* Floating stat cards */
.sdd-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    z-index: 3;
    animation: floatBob 4s ease-in-out infinite;
}

.sdd-float--tl {
    top: -1.2rem;
    left: -1.5rem;
    animation-delay: 0s;
}

.sdd-float--br {
    bottom: 3.5rem;
    right: -1.5rem;
    animation-delay: 2s;
}

@keyframes floatBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.sdd-float strong {
    display: block;
    font-size: .9rem;
    font-weight: 800;
    color: var(--ink);
    font-family: var(--fh);
    line-height: 1;
}

.sdd-float span {
    font-size: .72rem;
    color: var(--muted);
    line-height: 1;
}

.sdf-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1557c0, #0899e6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(21, 87, 192, .25);
}

.sdf-icon--grn {
    background: linear-gradient(135deg, #0899e6, #10b981);
    box-shadow: 0 4px 12px rgba(8, 153, 230, .25);
}

/* Bottom badge */
.sdd-badge {
    position: absolute;
    bottom: -1.75rem;
    left: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 18px;
    padding: 1.1rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
    z-index: 2;
    transition: transform .4s ease;
}

.sdd-img-wrap:hover .sdd-badge {
    transform: translateY(-4px);
}

.sdd-badge-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1557c0, #0899e6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(21, 87, 192, .3);
}

.sdd-badge strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    font-family: var(--fh);
}

.sdd-badge span {
    font-size: .8rem;
    color: var(--muted);
}

/* Animated pulsing live dot */
.sdd-badge-pulse {
    margin-left: auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    position: relative;
}

.sdd-badge-pulse::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .3);
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .sec-security-inner {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .sdd-float--tl {
        top: -1rem;
        left: 0;
    }

    .sdd-float--br {
        bottom: 2.5rem;
        right: 0;
    }
}

@media (max-width: 575px) {
    .sec-security {
        padding: 4rem 0 5.5rem;
    }

    .sdd-float {
        display: none;
    }

    .sdd-badge {
        left: 1rem;
        right: 1rem;
        bottom: -1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   HOME SECURITY PAGE — Component Styles
   ═══════════════════════════════════════════════════════════ */

/* ── HERO SPLIT LAYOUT ── */
.hs-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 991px) {
    .hs-split {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* ── IMAGE FRAME ── */
.hs-img-frame {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

.hs-img-frame img {
    width: 100%;
    object-fit: cover;
    display: block;
}

/* ── FLOATING IMAGE BADGE ── */
.hs-img-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
}

@media (max-width: 575px) {
    .hs-img-badge {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        padding: .85rem 1rem;
        gap: 10px;
    }
}

/* ── DARK CHIP (for dark-background sections) ── */
.chip-dk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    border-radius: 100px;
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: rgba(96, 165, 250, .12);
    color: #93c5fd;
    border: 1px solid rgba(96, 165, 250, .2);
    margin-bottom: 1.2rem;
}

/* ── HS HERO BADGE (Final CTA section) ── */
.hs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
    font-weight: 600;
    border-radius: 100px;
    padding: .4rem 1rem;
}

/* ═══════════════════════════════════════════════════════════
   SMART AUTOMATION — Image Card Components
   ═══════════════════════════════════════════════════════════ */

.auto-img-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(13, 17, 23, .06);
    transition: transform .35s cubic-bezier(.165, .84, .44, 1), box-shadow .35s ease, border-color .2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.auto-img-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(13, 17, 23, .12);
    border-color: var(--accent, var(--blue));
}

/* Image wrapper — maintains aspect ratio and contains zoom */
.auto-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
}

.auto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.165, .84, .44, 1);
}

.auto-img-card:hover .auto-img {
    transform: scale(1.07);
}

/* Gradient overlay on image */
.auto-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5, 10, 24, 0) 40%,
        rgba(5, 10, 24, .55) 100%
    );
    transition: opacity .35s ease;
}

.auto-img-card:hover .auto-img-overlay {
    opacity: .7;
}

/* Floating icon badge on image */
.auto-icon-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    transition: transform .3s ease, box-shadow .3s ease;
    z-index: 2;
}

.auto-img-card:hover .auto-icon-badge {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

/* Card body */
.auto-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.auto-card-title {
    font-family: var(--fh);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .6rem;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.auto-card-desc {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    flex: 1;
}

.auto-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: gap .2s ease;
    margin-top: auto;
}

.auto-img-card:hover .auto-card-link {
    gap: 8px;
}

/* Responsive — stack on mobile */
@media (max-width: 767px) {
    .auto-img-wrap {
        aspect-ratio: 16 / 9;
    }

    .auto-card-body {
        padding: 1.25rem;
    }

    .auto-card-title {
        font-size: 1rem;
    }

    .auto-card-desc {
        font-size: .84rem;
    }
}


/* ═══════════════════════════════════════════════════════════
   HOME SECURITY PAGE — Premium Hero
   ═══════════════════════════════════════════════════════════ */

/* Wrapper — full viewport height */
.hs-hero-wrap {
    position: relative;
    min-height: 65vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #050d1a;
}

/* Background image layer — Ken Burns slow zoom */
.hs-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    transform: scale(1.06);
    animation: hs-kb 12s ease-out forwards;
    will-change: transform;
    z-index: 0;
}

@keyframes hs-kb {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

/* Multi-layer overlay — deep blue-black tint */
.hs-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4,10,24,.45) 0%, rgba(4,10,24,.72) 55%, rgba(4,10,24,.95) 100%),
        linear-gradient(100deg, rgba(21,87,192,.35) 0%, transparent 55%);
}



/* Content sits above overlay */
.hs-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Eyebrow badge */
.hs-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.16);
    color: #e0eaff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: .45rem 1.1rem;
    margin-bottom: 1.4rem;
}

/* Headline */
.hs-hero-h1 {
    font-family: var(--fh);
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.035em;
    margin-bottom: 1.25rem;
}


/* Gradient on second line */
.hs-hero-grad {
    background: linear-gradient(110deg, #60a5fa 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtext */
.hs-hero-sub {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    color: rgba(255,255,255,.78);
    line-height: 1.75;
    max-width: 680px;
    margin: 0 auto 2.25rem;
}

/* CTA row */
.hs-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem;
}

/* Call link below CTA */
.hs-hero-call {
    color: rgba(255,255,255,.5);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
}
.hs-hero-call:hover { color: rgba(255,255,255,.9); }

/* Trust badges strip */
.hs-hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
}

.hs-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.82);
    font-size: .82rem;
    font-weight: 600;
    border-radius: 100px;
    padding: .4rem 1rem;
}

.hs-trust-badge i {
    color: #60a5fa;
    font-size: .95rem;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .hs-hero-wrap {
        min-height: auto;
    }
    .hs-hero-inner {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .hs-hero-h1 {
        font-size: 2.1rem;
        line-height: 1.15;
    }
    .hs-hero-sub {
        font-size: .97rem;
    }
    .hs-hero-ctas .btn {
        width: 100%;
        justify-content: center;
    }
    .hs-trust-badge {
        font-size: .77rem;
        padding: .35rem .85rem;
    }
}



/* =====================================================
   GLOBAL NAV ENHANCEMENTS
   (moved from header.php inline <style> block)
   ===================================================== */
.navbar { padding: 16px 0 !important; }
.navbar-nav .nav-link {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
}
.navbar-nav .nav-link i { font-size: 16px !important; margin-right: 4px; }
.mega-icon-box {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
}
.mega-link-item { font-size: 0.9rem !important; }
.hsc-call-btn {
    font-size: 15px !important;
    padding: 10px 24px !important;
}

/* =====================================================
   Global Animations
   ===================================================== */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE QUOTE FORM  —  #quote section
══════════════════════════════════════════════════════════════ */
.hsc-quote-section {
    padding: 5rem 0;
    background: #f8faff;
}

/* ── Left side perks list ── */
.hsc-quote-perks {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
}
.hsc-quote-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 0.75rem;
}
.hsc-quote-perks li i {
    color: #1557c0;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Call alt block ── */
.hsc-quote-call-alt {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.hsc-quote-call-alt p {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0 0 0.35rem;
}
.hsc-qca-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1557c0;
    text-decoration: none;
    font-family: 'Sora', sans-serif;
}
.hsc-qca-link:hover { color: #0899e6; }
.hsc-quote-call-alt span {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 0.2rem;
}

/* ── Form card ── */
.hsc-quote-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(21,87,192,.10);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.hsc-quote-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1.4rem 1.75rem;
    background: linear-gradient(135deg, #1557c0 0%, #0899e6 100%);
}
.hsc-qch-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}
.hsc-qch-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.hsc-qch-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
}

/* ── Form body ── */
.hsc-qform {
    padding: 1.75rem;
}

.hsc-qf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media(max-width:576px){
    .hsc-qf-row { grid-template-columns: 1fr; }
}

.hsc-qf-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.hsc-qf-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 5px;
}
.hsc-qf-group label i { color: #1557c0; }
.hsc-req { color: #e63946; margin-left: 2px; }

.hsc-qf-group input[type="text"],
.hsc-qf-group input[type="email"],
.hsc-qf-group input[type="tel"] {
    padding: 0.65rem 0.9rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.93rem;
    color: #1e293b;
    background: #f8faff;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    width: 100%;
}
.hsc-qf-group input:focus {
    border-color: #1557c0;
    box-shadow: 0 0 0 3px rgba(21,87,192,.10);
    background: #fff;
}

/* Error state */
.hsc-qf-has-err input,
.hsc-qf-has-err .hsc-phone-wrap {
    border-color: #e63946 !important;
    box-shadow: 0 0 0 3px rgba(230,57,70,.10) !important;
}
.hsc-qf-err {
    font-size: 0.78rem;
    color: #e63946;
    margin-top: 0.3rem;
    min-height: 1em;
}

/* ── +1 Phone prefix ── */
.hsc-phone-wrap {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #f8faff;
    transition: border-color .2s, box-shadow .2s;
}
.hsc-phone-wrap:focus-within {
    border-color: #1557c0;
    box-shadow: 0 0 0 3px rgba(21,87,192,.10);
    background: #fff;
}
.hsc-phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: #e8f0fe;
    color: #1557c0;
    font-weight: 700;
    font-size: 0.93rem;
    border-right: 1.5px solid #d1d9e6;
    white-space: nowrap;
    user-select: none;
}
.hsc-phone-wrap input {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0.75rem !important;
}

/* ── Service pill selectors ── */
.hsc-service-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.25rem;
}
@media(max-width:400px){
    .hsc-service-pills { grid-template-columns: 1fr; }
}
.hsc-spill {
    cursor: pointer;
    position: relative;
}
.hsc-spill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.hsc-spill span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.65rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    background: #f8faff;
    transition: all .2s;
}
.hsc-spill span i { color: #64748b; font-size: 1rem; }
.hsc-spill:hover span {
    border-color: #1557c0;
    background: #eff6ff;
    color: #1557c0;
}
.hsc-spill:hover span i { color: #1557c0; }
.hsc-spill input:checked + span {
    border-color: #1557c0;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1557c0;
    box-shadow: 0 0 0 3px rgba(21,87,192,.10);
}
.hsc-spill input:checked + span i { color: #1557c0; }

/* ── Consent text ── */
.hsc-consent {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0.5rem 0 1rem;
}
.hsc-consent a { color: #1557c0; text-decoration: underline; }

/* ── Submit button ── */
.hsc-qf-submit {
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, #1557c0 0%, #0899e6 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    box-shadow: 0 4px 15px rgba(21,87,192,.3);
}
.hsc-qf-submit:hover { opacity: 0.92; transform: translateY(-1px); }
.hsc-qf-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Spinner */
.hsc-qf-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Success state ── */
.hsc-quote-success {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 3rem 2rem;
}
.hsc-qs-icon {
    font-size: 3.5rem;
    color: #22c55e;
    margin-bottom: 1.25rem;
}
.hsc-quote-success h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0d1117;
    margin-bottom: 0.75rem;
}
.hsc-quote-success p {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.hsc-qs-hours {
    font-size: 0.82rem;
    color: #94a3b8;
    margin-top: 0.75rem;
}

@media (min-width: 992px) {
  .hsc-top-bar {
    display: none;
  }
}
/* +1 Phone prefix in quote form */
.qf-phone-wrap{display:flex;align-items:stretch;border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#f8faff;transition:border-color .2s}
.qf-phone-wrap:focus-within{border-color:#1557c0;box-shadow:0 0 0 3px rgba(21,87,192,.10)}
.qf-phone-prefix{display:flex;align-items:center;padding:0 .75rem;background:#e8f0fe;color:#1557c0;font-weight:700;font-size:.93rem;border-right:1.5px solid #d1d9e6;white-space:nowrap;user-select:none}
.qf-phone-wrap input{flex:1;border:none!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding-left:.75rem!important}