html,
body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}

/* NOTE: a previous build shrunk html { font-size: 80% } to force every section's
   content inside 100dvh. That globally rimpiccioliva tutto il body (Tailwind
   è interamente rem-based) e nascondeva l'indicatore "Scorri" sotto la fold
   nelle sezioni più alte del viewport. Lo shrink è stato rimosso: ora il
   contenuto eccedente scrolla DENTRO la sezione (.section-screen ha
   overflow-y:auto), così l'indicatore (position:absolute; bottom) resta sempre
   ancorato al fondo della viewport. */

/*
 * The public landing route no longer receives the global Bootstrap / DevExpress
 * stylesheets (gated server-side in _Host.cshtml via `isLanding`), and
 * export-theme.css is generated from the landing markup (`npm run build:css`).
 * So the natural Tailwind cascade (@layer utilities beats @layer base) works on
 * its own — the old block of unlayered `!important` shims is gone. Only
 * landing-specific, non-Tailwind rules remain in this file.
 */
:root {
    --rz-icon-fill: 1;
    --rz-icon-optical-size: 24;
    /* Fixed navbar height (contact strip + main bar) at >=md. Used to offset
       snap targets and section top padding so content never hides behind it. */
    --nav-h: 103px;
}

@media (max-width: 767px) {
    :root {
        /* contact strip hidden below md → navbar shorter */
        --nav-h: 71px;
    }
}

/* Short viewports (phones in landscape, foldables, low desktop windows): the
   main bar collapses to a single row, reduce reserved space so it doesn't eat
   half the visible height. Width-independent: applies on tablet/desktop too. */
@media (max-height: 640px) {
    :root {
        --nav-h: 56px;
    }
}

/* Laptop-only shrink: width >= lg breakpoint (1024px, so phones/tablets stay
   untouched) AND height <= 900px (typical 1366x768, 1440x900, 1600x900 laptops).
   Excludes:
   - phones / tablets (width < 1024)
   - tall desktop monitors (height > 900)
   - very short viewports already remapped to the flow layout (height <= 640)
   Scales every rem-based size (Tailwind spacing, typography, radii) by 80%, so
   sections fit a 100dvh laptop screen without overflowing. */
@media (min-width: 1024px) and (max-height: 900px) and (min-height: 641px) {
    html {
        font-size: 80%;
    }

    /* The shrink also shrinks the navbar bar. Restore the top-bar typography to
       its intended size (px, to bypass the shrunk rem) — only the navbar bumps
       back, section content stays scaled down. */
    header .text-sm {
        font-size: 14px;
    }

    header .text-2xl {
        font-size: 23px;
    }
}

/* Material Symbols icon rendering: force the FILL/GRAD/opsz axes Radzen exposes
   for crisper landing card icons. Kept !important to win over Radzen's own .rzi base rule. */
.rzi {
    font-variation-settings: "FILL" 1, "GRAD" 0, "opsz" 24 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* Remove focus outline for mouse/touch; keep for keyboard nav */
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Suppress focus ring on scroll containers and structural elements */
main.snap-main:focus,
.hero-section:focus,
.section-screen:focus,
body:focus,
#app:focus {
    outline: none;
}

#app,
.page {
    height: 100%;
    overflow: hidden;
}

main.snap-main {
    display: block;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    /* Snap targets stop below the fixed navbar instead of under it. */
    scroll-padding-top: var(--nav-h);
}

.reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.reveal-left {
    transform: translateX(-180px);
}

.reveal.reveal-right {
    transform: translateX(180px);
}

/* Narrow screens: a 180px slide is ~half the viewport — shrink it so the
   reveal reads as a nudge, not content flying in from off-screen. */
@media (max-width: 640px) {
    .reveal.reveal-left {
        transform: translateX(-48px);
    }

    .reveal.reveal-right {
        transform: translateX(48px);
    }
}

.reveal.in-view {
    opacity: 1;
    transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.reveal-left,
    .reveal.reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

section[id] {
    scroll-margin-top: 0;
}

#blazor-error-ui {
    background: #fff3cd;
    border-top: 1px solid #f5c842;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.choose-us-section {
    isolation: isolate;
}

.section-screen {
    /* Section grows with its content (min-height, not fixed): the snap-main
       outer scroller handles all vertical scrolling. The "Scorri" cue uses
       position:sticky with main.snap-main as scrolling ancestor, so it pins
       to the viewport bottom while the section is in view (works regardless
       of section content height). overflow:clip contains the reveal slide.
       `safe center`: centers vertically when content fits, but falls back to
       flex-start when content exceeds the box (avoids the classic flexbox
       data-loss where centered content gets clipped from the top). */
    min-height: 100dvh;
    flex-shrink: 0;
    overflow: clip;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    scroll-snap-align: start;
    position: relative;
}

