/* ============================================================================================
   Novalie premium public experience
   This layer is intentionally presentation-only. All copy, links, images and records continue
   to come from the existing Admin-managed services and shared Blazor components.
   ============================================================================================ */

/* -- Products catalogue hero --------------------------------------------------------------- */

.page-header-products {
    min-height: clamp(20rem, 27vw, 32rem);
    display: flex;
    align-items: stretch;
    padding-block: clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(circle at 82% 32%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 30%),
        linear-gradient(125deg, color-mix(in srgb, var(--primary-800) 40%, #000) 0%, color-mix(in srgb, var(--primary) 58%, #000) 52%, color-mix(in srgb, var(--accent-800) 70%, #000) 100%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}

.products-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(115deg, #171028, #eef4f7 74%);
}

.products-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--primary-800) 45%, #000) 94%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--primary-800) 80%, #000) 74%, transparent) 34%, color-mix(in srgb, var(--accent-800) 22%, transparent) 67%, color-mix(in srgb, var(--accent-800) 8%, transparent) 100%),
        linear-gradient(0deg,rgba(10,7,25,.32),transparent 52%);
    animation: products-hero-overlay-in 1s ease-out both;
}

.products-hero-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 48%;
    transform: scale(1.045);
    filter: saturate(1.06) contrast(1.025);
}

.page-header-products::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: clamp(16rem, 32vw, 34rem);
    aspect-ratio: 1;
    inset-inline-end: -8%;
    inset-block-start: -48%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 0 0 3.5rem rgba(255,255,255,.025),
        0 0 0 8rem rgba(255,255,255,.018);
    animation: products-hero-orbit 13s ease-in-out infinite alternate;
    pointer-events: none;
}

.page-header-products::before {
    opacity: .42;
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, #000, transparent 62%);
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 62%);
}

.products-hero-container {
    position: relative;
    z-index: 4;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

.products-hero-copy {
    align-self: end;
    display: grid;
    justify-items: start;
    gap: clamp(1rem, 2vw, 1.4rem);
    max-width: 43rem;
    padding-block-start: clamp(3rem, 7vw, 6rem);
}

.products-hero-container > *,
.products-hero-copy > * {
    animation: products-hero-content-in .75s cubic-bezier(.2,.75,.2,1) both;
}
.products-hero-copy > h1 { animation-delay: .08s; }
.products-hero-copy > .lead { animation-delay: .16s; }

.page-header-products h1 {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(2.8rem, 5.4vw, 5.1rem) !important;
    line-height: .95;
    letter-spacing: -.055em;
    text-shadow: 0 .25rem 1.5rem rgba(16,7,28,.42);
}

.page-header-products .lead {
    max-width: 34rem;
    margin: 0;
    color: rgba(255,255,255,.86);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    text-shadow: 0 .15rem .8rem rgba(16,7,28,.38);
}

html[dir="rtl"] .page-header-products h1 { line-height: 1.12; letter-spacing: 0; }

.products-hero-glow {
    position: absolute;
    z-index: 1;
    width: 26rem;
    aspect-ratio: 1;
    inset-inline-end: -7rem;
    inset-block-start: -12rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--highlight) 14%, transparent);
    filter: blur(85px);
    pointer-events: none;
}

.products-hero-ring {
    position: absolute;
    z-index: 3;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    pointer-events: none;
}

.products-hero-ring-a {
    width: clamp(15rem,29vw,30rem);
    inset-inline-end: -6rem;
    inset-block-start: -9rem;
}

.products-hero-ring-b {
    width: clamp(7rem,13vw,13rem);
    inset-inline-end: clamp(5rem,13vw,14rem);
    inset-block-end: -5rem;
    border-color: color-mix(in srgb, var(--highlight) 28%, transparent);
}

@keyframes products-hero-overlay-in {
    from { opacity: .25; }
    to { opacity: 1; }
}

