header ul,
header ol,
footer ul,
footer ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    color: #858585;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 20px;
}

    header ul li,
    header ol li,
    footer ul li,
    footer ol li {
        font-size: 14px;
        line-height: 28px;
    }

/*        ul li i {
            vertical-align: middle
        }*/

    ul.features-list-dark {
        display: inline-block
    }

        ul.features-list-dark li {
            float: left;
            font-size: 15px;
            line-height: 28px;
            margin: 1px 0
        }

    ul.features-list li {
        float: left;
        font-size: 15px;
        line-height: 24px;
        margin: 12px 0
    }

        ul.features-list li img {
            max-width: 55px;
            margin-right: 20px;
            float: left
        }

/* Body was 18px while subheads were 18.4px, which is why headings barely read as
   headings. 16px is the body step of the scale; leads keep their own larger size. */
p {
    font-size: var(--hz-text-body, 1rem);
    line-height: 1.7;
    font-weight: 400;
    margin-bottom: 1rem;
}
/* ---------------------------------------------------------------------------
   Surface, elevation and accent tokens.

   Light used to have none of these: the page was pure #fff and cards were
   near-#fff, so nothing separated from anything. Both themes now get the same
   three-step surface ladder (sunken / page / raised) plus two elevations.

   Accent is warm amber and is reserved: primary actions, active states and
   badges only. Blue stays the brand surface, never the call to action, so the
   one warm thing on the page is always the thing to click.
   --------------------------------------------------------------------------- */
:root[data-bs-theme="light"] {
    --bs-body-color: #353535;
    --bs-headings-color: #353535;

    --hz-surface-page: #f4f7fa;
    --hz-surface-sunken: #e9eff6;
    --hz-surface-raised: #ffffff;
    --hz-border: rgba(16, 46, 78, 0.11);
    --hz-border-strong: rgba(16, 46, 78, 0.18);

    --hz-shadow-1:
        0 1px 2px rgba(15, 38, 64, 0.05),
        0 8px 20px rgba(15, 38, 64, 0.06);
    --hz-shadow-2:
        0 2px 4px rgba(15, 38, 64, 0.07),
        0 18px 44px rgba(15, 38, 64, 0.11);

    /* deeper than the dark theme's amber on purpose: white button text needs
       4.5:1 and the brighter #d9741d only reaches 3.25:1 on light */
    --hz-accent: #b85c12;
    --hz-accent-hover: #9c4d0e;
    --hz-accent-on: #ffffff;
    --hz-accent-soft: rgba(184, 92, 18, 0.12);
    --hz-accent-text: #99500f;
}

:root[data-bs-theme="dark"] {
    --hz-surface-page: #0f1722;
    --hz-surface-sunken: #0a111a;
    --hz-surface-raised: #16212f;
    --hz-border: rgba(132, 166, 197, 0.16);
    --hz-border-strong: rgba(132, 166, 197, 0.3);

    --hz-shadow-1:
        0 1px 2px rgba(0, 0, 0, 0.24),
        0 10px 24px rgba(0, 0, 0, 0.26);
    --hz-shadow-2:
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 20px 46px rgba(0, 0, 0, 0.34);

    --hz-accent: #f0913a;
    --hz-accent-hover: #ffa65c;
    --hz-accent-on: #1a1005;
    --hz-accent-soft: rgba(240, 145, 58, 0.16);
    --hz-accent-text: #f3a961;
}
/*[data-bs-theme="dark"] .bg-light {
    background-color: #cccccc !important;
}*/
a, a:hover, a:focus {
    text-decoration: none;
    outline: 0
}

/* ---------------------------------------------------------------------------
   Type scale. One family (Manrope, variable 200-800) and five steps:
   56 / 40 / 28 / 20 / 16. Each step is a clamp so the ratio between levels
   survives on narrow screens instead of collapsing to a flat wall of text.

   Before this block the h1-h6 sizes were commented out, so Bootstrap's defaults
   applied and h1 sat only 8px above h2. The steps below are deliberately far
   apart; do not add intermediate sizes, pick the nearest token.
   --------------------------------------------------------------------------- */
:root {
    --hz-font-sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --hz-text-h1: clamp(2.25rem, 4.2vw, 3.5rem);      /* 36 -> 56 */
    --hz-text-h2: clamp(1.875rem, 3vw, 2.5rem);       /* 30 -> 40 */
    --hz-text-h3: clamp(1.5rem, 2.2vw, 1.75rem);      /* 24 -> 28 */
    --hz-text-h4: 1.25rem;                            /* 20 */
    --hz-text-body: 1rem;                             /* 16 */

    /* tracking tightens as size grows; -0.02em on a 20px subhead reads cramped */
    --hz-tracking-display: -0.02em;
    --hz-tracking-head: -0.012em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--hz-font-sans);
    line-height: 1.2;
    margin-bottom: 20px;
}

h1, .h1 {
    font-size: var(--hz-text-h1);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: var(--hz-tracking-display);
}

h2, .h2 {
    font-size: var(--hz-text-h2);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: var(--hz-tracking-display);
}

h3, .h3 {
    font-size: var(--hz-text-h3);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: var(--hz-tracking-head);
}

h4, h5, .h4, .h5 {
    font-size: var(--hz-text-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--hz-tracking-head);
}

h6, .h6 {
    font-size: var(--hz-text-body);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

h2.section-title {
    font-size: 32px;
    line-height: 38px;
    margin: 0 0 15px 0
}

    h2.section-title.grey {
        color: #ddd
    }

h2.large-title {
    margin-bottom: 15px;
    font-size: 40px;
    font-weight: 500
}

p.section-subtitle {
    font-size: 16px
}

p.section-subtitle-large {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 30px
}

p.section-subtitle.grey {
    color: #bbb
}

.separator_wrapper, .separator_wrapper_white {
    margin-bottom: 10px
}

    .separator_wrapper::after, .separator_wrapper::before {
        background-color: #3498db;
        display: inline-block;
        vertical-align: middle;
        content: "";
        width: 60px;
        height: 1px;
        margin-top: -6px
    }

    .separator_wrapper_white::after, .separator_wrapper_white::before {
        background-color: #ddd;
        display: inline-block;
        vertical-align: middle;
        content: "";
        width: 60px;
        height: 1px;
        margin-top: -6px
    }

h3.medium-title {
    font-size: 32px;
    margin-top: 10px
}

iframe {
    max-width: 100%;
    border: none
}

.width-100 {
    width: 100%
}

.medium {
    font-weight: 400
}

.bold {
    font-weight: 700
}

.lyla {
    color: #9e5fba
}

.green {
    color: #16a085
}

.blue {
    color: #3498db
}

.red {
    color: #e74c3c
}

.grey {
    color: #ddd
}
 
.white {
    color: #fff
}

.section-white {
    background-color: #fff;
    border-top: 1px solid #eaeaea;
    padding: 90px 0
}

   .section-grey {
    background-color: #f6f7f8;
    border-top: 1px solid #eaeaea;
    padding: 90px 0
}

[data-bs-theme="dark"] .section-grey {
    background-color: #1e1e1e;
    border-top: unset;
}

.section-blue {
    background-color: #3498db;
    padding: 90px 0
}

.section-hero {
    height: 500px;
    background-color: #3498db;
    padding: 0
}

.section-blue.cta-padding {
    padding: 20px 0
}

.section-red {
    background-color: #e74d3d;
    padding: 90px 0
}

.section-biz.small-padding, .section-grey.small-padding, .section-white.small-padding, .section-blue.small-padding, .section-light-blue.small-padding {
    padding: 20px 0
}

.section-biz.medium-padding, .section-grey.medium-padding, .section-white.medium-padding, .section-dark.medium-padding, .section-blue.medium-padding, .section-light-blue.medium-padding {
    padding: 60px 0
}

.section-biz.no-padding-bottom, .section-grey.no-padding-bottom, .section-white.no-padding-bottom, .section-dark.no-padding-bottom, .section-blue.no-padding-bottom {
    padding: 90px 0 0 0
}

.section-biz.small-padding-bottom, .section-grey.small-padding-bottom, .section-white.small-padding-bottom, .section-dark.small-padding-bottom, .section-blue.small-padding-bottom {
    padding: 90px 0 50px 0
}

.section-biz.no-padding, .section-grey.no-padding, .section-white.no-padding, .section-dark.no-padding, .section-blue.no-padding {
    padding: 0
}

.section-white.about-padding {
    padding: 85px 0 100px 0
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Three band surfaces. Navy anchors the page (hero, footer), blue and
   green are the accent bands between the light sections. Every colour
   below keeps white body text at 4.5:1 or better. */
:root {
    --public-surface-dark:
        radial-gradient(ellipse at 12% 8%, rgba(75, 151, 255, 0.32), transparent 46%),
        radial-gradient(ellipse at 88% 96%, rgba(43, 191, 106, 0.20), transparent 42%),
        linear-gradient(135deg, #0e2138 0%, #1a3a5e 48%, #23527c 100%);

    --public-surface-blue:
        radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, 0.16), transparent 48%),
        radial-gradient(ellipse at 85% 92%, rgba(8, 34, 62, 0.32), transparent 46%),
        linear-gradient(135deg, #134e83 0%, #1b6ec2 52%, #2179c9 100%);

    --public-surface-green:
        radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, 0.14), transparent 48%),
        radial-gradient(ellipse at 85% 92%, rgba(4, 38, 25, 0.34), transparent 46%),
        linear-gradient(135deg, #0b5638 0%, #0e6b47 52%, #127f55 100%);
}

/* dark theme drops the saturation and goes markedly deeper, so the two
   themes read as different rooms rather than the same one dimmed */
:root[data-bs-theme="dark"] {
    --public-surface-dark:
        radial-gradient(ellipse at 12% 8%, rgba(74, 144, 226, 0.16), transparent 46%),
        radial-gradient(ellipse at 88% 96%, rgba(23, 183, 148, 0.10), transparent 42%),
        linear-gradient(135deg, #060e18 0%, #0b1c2d 48%, #10293e 100%);

    --public-surface-blue:
        radial-gradient(ellipse at 15% 10%, rgba(107, 170, 255, 0.14), transparent 48%),
        radial-gradient(ellipse at 85% 92%, rgba(0, 0, 0, 0.26), transparent 46%),
        linear-gradient(135deg, #0a2742 0%, #0e3557 52%, #134672 100%);

    --public-surface-green:
        radial-gradient(ellipse at 15% 10%, rgba(90, 220, 160, 0.12), transparent 48%),
        radial-gradient(ellipse at 85% 92%, rgba(0, 0, 0, 0.26), transparent 46%),
        linear-gradient(135deg, #08281c 0%, #0c3728 52%, #114935 100%);
}

/* faint grid, the shared texture of that surface */
.public-hero::before,
.public-surface-lines {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: radial-gradient(ellipse at 35% 45%, #000 8%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 35% 45%, #000 8%, transparent 70%);
}

/* Icons are Phosphor regular and nothing else: one 1.5px stroke weight, no fill
   variants, no second family. Size comes from the surrounding context's
   font-size, so never reach for a per-icon size utility. */
.ph {
    display: inline-block;
    vertical-align: -0.125em;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   Section rhythm. Long pages used to be one uninterrupted field, so consecutive
   sections ran together. A band carries its own surface tone and every band
   closes with a hairline, which is what gives a long scroll its beat.
   --------------------------------------------------------------------------- */
body {
    background-color: var(--hz-surface-page);
}

.public-band {
    background-color: var(--hz-surface-page);
}

.public-band-sunken {
    background-color: var(--hz-surface-sunken);
}

/* only between two bands of the same tone; a tone change is its own divider */
.public-band + .public-band,
.public-band-sunken + .public-band-sunken {
    border-top: 1px solid var(--hz-border);
}

/* soft handover into and out of the dark statement bands, so the hard edge
   between a light section and a saturated one is not a cut */
.public-statement::before,
.public-statement::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3.5rem;
    pointer-events: none;
    z-index: 1;
}

.public-statement::before {
    top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
}

.public-statement::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
}

/* Scroll reveal. Short on purpose: 260ms and a 14px lift read as "the page is
   settling", not as an animation you have to wait through. Motion is opt-out at
   the OS level, so the reduced-motion branch simply shows the final state. */
.hz-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.26s ease-out, transform 0.26s ease-out;
    will-change: opacity, transform;
}

.hz-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* stagger siblings just enough to read as a sequence */
.hz-reveal-2 { transition-delay: 0.06s; }
.hz-reveal-3 { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    .hz-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.public-page-shell {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* ---------------------------------------------------------------------------
   Reading measure. Product detail ran 126 characters per line at full container
   width. Long-form copy is capped at 68ch; anything wider stops being readable
   because the eye loses the line it is returning to.
   --------------------------------------------------------------------------- */
.public-rich-copy p,
.public-rich-copy li,
.public-story-copy p,
.public-legal-card p,
.public-legal-card li,
.product-content-card p,
.product-content-card li,
.public-bullet-list li {
    max-width: 68ch;
    line-height: 1.7;
}

.public-hero {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0 4.5rem;
    background: var(--public-surface-dark);
    color: #fff;
}

.public-hero > * {
    position: relative;
    z-index: 1;
}

.public-hero-company,
.public-hero-vision,
.public-hero-product {
    padding-top: 5rem;
    padding-bottom: 4rem;
}

.public-hero-inner {
    display: grid;
    gap: 2rem;
    align-items: end;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
}

.public-hero-inner-product {
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.7fr);
}

.public-hero-copy h1 {
    font-size: var(--hz-text-h1);
    font-weight: 300;
    letter-spacing: var(--hz-tracking-display);
    line-height: 1.06;
    margin-bottom: 1rem;
    color: #fff;
}

.public-hero-copy p {
    max-width: 52rem;
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 0;
}

.public-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 1rem;
}

.public-kicker::before {
    content: "";
    width: 2.75rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
}

.public-section-intro .public-kicker {
    color: #587998;
}

.public-section-intro .public-kicker::before {
    background: rgba(29, 79, 122, 0.28);
}

.public-hero-panel,
.public-mini-card,
.public-surface-card,
.public-feature-card,
.product-showcase-card,
.public-story-card,
.public-pillar-card {
    border-radius: 24px;
}

/* Card chrome: hairline border plus a faint top-lit inner gradient, so a card
   reads as a lit surface rather than a flat plate with a drop shadow under it. */
.public-mini-card,
.public-surface-card,
.product-showcase-card,
.public-story-card,
.public-pillar-card,
.public-legal-card,
.public-legal-toc {
    border: 1px solid var(--hz-border);
    background: var(--hz-surface-raised);
    background-image: linear-gradient(163deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 58%);
    box-shadow: var(--hz-shadow-1);
}

/* Interactive cards lift and pick up an accent-blue rim glow. Deliberately not
   applied to the long-form story/legal cards, which nothing clicks. */
.public-mini-card,
.public-feature-card,
.public-pillar-card,
.product-showcase-card,
.hstack-spec,
.hstack-step {
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.28s ease,
                border-color 0.28s ease;
}

.public-mini-card:hover,
.public-feature-card:hover,
.public-pillar-card:hover,
.product-showcase-card:hover,
.hstack-spec:hover,
.hstack-step:hover,
.public-mini-card:focus-within,
.public-feature-card:focus-within,
.public-pillar-card:focus-within,
.product-showcase-card:focus-within {
    transform: translateY(-4px);
    border-color: var(--hz-accent);
    box-shadow:
        0 0 0 1px var(--hz-accent-soft),
        0 10px 26px var(--hz-accent-soft),
        var(--hz-shadow-2);
}

.public-mini-card {
    padding: 1.5rem;
    color: #18314f;
}

.public-mini-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #587998;
    margin-bottom: 0.75rem;
}

.public-mini-card p {
    margin-bottom: 1rem;
    color: #39536f;
    font-size: 1rem;
}

.public-cta-btn {
    border-radius: 999px;
    padding-inline: 1.2rem;
    font-weight: 600;
}

.public-section-intro {
    max-width: 48rem;
    margin: 0 auto 2.5rem;
}

.public-section-intro h2,
.public-section-intro .h2 {
    font-size: var(--hz-text-h2);
    font-weight: 300;
    letter-spacing: var(--hz-tracking-display);
    line-height: 1.14;
    margin-bottom: 0.85rem;
}

.public-section-intro p {
    color: #61788d;
    font-size: 1.08rem;
    line-height: 1.7;
}

.public-home-intro {
    padding-top: 1rem;
}

.public-feature-card {
    height: 100%;
    padding: 2rem 1.5rem;
    background: var(--hz-surface-raised);
    background-image: linear-gradient(163deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 58%);
    border: 1px solid var(--hz-border);
    box-shadow: var(--hz-shadow-1);
    text-align: center;
}

.public-feature-card h5 {
    font-size: var(--hz-text-h4);
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.public-feature-card p {
    color: #61788d;
    font-size: 1rem;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Product grid. Card heights used to follow the length of each spot line, so
   rows never lined up. Media height is fixed and the two text fields are
   clamped, which makes every card in a row the same height by construction.
   --------------------------------------------------------------------------- */
.product-showcase-card {
    overflow: hidden;
}

/* whole card is the anchor, so the click target is the card not just the button */
.product-card-link,
.product-card-link:hover,
.product-card-link:focus {
    text-decoration: none;
    color: inherit;
}

.product-card-link .card-body {
    gap: 0;
}

.product-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    margin-bottom: 0.5rem;
    font-size: var(--hz-text-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--hz-tracking-head);
    color: var(--bs-headings-color, #18314f);
}

.product-card-spot {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.8em;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

[data-bs-theme="dark"] .product-card-title {
    color: #f3f7fb;
}

/* ---------------------------------------------------------------------------
   Product filter bar
   --------------------------------------------------------------------------- */
/* minmax(0, 1fr) not the implicit auto track: an auto track refuses to shrink
   below its content's min-content width, which is how the search pill ended up
   wider than the card it sits in on a phone. */
.product-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.product-filter-search,
.product-filter-status,
.product-filter-group {
    min-width: 0;
}

.product-filter-search {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--hz-border);
    border-radius: 999px;
    background: var(--hz-surface-page);
    color: #7d93a8;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-filter-search:focus-within {
    border-color: var(--hz-accent);
    box-shadow: 0 0 0 3px var(--hz-accent-soft);
}

.product-filter-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font-size: 1rem;
    color: var(--bs-body-color);
}

.product-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
}

.product-filter-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7d93a8;
    min-width: 4.5rem;
}

.product-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-filter-chip {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--hz-border);
    border-radius: 999px;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.9rem;
    line-height: 1.3;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.product-filter-chip:hover {
    border-color: var(--hz-border-strong);
}

/* an active filter is an active state, so it wears the accent */
.product-filter-chip.is-active {
    background: var(--hz-accent);
    border-color: var(--hz-accent);
    color: var(--hz-accent-on);
}

.product-filter-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--hz-border);
    font-size: 0.9rem;
    color: #7d93a8;
}

