:root {
    --hvb-bg:#05090b;
    --hvb-bg2:#071014;
    --hvb-card:#0a1115;
    --hvb-card2:#0d171c;
    --hvb-line:rgba(255,255,255,.11);
    --hvb-text:#f3f7f8;
    --hvb-muted:#96a7af;
    --hvb-green:#70f5ae;
    --hvb-blue:#79bfff;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    color:var(--hvb-text);
    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(112,245,174,.10),
            transparent 35%
        ),
        var(--hvb-bg);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
select,
textarea,
input {
    font:inherit;
}

.hvb-shell {
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;
}

.hvb-main {
    min-height:100vh;
}

.hvb-hero {
    position:relative;
    overflow:hidden;
    padding:118px 0 90px;
}

.hvb-hero::before {
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    left:50%;
    top:-430px;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(112,245,174,.09);
    filter:blur(90px);
    pointer-events:none;
}

.hvb-kicker,
.hvb-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--hvb-green);
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.16em;
}

.hvb-kicker > span {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--hvb-green);
    box-shadow:0 0 20px rgba(112,245,174,.8);
}

.hvb-hero h1 {
    max-width:1080px;
    margin:24px 0;
    font-size:clamp(42px,6.2vw,82px);
    line-height:.98;
    letter-spacing:-.055em;
}

.hvb-lead {
    max-width:820px;
    margin:0;
    color:#bdcbd0;
    font-size:clamp(18px,2vw,23px);
    line-height:1.58;
}

.hvb-hero-tags {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:30px 0;
}

.hvb-hero-tags span {
    padding:9px 14px;
    border:1px solid var(--hvb-line);
    border-radius:999px;
    background:rgba(255,255,255,.025);
    color:#cbd5d9;
    font-size:13px;
}

.hvb-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:0 24px;
    border:0;
    border-radius:12px;
    color:#04100a;
    background:var(--hvb-green);
    text-decoration:none;
    font-weight:900;
    font-size:13px;
    letter-spacing:.03em;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.hvb-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 34px rgba(112,245,174,.18);
}

.hvb-builder,
.hvb-result,
.hvb-content {
    padding:84px 0;
    border-top:1px solid var(--hvb-line);
}

.hvb-section-head,
.hvb-result-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:32px;
    margin-bottom:34px;
}

.hvb-section-head h2,
.hvb-result-head h2 {
    margin:10px 0 0;
    font-size:clamp(31px,4.1vw,52px);
    line-height:1.04;
    letter-spacing:-.04em;
}

.hvb-section-head > p {
    max-width:500px;
    margin:0;
    color:var(--hvb-muted);
    line-height:1.65;
}

.hvb-form {
    display:grid;
    gap:22px;
}

.hvb-card {
    min-width:0;
    margin:0;
    padding:28px;
    border:1px solid var(--hvb-line);
    border-radius:20px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );
    box-shadow:0 22px 70px rgba(0,0,0,.23);
}

.hvb-card legend {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 10px;
    font-size:18px;
    font-weight:800;
}

.hvb-card legend span,
.hvb-number {
    color:var(--hvb-green);
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em;
}

