/* ==========================================================================
   WOW layer — visual polish on top of index.html + experience.css.
   Purely presentational: no IDs or behaviour are changed here.
   ========================================================================== */

:root {
    --g-blue: #0874bb;
    --g-blue-2: #3fa9f5;
    --c-pink: #d92f69;
    --c-pink-2: #ff7eb0;
    --violet: #8b5cf6;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@property --wow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes wow-spin { to { --wow-angle: 360deg; } }
@keyframes wow-rotate { to { transform: rotate(360deg); } }
@keyframes wow-gradient-pan {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes wow-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes wow-rise {
    from { opacity: 0; transform: translateY(34px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes wow-fade-down {
    from { opacity: 0; translate: 0 -18px; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes wow-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55); }
    100% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
}
@keyframes wow-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}
@keyframes wow-shine {
    from { transform: translateX(-130%) skewX(-18deg); }
    to   { transform: translateX(230%) skewX(-18deg); }
}
@keyframes wow-breathe {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--flow-accent) 70%, white), 0 0 34px color-mix(in srgb, var(--flow-accent) 35%, transparent), 0 24px 60px rgba(0,0,0,0.45); }
    50%      { box-shadow: 0 0 0 2px color-mix(in srgb, var(--flow-accent) 90%, white), 0 0 64px color-mix(in srgb, var(--flow-accent) 55%, transparent), 0 24px 60px rgba(0,0,0,0.45); }
}
@keyframes wow-halo {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.45), 0 6px 26px rgba(0,0,0,0.45); }
    100% { box-shadow: 0 0 0 18px rgba(255,255,255,0), 0 6px 26px rgba(0,0,0,0.45); }
}

/* ===================== LANDING ===================== */

/* Glowing seam between the two brand halves (desktop). */
@media (min-width: 1025px) {
    .landing-container::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        z-index: 5;
        pointer-events: none;
        background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.95) 30%, rgba(139,92,246,0.55) 55%, rgba(255,255,255,0.95) 80%, transparent 100%);
        box-shadow: 0 0 24px 6px rgba(255,255,255,0.75);
    }
}

/* Pointer-following spotlight injected by wow.js */
.wow-spot {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.75), transparent 60%);
}
.brand-section:hover .wow-spot { opacity: 1; }

/* Twinkling sparkles injected by wow.js */
.wow-spark {
    position: absolute;
    z-index: 0;
    width: var(--s, 14px);
    height: var(--s, 14px);
    pointer-events: none;
    opacity: 0;
    animation: wow-twinkle var(--d, 3.2s) ease-in-out var(--delay, 0s) infinite;
    background: currentColor;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    filter: drop-shadow(0 0 6px currentColor);
}
.gerber .wow-spark  { color: #5ab8f2; }
.cerelac .wow-spark { color: #f27aa8; }

/* Hero */
.hero-header { animation: wow-fade-down 0.9s var(--ease-out) both; }
.hero-sub {
    order: -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 7px 16px 7px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: clamp(0.8rem, 1.2vw, 0.92rem);
    color: #4c3a8a;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 8px 26px rgba(76, 58, 138, 0.14), inset 0 0 0 1px rgba(139,92,246,0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-shadow: none;
}
.hero-sub::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--g-blue-2), var(--c-pink-2));
    animation: wow-pulse-dot 1.8s ease-out infinite;
}
.hero-title {
    font-size: clamp(1.7rem, 3.1vw, 2.9rem);
    letter-spacing: -0.01em;
    text-shadow: 0 4px 30px rgba(255,255,255,0.9);
}
.hero-title-fixed { color: #14213d; }
.hero-title-changing span {
    background: linear-gradient(90deg, var(--c-pink), var(--violet), var(--g-blue), var(--c-pink));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-phrase-cycle 9s ease-in-out infinite, wow-gradient-pan 4s linear infinite;
}
.hero-title-changing span:nth-child(2) { animation-delay: 3s, 0s; }
.hero-title-changing span:nth-child(3) { animation-delay: 6s, 0s; }
.hero-sparkle {
    background: linear-gradient(135deg, var(--g-blue-2), var(--violet), var(--c-pink-2));
    -webkit-background-clip: text;
    background-clip: text;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: clamp(0.82rem, 1.2vw, 0.95rem);
    font-weight: 700;
    color: #5b6478;
}
.hero-cta-arrow {
    display: inline-block;
    animation: wow-float 1.6s ease-in-out infinite;
    color: var(--violet);
}

/* Logos float gently */
.logo-box { animation: wow-float 6s ease-in-out infinite; }
#cerelac-side .logo-box { animation-delay: -3s; }
.brand-logo-img {
    filter: drop-shadow(0 14px 22px rgba(20, 60, 110, 0.18));
    transition: transform 0.6s var(--ease-spring);
}
.brand-section:hover .brand-logo-img { transform: scale(1.06); }

/* Cards: entrance, 3D tilt, shine, zoom */
.cards-side { perspective: 1100px; }
.baby-card {
    --rx: 0deg; --ry: 0deg; --lift: 0px;
    --accent: var(--g-blue);
    --accent-2: var(--g-blue-2);
    transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), background 0.4s ease;
    animation: wow-rise 0.95s var(--ease-out) backwards;
    background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,255,255,0.62));
    border-color: rgba(255,255,255,0.95);
    box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 0 rgba(255,255,255,1);
    outline: none;
}
.baby-card.pink { --accent: var(--c-pink); --accent-2: var(--c-pink-2); }
#gerber-side .baby-card:nth-child(1)  { animation-delay: 0.15s; }
#gerber-side .baby-card:nth-child(2)  { animation-delay: 0.27s; }
#cerelac-side .baby-card:nth-child(1) { animation-delay: 0.39s; }
#cerelac-side .baby-card:nth-child(2) { animation-delay: 0.51s; }