.product-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hz-accent-text);
    font-size: 0.9rem;
}

.product-filter-clear:hover {
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .product-filter-label {
        min-width: 100%;
    }

    .product-filter-bar {
        padding: 1rem;
    }

    .download-product-head {
        gap: 0.75rem;
        padding: 0.75rem 0.85rem;
    }

    .download-product-image {
        width: 56px;
        height: 56px;
    }

    /* the caret already says the row opens, so the count can go */
    .download-product-count {
        display: none;
    }

    .download-table th,
    .download-table td {
        padding-inline: 0.85rem;
    }
}

/* radial highlight behind the device, so it reads as floating in a lit space
   instead of sitting on a flat grey panel */
.product-showcase-media {
    display: block;
    position: relative;
    background:
        radial-gradient(ellipse 62% 58% at 50% 46%, rgba(47, 128, 196, 0.18) 0%, rgba(47, 128, 196, 0.06) 46%, rgba(47, 128, 196, 0) 74%),
        linear-gradient(180deg, rgba(242, 247, 251, 0.92) 0%, rgba(233, 240, 247, 0.92) 100%);
    transition: background 0.28s ease;
}

.product-showcase-card:hover .product-showcase-media,
.product-showcase-card:focus-within .product-showcase-media {
    background:
        radial-gradient(ellipse 66% 62% at 50% 46%, rgba(47, 128, 196, 0.28) 0%, rgba(47, 128, 196, 0.1) 46%, rgba(47, 128, 196, 0) 76%),
        linear-gradient(180deg, rgba(242, 247, 251, 0.92) 0%, rgba(233, 240, 247, 0.92) 100%);
}

.product-showcase-meta,
.product-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.product-model-chip,
.product-stock-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.42rem 0.8rem;
    font-size: 0.83rem;
    font-weight: 700;
    background: #e8f1fb;
    color: #1d4f7a;
}

/* the model badge is a label, so it takes the accent; stock chips keep their
   own semantic colours because amber next to "in stock" reads as a warning */
.product-model-chip {
    background: var(--hz-accent-soft);
    color: var(--hz-accent-text);
}

.product-stock-chip-off {
    background: #fde8e5;
    color: #b64a3b;
}

.product-stock-chip-muted {
    background: #eceff3;
    color: #5e6872;
}

.public-surface-card {
    padding: 1.5rem;
}

.product-visual-card {
    padding: 1rem;
}

.product-content-card {
    padding: 2rem;
}

.product-download-card h3 {
    margin-bottom: 1rem;
}

.product-download-card-top {
    border-left: 4px solid #2563eb;
}

.product-download-card-top h3 {
    font-size: var(--hz-text-h4);
    display: flex;
    align-items: center;
}

[data-bs-theme="dark"] .product-download-card-top {
    border-left-color: #4a90e2;
}

.public-rich-copy p,
.public-story-copy p {
    color: #5d7388;
}

.public-story-grid {
    display: grid;
    gap: 1.5rem;
}

.public-story-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
    gap: 0;
    overflow: hidden;
}

.public-story-card-wide {
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.05fr);
}

/* `public-story-card-dark` used to paint a navy gradient with white text on one
   About card. It only ever landed in the light theme: in dark, the shared
   surface-card rule further down this file has the same specificity and comes
   later, so it won and the card looked like every other one apart from its
   whiter text. The emphasis was therefore invisible in the site's default theme
   and read as a hole punched in the light one. Dropped rather than repaired,
   because uniform is what the card looked like where it mattered. The class is
   gone from the markup too. */

.public-story-copy {
    padding: 2rem;
}

.public-story-copy h2 {
    font-size: var(--hz-text-h3);
    font-weight: 400;
    letter-spacing: var(--hz-tracking-head);
    line-height: 1.22;
    margin-bottom: 1rem;
}

.public-story-copy h3,
.public-story-copy h4 {
    font-size: var(--hz-text-h4);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.public-story-image {
    width: 100%;
    height: 100%;
    min-height: 280px;
    max-height: 480px;
    object-fit: cover;
}

.public-story-image-compact {
    object-fit: contain;
    background: linear-gradient(180deg, rgba(240,245,249,0.95) 0%, rgba(233,240,247,0.95) 100%);
    padding: 1.25rem;
}

.public-bullet-list {
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.public-bullet-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.8rem;
    color: #5d7388;
}

.public-bullet-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #2f80c4;
}

.public-pillar-card {
    padding: 2rem 1.5rem;
}

.public-pillar-card h3 {
    font-size: var(--hz-text-h4);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.public-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* single icon treatment for both the home feature cards and the vision pillars,
   so an icon means the same thing visually wherever it appears */
.public-pillar-icon,
.public-feature-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #eaf3fb;
    color: #1d5c90;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .public-pillar-icon,
[data-bs-theme="dark"] .public-feature-icon {
    background: rgba(47, 128, 196, 0.16);
    color: #7fb8ea;
}

.public-vision-signoff {
    font-size: 1.2rem;
    font-weight: 600;
    color: #18314f;
}

/* the address that 404'd, shown back to the visitor on the error hero */
.error-requested-url {
    display: inline-block;
    max-width: 100%;
    margin-top: -0.35rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    overflow-wrap: anywhere;
}

/* legal pages: long-form text, no imagery, sticky section index */
.public-hero-legal {
    padding-top: 5rem;
    padding-bottom: 4rem;
}

.public-hero-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.82);
}

.public-legal-layout {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(240px, 0.32fr) minmax(0, 1fr);
    align-items: start;
}

.public-legal-body {
    display: grid;
    gap: 1.5rem;
    counter-reset: legal-section;
}

.public-legal-card {
    padding: 2rem 2.25rem;
    scroll-margin-top: 5rem;
    counter-increment: legal-section;
}

.public-legal-card h2 {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    font-size: var(--hz-text-h3);
    font-weight: 400;
    letter-spacing: var(--hz-tracking-head);
    line-height: 1.22;
    margin-bottom: 1.1rem;
    color: #18314f;
}

.public-legal-card h2::before {
    content: counter(legal-section, decimal-leading-zero);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: #2f80c4;
}

.public-legal-card h3 {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #2a4a6b;
    margin: 1.6rem 0 0.6rem;
}

.public-legal-card p {
    color: #5d7388;
}

.public-legal-card > :last-child {
    margin-bottom: 0;
}

.public-legal-contact {
    margin-top: 1.5rem;
    padding: 1.1rem 1.35rem;
    border-radius: 16px;
    border: 1px solid rgba(16, 46, 78, 0.08);
    background: #f3f7fb;
}

.public-legal-contact p {
    margin-bottom: 0.35rem;
    color: #39536f;
}

.public-legal-contact p:last-child {
    margin-bottom: 0;
}

/* wide tables stay inside their own scroller so the page never shifts */
.public-legal-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0 0;
}

.public-legal-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.public-legal-table th,
.public-legal-table td {
    padding: 0.75rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(16, 46, 78, 0.09);
    color: #5d7388;
    line-height: 1.6;
}

.public-legal-table th {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #587998;
}

.public-legal-table td code {
    font-size: 0.88rem;
    color: #1d5c90;
    background: none;
    padding: 0;
}

.public-legal-toc {
    position: sticky;
    top: 5rem;
    padding: 1.5rem;
}

.public-legal-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc-item;
}

.public-legal-toc li {
    counter-increment: toc-item;
}

.public-legal-toc a {
    display: flex;
    gap: 0.7rem;
    padding: 0.4rem 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #5d7388;
    text-decoration: none;
    transition: color 0.2s ease;
}

.public-legal-toc a::before {
    content: counter(toc-item, decimal-leading-zero);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #9fb4c8;
    padding-top: 0.15rem;
    transition: color 0.2s ease;
}

.public-legal-toc a:hover,
.public-legal-toc a:focus-visible {
    color: #1d5c90;
}

.public-legal-toc a:hover::before,
.public-legal-toc a:focus-visible::before {
    color: #2f80c4;
}

[data-bs-theme="dark"] .public-legal-card h2 {
    color: #f3f7fb;
}

[data-bs-theme="dark"] .public-legal-card h3 {
    color: #dbe7f2;
}

[data-bs-theme="dark"] .public-legal-card p,
[data-bs-theme="dark"] .public-legal-table th,
[data-bs-theme="dark"] .public-legal-table td,
[data-bs-theme="dark"] .public-legal-toc a {
    color: #abc0d3;
}

[data-bs-theme="dark"] .public-legal-table th {
    color: #8fb2d2;
}

[data-bs-theme="dark"] .public-legal-table th,
[data-bs-theme="dark"] .public-legal-table td {
    border-bottom-color: rgba(132, 166, 197, 0.16);
}

[data-bs-theme="dark"] .public-legal-table td code {
    color: #7fb8ea;
}

[data-bs-theme="dark"] .public-legal-contact {
    background: rgba(30, 48, 68, 0.55);
    border-color: rgba(132, 166, 197, 0.16);
}

[data-bs-theme="dark"] .public-legal-contact p {
    color: #cddced;
}

[data-bs-theme="dark"] .public-legal-toc a:hover,
[data-bs-theme="dark"] .public-legal-toc a:focus-visible {
    color: #e8f1f9;
}

[data-bs-theme="dark"] .public-page-shell {
    background: transparent;
}

[data-bs-theme="dark"] .public-section-intro .public-kicker {
    color: #8fb2d2;
}

[data-bs-theme="dark"] .public-section-intro .public-kicker::before {
    background: rgba(143, 178, 210, 0.35);
}

[data-bs-theme="dark"] .public-mini-card,
[data-bs-theme="dark"] .public-surface-card,
[data-bs-theme="dark"] .product-showcase-card,
[data-bs-theme="dark"] .public-story-card,
[data-bs-theme="dark"] .public-pillar-card,
[data-bs-theme="dark"] .public-feature-card,
[data-bs-theme="dark"] .public-legal-card,
[data-bs-theme="dark"] .public-legal-toc {
    background: var(--hz-surface-raised);
    background-image: linear-gradient(163deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 58%);
    border-color: var(--hz-border);
    box-shadow: var(--hz-shadow-1);
}

[data-bs-theme="dark"] .public-mini-card:hover,
[data-bs-theme="dark"] .public-feature-card:hover,
[data-bs-theme="dark"] .public-pillar-card:hover,
[data-bs-theme="dark"] .product-showcase-card:hover,
[data-bs-theme="dark"] .public-mini-card:focus-within,
[data-bs-theme="dark"] .public-feature-card:focus-within,
[data-bs-theme="dark"] .public-pillar-card:focus-within,
[data-bs-theme="dark"] .product-showcase-card:focus-within {
    border-color: var(--hz-accent);
    box-shadow:
        0 0 0 1px var(--hz-accent-soft),
        0 10px 30px var(--hz-accent-soft),
        var(--hz-shadow-2);
}

[data-bs-theme="dark"] .public-mini-label,
[data-bs-theme="dark"] .public-section-intro p,
[data-bs-theme="dark"] .public-feature-card p,
[data-bs-theme="dark"] .public-mini-card p,
[data-bs-theme="dark"] .public-rich-copy p,
[data-bs-theme="dark"] .public-story-copy p,
[data-bs-theme="dark"] .public-bullet-list li {
    color: #abc0d3;
}

