/* ==========================================================================
   MY BABY × UEAL — premium design layer
   Loaded after app.css. Components use the "ue-" prefix. Every --ue-* colour
   is an alias of the MyBaby --color-* tokens defined at the top of app.css.
   ========================================================================== */

:root {
    --ue-ink: var(--color-text);              /* headings */
    --ue-ink-2: #1B4F8A;                      /* orbs / nodes on dark panels */
    --ue-plum: var(--color-blue-strong);
    --ue-purple: var(--color-blue);           /* UI accent: kickers, links, icons */
    --ue-purple-2: var(--color-sky);
    --ue-lavender: #FFB3C6;                   /* soft pink: title accents on dark, selection */
    --ue-lavender-2: var(--color-blue-tint);  /* tint paired with blue icons */
    --ue-mist: var(--color-background-soft);  /* soft section background */
    --ue-pearl: #FFFCFD;
    --ue-gold: var(--color-yellow);
    --ue-gold-soft: var(--color-yellow-tint);
    --ue-gold-ink: var(--color-yellow-ink);
    --ue-sprout: #2A9A3E;                     /* leaf green for icons / large text (3.5:1) */
    --ue-sprout-soft: var(--color-green-tint);
    --ue-red: var(--color-primary);
    --ue-navy: var(--color-navy);
    --ue-text: var(--color-text);
    --ue-muted: var(--color-text-muted);
    --ue-line: var(--color-border);
    --ue-white: #fff;
    --ue-wa: #1FA855;

    --ue-grad-stage: radial-gradient(110% 90% at 90% 0%, rgba(22, 165, 232, .32) 0%, transparent 55%),
                     radial-gradient(80% 80% at 0% 100%, rgba(245, 45, 104, .16) 0%, transparent 55%),
                     linear-gradient(150deg, #11386A 0%, var(--color-navy) 60%, #0A2140 100%);
    --ue-grad-primary: var(--mb-grad-primary);
    --ue-grad-gold: linear-gradient(135deg, #FFD54F 0%, #F5B400 100%);

    --ue-font-display: var(--font-heading);
    --ue-font-ui: var(--font-body);

    --ue-r-sm: 10px;
    --ue-r: var(--radius-md);
    --ue-r-lg: var(--radius-lg);
    --ue-r-xl: var(--radius-xl);
    --ue-shadow-sm: 0 1px 2px rgba(37, 48, 71, .04), 0 4px 14px -6px rgba(37, 48, 71, .08);
    --ue-shadow: var(--shadow-card), 0 18px 40px -24px rgba(37, 48, 71, .18);
    --ue-shadow-lg: 0 30px 60px -32px rgba(37, 48, 71, .3);
    --ue-ease: cubic-bezier(.16, 1, .3, 1);
    --ue-section: clamp(4.25rem, 9vw, 8rem);
    --ue-gutter: clamp(1rem, 4vw, 1.5rem);

    --mb-header-h: 80px;
}

body { font-family: var(--font-body); color: var(--ue-text); background: var(--ue-white); }
.container { padding-inline: var(--ue-gutter); }
h1, h2, .h1, .h2, .display-heading, .section-title { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.015em; color: var(--ue-ink); }
h3, h4, h5, h6, .h3, .h4, .h5, .h6 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.005em; color: var(--ue-ink); }
/* Highlighted words in headings take the wordmark red (solid, no gradient) */
.section-title em, .display-heading em, .ue-title em { font-style: normal; font-weight: inherit; color: var(--color-primary-strong); background: none; -webkit-text-fill-color: currentColor; }
.lead { color: var(--ue-muted); }
::selection { background: #FFD6E0; color: var(--ue-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
img { max-width: 100%; }

/* ---------- Layout primitives ---------- */
.ue-section { padding-block: var(--ue-section); position: relative; }
.ue-section-sm { padding-block: clamp(3rem, 6vw, 5rem); position: relative; }
.ue-mist { background: var(--ue-mist); }
.ue-pearl { background: linear-gradient(180deg, #fff 0%, var(--ue-mist) 100%); }
.ue-dark { background: var(--ue-grad-stage); color: rgba(255, 255, 255, .78); }
.ue-dark h1, .ue-dark h2, .ue-dark h3, .ue-dark h4, .ue-dark .ue-title { color: #fff; }
.ue-dark .ue-title em { color: var(--ue-lavender); }
.ue-dark .lead, .ue-dark .ue-lead { color: rgba(255, 255, 255, .74); }
.ue-clip { overflow: hidden; }

.ue-head { max-width: 760px; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.ue-head.center { margin-inline: auto; text-align: center; }
.ue-kicker {
    display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem;
    font: 700 .74rem/1 var(--ue-font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ue-purple);
}
.ue-kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ue-gold), var(--ue-purple)); }
.ue-head.center .ue-kicker::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ue-purple), var(--ue-gold)); }
.ue-dark .ue-kicker { color: var(--ue-gold); }
.ue-title { font-size: clamp(2rem, 4.4vw, 3.35rem); line-height: 1.08; margin-bottom: 1.1rem; }
.ue-title.sm { font-size: clamp(1.7rem, 3.2vw, 2.45rem); }
.ue-lead { font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.75; color: var(--ue-muted); margin-bottom: 0; }

/* ---------- Buttons ---------- */
.ue-btn {
    --b-bg: var(--ue-grad-primary); --b-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 48px; padding: .8rem 1.45rem; border-radius: 999px; border: 1px solid transparent;
    font: 700 .95rem/1.1 var(--ue-font-ui); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
    background: var(--b-bg); color: var(--b-fg); cursor: pointer;
    box-shadow: 0 12px 26px -14px rgba(217, 10, 43, .75), inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: transform .35s var(--ue-ease), box-shadow .35s var(--ue-ease), background-color .2s, color .2s, border-color .2s;
}
.ue-btn:hover { color: var(--b-fg); transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(217, 10, 43, .85), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ue-btn:active { transform: translateY(0); }
.ue-btn i { font-size: 1.05em; transition: transform .35s var(--ue-ease); }
.ue-btn:hover .bi-arrow-right, .ue-btn:hover .bi-arrow-up-right { transform: translateX(3px); }
.ue-btn.sm { min-height: 40px; padding: .55rem 1.05rem; font-size: .86rem; }
.ue-btn.lg { min-height: 56px; padding: 1rem 1.8rem; font-size: 1rem; }
.ue-btn.block { width: 100%; }
/* Secondary action (class name kept from the previous theme): brand blue */
.ue-btn-gold { --b-bg: linear-gradient(135deg, #0A82DE 0%, var(--color-blue-strong) 100%); --b-fg: #fff; box-shadow: 0 12px 26px -14px rgba(8, 120, 209, .75), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ue-btn-gold:hover { box-shadow: 0 18px 34px -16px rgba(8, 120, 209, .85); }
/* On the dark trust-blue panels a white button reads clearest */
:is(.ue-dark, .ue-cta, .ue-jx, .ue-model, .ue-glance-hero, .ue-vision) .ue-btn-gold { --b-bg: #fff; --b-fg: var(--color-blue-strong); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); }
:is(.ue-dark, .ue-cta, .ue-jx, .ue-model, .ue-glance-hero, .ue-vision) .ue-btn-gold:hover { --b-fg: var(--color-primary-strong); }
.ue-btn, .btn, .ue-nav-link, .ue-mnav > li > a, .ue-mnav > li > button, .ue-pf-order { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0; }
.ue-btn:focus-visible, .btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.ue-btn-ghost { --b-bg: transparent; --b-fg: var(--ue-ink); border-color: rgba(37, 48, 71, .16); box-shadow: none; }
.ue-btn-ghost:hover { --b-fg: var(--ue-purple); border-color: var(--ue-purple); background: rgba(8, 120, 209, .05); box-shadow: none; }
.ue-dark .ue-btn-ghost, .ue-btn-ghost.light { --b-fg: #fff; border-color: rgba(255, 255, 255, .32); }
.ue-dark .ue-btn-ghost:hover, .ue-btn-ghost.light:hover { --b-fg: #fff; border-color: #fff; background: rgba(255, 255, 255, .08); }
.ue-btn-white { --b-bg: #fff; --b-fg: var(--ue-ink); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); }
.ue-btn-white:hover { --b-fg: var(--ue-purple); }
.ue-btn-order { --b-bg: linear-gradient(135deg, #22B45E 0%, #138A46 100%); box-shadow: 0 12px 24px -14px rgba(19, 138, 70, .85), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ue-btn-order:hover { box-shadow: 0 18px 30px -14px rgba(19, 138, 70, .9); }
.ue-link {
    display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .92rem; color: var(--ue-purple); text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ue-ease), color .2s;
}
.ue-link:hover { background-size: 100% 1.5px; color: var(--ue-plum); }
.ue-link i { transition: transform .3s var(--ue-ease); }
.ue-link:hover i { transform: translateX(3px); }

/* ---------- Chips & badges ---------- */
.ue-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: 999px;
    font: 600 .78rem/1.2 var(--ue-font-ui); color: var(--ue-ink); background: #fff; border: 1px solid var(--ue-line);
}
.ue-chip i { color: var(--ue-purple); }
.ue-chip.gold { background: var(--ue-gold-soft); border-color: #FBE29A; color: var(--ue-gold-ink); }
.ue-chip.gold i { color: var(--ue-gold-ink); }
.ue-chip.green { background: var(--ue-sprout-soft); border-color: #C5E9CB; color: #1F7A33; }
.ue-chip.green i { color: var(--ue-sprout); }
.ue-chip.glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(8px); }
.ue-chip.glass i { color: var(--ue-gold); }
.ue-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ue-icon {
    display: inline-grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px;
    background: linear-gradient(145deg, var(--ue-lavender-2), #fff); color: var(--ue-purple); font-size: 1.35rem;
    box-shadow: inset 0 0 0 1px rgba(8, 120, 209, .12);
}
.ue-icon.sm { width: 42px; height: 42px; border-radius: 13px; font-size: 1.1rem; }
.ue-icon.gold { background: linear-gradient(145deg, #FFF1C7, #fff); color: var(--ue-gold-ink); box-shadow: inset 0 0 0 1px rgba(255, 201, 40, .3); }
.ue-icon.green { background: linear-gradient(145deg, #DDF3E0, #fff); color: var(--ue-sprout); box-shadow: inset 0 0 0 1px rgba(54, 184, 74, .2); }
.ue-dark .ue-icon { background: rgba(255, 255, 255, .08); color: var(--ue-gold); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* ---------- Cards ---------- */
.ue-card {
    position: relative; height: 100%; padding: clamp(1.4rem, 3vw, 1.9rem); border-radius: var(--ue-r-lg);
    background: #fff; border: 1px solid var(--ue-line); box-shadow: var(--ue-shadow-sm);
    transition: transform .5s var(--ue-ease), box-shadow .5s var(--ue-ease), border-color .3s;
}
.ue-card:hover { transform: translateY(-6px); box-shadow: var(--ue-shadow); border-color: rgba(8, 120, 209, .25); }
.ue-card h3 { font-size: 1.12rem; margin: 1.1rem 0 .55rem; }
.ue-card p { color: var(--ue-muted); font-size: .95rem; line-height: 1.65; margin: 0; }
.ue-card .ue-num { position: absolute; top: 1.35rem; right: 1.5rem; font: 600 2.4rem/1 var(--ue-font-display); color: var(--ue-lavender-2); transition: color .4s; }
.ue-card:hover .ue-num { color: var(--ue-lavender); }
.ue-card.glass { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; backdrop-filter: blur(10px); }
.ue-card.glass:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 201, 40, .4); }
.ue-card.glass h3 { color: #fff; }
.ue-card.glass p { color: rgba(255, 255, 255, .7); }
.ue-card.glass .ue-num { color: rgba(255, 255, 255, .1); }
a.ue-card { display: block; color: inherit; text-decoration: none; }

/* ---------- Header ---------- */
.ue-topbar { background: var(--color-background-soft); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .8rem; }
.ue-topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; }
.ue-topbar a { color: var(--color-text); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.ue-topbar a:hover { color: var(--color-primary-strong); }
.ue-topbar strong.text-white { color: var(--color-primary-strong) !important; }
.ue-topbar i { color: var(--color-primary); }
.ue-topbar .sep { width: 1px; height: 14px; background: var(--color-border); }

.ue-header {
    position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid transparent; transition: box-shadow .4s var(--ue-ease), border-color .4s, background .4s;
}
.ue-header.is-scrolled { background: rgba(255, 255, 255, .94); border-bottom-color: var(--ue-line); box-shadow: 0 12px 34px -24px rgba(37, 48, 71, .45); }
/* Fixed height: the header is sticky (part of the page flow), so shrinking it on scroll would make the page jump. */
.ue-header .container { display: flex; align-items: center; gap: 1rem; min-height: var(--mb-header-h); }
.ue-brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.ue-brand img { height: 46px; width: auto; }
.ue-brand .ue-brand-co { display: none; padding-left: .7rem; border-left: 1px solid var(--ue-line); font: 700 .62rem/1.25 var(--ue-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ue-muted); }
@media (min-width: 576px) { .ue-brand .ue-brand-co { display: block; } }

.ue-nav { display: none; margin-left: auto; }
.ue-nav > ul { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.ue-nav > ul > li { position: relative; }
.ue-nav-link {
    display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .78rem; border-radius: 999px; border: 0; background: none;
    font: 600 .9rem/1 var(--ue-font-ui); color: var(--ue-ink); text-decoration: none; white-space: nowrap; transition: color .2s, background .2s;
}
.ue-nav-link:hover, .ue-nav-link[aria-expanded="true"] { color: var(--ue-purple); background: var(--ue-mist); }
.ue-nav-link.active { color: var(--ue-purple); }
.ue-nav-link.active::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); transform: translateX(-50%); }
.ue-nav-link .bi-chevron-down { font-size: .65rem; transition: transform .3s var(--ue-ease); }
.ue-nav-link[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.ue-drop {
    position: absolute; top: calc(100% + 10px); left: 50%; min-width: 280px; padding: .55rem; list-style: none; margin: 0;
    background: #fff; border: 1px solid var(--ue-line); border-radius: 18px; box-shadow: var(--ue-shadow-lg);
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s, transform .35s var(--ue-ease), visibility .25s;
}
.ue-drop::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.ue-drop.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ue-drop a { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem .75rem; border-radius: 12px; color: var(--ue-ink); text-decoration: none; transition: background .2s; }
.ue-drop a:hover, .ue-drop a:focus-visible, .ue-drop a.active { background: var(--ue-mist); }
.ue-drop a i { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--ue-lavender-2); color: var(--ue-purple); font-size: .95rem; }
.ue-drop a strong { display: block; font-size: .88rem; font-weight: 700; }
.ue-drop a small { display: block; font-size: .76rem; color: var(--ue-muted); line-height: 1.35; margin-top: .1rem; }
.ue-drop hr { margin: .35rem .5rem; border-color: var(--ue-line); opacity: 1; }

.ue-header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.ue-nav + .ue-header-actions { margin-left: .75rem; }
.ue-icon-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ue-line);
    background: #fff; color: var(--ue-ink); font-size: 1.15rem; text-decoration: none; transition: all .25s;
}
.ue-icon-btn:hover { color: var(--ue-purple); border-color: var(--ue-purple); }
.ue-icon-btn.wa { color: var(--ue-wa); }
.ue-icon-btn.wa:hover { background: var(--ue-wa); color: #fff; border-color: var(--ue-wa); }
.ue-burger { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--color-primary-tint); color: var(--color-primary-strong); font-size: 1.35rem; transition: background .2s, color .2s; }
.ue-burger:hover { background: var(--color-primary-strong); color: #fff; }
.ue-header-cta { display: none; }
@media (min-width: 1200px) {
    .ue-nav { display: block; }
    .ue-burger { display: none; }
    .ue-header-cta { display: inline-flex; }
    .ue-header-actions { margin-left: 0; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) { .ue-nav-link { padding-inline: .6rem; font-size: .86rem; } .ue-brand .ue-brand-co { display: none; } }

/* Mobile menu (offcanvas) */
.ue-menu { --bs-offcanvas-width: min(420px, 100vw); background: var(--ue-pearl); border-left: 0 !important; }
.ue-menu .offcanvas-header { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--ue-line); }
.ue-menu .offcanvas-header img { height: 44px; width: auto; object-fit: contain; }
.ue-menu .btn-close { width: 44px; height: 44px; border-radius: 12px; background-color: var(--ue-mist); opacity: 1; }
.ue-menu .offcanvas-body { padding: 1rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.ue-mnav { list-style: none; margin: 0; padding: 0; }
.ue-mnav > li { border-bottom: 1px solid var(--ue-line); }
.ue-mnav > li > a, .ue-mnav > li > button {
    display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 1rem .25rem; border: 0; background: none;
    font: 700 1.05rem/1.2 var(--ue-font-ui); color: var(--ue-ink); text-decoration: none; text-align: left;
}
.ue-mnav > li > a.active, .ue-mnav > li > button.active { color: var(--ue-purple); }
.ue-mnav button i { transition: transform .3s var(--ue-ease); color: var(--ue-muted); }
.ue-mnav button[aria-expanded="true"] i { transform: rotate(180deg); }
.ue-mnav .ue-msub { list-style: none; margin: 0 0 .85rem; padding: .35rem; background: #fff; border-radius: 14px; border: 1px solid var(--ue-line); }
.ue-mnav .ue-msub a { display: flex; align-items: center; gap: .65rem; padding: .7rem .7rem; border-radius: 10px; color: var(--ue-text); font-weight: 600; font-size: .94rem; text-decoration: none; }
.ue-mnav .ue-msub a:hover, .ue-mnav .ue-msub a.active { background: var(--ue-mist); color: var(--ue-purple); }
.ue-mnav .ue-msub i { color: var(--ue-purple); width: 1.2rem; }
.ue-menu-contact { padding: 1.1rem; border-radius: 18px; background: #fff; border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .9rem; }
.ue-menu-contact a { color: var(--color-text); text-decoration: none; display: flex; gap: .6rem; align-items: center; padding: .3rem 0; word-break: break-word; }
.ue-menu-contact i { color: var(--color-primary); }

/* ---------- Hero (cinematic slider) ---------- */
.ue-hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--color-background-soft) 0%, #fff 100%); color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.ue-hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .1; pointer-events: none; }
.ue-hero-glow.g1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -8vw; top: -12vw; background: var(--color-primary-soft); animation: ueFloat 18s ease-in-out infinite; }
.ue-hero-glow.g2 { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; left: -10vw; bottom: -14vw; background: var(--color-sky); opacity: .14; animation: ueFloat 22s ease-in-out infinite reverse; }
.ue-hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(54, 184, 74, .22) 1px, transparent 1.2px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 0%, transparent 75%); }
@keyframes ueFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3vw, 3vw) scale(1.08); } }

.ue-hero .hs-viewport { position: relative; }
.ue-hero .hs-track { display: grid; }
.ue-hero .hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .9s var(--ue-ease), visibility 0s .9s; }
.ue-hero .hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--ue-ease), visibility 0s; }
.ue-hero-inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-block: clamp(2.75rem, 7vw, 6rem) clamp(5.5rem, 9vw, 7rem); min-height: min(88vh, 820px); }
@media (min-width: 992px) { .ue-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
/* Home slider: shorter than the default hero */
.hero-slider .ue-hero-inner { min-height: min(66vh, 600px); padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(4.5rem, 7vw, 5.5rem); gap: clamp(1.25rem, 3vw, 2.25rem); }
.hero-slider .ue-hero-title { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 1rem; }
.hero-slider .ue-hero-lead { margin-bottom: 1.4rem; }
.hero-slider .ue-hero-actions { margin-bottom: 1.25rem; }
.hero-slider .ue-stage { max-width: 500px; }
.ue-hero-copy > * { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ue-ease), transform 1.1s var(--ue-ease); }
.hero-slide.is-active .ue-hero-copy > * { opacity: 1; transform: none; }
.hero-slide.is-active .ue-hero-copy > :nth-child(2) { transition-delay: .08s; }
.hero-slide.is-active .ue-hero-copy > :nth-child(3) { transition-delay: .16s; }
.hero-slide.is-active .ue-hero-copy > :nth-child(4) { transition-delay: .24s; }
.hero-slide.is-active .ue-hero-copy > :nth-child(5) { transition-delay: .32s; }
.ue-hero-copy .ue-kicker { color: var(--color-blue-strong); }
.ue-hero h1, .ue-hero .ue-hero-title { font-family: var(--font-heading); font-weight: 700; color: var(--color-text); font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.ue-hero h1 em, .ue-hero .ue-hero-title em { font-style: normal; font-weight: inherit; color: var(--color-primary-strong); }
.ue-hero-lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.75; color: var(--color-text-muted); max-width: 560px; margin-bottom: 1.75rem; }
.ue-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
@media (max-width: 575.98px) { .ue-hero-actions .ue-btn { flex: 1 1 100%; } }

/* Stage with product tins */
.ue-stage { position: relative; aspect-ratio: 1.12; width: 100%; max-width: 640px; margin-inline: auto; }
.ue-stage::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 8%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 45, 104, .16), transparent); filter: blur(4px); }
.ue-stage-ring { position: absolute; inset: 6% 10% 14%; border-radius: 50%; border: 1px solid var(--color-border); }
.ue-stage-ring::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(255, 201, 40, .25); animation: ueSpin 60s linear infinite; }
@keyframes ueSpin { to { transform: rotate(360deg); } }
.ue-stage .tin { position: absolute; bottom: 14%; transition: transform 1.2s var(--ue-ease), opacity 1s var(--ue-ease); }
.hero-slide:not(.is-active) .ue-stage .tin { opacity: 0; transform: translateY(40px) scale(.94); }
.ue-stage .tin.p1 { width: 34%; left: 33%; z-index: 3; }
.ue-stage .tin.p2 { width: 28%; left: 10%; bottom: 17%; z-index: 2; transition-delay: .12s; }
.ue-stage .tin.p3 { width: 28%; right: 10%; bottom: 17%; z-index: 2; transition-delay: .2s; }
.ue-stage .tin.p4 { width: 22%; left: 0; bottom: 21%; z-index: 1; transition-delay: .28s; }
.ue-stage .tin.p5 { width: 22%; right: 0; bottom: 21%; z-index: 1; transition-delay: .34s; }
.ue-stage .ue-float { animation: ueBob 7s ease-in-out infinite; }
.ue-stage .tin.p2.ue-float { animation-delay: -2s; }
.ue-stage .tin.p3.ue-float { animation-delay: -4s; }
@keyframes ueBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.ue-stage-badge {
    position: absolute; z-index: 5; display: flex; gap: .6rem; align-items: center; padding: .6rem .85rem; border-radius: 14px;
    background: rgba(255, 255, 255, .92); border: 1px solid var(--color-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-size: .78rem; line-height: 1.3; color: var(--color-text-muted); box-shadow: var(--shadow-card);
}
.ue-stage-badge strong { display: block; color: var(--color-text); font-size: .84rem; }
.ue-stage-badge i { color: var(--color-primary); font-size: 1.15rem; }
.ue-stage-badge.b1 { top: 6%; left: 0; }
.ue-stage-badge.b2 { top: 30%; right: -2%; }
@media (max-width: 575.98px) { .ue-stage-badge { display: none; } }

/* Hero controls */
.ue-hero-controls { position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 3vw, 2.25rem); z-index: 6; }
.ue-hero-controls .container { display: flex; align-items: center; gap: .75rem; }
.ue-hero .hs-dots { display: flex; gap: .45rem; flex: 1; max-width: 420px; }
.ue-hero .hs-dot { flex: 1; height: 34px; padding: 0; border: 0; background: none; position: relative; cursor: pointer; text-align: left; color: rgba(255, 255, 255, .55); font: 600 .7rem/1 var(--ue-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.ue-hero .hs-dot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.ue-hero .hs-dot .hs-progress { position: absolute; left: 0; bottom: 6px; height: 3px; width: 100%; border-radius: 3px; background: var(--ue-gold); transform-origin: 0 50%; transform: scaleX(0); }
.ue-hero .hs-dot.is-active { color: #fff; }
.ue-hero.hs-run .hs-dot.is-active .hs-progress { animation: ueProgress var(--hs-interval, 7000ms) linear forwards; }
.ue-hero.hs-paused .hs-dot.is-active .hs-progress { animation-play-state: paused; }
.ue-hero .hs-dot span.lbl { display: none; }
@media (min-width: 768px) { .ue-hero .hs-dot span.lbl { display: block; position: absolute; top: 2px; left: 0; white-space: nowrap; } }
@keyframes ueProgress { to { transform: scaleX(1); } }
.ue-hero .hs-arrow, .ue-hero .hs-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; transition: all .25s; }
.ue-hero .hs-arrow:hover, .ue-hero .hs-toggle:hover { background: #fff; color: var(--ue-ink); }

/* Hero scroll cue */
.ue-scroll-cue { position: absolute; right: var(--ue-gutter); bottom: 2rem; z-index: 6; display: none; width: 26px; height: 42px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, .4); }
.ue-scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ue-gold); animation: ueCue 2s ease-in-out infinite; }
@keyframes ueCue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@media (min-width: 1200px) { .ue-scroll-cue { display: block; } }