.baby-card:hover,
.baby-card:focus-visible {
    --lift: -14px;
    transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
    box-shadow: 0 34px 60px -14px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 2px color-mix(in srgb, var(--accent) 40%, white), inset 0 1px 0 #fff;
}
.baby-card:active { --lift: -6px; transition-duration: 0.15s; }
.baby-card:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, white); }

.image-frame {
    transform: translateZ(30px);
    box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent) 60%, transparent);
    isolation: isolate;
}
.image-frame img { transition: transform 0.9s var(--ease-out), filter 0.6s ease; }
.baby-card:hover .image-frame img { transform: scale(1.08); filter: saturate(1.12) contrast(1.03); }
.image-frame::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 45%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-130%) skewX(-18deg);
}
.baby-card:hover .image-frame::after { animation: wow-shine 0.9s var(--ease-out); }
.image-frame::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.baby-card:hover .image-frame::before { opacity: 1; }
.baby-card .heart { z-index: 3; transform: translateZ(40px); }

.card-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px auto 2px;
    padding: 9px 16px;
    width: fit-content;
    min-width: 70%;
    border-radius: 999px;
    font-family: 'Outfit', 'Tajawal', sans-serif;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, white);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, white);
    transform: translateZ(24px);
    transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.card-label::after {
    content: "";
    width: 18px; height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.baby-card:hover .card-label,
.baby-card:focus-visible .card-label {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}

/* Language switcher */
.lang-btn {
    background: rgba(255,255,255,0.78);
    border-color: rgba(255,255,255,0.95);
    box-shadow: 0 8px 24px rgba(40, 50, 90, 0.12);
}
.lang-btn:hover { box-shadow: 0 12px 30px rgba(40, 50, 90, 0.18); }
.lang-icon { transition: transform 0.6s var(--ease-spring); }
.lang-btn:hover .lang-icon { transform: rotate(180deg); }

/* ===================== CAMERA ===================== */

#screen-camera, #screen-confirm {
    background:
        radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--flow-accent) 35%, transparent), transparent 70%),
        radial-gradient(50% 45% at 90% 95%, rgba(139,92,246,0.25), transparent 70%),
        linear-gradient(180deg, #0b1628 0%, #050b16 100%);
}
.cam-top-bar, .confirm-top { border-bottom-color: rgba(255,255,255,0.06); }
.cam-bg-glow { display: none; } /* replaced by the screen gradients; it also caused a stray scrollbar */
.cam-brand-logo { box-shadow: 0 8px 26px rgba(0,0,0,0.35); }
.cam-viewfinder { animation: wow-breathe 3.2s ease-in-out infinite; }
.vf-corner { border-color: #fff; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--flow-accent) 90%, white)); }
.vf-scan-line {
    opacity: 0.6;
    background: linear-gradient(90deg, transparent, var(--flow-accent), #fff, var(--flow-accent), transparent);
}
.countdown-overlay {
    font-size: clamp(110px, 26vmin, 220px);
    background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--flow-accent) 60%, white));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 30px color-mix(in srgb, var(--flow-accent) 80%, transparent));
}
.shutter-ring {
    border: none;
    padding: 4px;
    background: conic-gradient(from var(--wow-angle), var(--flow-accent), #fff, var(--violet), var(--flow-accent));
    animation: wow-spin 3s linear infinite;
}
.shutter-btn:not(:disabled) .shutter-ring { animation: wow-spin 3s linear infinite, wow-halo 1.8s ease-out infinite; }
.shutter-circle {
    width: 100%; height: 100%;
    background: radial-gradient(circle at 35% 30%, #fff, #e8eef5);
    box-shadow: inset 0 -4px 10px rgba(0,0,0,0.12);
}
.photo-upload-btn { backdrop-filter: blur(10px); transition: background 0.25s, transform 0.25s var(--ease-spring); }
.photo-upload-btn:hover { transform: translateY(-2px); }

.btn-use {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--flow-accent), color-mix(in srgb, var(--flow-accent) 55%, var(--violet)));
    box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--flow-accent) 75%, transparent);
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
}
.btn-use::after,
.btn-result-primary::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: translateX(-130%) skewX(-18deg);
    animation: wow-shine 2.8s ease-in-out 1s infinite;
    pointer-events: none;
}
.btn-use:hover { transform: translateY(-2px); }

