/* ================================================
   TRIDENT NORTHSTAR - Digital Business Card Styles
   ================================================ */

/* Reset & Body */
.card-page {
    /* Card-scoped palette override — turns the whole card crimson/black */
    --color-accent: #DC2626;
    --color-accent-glow: rgba(220, 38, 38, 0.35);
    --color-gold: #EF4444;

    /* Layered background: dark overlay + Trident Northstar banner behind everything.
       On narrow (portrait / mobile) viewports we `cover` so the artwork fills
       immersively (showing the central slice — hub network + ship). On wide
       (desktop) viewports we switch to `contain` so the whole ultra-wide
       banner reads. Overlay is softened so the artwork bleeds through. */
    background-color: #000;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(10, 3, 3, 0.7) 45%, rgba(0, 0, 0, 0.85) 100%),
        url('backdrop.jpg');
    background-size: 100% 100%, cover;
    /* Anchor the backdrop to the left so the hub map stays on-screen on
       portrait mobile viewports (paired with the SVG overlay's xMinYMid
       slice preserveAspectRatio so both scale identically). */
    background-position: center, left center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;

    min-height: 100vh;
    padding: var(--space-4);
    color: var(--color-white);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.card-page * { box-sizing: border-box; }

.card-container {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-6) 0 var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* -------- Hero -------- */
.card-hero {
    position: relative;
    text-align: center;
    padding: var(--space-8) var(--space-6) var(--space-6);
    background: linear-gradient(160deg, #0d0303 0%, #1a0707 45%, #3a0d0d 100%);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: var(--radius-xl);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(220, 38, 38, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    animation: hero-glow 6s ease-in-out infinite;
}

@keyframes hero-glow {
    0%, 100% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.6),
            0 0 40px rgba(220, 38, 38, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    50% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.6),
            0 0 70px rgba(220, 38, 38, 0.4),
            0 0 20px rgba(239, 68, 68, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }
}

.card-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--color-gold) 0%,
        var(--color-accent) 30%,
        #ffffff 50%,
        var(--color-accent) 70%,
        var(--color-gold) 100%
    );
    background-size: 220% 100%;
    animation: shimmer-strip 3.5s linear infinite;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

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

.card-hero::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.card-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 999px;
    position: relative;
    z-index: 1;
}

.card-brand-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.card-brand-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.card-brand-division {
    color: var(--color-accent);
    margin-left: 4px;
}

.card-brand-caption {
    display: block;
    margin: var(--space-2) 0 var(--space-6);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    position: relative;
    z-index: 1;
}

.card-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    background: linear-gradient(135deg, #1a0505 0%, var(--color-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(239, 68, 68, 0.45);
    box-shadow:
        0 12px 40px rgba(220, 38, 38, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.card-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.card-avatar-initials {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.card-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.01em;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 var(--space-2);
    position: relative;
    z-index: 1;
}

.card-company {
    font-size: 0.875rem;
    color: var(--color-medium-gray);
    margin: 0;
    position: relative;
    z-index: 1;
}

.card-callsign {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) auto 0;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 999px;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.15);
    animation: callsign-pulse 3s ease-in-out infinite;
}

@keyframes callsign-pulse {
    0%, 100% {
        box-shadow: 0 4px 18px rgba(239, 68, 68, 0.15);
        border-color: rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 4px 22px rgba(239, 68, 68, 0.4), 0 0 15px rgba(220, 38, 38, 0.35);
        border-color: rgba(239, 68, 68, 0.8);
    }
}

.card-callsign i {
    animation: callsign-icon-pulse 2s ease-in-out infinite;
}

@keyframes callsign-icon-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(239, 68, 68, 0)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8)); }
}

.card-callsign i {
    color: var(--color-gold);
    font-size: 0.8rem;
}

