:root {
    --hv-navy: #102A43;
    --hv-navy-soft: #163B4A;
    --hv-teal: #2B7A83;
    --hv-teal-dark: #1F626B;
    --hv-mint: #A9DDD1;
    --hv-pale: #E9F4F6;
    --hv-card: #F9FDFD;
    --hv-ink: #1F354A;
    --hv-muted: #5C7182;
    --hv-line: #C9DFE4;
    --hv-gold: #C89535;
    --hv-shadow: 0 18px 50px rgba(16, 42, 67, .11);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--hv-pale);
    color: var(--hv-ink);
    font-family: Inter, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: inherit; }

.hv-site {
    min-height: 100vh;
    background:
        radial-gradient(circle at 92% 2%, rgba(169, 221, 209, .55), transparent 28rem),
        linear-gradient(180deg, #EEF8F9 0%, var(--hv-pale) 62%, #F7FCFC 100%);
}

.hv-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(201, 223, 228, .86);
    background: rgba(233, 244, 246, .92);
    backdrop-filter: blur(14px);
}

.hv-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    max-width: 1240px;
    min-height: 76px;
    margin: 0 auto;
    padding: 12px 28px;
}

.hv-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--hv-navy);
    font-weight: 800;
    letter-spacing: -.03em;
    text-decoration: none;
    white-space: nowrap;
}

.hv-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.hv-brand-name { font-size: 1.08rem; }
.hv-brand-name small {
    display: block;
    color: var(--hv-teal);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1;
    text-transform: uppercase;
}

.hv-nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    font-size: .88rem;
    font-weight: 650;
}

.hv-nav-links a {
    color: var(--hv-muted);
    text-decoration: none;
}

.hv-nav-links a:hover { color: var(--hv-teal-dark); }

.hv-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;
    border-radius: 999px;
    background: var(--hv-navy);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(16, 42, 67, .16);
}

.hv-main { overflow: clip; }

.hv-wrap {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.hv-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    align-items: center;
    gap: 74px;
    min-height: 590px;
    padding: 86px 0 76px;
}

.hv-hero::before {
    position: absolute;
    top: 34px;
    right: -180px;
    width: 430px;
    min-height: 430px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 122, 131, .14), transparent 68%);
    content: "";
    pointer-events: none;
}

.hv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--hv-teal-dark);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hv-eyebrow::before {
    width: 8px;
    min-height: 8px;
    border-radius: 50%;
    background: var(--hv-teal);
    box-shadow: 0 0 0 6px rgba(43, 122, 131, .12);
    content: "";
}

.hv-hero h1,
.hv-section-heading h2 {
    margin: 16px 0 0;
    color: var(--hv-navy);
    font-family: Georgia, serif;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.hv-hero h1 {
    max-width: 680px;
    font-size: clamp(2.7rem, 6vw, 5.2rem);
}

.hv-hero h1 em { color: var(--hv-teal); font-style: normal; }

.hv-lead {
    max-width: 650px;
    margin: 22px 0 0;
    color: var(--hv-muted);
    font-size: clamp(1.03rem, 2vw, 1.22rem);
    line-height: 1.7;
}

.hv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
}

.hv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 21px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .91rem;
    font-weight: 800;
    text-decoration: none;
}

.hv-btn-primary { background: var(--hv-teal); color: #fff; box-shadow: 0 12px 26px rgba(43, 122, 131, .2); }
.hv-btn-primary:hover { background: var(--hv-teal-dark); }
.hv-btn-secondary { border-color: var(--hv-line); background: rgba(249, 253, 253, .72); color: var(--hv-navy); }
.hv-btn-secondary:hover { border-color: var(--hv-teal); }

.hv-proof-line {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 26px;
    margin-top: 28px;
    color: var(--hv-muted);
    font-size: .84rem;
    font-weight: 650;
}

.hv-proof-line span::before { margin-right: 7px; color: var(--hv-teal); content: "✓"; font-weight: 900; }

.hv-hero-visual { position: relative; min-height: 420px; }

.hv-visual-glow {
    position: absolute;
    right: 2%;
    bottom: 3%;
    width: 86%;
    min-height: 85%;
    border-radius: 42% 58% 46% 54%;
    background: radial-gradient(circle, rgba(169, 221, 209, .66), rgba(169, 221, 209, .04) 70%);
    filter: blur(2px);
}

.hv-visual-main {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, 520px);
    min-height: 340px;
    margin: 20px auto 0;
    object-fit: contain;
    filter: drop-shadow(0 28px 32px rgba(16, 42, 67, .15));
}

.hv-float-note {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 46px;
    max-width: 215px;
    padding: 16px 17px;
    border: 1px solid rgba(201, 223, 228, .95);
    border-radius: 18px;
    background: rgba(249, 253, 253, .94);
    box-shadow: var(--hv-shadow);
}

.hv-float-note strong { display: block; color: var(--hv-navy); font-size: .96rem; }
.hv-float-note span { display: block; margin-top: 5px; color: var(--hv-muted); font-size: .76rem; line-height: 1.45; }

.hv-section { padding: 88px 0; }
.hv-section-alt { background: rgba(249, 253, 253, .7); border-top: 1px solid rgba(201, 223, 228, .65); border-bottom: 1px solid rgba(201, 223, 228, .65); }

