/* ── HERO SECTION ── */
        .contact-hero {
            background: linear-gradient(135deg, #0b1f5e 0%, #1a3fa8 45%, #2b6fd4 100%);
            position: relative;
            overflow: hidden;
        }

        .contact-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 60% at 20% 50%, rgba(43, 146, 243, 0.25) 0%, transparent 60%),
                radial-gradient(ellipse 60% 80% at 85% 20%, rgba(255,255,255,0.06) 0%, transparent 50%);
            pointer-events: none;
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
            background-size: 48px 48px;
            pointer-events: none;
        }

        .hero-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            pointer-events: none;
        }

        /* ── BADGE ── */
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 18px;
            border-radius: 9999px;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.22);
            backdrop-filter: blur(8px);
            color: #fff;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
        }

        .hero-badge-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #7ee8ff;
            animation: pulse-dot 2s infinite;
            box-shadow: 0 0 8px #7ee8ff;
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.75); }
        }

        /* ── INFO CARDS ── */
        .info-card {
            background: #fff;
            border: 1px solid rgba(29, 63, 171, 0.10);
            border-radius: 20px;
            padding: 24px;
            display: flex;
            gap: 18px;
            align-items: flex-start;
            box-shadow: 0 2px 16px rgba(29, 63, 171, 0.07);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            opacity: 0;
            transform: translateY(24px);
        }

        .info-card.visible {
            animation: card-in 0.5s ease forwards;
        }

        @keyframes card-in {
            to { opacity: 1; transform: translateY(0); }
        }

        .info-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 32px rgba(29, 63, 171, 0.14);
        }

        .info-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: linear-gradient(135deg, #2b92f3 0%, #1D3FAB 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(43, 146, 243, 0.30);
        }

        /* ── FORM CARD ── */
        .form-card {
            background: #ffffff;
            border: 1px solid rgba(29, 63, 171, 0.10);
            border-radius: 28px;
            padding: 2.5rem 2.5rem 2.75rem;
            box-shadow:
                0 20px 60px rgba(29, 63, 171, 0.13),
                0 4px 16px rgba(29, 63, 171, 0.08),
                0 1px 3px rgba(0,0,0,0.04);
            /* NO sticky — prevents form from being clipped by section height */
        }

        .form-title-accent {
            display: inline-block;
            width: 40px;
            height: 4px;
            border-radius: 9999px;
            background: linear-gradient(90deg, #2b92f3, #1D3FAB);
            margin-bottom: 1rem;
        }

        /* ── FORM FIELDS ── */

        /* Animated border wrapper */
        .field-wrap {
            position: relative;
            border-radius: 10px !important;
            background: linear-gradient(135deg, #dce4f5, #dce4f5) !important;
            padding: 1.5px !important; /* acts as the border */
            transition: background 0.3s ease;
        }

        .field-wrap::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 10px !important;
            background: linear-gradient(135deg, #2b92f3, #1D3FAB, #2b92f3);
            background-size: 200% 200%;
            opacity: 0;
            transition: opacity 0.3s ease;
            animation: none;
            z-index: 0;
        }

        .field-wrap:focus-within::before {
            opacity: 1;
            animation: border-spin 2.5s linear infinite;
        }

        @keyframes border-spin {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .field-input {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 12px 16px !important;
            border-radius: 9px !important; /* 1px less than wrapper to fit inside */
            border: none !important;
            background: #f4f7fe !important;
            color: #1e2b50;
            font-size: 0.9rem;
            font-family: inherit;
            line-height: 1.5;
            outline: none !important;
            -webkit-appearance: none;
            display: block;
            box-sizing: border-box;
            transition: background 0.2s;
        }

        .field-input:hover {
            background: #eef2fd !important;
        }

        .field-wrap:focus-within .field-input {
            background: #ffffff !important;
        }

        .field-input::placeholder {
            color: #aabbd4;
        }

        textarea.field-input {
            resize: none;
            min-height: 112px;
            vertical-align: top; /* eliminates inline gap */
        }

        .field-label {
            display: block;
            font-size: 0.72rem;
            font-weight: 700;
            color: #4a5d8a;
            margin-bottom: 6px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .field-label .required {
            color: #e05555;
            margin-left: 2px;
        }

        /* ── SUBMIT BUTTON ── */
        .btn-submit {
            width: 100%;
            padding: 16px;
            border-radius: 14px;
            background: linear-gradient(90deg, #2b92f3, #1D3FAB);
            color: #fff;
            font-weight: 700;
            font-size: 0.95rem;
            letter-spacing: 0.04em;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 4px 18px rgba(43, 146, 243, 0.35);
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
            position: relative;
            overflow: hidden;
        }

        .btn-submit::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
            transform: translateX(-100%);
            transition: transform 0.4s ease;
        }

        .btn-submit:hover::before {
            transform: translateX(100%);
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(43, 146, 243, 0.45);
        }

        .btn-submit:active {
            transform: translateY(0);
        }

        /* ── MAP WRAPPER ── */
        .map-wrapper {
            border-radius: 24px;
            overflow: hidden;
            border: 2px solid rgba(29, 63, 171, 0.10);
            box-shadow: 0 4px 24px rgba(29, 63, 171, 0.08);
            position: relative;
        }

        .map-overlay-label {
            position: absolute;
            bottom: 14px;
            right: 14px;
            background: rgba(255,255,255,0.97);
            backdrop-filter: blur(8px);
            border-radius: 10px;
            padding: 8px 14px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #1D3FAB;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.12);
            z-index: 5;
        }

        /* ── SECTION BG ── */
        .contact-section {
            background: linear-gradient(180deg, #f0f4ff 0%, #f7f9ff 100%);
        }

        /* ── DIVIDER ── */
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(29,63,171,0.15), transparent);
            margin: 0;
        }

        /* ── CHANNEL STRIP (Social proof strip) ── */
        .channel-strip {
            background: linear-gradient(90deg, #0b1f5e, #1a3fa8);
            padding: 14px 0;
        }

        .channel-strip-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .channel-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255,255,255,0.85);
            font-size: 0.82rem;
            font-weight: 500;
        }

        .channel-item img {
            width: 18px;
            height: 18px;
        }

        /* ── FORM SUCCESS ── */
        #formFeedback {
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.97);
            border-radius: 28px;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem;
            z-index: 20;
        }

        #formFeedback.show {
            display: flex;
            animation: fade-in 0.35s ease;
        }

        @keyframes fade-in {
            from { opacity: 0; transform: scale(0.96); }
            to { opacity: 1; transform: scale(1); }
        }

        .success-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-bottom: 1.25rem;
            box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
            animation: success-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        @keyframes success-pop {
            0% { transform: scale(0); }
            100% { transform: scale(1); }
        }

        /* ── SCROLL ANIMATION ── */
        [data-animate] {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.55s ease, transform 0.55s ease;
        }

        [data-animate].in-view {
            opacity: 1;
            transform: translateY(0);
        }

        /* ── HERO LOAD ANIMATIONS ── */
        .hero-animate {
            opacity: 0;
            transform: translateY(20px);
            animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes heroFadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Stagger delays for hero items */
        .delay-100 { animation-delay: 100ms; }
        .delay-200 { animation-delay: 200ms; }
        .delay-300 { animation-delay: 300ms; }
        .delay-400 { animation-delay: 400ms; }
        .delay-500 { animation-delay: 500ms; }

        /* Custom color filters for SVG icons */
        .icon-cyan {
            filter: invert(82%) sepia(21%) saturate(961%) hue-rotate(182deg) brightness(103%) contrast(102%);
        }

        .icon-primary {
            filter: invert(24%) sepia(87%) saturate(2250%) hue-rotate(198deg) brightness(97%) contrast(101%);
        }

        .icon-blue {
            filter: invert(16%) sepia(85%) saturate(2945%) hue-rotate(222deg) brightness(90%) contrast(93%);
        }

        .icon-gray {
            filter: invert(72%) sepia(17%) saturate(543%) hue-rotate(178deg) brightness(88%) contrast(85%);
        }