/* Hudhud public website - hudhudye.com
 *
 * One family with the banners: the identity is docs/BANNER_IDENTITY.md (approved by the owner
 * 27 Oct 2026) - Tajawal, the soft green gradient, two-tone headings (#1F4D0A then #6DB52C),
 * white pills with a green dot, red and yellow only as small accents. Read it before changing
 * colours here.
 *
 * Loaded after the 6amMart template's main.css, which still styles the inner pages (about,
 * policies, the store and driver sign-up forms). Everything new is scoped under .hh-* so it
 * cannot reach into those pages; the few things main.css does to every <header> and <p> are
 * undone on the .hh-* elements below.
 */

:root {
    --hh-green: #7EC638;
    --hh-green-500: #6DB52C;
    --hh-green-600: #4E9A1F;
    /* Buttons. White text on the brand green (#7EC638) is 2:1 and unreadable in sunlight;
       on this it passes WCAG AA. */
    --hh-green-700: #3A7F16;
    --hh-green-800: #2F6A11;
    --hh-ink: #1F4D0A;
    --hh-text: #3B4A33;
    --hh-muted: #5F6E57;
    --hh-line: #E2EFD5;
    --hh-line-strong: #D5ECBD;
    --hh-soft: #F6FBF1;
    --hh-mint: #EEF9E2;
    --hh-footer: #0F2707;
    --hh-red: #E8453C;
    --hh-yellow: #FFC93C;
    --hh-hero: linear-gradient(115deg, #F8FDF2 0%, #EEF9E2 48%, #DDF2C6 100%);
    --hh-radius-lg: 32px;
    --hh-radius: 22px;
    --hh-shadow-sm: 0 1px 2px rgba(15, 39, 7, .06), 0 6px 16px -6px rgba(15, 39, 7, .08);
    --hh-shadow: 0 2px 6px rgba(15, 39, 7, .05), 0 24px 48px -18px rgba(15, 39, 7, .22);
    --hh-font: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hh-header-h: 76px;

    /* The template's own accent for the inner pages, which shipped as a neon #00e77b. The
       panel's landing colour setting (an inline <style> in the layout) still wins when set. */
    --base-1: #5FAE2A;
    --base-rgb: 95, 174, 42;
    --base-2: #7EC638;
    --base-rgb-2: 126, 198, 56;
}

body {
    font-family: var(--hh-font) !important;
    color: var(--hh-text);
    background: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none !important;
}

.hh-wrap {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
}

.hh-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hh-skip {
    position: absolute;
    inset-inline-start: 16px;
    top: -60px;
    z-index: 2000;
    background: var(--hh-ink);
    color: #fff !important;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
}

.hh-skip:focus {
    top: 12px;
}

:where(.hh-header, .hh-main, .hh-footer) :focus-visible {
    outline: 3px solid var(--hh-green);
    outline-offset: 3px;
    border-radius: 10px;
}

:where(.hh-main, .hh-footer) p {
    margin: 0;
}

:where(.hh-header, .hh-main, .hh-footer) :is(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
}

:where(.hh-header, .hh-main, .hh-footer) :is(h1, h2, h3, h4) {
    font-family: var(--hh-font);
    letter-spacing: 0;
}

/* ---------- Buttons ---------- */

.hh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    font: 700 16px/1 var(--hh-font);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}

.hh-btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.hh-btn--primary {
    background: var(--hh-green-700);
    color: #fff !important;
    box-shadow: 0 8px 20px -10px rgba(58, 127, 22, .8);
}

.hh-btn--primary:hover {
    background: var(--hh-green-800);
    transform: translateY(-1px);
}

.hh-btn--light {
    background: #fff;
    color: var(--hh-ink) !important;
}

.hh-btn--light:hover {
    background: var(--hh-mint);
}

.hh-btn--ghost {
    background: transparent;
    color: var(--hh-ink) !important;
    box-shadow: inset 0 0 0 1.5px var(--hh-line-strong);
}

.hh-btn--ghost:hover {
    background: #fff;
}

.hh-btn--sm {
    min-height: 40px;
    padding: 0 16px;
    font-size: 15px;
}