[data-bs-theme="dark"] .public-section-intro h2,
[data-bs-theme="dark"] .public-feature-card h5,
[data-bs-theme="dark"] .public-story-copy h2,
[data-bs-theme="dark"] .public-story-copy h3,
[data-bs-theme="dark"] .public-story-copy h4,
[data-bs-theme="dark"] .public-pillar-card h3,
[data-bs-theme="dark"] .product-download-card h3,
[data-bs-theme="dark"] .product-showcase-card .card-title,
[data-bs-theme="dark"] .public-vision-signoff {
    color: #f3f7fb;
}

[data-bs-theme="dark"] .public-story-image-compact {
    background: linear-gradient(180deg, rgba(20, 33, 47, 0.96) 0%, rgba(14, 24, 36, 0.96) 100%);
}

[data-bs-theme="dark"] .product-showcase-media {
    background:
        radial-gradient(ellipse 62% 58% at 50% 46%, rgba(74, 144, 226, 0.26) 0%, rgba(74, 144, 226, 0.08) 46%, rgba(74, 144, 226, 0) 74%),
        linear-gradient(180deg, rgba(20, 33, 47, 0.96) 0%, rgba(14, 24, 36, 0.96) 100%);
}

[data-bs-theme="dark"] .product-showcase-card:hover .product-showcase-media,
[data-bs-theme="dark"] .product-showcase-card:focus-within .product-showcase-media {
    background:
        radial-gradient(ellipse 66% 62% at 50% 46%, rgba(74, 144, 226, 0.4) 0%, rgba(74, 144, 226, 0.14) 46%, rgba(74, 144, 226, 0) 76%),
        linear-gradient(180deg, rgba(20, 33, 47, 0.96) 0%, rgba(14, 24, 36, 0.96) 100%);
}

[data-bs-theme="dark"] .product-model-chip,
[data-bs-theme="dark"] .product-stock-chip {
    background: rgba(44, 89, 129, 0.35);
    color: #d7e8f8;
}

[data-bs-theme="dark"] .product-stock-chip-off {
    background: rgba(143, 61, 61, 0.35);
    color: #ffd6d1;
}

[data-bs-theme="dark"] .product-stock-chip-muted {
    background: rgba(94, 104, 114, 0.38);
    color: #dde5eb;
}

[data-bs-theme="dark"] .product-showcase-card .text-muted,
[data-bs-theme="dark"] .public-story-card .text-muted {
    color: #abc0d3 !important;
}

[data-bs-theme="dark"] .public-bullet-list li::before {
    background: #66a9e0;
}

/* accent rule motif, shared by hero and statement bands */
.public-accent-rule {
    display: block;
    width: 3.25rem;
    height: 2px;
    margin: 0 auto 1.75rem;
    background: linear-gradient(90deg, rgba(47, 128, 196, 0), #2f80c4, rgba(47, 128, 196, 0));
}

.public-statement .public-accent-rule {
    background: linear-gradient(90deg, rgba(75, 151, 255, 0), #4b97ff, rgba(75, 151, 255, 0));
}

/* left-aligned variant, for heroes where copy is not centred */
.public-accent-rule-start {
    margin-left: 0;
    margin-right: auto;
    background: linear-gradient(90deg, #4b97ff, rgba(75, 151, 255, 0));
}

/* pill call to action on dark surfaces */
.public-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.9rem;
    border: 1px solid var(--hz-accent);
    border-radius: 999px;
    background: var(--hz-accent);
    color: var(--hz-accent-on);
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.public-cta-pill:hover,
.public-cta-pill:focus-visible {
    background: var(--hz-accent-hover);
    border-color: var(--hz-accent-hover);
    color: var(--hz-accent-on);
    transform: translateY(-2px);
}

/* the quieter sibling, for places that already have a primary action */
.public-cta-pill-ghost {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.public-cta-pill-ghost:hover,
.public-cta-pill-ghost:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #10263f;
}

.public-cta-pill i {
    transition: transform 0.3s ease;
}

.public-cta-pill:hover i {
    transform: translateX(4px);
}

/* dark statement band */
.public-statement {
    position: relative;
    overflow: hidden;
    padding: 6.5rem 0;
    color: #fff;
    background: var(--public-surface-dark);
}

/* closing band: the last thing on the page is the next thing to do */
.public-cta-band {
    background: var(--public-surface-dark);
}

.public-cta-band-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2rem;
}

.public-statement-blue {
    background: var(--public-surface-blue);
}

.public-statement-green {
    background: var(--public-surface-green);
}

/* the blue accent rule vanishes on a blue band, so colour bands get a
   white one instead */
.public-statement-blue .public-accent-rule,
.public-statement-green .public-accent-rule {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}

.public-statement-inner {
    position: relative;
    z-index: 2;
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
}

.public-statement-subtitle {
    font-size: 1.05rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 1.5rem;
}

.public-statement h2,
.public-statement .h2 {
    font-size: var(--hz-text-h2);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: var(--hz-tracking-display);
    color: #fff;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.public-statement h2 strong {
    font-weight: 500;
    color: #fff;
}

.public-statement p {
    font-size: 1.1rem;
    line-height: 1.75;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0;
}

/* colour bands are lighter than the navy, so body copy needs more punch */
.public-statement-blue p,
.public-statement-green p {
    color: rgba(255, 255, 255, 0.88);
}

.public-statement .public-cta-pill {
    margin-top: 2.5rem;
}

.public-cta-pill-sm {
    padding: 0.6rem 1.4rem;
    font-size: 0.92rem;
}

/* ---------- contact ---------- */
.contact-card {
    padding: 2rem;
}

.contact-card-title {
    font-size: var(--hz-text-h3);
    font-weight: 400;
    letter-spacing: var(--hz-tracking-head);
    color: #18314f;
    margin-bottom: 1.5rem;
}

.contact-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.contact-list li {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #5d7388;
}

.contact-list i {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    color: #2f80c4;
}

.contact-list a {
    color: #2f80c4;
    word-break: break-word;
}

.contact-list a:hover {
    text-decoration: underline;
}

.contact-whatsapp {
    border-radius: 999px;
    padding-inline: 1.4rem;
}

/* ---------------------------------------------------------------------------
   Contact form
   --------------------------------------------------------------------------- */
.contact-form-card {
    padding: 2rem;
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    margin-top: 1.25rem;
}

.contact-field {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.contact-field-wide {
    grid-column: 1 / -1;
}

.contact-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7d93a8;
}

/* Kept deliberately low: a form field is not a call to action, and oversized
   inputs make a short B2B form look like a sign-up wall. */
.hz-input {
    width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--hz-border);
    border-radius: 9px;
    background: var(--hz-surface-page);
    color: var(--bs-body-color);
    font-size: 0.94rem;
    line-height: 1.45;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* the legacy theme sets a bare `textarea { height:155px; float:left }`, which
   this has to undo so the rows attribute governs the height */
textarea.hz-input {
    height: auto;
    float: none;
    padding: 0.6rem 0.7rem;
    resize: vertical;
}

.hz-input:focus {
    outline: none;
    border-color: var(--hz-accent);
    box-shadow: 0 0 0 3px var(--hz-accent-soft);
}

.hz-input.is-invalid {
    border-color: #d9534f;
}

.contact-error {
    font-size: 0.85rem;
    color: #d9534f;
}

.contact-purpose {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.contact-purpose-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact-purpose-option {
    position: relative;
    padding: 0.32rem 0.8rem;
    border: 1px solid var(--hz-border);
    border-radius: 999px;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.contact-purpose-option:hover {
    border-color: var(--hz-border-strong);
}

.contact-purpose-option.is-active {
    background: var(--hz-accent);
    border-color: var(--hz-accent);
    color: var(--hz-accent-on);
}

.contact-purpose-option:focus-within {
    box-shadow: 0 0 0 3px var(--hz-accent-soft);
}

.contact-consent {
    font-size: 0.82rem;
    color: #7d93a8;
    margin-bottom: 0.75rem;
}

.contact-submit-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-submit-row .btn {
    padding-inline: 1.6rem;
}

.contact-submit-row .contact-consent {
    flex: 1;
    min-width: 14rem;
    margin-bottom: 0;
    text-align: left;
}

@media (max-width: 575.98px) {
    .contact-submit-row {
        justify-content: stretch;
    }

    .contact-submit-row .btn {
        width: 100%;
    }
}

/* off-screen rather than display:none, which some bots skip */
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-sent {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-top: 1.25rem;
    padding: 1.25rem;
    border: 1px solid rgba(43, 191, 106, 0.35);
    border-radius: 16px;
    background: rgba(43, 191, 106, 0.08);
}

.contact-sent i {
    font-size: 1.5rem;
    color: #2bbf6a;
    flex-shrink: 0;
}

.contact-sent p {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
}

@media (max-width: 575.98px) {
    .contact-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form-card {
        padding: 1.5rem;
    }
}

/* The Google embed paints grey for a beat before its tiles arrive, which reads
   as a broken frame. A shimmer underneath turns that beat into loading. */
.contact-map {
    position: relative;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
}

.contact-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            var(--hz-surface-sunken) 30%,
            var(--hz-surface-page) 50%,
            var(--hz-surface-sunken) 70%);
    background-size: 220% 100%;
    animation: hzShimmer 1.6s ease-in-out infinite;
}

/* the iframe paints over the skeleton the moment it has something to show */
.contact-map iframe {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    /* clip to the card radius: iframes ignore the parent's overflow in Safari */
    border-radius: inherit;
}

@keyframes hzShimmer {
    from { background-position: 120% 0; }
    to { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-map::before {
        animation: none;
    }
}

[data-bs-theme="dark"] .contact-card-title {
    color: #f3f7fb;
}

[data-bs-theme="dark"] .contact-list li {
    color: #abc0d3;
}

[data-bs-theme="dark"] .contact-list i,
[data-bs-theme="dark"] .contact-list a {
    color: #66a9e0;
}

@media (max-width: 991.98px) {
    .contact-map iframe {
        min-height: 320px;
    }
}

/* ---------- footer ---------- */
.site-footer {
    position: relative;
    background: var(--public-surface-dark);
    color: #fff;
    padding: 4.5rem 0 1.75rem;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 3rem;
    padding-bottom: 3rem;
}

.site-footer-logo {
    width: 230px;
    height: auto;
    margin-bottom: 1.25rem;
}

.site-footer-tagline {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.75rem;
}

.site-footer h4 {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.4rem;
}

.site-footer-list,
.site-footer-contact,
.site-footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer-list li,
.site-footer-contact li {
    font-size: 0.98rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.site-footer-list a,
.site-footer-contact a,
.site-footer-meta a {
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.2s ease;
}

.site-footer-list a:hover,
.site-footer-contact a:hover,
.site-footer-meta a:hover {
    color: #fff;
}

.site-footer-contact li {
    display: flex;
    gap: 0.7rem;
    color: rgba(255, 255, 255, 0.78);
}

.site-footer-contact i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: #4b97ff;
}

.site-footer-contact + .public-cta-pill {
    margin-top: 0.75rem;
}

.site-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.site-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.site-footer-social a:hover {
    background: #fff;
    border-color: #fff;
    color: #10263f;
    transform: translateY(-2px);
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer-copy {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
}

.site-footer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.88rem;
}

.site-footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.32);
}

/* the mark is a dark navy that disappears on this surface, so flip it to white */
.site-footer-credit img {
    filter: brightness(0) invert(1);
    opacity: 0.4;
    transition: opacity 0.25s ease;
}

.site-footer-credit a:hover img {
    opacity: 0.9;
}

.site-footer-totop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.6);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.site-footer-totop:hover {
    background: #fff;
    border-color: #fff;
    color: #10263f;
}

@media (max-width: 991.98px) {
    .site-footer-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
    }

    .site-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .site-footer {
        padding-top: 3.5rem;
    }

    .site-footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer-bottom {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .public-statement {
        padding: 4.5rem 0;
    }
}

@media (max-width: 991.98px) {
    .public-hero-inner,
    .public-hero-inner-product,
    .public-story-card,
    .public-story-card-wide,
    .public-pillars-grid,
    .public-legal-layout {
        grid-template-columns: 1fr;
    }

    /* the index stops being a sidebar and becomes a lead-in list */
    .public-legal-toc {
        position: static;
    }

    .public-legal-card {
        padding: 1.75rem 1.5rem;
    }

    .public-story-image {
        height: 260px;
        min-height: unset;
        max-height: 260px;
    }

    .public-page-shell {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .public-hero {
        padding-top: 4.5rem;
        padding-bottom: 3.5rem;
    }

    /* hairline weights get fragile at small sizes */
    .public-hero-copy h1 {
        font-weight: 300;
    }
}

.section-white.team-padding {
    padding: 40px 0 0 0
}

.section-white.case-studies-padding, .section-grey.case-studies-padding {
    padding: 20px 0 0 0
}

.section-dark.portfolio-padding {
    padding: 60px 0 75px 0
}

.section-dark {
    background-color: #393f43;
    padding: 90px 0
}


[data-bs-theme="dark"] .section-dark {
    background-color: #353535;
}


.section-biz {
    background-color: #12467d;
    padding: 90px 0
}

.no-padding {
    padding: 0
}

.no-padding-left {
    padding-left: 0
}

.no-padding-right {
    padding-left: 0
}

.small-padding-left {
    padding-left: 5px
}

.small-padding-right {
    padding-right: 5px
}

.margin-right-25 {
    margin-right: 25px !important
}

.margin-top-110 {
    margin-top: 110px !important
}

.margin-top-100 {
    margin-top: 100px !important
}

.margin-top-90 {
    margin-top: 90px !important
}

.margin-top-80 {
    margin-top: 80px !important
}

.margin-top-60 {
    margin-top: 60px !important
}

.margin-top-50 {
    margin-top: 50px !important
}

.margin-top-40 {
    margin-top: 40px !important
}

.margin-top-35 {
    margin-top: 35px !important
}

.margin-top-30 {
    margin-top: 30px !important
}

.margin-top-20 {
    margin-top: 20px !important
}

.margin-top-10 {
    margin-top: 10px !important
}

.margin-top-5 {
    margin-top: 5px !important
}

.margin-bottom-0 {
    margin-bottom: 0 !important
}

.margin-bottom-10 {
    margin-bottom: 10px !important
}

.margin-bottom-20 {
    margin-bottom: 20px !important
}

.margin-bottom-30 {
    margin-bottom: 30px !important
}

.margin-bottom-40 {
    margin-bottom: 40px !important
}

.margin-bottom-50 {
    margin-bottom: 50px !important
}

.margin-bottom-60 {
    margin-bottom: 60px !important
}

.margin-bottom-70 {
    margin-bottom: 70px !important
}

.margin-bottom-80 {
    margin-bottom: 80px !important
}

.margin-bottom-100 {
    margin-bottom: 100px !important
}

.margin-bottom-120 {
    margin-bottom: 120px !important
}

.margin-bottom-130 {
    margin-bottom: 120px !important
}

.margin-bottom-140 {
    margin-bottom: 140px !important
}

.padding-top-0 {
    padding-top: 0 !important
}

.padding-top-10 {
    padding-top: 10px !important
}

.padding-top-20 {
    padding-top: 20px !important
}

.padding-top-25 {
    padding-top: 25px !important
}

.padding-top-30 {
    padding-top: 30px !important
}

.padding-top-40 {
    padding-top: 40px !important
}

.padding-top-45 {
    padding-top: 45px !important
}

.padding-top-50 {
    padding-top: 50px !important
}

.padding-top-60 {
    padding-top: 60px !important
}

.padding-top-70 {
    padding-top: 70px !important
}

.padding-top-80 {
    padding-top: 80px !important
}

.padding-top-100 {
    padding-top: 180px !important
}

.padding-bottom-70 {
    padding-bottom: 70px !important
}

.padding-bottom-60 {
    padding-bottom: 60px !important
}

.padding-bottom-50 {
    padding-bottom: 50px !important
}

.padding-bottom-40 {
    padding-bottom: 40px !important
}

.padding-bottom-30 {
    padding-bottom: 30px !important
}

.padding-bottom-20 {
    padding-bottom: 20px !important
}

.padding-bottom-10 {
    padding-bottom: 10px !important
}

.padding-bottom-0 {
    padding-bottom: 0 !important
}

.margin-top-0 {
    margin-top: 0 !important
}

.carousel.carousel1 .carousel-indicators {
    position: inherit;
    right: 0
}

.carousel.carousel1 .item .lead {
    font-size: 20px
}

.carousel {
    background: #2f4357
}

    .carousel h1, .carousel h2, .carousel p {
        color: #fff
    }

    .carousel .item {
        padding-left: 30px
    }

    .carousel .item, .carousel {
        height: 500px
    }

        .carousel .item {
            padding-top: 40px
        }




 
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media all and (min-width:601px) {
    #myCarousel h1 {
        font-size: 2.9em
    }
}

