/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--gradient-dark);
    color: var(--color-white);
    /* --gradient-dark's brand-color glow (see .hero::before too) can get
       bright enough in spots that plain white text loses contrast
       against it — a soft dark shadow keeps every letter readable
       regardless of what's directly behind it. Inherited by every child
       here (h1, p, stats...), so this one rule covers all of them. */
    text-shadow: 0 1px 6px rgba(var(--shadow-color-strong-rgb), 0.55);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 4rem);
    min-height: calc(100svh - 4rem);
    padding: clamp(1.5rem, 6vh, 4rem) 1.5rem 0;
    --mx: 50%;
    --my: 30%;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mx) var(--my), rgba(var(--color-primary-rgb),0.25), transparent 60%);
    transition: background 0.1s linear;
    pointer-events: none;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--color-white-rgb),0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--color-white-rgb),0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 100%);
    pointer-events: none;
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    pointer-events: none;
    animation: float 12s ease-in-out infinite;
}

.blob-1 {
    width: 420px;
    height: 420px;
    top: -140px;
    left: -100px;
    background: var(--color-primary);
}

.blob-2 {
    width: 360px;
    height: 360px;
    top: 40px;
    right: -120px;
    background: var(--color-accent);
    animation-delay: -4s;
}

.blob-3 {
    width: 300px;
    height: 300px;
    bottom: -160px;
    left: 35%;
    background: var(--color-primary-mid);
    animation-delay: -8s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.08); }
}

.hero-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-content: center;
    gap: clamp(1.5rem, 4vh, 3rem);
    align-items: center;
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

.badge-pill {
    display: inline-block;
    background: rgba(var(--color-white-rgb),0.1);
    border: 1px solid rgba(var(--color-white-rgb),0.25);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    margin-bottom: clamp(0.85rem, 2vh, 1.5rem);
    backdrop-filter: blur(6px);
}

.hero h1 {
    font-size: clamp(1.9rem, 3.4vw + 1vh, 3.2rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
    letter-spacing: -0.02em;
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* .hero's inherited text-shadow renders using its own color, not
       this element's (transparent) `color` — so instead of adding
       contrast it painted a solid shadow-colored silhouette of the
       letters over the gradient fill. Turning it off fixed that, but
       left this span with no shadow at all while its plain-white
       neighbors had one, so it read as noticeably dimmer/lower-contrast
       by comparison. filter: drop-shadow (unlike text-shadow) follows
       the element's actual rendered alpha shape — the visible gradient
       letters, post-clip — instead of the glyph outlines regardless of
       fill, so it adds the same shadow weight without the silhouette
       artifact. This fill is a lighter tint to begin with, closer in
       tone to the green backdrop than white is, so matching .hero's
       shadow exactly still read as slightly fainter — a stacked
       tight+wide pair fixed that but overshot into a hard, obvious
       outline. A single layer, just a bit stronger than .hero's own
       0.55, is the middle ground: enough to close the gap without
       reading as its own distinct effect. */
    text-shadow: none;
    filter: drop-shadow(0 1px 5px rgba(var(--shadow-color-strong-rgb), 0.65));
}

.hero .lead {
    font-size: clamp(1rem, 0.9rem + 0.5vh, 1.15rem);
    color: rgba(var(--color-white-rgb),0.8);
    margin-bottom: clamp(1rem, 3vh, 2rem);
    max-width: 34rem;
}


.hero .btn-outline-light {
    border-color: rgba(var(--color-white-rgb),0.4);
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.hero .btn-outline-light:hover {
    transform: translateY(-2px);
    background: rgba(var(--color-white-rgb),0.1);
}

/* .btn-primary's gradient starts at --color-primary, a very dark
   green — on the light page background that reads as a clear, solid
   button, but here it sits on the hero/CTA's own dark surface, where
   the two darks were blending into each other with barely any edge
   definition. A thin light ring gives the button a visible boundary
   regardless of what's behind it. */
.hero .btn-primary,
.cta-copy .btn-primary {
    box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.35), 0 0 0 1px rgba(var(--color-white-rgb), 0.2);
}

.hero .btn-primary:hover,
.cta-copy .btn-primary:hover {
    box-shadow: 0 14px 30px rgba(var(--color-primary-rgb), 0.45), 0 0 0 1px rgba(var(--color-white-rgb), 0.3);
}

.hero-stats {
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.2rem);
    margin-top: clamp(1.25rem, 3.5vh, 2.75rem);
    flex-wrap: wrap;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-white), var(--color-highlight));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Same fix as .text-gradient — .hero's text-shadow would otherwise
       paint a solid shadow-colored silhouette over this gradient fill
       instead of leaving it transparent. drop-shadow follows the
       rendered gradient letters themselves, avoiding that artifact — see
       .text-gradient for why the opacity here is a bit above .hero's
       own 0.55 rather than an exact match. */
    text-shadow: none;
    filter: drop-shadow(0 1px 5px rgba(var(--shadow-color-strong-rgb), 0.65));
}