/* ---------- Product tin (official label artwork shaped as a tin) ---------- */
.tin { position: relative; display: block; aspect-ratio: .86; filter: drop-shadow(0 28px 26px rgba(14, 42, 79, .32)); }
.tin-lid {
    position: absolute; left: 1%; right: 1%; top: 0; height: 13%; border-radius: 50% / 46%;
    background: linear-gradient(90deg, #9EA3AD 0%, #F4F5F8 22%, #FFFFFF 40%, #D3D7DE 70%, #8D929C 100%);
    box-shadow: inset 0 -5px 8px rgba(0, 0, 0, .18);
}
.tin-lid::after { content: ""; position: absolute; inset: 14% 6% 34%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(220, 223, 229, .6)); }
.tin-body { position: absolute; left: 0; right: 0; top: 6.5%; bottom: 0; overflow: hidden; border-radius: 5% / 4.5%; background: #ddd; }
.tin-body img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block; }
.tin-body::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .06) 14%, rgba(255, 255, 255, .28) 27%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .14) 84%, rgba(0, 0, 0, .38) 100%);
}
.tin-body::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5%; z-index: 1; background: linear-gradient(180deg, #C9CDD4, #8E939C); }
.tin.flat { aspect-ratio: auto; filter: drop-shadow(0 18px 22px rgba(14, 42, 79, .18)); }
.tin.flat .tin-lid, .tin.flat .tin-body::before { display: none; }
.tin.flat .tin-body { position: relative; inset: auto; border-radius: 12px; }
.tin.flat .tin-body::after { display: none; }
.tin-fallback { display: grid; place-items: center; height: 100%; background: linear-gradient(160deg, var(--ue-lavender-2), #fff); color: var(--ue-purple); font: 600 1rem var(--ue-font-display); text-align: center; padding: 1rem; }

/* ---------- Product cards ---------- */
.ue-pcard {
    position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--ue-r-lg); background: #fff;
    border: 1px solid var(--ue-line); box-shadow: var(--ue-shadow-sm); overflow: hidden;
    transition: transform .55s var(--ue-ease), box-shadow .55s var(--ue-ease), border-color .3s;
}
.ue-pcard:hover { transform: translateY(-8px); box-shadow: var(--ue-shadow-lg); border-color: rgba(8, 120, 209, .25); }
.ue-pcard-media {
    position: relative; display: grid; place-items: center; padding: 1.6rem 1.5rem 1.2rem; aspect-ratio: 1 / .95;
    background: radial-gradient(80% 70% at 50% 35%, #fff 0%, #FFEAF0 100%); text-decoration: none; overflow: hidden;
}
.ue-pcard-media::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 7%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 48, 71, .22), transparent); }
.ue-pcard .tin { width: 62%; z-index: 1; transition: transform .7s var(--ue-ease); }
.ue-pcard:hover .tin { transform: translateY(-6px) rotate(-2deg) scale(1.03); }
.ue-pcard-tags { position: absolute; top: .9rem; left: .9rem; right: .9rem; z-index: 2; display: flex; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.ue-pcard-tags span { padding: .3rem .65rem; border-radius: 999px; font: 700 .7rem/1.1 var(--ue-font-ui); letter-spacing: .02em; background: rgba(255, 255, 255, .92); color: var(--ue-ink); box-shadow: var(--ue-shadow-sm); }
.ue-pcard-tags span.stage { background: var(--ue-ink); color: #fff; }
.ue-pcard-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.3rem 1.35rem; }
.ue-pcard-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-bottom: .55rem; font-size: .78rem; font-weight: 600; color: var(--ue-muted); }
.ue-pcard-meta i { color: var(--ue-purple); margin-right: .2rem; }
.ue-pcard h3, .ue-pcard h2 { font: 700 1.08rem/1.3 var(--ue-font-ui); margin: 0 0 .5rem; }
.ue-pcard h3 a, .ue-pcard h2 a { color: var(--ue-ink); text-decoration: none; }
.ue-pcard h3 a::after, .ue-pcard h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ue-pcard p { font-size: .88rem; line-height: 1.6; color: var(--ue-muted); margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ue-pcard-foot { margin-top: auto; display: flex; gap: .5rem; align-items: center; position: relative; z-index: 2; }
.ue-pcard-foot .ue-btn { flex: 1; }
.ue-pcard-foot .ue-icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
@media (max-width: 399.98px) { .ue-pcard-body { padding: 1rem; } .ue-pcard-foot .ue-btn { padding-inline: .8rem; } }

/* Compact product rail (horizontal scroll on small screens) */
.ue-rail { display: grid; gap: 1rem; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem var(--ue-gutter) 1.5rem; margin-inline: calc(var(--ue-gutter) * -1); scrollbar-width: thin; }
.ue-rail > * { scroll-snap-align: start; }
@media (min-width: 576px) { .ue-rail { grid-auto-columns: minmax(260px, 46%); } }
@media (min-width: 992px) { .ue-rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding: .5rem 0 0; margin: 0; } }

/* ---------- Statistic / counter ---------- */
.ue-stat-num { font: 600 clamp(3.4rem, 9vw, 6.5rem)/.95 var(--ue-font-display); letter-spacing: -.04em; color: var(--ue-ink); }
.ue-stat-num sup { font-size: .45em; top: -.9em; color: var(--ue-gold); margin-left: .05em; }
.ue-dark .ue-stat-num { color: #fff; }
.ue-stat-label { font: 700 .78rem/1.2 var(--ue-font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ue-purple); }
.ue-dark .ue-stat-label { color: var(--ue-gold); }

/* ---------- Glance (company at a glance) ---------- */
.ue-glance { display: grid; gap: 1.25rem; }
@media (min-width: 992px) { .ue-glance { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }
.ue-glance-hero { position: relative; overflow: hidden; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--ue-r-xl); background: var(--ue-grad-stage); color: rgba(255, 255, 255, .78); }
.ue-glance-hero::after { content: ""; position: absolute; right: -20%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 0 0 40px rgba(255, 255, 255, .02), 0 0 0 80px rgba(255, 255, 255, .02); }
.ue-glance-hero h3 { color: #fff; font-size: 1.15rem; margin: 1.25rem 0 .75rem; }
.ue-glance-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ue-glance-list li { display: flex; gap: .6rem; align-items: center; font-size: .95rem; }
.ue-glance-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ue-gold); box-shadow: 0 0 0 4px rgba(255, 201, 40, .15); flex-shrink: 0; }
.ue-glance-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ue-glance-tile { padding: 1.15rem; border-radius: var(--ue-r); background: #fff; border: 1px solid var(--ue-line); }
.ue-glance-tile small { display: block; font: 700 .68rem/1.2 var(--ue-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ue-muted); margin-bottom: .45rem; }
.ue-glance-tile strong { font: 600 1rem/1.35 var(--ue-font-ui); color: var(--ue-ink); }
.ue-glance-tile.wide { grid-column: 1 / -1; }

/* ---------- Process flow (animated) ---------- */
.ue-flow { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: flow; }
.ue-flow::before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--ue-line), var(--ue-line)); }
.ue-flow::after { content: ""; position: absolute; left: 25px; top: 10px; width: 2px; height: calc((100% - 20px) * var(--flow, 0)); background: linear-gradient(var(--ue-gold), var(--ue-purple)); transition: height .2s linear; }
.ue-flow li { position: relative; z-index: 1; display: flex; gap: 1rem; align-items: center; counter-increment: flow; }
.ue-flow .ue-flow-dot { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid var(--ue-line); color: var(--ue-purple); font-size: 1.2rem; transition: all .5s var(--ue-ease); }
.ue-flow li.is-on .ue-flow-dot { background: var(--ue-grad-primary); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -10px rgba(217, 10, 43, .8); }
.ue-flow .ue-flow-card { flex: 1; padding: .95rem 1.15rem; border-radius: 16px; background: #fff; border: 1px solid var(--ue-line); font-weight: 700; color: var(--ue-ink); font-size: .96rem; transition: all .5s var(--ue-ease); }
.ue-flow .ue-flow-card small { display: block; font: 700 .68rem/1 var(--ue-font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ue-muted); margin-bottom: .35rem; }
.ue-flow .ue-flow-card small::before { content: "Step " counter(flow, decimal-leading-zero); }
.ue-flow li.is-on .ue-flow-card { border-color: rgba(8, 120, 209, .28); box-shadow: var(--ue-shadow-sm); }
.ue-dark .ue-flow::before { background: rgba(255, 255, 255, .12); }
.ue-dark .ue-flow .ue-flow-dot { background: var(--ue-ink-2); border-color: rgba(255, 255, 255, .16); color: var(--ue-lavender); }
.ue-dark .ue-flow .ue-flow-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); color: #fff; }
.ue-dark .ue-flow .ue-flow-card small { color: rgba(255, 255, 255, .5); }
.ue-dark .ue-flow li.is-on .ue-flow-card { border-color: rgba(255, 201, 40, .45); background: rgba(255, 255, 255, .08); }
@media (min-width: 992px) {
    .ue-flow.horizontal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem 1.25rem; }
    .ue-flow.horizontal::before, .ue-flow.horizontal::after { display: none; }
    .ue-flow.horizontal li { flex-direction: column; align-items: flex-start; }
    .ue-flow.horizontal li:not(:nth-child(4n))::after { content: ""; position: absolute; top: 25px; left: 64px; right: -1.25rem; height: 2px; background: linear-gradient(90deg, var(--ue-gold), transparent); opacity: 0; transition: opacity .6s; }
    .ue-flow.horizontal li.is-on:not(:nth-child(4n))::after { opacity: .7; }
    .ue-flow.horizontal .ue-flow-card { width: 100%; min-height: 96px; }
}

