/* ========================================================================
   BahyGroup Theme — Component Styles
   ======================================================================== */

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-default);
    transition: background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--bg-page) 90%, transparent);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    min-height: 150px;  /* v1.1.4: 140px logo + 5px breathing room top+bottom */
}

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo {
    display: flex;
    align-items: center;
    padding: 0.4em 0.6em;
    border-radius: var(--radius-md);
    transition: background var(--duration-base) var(--ease-out);
}

.site-logo:hover {
    background: rgba(95, 206, 220, 0.06);
}

.site-logo img {
    /* v1.1.3: User's own full logo — 140px square mark, strong but not
       overwhelming. */
    width: 140px;
    height: 140px;
    object-fit: contain;
    border-radius: 4px;
    transition: transform var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out);
}

/* Subtle hover lift; no filter shadow since the logos have their own bg */
.site-logo:hover img {
    transform: scale(1.05);
}

.primary-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.nav-menu a:hover {
    background: var(--bg-elevated);
    color: var(--bg-cyan);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Language Switcher (header) — single button showing the OTHER language */
.lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.45em 1em;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.lang-toggle-btn:hover {
    border-color: var(--bg-cyan);
    color: var(--bg-cyan);
    transform: translateY(-1px);
}

.lang-globe {
    flex-shrink: 0;
    opacity: 0.7;
}

.lang-target {
    font-weight: 600;
}

body.lang-ar .lang-target {
    font-family: var(--font-ar-body);
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    transition: all var(--duration-fast) var(--ease-out);
}

.theme-toggle:hover {
    border-color: var(--bg-cyan);
    color: var(--bg-cyan);
}

.theme-toggle .icon-moon,
.theme-toggle .icon-sun {
    transition: transform var(--duration-base) var(--ease-out);
}

[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"]  .theme-toggle .icon-sun  { display: block; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.75em 1.5em;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    border: 2px solid transparent;
    transition: all var(--duration-base) var(--ease-out);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl), var(--shadow-glow-cyan);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
}

.btn-outline:hover {
    border-color: var(--bg-cyan);
    color: var(--bg-cyan);
    background: var(--bg-elevated);
}

.btn-lg {
    padding: 1em 2em;
    font-size: 1.1rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 32px;
    height: 32px;
    padding: 4px;
    background: transparent;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 1px;
    transition: transform var(--duration-base) var(--ease-out);
}

@media (max-width: 1023px) {
    .mobile-menu-toggle { display: flex; }
    .primary-nav { display: none; }
    .primary-nav.open {
        display: flex;
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        inset-inline-end: 0;
        background: var(--bg-page);
        border-top: 1px solid var(--border-default);
        padding: var(--space-md);
        flex-direction: column;
    }
    .primary-nav.open .nav-menu {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

/* v1.1.4: Tablet + Mobile (≤1023px) — header simplification
   - Logo shrinks to 80px so it fits with the actions
   - Lang switcher: icon only (no text)
   - "Get in touch" CTA hidden (replaced by hamburger menu)
   - Header min-height is auto so the row height matches the logo
   - Breakpoint widened from 768 to 1023 so tablets get the same compact layout
     (a tablet at 800-1023px was showing the full-width header and overflowing) */
@media (max-width: 1023px) {
    .header-container {
        min-height: auto;
        padding: var(--space-xs) var(--space-md);
        gap: var(--space-sm);
    }
    .site-logo img {
        width: 80px;
        height: 80px;
    }
    .lang-toggle-btn .lang-target { display: none; }
    .lang-toggle-btn { padding: 0.4em 0.5em; }
    .header-cta { display: none; }
}

/* Hero Section — v1.2.1 compact layout */
.hero-section {
    position: relative;
    /* v1.2.2: was 100vh, then 88vh. Now calc(100vh - 160px) so the
       section exactly fits the viewport minus the header height.
       This ensures the scroll indicator at the bottom of the section
       is visible within the viewport (was being cut off with 88vh
       because 150px header + 88vh = 942px, but viewport is 900px).
       The 160px = 150px header + 10px breathing room. */
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: flex-start;  /* v1.2.1: was `center` — content was pushed to
                                 the lower half of the viewport because
                                 the section starts BELOW the 150px header.
                                 Now the content sits at the top of the
                                 section (just under the header) so the
                                 user sees the headline + logo immediately,
                                 not after scrolling past empty space. */
    justify-content: center;
    overflow: hidden;
    background: var(--bg-dark-navy);
    color: white;
    text-align: start;  /* LTR default; [dir="rtl"] inherits this */
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: var(--gradient-radial);
    opacity: 0.8;
}

.hero-particles {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(63, 189, 209, 0.15) 0%, transparent 50%),
                       radial-gradient(circle at 80% 70%, rgba(30, 58, 138, 0.2) 0%, transparent 50%);
}

/* v1.2.1: split-layout grid — content sits at the top, logo centered in row.
   Mobile  (<768):  single column, LOGO first, then content (v1.2.1 reorder)
   Tablet  (≥768):  2 columns, content | logo (logo on right in LTR)
   Desktop (≥1024): 2 columns, wider text column (1.15fr 1fr) for the tagline

   In RTL (body.lang-ar), CSS Grid auto-flips the columns, putting the logo on
   the visual left. We override below to KEEP the logo on the visual right in
   both languages, per the user's explicit request. */
.hero-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "content"
        "logo";
    gap: var(--space-xl);
    padding: var(--space-md) var(--space-md) var(--space-2xl);
    width: 100%;
    max-width: 1600px;  /* v1.2.1: was 1400 — wider so the right side fills */
    margin: 0 auto;
    align-items: start;  /* v1.2.1: was `center` — align to top, no bottom gap */
}