/* Step indicator in the camera / confirm top bars */
.flow-steps {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 5px;
    list-style: none;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
html[dir="ltr"] .flow-steps { right: 18px; }
.flow-steps li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    color: rgba(255,255,255,0.5);
    font: 700 0.8rem 'Tajawal', sans-serif;
    transition: background 0.4s, color 0.4s;
}
html[dir="ltr"] .flow-steps li { padding: 5px 12px 5px 6px; }
.flow-steps i {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font: 800 0.72rem 'Outfit', sans-serif;
    font-style: normal;
    background: rgba(255,255,255,0.12);
}
.flow-steps[data-step="1"] li:nth-child(1),
.flow-steps[data-step="2"] li:nth-child(2) {
    color: #fff;
    background: linear-gradient(135deg, var(--flow-accent), color-mix(in srgb, var(--flow-accent) 55%, var(--violet)));
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--flow-accent) 90%, transparent);
}
.flow-steps[data-step="1"] li:nth-child(1) i,
.flow-steps[data-step="2"] li:nth-child(2) i { background: rgba(255,255,255,0.25); }
.flow-steps[data-step="2"] li:nth-child(1) { color: rgba(255,255,255,0.8); }
.flow-steps[data-step="2"] li:nth-child(1) i { font-size: 0; background: color-mix(in srgb, var(--flow-accent) 75%, white); }
.flow-steps[data-step="2"] li:nth-child(1) i::after { content: "✓"; font-size: 0.75rem; color: #fff; }

/* Back / close button */
.back-cam-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    transition: background 0.25s, transform 0.25s var(--ease-spring);
}
.back-cam-btn:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }

/* Live camera: oval face guide with dimmed surroundings */
.vf-face-guide {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 4;
    width: min(40%, 290px);
    aspect-ratio: 3 / 4;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
    border: 2px dashed rgba(255,255,255,0.8);
    box-shadow: 0 0 0 200vmax rgba(3, 10, 22, 0.38);
}
.vf-face-guide::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from var(--wow-angle), transparent 0 55%, var(--flow-accent) 75%, #fff 85%, transparent 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 8px var(--flow-accent));
    animation: wow-spin 3.5s linear infinite;
}
.vf-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(5, 16, 30, 0.7);
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.vf-hint::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--flow-accent);
    box-shadow: 0 0 0 0 var(--flow-accent);
    animation: wow-pulse-dot 1.6s ease-out infinite;
}

/* Camera status (opening / error) */
.camera-status {
    background:
        radial-gradient(50% 50% at 50% 40%, color-mix(in srgb, var(--flow-accent) 30%, transparent), transparent 70%),
        rgba(4, 12, 24, 0.92);
    font-weight: 600;
}
.camera-status:has(#retry-camera[hidden])::before {
    content: "";
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.14);
    border-top-color: var(--flow-accent);
    border-right-color: var(--violet);
    animation: wow-rotate 0.9s linear infinite;
}
.camera-status button {
    background: linear-gradient(135deg, var(--flow-accent), color-mix(in srgb, var(--flow-accent) 55%, var(--violet)));
    border-color: transparent;
    padding: 12px 28px;
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--flow-accent) 80%, transparent);
}