.stat-label {
    font-size: 0.82rem;
    color: rgba(var(--color-white-rgb),0.6);
}

/* ---------- Hero mock browser ---------- */
.hero-visual {
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.mock-browser {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(var(--color-white-rgb),0.06);
    border: 1px solid rgba(var(--color-white-rgb),0.15);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform 0.2s ease-out;
    animation: hero-in 1s var(--ease) 0.1s both, drift 8s ease-in-out infinite 1.1s;
}

@keyframes hero-in {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.mock-topbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--color-white-rgb),0.05);
    border-bottom: 1px solid rgba(var(--color-white-rgb),0.1);
}

.mock-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(var(--color-white-rgb),0.3);
}

.mock-url {
    margin-left: 0.6rem;
    font-size: 0.75rem;
    color: rgba(var(--color-white-rgb),0.5);
    background: rgba(var(--color-white-rgb),0.06);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.mock-body {
    padding: 1.5rem;
}

.mock-hero-block {
    height: 90px;
    border-radius: 0.75rem;
    background: var(--gradient-brand);
    margin-bottom: 1rem;
    background-size: 200% 200%;
    animation: gradient-shift 6s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.mock-line {
    height: 10px;
    border-radius: 999px;
    background: rgba(var(--color-white-rgb),0.18);
    margin-bottom: 0.6rem;
}

.w-70 { width: 70%; }
.w-40 { width: 40%; }

.mock-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.mock-card {
    height: 46px;
    border-radius: 0.6rem;
    background: rgba(var(--color-white-rgb),0.08);
    border: 1px solid rgba(var(--color-white-rgb),0.1);
}

.mock-float-badge {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-text);
    box-shadow: var(--shadow-strong);
    top: 22%;
    right: -1.5rem;
    animation: bob 4.5s ease-in-out infinite;
}

.mock-float-badge.badge-2 {
    top: auto;
    bottom: 10%;
    left: -1.4rem;
    right: auto;
    animation-delay: -2.2s;
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- Marquee ---------- */
.hero-marquee {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top: 1px solid rgba(var(--color-white-rgb),0.1);
    padding: 1.1rem 0;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: marquee 46s linear infinite;
    font-family: var(--font-heading);
    font-weight: 600;
    color: rgba(var(--color-white-rgb),0.55);
    letter-spacing: 0.02em;
}

.marquee-track span:nth-child(odd) {
    color: rgba(var(--color-white-rgb),0.3);
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-33.3333%); }
}

/* ---------- Sections ---------- */
.section {
    padding: 5.5rem 1.5rem;
    max-width: 1140px;
    margin: 0 auto;
}

.section.alt {
    max-width: 100%;
    background-color: var(--color-bg-alt);
}

.section.alt > * {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.section h2 {
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}

/* ---------- Para quem: semicircle dial ---------- */
.who-section {
    /* Undo the shared `.section` 1140px cap on this one section: the
       dial is meant to bleed past its grid column all the way towards
       the real page edge, so the clipping boundary below must be the
       full viewport width, not the narrow centered content box (which
       was cropping the semicircle back towards the middle). */
    max-width: none;
    margin: 0;
    /* At its most rotated, the dial's swept bounding box can bleed
       past the section on every side. `overflow: clip` (not `hidden`)
       crops that bleed without ever establishing a scroll container,
       so — unlike overflow-x/-y — it can't add a stray scrollbar or
       extra height to this section or the page. */
    overflow: clip;
}

.who-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
}

.who-copy {
    max-width: 30rem;
}

.who-arc-wrap {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.who-arc-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 24rem;
    height: 24rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--color-primary-rgb),0.16), rgba(var(--color-accent-rgb),0.08) 55%, transparent 75%);
    filter: blur(4px);
    pointer-events: none;
}

.who-arc-dial {
    position: absolute;
    inset: 0;
    transform: rotate(var(--dial-rot, 0deg));
    transform-origin: 100% 50%;
    transition: transform 0.45s var(--ease);
}

.who-arc-ring {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 19rem;
    height: 19rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px dashed rgba(var(--color-primary-rgb),0.35);
    pointer-events: none;
}

.who-arc-ring::before {
    content: '';
    position: absolute;
    inset: 3rem;
    border-radius: 50%;
    border: 1.5px dashed rgba(var(--color-primary-rgb),0.22);
}

