/* ═══════════════════════════════════════════════════════════════
   JMAC Web — Hero Readability System
   Option A+C: Glass Panel + Text Glow + Borders
   Option B: Adaptive Inverse Text (CSS @property hue tracking)
   Hero showcase card, responsive breakpoints.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero Glass Panel (Option A) ─────────────────────────────── */
.hero-glass {
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    .hero-glass { padding: 2rem 1.25rem; border-radius: 1rem; }
}

/* ── Hero Title Text Shadow (Option C) ───────────────────────── */
.hero-title {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5),
                 0 0 40px rgba(0, 0, 0, 0.3);
    word-break: keep-all;
    overflow-wrap: normal;
}

/* ── Hero Responsive — Narrow desktop (split still active) ───── */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hero-title.display-3 { font-size: 2.6rem; }
}

/* ── Hero Responsive — Tablet (split layout gives ~50% width) ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-title.display-3 { font-size: 2.4rem; }

    .hero-trust-badges {
        font-size: 0.7rem !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }

    .hero-btn.btn-lg {
        font-size: 0.85rem;
        padding: 0.5rem 1.1rem;
    }
}

/* ── Hero Chat Wrapper ────────────────────────────────────────── */
.hero-chat-wrapper {
    width: 100%;
    max-width: 560px;
}

