/* ==========================================================================
   MAHDI — IMMERSIVE 3D LAYER
   Loaded after style.css. Keeps the brand tokens and every functional
   component, and replaces the visual language with a modern, depth-driven
   one: gradient mesh light, glass surfaces, real perspective, and a
   scroll-driven logo hero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Immersive palette
   The landing experience is navy-dark by default because the supplied logo
   animation lives on navy. Light mode stays fully supported.
   -------------------------------------------------------------------------- */
:root {
    --mesh-1: rgba(27, 58, 133, .55);
    --mesh-2: rgba(233, 161, 59, .18);
    --mesh-3: rgba(18, 41, 107, .65);

    --glass-bg: rgba(255, 255, 255, .72);
    --glass-brd: rgba(255, 255, 255, .85);
    --glass-shadow: 0 20px 60px rgba(11, 31, 77, .16);

    --depth-1: 0 2px 6px rgba(11, 31, 77, .06);
    --depth-2: 0 10px 30px rgba(11, 31, 77, .10);
    --depth-3: 0 30px 80px rgba(11, 31, 77, .18);
    --glow-gold: 0 0 40px rgba(233, 161, 59, .35);

    --perspective: 1200px;
}

[data-theme="dark"] {
    --mesh-1: rgba(36, 73, 158, .50);
    --mesh-2: rgba(233, 161, 59, .16);
    --mesh-3: rgba(7, 16, 40, .85);

    --glass-bg: rgba(18, 41, 107, .38);
    --glass-brd: rgba(255, 255, 255, .12);
    --glass-shadow: 0 24px 70px rgba(0, 0, 0, .55);

    --depth-1: 0 2px 8px rgba(0, 0, 0, .35);
    --depth-2: 0 12px 34px rgba(0, 0, 0, .45);
    --depth-3: 0 34px 90px rgba(0, 0, 0, .60);
}

/* --------------------------------------------------------------------------
   2. Ambient background — a soft gradient mesh behind the whole page
   -------------------------------------------------------------------------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 12% 8%,  var(--mesh-1) 0%, transparent 60%),
        radial-gradient(45% 40% at 88% 18%, var(--mesh-2) 0%, transparent 62%),
        radial-gradient(70% 60% at 50% 105%, var(--mesh-3) 0%, transparent 65%);
    opacity: .55;
}
[data-theme="dark"] body::before { opacity: 1; }

/* Fine film grain so the large flat gradients never band. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Type — larger, tighter, more confident
   -------------------------------------------------------------------------- */
h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem); letter-spacing: -.03em; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; }

.display {
    font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.045em;
}
[dir="rtl"] .display { letter-spacing: 0; line-height: 1.15; }

/* Gold gradient text, used sparingly on one word per heading. */
.grad-gold {
    background: linear-gradient(100deg, var(--gold-300), var(--gold-500) 45%, var(--gold-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   3b. SITE LOADER
   The logo animation plays here once per session, then the curtain lifts.
   -------------------------------------------------------------------------- */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--navy-900);
    /* A soft brand glow behind the lockup. */
    background-image: radial-gradient(60% 50% at 50% 45%, rgba(27, 58, 133, .55), transparent 70%);
}
.loader[hidden] { display: none; }

.loader__canvas {
    inline-size: min(88vw, 760px);
    block-size: min(42vh, 340px);
    display: block;
}

.loader__bar {
    position: absolute;
    inset-block-end: clamp(56px, 12vh, 110px);
    inline-size: min(240px, 52vw);
    block-size: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}
.loader__bar span {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}
[dir="rtl"] .loader__bar span { transform-origin: right center; }

/* The curtain lift. */
.loader.is-leaving {
    animation: loader-out .85s var(--ease-out) forwards;
}
@keyframes loader-out {
    to { opacity: 0; transform: translateY(-6%) scale(1.04); visibility: hidden; }
}

/* Hold the page still while the loader is up. */
html.loading, html.loading body { overflow: hidden; }

/* The first screen of content rises in once the curtain has lifted. */
html.loader-done .site-header,
html.loader-done main {
    animation: content-in .8s var(--ease-out) both;
}
html.loader-done main { animation-delay: .08s; }
@keyframes content-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .loader { display: none !important; }
    html.loader-done .site-header,
    html.loader-done main { animation: none; }
}