/* Bottom controls */
.cam-bottom { gap: 12px; }
.cam-instruction { color: rgba(226, 236, 246, 0.85); }
.shutter-btn {
    width: 86px; height: 86px;
    padding: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    transition: transform 0.25s var(--ease-spring);
}
.shutter-btn:hover:not(:disabled) { transform: scale(1.07); }
.photo-upload-btn {
    gap: 8px;
    padding: 9px 20px 9px 18px;
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.2);
}
.photo-upload-btn::before {
    content: "";
    width: 17px; height: 17px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===================== CONFIRM ===================== */

.confirm-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 26px 20px 18px;
    overflow: visible;
    container-type: size;
}
/* The frame hugs the photo: --ar (width / height) is set by wow.js when the photo loads. */
.confirm-img-wrap {
    --ar: 0.75;
    position: relative;
    width: min(100cqw, 100cqh * var(--ar));
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: var(--ar);
    padding: 10px;
    border-radius: 30px;
    background: linear-gradient(160deg, #fff, #eef3f9);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7), 0 0 60px color-mix(in srgb, var(--flow-accent) 35%, transparent);
    rotate: -1.5deg;
    animation: wow-rise 0.7s var(--ease-out) backwards;
}
.confirm-img-wrap::before {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: -1;
    border-radius: 40px;
    background: conic-gradient(from var(--wow-angle), var(--flow-accent), var(--violet), transparent 60%, var(--flow-accent));
    filter: blur(22px);
    opacity: 0.55;
    animation: wow-spin 5s linear infinite;
}
.confirm-img-wrap::after {
    content: "✓";
    position: absolute;
    top: -14px;
    inset-inline-end: -14px;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    font: 900 1.2rem 'Outfit', sans-serif;
    color: #fff;
    background: linear-gradient(135deg, var(--flow-accent), color-mix(in srgb, var(--flow-accent) 55%, var(--violet)));
    border: 3px solid #fff;
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--flow-accent) 80%, transparent);
    animation: wow-rise 0.6s var(--ease-spring) 0.35s backwards;
}
.confirm-img-wrap .vf-corner { display: none; }
.confirm-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: none;
}

.confirm-bottom {
    width: min(100% - 32px, 620px);
    margin: 0 auto max(18px, env(safe-area-inset-bottom, 0px));
    padding: 20px 22px 22px;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    background: rgba(14, 28, 48, 0.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    animation: wow-rise 0.7s var(--ease-out) 0.12s backwards;
}
/* Layout always fits; only the decorative glow spills over, so don't scroll for it. */
@media (min-height: 481px) { #screen-confirm { overflow: hidden; } }
.confirm-title { font-size: clamp(1.35rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; }
.confirm-tips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 2px;
    padding: 0;
    list-style: none;
}
.confirm-tips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font: 600 0.8rem 'Tajawal', sans-serif;
    color: #dbe6f1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
}
.confirm-tips li::before {
    content: "✓";
    font: 800 0.75rem 'Outfit', sans-serif;
    color: color-mix(in srgb, var(--flow-accent) 55%, white);
}
.confirm-actions { margin-top: 10px; }
.btn-retake { background: rgba(255,255,255,0.08); transition: background 0.25s, transform 0.25s var(--ease-spring); }
.btn-retake:hover:not(:disabled) { transform: translateY(-2px); }

@media (max-width: 768px) {
    .flow-steps { right: 12px; gap: 2px; padding: 4px; }
    .flow-steps li, html[dir="ltr"] .flow-steps li { padding: 4px; }
    .flow-steps span { display: none; }
    .vf-face-guide { width: min(58%, 240px); }
    .shutter-btn { width: 76px; height: 76px; padding: 5px; }
    .confirm-body { padding: 18px 16px 12px; }
    .confirm-img-wrap { padding: 7px; border-radius: 24px; }
    .confirm-img { border-radius: 18px; }
    .confirm-img-wrap::after { width: 36px; height: 36px; top: -10px; inset-inline-end: -10px; font-size: 1rem; }
    .confirm-bottom { width: calc(100% - 24px); padding: 14px 14px 16px; border-radius: 22px; margin-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
    .confirm-tips li { font-size: 0.72rem; padding: 4px 9px; }
}

/* ===================== LOADING ===================== */

#screen-loading {
    background:
        radial-gradient(50% 40% at 20% 15%, color-mix(in srgb, var(--wait-accent) 22%, transparent), transparent 70%),
        radial-gradient(45% 40% at 85% 85%, rgba(139,92,246,0.18), transparent 70%),
        linear-gradient(180deg, #fff 0%, var(--wait-soft) 100%);
}
.loading-content {
    position: relative;
    border: 1px solid rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--wait-accent) 38%, transparent);
    animation: wow-rise 0.7s var(--ease-out) both;
}
.loading-content::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    z-index: -1;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--wow-angle), transparent 0 60%, var(--wait-accent) 80%, var(--violet) 90%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: wow-spin 4s linear infinite;
}
.loading-ring { width: 150px; height: 150px; }
.loading-ring::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: conic-gradient(from var(--wow-angle), var(--wait-accent), var(--violet), transparent 70%, var(--wait-accent));
    filter: blur(14px);
    opacity: 0.55;
    animation: wow-spin 2.4s linear infinite;
}
.loading-preview {
    position: relative;
    width: 100px; height: 100px;
    border: 4px solid #fff;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--wait-accent) 35%, transparent);
    animation: wow-float 3s ease-in-out infinite;
}
.loading-title {
    background: linear-gradient(90deg, #17283a, var(--wait-accent), var(--violet), #17283a);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wow-gradient-pan 3.5s linear infinite;
}
.lstep { position: relative; overflow: hidden; transition: background 0.4s, color 0.4s, transform 0.4s var(--ease-spring); }
.lstep.active { transform: scale(1.02); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--wait-accent) 60%, transparent); }
.lstep.active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    transform: translateX(-130%) skewX(-18deg);
    animation: wow-shine 1.6s ease-in-out infinite;
    pointer-events: none;
}