@keyframes products-hero-content-in {
    from { opacity: 0; transform: translateY(1.1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes products-hero-orbit {
    from { opacity: .45; transform: translate3d(0,0,0) scale(.96); }
    to { opacity: .8; transform: translate3d(-2%,6%,0) scale(1.04); }
}

@media (max-width: 47.99rem) {
    .page-header-products {
        min-height: 27rem;
    }

    .products-hero-media img {
        object-position: 62% center;
    }

    .page-header-products h1 {
        font-size: clamp(2.7rem, 14vw, 4rem) !important;
    }
}

/* -- Page-wide rhythm ----------------------------------------------------------------------- */

.home-experience {
    --home-ink: #121a31;
    --home-deep: #11162d;
    --home-line: color-mix(in srgb, var(--primary) 11%, transparent);
    --home-soft: color-mix(in srgb, var(--primary-050) 62%, var(--surface));
    overflow: clip;
    background: var(--surface);
}

.home-experience > section { position: relative; }

.home-experience .container { position: relative; }
.home-experience .section { padding-block: clamp(5.5rem, 10vw, 9rem); }

.home-section-index {
    position: absolute;
    inset-block-start: -2.5rem;
    inset-inline-end: 0;
    color: color-mix(in srgb, var(--primary) 17%, transparent);
    font: var(--weight-bold) .7rem/1 var(--font-sans);
    letter-spacing: .18em;
}

.home-section-index::before {
    content: "";
    display: inline-block;
    width: clamp(2.5rem, 6vw, 5rem);
    height: 1px;
    margin-inline-end: .75rem;
    vertical-align: middle;
    background: currentColor;
}

.home-experience .section-header { gap: 1rem; max-width: 48rem; }
.home-experience .section-header-row { align-items: center; }
.home-experience .section-header .title-lg,
.home-experience .section-header-row .title-lg {
    max-width: 17ch;
    font-size: clamp(2.15rem, 4vw, 3.65rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.home-experience .section-header .lead { max-width: 37rem; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.home-experience .eyebrow { letter-spacing: .11em; }
.home-experience .btn { transition: transform var(--duration) var(--ease-spring), box-shadow var(--duration), color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast); }
.home-experience .btn:hover { transform: translateY(-2px); }

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

.home-hero {
    min-height: calc(100svh - var(--header-height));
    display: grid;
    align-items: center;
    padding-block: clamp(4rem, 7vw, 7rem);
    background:
        radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--highlight) 24%, transparent), transparent 25rem),
        radial-gradient(circle at 18% 80%, rgba(217, 78, 193, .2), transparent 28rem),
        linear-gradient(120deg, #170718 0%, #54134f 49%, #073e50 100%);
}

.hero-slide-backgrounds {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
}

.hero-slide-background {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 1.15s ease, transform 8.5s ease-out;
}

.hero-slide-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(18, 7, 29, .93) 0%, rgba(34, 12, 47, .79) 38%, rgba(10, 31, 48, .5) 72%, rgba(7, 24, 38, .66) 100%),
        linear-gradient(0deg, rgba(6, 8, 22, .48), transparent 45%);
}

.hero-slide-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.88) contrast(1.06);
}

.hero-slide-background.is-active {
    opacity: 1;
    transform: scale(1);
}