/* ---------- Header ---------- */

/* main.js adds .active to every <header> after 300px of scroll, and main.css animates it and
   lays a tinted ::after over it. Both are the template's old header; this one only firms up. */
.hh-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s, box-shadow .25s, background-color .25s;
}

.hh-header.active {
    animation: none;
    background: rgba(255, 255, 255, .94);
    border-bottom-color: var(--hh-line);
    box-shadow: 0 10px 30px -24px rgba(15, 39, 7, .55);
}

.hh-header.active::after {
    content: none;
}

.hh-header__bar {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--hh-header-h);
}

.hh-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.hh-brand img {
    width: 40px;
    height: auto;
    display: block;
}

.hh-brand span {
    font: 800 26px/1 var(--hh-font);
    color: #5FAE2A;
}

.hh-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline: auto;
}

.hh-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--hh-text);
    font-weight: 500;
    font-size: 16px;
    transition: background-color .2s, color .2s;
}

.hh-nav a:hover {
    background: var(--hh-soft);
    color: var(--hh-ink);
}

.hh-nav a[aria-current="page"] {
    color: var(--hh-green-700);
    font-weight: 700;
}

.hh-nav__extra {
    display: none;
}

.hh-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.hh-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--hh-text) !important;
    font-weight: 500;
    font-size: 15px;
}

.hh-lang:hover {
    background: var(--hh-soft);
}

.hh-lang svg {
    width: 18px;
    height: 18px;
}

.hh-burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: var(--hh-soft);
    color: var(--hh-ink);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hh-burger svg {
    width: 22px;
    height: 22px;
}

.hh-burger .hh-icon-close,
.hh-header.is-open .hh-burger .hh-icon-menu {
    display: none;
}

.hh-header.is-open .hh-burger .hh-icon-close {
    display: block;
}

/* ---------- Shared section parts ---------- */

.hh-section {
    padding: 104px 0;
    scroll-margin-top: var(--hh-header-h);
}

.hh-section--soft {
    background: var(--hh-soft);
}

.hh-head {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
}

.hh-head--start {
    margin: 0;
    text-align: start;
}

.hh-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--hh-green-600);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: var(--hh-shadow-sm);
}

.hh-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hh-green);
    flex: none;
}

.hh-section--soft .hh-pill,
.hh-section .hh-pill {
    box-shadow: inset 0 0 0 1px var(--hh-line-strong);
}

.hh-title {
    margin: 16px 0 14px !important;
    color: var(--hh-ink) !important;
    font-weight: 800 !important;
    font-size: clamp(30px, 3.6vw, 44px) !important;
    line-height: 1.25 !important;
}

.hh-title .hh-accent,
.hh-hero__title .hh-accent {
    color: var(--hh-green-500);
}

.hh-sub {
    color: var(--hh-muted);
    font-size: 18px;
    line-height: 1.8;
}

/* ---------- Hero ---------- */

.hh-hero {
    position: relative;
    overflow: hidden;
    background: var(--hh-hero);
    padding: 72px 0 96px;
}

/* The banners' decoration: a pale green circle low on the start side, and a scatter of dots. */
.hh-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(126, 198, 56, .12);
    inset-inline-start: -180px;
    bottom: -260px;
}

.hh-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(159, 216, 102, .55) 2px, transparent 2.5px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 45% 55% at 18% 30%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 45% 55% at 18% 30%, #000 0%, transparent 70%);
    pointer-events: none;
}

[dir="rtl"] .hh-hero::after {
    -webkit-mask-image: radial-gradient(ellipse 45% 55% at 82% 30%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 45% 55% at 82% 30%, #000 0%, transparent 70%);
}

.hh-hero .hh-wrap {
    position: relative;
    z-index: 1;
}

.hh-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: 56px;
}

.hh-hero__title {
    margin: 20px 0 18px !important;
    color: var(--hh-ink) !important;
    font-weight: 800 !important;
    font-size: clamp(40px, 5.4vw, 68px) !important;
    line-height: 1.12 !important;
}