/* --------------------------------------------------------------------------
   3c. 3D STAGE BACKDROP
   A receding perspective grid plus a horizon glow, sitting behind the top
   of the page. Pure CSS, no images, and it never intercepts a click.
   -------------------------------------------------------------------------- */
.stage3d {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: min(760px, 90vh);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    /* Fade the whole scene out toward the content below it. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

.stage3d__grid {
    position: absolute;
    inset-block-end: -10%;
    inset-inline: -50%;
    block-size: 70%;
    background-image:
        linear-gradient(rgba(233, 161, 59, .30) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 161, 59, .22) 1px, transparent 1px);
    background-size: 76px 76px;
    transform: perspective(420px) rotateX(62deg);
    transform-origin: bottom center;
    opacity: .5;
    animation: grid-drift 14s linear infinite;
}
[data-theme="dark"] .stage3d__grid { opacity: .38; }

/* Animate a transform, not background-position. Moving a background repaints
   the whole layer on every frame; a transform is handled by the compositor
   and costs almost nothing. */
@keyframes grid-drift {
    to { transform: perspective(420px) rotateX(62deg) translate3d(0, 76px, 0); }
}

.stage3d__glow {
    position: absolute;
    inset-block-end: 22%;
    inset-inline-start: 50%;
    inline-size: min(900px, 90vw);
    block-size: 240px;
    transform: translateX(-50%);
    border-radius: 50%;
    /* The gradient is already soft; blurring it again cost a full-screen
       filter pass for no visible gain. */
    background: radial-gradient(ellipse at center, rgba(233, 161, 59, .20), transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
    .stage3d__grid { animation: none; }
}

/* Content must sit above the backdrop. */
.page-home .section { position: relative; z-index: 1; }

/* The landing page has no hero, so the first band under the slider gets
   generous space of its own. */

.page-home #shop { padding-block-start: clamp(24px, 4vw, 56px); }

/* --------------------------------------------------------------------------
   4. THE SCROLL-DRIVEN LOGO HERO
   A tall scroll track with a pinned stage. The logo video's timeline is
   scrubbed against scroll progress, so the 3D logo assembles as you scroll
   and then stays pinned while the headline resolves.
   -------------------------------------------------------------------------- */
.scroll-hero {
    position: relative;
    /* Track length = how much scrolling the assembly takes. Kept short so
       the visitor reaches the products quickly. */
    height: 190vh;
    background: var(--navy-900);
}

.scroll-hero__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: grid;
    place-items: center;
    perspective: var(--perspective);
}

/* The canvas the frame sequence is drawn into. It is transformed toward the
   header's brand slot as the assembly finishes, so the logo appears to fly
   up and dock into the navigation. */
.scroll-hero__canvas,
.scroll-hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    will-change: transform, opacity;
    transform-origin: center center;
}
.scroll-hero__poster { background: var(--navy-900); }

/* Once docked, the canvas is gone and the header image takes over. */
.scroll-hero.is-docked .scroll-hero__canvas { opacity: 0; }

/* Depth wash + edge vignette blend the band into the page. */
.scroll-hero__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(65% 55% at 50% 45%, transparent 40%, rgba(7, 16, 40, .55) 100%),
        linear-gradient(180deg, rgba(7, 16, 40, .55) 0%, transparent 22%, transparent 62%, var(--navy-900) 100%);
}