/* Chain (short horizontal flow, e.g. Product → … → Trust) */
.ue-chain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; counter-reset: chain; }
@media (min-width: 768px) { .ue-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ue-chain { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ue-chain li { counter-increment: chain; position: relative; padding: 1.25rem 1rem; border-radius: var(--ue-r); background: #fff; border: 1px solid var(--ue-line); text-align: center; transition: transform .5s var(--ue-ease), box-shadow .5s; }
.ue-chain li:hover { transform: translateY(-5px); box-shadow: var(--ue-shadow); }
.ue-chain li .ue-icon { margin-bottom: .75rem; }
.ue-chain li strong { display: block; font-size: .98rem; color: var(--ue-ink); }
.ue-chain li small { display: block; font: 700 .66rem/1 var(--ue-font-ui); letter-spacing: .16em; color: var(--ue-muted); margin-top: .35rem; }
.ue-chain li small::before { content: counter(chain, decimal-leading-zero); }
@media (min-width: 1200px) {
    .ue-chain li:not(:last-child)::after { content: "\F285"; font-family: "bootstrap-icons"; position: absolute; right: -.62rem; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ue-gold); color: #253047; font-size: .6rem; }
}
.ue-chain-result { margin-top: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--ue-r); text-align: center; background: var(--ue-grad-stage); color: #fff; font: 600 clamp(1.05rem, 2vw, 1.3rem)/1.3 var(--ue-font-display); }
.ue-chain-result i { color: var(--ue-gold); margin-right: .4rem; }

/* ---------- Quality journey (timeline panel) ---------- */
@keyframes uePulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.ue-jx { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ue-r-xl); padding: clamp(1.75rem, 5vw, 4rem); background: var(--ue-grad-stage); color: rgba(255, 255, 255, .74); }
.ue-jx::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.2px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 75%); }
.ue-jx-glow { position: absolute; z-index: -1; right: -12%; top: -35%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(22, 165, 232, .45), transparent 65%); pointer-events: none; }
.ue-jx-head { display: grid; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 992px) { .ue-jx-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ue-jx .ue-kicker { color: var(--ue-gold); }
.ue-jx-title { font: 600 clamp(1.8rem, 3.6vw, 2.9rem)/1.1 var(--ue-font-display); letter-spacing: -.025em; color: #fff; margin: 0; }
.ue-jx-title em { font-style: normal; font-weight: inherit; color: var(--ue-lavender); }
.ue-jx-lead { margin: 0; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .68); max-width: 30rem; }

/* Track + animated connector */
.ue-jx-track { position: relative; display: grid; gap: 1.25rem; }
.ue-jx-track::before, .ue-jx-track::after { content: ""; position: absolute; border-radius: 2px; pointer-events: none; }
.ue-jx-track::before { background: rgba(255, 255, 255, .12); }
.ue-jx-track::after { background: linear-gradient(90deg, var(--ue-gold), var(--ue-lavender)); transition: transform 1.8s var(--ue-ease) .2s; }
@media (min-width: 768px) {
    .ue-jx-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    .ue-jx-track::before, .ue-jx-track::after { left: 2.25rem; right: calc(33.333% - 3.25rem); top: 2.25rem; height: 2px; margin-top: -1px; }
    .ue-jx-track::after { transform: scaleX(0); transform-origin: left; }
    .ue-jx-track.is-inview::after { transform: scaleX(1); }
}
@media (max-width: 767.98px) {
    .ue-jx-track::before, .ue-jx-track::after { left: 2.25rem; top: 2.25rem; bottom: 2.25rem; width: 2px; margin-left: -1px; }
    .ue-jx-track::after { background: linear-gradient(180deg, var(--ue-gold), var(--ue-lavender)); transform: scaleY(0); transform-origin: top; }
    .ue-jx-track.is-inview::after { transform: scaleY(1); }
    .ue-jx-step { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
}
/* travelling light along the connector (desktop) */
.ue-jx-track .ue-jx-step:first-child::after { content: none; }
@media (min-width: 768px) {
    .ue-jx-track.is-inview .ue-jx-step:first-child::after {
        content: ""; position: absolute; z-index: 2; left: 2.25rem; top: 2.25rem; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
        background: #fff; box-shadow: 0 0 0 4px rgba(255, 201, 40, .35), 0 0 18px 4px rgba(255, 201, 40, .8);
        animation: ueJxRun 5s cubic-bezier(.45, 0, .25, 1) 2s infinite;
    }
    .ue-jx-step:first-child { position: static; }
}
@keyframes ueJxRun { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(calc(66.667cqw + 1rem)); opacity: 0; } }
.ue-jx-track { container-type: inline-size; }

/* Node (flag badge + step number) */
.ue-jx-node { position: relative; z-index: 1; width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; }
.ue-jx-flag { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px rgba(14, 42, 79, 1), 0 0 0 6px rgba(255, 255, 255, .22), 0 18px 30px -12px rgba(0, 0, 0, .7); transition: transform .6s var(--ue-ease), box-shadow .6s; }
.ue-jx-flag svg { width: 100%; height: 100%; display: block; }
.ue-jx-node::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255, 201, 40, .55); opacity: 0; animation: uePulse 2.8s ease-out infinite; }
.ue-jx-step:nth-child(2) .ue-jx-node::before { animation-delay: .9s; }
.ue-jx-step:nth-child(3) .ue-jx-node::before { animation-delay: 1.8s; }
.ue-jx-no { position: absolute; right: -.5rem; bottom: -.3rem; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .4rem; border-radius: 999px; background: var(--ue-grad-gold); color: #253047; font: 800 .72rem/1 var(--ue-font-ui); letter-spacing: .04em; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); }
@media (max-width: 767.98px) { .ue-jx-node { margin-bottom: 0; } }

/* Glass card */
.ue-jx-card { position: relative; height: calc(100% - 5.75rem); padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--ue-r-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .6s var(--ue-ease), background .4s, border-color .4s, box-shadow .6s var(--ue-ease); }
@media (max-width: 767.98px) { .ue-jx-card { height: auto; } }
.ue-jx-icon { position: absolute; top: 1.25rem; right: 1.25rem; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 201, 40, .12); color: var(--ue-gold); font-size: 1.1rem; transition: background .4s, color .4s, transform .6s var(--ue-ease); }
.ue-jx-role { display: block; padding-right: 3rem; font: 700 .68rem/1.3 var(--ue-font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ue-gold); margin-bottom: .5rem; }
.ue-jx-card h3 { font: 600 1.55rem/1.15 var(--ue-font-display); color: #fff; margin: 0 0 .6rem; letter-spacing: -.015em; }
.ue-jx-card p { margin: 0; font-size: .93rem; line-height: 1.65; color: rgba(255, 255, 255, .66); }
@media (hover: hover) {
    .ue-jx-step:hover .ue-jx-card { transform: translateY(-6px); background: rgba(255, 255, 255, .08); border-color: rgba(255, 201, 40, .45); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
    .ue-jx-step:hover .ue-jx-flag { transform: scale(1.06); }
    .ue-jx-step:hover .ue-jx-icon { background: var(--ue-gold); color: #253047; transform: rotate(-8deg); }
}

/* Footer row */
.ue-jx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .92rem; color: rgba(255, 255, 255, .78); }
.ue-jx-foot i { color: var(--ue-gold); margin-right: .35rem; }
@media (max-width: 575.98px) { .ue-jx-foot .ue-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ue-jx-track::after { transform: none !important; } .ue-jx-track .ue-jx-step:first-child::after { display: none; } }

/* ---------- Bangladesh network map ---------- */
.ue-bd { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .ue-bd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; } }
.ue-bd-map { position: relative; max-width: 470px; width: 100%; margin-inline: auto; }
.ue-bd-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.ue-bd-map .div-shape { fill: rgba(255, 255, 255, .06); stroke: rgba(130, 200, 245, .6); stroke-width: 1; stroke-linejoin: round; transition: fill .4s, stroke .4s; cursor: pointer; }
.ue-bd-map .div-shape:hover, .ue-bd-map .div-shape.is-hot { fill: rgba(22, 165, 232, .55); stroke: #fff; }
.ue-bd-map .div-shape { opacity: 0; transform: translateY(8px); transform-box: fill-box; transition: opacity .7s var(--ue-ease), transform .9s var(--ue-ease), fill .4s, stroke .4s; }
.ue-bd-map.is-inview .div-shape, .is-inview .ue-bd-map .div-shape { opacity: 1; transform: none; }
.ue-bd-map .div-pin circle.core { fill: var(--ue-gold); stroke: #fff; stroke-width: 1.5; }
.ue-bd-map .div-pin circle.pulse { fill: rgba(255, 201, 40, .45); transform-box: fill-box; transform-origin: center; animation: uePulse 2.8s ease-out infinite; }
.ue-bd-map .div-pin text { font: 700 12px var(--ue-font-ui); fill: #fff; paint-order: stroke; stroke: rgba(37, 48, 71, .85); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ue-bd-hub { fill: none; stroke: rgba(255, 201, 40, .55); stroke-width: 1.2; stroke-dasharray: 3 5; }
.ue-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ue-levels li { position: relative; display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #fff; font-weight: 700; transition: background .3s, border-color .3s, transform .5s var(--ue-ease); }
.ue-levels li:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 201, 40, .5); transform: translateX(4px); }
.ue-levels li .lv { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 201, 40, .14); color: var(--ue-gold); font: 700 .8rem var(--ue-font-ui); }
.ue-levels li:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem + 16px); bottom: -.6rem; width: 2px; height: .65rem; background: rgba(255, 201, 40, .45); }
.ue-div-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; }
.ue-div-list button { padding: .42rem .85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .85); font: 600 .8rem var(--ue-font-ui); transition: all .25s; }
.ue-div-list button:hover, .ue-div-list button.is-hot { background: var(--ue-gold); color: #253047; border-color: var(--ue-gold); }

/* ---------- People / team ---------- */
.ue-people { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 992px) { .ue-people { grid-template-columns: .9fr 1.1fr; gap: 3rem; } }
.ue-people-badge { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; margin-inline: auto; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 40%, #fff 0%, var(--ue-lavender-2) 70%); box-shadow: inset 0 0 0 1px rgba(8, 120, 209, .14); }
.ue-people-badge .orbit { position: absolute; inset: 7%; border-radius: 50%; border: 1px dashed rgba(8, 120, 209, .3); animation: ueSpin 70s linear infinite; }
.ue-people-badge .orbit i { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: #fff; color: var(--ue-purple); box-shadow: var(--ue-shadow-sm); animation: ueSpin 70s linear infinite reverse; }
.ue-people-badge .orbit i:nth-child(1) { left: 50%; top: 0; }
.ue-people-badge .orbit i:nth-child(2) { left: 100%; top: 50%; }
.ue-people-badge .orbit i:nth-child(3) { left: 50%; top: 100%; }
.ue-people-badge .orbit i:nth-child(4) { left: 0; top: 50%; }
.ue-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 576px) { .ue-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ue-roles li { display: flex; gap: .65rem; align-items: center; padding: .8rem .9rem; border-radius: 14px; background: #fff; border: 1px solid var(--ue-line); font-weight: 600; font-size: .88rem; color: var(--ue-ink); line-height: 1.3; transition: border-color .3s, transform .4s var(--ue-ease), box-shadow .3s; }
.ue-roles li:hover { border-color: rgba(8, 120, 209, .35); transform: translateY(-3px); box-shadow: var(--ue-shadow-sm); }
.ue-roles li i { color: var(--ue-purple); font-size: 1.05rem; flex-shrink: 0; }
@media (max-width: 379.98px) { .ue-roles { grid-template-columns: 1fr; } }

/* ---------- Brand (MY BABY flagship) ---------- */
.ue-brand-panel { position: relative; overflow: hidden; border-radius: var(--ue-r-xl); padding: clamp(1.75rem, 5vw, 4rem); background: linear-gradient(140deg, #fff 0%, var(--ue-lavender-2) 55%, #FFF6DA 100%); border: 1px solid var(--ue-line); }
.ue-brand-panel::before { content: ""; position: absolute; right: -12%; top: -25%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(22, 165, 232, .18), transparent 65%); }
.ue-brand-grid { position: relative; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .ue-brand-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.ue-brand-logo { width: min(320px, 80%); height: auto; margin-bottom: 1.5rem; filter: drop-shadow(0 18px 30px rgba(8, 120, 209, .2)); }
.ue-brand-tag { font: 600 clamp(1.3rem, 2.6vw, 1.75rem)/1.25 var(--font-heading); color: var(--color-blue-strong); margin-bottom: 1rem; }
.ue-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 576px) { .ue-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ue-pillar { padding: 1.1rem; border-radius: var(--ue-r); background: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--ue-shadow-sm); backdrop-filter: blur(6px); transition: transform .5s var(--ue-ease), box-shadow .4s; }
.ue-pillar:hover { transform: translateY(-5px); box-shadow: var(--ue-shadow); }
.ue-pillar i { display: block; font-size: 1.4rem; color: var(--ue-purple); margin-bottom: .55rem; }
.ue-pillar strong { font-size: .9rem; color: var(--ue-ink); line-height: 1.3; display: block; }

/* ---------- Intro split (company / brand intro) ---------- */
.ue-split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .ue-split { grid-template-columns: 1fr 1fr; gap: 4rem; } .ue-split.rev > :first-child { order: 2; } }
.ue-logo-card { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--ue-r-xl); background: #fff; border: 1px solid var(--ue-line); box-shadow: var(--ue-shadow); }
.ue-logo-card img { max-width: 340px; width: 100%; height: auto; }
.ue-focus-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Journals ---------- */
.ue-jcard { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--ue-r-lg); background: #fff; border: 1px solid var(--ue-line); overflow: hidden; box-shadow: var(--ue-shadow-sm); transition: transform .5s var(--ue-ease), box-shadow .5s var(--ue-ease), border-color .3s; }
.ue-jcard:hover { transform: translateY(-6px); box-shadow: var(--ue-shadow-lg); border-color: rgba(8, 120, 209, .28); }
.ue-jcard-top { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 1rem; align-items: center; padding: 1.25rem 1.25rem 1rem; background: linear-gradient(135deg, var(--ue-mist), #fff); border-bottom: 1px solid var(--ue-line); }
.ue-jcard-top .tin { width: 92px; }
.ue-jcard-top small { display: block; font: 700 .66rem/1.2 var(--ue-font-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--ue-purple); margin-bottom: .3rem; }
.ue-jcard-top strong { display: block; font-size: .92rem; line-height: 1.3; color: var(--ue-ink); }
.ue-jcard-top .ue-jdoc { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #C8102E; box-shadow: var(--ue-shadow-sm); }
.ue-jcard-body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.25rem 1.3rem; }
.ue-jcard h3 { font: 600 1.12rem/1.3 var(--ue-font-display); margin: 0 0 .55rem; }
.ue-jcard p { font-size: .88rem; line-height: 1.6; color: var(--ue-muted); margin: 0 0 1.1rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ue-jcard-foot { margin-top: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.ue-jcard-foot .ue-btn { flex: 1 1 auto; }
.ue-hcp-note { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--ue-r); background: var(--ue-gold-soft); border: 1px solid #FBE29A; color: #5A4200; font-size: .9rem; line-height: 1.55; }
.ue-hcp-note i { font-size: 1.2rem; color: var(--ue-gold-ink); margin-top: .05rem; }
.ue-filter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .75rem; border-radius: 999px; background: #fff; border: 1px solid var(--ue-line); box-shadow: var(--ue-shadow-sm); }
.ue-filter .ue-search { position: relative; flex: 1 1 260px; }
.ue-filter .ue-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ue-muted); }
.ue-filter input, .ue-filter select { width: 100%; min-height: 46px; border-radius: 999px; border: 1px solid var(--ue-line); padding: .6rem 1rem .6rem 2.6rem; font: 500 .95rem var(--ue-font-ui); background: var(--ue-pearl); color: var(--ue-ink); }
.ue-filter select { padding-left: 1rem; flex: 0 1 280px; width: auto; min-width: 200px; appearance: auto; }
.ue-filter input:focus, .ue-filter select:focus { outline: none; border-color: var(--ue-purple); box-shadow: 0 0 0 4px rgba(8, 120, 209, .14); }
@media (max-width: 575.98px) { .ue-filter { border-radius: var(--ue-r-lg); } .ue-filter select { flex: 1 1 100%; } }

/* ---------- Document reader ---------- */
.ue-reader { position: relative; display: flex; flex-direction: column; height: min(84vh, 1100px); min-height: 520px; border-radius: var(--ue-r-lg); overflow: hidden; background: #2A2540; border: 1px solid var(--ue-line); box-shadow: var(--ue-shadow-lg); }
.ue-reader.is-fullscreen, .ue-reader:fullscreen { height: 100vh; border-radius: 0; border: 0; }
.ue-reader-bar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .55rem .65rem; background: var(--ue-ink); color: #fff; font-size: .85rem; }
.ue-reader-bar .grp { display: flex; align-items: center; gap: .3rem; }
.ue-reader-bar .grp.end { margin-left: auto; }
.ue-reader-bar button, .ue-reader-bar a.rb { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .55rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; font: 600 .82rem var(--ue-font-ui); transition: background .2s; }
.ue-reader-bar button:hover, .ue-reader-bar a.rb:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ue-reader-bar button:disabled { opacity: .4; }
.ue-reader-bar input { width: 52px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; text-align: center; font: 600 .9rem var(--ue-font-ui); }
.ue-reader-bar .zoom { min-width: 54px; text-align: center; font-weight: 600; color: rgba(255, 255, 255, .8); }
.ue-reader-bar .ttl { flex: 1 1 100%; order: -1; padding: .15rem .35rem .35rem; font-weight: 600; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) { .ue-reader-bar .ttl { flex: 1 1 auto; order: 0; padding: 0 .5rem; max-width: 40%; } }
.ue-reader-pages { flex: 1; overflow: auto; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; scroll-behavior: smooth; overscroll-behavior: contain; }
.ue-reader-page { position: relative; background: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6); flex-shrink: 0; }
.ue-reader-page canvas { display: block; width: 100%; height: 100%; }
.ue-reader-page .pg { position: absolute; bottom: -1.5rem; right: 0; font-size: .72rem; color: rgba(255, 255, 255, .55); }
.ue-reader-state { position: absolute; inset: 56px 0 0; display: grid; place-items: center; text-align: center; color: rgba(255, 255, 255, .8); padding: 2rem; pointer-events: none; }
.ue-reader-state .spinner-border { color: var(--ue-gold); }
.ue-reader-state.error { pointer-events: auto; }
.ue-reader-state.error a { color: var(--ue-gold); }

/* Document modal */
.ue-doc-modal .modal-dialog { max-width: min(1100px, 96vw); margin-block: 2vh; }
.ue-doc-modal .modal-content { background: transparent; border: 0; }
.ue-doc-modal .ue-reader { height: 92vh; }
.ue-doc-modal .btn-close-doc { position: static; }
@media (max-width: 575.98px) { .ue-doc-modal .modal-dialog { margin: 0; max-width: 100vw; } .ue-doc-modal .ue-reader { height: 100vh; border-radius: 0; } }

/* ---------- Certificates ---------- */
.ue-cert { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--ue-r-lg); background: #fff; border: 1px solid var(--ue-line); overflow: hidden; box-shadow: var(--ue-shadow-sm); transition: transform .5s var(--ue-ease), box-shadow .5s var(--ue-ease), border-color .3s; }
.ue-cert:hover { transform: translateY(-6px); box-shadow: var(--ue-shadow-lg); border-color: rgba(255, 201, 40, .55); }
.ue-cert-preview { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, #FFF1F5, #FFF8FA); border: 0; padding: 0; display: block; width: 100%; cursor: pointer; }
.ue-cert-preview canvas, .ue-cert-preview img { position: absolute; left: 50%; top: 1.1rem; width: 72%; height: auto; transform: translateX(-50%); box-shadow: 0 16px 30px -14px rgba(37, 48, 71, .5); background: #fff; transition: transform .7s var(--ue-ease); }
.ue-cert:hover .ue-cert-preview canvas, .ue-cert:hover .ue-cert-preview img { transform: translateX(-50%) translateY(-6px) scale(1.03); }
.ue-cert-preview .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ue-purple); font-size: 2.5rem; opacity: .5; }
.ue-cert-preview .view { position: absolute; right: .8rem; bottom: .8rem; z-index: 2; display: inline-flex; gap: .4rem; align-items: center; padding: .4rem .75rem; border-radius: 999px; background: var(--ue-ink); color: #fff; font: 700 .74rem var(--ue-font-ui); opacity: 0; transform: translateY(6px); transition: all .35s var(--ue-ease); }
.ue-cert:hover .ue-cert-preview .view, .ue-cert-preview:focus-visible .view { opacity: 1; transform: none; }
@media (hover: none) { .ue-cert-preview .view { opacity: 1; transform: none; } }
.ue-cert-body { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.ue-cert-body .type { font: 700 .66rem/1.2 var(--ue-font-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--ue-gold-ink); margin-bottom: .45rem; }
.ue-cert-body h3 { font: 700 1rem/1.35 var(--ue-font-ui); margin: 0 0 .6rem; }
.ue-cert-body dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0 0 1rem; font-size: .8rem; }
.ue-cert-body dt { color: var(--ue-muted); font-weight: 600; }
.ue-cert-body dd { margin: 0; color: var(--ue-ink); font-weight: 600; word-break: break-word; }
.ue-cert-body .ue-btn { margin-top: auto; }
.ue-cert-group { display: flex; align-items: center; gap: .75rem; margin: 2.5rem 0 1.1rem; }
.ue-cert-group:first-child { margin-top: 0; }
.ue-cert-group h3 { font: 600 1.25rem var(--ue-font-display); margin: 0; }
.ue-cert-group::after { content: ""; flex: 1; height: 1px; background: var(--ue-line); }

/* ---------- Upcoming ---------- */
.ue-upcoming { display: grid; gap: 1.25rem; }
@media (min-width: 992px) { .ue-upcoming { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ue-up-card { position: relative; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--ue-r-xl); background: #fff; border: 1px dashed rgba(8, 120, 209, .35); overflow: hidden; }
.ue-up-card::after { content: "Coming Soon"; position: absolute; top: 1.25rem; right: -2.6rem; padding: .3rem 3rem; transform: rotate(35deg); background: var(--ue-grad-gold); color: #253047; font: 800 .62rem/1.2 var(--ue-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.ue-up-card header { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.15rem; }
.ue-up-card header h3 { margin: 0; font: 600 1.4rem var(--ue-font-display); }
.ue-up-card header small { display: block; font: 700 .66rem/1.2 var(--ue-font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ue-muted); }
.ue-up-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 419.98px) { .ue-up-list { grid-template-columns: 1fr; } }
.ue-up-list li { display: flex; gap: .55rem; align-items: center; padding: .6rem .75rem; border-radius: 12px; background: var(--ue-mist); font-size: .86rem; font-weight: 600; color: var(--ue-ink); line-height: 1.3; }
.ue-up-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ue-purple); flex-shrink: 0; }

/* ---------- Future timeline ---------- */
.ue-future { position: relative; display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .ue-future { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ue-future::before { content: ""; position: absolute; background: linear-gradient(90deg, var(--ue-gold), var(--ue-purple-2), rgba(255, 255, 255, .15)); }
@media (min-width: 768px) { .ue-future::before { left: 8%; right: 8%; top: 38px; height: 2px; } }
@media (max-width: 767.98px) { .ue-future::before { left: 37px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--ue-gold), var(--ue-purple-2)); } }
.ue-future li { position: relative; display: flex; gap: 1rem; align-items: center; }
@media (min-width: 768px) { .ue-future li { flex-direction: column; text-align: center; } }
.ue-future .orb { position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; background: var(--ue-ink-2); border: 2px solid rgba(255, 255, 255, .14); color: var(--ue-gold); font-size: 1.5rem; transition: all .6s var(--ue-ease); }
.ue-future li:first-child .orb { background: var(--ue-grad-gold); color: #253047; border-color: transparent; box-shadow: 0 0 0 8px rgba(255, 201, 40, .15); }
.ue-future li:hover .orb { transform: scale(1.08); border-color: var(--ue-gold); }
.ue-future .when { display: block; font: 700 .7rem/1 var(--ue-font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ue-gold); margin-bottom: .35rem; }
.ue-future .what { font: 600 1.3rem/1.2 var(--ue-font-display); color: #fff; }

/* ---------- Vision & mission ---------- */
.ue-vision { position: relative; padding: clamp(1.75rem, 5vw, 3.5rem); border-radius: var(--ue-r-xl); background: var(--ue-grad-stage); color: #fff; overflow: hidden; }
.ue-vision::before { content: "\201C"; position: absolute; right: 4%; top: -12%; font: 400 clamp(10rem, 22vw, 18rem)/1 var(--ue-font-display); color: rgba(255, 255, 255, .05); }
.ue-vision blockquote { position: relative; margin: 0; font: 500 clamp(1.3rem, 2.8vw, 2.05rem)/1.35 var(--ue-font-display); letter-spacing: -.01em; color: #fff; max-width: 900px; }
.ue-mission { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 1.25rem; }
@media (min-width: 576px) { .ue-mission { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ue-mission { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Check list / commitment ---------- */
.ue-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
@media (min-width: 576px) { .ue-checks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ue-checks li { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; color: var(--ue-ink); font-size: .95rem; line-height: 1.45; }
.ue-checks li::before { content: "\F26E"; font-family: "bootstrap-icons"; display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--ue-sprout-soft); color: var(--ue-sprout); font-size: .8rem; margin-top: .05rem; }
.ue-dark .ue-checks li { color: #fff; }
.ue-dark .ue-checks li::before { background: rgba(255, 201, 40, .16); color: var(--ue-gold); }

/* ---------- Strength equation ---------- */
.ue-equation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: stretch; }
@media (min-width: 992px) { .ue-equation { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.ue-eq-item { position: relative; padding: 1.5rem 1rem; text-align: center; border-radius: var(--ue-r-lg); background: #fff; border: 1px solid var(--ue-line); box-shadow: var(--ue-shadow-sm); }
.ue-eq-item .ue-icon { margin: 0 auto .9rem; width: 60px; height: 60px; font-size: 1.6rem; border-radius: 50%; }
.ue-eq-item strong { font: 600 1.15rem/1.25 var(--ue-font-display); color: var(--ue-ink); }
@media (min-width: 992px) { .ue-eq-item:not(:last-child)::after { content: "+"; position: absolute; right: -1.45rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ue-gold); color: #253047; font: 800 1.1rem/1 var(--ue-font-ui); } }
.ue-eq-arrow { display: grid; place-items: center; margin: 1rem auto; width: 44px; height: 44px; border-radius: 50%; background: var(--ue-lavender-2); color: var(--ue-purple); animation: ueBob 3s ease-in-out infinite; }

/* ---------- Partnership CTA ---------- */
.ue-cta { position: relative; overflow: hidden; border-radius: var(--ue-r-xl); padding: clamp(1.75rem, 6vw, 4.5rem); background: var(--ue-grad-stage); color: rgba(255, 255, 255, .78); }
.ue-cta::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 40, .22), transparent 65%); }
.ue-cta > * { position: relative; }
.ue-cta h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; }
.ue-cta h2 em { color: var(--ue-gold); font-style: normal; font-weight: inherit; }
.ue-cta-cols { display: grid; gap: 1.5rem; margin: 2rem 0; }
@media (min-width: 768px) { .ue-cta-cols { grid-template-columns: 1fr 1fr; } }
.ue-cta-cols h3 { font: 700 .72rem/1 var(--ue-font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ue-gold); margin-bottom: .9rem; }

/* ---------- Social ---------- */
.ue-social { display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--ue-r-xl); background: linear-gradient(120deg, var(--ue-lavender-2), #fff 60%, var(--ue-gold-soft)); border: 1px solid var(--ue-line); }
@media (min-width: 992px) { .ue-social { grid-template-columns: 1fr auto; } }
.ue-social h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .4rem; }
.ue-social-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.ue-social-links a { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .55rem 1rem .55rem .6rem; border-radius: 999px; background: #fff; border: 1px solid var(--ue-line); color: var(--ue-ink); font-weight: 700; font-size: .88rem; text-decoration: none; box-shadow: var(--ue-shadow-sm); transition: transform .35s var(--ue-ease), box-shadow .35s, border-color .3s; max-width: 100%; }
.ue-social-links a:hover { transform: translateY(-3px); box-shadow: var(--ue-shadow); border-color: rgba(8, 120, 209, .3); color: var(--ue-ink); }
.ue-social-links a i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--ue-purple); font-size: 1rem; flex-shrink: 0; }
.ue-social-links a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ue-social-links a.facebook i { background: #1877F2; }
.ue-social-links a.instagram i { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.ue-social-links a.youtube i { background: #FF0000; }
.ue-social-links a.linkedin i { background: #0A66C2; }
.ue-social-links a.whatsapp i { background: var(--ue-wa); }
.ue-social-links a.email i { background: var(--ue-ink); }
@media (max-width: 575.98px) { .ue-social-links a { flex: 1 1 100%; } }

/* ---------- Footer ---------- */
.ue-footer { position: relative; background: var(--color-background-soft); color: var(--color-text-muted); padding-top: clamp(3.5rem, 7vw, 5.5rem); font-size: .94rem; overflow: hidden; border-top: 1px solid var(--color-border); }
/* Logo-colour strip: red, green, blue, yellow */
.ue-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--mb-grad-brand); }
.ue-footer::after { content: ""; position: absolute; right: -15%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245, 45, 104, .08), transparent 65%); pointer-events: none; }
.ue-footer .container { position: relative; z-index: 1; }
.ue-footer-top { display: grid; gap: 2.25rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--color-border); }
@media (min-width: 768px) { .ue-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ue-footer-top { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)) 1.3fr; gap: 2rem; } }
.ue-footer-brand .ue-footer-logo { display: inline-block; line-height: 0; border-radius: var(--radius-md); }
.ue-footer-brand img { width: 170px; height: auto; aspect-ratio: 760 / 700; object-fit: contain; }
.ue-footer-brand .co { margin: 1.1rem 0 .35rem; font: 800 .74rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-blue-strong); }
.ue-footer-brand p { line-height: 1.7; margin: 0; }
.ue-footer h2 { font: 600 .8rem/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text); margin-bottom: 1.1rem; }
.ue-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ue-footer a { color: var(--color-text); text-decoration: none; transition: color .2s; }
.ue-footer a:hover { color: var(--color-primary-strong); }
.ue-footer a.ue-btn, .ue-footer a.ue-btn:hover { color: var(--b-fg); }
.ue-footer .contact-line { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; line-height: 1.5; word-break: break-word; }
.ue-footer .contact-line i { color: var(--color-primary); margin-top: .15rem; }
.ue-footer-notice { margin-top: 2rem; padding: 1rem 1.15rem; border-radius: var(--ue-r); background: var(--color-yellow-tint); border: 1px solid #FBE29A; color: #5A4200; font-size: .84rem; line-height: 1.6; display: flex; gap: .7rem; }
.ue-footer-notice i { color: var(--color-yellow-ink); margin-top: .1rem; }
.ue-footer-bottom { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; padding: 1.4rem 0 1.75rem; font-size: .84rem; }
.ue-footer-bottom nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ---------- Page hero (inner pages) ---------- */
/* Light, warm surface (base styles in app.css); headings use the brand heading face */
.page-hero h1 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.02em; }
.ue-page-hero-art { position: absolute; right: -4%; bottom: -10%; width: min(46%, 560px); opacity: .9; pointer-events: none; display: none; }
@media (min-width: 1200px) { .ue-page-hero-art { display: block; } }

/* Sub-navigation (company profile chapters) */
.ue-subnav { position: sticky; top: 64px; z-index: 1020; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ue-line); }
.ue-subnav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: .55rem 0; overflow-x: auto; scrollbar-width: none; }
.ue-subnav ul::-webkit-scrollbar { display: none; }
.ue-subnav a { display: block; padding: .5rem .9rem; border-radius: 999px; color: var(--ue-muted); font: 600 .84rem var(--ue-font-ui); white-space: nowrap; text-decoration: none; transition: all .25s; }
.ue-subnav a:hover { color: var(--ue-purple); background: var(--ue-mist); }
.ue-subnav a.active { color: #fff; background: var(--ue-ink); }

/* ---------- Product detail ---------- */
.ue-pd { display: grid; gap: 2rem; }
@media (min-width: 992px) { .ue-pd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; } .ue-pd-gallery { position: sticky; top: 96px; } }
.ue-pd-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--ue-r-xl); background: radial-gradient(70% 60% at 50% 38%, #fff 0%, #FFEAF0 80%); border: 1px solid var(--ue-line); overflow: hidden; }
.ue-pd-stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 8%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 48, 71, .25), transparent); }
.ue-pd-stage .tin { width: 54%; z-index: 1; transition: opacity .35s; }
.ue-pd-stage .tin.flat { width: 92%; }
.ue-pd-thumbs { display: flex; gap: .6rem; margin-top: .9rem; overflow-x: auto; padding-bottom: .25rem; }
.ue-pd-thumbs button { flex: 0 0 84px; height: 84px; padding: .35rem; border-radius: 16px; border: 2px solid var(--ue-line); background: #fff; transition: border-color .25s; }
.ue-pd-thumbs button.active, .ue-pd-thumbs button:hover { border-color: var(--ue-purple); }
.ue-pd-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.ue-pd-info h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; margin-bottom: .9rem; }
.ue-pd-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1.5rem 0; }
.ue-pd-specs > div { padding: .9rem; border-radius: 16px; background: var(--ue-mist); border: 1px solid var(--ue-line); }
.ue-pd-specs small { display: block; font: 700 .64rem/1.2 var(--ue-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ue-muted); margin-bottom: .35rem; }
.ue-pd-specs strong { font-size: .92rem; color: var(--ue-ink); line-height: 1.3; display: block; word-break: break-word; }
@media (max-width: 419.98px) { .ue-pd-specs { grid-template-columns: 1fr 1fr; } .ue-pd-specs > div:last-child { grid-column: 1 / -1; } }
.ue-pd-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
@media (max-width: 575.98px) { .ue-pd-actions .ue-btn { flex: 1 1 100%; } }
.ue-pd-tabs { position: sticky; top: 64px; z-index: 10; display: flex; gap: .3rem; overflow-x: auto; padding: .5rem; margin-bottom: 1.5rem; border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid var(--ue-line); box-shadow: var(--ue-shadow-sm); backdrop-filter: blur(10px); scrollbar-width: none; list-style: none; }
.ue-pd-tabs::-webkit-scrollbar { display: none; }
.ue-pd-tabs a { display: block; padding: .5rem .95rem; border-radius: 999px; white-space: nowrap; color: var(--ue-muted); font: 600 .84rem var(--ue-font-ui); text-decoration: none; }
.ue-pd-tabs a:hover { color: var(--ue-purple); }
.ue-pd-tabs a.active { background: var(--ue-ink); color: #fff; }
.ue-pd-block { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--ue-r-lg); background: #fff; border: 1px solid var(--ue-line); margin-bottom: 1rem; scroll-margin-top: 140px; }
.ue-pd-block > h2 { display: flex; align-items: center; gap: .75rem; font: 600 1.4rem var(--ue-font-display); margin-bottom: 1.1rem; }
.ue-pd-block > h2 .ue-icon { width: 42px; height: 42px; font-size: 1.05rem; border-radius: 12px; }
.ue-pd-block .prose { max-width: none; }
.ue-pd-block .prose table, .ue-pd-block table { width: 100%; }
.ue-kv { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ue-kv th, .ue-kv td { padding: .75rem .25rem; border-bottom: 1px solid var(--ue-line); vertical-align: top; }
.ue-kv th { width: 38%; color: var(--ue-muted); font-weight: 600; }
.ue-kv td { color: var(--ue-ink); font-weight: 600; }
.ue-kv tr:last-child th, .ue-kv tr:last-child td { border-bottom: 0; }
.ue-notice { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--ue-r); background: var(--ue-sprout-soft); border: 1px solid #C5E9CB; color: #1A5E2A; font-size: .88rem; line-height: 1.6; }
.ue-notice i { color: var(--ue-sprout); font-size: 1.15rem; margin-top: .05rem; }

/* ---------- Order modal ---------- */
.ue-order .modal-content { border: 0; border-radius: var(--ue-r-xl); overflow: hidden; box-shadow: var(--ue-shadow-lg); }
.ue-order .modal-header { border: 0; padding: 1.25rem 1.5rem 0; }
.ue-order .modal-title { font: 600 1.45rem var(--ue-font-display); }
.ue-order .modal-body { padding: 1rem 1.5rem 1.5rem; }
.ue-order-product { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--ue-r); background: var(--ue-mist); margin-bottom: 1.25rem; }
.ue-order-product .tin { width: 92px; }
.ue-order-product strong { display: block; color: var(--ue-ink); line-height: 1.3; }
.ue-order-product small { color: var(--ue-muted); }
.ue-order label.lbl { display: block; font: 700 .72rem/1 var(--ue-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ue-muted); margin-bottom: .55rem; }
.ue-qty { display: inline-flex; align-items: center; border: 1px solid var(--ue-line); border-radius: 999px; background: #fff; overflow: hidden; }
.ue-qty button { width: 48px; height: 48px; border: 0; background: none; font-size: 1.2rem; color: var(--ue-ink); }
.ue-qty button:hover { background: var(--ue-mist); color: var(--ue-purple); }
.ue-qty input { width: 64px; height: 48px; border: 0; text-align: center; font: 700 1.1rem var(--ue-font-ui); color: var(--ue-ink); -moz-appearance: textfield; }
.ue-qty input::-webkit-outer-spin-button, .ue-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ue-packs { display: flex; flex-wrap: wrap; gap: .5rem; }
.ue-packs label { cursor: pointer; }
.ue-packs input { position: absolute; opacity: 0; pointer-events: none; }
.ue-packs span { display: inline-block; padding: .65rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--ue-line); font-weight: 700; font-size: .9rem; color: var(--ue-ink); transition: all .2s; }
.ue-packs input:checked + span { border-color: var(--ue-purple); background: var(--ue-lavender-2); color: var(--ue-purple); }
.ue-packs input:focus-visible + span { outline: 3px solid rgba(8, 120, 209, .45); outline-offset: 2px; }
.ue-order-preview { margin: 1.25rem 0; padding: .9rem 1rem; border-radius: 14px; background: #E7F7EC; border: 1px solid #C6EBD2; font-size: .84rem; color: #12502C; white-space: pre-line; line-height: 1.55; }
.ue-order-preview b { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #1B7A41; margin-bottom: .35rem; }

/* ---------- Reveal & motion ---------- */
.ue-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ue-ease), transform 1.1s var(--ue-ease); transition-delay: var(--d, 0ms); }
.ue-reveal.from-left { transform: translateX(-36px); }
.ue-reveal.from-right { transform: translateX(36px); }
.ue-reveal.zoom { transform: scale(.94); }
.ue-reveal.is-in { opacity: 1; transform: none; }
.ue-mask { clip-path: inset(0 0 100% 0 round var(--ue-r-xl)); transition: clip-path 1.4s var(--ue-ease); }
.ue-mask.is-in { clip-path: inset(0 0 0 0 round var(--ue-r-xl)); }
.ue-kenburns { animation: ueKen 22s ease-in-out infinite alternate; }
@keyframes ueKen { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1%); } }
.ue-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ue-marquee-track { display: flex; gap: .75rem; width: max-content; animation: ueMarquee 40s linear infinite; }
.ue-marquee:hover .ue-marquee-track { animation-play-state: paused; }
@keyframes ueMarquee { to { transform: translateX(-50%); } }
.ue-marquee .ue-chip { white-space: nowrap; }

/* Trust strip */
.ue-trust { position: relative; z-index: 2; margin-top: -2.5rem; }
.ue-trust-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: var(--ue-r-lg); overflow: hidden; background: var(--ue-line); box-shadow: var(--ue-shadow); border: 1px solid var(--ue-line); }
@media (min-width: 992px) { .ue-trust-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ue-trust-item { display: flex; gap: .85rem; align-items: center; padding: 1.15rem 1.2rem; background: #fff; }
.ue-trust-item strong { display: block; font-size: .9rem; color: var(--ue-ink); line-height: 1.25; }
.ue-trust-item small { display: block; font-size: .76rem; color: var(--ue-muted); line-height: 1.35; margin-top: .15rem; }
@media (max-width: 399.98px) { .ue-trust-inner { grid-template-columns: 1fr; } }

/* Empty states */
.ue-empty { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem; border-radius: var(--ue-r-xl); border: 1px dashed rgba(8, 120, 209, .3); background: var(--ue-pearl); }
.ue-empty i { font-size: 2.2rem; color: var(--ue-purple); display: block; margin-bottom: .75rem; }
.ue-empty h3 { font: 600 1.3rem var(--ue-font-display); }
.ue-empty p { color: var(--ue-muted); max-width: 480px; margin: .25rem auto 1.25rem; }

/* Floating WhatsApp / back to top (restyled) */
.floating-whatsapp { background: linear-gradient(135deg, #22B45E, #138A46) !important; box-shadow: 0 16px 30px -12px rgba(19, 138, 70, .7) !important; }
.back-to-top { background: var(--ue-ink) !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .ue-reveal, .ue-hero-copy > *, .ue-bd-map .div-shape { opacity: 1 !important; transform: none !important; }
    .ue-mask { clip-path: none !important; }
    .ue-route-solid { stroke-dashoffset: 0 !important; }
}
@media print { .ue-header, .ue-topbar, .ue-footer, .floating-whatsapp, .back-to-top { display: none !important; } }

/* Static hero copy (inner pages) animates in once on load */
.ue-hero-copy.is-static > * { animation: ueRise 1s var(--ue-ease) both; opacity: 1; transform: none; }
.ue-hero-copy.is-static > :nth-child(2) { animation-delay: .08s; }
.ue-hero-copy.is-static > :nth-child(3) { animation-delay: .16s; }
.ue-hero-copy.is-static > :nth-child(4) { animation-delay: .24s; }
.ue-hero-copy.is-static > :nth-child(5) { animation-delay: .32s; }
@keyframes ueRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ue-hero .breadcrumb { display: inline-flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: .4rem .9rem; margin-bottom: 1.25rem; font-size: .8rem; }
.ue-hero .breadcrumb-item a:hover { color: var(--color-primary-strong); }
.ue-hero.inner .ue-hero-inner { min-height: auto; padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2.25rem, 4.5vw, 3.75rem); }
.ue-hero.inner .ue-hero-title, .ue-hero.inner h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); margin-bottom: 1rem; }
.page-hero { padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2rem, 4vw, 3.25rem) !important; }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.3rem) !important; }