.hero-content {
    grid-area: content;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: center;  /* mobile: centered CTAs */
}

/* Logo: 4-Layer Z-stack matching the BahyGroup-animated-slide reference
   (1600×900 = 16:9). Each layer is positioned at its exact reference
   location (in % of the stack). The stack is sized so the 5-hex composite
   fills the hero nicely. */
.hero-logo-stack {
    grid-area: logo;
    position: relative;
    width: min(560px, 100%);
    aspect-ratio: 16 / 9;  /* match reference slide 1600×900 */
    margin: 0 auto;
}

.hero-logo-layer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
    /* opacity: 0 default — @keyframes drive it to 1 with `forwards` */
    opacity: 0;
}

.hero-logo-layer img {
    width: 100%;
    height: 100%;
    /* Brand kit images are 1024×1024 with transparent padding around the
       content. Reference boxes are very wide/tall (e.g. pic10 = 6.07:1),
       so `contain` makes the content tiny. `cover` crops the padding and
       fills the box — exactly what the reference does. */
    object-fit: cover;
}

/* LAYER 1 (z=1, bottom): 5-hex composite — pic8 in reference
   Reference: left=24.4%, top=0.7%, w=53.3%, h=99.3% */
.hero-layer-pic8 {
    z-index: 1;
    top: 0.7%;
    left: 24.4%;
    width: 53.3%;
    height: 99.3%;
    /* fadeInScale 1500ms @ 0ms — exact reference timing */
    animation: hero-fadeInScale 1500ms cubic-bezier(.22, 1, .36, 1) 0ms forwards;
}

.hero-layer-pic8 img {
    filter: drop-shadow(0 8px 30px rgba(63, 189, 209, 0.35));
    transition: transform 0.5s var(--ease-out);
}

.hero-logo-stack:hover .hero-layer-pic8 img {
    transform: scale(1.04);
}

/* LAYER 2 (z=2): BG monogram outline — pic4 in reference
   Reference: left=38.1%, top=25.9%, w=24.1%, h=38.8% */
.hero-layer-pic4 {
    z-index: 2;
    top: 25.9%;
    left: 38.1%;
    width: 24.1%;
    height: 38.8%;
    /* growTurn 2000ms @ 500ms — exact reference timing */
    animation: hero-growTurn 2000ms cubic-bezier(.22, 1, .36, 1) 500ms forwards;
}

.hero-layer-pic4 img {
    filter: drop-shadow(0 0 40px rgba(95, 206, 220, 0.6));
}

/* LAYER 3 (z=3): Empty bar — pic6 in reference
   Reference: left=29.4%, top=75.1%, w=42.2%, h=17.1% */
.hero-layer-pic6 {
    z-index: 3;
    top: 75.1%;
    left: 29.4%;
    width: 42.2%;
    height: 17.1%;
    /* expandH 1000ms @ 2500ms — exact reference timing */
    animation: hero-expandH 1000ms ease-out 2500ms forwards;
}

.hero-layer-pic6 img {
    filter: drop-shadow(0 0 25px rgba(95, 206, 220, 0.45));
}

/* LAYER 4 (z=4, top): Bar + wordmark — pic10 in reference
   Reference: left=31.0%, top=78.1%, w=38.6%, h=11.3% */
.hero-layer-pic10 {
    z-index: 4;
    top: 78.1%;
    left: 31.0%;
    width: 38.6%;
    height: 11.3%;
    /* growIn 500ms @ 3500ms — exact reference timing */
    animation: hero-growIn 500ms cubic-bezier(.22, 1, .36, 1) 3500ms forwards;
}

.hero-layer-pic10 img {
    filter: drop-shadow(0 4px 20px rgba(95, 206, 220, 0.55));
}