.scroll-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    padding-inline: var(--gutter);
    max-width: 1000px;
    /* Driven by JS as the assembly completes. */
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    will-change: opacity, transform;
}
.scroll-hero__content h1 { color: #fff; text-wrap: balance; }
.scroll-hero__content .lead {
    color: rgba(255, 255, 255, .78);
    max-width: 58ch;
    margin: var(--s-3) auto 0;
}
.scroll-hero__ctas { margin-top: var(--s-5); justify-content: center; }

/* Content sits low so it never collides with the lockup mid-assembly. */
.scroll-hero__content { align-self: end; padding-bottom: clamp(56px, 10vh, 130px); }

/* --------------------------------------------------------------------------
   4b. Header brand slot — the target the logo docks into
   -------------------------------------------------------------------------- */
.brand { flex: none; }
.brand-lockup {
    height: 54px;
    width: auto;
    display: block;
    transition: height var(--dur) var(--ease);
}
.site-header.is-scrolled .brand-lockup { height: 44px; }

@media (max-width: 480px) {
    .brand-lockup { height: 46px; }
    .site-header.is-scrolled .brand-lockup { height: 40px; }
}

/* The logo sits at one edge and the navigation + cart at the opposite edge,
   never bunched together beside the logo. Logical properties mean this
   mirrors automatically in Arabic.

   The bug this fixes: `.main-nav + .header-actions` used to cancel the auto
   margin, but the nav is display:none below 1024px — so on phones nothing
   pushed the cart across and it sat right next to the logo. */
.header-inner > .brand { margin-inline-end: auto; }
.main-nav,
.header-actions { margin-inline-start: 0; }
.main-nav + .header-actions { margin-inline-start: var(--s-2); }
@media (min-width: 1024px) {
    .main-nav { margin-inline-start: auto; }
}

.site-footer .brand-lockup { height: 54px; }

/* --------------------------------------------------------------------------
   4c. Mobile header — cart and menu only
   Language and theme move into the drawer below 1024px so the bar stays
   clean on a narrow screen.
   -------------------------------------------------------------------------- */
.desk-only { display: none; }
@media (min-width: 1024px) {
    .desk-only { display: inline-flex; }
}

/* The drawer's theme toggle is a <button>, so it needs the anchor styling. */
.drawer-nav .drawer-action {
    display: flex;
    align-items: center;
    gap: 12px;
    inline-size: 100%;
    min-block-size: 52px;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 1rem;
    color: rgba(255, 255, 255, .9);
    text-align: start;
    background: none;
    border: 0;
    font-family: inherit;
}
.drawer-nav .drawer-action:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Progress rail down the side of the hero. */
.scroll-hero__rail {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: min(220px, 40vw);
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}
.scroll-hero__rail span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}
[dir="rtl"] .scroll-hero__rail span { transform-origin: right center; }

.scroll-hero__hint {
    position: absolute;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    font-size: .6875rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
    transition: opacity .4s ease;
}
[dir="rtl"] .scroll-hero__hint { letter-spacing: 0; }
.scroll-hero.is-complete .scroll-hero__hint { opacity: 0; }

/* Phones: shorten the track so the assembly does not take forever. */
@media (max-width: 767px) {
    .scroll-hero { height: 240vh; }
    .scroll-hero__content--low { padding-bottom: 72px; }
}

/* No JS, or reduced motion: collapse to a normal poster hero. */
.no-js .scroll-hero,
.scroll-hero.is-static { height: auto; }
.no-js .scroll-hero__stage,
.scroll-hero.is-static .scroll-hero__stage {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
}
.no-js .scroll-hero__video,
.scroll-hero.is-static .scroll-hero__video,
.no-js .scroll-hero__poster,
.scroll-hero.is-static .scroll-hero__poster {
    position: relative;
    aspect-ratio: 1536 / 672;
    height: auto;
}
.scroll-hero.is-static .scroll-hero__content {
    opacity: 1;
    transform: none;
    padding-block: var(--s-6) var(--s-8);
    margin-inline: auto;
}
.scroll-hero.is-static .scroll-hero__rail,
.scroll-hero.is-static .scroll-hero__hint { display: none; }