.card-callsign-label {
    font-size: 0.65rem;
    color: var(--color-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
}

.card-callsign-value {
    font-size: 0.85rem;
    color: var(--color-gold);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* -------- Primary Save Button -------- */
.card-cta { padding: 0; }

.card-save-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(135deg, var(--color-gold) 0%, #991B1B 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow:
        0 10px 30px rgba(220, 38, 38, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.card-save-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 15px 40px rgba(239, 68, 68, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.card-save-btn:active { transform: translateY(0); }

.card-save-btn i { font-size: 1.125rem; }

/* -------- Quick Actions: Full-Width Rows -------- */
.card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card-action {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: rgba(15, 8, 8, 0.7);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-white);
    text-decoration: none;
    transition: all var(--transition-base);
    text-align: left;
    min-width: 0;
}

.card-action:hover {
    background: rgba(30, 12, 12, 0.85);
    border-color: var(--color-accent);
    transform: translateX(2px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.12);
}

.card-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a0808 0%, #2a0f0f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.card-action-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.card-action-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-medium-gray);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
}

.card-action-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: 0.01em;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.card-action:hover .card-action-value {
    color: var(--color-accent);
}

.card-action-chevron {
    color: var(--color-dark-gray);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: transform var(--transition-base), color var(--transition-base);
}

.card-action:hover .card-action-chevron {
    color: var(--color-accent);
    transform: translateX(3px);
}

/* -------- Section -------- */
.card-section,
.card-tagline,
.card-qr-section {
    padding: var(--space-5) var(--space-5);
    background: rgba(10, 5, 5, 0.75);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--radius-lg);
}

.card-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 0 var(--space-4);
}

/* -------- Detail List -------- */
.card-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.card-details li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.card-detail-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.15);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.card-detail-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.card-detail-label {
    font-size: 0.7rem;
    color: var(--color-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.card-detail-value {
    font-size: 0.95rem;
    color: var(--color-white);
    text-decoration: none;
    font-weight: 500;
    word-break: break-word;
}

a.card-detail-value:hover { color: var(--color-accent); }

/* -------- Tagline Card -------- */
.card-tagline { text-align: center; }

.card-tagline-headline {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin: 0 0 var(--space-1);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.card-tagline-sub {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin: 0 0 var(--space-4);
    background: linear-gradient(
        105deg,
        var(--color-accent) 0%,
        var(--color-accent) 40%,
        #ffe1e1 50%,
        var(--color-accent) 60%,
        var(--color-accent) 100%
    );
    background-size: 280% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: text-shimmer 4.5s linear infinite;
    filter: drop-shadow(0 2px 10px rgba(220, 38, 38, 0.4));
}

@keyframes text-shimmer {
    from { background-position: 280% 50%; }
    to { background-position: -100% 50%; }
}

.card-tagline-tag {
    display: inline-block;
    padding: var(--space-3) 0 0;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    margin: 0 0 var(--space-4);
    position: relative;
}

.card-tagline-tag::before,
.card-tagline-tag::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.card-tagline-tag::before { left: -50px; }
.card-tagline-tag::after  { right: -50px; }

/* -------- Operational Hubs -------- */
.card-hubs {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(220, 38, 38, 0.2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.card-hub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #FCA5A5;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
    animation: hub-ping 6s ease-in-out infinite;
}

.card-hub i {
    color: var(--color-accent);
    font-size: 0.6rem;
}

.card-hub:nth-child(1) { animation-delay: 0s; }
.card-hub:nth-child(2) { animation-delay: 0.35s; }
.card-hub:nth-child(3) { animation-delay: 0.7s; }
.card-hub:nth-child(4) { animation-delay: 1.05s; }
.card-hub:nth-child(5) { animation-delay: 1.4s; }
.card-hub:nth-child(6) { animation-delay: 1.75s; }
.card-hub:nth-child(7) { animation-delay: 2.1s; }

@keyframes hub-ping {
    0%, 40%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
        background: rgba(220, 38, 38, 0.1);
        border-color: rgba(220, 38, 38, 0.35);
        color: #FCA5A5;
    }
    10% {
        box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.2), 0 0 18px rgba(220, 38, 38, 0.5);
        background: rgba(220, 38, 38, 0.3);
        border-color: rgba(220, 38, 38, 0.8);
        color: #ffffff;
    }
}

/* -------- QR Section -------- */
.card-qr-section { text-align: center; }

.card-qr-help {
    font-size: 0.85rem;
    color: var(--color-medium-gray);
    margin: 0 0 var(--space-4);
}

.card-qr {
    display: inline-block;
    padding: var(--space-4);
    background: var(--color-white);
    border-radius: var(--radius-md);
    margin: 0 auto var(--space-4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    min-width: 200px;
    min-height: 200px;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    animation: qr-glow 5s ease-in-out infinite;
}

.card-qr:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 50px rgba(220, 38, 38, 0.55);
    transform: scale(1.03);
}

@keyframes qr-glow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
    50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(220, 38, 38, 0.35); }
}