/* ===================== RESULT ===================== */

.result-image-panel {
    position: relative;
    background:
        radial-gradient(55% 45% at 50% 40%, color-mix(in srgb, var(--flow-accent) 45%, transparent), transparent 70%),
        radial-gradient(40% 35% at 15% 90%, rgba(139,92,246,0.35), transparent 70%),
        linear-gradient(180deg, #0b1628, #050b16);
}
.result-image-panel::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 140vmax; height: 140vmax;
    margin: -70vmax 0 0 -70vmax;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.06) 0deg 6deg, transparent 6deg 18deg);
    animation: wow-rotate 60s linear infinite;
}
#result-canvas {
    position: relative;
    border-radius: 22px;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 0 60px color-mix(in srgb, var(--flow-accent) 55%, transparent), 0 30px 70px rgba(0,0,0,0.5);
}
.result-action-panel {
    background:
        radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--flow-accent) 14%, transparent), transparent 70%),
        linear-gradient(170deg, #fff, var(--flow-accent-soft));
}
.result-action-panel > * { animation: wow-rise 0.8s var(--ease-out) backwards; }
.result-action-panel > :nth-child(2) { animation-delay: 0.1s; }
.result-action-panel > :nth-child(3) { animation-delay: 0.2s; }
.result-action-panel > :nth-child(4) { animation-delay: 0.3s; }
.result-action-panel > :nth-child(5) { animation-delay: 0.4s; }
.result-title {
    font-size: clamp(2.2rem, 4.8vw, 3.8rem);
    background: linear-gradient(90deg, var(--flow-accent), var(--violet), var(--c-pink-2), var(--flow-accent));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wow-rise 0.8s var(--ease-out) 0.1s backwards, wow-gradient-pan 5s linear infinite;
    padding-bottom: 4px;
}
.btn-result { transition: transform 0.25s var(--ease-spring), box-shadow 0.25s, background 0.25s; }
.btn-result-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--flow-accent), color-mix(in srgb, var(--flow-accent) 55%, var(--violet)));
    box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--flow-accent) 80%, transparent);
}
.btn-result-outline:hover, .btn-result-ghost:hover { transform: translateY(-2px); }
.res-qr-card {
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--flow-accent) 45%, transparent);
    backdrop-filter: blur(10px);
}
#final-qr-code { border-radius: 16px; }

/* Step indicator on the (light) result panel: all steps complete */
.flow-steps--light {
    position: static;
    transform: none;
    flex-shrink: 0;
    background: rgba(255,255,255,0.75);
    border-color: color-mix(in srgb, var(--flow-accent) 18%, white);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--flow-accent) 40%, transparent);
}
.flow-steps--light li { color: #5b6b7c; }
.flow-steps--light i { background: color-mix(in srgb, var(--flow-accent) 12%, white); }
.flow-steps[data-step="3"] li:nth-child(3) {
    color: #fff;
    background: linear-gradient(135deg, var(--flow-accent), color-mix(in srgb, var(--flow-accent) 55%, var(--violet)));
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--flow-accent) 90%, transparent);
}
.flow-steps[data-step="3"] li:nth-child(-n+2) i,
.flow-steps[data-step="3"] li:nth-child(3) i { font-size: 0; background: color-mix(in srgb, var(--flow-accent) 75%, white); }
.flow-steps[data-step="3"] li:nth-child(3) i { background: rgba(255,255,255,0.28); }
.flow-steps[data-step="3"] i::after { content: "✓"; font-size: 0.75rem; color: #fff; }

/* Brand logo in a floating pill */
.res-logo-pill {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 10px 22px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--flow-accent) 55%, transparent);
    animation: wow-rise 0.8s var(--ease-out) backwards, wow-float 6s ease-in-out 1s infinite;
}
.res-logo-pill .res-corner-logo { display: block; height: clamp(52px, 7vh, 76px); width: auto; max-width: 180px; object-fit: contain; margin: 0; }