.hh-hero__lead {
    max-width: 34em;
    color: var(--hh-text);
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.8;
}

.hh-stores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.hh-hero .hh-stores {
    margin-top: 32px;
}

.hh-store {
    display: inline-block;
    border-radius: 10px;
    transition: transform .2s, box-shadow .2s;
}

.hh-store:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5);
}

.hh-store img {
    display: block;
    height: 50px;
    width: auto;
}

.hh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px !important;
}

.hh-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--hh-line-strong);
    color: #2C6B12;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}

.hh-chip svg {
    width: 16px;
    height: 16px;
    color: var(--hh-green-600);
    flex: none;
}

.hh-hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

/* The white glow the banners put behind their illustration. */
.hh-hero__visual::before {
    content: "";
    position: absolute;
    width: 128%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
}

.hh-phone {
    position: relative;
    width: min(316px, 78vw);
    padding: 11px;
    border-radius: 50px;
    background: #10190C;
    box-shadow: inset 0 0 0 2px #2E3B28, 0 50px 90px -40px rgba(15, 39, 7, .55), 0 24px 40px -24px rgba(15, 39, 7, .35);
}

.hh-phone__screen {
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    background: #F4F5F7;
}

.hh-phone__island {
    display: block;
    width: 96px;
    height: 26px;
    margin: 10px auto 4px;
    border-radius: 20px;
    background: #10190C;
}

.hh-phone__screen img {
    display: block;
    width: 100%;
    height: auto;
}

.hh-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 214px;
    padding: 12px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--hh-shadow);
}

.hh-float__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--hh-mint);
    color: var(--hh-green-600);
    flex: none;
}

.hh-float__icon svg {
    width: 22px;
    height: 22px;
}

.hh-float strong {
    display: block;
    color: var(--hh-ink);
    font-size: 15px;
    line-height: 1.3;
}

.hh-float small {
    display: block;
    color: var(--hh-muted);
    font-size: 13px;
    line-height: 1.4;
}

.hh-float__bar {
    display: block;
    height: 5px;
    margin-top: 7px;
    border-radius: 5px;
    background: var(--hh-mint);
    overflow: hidden;
}

.hh-float__bar::after {
    content: "";
    display: block;
    width: 64%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--hh-green-500), var(--hh-green));
    animation: hh-progress 3.2s ease-in-out infinite alternate;
}

[dir="rtl"] .hh-float__bar::after {
    margin-inline-start: 0;
}

.hh-float--route {
    top: 17%;
    inset-inline-end: -6%;
    animation: hh-bob 6s ease-in-out infinite;
}

.hh-float--done {
    bottom: 13%;
    inset-inline-start: -4%;
    animation: hh-bob 6s ease-in-out 1.5s infinite;
}

.hh-float--done .hh-float__icon {
    background: var(--hh-green-700);
    color: #fff;
}

@keyframes hh-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes hh-progress {
    from { width: 38%; }
    to { width: 82%; }
}

/* ---------- Services ---------- */

.hh-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.hh-service {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 248px;
    padding: 26px 26px 20px;
    overflow: hidden;
    border-radius: var(--hh-radius);
    background: #fff;
    border: 1px solid var(--hh-line);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.hh-service:hover {
    border-color: var(--hh-line-strong);
    box-shadow: var(--hh-shadow);
    transform: translateY(-3px);
}

.hh-service::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: var(--hh-soft);
    inset-inline-end: -40px;
    bottom: -50px;
    transition: background-color .25s;
}

.hh-service:hover::after {
    background: var(--hh-mint);
}

.hh-service h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 6px !important;
    color: var(--hh-ink) !important;
    font-weight: 800 !important;
    font-size: 23px !important;
    line-height: 1.3 !important;
}

.hh-service p {
    position: relative;
    z-index: 1;
    color: var(--hh-muted);
    font-size: 16px;
    line-height: 1.6;
}

.hh-service img {
    position: relative;
    z-index: 1;
    width: 118px;
    height: 118px;
    margin-top: auto;
    align-self: flex-end;
    object-fit: contain;
    transition: transform .3s;
}

.hh-service:hover img {
    transform: scale(1.06) rotate(-2deg);
}