/* ── Hero Responsive — Mobile ────────────────────────────────── */
@media (max-width: 575.98px) {
    .hero-title.display-3 {
        font-size: 2.1rem;
        line-height: 1.15;
    }

    .hero-subtitle.lead {
        font-size: 0.92rem;
        margin-left: auto;
        margin-right: auto;
    }

    .split-section[style*="min-height"] { min-height: auto !important; }

    .hero-btn.btn-lg {
        font-size: 0.85rem;
        padding: 0.5rem 1.1rem;
    }

    .hero-trust-badges {
        font-size: 0.7rem !important;
        gap: 0.75rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .hero-marquee { margin-top: 1.5rem !important; }

    /* Center the chat wrapper on mobile */
    .hero-chat-wrapper {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Hero Responsive — Small tablets ─────────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-title.display-3 { font-size: 2.4rem; }

    .hero-chat-wrapper {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Hero Responsive — Tablets (single column stacked) ───────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-chat-wrapper {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Brighter Gradient Text for Hero (Option C) ──────────────── */
.text-gradient-hero {
    background: linear-gradient(135deg, #c4b5fd, #a78bfa, #38bdf8, #22d3ee);
    background-size: 200% 200%;
    animation: hero-text-shimmer 6s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(167, 139, 250, 0.35))
            drop-shadow(0 0 48px rgba(56, 189, 248, 0.2));
}

@keyframes hero-text-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Hero Tagline (Option C) ─────────────────────────────────── */
.hero-tagline {
    color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.15em;
}

/* ── Hero Subtitle ───────────────────────────────────────────── */
.hero-subtitle {
    color: rgba(255, 255, 255, 0.72) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* ── Hero Button Borders (Option C) ──────────────────────────── */
.hero-btn.btn-glow {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-btn.btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.35);
}

/* ── Hero Chat Active: Dissolve hero content ─────────────────── */
.hero-chat-active .hero-glass {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, max-height 0.6s ease, padding 0.5s ease, margin 0.5s ease;
}

.hero-glass {
    transition: opacity 0.5s ease, max-height 0.6s ease, padding 0.5s ease, margin 0.5s ease;
    max-height: 500px;
}

/* ═══════════════════════════════════════════════════════════════
   HERO READABILITY — Option B: Adaptive Inverse Text
   CSS @property animated hue that shifts opposite to the mesh.
   ═══════════════════════════════════════════════════════════════ */

@property --hero-hue {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
}

.mesh-gradient-tracked {
    background: linear-gradient(-45deg,
        #0f172a, #1e1a3a, #1A6B7A, #5B2D8E, #3D2272, #0f172a);
    background-size: 400% 400%;
    animation: mesh-shift 15s ease infinite, hero-hue-track 15s ease infinite;
}

@keyframes hero-hue-track {
    0%   { --hero-hue: 200deg; }
    25%  { --hero-hue: 60deg; }
    50%  { --hero-hue: 30deg; }
    75%  { --hero-hue: 160deg; }
    100% { --hero-hue: 200deg; }
}

.text-gradient-adaptive {
    background: linear-gradient(135deg,
        hsl(calc(var(--hero-hue) + 180deg) 80% 78%),
        hsl(calc(var(--hero-hue) + 140deg) 70% 72%),
        hsl(calc(var(--hero-hue) + 220deg) 75% 82%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px hsla(calc(var(--hero-hue) + 180deg), 60%, 70%, 0.4));
    transition: filter 0.5s ease;
}

.hero-tagline-adaptive {
    color: hsl(calc(var(--hero-hue) + 180deg) 30% 90%) !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.15em;
    transition: color 1s ease;
}

/* ── Sign In Button — thin white border ──────────────────────── */
.navbar .btn-glow.btn-sm {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ── Adaptive Text Outline (for gradient text on dark mesh) ──── */
.text-gradient-adaptive-outline {
    background: linear-gradient(135deg,
        hsl(calc(var(--hero-hue) + 180deg) 80% 78%),
        hsl(calc(var(--hero-hue) + 140deg) 70% 72%),
        hsl(calc(var(--hero-hue) + 220deg) 75% 82%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px hsla(calc(var(--hero-hue) + 180deg), 60%, 70%, 0.4));
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.35);
    paint-order: stroke fill;
    transition: filter 0.5s ease;
}

/* ── AI Section Button with outline on dark bg ───────────────── */
.btn-glow-outline {
    background: var(--brand-gradient);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-on-brand);
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.btn-glow-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(91, 45, 142, 0.4), var(--glow-accent);
    color: var(--text-on-brand);
    filter: brightness(1.08);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ── Hero Showcase Card (split hero right side) ──────────────── */
.hero-showcase-card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    font-family: var(--font-mono);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero-showcase-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8rem;
    color: #8b949e;
}

.hero-showcase-body {
    padding: 1rem 1.25rem;
    color: #c9d1d9;
    line-height: 1.6;
}

.hero-showcase-body .token-keyword { color: #ff7b72; }
.hero-showcase-body .token-string { color: #a5d6ff; }
.hero-showcase-body .token-comment { color: #8b949e; }
.hero-showcase-body .token-type { color: #d2a8ff; }
.hero-showcase-body .token-method { color: #79c0ff; }

.hero-showcase-footer {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.hero-showcase-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Audit fixes (2026-09-03): CTA note, verified trust badges, community strip, testimonials ── */
.hero-cta-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.62);
}

    .hero-cta-note .hero-cta-link {
        color: inherit;
        text-decoration: underline dotted;
        text-underline-offset: 3px;
    }

        .hero-cta-note .hero-cta-link:hover {
            color: #fff;
        }

.trust-badge-link {
    color: inherit;
    text-decoration: none;
}

    .trust-badge-link:hover {
        color: #fff;
        text-decoration: underline;
    }

.trust-badge-verified {
    color: #34d399;
    font-size: 0.75em;
}

.community-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 1.1rem;
    padding: 0.9rem 0 0.2rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.community-strip-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-accent, #7c3aed);
}

.community-strip-sep {
    width: 1px;
    height: 0.9rem;
    background: color-mix(in srgb, var(--brand-accent, #7c3aed) 35%, transparent);
}

.community-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    opacity: 0.85;
    transition: opacity 0.2s ease, color 0.2s ease;
}

    .community-link:hover {
        opacity: 1;
        color: var(--text-primary) !important;
    }

    .community-link .bi {
        font-size: 0.85rem;
        color: var(--brand-accent, #7c3aed);
    }

@media (max-width: 575.98px) {
    .community-strip-sep { display: none; }
}

.testimonial-photo {
    object-fit: cover;
    border: 3px solid rgba(20, 201, 166, 0.5);
    box-shadow: 0 0 18px rgba(20, 201, 166, 0.35);
}

.testimonial-card {
    box-shadow: 0 0 28px rgba(20, 201, 166, 0.12), 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.value-anchor {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.08);
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
}

/* ── About: engineering team cards ── */
.team-card { overflow: hidden; }

.team-photo {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* ── Homepage hero showcase deck (HeroShowcaseDeck.razor) ── */
.deck-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 560 / 520;
    margin: 0 auto;
    isolation: isolate;
}

.deck-plate {
    position: absolute;
    inset: -6% -4%;
    width: 108%;
    height: 112%;
    z-index: 0;
    pointer-events: none;
}

.deck-links path {
    stroke: rgba(167, 139, 250, 0.38);
    stroke-dasharray: 6 10;
    animation: deck-dash 7s linear infinite;
}

.deck-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: deck-ping 3.6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes deck-dash { to { stroke-dashoffset: -160; } }

@keyframes deck-ping {
    0%, 100% { transform: scale(1); opacity: 0.12; }
    45% { transform: scale(1.45); opacity: 0.28; }
}

.deck-card {
    position: absolute;
    margin: 0;
    z-index: 2;
    opacity: 0;
    transform: translateY(40px) rotate(0deg) scale(0.82);
    animation: deck-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1.12) var(--delay, 0s) both;
    will-change: transform, opacity;
}

    .deck-card img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0.7rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: #0f1a2b;
        box-shadow:
            0 1.1rem 2.4rem rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(124, 58, 237, 0.18),
            0 -0.4rem 1.6rem rgba(20, 201, 166, 0.08);
        animation: deck-float 7s ease-in-out infinite;
        animation-delay: calc(var(--delay, 0s) + 0.9s);
    }

.deck-card-front { z-index: 4; }

    .deck-card-front img {
        border-color: rgba(20, 201, 166, 0.55);
        box-shadow:
            0 1.4rem 3rem rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(20, 201, 166, 0.25),
            0 0 2.4rem rgba(20, 201, 166, 0.18);
    }

.deck-c-portfolio { left: 1.8%;  top: 5.8%;  width: 60.7%; }
.deck-c-security  { left: 71.4%; top: 1.9%;  width: 21.4%; }
.deck-c-deploys   { left: 44.6%; top: 17.3%; width: 17.9%; }
.deck-c-journey   { left: 5.4%;  top: 36.5%; width: 89.3%; }
.deck-c-tokens    { left: 3%;    top: 58%;   width: 46%; }
.deck-c-cost      { left: 51%;   top: 64%;   width: 46%; }

@keyframes deck-in {
    from { opacity: 0; transform: translateY(40px) rotate(0deg) scale(0.82); }
    to   { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)) scale(1); }
}

@keyframes deck-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.deck-ribbon {
    position: absolute;
    left: 17%;
    top: 84.6%;
    width: 66%;
    z-index: 5;
    padding: 0.55rem 0.8rem 0.65rem;
    border-radius: 0.8rem;
    background: rgba(12, 20, 36, 0.86);
    border: 1px solid rgba(167, 139, 250, 0.35);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    opacity: 0;
    animation: deck-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1.12) var(--delay, 0s) both;
}

.deck-ribbon-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.4rem;
}

.deck-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: deck-live 2s ease-out infinite;
}

@keyframes deck-live {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
    100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

.deck-steps {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 0.45rem;
    padding: 0;
    white-space: nowrap;
}

    .deck-steps li {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 600;
    }

    .deck-steps li.done { color: #34d399; }
    .deck-steps li.active { color: #c4b5fd; }
    .deck-steps li.active .bi { animation: deck-spin 3s linear infinite; }

@keyframes deck-spin { to { transform: rotate(360deg); } }

.deck-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

    .deck-bar span {
        display: block;
        height: 100%;
        width: 62%;
        border-radius: inherit;
        background: linear-gradient(90deg, #14c9a6, #a78bfa);
        background-size: 200% 100%;
        animation: deck-shimmer 3s linear infinite;
    }

@keyframes deck-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .deck-card, .deck-ribbon { animation: none; opacity: 1; transform: rotate(var(--rot, 0deg)); }
    .deck-card img, .deck-ring, .deck-links path, .deck-live-dot, .deck-steps li.active .bi, .deck-bar span { animation: none; }
}

/* ── MapPlateBackdrop.razor — shared decorative city-map plate (also the /listings look) ── */
.map-plate { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.map-plate svg { width: 100%; height: 100%; display: block; }
.map-plate::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 42% at 30% 60%, rgba(20, 201, 166, 0.14), transparent 70%),
        linear-gradient(to bottom, rgba(8, 20, 32, 0.6) 0%, rgba(8, 20, 32, 0.18) 40%, rgba(8, 20, 32, 0.88) 100%);
}
.map-plate-pin { animation: map-plate-ping 3.4s ease-in-out infinite; transform-origin: center; }
.map-plate-pin-2 { animation-delay: 1.1s; }
.map-plate-pin-3 { animation-delay: 2.2s; }
@keyframes map-plate-ping { 0%, 70%, 100% { opacity: 0.75; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .map-plate-pin { animation: none; } }