@media all and (max-width:601px) {
    .carousel-control {
        visibility: hidden
    }
}

.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity
}

.carousel-fade .carousel-inner .active {
    opacity: 1
}

    .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
        left: 0;
        opacity: 0;
        z-index: 1
    }

.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {
    opacity: 1
}

.carousel .carousel-control {
    z-index: 2;
    background-image: none
}

@media all and (transform-3d),(-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.right, .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    .carousel-fade .carousel-inner > .item.left, .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

.carousel .left.carousel-control, .carousel .right.carousel-control {
    background-color: rgba(0,0,0,.3);
    border-radius: 10px;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    width: 50px;
    height: 50px;
    margin-top: auto;
    margin-bottom: auto
}

    .carousel .left.carousel-control:hover, .carousel .right.carousel-control:hover {
        background-color: rgba(0,0,0,.5);
        border-radius: 10px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out
    }

.carousel .left {
    left: 10px
}

.carousel .right {
    right: 10px
}

.popup-wrapper {
    display: block;
    position: relative;
    overflow: hidden
}

.popup-gallery {
    display: inline-block;
    position: relative
}

.first-gallery {
    margin-bottom: 15px
}

.popup-gallery img {
    position: relative;
    z-index: 10;
    width: 100%;
    height: auto
}

.popup-gallery:hover img {
    opacity: .25
}

.popup-gallery a span.eye-wrapper, .popup-gallery a span.eye-wrapper2 {
    background-color: #000;
    position: absolute;
    display: block;
    overflow: hidden;
    z-index: 2;
    height: 100% !important;
    top: 0%;
    margin-top: 0;
    left: 0%;
    right: 0%;
    font-size: 22px;
    color: #fff;
    text-align: center;
    font-weight: 300;
    opacity: 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0
}

.popup-gallery-rounded a span.eye-wrapper, .popup-gallery-rounded a span.eye-wrapper2 {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px
}

.popup-gallery a span.eye-wrapper i.eye-icon, .popup-gallery a span.eye-wrapper2 i.eye-icon {
    position: absolute;
    display: inline-block;
    font-size: 38px;
    z-index: 3;
    top: 50% !important;
    margin-top: -19px !important;
    left: 0%;
    right: 0%
}

.popup-gallery a:hover span {
    opacity: 1
}

.popup-gallery img, .popup-gallery a span {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

ul.footer-gallery {
    position: relative;
    display: block;
    margin: 0
}

    ul.footer-gallery li {
        display: inline-block;
        border: 5px solid #292929;
        margin: 5px 2px 2px 2px;
        transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -webkit-transition: all .25s ease-in-out
    }

        ul.footer-gallery li.popup-gallery::after {
            display: none
        }

        ul.footer-gallery li a img {
            position: relative;
            display: inline-block;
            max-width: 70px
        }

#logo {
    margin-top: 0
}

.yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown {
    position: static
}

.yamm .container {
    position: relative
}

.yamm .dropdown-menu {
    left: auto
}

.yamm .yamm-content {
    padding: 20px 25px;
    min-width: 480px
}

    .yamm .yamm-content a, .yamm {
        font-size: 1.08em
    }

        .yamm .yamm-content a span {
            font-size: 1.6em;
            margin-bottom: 6px;
            vertical-align: middle
        }

        .yamm .dropdown.yamm-fw .dropdown-menu {
            left: 0;
            right: 0;
            background: #fff url(/img/dropdown-graphic.png) bottom right;
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: bottom right;
            background-size: auto
        }

.dropdown-menu li a {
    /*color: #7c8595;*/
    font-size: 14px;
    padding-top: 4px;
    padding-bottom: 4px
}

    .dropdown-menu li a i {
      /*  color: #7c8595;*/
         font-size: 1.2em; 
        padding-right: 4px;
        margin-top:-32px;
    }
        .dropdown-menu li a i :hover {
            color: none;
        }
    .dropdown-menu li a:hover, .dropdown-menu li a:hover i {
       /* color: #0c8ac2*/
    }

.nav-title {
    margin-bottom: 10px;
    color: #2f362f;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    font-family: var(--hz-font-sans)
}

.nav-subtitle {
    color: #7c8595;
    font-size: 13px;
    font-weight: 400;
    font-family: var(--hz-font-sans)
}

.hidden-nav-item {
    display: none !important
}

.navbar-brand > img {
    max-height: 45px
}

.navbar-default .navbar-nav > li > a.selected {
    color: #3498db
}

.dropdown-menu li a.selected, .dropdown-menu li a.selected i {
    color: #3498db
}

  .navbar-nav > li > a.purchase {
    position: relative;
    color: #3498db;
    background-color: transparent;
    border: 2px solid #3498db;
    margin-left: 15px;
    margin-right: -15px !important;
    margin-top: 18px;
    padding: 2px 20px;
    font-size: 14px;
    line-height: 2em;
    font-weight: 600 !important;
    text-transform: uppercase;
    webkit-border-radius: 5px 5px;
    -moz-border-radius: 5px 5px;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
      right:1em;
}

    .navbar-nav > li > a.purchase:hover {
        color: #fff !important;
        background-color: #3498db;
        border: 2px solid #3498db
    }

#navbar-collapse-02 .current a.purchase {
    color: #3498db !important;
    background-color: #fff !important;
    border: 1px solid #fff !important
}

.top-intro {
    background-color: #343434
}

ul.header_contact {
    margin-bottom: 0
}

    ul.header_contact li {
        padding: 8px 0 0 20px;
        line-height: 20px;
        display: inline-block;
        color: #dedede
    }

        ul.header_contact li i {
            display: inline-block;
            margin-right: 0.35rem;
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.62);
        }

    ul.header_contact .phoneli a {
        color: rgba(255, 255, 255, 0.78);
        transition: color 0.2s ease;
    }

    ul.header_contact .phoneli a:hover {
        color: #fff;
    }

ul.header_social {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

ul.header_social li {
    line-height: 1;
    margin-bottom: 0;
}

ul.header_social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.95rem;
    transition: background 0.25s ease, color 0.25s ease;
}

ul.header_social li a:hover,
ul.header_social li a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.breadcrumb-wrapper {
    background-color: #f6f7f8;
   /* border-top: 1px solid #eaeaea;*/
    padding: 25px 0 10px 0
}

    .breadcrumb-wrapper.blue {
        background-color: #3498db;
        border-top: 1px solid #3b5998
    }

[data-bs-theme="dark"] .breadcrumb-wrapper.blue {
    background-color: #2458ab;
    border-top: 1px solid #3b5998;
    color:white;
}
 

    .breadcrumb-wrapper.darkblue {

        background-color: #176698;
        border-top: 1px solid #955488
    }


[data-bs-theme="dark"] .breadcrumb-wrapper.blue {
  
}
 
    .breadcrumb-wrapper.blog {
        padding: 8px 0 5px 0
    }

    .breadcrumb-wrapper h1 {
        margin: 0
    }

    .breadcrumb-wrapper.blue h1, .breadcrumb-wrapper.blue h2, .breadcrumb-wrapper.blue p {
        color: #fff
    }
        .breadcrumb-wrapper.darkblue h1, .breadcrumb-wrapper.darkblue h2, .breadcrumb-wrapper.darkblue p {
        color: #fff
    }

    .breadcrumb-wrapper.blue a {
        color: #fff;
        font-weight: 600
    }

.breadcrumb.blue {
    color: #fff
}

.breadcrumb > .active {
    color: #fff
}

h2.page-title {
    font-size: 22px;
    font-weight: 700;
    margin: 10px 0 10px 0
}

.page-intro {
    background-color: #3498db;
    padding: 90px 0
}

.features-item {
    margin: 30px 0;
    text-align: center
}

    .features-item h3 {
        font-size: 20px;
        margin-bottom: 10px
    }

    .features-item p {
        padding: 0 10px
    }

.services-pic {
    border-radius: 50%
}

.icon-pic {
    max-height: 72px
}

.icon-wrapper {
    margin-bottom: 25px;
    width: 100%
}

.icon-md {
    font-size: 36px;
    height: 68px;
    width: 68px;
    line-height: 75px;
    color: #fff;
    margin-right: 10px;
    background-color: #2d3e50;
    text-align: center;
    display: block;
    border-radius: 50%;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms
}

.bulletsection p {
    font-size: 1.1em
}

.bulletsection span {
    font-size: 1.3em
}

.bulletsection .media:hover .icon-md {
    border-radius: 10px;
    background-color: #0088e1
}

.features-icon {
    padding: 18px 22px;
    font-size: 42px;
    line-height: 42px;
    display: inline-block;
    text-align: center;
    color: #fff;
    background-color: #3498db;
    -webkit-border-radius: 8px 8px;
    -moz-border-radius: 8px 8px;
    border-radius: 8px 8px;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

.services-item {
    margin: 20px 0
}

.services-text {
    padding-left: 90px;
    padding-right: 20px
}

    .services-text h4 {
        font-size: 18px;
        margin-top: 2px;
        margin-bottom: 8px;
        color: #454545
    }

.services-icon {
    display: block;
    width: 90px;
    height: 90px;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center
}

.services-icon-blue, .services-icon-green, .services-icon-red, .services-icon-yellow, .services-icon-orange, .services-icon-lyla {
    width: 80px;
    height: 80px;
    padding: 20px 20px;
    font-size: 36px;
    line-height: 38px;
    display: inline-block;
    text-align: center;
    color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

.services-icon-blue {
    background-color: #3498db;
    border: 1px solid #3498db
}

.services-icon-green {
    background-color: #1abc9c;
    border: 1px solid #1abc9c
}

.services-icon-red {
    background-color: #e74c3c;
    border: 1px solid #e74c3c
}

.services-icon-yellow {
    background-color: #f1c40f;
    border: 1px solid #f1c40f
}

.services-icon-orange {
    background-color: #e87e04;
    border: 1px solid #e87e04
}

.services-icon-lyla {
    background-color: #9b59b6;
    border: 1px solid #9b59b6
}

.cta-wrapper h5 {
    color: #fff;
    font-size: 22px;
    margin: 15px 0 5px 0
}

.cta-wrapper p {
    color: #fff;
    font-size: 16px
}

.newsletter_wrapper {
    background: #3498db
}

.newsletter_box {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 0 20px 0
}

.newsletter_info {
    padding: 1px 0 30px 60px;
    border-left: 1px solid #fff
}

    .newsletter_info h2 {
        font-size: 28px;
        line-height: 36px;
        color: #fff;
        font-weight: 400;
        margin-bottom: 30px
    }

#newsletter-form #email_newsletter {
    width: 91%;
    max-width: 400px;
    height: 56px;
    line-height: 56px;
    padding: 0 4%;
    border: 1px solid #fff;
    background-color: transparent;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    margin: 0 10px 0 0
}

#newsletter-form #submit-button-newsletter {
    width: 140px;
    height: 56px;
    background-color: #fff;
    border: 1px solid #fff;
    color: #2980b9;
    display: inline;
    margin: 0 5px 0 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    vertical-align: top;
    transition: background-color .25s ease-in-out;
    -moz-transition: background-color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out
}

    #newsletter-form #submit-button-newsletter:hover {
        color: #fff;
        background-color: #2980b9;
        border: 1px solid #2980b9;
        transition: background-color .25s ease-in-out;
        -moz-transition: background-color .25s ease-in-out;
        -webkit-transition: background-color .25s ease-in-out
    }

::-webkit-input-placeholder {
    color: #fff
}

:-moz-placeholder {
    color: #fff
}

::-moz-placeholder {
    color: #fff
}

:-ms-input-placeholder {
    color: #fff
}

p.newsletter_success_box {
    font-size: 18px;
    color: #eee;
    font-style: italic;
    margin-bottom: 15px
}

.portfolio-sorting {
    margin-bottom: 50px
}

    .portfolio-sorting li a {
        font-family: var(--hz-font-sans);
        font-size: 17px;
        line-height: 1.2;
        font-weight: 500;
        color: #7c8595
    }

        .portfolio-sorting li a:hover, .portfolio-sorting li a.active {
            color: #3498db
        }

.portfolio-item, .gallery-item {
    display: inline-block
}

    .gallery-item img {
        -webkit-border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px
    }

.portfolio-box, .portfolio-box-grey {
    text-align: center;
    background-color: #fff;
    border-bottom: 3px solid #e0e0e0;
    margin-bottom: 20px;
    padding: 1px 20px 12px 20px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px
}

.portfolio-box-grey {
    margin-bottom: 30px;
    background-color: #f6f7f8;
    border-bottom: 2px solid #e0e0e0
}

    .portfolio-box h3, .portfolio-box-grey h3 {
        margin: 10px 0 1px 0 !important;
        line-height: 20px
    }

        .portfolio-box h3 a, .portfolio-box-grey h3 a {
            color: #454545;
            font-size: 18px;
            transition: all .25s ease-in-out;
            -moz-transition: all .25s ease-in-out;
            -webkit-transition: all .25s ease-in-out
        }