/* QA fixes */
.ue-hero .ue-chip.glass { background: #fff; border-color: var(--color-border); color: var(--color-text); backdrop-filter: none; }
.ue-hero .ue-chip.glass i { color: var(--color-primary); }
.ue-hero a.ue-chip.glass:hover { border-color: var(--color-primary-soft); color: var(--color-primary-strong); }
.ue-brand-logo, .ue-logo-card img { mix-blend-mode: multiply; }
.ue-journey-map svg { max-height: 400px; margin-inline: auto; }
.ue-cta .ue-kicker, .ue-vision .ue-kicker, .ue-glance-hero .ue-kicker { color: var(--ue-gold); }
.ue-cta .ue-checks li { color: #fff; }
.ue-cta .ue-checks li::before { background: rgba(255, 201, 40, .16); color: var(--ue-gold); }
.ue-footer .ue-footer-notice, .ue-footer .feeding-notice { background: var(--color-yellow-tint) !important; color: #5A4200 !important; }
.ue-footer .ue-footer-notice p { color: #5A4200; }
.ue-footer h2::before { display: none; }
@supports (overflow: clip) { html { overflow-x: clip; } }
@media (max-width: 991.98px) { .ue-reveal.from-left, .ue-reveal.from-right { transform: translateY(28px); } }
.ue-chip { max-width: 100%; white-space: normal; }
.ue-packs input:checked + span { background: var(--ue-purple); border-color: var(--ue-purple); color: #fff; box-shadow: 0 8px 18px -10px rgba(8, 120, 209, .8); }
.ue-glance-hero .ue-stat-num, .ue-card.glass .ue-stat-num { color: #fff; }
.ue-glance-hero .ue-stat-label, .ue-card.glass .ue-stat-label { color: var(--ue-gold); }
@media (max-width: 399.98px) { #quality-documentation .ue-icon.sm { width: 36px; height: 36px; font-size: .95rem; } #quality-documentation .p-3 { padding: .75rem !important; gap: .6rem !important; } }

/* ---------- Company introduction (photo collage + focus cards) ---------- */
.ue-co { overflow: hidden; }
.ue-co-blob { position: absolute; left: -12%; top: 10%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245, 45, 104, .16), transparent 65%); pointer-events: none; }
.ue-co .container { position: relative; }
.ue-co-grid { display: grid; gap: clamp(3rem, 6vw, 5.5rem); align-items: center; }
@media (min-width: 992px) { .ue-co-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* Collage */
.ue-co-media { position: relative; padding: 2.5rem 3.5rem 3.5rem 0; max-width: 600px; width: 100%; margin-inline: auto; }
.ue-co-photo { position: relative; margin: 0; border-radius: var(--ue-r-xl); overflow: hidden; aspect-ratio: 5 / 4.3; box-shadow: var(--ue-shadow-lg); background: var(--ue-mist); }
.ue-co-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; transition: transform 1.4s var(--ue-ease); }
.ue-co-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(37, 48, 71, .35)); pointer-events: none; }
.ue-co-media:hover .ue-co-photo:not(.sm) img { transform: scale(1.04); }
.ue-co-photo.sm { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; border: 6px solid #fff; border-radius: var(--ue-r-lg); box-shadow: 0 30px 60px -28px rgba(37, 48, 71, .55); animation: ueBob 8s ease-in-out infinite; }
.ue-co-photo.sm img { object-position: center; }
.ue-co-photo.sm::after { display: none; }
.ue-co-logo { position: absolute; left: -1.5rem; top: 0; display: grid; place-items: center; width: 150px; padding: .9rem 1rem; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -24px rgba(37, 48, 71, .5); border: 1px solid var(--ue-line); }
.ue-co-logo img { width: 100%; height: auto; mix-blend-mode: multiply; }
.ue-co-badge { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2; display: flex; align-items: center; gap: .85rem; padding: .85rem 1.15rem; border-radius: 18px; background: rgba(37, 48, 71, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, .8); font-size: .78rem; line-height: 1.3; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.ue-co-badge strong { font: 600 2rem/1 var(--ue-font-display); color: #fff; letter-spacing: -.03em; }
.ue-co-badge strong span + * { color: var(--ue-gold); }
@media (max-width: 575.98px) {
    .ue-co-media { padding: 1.75rem 1.75rem 2.75rem 0; }
    .ue-co-logo { left: -.5rem; width: 112px; padding: .6rem .7rem; border-radius: 16px; }
    .ue-co-photo.sm { width: 52%; border-width: 4px; }
    .ue-co-badge { left: .75rem; bottom: .75rem; padding: .65rem .85rem; }
    .ue-co-badge strong { font-size: 1.6rem; }
}

/* Copy */
.ue-co-copy .ue-title { font-size: clamp(2rem, 4vw, 3.1rem); }
.ue-co-focus { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ue-co-focus li { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: var(--ue-r); background: #fff; border: 1px solid var(--ue-line); font-weight: 700; font-size: .95rem; color: var(--ue-ink); line-height: 1.25; transition: transform .5s var(--ue-ease), box-shadow .5s var(--ue-ease), border-color .3s; }
.ue-co-focus .ic { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--ue-lavender-2); color: var(--ue-purple); font-size: 1.1rem; transition: background .4s, color .4s, transform .5s var(--ue-ease); }
.ue-co-focus li:hover { transform: translateY(-4px); border-color: rgba(8, 120, 209, .3); box-shadow: var(--ue-shadow); }
.ue-co-focus li:hover .ic { background: var(--ue-grad-primary); color: #fff; transform: rotate(-6deg); }
@media (max-width: 379.98px) { .ue-co-focus { grid-template-columns: 1fr; } }
.ue-co-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2rem 0 0; padding: 1.4rem 0; border-block: 1px solid var(--ue-line); }
.ue-co-stats > div { padding-inline: 1rem; }
.ue-co-stats > div:first-child { padding-left: 0; }
.ue-co-stats > div + div { border-left: 1px solid var(--ue-line); }
.ue-co-stats dt { order: 2; font: 700 .68rem/1.3 var(--ue-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ue-muted); margin-top: .4rem; }
.ue-co-stats div { display: flex; flex-direction: column-reverse; }
.ue-co-stats dd { margin: 0; font: 600 clamp(2rem, 4vw, 2.75rem)/1 var(--ue-font-display); letter-spacing: -.03em; color: var(--ue-ink); }
.ue-co-stats dd sup { font-size: .5em; top: -.8em; color: var(--ue-gold); }
.ue-co-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
@media (max-width: 575.98px) { .ue-co-actions .ue-btn { width: 100%; } .ue-co-stats > div { padding-inline: .6rem; } }
.ue-co-badge i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ue-grad-gold); color: #253047; font-size: 1rem; }
.ue-co-badge strong { display: block; font: 700 .95rem/1.25 var(--ue-font-ui); letter-spacing: 0; }
@media (max-width: 575.98px) { .ue-co-focus li { padding: .8rem .85rem; gap: .65rem; font-size: .88rem; } .ue-co-focus .ic { width: 36px; height: 36px; font-size: 1rem; } }

/* Header logo: the horizontal MyBaby lockup (mark + wordmark + tagline), never stretched */
.ue-brand img { height: 56px; width: auto; max-width: none; object-fit: contain; }
@media (min-width: 1200px) and (max-width: 1399.98px) { .ue-brand img { height: 48px; } }
@media (max-width: 575.98px) { .ue-brand img { height: 44px; } }

/* ==========================================================================
   Home hero — copy on the left, a framed banner card on the right, on a soft sky-blue panel.
   Controls (arrows + dots) sit under the copy; pause sits at the far right.
   Tablet & mobile: banner card on top, copy underneath.
   ========================================================================== */
.ue-hx { position: relative; isolation: isolate; overflow: hidden; color: var(--color-text);
    background: linear-gradient(180deg, #F1F7FC 0%, #E7F1FA 100%); }
.ue-hx::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(38% 60% at 6% 12%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(30% 45% at 55% 100%, rgba(255, 255, 255, .7), transparent 70%), radial-gradient(35% 55% at 100% 0%, rgba(22, 165, 232, .10), transparent 70%); }
.ue-hx .hs-viewport { position: relative; z-index: 1; touch-action: pan-y; }
.ue-hx .hs-track { display: grid; grid-template-columns: minmax(0, 1fr); }
.ue-hx .hero-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .9s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .9s; }
.ue-hx .hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .9s cubic-bezier(.4, 0, .2, 1), visibility 0s; }

.ue-hx-inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
    min-height: clamp(540px, 70vh, 650px); padding-block: clamp(2.5rem, 4.5vw, 3.5rem) 9rem; }

/* Copy */
.ue-hx-copy { max-width: 680px; min-width: 0; }
.ue-hx-kicker { display: inline-flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem;
    font: 800 .86rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--color-primary-strong); }
.ue-hx-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.ue-hx-title { font: 800 clamp(2.2rem, 3.7vw, 3.4rem)/1.14 var(--font-body); letter-spacing: -.01em; color: var(--color-text); margin: 0 0 1.5rem; text-wrap: balance; }
.ue-hx-title em { font-style: normal; color: var(--color-primary); }
.ue-hx-lead { font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.65; color: var(--color-text-muted); max-width: 32rem; margin: 0 0 2.2rem; }
.ue-hx-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.ue-hx-actions .ue-btn.lg { min-height: 60px; padding-inline: 1.6rem; font-size: 1.02rem; }
.ue-hx .ue-btn-white { --b-fg: var(--color-primary-strong); border-color: var(--color-border); box-shadow: 0 10px 24px -18px rgba(37, 48, 71, .5); }
.ue-hx .ue-btn-white:hover { --b-fg: var(--color-primary-strong); border-color: var(--color-primary); }
.ue-hx-trust { display: flex; flex-wrap: wrap; gap: .8rem 2.2rem; list-style: none; margin: 2.1rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid rgba(37, 48, 71, .1); max-width: 44rem;
    font-size: 1.02rem; font-weight: 600; color: var(--color-text); }
.ue-hx-trust li { display: inline-flex; align-items: center; gap: .55rem; }
.ue-hx-trust i { color: var(--color-green); font-size: 1.05rem; }
.ue-hx-trust li:nth-child(2) i { color: var(--color-sky, #16A5E8); }

/* Banner card */
.ue-hx-card { position: relative; border-radius: 18px; overflow: hidden; background: #fff; aspect-ratio: 1672 / 941;
    box-shadow: 0 40px 70px -40px rgba(37, 48, 71, .45), 0 0 0 1px rgba(255, 255, 255, .8); }
.ue-hx-card picture, .ue-hx-card img { display: block; width: 100%; height: 100%; }
.ue-hx-card img { object-fit: cover; object-position: center; }

/* Entrance of the active slide */
.ue-hx-copy > *, .ue-hx-card { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
.ue-hx-card { transform: translateX(30px) scale(.98); }
.ue-hx .hero-slide.is-active .ue-hx-copy > *, .ue-hx .hero-slide.is-active .ue-hx-card { opacity: 1; transform: none; transition: opacity .9s ease .25s, transform 1s var(--ue-ease) .25s; }
.ue-hx .hero-slide.is-active .ue-hx-copy > :nth-child(2) { transition-delay: .35s; }
.ue-hx .hero-slide.is-active .ue-hx-copy > :nth-child(3) { transition-delay: .45s; }
.ue-hx .hero-slide.is-active .ue-hx-copy > :nth-child(4) { transition-delay: .55s; }
.ue-hx .hero-slide.is-active .ue-hx-copy > :nth-child(5) { transition-delay: .65s; }
.ue-hx .hero-slide.is-active .ue-hx-card { transition-delay: .4s; }

/* Controls: ← • • • → under the copy, pause at the right */
.ue-hx-controls { position: absolute; left: 0; right: 0; bottom: 4.25rem; z-index: 5; pointer-events: none; }
.ue-hx-controls .container { display: flex; align-items: center; gap: 1.25rem; }
.ue-hx-controls button { pointer-events: auto; }
.ue-hx .hs-arrow, .ue-hx .hs-toggle { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; color: var(--color-text); font-size: 1.15rem;
    box-shadow: 0 10px 24px -14px rgba(37, 48, 71, .45); transition: background .3s, color .3s, transform .3s; }
.ue-hx .hs-toggle { width: 48px; height: 48px; margin-left: auto; font-size: 1rem; }
.ue-hx .hs-arrow:hover, .ue-hx .hs-toggle:hover { background: var(--color-primary-strong); color: #fff; }
.ue-hx .hs-arrow:active { transform: scale(.94); }
.ue-hx .hs-dots { display: flex; align-items: center; gap: .6rem; }
.ue-hx .hs-dot { position: relative; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 999px; background: #B9C3D0; overflow: hidden; cursor: pointer; transition: width .4s var(--ue-ease), background .3s; }
.ue-hx .hs-dot:hover { background: #95A1B2; }
.ue-hx .hs-dot.is-active { width: 54px; background: #F8C9D2; }
.ue-hx .hs-dot .hs-progress { position: absolute; inset: 0; border-radius: inherit; background: var(--color-primary); transform: scaleX(0); transform-origin: 0 50%; }
.ue-hx .hs-dot.is-active .hs-progress { transform: scaleX(1); }
.ue-hx.hs-run .hs-dot.is-active .hs-progress { transform: scaleX(0); animation: ueProgress var(--hs-interval, 6500ms) linear forwards; }
.ue-hx.hs-paused .hs-dot.is-active .hs-progress { animation-play-state: paused; }
/* Keep the active dot's head visible as a red bead while the bar fills */
.ue-hx .hs-dot.is-active::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); z-index: 1; }

/* Laptop widths: keep the three hero buttons on one row */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .ue-hx-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; }
    .ue-hx-title { font-size: clamp(2.2rem, 3.4vw, 2.9rem); }
    .ue-hx-actions { gap: .6rem; }
    .ue-hx-actions .ue-btn.lg { min-height: 54px; padding-inline: 1.15rem; font-size: .95rem; }
}
/* Tablet & mobile: card on top, copy underneath */
@media (max-width: 991.98px) {
    .ue-hx-inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; min-height: 0; padding-block: 1.75rem 9.5rem; }
    .ue-hx-card { order: -1; max-width: 720px; width: 100%; margin-inline: auto; }
    .ue-hx-copy { max-width: 680px; }
    .ue-hx-controls .container { gap: .9rem; }
    .ue-hx .hs-arrow { width: 46px; height: 46px; }
    .ue-hx .hs-toggle { width: 42px; height: 42px; }
}
@media (max-width: 575.98px) {
    .ue-hx-card { border-radius: 14px; }
    .ue-hx-kicker { font-size: .74rem; letter-spacing: .14em; margin-bottom: 1rem; }
    .ue-hx-title { font-size: clamp(1.95rem, 8.6vw, 2.4rem); margin-bottom: 1rem; }
    .ue-hx-lead { margin-bottom: 1.5rem; }
    .ue-hx-actions .ue-btn { flex: 1 1 100%; }
    .ue-hx-actions .ue-btn.lg { min-height: 54px; }
    .ue-hx-trust { flex-direction: column; gap: .6rem; margin-top: 1.5rem; padding-top: 1.25rem; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ue-hx-copy > *, .ue-hx-card { opacity: 1 !important; transform: none !important; }
}

/* Header actions sit right when the desktop nav is hidden */
@media (max-width: 1199.98px) { .ue-nav + .ue-header-actions { margin-left: auto; } }

/* ==========================================================================
   Company Profile — corporate hero + closing band (light panel, photo right)
   ========================================================================== */
.ue-cph { position: relative; isolation: isolate; overflow: hidden; background: var(--color-background-soft); color: var(--color-text); padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--color-border); }
.ue-cph::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 90% at 0% 0%, rgba(245, 45, 104, .10), transparent 60%), radial-gradient(40% 60% at 15% 100%, rgba(54, 184, 74, .09), transparent 60%); }
.ue-cph-media { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: -1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%); }
.ue-cph-media picture, .ue-cph-media img { display: block; width: 100%; height: 100%; }
.ue-cph-media img { object-fit: cover; object-position: 60% 50%; animation: ueHxZoom 14s cubic-bezier(.25, .46, .45, .94) both; }
.ue-cph-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(255, 248, 250, .9)); }
.ue-cph .container { position: relative; }
.ue-cph-copy { max-width: 600px; padding-block: 1rem 2.5rem; }
.ue-cph .breadcrumb { display: inline-flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: .4rem .9rem; margin-bottom: 1.25rem; font-size: .8rem; }
.ue-cph .breadcrumb-item a:hover { color: var(--color-primary-strong); }
.ue-cph-title { font: 700 clamp(2.1rem, 4.6vw, 3.6rem)/1.08 var(--font-heading); letter-spacing: -.02em; color: var(--color-text); margin: 0 0 1rem; text-wrap: balance; }
.ue-cph-focus { display: flex; flex-wrap: wrap; gap: .4rem 0; margin: 0 0 1rem; font: 800 .78rem/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-blue-strong); }
.ue-cph-focus span:not(:last-child)::after { content: "·"; margin: 0 .7rem; color: var(--color-primary); }
.ue-cph-lead { font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.75; color: var(--color-text-muted); max-width: 34rem; margin: 0 0 2rem; }
.ue-cph .ue-btn-ghost { background: #fff; }

/* Stat strip */
.ue-cph-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-radius: var(--ue-r-lg); background: rgba(255, 255, 255, .94); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; }
.ue-cph-stats > div { display: flex; flex-direction: column-reverse; padding: 1.35rem 1.5rem; }
.ue-cph-stats > div + div { border-left: 1px solid var(--color-border); }
.ue-cph-stats dt { font: 700 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-top: .35rem; }
.ue-cph-stats dd { margin: 0; font: 700 clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--font-heading); letter-spacing: -.02em; color: var(--color-blue-strong); }
.ue-cph-stats dd sup { font-size: .5em; top: -.8em; color: var(--color-primary); }
@media (max-width: 991.98px) {
    .ue-cph-media { width: 100%; -webkit-mask-image: none; mask-image: none; opacity: .14; }
    .ue-cph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ue-cph-stats > div:nth-child(3) { border-left: 0; }
    .ue-cph-stats > div:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 575.98px) { .ue-cph .ue-hx-actions .ue-btn { flex: 1 1 100%; } .ue-cph-stats > div { padding: 1.1rem; } }

