/* ============================================================================
   avira.css - Avira Lifecare Global design system

   The palette is taken directly from the company logo: the navy of "AVIRA",
   the two greens of "LIFECARE" and the leaf, the orange of the human figure
   and the yellow of the sun. Nothing here is invented - the site should look
   like the logo grew into a website.
   ========================================================================= */

:root {
    /* --- Brand, straight from the logo --- */
    --av-navy:        #1B3E8C;
    --av-navy-dark:   #142E68;
    --av-navy-light:  #2C55B4;
    --av-green:       #0B7A3B;
    --av-green-dark:  #075A2B;
    --av-leaf:        #7AC143;   /* bright leaf green */
    --av-orange:      #F0821E;   /* the human figure  */
    --av-sun:         #FBA71B;   /* the sun           */
    --av-sky:         #1B75BC;   /* the globe's ocean */

    /* --- Neutrals --- */
    --av-ink:         #10182B;
    --av-body:        #4A5568;
    --av-muted:       #8A94A6;
    --av-line:        #E4E9F2;
    --av-surface:     #FFFFFF;
    --av-canvas:      #F6F8FC;
    --av-canvas-2:    #EEF3FA;

    /* --- Signature gradients --- */
    --av-grad-brand:  linear-gradient(135deg, var(--av-navy) 0%, var(--av-sky) 55%, var(--av-green) 100%);
    --av-grad-warm:   linear-gradient(135deg, var(--av-orange) 0%, var(--av-sun) 100%);
    --av-grad-leaf:   linear-gradient(135deg, var(--av-green) 0%, var(--av-leaf) 100%);
    --av-grad-hero:   linear-gradient(120deg, #0E2A63 0%, #1B3E8C 40%, #10693A 100%);

    /* --- Depth --- */
    --av-shadow-sm:   0 2px 8px rgba(16, 24, 43, .06);
    --av-shadow:      0 8px 30px rgba(16, 24, 43, .09);
    --av-shadow-lg:   0 20px 60px rgba(16, 24, 43, .14);
    --av-shadow-brand:0 14px 40px rgba(27, 62, 140, .28);

    --av-radius:      14px;
    --av-radius-lg:   24px;
    --av-radius-pill: 999px;

    --av-header-h:    84px;
}

/* ---------- Base ------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--av-body);
    background: var(--av-surface);
    line-height: 1.7;
    overflow-x: hidden;
}

/* Indic scripts need a slightly taller line to breathe. */
body[lang="hi"], body[lang="gu"] { line-height: 1.85; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    color: var(--av-ink);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.02em;
}

a { color: var(--av-navy); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--av-green); }

.av-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }

/* ---------- Type helpers ------------------------------------------------ */
.av-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--av-green);
    background: rgba(122, 193, 67, .12);
    border-radius: var(--av-radius-pill);
    padding: 7px 16px;
    margin-bottom: 18px;
}
.av-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--av-leaf); }

.av-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 16px; }
.av-lead  { font-size: 1.075rem; color: var(--av-body); max-width: 62ch; }