/* ---------- How it works ---------- */

.hh-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    counter-reset: hh-step;
}

/* The dotted route between the steps, drawn like the parcel icon's path. */
.hh-steps::before {
    content: "";
    position: absolute;
    top: 34px;
    inset-inline: 16.6%;
    border-top: 3px dotted #B9E08F;
}

.hh-step {
    position: relative;
    text-align: center;
    padding: 0 12px;
}

.hh-step__num {
    position: relative;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    border-radius: 24px;
    background: #fff;
    color: var(--hh-green-700);
    box-shadow: var(--hh-shadow-sm), inset 0 0 0 1px var(--hh-line-strong);
}

.hh-step__num svg {
    width: 30px;
    height: 30px;
}

.hh-step__num::after {
    counter-increment: hh-step;
    content: counter(hh-step);
    position: absolute;
    top: -8px;
    inset-inline-end: -8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hh-green-700);
    color: #fff;
    font: 800 14px/1 var(--hh-font);
    box-shadow: 0 0 0 4px #fff;
}

.hh-step h3 {
    margin: 0 0 8px !important;
    color: var(--hh-ink) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
}

.hh-step p {
    max-width: 22em;
    margin-inline: auto !important;
    color: var(--hh-muted);
    font-size: 16px;
    line-height: 1.75;
}

/* ---------- Why Hudhud ---------- */

.hh-why {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 64px;
}

.hh-why .hh-btn {
    margin-top: 30px;
}

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

.hh-feature {
    padding: 26px;
    border-radius: var(--hh-radius);
    background: #fff;
    border: 1px solid var(--hh-line);
    box-shadow: var(--hh-shadow-sm);
}

.hh-feature__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 20px;
    background: var(--hh-soft);
    box-shadow: inset 0 0 0 1px var(--hh-line);
}

.hh-feature__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.hh-feature h3 {
    margin: 0 0 6px !important;
    color: var(--hh-ink) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
}

.hh-feature p {
    color: var(--hh-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* ---------- Partners (stores and drivers) ---------- */

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

.hh-partner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 40px;
    overflow: hidden;
    border-radius: var(--hh-radius-lg);
    background: var(--hh-hero);
    border: 1px solid var(--hh-line-strong);
}

.hh-partner--dark {
    background: linear-gradient(140deg, #2B6510 0%, var(--hh-ink) 70%);
    border-color: transparent;
    color: rgba(255, 255, 255, .82);
}

.hh-partner__art {
    position: absolute;
    width: 150px;
    height: 150px;
    inset-inline-end: 24px;
    top: 24px;
    object-fit: contain;
    opacity: .95;
}

.hh-partner__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 20px;
    background: #fff;
    color: var(--hh-green-700);
    box-shadow: var(--hh-shadow-sm);
}

.hh-partner--dark .hh-partner__icon {
    background: rgba(255, 255, 255, .12);
    color: #C8F09B;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.hh-partner__icon svg {
    width: 30px;
    height: 30px;
}

.hh-partner h3 {
    max-width: 70%;
    margin: 10px 0 0 !important;
    color: var(--hh-ink) !important;
    font-weight: 800 !important;
    font-size: clamp(24px, 2.4vw, 30px) !important;
    line-height: 1.3 !important;
}

.hh-partner--dark h3 {
    color: #fff !important;
}

.hh-partner > p {
    max-width: 30em;
    font-size: 17px;
    line-height: 1.8;
    color: var(--hh-text);
}

.hh-partner--dark > p {
    color: rgba(255, 255, 255, .8);
}

.hh-partner__points {
    display: grid;
    gap: 10px;
    margin: 6px 0 10px !important;
}

.hh-partner__points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--hh-ink);
}

.hh-partner--dark .hh-partner__points li {
    color: #fff;
}

.hh-partner__points svg {
    width: 20px;
    height: 20px;
    color: var(--hh-green-600);
    flex: none;
}

.hh-partner--dark .hh-partner__points svg {
    color: #A9E070;
}

.hh-partner__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: auto;
    padding-top: 10px;
}