/* v1.2.1 / v1.3.0: Text + CTA + scroll animation timing.
   The headline uses a JS-driven typewriter (hero-typewriter.js) that
   starts at t=0 and runs ~2s. So the CSS animations for subtitle +
   CTAs wait for it to finish.

   v1.3.0 fixes (see comments on the rules below for full details):
   - .hero-text wrapper: REMOVED opacity:0. Was hiding the entire text
     block until the 5s safety fallback in logo-intro.js. Now the
     typewriter output is visible from t=0 (same time as the logo build).
   - .hero-cta wrapper: REMOVED opacity:0. Same bug — parent 0 × child 1
     = 0, so the buttons stayed invisible until the 5s safety fallback.
     The per-button opacity:0 + animation: forwards still hides each
     button until its own animation starts.
   - .hero-subtitle: ADDED opacity:0. When .hero-text was hiding the
     subtitle by accident, the subtitle had no base opacity:0. Now that
     the parent is visible, the subtitle needs its own opacity:0 to
     stay hidden until its animation drives it to 1 at t=2000ms.
   - .hero-cursor.done: ADDED animation:none. The blink keyframes were
     overriding the opacity:0 from .done, keeping the cursor visible
     forever after typing. Stopping the animation lets the opacity
     transition kick in and the cursor disappears ~600ms after typing.

   Total timing:
     t=0       hero-tagline:    JS typewriter starts (right as the logo
                                  build starts — same time, per user request)
     t=~2000   hero-tagline:    typing finishes
     t=2000    hero-subtitle:   fade up (right after typing completes)
     t=2400    hero-cta-primary: slide up + scale (energetic)
     t=2700    hero-cta-secondary: slide up (gentle)
     t=4500    scroll indicator fades up (after the full logo build)

   v1.2.1: the tagline no longer has a CSS fade animation — the JS
   typewriter handles its appearance (it builds the text from empty
   to full, char by char). The `.typing` class is added by JS. */
/* v1.3.0 BUG FIX: removed BOTH .hero-text AND .hero-cta from opacity:0.
   - .hero-text: JS typewriter starts at t=0 and writes the headline
     char by char. The wrapper was opacity:0 with NO animation, so the
     wrapper stayed invisible the entire time — only the 5s safety
     fallback in logo-intro.js made the text appear. User saw: logo
     animates 0-4s → BLANK text → at t=5s text suddenly pops in.
     Fix: .hero-text wrapper is now visible from t=0 so the typewriter
     output is immediately visible.
   - .hero-cta: same bug. The wrapper was opacity:0, and the per-button
     animations (.hero-cta-primary at 2400ms, .hero-cta-secondary at
     2700ms) drive the CHILDREN to opacity:1. But CSS opacity multiplies
     through ancestors, so parent 0 × child 1 = still 0. The buttons
     stayed invisible until the 5s safety fallback set parent to 1.
     Fix: removed opacity:0 from the wrapper. The per-button opacity:0
     + animation: forwards still keeps each button hidden until its own
     animation starts, but the wrapper doesn't block them anymore. */
.hero-cta-primary,
.hero-cta-secondary {
    /* v1.3.0: the per-button opacity:0 stays — each button hides itself
       until its own animation drives it to 1. The wrapper no longer
       blocks visibility. */
    opacity: 0;
}
/* v1.2.2: removed .hero-scroll-indicator from this list because we
   need it to be visible (and centered) from the start. The animation
   for the scroll indicator was removed entirely due to a Chromium
   bug where `animation-fill-mode: forwards` resets `transform` to
   its initial value (`none`), overriding the base rule's
   `transform: translateX(-50%)` and shifting the indicator ~28px
   right of center. */

.hero-subtitle {
    /* v1.3.0 BUG FIX: added `opacity: 0` base style. Before, the parent
       .hero-text had `opacity: 0` (which I removed in v1.3.0) and that
       was accidentally keeping the subtitle invisible before its
       animation. Now that the parent is visible from t=0, the subtitle
       defaults to opacity 1 and shows immediately. Fix: explicit
       `opacity: 0` on the subtitle, driven to 1 by its animation at
       t=2000ms (right when the typewriter finishes). */
    opacity: 0;
    /* v1.2.2: was 2200ms — text now appears right when the typewriter
       finishes (~2000ms), so the user sees the value prop during the
       last second of the logo build, not after it. */
    animation: hero-fadeUp 600ms cubic-bezier(.22, 1, .36, 1) 2000ms forwards;
}

.hero-cta {
    animation: hero-fadeUp 600ms cubic-bezier(.22, 1, .36, 1) 3000ms forwards;
}

/* v1.2.1: Each button has its own distinct motion (per user request).
   Primary (Explore): slides up from below + slight scale (energetic).
   Secondary (Get in touch): slides in from the side (gentle). */
