/* ==========================================================================
   Storefront home page blocks
   --------------------------------------------------------------------------
   The home page is a stack of blocks chosen in Store Management → Home Page
   Builder. Each one picks a background from the same palette the landing
   pages use, and App\Support\LandingPalette writes the readable text colour
   onto the section as --lp-on, so a dark background never needs its own rule.

   Everything here is mobile-first: the grids fall to fewer columns, the rails
   scroll with a finger, and nothing is allowed to overflow the viewport.
   ========================================================================== */

.hb {
    --hb-line: rgba(148, 163, 184, .28);
    --hb-radius: 14px;
    padding: 34px 0;
    color: var(--lp-on, inherit);
}
.hb:first-child { padding-top: 18px; }
/* Each block carries its own bottom padding, so two blocks on the SAME
   background need no top padding as well -- it would double the gap. Where
   the background changes (white -> light grey, say) the new band needs its
   own top padding, or its heading sits flush against the colour edge. */
.hb-bg-white + .hb-bg-white,
.hb-bg-light + .hb-bg-light,
.hb-bg-green + .hb-bg-green,
.hb-bg-orange + .hb-bg-orange,
.hb-bg-blue + .hb-bg-blue,
.hb-bg-purple + .hb-bg-purple,
.hb-bg-pink + .hb-bg-pink,
.hb-bg-amber + .hb-bg-amber,
.hb-bg-teal + .hb-bg-teal,
.hb-bg-dark + .hb-bg-dark { padding-top: 0; }
/* A hero slider sits flush under the header -- the 18px breathing room
   above is for text/banner blocks opening the page, not a full-width image. */
.hb.hb-slider:first-child { padding-top: 0; }