.portfolio-item h3 a:hover {
    color: #3498db
}

.portfolio-box p.portfolio-info {
    font-size: 15px;
    font-style: italic;
    margin-bottom: 5px
}

.portfolio-item img {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0
}

/* ========================================================== */
/* 				  		     06. TEAM                         */
/* ========================================================== */

.team-item, .team-item-white {
    text-align: center;
    margin: 20px 0;
    padding: 1px 30px 15px 30px;
     height: 485px;
}

    .team-item h3, .team-item-white h3 {
           
        margin: 20px 0 1px 0 !important;
        color: #ddd;
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
        transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -webkit-transition: all .25s ease-in-out
    }

    .team-item-white h3 {
        color: #454545
    }

    .team-item p {
        color: #ccc
    }

.team-info {
    display: block;
    margin-bottom: 0
}

    .team-info p {
        color: #ccc;
        font-style: italic
    }

 

.team-info-white p {
    font-style: italic
}

.team-info::after, .team-info-white::after {
    background-color: #3498db;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 50px;
    height: 3px;
    margin-top: -20px
}

.team-img {
    max-width:180px;
    padding: 6px 6px;
    background-color: #eaeaea;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1)
}

ul.team-icon {
    margin-top: 15px
}

    ul.team-icon li {
        display: inline-block;
        margin: 0 3px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out
    }

        ul.team-icon li a {
            margin: 0;
            display: inline-block;
            padding: 8px 8px;
            width: 34px;
            height: 34px;
            font-size: 18px;
            line-height: 18px;
            background-color: #fff;
            border-radius: 50%;
            color: #fff
        }

            ul.team-icon li a.twitter {
                background-color: #4099ff
            }

            ul.team-icon li a.pinterest {
                background-color: #c92228
            }

            ul.team-icon li a.facebook {
                background-color: #3b5998
            }

            ul.team-icon li a.dribble {
                background-color: #ea4c89
            }
            ul.team-icon li a.linkedin {
                background-color: #0a66c2
            }
   