.who-arc-item {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 4.1rem;
    height: 4.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(var(--color-primary-rgb),0.12), rgba(var(--color-accent-rgb),0.1));
    border: 1.5px solid rgba(var(--color-primary-rgb),0.3);
    color: var(--color-primary-dark);
    cursor: pointer;
    font-family: inherit;
    box-shadow: var(--shadow-soft);
    /* Every item carries a `transform` unconditionally (not just on
       hover/open), which — regardless of z-index — already makes each one
       its own stacking context. Without an explicit z-index here, that
       context still only ranks among its siblings by DOM order, so
       whichever item is *open* (its tooltip child included) could still
       paint underneath a later sibling's circle rather than over it. z-
       index: 1 keeps normal items ranked by that same DOM order; open/
       hover/focus below raises just that one above every sibling so its
       tooltip is never covered by another item's icon. */
    z-index: 1;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(-9.5rem) rotate(calc(-1 * var(--angle)));
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease), opacity 0.6s var(--ease);
}

.who-arc-item:hover,
.who-arc-item:focus-visible,
.who-arc-item.is-open {
    background: var(--gradient-brand);
    color: var(--color-white);
    border-color: transparent;
    box-shadow: var(--shadow-strong);
    z-index: 5;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(-9.5rem) rotate(calc(-1 * var(--angle))) scale(1.15);
}

/* Counter-rotate by the dial's current scroll rotation so the icon
   itself always stays upright, independent of the item's own arc
   position or the semicircle's turning. */
.who-arc-icon {
    display: inline-flex;
    transform: rotate(calc(-1 * var(--dial-rot, 0deg)));
    transition: transform 0.45s var(--ease);
}

.who-arc-icon svg {
    width: 1.7rem;
    height: 1.7rem;
}

/* Counter-rotate by the dial's current scroll rotation so the popover
   always reads level, even while the semicircle itself is turned. */
.who-arc-tooltip {
    position: absolute;
    right: calc(100% + 0.9rem);
    top: 50%;
    transform: translateY(-50%) translateX(8px) rotate(calc(-1 * var(--dial-rot, 0deg)));
    width: 13rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    padding: 0.9rem 1.1rem;
    box-shadow: var(--shadow-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s var(--ease);
    z-index: 2;
}

.who-arc-item:hover .who-arc-tooltip,
.who-arc-item:focus-visible .who-arc-tooltip,
.who-arc-item.is-open .who-arc-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0) rotate(calc(-1 * var(--dial-rot, 0deg)));
}

/* A clicked item's tooltip stays open (.is-open, above) independently of
   hover — that's the point, it's "pinned". But hovering a *different*
   item then satisfied BOTH that item's own :hover rule above AND this
   one's .is-open rule at the same time, so two tooltips showed at once.
   initWhoArcClickToggle adds/removes .is-hover-suppressed on whichever
   item is pinned while some other item is being hovered, so only the
   one actually under the cursor is visible; it's removed again on
   mouseleave, letting the pinned tooltip return. Needs 4 class
   selectors (vs. the 3 above) to win regardless of source order, and —
   since specificity, not media queries, decides that — this one rule
   also overrides the narrower-viewport tooltip-show rule further down
   without needing a duplicate inside that media query. */
.who-arc-item.is-open.is-hover-suppressed .who-arc-tooltip {
    opacity: 0;
    pointer-events: none;
}

.who-arc-tooltip-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text);
}

.who-arc-tooltip-desc {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .who-arc-dial {
        transition: none;
    }
}

@media (max-width: 860px) {
    .who-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .who-copy {
        max-width: none;
        margin: 0 auto;
    }

    .who-arc-wrap {
        max-width: 300px;
        margin-top: 2.5rem;
    }

    /* Past desktop's own hinge position now (100%) — pushed further
       right on purpose, past the wrap's own right edge entirely, so
       more of the ring is cropped off-screen and the visible items sit
       closer to the right edge instead of spreading toward center.
       .who-arc-dial itself also rotates a few degrees on scroll (see
       initWhoArc, --dial-rot) around its own transform-origin, which
       has to match this same hinge — left at desktop's 100% while
       items sit further out here, that rotation would swing them
       through a wider arc than it swings the point they're actually
       anchored to, drifting them off-screen at some scroll positions
       even if they check out at rest. initWhoArc also caps how far
       this dial rotates on narrow screens specifically because of this
       hinge: the two widest-angle items (±58deg) are the ones closest
       to sweeping across the hinge's own position as the dial turns,
       and the further out the hinge sits, the less rotation it takes
       for that to carry them past the right edge. 108% plus that
       capped rotation keeps a comfortable margin at every scroll
       position, not just at rest. */
    .who-arc-dial {
        transform-origin: 108% 50%;
    }

    .who-arc-ring,
    .who-arc-item {
        left: 108%;
    }

    .who-arc-ring {
        width: 15rem;
        height: 15rem;
    }

    .who-arc-ring::before {
        inset: 2.25rem;
    }

    .who-arc-item {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(-7.4rem) rotate(calc(-1 * var(--angle)));
    }

    .who-arc-item:hover,
    .who-arc-item:focus-visible,
    .who-arc-item.is-open {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(-7.4rem) rotate(calc(-1 * var(--angle))) scale(1.12);
    }

    /* Tooltip pops out to the left of its item, same as desktop — just
       narrower, to fit comfortably in whatever room the compressed
       hinge above leaves on a narrow phone. initWhoArcClickToggle
       (site.js) still nudges it via --tooltip-shift/--tooltip-drop if
       an item near the top/bottom of the arc would otherwise clip the
       section's own top/bottom edge, or the popover would run past the
       screen's left edge. Those two MUST come after rotate() in this
       list, not before it: CSS applies transform functions left-to-
       right, so anything before rotate() gets swung around by it too —
       a translate placed before rotate() moves the tooltip and THEN
       rotates that whole (now large) offset around the tooltip's
       static position, which — via basic arm/pivot geometry — can throw
       the rendered box much further than the pixel value alone
       suggests. Placed after rotate() instead, they're the last thing
       applied, in already-upright screen space, so they move it by
       exactly the pixel amount site.js asked for. */
    .who-arc-tooltip {
        right: calc(100% + 0.75rem);
        left: auto;
        top: 50%;
        transform: translateY(-50%) translateX(6px) rotate(calc(-1 * var(--dial-rot, 0deg))) translateX(var(--tooltip-shift, 0px)) translateY(var(--tooltip-drop, 0px));
        width: min(11rem, calc(100vw - 3rem));
    }

    .who-arc-item:hover .who-arc-tooltip,
    .who-arc-item:focus-visible .who-arc-tooltip,
    .who-arc-item.is-open .who-arc-tooltip {
        transform: translateY(-50%) translateX(0) rotate(calc(-1 * var(--dial-rot, 0deg))) translateX(var(--tooltip-shift, 0px)) translateY(var(--tooltip-drop, 0px));
    }
}