.hvb-types {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.hvb-type {
    cursor:pointer;
}

.hvb-type input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.hvb-type > span {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:18px;
    min-height:126px;
    padding:20px;
    border:1px solid var(--hvb-line);
    border-radius:15px;
    background:rgba(0,0,0,.15);
    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.hvb-type strong {
    font-size:17px;
}

.hvb-type small {
    color:var(--hvb-muted);
    line-height:1.45;
}

.hvb-type input:checked + span {
    border-color:rgba(112,245,174,.72);
    background:rgba(112,245,174,.075);
    transform:translateY(-2px);
}

.hvb-type input:focus-visible + span {
    outline:2px solid var(--hvb-green);
    outline-offset:3px;
}

.hvb-features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.hvb-features label {
    position:relative;
    cursor:pointer;
}

.hvb-features input {
    position:absolute;
    top:17px;
    left:17px;
    width:17px;
    height:17px;
    accent-color:var(--hvb-green);
}

.hvb-features label > span {
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:94px;
    padding:16px 16px 16px 46px;
    border:1px solid var(--hvb-line);
    border-radius:13px;
    background:rgba(0,0,0,.12);
}

.hvb-features input:checked + span {
    border-color:rgba(112,245,174,.58);
    background:rgba(112,245,174,.055);
}

.hvb-features b {
    font-size:14px;
}

.hvb-features small {
    color:var(--hvb-muted);
    line-height:1.4;
}

.hvb-selects {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.hvb-selects label,
.hvb-description {
    display:flex;
    flex-direction:column;
    gap:9px;
}

.hvb-selects label > span,
.hvb-description > span {
    color:#dce5e8;
    font-size:13px;
    font-weight:750;
}

.hvb-selects select,
.hvb-description textarea {
    width:100%;
    color:var(--hvb-text);
    border:1px solid var(--hvb-line);
    border-radius:12px;
    background:#081015;
    outline:0;
}

.hvb-selects select {
    height:50px;
    padding:0 13px;
}

.hvb-description {
    margin-top:20px;
}

.hvb-description textarea {
    min-height:140px;
    padding:15px;
    resize:vertical;
    line-height:1.55;
}

.hvb-selects select:focus,
.hvb-description textarea:focus {
    border-color:rgba(112,245,174,.68);
    box-shadow:0 0 0 3px rgba(112,245,174,.07);
}

.hvb-description small {
    color:#788a93;
}

.hvb-submit {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.hvb-submit button {
    min-height:58px;
    padding:0 28px;
    border:0;
    border-radius:12px;
    color:#04100a;
    background:var(--hvb-green);
    font-weight:950;
    letter-spacing:.04em;
    cursor:pointer;
}

.hvb-submit p {
    margin:0;
    color:var(--hvb-muted);
    font-size:13px;
}

.hvb-result {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(121,191,255,.06),
            transparent 32%
        ),
        var(--hvb-bg2);
}

.hvb-badge {
    padding:10px 14px;
    border:1px solid rgba(112,245,174,.32);
    border-radius:999px;
    color:var(--hvb-green);
    background:rgba(112,245,174,.05);
    font-size:12px;
    font-weight:800;
}

.hvb-metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:18px;
}

.hvb-metrics article {
    min-height:160px;
    padding:22px;
    border:1px solid var(--hvb-line);
    border-radius:16px;
    background:var(--hvb-card);
}

.hvb-metrics span {
    display:block;
    color:var(--hvb-muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.15em;
}

.hvb-metrics strong {
    display:block;
    margin:18px 0 9px;
    font-size:clamp(23px,3vw,38px);
    line-height:1;
    letter-spacing:-.04em;
}

.hvb-metrics small {
    color:#758991;
}

.hvb-result-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.hvb-panel,
.hvb-roadmap,
.hvb-spec {
    padding:26px;
    border:1px solid var(--hvb-line);
    border-radius:18px;
    background:var(--hvb-card);
}

.hvb-panel h3,
.hvb-roadmap h3,
.hvb-spec h3 {
    margin:10px 0 22px;
    font-size:22px;
}

.hvb-panel ul {
    margin:0;
    padding:0;
    list-style:none;
}

.hvb-panel li {
    position:relative;
    padding:11px 0 11px 22px;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#cdd9dd;
}

.hvb-panel li:last-child {
    border-bottom:0;
}

.hvb-panel li::before {
    content:"???";
    position:absolute;
    left:0;
    color:var(--hvb-green);
}

.hvb-panel dl {
    display:grid;
    grid-template-columns:120px 1fr;
    margin:0;
}

.hvb-panel dt,
.hvb-panel dd {
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.hvb-panel dt {
    color:var(--hvb-muted);
    font-size:13px;
}

.hvb-panel dd {
    margin:0;
    color:#dce6e9;
    line-height:1.45;
}

.hvb-roadmap,
.hvb-spec {
    margin-top:18px;
}

.hvb-roadmap-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
}

.hvb-roadmap-grid > div {
    min-height:150px;
    padding:17px;
    border:1px solid var(--hvb-line);
    border-radius:13px;
    background:rgba(255,255,255,.018);
}

.hvb-roadmap-grid b {
    display:block;
    margin-bottom:28px;
    color:var(--hvb-green);
    font-size:11px;
}

.hvb-roadmap-grid strong {
    display:block;
    margin-bottom:8px;
    font-size:14px;
}

.hvb-roadmap-grid span {
    color:var(--hvb-muted);
    font-size:12px;
    line-height:1.45;
}

.hvb-spec-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
}

.hvb-spec-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.hvb-spec-actions button {
    min-height:38px;
    padding:0 13px;
    border:1px solid var(--hvb-line);
    border-radius:9px;
    color:#dce6e9;
    background:rgba(255,255,255,.035);
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.hvb-spec pre {
    overflow:auto;
    max-height:650px;
    margin:18px 0 0;
    padding:22px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    border:1px solid rgba(255,255,255,.07);
    border-radius:13px;
    background:#030708;
    color:#c8d5d9;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size:12px;
    line-height:1.65;
}

.hvb-cta {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    margin-top:18px;
    padding:27px;
    border:1px solid rgba(112,245,174,.25);
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            rgba(112,245,174,.085),
            rgba(121,191,255,.035)
        );
}

.hvb-cta > div {
    max-width:700px;
}

.hvb-cta span {
    display:block;
    margin-bottom:7px;
    color:var(--hvb-green);
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em;
}

.hvb-cta strong {
    font-size:18px;
    line-height:1.45;
}

.hvb-content-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.hvb-content-grid article {
    padding:26px;
    border:1px solid var(--hvb-line);
    border-radius:16px;
    background:rgba(255,255,255,.018);
}

.hvb-content-grid h3 {
    margin:0 0 12px;
    font-size:21px;
}

.hvb-content-grid p {
    color:var(--hvb-muted);
    line-height:1.7;
}

.hvb-content-grid a {
    color:var(--hvb-green);
    text-decoration:none;
    font-size:13px;
    font-weight:750;
}

.hvb-faq {
    max-width:900px;
    margin:78px auto 0;
}

.hvb-faq h2 {
    font-size:34px;
    letter-spacing:-.035em;
}

.hvb-faq details {
    border-top:1px solid var(--hvb-line);
}

.hvb-faq details:last-child {
    border-bottom:1px solid var(--hvb-line);
}

.hvb-faq summary {
    padding:20px 0;
    cursor:pointer;
    font-weight:750;
}

.hvb-faq p {
    max-width:760px;
    margin:-3px 0 22px;
    color:var(--hvb-muted);
    line-height:1.65;
}

.hvb-footer {
    padding:28px 0;
    border-top:1px solid var(--hvb-line);
    color:var(--hvb-muted);
}

.hvb-footer .hvb-shell {
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:12px;
}

@media (max-width:980px) {

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

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

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

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

@media (max-width:720px) {

    .hvb-shell {
        width:min(100% - 24px,1180px);
    }

    .hvb-hero {
        padding:76px 0 62px;
    }

    .hvb-builder,
    .hvb-result,
    .hvb-content {
        padding:58px 0;
    }

    .hvb-section-head,
    .hvb-result-head {
        align-items:flex-start;
        flex-direction:column;
    }

    .hvb-types,
    .hvb-features,
    .hvb-selects,
    .hvb-result-grid,
    .hvb-content-grid {
        grid-template-columns:1fr;
    }

    .hvb-type > span {
        min-height:100px;
    }

    .hvb-card {
        padding:20px 14px;
    }

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

    .hvb-spec-head,
    .hvb-cta {
        align-items:flex-start;
        flex-direction:column;
    }

    .hvb-cta .hvb-primary {
        width:100%;
    }
}

@media (max-width:480px) {

    .hvb-hero h1 {
        font-size:42px;
    }

    .hvb-metrics {
        grid-template-columns:1fr 1fr;
    }

    .hvb-metrics article {
        min-height:138px;
        padding:17px;
    }

    .hvb-roadmap-grid {
        grid-template-columns:1fr;
    }

    .hvb-footer .hvb-shell {
        flex-direction:column;
    }
}

/* =====================================================
   HVA_PROJECT_ARCHITECT_RESPONSIVE_FIX_V12

   Fixes:
   - fieldset legend intrinsic width
   - grid min-content expansion
   - flex heading intrinsic width
   - metric/spec text intrinsic width
   - global project-popup toast mobile overflow
   ===================================================== */

@media (max-width:720px) {

    /*
     * Every major Project Architect layout node must be allowed
     * to shrink to the real content-box width.
     */
    .hvb-shell,
    .hvb-section-head,
    .hvb-section-head > div,
    .hvb-result-head,
    .hvb-result-head > div,
    .hvb-form,
    .hvb-card,
    .hvb-types,
    .hvb-features,
    .hvb-selects,
    .hvb-submit,
    .hvb-result-grid,
    .hvb-content-grid,
    .hvb-metrics,
    .hvb-panel,
    .hvb-roadmap,
    .hvb-spec,
    .hvb-cta {
        min-width:0 !important;
        max-width:100% !important;
    }

    /*
     * column flex headers previously used intrinsic width
     * because align-items:flex-start was active.
     */
    .hvb-section-head > div,
    .hvb-result-head > div {
        width:100% !important;
    }

    /*
     * Critical fix:
     * 1fr alone can respect the min-content width
     * of grid children. minmax(0,1fr) may actually shrink.
     */
    .hvb-types,
    .hvb-features,
    .hvb-selects,
    .hvb-result-grid,
    .hvb-content-grid {
        grid-template-columns:
            minmax(0,1fr) !important;
    }

    .hvb-type,
    .hvb-type > span,
    .hvb-features label,
    .hvb-features label > span,
    .hvb-selects label,
    .hvb-description {
        min-width:0 !important;
        max-width:100% !important;
    }

    /*
     * fieldset/legend has special browser layout semantics.
     */
    .hvb-card legend {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        box-sizing:border-box !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    /*
     * Prevent text content from establishing
     * an unwanted intrinsic minimum width.
     */
    .hvb-hero h1,
    .hvb-section-head h2,
    .hvb-result-head h2,
    .hvb-card legend,
    .hvb-type strong,
    .hvb-type small,
    .hvb-features b,
    .hvb-features small,
    .hvb-panel h3,
    .hvb-roadmap h3,
    .hvb-spec h3,
    .hvb-panel dt,
    .hvb-panel dd,
    .hvb-metrics strong,
    .hvb-metrics small,
    .hvb-content-grid h3,
    .hvb-content-grid p,
    .hvb-spec pre {
        max-width:100% !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }

    /*
     * Global popup toast.
     *
     * Do NOT use 100vw here. Chromium mobile emulation
     * can have layout viewport != visual viewport.
     *
     * Anchor directly to safe side offsets instead.
     */
    .hwpp-toast {
        left:14px !important;
        right:14px !important;

        width:auto !important;
        max-width:none !important;

        box-sizing:border-box !important;

        transform:translateY(15px) !important;
    }

    .hwpp-toast.is-visible,
    .hwpp-toast.show,
    .hwpp-toast.active,
    .hwpp-toast[data-visible="true"] {
        transform:translateY(0) !important;
    }
}

@media (max-width:480px) {

    /*
     * Metrics stay 2-column, but each track
     * must be allowed to shrink below min-content.
     */
    .hvb-metrics {
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;
    }

    .hvb-metrics article {
        min-width:0 !important;
        max-width:100% !important;
    }

    .hvb-metrics strong {
        font-size:clamp(
            20px,
            6vw,
            27px
        ) !important;

        line-height:1.08 !important;
    }
}

@media (max-width:340px) {

    /*
     * At very narrow widths readability is better
     * with one metric per row.
     */
    .hvb-metrics {
        grid-template-columns:
            minmax(0,1fr) !important;
    }
}