.hh-partner__apps {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hh-partner__apps .hh-store img {
    height: 40px;
}

.hh-partner--dark .hh-btn--primary {
    background: #fff;
    color: var(--hh-ink) !important;
    box-shadow: none;
}

.hh-partner--dark .hh-btn--primary:hover {
    background: var(--hh-mint);
}

/* ---------- Download ---------- */

.hh-download {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
    padding: 64px 64px 0;
    overflow: hidden;
    border-radius: var(--hh-radius-lg);
    background: radial-gradient(120% 140% at 85% 0%, #4E9A1F 0%, #2B6510 45%, var(--hh-ink) 100%);
    color: rgba(255, 255, 255, .82);
    isolation: isolate;
}

.hh-download::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .14) 2px, transparent 2.5px);
    background-size: 30px 30px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
    mask-image: linear-gradient(180deg, #000, transparent 75%);
}

.hh-download__body {
    padding-bottom: 64px;
}

.hh-download .hh-pill {
    background: rgba(255, 255, 255, .12);
    color: #DDF5C3;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.hh-download .hh-title {
    color: #fff !important;
}

.hh-download .hh-sub {
    color: rgba(255, 255, 255, .8);
    max-width: 30em;
}

.hh-download__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}

.hh-qr {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px 10px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

[dir="rtl"] .hh-qr {
    padding: 10px 10px 10px 18px;
}

.hh-qr img {
    width: 92px;
    height: 92px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
}

.hh-qr span {
    max-width: 10em;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
}

.hh-download__phone {
    align-self: end;
    width: 300px;
    height: 360px;
    overflow: hidden;
}

.hh-download__phone .hh-phone {
    width: 300px;
    border-radius: 48px 48px 0 0;
    padding-bottom: 0;
    box-shadow: inset 0 0 0 2px #2E3B28, 0 -10px 60px -20px rgba(0, 0, 0, .45);
}

.hh-download__phone .hh-phone__screen {
    border-radius: 38px 38px 0 0;
}

/* ---------- Inner page header + contact page ---------- */

.hh-page-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 120px;
    background: var(--hh-hero);
    text-align: center;
}

.hh-page-hero .hh-sub {
    max-width: 36em;
    margin-inline: auto !important;
}

.hh-contact {
    position: relative;
    margin-top: -72px;
    padding-bottom: 104px;
}

.hh-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 24px;
}

.hh-contact__cards {
    display: grid;
    gap: 14px;
}

.hh-contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--hh-radius);
    background: #fff;
    border: 1px solid var(--hh-line);
    box-shadow: var(--hh-shadow-sm);
    color: var(--hh-text) !important;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

a.hh-contact-card:hover {
    border-color: var(--hh-line-strong);
    box-shadow: var(--hh-shadow);
    transform: translateY(-2px);
}

.hh-contact-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--hh-mint);
    color: var(--hh-green-700);
    flex: none;
}

.hh-contact-card__icon svg {
    width: 24px;
    height: 24px;
}

.hh-contact-card strong {
    display: block;
    color: var(--hh-ink);
    font-size: 17px;
    line-height: 1.4;
}

.hh-contact-card small {
    display: block;
    margin-top: 2px;
    color: var(--hh-muted);
    font-size: 15px;
    line-height: 1.6;
}

.hh-contact-card .hh-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.hh-contact-card--wa {
    background: #E9FBEF;
    border-color: #BFEFCF;
}

.hh-contact-card--wa .hh-contact-card__icon {
    background: #25D366;
    color: #fff;
}

.hh-form {
    display: grid;
    gap: 16px;
    padding: 32px;
    border-radius: var(--hh-radius-lg);
    background: #fff;
    border: 1px solid var(--hh-line);
    box-shadow: var(--hh-shadow);
}

.hh-form h2 {
    margin: 0 0 4px !important;
    color: var(--hh-ink) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    line-height: 1.35 !important;
}

.hh-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hh-field {
    display: grid;
    gap: 6px;
    margin: 0;
}

.hh-field > span {
    color: var(--hh-ink);
    font-weight: 700;
    font-size: 14px;
}

