:root{
    --navy:#06234a;
    --navy-2:#0a3267;
    --blue:#1778ff;
    --orange:#ff6a2a;
    --green:#16b875;
    --purple:#7b4dff;
    --text:#17243c;
    --muted:#66758e;
    --line:#e7edf5;
    --soft:#f6f9fd;
    --white:#fff;
    --radius:20px;
    --shadow:0 18px 50px rgba(18,48,88,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
figure{
	max-width:100% !important
}
figure img{
	border-radius:15px;
}
/* ==============================
   DEFAULT TABLE
============================== */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 25px 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.6;
    box-shadow: 0 5px 20px rgba(15, 35, 65, 0.05);
}

table th,
table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
    border-right: 1px solid #e8edf3;
    border-bottom: 1px solid #e8edf3;
}

table th:last-child,
table td:last-child {
    border-right: 0;
}

table tr:last-child td {
    border-bottom: 0;
}

/* Header */
table thead th {
    background: #06234a;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

/* Nếu table không có thead nhưng hàng đầu dùng TH */
table > tbody > tr:first-child > th {
    background: #06234a;
    color: #fff;
    font-weight: 700;
}

/* Zebra */
table tbody tr:nth-child(even) td {
    background: #f7f9fc;
}

/* Hover */
table tbody tr:hover td {
    background: #eef6ff;
}

/* Nội dung */
table td {
    color: #44546a;
}

/* Link trong bảng */
table td a {
    color: #1778ff;
    font-weight: 600;
}

table td a:hover {
    color: #ff6a2a;
}

/* Strong */
table td strong {
    color: #17243c;
}

/* Mobile */
@media (max-width: 768px) {

    .prose {
        overflow-x: auto;
    }

    table {
        max-width: 100%;
        font-size: 13px;
    }

    table th,
    table td {
        padding: 8px;
    }
}
.service-card a{
	font-weight:normal !important
}
a{color:inherit;text-decoration:none}
/* ==============================
   RELATED POSTS
============================== */

.csw-related-posts {
    margin: 45px 0 20px;
}

.csw-related-title {
    margin: 0 0 22px;
    padding-left: 14px;

    color: #06234a;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;

    border-left: 5px solid #ff6a2a;
}

.csw-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.csw-related-item {
    overflow: hidden;

    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(18, 48, 88, 0.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.csw-related-item:hover {
    transform: translateY(-4px);

    box-shadow: 0 16px 40px rgba(18, 48, 88, 0.11);
}


/* IMAGE */

.csw-related-thumb {
    display: block;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #f2f6fb;
}

.csw-related-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}

.csw-related-item:hover .csw-related-thumb img {
    transform: scale(1.05);
}

.csw-related-no-image {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #eef5ff,
        #f8fbff
    );

    color: #8a9ab0;
    font-weight: 700;
}


/* CONTENT */

.csw-related-content {
    padding: 18px;
}

.csw-related-meta {
    margin-bottom: 7px;

    color: #ff6a2a;
    font-size: 12px;
    font-weight: 700;
}

.csw-related-post-title {
    margin: 0 0 14px;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}

.csw-related-post-title a {
    color: #06234a;
}

.csw-related-post-title a:hover {
    color: #1778ff;
}

.csw-related-more {
    color: #1778ff;

    font-size: 13px;
    font-weight: 700;
}


/* ==============================
   TABLET
============================== */

@media (max-width: 900px) {

    .csw-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ==============================
   MOBILE
============================== */

@media (max-width: 600px) {

    .csw-related-title {
        font-size: 22px;
    }

    .csw-related-grid {
        grid-template-columns: 1fr;
    }

}
/* ==================================
   PAGINATION
================================== */

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    margin: 45px 0 20px;
}

/* Tất cả nút */

.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 42px;
    padding: 0 14px;

    background: #fff;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    color: #52627a;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition: all .2s ease;
}


/* Hover */

.nav-links a.page-numbers:hover {
    color: #1778ff;

    background: #f2f7ff;
    border-color: #bcd6ff;

    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(23, 120, 255, .10);
}


/* Trang hiện tại */

.nav-links .page-numbers.current {
    color: #fff;

    background: linear-gradient(
        135deg,
        #ff7b33,
        #ff5724
    );

    border-color: transparent;

    box-shadow: 0 8px 20px rgba(255, 106, 42, .22);
}


