/* ---------------------------------------------------------------------------
   Header and hero refinements, loaded on every page including the homepage.
--------------------------------------------------------------------------- */

/* 1. The header CTA matches the language switcher's footprint. */
.landing-header-actions .landing-header-cta {
    padding: 8px 16px !important;
    border-radius: 50px !important;
    gap: 6px !important;
    box-shadow: none !important;
}

.landing-header-actions .landing-header-cta:hover { transform: none !important; }

/* 2. A shine sweep instead of the rotating glow ring. */
.landing-header-cta::before {
    display: none !important;
}

.landing-header-cta {
    position: relative !important;
    /* .landing-btn-primary sets overflow:visible so its glow ring can spill out.
       Without !important the shine sweep escaped the button and showed up as a
       white shape next to the language switcher — on the right in RTL, where
       inset-inline-start:-60% puts it. */
    overflow: hidden !important;
    isolation: isolate;
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
    border: 0 !important;
}

.landing-header-cta::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    inset-inline-start: -60% !important;
    width: 45% !important;
    height: 100% !important;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-18deg) !important;
    animation: spHeaderCtaShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 0 !important;
    mask: none !important;
    -webkit-mask: none !important;
    opacity: 1 !important;
}

@keyframes spHeaderCtaShine {
    0%   { inset-inline-start: -60%; }
    55%  { inset-inline-start: 130%; }
    100% { inset-inline-start: 130%; }
}

/* 3. The sparkle stays put. */
.sparkles-icon { animation: none !important; }

/* 4. The hero button's glowing rim only lights up on hover. */
.landing-hero .landing-btn-primary::before,
.landing-hero-cta .landing-btn-primary::before {
    opacity: 0 !important;
    transition: opacity .25s ease !important;
}

.landing-hero .landing-btn-primary:hover::before,
.landing-hero-cta .landing-btn-primary:hover::before {
    opacity: .85 !important;
}

@media (prefers-reduced-motion: reduce) {
    .landing-header-cta::after { animation: none !important; }
}

/* 5. The CTA label matches the language switcher's type size. */
.landing-header-actions .landing-header-cta,
.landing-header-actions .landing-header-cta span {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

.landing-header-actions .landing-header-cta .sparkles-icon {
    font-size: 1rem !important;
}

/* The switcher is 8px padding around 1rem text plus a 1.1rem icon, and the theme
   toggle is a 42px circle. Matching that height stops the CTA reading as small. */
.landing-header-actions .landing-header-cta {
    min-height: 42px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

/* 6. Astra's footer is replaced by ours; the leftover strip read as a white
      band at the bottom of every themed page. */
body.sp-themed #colophon,
body.sp-themed .site-footer,
body.sp-themed footer.site-footer,
body.sp-themed .ast-scroll-top-icon,
body.sp-themed #ast-scroll-top {
    display: none !important;
}


/* 7. The theme toggle used ☀️/🌙 emoji, which render as an empty white box on
      systems without those glyphs — a stray white shape beside the language
      switcher. Masked vector icons remove the font dependency. */
.theme-toggle-btn .theme-icon {
    font-size: 0 !important;
    line-height: 0 !important;
    color: var(--secondary);
}

body.dark-theme .theme-toggle-btn .theme-icon { color: #e4e7fd; }

.theme-toggle-btn .theme-icon::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.theme-toggle-btn .theme-icon-light::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4%22%2F%3E%3C%2Fsvg%3E");
}

.theme-toggle-btn .theme-icon-dark::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M21%2012.8A9%209%200%201%201%2011.2%203a7%207%200%200%200%209.8%209.8z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M21%2012.8A9%209%200%201%201%2011.2%203a7%207%200%200%200%209.8%209.8z%22%2F%3E%3C%2Fsvg%3E");
}

/* 8. Storylane demo: the frame was 100% of its parent, so any padding on the
      content column narrowed it. Anchoring it to the viewport makes it edge to
      edge whatever the parent width is, and the 50%/translate pair works in RTL
      as well as LTR. */
#storylane-demo .landing-demo-frame {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    transform: translateX(-50%) !important;
}

#storylane-demo .landing-demo-frame .sl-embed,
#storylane-demo .landing-demo-frame iframe.sl-demo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    border: 0 !important;
}

/* The section already spans the viewport; keep it from adding a scrollbar. */
#storylane-demo { overflow-x: hidden !important; }

/* 9. The homepage prints its own header from page content, so its "customers"
      item is removed here rather than by editing that markup. */
.landing-header-menu li:has(> #menu_customers),
.landing-header-menu li:has(> a[href$="#customers"]) {
    display: none !important;
}

/* Fallback for browsers without :has(): the link itself is hidden, and the
   empty item collapses because the menu is a flex row with no fixed widths. */
#menu_customers,
.landing-header-menu a[href$="#customers"] {
    display: none !important;
}

/* 10. "The complete solution": the showcases alternated by setting
       direction: rtl on every even block. The markup already alternates on its
       own — the second showcase puts the image before the text — so that rule
       flipped the pair back into the same order as the first one and, worse,
       right-aligned the copy on the English page. Dropping the direction
       override lets grid auto-placement follow the markup in both languages. */
.landing-solution-showcase,
.landing-solution-showcase:nth-child(even) {
    direction: inherit !important;
}

/* The list marker sat at a physical right edge, which is only correct in RTL. */
.landing-solution-list li {
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-inline-start: 45px !important;
}

.landing-solution-list li::before {
    right: auto !important;
    left: auto !important;
    inset-inline-start: 0 !important;
}

/* 11. Hero call to action: a highlight sweeps across it continuously, and the
       rotating rim still lights up on hover (kept from the earlier change).
       The sweep is painted as a background layer rather than a pseudo-element,
       because ::after already carries the button's fill and ::before the rim. */
.landing-hero-cta .landing-btn-primary,
.landing-hero .landing-btn-primary {
    background-image: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, .45) 50%,
        rgba(255, 255, 255, 0) 62%
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 260% 100% !important;
    animation: spHeroShine 3.4s ease-in-out infinite !important;
    box-shadow: 0 10px 30px rgba(34, 53, 221, .35);
}

.landing-hero-cta .landing-btn-primary:hover,
.landing-hero .landing-btn-primary:hover {
    box-shadow: 0 16px 40px rgba(34, 53, 221, .5);
}

@keyframes spHeroShine {
    0%   { background-position: 130% 0; }
    55%  { background-position: -30% 0; }
    100% { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero-cta .landing-btn-primary,
    .landing-hero .landing-btn-primary { animation: none !important; }
}

/* 12. Room around the customer logo marquee. The hero is min-height:100vh and
       its spacing was trimmed to keep CTA + logos + stats above the fold, so the
       gaps are viewport-relative: they open up on a tall screen and collapse
       back to roughly the old values on a short one. */
.landing-hero-logos {
    margin-top: clamp(26px, 4.4vh, 58px) !important;
    margin-bottom: clamp(22px, 3.6vh, 46px) !important;
}

/* The stats row adds its own top margin; trim it so the two do not stack up. */
.landing-hero-logos + .landing-hero-stats {
    margin-top: clamp(4px, 1vh, 12px) !important;
}

@media (max-width: 768px) {
    .landing-hero-logos {
        margin-top: clamp(18px, 3vh, 30px) !important;
        margin-bottom: clamp(16px, 2.6vh, 26px) !important;
    }
}