/* ---------- Steps: scroll-driven stepper ---------- */
/* The scroller below already reserves its own tall scroll-jack area
   and the sticky content has its own padding, so the generic
   `.section` top/bottom padding just adds dead empty space before
   and after it — drop it here. */
.steps-section {
    padding-top: 0;
    padding-bottom: 0;
}

.steps-section .section-head {
    margin-bottom: 3rem;
}

.steps-scroller {
    position: relative;
    height: 190vh;
}

.steps-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
}

.steps-track {
    --steps-gap: 2rem;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--steps-gap);
    align-items: center;
    margin-bottom: 1.5rem;
}

.steps-line-track,
.steps-line-fill {
    position: absolute;
    top: 50%;
    left: calc((100% - 3 * var(--steps-gap)) / 8);
    right: calc((100% - 3 * var(--steps-gap)) / 8);
    height: 2px;
    transform: translateY(-50%);
    transform-origin: left center;
}

.steps-line-track {
    background: var(--color-border);
}

.steps-line-fill {
    background: var(--gradient-brand);
    transform: translateY(-50%) scaleX(0);
    transition: transform 0.2s linear;
}

.step-marker {
    position: relative;
    z-index: 1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 700;
    font-family: var(--font-heading);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.step-marker.is-active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--color-white);
    transform: scale(1.12);
    box-shadow: 0 8px 18px rgba(var(--color-primary-rgb),0.35);
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.step {
    position: relative;
    text-align: center;
    opacity: 0.25;
    transform: translateY(18px);
    cursor: pointer;
    /* Without this, hovering the h3/p text inside shows the browser's
       text-select (I-beam) cursor instead of the pointer set above —
       cursor:auto on the text itself resolves per-content, not just by
       inheriting the parent's pointer — and a click can select that
       text instead of registering as a "jump to this step" tap. */
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.step.is-active {
    opacity: 1;
    transform: translateY(0);
}

.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb),0.14), rgba(var(--color-accent-rgb),0.14));
    color: var(--color-primary-dark);
    margin: 0 auto 1rem;
}

.step-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.step p {
    color: var(--color-text-muted);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .steps-scroller {
        height: auto;
    }

    .steps-sticky {
        position: static;
        height: auto;
    }

    .step,
    .step-marker {
        opacity: 1 !important;
        transform: none !important;
    }

    .step-marker {
        background: var(--gradient-brand);
        border-color: transparent;
        color: var(--color-white);
    }

    .steps-line-fill {
        transform: translateY(-50%) scaleX(1) !important;
    }
}

/* ---------- Solutions ---------- */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

.solution-grid-single {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
}

.solution-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    text-align: left;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.solution-card:hover {
    box-shadow: var(--shadow-soft);
}

.solution-card.highlight {
    background: var(--gradient-dark);
    color: var(--color-white);
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(var(--color-highlight-rgb), 0.4);
}

.solution-icon {
    font-size: 2.3rem;
    margin-bottom: 1rem;
}

/* A little lit lantern: swings like a pendulum (hangs from the top)
   while glowing, and every so often flickers as if the bulb is
   loose in its socket. */
.solution-icon-bulb {
    display: inline-block;
    transform-origin: 50% 100%;
    animation: bulb-swing 3.2s ease-in-out infinite, bulb-flicker 7s linear infinite;
}