.hero-section {
    min-height: 100dvh;
    flex-shrink: 0;
    overflow: clip;
    scroll-snap-align: start;
}

/* Reserve the fixed-navbar band at the top of every section so centered
   content (and especially the eyebrow labels) never sit under the navbar.
   Higher specificity than Tailwind's pt-* utilities, so it wins. */
.snap-main .section-screen {
    padding-top: calc(var(--nav-h) + 1rem);
    padding-bottom: clamp(1rem, 3vh, 2rem);
}

/* Content-heavy sections are taller than the viewport: align to the top so the
   heading stays visible and the overflow scrolls downward (never clips upward,
   which is what justify-content:center does when content exceeds the box). */
.snap-main #chi-siamo.section-screen,
.snap-main #features.section-screen {
    justify-content: flex-start;
}

/* Testimonial carousel has its own dots + arrow nav; the bottom "Scorri" mouse
   cue would overlap the dots, so suppress it on this section only. */
.snap-main #testimonial .scroll-indicator-footer {
    display: none;
}



/* Short viewports (landscape phones / tablets, low laptops): trim the big
   vertical padding so centered content doesn't collide with the scroll cue. */
@media (max-height: 760px) {
    .scroll-indicator-footer {
        bottom: 0.75rem;
    }
}

/* Scroll indicator base styling. */
.scroll-indicator-footer {
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
    opacity: 1;
    transition: opacity 300ms ease;
}

/* Hero is a single full-viewport splash with no inner overflow: absolute
   anchored to section bottom is the simplest and most reliable positioning. */
.hero-section .scroll-indicator-footer {
    position: absolute;
    bottom: 1.5rem;
}

/* Default for content sections: absolute pinning at the section bottom. Does
   NOT consume flex space, so justify-content:center on .section-screen still
   centers the content vertically. */
.section-screen .scroll-indicator-footer {
    position: absolute;
    bottom: 1.5rem;
    margin-top: 0;
}

/* Dense content sections (taller than 100dvh): use sticky + margin-top:auto so
   the cue stays glued to the visible bottom while the inner content scrolls.
   These two sections are also justify-content:flex-start (see above), so
   margin-top:auto doesn't fight a centered layout here. */
.snap-main #chi-siamo.section-screen .scroll-indicator-footer,
.snap-main #features.section-screen .scroll-indicator-footer {
    position: sticky;
    bottom: 1.5rem;
    margin-top: auto;
}

/* Hide during scroll; visible at rest */
.is-scrolling .scroll-indicator-footer {
    opacity: 0;
    pointer-events: none;
}

.scroll-indicator-footer {
    pointer-events: all;
}

.scroll-indicator-container {
    pointer-events: all;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 220ms ease;
}

.scroll-indicator-container:hover {
    opacity: 1;
}

.scroll-mouse {
    width: 1.5rem;
    height: 2.45rem;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, hsl(var(--primary)) 50%, transparent);
    display: inline-flex;
    justify-content: center;
    padding-top: 0.34rem;
    background: color-mix(in oklab, hsl(var(--primary)) 8%, transparent);
    backdrop-filter: blur(6px);
}

.scroll-wheel {
    width: 0.2rem;
    height: 0.56rem;
    border-radius: 999px;
    background: hsl(var(--primary));
    animation: wheel-pulse 1.35s ease-in-out infinite;
}

.scroll-text {
    color: hsl(var(--primary));
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@keyframes wheel-pulse {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    70% {
        opacity: 0.24;
        transform: translateY(0.68rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-pill-grid {
    display: grid;
    gap: 0.85rem;
}

/* Two pills side by side from sm up so the About left column stays short
   enough to fit beside the video without overflowing the section. */
@media (min-width: 640px) {
    .about-pill-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.about-pill-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.8rem;
    border: 1px solid rgba(15, 47, 75, 0.1);
    border-radius: 0.95rem;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 251, 255, 0.96) 100%);
    padding: 0.9rem 1rem;
}

.about-pill-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.about-success-panel {
    border-radius: 1.2rem;
    border: 1px solid rgba(10, 35, 58, 0.12);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 250, 255, 0.96) 100%);
    padding: 1.3rem;
    box-shadow: 0 20px 48px rgba(9, 40, 62, 0.09);
}

.about-success-header {
    margin-bottom: 1rem;
}