@media (prefers-reduced-motion: reduce) {
    .scroll-hero { height: auto; }
    .scroll-hero__stage { position: relative; height: auto; display: block; }
    .scroll-hero__video { display: none; }
    .scroll-hero__poster { position: relative; aspect-ratio: 1536/672; height: auto; }
    .scroll-hero__content { opacity: 1; transform: none; padding-block: var(--s-6) var(--s-8); margin-inline: auto; }
    .scroll-hero__rail, .scroll-hero__hint { display: none; }
}

/* --------------------------------------------------------------------------
   5. 3D tilt cards
   The wrapper holds the perspective; the inner element rotates. JS writes
   --rx / --ry from pointer position.
   -------------------------------------------------------------------------- */
.tilt {
    perspective: var(--perspective);
    transform-style: preserve-3d;
}
.tilt__inner {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, 0, 0);
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
    transform-style: preserve-3d;
    will-change: transform;
    height: 100%;
}
.tilt:hover .tilt__inner { transition-duration: .12s; }

/* Content that floats above the card face. */
.tilt__layer { transform: translateZ(38px); }
.tilt__layer--deep { transform: translateZ(70px); }

/* Specular sheen that follows the cursor. */
.tilt__sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(
        360px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, .22), transparent 42%);
}
.tilt:hover .tilt__sheen { opacity: 1; }
[data-theme="dark"] .tilt__sheen {
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
        rgba(233, 161, 59, .16), transparent 45%);
}

@media (prefers-reduced-motion: reduce) {
    .tilt__inner { transform: none !important; transition: none; }
    .tilt__sheen { display: none; }
}

/* --------------------------------------------------------------------------
   6. Glass surfaces
   -------------------------------------------------------------------------- */
.glass {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    overflow: hidden;
}
/* Top highlight edge — what sells a surface as glass. */
.glass::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    pointer-events: none;
}
[data-theme="dark"] .glass::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
}

/* --------------------------------------------------------------------------
   7. Section rhythm + entry transitions
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(72px, 11vw, 168px); }

/* Sections that sit on the mesh rather than a flat fill. */
.section--sunken { background: transparent; }
.section--navy {
    background: linear-gradient(180deg, rgba(11, 31, 77, .96), rgba(7, 16, 40, .98));
    backdrop-filter: blur(8px);
}

/* Reveal, upgraded: adds a slight 3D lift instead of a flat slide. */
.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(.97);
    transition:
        opacity .9s var(--ease-out),
        transform .9s var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Headline words that rise one after another. */
.reveal-words > span {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, .7em, 0);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-words.is-visible > span { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; }
    .reveal-words > span { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Cards restyled with depth
   -------------------------------------------------------------------------- */
.product-card,
.service-card,
.testimonial,
.panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: var(--depth-2);
    border-radius: var(--r-lg);
}
[data-theme="dark"] .product-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .testimonial,
[data-theme="dark"] .panel { border-color: var(--glass-brd); }

.product-card:hover,
.service-card:hover { box-shadow: var(--depth-3); }

/* --------------------------------------------------------------------------
   8b. Product grid — always two across on a phone
   A single tall column wastes most of a phone screen and buries the second
   product below the fold. Two columns show four products at a glance.
   -------------------------------------------------------------------------- */
.grid-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (min-width: 640px) {
    .grid-products {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: var(--s-3);
    }
}