.hh-field input,
.hh-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--hh-line-strong);
    background: var(--hh-soft);
    color: var(--hh-ink);
    font: 500 16px/1.5 var(--hh-font);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.hh-field textarea {
    resize: vertical;
    min-height: 130px;
}

.hh-field input:focus,
.hh-field textarea:focus {
    border-color: var(--hh-green-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(126, 198, 56, .2);
}

.hh-captcha {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.hh-captcha .hh-field {
    flex: 1;
}

.hh-captcha img {
    height: 50px;
    width: auto;
    border-radius: 12px;
    border: 1px solid var(--hh-line);
}

.hh-form .hh-btn {
    justify-self: start;
    min-width: 180px;
}

/* ---------- Footer ---------- */

.hh-footer {
    background: var(--hh-footer);
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
}

.hh-footer a {
    color: rgba(255, 255, 255, .7);
    transition: color .2s;
}

.hh-footer a:hover {
    color: #fff;
}

.hh-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px 48px;
    padding: 44px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.hh-news h2 {
    margin: 0 0 6px !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    line-height: 1.35 !important;
}

.hh-news p {
    color: rgba(255, 255, 255, .65);
    font-size: 15px;
    line-height: 1.7;
}

.hh-news form {
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.hh-news input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 500 16px var(--hh-font);
    outline: none;
}

.hh-news input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.hh-news form:focus-within {
    box-shadow: inset 0 0 0 2px var(--hh-green);
}

.hh-news .hh-btn {
    min-height: 44px;
    background: var(--hh-green);
    color: var(--hh-footer) !important;
}

.hh-news .hh-btn:hover {
    background: #8FD34A;
}

.hh-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding: 56px 0 48px;
}

.hh-footer .hh-brand span {
    color: #fff;
}

.hh-footer .hh-brand img {
    filter: brightness(0) invert(1);
}

.hh-footer__about {
    max-width: 26em;
    margin-top: 18px !important;
    line-height: 1.8;
    color: rgba(255, 255, 255, .62);
}

.hh-footer .hh-stores {
    margin-top: 22px;
}

.hh-footer .hh-store img {
    height: 42px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    border-radius: 8px;
}

.hh-social {
    display: flex;
    gap: 8px;
    margin-top: 22px !important;
}

.hh-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
}

.hh-social a:hover {
    background: rgba(255, 255, 255, .16);
}

.hh-social img {
    width: 18px;
    height: 18px;
}

.hh-footer h3 {
    margin: 4px 0 18px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

.hh-footer__links {
    display: grid;
    gap: 12px;
}

.hh-footer__contact li a,
.hh-footer__contact li span {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.55;
}

.hh-footer__contact svg {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--hh-green);
    flex: none;
}

.hh-footer__contact .hh-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.hh-wa {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #25D366;
    color: #06290F !important;
    font-weight: 700;
}

.hh-wa:hover {
    background: #3BE07A;
}

.hh-wa svg {
    color: #06290F !important;
    margin: 0 !important;
}

.hh-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 22px 0 28px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
    color: rgba(255, 255, 255, .5);
}

/* ---------- Reveal on scroll (only once JS has said it will reveal) ---------- */

.hh-js .hh-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--hh-delay, 0s);
}

.hh-js .hh-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .hh-nav a {
        padding: 0 10px;
    }

    .hh-float--route {
        inset-inline-end: -2%;
    }

    .hh-float--done {
        inset-inline-start: -2%;
    }
}