.team-icon li a:hover {
    color: #dedede;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

.blog-item {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    margin: 30px 0 10px 0
}

    .blog-item.blogs {
        border: 1px solid #ccc
    }

    .blog-item img {
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0
    }

.blog-item-inner {
    width: 100%;
    display: inline-block;
    padding: 1px 25px 20px 25px;
    background-color: #f6f7f8;
    border-bottom: 2px solid #e0e0e0;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

    .blog-item-inner p {
        margin: 15px 0 20px 0
    }

h3.blog-title {
    margin-top: 15px;
    margin-bottom: 10px
}

    h3.blog-title a {
        font-size: 20px;
        color: #454545;
        transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -webkit-transition: all .25s ease-in-out
    }

        h3.blog-title a:hover {
            color: #228798;
            transition: all .25s ease-in-out;
            -moz-transition: all .25s ease-in-out;
            -webkit-transition: all .25s ease-in-out
        }

a.blog-icons {
    color: #858585;
    font-size: 14px;
    font-style: italic;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #aaa;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out
}

    a.blog-icons i {
        color: #656565;
        font-size: 16px;
        line-height: 16px;
        vertical-align: text-bottom
    }

    a.blog-icons.last {
        border-right: none
    }

    a.blog-icons:hover {
        color: #228798;
        transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -webkit-transition: all .25s ease-in-out
    }

a.button-blog {
    background-color: #3498db;
    border: 1px solid #3498db;
    color: #fff;
    display: inline-block;
    font-weight: 400;
    font-size: 13px;
    padding: 10px 20px;
    margin: 0 0 20px 0;
    -webkit-border-radius: 3px 3px;
    -moz-border-radius: 3px 3px;
    border-radius: 3px 3px;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

    a.button-blog:hover {
        background-color: transparent;
        border: 1px solid #3498db;
        color: #3498db;
        transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out
    }

ul.post_info {
    width: 100%;
    float: left;
    margin: 10px 0 15px 0;
    clear: both
}

    ul.post_info li {
        float: left;
        margin-right: 12px;
        padding-right: 12px;
        line-height: 14px;
        border-right: 1px solid #999
    }

        ul.post_info li.last {
            border-right: none
        }

        ul.post_info li a {
            font-size: 13px;
            line-height: 14px;
            color: #888
        }

            ul.post_info li a:hover {
                color: #3498db
            }

.post_author {
    display: block;
    overflow: hidden;
    margin-bottom: 50px;
    padding: 25px 25px;
    background-color: #f6f7f8 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    border-radius: 5px 5px !important;
    -webkit-border-radius: 2px 2px;
    -moz-border-radius: 2px 2px;
    border-radius: 2px 2px
}

    .post_author h5 {
        margin-bottom: 10px
    }

    .post_author p {
        margin-bottom: 15px
    }

.post_author_pic {
    float: left;
    margin-right: 25px;
    width: 170px;
    border-radius: 0 !important
}

ul.author_icons {
    display: inline-block;
    margin-bottom: 0
}

    ul.author_icons li {
        display: inline-block;
        margin: 0;
        line-height: 100% !important
    }

        ul.author_icons li a i {
            display: inline-block;
            font-size: 22px;
            line-height: 22px;
            color: #454545;
            margin: 5px 5px;
            transition: all .5s ease-in-out;
            -moz-transition: all .25s ease-in-out;
            -webkit-transition: all .25s ease-in-out
        }

            ul.author_icons li a i:hover {
                transition: all .5s ease-in-out;
                -moz-transition: all .25s ease-in-out;
                -webkit-transition: all .25s ease-in-out;
                color: #3498db
            }

.second_comment {
    padding-left: 45px
}

.post_text {
    overflow: hidden;
    margin-bottom: 30px;
    padding: 20px 25px 20px 25px;
    background-color: #f6f7f8 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    border-radius: 5px 5px !important;
    -webkit-border-radius: 2px 2px;
    -moz-border-radius: 2px 2px;
    border-radius: 2px 2px
}

    .post_text h5 {
        margin-bottom: 1px
    }

.comments_pic {
    margin-right: 20px;
    float: left;
    width: 70px;
    border-radius: 0 !important
}

.comments_form {
    margin: 30px 0;
    float: left;
    clear: both
}

input.comments_input {
    width: 90%;
    height: 44px;
    padding: 0 20px;
    background-color: #f6f7f8;
    border: 1px solid #eaeaea !important;
    color: #656565;
    font-size: 14px;
    margin: 0 0 10px 0;
    -webkit-border-radius: 2px 2px;
    -moz-border-radius: 2px 2px;
    border-radius: 2px 2px
}

textarea.comments_text {
    width: 90%;
    height: 120px;
    padding: 15px 20px;
    background-color: #f6f7f8;
    border: 1px solid #eaeaea !important;
    color: #656565;
    font-size: 14px;
    margin: 0 0 10px 0;
    -webkit-border-radius: 2px 2px;
    -moz-border-radius: 2px 2px;
    border-radius: 2px 2px
}

input.comments-submit {
    width: 120px;
    height: 44px;
    float: left;
    background-color: #3498db;
    border: 2px solid #3498db;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
    padding: 6px 15px;
    margin: 0 15px 0 0;
    -webkit-border-radius: 4px 4px;
    -moz-border-radius: 4px 4px;
    border-radius: 4px 4px;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: background-color .25s ease-in-out;
    -moz-transition: background-color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out
}

    input.comments-submit:hover {
        background-color: #fff;
        border: 2px solid #3498db;
        color: #3498db;
        transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -webkit-transition: all .25s ease-in-out
    }

.pricing-box-green, .pricing-box-blue, .pricing-box-red {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 40px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background-color: #f9f9f9;
    text-align: center;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 2px solid #e5e5e5
}

    .pricing-box-green:hover, .pricing-box-red:hover, .pricing-box-red:hover {
        box-shadow: 0 2px 20px rgba(0,0,0,.08)
    }

    .pricing-box-green .pricing-top, .pricing-box-blue .pricing-top, .pricing-box-red .pricing-top {
        padding: 20px 0;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0
    }

    .pricing-box-green .pricing-top {
        background-color: #16a085
    }

    .pricing-box-blue .pricing-top {
        background-color: #34b1c4
    }

    .pricing-box-red .pricing-top {
        background-color: #dd624e
    }

.pricing-top h3 {
    color: #fff;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 700;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s
}

.pricing-top .price .currency {
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    font-weight: 600;
    vertical-align: top;
    display: inline-block
}

.pricing-top .price span.number {
    color: #fff;
    font-size: 36px;
    line-height: 42px;
    font-weight: 700
}

.pricing-top .price .month {
    font-size: 16px;
    line-height: 18px;
    font-weight: 600
}

    .pricing-top .price .month .blue {
        color: #3498db
    }

.pricing-bottom {
    padding: 0 40px 40px 40px
}

    .pricing-bottom ul {
        list-style: none;
        list-style-type: none;
        margin: 35px 0 40px;
        padding: 0
    }

        .pricing-bottom ul li {
            text-align: center;
            font-size: 16px;
            line-height: 30px
        }

.btn-pricing-green {
    color: #fff;
    font-weight: 600;
    background-color: #16a085;
    border: 2px solid #16a085;
    padding: 14px 0
}

    .btn-pricing-green:hover {
        color: #16a085;
        background-color: transparent;
        border-color: #16a085
    }

.btn-pricing-blue {
    color: #fff;
    background-color: #34b1c4;
    border: 2px solid #34b1c4;
    padding: 14px 0;
    font-weight: 600
}

    .btn-pricing-blue:hover {
        color: #34b1c4;
        background-color: transparent;
        border: 2px solid #34b1c4
    }

.btn-pricing-red {
    color: #fff;
    font-weight: 600;
    background-color: #dd624e;
    border: 2px solid #dd624e;
    padding: 14px 0
}

    .btn-pricing-red:hover {
        color: #dd624e;
        background-color: transparent;
        border-color: #dd624e
    }

a.btn, .Newspaper-Button.rev-btn, .contact-submit {
    border-radius: 0 !important;
    border-color: #70c6ff
}

iframe.contact-maps {
    padding: 10px 10px;
    border-radius: 8px;
    background-color: #f6f7f8;
    border: 1px solid #eaeaea !important
}

#contact-form {
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    text-align: center;
    margin-bottom: 10px
}

input.contact-input {
    width: 100%;
    height: 55px;
    padding-left: 2%;
    padding-right: 2%;
    margin-bottom: 15px;
    font-size: 14px;
    float: left;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px
}

textarea {
    height: 155px;
    margin-bottom: 15px;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #656565;
    font-size: 14px;
    float: left;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px
}

input.contact-submit, input.analysis-submit {
    color: #fff;
    border: 2px solid #3498db;
    background-color: #3498db;
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
    padding: 16px 30px;
    position: relative;
    text-transform: uppercase;
    -webkit-border-radius: 3px 3px;
    -moz-border-radius: 3px 3px;
    border-radius: 3px 3px;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

    input.contact-submit:hover, input.analysis-submit:hover {
        color: #3498db;
        background-color: transparent;
        border: 2px solid #3498db;
        transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out
    }

input.analysis-submit {
    display: inline-block
}

input.white-input::-webkit-input-placeholder, textarea.white-input::-webkit-input-placeholder {
    color: #7c8595
}

input.white-input:-moz-placeholder, textarea.white-input:-moz-placeholder {
    color: #7c8595
}

input.white-input::-moz-placeholder, textarea.white-input::-moz-placeholder {
    color: #7c8595
}

input.white-input:-ms-input-placeholder, textarea.white-input:-ms-input-placeholder {
    color: #7c8595
}

#contact-form input.contact-input:focus, #contact-form textarea.contact-commnent:focus {
    border-color: #3498db;
    outline: none
}

p.contact_success_box {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    font-style: italic;
    padding: 20px 20px;
    border: 1px solid #fff;
    webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px
}

.section_features {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.no-padding {
    padding: 0
}

.wrapper-inner {
    display: inline-block;
    width: 100%;
    max-width: 585px;
    padding: 40px 0 40px 35px
}

.portfolio-pic {
    margin-bottom: 30px
}

.btn, btn:hover {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

.btn-margin {
    display: inline-block;
    margin: 10px 10px
}

.btn-white {
    color: #454545;
    background-color: #fff;
    border-color: #fff
}

    .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white {
        color: #fff;
        background-color: transparent;
        border-color: #fff
    }

.btn-white-big {
    color: #454545;
    background-color: #fff;
    border-color: #fff;
    padding: 10px 25px;
    font-size: 16px
}

    .btn-white-big:hover, .btn-white-big:focus, .btn-white-big:active, .btn-white-big.active, .open .dropdown-toggle.btn-white-big {
        color: #fff;
        background-color: transparent;
        border-color: #fff
    }

.btn-white-transparent {
    color: #fff;
    background-color: transparent;
    border-color: #fff
}

    .btn-white-transparent:hover, .btn-white-transparent:focus, .btn-white-transparent:active, .btn-white-transparent.active, .open .dropdown-toggle.btn-white-transparent {
        color: #454545;
        background-color: #fff;
        border-color: #fff
    }

.btn-small-blue {
    color: #fff;
    font-weight: 600;
    background-color: #3498db;
    border: 2px solid #3498db;
    padding: 12px 25px
}

    .btn-small-blue:hover {
        color: #3498db;
        background-color: transparent;
        border-color: #3498db
    }

.btn-blue {
    background-color: #3498db;
    position: relative;
    display: inline-block;
    text-align: center;
    color: #fff
}

    .btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue.active, .open .dropdown-toggle.btn-blue {
        color: #fff;
        background-color: #2980b9
    }

.btn-green {
    background-color: #1bbc9b;
    position: relative;
    display: inline-block;
    text-align: center;
    color: #fff
}

    .btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .open .dropdown-toggle.btn-green {
        color: #fff;
        background-color: #1bbc9b
    }

.btn-blue.small {
    padding: 16px 28px
}

.btn-blue.xsmall {
    padding: 14px 20px;
    font-size: 14px;
    text-transform: none
}

.btn-blue.xlarge, .btn-green.xlarge {
    margin: 10px 10px;
    padding: 14px 26px 12px 26px;
    text-transform: none;
    font-size: 16px;
    font-weight: 500
}

    .btn-blue.xlarge i, .btn-green.xlarge i {
        padding-right: 8px;
        vertical-align: middle;
        font-size: 20px
    }

.partners-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1140px
}

.partners-item {
    padding: 50px 0;
    text-align: center;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

    .partners-item.no-border-bottom {
        border-bottom: none
    }

    .partners-item.last {
        border-right: none
    }

    .partners-item img {
        opacity: .4;
        margin: 10px 25px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out
    }

        .partners-item img:hover {
            opacity: 1
        }

.section-grey.sponsors-padding {
    padding: 60px 0
}

.section-grey.sponsors-padding-small {
    padding: 25px 0
}

.sponsors img.sponsor {
    opacity: .4;
    margin: 10px 23px;
    max-height: 60px;
    margin-right: 15px;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

    .sponsors img.sponsor:hover {
        opacity: 1;
        -webkit-filter: unset;
        filter: unset
    }

.fun-facts-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #2f3539;
    border-top: 1px solid #393f43;
    margin: 0 auto;
    padding: 25px 0 30px 0
}

.fun-facts-box {
    float: left;
    width: 19.99%;
    padding-top: 15px
}

.fun-facts-title {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    font-style: italic
}

    .fun-facts-title span {
        font-size: 28px;
        line-height: 30px;
        font-weight: 600;
        font-style: normal;
        color: #f5f5f5
    }

.fun-facts-box i {
    font-size: 40px;
    line-height: 60px;
    color: #3498db
}

.blockquote {
    border-left: 3px solid #3498db;
    padding-left: 15px;
    padding-bottom: 3px;
    margin-bottom: 30px
}

ul.sidebar_categories {
    margin-bottom: 30px
}

    ul.sidebar_categories li a {
        color: #555;
        line-height: 22px
    }

        ul.sidebar_categories li a:hover {
            color: #3498db
        }

ul.tags {
    float: left;
    list-style: none;
    width: 100%;
    margin-bottom: 20px
}

    ul.tags li {
        float: left;
        margin-bottom: 10px;
        margin-right: 5px
    }

        ul.tags li a {
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 2px 2px 2px 2px;
            color: #454545;
            font-size: 12px;
            padding: 6px 10px;
            transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            -webkit-transition: all .5s ease-in-out
        }

            ul.tags li a:hover {
                background-color: #3498db;
                border: 1px solid #3498db;
                color: #fff;
                transition: all .5s ease-in-out;
                -moz-transition: all .5s ease-in-out;
                -webkit-transition: all .5s ease-in-out
            }

.sidebar_posts {
    float: left;
    margin-bottom: 20px
}

    .sidebar_posts.last {
        margin-bottom: 35px
    }

    .sidebar_posts a {
        font-size: 14px
    }

        .sidebar_posts a:hover {
            color: #3498db
        }

span.sidebar_post_date {
    color: #7c8595;
    font-style: italic;
    font-size: 13px;
    display: block;
    padding-top: 5px
}

.sidebar_posts img {
    width: 70px;
    height: 70px;
    float: left;
    margin-right: 20px
}

.panel-icon {
    margin-right: 5px;
    font-size: 20px;
    vertical-align: middle
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    color: #454545;
    font-family: var(--hz-font-sans)
}

    .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a {
        color: #656565
    }

.panel-group .panel {
    margin-bottom: 0
}

.panel-body {
    padding: 20px 10px 10px 10px
}

    .panel-body p, .panel-body span {
        font-size: 1.12em !important
    }

.panel-heading {
    padding: 8px 10px 16px 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.panel-default {
    border-color: transparent
}

    .panel-default > .panel-heading {
        color: #959595;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #e7e7e7
    }

.panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: 3px solid #3498db;
    border-bottom: 1px solid #e7e7e7
}

.progress-list {
    margin: 0;
    padding: 0;
    list-style: none
}

    .progress-list p {
        margin-bottom: 3px
    }

    .progress-list li {
        margin-bottom: 10px
    }

        .progress-list li span {
            float: right
        }

.progress.plain {
    height: 20px;
    margin-bottom: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background: none;
    border: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

    .progress.plain .bar {
        float: left;
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        width: 0;
        height: 100%;
        font-size: 12px;
        color: #fff;
        text-align: center;
        text-shadow: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        background: #3498db !important
    }

    .progress.plain.bluebar .bar {
        background: #34b1c4 !important
    }

    .progress.plain.redbar .bar {
        background: #e74c3c !important
    }

    .progress.plain.greenbar .bar {
        background: #1abc9c !important
    }

    .progress.plain.yellowbar .bar {
        background: #f1c40f !important
    }

    .progress.plain.lylabar .bar {
        background: #9b59b6 !important
    }

.bar-container {
    background: #f2f2f2 !important;
    border-bottom: 0;
    line-height: 1
}

.chart {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px
}

    .chart canvas {
        position: absolute;
        display: block;
        top: 0;
        left: 50%;
        margin-left: -75px
    }

    .chart span {
        color: #454545;
        font-size: 34px;
        font-weight: 500;
        line-height: 150px;
        display: block;
        font-family: var(--hz-font-sans)
    }

        .chart span:after {
            content: '%';
            margin-left: 0;
            font-size: 40px
        }

h5.chart-title {
    margin: 25px 0 12px 0
}

.process-wrapper {
    border-top: 1px solid #e8e8e8;
    text-align: center
}

    .process-wrapper .process-inner {
        background: url('../img/process-line.png') no-repeat scroll center 120px
    }

        .process-wrapper .process-inner .process {
            display: inline-block;
            text-align: center
        }

            .process-wrapper .process-inner .process p.process-title {
                font-size: 18px;
                font-weight: 700;
                color: #454545;
                font-family: var(--hz-font-sans)
            }

            .process-wrapper .process-inner .process .process-circle {
                padding: 15px;
                border-radius: 100%;
                margin-bottom: 20px;
                width: 180px;
                height: 180px;
                background-color: #fff;
                border: 2px dashed #cecece;
                transition: all 300ms ease-in-out 0s
            }

                .process-wrapper .process-inner .process .process-circle .process-circle-icon {
                    width: 165px;
                    height: 165px;
                    line-height: 175px;
                    border-radius: 50%;
                    background: #f4f6f7;
                    margin: -10px;
                    position: relative
                }

                    .process-wrapper .process-inner .process .process-circle .process-circle-icon .process-description {
                        position: absolute;
                        font-size: 14px;
                        line-height: 24px;
                        color: #454545;
                        text-align: center;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        padding-top: 50px;
                        opacity: 0;
                        transition: all 300ms ease-in-out 0s
                    }

                    .process-wrapper .process-inner .process .process-circle .process-circle-icon img {
                        margin-top: -10px;
                        display: inline-block;
                        border-radius: 50%;
                        transition: all 300ms ease-in-out 0s
                    }

            .process-wrapper .process-inner .process:hover .process-circle .process-circle-icon img {
                opacity: .07
            }

            .process-wrapper .process-inner .process:hover .process-circle .process-circle-icon .process-description {
                opacity: 1
            }

@media(min-width:992px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        -webkit-transition: all .25s ease-in;
        -moz-transition: all .25s ease-in;
        -ms-transition: all .25s ease-in;
        -o-transition: all .25s ease-in;
        transition: all .25s ease-in
    }
}

@media(max-width:991px) {
    .dropdown-menu {
        position: relative;
        top: 100%;
        left: 0;
        z-index: 1000;
        float: left;
        min-width: 200px;
        padding: 0;
        margin: 2px 0 0;
        font-size: 14px;
        text-align: left;
        list-style: none;
     /*   background-color: transparent;*/
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border-radius: 4px;
        -webkit-box-shadow: none;
        box-shadow: none
    }

        .dropdown-menu .divider {
            display: none
        }

    .yamm .yamm-content {
        padding: 0 25px;
        min-width: 320px
    }

    .nav-title, .nav-subtitle {
        display: none
    }

    .nav > li {
        text-align: left
    }

    .navbar-default .navbar-nav > li > a {
        line-height: 28px;
        padding-top: 8px;
        padding-bottom: 8px
    }

    .navbar-nav > li > .dropdown-menu {
        margin-bottom: 12px
    }

    .yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown {
        position: relative
    }

    .dropdown-menu, .dropdown-menu > li, .dropdown-menu > li > a {
        width: 100%;
        clear: both
    }

        .dropdown-menu > li > a {
            padding: 6px 20px
        }

    .yamm .dropdown.yamm-fw .dropdown-menu {
        background: none
    }
/*
    .navbar-default .navbar-nav > li > a.purchase {
        font-family: var(--hz-font-sans);
        position: relative;
        color: #3498db;
        background-color: transparent;
        border: none;
        margin-left: 15px;
        margin-right: 0 !important;
        margin-top: 0;
        padding: 0;
        font-size: 16px;
        line-height: 40px;
        font-weight: 500 !important;
        text-transform: none;
        webkit-border-radius: 5px 5px;
        -moz-border-radius: 5px 5px;
        border-radius: 5px 5px
    }

        .navbar-default .navbar-nav > li > a.purchase:hover {
            color: #fff !important;
            background-color: #3498db !important;
            border: none
        }*/

    #navbar-collapse-02 .current a.purchase {
        color: #3498db !important;
        background-color: transparent !important;
        border: none
    }

    .pricing-bottom {
        padding: 0 20px 40px 20px
    }

    .newsletter_box {
        text-align: center
    }

    .newsletter_info {
        padding: 0;
        border-left: none
    }

        .newsletter_info h2 {
            font-size: 26px
        }

        .newsletter_info p {
            font-size: 18px;
            line-height: 28px
        }

    #newsletter-form #email_newsletter {
        width: 90%;
        margin-bottom: 10px
    }

    #newsletter-form #submit-button-newsletter {
        width: 140px;
        height: 56px;
        margin: 0
    }

    .process-wrapper .process-inner {
        background: none
    }
}

@media handheld,only screen and (max-width:800px) {
    .fun-facts-box {
        width: 50%
    }

    .team-item {
        margin-bottom: 30px
    }

    .wrapper-inner {
        max-width: none;
        padding: 40px 0 80px 35px
    }

    .partners-item { 
        padding: 10px 0;
        border-right: none;
        border-bottom: none
    } 

    .col-md-4.small-padding-right, .col-md-6.small-padding-right {
        padding-right: 15px !important
    }
}

@media(max-width:768px) {
    .top-intro .details-wrapper {
        text-align: center !important
    }
/* 
    .top-intro {
        display: none
    } */

    .hidden-nav-item {
        display: block !important
    }

    .navbar-nav > li.hidden-nav-item > .dropdown-menu {
        display: block !important
    }

    .hidden-nav-item > .dropdown-menu > li > a {
        display: block !important
    }
}

.inner-shadow {
    -moz-box-shadow: inset 0 0 20px #000;
    -webkit-box-shadow: inset 0 0 20px #000;
    box-shadow: inset 0 0 20px #000
}

.inner-shadowv {
    border-bottom: #353535;
    border-top: #353535;
    -moz-box-shadow: inset 0 16px 16px -16px #353535,inset 0 -8px 8px -8px #696868;
    -webkit-box-shadow: inset 0 16px 16px -16px #353535,inset 0 -8px 8px -8px #696868;
    box-shadow: inset 0 16px 16px -16px #353535,inset 0 -8px 8px -8px #696868
}

.one-edge-shadow {
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black
}

.one-edge-shadow-lt {
    -webkit-box-shadow: 0 6px 6px -6px black;
    -moz-box-shadow: 0 6px 6px -6px black;
    box-shadow: 0 6px 6px -6px black
}

.shadow {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 3px 3px 5px 6px #ccc
}

/*.lnflag.en {
    background: url(/img/icon/us.png) no-repeat
}*/

.lnflag.en {
    background: url(/img/icon/gb.png) no-repeat;
      background-size:24px 20px;
}
.lnflag.de {
    background: url(/img/icon/de.png) no-repeat;
      background-size:24px 20px;
}




.lnflag.tr {
    background: url(/img/icon/tr.png) no-repeat;
  background-size:24px 20px;

}

.lnflag {
     background-size:14px 32px;
    top: 4px;
    padding-left: 40px;

}
.dropdown-toggle .lnflag {

}
 


.dropdown-menu > li > a { 
    line-height: 2.6857143; 
    z-index:1000;
}


.heart {
    background: url(/img/bundle/web_heart_animation.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
    cursor: pointer;
    position: absolute;
    left: -14px;
    background-size: 2900%
}

    .heart:hover, .heart:focus {
        background-position: right
    }

@-webkit-keyframes heartBlast {
    0% {
        background-position: left
    }

    100% {
        background-position: right
    }
}

@keyframes heartBlast {
    0% {
        background-position: left
    }

    100% {
        background-position: right
    }
}

.heartAnimation {
    display: inline-block;
    -webkit-animation-name: heartBlast;
    animation-name: heartBlast;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: steps(28);
    animation-timing-function: steps(28);
    background-position: right
}

.likeCount {
    font-family: 'Georgia',Times,Times New Roman,serif;
    margin-top: 13px;
    margin-left: 28px;
    font-size: 16px;
    color: #999
}

div.twitter-tweet-rendered p.entry-title {
    font-family: Arial,sans-serif !important;
    font-size: 14px !important;
    padding: 5px !important;
    background: #eee !important;
    max-width: 300px !important
}

    div.twitter-tweet-rendered p.entry-title a.link {
        font-family: Arial,sans-serif !important;
        font-size: 14px !important
    }

div.twitter-tweet-rendered div.twt-border {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important
}

div.twitter-tweet-rendered iframe.twt-follow-button {
    display: none !important
}

div.twitter-tweet-rendered div.footer ul.twt-actions {
    display: none !important
}

div.twitter-tweet-rendered div.footer a.view-details {
    display: block !important;
    width: 120px !important;
    margin: 5px 0 !important;
    padding: 7px 0 !important;
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 13px !important;
    text-align: center !important;
    box-shadow: -1px -1px 2px #555 !important
}

    div.twitter-tweet-rendered div.footer a.view-details span {
        font: 14px Georgia,serif !important;
        color: #fff !important
    }

.colrow {
    -moz-column-width: 15em;
    -webkit-column-width: 15em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em
}

.twitter-tweet {
    display: inline-block;
    padding: .25rem;
    width: 100%
}

blockquote {
    border-left: 5px solid #369
}

.error {
    color: #e80c4d
}

.field-validation-error {
    color: #e80c4d;
    font-weight: bold
}

.field-validation-valid {
    display: none
}

input.input-validation-error {
    border: 1px solid #e80c4d
}

input[type="checkbox"].input-validation-error {
    border: 0 none
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em
}

.validation-summary-valid {
    display: none
}

.langbtn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100px
}

.langmenu li {
    margin-bottom: 2px;
    padding-left: 10px !important;
    padding-bottom: 0;
    padding-top: 0;
    padding-top: 2px;
    display: block !important
}

    .langmenu li a {
        margin: 0;
        padding: 0
    }

#langdrop:hover {
    border-color: #fff !important;
    outline: 0;
    -webkit-box-shadow: 5px rgba(0,0,0,.075),0 0 8px #fff;
    box-shadow: 5px rgba(0,0,0,.075),0 0 8px #fff
}

.sidebar_posts {
    clear: both
}

ol.numlist {
    counter-reset: myCouter
}

    ol.numlist li {
        font-size: 1.25em;
        list-style: outside none none;
    /*    margin-left: 40px;*/
        font-weight: normal !important
    }

        ol.numlist li::before {
            content: counter(myCouter,decimal);
            counter-increment: myCouter;
            background: #2980b9 none repeat scroll 0 0;
            color: #fff;
            display: inline-block;
            height: 40px;
            margin: 5px 10px;
            text-align: center;
            width: 40px;
            padding: 5px;
        }

