.hh-hero {
        position: relative;
        padding: 150px 0 96px;
        background:
            radial-gradient(1200px 520px at 16% -12%, rgba(20, 79, 196, .55) 0%, rgba(20, 79, 196, 0) 62%),
            linear-gradient(90deg, #0d3c9f 0%, #040d70 100%);
        overflow: hidden;
    }

    /* Faint grid so the ground is not a flat wash of blue. */
    .hh-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(920px 480px at 28% 0%, #000 0%, transparent 76%);
        -webkit-mask-image: radial-gradient(920px 480px at 28% 0%, #000 0%, transparent 76%);
        pointer-events: none;
    }

    /* The theme gives .banner + .section a stacking context. This hero is not
       a .banner, so it restates it or the section below reflows. */
    .hh-hero + .section { position: relative; z-index: 2; }

    .hh-wrap { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; padding: 0 24px; }

    /* The theme's own hero artwork, reused. Every other marketing page carries
       these; the new hero was the only one without them, which is most of why it
       felt bare. Scoped under .hh-hero so the theme rules apply unchanged. */
    .hh-hero .banner__illustrations { opacity: .3; }

    .hh-acc { display: flex; gap: 12px; align-items: stretch; height: 462px; }

    .hh-panel {
        position: relative;
        display: flex;
        flex: 0 0 56px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 18px;
        background: linear-gradient(180deg, #0a1a56 0%, #050f38 100%);
        /* A long, decelerating curve: the panel arrives rather than snaps. */
        transition: flex-basis .62s cubic-bezier(.16, 1, .3, 1),
                    background-color .4s, border-color .4s, box-shadow .5s;
    }

    /* Light pooling behind the open panel, revealed as it widens. */
    .hh-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(560px 300px at 22% 0%, rgba(20, 79, 196, .55) 0%, rgba(20, 79, 196, 0) 70%);
        opacity: 0;
        transition: opacity .6s;
        pointer-events: none;
    }

    .hh-panel.is-open::before { opacity: 1; }

    .hh-panel::after {
        content: "";
        position: absolute;
        left: 0; right: 0; top: 0;
        height: 3px;
        background: linear-gradient(90deg, #ff7800, #ffbd0a);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .55s cubic-bezier(.16, 1, .3, 1) .06s;
    }

    .hh-panel:not(.is-open):hover {
        background: linear-gradient(180deg, #123077 0%, #0a1a56 100%);
        border-color: rgba(255, 255, 255, .22);
    }

    .hh-panel.is-open {
        flex: 1 1 auto;
        background: linear-gradient(145deg, #144fc4 0%, #0d3c9f 55%, #030b7b 100%);
        border-color: rgba(255, 255, 255, .20);
        box-shadow: 0 30px 70px rgba(3, 11, 123, .55);
    }

    .hh-panel.is-open::after { transform: scaleX(1); }

    /* Collapsed: the whole panel is one button carrying a rotated label. */
    .hh-panel__toggle {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        padding: 30px 0 28px;
        border: 0;
        background: none;
        color: #ffffff;
        cursor: pointer;
        transition: opacity .28s ease-out;
    }

    /* Hidden rather than removed, so it fades and leaves the tab order. */
    .hh-panel.is-open .hh-panel__toggle {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s, visibility 0s .2s;
    }

    .hh-panel__label, .hh-panel__num, .hh-panel__plus {
        transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .hh-panel.is-open .hh-panel__label { transform: rotate(180deg) translateY(-14px); }
    /* A tap leaves the button focused, and nothing here was resetting the plain
       :focus outline, so Chrome drew its own ring: rgb(16,16,16) auto 5px, a
       dark outer edge with a light inner one. On the desktop accordion the open
       panel's toggle is visibility: hidden, so it was never visible. On the
       stacked layout the toggle stays on screen, so the ring sat as a rectangle
       around the header of whichever card you last tapped, and appeared to jump
       between cards as you switched.

       :focus-visible still gets the orange ring, so a keyboard user loses
       nothing. It follows :focus deliberately: same specificity, so source order
       is what decides. */
    .hh-panel__toggle:focus { outline: none; }
    .hh-panel__toggle:focus-visible { outline: 2px solid #ff7800; outline-offset: -5px; }

    /* A hairline in the product's own hue, so five closed panels do not read as
       five identical slabs. */
    .hh-panel__spine {
        position: absolute;
        left: 0; top: 26%; bottom: 26%;
        width: 2px;
        border-radius: 2px;
        background: currentColor;
        opacity: .55;
    }

    .hh-panel.is-open .hh-panel__spine { opacity: 0; }

    .hh-panel--ai      { color: #ff9433; }
    .hh-panel--web     { color: #4da3ff; }
    .hh-panel--vps     { color: #7c5cff; }
    .hh-panel--reseller{ color: #21c07a; }
    .hh-panel--domains { color: #ffbd0a; }

    .hh-panel__icon { font-size: 15px; opacity: .8; }

    .hh-panel__num {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .12em;
        color: rgba(255, 255, 255, .45);
        font-variant-numeric: tabular-nums;
    }

    .hh-panel__label {
        /* Auto margins centre the label in whatever is left and push the plus to
           the bottom, so the icon above stays put whatever the label says. */
        margin: auto 0;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 19px;
        font-weight: 700;
        white-space: nowrap;
    }

    .hh-panel__plus {
        position: relative;
        width: 26px; height: 26px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .32);
        color: rgba(255, 255, 255, .75);
        transition: background-color .25s, color .25s, border-color .25s;
    }

    /* Drawn rather than typed: a glyph carries its own baseline and never sits
       optically centred in a circle. */
    .hh-panel__plus::before,
    .hh-panel__plus::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        background: currentColor;
        border-radius: 1px;
    }

    .hh-panel__plus::before { width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px; }
    .hh-panel__plus::after  { width: 1.5px; height: 11px; margin: -5.5px 0 0 -0.75px; }

    .hh-panel:hover .hh-panel__plus { background: #ff7800; border-color: #ff7800; color: #fff; }

    /* Expanded. Links only exist while open, so a button never wraps one. */
    .hh-panel__content {
        width: 100%;
        min-width: 0;
        align-self: center;
        padding: 46px 44px;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-14px);
        transition: none;
    }

    .hh-panel.is-open .hh-panel__content {
        min-width: 660px;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .42s ease-out .16s, transform .6s cubic-bezier(.16, 1, .3, 1) .12s,
                    visibility 0s;
    }

    /* Nothing shows behind the loader. Three classes, and after the is-open rule,
       so it wins on both specificity and order: the earlier attempt matched the
       is-open rule exactly and lost the tie. */
    .hh-panel.is-open.is-loading .hh-panel__content {
        opacity: 0;
        visibility: hidden;
        transform: none;
        transition: none;
    }

    /* The loader is a bare ring with no backdrop, so anything still painted in
       the panel shows straight through it. The opening panel's own toggle was
       the leak: it fades out over .2s while its label rotates over .5s, so for
       most of the 420ms hold the vertical product name was still sitting there,
       turning, behind the spinner.

       While loading it goes at once, transitions off, rather than animating out
       under something whose whole job is to cover the swap. The stacked layout
       below 1011px keeps its row header on purpose and overrides this with
       !important, which is why that breakpoint is unaffected. */
    .hh-panel.is-open.is-loading .hh-panel__toggle {
        opacity: 0;
        visibility: hidden;
        transition: none;
    }

    .hh-panel.is-open.is-loading .hh-panel__label,
    .hh-panel.is-open.is-loading .hh-panel__num,
    .hh-panel.is-open.is-loading .hh-panel__plus {
        transition: none;
    }

    /* And the entry animations do not start until the loader hands over, or the
       copy is already halfway through moving by the time it is revealed. */
    .hh-panel.is-open.is-loading .hh-panel__copy > *,
    .hh-panel.is-open.is-loading .hh-app,
    .hh-panel.is-open.is-loading .hh-orbit__core,
    .hh-panel.is-open.is-loading .hh-fact {
        animation: none;
    }

    .hh-panel__grid {
        display: grid;
        grid-template-columns: minmax(0, 470px) auto;
        justify-content: center;
        gap: 34px;
        align-items: center;
    }

    /* A brand loader covers the swap, so switching reads as the panel fetching
       its content rather than snapping to it. */
    .hh-loader {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: none;
        place-items: center;
        pointer-events: none;
    }

    .hh-panel.is-loading .hh-loader { display: grid; }

    .hh-loader__ring {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, .22);
        border-top-color: #ff7800;
        border-right-color: #ffbd0a;
        animation: hh-spin .7s linear infinite;
    }

    @keyframes hh-spin { to { transform: rotate(360deg); } }

    /* Content lifts in once, so switching panels feels deliberate. */
    .hh-panel.is-open .hh-panel__copy > * { animation: hh-in .45s cubic-bezier(.22, 1, .36, 1) backwards; }
    .hh-panel.is-open .hh-panel__copy > *:nth-child(1) { animation-delay: .04s; }
    .hh-panel.is-open .hh-panel__copy > *:nth-child(2) { animation-delay: .09s; }
    .hh-panel.is-open .hh-panel__copy > *:nth-child(3) { animation-delay: .14s; }
    .hh-panel.is-open .hh-panel__copy > *:nth-child(4) { animation-delay: .19s; }

    @keyframes hh-in {
        from { opacity: 0; transform: translateY(12px) scale(.985); }
        to   { opacity: 1; transform: none; }
    }

    .hh-panel.is-open .hh-fact {
        animation: hh-pop .5s cubic-bezier(.16, 1, .3, 1) backwards;
    }

    /* The orbit icons carry a positioning transform, so they cannot also be
       animated with one. Opacity only. */
    .hh-panel.is-open .hh-app { animation: hh-fade .5s ease-out backwards; }
    .hh-panel.is-open .hh-orbit__core { animation: hh-pop .55s cubic-bezier(.16, 1, .3, 1) .14s backwards; }

    @keyframes hh-fade { from { opacity: 0; } to { opacity: 1; } }
    .hh-panel.is-open .hh-fact:nth-child(1) { animation-delay: .20s; }
    .hh-panel.is-open .hh-fact:nth-child(2) { animation-delay: .25s; }
    .hh-panel.is-open .hh-fact:nth-child(3) { animation-delay: .30s; } { animation-delay: .35s; }

    .hh-panel.is-open .hh-app:nth-child(2) { animation-delay: .22s; }
    .hh-panel.is-open .hh-app:nth-child(3) { animation-delay: .28s; }
    .hh-panel.is-open .hh-app:nth-child(4) { animation-delay: .34s; }
    .hh-panel.is-open .hh-app:nth-child(5) { animation-delay: .40s; }
    .hh-panel.is-open .hh-app:nth-child(6) { animation-delay: .46s; }
    .hh-panel.is-open .hh-app:nth-child(7) { animation-delay: .52s; }

    @keyframes hh-pop {
        from { opacity: 0; transform: translateY(14px) scale(.92); }
        to   { opacity: 1; transform: none; }
    }

    .hh-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 15px;
        padding: 6px 13px 6px 10px;
        border-radius: 999px;
        background: rgba(255, 120, 0, .14);
        border: 1px solid rgba(255, 120, 0, .32);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: #ffb066;
    }

    .hh-eyebrow::before {
        content: "";
        width: 6px; height: 6px;
        border-radius: 50%;
        background: #ff7800;
        box-shadow: 0 0 0 3px rgba(255, 120, 0, .25);
    }

    .hh-title {
        margin: 0;
        max-width: 100%;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -.025em;
        color: #ffffff;
        text-wrap: balance;
    }

    .hh-title em { font-style: normal; color: #ff9433; }

    .hh-lead {
        margin: 16px 0 0;
        max-width: 100%;
        font-size: 16.5px;
        line-height: 1.55;
        color: rgba(255, 255, 255, .78);
    }

    .hh-cta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 26px;
        flex-wrap: wrap;
    }

    /* Neither button wraps its own label, and the secondary gives way first if
       the panel is tight. */
    .hh-btn { flex: 0 0 auto; white-space: nowrap; }
    .hh-btn--ghost { flex: 0 0 auto; }

    .hh-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 13px 21px;
        border-radius: 8px;
        background: #ff7800;
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 10px 26px rgba(255, 120, 0, .3);
        transition: background-color .2s, transform .2s, box-shadow .2s;
    }

    .hh-btn::after { content: "\2192"; font-size: 16px; line-height: 1; transition: transform .2s; }
    .hh-btn:hover, .hh-btn:focus {
        background: #ff9433; color: #fff; text-decoration: none;
        transform: translateY(-1px); box-shadow: 0 14px 32px rgba(255, 120, 0, .38);
    }
    .hh-btn:hover::after { transform: translateX(3px); }

    /* Secondary, as in the reference: outlined rather than filled. */
    .hh-btn--ghost {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .38);
        box-shadow: none;
        color: #fff;
    }
    .hh-btn--ghost:hover, .hh-btn--ghost:focus {
        background: rgba(255, 255, 255, .1);
        border-color: #fff;
        box-shadow: none;
    }

    /* The visual half. */
    .hh-aside { min-width: 240px; display: grid; place-items: center; }

    /* The apps as a constellation rather than a list: six icons on an orbit
       around a central node, connectors drawn with a dashed ring. Everything is
       CSS over the icons that already exist, so there is no new artwork. */
    .hh-orbit { position: relative; width: 320px; height: 320px; }

    .hh-orbit::before, .hh-orbit::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 1px dashed rgba(255, 255, 255, .22);
    }
    .hh-orbit::before { inset: 40px; }
    .hh-orbit::after  { inset: 92px; border-style: solid; border-color: rgba(255, 255, 255, .10); }

    .hh-orbit__core {
        position: absolute;
        left: 50%; top: 50%;
        width: 104px; height: 104px;
        margin: -52px 0 0 -52px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,.06));
        border: 1px solid rgba(255, 255, 255, .28);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, .04), 0 14px 36px rgba(0, 0, 0, .35);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .9);
        text-align: center;
        line-height: 1.25;
    }

    .hh-app {
        position: absolute;
        left: 50%; top: 50%;
        display: grid;
        place-items: center;
        width: 70px; height: 70px;
        margin: -35px 0 0 -35px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid rgba(255, 255, 255, .6);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
        transition: transform .3s, box-shadow .25s;
    }

    /* Six positions on the ring. translate then rotate back so the icons stay upright. */
    .hh-app:nth-child(2) { transform: rotate(  0deg) translate(125px) rotate(  0deg); }
    .hh-app:nth-child(3) { transform: rotate( 60deg) translate(125px) rotate(-60deg); }
    .hh-app:nth-child(4) { transform: rotate(120deg) translate(125px) rotate(-120deg); }
    .hh-app:nth-child(5) { transform: rotate(180deg) translate(125px) rotate(-180deg); }
    .hh-app:nth-child(6) { transform: rotate(240deg) translate(125px) rotate(-240deg); }
    .hh-app:nth-child(7) { transform: rotate(300deg) translate(125px) rotate(-300deg); }

    .hh-app:hover { box-shadow: 0 14px 32px rgba(0, 0, 0, .42); }
    .hh-app img { width: 34px; height: 34px; object-fit: contain; }



    .hh-facts { display: grid; gap: 9px; }

    .hh-fact {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 13px 16px;
        border-radius: 11px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .14);
        color: rgba(255, 255, 255, .9);
        font-size: 14.5px;
        white-space: nowrap;
    }

    .hh-fact__t { min-width: 0; }
    .hh-fact b { color: #fff; font-weight: 700; }
    .hh-fact::before { content: "\2713"; color: #4ade80; font-weight: 700; }

    .hh-trust {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 26px;
        font-size: 14px;
        color: rgba(255, 255, 255, .72);
    }

    /* The stars stay a row at every width. Stacking on a phone is the whole
       .hh-trust block going column: star row over the review line, not the
       stars themselves going one per line. */
    .hh-trust__stars { display: flex; align-items: center; gap: 3px; }

    .hh-trust b { color: #ffffff; font-weight: 700; }
    .hh-trust svg { display: block; }

    @media (max-width: 1300px) {
        .hh-acc { height: 440px; }
        .hh-title { font-size: 40px; }
        .hh-panel__content { padding: 42px 40px; }
        .hh-panel__grid { gap: 26px; }
    }

    /* Eight closed spines take 476px, so the orbit only has room to sit beside
       the copy on a genuinely wide screen. Below that the copy takes the whole
       open panel instead of being crushed into an unreadable column. */
    /* Four closed spines only take 272px, so the orbit fits beside the copy on
       any normal desktop. It was pushed to 1500px when there were eight tabs. */
    @media (max-width: 1160px) {
        .hh-panel__grid { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
        .hh-aside, .hh-orbit { display: none; }
        .hh-lead { max-width: 62ch; }
    }

    @media (max-width: 1160px) {
        .hh-panel { flex-basis: 50px; }
        .hh-panel__num, .hh-panel__icon { display: none; }
    }

    /* Below the nav breakpoint the navbar stops overlaying, and a horizontal
       accordion stops making sense: the panels become stacked cards, every one
       open, no JS state. */
    @media (max-width: 1011px) {
        /* .site-navbar is position: absolute, so it overlays this hero. A fixed
           number for its height is what was wrong before: the header is two rows
           whose heights move with the width, the font and whether the support
           strip wraps, so any number picked here is right at one width and short
           at another, and short means the first panel slides under the logo.

           --hh-nav is the header's real measured bottom edge, set on <html> by
           the script under this hero and kept current on resize. The fallback is
           only for the first paint and for no-JS.

           The number added to it is the gap between the underside of the bar and
           the first panel, and nothing else. It is small on purpose: the header
           is a transparent overlay on this hero, so its own bottom padding is
           already reading as part of that gap. */
        .hh-hero { padding: calc(var(--hh-nav, 120px) + 10px) 0 60px; }
        .hh-acc { display: block; height: auto; }
        .hh-panel { display: block; flex: none; margin-bottom: 8px; }

        /* Nothing about the card animates in this layout. It does not widen, so
           the flex-basis curve has nothing to run on, and the height goes from
           58px to full in a single frame the moment the content stops being
           display: none. Transitioning border-color, box-shadow and the ::before
           glow across a geometry change that instant just gives the compositor
           work whose result nobody sees. */
        .hh-panel,
        .hh-panel::before,
        .hh-panel::after { transition: none; }
        .hh-panel::after { transform: scaleX(1); }

        /* The toggle stays put and becomes a full width row, so a tap can close
           a panel as well as open one. */
        .hh-panel__toggle {
            position: static;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 13px;
            padding: 17px 18px;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }

        .hh-panel__num { display: none; }
        .hh-panel__icon { display: block; width: 20px; text-align: center; opacity: .9; }

        .hh-panel__label {
            writing-mode: horizontal-tb;
            transform: none !important;
            font-size: 16.5px;
            margin-right: auto;
        }

        .hh-panel__spine { top: 22%; bottom: 22%; }

        /* Closed rows collapse to nothing; the open one is a normal block. */
        .hh-panel__content,
        .hh-panel.is-open .hh-panel__content {
            display: none;
            /* Matches the desktop rule's specificity on purpose. The 660px there
               is what keeps the copy from reflowing while a panel widens, and on
               a phone it forces the page to scroll sideways instead. */
            min-width: 0;
            opacity: 1;
            visibility: visible;
            transform: none;
            padding: 4px 18px 24px;
        }

        .hh-panel.is-open .hh-panel__content { display: block; }

        /* The loader runs here too. The stacked row still blanks its content
           while it swaps, so without the spinner a tap just gives an empty card
           for 420ms, which reads as broken rather than as loading.

           padding-top keeps the ring off the toggle: the loader covers the whole
           card, so centring it in the full box would drop the ring behind the
           row's own label. The padding shrinks the box it centres in, and does
           not need to match the toggle height exactly to do that. */
        .hh-loader { padding-top: 54px; }
        .hh-loader__ring { width: 34px; height: 34px; border-width: 2px; }

        /* An opening row has no height of its own yet, since its content is
           hidden while the loader runs. Without this the spinner has nothing to
           sit in and the card just blinks. */
        .hh-panel.is-open.is-loading .hh-panel__content { min-height: 132px; }
        .hh-panel.is-open .hh-panel__plus::after { transform: rotate(90deg); opacity: 0; }

        .hh-title { font-size: 27px; max-width: none; }
        .hh-lead { font-size: 15.5px; }
        .hh-cta { margin-top: 20px; }
    }

    @media (max-width: 751px) {
        .hh-hero { padding: calc(var(--hh-nav, 120px) + 8px) 0 44px; }
        .hh-wrap { padding: 0 18px; }
        .hh-trust { flex-direction: column; gap: 7px; text-align: center; font-size: 13px; }
        .hh-panel__toggle { padding: 15px 15px; }
        .hh-panel__content { padding: 2px 15px 20px; }
        .hh-loader { padding-top: 50px; }
        .hh-title { font-size: 24px; }
        .hh-cta { display: grid; flex-wrap: wrap; }
        .hh-btn { width: 100%; justify-content: center; }
    }

    @media (prefers-reduced-motion: reduce) {
        .hh-panel, .hh-btn, .hh-app,
        .hh-panel__toggle, .hh-panel__content, .hh-panel__label { transition: none; }
        .hh-loader__ring { animation: none; }
        .hh-panel.is-open .hh-orbit__core { animation: none; }
        .hh-panel.is-open .hh-panel__copy > *,
        .hh-panel.is-open .hh-app,
            .hh-panel.is-open .hh-fact { animation: none; }
    }