.home-hero::before {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 38px 38px, 76px 76px, 76px 76px;
    mask-image: linear-gradient(100deg, transparent 3%, #000 35%, #000 94%);
    -webkit-mask-image: linear-gradient(100deg, transparent 3%, #000 35%, #000 94%);
}

.home-hero .hero-grid { position: relative; z-index: 2; width: 100%; }
.home-hero .hero-copy { gap: 0; }
.home-hero .hero-slide-copy { display: grid; justify-items: inherit; gap: clamp(1.2rem, 2.5vw, 2rem); }
.home-hero .hero-title {
    max-width: 10ch;
    font-size: clamp(3rem, 6.7vw, 6.2rem);
    line-height: .94;
    letter-spacing: -.065em;
    text-wrap: balance;
}

html[dir="rtl"] .home-hero .hero-title { line-height: 1.14; letter-spacing: 0; }

.home-hero .hero-subtitle { max-width: 36rem; font-size: clamp(1.05rem, 1.65vw, 1.3rem); }
.home-hero .hero-eyebrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.home-hero .hero-actions { margin-top: .35rem; }
.home-hero .hero-actions .btn { min-height: 3.45rem; padding-inline: 1.65rem; }
.home-hero .hero-actions .btn:hover { transform: translateY(-3px); box-shadow: 0 1.1rem 2rem -1rem rgba(0,0,0,.42); }
.home-hero .hero-visual { width: min(100%, 43rem); }
.home-hero .hero-stage { filter: drop-shadow(0 2.5rem 3.5rem rgba(5, 5, 20, .22)); }
.home-hero .hero-portal-ring-outer { animation: premium-orbit 18s linear infinite; }
.home-hero .hero-portal-ring-inner { animation: premium-orbit-reverse 13s linear infinite; }
.home-hero .hero-floating-card { border-color: rgba(255,255,255,.52); box-shadow: 0 1.25rem 2.75rem rgba(5,5,20,.3); }

.hero-slide-controls {
    position: absolute;
    z-index: 5;
    inset-inline: 0;
    inset-block-end: clamp(1.2rem, 3vw, 2.2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    pointer-events: none;
}

.hero-slide-controls button {
    pointer-events: auto;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    background: rgba(12, 9, 29, .34);
    backdrop-filter: blur(16px) saturate(1.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.hero-slide-controls button:hover,
.hero-slide-controls button:focus-visible {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.62);
    transform: translateY(-2px);
}

.hero-slide-arrow,
.hero-slide-pause {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
}

.hero-slide-pause { margin-inline-start: .25rem; }

.hero-slide-dots {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .45rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(12, 9, 29, .24);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.hero-slide-controls .hero-slide-dot {
    width: 2.2rem;
    height: 1.75rem;
    padding: .74rem .3rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.hero-slide-dot span {
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.36);
    transition: height .2s ease, background-color .2s ease;
}

.hero-slide-dot.is-active span {
    height: 4px;
    background: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,.52);
}

@keyframes premium-orbit {
    from { transform: translateZ(-54px) rotateZ(4deg); }
    to { transform: translateZ(-54px) rotateZ(364deg); }
}

@keyframes premium-orbit-reverse {
    from { transform: translateZ(-18px) rotateZ(-3deg); }
    to { transform: translateZ(-18px) rotateZ(-363deg); }
}

@media (max-width: 61.99rem) {
    .hero-slide-background::after {
        background:
            linear-gradient(180deg, rgba(18, 7, 29, .86) 0%, rgba(29, 11, 43, .75) 48%, rgba(6, 25, 39, .7) 100%),
            linear-gradient(0deg, rgba(6, 8, 22, .4), transparent 50%);
    }

    .home-hero { padding-block-end: 6rem; }
}

@media (max-width: 35rem) {
    .hero-slide-arrow { display: none !important; }
    .hero-slide-controls { gap: .35rem; }
    .hero-slide-controls .hero-slide-dot { width: 1.65rem; }
}

/* -- Partner confidence rail --------------------------------------------------------------- */

.home-partner-rail {
    padding-block: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--surface);
    border-block: 1px solid var(--home-line);
}

.home-partner-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.home-partner-title { margin: 0; white-space: nowrap; color: var(--muted); }
.home-partner-rail .partner-logo { height: 2.2rem; opacity: .48; }
.home-partner-rail .partner-logo:hover { transform: scale(1.04); }

/* -- Story and highlights ------------------------------------------------------------------ */

.home-story {
    isolation: isolate;
    background:
        radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28rem),
        var(--surface);
}

.home-story::after {
    content: "";
    position: absolute;
    width: 32rem;
    aspect-ratio: 1;
    inset-inline-end: -20rem;
    inset-block-start: 5rem;
    border: 1px solid var(--home-line);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem color-mix(in srgb, var(--accent) 2.2%, transparent),
                0 0 0 8rem color-mix(in srgb, var(--primary) 1.8%, transparent);
    z-index: -1;
}

.home-story-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(26rem, 1.08fr);
    gap: clamp(3rem, 8vw, 7.5rem);
    align-items: center;
}

.home-story-copy { max-width: 40rem; }
.home-story-copy .title-lg { max-width: 15ch; font-size: clamp(2.4rem, 4.8vw, 4.4rem); line-height: 1; letter-spacing: -.055em; }
.home-story-copy .prose { color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.82; }
.home-story-actions { margin-top: .75rem; }

.home-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 2rem;
    background: var(--home-line);
    box-shadow: 0 2rem 5rem -3.2rem rgba(17,22,45,.45);
}

.home-highlight-grid .stat {
    min-height: 12rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    justify-items: start;
    align-content: space-between;
    text-align: start;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--surface) 94%, var(--primary-050));
}