.av-gradient-text {
    background: var(--av-grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.av-section { padding: clamp(64px, 8vw, 108px) 0; position: relative; }
.av-section--tint { background: var(--av-canvas); }
.av-section--ink  { background: var(--av-ink); color: rgba(255,255,255,.78); }
.av-section--ink h2, .av-section--ink h3 { color: #fff; }

.av-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.av-section-head .av-lead { margin-inline: auto; }

/* ---------- Buttons ----------------------------------------------------- */
.av-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-weight: 700; font-size: .96rem;
    padding: 14px 30px;
    border-radius: var(--av-radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .22s ease, color .22s ease;
    position: relative; overflow: hidden;
    text-align: center;
}
.av-btn:disabled, .av-btn.is-busy { cursor: not-allowed; opacity: .72; transform: none !important; }

.av-btn--primary { background: var(--av-grad-brand); color: #fff; box-shadow: var(--av-shadow-brand); }
.av-btn--primary:hover:not(:disabled) { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 46px rgba(27,62,140,.36); }

.av-btn--warm { background: var(--av-grad-warm); color: #fff; box-shadow: 0 12px 34px rgba(240,130,30,.32); }
.av-btn--warm:hover:not(:disabled) { color: #fff; transform: translateY(-3px); }

.av-btn--leaf { background: var(--av-grad-leaf); color: #fff; box-shadow: 0 12px 34px rgba(11,122,59,.28); }
.av-btn--leaf:hover:not(:disabled) { color: #fff; transform: translateY(-3px); }

.av-btn--ghost { background: transparent; color: var(--av-navy); border-color: var(--av-line); }
.av-btn--ghost:hover:not(:disabled) { border-color: var(--av-navy); background: rgba(27,62,140,.05); color: var(--av-navy); }

.av-btn--on-dark { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(8px); }
.av-btn--on-dark:hover:not(:disabled) { background: #fff; color: var(--av-navy); }

.av-btn--block { width: 100%; }
.av-btn--lg { padding: 17px 38px; font-size: 1.02rem; }

/* The spinner that appears while a submit button says "Please wait…" */
.av-btn__spinner {
    width: 17px; height: 17px; flex: none;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: av-spin .7s linear infinite;
}
.av-btn--ghost .av-btn__spinner { border-color: rgba(27,62,140,.3); border-top-color: var(--av-navy); }
@keyframes av-spin { to { transform: rotate(360deg); } }

/* ---------- Header ------------------------------------------------------ */
.av-header {
    position: fixed; inset: 0 0 auto 0; z-index: 1000;
    height: var(--av-header-h);
    display: flex; align-items: center;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: height .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.av-header.is-stuck {
    height: 68px;
    background: rgba(255,255,255,.96);
    border-bottom-color: var(--av-line);
    box-shadow: var(--av-shadow-sm);
}
.av-header__inner { display: flex; align-items: center; gap: 28px; width: 100%; }

.av-logo { display: flex; align-items: center; flex: none; }
.av-logo img { height: 54px; width: auto; transition: height .3s ease; }
.av-header.is-stuck .av-logo img { height: 44px; }

.av-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.av-nav a {
    position: relative;
    padding: 10px 15px;
    font-weight: 600; font-size: .94rem;
    color: var(--av-ink);
    border-radius: 10px;
}
.av-nav a::after {
    content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px;
    height: 2.5px; border-radius: 2px;
    background: var(--av-grad-leaf);
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.av-nav a:hover::after, .av-nav a.is-active::after { transform: scaleX(1); }
.av-nav a.is-active { color: var(--av-green); }

.av-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Language switcher */
.av-lang { position: relative; }
.av-lang__btn {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: var(--av-radius-pill);
    border: 1.5px solid var(--av-line); background: #fff;
    font-weight: 700; font-size: .86rem; color: var(--av-ink); cursor: pointer;
    transition: border-color .2s ease;
}
.av-lang__btn:hover { border-color: var(--av-navy); }
.av-lang__menu {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
    min-width: 172px; padding: 8px;
    background: #fff; border: 1px solid var(--av-line);
    border-radius: var(--av-radius); box-shadow: var(--av-shadow);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 20;
}
.av-lang.is-open .av-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.av-lang__menu a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 13px; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--av-ink); }
.av-lang__menu a:hover { background: var(--av-canvas); }
.av-lang__menu a.is-active { background: rgba(122,193,67,.14); color: var(--av-green); }
.av-lang__menu span { color: var(--av-muted); font-weight: 500; }

/* Mobile nav */
.av-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.av-burger span { display: block; height: 2.5px; border-radius: 2px; background: var(--av-ink); margin: 5px 0; transition: transform .3s ease, opacity .3s ease; }
.av-burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.av-burger.is-open span:nth-child(2) { opacity: 0; }
.av-burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero -------------------------------------------------------- */
.av-hero {
    position: relative;
    min-height: min(100svh, 860px);
    display: flex; align-items: center;
    padding-top: var(--av-header-h);
    background: var(--av-grad-hero);
    overflow: hidden;
    isolation: isolate;
}
.av-hero__bg { position: absolute; inset: 0; z-index: -3; }
.av-hero__slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transform: scale(1.08);
    transition: opacity 1.3s ease, transform 7s linear;
}
.av-hero__slide.is-active { opacity: .38; transform: scale(1); }
.av-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: radial-gradient(1100px 620px at 18% 30%, rgba(122,193,67,.28), transparent 62%),
                radial-gradient(900px 560px at 84% 76%, rgba(240,130,30,.22), transparent 62%);
}

.av-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; width: 100%; }
.av-hero__content { color: #fff; padding-block: 60px; }
.av-hero__content .av-eyebrow { background: rgba(255,255,255,.16); color: #DFF3C8; }
.av-hero__content .av-eyebrow::before { background: var(--av-sun); }
.av-hero h1 { color: #fff; font-size: clamp(2.3rem, 5.2vw, 4rem); margin-bottom: 22px; }
.av-hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--av-sun), var(--av-leaf)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.av-hero p { font-size: 1.12rem; color: rgba(255,255,255,.86); max-width: 56ch; margin-bottom: 34px; }
.av-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }

.av-hero__stats { display: flex; flex-wrap: wrap; gap: 38px; }
.av-hero__stat b { display: block; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.1; }
.av-hero__stat span { font-size: .84rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.62); }

/* Slider dots */
.av-hero__dots { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; }
.av-hero__dots button {
    width: 34px; height: 4px; border: 0; border-radius: 3px; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.35); transition: background .3s ease, width .3s ease;
}
.av-hero__dots button.is-active { background: var(--av-sun); width: 52px; }

/* ---------- Floating product icons -------------------------------------
   The brief asked for product-related icons drifting in the air around the
   hero. They are decorative only, so they are hidden from assistive tech and
   stop moving entirely when the visitor prefers reduced motion.
   ---------------------------------------------------------------------- */
.av-float { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.av-float__item {
    position: absolute;
    display: grid; place-items: center;
    width: var(--size, 66px); height: var(--size, 66px);
    border-radius: 22px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 34px rgba(0,0,0,.16);
    color: #fff;
    animation: av-drift var(--dur, 13s) ease-in-out var(--delay, 0s) infinite;
    will-change: transform;
}
.av-float__item svg { width: 52%; height: 52%; }
@keyframes av-drift {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    25%      { transform: translate3d(14px,-26px,0) rotate(6deg); }
    50%      { transform: translate3d(-10px,-42px,0) rotate(-5deg); }
    75%      { transform: translate3d(-18px,-18px,0) rotate(4deg); }
}

/* ---------- Cards ------------------------------------------------------- */
.av-grid { display: grid; gap: 26px; }
.av-grid--2 { grid-template-columns: repeat(2, 1fr); }
.av-grid--3 { grid-template-columns: repeat(3, 1fr); }
.av-grid--4 { grid-template-columns: repeat(4, 1fr); }

.av-card {
    background: var(--av-surface);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius-lg);
    padding: 32px;
    transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s ease, border-color .3s ease;
    position: relative; overflow: hidden;
}
.av-card:hover { transform: translateY(-6px); box-shadow: var(--av-shadow-lg); border-color: transparent; }
.av-card__icon {
    width: 58px; height: 58px; border-radius: 17px;
    display: grid; place-items: center; margin-bottom: 20px;
    background: var(--av-grad-brand); color: #fff;
}
.av-card__icon svg { width: 27px; height: 27px; }
.av-card__icon--warm { background: var(--av-grad-warm); }
.av-card__icon--leaf { background: var(--av-grad-leaf); }
.av-card h3 { font-size: 1.16rem; margin-bottom: 10px; }
.av-card p  { font-size: .96rem; margin: 0; }

/* Income-type cards get a numbered watermark */
.av-card--numbered::before {
    content: attr(data-no);
    position: absolute; top: 12px; inset-inline-end: 22px;
    font-size: 4.2rem; font-weight: 800; line-height: 1;
    color: var(--av-canvas-2);
    z-index: 0;
}
.av-card--numbered > * { position: relative; z-index: 1; }

/* ---------- Package / plan cards ---------------------------------------- */
.av-pack {
    background: #fff; border: 2px solid var(--av-line);
    border-radius: var(--av-radius-lg); padding: 34px 30px;
    text-align: center; position: relative;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.av-pack:hover { transform: translateY(-8px); box-shadow: var(--av-shadow-lg); }
.av-pack--featured { border-color: var(--av-sun); box-shadow: var(--av-shadow); }
.av-pack__flag {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--av-grad-warm); color: #fff;
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 18px; border-radius: var(--av-radius-pill); white-space: nowrap;
}
.av-pack__name { font-size: 1.28rem; font-weight: 800; color: var(--av-ink); margin-bottom: 4px; }
.av-pack__pv { font-size: .86rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--av-green); margin-bottom: 18px; }
.av-pack__price { font-size: 2.5rem; font-weight: 800; color: var(--av-navy); line-height: 1; margin-bottom: 22px; }
.av-pack__price small { font-size: .95rem; font-weight: 600; color: var(--av-muted); }
.av-pack__rows { list-style: none; padding: 0; margin: 0 0 26px; text-align: start; }
.av-pack__rows li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--av-line); font-size: .93rem; }
.av-pack__rows li:last-child { border-bottom: 0; }
.av-pack__rows b { color: var(--av-ink); font-weight: 700; }

/* ---------- Product cards ------------------------------------------------ */
.av-product {
    background: #fff; border: 1px solid var(--av-line);
    border-radius: var(--av-radius-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
}
.av-product:hover { transform: translateY(-6px); box-shadow: var(--av-shadow-lg); }
.av-product__media {
    aspect-ratio: 4/3; display: grid; place-items: center;
    background: linear-gradient(160deg, var(--av-canvas), var(--av-canvas-2));
    position: relative; overflow: hidden;
}
.av-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.av-product:hover .av-product__media img { transform: scale(1.06); }
.av-product__media svg { width: 74px; height: 74px; color: var(--av-leaf); opacity: .55; }
.av-product__pv {
    position: absolute; top: 12px; inset-inline-start: 12px;
    background: var(--av-grad-leaf); color: #fff;
    font-size: .74rem; font-weight: 800; letter-spacing: .05em;
    padding: 5px 12px; border-radius: var(--av-radius-pill);
}
.av-product__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.av-product__cat { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--av-muted); margin-bottom: 6px; }
.av-product__name { font-size: 1.02rem; font-weight: 700; color: var(--av-ink); margin-bottom: 12px; line-height: 1.4; }
.av-product__foot { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.av-product__price { font-size: 1.3rem; font-weight: 800; color: var(--av-navy); }
.av-product__mrp { font-size: .88rem; color: var(--av-muted); text-decoration: line-through; }

/* ---------- Rank ladder -------------------------------------------------- */
.av-rank {
    display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: center;
    background: #fff; border: 1px solid var(--av-line);
    border-radius: var(--av-radius); padding: 20px 24px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.av-rank:hover { transform: translateX(6px); box-shadow: var(--av-shadow); }
.av-rank__badge {
    width: 64px; height: 64px; border-radius: 18px;
    display: grid; place-items: center;
    font-size: 1.35rem; font-weight: 800; color: #fff;
}
.av-rank__name { font-size: 1.08rem; font-weight: 800; color: var(--av-ink); }
.av-rank__pv { font-size: .88rem; color: var(--av-muted); }
.av-rank__reward { text-align: end; }
.av-rank__reward b { display: block; font-size: 1.22rem; font-weight: 800; color: var(--av-green); }
.av-rank__reward span { font-size: .78rem; color: var(--av-muted); }

/* ---------- Steps -------------------------------------------------------- */
.av-steps { counter-reset: av-step; display: grid; gap: 30px; }
.av-step { display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start; }
.av-step__no {
    counter-increment: av-step;
    width: 62px; height: 62px; border-radius: 20px;
    display: grid; place-items: center;
    background: var(--av-grad-brand); color: #fff;
    font-size: 1.28rem; font-weight: 800;
}
.av-step__no::before { content: counter(av-step, decimal-leading-zero); }
.av-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.av-step p { margin: 0; font-size: .96rem; }

/* ---------- Accordion (FAQ) ---------------------------------------------- */
.av-acc { border: 1px solid var(--av-line); border-radius: var(--av-radius); background: #fff; overflow: hidden; }
.av-acc + .av-acc { margin-top: 14px; }
.av-acc__q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 22px 26px; border: 0; background: none; cursor: pointer; text-align: start;
    font-size: 1.02rem; font-weight: 700; color: var(--av-ink);
}
.av-acc__q svg { flex: none; width: 20px; height: 20px; color: var(--av-green); transition: transform .3s ease; }
.av-acc.is-open .av-acc__q svg { transform: rotate(45deg); }
.av-acc__a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
.av-acc__a > div { padding: 0 26px 24px; font-size: .97rem; }

/* ---------- Footer -------------------------------------------------------- */
.av-footer { background: var(--av-ink); color: rgba(255,255,255,.62); padding: 76px 0 0; }
.av-footer h4 { color: #fff; font-size: .84rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 22px; }
.av-footer a { color: rgba(255,255,255,.62); font-size: .95rem; }
.av-footer a:hover { color: var(--av-leaf); }
.av-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 46px; padding-bottom: 54px; }
.av-footer__logo { background: #fff; border-radius: var(--av-radius); padding: 14px 18px; display: inline-block; margin-bottom: 20px; }
.av-footer__logo img { height: 52px; width: auto; }
.av-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.av-footer__bar {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 24px 0; display: flex; flex-wrap: wrap; gap: 16px;
    align-items: center; justify-content: space-between; font-size: .88rem;
}
.av-footer__legal { font-size: .82rem; color: rgba(255,255,255,.4); padding-bottom: 34px; max-width: 92ch; line-height: 1.7; }

/* ---------- Scroll reveal -------------------------------------------------
   CONTENT IS VISIBLE BY DEFAULT. The hidden state is applied only under
   `html.av-js`, a class set by a tiny inline script in the document head.

   That ordering matters: an animation must never be able to swallow the page.
   If JavaScript is blocked, fails, or the observer never fires (a background
   tab, a print preview, an odd viewport), the text simply shows - instead of
   sitting at opacity 0 forever, which is exactly what a "reveal on scroll"
   effect does when it goes wrong.
   ------------------------------------------------------------------------ */
.av-reveal { opacity: 1; transform: none; }

.av-js .av-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.av-js .av-reveal.is-in { opacity: 1; transform: none; }
.av-js .av-reveal[data-delay="1"] { transition-delay: .09s; }
.av-js .av-reveal[data-delay="2"] { transition-delay: .18s; }
.av-js .av-reveal[data-delay="3"] { transition-delay: .27s; }
.av-js .av-reveal[data-delay="4"] { transition-delay: .36s; }

/* ============================================================================
   FORMS + AUTH
   ========================================================================= */
.av-auth {
    min-height: 100svh;
    display: grid; grid-template-columns: 1.05fr 1fr;
    background: var(--av-canvas);
}

/* Brand side */
.av-auth__aside {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--av-grad-hero);
    color: #fff;
    display: flex; flex-direction: column; justify-content: center;
    padding: 60px clamp(40px, 5vw, 80px);
}
.av-auth__aside::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(760px 460px at 22% 24%, rgba(122,193,67,.3), transparent 60%),
                radial-gradient(660px 420px at 80% 82%, rgba(240,130,30,.24), transparent 60%);
}
.av-auth__aside h2 { color: #fff; font-size: clamp(1.7rem, 2.7vw, 2.5rem); margin-bottom: 16px; }
.av-auth__aside p { color: rgba(255,255,255,.82); font-size: 1.02rem; max-width: 46ch; }
.av-auth__points { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 16px; }
.av-auth__points li { display: flex; gap: 13px; align-items: flex-start; color: rgba(255,255,255,.9); font-size: .98rem; }
.av-auth__points svg { flex: none; width: 22px; height: 22px; color: var(--av-leaf); margin-top: 2px; }

/* Form side */
.av-auth__main { display: flex; align-items: center; justify-content: center; padding: 46px 24px; }
.av-auth__card {
    width: 100%; max-width: 470px;
    background: #fff; border-radius: var(--av-radius-lg);
    box-shadow: var(--av-shadow-lg); padding: clamp(30px, 4vw, 46px);
}
.av-auth__logo { display: block; margin: 0 auto 26px; }
.av-auth__logo img { height: 84px; width: auto; display: block; margin-inline: auto; }
.av-auth__card h1 { font-size: 1.6rem; text-align: center; margin-bottom: 8px; }
.av-auth__card > p.av-auth__sub { text-align: center; color: var(--av-muted); font-size: .95rem; margin-bottom: 30px; }
.av-auth__alt { text-align: center; margin-top: 26px; font-size: .94rem; color: var(--av-body); }
.av-auth__alt a { font-weight: 700; }

/* Fields */
.av-field { margin-bottom: 20px; }
.av-field__label { display: block; font-size: .87rem; font-weight: 700; color: var(--av-ink); margin-bottom: 8px; }
.av-field__label .av-req { color: var(--av-orange); }

.av-input, .av-select, .av-textarea {
    width: 100%;
    padding: 13px 16px;
    font-size: .98rem; font-family: inherit; color: var(--av-ink);
    background: #fff;
    border: 1.5px solid var(--av-line);
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.av-input::placeholder, .av-textarea::placeholder { color: #B4BCCB; }
.av-input:focus, .av-select:focus, .av-textarea:focus {
    outline: 0; border-color: var(--av-navy);
    box-shadow: 0 0 0 4px rgba(27,62,140,.12);
}
.av-input:disabled, .av-select:disabled { background: var(--av-canvas); color: var(--av-muted); cursor: not-allowed; }
.av-textarea { min-height: 130px; resize: vertical; }

/* Input with a leading icon (member ID, e-mail, mobile) */
.av-field__wrap { position: relative; display: flex; align-items: center; }
.av-field__wrap .av-input { padding-inline-start: 44px; }
.av-field__icon {
    position: absolute; inset-inline-start: 15px;
    width: 18px; height: 18px; color: var(--av-muted); pointer-events: none;
}
.av-field__wrap:focus-within .av-field__icon { color: var(--av-navy); }

/* Password eye toggle - required on EVERY password box in this project. */
.av-field__wrap--pwd .av-input { padding-inline-end: 48px; }
.av-eye {
    position: absolute; inset-inline-end: 8px;
    width: 34px; height: 34px; border: 0; border-radius: 9px;
    background: transparent; color: var(--av-muted);
    display: grid; place-items: center; cursor: pointer;
    transition: color .2s ease, background .2s ease;
}
.av-eye:hover { color: var(--av-navy); background: var(--av-canvas); }
.av-eye svg { width: 19px; height: 19px; }
.av-eye__off { display: none; }
.av-eye.is-shown .av-eye__on  { display: none; }
.av-eye.is-shown .av-eye__off { display: block; }

/* Mobile field with a fixed +91 prefix */
.av-field__wrap--tel .av-input { padding-inline-start: 62px; }
.av-field__prefix {
    position: absolute; inset-inline-start: 1px;
    height: calc(100% - 3px); display: grid; place-items: center;
    padding-inline: 14px;
    font-size: .95rem; font-weight: 700; color: var(--av-body);
    border-inline-end: 1.5px solid var(--av-line);
    pointer-events: none;
}

/* Validation */
.av-field.has-error .av-input, .av-field.has-error .av-select { border-color: #D93A3A; }
.av-field.has-error .av-input:focus { box-shadow: 0 0 0 4px rgba(217,58,58,.12); }
.av-error { display: block; margin-top: 7px; font-size: .84rem; color: #D93A3A; font-weight: 600; }
.av-hint  { display: block; margin-top: 7px; font-size: .84rem; color: var(--av-muted); }

/* Password strength meter */
.av-strength { margin-top: 10px; }
.av-strength__bar { height: 5px; border-radius: 3px; background: var(--av-line); overflow: hidden; }
.av-strength__fill { height: 100%; width: 0; border-radius: 3px; transition: width .3s ease, background .3s ease; }
.av-strength__text { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--av-muted); }

/* Checkbox */
.av-check { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.av-check input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--av-navy); cursor: pointer; }

/* Alerts */
.av-alert {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 15px 18px; border-radius: 12px;
    font-size: .93rem; font-weight: 500; margin-bottom: 22px;
}
.av-alert svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.av-alert--error   { background: #FDEDED; color: #A82121; }
.av-alert--success { background: #EAF7EE; color: #12683A; }
.av-alert--info    { background: #EAF1FD; color: #1B3E8C; }
.av-alert--warn    { background: #FEF5E7; color: #96591A; }

/* OTP boxes */
.av-otp { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; }
.av-otp input {
    width: 52px; height: 60px; text-align: center;
    font-size: 1.5rem; font-weight: 800; color: var(--av-ink);
    border: 1.5px solid var(--av-line); border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.av-otp input:focus { outline: 0; border-color: var(--av-navy); box-shadow: 0 0 0 4px rgba(27,62,140,.12); }
.av-otp input.is-filled { border-color: var(--av-green); background: rgba(122,193,67,.06); }

/* Steps indicator on multi-step forms */
.av-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.av-progress__dot { flex: 1; height: 4px; border-radius: 3px; background: var(--av-line); transition: background .3s ease; }
.av-progress__dot.is-done { background: var(--av-leaf); }
.av-progress__dot.is-now  { background: var(--av-navy); }

/* ---------- Searchable combo (every dropdown in this project) ------------- */
.av-combo { position: relative; }
.av-combo__control {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; cursor: pointer; text-align: start;
    background: #fff; border: 1.5px solid var(--av-line); border-radius: 12px;
    font-size: .98rem; font-family: inherit; color: var(--av-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.av-combo__control:focus, .av-combo.is-open .av-combo__control {
    outline: 0; border-color: var(--av-navy); box-shadow: 0 0 0 4px rgba(27,62,140,.12);
}
.av-combo__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-combo__value.is-placeholder { color: #B4BCCB; }
.av-combo__caret { width: 17px; height: 17px; flex: none; color: var(--av-muted); transition: transform .25s ease; }
.av-combo.is-open .av-combo__caret { transform: rotate(180deg); }
.av-combo__panel {
    position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 50;
    background: #fff; border: 1px solid var(--av-line); border-radius: 12px;
    box-shadow: var(--av-shadow); padding: 8px;
    display: none;
}
.av-combo.is-open .av-combo__panel { display: block; }
.av-combo__search {
    width: 100%; padding: 10px 13px; margin-bottom: 6px;
    border: 1.5px solid var(--av-line); border-radius: 9px;
    font-size: .93rem; font-family: inherit;
}
.av-combo__search:focus { outline: 0; border-color: var(--av-navy); }
.av-combo__list { max-height: 244px; overflow-y: auto; }
.av-combo__opt {
    padding: 10px 13px; border-radius: 9px; cursor: pointer;
    font-size: .94rem; color: var(--av-ink);
}
.av-combo__opt:hover, .av-combo__opt.is-cursor { background: var(--av-canvas); }
.av-combo__opt.is-selected { background: rgba(122,193,67,.14); color: var(--av-green); font-weight: 700; }
.av-combo__empty { padding: 16px; text-align: center; color: var(--av-muted); font-size: .9rem; }

/* ---------- Page header (inner pages) ------------------------------------ */
.av-pagehead {
    padding: calc(var(--av-header-h) + 62px) 0 62px;
    background: var(--av-grad-hero); color: #fff; position: relative; overflow: hidden; isolation: isolate;
}
.av-pagehead::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(760px 400px at 20% 40%, rgba(122,193,67,.26), transparent 62%),
                radial-gradient(620px 380px at 84% 70%, rgba(240,130,30,.2), transparent 62%);
}
.av-pagehead h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 12px; }
.av-pagehead p { color: rgba(255,255,255,.82); max-width: 60ch; margin: 0; }
.av-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .87rem; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.av-crumb a { color: rgba(255,255,255,.82); }
.av-crumb a:hover { color: var(--av-leaf); }

/* ---------- Tables -------------------------------------------------------- */
.av-tablewrap { overflow-x: auto; border: 1px solid var(--av-line); border-radius: var(--av-radius); background: #fff; }
.av-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.av-table th {
    text-align: start; padding: 15px 18px;
    font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--av-navy); white-space: nowrap;
}
.av-table td { padding: 15px 18px; border-bottom: 1px solid var(--av-line); font-size: .95rem; }
.av-table tbody tr:last-child td { border-bottom: 0; }
.av-table tbody tr:hover { background: var(--av-canvas); }
.av-table b { color: var(--av-ink); }

/* ---------- Utilities ----------------------------------------------------- */
.av-hide { display: none !important; }
.av-center { text-align: center; }
.av-mt-4 { margin-top: 34px; }
.av-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1080px) {
    .av-hero__grid { grid-template-columns: 1fr; }
    .av-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .av-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .av-auth { grid-template-columns: 1fr; }
    .av-auth__aside { display: none; }
}

@media (max-width: 900px) {
    .av-burger { display: block; }
    .av-nav {
        position: fixed; inset: var(--av-header-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--av-line);
        box-shadow: var(--av-shadow); padding: 12px 20px 20px;
        max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease;
    }
    .av-nav.is-open { max-height: 76svh; overflow-y: auto; }
    .av-nav:not(.is-open) { padding-block: 0; }
    .av-nav a { padding: 14px 6px; border-bottom: 1px solid var(--av-line); border-radius: 0; }
    .av-nav a::after { display: none; }
    .av-header__actions .av-btn { display: none; }
    .av-grid--3 { grid-template-columns: 1fr; }
    .av-rank { grid-template-columns: 52px 1fr; }
    .av-rank__reward { grid-column: 1 / -1; text-align: start; }
}

@media (max-width: 620px) {
    .av-grid--2, .av-grid--4 { grid-template-columns: 1fr; }
    .av-footer__grid { grid-template-columns: 1fr; }
    .av-hero__stats { gap: 24px; }
    .av-hero__stat b { font-size: 1.6rem; }
    .av-otp input { width: 44px; height: 54px; font-size: 1.25rem; }
    .av-float__item { display: none; }
}

/* Respect the visitor's motion preference - nothing drifts, floats or reveals. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .av-reveal { opacity: 1; transform: none; }
}

/* Print: drop the furniture, keep the content. */
@media print {
    .av-header, .av-footer, .av-float, .av-hero__dots, .av-btn { display: none !important; }
    body { color: #000; }
}

/* ---------- Scroll progress bar + back to top ---------------------------- */
.av-progressbar {
    position: fixed; top: 0; inset-inline: 0; z-index: 1100;
    height: 3px; transform-origin: left; transform: scaleX(0);
    background: var(--av-grad-warm);
    will-change: transform;
}

.av-totop {
    position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 900;
    width: 50px; height: 50px; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--av-grad-brand); color: #fff;
    box-shadow: var(--av-shadow-brand);
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.85);
    transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), visibility .3s;
}
.av-totop.is-in { opacity: 1; visibility: visible; transform: none; }
.av-totop:hover { transform: translateY(-4px); }
.av-totop svg { width: 21px; height: 21px; }

/* ---------- Marquee ticker ---------------------------------------------- */
.av-ticker {
    overflow: hidden; padding: 18px 0;
    background: var(--av-grad-brand); color: #fff;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.av-ticker__track { display: flex; width: max-content; animation: av-marquee 34s linear infinite; }
.av-ticker:hover .av-ticker__track { animation-play-state: paused; }
.av-ticker__item {
    display: flex; align-items: center; gap: 14px;
    padding-inline: 30px; white-space: nowrap;
    font-size: .96rem; font-weight: 700; letter-spacing: .03em;
}
.av-ticker__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--av-sun); }
@keyframes av-marquee { to { transform: translateX(-50%); } }

/* ---------- Glow orbs (decorative background motion) --------------------- */
.av-orb {
    position: absolute; border-radius: 50%; filter: blur(70px);
    opacity: .5; pointer-events: none; z-index: -1;
    animation: av-orb-float 18s ease-in-out infinite;
}
.av-orb--leaf  { background: rgba(122,193,67,.55); }
.av-orb--warm  { background: rgba(240,130,30,.45); }
.av-orb--navy  { background: rgba(43,85,180,.5); }
@keyframes av-orb-float {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(42px,-38px) scale(1.12); }
    66%      { transform: translate(-32px,26px) scale(.94); }
}

/* ---------- Split-text heading reveal ------------------------------------ */
.av-split span {
    display: inline-block;
    opacity: 0; transform: translateY(26px) rotate(3deg);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.av-reveal.is-in .av-split span { opacity: 1; transform: none; }

/* ---------- Feature strip (icon + text row) ------------------------------ */
.av-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: var(--av-radius-lg); overflow: hidden; box-shadow: var(--av-shadow); background: #fff; }
.av-strip__cell { padding: 30px 26px; border-inline-end: 1px solid var(--av-line); display: flex; gap: 16px; align-items: flex-start; transition: background .3s ease; }
.av-strip__cell:last-child { border-inline-end: 0; }
.av-strip__cell:hover { background: var(--av-canvas); }
.av-strip__cell svg { flex: none; width: 30px; height: 30px; color: var(--av-green); }
.av-strip__cell b { display: block; color: var(--av-ink); font-size: 1rem; margin-bottom: 3px; }
.av-strip__cell span { font-size: .89rem; }
@media (max-width: 900px) {
    .av-strip { grid-template-columns: 1fr 1fr; }
    .av-strip__cell:nth-child(2n) { border-inline-end: 0; }
    .av-strip__cell:nth-child(-n+2) { border-bottom: 1px solid var(--av-line); }
}
@media (max-width: 560px) {
    .av-strip { grid-template-columns: 1fr; }
    .av-strip__cell { border-inline-end: 0; border-bottom: 1px solid var(--av-line); }
}

/* ---------- Split media section ------------------------------------------ */
.av-split-sec { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.av-split-sec--flip .av-split-sec__media { order: 2; }
.av-split-sec__media { position: relative; border-radius: var(--av-radius-lg); overflow: hidden; box-shadow: var(--av-shadow-lg); aspect-ratio: 4/3; background: var(--av-grad-leaf); }
.av-split-sec__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
    .av-split-sec { grid-template-columns: 1fr; }
    .av-split-sec--flip .av-split-sec__media { order: 0; }
}

/* ---------- Checklist ---------------------------------------------------- */
.av-checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.av-checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: .98rem; }
.av-checklist svg { flex: none; width: 22px; height: 22px; color: var(--av-leaf); margin-top: 2px; }

/* ---------- CTA band ------------------------------------------------------ */
.av-cta {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--av-grad-hero); color: #fff;
    border-radius: var(--av-radius-lg);
    padding: clamp(40px, 6vw, 72px);
    text-align: center;
}
.av-cta::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(600px 340px at 22% 30%, rgba(122,193,67,.32), transparent 60%),
                radial-gradient(560px 320px at 80% 74%, rgba(240,130,30,.26), transparent 60%);
}
.av-cta h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin-bottom: 14px; }
.av-cta p { color: rgba(255,255,255,.84); max-width: 58ch; margin: 0 auto 30px; }
.av-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================================
   INSTANT PRODUCT SEARCH
   A big, obvious search field on the hero with a suggestion panel that opens
   under it as the visitor types.
   ========================================================================= */
.av-search { position: relative; max-width: 620px; margin-bottom: 34px; }

.av-search__box {
    display: flex; align-items: center; gap: 12px;
    padding: 7px 8px 7px 20px;
    background: rgba(255,255,255,.97);
    border: 2px solid transparent;
    border-radius: var(--av-radius-pill);
    box-shadow: 0 16px 44px rgba(0,0,0,.22);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.av-search.is-focus .av-search__box {
    border-color: var(--av-sun);
    box-shadow: 0 20px 56px rgba(0,0,0,.3);
}
.av-search__icon { width: 21px; height: 21px; flex: none; color: var(--av-muted); }
.av-search.is-busy .av-search__icon { animation: av-spin .8s linear infinite; }

.av-search__input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 1.02rem; color: var(--av-ink);
    padding-block: 12px;
}
.av-search__input::placeholder { color: #9AA3B2; }
.av-search__input::-webkit-search-cancel-button { display: none; }

.av-search__clear {
    width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%;
    background: transparent; color: var(--av-muted); cursor: pointer;
    display: none; place-items: center;
}
.av-search.has-text .av-search__clear { display: grid; }
.av-search__clear:hover { background: var(--av-canvas); color: var(--av-ink); }
.av-search__clear svg { width: 15px; height: 15px; }

.av-search__go { flex: none; padding: 12px 26px; }

/* ---- Suggestion panel ---- */
.av-suggest {
    position: absolute; top: calc(100% + 12px); inset-inline: 0; z-index: 60;
    background: #fff;
    border-radius: var(--av-radius-lg);
    box-shadow: var(--av-shadow-lg);
    border: 1px solid var(--av-line);
    overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility .22s;
    max-height: min(70svh, 520px); overflow-y: auto;
}
.av-search.is-open .av-suggest { opacity: 1; visibility: visible; transform: none; }

.av-suggest__head {
    padding: 13px 20px; font-size: .74rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--av-muted);
    border-bottom: 1px solid var(--av-line); background: var(--av-canvas);
    position: sticky; top: 0; z-index: 1;
}

.av-suggest__item {
    display: flex; align-items: center; gap: 15px;
    padding: 12px 20px; cursor: pointer;
    border-bottom: 1px solid var(--av-line);
    transition: background .15s ease;
    text-align: start;
}
.av-suggest__item:last-of-type { border-bottom: 0; }
.av-suggest__item:hover, .av-suggest__item.is-cursor { background: var(--av-canvas); }

.av-suggest__thumb {
    width: 50px; height: 50px; flex: none; border-radius: 13px;
    display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(150deg, var(--av-canvas), var(--av-canvas-2));
    color: var(--av-leaf);
}
.av-suggest__thumb img { width: 100%; height: 100%; object-fit: cover; }
.av-suggest__thumb svg { width: 24px; height: 24px; }

.av-suggest__body { flex: 1; min-width: 0; }
.av-suggest__name {
    font-size: .97rem; font-weight: 700; color: var(--av-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The typed characters are highlighted inside each suggestion. */
.av-suggest__name mark {
    background: rgba(251,167,27,.28); color: inherit;
    border-radius: 3px; padding: 0 2px; font-weight: 800;
}
.av-suggest__meta { font-size: .82rem; color: var(--av-muted); margin-top: 2px; }

.av-suggest__price { flex: none; text-align: end; }
.av-suggest__price b { display: block; font-size: 1rem; font-weight: 800; color: var(--av-navy); }
.av-suggest__price span {
    display: inline-block; margin-top: 3px;
    font-size: .7rem; font-weight: 800; letter-spacing: .04em;
    color: #fff; background: var(--av-grad-leaf);
    padding: 2px 8px; border-radius: var(--av-radius-pill);
}

.av-suggest__all {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px; font-size: .92rem; font-weight: 700;
    color: var(--av-navy); background: var(--av-canvas);
    border-top: 1px solid var(--av-line);
}
.av-suggest__all:hover { background: var(--av-canvas-2); color: var(--av-green); }
.av-suggest__all svg { width: 16px; height: 16px; }

.av-suggest__empty { padding: 34px 24px; text-align: center; }
.av-suggest__empty svg { width: 40px; height: 40px; color: var(--av-muted); opacity: .45; margin-bottom: 12px; }
.av-suggest__empty b { display: block; color: var(--av-ink); margin-bottom: 4px; }
.av-suggest__empty span { font-size: .89rem; color: var(--av-muted); }

/* Popular chips under the search box */
.av-search__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.av-search__chips > span { font-size: .82rem; color: rgba(255,255,255,.6); margin-inline-end: 2px; }
.av-chip {
    font-size: .82rem; font-weight: 600;
    padding: 6px 14px; border-radius: var(--av-radius-pill);
    background: rgba(255,255,255,.14); color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.22); cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.av-chip:hover { background: #fff; color: var(--av-navy); transform: translateY(-2px); }

@media (max-width: 620px) {
    .av-search__go { display: none; }
    .av-search__box { padding-inline-start: 16px; }
    .av-suggest__price b { font-size: .92rem; }
}

/* ============================================================================
   LOGO + DEVICE-FRIENDLY REFINEMENTS
   The header carries two logo files: the full horizontal lockup, and the globe
   mark on its own. Which one shows is a CSS decision, so there is no layout
   shift and no JavaScript involved.
   ========================================================================= */
.av-logo__full { display: block; height: 46px; width: auto; transition: height .3s ease; }
.av-logo__mark { display: none;  height: 42px; width: auto; transition: height .3s ease; }
.av-header.is-stuck .av-logo__full { height: 38px; }
.av-header.is-stuck .av-logo__mark { height: 34px; }

.av-footer__logo img { height: 46px; width: auto; display: block; }

/* Below this width the wordmark would fight the menu for space. */
@media (max-width: 1080px) {
    .av-logo__full { display: none; }
    .av-logo__mark { display: block; }
}

/* ---------- Touch targets & mobile layout -------------------------------- */
@media (max-width: 900px) {
    :root { --av-header-h: 72px; }

    /* Anything tappable gets at least a 44px target - the size a fingertip
       actually needs, and the accessibility minimum. */
    .av-btn { min-height: 46px; padding: 13px 24px; }
    .av-nav a { min-height: 48px; display: flex; align-items: center; }
    .av-lang__btn { min-height: 44px; }
    .av-acc__q { min-height: 56px; padding: 18px 20px; }

    /* The language switcher keeps its place; the CTA buttons move into the
       mobile menu rather than being hidden outright. */
    .av-nav::after {
        content: "";
        display: block; height: 1px; margin: 12px 0 4px;
        background: var(--av-line);
    }
    .av-nav .av-nav__cta { display: flex; gap: 10px; padding-top: 12px; }
    .av-nav .av-nav__cta .av-btn { flex: 1; }

    .av-section { padding: clamp(48px, 9vw, 72px) 0; }
    .av-section-head { margin-bottom: 38px; }
    .av-card { padding: 26px; }
    .av-cta { padding: 34px 24px; }
    .av-pagehead { padding: calc(var(--av-header-h) + 40px) 0 44px; }
}

@media (max-width: 620px) {
    .av-container { padding-inline: 16px; }
    .av-logo__mark { height: 38px; }
    .av-header.is-stuck .av-logo__mark { height: 34px; }

    .av-hero { min-height: auto; padding-top: calc(var(--av-header-h) + 34px); padding-bottom: 54px; }
    .av-hero__content { padding-block: 0; }
    .av-hero h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
    .av-hero p { font-size: 1rem; }
    .av-hero__cta { flex-direction: column; }
    .av-hero__cta .av-btn { width: 100%; }
    .av-hero__stats { gap: 20px 28px; }
    .av-hero__dots { bottom: 16px; }

    .av-search__chips { gap: 7px; }
    .av-chip { font-size: .78rem; padding: 6px 12px; }

    .av-pack { padding: 28px 22px; }
    .av-pack__price { font-size: 2.1rem; }
    .av-step { grid-template-columns: 50px 1fr; gap: 16px; }
    .av-step__no { width: 50px; height: 50px; border-radius: 16px; font-size: 1.05rem; }
    .av-table th, .av-table td { padding: 12px 14px; font-size: .89rem; }
    .av-totop { inset-inline-end: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* Very small phones (360px and below) - nothing may overflow horizontally. */
@media (max-width: 380px) {
    .av-hero h1 { font-size: 1.7rem; }
    .av-hero__stat b { font-size: 1.4rem; }
    .av-suggest__thumb { width: 42px; height: 42px; }
    .av-suggest__item { padding: 10px 14px; gap: 11px; }
    .av-suggest__price b { font-size: .86rem; }
}

/* Landscape phones: the fixed header must not eat the whole screen. */
@media (max-height: 460px) and (orientation: landscape) {
    :root { --av-header-h: 60px; }
    .av-hero { min-height: auto; padding-block: calc(var(--av-header-h) + 24px) 40px; }
}

/* Images never overflow their column, whatever the source dimensions. */
img, svg, video { max-width: 100%; }
img { height: auto; }

/* Long unbroken strings (a member ID, an e-mail) must wrap rather than
   stretch the page sideways on a narrow screen. */
.av-table td, .av-card p, .av-lead, .av-footer p { overflow-wrap: anywhere; }

/* The in-menu CTA pair exists only on small screens. */
.av-nav__cta.av-hide-desktop { display: none; }
@media (max-width: 900px) { .av-nav__cta.av-hide-desktop { display: flex; } }

/* ============================================================================
   HEADER FIT
   With nine menu items, a language switcher and two CTAs, the header needs
   1,394px at full size but only gets a 1,240px container - the buttons were
   being pushed off the right edge on a 1280px laptop. Menu labels never wrap,
   and everything scales down in one step before the burger takes over.
   ========================================================================= */
.av-nav a { white-space: nowrap; }

@media (min-width: 901px) and (max-width: 1340px) {
    .av-header__inner { gap: 16px; }
    .av-nav { gap: 0; }
    .av-nav a { padding: 10px 10px; font-size: .875rem; }
    .av-nav a::after { left: 10px; right: 10px; }
    .av-header__actions { gap: 7px; }
    .av-header__actions .av-btn { padding: 11px 18px; font-size: .875rem; }
    .av-lang__btn { padding: 8px 11px; font-size: .82rem; }
    /* The globe icon alone is enough at this width; the language NAME returns
       as soon as there is room for it. */
    .av-lang__btn span { display: none; }
}

/* Narrower still, but not yet mobile: the secondary CTA steps aside. The link
   is still reachable from the footer and the mobile menu. */
@media (min-width: 901px) and (max-width: 1120px) {
    .av-nav a { padding: 10px 8px; font-size: .84rem; }
    .av-header__actions .av-btn--ghost { display: none; }
}

/* ============================================================================
   AUTH PAGE EXTRAS
   ========================================================================= */
.av-auth__foot {
    margin-top: 26px; text-align: center;
    font-size: .88rem; color: var(--av-muted);
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
}
.av-auth__foot a { font-weight: 600; }
.av-auth__langs { display: inline-flex; gap: 10px; }
.av-auth__langs a { color: var(--av-muted); }
.av-auth__langs a.is-active { color: var(--av-green); font-weight: 700; }

/* The card logo is a phone-only fallback: on desktop the brand panel already
   carries the logo, so showing it twice would just be noise. */
.av-hide-desktop-logo { display: none; }
@media (max-width: 1080px) { .av-hide-desktop-logo { display: block; } }

/* ---------- Sponsor lookup feedback -------------------------------------- */
.av-sponsor:empty { display: none; }
.av-sponsor__ok, .av-sponsor__bad {
    display: flex; align-items: center; gap: 9px;
    margin-top: 9px; padding: 10px 14px; border-radius: 10px;
    font-size: .9rem; font-weight: 600;
}
.av-sponsor__ok  { background: rgba(122,193,67,.14); color: var(--av-green); }
.av-sponsor__bad { background: #FDEDED; color: #A82121; }
.av-sponsor__ok svg, .av-sponsor__bad svg { width: 18px; height: 18px; flex: none; }

/* ---------- Left / right leg picker -------------------------------------- */
.av-legpick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.av-legpick__opt { cursor: pointer; }
.av-legpick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.av-legpick__box {
    display: block; padding: 15px 16px;
    border: 2px solid var(--av-line); border-radius: 13px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.av-legpick__box b { display: block; font-size: .98rem; color: var(--av-ink); margin-bottom: 2px; }
.av-legpick__box small { font-size: .8rem; color: var(--av-muted); line-height: 1.4; display: block; }
.av-legpick__opt:hover .av-legpick__box { border-color: var(--av-navy); transform: translateY(-2px); }
.av-legpick__opt input:checked + .av-legpick__box {
    border-color: var(--av-green);
    background: rgba(122,193,67,.09);
}
.av-legpick__opt input:focus-visible + .av-legpick__box {
    box-shadow: 0 0 0 4px rgba(27,62,140,.14);
}

@media (max-width: 420px) {
    .av-legpick { grid-template-columns: 1fr; }
}

/* The form column stacks the card and its footer links; without an explicit
   direction the flex container lays them out side by side. */
.av-auth__main { flex-direction: column; }
.av-auth__foot { width: 100%; max-width: 470px; }

/* Two-column blocks centre their columns by default, which reads well when the
   halves are a similar height. On the contact page the form is much taller than
   the details list, so centring pushed the details into the middle of a tall
   empty column - this modifier tops-aligns them instead. */
.av-split-sec--top { align-items: start; }

/* ============================================================================
   LAYOUT CORRECTIONS
   ========================================================================= */

/* The browser's default 8px body margin was leaving a white gutter around every
   full-bleed panel - most visibly as a gap all the way around the sign-in page. */
html, body { margin: 0; padding: 0; }

/* ---------- Auth pages ---------------------------------------------------
   The brand panel and the form both start at the TOP. Vertical centring looks
   right only when the two halves are a similar height; the register form is
   twice as tall as its brand copy, which pushed the copy into the middle of an
   empty column. */
.av-auth__aside { justify-content: flex-start; padding-block: clamp(40px, 6vh, 72px); }
.av-auth__main  { justify-content: flex-start; padding-block: clamp(34px, 5vh, 60px); }

/* The brand copy stays in view while a long form scrolls beside it. */
@media (min-width: 1081px) {
    .av-auth__aside { position: sticky; top: 0; align-self: start; min-height: 100svh; }
}

.av-footer__logo { background: transparent; padding: 0; }
.av-footer__logo img { height: 50px; }

/* ---------- Hero ----------------------------------------------------------
   The flagship product card sits at the top of its column rather than floating
   in the middle of it. */
.av-hero__grid { align-items: start; }
.av-hero__content { padding-block: clamp(28px, 5vh, 56px) 0; }
.av-hero__visual { padding-top: clamp(28px, 5vh, 56px); }

/* ---------- Hero statistics ----------------------------------------------
   These were a wrapping flex row, so the fourth figure dropped onto its own
   line and left the column ragged against the product card beside it. A fixed
   four-column grid keeps the row intact; below 620px it becomes 2 x 2, which
   is the only arrangement that fits a phone without shrinking the numbers into
   illegibility. */
.av-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 18px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,.16);
}
.av-hero__stat b { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
.av-hero__stat span { display: block; font-size: .74rem; letter-spacing: .06em; line-height: 1.35; }

@media (max-width: 900px) {
    .av-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
}

/* The product card column stops stretching past the copy beside it. */
.av-hero__visual { align-self: start; }

/* ---------- Referral invitation card (register page) ---------------------- */
.av-hidden { display: none !important; }

.av-invite {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; margin-bottom: 24px;
    border: 1px solid rgba(27,62,140,.22);
    border-radius: var(--av-radius);
    background: linear-gradient(135deg, rgba(27,62,140,.06), rgba(29,148,90,.08));
    animation: avInvite .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes avInvite { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.av-invite__badge {
    flex: none; width: 44px; height: 44px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--av-grad-hero); color: #fff;
}
.av-invite__badge svg { width: 22px; height: 22px; }

.av-invite__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.av-invite__label { font-size: .74rem; font-weight: 700; letter-spacing: .08em;
                    text-transform: uppercase; color: var(--av-muted); }
.av-invite__name { font-size: 1.05rem; color: var(--av-ink); overflow-wrap: anywhere; }
.av-invite__meta { font-size: .86rem; color: var(--av-muted); }
.av-invite__side { font-weight: 700; }
.av-invite__side.is-left  { color: var(--av-navy); }
.av-invite__side.is-right { color: var(--av-green); }

.av-invite__change {
    margin-inline-start: auto; flex: none;
    font: inherit; font-size: .82rem; font-weight: 700;
    color: var(--av-navy); background: #fff;
    border: 1px solid var(--av-line); border-radius: 999px;
    padding: 8px 16px; cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.av-invite__change:hover { border-color: var(--av-navy); }

@media (max-width: 520px) {
    .av-invite { flex-wrap: wrap; }
    .av-invite__change { margin-inline-start: 0; width: 100%; }
}