:root {
        --navy: #061B3A;
        --navy-2: #071D3D;
        --blue: #0B294D;
        --cyan: #08A9E6;
        --cyan-soft: #E9F8FD;
        --white: #FFFFFF;
        --text: #102238;
        --muted: #5E7085;
        --line: #DCE7EF;
        --surface: #F6FAFC;
        --shadow: 0 18px 50px rgba(6, 27, 58, 0.08);
        --shadow-hover: 0 25px 65px rgba(6, 27, 58, 0.14);
        --radius-lg: 20px;
        --radius-md: 16px;
        --container: 1180px;
        --ease: 0.3s ease;
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        min-width: 0;
        overflow-x: hidden;
        color: var(--text);
        background: var(--white);
        font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: clamp(0.94rem, 0.25vw + 0.88rem, 1rem);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    img,
    svg {
        display: block;
        max-width: 100%;
    }

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

    button,
    input {
        font: inherit;
    }

    button {
        cursor: pointer;
    }

    :focus-visible {
        outline: 3px solid rgba(8, 169, 230, 0.5);
        outline-offset: 4px;
    }

    .container {
        width: min(calc(100% - 32px), var(--container));
        margin-inline: auto;
    }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid rgba(220, 231, 239, 0.8);
        backdrop-filter: blur(14px);
    }

    .nav {
        min-height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .brand {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        font-size: clamp(1.55rem, 1.5vw + 1rem, 2rem);
        font-weight: 800;
        letter-spacing: -0.055em;
        line-height: 1;
    }

    .brand img {
        max-width: 204px;
    }

    .brand .prosta {
        color: var(--cyan);
    }

    .brand .vive {
        color: var(--navy);
    }

    .nav-panel {
        display: flex;
        align-items: center;
        gap: clamp(18px, 2.4vw, 34px);
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: clamp(15px, 2vw, 28px);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-links a {
        position: relative;
        color: var(--blue);
        font-size: clamp(0.78rem, 0.25vw + 0.7rem, 0.9rem);
        font-weight: 650;
        white-space: nowrap;
        transition: color var(--ease);
    }

    .nav-links a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: -8px;
        height: 2px;
        border-radius: 99px;
        background: var(--cyan);
        transition: right var(--ease);
    }

    .nav-links a:hover,
    .nav-links a[aria-current="page"] {
        color: var(--cyan);
    }

    .nav-links a:hover::after,
    .nav-links a[aria-current="page"]::after {
        right: 0;
    }

    .cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0 20px;
        border: 0;
        border-radius: 10px;
        background: var(--cyan);
        color: var(--white);
        font-size: clamp(0.78rem, 0.2vw + 0.72rem, 0.88rem);
        font-weight: 800;
        box-shadow: 0 9px 24px rgba(8, 169, 230, 0.22);
        transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
    }

    .cta:hover {
        transform: translateY(-2px);
        background: #079bd2;
        box-shadow: 0 13px 28px rgba(8, 169, 230, 0.3);
    }

    .menu-toggle {
        display: none;
        width: 44px;
        height: 44px;
        padding: 9px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--white);
    }

    .menu-toggle span {
        display: block;
        height: 2px;
        margin: 5px 0;
        border-radius: 99px;
        background: var(--navy);
        transition: transform var(--ease), opacity var(--ease);
    }

    .hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: clamp(390px, 42vw, 570px);
        display: grid;
        align-items: center;
        /* background:
        radial-gradient(circle at 75% 25%, rgba(8, 169, 230, 0.11), transparent 30%),
        linear-gradient(135deg, var(--navy), var(--navy-2) 60%, #09284b); */
        background: url('../images/hero.png');
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
        color: var(--white);
    }

    .hero::before,
    .hero::after {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
    }

    /* .hero::before {
        inset: -20%;
        opacity: 0.22;
        background-image:
            radial-gradient(circle, rgba(8, 169, 230, .55) 1px, transparent 1.5px),
            radial-gradient(circle, transparent 0 28px, rgba(8, 169, 230, .18) 29px 30px, transparent 31px);
        background-size: 54px 54px, 180px 180px;
        background-position: 20px 10px, 70% 15%;
        mask-image: linear-gradient(to bottom, black, transparent 90%);
    } */

    .hero::after {
        width: 520px;
        height: 520px;
        right: -180px;
        top: -170px;
        border: 1px solid rgba(8, 169, 230, 0.16);
        border-radius: 50%;
        box-shadow:
            0 0 0 50px rgba(8, 169, 230, 0.025),
            0 0 0 110px rgba(8, 169, 230, 0.018);
    }

    .hero-inner {
        position: relative;
        padding: clamp(64px, 9vw, 116px) 0 clamp(90px, 11vw, 200px);

    }

    .hero-kicker,
    .eyebrow {
        color: var(--cyan);
        font-size: clamp(0.7rem, 0.2vw + 0.64rem, 0.82rem);
        font-weight: 850;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
        font-size: clamp(1.2rem, 5.4vw, 2rem);
    }

    .hero-kicker::before {
        content: "";
        width: 30px;
        height: 2px;
        border-radius: 99px;
        background: var(--cyan);
    }

    .hero h1 {
        max-width: 800px;
        margin: 0 0 2rem;
        font-size: clamp(2.3rem, 5.4vw, 4rem);
        line-height: 1.03;
        letter-spacing: 0;
        font-weight: 850;
    }

    .hero h1 span {
        color: var(--cyan);
    }

    .hero-copy {
        max-width: 746px;
        margin: 24px 0 0;
        color: rgba(255, 255, 255, .78);
        font-size: clamp(0.98rem, 0.65vw + 0.78rem, 1.7rem);
        line-height: 1.75;
    }

    /* .hero-wave {
        position: absolute;
        left: -5%;
        bottom: -1px;
        width: 110%;
        height: clamp(55px, 7vw, 100px);
        background: var(--white);
        clip-path: ellipse(75% 75% at 50% 100%);
        z-index: 2;
    } */

    .hero-wave::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, transparent, var(--cyan), transparent);
        opacity: .9;
    }

    .section {
        position: relative;
        padding: clamp(58px, 8vw, 96px) 0;
    }

    .featured {
        overflow: hidden;
        background: var(--white);
        padding-bottom: 0;
    }

    .featured::before {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        right: -90px;
        top: 30px;
        border-radius: 50%;
        background-image: radial-gradient(var(--cyan) 1.2px, transparent 1.4px);
        background-size: 18px 18px;
        opacity: .08;
        pointer-events: none;
    }

    .featured-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
        gap: clamp(34px, 6vw, 82px);
        align-items: center;
    }

    .featured-media {
        position: relative;
        /* min-height: clamp(2px, 40vw, 286px); */
        overflow: hidden;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        border: 1px solid var(--line);
        background: var(--navy);
    }

    .featured-media svg {
        width: 100%;
        height: 100%;
        min-height: inherit;
        object-fit: cover;
        transition: transform .6s ease;
    }

    .featured-media:hover svg {
        transform: scale(1.025);
    }

    .featured-content {
        max-width: 570px;
    }

    .featured-title {
        margin: 10px 0 18px;
        font-size: clamp(1.9rem, 3vw, 2.05rem);
        line-height: 1.1;
        letter-spacing: -0.045em;
        color: var(--navy);
    }

    .featured-excerpt {
        margin: 0;
        color: var(--muted);
        font-size: clamp(0.96rem, .3vw + .86rem, 1.08rem);
    }

    .meta {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 22px;
        margin-top: 24px;
        color: #607287;
        font-size: clamp(.72rem, .16vw + .67rem, .82rem);
        font-weight: 650;
    }

    .meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .meta-icon {
        width: 16px;
        height: 16px;
        display: inline-grid;
        place-items: center;
        color: var(--cyan);
    }

    .read-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        color: var(--blue);
        font-size: clamp(.8rem, .18vw + .75rem, .9rem);
        font-weight: 850;
        transition: color var(--ease), gap var(--ease);
    }

    .read-link:hover {
        color: var(--cyan);
        gap: 12px;
    }

    .blog-section {
        background:
            linear-gradient(180deg, #fff 0%, #F9FCFE 100%);
        overflow: hidden;
    }

    .blog-section::before {
        content: "";
        position: absolute;
        left: -80px;
        top: 110px;
        width: 220px;
        height: 320px;
        opacity: .065;
        background:
            radial-gradient(circle, var(--cyan) 1.5px, transparent 1.7px);
        background-size: 18px 18px;
        pointer-events: none;
    }

    .section-heading {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 32px;
        align-items: end;
        margin-bottom: 32px;
    }

    .section-title {
        margin: 6px 0 8px;
        color: var(--navy);
        font-size: clamp(1.8rem, 3.2vw, 3rem);
        line-height: 1.08;
        letter-spacing: -0.045em;
    }

    .section-intro {
        max-width: 620px;
        margin: 0;
        color: var(--muted);
        font-size: clamp(.9rem, .25vw + .82rem, 1rem);
    }

    .search {
        position: relative;
        width: min(100%, 330px);
    }

    .search input {
        width: 100%;
        min-height: 50px;
        padding: 0 46px 0 18px;
        border: 1px solid #CBD9E4;
        border-radius: 12px;
        background: var(--white);
        color: var(--text);
        font-size: clamp(.82rem, .18vw + .76rem, .9rem);
        box-shadow: 0 5px 20px rgba(6, 27, 58, .035);
        transition: border-color var(--ease), box-shadow var(--ease);
    }

    .search input::placeholder {
        color: #8A99A8;
    }

    .search input:focus {
        border-color: var(--cyan);
        box-shadow: 0 0 0 4px rgba(8, 169, 230, .1);
        outline: none;
    }

    .search svg {
        position: absolute;
        right: 16px;
        top: 50%;
        width: 19px;
        height: 19px;
        transform: translateY(-50%);
        color: var(--blue);
        pointer-events: none;
    }

    .filters {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 28px;
    }

    .filter {
        min-height: 38px;
        padding: 0 15px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--white);
        color: #516579;
        font-size: clamp(.72rem, .17vw + .67rem, .8rem);
        font-weight: 750;
        transition: color var(--ease), border-color var(--ease), background var(--ease), transform var(--ease);
    }

    .filter:hover {
        color: var(--cyan);
        border-color: rgba(8, 169, 230, .45);
        transform: translateY(-1px);
    }

    .filter.active {
        border-color: var(--cyan);
        background: var(--cyan);
        color: var(--white);
    }

    .blog-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(20px, 2.2vw, 30px);
    }

    .blog-card {
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--white);
        box-shadow: 0 10px 32px rgba(6, 27, 58, .055);
        transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }

    .blog-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: rgba(8, 169, 230, .28);
    }

    .card-media {
        position: relative;
        aspect-ratio: 2 / 1;
        overflow: hidden;
        background: var(--navy);
    }

    .card-media svg {
        width: 100%;
        height: 100%;
        transition: transform var(--ease);
    }

    .blog-card:hover .card-media svg {
        transform: scale(1.04);
    }

    .card-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 22px;
    }

    .card-category {
        color: var(--cyan);
        font-size: clamp(.68rem, .16vw + .62rem, .76rem);
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .card-title {
        margin: 7px 0 8px;
        color: var(--navy);
        font-size: clamp(1.05rem, .7vw + .8rem, 1.35rem);
        line-height: 1.2;
        letter-spacing: -.025em;
    }

    .card-excerpt {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        color: var(--muted);
        font-size: clamp(.8rem, .22vw + .73rem, .91rem);
        line-height: 1.62;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .card-body .meta {
        margin-top: auto;
        padding-top: 18px;
    }

    .card-link {
        margin-top: 14px;
    }

    .empty-state {
        display: none;
        grid-column: 1 / -1;
        padding: 50px 24px;
        border: 1px dashed #B8CAD8;
        border-radius: var(--radius-md);
        background: var(--white);
        text-align: center;
    }

    .empty-state.show {
        display: block;
    }

    .empty-state h3 {
        margin: 0 0 6px;
        color: var(--navy);
        font-size: clamp(1.2rem, .6vw + 1rem, 1.5rem);
    }

    .empty-state p {
        margin: 0;
        color: var(--muted);
        font-size: clamp(.82rem, .2vw + .76rem, .9rem);
    }

    .pagination {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 42px;
    }

    .page-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: var(--white);
        color: var(--blue);
        font-size: clamp(.72rem, .15vw + .68rem, .8rem);
        font-weight: 800;
    }

    .page-btn.active,
    .page-btn:hover {
        border-color: var(--cyan);
        background: var(--cyan);
        color: var(--white);
    }

    .newsletter {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: var(--navy);
        color: var(--white);
    }

    .newsletter::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: .13;
        background-image:
            radial-gradient(circle, var(--cyan) 1px, transparent 1.5px),
            linear-gradient(135deg, transparent 49.5%, rgba(8, 169, 230, .4) 50%, transparent 50.5%);
        background-size: 28px 28px, 150px 150px;
    }

    .newsletter-inner {
        display: grid;
        grid-template-columns: 1fr minmax(300px, 500px);
        gap: 40px;
        align-items: center;
    }

    .newsletter-title {
        margin: 6px 0 8px;
        font-size: clamp(1.65rem, 3vw, 2.65rem);
        line-height: 1.1;
        letter-spacing: -.045em;
    }

    .newsletter-copy {
        max-width: 570px;
        margin: 0;
        color: rgba(255, 255, 255, .72);
        font-size: clamp(.84rem, .3vw + .76rem, .98rem);
    }

    .subscribe-form {
        display: flex;
        padding: 5px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 12px;
        background: rgba(255, 255, 255, .08);
    }

    .subscribe-form input {
        min-width: 0;
        flex: 1;
        border: 0;
        outline: 0;
        padding: 0 14px;
        background: transparent;
        color: var(--white);
        font-size: clamp(.78rem, .2vw + .72rem, .88rem);
    }

    .subscribe-form input::placeholder {
        color: rgba(255, 255, 255, .55);
    }

    .subscribe-form button {
        min-height: 46px;
        padding: 0 18px;
        border: 0;
        border-radius: 9px;
        background: var(--cyan);
        color: var(--white);
        font-size: clamp(.76rem, .2vw + .7rem, .86rem);
        font-weight: 800;
    }

    .form-note {
        margin: 9px 0 0;
        color: rgba(255, 255, 255, .52);
        font-size: clamp(.64rem, .13vw + .6rem, .72rem);
    }

    .form-status {
        min-height: 20px;
        margin-top: 6px;
        color: var(--cyan);
        font-size: clamp(.68rem, .14vw + .63rem, .76rem);
        font-weight: 700;
    }

    .site-footer {
        background: #04162F;
        color: var(--white);
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1.45fr repeat(3, 1fr) 1.15fr;
        gap: 34px;
        padding: clamp(54px, 7vw, 78px) 0 48px;
    }

    .footer-brand {
        max-width: 260px;
    }

    .footer-brand p {
        margin: 18px 0 0;
        color: rgba(255, 255, 255, .58);
        font-size: clamp(.76rem, .2vw + .7rem, .85rem);
        line-height: 1.7;
    }

    .footer-heading {
        margin: 0 0 16px;
        font-size: clamp(.74rem, .16vw + .68rem, .82rem);
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--cyan);
    }

    .footer-links {
        display: grid;
        gap: 9px;
    }

    .footer-links a {
        color: rgba(255, 255, 255, .64);
        font-size: clamp(.74rem, .16vw + .68rem, .82rem);
        transition: color var(--ease);
    }

    .footer-links a:hover {
        color: var(--white);
    }

    .footer-contact {
        display: grid;
        gap: 12px;
    }

    .footer-contact p {
        margin: 0;
        color: rgba(255, 255, 255, .64);
        font-size: clamp(.72rem, .17vw + .66rem, .81rem);
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, .1);
        padding: 18px 0 22px;
        text-align: center;
        color: rgba(255, 255, 255, .44);
        font-size: clamp(.65rem, .14vw + .6rem, .72rem);
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    #newsletter{
        display: none;
    }

    @media (max-width: 1050px) {
        .nav-links {
            gap: 14px;
        }

        .nav-links a {
            font-size: clamp(.72rem, .18vw + .66rem, .82rem);
        }

        .footer-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .footer-brand {
            grid-column: 1 / -1;
            max-width: 520px;
        }
    }

    @media (max-width: 820px) {
        .nav {
            min-height: 68px;
        }

        .menu-toggle {
            display: block;
        }

        .nav-panel {
            position: absolute;
            top: calc(100% + 1px);
            left: 0;
            right: 0;
            display: none;
            align-items: stretch;
            flex-direction: column;
            gap: 18px;
            padding: 20px 16px 24px;
            background: rgba(255, 255, 255, .98);
            border-bottom: 1px solid var(--line);
            box-shadow: 0 20px 35px rgba(6, 27, 58, .08);
        }

        .nav-panel.open {
            display: flex;
        }

        .nav-links {
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }

        .nav-links li {
            border-bottom: 1px solid #EDF2F5;
        }

        .nav-links a {
            display: block;
            padding: 13px 4px;
            font-size: clamp(.85rem, .35vw + .76rem, .96rem);
        }

        .nav-links a::after {
            display: none;
        }

        .nav-panel .cta {
            width: 100%;
        }

        .featured{
            padding-bottom: 0;
        }

        .featured-grid {
            grid-template-columns: 1fr;
        }

        .featured-content {
            max-width: 760px;
        }

        .section-heading {
            grid-template-columns: 1fr;
            align-items: start;
        }

        .search {
            width: min(100%, 420px);
        }

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

        .newsletter-inner {
            grid-template-columns: 1fr;
        }

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

    @media (max-width: 560px) {
        .container {
            width: min(calc(100% - 24px), var(--container));
        }

        .hero-inner {
            padding-top: 62px;
            padding-bottom: 92px;
        }

        .hero h1 {
            max-width: 100%;
        }

        .hero-copy {
            line-height: 1.65;
        }

        .featured-media {
            /* min-height: 250px; */
        }

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

        .filters {
            overflow-x: auto;
            flex-wrap: nowrap;
            padding-bottom: 4px;
            scrollbar-width: thin;
        }

        .filter {
            flex: 0 0 auto;
        }

        .card-body {
            padding: 19px;
        }

        .subscribe-form {
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
            padding: 6px;
        }

        .subscribe-form input {
            min-height: 44px;
        }

        .subscribe-form button {
            width: 100%;
        }

        .footer-grid {
            grid-template-columns: 1fr;
            gap: 28px;
        }

        .footer-brand {
            grid-column: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            transition-duration: .01ms !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
        }
    }