@keyframes bulb-swing {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

@keyframes bulb-flicker {
    0%, 55%, 59%, 63%, 67%, 100% {
        filter: drop-shadow(0 0 6px rgba(var(--color-bulb-glow-rgb),0.65)) drop-shadow(0 0 16px rgba(var(--color-bulb-glow-rgb),0.45)) brightness(1);
        opacity: 1;
    }
    57%, 65% {
        filter: drop-shadow(0 0 1px rgba(var(--color-bulb-glow-rgb),0.15)) brightness(0.45);
        opacity: 0.55;
    }
    61% {
        filter: drop-shadow(0 0 10px rgba(var(--color-bulb-glow-rgb),0.8)) brightness(1.2);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solution-icon-bulb {
        animation: none;
        filter: drop-shadow(0 0 6px rgba(var(--color-bulb-glow-rgb),0.65)) drop-shadow(0 0 16px rgba(var(--color-bulb-glow-rgb),0.45));
    }
}

.solution-card h3 {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.solution-card p {
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
}

.solution-card.highlight p {
    color: rgba(var(--color-white-rgb),0.75);
}

.solution-tag {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb),0.1);
    color: var(--color-primary-dark);
}

.solution-card.highlight .solution-tag {
    background: rgba(var(--color-white-rgb),0.12);
    color: var(--color-white);
}

/* ---------- CTA: exploded-page scene ---------- */
.cta-scene-section {
    max-width: 100%;
    background: var(--gradient-dark);
    color: var(--color-white);
    /* Same reasoning as .hero above — --gradient-dark's glow can get
       bright enough here too to wash out plain white text. */
    text-shadow: 0 1px 6px rgba(var(--shadow-color-strong-rgb), 0.55);
    padding: 0;
}

.cta-footer {
    position: relative;
    background: var(--gradient-dark);
    color: var(--color-white);
    border-top: 1px solid rgba(var(--color-white-rgb),0.08);
    padding: 2rem 1.5rem;
}

.cta-footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: rgba(var(--color-white-rgb),0.65);
}

.cta-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
}

.cta-footer .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--gradient-brand);
    font-size: 0.8rem;
    color: var(--color-white);
}

.cta-footer a {
    color: rgba(var(--color-white-rgb),0.75);
    text-decoration: none;
}

.cta-footer a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* ---------- Hash-driven full-page overlays ---------- */
/* Hidden by default; each opens as a full-screen overlay (covering the
   whole viewport, nav included) only when the URL hash matches its own
   #id — as if it were a real separate page/navigation, without one
   actually happening. See initHashOverlays in site.js. Two today:
   .solicitar-overlay (site vs. custom-project chooser) and .about-overlay
   ("Sobre nós", merged in from what used to be its own routed page). */
.page-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--color-white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
}

.page-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0s;
}

.page-overlay.no-transition {
    transition: none !important;
}

.page-overlay-close {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.page-overlay-close:hover {
    background: var(--color-bg-alt);
    transform: rotate(90deg);
}

/* The chooser is a small centered card; the about page below is a normal
   top-to-bottom flow of sections, so only this one needs centering. */
.solicitar-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.solicitar-overlay-inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

/* Unlike .solicitar-overlay, "Sobre nós" keeps the site nav visible and
   usable above it — no close button either, the nav itself (its own links,
   or the brand mark back to "/") is how you leave. Starts right below the
   nav instead of covering the full viewport, so it never competes with it
   for the same pixels. 4rem matches the nav's own height (see
   .request-shell, which leaves the same gap for the same reason).
   z-index dropped below .site-nav's own 100 (inherited 300 from
   .page-overlay otherwise) for the same "stay out of the nav's way"
   reason: on a narrow screen the nav's own mobile dropdown menu opens
   *underneath* the nav bar, i.e. into the space this overlay occupies,
   and at a higher z-index than the nav this overlay's opaque background
   painted over that dropdown — open, just invisible behind it. */
.about-overlay {
    inset: 4rem 0 0 0;
    z-index: 50;
}

.solicitar-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.option-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
    animation: option-float 7s ease-in-out infinite;
}

.option-card:nth-child(2) {
    animation-duration: 8.5s;
    animation-delay: -3s;
}

.option-card:hover {
    box-shadow: var(--shadow-strong);
    border-color: transparent;
    transform: translateY(-3px);
    animation-play-state: paused;
}

@keyframes option-float {
    0%, 100% {
        translate: 0 0;
    }
    25% {
        translate: 2px -4px;
    }
    50% {
        translate: -1.5px -1.5px;
    }
    75% {
        translate: -2.5px 2.5px;
    }
}

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