.home-highlight-grid .stat:hover { transform: none; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 23%, transparent); }
.home-highlight-grid .stat-icon { margin: 0; }
.home-highlight-grid .stat-value { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.home-highlight-grid .stat-label { max-width: 15ch; line-height: 1.35; }

/* -- Global reach ----------------------------------------------------------------------------
   A deep night-blue band: the dotted world (a static SVG image), and over it one curved route
   per market drawn from the head office. Routes draw in once the map scrolls into view, then a
   small light travels each one on a loop. Countries come from Admin → Global reach. */

.home-markets {
    --market-ink: #0b0f22;
    --market-route: #d08be0;
    --market-muted: rgba(255,255,255,.66);
    --market-line: rgba(255,255,255,.12);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(ellipse 60% 55% at 38% 42%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%),
        linear-gradient(180deg, #0d1128, var(--market-ink) 55%, #0a0d1d);
}

/* A slow breathing glow behind the head office. */
.home-markets-glow {
    position: absolute;
    z-index: -1;
    inset: 18% auto auto 22%;
    width: clamp(20rem, 40vw, 38rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--market-route) 18%, transparent);
    filter: blur(90px);
    pointer-events: none;
    animation: home-markets-breathe 9s ease-in-out infinite alternate;
}

@keyframes home-markets-breathe {
    from { opacity: .45; transform: scale(.9); }
    to   { opacity: .85; transform: scale(1.1); }
}

.home-markets .home-section-index { color: rgba(255,255,255,.35); }
.home-markets .eyebrow { color: color-mix(in srgb, var(--market-route) 80%, #fff); }
.home-markets .title-lg { color: #fff; font-size: clamp(2.5rem, 4.6vw, 4.1rem); line-height: 1.02; letter-spacing: -.05em; }
.home-markets .lead { color: var(--market-muted); max-width: 40rem; font-size: clamp(1.02rem, 1.5vw, 1.14rem); line-height: 1.75; }

.home-markets-header {
    display: grid;
    gap: 2rem;
    align-items: end;
}

.home-markets-intro { display: grid; gap: 1rem; }

@media (min-width: 62rem) {
    .home-markets-header { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; }
}

.home-markets-stats { display: flex; gap: clamp(1.5rem, 4vw, 3rem); margin: 0; }

.home-markets-stat {
    display: flex;
    flex-direction: column-reverse;
    gap: .35rem;
    padding-inline-start: 1.1rem;
    border-inline-start: 1px solid var(--market-line);
}

.home-markets-stat dt { color: var(--market-muted); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.home-markets-stat dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #fff 30%, var(--market-route));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -- The map -- */

.home-markets-map { margin-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem); }

.market-map-scroller {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.market-map-scroller::-webkit-scrollbar { display: none; }

.market-map-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 448;
    /* The routes and pins repaint while they animate; this keeps that repaint inside the map. */
    contain: layout paint;
}

.market-map-land,
.market-map-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* The dots fade out towards every edge, so the cropped continents read as intentional. */
.market-map-land {
    opacity: .2;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent), linear-gradient(transparent, #000 8% 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent), linear-gradient(transparent, #000 8% 90%, transparent);
    mask-composite: intersect;
}

.market-map-layer { overflow: visible; }

/* Routes: drawn in on reveal, then a light travels each one. */
.market-route-line,
.market-route-packet { fill: none; stroke-linecap: round; }

.market-route-line {
    stroke: color-mix(in srgb, var(--market-route) 60%, transparent);
    stroke-width: 1.3;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition:
        stroke-dashoffset 1.6s var(--ease-out) calc(var(--i, 0) * 55ms + 250ms),
        stroke 250ms ease, stroke-width 250ms ease, opacity 250ms ease;
}

.market-route-packet {
    stroke: #fff;
    stroke-width: 2.4;
    stroke-dasharray: .035 1;
    stroke-dashoffset: .035;
    opacity: 0;
    transition: opacity 400ms ease calc(var(--i, 0) * 55ms + 1.6s);
}

.is-visible .market-route-line { stroke-dashoffset: 0; }
.is-visible .market-route-packet {
    opacity: .9;
    animation: market-packet 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
    animation-delay: calc(var(--i, 0) * -0.41s);
}

@keyframes market-packet {
    from { stroke-dashoffset: .035; }
    to   { stroke-dashoffset: -1; }
}

/* Pins appear as their route arrives. The <g> is positioned by its transform attribute, so only
   its children are scaled here. */
.market-pin {
    opacity: 0;
    pointer-events: bounding-box;
    transition: opacity 500ms ease calc(var(--i, 0) * 55ms + 1.1s);
}

.is-visible .market-pin { opacity: 1; }

.market-pin-dot,
.market-pin-pulse { transform-box: fill-box; transform-origin: center; }

.market-pin-dot {
    fill: #fff;
    stroke: var(--market-route);
    stroke-width: 1.5;
    transition: transform 250ms var(--ease-out), fill 250ms ease;
}

.market-pin-pulse {
    fill: none;
    stroke: var(--market-route);
    stroke-width: 1.2;
    opacity: 0;
    animation: market-pulse 2.8s ease-out infinite;
    animation-delay: calc(var(--i, 0) * -0.23s);
}

@keyframes market-pulse {
    0%   { opacity: .9; transform: scale(.45); }
    100% { opacity: 0;  transform: scale(2.1); }
}

.market-pin-label {
    fill: #fff;
    font: 700 13px/1 var(--font-sans);
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--market-ink);
    stroke-width: 4px;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

:lang(ar) .market-pin-label,
:lang(ku) .market-pin-label { font-family: var(--font-arabic); }

/* Hover or focus a pin or a country in the list: its route lights up, the rest step back. */
.home-markets.has-active .market-route:not(.is-active) .market-route-line { opacity: .25; }
.home-markets.has-active .market-route:not(.is-active) .market-route-packet { opacity: .15; }
.market-route.is-active .market-route-line { stroke: #fff; stroke-width: 2.2; }
.market-pin.is-active .market-pin-dot { fill: var(--market-route); stroke: #fff; transform: scale(1.7); }
.market-pin.is-active .market-pin-label { opacity: 1; }

/* Head office: a white core with two expanding rings. */
.market-hub-core { fill: #fff; stroke: var(--primary); stroke-width: 3.5; }
.market-hub-ring {
    fill: none;
    stroke: #fff;
    stroke-width: 1.4;
    transform-box: fill-box;
    transform-origin: center;
    animation: market-hub-ring 3s ease-out infinite;
}

.market-hub-ring-late { animation-delay: 1.5s; }

@keyframes market-hub-ring {
    0%   { opacity: .8; transform: scale(.4); }
    100% { opacity: 0;  transform: scale(2.6); }
}

/* HTML label for the head office, placed with percentages of the canvas; sits out in the
   Atlantic, below-left of the pin, where it covers no other market. */
.market-hub-card {
    position: absolute;
    top: var(--hub-y);
    left: var(--hub-x);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 1rem .4rem .4rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    /* Solid rather than backdrop-blurred: the routes animate underneath, and a blur would be
       recomputed every frame. */
    background: rgba(24,22,52,.86);
    box-shadow: 0 1rem 2rem -1rem rgba(0,0,0,.6);
    white-space: nowrap;
    pointer-events: none;
    transform: translate(calc(-100% - 1.1rem), .9rem);
}

.market-hub-card::before {
    content: "";
    position: absolute;
    top: -.55rem;
    right: -1rem;
    width: 1.35rem;
    height: 1px;
    background: rgba(255,255,255,.4);
    transform: rotate(-35deg);
    transform-origin: right;
}

.market-hub-card-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
}

.market-hub-card-text { display: grid; line-height: 1.2; }
.market-hub-card-label { color: var(--market-muted); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.market-hub-card-place { font-size: .92rem; font-weight: 700; }

/* -- Countries by region -- */

.market-regions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.market-region { padding-top: 1.1rem; border-top: 1px solid var(--market-line); }

.market-region-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .9rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.market-region-count {
    min-width: 1.75rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--market-muted);
    font-size: .75rem;
    text-align: center;
}

.market-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }

.market-chip {
    padding: .38rem .8rem;
    border: 1px solid var(--market-line);
    border-radius: 999px;
    color: rgba(255,255,255,.8);
    font-size: .85rem;
    line-height: 1.3;
    cursor: default;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.market-chip:focus-visible { outline: 2px solid var(--market-route); outline-offset: 2px; }
.market-chip.is-active {
    border-color: color-mix(in srgb, var(--market-route) 70%, transparent);
    background: color-mix(in srgb, var(--market-route) 22%, transparent);
    color: #fff;
}

.market-chip.is-hub {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--market-route) 70%, var(--primary)));
    color: #fff;
    font-weight: 600;
}

.market-chip.is-hub::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #fff; }

/* Phones: the map keeps a readable size and scrolls sideways; site.js starts it on the hub. */
@media (max-width: 47.99rem) {
    .market-map-scroller { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
    .market-map-canvas { width: 46rem; }
    .home-markets-stats { gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-markets-glow,
    .market-pin-pulse,
    .market-hub-ring,
    .is-visible .market-route-packet { animation: none; }
    .market-route-packet { display: none; }
    .market-route-line { stroke-dashoffset: 0; transition: none; }
    .market-pin { opacity: 1; transition: none; }
}

/* -- Featured brands ------------------------------------------------------------------------
   The Novalie family of brands, managed under Admin → Brands. Each card takes its colour from
   --brand-accent (set inline from the brand colour in Admin), falling back to Novalie violet. */

.home-brands {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-block: 1px solid var(--home-line);
    background:
        radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 38rem),
        linear-gradient(180deg, color-mix(in srgb, var(--background-alt) 92%, var(--surface)), var(--surface));
}

/* Two slow, blurred colour fields drifting behind the cards. */
.home-brands-aurora {
    position: absolute;
    z-index: -1;
    width: clamp(18rem, 38vw, 34rem);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    animation: home-brands-drift 22s ease-in-out infinite alternate;
}

.home-brands-aurora-a { inset: -8rem auto auto -10rem; background: color-mix(in srgb, var(--primary) 22%, transparent); }
.home-brands-aurora-b { inset: auto -9rem -10rem auto; background: color-mix(in srgb, var(--accent) 22%, transparent); animation-duration: 28s; animation-direction: alternate-reverse; }

@keyframes home-brands-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4rem, 2.5rem, 0) scale(1.15); }
}

.home-brands-header {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: 50rem;
    margin: 0 auto clamp(2.75rem, 5vw, 4.25rem);
    text-align: center;
}

.home-brands-header .title-lg { font-size: clamp(2.5rem, 4.6vw, 4.1rem); line-height: 1.02; letter-spacing: -.05em; }
.home-brands-header .lead { max-width: 44rem; font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.75; }

.brand-grid {
    display: grid;
    gap: clamp(1.1rem, 2.4vw, 1.6rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.brand-grid-item { display: flex; min-width: 0; }

@media (min-width: 48rem) { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
@media (min-width: 62rem) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The card. ::before carries the pointer spotlight (shared with the other cards), ::after the
   rotating accent ring that lights up on hover. */
@property --brand-ring-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.brand-card {
    --brand-accent: var(--primary);
    --spot-color: color-mix(in srgb, var(--brand-accent) 14%, transparent);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1.1rem;
    padding: .75rem .75rem 1.35rem;
    border: 1px solid var(--home-line);
    border-radius: 1.75rem;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1rem 2.5rem -2.1rem rgba(17,22,45,.35);
    transition: transform 420ms var(--ease-out), box-shadow 420ms ease, border-color 300ms ease;
}


.brand-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--brand-ring-angle),
        transparent 0 55%, color-mix(in srgb, var(--brand-accent) 85%, #fff) 75%, transparent 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
}

a.brand-card:hover,
a.brand-card:focus-visible {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--brand-accent) 28%, var(--home-line));
    box-shadow: 0 2rem 3.75rem -2.25rem color-mix(in srgb, var(--brand-accent) 55%, rgba(17,22,45,.5));
}

a.brand-card:hover::after,
a.brand-card:focus-visible::after { opacity: 1; animation: brand-ring-spin 3.2s linear infinite; }
a.brand-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-accent) 40%, transparent); outline-offset: 4px; }