/* At ~170px wide the card has to give back some padding and type size. */
@media (max-width: 639px) {
    .grid-products .product-body { padding: 10px; gap: 4px; }
    .grid-products .product-actions { padding: 0 10px 10px; }
    .grid-products .product-name { font-size: .875rem; -webkit-line-clamp: 2; }
    .grid-products .product-cat { font-size: .625rem; }
    .grid-products .product-price { font-size: 1rem; }
    .grid-products .product-compare { font-size: .75rem; }
    .grid-products .product-flags { inset-block-start: 6px; inset-inline-start: 6px; }
    .grid-products .badge { font-size: .625rem; padding: 3px 7px; }
    /* Keep the button tappable but let the label shrink rather than wrap. */
    .grid-products .product-actions .btn {
        font-size: .75rem;
        padding-inline: 8px;
        gap: 5px;
    }
    .grid-products .product-actions .btn svg { inline-size: 14px; block-size: 14px; }
}

/* Image wells follow the card surface rather than a fixed light grey, so a
   product without a photo does not punch a bright hole in the dark theme. */
.product-card .ratio,
.cat-tile .ratio { background: rgba(127, 145, 185, .10); }
[data-theme="dark"] .product-card .ratio,
[data-theme="dark"] .cat-tile .ratio { background: rgba(255, 255, 255, .04); }

/* The gold edge that lights up on hover. */
.service-card::before {
    height: 2px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-300), transparent);
}

.service-icon {
    background: linear-gradient(145deg, rgba(233, 161, 59, .28), rgba(233, 161, 59, .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--depth-1);
    color: var(--gold-600);
}
[data-theme="dark"] .service-icon { color: var(--gold-400); }

/* Category + project tiles get real depth on hover. */
.cat-tile, .project-card { box-shadow: var(--depth-2); }
.cat-tile:hover, .project-card:hover {
    box-shadow: var(--depth-3), var(--glow-gold);
}

/* --------------------------------------------------------------------------
   9. Buttons with depth + a magnetic pull (offset written by JS)
   -------------------------------------------------------------------------- */
.btn {
    transform: translate3d(var(--bx, 0px), var(--by, 0px), 0);
    will-change: transform;
}
.btn-primary {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500) 55%, var(--gold-600));
    box-shadow: 0 10px 26px rgba(233, 161, 59, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-primary:hover {
    box-shadow: 0 16px 40px rgba(233, 161, 59, .48), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-ghost-light {
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
    .btn { transform: none !important; }
}

/* --------------------------------------------------------------------------
   10. Stats — floating glass figures
   -------------------------------------------------------------------------- */
.stat {
    padding: var(--s-3);
    border-radius: var(--r-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--depth-1);
    text-align: center;
}
.section--navy .stat {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}
.stat-value {
    background: linear-gradient(160deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   11. Header — floating glass bar
   -------------------------------------------------------------------------- */
.site-header {
    background: transparent;
    transition: background-color .45s var(--ease), backdrop-filter .45s var(--ease),
                box-shadow .45s var(--ease);
}
.site-header.is-scrolled {
    background: rgba(9, 24, 62, .72);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Interior pages have no dark hero behind the bar, so give it a base. */
body:not(.page-home) .site-header { background: rgba(9, 24, 62, .92); }

/* --------------------------------------------------------------------------
   11a. PROJECT SLIDER
   Native scroll-snap so swiping is the browser's own, driven by JS only for
   the 2-second autoplay and the dots.
   -------------------------------------------------------------------------- */
.prail {
    position: relative;
    z-index: 2;
    background: var(--navy-900);
    border-block-end: 1px solid rgba(255, 255, 255, .08);
}

.prail__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.prail__track::-webkit-scrollbar { display: none; }
.prail__track:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

.prail__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--navy-800);
}
@media (min-width: 768px)  { .prail__slide { aspect-ratio: 21 / 9; } }
@media (min-width: 1280px) { .prail__slide { aspect-ratio: 24 / 9; } }

.prail__slide img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}
.prail__slide:hover img { transform: scale(1.04); }

.prail__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 16, 40, .35) 0%, transparent 35%,
                rgba(7, 16, 40, .55) 68%, rgba(7, 16, 40, .92) 100%);
}