/* Previous / Next */

.nav-links .prev,
.nav-links .next {
    min-width: auto;
    padding: 0 18px;

    color: #06234a;

    background: #f7f9fc;

    font-weight: 700;
}


/* Icon cho nút trước */

.nav-links .prev::before {
    content: "←";
    margin-right: 7px;

    font-size: 16px;
}


/* Icon cho nút tiếp */

.nav-links .next::after {
    content: "→";
    margin-left: 7px;

    font-size: 16px;
}


/* Hover Previous / Next */

.nav-links .prev:hover,
.nav-links .next:hover {
    color: #fff !important;

    background: #06234a !important;
    border-color: #06234a !important;

    box-shadow: 0 8px 20px rgba(6, 35, 74, .15);
}


/* Dấu ... */

.nav-links .dots {
    border: 0;
    background: transparent;
    box-shadow: none;

    min-width: 28px;
    padding: 0 5px;

    color: #8a98aa;
}


/* ==================================
   MOBILE
================================== */

@media (max-width: 600px) {

    .nav-links {
        gap: 6px;
        margin: 35px 0 15px;
    }

    .nav-links .page-numbers {
        min-width: 38px;
        height: 38px;
        padding: 0 11px;

        border-radius: 9px;

        font-size: 13px;
    }

    .nav-links .prev,
    .nav-links .next {
        padding: 0 13px;
    }
}

/* ==================================
   WORDPRESS CODE BLOCK
================================== */

.wp-block-code {
    position: relative;

    margin: 28px 0;
    padding: 52px 22px 22px;

    background: #07182d;

    border: 1px solid #163458;
    border-radius: 14px;

    overflow-x: auto;

    box-shadow:
        0 12px 35px rgba(6, 35, 74, .12);

    color: #d8e5f5;

    font-size: 14px;
    line-height: 1.75;

    tab-size: 4;
}


/* Thanh trên giống code editor */

.wp-block-code::before {
    content: "";

    position: absolute;
    top: 18px;
    left: 20px;

    width: 10px;
    height: 10px;

    background: #ff6257;
    border-radius: 50%;

    box-shadow:
        18px 0 0 #ffbd2e,
        36px 0 0 #28c840;
}


/* Đường phân cách header */

.wp-block-code::after {
    content: "";

    position: absolute;

    top: 44px;
    left: 0;
    right: 0;

    height: 1px;

    background: rgba(255, 255, 255, .07);
}


/* CODE */

.wp-block-code code {
    display: block;

    padding: 0;
    margin: 0;

    background: transparent;
    border: 0;

    color: #d8e5f5;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: inherit;
    line-height: inherit;

    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
}


/* Scrollbar */

.wp-block-code::-webkit-scrollbar {
    height: 9px;
}

.wp-block-code::-webkit-scrollbar-track {
    background: #0b203a;
}

.wp-block-code::-webkit-scrollbar-thumb {
    background: #29486b;
    border-radius: 20px;
    border: 2px solid #0b203a;
}

.wp-block-code::-webkit-scrollbar-thumb:hover {
    background: #3b628e;
}


/* ==================================
   INLINE CODE
   Ví dụ: dùng hàm <code>WP_Query()</code>
================================== */

.prose :not(pre) > code {
    display: inline-block;

    padding: 2px 7px;

    background: #eef5ff;
    border: 1px solid #d6e6fb;
    border-radius: 6px;

    color: #d94f16;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: .88em;
    line-height: 1.5;
}


/* ==================================
   MOBILE
================================== */

@media (max-width: 600px) {

    .wp-block-code {
        margin: 22px 0;

        padding:
            48px
            16px
            18px;

        border-radius: 12px;

        font-size: 13px;
        line-height: 1.7;
    }

    .wp-block-code::before {
        top: 17px;
        left: 16px;
    }

}
/* ==================================
   WORDPRESS LIST - DEFAULT
================================== */

.wp-block-list {
    margin: 24px 0;
    padding: 0;

    list-style: none;
}