/* -- backgrounds ---------------------------------------------------------- */
.hb-bg-white  { background: #fff; }
.hb-bg-light  { background: #f4f6f8; }
.hb-bg-green  { background: linear-gradient(150deg, #0aa06a, #076f4a); }
.hb-bg-orange { background: linear-gradient(150deg, #f97316, #dc4a11); }
.hb-bg-blue   { background: linear-gradient(150deg, #2f7bf6, #1b52b8); }
.hb-bg-purple { background: linear-gradient(150deg, #8b5cf6, #6127d4); }
.hb-bg-pink   { background: linear-gradient(150deg, #ec4899, #be1b62); }
.hb-bg-amber  { background: linear-gradient(150deg, #f9b115, #d38707); }
.hb-bg-teal   { background: linear-gradient(150deg, #12b3a8, #0a7d76); }
.hb-bg-dark   { background: linear-gradient(150deg, #263041, #14181f); }
.hb-on-dark { --hb-line: rgba(255, 255, 255, .22); }

/* -- section heading ------------------------------------------------------ */
.hb-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 16px;
}
/* A flex item will not shrink below its content unless told to. Without
   this a long category name ran under the "see all" pill instead of
   wrapping, and the two overlapped. */
.hb-head > div { min-width: 0; }
.hb-head h2 {
    margin: 0; font-size: clamp(17px, 2.2vw, 23px); font-weight: 700; line-height: 1.3;
    overflow-wrap: anywhere;
}
.hb-head p  { margin: 3px 0 0; font-size: 13.5px; opacity: .72; overflow-wrap: anywhere; }

@media (max-width: 480px) {
    /* Too little width for both on one line; the pill drops below. */
    .hb-head { flex-wrap: wrap; gap: 8px; }
}
.hb-more {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--hb-line); text-decoration: none; color: inherit;
    font-size: 12.5px; font-weight: 600; transition: background .16s, border-color .16s;
}
.hb-more:hover { background: rgba(148, 163, 184, .14); color: inherit; }

/* -- main slider ---------------------------------------------------------- */
.hb-slider { position: relative; overflow: hidden; }
.hb-slides { position: relative; }
.hb-slide { display: none; }
.hb-slide.is-on { display: block; animation: hb-fade .4s ease; }
@keyframes hb-fade { from { opacity: 0; } to { opacity: 1; } }
/* fill (not cover): whatever size gets uploaded shows in full, edge to
   edge, with no cropping -- it stretches to the box instead of clipping. */
.hb-slide img { width: 100%; display: block; object-fit: fill; }
.hb-slider-sm .hb-slide img { height: clamp(140px, 22vw, 260px); }
.hb-slider-md .hb-slide img { height: clamp(180px, 32vw, 420px); }
.hb-slider-lg .hb-slide img { height: clamp(220px, 42vw, 560px); }

.hb-slide-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 34px 22px 18px; color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .62));
}
.hb-slide-cap span { display: block; font-size: clamp(15px, 2.4vw, 24px); font-weight: 700; }
.hb-slide-cap em {
    display: inline-block; margin-top: 8px; padding: 7px 16px; border-radius: 999px;
    background: #fff; color: #12241a; font-style: normal; font-size: 13px; font-weight: 700;
}

/* -- arrows, shared by the slider and the rails --------------------------- */
.hb-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(255, 255, 255, .92); border: 1px solid var(--hb-line);
    color: #1e293b; font-size: 13px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
    transition: background .16s, opacity .16s;
}
.hb-nav:hover { background: #fff; }
.hb-nav.is-prev { left: 8px; }
.hb-nav.is-next { right: 8px; }
.hb-nav[hidden] { display: none; }

.hb-dots {
    position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
    display: flex; justify-content: center; gap: 6px;
}
.hb-dots button {
    width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .55); border: 0; transition: width .2s, background .2s;
}
.hb-dots button.is-on { width: 20px; border-radius: 999px; background: #fff; }

/* -- category tiles ------------------------------------------------------- */
.hb-cats { display: grid; gap: 14px; }
.hb-cats.is-circle, .hb-cats.is-card { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hb-cats.is-rail {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x mandatory; scrollbar-width: thin;
}
/* min-width: 0 -- a flex item's automatic minimum is its min-content width,
   so a long unbroken name ("Computers & Accessories") widened its own tile
   past 116px and the row came out in mismatched sizes. Two lines instead. */
.hb-cats.is-rail .hb-cat { flex: 0 0 124px; min-width: 0; scroll-snap-align: start; }
.hb-cats.is-rail .hb-cat-name { white-space: normal; min-height: 2.7em; }

.hb-cat { display: block; text-align: center; text-decoration: none; color: inherit; }
.hb-cat-img {
    display: grid; place-items: center; overflow: hidden;
    background: rgba(148, 163, 184, .12); border: 1px solid var(--hb-line);
    margin: 0 auto 8px; transition: transform .18s, border-color .18s;
}
.hb-cats.is-circle .hb-cat-img { width: 84px; height: 84px; border-radius: 50%; }
.hb-cats.is-card .hb-cat-img, .hb-cats.is-rail .hb-cat-img, .hb-cats.is-stepped .hb-cat-img {
    width: 100%; aspect-ratio: 1; border-radius: var(--hb-radius);
}

/* -- category tiles, stepped scroll (same engine as .hb-logo-slider) ----- */
.hb-cats.is-stepped { display: block; overflow: hidden; }
.hb-cat-track { display: flex; gap: 14px; }
.hb-cat-track > .hb-cat { flex: 0 0 calc((100% - 5 * 14px) / 6); min-width: 0; } /* 6 visible on desktop */
.hb-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.hb-cat-img i { font-size: 22px; opacity: .5; }
.hb-cat:hover .hb-cat-img { transform: translateY(-3px); border-color: currentColor; }
.hb-cat-name {
    display: block; font-size: 13px; font-weight: 600; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* -- product grid --------------------------------------------------------- */
.hb-grid { display: grid; gap: 14px; }
.hb-cols-1 { grid-template-columns: minmax(0, 1fr); }
.hb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hb-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hb-cell.is-hidden { display: none; }

.hb-more-wrap { text-align: center; margin-top: 18px; }
.hb-more-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 26px; border-radius: 999px; cursor: pointer;
    background: transparent; border: 1px solid var(--hb-line); color: inherit;
    font-size: 13.5px; font-weight: 700; transition: background .16s;
}
.hb-more-btn:hover { background: rgba(148, 163, 184, .16); }

/* -- product rail --------------------------------------------------------- */
.hb-rail-wrap { position: relative; }
.hb-rail {
    display: flex; gap: 14px; overflow-x: auto;
    /* overflow-x makes overflow-y compute to auto, so this box clips its
       cards -- the padding is the room their hover lift and shadow need. */
    padding: 6px 2px 10px;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    /* The arrows and a swipe are the controls; a scrollbar under a
       product row just looks like a stray line. Scrolling itself is
       untouched -- only the bar is hidden. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hb-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
.hb-rail-item { flex: 0 0 calc((100% - 4 * 14px) / 5); min-width: 0; scroll-snap-align: start; }

/* -- banner beside products ----------------------------------------------- */
.hb-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.hb-split.is-right { grid-template-columns: minmax(0, 1fr) 300px; }
.hb-split.is-right .hb-split-banner { order: 2; }
.hb-split-banner img { width: 100%; border-radius: var(--hb-radius); display: block; }

/* -- banner ads ----------------------------------------------------------- */
.hb-banners { display: grid; gap: 14px; }
.hb-banners img { width: 100%; border-radius: var(--hb-radius); display: block; }

/* -- offer countdown ------------------------------------------------------ */
.hb-deal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.hb-deal-head h2 { margin: 0; font-size: clamp(17px, 2.2vw, 23px); font-weight: 700; }
.hb-deal-head p { margin: 3px 0 0; font-size: 13.5px; opacity: .72; }
.hb-clock { display: flex; align-items: center; gap: 6px; }
.hb-clock > i { font-style: normal; font-weight: 700; opacity: .5; }
.hb-clock span {
    display: grid; min-width: 54px; padding: 6px 8px; border-radius: 10px; text-align: center;
    background: rgba(148, 163, 184, .16); border: 1px solid var(--hb-line);
}
.hb-clock b { font-size: 18px; font-weight: 800; line-height: 1.15; }
.hb-clock small { font-size: 10px; opacity: .7; }

/* -- service strip -------------------------------------------------------- */
/* div., not the bare class: the block's own <section> is also named
   hb-services (hb-{type}), and the grid landed on it too, squeezing the
   whole strip into its first column. */
div.hb-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hb-service {
    display: flex; align-items: center; gap: 11px;
    padding: 14px; border-radius: var(--hb-radius);
    border: 1px solid var(--hb-line); background: rgba(148, 163, 184, .07);
}
.hb-service i { font-size: 19px; flex: 0 0 auto; }
.hb-service strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.hb-service small { display: block; font-size: 11.5px; opacity: .7; }

/* -- notice --------------------------------------------------------------- */
.hb-notice { padding: 10px 0; font-weight: 600; text-align: center; overflow: hidden; }
.hb-notice.is-scrolling span {
    display: inline-block; white-space: nowrap; animation: hb-marquee 20s linear infinite;
}
@keyframes hb-marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .hb-notice.is-scrolling span { animation: none; } }

/* -- text and spacer ------------------------------------------------------ */
.hb-text { max-width: 760px; margin: 0 auto; }
.hb-text h2 { margin: 0 0 10px; font-size: clamp(18px, 2.4vw, 25px); font-weight: 700; }
.hb-text p { margin: 0; line-height: 1.75; opacity: .8; }
.hb-divider { padding: 0; }
.hb-divider-sm { height: 10px; }
.hb-divider-md { height: 26px; }
.hb-divider-lg { height: 48px; }

/* -- tablets -------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hb-cats.is-circle, .hb-cats.is-card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hb-cat-track > .hb-cat { flex-basis: calc((100% - 3 * 14px) / 4); } /* 4 visible on tablet */
    .hb-cols-4, .hb-cols-5, .hb-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hb-rail-item { flex-basis: calc((100% - 3 * 14px) / 4); }
    .hb-split, .hb-split.is-right { grid-template-columns: minmax(0, 1fr); }
    .hb-split.is-right .hb-split-banner { order: 0; }
    div.hb-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- phones --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .hb { padding: 24px 0; }
    .hb-head { align-items: center; }
    .hb-head h2 { font-size: 17px; }
    .hb-more { padding: 6px 12px; font-size: 12px; }

    .hb-cats.is-circle, .hb-cats.is-card { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .hb-cats.is-circle .hb-cat-img { width: 68px; height: 68px; }
    .hb-cat-name { font-size: 11.5px; }
    .hb-cat-track { gap: 10px; }
    .hb-cat-track > .hb-cat { flex-basis: calc((100% - 2 * 10px) / 3); } /* 3 visible on phone */

    .hb-grid { gap: 10px; }
    .hb-cols-2, .hb-cols-3, .hb-cols-4, .hb-cols-5, .hb-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hb-rail { gap: 10px; }
    .hb-rail-item { flex-basis: calc((100% - 10px) / 2); }

    .hb-nav { width: 30px; height: 30px; font-size: 11px; }
    .hb-banners { gap: 10px; }
    .hb-banners.hb-cols-3, .hb-banners.hb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hb-deal-head { gap: 10px; }
    .hb-clock span { min-width: 46px; padding: 5px 6px; }
    .hb-clock b { font-size: 15px; }

    div.hb-services { gap: 8px; }
    .hb-service { padding: 11px; gap: 9px; }
    .hb-service i { font-size: 16px; }
    .hb-service strong { font-size: 12.5px; }
    .hb-service small { font-size: 10.5px; }
}

@media (max-width: 479.98px) {
    .hb-banners.hb-cols-2, .hb-banners.hb-cols-3, .hb-banners.hb-cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }
    div.hb-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- category line that moves on its own ---------------------------------- */
.hb-marquee {
    overflow: hidden;
    /* Fade the two ends so tiles arrive and leave instead of being chopped. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.hb-marquee-track {
    display: flex; width: max-content;
    animation: hb-scroll var(--hb-speed, 38s) linear infinite;
}
.hb-marquee-set { display: flex; gap: 26px; padding-right: 26px; }
.hb-marquee .hb-cat { flex: 0 0 96px; }

/* The track holds two identical sets, so moving it half its own width lands
   the copy exactly where the original started. */
@keyframes hb-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.hb-speed-slow   { --hb-speed: 60s; }
.hb-speed-normal { --hb-speed: 38s; }
.hb-speed-fast   { --hb-speed: 22s; }

/* Reading a name is easier when it is not sliding away. */
.hb-marquee:hover .hb-marquee-track,
.hb-marquee:focus-within .hb-marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .hb-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .hb-marquee-track { animation: none; }
    .hb-marquee-set:last-child { display: none; }   /* no need for the copy */
}


/* The marquee tiles are always circles, whatever the wrapping styles do. */
.hb-marquee .hb-cat-img {
    width: 84px; height: 84px; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: rgba(148, 163, 184, .12); border: 1px solid var(--hb-line);
    margin: 0 auto 8px;
}
.hb-marquee .hb-cat-img img { width: 100%; height: 100%; object-fit: cover; }

/* Phone sizes for the moving line. These come last so they win over the
   base circle rule above. */
@media (max-width: 767.98px) {
    .hb-marquee-set { gap: 16px; padding-right: 16px; }
    .hb-marquee .hb-cat { flex-basis: 74px; }
    .hb-marquee .hb-cat-img { width: 64px; height: 64px; }
    .hb-marquee .hb-cat-name { font-size: 11px; }
    /* Fewer tiles fit, so the same duration reads as faster. */
    .hb-speed-slow   { --hb-speed: 40s; }
    .hb-speed-normal { --hb-speed: 26s; }
    .hb-speed-fast   { --hb-speed: 16s; }
}

/* --------------------------------------------------------------------------
   Rail width follows the block's "Per row" setting.

   --hb-per-row is written on the wrapper by _rail.blade.php; the fallback
   keeps older markup that does not set it working unchanged.
   -------------------------------------------------------------------------- */
.hb-rail-item {
    flex: 0 0 calc((100% - (var(--hb-per-row, 5) - 1) * 14px) / var(--hb-per-row, 5));
}

@media (max-width: 1199.98px) {
    /* Never more than four on a tablet, however the block is set. */
    .hb-rail-wrap { --hb-per-row: min(4, var(--hb-per-row-set, 4)); }
    .hb-rail-item { flex-basis: calc((100% - 3 * 14px) / 4); }
}
@media (max-width: 767.98px) {
    .hb-rail-item { flex-basis: calc((100% - 2 * 12px) / 3); }
}
@media (max-width: 575.98px) {
    .hb-rail-item { flex-basis: calc((100% - 10px) / 2); }
}

/* -- shared buttons for the new billing-flavoured blocks ------------------- */
.hb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.hb-btn-primary { background: #4f46e5; color: #fff; }
.hb-btn-primary:hover { background: #4338ca; color: #fff; }
.hb-btn-ghost { background: transparent; border-color: var(--hb-line); color: inherit; }
.hb-btn-ghost:hover { background: rgba(148, 163, 184, .16); color: inherit; }

/* -- hero ------------------------------------------------------------------- */
.hb-hero-box { display: grid; gap: 32px; align-items: center; padding: 20px 0; }
.hb-hero-box.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.hb-hero-eyebrow {
    display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    border: 1px solid var(--hb-line);
}
.hb-hero-box h1 { margin: 0 0 14px; font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; line-height: 1.15; }
.hb-hero-copy > p { margin: 0 0 22px; font-size: clamp(14.5px, 1.6vw, 17px); line-height: 1.7; opacity: .82; max-width: 640px; }
.hb-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hb-hero-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.hb-hero-stats > div { display: flex; flex-direction: column; }
.hb-hero-stats strong { font-size: 22px; font-weight: 800; }
.hb-hero-stats span { font-size: 12.5px; opacity: .7; }
.hb-hero-media img { width: 100%; border-radius: 18px; display: block; }
@media (max-width: 899.98px) {
    .hb-hero-box.has-image { grid-template-columns: minmax(0, 1fr); }
    .hb-hero-media { order: -1; }
}

/* -- domain checker ---------------------------------------------------------- */
.hb-domain { max-width: 720px; margin: 0 auto; text-align: center; }
.hb-domain h2 { margin: 0 0 8px; font-size: clamp(20px, 2.8vw, 28px); font-weight: 800; }
.hb-domain > p { margin: 0 0 24px; opacity: .78; }
.hb-domain-form {
    display: flex; gap: 10px; padding: 8px; border-radius: 14px;
    border: 1px solid var(--hb-line); background: rgba(148, 163, 184, .08);
}
.hb-domain-input {
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 10px 14px;
    font-size: 15px; color: inherit; outline: none;
}
.hb-domain-note { margin: 14px 0 0; font-size: 13.5px; opacity: .8; }
.hb-domain-tlds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.hb-domain-tld {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--hb-line); font-size: 13px; font-weight: 600;
}
.hb-domain-tld b { font-weight: 700; opacity: .75; }

/* -- client logos: square cards, a handful visible at once, stepping to the next one every few
   seconds (home-blocks.js's [data-logo-slider] handler) -- not a continuous marquee drift. -------- */
.hb-logos-head { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin: 0 0 22px; }
.hb-logo-slider { overflow: hidden; }
.hb-logo-track { display: flex; gap: 16px; }
.hb-logo-card {
    flex: 0 0 calc((100% - 112px) / 8); /* 8 visible on desktop, 7 gaps of 16px */
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 14px; border-radius: var(--hb-radius); border: 1px solid var(--hb-line);
    background: var(--lp-on-card, #fff); text-decoration: none; color: inherit;
    transition: transform .2s, box-shadow .2s;
}
.hb-logo-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 23, 42, .08); }
.hb-logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.hb-logo-text { font-size: 13px; font-weight: 800; text-align: center; line-height: 1.3; opacity: .75; }
@media (max-width: 1199.98px) and (min-width: 768px) {
    .hb-logo-card { flex-basis: calc((100% - 64px) / 5); } /* 5 visible on tablet */
}
@media (max-width: 767.98px) {
    .hb-logo-track { gap: 12px; }
    .hb-logo-card { flex-basis: calc((100% - 12px) / 2); padding: 10px; } /* 2 visible on phone */
}

/* -- reviews -------------------------------------------------------------------- */
/* Not .hb-reviews -- the page wraps every block in <section class="hb hb-{type}">, so that name is the section itself. */
.hb-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hb-review-card { padding: 22px; border-radius: var(--hb-radius); border: 1px solid var(--hb-line); background: rgba(148, 163, 184, .06); display: flex; flex-direction: column; gap: 14px; }
.hb-review-stars { color: #f59e0b; font-size: 13px; }
.hb-review-quote { margin: 0; font-size: 14.5px; line-height: 1.7; opacity: .88; flex: 1; }
.hb-review-who { display: flex; align-items: center; gap: 10px; }
.hb-review-who img, .hb-review-avatar-fallback { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.hb-review-avatar-fallback { display: grid; place-items: center; background: rgba(148, 163, 184, .2); font-weight: 700; }
.hb-review-who strong { display: block; font-size: 13.5px; }
.hb-review-who small { display: block; font-size: 12px; opacity: .65; }
@media (max-width: 991.98px) { .hb-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .hb-review-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Hosting-site look (2026-09-28, inspired by the owner's own WHMCS theme):
   gradient headline, centred hero with a domain search, big-number bar,
   feature cards, pricing cards, numbered steps and an FAQ.
   ========================================================================== */

.hb-gradient-text {
    background: linear-gradient(90deg, #22d3ee, #6366f1 55%, #a855f7);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hb-hero-box h1 .hb-gradient-text { display: block; }

/* Eyebrow + centred variant of the shared section heading. */
.hb-eyebrow {
    display: block; margin-bottom: 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .6;
}
.hb-head.is-center { justify-content: center; text-align: center; margin-bottom: 30px; }
.hb-head.is-center h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; }
.hb-head.is-center p { font-size: 15px; max-width: 620px; margin: 8px auto 0; }

/* A dark hero gets a deep navy wash, a glow and a faint grid, like a hosting brand. */
.hb-hero.hb-bg-dark {
    position: relative; overflow: hidden; padding: 64px 0;
    background:
        radial-gradient(60% 70% at 85% 0%, rgba(168, 85, 247, .28), transparent 60%),
        radial-gradient(50% 60% at 10% 100%, rgba(34, 211, 238, .14), transparent 60%),
        #0b1120;
}
.hb-hero.hb-bg-dark::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hb-hero.hb-bg-dark > .container { position: relative; }
/* Dark blocks right under a dark hero continue the same navy. */
.hb-hero.hb-bg-dark ~ .hb-bg-dark { background: #0b1120; }
.hb-bg-dark .hb-hero-eyebrow { border-color: rgba(34, 211, 238, .4); color: #67e8f9; background: rgba(34, 211, 238, .08); }

.hb-hero-box.is-center { text-align: center; }
.hb-hero-box.is-center .hb-hero-copy { max-width: 860px; margin: 0 auto; }
.hb-hero-box.is-center .hb-hero-copy > p { margin-left: auto; margin-right: auto; }
.hb-hero-box.is-center .hb-hero-actions,
.hb-hero-box.is-center .hb-hero-stats { justify-content: center; }
.hb-hero-search { max-width: 640px; margin: 0 auto 24px; }
.hb-hero-box:not(.is-center) .hb-hero-search { margin-left: 0; }
.hb-hero-search .hb-domain-form { border-radius: 999px; padding: 6px; }
.hb-hero-search .hb-btn { border-radius: 999px; }
.hb-hero-search .hb-domain-tlds { margin-top: 16px; }
.hb-bg-dark .hb-domain-form { background: rgba(255, 255, 255, .06); }
.hb-bg-dark .hb-domain-input::placeholder { color: rgba(255, 255, 255, .45); }

/* -- big numbers bar ------------------------------------------------------ */
.hb-stats-row {
    display: grid; gap: 12px; text-align: center; padding: 26px 0;
    border-top: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line);
}
.hb-stats-row.hb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-stats-row.hb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-stats-row.hb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-stat strong { display: block; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; line-height: 1.15; }
.hb-stat span { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; opacity: .7; }
@media (max-width: 575.98px) { .hb-stats-row.hb-cols-3, .hb-stats-row.hb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } }

/* -- feature cards --------------------------------------------------------- */
.hb-feature-grid { display: grid; gap: 16px; }
.hb-feature-grid.hb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-feature-grid.hb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-feature-grid.hb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-feature {
    padding: 20px; border-radius: var(--hb-radius); border: 1px solid var(--hb-line);
    background: var(--lp-on-card, #fff); transition: transform .18s, box-shadow .18s;
}
.hb-on-dark .hb-feature { background: rgba(255, 255, 255, .04); }
.hb-feature:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 23, 42, .08); }
.hb-feature h3 { margin: 14px 0 6px; font-size: 15px; font-weight: 700; }
.hb-feature p { margin: 0; font-size: 13.5px; line-height: 1.6; opacity: .72; }
.hb-feature-ico {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    color: #fff; font-size: 16px;
}
.hb-accent-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.hb-accent-violet { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.hb-accent-blue   { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.hb-accent-green  { background: linear-gradient(135deg, #34d399, #059669); }
.hb-accent-orange { background: linear-gradient(135deg, #fb923c, #ea580c); }
.hb-accent-pink   { background: linear-gradient(135deg, #f472b6, #db2777); }
.hb-accent-teal   { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.hb-accent-amber  { background: linear-gradient(135deg, #fbbf24, #d97706); }
@media (max-width: 991.98px) { .hb-feature-grid.hb-cols-3, .hb-feature-grid.hb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .hb-feature-grid.hb-cols-2, .hb-feature-grid.hb-cols-3, .hb-feature-grid.hb-cols-4 { grid-template-columns: minmax(0, 1fr); } }

/* -- pricing ------------------------------------------------------------------ */
.hb-price-grid { display: grid; gap: 18px; align-items: stretch; }
.hb-price-grid.hb-cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 380px; margin: 0 auto; }
.hb-price-grid.hb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; }
.hb-price-grid.hb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-price-grid.hb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-price-card {
    position: relative; overflow: hidden; padding: 26px 22px 22px; border-radius: var(--hb-radius);
    border: 1px solid var(--hb-line); background: var(--lp-on-card, #fff);
    display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s;
}
.hb-on-dark .hb-price-card { background: rgba(255, 255, 255, .04); }
/* The thin gradient line along the top of every card. */
.hb-price-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #22d3ee, #6366f1, #a855f7);
}
.hb-price-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15, 23, 42, .1); }
.hb-price-card.is-highlight { border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1, 0 18px 40px rgba(99, 102, 241, .18); }
.hb-price-card.is-highlight::before { background: linear-gradient(90deg, #f97316, #ec4899); height: 4px; }
.hb-price-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hb-price-card h3 { margin: 0; font-size: 17px; font-weight: 700; }
.hb-price-badge {
    flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    background: linear-gradient(90deg, #f97316, #ec4899); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.hb-price-from { margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.hb-price-amount {
    margin: 4px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--hb-line);
    font-size: 32px; font-weight: 800; line-height: 1.1;
}
.hb-price-amount small { font-size: 13px; font-weight: 500; opacity: .6; }
.hb-price-symbol { font-size: 20px; vertical-align: top; margin-left: 2px; }
.hb-price-fx { display: block; margin: -14px 0 18px; font-size: 12px; font-weight: 500; opacity: .55; }
.hb-price-feats { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hb-price-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; opacity: .88; }
/* FA's all.js swaps <i> for an <svg>, so style both. */
.hb-price-feats li > i, .hb-price-feats li > svg { flex: 0 0 auto; color: #f97316; margin-top: 3px; font-size: 12px; }
.hb-price-card .hb-btn { width: 100%; }
@media (max-width: 991.98px) { .hb-price-grid.hb-cols-3, .hb-price-grid.hb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .hb-price-grid.hb-cols-2, .hb-price-grid.hb-cols-3, .hb-price-grid.hb-cols-4 { grid-template-columns: minmax(0, 1fr); } }

/* -- how it works --------------------------------------------------------- */
.hb-step-grid { display: grid; gap: 16px; }
.hb-step-grid.hb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-step-grid.hb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-step-grid.hb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-step { padding: 22px; border-radius: var(--hb-radius); border: 1px solid var(--hb-line); background: var(--lp-on-card, #fff); }
.hb-on-dark .hb-step { background: rgba(255, 255, 255, .04); }
.hb-step-cta { text-align: center; margin-top: 28px; }
.hb-step-no {
    display: block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 30px; font-weight: 700;
    background: linear-gradient(90deg, #22d3ee, #6366f1); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hb-step h3 { margin: 10px 0 6px; font-size: 16px; font-weight: 700; }
.hb-step p { margin: 0; font-size: 13.5px; line-height: 1.6; opacity: .72; }
@media (max-width: 767.98px) { .hb-step-grid.hb-cols-2, .hb-step-grid.hb-cols-3, .hb-step-grid.hb-cols-4 { grid-template-columns: minmax(0, 1fr); } }

/* -- FAQ (the list is .hb-faq-list -- .hb-faq is the section itself) ------------------------ */
.hb-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.hb-faq-item { border: 1px solid var(--hb-line); border-radius: 12px; background: var(--lp-on-card, #fff); }
.hb-on-dark .hb-faq-item { background: rgba(255, 255, 255, .04); }
.hb-faq-item summary {
    list-style: none; cursor: pointer; padding: 16px 18px; font-size: 14.5px; font-weight: 700;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.hb-faq-item summary::-webkit-details-marker { display: none; }
.hb-faq-item summary::after { content: "+"; color: #f97316; font-size: 20px; font-weight: 500; line-height: 1; }
.hb-faq-item[open] summary::after { content: "\2212"; }
.hb-faq-item p { margin: 0; padding: 0 18px 16px; font-size: 13.5px; line-height: 1.7; opacity: .75; }

/* ==========================================================================
   Polish (2026-09-28, "aro smart koro"): brand typeface, scroll reveal,
   moving glow in the dark hero, glowing search box, richer hovers.
   ========================================================================== */

.hb { font-family: var(--sc-font, 'Plus Jakarta Sans', system-ui, sans-serif); }
.hb h1, .hb h2, .hb h3 { letter-spacing: -.02em; }

/* Scroll reveal -- the classes are added by home-blocks.js. */
.hb-js-reveal .hb-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.hb-js-reveal .hb-rv.is-in { opacity: 1; transform: none; }

/* The first block sits right under the sticky header -- no white gap. */
#content > .hb:first-child, .hb.hb-hero:first-child { margin-top: 0; }

/* Dark hero: two soft colour orbs drifting behind the copy. */
.hb-hero.hb-bg-dark { padding: 88px 0 72px; isolation: isolate; }
.hb-hero.hb-bg-dark::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    width: 620px; height: 620px; left: 50%; top: -260px; margin-left: -310px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .35), rgba(99, 102, 241, .12) 45%, transparent 70%);
    filter: blur(20px); animation: hb-drift 14s ease-in-out infinite alternate;
}
@keyframes hb-drift {
    0%   { transform: translate(-120px, 0) scale(1); }
    50%  { transform: translate(90px, 40px) scale(1.15); }
    100% { transform: translate(140px, -20px) scale(.95); }
}
.hb-hero.hb-bg-dark .hb-hero-box h1 { font-size: clamp(32px, 5.2vw, 60px); line-height: 1.08; font-weight: 800; }
.hb-hero.hb-bg-dark .hb-hero-copy > p { color: #cbd5e1; opacity: 1; font-size: clamp(15px, 1.7vw, 18px); }

/* The gradient line shimmers slowly. */
.hb-gradient-text { background-size: 200% auto; animation: hb-shine 6s linear infinite; }
@keyframes hb-shine { to { background-position: 200% center; } }

/* Search box: gradient ring that lights up on focus. */
.hb-bg-dark .hb-hero-search .hb-domain-form {
    background: rgba(15, 23, 42, .7); border: 1px solid rgba(148, 163, 184, .25);
    box-shadow: 0 20px 50px -20px rgba(99, 102, 241, .6);
    transition: border-color .2s, box-shadow .2s;
}
.hb-bg-dark .hb-hero-search .hb-domain-form:focus-within {
    border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, .22), 0 20px 50px -20px rgba(139, 92, 246, .8);
}
.hb-bg-dark .hb-domain-input { color: #fff; font-size: 16px; }
.hb-bg-dark .hb-domain-tld { background: rgba(255, 255, 255, .04); border-color: rgba(148, 163, 184, .22); color: #e2e8f0; }
.hb-bg-dark .hb-domain-tld b { color: #a5b4fc; opacity: 1; }
.hb-bg-dark .hb-domain-note { color: #a5b4fc; }

/* Buttons: brand gradient + lift. */
.hb-btn { font-family: inherit; transition: transform .15s, box-shadow .15s, background .15s; }
.hb-btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #c026d3); box-shadow: 0 10px 26px -10px rgba(139, 92, 246, .75); }
.hb-btn-primary:hover { background: linear-gradient(135deg, #5458e8, #7c4ef0 60%, #b31fc6); transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(139, 92, 246, .9); }
.hb-on-dark .hb-btn-ghost { border-color: rgba(255, 255, 255, .22); color: #fff; }
.hb-on-dark .hb-btn-ghost:hover { background: rgba(255, 255, 255, .08); }

/* Feature cards: gradient ring + icon pop on hover. */
.hb-feature { position: relative; }
.hb-feature::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, #22d3ee, #6366f1, #c026d3); opacity: 0; transition: opacity .2s;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.hb-feature:hover::before { opacity: 1; }
.hb-feature:hover { box-shadow: 0 18px 40px -18px rgba(99, 102, 241, .45); }
.hb-feature-ico { transition: transform .2s; box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .5); }
.hb-feature:hover .hb-feature-ico { transform: scale(1.08) rotate(-4deg); }

/* Stats bar in the navy band: numbers a touch bigger, soft dividers. */
.hb-bg-dark .hb-stats-row { border-color: rgba(148, 163, 184, .14); }
.hb-bg-dark .hb-stat + .hb-stat { border-left: 1px solid rgba(148, 163, 184, .12); }
.hb-bg-dark .hb-stat span { color: #94a3b8; opacity: 1; }
@media (max-width: 575.98px) { .hb-bg-dark .hb-stat + .hb-stat { border-left: 0; } }

/* Steps: a thin connecting line behind the numbers on wide screens. */
.hb-step { transition: transform .2s, border-color .2s; }
.hb-step:hover { transform: translateY(-3px); border-color: rgba(139, 92, 246, .5); }

/* Reviews and FAQ cards match the rest. */
.hb-review-card { background: var(--lp-on-card, #fff); transition: transform .2s, box-shadow .2s; }
.hb-review-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .25); }
.hb-review-avatar-fallback { background: linear-gradient(135deg, #6366f1, #c026d3); color: #fff; }
.hb-faq-item[open] { border-color: rgba(139, 92, 246, .45); box-shadow: 0 12px 30px -18px rgba(99, 102, 241, .45); }

/* Client logos: text logos in the brand gradient when hovered. */
.hb-logo-text { font-family: inherit; letter-spacing: -.01em; }

/* Product cards from the shop get softer corners to sit with the new cards. */
.hb .product-card, .hb .product_item { border-radius: 14px; }

/* -- anchors + pricing tabs (2026-09-28) ------------------------------------ */
/* Menu links land on these; the margin keeps the target clear of the sticky header. */
.hb-anchor { display: block; height: 0; scroll-margin-top: 96px; }
.hb-tabs {
    display: flex; flex-wrap: wrap; gap: 6px; width: max-content; max-width: 100%;
    margin: -8px 0 28px; padding: 5px; border-radius: 14px;
    border: 1px solid var(--hb-line); background: rgba(148, 163, 184, .08);
}
.hb-tabs.is-center { margin-left: auto; margin-right: auto; }
.hb-tab {
    border: 0; background: transparent; color: inherit; cursor: pointer;
    padding: 9px 18px; border-radius: 10px; font: 600 14px var(--sc-font, inherit); opacity: .75;
    transition: background .15s, color .15s, opacity .15s;
}
.hb-tab:hover { opacity: 1; }
.hb-tab.is-active {
    opacity: 1; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #c026d3);
    box-shadow: 0 8px 20px -8px rgba(139, 92, 246, .7);
}
.hb-price-grid[hidden] { display: none; }
@media (max-width: 575.98px) { .hb-tabs { width: 100%; } .hb-tab { flex: 1 1 45%; padding: 9px 10px; font-size: 13px; } }

/* Hero domain box: a second "Transfer" button, like the owner's WHMCS home. */
.hb-btn-transfer { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-radius: 999px; }
.hb-btn-transfer:hover { color: #fff; filter: brightness(1.08); }
.hb-hero-search .hb-domain-form { gap: 6px; }
@media (max-width: 479.98px) { .hb-hero-search .hb-btn { padding: 10px 14px; } }

/* ==========================================================================
   Hero "showcase" layout (2026-09-28 redesign): copy + domain search on the
   left, a drawn control-panel mockup with floating chips on the right.
   ========================================================================== */
.hb-domain-lead { margin-left: 12px; color: #94a3b8; flex: 0 0 auto; }
.hb-hero-search .hb-domain-form > svg.hb-domain-lead { margin-left: 12px; color: #94a3b8; }

.hb-hero-box.is-showcase {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; text-align: left;
}
.hb-hero.hb-bg-dark:has(.is-showcase) { padding: 72px 0 84px; }
.is-showcase .hb-hero-copy > p { max-width: 560px; }
.hb-hero.hb-bg-dark .is-showcase h1 { font-size: clamp(32px, 4.3vw, 56px); }
.is-showcase .hb-hero-search { margin: 0 0 22px; max-width: 580px; }
.is-showcase .hb-domain-tlds { justify-content: flex-start; }
.is-showcase .hb-hero-actions { margin-bottom: 26px; }
.is-showcase .hb-hero-actions .hb-btn { padding: 12px 22px; }
.is-showcase .hb-hero-actions .hb-btn i, .is-showcase .hb-hero-actions .hb-btn svg { margin-left: 6px; transition: transform .15s; }
.is-showcase .hb-hero-actions .hb-btn:hover i, .is-showcase .hb-hero-actions .hb-btn:hover svg { transform: translateX(3px); }

/* eyebrow pill with a live dot */
.hb-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.hb-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }
.hb-pulse::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e;
    animation: hb-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes hb-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* trust row */
.hb-hero-trust { display: flex; align-items: center; gap: 14px; }
.hb-trust-faces { display: flex; }
.hb-face {
    display: grid; place-items: center; width: 34px; height: 34px; margin-left: -9px; border-radius: 50%;
    font-size: 13px; font-weight: 800; color: #fff; border: 2px solid #0b1120;
}
.hb-face:first-child { margin-left: 0; }
.hb-face-0 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.hb-face-1 { background: linear-gradient(135deg, #ec4899, #c026d3); }
.hb-face-2 { background: linear-gradient(135deg, #14b8a6, #0ea5e9); }
.hb-face-3 { background: linear-gradient(135deg, #f59e0b, #f97316); }
.hb-trust-stars { display: flex; gap: 2px; color: #fbbf24; font-size: 12px; }
.hb-hero-trust small { display: block; margin-top: 3px; font-size: 13px; color: #94a3b8; }

/* -- the drawn control panel ------------------------------------------------ */
.hb-hv { position: relative; perspective: 1400px; padding: 26px 10px; }
.hb-hv-window {
    position: relative; border-radius: 18px; overflow: hidden;
    background: linear-gradient(180deg, rgba(30, 41, 59, .82), rgba(15, 23, 42, .92));
    border: 1px solid rgba(148, 163, 184, .2);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 0 90px -20px rgba(139, 92, 246, .55);
    transform: rotateY(-9deg) rotateX(5deg); transform-style: preserve-3d;
    transition: transform .5s ease;
}
.hb-hv:hover .hb-hv-window { transform: rotateY(-3deg) rotateX(2deg); }
.hb-hv-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(148, 163, 184, .14); background: rgba(2, 6, 23, .35); }
.hb-hv-bar > span { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; }
.hb-hv-bar > span:nth-child(2) { background: #f59e0b; }
.hb-hv-bar > span:nth-child(3) { background: #22c55e; }
.hb-hv-bar em {
    margin-left: 12px; flex: 1; font-style: normal; font-size: 11.5px; color: #94a3b8;
    background: rgba(148, 163, 184, .1); border-radius: 7px; padding: 5px 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-hv-bar em i, .hb-hv-bar em svg { color: #22c55e; margin-right: 4px; }
.hb-hv-body { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; color: #e2e8f0; }
.hb-hv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hb-hv-head small { display: block; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.hb-hv-head strong { font-size: 15px; font-weight: 700; }
.hb-hv-live {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
    background: rgba(34, 197, 94, .12); color: #4ade80; font-size: 12px; font-weight: 700;
}
.hb-hv-chart { position: relative; height: 96px; border-radius: 12px; background: rgba(2, 6, 23, .35); border: 1px solid rgba(148, 163, 184, .1); overflow: hidden; }
.hb-hv-chart svg { position: absolute; inset: 8px 0 0; width: 100%; height: calc(100% - 8px); }
.hb-hv-line { stroke-dasharray: 520; stroke-dashoffset: 520; animation: hb-draw 2.4s .3s ease forwards; }
@keyframes hb-draw { to { stroke-dashoffset: 0; } }
.hb-hv-chart-tag { position: absolute; top: 9px; left: 12px; font-size: 11.5px; color: #94a3b8; }
.hb-hv-chart-tag b { color: #4ade80; margin-left: 4px; }
.hb-hv-rows { display: flex; flex-direction: column; gap: 8px; }
.hb-hv-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) 90px 36px; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px; background: rgba(148, 163, 184, .06); font-size: 12.5px;
}
.hb-hv-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.hb-hv-host { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-hv-host small { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: #a5b4fc; }
.hb-hv-meter { height: 6px; border-radius: 99px; background: rgba(148, 163, 184, .18); overflow: hidden; }
.hb-hv-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #8b5cf6); animation: hb-grow 1.6s ease both; transform-origin: left; }
@keyframes hb-grow { from { transform: scaleX(0); } }
.hb-hv-pct { text-align: right; color: #94a3b8; font-variant-numeric: tabular-nums; }
.hb-hv-term {
    padding: 11px 13px; border-radius: 10px; background: #020617; border: 1px solid rgba(148, 163, 184, .12);
    font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; color: #cbd5e1;
}
.hb-hv-term .p { color: #a78bfa; }
.hb-hv-term .ok { color: #4ade80; }
.hb-caret { display: inline-block; width: 7px; height: 13px; margin-left: 4px; vertical-align: -2px; background: #cbd5e1; animation: hb-blink 1s steps(1) infinite; }
@keyframes hb-blink { 50% { opacity: 0; } }

.hb-hv-chip {
    position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
    border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap;
    background: rgba(15, 23, 42, .78); border: 1px solid rgba(148, 163, 184, .24);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7);
    animation: hb-float 6s ease-in-out infinite;
}
.hb-hv-chip i, .hb-hv-chip svg { color: #a78bfa; }
.hb-hv-chip.c1 { top: 0; right: 4%; }
.hb-hv-chip.c1 i, .hb-hv-chip.c1 svg { color: #4ade80; }
.hb-hv-chip.c2 { bottom: 16%; left: -14px; animation-delay: -2s; }
.hb-hv-chip.c2 i, .hb-hv-chip.c2 svg { color: #fbbf24; }
.hb-hv-chip.c3 { bottom: -4px; right: 10%; animation-delay: -4s; background: linear-gradient(135deg, #6366f1, #c026d3); border-color: transparent; }
.hb-hv-chip.c3 b { font-size: 15px; }
@keyframes hb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
    .hb-hv-chip, .hb-pulse::after, .hb-caret { animation: none; }
    .hb-hv-line { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 991.98px) {
    .hb-hero-box.is-showcase { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .hb-hv { max-width: 560px; margin: 0 auto; width: 100%; }
    .hb-hv-window { transform: none; }
}
@media (max-width: 575.98px) {
    .hb-hero.hb-bg-dark:has(.is-showcase) { padding: 44px 0 56px; }
    .hb-hv { padding: 20px 0; }
    .hb-hv-chip.c2 { left: -4px; }
    .hb-hv-row { grid-template-columns: auto minmax(0, 1fr) 60px 32px; }
    .is-showcase .hb-hero-actions .hb-btn { flex: 1 1 auto; justify-content: center; }
}
/* showcase polish */
.hb-hero-search .hb-domain-form { align-items: center; }
.hb-hero.hb-bg-dark .is-showcase h1 { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.1; }
.is-showcase .hb-domain-tlds { gap: 8px; }
.is-showcase .hb-domain-tld { padding: 6px 11px; font-size: 12.5px; }
.hb-hv-chip.c2 { bottom: auto; top: 44%; }
/* Phones: the search box keeps room to type -- Search shrinks to its icon. */
@media (max-width: 479.98px) {
    .hb-hero-search .hb-btn-label { display: none; }
    .hb-hero-search .hb-btn-primary { padding: 10px 14px; }
    .hb-hero-search .hb-domain-lead { display: none; }
    .hb-hero-search .hb-domain-input { padding-left: 14px; }
}

/* ==========================================================================
   Hero "app" layout (2026-09-28): an app home screen -- heading, one search
   card with a Register / Transfer switch, TLD prices, shortcut icon grid.
   Centred on desktop; on phones it reads like a native app screen.
   ========================================================================== */
.hb-app { max-width: 920px; margin: 0 auto; text-align: center; }
.hb-app-top h1 { margin: 0 0 14px; font-size: clamp(30px, 4.6vw, 56px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.hb-app-top h1 .hb-gradient-text { display: block; }
.hb-app-top > p { margin: 0 auto 30px; max-width: 600px; font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.7; color: #cbd5e1; }
.hb-hero.hb-bg-dark:has(.hb-app) { padding: 76px 0 70px; }

/* the search card */
.hb-app-card {
    max-width: 700px; margin: 0 auto; padding: 16px; border-radius: 24px; text-align: left;
    background: rgba(15, 23, 42, .62); border: 1px solid rgba(148, 163, 184, .2);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 0 80px -30px rgba(139, 92, 246, .6);
}
.hb-seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px; background: rgba(2, 6, 23, .55); }
.hb-seg button {
    display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer;
    padding: 8px 16px; border-radius: 9px; background: transparent; color: #94a3b8;
    font: 600 13.5px var(--sc-font, inherit); transition: background .15s, color .15s;
}
.hb-seg button.is-on { background: rgba(99, 102, 241, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .45); }
.hb-seg button:hover { color: #fff; }
.hb-app-card .hb-domain-form {
    align-items: center; gap: 6px; padding: 6px; border-radius: 16px;
    background: #0b1120; border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: none;
}
.hb-app-card .hb-domain-form:focus-within { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, .2); }
.hb-app-card .hb-domain-lead { margin-left: 12px; color: #64748b; }
.hb-app-card .hb-domain-input { font-size: 16px; color: #fff; padding: 12px 8px; }
.hb-app-card .hb-btn-primary { border-radius: 12px; padding: 12px 22px; gap: 8px; }
.hb-app-card .hb-domain-note { margin: 10px 4px 0; text-align: left; }
.hb-app-tlds {
    display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.hb-app-tlds::-webkit-scrollbar { display: none; }
.hb-app-tlds .hb-domain-tld { flex: 0 0 auto; padding: 6px 12px; font-size: 12.5px; background: rgba(255, 255, 255, .04); border-color: rgba(148, 163, 184, .2); color: #e2e8f0; }
.hb-app-tlds .hb-domain-tld b { color: #a5b4fc; opacity: 1; }

/* shortcut icons */
.hb-app-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.hb-app-tile {
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px 14px;
    border-radius: 18px; text-decoration: none; color: #e2e8f0;
    background: rgba(255, 255, 255, .035); border: 1px solid rgba(148, 163, 184, .14);
    transition: transform .18s, background .18s, border-color .18s;
}
.hb-app-tile:hover { color: #fff; transform: translateY(-4px); background: rgba(255, 255, 255, .07); border-color: rgba(139, 92, 246, .5); }
.hb-app-ico {
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px;
    color: #fff; font-size: 20px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.hb-app-label { font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; }

/* phones: an app screen -- left aligned, 3 x 2 icon grid */
@media (max-width: 767.98px) {
    .hb-hero.hb-bg-dark:has(.hb-app) { padding: 34px 0 36px; }
    /* centred on phones too (owner: "middle koro mobile e") */
    .hb-app-top h1 { font-size: 31px; }
    .hb-app-top > p { margin: 0 auto 20px; font-size: 15px; }
    .hb-app-card { padding: 12px; border-radius: 20px; }
    .hb-seg { display: flex; }
    .hb-seg button { flex: 1 1 0; justify-content: center; }
    .hb-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
    .hb-app-tile { padding: 14px 6px 12px; border-radius: 16px; }
    .hb-app-ico { width: 46px; height: 46px; border-radius: 14px; font-size: 18px; }
    .hb-app-label { font-size: 12px; }
}
@media (max-width: 479.98px) {
    .hb-app-card .hb-btn-primary { padding: 12px 14px; }
    .hb-app-card .hb-btn-label { display: none; }
}
@media (max-width: 767.98px) { .hb-app-tlds { justify-content: flex-start; } .hb-app-card .hb-domain-note { text-align: center; } }

/* App hero on desktop (owner: mobile is fine, desktop didn't look good) --
   copy + search card on the left, shortcuts as a 2-column list of app-style
   cards on the right. Phones keep the single centred stack above. */
.hb-app-go { display: none; }
@media (min-width: 992px) {
    .hb-app {
        max-width: none; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
        gap: 56px; align-items: center; text-align: left;
    }
    .hb-app-top > p { margin: 0 0 26px; }
    .hb-app-card { margin: 0; max-width: 600px; }
    .hb-app-grid {
        margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
        padding: 18px; border-radius: 26px;
        background: rgba(255, 255, 255, .025); border: 1px solid rgba(148, 163, 184, .12);
    }
    .hb-app-tile { flex-direction: row; align-items: center; gap: 14px; padding: 16px; text-align: left; border-radius: 16px; }
    .hb-app-tile:hover { transform: translateY(-2px); }
    .hb-app-ico { width: 48px; height: 48px; flex: 0 0 auto; }
    .hb-app-label { flex: 1 1 auto; font-size: 14.5px; font-weight: 700; text-align: left; }
    .hb-app-go { display: block; font-size: 12px; color: #64748b; transition: transform .15s, color .15s; }
    .hb-app-tile:hover .hb-app-go { color: #c4b5fd; transform: translateX(3px); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hb-app { gap: 32px; }
    .hb-app-tile { padding: 12px; gap: 10px; }
    .hb-app-ico { width: 42px; height: 42px; font-size: 17px; }
    .hb-app-label { font-size: 13.5px; }
}

/* App hero, desktop = Option B "phone preview" (owner's pick, 2026-09-28):
   copy + search on the left, a phone showing the app screen on the right,
   sitting on the hero's bottom edge. Phones keep the icon grid instead. */
.hb-phone { display: none; }
@media (min-width: 992px) {
    .hb-hero.hb-bg-dark:has(.hb-app) { padding: 64px 0 0; }
    .hb-app { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: end; }
    .hb-app-main { padding-bottom: 72px; align-self: center; }
    .hb-app-grid { display: none; }
    .hb-phone {
        display: block; justify-self: center; width: 330px; max-width: 100%;
        padding: 12px 12px 0; border-radius: 44px 44px 0 0;
        background: #1e2638; border: 1px solid rgba(148, 163, 184, .3); border-bottom: 0;
        box-shadow: 0 0 130px -30px rgba(139, 92, 246, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
    }
    .hb-phone-screen { border-radius: 34px 34px 0 0; background: #0b1120; padding: 14px 18px 26px; color: #e2e8f0; }
    .hb-phone-notch { width: 96px; height: 24px; margin: -14px auto 14px; border-radius: 0 0 16px 16px; background: #1e2638; }
    .hb-phone-hi { font-size: 12px; color: #94a3b8; }
    .hb-phone-big { margin: 2px 0 14px; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
    .hb-phone-search {
        display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 11px 13px; border-radius: 13px;
        background: #151d31; border: 1px solid rgba(148, 163, 184, .14); color: #64748b; font-size: 13px; text-decoration: none;
    }
    .hb-phone-search:hover { color: #cbd5e1; border-color: rgba(139, 92, 246, .5); }
    .hb-phone-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
    .hb-phone-app { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: #cbd5e1; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
    .hb-phone-app .hb-app-ico { width: 48px; height: 48px; border-radius: 15px; font-size: 18px; transition: transform .15s; }
    .hb-phone-app:hover { color: #fff; }
    .hb-phone-app:hover .hb-app-ico { transform: translateY(-3px); }
    .hb-phone-plan {
        display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px;
        padding: 13px 15px; border-radius: 16px; text-decoration: none; color: #fff;
        background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #c026d3); box-shadow: 0 14px 30px -14px rgba(139, 92, 246, .9);
    }
    .hb-phone-plan b { font-size: 15.5px; font-weight: 800; }
    .hb-phone-plan:hover { color: #fff; filter: brightness(1.08); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hb-phone { width: 290px; }
    .hb-app { gap: 28px; }
}
/* Owner (2026-09-28, after the container widened to 1460px at >=1400px):
   the fixed 330px phone left too much empty dark space beside it on wider
   screens -- scale it (and its inner content, not just the outer shell) up
   on the two wider tiers instead. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hb-phone { width: 370px; }
}
@media (min-width: 1400px) {
    .hb-phone { width: 430px; }
    .hb-phone-screen { padding: 18px 22px 32px; }
    .hb-phone-notch { width: 110px; height: 26px; }
    .hb-phone-hi { font-size: 13px; }
    .hb-phone-big { font-size: 23px; }
    .hb-phone-search { padding: 13px 15px; font-size: 14px; }
    .hb-phone-apps { gap: 18px 10px; }
    .hb-phone-app { font-size: 12px; }
    .hb-phone-app .hb-app-ico { width: 56px; height: 56px; font-size: 20px; }
    .hb-phone-plan { padding: 16px 18px; }
    .hb-phone-plan b { font-size: 19px; }
}
@media (min-width: 992px) { .hb-app-top h1 { font-size: clamp(30px, 3vw, 42px); line-height: 1.15; } }

/* -- Service strip, redesigned (2026-09-28: sits right under the hero) --------
   Desktop: one light card, four promises with gradient icon tiles and thin
   dividers. Tablet: 2 x 2. Phones: 2 x 2 compact cards, icon on top. */
section.hb-services { padding: 30px 0; }
div.hb-services {
    gap: 0; padding: 8px; border-radius: 20px;
    background: var(--lp-on-card, #fff); border: 1px solid var(--hb-line);
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, .35);
}
.hb-service { position: relative; align-items: center; gap: 14px; padding: 18px 20px; border: 0; border-radius: 14px; background: transparent; }
.hb-service + .hb-service::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--hb-line);
}
.hb-service-ico {
    display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: 14px; color: #fff; font-size: 18px;
    background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .7);
}
.hb-service:nth-child(2) .hb-service-ico { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 10px 20px -10px rgba(124, 58, 237, .7); }
.hb-service:nth-child(3) .hb-service-ico { background: linear-gradient(135deg, #2dd4bf, #0d9488); box-shadow: 0 10px 20px -10px rgba(13, 148, 136, .7); }
.hb-service:nth-child(4) .hb-service-ico { background: linear-gradient(135deg, #f472b6, #db2777); box-shadow: 0 10px 20px -10px rgba(219, 39, 119, .7); }
.hb-service strong { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.hb-service small { margin-top: 2px; font-size: 13px; opacity: .65; }

@media (max-width: 991.98px) {
    div.hb-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hb-service:nth-child(3)::before { display: none; }
    .hb-service:nth-child(n+3) { border-top: 1px solid var(--hb-line); border-radius: 0; }
}
@media (max-width: 575.98px) {
    section.hb-services { padding: 22px 0; }
    div.hb-services { gap: 10px; padding: 0; background: transparent; border: 0; box-shadow: none; }
    .hb-service {
        flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px;
        background: var(--lp-on-card, #fff); border: 1px solid var(--hb-line) !important; border-radius: 16px !important;
        box-shadow: 0 10px 24px -20px rgba(15, 23, 42, .4);
    }
    .hb-service::before { display: none; }
    .hb-service-ico { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
    .hb-service strong { font-size: 14px; }
    .hb-service small { font-size: 12px; }
}

/* ==========================================================================
   AI model spotlight (ilmGPT) -- copy + tick list left, a small chat preview
   right. Inner classes are hb-ai-*; the section itself is .hb-ai_model.
   ========================================================================== */
.hb-ai_model { padding: 64px 0; }
.hb-ai-box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hb-ai-copy h2 {
    margin: 14px 0 14px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15;
    font-weight: 800; letter-spacing: -.02em;
}
.hb-ai-copy h2 .hb-gradient-text { display: block; }
.hb-ai-sub { margin: 0 0 20px; max-width: 560px; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.7; opacity: .85; }
.hb-ai-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.hb-ai-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; font-weight: 600; }
.hb-ai-points li > i, .hb-ai-points li > svg {
    flex: 0 0 22px; width: 22px; height: 22px; padding: 5px; margin-top: 1px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #c026d3); color: #fff; font-size: 11px;
}

.hb-ai-chat {
    max-width: 480px; width: 100%; justify-self: center; border-radius: 22px; overflow: hidden;
    background: #111a2e; border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: 0 30px 80px -30px rgba(139, 92, 246, .7); color: #e2e8f0;
}
.hb-ai-chat-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(148, 163, 184, .16); }
.hb-ai-chat-bar strong { font-size: 15px; color: #fff; }
.hb-ai-avatar {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 15px; color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #c026d3);
}
.hb-ai-online { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #94a3b8; }
/* Taller screen: the greeting sits at the top, the messages settle at the bottom like a real chat. */
.hb-ai-chat-body { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 8px 20px 22px; }
.hb-ai-hello { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 24px 12px; text-align: center; }
.hb-ai-hello[hidden] { display: none; }
.hb-ai-hello-ico {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; font-size: 19px; color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #c026d3); box-shadow: 0 12px 30px -8px rgba(139, 92, 246, .8);
}
.hb-ai-hello-text { max-width: 320px; font-size: 16px; font-weight: 700; line-height: 1.45; color: #f1f5f9; }
.hb-ai-hello.is-in .hb-ai-hello-text, .hb-ai-hello.is-in .hb-ai-hello-ico { animation: hb-ai-in .5s ease both; }
@keyframes hb-ai-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hb-ai-hello.is-in .hb-ai-hello-text, .hb-ai-hello.is-in .hb-ai-hello-ico { animation: none; } }
.hb-ai-msg { max-width: 88%; padding: 13px 16px; border-radius: 16px; font-size: 15px; line-height: 1.65; }
.hb-ai-msg.is-user { align-self: flex-end; background: #4f46e5; color: #fff; border-bottom-right-radius: 5px; }
.hb-ai-msg.is-ai { align-self: flex-start; background: #1b2540; color: #e2e8f0; border-bottom-left-radius: 5px; }
.hb-ai-chat-input {
    display: flex; align-items: center; justify-content: space-between; margin: 0 18px 18px; padding: 10px 10px 10px 16px;
    border-radius: 14px; background: #151d31; border: 1px solid rgba(148, 163, 184, .16); color: #64748b; font-size: 13.5px;
}
/* FA's all.js swaps <i> for an <svg>, so the box lives on a wrapping span, not on the icon. */
.hb-ai-send {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; font-size: 12px;
    background: linear-gradient(135deg, #6366f1, #c026d3);
}

@media (max-width: 991.98px) {
    .hb-ai_model { padding: 44px 0; }
    .hb-ai-box { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .hb-ai-copy { text-align: left; }
}
@media (max-width: 480px) {
    .hb-ai-copy .hb-hero-actions .hb-btn { flex: 1 1 auto; justify-content: center; }
}

/* ilmGPT: topic chips on the left, quick-reply chips inside the chat */
.hb-ai-topics { margin-top: 26px; display: grid; gap: 10px; }
.hb-ai-topics small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #94a3b8; }
.hb-ai-topics > div { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-ai-topics span {
    padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #e2e8f0;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(148, 163, 184, .28);
}
.hb-ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
/* Language chips: buttons that jump the animated chat to that language. */
.hb-ai-suggest button {
    padding: 6px 13px; border-radius: 999px; font: 600 12px/1.3 inherit; font-family: inherit; color: #c4b5fd; cursor: pointer;
    background: rgba(99, 102, 241, .14); border: 1px solid rgba(139, 92, 246, .35); transition: background .15s, color .15s, border-color .15s;
}
.hb-ai-suggest button:hover { background: rgba(99, 102, 241, .28); color: #fff; }
.hb-ai-suggest button.is-on { background: linear-gradient(135deg, #6366f1, #c026d3); border-color: transparent; color: #fff; }
.hb-ai-msg { overflow-wrap: anywhere; }
.hb-ai-msg[dir="rtl"] { text-align: right; }
.hb-ai-msg.is-live::after {
    content: ""; display: inline-block; width: 7px; height: 13px; margin-inline-start: 4px; vertical-align: -2px;
    background: #cbd5e1; animation: hb-blink 1s steps(1) infinite;
}
.hb-ai-msg.is-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.hb-ai-msg.is-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: hb-ai-dot 1s ease-in-out infinite; }
.hb-ai-msg.is-typing span:nth-child(2) { animation-delay: .15s; }
.hb-ai-msg.is-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hb-ai-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .hb-ai-msg.is-live::after, .hb-ai-msg.is-typing span { animation: none; } }

/* ==========================================================================
   Product showcase -- animated screenshots in a browser frame + what it is.
   Inner classes are hb-pc-*; the section itself is .hb-product_showcase.
   ========================================================================== */
.hb-product_showcase { padding: 64px 0; }
.hb-pc-box { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }

.hb-pc-window {
    border-radius: 16px; overflow: hidden; background: #0b1120; border: 1px solid rgba(15, 23, 42, .14);
    box-shadow: 0 40px 80px -30px rgba(79, 70, 229, .45), 0 12px 30px -16px rgba(15, 23, 42, .4);
}
.hb-pc-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: #1a2338; }
.hb-pc-bar span { width: 11px; height: 11px; border-radius: 50%; background: #475569; }
.hb-pc-bar span:nth-child(1) { background: #f87171; }
.hb-pc-bar span:nth-child(2) { background: #fbbf24; }
.hb-pc-bar span:nth-child(3) { background: #4ade80; }
.hb-pc-bar em {
    flex: 1 1 auto; max-width: 340px; margin: 0 auto; padding: 5px 14px; border-radius: 999px; font: 500 12px/1.3 inherit; font-family: inherit; font-style: normal;
    text-align: center; color: #94a3b8; background: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-pc-bar em i, .hb-pc-bar em svg { margin-right: 5px; font-size: 10px; }
.hb-pc-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1120; }
.hb-pc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; overflow: hidden; }
.hb-pc-slide.is-on { opacity: 1; }
.hb-pc-slide img { display: block; width: 100%; height: auto; max-width: none; will-change: transform; }

.hb-pc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hb-pc-tabs button {
    position: relative; overflow: hidden; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 700; color: inherit; background: transparent; border: 1px solid var(--hb-line); opacity: .75;
    transition: opacity .15s, border-color .15s, background .15s;
}
.hb-pc-tabs button:hover { opacity: 1; border-color: rgba(99, 102, 241, .55); }
.hb-pc-tabs button.is-on { opacity: 1; border-color: rgba(99, 102, 241, .6); background: rgba(99, 102, 241, .08); }
.hb-pc-tabs button > span { position: relative; z-index: 1; }
.hb-pc-tabs button > i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, #6366f1, #c026d3); }

.hb-pc-copy h2 { margin: 14px 0 14px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.hb-pc-copy h2 .hb-gradient-text { display: block; }
.hb-pc-sub { margin: 0 0 20px; font-size: clamp(15px, 1.5vw, 16.5px); line-height: 1.7; opacity: .85; }
.hb-pc-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.hb-pc-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.hb-pc-tick {
    flex: 0 0 22px; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; color: #fff; font-size: 11px;
    background: linear-gradient(135deg, #6366f1, #c026d3);
}
.hb-pc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 26px; }
.hb-pc-facts > div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hb-line); background: var(--lp-on-card, #fff); }
.hb-pc-facts strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.hb-pc-facts span { display: block; margin-top: 2px; font-size: 12.5px; opacity: .7; }

@media (max-width: 991.98px) {
    .hb-product_showcase { padding: 44px 0; }
    .hb-pc-box { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .hb-pc-copy { order: -1; }
}
@media (max-width: 575.98px) {
    .hb-pc-facts { grid-template-columns: minmax(0, 1fr); }
    .hb-pc-tabs button { padding: 7px 13px; font-size: 12.5px; }
    .hb-pc-copy .hb-hero-actions .hb-btn { flex: 1 1 auto; justify-content: center; }
}

/* Licence section on the /software/{slug} pages: Monthly / Yearly / Lifetime cards (the pricing
   block's .hb-price-* look), then what every licence includes and the demo links. */
.hb-license { padding: 64px 0; }
.hb-license .hb-price-grid { max-width: 1040px; margin-inline: auto; }
.hb-price-badge.is-alt { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.hb-lic-inc {
    max-width: 1040px; margin: 28px auto 0; padding: 22px 26px; border-radius: 16px;
    border: 1px solid var(--hb-line); background: var(--lp-on-card, #fff);
}
.hb-lic-inc strong { display: block; margin-bottom: 12px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.hb-lic-inc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px; }
.hb-lic-inc li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; font-weight: 600; }
.hb-lic-inc li > i, .hb-lic-inc li > svg { color: #6366f1; margin-top: 3px; flex: 0 0 auto; }
.hb-lic-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin-top: 26px; }
.hb-lic-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: #4f46e5; text-decoration: none; }
.hb-lic-links a:hover { color: #c026d3; }
@media (max-width: 991.98px) { .hb-license { padding: 44px 0; } .hb-lic-inc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .hb-lic-inc ul { grid-template-columns: minmax(0, 1fr); } .hb-lic-inc { padding: 18px; } }

/* Small "New · v1.0.6" corner badge on a feature card (set by the release notes' featured cards). */
.hb-feature-badge {
    position: absolute; top: 14px; right: 14px; z-index: 1; padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; white-space: nowrap;
    background: linear-gradient(135deg, #6366f1, #c026d3); box-shadow: 0 6px 14px -6px rgba(139, 92, 246, .8);
}

/* ---- Guest "buy a license" page (frontEnd/client/license/buy-guest) ---- */
.gb { padding: 56px 0 84px; }
.gb-head { text-align: center; margin-bottom: 34px; }
.gb-head h1 { margin: 0 0 18px; font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.gb-steps { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; font-weight: 600; color: #64748b; }
.gb-steps li { display: inline-flex; align-items: center; gap: 8px; }
.gb-steps b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: 12px; }
.gb-steps li.is-on { color: #1e1b4b; }
.gb-steps li.is-on b { background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #c026d3); color: #fff; }
.gb-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 26px; max-width: 1040px; margin-inline: auto; align-items: start; }
.gb-plan { margin: 0; }
.gb-product { margin: -4px 0 12px; font-size: 14px; color: #64748b; }
.gb-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(148, 163, 184, .28); font-size: 13.5px; color: #64748b; display: flex; gap: 9px; }
.gb-note i, .gb-note svg { color: #6366f1; margin-top: 3px; flex: 0 0 auto; }
.gb-card { background: #fff; border: 1px solid rgba(148, 163, 184, .32); border-radius: 18px; padding: 30px 30px 32px; box-shadow: 0 18px 44px -26px rgba(30, 27, 75, .35); }
.gb-card h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.gb-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #64748b; }
.gb-sub a { font-weight: 700; color: #4f46e5; }
.gb-field { margin-bottom: 16px; }
.gb-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #334155; }
.gb-field small { display: block; margin-top: 5px; font-size: 12.5px; color: #94a3b8; }
.gb-card .form-control { height: 46px; border-radius: 12px; border: 1.5px solid #dbe2ec; font-size: 14.5px; }
.gb-card .form-control:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); }
.gb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.gb-rule { margin: 8px 0 22px; border-color: rgba(148, 163, 184, .3); opacity: 1; }
.gb-submit { width: 100%; justify-content: center; margin-top: 6px; }
@media (max-width: 860px) { .gb-grid { grid-template-columns: 1fr; } .gb-card { padding: 24px 20px; } }
@media (max-width: 520px) { .gb-two { grid-template-columns: 1fr; } }