.prail__body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--s-3) var(--gutter) calc(var(--s-3) + 26px);
    color: #fff;
    max-inline-size: 760px;
}
@media (min-width: 1024px) {
    .prail__body { padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
}

.prail__title {
    font-size: clamp(1.25rem, .9rem + 1.8vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}
[dir="rtl"] .prail__title { letter-spacing: 0; }

.prail__meta { font-size: .875rem; color: rgba(255, 255, 255, .74); }

.prail__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 8px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--gold-400);
}
.prail__slide:hover .prail__cta { color: var(--gold-300); }

/* No arrows: the rail is swiped, or dragged with the mouse. */
.prail__track { cursor: grab; }
.prail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.prail__track.is-dragging a { pointer-events: none; }

.prail__dots {
    position: absolute;
    inset-block-end: 14px;
    inset-inline: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.prail__dots button {
    inline-size: 26px;
    block-size: 4px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .3);
    transition: background-color var(--dur) var(--ease), inline-size var(--dur) var(--ease);
    /* Keep the tap target legal without making the dot itself big. */
    position: relative;
}
.prail__dots button::after {
    content: "";
    position: absolute;
    inset: -18px -6px;
}
.prail__dots button[aria-selected="true"] {
    background: var(--gold-500);
    inline-size: 40px;
}

@media (prefers-reduced-motion: reduce) {
    .prail__track { scroll-behavior: auto; }
    .prail__slide img { transition: none; }
}

/* --------------------------------------------------------------------------
   11b. Category grid
   Every category visible at once — two across on a phone, six on a wide
   screen. Replaces the horizontally scrolling chip row, which hid most of
   the categories off the edge of a phone.
   -------------------------------------------------------------------------- */
/* The categories and the product grid share one glass panel, with no rule
   between them, so they read as a single shop module. */
.shop-widget__panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    border-radius: var(--r-xl);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    padding: var(--s-3);
    overflow: hidden;
}
@media (min-width: 768px) {
    .shop-widget__panel { padding: var(--s-4); }
}

.shop-widget__body { margin-block-start: var(--s-3); }

/* Cards inside the panel drop their own glass so the surfaces do not stack
   into a muddy double-frost. */
.shop-widget__panel .product-card {
    background: rgba(255, 255, 255, .04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="dark"] .shop-widget__panel .cat-mini {
    background: rgba(255, 255, 255, .05);
    backdrop-filter: none;
}

.cat-rail {
    position: relative;
    z-index: 2;
}

.cat-rail__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    margin-block-end: 10px;
}
.cat-rail__label {
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
[dir="rtl"] .cat-rail__label { letter-spacing: 0; font-size: .8125rem; }

.cat-rail__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}
.cat-rail__all:hover { color: var(--gold-300); }

/* Fade only the trailing edge, so the row reads as "there is more this way".
   Fading the leading edge too made the very first chip look clipped, since
   the track starts flush against it. */