/* Tilted, glowing photo frame */
#result-canvas {
    rotate: -1.5deg;
    width: auto;
    height: auto;
    max-width: 92%;
    max-height: 92%;
    object-fit: initial;
    background: #fff;
    box-shadow:
        0 0 0 8px #fff,
        0 0 0 9px color-mix(in srgb, var(--flow-accent) 30%, white),
        0 0 90px 10px color-mix(in srgb, var(--flow-accent) 55%, transparent),
        0 40px 80px rgba(0,0,0,0.55);
    transition: rotate 0.6s var(--ease-spring), scale 0.6s var(--ease-spring);
}
.result-img-card:hover #result-canvas { rotate: 0deg; scale: 1.015; }
.result-img-card { overflow: visible; } /* the panel still clips; this keeps the glow soft */
.result-image-panel .wow-spark { color: #fff; z-index: 1; }
.result-page[data-brand="cerelac"] .result-image-panel .wow-spark:nth-child(odd) { color: #ff9cc2; }
.result-page[data-brand="gerber"] .result-image-panel .wow-spark:nth-child(odd) { color: #8fd0ff; }

/* Secondary buttons + QR */
.btn-result-ghost { background: rgba(255,255,255,0.7); border: 1px solid rgba(100,116,139,0.18) !important; }
.res-qr-card {
    border: 1.5px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--flow-accent), var(--violet), var(--c-pink-2)) border-box;
}
.result-scan-label { color: #64748b; font-family: 'Tajawal', 'Outfit', sans-serif; font-size: 0.85rem; }

@media (max-width: 768px) {
    .flow-steps--light span { display: inline; }
    html .result-action-panel .flow-steps--light li { padding: 4px 10px 4px 5px; }
    .res-logo-pill { padding: 7px 16px; border-radius: 18px; }
    .res-logo-pill .res-corner-logo { height: 44px !important; }
    #result-canvas { max-width: 86%; max-height: 86%; }
}

/* Confetti canvas injected by wow.js */
.wow-confetti {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

/* ===================== PERFORMANCE ===================== */

/* Touch screens: no double-tap zoom or tap delay on interactive elements, no grey tap flash. */
button, .baby-card, .photo-upload-btn, .lang-btn, label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* The cards sit on animated bubbles/sparkles, so a backdrop blur would be recomputed every frame.
   Their background is nearly opaque anyway. */
.baby-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(255,255,255,0.8));
}
/* Pause the landing animations while the camera / result screens cover them (set by wow.js). */
body.overlay-open .landing-container,
body.overlay-open .landing-container *,
body.overlay-open .landing-container *::before,
body.overlay-open .landing-container *::after,
body.overlay-open .lang-switcher * { animation-play-state: paused !important; }

/* ===================== RESPONSIVE / A11Y ===================== */

/* Side-by-side layout (laptops, iPad landscape): keep the title clear of the logos. */
@media (min-width: 1025px) {
    .hero-header { width: min(700px, calc(100% - 580px)); }
    .hero-title { font-size: clamp(1.5rem, 2.6vw, 2.9rem); }
}
/* iPad portrait (769-1024 wide, stacked brands): size the cards from the screen height so both
   brands fit on one screen with cards as large as possible (range 170-250px wide). */
@media (min-width: 769px) and (max-width: 1024px) {
    .brand-section { padding: 18px 24px 26px; }
    .logo-box { height: 100px; }
    .brand-header { margin-bottom: 14px; }
    .baby-card {
        width: clamp(170px, calc(((100dvh - 150px) / 2 - 180px) / 1.55), 250px);
        max-width: none;
        padding: 14px;
    }
    .cards-side { gap: 26px; }
}

/* Short screens (1366x768 / 1280x720 laptops, iPad landscape): compact header and
   cap the card size by the screen height so the whole card stays visible. */
@media (min-width: 1025px) and (max-height: 820px) {
    .brand-section { padding-top: 92px; padding-bottom: 22px; }
    .logo-box { height: 118px; }
    .brand-header { margin-bottom: 18px; }
    .hero-header { top: 11%; }
    .hero-sub { margin-bottom: 8px; }
    .hero-cta { margin-top: 6px; }
    #gerber-side .cards-side > .baby-card,
    #cerelac-side .cards-side > .baby-card { flex: 0 1 auto; width: 50%; max-width: calc((100vh - 370px) * 0.75 + 40px); }
    .baby-card { padding: 14px; }
    .card-label { margin-top: 10px; padding: 7px 12px; }
}

.card-label { white-space: nowrap; }
@media (max-width: 1024px) {
    .hero-sub { margin-bottom: 8px; }
    .hero-cta { display: none; }
    .card-label { min-width: 0; width: 100%; padding: 8px 10px; gap: 6px; }
}
@media (max-width: 768px) {
    .hero-title { font-size: clamp(1.05rem, 5vw, 1.35rem); }
    .card-label { padding: 6px 10px; margin-top: 8px; min-width: 0; width: 100%; gap: 5px; }
    .card-label::after { width: 14px; height: 14px; }
    .image-frame, .baby-card .heart, .card-label { transform: none; }
    .wow-spark { --s: 10px; }
}
@media (hover: none) {
    .wow-spot { display: none; }
}

/* Phone in landscape (short height): stacking left almost no room for the camera / photo,
   so place the controls beside it instead of below. */
@media (orientation: landscape) and (max-height: 520px) {
    .cam-top-bar, .confirm-top { min-height: 50px; padding: 5px 14px; }
    .cam-brand-logo { height: 38px; padding: 3px 8px; border-radius: 10px; }
    .back-cam-btn { min-height: 36px; padding: 5px 12px; font-size: 0.82rem; }
    .flow-steps span { display: none; }
    .flow-steps li, html[dir="ltr"] .flow-steps li { padding: 3px; }

    #screen-camera.active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(0, 1fr);
    }
    #screen-camera .cam-top-bar { grid-column: 1 / -1; }
    #screen-camera .cam-viewfinder { grid-column: 1; grid-row: 2; width: auto; margin: 8px 12px 12px; }
    #screen-camera .cam-bottom { grid-column: 2; grid-row: 2; justify-content: center; width: 210px; padding: 8px 12px 12px; }
    .cam-instruction { display: none; }
    .shutter-btn { width: 70px; height: 70px; }
    .vf-face-guide { width: auto; height: 70%; }

    #screen-confirm.active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 44%);
        grid-template-rows: auto minmax(0, 1fr);
    }
    #screen-confirm .confirm-top { grid-column: 1 / -1; }
    #screen-confirm .confirm-body { grid-column: 1; grid-row: 2; padding: 12px 14px; }
    #screen-confirm .confirm-bottom {
        grid-column: 2; grid-row: 2; align-self: center;
        width: auto; margin: 0 14px; padding: 14px 16px 16px; gap: 5px;
    }
    .confirm-title { font-size: 1.15rem; }
    .confirm-sub { font-size: 0.78rem; }
    .confirm-tips li { font-size: 0.7rem; padding: 3px 8px; }
    .confirm-actions { margin-top: 6px; }
    .btn-retake, .btn-use { min-height: 44px; padding: 8px 10px; font-size: 0.85rem; }
}
/* ===================== SMOOTHNESS (anti-jank) =====================
   Only transform and opacity are animated by the GPU. The effects below used to animate
   custom properties, box-shadow, top or backdrop blur, which repaint every frame and
   caused stutter (worst on the camera screen, over live video). Same look, cheap animations. */