.hero-cta-primary {
    /* v1.2.2: was 3000ms — CTAs now appear ~400ms after the subtitle
       fades in, so the user gets a quick cascade (headline → subtitle
       → CTAs) instead of a 1-second pause between subtitle and CTAs. */
    animation: hero-cta-primary-in 700ms cubic-bezier(.22, 1, .36, 1) 2400ms forwards;
    opacity: 0;
}
.hero-cta-secondary {
    /* v1.2.2: was 3300ms — 300ms after the primary CTA, gives a clean
       staggered entrance for both buttons. */
    animation: hero-cta-secondary-in 700ms cubic-bezier(.22, 1, .36, 1) 2700ms forwards;
    opacity: 0;
}
/* The wrapper .hero-cta was the original target — disable its
   animation since each button now has its own. */
.hero-cta { animation: none; }

@keyframes hero-cta-primary-in {
    from { opacity: 0; transform: translateY(24px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hero-cta-secondary-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* v1.2.2: Scroll indicator keyframe — no longer used.
   The animation was removed entirely due to a Chromium bug where
   `animation-fill-mode: forwards` resets `transform` to its initial
   value (`none`), overriding the base rule's
   `transform: translateX(-50%)` and shifting the indicator ~28px
   right of center. The scroll indicator now uses the base rule's
   transform for centering and is always visible. If we need a
   slide-up effect later, use a CSS `transition` with a class
   toggle via JS (NOT a CSS animation, to avoid the transform bug). */
@keyframes hero-scroll-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* v1.3.1: Tablet (≥768) + Desktop (≥1024) — 2-column grid.
   LTR: content on the LEFT, animated logo on the RIGHT.
   RTL: content on the RIGHT, animated logo on the LEFT.
   The grid auto-flips because body.lang-ar sets direction:rtl.

   v1.3.1 changes:
   - Grid columns: now `1fr 1fr` (was 1.1fr 1fr). The slight bias toward
     the text column was making the layout feel unbalanced. Equal columns
     give the logo enough room to fill its half and reduce the empty
     space on the far right that the user complained about.
   - Container padding: was `var(--space-md) var(--space-lg) var(--space-xl)`
     (16px top, 24px L/R, 32px bottom). Increased the right padding to
     `var(--space-xl)` (32px) so the content isn't visually "stuck" to the
     left edge in narrow desktop windows. In RTL the padding-inline-start
     swaps automatically.
   - .hero-logo-stack: added `justify-self: end` so the logo hugs the
     right edge of its grid cell (LTR) instead of being centered with
     empty space on both sides. In RTL the grid auto-flips so this
     becomes left-align naturally. */
@media (min-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "content logo";
        gap: var(--space-2xl);
        padding: var(--space-md) var(--space-xl) var(--space-xl);
        align-items: start;  /* v1.3.0: was center — content now starts at the top of the row */
    }
    .hero-content {
        text-align: start;
        align-items: flex-start;  /* left-align text + CTAs in LTR */
        gap: var(--space-xl);
    }
    .hero-tagline { max-width: 600px; }
    .hero-subtitle { max-width: 560px; }
}

@media (min-width: 1024px) {
    .hero-container {
        gap: var(--space-3xl);
    }
    .hero-logo-stack {
        width: min(720px, 100%);  /* v1.3.1: was 700 — slightly wider to fill more of the right */
        justify-self: end;        /* v1.3.1: hug the right edge (LTR) — in RTL this becomes left-align */
    }
}

/* v1.3.0: Mobile (<768) — LOGO FIRST, then content (user reorder).
   - `.hero-logo-stack` above `.hero-content` so the animation plays in-viewport
   - Smaller hero font sizes so Arabic + English fit in 2 lines max
   - v1.3.0: top padding was calc(--header-height + --space-md) = 166px
     which pushed the logo 166px below the top of the section. On mobile
     the header is only ~80px and the section starts right below it, so
     166px of extra padding = ~250px of empty space between header and
     logo. Reduced to --space-md (16px) so the logo starts right below
     the header. */
@media (max-width: 767px) {
    .hero-container {
        grid-template-areas:
            "logo"        /* v1.2.1: logo first (was "content" first) */
            "content";
        gap: var(--space-lg);
        padding: var(--space-md) var(--space-md) var(--space-lg);
    }
    .hero-logo-stack {
        width: min(320px, 100%);  /* v1.2.1: slightly smaller (was 360) */
    }
    .hero-tagline {
        font-size: clamp(1.4rem, 7vw, 1.75rem);  /* 22px → 28px on phones */
        line-height: 1.2;
        max-width: 100%;
        min-width: 0;
    }
    .hero-subtitle {
        font-size: 0.92rem;
        line-height: 1.55;
        max-width: 100%;
        min-width: 0;
    }
    /* v1.3.1: compact CTA buttons so they fit side by side on a 390px
       viewport. Without this, the .btn-lg padding (1em 2em) makes them
       ~360px combined — too wide for a 390px screen with side margins.
       Override padding + font-size to be just compact enough. */
    .hero-cta-primary,
    .hero-cta-secondary {
        padding: 0.7em 1.1em;
        font-size: 0.92rem;
    }
    /* v1.3.2: removed the `justify-content: center` override here.
       The main .hero-cta rule already has center, so the buttons are
       centered on mobile AND desktop (unified position). */
}

/* v1.3.1: RTL (Arabic) — REMOVED the `grid-template-areas: "logo content"`
   override. The user changed their mind: in Arabic they now want the
   text on the RIGHT and the animated logo on the LEFT (natural RTL
   reading flow). The default grid `"content logo"` already gives us
   this in RTL because CSS Grid auto-flips columns based on the body's
   `direction: rtl`:
     - LTR: content → col1 (visual LEFT), logo → col2 (visual RIGHT)
     - RTL: content → col1 (visual RIGHT), logo → col2 (visual LEFT)
   No override needed — the grid just works.

   v1.2.2 BUG FIX HISTORY: the old override WAS scoped to >=768px so it
   didn't break AR mobile (which uses "logo" "content" stack). That
   scoping is no longer needed because there's no override at all now. */


/* ---------- Reference keyframes (exact match of BahyGroup-animated-slide) ---------- */
@keyframes hero-fadeInScale {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
}

/* presetID 35 (Grow & Turn): scale 0→1 + rotate 720°→0° */
@keyframes hero-growTurn {
    from { opacity: 0; transform: scale(0) rotate(720deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* presetID 55 (Expand): scaleX 0.7→1 */
@keyframes hero-expandH {
    from { opacity: 0; transform: scaleX(0.7); }
    to   { opacity: 1; transform: scaleX(1); }
}

/* presetID 53/16 (Grow In): scale 0→1 */
@keyframes hero-growIn {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

/* Generic fade-up for text/CTA/scroll (after logo build) */
@keyframes hero-fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* v1.2.0: Reduced motion — skip the build, show everything immediately.
   The JS typewriter also checks this and bails out (so the text just
   appears in full). The cursor blinking is also disabled. */
@media (prefers-reduced-motion: reduce) {
    .hero-logo-layer,
    .hero-tagline,
    .hero-subtitle,
    .hero-cta-primary,
    .hero-cta-secondary,
    .hero-scroll-indicator,
    .hero-cursor {
        animation: none !important;
        opacity: 1 !important;
        /* v1.2.2 BUG FIX: was `transform: none !important` which
           overrode the base rule's `transform: translateX(-50%)` and
           shifted the scroll indicator ~28px right of center. The
           `translateX(-50%)` is for HORIZONTAL CENTERING, not for
           animation, so it should be preserved in reduced-motion mode.
           Only `transform: translateY(0)` (the slide-up effect) needs
           to be reset. But since we don't animate the scroll indicator
           anymore (v1.2.2 removed the animation), we just preserve
           the base transform. */
        transform: translateX(-50%) !important;
    }
    .hero-cursor { display: none; }
}

/* v1.2.0 / v1.3.0: Hero text — responsive font, gradient text, balanced max-width.
   min-width:0 + overflow-wrap:break-word: text inside a flex item can
   overflow horizontally without these (the flex item refuses to shrink
   below its intrinsic content width). The fix lets the headline wrap at
   word boundaries instead of bleeding off the screen edge in narrow
   viewports (especially RTL where the overflow goes off the LEFT).

   v1.3.0: the .hero-tagline has NO opacity rule of its own now (it was
   never the problem — the parent .hero-text was). The JS typewriter
   starts at t=0 and writes char by char; the tag is visible from t=0
   so the user sees the text being typed in real time alongside the
   4-layer logo build. */
.hero-tagline {
    font-size: clamp(1.75rem, 4.5vw, 3.25rem);  /* mobile 28px → desktop 52px */
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    background: linear-gradient(135deg, #fff 0%, #5FCEDC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;  /* fallback for browsers without bg-clip */
    letter-spacing: -0.01em;
}

/* v1.2.1: Typewriter cursor — blinking caret at the visual end of the
   headline. Inherits `direction` from the parent so it sits on the
   right in LTR and on the left in RTL automatically. The `currentColor`
   makes it follow the gradient text colour, but since the tagline uses
   `-webkit-text-fill-color: transparent`, we set a solid colour that
   matches the brightest end of the gradient. */
.hero-cursor {
    display: inline-block;
    width: 3px;
    height: 0.85em;
    background: #5FCEDC;
    margin-inline-start: 2px;
    vertical-align: text-bottom;
    animation: hero-cursor-blink 0.9s steps(2) infinite;
    -webkit-text-fill-color: #5FCEDC;  /* override the tagline's transparent */
    color: #5FCEDC;
}
.hero-cursor.done {
    /* v1.3.0: also stop the blink animation. Without `animation: none`,
       the `hero-cursor-blink` keyframes (which set opacity:1 at 0-50%
       of each cycle) keep overriding the `opacity: 0` from this rule.
       CSS animations have higher specificity than declared properties,
       so just setting `opacity: 0` isn't enough. Stopping the animation
       lets the opacity transition kick in. */
    animation: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
@keyframes hero-cursor-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

.hero-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
    max-width: 560px;
    min-width: 0;
    overflow-wrap: break-word;
}

/* v1.3.2: Hero CTAs — user wants buttons CENTERED on both mobile and
   desktop (unified position across viewports). Previously the main rule
   had `justify-content: flex-start` which was overriding the mobile
   `justify-content: center` because the main rule came later in the
   file (same specificity, later wins). That made the mobile buttons
   left-aligned instead of centered. Now the main rule itself is
   centered, and the desktop media query keeps it centered (no override
   needed). The buttons form a centered horizontal row in BOTH viewports.

   Two buttons fit comfortably in a 390px viewport when compact. If the
   viewport is too narrow (< 340px), the buttons can wrap to a second
   line via `flex-wrap: wrap`. */
.hero-cta {
    display: flex;
    gap: var(--space-sm);
    flex-direction: row;            /* v1.3.1: was column — user wants side by side on mobile too */
    flex-wrap: wrap;                /* safety: wrap to 2nd line on very narrow phones */
    align-items: center;            /* v1.3.1: was stretch — center the buttons vertically */
    justify-content: center;        /* v1.3.2: was flex-start — center on BOTH mobile and desktop */
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .hero-cta {
        gap: var(--space-md);
        flex-wrap: nowrap;
        /* v1.3.2: removed the `justify-content: flex-start` override that
           was here before. Keeping the row centered matches the mobile
           position (unified button position across viewports). */
    }
}

/* v1.2.0: Ensure the CTAs themselves have consistent padding and arrow
   sits next to the label with a small gap, not hugging the edge. */
.hero-cta-primary,
.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    justify-content: center;
}
.hero-cta-primary .hero-cta-arrow {
    transition: transform 0.25s var(--ease-out);
}
.hero-cta-primary:hover .hero-cta-arrow {
    transform: translateX(4px);
}
[dir="rtl"] .hero-cta-primary:hover .hero-cta-arrow,
body.lang-ar .hero-cta-primary:hover .hero-cta-arrow {
    transform: translateX(4px) scaleX(-1);  /* mirror + nudge for RTL */
}

/* v1.2.0: Scroll indicator — anchored to the bottom of the section,
   centered, doesn't take grid space. */
.hero-scroll-indicator {
    position: absolute;
    bottom: 1.75em;
    left: 50%;
    right: auto;  /* v1.2.2: explicit reset so no rule can override `left: 50%` */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    z-index: 2;
    width: max-content;  /* v1.2.2: explicit sizing so `translateX(-50%)` works
                            on the indicator's own width, not on a stretched
                            block that fills the section. */
    pointer-events: none;
    /* v1.2.2: was `opacity: 0` + animation. Removed animation due to
       Chromium bug. Indicator is now always visible (opacity 1) and
       always perfectly centered via the base transform. */
    opacity: 1;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-cyan) 50%, transparent 100%);
    animation: scroll-bounce 2s var(--ease-in-out) infinite;
}

@keyframes scroll-bounce {
    0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* Section base */
.section {
    padding: var(--space-5xl) 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-4xl);
    max-width: 800px;
    margin-inline: auto;
}

.section-title {
    font-size: var(--text-h2);
    margin: 0 0 var(--space-md);
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--bg-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.service-card {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
    overflow: hidden;
    isolation: isolate;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: var(--service-color, var(--bg-cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-slow) var(--ease-out);
}

body.lang-ar .service-card::before {
    transform-origin: right;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover {
    border-color: var(--service-color, var(--bg-cyan));
    box-shadow: 0 10px 30px rgba(11, 26, 58, 0.12);
}

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--service-color, var(--bg-cyan)) 15%, transparent);
    color: var(--service-color, var(--bg-cyan));
    margin-bottom: var(--space-lg);
    transition: transform var(--duration-base) var(--ease-bounce);
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(-5deg);
}

body.lang-ar .service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

.service-title {
    font-size: 1.375rem;
    margin: 0 0 var(--space-sm);
    color: var(--text-primary);
}

.service-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-lg);
    font-size: 0.95rem;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--service-color, var(--bg-cyan));
    font-weight: 600;
    font-size: 0.95rem;
    transition: gap var(--duration-base) var(--ease-out);
}

.service-link:hover {
    gap: 0.7em;
}

/* Why Us */
.why-us-section {
    background: var(--bg-elevated);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-2xl);
}