.cat-rail__mask {
    -webkit-mask-image: linear-gradient(90deg, #000 0,
                        #000 calc(100% - 46px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0,
                #000 calc(100% - 46px), transparent 100%);
}
[dir="rtl"] .cat-rail__mask {
    -webkit-mask-image: linear-gradient(270deg, #000 0,
                        #000 calc(100% - 46px), transparent 100%);
    mask-image: linear-gradient(270deg, #000 0,
                #000 calc(100% - 46px), transparent 100%);
}

.cat-rail__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Aligned with the page gutter, not bled to the screen edge — bleeding
       put the first chip flush against the edge, where it read as clipped
       rather than as the start of the row. */
    padding-block-end: 2px;
}
.cat-rail__track::-webkit-scrollbar { display: none; }

.cat-mini {
    flex: none;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px 8px 8px;
    border-radius: var(--r-full);
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    box-shadow: var(--depth-1);
    white-space: nowrap;
    transition: border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
[dir="rtl"] .cat-mini { padding: 8px 8px 8px 14px; }
.cat-mini:hover {
    border-color: rgba(233, 161, 59, .5);
    transform: translateY(-2px);
    box-shadow: var(--depth-2);
}

.cat-mini__icon {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    flex: none;
    border-radius: var(--r-full);
    background: linear-gradient(145deg, rgba(233, 161, 59, .28), rgba(233, 161, 59, .08));
    color: var(--gold-400);
}

.cat-mini__text { display: flex; align-items: baseline; gap: 7px; }
.cat-mini__name { font-size: .875rem; font-weight: 700; color: var(--text); }
.cat-mini:hover .cat-mini__name { color: var(--accent); }
.cat-mini__count {
    font-size: .6875rem;
    font-weight: 800;
    color: var(--gold-400);
    opacity: .85;
}

/* --------------------------------------------------------------------------
   12. Marquee trust bar
   -------------------------------------------------------------------------- */
.trust-bar {
    background: transparent;
    border-block: 1px solid var(--border);
    overflow: hidden;
}
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track {
    display: flex;
    gap: var(--s-6);
    padding-inline-end: var(--s-6);
    flex: none;
    animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
[dir="rtl"] .marquee__track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
    .marquee { mask-image: none; flex-wrap: wrap; justify-content: center; }
}

/* --------------------------------------------------------------------------
   13. Parallax layers
   -------------------------------------------------------------------------- */
[data-parallax] { will-change: transform; }

/* Floating decorative orbs behind sections. */
/* Soft glow from a radial gradient rather than filter: blur().
   A 60px blur on a 500px element is one of the most expensive things you can
   ask a phone GPU to composite, and it was being repainted on every scroll
   frame because of the parallax. The gradient looks the same and is free. */
.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.orb--gold { background: radial-gradient(circle, rgba(233, 161, 59, .30), transparent 68%); }
.orb--blue { background: radial-gradient(circle, rgba(36, 73, 158, .38), transparent 68%); }

.section { position: relative; }
.section > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: linear-gradient(180deg, rgba(7, 16, 40, .9), var(--navy-900));
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ==========================================================================
   PERFORMANCE
   ==========================================================================
   backdrop-filter is the single most expensive thing on this page. Every
   frosted surface forces the browser to re-sample and blur everything behind
   it, and with a fixed gradient mesh plus a grain layer underneath, a phone
   ends up re-blurring most of the screen on every scroll frame. That is what
   made scrolling stutter.

   Below 900px the frost is dropped and replaced with a solid tint. It reads
   almost identically on a small screen — where you cannot see much through
   the glass anyway — and removes the cost entirely.
   ========================================================================== */
@media (max-width: 899px) {
    .glass,
    .panel,
    .product-card,
    .service-card,
    .testimonial,
    .cat-mini,
    .shop-widget__panel,
    .site-header.is-scrolled,
    .site-footer,
    .stat,
    .section--navy,
    .btn-ghost-light,
    .hero-pause,
    .prail__nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Opaque stand-ins for the frosted surfaces. */
    .shop-widget__panel,
    .panel,
    .glass          { background: #0f2451; }
    .product-card,
    .service-card,
    .testimonial    { background: #122c5e; }
    .cat-mini       { background: #16305f; }
    .site-header.is-scrolled { background: #0a1c46; }

    /* The decorative backdrop is pure cost on a phone: a fixed, full-screen
       layer that has to be repainted as the page scrolls. */
    .stage3d { display: none; }
    body::after { display: none; }   /* film grain */
}

/* Never animate the perspective grid on a device that cannot afford it. */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
    .stage3d__grid { animation: none; }
}

/* Parallax is disabled on touch: it runs on every scroll event and touch
   scrolling fires far more of them than a mouse wheel. */
@media (hover: none) {
    [data-parallax] { transform: none !important; }
}