@import url("./navbar.css");
@import url("./footer.css");
@import url("./home/fqa.css");
@import url("./home/hero.css");
@import url("./home/services.css");
@import url("./home/testimonial.css");
@import url("./home/comparison.css");
@import url("./home/instagram-cta.css");

:root{
    --bg:#eef6fd;
    --surface:#f6fbff;
    --surface-strong:#ffffff;
    --text:#315785;
    --muted:#7d94ae;
    --muted-strong:#5b7698;
    --line:rgba(49,87,133,.08);
    --line-strong:rgba(49,87,133,.14);
    --shadow:0 28px 70px rgba(84,123,166,.10);
    --radius-xl:34px;
    --radius-lg:26px;
    --radius-md:18px;
    --radius-sm:14px;
    --wrap:1120px;
    --header-h:86px;
    --space-2xs:clamp(.5rem, .42rem + .35vw, .75rem);
    --space-xs:clamp(.75rem, .62rem + .55vw, 1rem);
    --space-sm:clamp(1rem, .8rem + .9vw, 1.4rem);
    --space-md:clamp(1.4rem, 1.05rem + 1.5vw, 2.2rem);
    --space-lg:clamp(2rem, 1.45rem + 2.35vw, 3.4rem);
    --space-xl:clamp(2.75rem, 2rem + 3.2vw, 4.9rem);
    --text-sm:clamp(.92rem, .88rem + .18vw, 1rem);
    --text-base:clamp(1rem, .96rem + .22vw, 1.08rem);
    --text-lg:clamp(1.12rem, 1rem + .55vw, 1.4rem);
    --max-text:45rem;
    --focus-ring:0 0 0 3px rgba(49,87,133,.14);
    --focus-outline:2px solid rgba(49,87,133,.68);
}

*{box-sizing:border-box}
html{
    scroll-behavior:smooth;
    overflow-x:clip;
    color-scheme:light;
}
body{
    margin:0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.7), transparent 24%),
        radial-gradient(circle at top right, rgba(208,229,251,.34), transparent 28%),
        linear-gradient(180deg, #f2f9ff 0%, #e9f4fe 100%);
    color:var(--text);
    font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    padding-top:var(--header-h);
    min-height:100svh;
    overflow-x:clip;
    line-height:1.5;
}

main{
    background-image:url("../images/photos/hero/hero-bg.png");
    background-size:cover;
    background-position:top center;
    background-repeat:no-repeat;
}

a{text-decoration:none;color:inherit}
button{
    font:inherit;
    touch-action:manipulation;
}
img,
video{display:block;max-width:100%}

.wrap{
    width:min(calc(100% - clamp(24px, 4vw, 40px)), var(--wrap));
    margin:0 auto;
}

.accent,
.serif{
    font-family:var(--font-serif);
    font-style:italic;
    font-weight:600;
    letter-spacing:-.03em;
}

.image-cover{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.soft-card{
    background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(243,249,255,.4));
    border:1px solid rgba(255,255,255,.7);
    backdrop-filter:blur(4px);
    display: flex;
    justify-content: center;
}

.skip-link{
    position:fixed;
    top:12px;
    left:12px;
    z-index:120;
    padding:12px 16px;
    border-radius:999px;
    background:#315785;
    color:#fff;
    transform:translateY(-140%);
    transition:transform .2s ease;
}

.skip-link:focus-visible{
    transform:translateY(0);
}

.section-heading h2{
    margin:0;
    font-size:clamp(2.37rem, 4.67vw, 4.2rem);
    line-height:.92;
    letter-spacing:-.08em;
    font-weight:400;
}

.footer-brand p,
.footer-column a{
    color:var(--muted);
}

.button{
    min-height:54px;
    padding:0 clamp(18px, 2.2vw, 22px);
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    letter-spacing:-.02em;
    text-align:center;
    transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.button.dark{
    background:#315785;
    color:#fff;
    box-shadow:0 14px 28px rgba(49,87,133,.18);
}

.button.dark:hover{
    background:#3a679b;
    transform:translateY(-1px);
}

.button.small{
    min-height:44px;
    padding:0 18px;
    font-size:.9rem;
}

.floating-mark{
    width:62px;
    height:62px;
    border-radius:18px;
    background:#315785;
    color:#fff;
    display:grid;
    place-items:center;
    box-shadow:0 18px 40px rgba(49,87,133,.18);
    font-size:1.7rem;
}

.section{
    padding:clamp(4.4rem, 6vw, 5.5rem) 0;
}

.section-heading{
    margin-bottom:clamp(1.8rem, 3vw, 2.6rem);
}

.section-heading.center{
    text-align:center;
    max-width:46rem;
    margin-inline:auto;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 13px;
    border-radius:11px;
    background:rgba(255,255,255,.52);
    border:1px solid var(--line);
    font-size:.86rem;
    font-weight:600;
    letter-spacing:.02em;
    text-transform:uppercase;
    margin-bottom:18px;
}

.stack{
    display:grid;
    gap:clamp(3rem, 5vw, 4.75rem);
}

.media-card{
    min-height:clamp(20rem, 48vw, 29.4rem);
    border-radius:clamp(1.4rem, 2.5vw, 1.75rem);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:var(--shadow);
    overflow:hidden;
    position:relative;
}

.media-card::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:26%;
    background:linear-gradient(180deg, transparent, rgba(91,118,152,.2));
}

h1,
h2,
h3,
h4,
blockquote{
    text-wrap:balance;
}

p,
li,
small,
.site-nav a,
.footer-column a,
.accordion-trigger{
    text-wrap:pretty;
}

:where(main, section, article, nav, footer, div)[id]{
    scroll-margin-top:calc(var(--header-h) + 16px);
}

a:focus-visible,
button:focus-visible{
    outline:var(--focus-outline);
    outline-offset:3px;
    box-shadow:var(--focus-ring);
}

@media (max-width: 980px){
    .stack{
        gap:58px;
    }
}

@media (max-width: 760px){
    :root{--header-h:74px}

    .section-heading h2{
        font-size:clamp(2.8rem, 12vw, 4rem);
    }

    .media-card{
        min-height:320px;
    }

}