.value-card {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--bg-page);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl), 0 0 30px rgba(63, 189, 209, 0.2);
}

.value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: white;
    margin-bottom: var(--space-lg);
}

.value-title {
    font-size: 1.25rem;
    margin: 0 0 var(--space-md);
}

.value-desc {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Portfolio */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.portfolio-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
    text-decoration: none;
    color: var(--text-primary);
}

.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.portfolio-image {
    aspect-ratio: 4/3;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.portfolio-card:hover .portfolio-image img {
    transform: scale(1.05);
}

.portfolio-content {
    padding: var(--space-xl);
}

.portfolio-title {
    font-size: 1.25rem;
    margin: 0 0 var(--space-sm);
}

.portfolio-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Process */
.process-section {
    background: var(--bg-elevated);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
    align-items: start;
}

.process-step {
    text-align: center;
    padding: var(--space-xl);
    position: relative;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-glow-cyan);
}

.step-title {
    font-size: 1.25rem;
    margin: 0 0 var(--space-sm);
}

.step-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.process-connector {
    display: none;
}

@media (min-width: 1024px) {
    .process-grid {
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    }
    .process-connector {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--bg-cyan);
        opacity: 0.4;
    }
}

/* Testimonials */
.testimonials-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
}

.testimonial-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-base) var(--ease-out);
}