.option-card.highlight {
    background: var(--gradient-dark);
    color: var(--color-white);
    border-color: transparent;
    box-shadow: var(--shadow-soft), 0 0 0 1px rgba(var(--color-highlight-rgb), 0.4);
    /* Same reasoning as .hero/.cta-scene-section — --gradient-dark's
       glow can get bright enough to wash out the plain white h3/p text
       here too. Inherited by both. */
    text-shadow: 0 1px 6px rgba(var(--shadow-color-strong-rgb), 0.55);
}

.option-card.highlight:hover {
    box-shadow: var(--shadow-strong), 0 0 0 1px rgba(var(--color-highlight-rgb), 0.6);
}

.option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb),0.14), rgba(var(--color-accent-rgb),0.14));
    color: var(--color-primary-dark);
    margin-bottom: 1.25rem;
}

.option-card.highlight .option-icon {
    background: rgba(var(--color-white-rgb),0.12);
    color: var(--color-white);
}

/* text-shadow above only ever affects actual text — the icon is drawn
   with SVG strokes/fills, which need filter: drop-shadow instead.
   Targeting the <svg> itself (not .option-icon) keeps the shadow on the
   pictogram's lines only, not the icon's own translucent background
   box. */
.option-card.highlight .option-icon svg {
    filter: drop-shadow(0 1px 4px rgba(var(--shadow-color-strong-rgb), 0.55));
}

.option-icon svg {
    width: 1.6rem;
    height: 1.6rem;
}

.option-card h3 {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.option-card p {
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
    line-height: 1.6;
}

.option-card.highlight p {
    color: rgba(var(--color-white-rgb),0.75);
}

.option-tag {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb),0.1);
    color: var(--color-primary-dark);
    margin-bottom: 1.5rem;
}

.option-card.highlight .option-tag {
    background: rgba(var(--color-white-rgb),0.12);
    color: var(--color-white);
}

.option-arrow {
    margin-top: auto;
    font-weight: 600;
    color: var(--color-primary);
}

.option-card.highlight .option-arrow {
    color: var(--color-white);
}

@media (max-width: 640px) {
    .solicitar-options {
        grid-template-columns: 1fr;
    }

    /* Stacking both option cards full-width already made this overlay
       tall; on mobile it easily runs past one screen's height and forces
       a scroll, so everything below is tightened (padding/gaps/icon and
       tag sizes) rather than any content actually being removed. */
    .solicitar-overlay {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .solicitar-overlay .section-head {
        margin-bottom: 1.25rem;
    }

    .solicitar-options {
        gap: 1rem;
    }

    .option-card {
        padding: 1.25rem 1.5rem;
    }

    .option-icon {
        width: 2.4rem;
        height: 2.4rem;
        margin-bottom: 0.6rem;
    }

    .option-icon svg {
        width: 1.3rem;
        height: 1.3rem;
    }

    .option-card p {
        margin-bottom: 0.75rem;
        line-height: 1.45;
    }

    .option-tag {
        margin-bottom: 0.6rem;
    }
}

/* .solicitar-overlay centers its card vertically (align-items: center)
   regardless of how tall that card actually is — fine as long as the
   viewport has room to spare, but on a short one (a small phone, or
   just a browser window that isn't very tall) the centered content's
   own top edge can land behind .page-overlay-close, which — being
   position: fixed — always sits at the same top: 1.5rem regardless of
   how far the overlay itself has scrolled. Scrolling the overlay to
   "see" that top edge doesn't help; the button never moves to get out
   of the way. Below this height, anchoring the card to the top with
   enough clearance for the button (instead of centering it through
   that button's own footprint) is what actually avoids the overlap —
   height, not width, is what this depends on, so it's independent of
   the max-width breakpoints above. */
@media (max-height: 700px) {
    .solicitar-overlay {
        align-items: flex-start;
        padding-top: 4.75rem;
    }
}

.cta-scroller {
    position: relative;
    height: 190vh;
}

.cta-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
}

.cta-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 0 1.5rem;
}

.cta-copy .eyebrow {
    color: var(--color-primary-tint);
}

.cta-copy h2 {
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.85rem;
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.cta-copy .section-subtitle {
    color: rgba(var(--color-white-rgb),0.72);
    margin-bottom: 2rem;
    max-width: 30rem;
}

.cta-scene {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    perspective: 1200px;
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
}

/* The page itself now carries the "docked -> lifts along Z on scroll,
   drifts with the cursor" behavior that used to live on the floating
   icon blocks. */
.cta-page {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 78%;
    height: 62%;
    /* Was var(--color-text) — nearly identical in value to the section's
       own dark gradient behind it, so the mockup barely read as a
       separate object and its scroll-driven tilt/drift was hard to see. */
    background: var(--color-surface-raised);
    border: 1px solid rgba(var(--color-white-rgb),0.16);
    border-radius: 1rem;
    /* var(--shadow-strong) is a dark drop-shadow, meant for light
       backgrounds — invisible here since the backdrop is already dark.
       A light glow does the same "lift off the surface" job while
       actually being visible, and helps this read as a distinct object. */
    box-shadow: 0 25px 60px rgba(var(--color-ink-deep-rgb), 0.4), 0 0 55px rgba(var(--color-white-rgb), 0.16);
    overflow: hidden;
    transform: translateZ(var(--ez, 0px)) translate(var(--cta-mx, 0px), var(--cta-my, 0px)) rotate(var(--rot-live, 0deg));
    will-change: transform;
}

.cta-page-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    background: rgba(var(--color-white-rgb),0.04);
    border-bottom: 1px solid rgba(var(--color-white-rgb),0.08);
}