.wp-block-list li {
    position: relative;

    margin: 10px 0;
    padding: 12px 16px 12px 44px;

    background: #f8fbff;

    border: 1px solid #e3ebf5;
    border-radius: 10px;

    color: #44546a;
	font-weight:500;
    font-size: 15px;
    line-height: 1.6;

    transition: all .2s ease;
}


/* ICON CHECK */

.wp-block-list li::before {
    content: "✓";

    position: absolute;

    left: 14px;
    top: 50%;

    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    background: #eafaf3;

    border-radius: 50%;

    color: #16b875;

    font-size: 13px;
    font-weight: 900;
}


/* Hover */

.wp-block-list li:hover {
    background: #f2f7ff;

    border-color: #cfe0f5;

    transform: translateX(3px);
}


/* Strong */

.wp-block-list li strong {
    color: #06234a;
}


/* Link */

.wp-block-list li a {
    color: #1778ff;
    font-weight: 600;
}

.wp-block-list li a:hover {
    color: #ff6a2a;
}


/* ==================================
   MOBILE
================================== */

@media (max-width: 600px) {

    .wp-block-list li {
        padding:
            11px
            13px
            11px
            40px;

        font-size: 14px;
    }

    .wp-block-list li::before {
        left: 12px;

        width: 20px;
        height: 20px;

        font-size: 12px;
    }

}

/* ==================================
   WORDPRESS IMAGE
================================== */

.wp-block-image {
    margin: 30px 0;
}