.hv-section-heading { max-width: 720px; margin-bottom: 42px; }
.hv-section-heading.center { margin-right: auto; margin-left: auto; text-align: center; }
.hv-section-heading h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.hv-section-heading p { margin: 15px 0 0; color: var(--hv-muted); font-size: 1rem; line-height: 1.72; }

.hv-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hv-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.hv-feature {
    min-height: 215px;
    padding: 27px 25px;
    border: 1px solid var(--hv-line);
    border-radius: 22px;
    background: var(--hv-card);
    box-shadow: 0 8px 24px rgba(16, 42, 67, .045);
}

.hv-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 48px;
    border-radius: 15px;
    background: rgba(169, 221, 209, .38);
    color: var(--hv-teal-dark);
    font-size: 1.35rem;
    font-weight: 900;
}

.hv-feature h3 { margin: 18px 0 7px; color: var(--hv-navy); font-size: 1.12rem; }
.hv-feature p { margin: 0; color: var(--hv-muted); font-size: .92rem; line-height: 1.62; }

.hv-process { counter-reset: process; }
.hv-process-item { position: relative; padding: 8px 0 8px 66px; }
.hv-process-item + .hv-process-item { margin-top: 24px; }
.hv-process-item::before {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 44px;
    min-height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--hv-navy);
    color: #fff;
    content: counter(process);
    counter-increment: process;
    font-weight: 800;
}
.hv-process-item h3 { margin: 0; color: var(--hv-navy); font-size: 1.05rem; }
.hv-process-item p { margin: 5px 0 0; color: var(--hv-muted); font-size: .92rem; }

.hv-panel {
    padding: 31px;
    border: 1px solid var(--hv-line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(249, 253, 253, .98), rgba(231, 246, 246, .8));
}
.hv-panel h3 { margin: 0; color: var(--hv-navy); font-size: 1.25rem; }
.hv-panel p { margin: 11px 0 0; color: var(--hv-muted); }
.hv-check-list { display: grid; gap: 13px; margin: 22px 0 0; padding: 0; list-style: none; }
.hv-check-list li { position: relative; padding-left: 28px; color: var(--hv-ink); font-size: .94rem; }
.hv-check-list li::before { position: absolute; left: 0; color: var(--hv-teal); content: "✓"; font-weight: 900; }

.hv-disclaimer {
    margin-top: 28px;
    padding: 17px 20px;
    border-left: 3px solid var(--hv-gold);
    background: rgba(255, 250, 235, .72);
    color: #6E5A32;
    font-size: .87rem;
}

.hv-related {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}
.hv-related a { display: block; padding: 19px 20px; border: 1px solid var(--hv-line); border-radius: 18px; background: var(--hv-card); text-decoration: none; }
.hv-related strong { display: block; color: var(--hv-navy); }
.hv-related span { display: block; margin-top: 5px; color: var(--hv-muted); font-size: .84rem; }

.hv-cta {
    margin: 0 0 88px;
    padding: 48px 42px;
    border-radius: 28px;
    background: linear-gradient(120deg, var(--hv-navy), var(--hv-navy-soft));
    color: #fff;
    box-shadow: 0 22px 50px rgba(16, 42, 67, .18);
}
.hv-cta h2 { margin: 0; color: #fff; font-family: Georgia, serif; font-size: clamp(1.85rem, 4vw, 3rem); letter-spacing: -.035em; line-height: 1.1; }
.hv-cta p { max-width: 650px; margin: 13px 0 0; color: rgba(255,255,255,.76); }
.hv-cta .hv-btn { margin-top: 23px; background: var(--hv-mint); color: var(--hv-navy); }

.hv-footer { padding: 30px 0 38px; border-top: 1px solid var(--hv-line); color: var(--hv-muted); font-size: .82rem; }
.hv-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.hv-footer-links { display: flex; flex-wrap: wrap; gap: 14px 19px; }
.hv-footer a { text-decoration: none; }
.hv-footer a:hover { color: var(--hv-teal-dark); }

@media (max-width: 900px) {
    .hv-nav-links a:not(.hv-nav-cta) { display: none; }
    .hv-hero { grid-template-columns: 1fr; gap: 30px; padding-top: 62px; }
    .hv-hero-visual { min-height: 330px; }
    .hv-visual-main { min-height: 290px; }
    .hv-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .hv-nav-inner { min-height: 68px; padding: 10px 18px; }
    .hv-brand img { width: 37px; min-height: 37px; }
    .hv-brand-name { font-size: .95rem; }
    .hv-wrap { width: min(100% - 32px, 1180px); }
    .hv-hero { min-height: 0; padding: 48px 0 58px; }
    .hv-hero h1 { font-size: clamp(2.45rem, 13vw, 4rem); }
    .hv-hero-visual { min-height: 265px; }
    .hv-visual-main { min-height: 240px; }
    .hv-float-note { right: -2px; bottom: 14px; max-width: 178px; padding: 12px; }
    .hv-float-note strong { font-size: .82rem; }
    .hv-float-note span { font-size: .7rem; }
    .hv-section { padding: 62px 0; }
    .hv-grid-2, .hv-related { grid-template-columns: 1fr; }
    .hv-panel { padding: 24px 20px; }
    .hv-cta { margin-bottom: 62px; padding: 32px 23px; }
    .hv-footer-inner { align-items: flex-start; flex-direction: column; }
}