.blog-item-inner img {
    width: 100%;
    height: auto
}

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.bd-callout-info {
    border-left: 4px solid #5bc0de !important
}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #ddd;
    border-left-width: .25rem;
    border-radius: .25rem;
    background-color: #f7f7f7;
    border-radius: 3px
}

    .bd-callout p:last-child {
        margin-top: 0
    }

.section-dark p, .section-dark h2 {
    color: #fff
}

.aligncenter {
    margin-left: auto;
    margin-right: auto
}

#chat-box-msg p {
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 1em
}

#chat-box, #chat-box-header {
    z-index: 1000
}

#chatmain {
    -moz-box-shadow: 6px 6px 5px 6px #ccc;
    -webkit-box-shadow: 6px 6px 5px 6px #ccc;
    box-shadow: 6px 6px 5px 6px #ccc
}

#chatopen {
    z-index: 1000
}

@keyframes fadeinup {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadein {
    from {
        opacity: 0;
        transform-origin: center top;
        margin-top: -15px
    }

    to {
        margin-top: 0;
        opacity: 1
    }
}

.boxed {
    padding: 10px 15px;
    background-color: rgba(0,0,0,.6);
    display: inline-block;
    border: 1px outset #353535;
    animation: fadeinup
}

 
.textdiv h4{
    color:white !important;
}







.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: .25rem !important;
}

.m-2 {
    margin: .5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mt-1 {
    margin-top: .25rem !important;
}

.mr-1 {
    margin-right: .25rem !important;
}

.mb-1 {
    margin-bottom: .25rem !important;
}

.ml-1 {
    margin-left: .25rem !important;
}

.mx-1 {
    margin-left: .25rem !important;
    margin-right: .25rem !important;
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important;
}

.mt-2 {
    margin-top: .5rem !important;
}

.mr-2 {
    margin-right: .5rem !important;
}

.mb-2 {
    margin-bottom: .5rem !important;
}

.ml-2 {
    margin-left: .5rem !important;
}

.mx-2 {
    margin-right: .5rem !important;
    margin-left: .5rem !important;
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.ml-3 {
    margin-left: 1rem !important;
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.my-3 {
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mr-4 {
    margin-right: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.ml-4 {
    margin-left: 1.5rem !important;
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mr-5 {
    margin-right: 3rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.ml-5 {
    margin-left: 3rem !important;
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-auto {
    margin-bottom: auto !important;
    margin-top: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: .25rem !important;
}

.p-2 {
    padding: .5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pt-1 {
    padding-top: .25rem !important;
}

.pr-1 {
    padding-right: .25rem !important;
}

.pb-1 {
    padding-bottom: .25rem !important;
}

.pl-1 {
    padding-left: .25rem !important;
}

.px-1 {
    padding-left: .25rem !important;
    padding-right: .25rem !important;
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.pt-2 {
    padding-top: .5rem !important;
}

.pr-2 {
    padding-right: .5rem !important;
}

.pb-2 {
    padding-bottom: .5rem !important;
}

.pl-2 {
    padding-left: .5rem !important;
}

.px-2 {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pr-3 {
    padding-right: 1rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pl-3 {
    padding-left: 1rem !important;
}

.py-3 {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pr-4 {
    padding-right: 1.5rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pl-4 {
    padding-left: 1.5rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pr-5 {
    padding-right: 3rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.pl-5 {
    padding-left: 3rem !important;
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}


#cookieConsent{
    margin-bottom:0;
    opacity:1;
}

.blockchainbg {
    background: rgb(51,0,153);
    background: linear-gradient(230deg, rgba(51,0,153,1) 0%, rgba(102,51,204,1) 41%, rgba(51,51,153,1) 100%);
}

    .blockchainbg h1, .blockchainbg h2, .blockchainbg p {
        color: #ffffff;
    }

.phoneli  {
    font-size:0.9em;
}
/*
main    ul li  {
    list-style: disc;
    margin: 0;
    padding: unset;
    margin-left: 20px;
    padding-left: 5px;
    color: var(--bs-body-color);
    font-size: unset;
    line-height: 14px;
    margin-bottom: 20px;
}
main  ol li {
    list-style:decimal ;
    margin: 0;
    padding: unset;
    margin-left: 20px;
    padding-left: 5px;
    color: var(--bs-body-color); 
    font-size: unset;
    line-height: 14px;
    margin-bottom: 20px;
}
 */

#components-reconnect-modal {
    display: none !important;
}

/* ── Product Content Read More ── */
.content-toggle-check {
    display: none;
}

.product-content-collapsible {
    max-height: 320px;
    overflow: hidden;
    position: relative;
    transition: max-height .4s ease;
}

.product-content-collapsible::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, var(--bs-body-bg, #fff));
    pointer-events: none;
    transition: opacity .3s;
}

.content-toggle-check:checked ~ .product-content-collapsible {
    max-height: none;
}

.content-toggle-check:checked ~ .product-content-collapsible::after {
    opacity: 0;
}

.content-toggle-bar {
    text-align: center;
    padding-top: .75rem;
}

.content-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .5rem 1.5rem;
    border: 1px solid #d1d5db;
    border-radius: 50px;
    background: transparent;
    color: #2563eb;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.content-toggle-btn:hover {
    background: #f0f4ff;
    border-color: #2563eb;
}

.content-toggle-less {
    display: none;
}

.content-toggle-check:checked ~ .content-toggle-bar .content-toggle-more {
    display: none;
}

.content-toggle-check:checked ~ .content-toggle-bar .content-toggle-less {
    display: inline-flex;
    align-items: center;
}

[data-bs-theme="dark"] .product-content-collapsible::after {
    background: linear-gradient(transparent, rgba(14, 24, 36, 0.95));
}

[data-bs-theme="dark"] .content-toggle-btn {
    border-color: rgba(132, 166, 197, 0.2);
    color: #6aadff;
}

[data-bs-theme="dark"] .content-toggle-btn:hover {
    background: rgba(44, 89, 129, 0.25);
    border-color: #4a90e2;
}

@media (max-width: 768px) {
    .product-content-collapsible {
        max-height: 220px;
    }
    .content-toggle-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Compatibility Checker ── */
/* ---------------------------------------------------------------------------
   Compatibility checker: typeahead, empty state and no-result box
   --------------------------------------------------------------------------- */
.compat-search-bar {
    position: relative;
}

.compat-suggestions {
    position: absolute;
    z-index: 20;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 46rem);
    margin: 0.5rem 0 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid var(--hz-border);
    border-radius: 18px;
    background: var(--hz-surface-raised);
    box-shadow: var(--hz-shadow-2);
    max-height: 22rem;
    overflow-y: auto;
}

.compat-suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 0;
    border-radius: 12px;
    background: none;
    text-align: left;
    color: inherit;
}

.compat-suggestion:hover,
.compat-suggestion:focus-visible {
    background: var(--hz-accent-soft);
}

.compat-suggestion-stem {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* the trailing ellipsis says this is a series, not a full model number */
.compat-suggestion-wild {
    opacity: 0.5;
    font-weight: 400;
}

.compat-suggestion-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.85rem;
    color: #7d93a8;
}

.compat-suggestion-count {
    white-space: nowrap;
}

.compat-intro {
    padding-top: 1rem;
}

.compat-gateway-filter {
    display: grid;
    gap: 0.7rem;
    justify-items: center;
    margin: -1rem auto 2.5rem;
    max-width: 60rem;
}

.compat-gateway-filter .product-filter-chips {
    justify-content: center;
}

.compat-hidden-hint {
    max-width: 34rem;
    margin: 0 auto 1.25rem;
    font-size: 0.95rem;
    color: #7d93a8;
}

.compat-browse {
    display: grid;
    gap: 1.75rem;
    margin-top: 3rem;
}

.compat-browse-block {
    display: grid;
    gap: 0.75rem;
}

.compat-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.compat-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--hz-border);
    border-radius: 14px;
    background: var(--hz-surface-raised);
    text-align: left;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.compat-chip:hover,
.compat-chip:focus-visible {
    border-color: var(--hz-accent);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--hz-accent-soft), var(--hz-shadow-1);
}

.compat-chip strong {
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.compat-chip span {
    font-size: 0.8rem;
    color: #7d93a8;
}

.compat-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.compat-ask-box {
    max-width: 34rem;
    margin: 2rem auto 0;
    padding: 1.5rem;
    border: 1px solid var(--hz-border);
    border-radius: 18px;
    background: var(--hz-surface-raised);
    text-align: center;
}

.compat-ask-box h3 {
    font-size: var(--hz-text-h4);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.compat-ask-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

@media (max-width: 575.98px) {
    .compat-suggestion-meta {
        margin-left: 0;
        width: 100%;
    }
}

.compat-search-bar {
    max-width: 700px;
    margin: 0 auto 2.5rem;
}

.compat-search-inner {
    display: flex;
    margin: 0;
    align-items: center;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    transition: border-color .2s, box-shadow .2s;
}

.compat-search-inner:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

.compat-search-icon {
    font-size: 1.1rem;
    color: #9ca3af;
    margin-right: 10px;
    flex-shrink: 0;
}

.compat-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: inherit;
    min-width: 0;
}

.compat-search-input::placeholder {
    color: #9ca3af;
}

.compat-search-btn {
    border-radius: 50px;
    padding: 8px 24px;
    font-weight: 600;
    flex-shrink: 0;
}

.compat-results-header {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e5e7eb;
}

.compat-result-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.compat-result-product {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}

.compat-result-image {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: #f9fafb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.compat-result-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.compat-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compat-result-model {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.compat-result-model:hover {
    text-decoration: underline;
}

.compat-result-name {
    font-size: .9rem;
    color: #6b7280;
}

.compat-match-section {
    background: #f0f7ff;
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
}

.compat-match-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #2563eb;
    margin-bottom: .4rem;
}

.compat-match-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.compat-match-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    padding: .3rem .6rem;
    font-size: .85rem;
}

.compat-match-model {
    font-weight: 600;
    color: #1e40af;
}

.compat-match-name {
    color: #6b7280;
}

.compat-result-desc {
    font-size: .88rem;
    color: #6b7280;
    line-height: 1.5;
}

.compat-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.compat-empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: .5;
}

.compat-empty-state p {
    font-size: 1.05rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Compatibility dark mode */
[data-bs-theme="dark"] .compat-search-inner {
    background: rgba(14, 24, 36, 0.9);
    border-color: rgba(132, 166, 197, 0.2);
}

[data-bs-theme="dark"] .compat-search-inner:focus-within {
    border-color: #4a90e2;
    box-shadow: 0 0 0 4px rgba(74, 144, 226, .15);
}

[data-bs-theme="dark"] .compat-search-icon {
    color: #6b8299;
}

[data-bs-theme="dark"] .compat-result-card {
    background: rgba(14, 24, 36, 0.9);
    border-color: rgba(132, 166, 197, 0.14);
}

[data-bs-theme="dark"] .compat-result-image {
    background: rgba(20, 33, 47, 0.96);
}

[data-bs-theme="dark"] .compat-result-model {
    color: #6aadff;
}

[data-bs-theme="dark"] .compat-result-name,
[data-bs-theme="dark"] .compat-result-desc {
    color: #abc0d3;
}

[data-bs-theme="dark"] .compat-results-header {
    color: #8fb2d2;
    border-bottom-color: rgba(132, 166, 197, 0.14);
}

[data-bs-theme="dark"] .compat-match-section {
    background: rgba(37, 99, 235, .1);
}

[data-bs-theme="dark"] .compat-match-item {
    background: rgba(14, 24, 36, 0.8);
    border-color: rgba(74, 144, 226, .25);
}

[data-bs-theme="dark"] .compat-match-model {
    color: #6aadff;
}

[data-bs-theme="dark"] .compat-match-name {
    color: #8fb2d2;
}

[data-bs-theme="dark"] .compat-match-label {
    color: #6aadff;
}

@media (max-width: 576px) {
    /* The button used to share the row with the field, which squeezed the input
       to roughly 200px and clipped the placeholder mid-word. It now wraps onto
       its own line at full width, so the field gets the whole row and the button
       becomes a proper touch target. */
    .compat-search-inner {
        flex-wrap: wrap;
        row-gap: 10px;
        border-radius: 12px;
        padding: 10px 14px;
    }
    .compat-search-icon {
        margin-right: 8px;
    }
    .compat-search-input {
        flex: 1 1 auto;
    }
    .compat-search-btn {
        flex: 1 0 100%;
        padding: 10px 16px;
        font-size: .95rem;
    }
    .compat-result-product {
        flex-direction: column;
        align-items: flex-start;
    }
    .compat-match-list {
        flex-direction: column;
    }
}

/* ---------------------------------------------------------------------------
   Download Center. Every product used to render its file groups as columns in a
   wide grid, which left the right half of each card empty and put 66 rows on the
   page at once. Products are now collapsed accordion rows; opening one shows a
   table that uses the full width.
   --------------------------------------------------------------------------- */
.download-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.download-product {
    border: 1px solid var(--hz-border);
    border-radius: 16px;
    background: var(--hz-surface-raised);
    box-shadow: var(--hz-shadow-1);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.download-product.is-open {
    border-color: var(--hz-border-strong);
}

.download-product-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    padding: 0.85rem 1.15rem;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
}

/* the name is the only elastic part of the row, so it is the one that shrinks */
.download-product-head .download-product-name {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.download-product-head .download-product-name strong {
    overflow-wrap: anywhere;
}

.download-product-head:hover {
    background: var(--hz-surface-page);
}

.download-product-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #7d93a8;
}

.download-product-caret {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #7d93a8;
    transition: transform 0.2s ease;
}

.download-product.is-open .download-product-caret {
    transform: rotate(180deg);
}

.download-product-model {
    font-size: 0.85rem;
    color: #7d93a8;
}

.download-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--hz-border);
}

/* min-width so the wrapper scrolls instead of the columns compressing; without
   it a file name breaks to one character per line on a phone */
.download-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.download-table th {
    padding: 0.6rem 1.15rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7d93a8;
    white-space: nowrap;
    background: var(--hz-surface-page);
}

.download-table td {
    padding: 0.7rem 1.15rem;
    border-top: 1px solid var(--hz-border);
    vertical-align: middle;
}

.download-table tbody tr:hover {
    background: var(--hz-accent-soft);
}

.download-type-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.download-table-link {
    font-weight: 500;
}

.download-lang-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--hz-surface-sunken);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #7d93a8;
}

.download-col-date,
.download-col-size {
    white-space: nowrap;
    color: #7d93a8;
}

.download-col-size {
    text-align: right;
}

.download-filter-select {
    flex: 1;
    min-width: 12rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--hz-border);
    border-radius: 999px;
    background: var(--hz-surface-page);
    color: var(--bs-body-color);
    font-size: 0.95rem;
}

.download-filter-select:focus-visible {
    outline: none;
    border-color: var(--hz-accent);
    box-shadow: 0 0 0 3px var(--hz-accent-soft);
}

/* one more class colour, so a certificate is not the same glyph as a datasheet */
.download-icon-ce { color: #0e9f6e; }

[data-bs-theme="dark"] .download-icon-ce { color: #34d399; }

.download-product-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.download-product-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border-radius: 8px;
    overflow: hidden;
}

.download-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.download-product-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.download-product-name strong {
    font-size: 1.1rem;
    color: #1a1a2e;
}

/* Downloads panel. Groups used to be columns squeezed side by side in a narrow
   half-row, which truncated every filename. Groups now stack full width and each
   file is a real row with room for its own name. */
.download-files-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.download-file-group {
    min-width: 0;
}

.download-file-category {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #7d93a8;
    margin-bottom: .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--hz-border);
}

.download-file-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .5rem;
}

.download-file-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--hz-border);
    border-radius: 12px;
    background: var(--hz-surface-page);
    text-decoration: none;
    color: var(--bs-body-color);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    cursor: pointer;
}

.download-file-item:hover,
.download-file-item:focus-visible {
    border-color: var(--hz-accent);
    background: var(--hz-accent-soft);
    transform: translateY(-1px);
}

.download-file-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.download-icon-pdf { color: #dc2626; }
.download-icon-doc { color: #2563eb; }
.download-icon-xls { color: #16a34a; }
.download-icon-zip { color: #f59e0b; }
.download-icon-fw  { color: #7c3aed; }
.download-icon-other { color: #6b7280; }

.download-file-name {
    flex: 1;
    min-width: 0;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.download-file-size {
    flex-shrink: 0;
    font-size: .75rem;
    color: #7d93a8;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .download-files-grid {
        flex-direction: column;
    }
    .download-file-group {
        min-width: 100%;
    }
    .download-product-info {
        flex-direction: column;
        text-align: center;
    }
}

[data-bs-theme="dark"] .download-product-card {
    background: rgba(14, 24, 36, 0.9);
    border-color: rgba(132, 166, 197, 0.14);
}

[data-bs-theme="dark"] .download-product-info {
    border-bottom-color: rgba(132, 166, 197, 0.14);
}

[data-bs-theme="dark"] .download-product-image {
    background: rgba(20, 33, 47, 0.96);
}

[data-bs-theme="dark"] .download-product-name strong {
    color: #f3f7fb;
}

[data-bs-theme="dark"] .download-product-head:hover {
    background: rgba(132, 166, 197, 0.06);
}

[data-bs-theme="dark"] .download-table th {
    background: rgba(10, 17, 26, 0.6);
}

[data-bs-theme="dark"] .download-file-category {
    color: #8fb2d2;
    border-bottom-color: rgba(132, 166, 197, 0.2);
}

[data-bs-theme="dark"] .download-file-item {
    color: #abc0d3;
}

[data-bs-theme="dark"] .download-file-item:hover {
    background: rgba(44, 89, 129, 0.35);
    color: #d7e8f8;
}

[data-bs-theme="dark"] .download-file-size {
    color: #6b8299;
}

/* ---------------------------------------------------------------------------
   Navigation progress

   Routes.razor is static SSR, so moving between pages goes through Blazor's
   enhanced navigation: the URL updates on click, then the browser fetches the
   next page and patches the DOM. Until that fetch returns, the old page is
   still on screen under a new URL and nothing says the click registered. The
   per-page spinners never help, because by the time the HTML arrives its data
   is already in it. This bar is the only feedback for that gap.
   --------------------------------------------------------------------------- */
#hz-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 0;
    height: 2px;
    background: var(--hz-accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#hz-nav-progress.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    #hz-nav-progress {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   HStack landing page (/hstack).

   The one product on this site with no photograph: it is a protocol stack sold
   as source, so the visual weight has to come from typography and from the
   layer diagram rather than from a product shot. The diagram is plain markup
   rather than an SVG so it reflows on a phone, follows both themes, and can
   reveal a layer at a time through the existing .hz-reveal observer.
   --------------------------------------------------------------------------- */
.hstack-hero {
    padding: 5.5rem 0 4.5rem;
}

.hstack-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.5rem;
    align-items: center;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
}

/* The name is the hero image. Heavier and tighter than a normal h1, because
   here it is a wordmark rather than a sentence. */
.hstack-wordmark {
    font-size: clamp(3.5rem, 9vw, 6.5rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.95;
    margin: 0 0 1.1rem;
    color: #fff;
}

.hstack-hero-lead {
    max-width: 34rem;
    font-size: 1.18rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 1.6rem;
}

.hstack-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.hstack-chip {
    display: inline-block;
    padding: 0.34rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
}

.hstack-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* The registration number is the whole argument of this page, so it is treated
   as a hallmark: monospaced, oversized, on its own plate. */
.hstack-seal {
    padding: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
}

.hstack-seal-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 0.6rem;
}

.hstack-seal-number {
    display: block;
    font-family: Consolas, Menlo, monospace;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hz-accent);
}

.hstack-seal-rule {
    display: block;
    height: 1px;
    margin: 1.1rem 0;
    background: rgba(255, 255, 255, 0.2);
}

.hstack-seal-facts {
    display: grid;
    gap: 0.7rem;
    margin: 0;
}

.hstack-seal-facts div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.hstack-seal-facts dt {
    font-size: 0.86rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.66);
}

.hstack-seal-facts dd {
    margin: 0;
    font-family: Consolas, Menlo, monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

/* --- layer diagram --- */
.hstack-arch {
    max-width: 60rem;
    margin: 0 auto;
}

.hstack-arch-row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 0.95rem 1.25rem;
    border-radius: 14px;
    margin-bottom: 0.45rem;
}

.hstack-arch-name {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.008em;
}

.hstack-arch-note {
    font-size: 0.9rem;
    line-height: 1.45;
}

/* the customer's half of the boundary: dashed, and in the page's own colours */
.hstack-arch-row-yours {
    border: 1px dashed var(--hz-border-strong);
    background: transparent;
}

.hstack-arch-row-yours .hstack-arch-name {
    color: var(--bs-body-color);
}

.hstack-arch-row-yours .hstack-arch-note {
    color: #61788d;
}

/* everything Horizentis ships is solid navy, so the boundary reads at a glance */
.hstack-arch-row-core,
.hstack-arch-row-port {
    background: linear-gradient(135deg, #0e2138 0%, #1a3a5e 100%);
    color: #fff;
    border-left: 4px solid var(--hz-accent);
}

.hstack-arch-row-core .hstack-arch-note,
.hstack-arch-row-port .hstack-arch-note {
    color: rgba(255, 255, 255, 0.74);
}

/* the porting layer is ours, but the customer edits it, hence the dashed rim */
.hstack-arch-row-port {
    border: 1px dashed rgba(240, 145, 58, 0.55);
    border-left: 4px solid var(--hz-accent);
}

.hstack-arch-row-hw {
    border: 1px solid var(--hz-border);
    background: var(--hz-surface-raised);
}

.hstack-arch-row-hw .hstack-arch-name {
    color: var(--bs-body-color);
}

.hstack-arch-row-hw .hstack-arch-note {
    color: #61788d;
}

.hstack-arch-owned {
    position: relative;
    padding-left: 3.4rem;
    margin: 0.75rem 0;
}

/* bracket down the side of the licensed layers */
.hstack-arch-owned::before {
    content: "";
    position: absolute;
    left: 1.7rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 0.9rem;
    border: 1px solid var(--hz-accent);
    border-right: 0;
    border-radius: 6px 0 0 6px;
}

.hstack-arch-owned-label {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    /* CJK stays upright under vertical-rl, so the 180deg turn that makes Latin
       read bottom to top left Japanese and Chinese upside down. sideways lays
       every script on its side, so both read the same way after the turn. */
    text-orientation: sideways;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hz-accent-text);
}

.hstack-arch-bus {
    display: grid;
    gap: 4px;
    max-width: 22rem;
    margin: 1.1rem 0 0.5rem;
}

.hstack-arch-bus-line {
    height: 4px;
    border-radius: 2px;
}

.hstack-arch-bus-red {
    background: #c0392b;
}

.hstack-arch-bus-black {
    background: #55606c;
}

.hstack-arch-bus-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #61788d;
}

/* --- spec tiles --- */
/* fixed three across, not auto-fit: there are six tiles, and auto-fit put five
   on the first row and left the sixth stranded on its own */
.hstack-spec-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hstack-spec {
    padding: 1.75rem;
    border: 1px solid var(--hz-border);
    border-radius: 24px;
    background: var(--hz-surface-raised);
    background-image: linear-gradient(163deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 58%);
    box-shadow: var(--hz-shadow-1);
}

.hstack-spec-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #587998;
    margin-bottom: 0.6rem;
}

.hstack-spec-value {
    display: block;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--bs-headings-color);
    margin-bottom: 0.55rem;
}

.hstack-spec-note {
    display: block;
    font-size: 0.94rem;
    line-height: 1.5;
    color: #61788d;
}

/* --- delivery cards --- */
.hstack-delivery-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* --- steps --- */
.hstack-steps {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
}

.hstack-step {
    padding: 1.6rem 1.35rem;
    border: 1px solid var(--hz-border);
    border-radius: 24px;
    background: var(--hz-surface-raised);
    box-shadow: var(--hz-shadow-1);
}

.hstack-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    background: var(--hz-accent-soft);
    color: var(--hz-accent-text);
    font-weight: 700;
    font-size: 1rem;
}

.hstack-step h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.hstack-step p {
    font-size: 0.94rem;
    line-height: 1.55;
    color: #61788d;
    margin: 0;
}

/* --- document links --- */
.hstack-docs {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    max-width: 56rem;
    margin: 0 auto;
}

.hstack-doc {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--hz-border);
    border-radius: 24px;
    background: var(--hz-surface-raised);
    box-shadow: var(--hz-shadow-1);
    color: inherit;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.hstack-doc:hover,
.hstack-doc:focus-visible {
    transform: translateY(-4px);
    border-color: var(--hz-accent);
    box-shadow: 0 0 0 1px var(--hz-accent-soft), 0 10px 26px var(--hz-accent-soft), var(--hz-shadow-2);
}

.hstack-doc-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: var(--hz-accent-soft);
    color: var(--hz-accent-text);
    font-size: 1.5rem;
}