.wp-block-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;

    border-radius: 12px;
    border: 1px solid #e7edf5;

    box-shadow:
        0 8px 20px rgba(6, 35, 74, 0.08),
        0 20px 45px rgba(6, 35, 74, 0.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

/* Hover nhẹ */

.wp-block-image:hover img {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(6, 35, 74, 0.10),
        0 25px 55px rgba(6, 35, 74, 0.08);
}


/* Caption */

.wp-block-image figcaption {
    margin: 10px 10px 0;

    color: #7a899e;

    font-size: 13px;
    font-style: italic;
    line-height: 1.5;

    text-align: center;
}


/* Mobile */

@media (max-width: 600px) {

    .wp-block-image {
        margin: 22px 0;
    }

    .wp-block-image img {
        border-radius: 9px;

        box-shadow:
            0 6px 16px rgba(6, 35, 74, 0.08),
            0 15px 30px rgba(6, 35, 74, 0.05);
    }
}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.narrow{width:min(840px,calc(100% - 40px))}
.site-header{
    position:sticky;top:0;z-index:100;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
}
.header-inner{height:76px;display:flex;align-items:center;gap:28px}
.site-brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand-mark{
    width:44px;height:44px;border:2px solid var(--orange);
    border-radius:12px;display:grid;place-items:center;
    font-size:12px;font-weight:900;color:var(--orange)
}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text strong{font-size:15px;color:var(--navy)}
.brand-text small{font-size:10px;color:var(--muted);margin-top:5px}
.custom-logo{max-height:48px;width:auto}
.main-nav .menu{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.main-nav a{font-size:14px;font-weight:600;color:#30415d}
.main-nav a:hover{color:var(--orange)}
.menu-toggle{display:none;border:0;background:none;font-size:24px}
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:46px;padding:0 20px;border-radius:12px;
    font-weight:800;font-size:14px;transition:.2s ease;
	cursor:pointer
}
.btn-primary{background:linear-gradient(135deg,#ff7b33,#ff5724);color:white;box-shadow:0 12px 26px rgba(255,106,42,.22)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{border:1px solid #bdc9da;background:#fff;color:var(--navy)}
.btn-lg{min-height:54px;padding:0 28px}
.hero{
    overflow:hidden;
    background:
        radial-gradient(circle at 16% 15%,rgba(23,120,255,.10),transparent 28%),
        radial-gradient(circle at 92% 10%,rgba(123,77,255,.11),transparent 24%),
        linear-gradient(180deg,#f6fbff,#fff);
    padding:76px 0 58px;
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:70px}
.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:900;color:var(--orange)}
.hero h1,.page-hero h1{font-size:clamp(40px,5vw,60px);line-height:1.04;letter-spacing:-.045em;margin:0px 0 20px;color:var(--navy)}
.hero h1 span{display:block;color:var(--orange)}
.hero-lead{font-size:18px;color:var(--muted);max-width:650px}
.hero-actions{display:flex;gap:12px;margin-top:28px}
.hero-points{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;color:#4e607a;font-size:13px}
.hero-visual{min-height:410px;position:relative}
.browser-card{
    position:absolute;inset:40px 0 20px 30px;
    background:#fff;border:1px solid #dfe9f6;
    border-radius:24px;box-shadow:0 30px 70px rgba(25,76,133,.18);
    transform:rotate(-2deg)
}
.browser-top{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 18px}
.browser-top span{width:10px;height:10px;border-radius:50%;background:#d6deea}
.browser-top span:first-child{background:#ff6a2a}.browser-top span:nth-child(2){background:#ffc347}.browser-top span:nth-child(3){background:#21c784}
.browser-body{display:grid;grid-template-columns:100px 1fr;min-height:300px}
.browser-sidebar{background:linear-gradient(180deg,#f3f7fd,#eaf1fa);border-right:1px solid var(--line)}
.browser-content{padding:44px 32px}
.line{height:16px;border-radius:999px;background:#dce8f8;margin-bottom:14px}.line.lg{width:76%;height:24px;background:#2f78e8}.line.md{width:54%}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}.mini-grid i{height:92px;border-radius:14px;background:#eff5fb}
.floating-tag{position:absolute;padding:12px 16px;border-radius:14px;color:#fff;font-weight:900;font-size:13px;box-shadow:var(--shadow)}
.tag-a{top:5px;right:34px;background:var(--blue)}.tag-b{right:-8px;bottom:70px;background:var(--green)}.tag-c{left:0;bottom:10px;background:var(--purple)}

/* ==================================
   STATS
================================== */

.stats {
    position: relative;
    z-index: 10;
    margin-top: -38px;
    padding: 0 0 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(18, 48, 88, 0.10);
    overflow: hidden;
}

/* ITEM */

.stat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 24px 28px;
}

/* Đường ngăn giữa */

.stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 0;
    width: 1px;
    height: 50%;
    background: #e7edf5;
}

/* ICON */

.stat-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;
}

.stat-icon svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

/* Icon colors */

.stat-orange {
    color: #ff6a2a;
    background: #fff1ea;
}

.stat-blue {
    color: #1778ff;
    background: #edf5ff;
}

.stat-green {
    color: #16b875;
    background: #eafaf3;
}

.stat-purple {
    color: #7b4dff;
    background: #f2eeff;
}

/* CONTENT */

.stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-content strong {
    margin: 0;
    color: #06234a;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.stat-content span {
    margin-top: 7px;
    color: #66758e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* HOVER */

.stat-item {
    transition:
        background-color .25s ease,
        transform .25s ease;
}

.stat-item:hover {
    background: #f9fbfe;
}

.stat-item:hover .stat-icon {
    transform: translateY(-3px);
}

.stat-icon {
    transition: transform .25s ease;
}

/* =========================
   TABLET
========================= */

@media (max-width: 980px) {

    .stats {
        margin-top: -25px;
    }

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

    .stat-item:nth-child(2)::after {
        display: none;
    }

    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {
        border-bottom: 1px solid #e7edf5;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .stats {
        margin-top: -15px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        border-radius: 16px;
    }

    .stat-item {
        min-height: 110px;
        padding: 18px 14px;
        gap: 11px;
    }

    .stat-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 12px;
    }

    .stat-icon svg {
        width: 21px;
        height: 21px;
    }

    .stat-content strong {
        font-size: 22px;
    }

    .stat-content span {
        margin-top: 4px;
        font-size: 11px;
    }
}
.section{padding:82px 0}.section-soft{background:var(--soft)}.section-navy{background:linear-gradient(135deg,var(--navy),#0d3c75);color:white}
.section-head{text-align:center;max-width:900px;margin:0 auto 36px}.section-head h2{font-size:clamp(30px,4vw,44px);line-height:1.15;letter-spacing:-.03em;color:var(--navy);margin:0px 0}.section-head p{color:var(--muted)}
.section-head.row-between{max-width:none;display:flex;align-items:end;justify-content:space-between;text-align:left}.section-head.light h2{color:white}.section-head.light .eyebrow{color:#ffb28f}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{padding:28px;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 12px 36px rgba(24,55,91,.05)}
.service-card.orange{background:#fff8f4}.service-card.blue{background:#f2f7ff}.service-card.green{background:#f2fbf7}.service-card.purple{background:#f7f4ff}
.service-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#fff;font-size:25px;box-shadow:0 10px 25px rgba(40,60,90,.08)}
.service-card h3{font-size:20px;color:var(--navy);margin:22px 0 8px}.service-card p{font-size:14px;color:var(--muted);min-height:70px}.service-card a{font-weight:800;font-size:13px;color:var(--blue)}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.project-card,.post-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 36px rgba(24,55,91,.05)}
.project-thumb,.post-thumb{display:block;aspect-ratio:16/10;background:linear-gradient(135deg,#dfeeff,#f5f8fc);overflow:hidden}.project-thumb img,.post-thumb img{width:100%;height:100%;object-fit:cover}
.project-placeholder{width:100%;height:100%;display:grid;place-items:center;font-weight:900;color:#6c7c94}
.project-content,.post-content{padding:20px}.project-content h3,.project-content h2,.post-content h3{margin:0 0 8px;font-size:19px;line-height:1.35;color:var(--navy)}.project-content p,.post-content p{color:var(--muted);font-size:14px}
.text-link{color:var(--blue);font-weight:800;font-size:13px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-item{padding:24px;border-top:1px solid var(--line)}.feature-item b{color:var(--orange);font-size:32px}.feature-item h3{margin:12px 0 6px;color:var(--navy)}.feature-item p{font-size:14px;color:var(--muted)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.process-grid>div{padding:24px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:18px}.process-grid span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--navy);font-weight:900}.process-grid h3{margin-bottom:6px}.process-grid p{margin:0;color:#cbd8e8;font-size:14px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.post-date{font-size:12px;color:var(--orange);font-weight:800}
.cta-section{padding:20px 0 82px}.cta-box{background:linear-gradient(135deg,var(--navy),#0e3d75);color:#fff;border-radius:24px;padding:38px 42px;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-box h2{font-size:34px;margin:0px}.cta-box p{color:#cbd8e8;margin:0}
.page-hero{background:var(--soft);padding:64px 0}.page-hero h1{font-size:48px}.archive-desc,.post-meta{color:var(--muted)}
.prose{font-size:17px}.prose h2,.prose h3,.prose h4{color:var(--navy);line-height:1.3}.prose a{color:#333;text-decoration:underline}.single-thumb{margin-bottom:30px;border-radius:18px;overflow:hidden}
.list-post{padding:24px 0;border-bottom:1px solid var(--line)}.list-post h2{margin:0 0 10px}
.pagination-wrap{margin-top:40px}
.site-footer{background:#041d3d;color:#c5d1df;padding:60px 0 24px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}.footer-grid h4,.footer-brand{color:#fff}.footer-grid a{display:block;margin:9px 0}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;font-size:12px}
.error-404{text-align:center;padding:80px 0}.error-404 h1{font-size:46px;color:var(--navy)}

@media (max-width:980px){
    .header-cta{display:none}.menu-toggle{display:block}
    .main-nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:20px}
    .main-nav.is-open{display:block}.main-nav .menu{flex-direction:column;align-items:flex-start}
    .hero-grid{grid-template-columns:1fr}.hero-visual{min-height:360px}
    .service-grid,.feature-grid,.process-grid{grid-template-columns:repeat(2,1fr)}
    .project-grid,.post-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .container{width:min(100% - 28px,1180px)}
    .hero{padding-top:48px}.hero h1{font-size:42px}.hero-lead{font-size:16px}.hero-actions{flex-direction:column;align-items:stretch}.hero-points{gap:10px 18px}
    .hero-visual{min-height:300px}.browser-card{inset:30px 10px 20px 10px}.floating-tag{font-size:11px;padding:9px 11px}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:20px}.stats-grid>div{border-right:0}.stats-grid{padding:20px}
    .section{padding:58px 0}.section-head.row-between{display:block}.section-head.row-between .text-link{display:inline-block;margin-top:10px}
    .service-grid,.feature-grid,.process-grid,.project-grid,.post-grid{grid-template-columns:1fr}
    .cta-box{padding:30px 24px;display:block}.cta-box .btn{margin-top:22px}.cta-box h2{font-size:28px}
    .footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
}