.card-qr svg,
.card-qr img {
    display: block;
    width: 200px;
    height: 200px;
}

.card-qr-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.card-qr-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 18px;
    background: transparent;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.card-qr-action:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: var(--color-accent);
}

.card-qr-action.copied {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #6ee7b7;
}

/* -------- Footer -------- */
.card-footer {
    text-align: center;
    padding: var(--space-4) 0 0;
    color: var(--color-dark-gray);
    font-size: 0.75rem;
}

.card-footer a {
    color: var(--color-medium-gray);
    text-decoration: none;
}

.card-footer a:hover { color: var(--color-accent); }

/* -------- Print mode for the QR -------- */
@media print {
    body { background: white !important; }
    .card-hero,
    .card-section,
    .card-tagline,
    .card-cta,
    .card-actions,
    .card-qr-actions,
    .card-footer { display: none !important; }

    .card-qr-section {
        background: white !important;
        border: none !important;
        padding: 0 !important;
    }

    .card-qr {
        box-shadow: none !important;
        padding: 0 !important;
    }

    .card-qr svg,
    .card-qr img {
        width: 300px !important;
        height: 300px !important;
    }
}

/* -------- Animated Hub Network Overlay (injected by cards.js) --------
   Full-screen SVG overlay pinned behind the card content. Uses the same
   viewBox as the backdrop banner (2508x627) with preserveAspectRatio
   "xMidYMid meet" (contain) so on wide viewports the hub dots align with
   the map hubs drawn into the backdrop image. */
.hub-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
    mix-blend-mode: screen;
}

/* Lift the card content above the overlay */
.card-layout-with-org,
.card-container {
    position: relative;
    z-index: 2;
}

/* Core hub dot: solid bright center with strong red glow */
.hub-dot {
    fill: #ff4d4d;
    filter: drop-shadow(0 0 6px rgba(255, 60, 60, 1))
            drop-shadow(0 0 14px rgba(220, 38, 38, 0.9));
    animation: hub-dot-glow 2s ease-in-out infinite;
}

@keyframes hub-dot-glow {
    0%, 100% {
        opacity: 0.9;
        filter: drop-shadow(0 0 6px rgba(255, 60, 60, 0.9))
                drop-shadow(0 0 12px rgba(220, 38, 38, 0.7));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(255, 90, 90, 1))
                drop-shadow(0 0 22px rgba(220, 38, 38, 1))
                drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
    }
}

/* Expanding pulse ring behind each dot */
.hub-pulse {
    fill: none;
    stroke: rgba(220, 38, 38, 0.85);
    stroke-width: 2;
    transform-origin: center;
    transform-box: fill-box;
    animation: hub-pulse-expand 2.8s ease-out infinite;
}

@keyframes hub-pulse-expand {
    0% {
        r: 5;
        stroke-opacity: 0.9;
        stroke-width: 2.5;
    }
    100% {
        r: 40;
        stroke-opacity: 0;
        stroke-width: 0.4;
    }
}

/* Reduced motion: freeze the overlay animations */
@media (prefers-reduced-motion: reduce) {
    .hub-overlay .hub-dot,
    .hub-overlay .hub-pulse {
        animation: none !important;
    }
}

/* ============================================================
   FULL-WIDTH TREE ORG CHART (option 1: as a card section)
   ============================================================ */

.card-tree-section {
    padding: var(--space-5) var(--space-3);
    background: rgba(10, 5, 5, 0.75);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--radius-lg);
}

.card-tree-title {
    text-align: center;
    color: var(--color-gold);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(220, 38, 38, 0.2);
}