.cta-page-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(var(--color-white-rgb),0.25);
}

.cta-page-url {
    margin-left: 0.5rem;
    font-size: 0.68rem;
    color: rgba(var(--color-white-rgb),0.55);
    background: rgba(var(--color-white-rgb),0.07);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.cta-page-body {
    padding: 1rem;
}

.cta-page-block-lg {
    height: 2.6rem;
    border-radius: 0.6rem;
    background: var(--gradient-brand);
    opacity: 0.75;
    margin-bottom: 0.7rem;
}

.cta-page-line {
    height: 8px;
    border-radius: 999px;
    background: rgba(var(--color-white-rgb),0.14);
    margin-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .cta-scroller {
        height: auto;
    }

    .cta-sticky {
        position: static;
        height: auto;
        padding: 4rem 0;
    }
}

@media (max-width: 860px) {
    .cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cta-copy .section-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .cta-scene {
        max-width: 280px;
        margin-top: 1rem;
    }

    .cta-scroller {
        height: auto;
    }

    .cta-sticky {
        position: static;
        height: auto;
        padding: 3.5rem 0;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero .lead {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        margin-top: 1rem;
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2.5rem;
    }

    .solution-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .hero {
        padding-top: 3.5rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .steps-scroller {
        height: 260vh;
    }

    .steps {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
    }

    .steps-track {
        margin-bottom: 2rem;
    }

    /* Stacked single-column here, all 4 steps sit inside the same
       viewport-height sticky box at once (see .steps-sticky) — the base
       rule above only dims an inactive step to 25% opacity and nudges it
       down slightly, so in practice all 4 already read as "on screen"
       the whole time, just some dimmer than others. Mobile gets a fuller
       reveal instead: fully hidden until reached, then sliding in from
       the left as initScrollSteps (site.js) marks it .is-active, so the
       text builds up one step at a time instead of arriving all at once.
       Only one .step ever carries .is-active here (see initScrollSteps),
       but a plain grid still auto-places every child in its OWN row —
       opacity: 0 hides a step, it doesn't stop it from occupying that
       row's height, so each newly-active step still landed one row
       further down than the last, never in the SAME spot the previous
       one just vanished from. Placing every .step in that same single
       cell (row/column 1) stacks them on top of each other instead, so
       whichever one is currently visible always renders in the exact
       same spot. */
    .steps {
        grid-template-rows: 1fr;
    }

    .step {
        grid-column: 1;
        grid-row: 1;
        opacity: 0;
        transform: translateX(-2rem);
    }

    .step.is-active {
        opacity: 1;
        transform: translateX(0);
    }

    /* A step already shown and scrolled past hides to the right instead
       of the default left (see initScrollSteps in site.js) — otherwise
       it and the next step incoming both animated through the same
       left-side spot at once, looking like one line of text sliding
       over the other instead of the next one cleanly taking its place. */
    .step.is-past {
        opacity: 0;
        transform: translateX(2rem);
    }

    /* Un-hides the floating badges home.css's own @property note (see
       initCtaScene) has nothing to do with — these were unconditionally
       display:none here. .hero already clips overflow (overflow: hidden),
       so nothing here can push a scrollbar; nudging their offsets from
       just outside the mock browser's edge to just inside it is only to
       keep the pill itself from sitting flush against that clip edge. */
    .mock-float-badge {
        display: block;
        right: 0.5rem;
    }

    .mock-float-badge.badge-2 {
        left: 0.5rem;
    }
}

/* ---------- Sobre nós (inside .about-overlay above) ---------- */
/* Merged in from what used to be its own /sobre-nos page — same markup,
   same styles, just living behind a hash overlay instead of a route now.
   min-height was calc(100vh - 4rem) there to leave room for the site nav
   rendered above it; the overlay covers the nav entirely, so this content
   now starts right at the top of the viewport instead. */
.about-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.about-hero {
    background: var(--gradient-dark);
    color: var(--color-white);
    padding: clamp(3rem, 8vh, 5rem) 1.5rem;
    text-align: center;
}

.about-hero-inner {
    max-width: 44rem;
    margin: 0 auto;
}

.about-hero .eyebrow {
    color: var(--color-primary-tint);
}

.about-hero h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.2;
    margin: 0.75rem 0 1.25rem;
}

.about-hero .lead {
    color: rgba(var(--color-white-rgb), 0.78);
    font-size: 1.1rem;
    margin: 0;
}

.about-mission {
    padding: 4rem 1.5rem;
    background: var(--color-bg-alt);
}

.about-mission-inner {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
}

.about-mission-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.14), rgba(var(--color-accent-rgb), 0.14));
    color: var(--color-primary-dark);
    margin-bottom: 1.25rem;
}