@media (max-width: 991px) {
    :root {
        --hh-header-h: 68px;
    }

    .hh-burger {
        display: inline-flex;
    }

    .hh-actions .hh-lang {
        display: none;
    }

    .hh-nav {
        position: absolute;
        top: var(--hh-header-h);
        inset-inline: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 10px 16px 18px;
        background: #fff;
        border-bottom: 1px solid var(--hh-line);
        box-shadow: 0 24px 40px -28px rgba(15, 39, 7, .5);
        max-height: calc(100vh - var(--hh-header-h));
        overflow-y: auto;
    }

    .hh-header.is-open .hh-nav {
        display: flex;
    }

    .hh-header.is-open {
        background: #fff;
    }

    .hh-nav a {
        min-height: 48px;
        padding: 0 14px;
        border-radius: 14px;
        font-size: 17px;
    }

    .hh-nav__extra {
        display: flex;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--hh-line);
    }

    .hh-section {
        padding: 80px 0;
    }

    .hh-hero {
        padding: 48px 0 72px;
    }

    .hh-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        text-align: center;
    }

    .hh-hero__lead {
        margin-inline: auto !important;
    }

    .hh-hero .hh-stores,
    .hh-chips {
        justify-content: center;
    }

    .hh-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-why {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .hh-head--start {
        text-align: center;
        margin-inline: auto;
        max-width: 640px;
    }

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

    .hh-download {
        grid-template-columns: minmax(0, 1fr);
        padding: 48px 32px 0;
        text-align: center;
    }

    .hh-download .hh-sub {
        margin-inline: auto !important;
    }

    .hh-download__row {
        justify-content: center;
    }

    .hh-download__phone {
        justify-self: center;
        height: 260px;
    }

    .hh-download__body {
        padding-bottom: 0;
    }

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

    .hh-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hh-footer__brand {
        grid-column: 1 / -1;
    }

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

@media (max-width: 767px) {
    .hh-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .hh-steps::before {
        content: none;
    }

    .hh-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-footer__contact-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .hh-wrap {
        padding-inline: 16px;
    }

    .hh-header__bar {
        gap: 10px;
    }

    .hh-brand img {
        width: 34px;
    }

    .hh-brand span {
        font-size: 23px;
    }

    .hh-actions .hh-btn {
        min-height: 40px;
        padding: 0 14px;
        font-size: 14px;
    }

    .hh-section {
        padding: 64px 0;
    }

    .hh-head {
        margin-bottom: 36px;
    }

    .hh-sub {
        font-size: 16px;
    }

    .hh-store img {
        height: 44px;
    }

    .hh-chip {
        font-size: 13px;
        padding: 7px 12px;
    }

    .hh-float {
        min-width: 0;
        padding: 10px 12px;
        gap: 10px;
    }

    .hh-float__icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .hh-float strong {
        font-size: 13px;
    }

    .hh-float small {
        font-size: 12px;
    }

    .hh-float--route {
        inset-inline-end: -2px;
        top: 12%;
    }

    .hh-float--done {
        inset-inline-start: -2px;
        bottom: 10%;
    }

    .hh-services {
        gap: 12px;
    }

    .hh-service {
        min-height: 200px;
        padding: 18px 16px 14px;
        border-radius: 20px;
    }

    .hh-service h3 {
        font-size: 18px !important;
    }

    .hh-service p {
        font-size: 14px;
    }

    .hh-service img {
        width: 84px;
        height: 84px;
    }

    .hh-service::after {
        width: 120px;
        height: 120px;
    }

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

    .hh-partner {
        padding: 28px 22px;
        border-radius: 26px;
    }

    .hh-partner h3 {
        max-width: none;
    }

    .hh-partner__art {
        width: 96px;
        height: 96px;
        top: 18px;
        inset-inline-end: 14px;
    }

    .hh-partner__foot .hh-btn {
        width: 100%;
    }

    .hh-download {
        padding: 40px 20px 0;
        border-radius: 26px;
    }

    .hh-qr {
        display: none;
    }

    .hh-download__phone,
    .hh-download__phone .hh-phone {
        width: 250px;
    }

    .hh-download__phone {
        height: 220px;
    }

    .hh-footer__grid {
        gap: 32px 20px;
    }

    .hh-page-hero {
        padding: 44px 0 100px;
    }

    .hh-contact {
        padding-bottom: 64px;
    }

    .hh-form {
        padding: 22px 18px;
        border-radius: 26px;
    }

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

    .hh-form .hh-btn {
        justify-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hh-float,
    .hh-float__bar::after {
        animation: none !important;
    }

    .hh-js .hh-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hh-service,
    .hh-service img,
    .hh-btn,
    .hh-store {
        transition: none;
    }
}