:root {
            --blue: #0365d3;
            --blue-dark: #024a9c;
            --orange: #ffa415;
            --orange-dark: #e88f05;
            --navy: #0f3564;
            --navy-deep: #0b2748;
            --ink: #122f2a;
            --text: #636363;
            --wash: #f1f6f7;
            --wash2: #ecf2f2;
            --line: #e0e0e0;
            --white: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: "Segoe UI",Roboto,Arial,sans-serif;
            color: var(--text);
            background: var(--white);
            font-size: 16px;
            line-height: 1.75;
            overflow-x: hidden;
        }

        h1, h2, h3, h4 {
            font-family: "Poppins","Segoe UI",Arial,sans-serif;
            color: var(--ink);
            line-height: 1.25;
            text-wrap: balance
        }

        img, svg {
            max-width: 100%
        }

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

        ul {
            list-style: none
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px
        }

        .section {
            padding: 100px 0
        }

        .section-alt {
            background: var(--wash)
        }

        /* ============ eyebrow / headings ============ */
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--blue);
            font-weight: 700;
            font-size: 14px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            margin-bottom: 14px
        }

            .eyebrow::before {
                content: "";
                width: 34px;
                height: 2px;
                background: var(--orange)
            }

            .eyebrow.center::after {
                content: "";
                width: 34px;
                height: 2px;
                background: var(--orange)
            }

        .sec-title {
            font-size: clamp(28px,4vw,42px);
            font-weight: 800;
            margin-bottom: 18px
        }

            .sec-title .accent {
                color: var(--blue);
                position: relative;
                white-space: nowrap
            }

                .sec-title .accent::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 2px;
                    height: 9px;
                    background: rgba(255,164,21,.35);
                    z-index: -1;
                    border-radius: 3px
                }

        .center {
            text-align: center
        }

            .center .eyebrow {
                justify-content: center
            }

        /* ============ buttons ============ */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 32px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 15px;
            font-family: "Poppins","Segoe UI",sans-serif;
            transition: transform .25s,box-shadow .25s,background .25s;
            cursor: pointer;
            border: none
        }

            .btn:hover {
                transform: translateY(-3px)
            }

            .btn:focus-visible {
                outline: 3px solid var(--orange);
                outline-offset: 2px
            }

        .btn-blue {
            background: var(--blue);
            color: #fff;
            box-shadow: 0 10px 24px rgba(3,101,211,.3)
        }

            .btn-blue:hover {
                background: var(--blue-dark)
            }

        .btn-orange {
            background: var(--orange);
            color: #12233c;
            box-shadow: 0 10px 24px rgba(255,164,21,.35)
        }

            .btn-orange:hover {
                background: var(--orange-dark)
            }

        .btn-ghost {
            background: transparent;
            color: #fff;
            border: 2px solid rgba(255,255,255,.5)
        }

            .btn-ghost:hover {
                border-color: var(--orange);
                color: var(--orange)
            }

        /* ============ topbar ============ */
        .topbar {
            background: var(--navy);
            color: #cfe0f5;
            font-size: 13.5px
        }

            .topbar .container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                min-height: 42px;
                flex-wrap: wrap;
                gap: 4px
            }

            .topbar a {
                color: #cfe0f5
            }

                .topbar a:hover {
                    color: var(--orange)
                }

            .topbar .tleft, .topbar .tright {
                display: flex;
                gap: 22px;
                align-items: center;
                flex-wrap: wrap
            }

            .topbar svg {
                width: 14px;
                height: 14px;
                vertical-align: -2px;
                margin-right: 6px;
                fill: var(--orange)
            }

        /* ============ header ============ */
        header.main {
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 50;
            box-shadow: 0 2px 20px rgba(15,53,100,.08)
        }

            header.main .container {
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: 84px;
                gap: 20px
            }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 0 0 auto;
            font-family: "Poppins","Segoe UI",sans-serif
        }

        .logo-mark {
            flex: 0 0 auto;
            height: 41px;
            color: var(--navy);
            transition: transform .3s ease
        }

            .logo-mark svg {
                display: block;
                height: 100%;
                width: auto;
                fill: currentColor
            }

        .logo:hover .logo-mark {
            transform: translateY(-2px)
        }

        .logo-txt {
            border-left: 1.5px solid var(--line);
            padding-left: 12px
        }

        .logo-name {
            display: block;
            white-space: nowrap;
            font-size: 22px;
            font-weight: 800;
            color: var(--ink);
            line-height: 1;
            letter-spacing: .2px
        }

            .logo-name span {
                color: var(--blue)
            }

        .logo-sub {
            display: block;
            white-space: nowrap;
            margin-top: 5px;
            font-size: 9.5px;
            letter-spacing: 2.4px;
            text-transform: uppercase;
            color: var(--text);
            line-height: 1
        }
        /* footer: tam logo kilidi (amblem + ARTU) */
        .flogo {
            display: inline-block;
            height: 84px;
            color: #fff;
            transition: transform .3s ease
        }

            .flogo svg {
                display: block;
                height: 100%;
                width: auto;
                fill: currentColor
            }

            .flogo:hover {
                transform: translateY(-3px)
            }

        .flogo-sub {
            display: block;
            margin-top: 14px;
            font-size: 10.5px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #8fa7c6
        }

        nav.desktop {
            display: flex;
            gap: 30px;
            flex-wrap: nowrap
        }

            nav.desktop a {
                white-space: nowrap;
                font-weight: 600;
                font-size: 15.5px;
                color: var(--ink);
                position: relative;
                padding: 6px 0
            }

                nav.desktop a::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 0;
                    height: 2.5px;
                    background: var(--orange);
                    transition: width .25s;
                    border-radius: 2px
                }

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

                    nav.desktop a:hover::after {
                        width: 100%
                    }

        .head-cta {
            display: flex;
            align-items: center;
            gap: 20px;
            flex: 0 0 auto
        }

        .head-phone {
            display: flex;
            align-items: center;
            gap: 12px
        }

            .head-phone .ico {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                background: rgba(3,101,211,.1);
                display: grid;
                place-items: center;
                animation: pulse 2.2s infinite
            }

                .head-phone .ico svg {
                    width: 20px;
                    height: 20px;
                    fill: var(--blue)
                }

            .head-phone small {
                display: block;
                font-size: 12px;
                color: var(--text)
            }

            .head-phone strong {
                white-space: nowrap;
                font-size: 16.5px;
                color: var(--ink);
                font-family: "Poppins","Segoe UI",sans-serif
            }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(3,101,211,.35)
            }

            70% {
                box-shadow: 0 0 0 14px rgba(3,101,211,0)
            }

            100% {
                box-shadow: 0 0 0 0 rgba(3,101,211,0)
            }
        }

        /* ============ hero ============ */
        .hero {
            position: relative;
            background: linear-gradient(115deg,var(--navy-deep) 0%,var(--navy) 45%,var(--blue) 100%);
            color: #fff;
            overflow: hidden
        }

            .hero::before {
                content: "";
                position: absolute;
                width: 640px;
                height: 640px;
                border-radius: 50%;
                background: radial-gradient(circle,rgba(255,164,21,.16),transparent 65%);
                top: -220px;
                right: -160px
            }

            .hero::after {
                content: "";
                position: absolute;
                width: 420px;
                height: 420px;
                border-radius: 50%;
                border: 70px solid rgba(255,255,255,.045);
                bottom: -190px;
                left: -140px
            }

            .hero .container {
                position: relative;
                display: grid;
                grid-template-columns: 1.15fr .85fr;
                gap: 40px;
                align-items: center;
                padding-top: 90px;
                padding-bottom: 110px;
                z-index: 1
            }

        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.2);
            padding: 8px 18px;
            border-radius: 999px;
            font-size: 13.5px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-weight: 600;
            color: #ffd9a0;
            margin-bottom: 26px
        }

            .hero-tag::before {
                content: "";
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--orange)
            }

        .hero h1 {
            color: #fff;
            font-size: clamp(34px,5vw,58px);
            font-weight: 800;
            margin-bottom: 22px
        }

            .hero h1 .script {
                font-family: "Segoe Script","Brush Script MT",cursive;
                font-weight: 400;
                color: var(--orange);
                font-size: .92em
            }

        .hero p.lead {
            font-size: 18px;
            color: #d9e6f8;
            max-width: 54ch;
            margin-bottom: 36px
        }

        .hero-btns {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 44px
        }

        .hero-trust {
            display: flex;
            align-items: center;
            gap: 16px
        }

        .avatars {
            display: flex
        }

            .avatars span {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 3px solid var(--navy);
                display: grid;
                place-items: center;
                font-weight: 700;
                font-size: 14px;
                color: #fff;
                margin-left: -10px;
                font-family: "Poppins","Segoe UI",sans-serif
            }

                .avatars span:first-child {
                    margin-left: 0
                }

        .hero-trust .stars {
            color: var(--orange);
            letter-spacing: 2px;
            font-size: 15px
        }

        .hero-trust small {
            display: block;
            color: #c4d6f0;
            font-size: 13.5px
        }

        .hero-visual {
            position: relative;
            display: grid;
            place-items: center;
            min-height: 420px
        }

        .shield-wrap {
            position: relative;
            width: min(340px,80%)
        }

            .shield-wrap .ring {
                position: absolute;
                inset: -46px;
                border-radius: 50%;
                border: 2px dashed rgba(255,255,255,.25);
                animation: spin 30s linear infinite
            }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        .float-card {
            position: absolute;
            background: #fff;
            border-radius: 14px;
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 18px 44px rgba(4,18,40,.35);
            animation: floaty 4.5s ease-in-out infinite
        }

            .float-card .fc-ico {
                width: 42px;
                height: 42px;
                border-radius: 10px;
                display: grid;
                place-items: center;
                flex: 0 0 auto
            }

                .float-card .fc-ico svg {
                    width: 22px;
                    height: 22px
                }

            .float-card strong {
                display: block;
                color: var(--ink);
                font-size: 14.5px;
                font-family: "Poppins","Segoe UI",sans-serif;
                line-height: 1.3
            }

            .float-card small {
                color: var(--text);
                font-size: 12.5px
            }

        .fc1 {
            top: 6%;
            left: -6%;
            animation-delay: 0s
        }

        .fc2 {
            bottom: 14%;
            right: -8%;
            animation-delay: 1.4s
        }

        .fc3 {
            bottom: -4%;
            left: 4%;
            animation-delay: 2.6s
        }

        @keyframes floaty {
            0%,100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-13px)
            }
        }

        /* wave bottom */
        .hero .wave {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            z-index: 2
        }

            .hero .wave svg {
                display: block;
                width: 100%;
                height: 70px
            }

        /* ============ counters ============ */
        .counters {
            background: #fff;
            position: relative;
            z-index: 3
        }

            .counters .grid {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                gap: 26px;
                margin-top: -58px;
                background: #fff;
                border-radius: 18px;
                box-shadow: 0 24px 60px rgba(15,53,100,.12);
                padding: 38px 30px;
                border-top: 4px solid var(--orange)
            }

        .counter {
            display: flex;
            align-items: center;
            gap: 16px;
            justify-content: center
        }

            .counter .c-ico {
                width: 60px;
                height: 60px;
                border-radius: 14px;
                background: rgba(3,101,211,.09);
                display: grid;
                place-items: center;
                flex: 0 0 auto
            }

                .counter .c-ico svg {
                    width: 30px;
                    height: 30px;
                    fill: var(--blue)
                }

            .counter b {
                font-size: 34px;
                font-family: "Poppins","Segoe UI",sans-serif;
                color: var(--ink);
                font-variant-numeric: tabular-nums;
                line-height: 1.1
            }

                .counter b em {
                    color: var(--orange);
                    font-style: normal
                }

            .counter small {
                color: var(--text);
                font-size: 14px
            }

        /* ============ about ============ */
        .about .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 70px;
            align-items: center
        }

        .about-visual {
            position: relative
        }

        .about-imgbox {
            border-radius: 20px;
            overflow: hidden;
            background: linear-gradient(150deg,var(--wash) 0%,#dbe9f7 100%);
            aspect-ratio: 5/5.4;
            position: relative;
            box-shadow: 0 24px 60px rgba(15,53,100,.14)
        }

            .about-imgbox .art {
                position: absolute;
                inset: 0;
                display: grid;
                place-items: center
            }

        .exp-badge {
            position: absolute;
            right: -24px;
            bottom: 44px;
            background: var(--orange);
            color: #12233c;
            border-radius: 16px;
            padding: 22px 26px;
            text-align: center;
            box-shadow: 0 18px 40px rgba(255,164,21,.45);
            animation: floaty 5s ease-in-out infinite
        }

            .exp-badge b {
                display: block;
                font-size: 38px;
                font-family: "Poppins","Segoe UI",sans-serif;
                line-height: 1
            }

            .exp-badge span {
                font-size: 13px;
                font-weight: 700;
                letter-spacing: .5px
            }

        .about-dots {
            position: absolute;
            top: -26px;
            left: -26px;
            width: 110px;
            height: 110px;
            background-image: radial-gradient(var(--blue) 2.5px,transparent 2.5px);
            background-size: 18px 18px;
            opacity: .35;
            z-index: -1
        }

        .about ul.checks {
            margin: 26px 0 34px;
            display: grid;
            gap: 14px
        }

            .about ul.checks li {
                display: flex;
                gap: 13px;
                align-items: flex-start;
                color: var(--ink);
                font-weight: 600;
                font-size: 15.5px
            }

                .about ul.checks li svg {
                    width: 22px;
                    height: 22px;
                    fill: var(--orange);
                    flex: 0 0 auto;
                    margin-top: 2px
                }

                .about ul.checks li small {
                    display: block;
                    font-weight: 400;
                    color: var(--text);
                    font-size: 14.5px
                }

        .about-foot {
            display: flex;
            align-items: center;
            gap: 30px;
            flex-wrap: wrap
        }

        .sign {
            font-family: "Segoe Script","Brush Script MT",cursive;
            font-size: 24px;
            color: var(--blue)
        }

            .sign small {
                display: block;
                font-family: "Segoe UI",sans-serif;
                font-size: 12.5px;
                color: var(--text)
            }

        /* ============ services ============ */
        .services {
            position: relative
        }

            .services .grid {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                gap: 24px;
                margin-top: 50px
            }

        .svc {
            background: #fff;
            border-radius: 16px;
            padding: 36px 26px 30px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(15,53,100,.07);
            transition: transform .3s,box-shadow .3s;
            border: 1px solid var(--line)
        }

            .svc::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 5px;
                background: var(--svc-c,var(--blue));
                border-radius: 16px 16px 0 0
            }

            .svc:hover {
                transform: translateY(-8px);
                box-shadow: 0 22px 50px rgba(15,53,100,.16)
            }

            .svc .s-ico {
                width: 66px;
                height: 66px;
                border-radius: 16px;
                background: color-mix(in srgb,var(--svc-c,var(--blue)) 12%,white);
                display: grid;
                place-items: center;
                margin-bottom: 20px;
                transition: transform .3s
            }

            .svc:hover .s-ico {
                transform: scale(1.08) rotate(-4deg)
            }

            .svc .s-ico svg {
                width: 34px;
                height: 34px;
                fill: var(--svc-c,var(--blue))
            }

            .svc h3 {
                font-size: 19px;
                font-weight: 700;
                margin-bottom: 10px
            }

            .svc p {
                font-size: 14.5px;
                margin-bottom: 16px
            }

            .svc .more {
                font-weight: 700;
                font-size: 14px;
                color: var(--svc-c,var(--blue));
                display: inline-flex;
                align-items: center;
                gap: 6px
            }

                .svc .more::after {
                    content: "\2192";
                    transition: transform .25s
                }

            .svc:hover .more::after {
                transform: translateX(5px)
            }

        .svc-c-blue {
            --svc-c: #0365d3
        }

        .svc-c-orange {
            --svc-c: #e88f05
        }

        .svc-c-green {
            --svc-c: #0e9f6e
        }

        .svc-c-red {
            --svc-c: #e5484d
        }

        .svc-c-purple {
            --svc-c: #7c5cff
        }

        .svc-c-teal {
            --svc-c: #0d9ebb
        }

        .services .allbtn {
            text-align: center;
            margin-top: 44px
        }


        /* ============ partner logo band ============ */
        .partners {
            background: var(--navy);
            padding: 24px 0 86px;
            overflow: hidden;
            position: relative
        }

            .partners .track {
                display: flex;
                align-items: center;
                white-space: nowrap;
                width: max-content;
                animation: scrollx 70s linear infinite
            }

            .partners:hover .track {
                animation-play-state: paused
            }

            .partners img {
                display: block;
                height: 36px;
                width: auto;
                max-width: 170px;
                margin: 0 22px;
                filter: brightness(0) invert(1);
                opacity: .92
            }

                .partners img.tall {
                    height: 48px
                }

                .partners img.nf {
                    filter: none
                }

            .partners i {
                color: var(--orange);
                font-style: normal;
                font-size: 18px;
                line-height: 1
            }

        /* ============ marquee ============ */
        .marquee {
            background: var(--navy);
            padding: 26px 0;
            overflow: hidden;
            position: relative
        }

            .marquee .track {
                display: flex;
                gap: 0;
                white-space: nowrap;
                animation: scrollx 28s linear infinite;
                width: max-content
            }

        @keyframes scrollx {
            to {
                transform: translateX(-50%)
            }
        }

        .marquee span {
            font-family: "Poppins","Segoe UI",sans-serif;
            font-size: 30px;
            font-weight: 800;
            color: transparent;
            -webkit-text-stroke: 1px rgba(255,255,255,.55);
            padding: 0 18px
        }

            .marquee span.fill {
                color: var(--orange);
                -webkit-text-stroke: 0
            }

        .marquee i {
            color: var(--orange);
            font-style: normal;
            font-size: 22px;
            vertical-align: 6px
        }

        /* ============ quote / consultation ============ */
        .quote-sec {
            background: linear-gradient(120deg,var(--navy-deep),var(--navy) 60%,#14417a);
            color: #fff;
            position: relative;
            overflow: hidden
        }

            .quote-sec::before {
                content: "";
                position: absolute;
                width: 520px;
                height: 520px;
                border-radius: 50%;
                background: radial-gradient(circle,rgba(3,101,211,.5),transparent 70%);
                top: -160px;
                right: -120px
            }

            .quote-sec .container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 70px;
                align-items: center;
                position: relative;
                z-index: 1
            }

            .quote-sec .eyebrow {
                color: var(--orange)
            }

            .quote-sec h2 {
                color: #fff
            }

            .quote-sec p.desc {
                color: #d9e6f8;
                margin-bottom: 30px
            }

        .q-feats {
            display: grid;
            gap: 18px
        }

            .q-feats li {
                display: flex;
                gap: 16px;
                align-items: flex-start
            }

            .q-feats .qf-ico {
                width: 52px;
                height: 52px;
                border-radius: 12px;
                background: rgba(255,164,21,.16);
                display: grid;
                place-items: center;
                flex: 0 0 auto
            }

                .q-feats .qf-ico svg {
                    width: 26px;
                    height: 26px;
                    fill: var(--orange)
                }

            .q-feats strong {
                display: block;
                color: #fff;
                font-family: "Poppins","Segoe UI",sans-serif;
                font-size: 16.5px
            }

            .q-feats span {
                color: #c4d6f0;
                font-size: 14.5px
            }

        .quote-form {
            background: #fff;
            border-radius: 20px;
            padding: 40px 36px;
            box-shadow: 0 30px 80px rgba(0,0,0,.35)
        }

            .quote-form h3 {
                font-size: 24px;
                margin-bottom: 6px
            }

            .quote-form .sub {
                font-size: 14.5px;
                margin-bottom: 24px;
                display: block
            }

            .quote-form .row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
                margin-bottom: 14px
            }

            .quote-form input, .quote-form select {
                width: 100%;
                padding: 14px 16px;
                border: 1.5px solid var(--line);
                border-radius: 10px;
                font-size: 15px;
                font-family: inherit;
                color: var(--ink);
                background: var(--wash)
            }

                .quote-form input:focus, .quote-form select:focus {
                    outline: 2px solid var(--blue);
                    border-color: var(--blue);
                    background: #fff
                }

            .quote-form .btn {
                width: 100%;
                justify-content: center;
                margin-top: 8px
            }

            .quote-form .note {
                font-size: 12.5px;
                color: var(--text);
                text-align: center;
                display: block;
                margin-top: 12px
            }

        /* ============ steps ============ */
        .steps .grid {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 30px;
            margin-top: 56px;
            position: relative
        }

        .step {
            text-align: center;
            position: relative;
            padding: 0 10px
        }

            .step .st-ico {
                width: 110px;
                height: 110px;
                margin: 0 auto 24px;
                border-radius: 50%;
                background: #fff;
                border: 2px dashed var(--blue);
                display: grid;
                place-items: center;
                position: relative;
                transition: transform .3s
            }

            .step:hover .st-ico {
                transform: rotate(6deg) scale(1.05)
            }

            .step .st-ico svg {
                width: 48px;
                height: 48px;
                fill: var(--blue)
            }

            .step .st-num {
                position: absolute;
                top: -6px;
                right: -6px;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: var(--orange);
                color: #12233c;
                font-weight: 800;
                display: grid;
                place-items: center;
                font-family: "Poppins","Segoe UI",sans-serif;
                font-size: 15px;
                box-shadow: 0 8px 18px rgba(255,164,21,.4)
            }

            .step h3 {
                font-size: 20px;
                margin-bottom: 10px
            }

            .step p {
                font-size: 14.5px;
                max-width: 34ch;
                margin: 0 auto
            }

        .step-arrow {
            position: absolute;
            top: 52px;
            right: -19px;
            color: var(--orange);
            font-size: 26px;
            display: block
        }

        /* ============ faq + testimonial ============ */
        .faqwrap .container {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 70px;
            align-items: start
        }

        .acc {
            border: 1.5px solid var(--line);
            border-radius: 12px;
            margin-bottom: 14px;
            background: #fff;
            overflow: hidden;
            transition: box-shadow .25s
        }

            .acc[open] {
                box-shadow: 0 14px 36px rgba(15,53,100,.1);
                border-color: var(--blue)
            }

            .acc summary {
                cursor: pointer;
                padding: 19px 22px;
                font-weight: 700;
                color: var(--ink);
                font-family: "Poppins","Segoe UI",sans-serif;
                font-size: 15.5px;
                list-style: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 14px
            }

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

                .acc summary::after {
                    content: "+";
                    font-size: 24px;
                    color: var(--blue);
                    font-weight: 400;
                    transition: transform .25s;
                    flex: 0 0 auto
                }

            .acc[open] summary::after {
                transform: rotate(45deg);
                color: var(--orange)
            }

            .acc .body {
                padding: 0 22px 20px;
                font-size: 14.8px
            }

        .testi-card {
            background: var(--wash);
            border-radius: 20px;
            padding: 40px 36px;
            position: relative;
            border-left: 5px solid var(--orange)
        }

            .testi-card .qmark {
                position: absolute;
                top: 26px;
                right: 32px;
                font-size: 90px;
                font-family: Georgia,serif;
                color: rgba(3,101,211,.14);
                line-height: 1
            }

        .testi-slide {
            display: none
        }

            .testi-slide.on {
                display: block;
                animation: fadein .5s
            }

        @keyframes fadein {
            from {
                opacity: 0;
                transform: translateY(8px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .testi-card .stars {
            color: var(--orange);
            font-size: 18px;
            letter-spacing: 3px;
            margin-bottom: 16px
        }

        .testi-card blockquote {
            font-size: 17px;
            color: var(--ink);
            font-style: italic;
            margin-bottom: 24px;
            line-height: 1.8
        }

        .t-person {
            display: flex;
            align-items: center;
            gap: 14px
        }

            .t-person .t-av {
                width: 54px;
                height: 54px;
                border-radius: 50%;
                display: grid;
                place-items: center;
                color: #fff;
                font-weight: 700;
                font-family: "Poppins","Segoe UI",sans-serif;
                font-size: 17px
            }

            .t-person strong {
                display: block;
                color: var(--ink);
                font-family: "Poppins","Segoe UI",sans-serif;
                font-size: 15.5px
            }

            .t-person small {
                color: var(--text);
                font-size: 13px
            }

        .t-dots {
            display: flex;
            gap: 9px;
            margin-top: 26px
        }

            .t-dots button {
                width: 11px;
                height: 11px;
                border-radius: 50%;
                border: none;
                background: #c9d8e8;
                cursor: pointer;
                transition: background .25s,transform .25s;
                padding: 0
            }

                .t-dots button.on {
                    background: var(--orange);
                    transform: scale(1.3)
                }

        /* ============ blog ============ */
        .blog .grid {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 26px;
            margin-top: 50px
        }

        .post {
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(15,53,100,.08);
            transition: transform .3s,box-shadow .3s;
            border: 1px solid var(--line)
        }

            .post:hover {
                transform: translateY(-7px);
                box-shadow: 0 22px 50px rgba(15,53,100,.15)
            }

            .post .p-img {
                height: 170px;
                display: grid;
                place-items: center;
                position: relative
            }

                .post .p-img svg {
                    width: 64px;
                    height: 64px;
                    fill: rgba(255,255,255,.9)
                }

            .post .p-date {
                position: absolute;
                left: 18px;
                bottom: -18px;
                background: var(--orange);
                color: #12233c;
                border-radius: 10px;
                padding: 8px 14px;
                text-align: center;
                font-family: "Poppins","Segoe UI",sans-serif;
                line-height: 1.15;
                box-shadow: 0 8px 20px rgba(255,164,21,.4)
            }

                .post .p-date b {
                    display: block;
                    font-size: 18px
                }

                .post .p-date small {
                    font-size: 11px;
                    font-weight: 700;
                    text-transform: uppercase
                }

            .post .p-body {
                padding: 32px 24px 26px
            }

            .post .p-meta {
                font-size: 13px;
                color: var(--text);
                margin-bottom: 10px;
                display: flex;
                gap: 14px
            }

                .post .p-meta b {
                    color: var(--blue);
                    font-weight: 600
                }

            .post h3 {
                font-size: 18.5px;
                margin-bottom: 12px;
                line-height: 1.45
            }

                .post h3 a:hover {
                    color: var(--blue)
                }

            .post p {
                font-size: 14.5px;
                margin-bottom: 14px
            }

        /* ============ cta band ============ */
        .ctaband {
            background: linear-gradient(100deg,var(--blue),var(--navy));
            position: relative;
            overflow: hidden
        }

            .ctaband::before {
                content: "";
                position: absolute;
                width: 300px;
                height: 300px;
                border-radius: 50%;
                border: 46px solid rgba(255,255,255,.07);
                right: -90px;
                top: -90px
            }

            .ctaband .container {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 30px;
                padding-top: 56px;
                padding-bottom: 56px;
                flex-wrap: wrap;
                position: relative;
                z-index: 1
            }

            .ctaband h2 {
                color: #fff;
                font-size: clamp(24px,3vw,34px)
            }

            .ctaband p {
                color: #d9e6f8;
                margin-top: 6px
            }

        /* ============ footer ============ */
        footer {
            background: var(--navy-deep);
            color: #b9cbe4;
            font-size: 14.5px
        }

            footer .cols {
                display: grid;
                grid-template-columns: 1.25fr 1fr 1fr 1.25fr;
                gap: 44px;
                padding: 80px 0 50px
            }

            footer h4 {
                color: #fff;
                font-size: 17px;
                margin-bottom: 22px;
                position: relative;
                padding-bottom: 12px
            }

                footer h4::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 36px;
                    height: 3px;
                    background: var(--orange);
                    border-radius: 2px
                }

            footer ul {
                display: grid;
                gap: 11px
            }

                footer ul a {
                    transition: color .2s,padding-left .2s
                }

                    footer ul a:hover {
                        color: var(--orange);
                        padding-left: 5px
                    }

            footer .fbrand p {
                margin: 16px 0 20px;
                line-height: 1.8
            }

        .fsoc {
            display: flex;
            gap: 10px
        }

            .fsoc a {
                width: 38px;
                height: 38px;
                border-radius: 10px;
                background: rgba(255,255,255,.08);
                display: grid;
                place-items: center;
                transition: background .25s,transform .25s
            }

                .fsoc a:hover {
                    background: var(--orange);
                    transform: translateY(-3px)
                }

            .fsoc svg {
                width: 17px;
                height: 17px;
                fill: #fff
            }

        footer .contact-li {
            display: flex;
            gap: 12px;
            align-items: flex-start
        }

            footer .contact-li svg {
                width: 17px;
                height: 17px;
                fill: var(--orange);
                flex: 0 0 auto;
                margin-top: 4px
            }

        .newsbox input {
            width: 100%;
            padding: 13px 16px;
            border-radius: 10px;
            border: 1.5px solid rgba(255,255,255,.18);
            background: rgba(255,255,255,.07);
            color: #fff;
            font-size: 14.5px;
            margin-bottom: 12px;
            font-family: inherit
        }

            .newsbox input::placeholder {
                color: #8fa7c6
            }

            .newsbox input:focus {
                outline: 2px solid var(--orange);
                border-color: var(--orange)
            }

        .fbottom {
            border-top: 1px solid rgba(255,255,255,.1);
            padding: 22px 0;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            font-size: 13.5px
        }

            .fbottom a {
                color: #b9cbe4
            }

                .fbottom a:hover {
                    color: var(--orange)
                }

        /* back to top */
        #totop {
            position: fixed;
            right: 26px;
            bottom: 26px;
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: var(--orange);
            color: #12233c;
            border: none;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s,transform .3s;
            z-index: 60;
            box-shadow: 0 10px 26px rgba(255,164,21,.45)
        }

            #totop.show {
                opacity: 1;
                pointer-events: auto
            }

            #totop:hover {
                transform: translateY(-4px)
            }

        /* mobile */
        .hamb {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px
        }

            .hamb svg {
                width: 28px;
                height: 28px;
                fill: var(--ink)
            }

        @media (max-width:1280px) {
            nav.desktop {
                gap: 22px
            }

                nav.desktop a {
                    font-size: 14.7px
                }
        }

        @media (max-width:1120px) {
            nav.desktop {
                gap: 18px
            }

            .logo-txt {
                display: none
            }

            .logo-mark {
                height: 46px
            }
        }

        @media (max-width:1020px) {
            nav.desktop {
                display: none
            }

            .hamb {
                display: block
            }

            .head-phone {
                display: none
            }

            .hero .container {
                grid-template-columns: 1fr;
                padding-top: 64px;
                padding-bottom: 90px
            }

            .hero-visual {
                min-height: 340px;
                margin-top: 20px
            }

            .counters .grid {
                grid-template-columns: repeat(2,1fr)
            }

            .about .container, .quote-sec .container, .faqwrap .container {
                grid-template-columns: 1fr;
                gap: 50px
            }

            .services .grid {
                grid-template-columns: repeat(2,1fr)
            }

            .steps .grid {
                grid-template-columns: 1fr;
                gap: 44px
            }

            .step-arrow {
                display: none
            }

            .blog .grid {
                grid-template-columns: 1fr
            }

            footer .cols {
                grid-template-columns: 1fr 1fr
            }

            .exp-badge {
                right: 8px
            }

            .logo-txt {
                display: block
            }

            .logo-mark {
                height: 44px
            }

            .logo-name {
                font-size: 21px
            }
        }

        @media (max-width:620px) {
            .services .grid, .counters .grid, footer .cols {
                grid-template-columns: 1fr
            }

            .partners {
                padding: 18px 0 80px
            }

                .partners img {
                    height: 28px;
                    max-width: 130px;
                    margin: 0 15px
                }

                    .partners img.tall {
                        height: 38px
                    }

                .partners i {
                    font-size: 14px
                }

            .quote-form .row {
                grid-template-columns: 1fr
            }

            .topbar {
                display: none
            }

            .section {
                padding: 70px 0
            }

            .logo {
                gap: 11px
            }

            .logo-mark {
                height: 36px
            }

            .logo-txt {
                padding-left: 11px
            }

            .logo-name {
                font-size: 18px
            }

            .logo-sub {
                display: none
            }

            .head-cta .btn {
                padding: 12px 18px;
                font-size: 14px
            }

            .flogo {
                height: 70px
            }
        }

        @media (max-width:440px) {
            .logo {
                gap: 9px
            }

            .logo-txt {
                display: block;
                padding-left: 9px
            }

            .logo-name {
                font-size: 16px
            }

            .logo-mark {
                height: 34px
            }

            header.main .container {
                gap: 12px
            }

            .head-cta .btn {
                padding: 10px 12px;
                font-size: 13px
            }

            .flogo {
                height: 62px
            }
        }

        .mobilenav {
            display: none;
            background: #fff;
            border-top: 1px solid var(--line)
        }

            .mobilenav.open {
                display: block
            }

            .mobilenav a {
                display: block;
                padding: 14px 24px;
                font-weight: 600;
                color: var(--ink);
                border-bottom: 1px solid var(--wash)
            }

                .mobilenav a:hover {
                    color: var(--blue);
                    background: var(--wash)
                }

        @media (max-width:380px) {
            header.main .container {
                gap: 8px
            }

            .logo {
                gap: 7px
            }

            .logo-txt {
                padding-left: 7px
            }

            .logo-name {
                font-size: 15px
            }

            .logo-mark {
                height: 30px
            }

            .head-cta .btn {
                padding: 9px 10px;
                font-size: 12.5px
            }
        }

        @media (prefers-reduced-motion:reduce) {
            *, *::before, *::after {
                animation-duration: .001s !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001s !important
            }

            html {
                scroll-behavior: auto
            }
        }