.tree-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* A row of one or more nodes at the same tier */
.tree-tier {
    display: flex;
    justify-content: center;
    gap: 8px;
    position: relative;
    padding-top: 24px;
    width: 100%;
}

.tree-tier.no-connector { padding-top: 0; }

/* Vertical drop line from center of the parent tier down to horizontal bar */
.tree-tier:not(.no-connector)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 12px;
    background: var(--color-accent);
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}

/* Horizontal bar spanning the children — width based on number of children */
.tree-tier.has-2::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--color-accent);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}

.tree-tier.has-3::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 16.67%;
    right: 16.67%;
    height: 2px;
    background: var(--color-accent);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}

/* Dotted variant for advisory branches */
.tree-tier.dotted::before {
    background: none;
    box-shadow: none;
    border-left: 2px dashed rgba(220, 38, 38, 0.75);
    width: 0;
}

.tree-tier.dotted::after {
    background: none;
    box-shadow: none;
    border-top: 2px dashed rgba(220, 38, 38, 0.75);
    height: 0;
}

/* Small drop line from horizontal bar down to each child node */
.tree-tier:not(.no-connector) > .tree-node::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 2px;
    height: 12px;
    background: var(--color-accent);
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}

.tree-tier.dotted > .tree-node::before {
    background: none;
    box-shadow: none;
    border-left: 2px dashed rgba(220, 38, 38, 0.75);
    width: 0;
}

/* The individual node card */
.tree-node {
    flex: 1 1 0;
    min-width: 0;
    max-width: 155px;
    position: relative;
    padding: var(--space-3) 8px;
    background: rgba(30, 12, 12, 0.55);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-white);
    transition: all var(--transition-base);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

a.tree-node:hover {
    background: rgba(60, 15, 15, 0.85);
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.25);
}

.tree-node-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(220, 38, 38, 0.5);
    background: linear-gradient(135deg, #1a0505 0%, var(--color-accent) 100%);
    flex-shrink: 0;
}

.tree-node-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tree-node-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    display: block;
    word-break: break-word;
}

.tree-node-role {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.3;
    display: block;
}

.tree-node.advisory {
    border-style: dashed;
    border-color: rgba(220, 38, 38, 0.5);
}

.tree-node.advisory .tree-node-role { color: var(--color-gold); }

.tree-node.is-current {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.22) 0%, rgba(139, 27, 27, 0.15) 100%);
    border-color: var(--color-gold);
    border-style: solid;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.35);
    cursor: default;
}

.tree-node.is-current::after {
    content: 'YOU';
    position: absolute;
    top: -8px;
    right: 4px;
    padding: 2px 6px;
    background: var(--color-gold);
    color: #1a0505;
    font-size: 0.45rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    border-radius: 3px;
    z-index: 2;
}

/* Section separator between corporate and advisory tiers */
.tree-section-label {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px dashed rgba(220, 38, 38, 0.35);
    font-size: 0.55rem;
    color: var(--color-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    text-align: center;
    width: 100%;
}

/* Mobile: shrink nodes further */
@media (max-width: 420px) {
    .tree-node-avatar { width: 36px; height: 36px; }
    .tree-node-name { font-size: 0.62rem; }
    .tree-node-role { font-size: 0.5rem; }
    .tree-tier { gap: 4px; }
}

/* -------- Org Chart (Ramon's page — chain of command) --------
   Rendered as a side aside on the right of the card container on desktop.
   Stacks below the card on mobile. Each node is a link to that person's
   business-card page; the .is-current node is Ramon himself. */
.card-layout-with-org {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.card-layout-with-org .card-container {
    flex: 0 1 480px;
    max-width: 480px;
    margin: 0;
}

.org-chart {
    flex: 0 0 260px;
    width: 260px;
    padding: var(--space-6) var(--space-5);
    background: rgba(10, 5, 5, 0.85);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-xl);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(220, 38, 38, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: sticky;
    top: var(--space-4);
    align-self: flex-start;
}

.org-chart-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    margin-bottom: var(--space-4);
    text-align: center;
    display: block;
    position: relative;
    padding-bottom: var(--space-3);
}

.org-chart-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.org-node {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(30, 12, 12, 0.55);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-white);
    transition: all var(--transition-base);
    width: 100%;
}