.testimonial-card:hover {
    transform: translateY(-4px);
}

.testimonial-rating {
    color: #F59E0B;
    display: flex;
    gap: 0.2em;
    margin-bottom: var(--space-md);
}

.testimonial-content {
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    font-size: 1rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.testimonial-author img {
    border-radius: var(--radius-full);
    width: 48px;
    height: 48px;
    object-fit: cover;
}

/* Contact */
.contact-section {
    background: var(--bg-elevated);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1.4fr 1fr;
    }
}

.contact-form {
    background: var(--bg-page);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    margin-bottom: var(--space-md);
}

.form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75em 1em;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: inherit;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--bg-cyan);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-cyan) 20%, transparent);
}

.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
    border-color: #F43F5E;
}

.btn-submit {
    width: 100%;
    margin-top: var(--space-md);
    position: relative;
}

.btn-spinner {
    position: absolute;
}

.form-message {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    display: none;
}

.form-message.success {
    display: block;
    background: color-mix(in srgb, #10B981 15%, transparent);
    color: #10B981;
    border: 1px solid #10B981;
}

.form-message.error {
    display: block;
    background: color-mix(in srgb, #F43F5E 15%, transparent);
    color: #F43F5E;
    border: 1px solid #F43F5E;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-channel {
    background: var(--bg-page);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    text-align: center;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.contact-channel:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.channel-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
}

.contact-channel h4 {
    font-size: 0.95rem;
    margin: 0 0 0.4em;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-channel a,
.contact-channel span {
    color: var(--bg-cyan);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

/* Floating Contact Widget (WhatsApp + Phone) — anchored to the END side.
   Use direct left/right for fixed elements because the viewport direction
   is always LTR in browsers, so inset-inline-* doesn't mirror for fixed. */
.floating-contact-widget {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

body.lang-ar .floating-contact-widget {
    right: auto;
    left: var(--space-lg);
}

/* Back to Top Button — anchored to the START side (opposite of floating contact).
   In LTR: left side. In RTL: right side. Always opposite WhatsApp/Phone. */
.back-to-top {
    position: fixed;
    bottom: 90px;
    left: var(--space-lg);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease;
}

body.lang-ar .back-to-top {
    left: auto;
    right: var(--space-lg);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--bg-cyan);
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl), var(--shadow-glow-cyan);
}

.back-to-top:active {
    transform: translateY(0);
}

/* ===================================================================
   SCROLL-HOVER EFFECT
   Cards/sections fade and scale down when out of viewport center,
   then "lift, scale up, and glow" when they reach the center.
   Toggled by scroll-hover.js via .is-hovered class.
   =================================================================== */

/* CRITICAL: Override the mu-plugin's `body, .bg-portal { background: var(--bg-bg) }`
   which forces a light cream background. We use html body to bump specificity
   above the plugin's selector. */
html body {
    background: var(--bg-page) !important;
    color: var(--text-primary) !important;
}

.bg-scrollhover {
    opacity: 0.45;
    transform: translateY(45px) scale(0.94);
    transition:
        opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.5s ease,
        background 0.5s ease,
        border-color 0.5s ease,
        filter 0.5s ease;
    will-change: transform, opacity, box-shadow, background;
}

.bg-scrollhover.is-hovered {
    opacity: 1;
    transform: translateY(0) scale(var(--bg-hover-active-scale, 1.04));
    z-index: 2;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 45px rgba(34, 211, 238, 0.35),
        0 0 80px rgba(99, 102, 241, 0.25);
    border-color: rgba(95, 206, 220, 0.45);
    filter: brightness(1.08);
}

/* When a card is active, accent its title/icon with the cyan glow */
.bg-scrollhover.is-hovered .card-icon,
.bg-scrollhover.is-hovered .service-icon,
.bg-scrollhover.is-hovered .portfolio-icon,
.bg-scrollhover.is-hovered .value-icon {
    filter: drop-shadow(0 0 12px rgba(95, 206, 220, 0.7));
    transform: scale(1.1);
    transition: filter 0.5s ease, transform 0.5s ease;
}

/* Card icon base state transition */
.card-icon,
.service-icon,
.portfolio-icon,
.value-icon {
    transition: filter 0.5s ease, transform 0.5s ease;
}

.floating-btn {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: transform var(--duration-base) var(--ease-bounce);
}

.floating-btn:hover {
    transform: scale(1.1);
}

.floating-whatsapp {
    background: #25D366;
}

.floating-phone {
    background: var(--gradient-primary);
}

/* Footer */
.site-footer {
    position: relative;
    background: var(--bg-dark-navy);
    color: white;
    padding: var(--space-4xl) 0 var(--space-xl);
    overflow: hidden;
    margin-top: var(--space-4xl);
}

.footer-bg {
    position: absolute;
    inset: 0;
    opacity: 0.05;
}

.footer-hexagons {
    position: absolute;
    inset: 0;
    background-image: url('../images/05-hexagons.png');
    background-size: 600px;
    background-repeat: repeat;
    opacity: 0.4;
}

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

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }

    /* Columns can be switched off in Appearance -> BahyGroup -> Footer, so the
       track list follows how many are actually printed instead of always
       reserving four and leaving a hole on the trailing edge. The brand column
       stays wider than the rest whenever it is present. */
    .footer-grid[data-cols="1"]                 { grid-template-columns: 1fr; }
    .footer-grid[data-cols="2"]                 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid[data-cols="3"]                 { grid-template-columns: repeat(3, 1fr); }
    .footer-grid[data-cols="4"]                 { grid-template-columns: repeat(4, 1fr); }
    .footer-grid[data-brand="1"][data-cols="2"] { grid-template-columns: 1.5fr 1fr; }
    .footer-grid[data-brand="1"][data-cols="3"] { grid-template-columns: 1.5fr 1fr 1fr; }
    .footer-grid[data-brand="1"][data-cols="4"] { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.footer-col h4 {
    color: white;
    font-size: 1rem;
    margin: 0 0 var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-tagline {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: var(--space-md) 0;
    font-size: 0.9rem;
}

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.footer-menu a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color var(--duration-fast) var(--ease-out);
}

.footer-menu a:hover {
    color: var(--bg-cyan-light);
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.social-link:hover {
    background: var(--bg-cyan);
    color: white;
}

.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.6em;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.footer-contact a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.footer-contact a:hover {
    color: var(--bg-cyan-light);
}

.footer-bottom {
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-md);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.footer-credit {
    margin: 0;
}

/* Single Service */
.single-service {
    padding-top: var(--space-3xl);
}

.service-hero {
    position: relative;
    padding: var(--space-5xl) 0;
    overflow: hidden;
    text-align: center;
    background: var(--bg-page);
}

.service-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.service-hero .container {
    position: relative;
    z-index: 1;
}

.service-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--service-color) 20%, transparent);
    color: var(--service-color);
    margin-bottom: var(--space-lg);
}

.service-hero-title {
    font-size: var(--text-h1);
    margin: 0 0 var(--space-md);
    background: linear-gradient(135deg, var(--text-primary), var(--service-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto var(--space-xl);
    line-height: 1.5;
}

.service-hero-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.service-content-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-primary);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.feature-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: transform var(--duration-base) var(--ease-out);
}

.feature-card:hover {
    transform: translateY(-2px);
    border-color: var(--service-color);
}

.feature-bullet {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

.gallery-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.faq-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.faq-item[open] {
    border-color: var(--service-color);
}

.faq-item summary {
    padding: var(--space-lg);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--duration-fast) var(--ease-out);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--service-color);
    transition: transform var(--duration-base) var(--ease-out);
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-answer {
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--text-secondary);
    line-height: 1.7;
}

.service-cta-box {
    padding: var(--space-3xl);
    border-radius: var(--radius-lg);
    text-align: center;
    color: white;
}

.service-cta-box h2 {
    color: white;
    font-size: var(--text-h2);
    margin: 0 0 var(--space-md);
}

.service-cta-box p {
    margin: 0 0 var(--space-xl);
    font-size: 1.1rem;
    opacity: 0.9;
}

.service-cta-box .btn-outline {
    color: white;
    border-color: white;
}

.service-cta-box .btn-outline:hover {
    background: white;
    color: var(--bg-deep-blue);
}