@keyframes wow-opacity-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes wow-glow-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } }
@keyframes wow-ring-out { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.4); opacity: 0; } }
@keyframes wow-scan { 0% { transform: translateY(-100%); opacity: 0; } 12%, 88% { opacity: 0.7; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes wow-rise-light { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Landing */
.baby-card { animation-name: wow-rise-light; }                  /* no filter blur during entrance */
.baby-card::before { animation-play-state: paused; }           /* border light rests as a static accent… */
@media (hover: hover) and (pointer: fine) {
    .baby-card:hover::before { animation-play-state: running; } /* …and only rotates on the hovered card */
}
.wow-spark { filter: none; will-change: transform, opacity; }
.wow-spot {
    inset: auto;
    left: 0; top: 0;
    width: 840px; height: 840px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,0.7), transparent);
    transform: translate3d(-9999px, 0, 0);
    will-change: transform;
}
.hero-sub, .lang-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,0.92);
}
.hero-sub::before, .vf-hint::before { box-shadow: none; animation: wow-opacity-pulse 1.6s ease-in-out infinite; }
/* Gradient text keeps its colors but no longer pans (background-position repaints every frame). */
.hero-title-changing span { animation: hero-phrase-cycle 9s ease-in-out infinite; background-position: 30% 50%; }
.hero-title-changing span:nth-child(2) { animation-delay: 3s; }
.hero-title-changing span:nth-child(3) { animation-delay: 6s; }
.loading-title { animation: none; background-position: 40% 50%; }
.result-title { animation: wow-rise 0.8s var(--ease-out) 0.1s backwards; background-position: 20% 50%; }