@keyframes brand-ring-spin { to { --brand-ring-angle: 360deg; } }

/* Logo plate: accent-tinted, with a faint dot grid and a glow that blooms on hover. */
.brand-card-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: clamp(8.5rem, 14vw, 10rem);
    overflow: hidden;
    border-radius: 1.25rem;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 16%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px,
        linear-gradient(145deg, color-mix(in srgb, var(--brand-accent) 8%, var(--surface)), color-mix(in srgb, var(--brand-accent) 3%, var(--background-alt)));
}

.brand-card-glow {
    position: absolute;
    inset: 20% 25%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-accent) 38%, transparent);
    filter: blur(32px);
    opacity: .35;
    transform: scale(.8);
    transition: opacity 500ms ease, transform 600ms var(--ease-out);
}

.brand-card-logo {
    position: relative;
    max-width: 68%;
    max-height: 3.6rem;
    object-fit: contain;
    transition: transform 600ms var(--ease-out);
}

.brand-card-wordmark {
    position: relative;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.04em;
    text-transform: uppercase;
    background: linear-gradient(120deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 55%, var(--accent)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: transform 600ms var(--ease-out), letter-spacing 600ms var(--ease-out);
}

a.brand-card:hover .brand-card-glow,
a.brand-card:focus-visible .brand-card-glow { opacity: .8; transform: scale(1.25); }
a.brand-card:hover .brand-card-logo,
a.brand-card:focus-visible .brand-card-logo,
a.brand-card:hover .brand-card-wordmark,
a.brand-card:focus-visible .brand-card-wordmark { transform: scale(1.08); }
a.brand-card:hover .brand-card-wordmark { letter-spacing: -.02em; }

.brand-card-body { display: grid; justify-items: start; gap: .55rem; padding-inline: .6rem; }
.brand-card-name { font-size: clamp(1.2rem, 1.5vw, 1.4rem); font-weight: 700; letter-spacing: -.03em; color: var(--home-ink, var(--text)); }

.brand-card-specialty {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
    color: color-mix(in srgb, var(--brand-accent) 80%, var(--text));
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
}

.brand-card-specialty::before {
    content: "";
    width: .4rem;
    height: .4rem;
    flex: none;
    border-radius: 50%;
    background: var(--brand-accent);
}

.brand-card-description { color: var(--text-muted); font-size: .94rem; line-height: 1.65; }

.brand-card-visit {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding: .9rem .6rem 0;
    border-block-start: 1px solid var(--home-line);
    color: var(--brand-accent);
    font-size: .9rem;
    font-weight: 600;
}

.brand-card-visit-icon { transition: transform 350ms var(--ease-out); }
a.brand-card:hover .brand-card-visit-icon,
a.brand-card:focus-visible .brand-card-visit-icon { transform: translate(3px, -3px); }

/* On phones the brands become a swipeable rail instead of six stacked cards. */
@media (max-width: 47.99rem) {
    .brand-grid {
        grid-auto-flow: column;
        grid-auto-columns: min(82%, 20rem);
        gap: 1rem;
        margin-inline: calc(var(--gutter) * -1);
        padding: .75rem var(--gutter) 1.5rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .brand-grid::-webkit-scrollbar { display: none; }
    .brand-grid-item { scroll-snap-align: start; }
    a.brand-card:hover, a.brand-card:focus-visible { transform: none; }
}

/* -- Certifications ------------------------------------------------------------------------- */

.home-certifications { background: var(--surface); }
.home-certification-grid { gap: 1rem; }
.home-certifications .cert-card {
    min-height: 17rem;
    align-content: center;
    padding: 2rem;
    border-color: var(--home-line);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, var(--surface), var(--home-soft));
}

.home-certifications .cert-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 35%, var(--home-line)); box-shadow: 0 1.5rem 3.5rem -2.5rem rgba(17,22,45,.38); }
.home-certifications .cert-seal { width: 4.5rem; height: 4.5rem; box-shadow: 0 0 0 .6rem color-mix(in srgb, var(--primary-050) 70%, transparent); }
.home-certifications .cert-logo { height: 4rem; max-width: 9rem; }