.about-success-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.about-success-card {
    border-radius: 0.95rem;
    border: 1px solid rgba(5, 38, 69, 0.1);
    background: #fff;
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(7, 33, 56, 0.08);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.about-success-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 112, 160, 0.36);
    box-shadow: 0 16px 34px rgba(7, 33, 56, 0.12);
}

.about-success-value {
    font-family: var(--font-display, "Outfit", sans-serif);
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 700;
    color: #0070a0;
    line-height: 1.05;
}

.about-success-label {
    margin-top: 0.32rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0e2436;
}

.about-success-detail {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #55697d;
}

@media (max-width: 639px) {
    .about-success-grid {
        grid-template-columns: 1fr;
    }
}

/* Dark variant for scroll indicator on light backgrounds */
.scroll-indicator-dark .scroll-mouse {
    border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent);
    background: color-mix(in oklab, hsl(var(--primary)) 8%, transparent);
}

.scroll-indicator-dark .scroll-wheel {
    background: hsl(var(--primary));
}

.scroll-indicator-dark .scroll-text {
    color: hsl(var(--primary));
}

/* Footer: no snap, natural height — reachable via proximity scroll */
footer {
    scroll-snap-align: none;
}

/* Hero background fallback color */
.hero-bg {
    background-color: #0f1729;
}

/* KPI stats in Features section */
.features-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 3.5rem;
}

@media (min-width: 768px) {
    .features-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.features-kpi-card {
    border-radius: 1rem;
    border: 1px solid rgba(0, 112, 160, 0.15);
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(235,248,255,0.95) 100%);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 112, 160, 0.08);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.features-kpi-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 112, 160, 0.35);
    box-shadow: 0 12px 28px rgba(0, 112, 160, 0.14);
}

.features-kpi-value {
    font-family: var(--font-display, "Outfit", sans-serif);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    color: #0070a0;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.features-kpi-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0e2436;
    margin-bottom: 0.15rem;
}

.features-kpi-detail {
    font-size: 0.73rem;
    color: #6b8396;
}

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

/* Portfolio infinite marquee — JS-driven scroll */
.projects-marquee-outer {
    width: 100%;
    overflow-x: scroll;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    padding: 0.5rem 0;
}

.projects-marquee-outer::-webkit-scrollbar {
    display: none;
}

.projects-marquee-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    padding: 0 4rem;
}

.projects-marquee-card {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 14rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--card, #fff);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    cursor: default;
}

.projects-marquee-card:hover {
    border-color: rgba(0, 112, 160, 0.3);
    box-shadow: 0 4px 16px rgba(0, 112, 160, 0.08);
}

/* Testimonials carousel slide animations — applied to the whole 3-card track */
@keyframes slideFromRight {
    from {
        transform: translateX(80px) scale(0.97);
        opacity: 0.2;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideFromLeft {
    from {
        transform: translateX(-80px) scale(0.97);
        opacity: 0.2;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.slide-from-right {
    animation: slideFromRight 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.slide-from-left {
    animation: slideFromLeft 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .slide-from-right,
    .slide-from-left {
        animation: none;
    }
}

/* Projects marquee */
.projects-marquee-outer {
    overflow: hidden;
    width: 100%;
    margin-top: 1.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.projects-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    width: max-content;
    will-change: transform;
}
.projects-marquee-card {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 260px;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ============================================================================
   MOBILE / SHORT VIEWPORTS: drop the desktop full-screen-snap model.

   Triggers:
   - max-width: 767px   → phones in portrait (single-column content taller than
                          the screen)
   - max-height: 640px  → phones in landscape, foldables, low desktop windows.
                          On these the 100dvh + scroll-snap model would clip
                          most of each section (e.g. Galaxy S27 Ultra in
                          landscape: 915×412 CSS px → width > 767 falls in the
                          desktop branch and section content is invisible under
                          overflow:clip with no inner scroll).

   In both cases sections size to content and the page scrolls normally
   top-to-bottom. Placed at end of file so these win the cascade over the base
   .section-screen rules (equal specificity, later wins).
   ========================================================================== */
@media (max-width: 767px), (max-height: 640px) {
    main.snap-main {
        scroll-snap-type: none;
    }

    .section-screen {
        /* Page flows top-to-bottom; sections size to content and the snap-main
           container scrolls. */
        height: auto;
        min-height: 100dvh;
        overflow-x: clip;
        overflow-y: visible;
        scroll-snap-align: none;
        justify-content: flex-start;
        padding-top: calc(var(--nav-h) + 1.25rem);
        padding-bottom: 2.5rem;
    }

    /* Hero stays the one full-screen centered splash (its content fits). */
    .hero-section {
        min-height: 100dvh;
    }
}