/* Camera: nothing repaints over the live video */
.cam-viewfinder {
    animation: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--flow-accent) 80%, white),
                0 0 44px color-mix(in srgb, var(--flow-accent) 42%, transparent),
                0 24px 60px rgba(0,0,0,0.45);
}
.vf-hint { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5,16,30,0.82); }
.vf-scan-line {
    top: 0;
    height: 100%;
    background: none;
    box-shadow: none;
    opacity: 1;
    animation: wow-scan 3s ease-in-out infinite;
    will-change: transform, opacity;
}
.vf-scan-line::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--flow-accent), #fff, var(--flow-accent), transparent);
}
.vf-face-guide::before {
    background: linear-gradient(135deg, var(--flow-accent), #fff, var(--violet));
    animation: wow-opacity-pulse 2.4s ease-in-out infinite;
    will-change: opacity;                                       /* own layer: the big shade is not repainted */
}
.shutter-btn { position: relative; }
.shutter-ring,
.shutter-btn:not(:disabled) .shutter-ring {
    background: conic-gradient(var(--flow-accent), #fff, var(--violet), var(--flow-accent));
    animation: wow-rotate 3s linear infinite;
    will-change: transform;
}
.shutter-circle { background: radial-gradient(circle, #fff 55%, #e8eef5); box-shadow: none; }
.shutter-btn:not(:disabled)::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.65);
    pointer-events: none;
    animation: wow-ring-out 1.8s ease-out infinite;
}

/* Confirm */
.confirm-img-wrap::before {
    background: linear-gradient(135deg, var(--flow-accent), var(--violet));
    animation: wow-glow-breathe 3s ease-in-out infinite;
    will-change: opacity;
}
.confirm-bottom { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14, 28, 48, 0.94); }

/* Loading */
.loading-content { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.95); }
.loading-content::before {
    background: linear-gradient(135deg, var(--wait-accent), var(--violet), var(--wait-accent));
    animation: wow-opacity-pulse 2.4s ease-in-out infinite;
    will-change: opacity;
}
.loading-ring::before {
    background: conic-gradient(var(--wait-accent), var(--violet), transparent 70%, var(--wait-accent));
    animation: wow-rotate 2.4s linear infinite;
    will-change: transform;
}

/* Result: smaller rotating-rays layer (less GPU memory), static on touch devices */
.result-image-panel::before {
    width: 110vmax; height: 110vmax;
    margin: -55vmax 0 0 -55vmax;
    will-change: transform;
}
@media (hover: none) { .result-image-panel::before { animation: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .hero-title-changing span:first-child { opacity: 1; }
    .wow-spark, .wow-confetti { display: none; }
}

/* Age notice (ministry requirement): must stay visible on every screen size.
   It sits in the top row beside the AI pill, where the header has free width, so the header
   does not grow taller and push into the cards. */
.hero-top {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 14px;
}
.hero-top .hero-sub { margin: 0; }
.age-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 26px rgba(76, 58, 138, 0.14), inset 0 0 0 1px rgba(139, 92, 246, 0.14);
    font-family: 'Tajawal', sans-serif;
    font-size: clamp(0.8rem, 1.2vw, 0.92rem);
    font-weight: 700;
    color: #2b3245;
    pointer-events: auto;
    white-space: nowrap;
}
html[dir="rtl"] .age-badge { padding: 4px 4px 4px 14px; }
.age-badge-num {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g-blue-2), var(--violet), var(--c-pink-2));
    color: #fff;
    font-size: 0.92em;
    font-weight: 900;
    direction: ltr;
}
@media (min-width: 1025px) and (max-height: 820px) { .hero-top { margin-bottom: 8px; } }
@media (max-width: 1024px) { .hero-top { margin-bottom: 8px; } }
@media (max-width: 768px) {
    .age-badge { font-size: 0.78rem; white-space: normal; text-align: start; }
    .age-badge-num { min-width: 26px; height: 26px; }
}

/* Desktop shows the age notice in the header; stacked layouts move it under the Gerber logo. */
.age-badge--section { display: none; }
@media (max-width: 1024px) {
    .hero-top .age-badge { display: none; }
    .age-badge--section { display: flex; width: fit-content; margin: 0 auto 14px; }
    .age-badge--section, html[dir="rtl"] .age-badge--section { gap: 5px; padding: 2px 2px 2px 9px; font-size: 0.62rem; box-shadow: 0 4px 14px rgba(76, 58, 138, 0.1), inset 0 0 0 1px rgba(139, 92, 246, 0.12); }
    html[dir="ltr"] .age-badge--section { padding: 2px 9px 2px 2px; }
    .age-badge--section .age-badge-num { min-width: 19px; height: 19px; padding: 0 3px; font-size: 0.85em; }
}