.hstack-doc-body {
    flex: 1 1 auto;
    min-width: 0;
}

.hstack-doc-title {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.hstack-doc-meta {
    display: block;
    font-size: 0.86rem;
    color: #61788d;
}

.hstack-doc-arrow {
    flex: 0 0 auto;
    color: var(--hz-accent-text);
    transition: transform 0.28s ease;
}

.hstack-doc:hover .hstack-doc-arrow {
    transform: translateX(4px);
}

.hstack-footnote {
    max-width: 56rem;
    margin: 1.75rem auto 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #61788d;
    text-align: center;
}

/* dark theme: the raised surfaces above carry a light-lit gradient that has to
   come off, and the muted greys need lifting to stay readable */
[data-bs-theme="dark"] .hstack-spec {
    background-image: none;
}

[data-bs-theme="dark"] .hstack-arch-row-yours .hstack-arch-note,
[data-bs-theme="dark"] .hstack-arch-row-hw .hstack-arch-note,
[data-bs-theme="dark"] .hstack-arch-bus-label,
[data-bs-theme="dark"] .hstack-spec-note,
[data-bs-theme="dark"] .hstack-step p,
[data-bs-theme="dark"] .hstack-doc-meta,
[data-bs-theme="dark"] .hstack-footnote {
    color: #93a7ba;
}

[data-bs-theme="dark"] .hstack-spec-label {
    color: #7f9db8;
}

/* stagger the licensed layers so the diagram assembles from the top down */
.hstack-arch-owned .hstack-arch-row:nth-child(2) { transition-delay: 0.04s; }
.hstack-arch-owned .hstack-arch-row:nth-child(3) { transition-delay: 0.08s; }
.hstack-arch-owned .hstack-arch-row:nth-child(4) { transition-delay: 0.12s; }
.hstack-arch-owned .hstack-arch-row:nth-child(5) { transition-delay: 0.16s; }
.hstack-arch-owned .hstack-arch-row:nth-child(6) { transition-delay: 0.2s; }
.hstack-arch-owned .hstack-arch-row:nth-child(7) { transition-delay: 0.24s; }

@media (max-width: 991.98px) {
    .hstack-hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .hstack-arch-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }

    .hstack-arch-owned {
        padding-left: 2.6rem;
    }

    .hstack-arch-owned::before {
        left: 1.3rem;
        width: 0.7rem;
    }

    .hstack-arch-owned-label {
        width: 1.2rem;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
    }

    .hstack-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .hstack-spec-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Home page HStack card. The second grid cell of the story card would normally
   hold a photograph; a protocol stack has none, so it holds a plate carrying
   the name and the registration number instead. */
.hstack-home-plate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-height: 280px;
    padding: 2rem;
    text-align: center;
    background: var(--public-surface-dark);
    color: #fff;
    transition: filter 0.28s ease;
}

.hstack-home-plate:hover,
.hstack-home-plate:focus-visible {
    filter: brightness(1.12);
}

.hstack-home-plate-mark {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
}

.hstack-home-plate-reg {
    font-family: Consolas, Menlo, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hz-accent);
}

.hstack-home-plate-meta {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
}

/* Banner above the product grid. HStack is not a boxed device, so it stays out
   of the grid itself, but somebody browsing products must not miss it. */
.hstack-products-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.35rem 1.6rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--hz-border);
    border-left: 4px solid var(--hz-accent);
    border-radius: 24px;
    background: var(--hz-surface-raised);
    box-shadow: var(--hz-shadow-1);
    color: inherit;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.hstack-products-banner:hover,
.hstack-products-banner:focus-visible {
    transform: translateY(-3px);
    border-color: var(--hz-accent);
    box-shadow: 0 0 0 1px var(--hz-accent-soft), 0 10px 26px var(--hz-accent-soft), var(--hz-shadow-2);
}

.hstack-products-banner-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: var(--hz-accent-soft);
    color: var(--hz-accent-text);
    font-size: 1.5rem;
}

.hstack-products-banner-body {
    flex: 1 1 auto;
    min-width: 0;
}

.hstack-products-banner-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #587998;
    margin-bottom: 0.2rem;
}

.hstack-products-banner-title {
    display: block;
    font-weight: 700;
    font-size: 1.08rem;
    margin-bottom: 0.15rem;
}

.hstack-products-banner-text {
    display: block;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #61788d;
}

.hstack-products-banner-arrow {
    flex: 0 0 auto;
    color: var(--hz-accent-text);
    transition: transform 0.28s ease;
}

.hstack-products-banner:hover .hstack-products-banner-arrow {
    transform: translateX(4px);
}

[data-bs-theme="dark"] .hstack-products-banner-text {
    color: #93a7ba;
}

[data-bs-theme="dark"] .hstack-products-banner-kicker {
    color: #7f9db8;
}

@media (max-width: 767.98px) {
    .hstack-home-plate {
        min-height: 200px;
    }

    .hstack-products-banner {
        flex-wrap: wrap;
    }
}