/* Chapter navigation: refined pill bar */
.ue-subnav { top: 64px; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 30px -24px rgba(37, 48, 71, .5); }
.ue-subnav ul { padding: .65rem 0; }
.ue-subnav a { font-weight: 600; }

/* Closing band */
.ue-cp-end { display: grid; gap: 1.75rem; align-items: center; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--ue-r-xl); background: linear-gradient(120deg, var(--ue-lavender-2) 0%, #fff 55%, var(--ue-gold-soft) 100%); border: 1px solid var(--ue-line); }
@media (min-width: 992px) { .ue-cp-end { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.ue-cp-end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
@media (max-width: 575.98px) { .ue-cp-end-actions .ue-btn { flex: 1 1 100%; } }
.ue-glance-hero .ue-glance-h { font: 600 clamp(1.8rem, 3.4vw, 2.6rem)/1.15 var(--ue-font-display); color: #fff; margin: .6rem 0 0; letter-spacing: -.02em; }

/* Footer social icons */
.ue-footer-social { list-style: none; display: flex !important; flex-wrap: wrap; gap: .6rem !important; margin: 1.4rem 0 0 !important; padding: 0; }
.ue-footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border); color: var(--color-text) !important; font-size: 1.05rem; transition: transform .35s var(--ue-ease), background .3s, border-color .3s, box-shadow .35s; }
.ue-footer-social a:hover { transform: translateY(-3px); border-color: transparent; color: #fff !important; box-shadow: 0 12px 24px -12px rgba(37, 48, 71, .5); }
.ue-footer-social a.facebook:hover { background: #1877F2; }
.ue-footer-social a.linkedin:hover { background: #0A66C2; }
.ue-footer-social a.youtube:hover { background: #FF0000; }
.ue-footer-social a.instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.ue-footer-social a.whatsapp:hover { background: #1FA855; }
.ue-footer-social a.email:hover { background: var(--color-primary-strong); }


/* ==========================================================================
   Home — editorial product showcase (.ue-pf*). Home page only; the shared
   .ue-pcard used on the products pages is untouched.
   ========================================================================== */
.ue-pf-section { background: linear-gradient(180deg, #fff 0%, var(--ue-mist) 22%, var(--ue-mist) 100%); }

.ue-pf-head { display: grid; gap: 1.25rem 3rem; align-items: end; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); border-bottom: 1px solid var(--ue-line); }
@media (min-width: 992px) { .ue-pf-head { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.ue-pf-head .ue-kicker { margin-bottom: 1.1rem; }
.ue-pf-title { font-size: clamp(2.15rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.028em; margin: 0; max-width: 13ch; }
.ue-pf-title em { font-style: normal; font-weight: inherit; color: var(--color-primary-strong); }
.ue-pf-head-aside p { max-width: 46ch; margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.7; color: var(--ue-muted); }

.ue-pf-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .ue-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ue-pf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ue-pf-grid > .ue-reveal { transform: translateY(22px); transition: opacity .5s ease, transform .5s var(--ue-ease); transition-delay: var(--d, 0ms); }
.ue-pf-grid > .ue-reveal.is-in { transform: none; }

/* Card */
.ue-pf {
    position: relative; display: flex; flex-direction: column; height: 100%; padding: .55rem;
    border-radius: 24px; background: #fff; border: 1px solid rgba(8, 120, 209, .09);
    box-shadow: 0 1px 2px rgba(37, 48, 71, .04), 0 10px 30px -22px rgba(37, 48, 71, .22);
    transition: transform .45s var(--ue-ease), box-shadow .45s var(--ue-ease), border-color .3s;
}
.ue-pf:hover { transform: translateY(-6px); border-color: rgba(8, 120, 209, .2); box-shadow: 0 1px 2px rgba(37, 48, 71, .04), 0 28px 50px -30px rgba(37, 48, 71, .4); }

/* Image showcase */
.ue-pf-media {
    position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.02; overflow: hidden; border-radius: 18px;
    background: radial-gradient(68% 58% at 50% 42%, #fff 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #FFF1F5 0%, #FFE4EC 100%);
}
.ue-pf-media::before { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 214, 224, .55)); }
.ue-pf-media::after {
    content: ""; position: absolute; left: 50%; bottom: 11%; width: 46%; height: 7%; border-radius: 50%; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(37, 48, 71, .26), rgba(37, 48, 71, 0)); transition: transform .5s var(--ue-ease), opacity .5s;
}
.ue-pf-visual { position: relative; z-index: 1; width: 57%; max-width: 250px; margin-top: 9%; transition: transform .5s var(--ue-ease); }
.ue-pf .tin { width: 100%; filter: drop-shadow(0 22px 20px rgba(37, 48, 71, .2)); }
.ue-pf:hover .ue-pf-visual { transform: translateY(-8px) scale(1.035); }
.ue-pf:hover .ue-pf-media::after { transform: translateX(-50%) scale(.82); opacity: .7; }

.ue-pf-tags { position: absolute; z-index: 2; top: .85rem; left: .85rem; right: .85rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ue-pf-stage { padding: .38rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(8, 120, 209, .14); font: 700 .64rem/1 var(--ue-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ue-plum); backdrop-filter: blur(6px); }
.ue-pf-pack { font: 600 .72rem/1.2 var(--ue-font-ui); color: var(--ue-muted); text-align: right; }

/* Information */
.ue-pf-body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem .85rem .85rem; }
.ue-pf-eyebrow { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .6rem; font-size: .74rem; line-height: 1.35; color: var(--ue-muted); }
.ue-pf-eyebrow > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ue-pf-eyebrow b { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ue-purple); }
.ue-pf-eyebrow b + .ue-pf-cat::before { content: "·"; margin: 0 .4rem; color: var(--ue-lavender); }
.ue-pf-num { flex-shrink: 0; font: 600 .9rem/1 var(--font-heading); color: #F59AB3; }
.ue-pf .ue-pf-name { font: 600 1.3rem/1.22 var(--ue-font-display); letter-spacing: -.015em; font-variation-settings: "opsz" 48, "SOFT" 50; margin: 0 0 .65rem; min-height: 2.44em; }
.ue-pf .ue-pf-name a { color: var(--ue-ink); background: none; text-decoration: none; transition: color .25s; }
.ue-pf-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ue-pf:hover .ue-pf-name a { color: var(--ue-purple); }
.ue-pf-desc { max-width: 34ch; margin: 0 0 1.25rem; font-size: .86rem; line-height: 1.6; color: var(--ue-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.8em; }

/* Actions */
.ue-pf-foot { position: relative; z-index: 2; margin-top: auto; display: flex; align-items: center; gap: .45rem; padding-top: .9rem; border-top: 1px solid var(--ue-line); }
.ue-pf-order {
    flex: 1; display: inline-flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 46px; padding: .45rem .45rem .45rem 1.15rem;
    border-radius: 999px; background: linear-gradient(135deg, #1FAE5A 0%, #138A46 100%); color: #fff; text-decoration: none;
    font: 700 .88rem/1 var(--ue-font-ui); letter-spacing: .01em; white-space: nowrap;
    box-shadow: 0 10px 20px -14px rgba(19, 138, 70, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: box-shadow .3s var(--ue-ease), transform .3s var(--ue-ease), filter .3s;
}
.ue-pf-order i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: .95rem; transition: transform .3s var(--ue-ease), background .3s; }
.ue-pf-order:hover { color: #fff; filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 16px 26px -14px rgba(19, 138, 70, .95), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ue-pf-order:hover i { transform: translateX(3px); background: rgba(255, 255, 255, .28); }
.ue-pf-order:active { transform: none; }
.ue-pf-icon {
    display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--ue-line); background: #fff; color: var(--ue-ink); font-size: 1.02rem; text-decoration: none;
    transition: color .25s, border-color .25s, background .25s, transform .3s var(--ue-ease);
}
.ue-pf-icon:hover { color: var(--ue-purple); border-color: rgba(8, 120, 209, .4); background: var(--ue-mist); transform: translateY(-1px); }

.ue-pf-notice { margin-top: clamp(2rem, 4vw, 2.75rem); }
.ue-pf-more { display: flex; justify-content: center; margin-top: 1.75rem; }

@media (max-width: 575.98px) {
    .ue-pf-visual { width: 50%; max-width: 210px; }
    .ue-pf-media { aspect-ratio: 1 / .9; }
    .ue-pf .ue-pf-name, .ue-pf-desc { min-height: 0; }
    .ue-pf-desc { max-width: none; }
}
@media (min-width: 576px) and (max-width: 1199.98px) { .ue-pf-desc { max-width: 44ch; } }
@media (hover: none) { .ue-pf:hover, .ue-pf:hover .ue-pf-visual { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ue-pf:hover, .ue-pf:hover .ue-pf-visual, .ue-pf-order:hover, .ue-pf-order:hover i, .ue-pf-icon:hover { transform: none; }
}

/* ==========================================================================
   Company — brand-building journey (.ue-bflow) and business model (.ue-model)
   ========================================================================== */
.ue-bflow { position: relative; --node: 68px; }
.ue-bflow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; position: relative; z-index: 1; }
.ue-bflow-track { position: absolute; z-index: 0; background: var(--ue-line); border-radius: 2px; }
.ue-bflow-track span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--ue-bflow-dir, 180deg), var(--ue-purple-2), var(--ue-purple) 70%, var(--ue-gold)); transition: transform 1.6s var(--ue-ease) .15s; }
.ue-bflow-step { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); gap: 1.1rem; align-items: start; align-content: start; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s var(--ue-ease); transition-delay: calc(var(--i) * 110ms + 150ms); }
.ue-bflow.is-inview .ue-bflow-step { opacity: 1; transform: none; }
.ue-bflow-node {
    position: relative; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%;
    background: #fff; color: var(--ue-purple); font-size: 1.5rem; border: 1px solid rgba(8, 120, 209, .16);
    box-shadow: 0 0 0 7px var(--ue-bflow-halo, var(--ue-mist)), 0 14px 28px -18px rgba(37, 48, 71, .55);
    transition: transform .4s var(--ue-ease), background .3s, color .3s, box-shadow .4s;
}
.ue-bflow-step:hover .ue-bflow-node { transform: translateY(-4px); background: var(--ue-purple); color: #fff; }
.ue-bflow-step.is-goal .ue-bflow-node { background: var(--ue-grad-gold); color: #253047; border-color: transparent; box-shadow: 0 0 0 7px var(--ue-bflow-halo, var(--ue-mist)), 0 0 0 9px rgba(255, 201, 40, .35), 0 18px 34px -16px rgba(240, 170, 0, .8); }
.ue-bflow-step.is-goal:hover .ue-bflow-node { background: var(--ue-grad-gold); color: #253047; }
.ue-bflow-copy { padding-top: .35rem; }
.ue-bflow-num { display: block; margin-bottom: .3rem; font: 700 .68rem/1 var(--ue-font-ui); letter-spacing: .18em; color: var(--ue-purple); }
.ue-bflow-step.is-goal .ue-bflow-num { color: var(--ue-gold-ink); }
.ue-bflow-copy strong { display: block; font: 600 1.28rem/1.2 var(--ue-font-display); letter-spacing: -.01em; color: var(--ue-ink); }
.ue-bflow-copy p { margin: .4rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ue-muted); max-width: 32ch; }

/* vertical timeline (phones / tablets) */
.ue-bflow-track { left: calc(var(--node) / 2 - 1px); width: 2px; top: calc(var(--node) / 2); bottom: calc(var(--node) / 2); }
.ue-bflow-track span { transform: scaleY(0); transform-origin: top; }
.ue-bflow.is-inview .ue-bflow-track span { transform: scaleY(1); }
.ue-bflow-steps { max-width: 560px; margin-inline: auto; }
.ue-bflow-track { margin-left: max(0px, calc((100% - 560px) / 2)); }

/* horizontal journey (desktop) */
@media (min-width: 992px) {
    .ue-bflow { --ue-bflow-dir: 90deg; padding-top: .5rem; }
    .ue-bflow-steps { max-width: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
    .ue-bflow-track { margin-left: 0; width: auto; height: 2px; top: calc(var(--node) / 2 + .5rem - 1px); bottom: auto; left: calc(100% / 12); right: calc(100% / 12); }
    .ue-bflow-track span { transform: scaleX(0); transform-origin: left; }
    .ue-bflow.is-inview .ue-bflow-track span { transform: scaleX(1); }
    .ue-bflow-step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.25rem; }
    .ue-bflow-copy { padding-top: 0; }
    .ue-bflow-copy p { margin-inline: auto; max-width: 20ch; }
}
.ue-mist .ue-bflow { --ue-bflow-halo: var(--ue-mist); }
.ue-section:not(.ue-mist) .ue-bflow { --ue-bflow-halo: #fff; }

/* Business model panel */
.ue-model {
    position: relative; overflow: hidden; padding: clamp(2.25rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
    border-radius: var(--ue-r-xl); background: var(--ue-grad-stage); color: rgba(255, 255, 255, .78);
    box-shadow: 0 40px 80px -48px rgba(37, 48, 71, .7);
}
.ue-model::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); }
.ue-model > * { position: relative; }
.ue-model-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ue-model-head .ue-kicker { color: var(--ue-gold); }
.ue-model-head .ue-kicker::before { background: var(--ue-gold); }
.ue-model-head .ue-title { color: #fff; margin: 0; }
.ue-model-head .ue-title em { color: var(--ue-lavender); }

.ue-model-eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ue-model-term {
    display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem 1.35rem; border-radius: 22px;
    background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .11);
    opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s var(--ue-ease), background .3s, border-color .3s;
    transition-delay: calc(var(--i) * 90ms + 100ms), calc(var(--i) * 90ms + 100ms), 0s, 0s;
}
.ue-model-eq.is-inview .ue-model-term { opacity: 1; transform: none; }
.ue-model-term:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 201, 40, .45); }
.ue-model-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 1rem; border-radius: 50%; background: rgba(255, 201, 40, .14); color: var(--ue-gold); font-size: 1.45rem; box-shadow: inset 0 0 0 1px rgba(255, 201, 40, .3); }
.ue-model-term strong { font: 600 1.2rem/1.2 var(--ue-font-display); color: #fff; }
.ue-model-term small { margin-top: .4rem; font-size: .8rem; line-height: 1.45; color: rgba(255, 255, 255, .62); }
.ue-model-op { display: none; }
@media (min-width: 992px) {
    .ue-model-eq { display: flex; align-items: stretch; gap: 0; }
    .ue-model-term { flex: 1 1 0; min-width: 0; }
    .ue-model-op { display: grid; place-items: center; align-self: center; flex-shrink: 0; width: 34px; height: 34px; margin: 0 -.35rem; z-index: 1; border-radius: 50%; background: var(--ue-gold); color: #253047; font-size: .95rem; box-shadow: 0 0 0 6px rgba(37, 48, 71, .55); }
}
.ue-model-result {
    display: flex; align-items: center; gap: 1rem; width: fit-content; max-width: 100%; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; padding: .7rem 1.6rem .7rem .7rem;
    border-radius: 999px; background: linear-gradient(135deg, rgba(255, 201, 40, .2), rgba(255, 201, 40, .06)); border: 1px solid rgba(255, 201, 40, .45);
}
.ue-model-equals { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: #fff; font: 700 1.1rem/1 var(--ue-font-ui); }
.ue-model-result-icon { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--ue-grad-gold); color: #253047; font-size: 1.35rem; box-shadow: 0 12px 26px -12px rgba(240, 170, 0, .9); }
.ue-model-result small { display: block; font: 700 .66rem/1 var(--ue-font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ue-gold); margin-bottom: .35rem; }
.ue-model-result strong { display: block; font: 600 clamp(1.15rem, 2.4vw, 1.6rem)/1.15 var(--ue-font-display); color: #fff; }
@media (max-width: 575.98px) {
    .ue-model-eq { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .ue-model-term { padding: 1.15rem .7rem; }
    .ue-model-term strong { font-size: 1.02rem; }
    .ue-model-result { border-radius: 22px; padding: .9rem 1rem; }
    .ue-model-equals { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ue-bflow-step, .ue-model-term { opacity: 1 !important; transform: none !important; }
    .ue-bflow-track span { transform: none !important; }
}

/* Footer — Follow Us band (white circular social icons) */
.ue-follow { margin-top: clamp(2.25rem, 4vw, 3rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); border-bottom: 1px solid var(--color-border); text-align: center; }
.ue-footer .ue-follow-title { display: block; text-align: center; margin: 0 0 1.35rem; font: 600 clamp(1.3rem, 2.4vw, 1.6rem)/1.2 var(--font-heading); letter-spacing: -.01em; text-transform: none; color: var(--color-text); }
.ue-footer .ue-follow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.9rem, 2.5vw, 1.4rem); }
.ue-follow-icon {
    display: grid; place-items: center; width: clamp(56px, 12vw, 64px); height: clamp(56px, 12vw, 64px); border-radius: 50%;
    background: #fff; color: var(--ue-ink) !important; font-size: clamp(1.55rem, 3.6vw, 1.8rem); text-decoration: none;
    border: 1px solid var(--color-border); box-shadow: var(--shadow-card);
    transition: transform .35s var(--ue-ease), background .3s, color .3s, box-shadow .35s;
}
a.ue-follow-icon:hover, a.ue-follow-icon:focus-visible { transform: translateY(-4px); color: #fff !important; border-color: transparent; box-shadow: 0 18px 34px -16px rgba(37, 48, 71, .5); }
a.ue-follow-icon.facebook:hover, a.ue-follow-icon.facebook:focus-visible { background: #1877F2; }
a.ue-follow-icon.instagram:hover, a.ue-follow-icon.instagram:focus-visible { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
a.ue-follow-icon.youtube:hover, a.ue-follow-icon.youtube:focus-visible { background: #FF0000; }
a.ue-follow-icon.linkedin:hover, a.ue-follow-icon.linkedin:focus-visible { background: #0A66C2; }
a.ue-follow-icon.tiktok:hover, a.ue-follow-icon.tiktok:focus-visible { background: #000; }
.ue-follow-icon.is-pending { cursor: default; }
.ue-follow + .ue-footer-bottom { justify-content: center; text-align: center; flex-direction: column; gap: .6rem; }
@media (prefers-reduced-motion: reduce) { a.ue-follow-icon:hover { transform: none; } }

/* ==========================================================================
   Company — modern chapter bar (.ue-cnav) and editorial photos (.ue-photo)
   ========================================================================== */
.ue-subnav.ue-cnav { background: rgba(255, 255, 255, .84); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid var(--ue-line); box-shadow: none; transition: box-shadow .4s var(--ue-ease), background .3s; }
.ue-subnav.ue-cnav.is-stuck { background: rgba(255, 255, 255, .94); box-shadow: 0 14px 34px -26px rgba(37, 48, 71, .55); }
.ue-cnav-inner { display: flex; align-items: center; gap: 1rem; }
.ue-cnav-label { display: none; flex-direction: column; gap: .3rem; flex-shrink: 0; min-width: 150px; padding-right: 1.25rem; border-right: 1px solid var(--ue-line); }
.ue-cnav-count { font: 600 1.35rem/1 var(--ue-font-display); letter-spacing: -.02em; color: var(--ue-ink); }
.ue-cnav-count b { font-weight: 600; color: var(--ue-purple); }
.ue-cnav-count span { font-size: .8rem; color: var(--ue-muted); margin-left: .1rem; }
.ue-cnav-name { font: 700 .64rem/1.2 var(--ue-font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ue-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.ue-subnav.ue-cnav ul {
    position: relative; flex: 1; min-width: 0; display: flex; gap: .2rem; margin: 0; padding: .6rem .75rem; list-style: none; overflow-x: auto; scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent);
}
.ue-subnav.ue-cnav li { flex-shrink: 0; }
.ue-subnav.ue-cnav a {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px;
    background: transparent; color: var(--ue-muted); font: 600 .84rem/1 var(--ue-font-ui); white-space: nowrap; text-decoration: none; transition: color .3s, background .3s;
}
.ue-subnav.ue-cnav a i { font-size: .95rem; color: var(--ue-purple-2); transition: color .3s, transform .35s var(--ue-ease); }
.ue-subnav.ue-cnav a:hover { color: var(--ue-ink); background: rgba(8, 120, 209, .07); }
.ue-subnav.ue-cnav a:hover i { transform: translateY(-1px); }
.ue-subnav.ue-cnav a.active { color: #fff; background: transparent; }
.ue-subnav.ue-cnav a.active i { color: var(--ue-gold); }
.ue-subnav.ue-cnav a.active:hover { background: transparent; }
.ue-subnav.ue-cnav .ue-cnav-ink {
    position: absolute; z-index: 0; top: .6rem; bottom: .6rem; left: 0; width: 0; border-radius: 999px; pointer-events: none;
    background: linear-gradient(135deg, var(--ue-ink-2), var(--ue-ink)); box-shadow: 0 10px 22px -12px rgba(37, 48, 71, .75), inset 0 1px 0 rgba(255, 255, 255, .12);
    opacity: 0; transition: transform .5s var(--ue-ease), width .5s var(--ue-ease), opacity .3s;
}
.ue-subnav.ue-cnav .ue-cnav-ink.is-on { opacity: 1; }
/* without JS the active link keeps its own pill */
.ue-subnav.ue-cnav ul:not(:has(.ue-cnav-ink.is-on)) a.active { background: var(--ue-ink); }
.ue-subnav.ue-cnav .ue-cnav-dl { display: none; flex-shrink: 0; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: 999px; border: 1px solid rgba(8, 120, 209, .25); color: var(--ue-purple); font: 700 .8rem/1 var(--ue-font-ui); text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.ue-subnav.ue-cnav .ue-cnav-dl:hover { background: var(--ue-purple); border-color: var(--ue-purple); color: #fff; }
@media (min-width: 992px) { .ue-subnav.ue-cnav .ue-cnav-dl { display: inline-flex; } }
@media (min-width: 1200px) { .ue-cnav-label { display: flex; } }
@media (max-width: 575.98px) {
    .ue-subnav.ue-cnav ul { padding-inline: .5rem; }
    .ue-subnav.ue-cnav a { padding: .55rem .8rem; font-size: .8rem; }
}

/* Editorial photos */
.ue-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--ue-r-xl); background: var(--ue-lavender-2); box-shadow: 0 30px 60px -40px rgba(37, 48, 71, .55); isolation: isolate; }
.ue-photo picture, .ue-photo img { display: block; width: 100%; height: 100%; }
.ue-photo img { object-fit: cover; transition: transform 1.4s var(--ue-ease); }
.ue-photo:hover img { transform: scale(1.035); }
.ue-photo-tag {
    position: absolute; z-index: 2; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px;
    background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ue-ink); font: 700 .76rem/1 var(--ue-font-ui); letter-spacing: .01em; box-shadow: 0 10px 24px -14px rgba(37, 48, 71, .6);
}
.ue-photo-tag i { color: var(--ue-purple); }
.ue-photo-banner { aspect-ratio: 16 / 9; }
.ue-photo-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 42, 79, 0) 55%, rgba(14, 42, 79, .35)); pointer-events: none; }
.ue-photo-banner.dark { box-shadow: none; border: 1px solid rgba(255, 255, 255, .1); }
.ue-photo-banner.dark .ue-photo-tag { background: rgba(14, 42, 79, .6); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.ue-photo-banner.dark .ue-photo-tag i { color: var(--ue-gold); }
@media (min-width: 768px) { .ue-photo-banner { aspect-ratio: 5 / 2; } }
@media (min-width: 1200px) { .ue-photo-banner { aspect-ratio: 3 / 1; } }
@media (min-width: 768px) { .ue-photo-tag { left: 1.4rem; bottom: 1.4rem; } }
.ue-photo-wide { aspect-ratio: 4 / 3; }
.ue-photo-soft { aspect-ratio: 5 / 4; margin-top: .5rem; }

.ue-vision-row { display: grid; gap: 1rem; }
.ue-vision-row .ue-photo { aspect-ratio: 4 / 3; }
@media (min-width: 992px) {
    .ue-vision-row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
    .ue-vision-row .ue-vision { display: flex; flex-direction: column; justify-content: center; }
    .ue-vision-row .ue-photo { aspect-ratio: auto; min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) { .ue-photo:hover img { transform: none; } }

/* ==========================================================================
   Consistent section rhythm (site-wide)
   One padding for every content section, and no doubled gap when two
   sections with the same plain (white) background follow each other.
   ========================================================================== */
:root { --ue-section: clamp(3.5rem, 7vw, 6rem); --mb-section-y: var(--ue-section); }
.section, .section-sm, .ue-section, .ue-section-sm { padding-block: var(--ue-section); }
:is(.section, .section-sm, .ue-section, .ue-section-sm):not(.ue-mist, .ue-pf-section, .ue-dark, .ue-pearl, .bg-cream, .bg-navy, .bg-primary-soft)
    + :is(.section, .section-sm, .ue-section, .ue-section-sm):not(.ue-mist, .ue-pf-section, .ue-dark, .ue-pearl, .bg-cream, .bg-navy, .bg-primary-soft) { padding-top: 0; }
.ue-mist + .ue-mist:is(.section, .section-sm, .ue-section, .ue-section-sm) { padding-top: 0; }
/* the footer "Stay connected" band follows <main>: no top padding after a white section */
.ue-connect { padding-top: 0; }
#main:has(> :last-child:is(.ue-mist, .ue-pf-section, .ue-dark, .ue-pearl, .bg-cream, .bg-navy, .bg-primary-soft)) + .ue-connect { padding-top: var(--ue-section); }
/* home product showcase: solid mist so its top edge reads as a clear section boundary */
.ue-pf-section { background: var(--ue-mist); }

/* Glass cards/stats inside the (now light) inner-page hero become white cards */
.ue-hero .ue-card.glass { background: #fff; border-color: var(--color-border); box-shadow: var(--shadow-card); backdrop-filter: none; }
.ue-hero .ue-card.glass:hover { border-color: rgba(245, 45, 104, .35); background: #fff; }
.ue-hero .ue-card.glass, .ue-hero .ue-card.glass h3 { color: var(--color-text); }
.ue-hero .ue-card.glass p { color: var(--color-text-muted); }
.ue-hero .ue-card.glass .ue-stat-num { color: var(--color-blue-strong); }
.ue-hero .ue-card.glass .ue-stat-label { color: var(--color-primary-strong); }

/* ==========================================================================
   Product showcase (home, products page, company profile)
   Full product renders (.tin.is-render) are shown whole — never cropped — on a
   clean studio stage: 3 per row on desktop, 2 on tablet, 1 on mobile.
   ========================================================================== */
.tin.is-render { display: block; aspect-ratio: auto; filter: none; }
.tin.is-render img { display: block; width: 100%; height: auto; }

/* Grids */
.ue-pf-grid, .cp-products { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ue-pf-grid, .cp-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
    .ue-pf-grid, .cp-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* a single card on the last row sits in the middle column */
    .ue-pf-grid > :last-child:nth-child(3n + 1), .cp-products > :last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (max-width: 767.98px) { .ue-pf-grid, .cp-products, .ue-pgrid { max-width: 480px; margin-inline: auto; } }

/* The studio stage */
.ue-pf-media, .ue-pcard-media, .cp-product-media {
    position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1.02; padding: 0;
    background:
        radial-gradient(58% 46% at 50% 44%, #fff 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(180deg, #FFF9FB 0%, #FDEEF2 100%);
}
.ue-pf-media::before, .ue-pcard-media::before, .cp-product-media::before {
    content: ""; position: absolute; inset: auto 0 0; height: 26%; z-index: 0;
    background: linear-gradient(180deg, rgba(253, 238, 242, 0), rgba(245, 215, 224, .55));
}
.ue-pf-media::after, .ue-pcard-media::after, .cp-product-media::after {
    content: ""; position: absolute; z-index: 0; left: 50%; bottom: 7.5%; width: 46%; height: 5%; border-radius: 50%;
    transform: translateX(-50%); background: radial-gradient(closest-side, rgba(37, 48, 71, .28), rgba(37, 48, 71, 0));
    transition: transform .6s var(--ue-ease), opacity .6s;
}
/* product placement: whole tin, centred, standing on the floor shadow */
.ue-pf-visual { position: absolute; inset: 0; z-index: 1; width: auto; max-width: none; margin: 0; transition: none; }
.ue-pf-visual .tin.is-render, .ue-pcard-media .tin.is-render, .cp-product-media .tin.is-render {
    position: absolute; z-index: 1; left: 50%; bottom: 8.5%; top: auto; height: 80%; width: auto; aspect-ratio: 1 / var(--ratio, 1.5);
    transform: translateX(-50%); filter: drop-shadow(0 18px 22px rgba(37, 48, 71, .16));
}
.ue-pf-visual .tin.is-render img, .ue-pcard-media .tin.is-render img, .cp-product-media .tin.is-render img {
    width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; transition: transform .7s var(--ue-ease);
}
.ue-pcard-media .tin.is-render, .cp-product-media .tin.is-render { margin: 0; }

/* Hover: a gentle lift and zoom of the product only */
.ue-pf:hover .ue-pf-visual { transform: none; }
.ue-pcard:hover .tin.is-render, .cp-product:hover .cp-product-media .tin.is-render { transform: translateX(-50%); }
.ue-pf:hover .tin.is-render img, .ue-pcard:hover .tin.is-render img, .cp-product:hover .tin.is-render img { transform: translateY(-6px) scale(1.045); }
.ue-pf:hover .ue-pf-media::after, .ue-pcard:hover .ue-pcard-media::after, .cp-product:hover .cp-product-media::after { transform: translateX(-50%) scale(.86); opacity: .75; }
@media (hover: none), (prefers-reduced-motion: reduce) { .tin.is-render img { transition: none; } .ue-pf:hover .tin.is-render img, .ue-pcard:hover .tin.is-render img, .cp-product:hover .tin.is-render img { transform: none; } }

/* Stage badges sit above the product */
.ue-pf-tags, .ue-pcard-tags { z-index: 2; }

/* Card body: larger, clearer product information under the image */
.ue-pf { padding: .6rem; border-radius: 26px; }
.ue-pf-media { border-radius: 20px; }
.ue-pf-body { padding: 1.35rem 1rem 1rem; }
.ue-pf .ue-pf-name { font-size: 1.35rem; min-height: 0; }
.ue-pf-desc { min-height: 0; max-width: none; }
.ue-pcard { border-radius: 24px; }
.ue-pcard h3, .ue-pcard h2 { font: 600 1.2rem/1.3 var(--font-heading); }
.ue-pcard-body { padding: 1.35rem 1.4rem 1.4rem; }
.ue-pcard-meta { font-size: .8rem; }
.ue-pcard-meta i { color: var(--color-primary); }

/* Product detail stage: the whole render, large */
.ue-pd-stage .tin.is-render { position: absolute; z-index: 1; left: 50%; top: 7%; bottom: 9%; height: auto; width: auto; aspect-ratio: 1 / var(--ratio, 1.5); transform: translateX(-50%); filter: drop-shadow(0 22px 26px rgba(37, 48, 71, .18)); }
.ue-pd-stage .tin.is-render img { height: 100%; width: 100%; object-fit: contain; }
.ue-pd-thumbs img { mix-blend-mode: multiply; }

/* Small contexts (journal cards, dossier, hero) keep their widths; heights follow the render's ratio */
.ue-jcard-top .tin.is-render, .cp-dossier-head .tin.is-render { width: 74px; justify-self: center; }
.ue-order-product .tin.is-render { width: 72px; justify-self: center; }

/* Home — Quality Journey (client design: navy band, flag route, baby artwork, three outlined cards) */
.ue-jh { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 9vw, 8rem) clamp(5.5rem, 10vw, 8.5rem); color: rgba(255, 255, 255, .86);
    background: radial-gradient(ellipse 55% 70% at 62% 42%, #014c8d 0%, rgba(1, 76, 141, 0) 70%), linear-gradient(180deg, #023062 0%, #022c5c 55%, #01274f 100%); }
.ue-jh-wave { position: absolute; left: 0; width: 100%; z-index: -1; pointer-events: none; }
.ue-jh-wave.top { top: 0; height: clamp(40px, 6vw, 90px); }
.ue-jh-wave.top path { fill: #0d5596; }
.ue-jh-wave.bottom { bottom: 0; height: clamp(46px, 7vw, 110px); }
.ue-jh-wave.bottom path { fill: #13609f; }
.ue-jh::before { content: ""; position: absolute; inset: 0 0 auto auto; z-index: -1; width: 45%; height: clamp(40px, 6vw, 90px); background: linear-gradient(90deg, rgba(34, 149, 218, 0), #2295da); -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); pointer-events: none; }
.ue-jh-doodle { position: absolute; left: 2%; bottom: clamp(40px, 6vw, 80px); width: clamp(110px, 14vw, 200px); opacity: .9; pointer-events: none; }

.ue-jh-top { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .ue-jh-top { grid-template-columns: minmax(0, 1fr) minmax(0, 33%); gap: 0; } }
.ue-jh-head { display: grid; gap: 1.25rem 2rem; align-items: center; }
@media (min-width: 992px) { .ue-jh-title > * { white-space: nowrap; } }
@media (min-width: 1200px) { .ue-jh-head { grid-template-columns: max-content minmax(0, 1fr); gap: 2rem 2.25rem; } }
.ue-jh .ue-kicker { color: var(--ue-gold); margin-bottom: 1.1rem; }
.ue-jh .ue-kicker::before { background: var(--ue-gold); }
.ue-jh-title { margin: 0; font: 700 clamp(2rem, 3.05vw, 3.5rem)/1.16 var(--ue-font-display); letter-spacing: -.02em; color: #fff; }
.ue-jh-title > * { display: block; }
.ue-jh-title em { font-style: normal; color: #F9A8CC; }
.ue-jh-lead { margin: 0; padding-left: 1.6rem; border-left: 1px solid rgba(255, 255, 255, .28); font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, .86); max-width: 21rem; }

/* Flag route */
.ue-jh-route { display: flex; align-items: center; margin-top: clamp(2.5rem, 5vw, 3.75rem); max-width: 48rem; }
.ue-jh-node { position: relative; flex: none; width: clamp(68px, 9vw, 116px); aspect-ratio: 1; }
.ue-jh-flag { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #022c5c, 0 0 0 6px rgba(120, 190, 255, .45), 0 0 26px 4px rgba(64, 160, 255, .35); }
.ue-jh-flag svg { display: block; width: 100%; height: 100%; }
.ue-jh-no { position: absolute; right: -6%; bottom: -4%; display: grid; place-items: center; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--ue-grad-gold); color: #1b2a44; font: 800 clamp(.68rem, 1vw, .9rem)/1 var(--ue-font-ui); box-shadow: 0 0 0 3px #022c5c; }
.ue-jh-line { position: relative; flex: 1; height: 3px; margin-inline: 4px; border-radius: 3px; background: linear-gradient(90deg, #FFD54F, #FFD54F); transform-origin: left; transition: transform 1.4s var(--ue-ease) .2s; }
.ue-jh-line + .ue-jh-node + .ue-jh-line { background: linear-gradient(90deg, #FFD54F, #F9A8CC); }
.ue-jh-line::before, .ue-jh-line::after { content: ""; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #FFD54F; box-shadow: 0 0 10px 3px rgba(255, 213, 79, .6); }
.ue-jh-line::before { left: -4px; }
.ue-jh-line::after { right: -4px; }
.ue-jh-line + .ue-jh-node + .ue-jh-line::after { background: #fff; box-shadow: 0 0 10px 3px rgba(255, 255, 255, .5); }
.ue-jh-route[data-inview]:not(.is-inview) .ue-jh-line { transform: scaleX(0); }

/* Baby artwork */
.ue-jh-photo { margin: 0; justify-self: center; width: 100%; max-width: 560px; }
.ue-jh-photo img { display: block; width: 100%; height: auto; }
@media (min-width: 992px) { .ue-jh-photo { width: 112%; max-width: none; margin-left: -10%; margin-right: -2%; } }

/* Cards */
.ue-jh-cards { display: grid; gap: 1.25rem; margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (min-width: 992px) { .ue-jh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }
.ue-jh-card { position: relative; padding: clamp(1.4rem, 2.4vw, 2.1rem); border-radius: 20px; background: rgba(4, 64, 132, .35); border: 1px solid rgba(73, 150, 240, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .5s var(--ue-ease), border-color .4s; }
.ue-jh-icon { position: absolute; top: clamp(1.2rem, 2vw, 1.6rem); right: clamp(1.2rem, 2vw, 1.6rem); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: var(--ue-gold); font-size: 1.5rem; }
.ue-jh-icon svg { width: 26px; height: 26px; }
.ue-jh-role { display: block; padding-right: 4rem; margin-bottom: .4rem; font: 800 .78rem/1.3 var(--ue-font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ue-gold); }
.ue-jh-card h3 { margin: 0 0 1rem; padding-right: 4rem; font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 var(--ue-font-display); letter-spacing: -.015em; color: #fff; }
.ue-jh-card p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: rgba(255, 255, 255, .86); }
@media (hover: hover) { .ue-jh-card:hover { transform: translateY(-4px); border-color: rgba(255, 213, 79, .6); } }
@media (max-width: 991.98px) { .ue-jh-photo { order: -1; max-width: 440px; } .ue-jh-doodle { display: none; } }
@media (prefers-reduced-motion: reduce) { .ue-jh-line { transition: none; transform: none !important; } }

/* Home — Medical & Scientific Resources: warm-white / blush / sky header with a compact cloud-framed baby photo,
   ending in a cloud divider that flows into the Upcoming section (#FEF8F5). */
.ue-jr { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(5.5rem, 9vw, 8rem);
    background: linear-gradient(180deg, #FFFCFA 0%, #FFF6F8 38%, #F3F8FE 100%); }
.ue-jr-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(34% 26% at 8% 18%, rgba(255, 255, 255, .95), transparent 70%), radial-gradient(30% 22% at 92% 8%, rgba(253, 226, 234, .7), transparent 70%), radial-gradient(40% 30% at 70% 60%, rgba(214, 233, 252, .55), transparent 72%), radial-gradient(30% 24% at 18% 82%, rgba(253, 230, 237, .55), transparent 70%); }
.ue-jr-hero { display: grid; gap: 2.5rem; align-items: center; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
@media (min-width: 992px) { .ue-jr-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 3rem; } }
.ue-jr-copy .ue-title { font-size: clamp(2.1rem, 4vw, 3.6rem); letter-spacing: -.02em; margin-bottom: 1rem; }
.ue-jr-copy .ue-title em { color: var(--color-primary-strong); }
.ue-jr-copy .ue-lead { max-width: 34rem; margin-bottom: 1.75rem; color: #5B6577; }
.ue-jr-copy .ue-btn { box-shadow: 0 16px 30px -16px rgba(213, 18, 50, .6); }

/* Compact cloud-framed photo */
.ue-jr-figure { position: relative; margin: 0; width: 100%; max-width: 520px; justify-self: center; padding: 1.25rem 1.5rem 1.75rem; }
.ue-jr-photo { position: relative; z-index: 1; display: block; aspect-ratio: 5 / 4; overflow: hidden; border: 6px solid #fff;
    border-radius: 46% 54% 44% 56% / 52% 46% 54% 48%; background: #EAF3FC; box-shadow: 0 30px 60px -34px rgba(47, 90, 160, .45), 0 0 0 1px rgba(245, 154, 184, .25); }
.ue-jr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 18% 55%; }
.ue-jr-puff { position: absolute; z-index: 0; border-radius: 999px; background: #fff; box-shadow: 0 16px 30px -22px rgba(47, 90, 160, .35); }
.ue-jr-puff::before, .ue-jr-puff::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.ue-jr-puff.p1 { left: -3%; bottom: 3%; width: 34%; height: 16%; }
.ue-jr-puff.p1::before { left: 16%; bottom: 40%; width: 42%; aspect-ratio: 1; }
.ue-jr-puff.p1::after { left: 48%; bottom: 30%; width: 32%; aspect-ratio: 1; }
.ue-jr-puff.p2 { right: -1%; top: 8%; width: 30%; height: 14%; background: #FDE8EF; box-shadow: none; }
.ue-jr-puff.p2::before { left: 20%; bottom: 38%; width: 44%; aspect-ratio: 1; }
.ue-jr-puff.p2::after { left: 52%; bottom: 26%; width: 30%; aspect-ratio: 1; }
.ue-jr-bit { position: absolute; z-index: 3; line-height: 1; animation: ueJrFloat 5s ease-in-out infinite; }
.ue-jr-bit.b1 { left: 4%; top: 6%; font-size: 1.6rem; color: #FFD54F; }
.ue-jr-bit.b2 { right: 4%; bottom: 20%; font-size: 1.35rem; color: #F59AB8; animation-delay: -1.5s; }
.ue-jr-bit.b3 { right: 18%; top: -1%; font-size: .95rem; color: #9CCBF3; animation-delay: -3s; }
.ue-jr-bit.b4 { left: 12%; bottom: 0; font-size: 1.1rem; color: #F59AB8; animation-delay: -2.2s; }
@keyframes ueJrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Resource cards: pastel borders, soft shadows (three columns on desktop via the existing grid) */
.ue-jr .ue-jcard { border-color: #F3DDE5; box-shadow: 0 18px 40px -30px rgba(60, 50, 90, .35); }
.ue-jr .ue-jcard:hover { border-color: rgba(47, 127, 208, .3); }
.ue-jr .ue-jcard-top { background: linear-gradient(135deg, #FFF5F8, #F3F8FE); border-bottom-color: #F3E4EA; }

/* Cloud divider into the Upcoming section */
.ue-jr-clouds { position: absolute; left: 0; bottom: -1px; z-index: 0; display: block; width: 100%; height: clamp(56px, 7vw, 110px); pointer-events: none; }
.ue-jr-clouds .back { fill: #FFFFFF; opacity: .75; }
.ue-jr-clouds .front { fill: #FEF8F5; }

@media (max-width: 991.98px) {
    .ue-jr-figure { order: -1; max-width: 420px; }
}
@media (max-width: 575.98px) {
    .ue-jr-figure { padding: .75rem 1rem 1.25rem; }
    .ue-jr-copy .ue-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ue-jr-bit { animation: none; } }

/* Home — Business Approach (client design: pastel nursery background, colour-coded step cards) */
.ue-bj { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 5.4vw, 6rem) clamp(5rem, 11.5vw, 12rem); background: url(../../images/company/process-bottom.webp) center bottom / 100% auto no-repeat, radial-gradient(60% 30% at 0% 20%, rgba(250, 214, 224, .55), transparent 70%), radial-gradient(60% 30% at 100% 60%, rgba(214, 230, 250, .6), transparent 70%), #FCF7F5; }
.ue-bj .ue-kicker { margin-bottom: 1rem; }
.ue-bj-title { margin: 0 0 1.25rem; font: 700 clamp(2.1rem, 3.75vw, 4.4rem)/1.12 var(--ue-font-display); letter-spacing: -.02em; color: #263350; }
.ue-bj-title em { font-style: normal; color: var(--color-primary-strong); }
.ue-bj-lead { margin: 0; font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.65; color: #6B7488; max-width: 44rem; }
@media (min-width: 992px) { .ue-bj .container { max-width: min(84vw, 1520px); } .ue-bj-head { padding-left: 1.2vw; } .ue-bj-lead { max-width: min(44rem, 42vw); } }
.ue-bj-art { display: block; margin: 1.5rem -12px 0; }
.ue-bj-art img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 85%, transparent); }

.ue-bj-steps { position: relative; display: grid; gap: 2rem 1.5rem; margin-top: 1.5rem; }
@media (min-width: 576px) { .ue-bj-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ue-bj-step { --c: #EE4E6B; --c2: #F7708B; --tint: #FDE1E7; --badge: #F9C3CF; --badge-fg: #fff; position: relative; }
.ue-bj-step.c2 { --c: #2F8FE6; --c2: #5AAEF2; --tint: #DCEBFB; --badge: #D9EBFC; --badge-fg: #2F8FE6; }
.ue-bj-step.c3 { --c: #F5A912; --c2: #FCC746; --tint: #FDF0CF; --badge: #FDEFC4; --badge-fg: #F09A0A; }
.ue-bj-step.c4 { --c: #8A5FD3; --c2: #A985E6; --tint: #ECE3FB; --badge: #E6DCFA; --badge-fg: #7E52CC; }
.ue-bj-badges { position: relative; z-index: 2; display: flex; align-items: center; gap: 1rem; padding-left: 1.1rem; margin-bottom: -.75rem; }
.ue-bj-icon { display: grid; place-items: center; width: clamp(64px, 5.3vw, 90px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, var(--c2), var(--c)); color: #fff; font-size: clamp(1.6rem, 2vw, 2.2rem); box-shadow: 0 0 0 5px rgba(255, 255, 255, .85), 0 14px 26px -12px var(--c); }
.ue-bj-no { display: grid; place-items: center; width: clamp(36px, 2.7vw, 44px); aspect-ratio: 1; border-radius: 50%; background: var(--badge); color: var(--badge-fg); font: 800 clamp(.82rem, 1vw, 1rem)/1 var(--ue-font-ui); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.ue-bj-card { position: relative; min-height: 7.5rem; padding: 1.6rem 1.5rem 1.4rem; border-radius: 24px; background: #fff; box-shadow: 0 18px 40px -26px rgba(60, 50, 90, .45); }
.ue-bj-card::before { content: ""; position: absolute; z-index: -1; inset: -12px -16px -16px -12px; border-radius: 42% 58% 46% 54% / 48% 40% 60% 52%; background: var(--tint); opacity: .8; }
.ue-bj-card small { display: block; margin-bottom: .35rem; font: 700 .85rem/1.2 var(--ue-font-ui); letter-spacing: .08em; text-transform: uppercase; color: #2F7FD0; }
.ue-bj-card span { display: block; font: 500 clamp(1rem, 1.15vw, 1.15rem)/1.4 var(--ue-font-ui); color: #263350; }

@media (min-width: 992px) {
    .ue-bj { background: url(../../images/company/process-top.webp) center top / 100% auto no-repeat, url(../../images/company/process-bottom.webp) center bottom / 100% auto no-repeat, url(../../images/company/process-mid.webp) center 28.3vw / 100% calc(100% - 28.3vw - 11.6vw) no-repeat, #FCF7F5; }
    .ue-bj-head { max-width: 52vw; min-height: 23.6vw; padding-bottom: 1.75rem; }
    .ue-bj-art { display: none; }
    .ue-bj-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.25rem 2.4rem; margin-top: 0; }
    /* dashed arrow to the next step in the row */
    .ue-bj-step:not(:nth-child(4n))::after { content: ""; position: absolute; z-index: 1; top: calc(clamp(64px, 5.3vw, 90px) / 2 - 16px); left: calc(1.1rem + clamp(64px, 5.3vw, 90px) + clamp(36px, 2.7vw, 44px) + 1.75rem); right: -1.9rem; height: 24px;
        background: linear-gradient(90deg, var(--c2), var(--next, #5AAEF2));
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M2 18C40 2 100 0 150 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-dasharray='7 6' stroke-linecap='round'/%3E%3Cpath d='M144 6l8 8-10 3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M2 18C40 2 100 0 150 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-dasharray='7 6' stroke-linecap='round'/%3E%3Cpath d='M144 6l8 8-10 3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
    .ue-bj-step.c1 { --next: #5AAEF2; } .ue-bj-step.c2 { --next: #FCC746; } .ue-bj-step.c3 { --next: #F7708B; }
    .ue-bj-card { min-height: 8rem; }
}

/* Home — Upcoming Products (client design: "Happy Mom, Healthy Baby" photo, blue Baby Care / pink Mother Care cards) */
.ue-cs { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 5.5vw, 5.5rem) clamp(3.5rem, 6vw, 6rem);
    background: radial-gradient(40% 18% at 6% 100%, #E5F1FE, transparent 80%), radial-gradient(40% 16% at 92% 100%, #FDE6EE, transparent 80%), linear-gradient(180deg, #FEF8F5 0%, #FEF8F5 60%, #FDF6F6 100%); }
.ue-cs-mom { position: absolute; z-index: -1; top: 0; right: 0; width: min(50%, 900px); aspect-ratio: 832 / 386;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent); mask-composite: intersect; }
.ue-cs-mom img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ue-cs-left { position: absolute; z-index: -1; left: 0; top: clamp(3rem, 3.5vw, 4.5rem); width: clamp(70px, 8vw, 134px); height: auto; -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent); mask-image: linear-gradient(90deg, #000 45%, transparent); }
.ue-cs-head { max-width: 56%; min-height: 17.6vw; padding-left: clamp(0px, 3.4vw, 4rem); }
.ue-cs .ue-kicker { margin-bottom: 1rem; }
.ue-cs .ue-kicker::after { content: ""; width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ue-purple), var(--ue-gold)); }
.ue-cs-title { margin: 0 0 1rem; font: 700 clamp(2.1rem, 4vw, 4.4rem)/1.12 var(--ue-font-display); letter-spacing: -.02em; color: #263350; }
.ue-cs-title em { display: block; font-style: normal; color: var(--color-primary-strong); }
.ue-cs-lead { margin: 0; font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.6; color: #6B7488; }

.ue-cs-grid { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .ue-cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } }
.ue-cs-card { --accent: #2F7FD0; --pill: #E6F0FB; --pill-fg: #2F6DB5; position: relative; overflow: hidden; padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.3rem, 2.2vw, 2rem) clamp(1.6rem, 2.6vw, 2.4rem); border-radius: 30px;
    background: linear-gradient(180deg, #F3F8FF, #F7FAFF); border: 1.5px dashed rgba(47, 127, 208, .35); box-shadow: 0 24px 50px -36px rgba(47, 90, 160, .45); }
.ue-cs-card.is-mom { --accent: #E5487F; --pill: #FCEFF4; --pill-fg: #2E3550; background: #fff; border: 1.5px solid rgba(229, 72, 127, .16); }
.ue-cs-card::after { content: "Coming Soon"; position: absolute; top: 1.6rem; right: -3rem; padding: .4rem 3.6rem; transform: rotate(35deg); background: linear-gradient(90deg, #FFD54F, #F6B400); color: #3B3220; font: 800 .74rem/1.2 var(--ue-font-ui); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 14px -8px rgba(160, 110, 0, .7); }
.ue-cs-card header { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.4rem; padding-right: 5rem; }
.ue-cs-icon { flex: none; display: grid; place-items: center; width: clamp(58px, 4.3vw, 72px); aspect-ratio: 1; border-radius: 18px; background: linear-gradient(145deg, #E9F3FF, #CFE4FB); color: #1F3F6B; box-shadow: inset 0 0 0 1px rgba(47, 127, 208, .15), 0 10px 20px -14px rgba(47, 127, 208, .8); }
.ue-cs-card.is-mom .ue-cs-icon { background: linear-gradient(145deg, #FF9DBC, #EF5C91); color: #fff; box-shadow: 0 10px 20px -12px rgba(229, 72, 127, .8); }
.ue-cs-icon svg { width: 62%; height: 62%; }
.ue-cs-card header small { display: block; margin-bottom: .2rem; font: 700 .8rem/1.2 var(--ue-font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.ue-cs-card header h3 { margin: 0; font: 700 clamp(1.5rem, 2.1vw, 2.05rem)/1.15 var(--ue-font-display); color: #263350; }
.ue-cs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .75rem; }
.ue-cs-list li { display: flex; align-items: center; gap: .7rem; padding: .62rem 1rem; border-radius: 14px; background: var(--pill); color: var(--pill-fg); font-size: clamp(.86rem, 1vw, 1rem); font-weight: 500; line-height: 1.3; }
.ue-cs-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (max-width: 419.98px) { .ue-cs-list { grid-template-columns: 1fr; } }

.ue-cs-teddy, .ue-cs-art { position: absolute; z-index: 2; pointer-events: none; height: auto; }
.ue-cs-teddy { left: 0; bottom: clamp(1rem, 2vw, 2.5rem); width: clamp(90px, 10.3vw, 172px); }
.ue-cs-art { right: 0; bottom: clamp(1rem, 2.4vw, 2.75rem); width: clamp(120px, 13.9vw, 232px); }

@media (max-width: 991.98px) {
    .ue-cs { padding-top: 0; }
    .ue-cs-mom { position: relative; display: block; width: 100%; margin-bottom: 1.25rem; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
    .ue-cs-left { display: none; }
    .ue-cs-head { max-width: none; min-height: 0; margin-bottom: 2rem; }
    .ue-cs-teddy, .ue-cs-art { display: none; }
}

/* Hero slide 3 — "Quality & Certificates" artwork (client design): shown frameless on the hero background */
.ue-hx-card.is-art { background: none; border-radius: 0; box-shadow: none; overflow: visible; aspect-ratio: 764 / 546; }
.ue-hx-card.is-art img { object-fit: contain; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 78%, transparent 100%); }
.ue-hx .hero-slide { position: relative; }
.ue-hx-deco { position: absolute; z-index: 0; left: 0; bottom: 6.5rem; width: clamp(80px, 7vw, 120px); pointer-events: none; }
.ue-hx-deco img { display: block; width: 100%; height: auto; }
.ue-hx-deco i { position: absolute; left: 30%; top: -8rem; font-size: 2.2rem; color: #F59AB8; }
@media (max-width: 1399.98px) { .ue-hx-deco { display: none; } }

/* Language switcher (EN / বাংলা) */
.ue-lang { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--ue-line); box-shadow: var(--ue-shadow-sm); }
.ue-lang a { display: inline-grid; place-items: center; min-width: 44px; min-height: 34px; padding: 0 .7rem; border-radius: 999px; font: 700 .8rem/1 var(--ue-font-ui); color: var(--ue-ink); text-decoration: none; transition: background .2s, color .2s; }
.ue-lang a[lang="bn"] { font-family: "Noto Sans Bengali", "Hind Siliguri", var(--ue-font-ui); font-size: .86rem; }
.ue-lang a:hover { color: var(--color-primary-strong); }
.ue-lang a.is-active { background: var(--color-primary); color: #fff; }
.ue-lang a:focus-visible { outline: 2px solid var(--color-blue, #0878D1); outline-offset: 2px; }
.ue-lang-menu { display: flex; width: max-content; margin: 0 auto 1rem; }
.ue-lang-top { padding: 2px; box-shadow: none; }
.ue-lang-top a { min-width: 38px; min-height: 26px; font-size: .74rem; padding: 0 .55rem; gap: 0; }
.ue-topbar .ue-lang a { display: inline-grid; color: var(--ue-ink); }
.ue-topbar .ue-lang a.is-active { color: #fff; }
.ue-lang-quick { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 .6rem; border-radius: 14px; background: #fff; border: 1px solid var(--ue-line); color: var(--ue-ink); font: 700 .9rem/1 "Noto Sans Bengali", var(--ue-font-ui); text-decoration: none; }
.ue-lang-quick:hover { color: var(--color-primary-strong); border-color: var(--color-primary); }
@media (min-width: 992px) { .ue-lang-quick { display: none; } }

/* Bangla: Noto Sans Bengali (loaded only for the bn locale) as the fallback for Bengali glyphs */
html[lang="bn"] { --font-heading: "Poppins", "Noto Sans Bengali", system-ui, sans-serif; --font-body: "Nunito", "Noto Sans Bengali", system-ui, sans-serif; }
html[lang="bn"] .ue-kicker, html[lang="bn"] .ue-hx-kicker { letter-spacing: .04em; }
/* Small phones: keep logo, WhatsApp, language and menu buttons inside 320–389px */
@media (max-width: 389.98px) {
    .ue-header .container { gap: .5rem; }
    .ue-header-actions { gap: .35rem; }
    .ue-brand img { height: 36px; }
    .ue-header-actions .ue-icon-btn, .ue-burger, .ue-lang-quick { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 12px; }
}

/* Product render without the transparent cut-out (server could not create the WebP variant): blend the white
   studio background into the card instead of showing a white box. The blend sits on the outermost layer
   between the picture and the card background (.ue-pf-visual on homepage cards, otherwise the .tin itself). */
.tin.is-render.is-plain { filter: none !important; mix-blend-mode: multiply; }
.ue-pf-visual:has(> .tin.is-plain) { mix-blend-mode: multiply; }