a.org-node:hover {
    background: rgba(60, 15, 15, 0.85);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);
}

.org-node.is-current {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.18) 0%, rgba(139, 27, 27, 0.12) 100%);
    border-color: var(--color-gold);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.28);
    cursor: default;
    position: relative;
}

.org-node.is-current::before {
    content: 'YOU ARE HERE';
    position: absolute;
    top: -8px;
    right: 8px;
    padding: 2px 6px;
    background: var(--color-gold);
    color: #1a0505;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    border-radius: 4px;
    white-space: nowrap;
}

.org-node-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(220, 38, 38, 0.5);
    background: linear-gradient(135deg, #1a0505 0%, var(--color-accent) 100%);
    flex-shrink: 0;
}

.org-node-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.org-node-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.org-node-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    display: block;
}

.org-node-role {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.3;
    display: block;
}

.org-node.is-current .org-node-role {
    color: var(--color-gold);
}

.org-connector {
    width: 2px;
    height: 28px;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.7) 0%, rgba(220, 38, 38, 0.2) 100%);
    position: relative;
    margin: 4px 0;
}

.org-connector::before,
.org-connector::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 5px;
    height: 5px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.7);
}

.org-connector::before { top: 0; transform: translate(-50%, -50%); }
.org-connector::after  { bottom: 0; transform: translate(-50%, 50%); }

/* Dotted connector — used for advisory / direct-to-CEO reporting lines */
.org-connector.dotted {
    width: 0;
    height: 32px;
    background: none;
    border-left: 2px dashed rgba(220, 38, 38, 0.6);
    margin: 4px 0 4px calc(50% - 1px);
    align-self: flex-start;
    box-shadow: none;
}

.org-connector.dotted::before,
.org-connector.dotted::after {
    left: -1px;
    background: var(--color-gold);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

/* Section separator label inside the org chart (e.g., "Direct Advisory to CEO") */
.org-section-label {
    display: block;
    width: 100%;
    margin: var(--space-3) 0 var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px dashed rgba(220, 38, 38, 0.35);
    font-size: 0.55rem;
    color: var(--color-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    text-align: center;
}

/* Advisory nodes get a dashed border to reinforce the dotted-line reporting */
.org-node.advisory {
    border-style: dashed;
    border-color: rgba(220, 38, 38, 0.5);
}

/* Peer separator — used between advisory nodes at the same tier to show
   they're siblings (both report to CEO independently), not parent/child. */
.org-peer-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: var(--space-3) 0;
    font-size: 0.5rem;
    color: var(--color-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-weight: 700;
    text-align: center;
}

.org-peer-divider::before,
.org-peer-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.4), transparent);
}

/* Mobile / narrow: stack org chart below card */
@media (max-width: 900px) {
    .card-layout-with-org {
        flex-direction: column;
        align-items: center;
    }

    .org-chart {
        position: static;
        width: 100%;
        max-width: 480px;
        flex: 0 0 auto;
    }
}

/* -------- Scroll Reveal (JS adds .is-visible when section enters viewport) -------- */
.card-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.card-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* -------- Reduced-motion escape hatch -------- */
@media (prefers-reduced-motion: reduce) {
    .card-hero,
    .card-hero::before,
    .card-callsign,
    .card-callsign i,
    .card-tagline-sub,
    .card-hub,
    .card-qr {
        animation: none !important;
    }

    .card-tagline-sub {
        background: none !important;
        color: var(--color-accent) !important;
        -webkit-text-fill-color: var(--color-accent) !important;
    }

    .card-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* -------- Mobile tweaks -------- */
@media (max-width: 380px) {
    .card-action { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
    .card-action-icon { width: 38px; height: 38px; font-size: 0.95rem; }
    .card-action-value { font-size: 0.875rem; }
    .card-name { font-size: 1.4rem; }
    .card-avatar { width: 100px; height: 100px; }
    .card-avatar-initials { font-size: 2rem; }
}