/* -- Testimonials --------------------------------------------------------------------------- */

.home-testimonials {
    isolation: isolate;
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 5%, var(--background-alt)), color-mix(in srgb, var(--accent) 6%, var(--surface)));
}

.home-testimonial-grid { max-width: 72rem; margin-inline: auto; gap: 1.25rem; }
.home-testimonials .testimonial {
    min-height: 23rem;
    padding: clamp(2rem, 4vw, 3.35rem);
    border: 0;
    border-radius: 2rem;
    box-shadow: 0 1.5rem 4rem -3rem rgba(17,22,45,.42);
}

.home-testimonials .testimonial:first-child { background: linear-gradient(145deg, #17182f, #33203f); }
.home-testimonials .testimonial:first-child .testimonial-quote,
.home-testimonials .testimonial:first-child .testimonial-name { color: #fff; }
.home-testimonials .testimonial:first-child .testimonial-role { color: rgba(255,255,255,.58); }
.home-testimonials .testimonial:first-child .testimonial-avatar { color: #fff; background: rgba(255,255,255,.11); }
.home-testimonials .testimonial-quote { font-size: clamp(1.15rem, 2vw, 1.52rem); }
.home-testimonials .testimonial-author { margin-top: auto; }

/* -- Dark mode ------------------------------------------------------------------------------ */

:root[data-theme="dark"] .home-experience { --home-ink: #f2f4fb; --home-deep: #0c1021; --home-line: rgba(255,255,255,.1); --home-soft: rgba(255,255,255,.04); }
:root[data-theme="dark"] .home-story,
:root[data-theme="dark"] .home-certifications { background-color: var(--surface); }
:root[data-theme="dark"] .home-brands { background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 38rem), linear-gradient(180deg, var(--background-alt), var(--surface)); }
:root[data-theme="dark"] .brand-card { background: color-mix(in srgb, var(--surface) 94%, #fff); box-shadow: 0 1rem 2.5rem -2rem rgba(0,0,0,.6); }
:root[data-theme="dark"] .brand-card-stage { background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 22%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(145deg, color-mix(in srgb, var(--brand-accent) 14%, var(--surface)), var(--surface)); }
:root[data-theme="dark"] .brand-card-specialty { color: color-mix(in srgb, var(--brand-accent) 45%, #fff); background: color-mix(in srgb, var(--brand-accent) 22%, transparent); }
:root[data-theme="dark"] .brand-card-visit { color: color-mix(in srgb, var(--brand-accent) 50%, #fff); }
:root[data-theme="dark"] .home-highlight-grid .stat { background: color-mix(in srgb, var(--surface) 90%, #fff); }
:root[data-theme="dark"] .home-testimonials { background: linear-gradient(145deg, #161223, #0f2022); }
:root[data-theme="dark"] .home-certifications .cert-card { background: linear-gradient(145deg, var(--surface), rgba(255,255,255,.035)); }

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

@media (max-width: 61.99rem) {
    .home-story-grid { grid-template-columns: 1fr; }
    .home-story-copy { max-width: 45rem; }
}

@media (max-width: 47.99rem) {
    .home-experience .section { padding-block: 4.75rem; }
    .home-partner-inner { grid-template-columns: 1fr; gap: 1.35rem; }
    .home-partner-title { justify-content: center; text-align: center; }
    .home-highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-highlight-grid .stat { min-height: 9.5rem; padding: 1.25rem; }
}

@media (max-width: 29rem) {
    /* Two stats stay side by side on phones; a single column made each one a full-screen card. */
    .home-highlight-grid .stat { min-height: 8.25rem; padding: 1.1rem; gap: .75rem; }
    .home-highlight-grid .stat-value { font-size: clamp(2rem, 10vw, 2.6rem); }
}

@media (max-width: 19.99rem) {
    .home-highlight-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .header-progress { transition: none; }
    .products-hero-media img,
    .products-hero-media::after,
    .page-header-products::after,
    .products-hero-container > *,
    .products-hero-copy > * {
        animation: none;
    }
    .products-hero-media img { transform: none; }
    .hero-slide-background { transition: none; transform: none; }
    .home-hero .hero-portal-ring-outer,
    .home-hero .hero-portal-ring-inner { animation: none; }
    .home-brands-aurora,
    a.brand-card:hover::after,
    a.brand-card:focus-visible::after { animation: none; }
    a.brand-card:hover,
    a.brand-card:focus-visible,
    a.brand-card:hover :is(.brand-card-logo, .brand-card-wordmark, .brand-card-glow, .brand-card-visit-icon) { transform: none; }
    .home-experience .product-card:hover,
    .home-experience .cert-card:hover,
    .home-experience .btn:hover { transform: none; }
}

/* -- Rendering performance ------------------------------------------------------------------
   Sections well below the first screen skip layout and paint until they approach the viewport.
   "auto" in contain-intrinsic-size makes the browser remember each section's real height once
   it has rendered, so the scrollbar does not jump on the way back up. None of these sections
   paints outside its own box, so the implied paint containment clips nothing. */

.home-certifications,
.home-testimonials {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}