.about-mission-icon svg {
    width: 1.8rem;
    height: 1.8rem;
}

.about-mission h2 {
    font-weight: 700;
    margin-bottom: 1rem;
}

.about-mission p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
}

.about-team {
    padding: 5rem 1.5rem;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: 760px;
    margin: 0 auto;
}

.team-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: left;
    transition: box-shadow 0.3s var(--ease);
}

.team-card:hover {
    box-shadow: var(--shadow-soft);
}

.team-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 1rem;
}

.team-card h3 {
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.team-role {
    display: block;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.team-card p {
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

.about-cta {
    text-align: center;
    padding: 4rem 1.5rem 5rem;
}

.about-cta h2 {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.about-cta p {
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
}

@media (max-width: 640px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Site nav (copied from Components/Layout/NavMenu.razor.css) ----------
   index.html is a plain static file, not rendered by Blazor, so it can't
   share that component's scoped stylesheet (bundled into
   GeradorDeSites.styles.css with a build-generated scope attribute this
   page's markup doesn't carry). Duplicated here on purpose — keep both in
   sync if the nav's look changes. .nav-collapsed never applies on this
   page (that variant is only used on /solicitar/*) but is kept for a
   faithful copy. */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--color-white-rgb), 0.7);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}

.site-nav.is-scrolled {
    box-shadow: 0 8px 24px rgba(var(--shadow-color-nav-rgb), 0.08);
}

.nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    transition: padding 0.35s var(--ease);
}

.site-nav.is-scrolled .nav-inner {
    padding: 0.45rem 1.5rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text) !important;
    text-decoration: none;
    transition: font-size 0.35s var(--ease);
}

.site-nav.is-scrolled .nav-brand {
    font-size: 0.92rem;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    background: var(--gradient-brand);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 800;
    transition: width 0.35s var(--ease), height 0.35s var(--ease);
}

.site-nav.is-scrolled .brand-mark {
    width: 1.7rem;
    height: 1.7rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.nav-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    transition: color 0.2s ease;
}

.nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--gradient-brand);
    transition: width 0.25s var(--ease);
}

.nav-links a:not(.nav-cta):hover {
    color: var(--color-text);
}

.nav-links a:not(.nav-cta):hover::after {
    width: 100%;
}

.nav-links a.nav-cta {
    color: var(--color-white);
}

.nav-cta {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    transition: padding 0.35s var(--ease), font-size 0.35s var(--ease);
}

.site-nav.is-scrolled .nav-cta {
    padding: 0.4rem 0.95rem;
    font-size: 0.88rem;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav.nav-collapsed .menu-toggle {
    display: flex;
}

.site-nav.nav-collapsed .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(var(--color-white-rgb), 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease);
}

.site-nav.nav-collapsed .nav-links.is-open {
    max-height: 22rem;
}

.site-nav.nav-collapsed .nav-links a {
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--color-border);
}

.site-nav.nav-collapsed .nav-links a:first-child {
    border-top: none;
}

.site-nav.nav-collapsed .nav-links a:not(.nav-cta)::after {
    display: none;
}

.site-nav.nav-collapsed .nav-cta {
    margin: 1rem 1.5rem;
    text-align: center;
    border-top: none !important;
}

@media (max-width: 860px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(var(--color-white-rgb), 0.98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s var(--ease);
    }

    .nav-links.is-open {
        max-height: 22rem;
    }

    .nav-links a {
        padding: 0.9rem 1.5rem;
        border-top: 1px solid var(--color-border);
    }

    .nav-links a:not(.nav-cta)::after {
        display: none;
    }

    .nav-cta {
        margin: 1rem 1.5rem;
        text-align: center;
        border-top: none !important;
    }
}

/* ---------- Simple footer (copied from Components/Layout/SimpleFooter.razor.css) ----------
   Same reasoning as the nav above — used inside the "Sobre nós" overlay,
   duplicated here rather than shared via Blazor's scoped-CSS bundle. */
.simple-footer {
    background: var(--color-ink);
    color: rgba(var(--color-white-rgb),0.65);
    padding: 2.5rem 1.5rem;
    margin-top: auto;
    border-radius: 1.75rem 1.75rem 0 0;
}

.simple-footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
}

.simple-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
}

.simple-footer .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--gradient-brand);
    font-size: 0.8rem;
    color: var(--color-white);
}

.simple-footer a {
    color: rgba(var(--color-white-rgb),0.75);
    text-decoration: none;
}

.simple-footer a:hover {
    color: var(--color-white);
    text-decoration: underline;
}