/* bento-hub.css — extracted verbatim from src/templates/bento-hub.php (lines 48-347) */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {


        --panel-2:    rgba(255,255,255,0.02);


        --border:     rgba(255,255,255,0.08);
        --border-2:   rgba(255,255,255,0.05);
        --muted:      #6B6B7A;
        --text:       #E8E8EC;
        --max-w:      1280px;
        --gutter:     2.5rem;
    }
    html { scroll-behavior: smooth; }
    body {
        font-family: 'DM Sans', sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3, h4 { font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
    .wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
    .fade-up { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
    .fade-up.visible { opacity: 1; transform: none; }

    /* NAV */
    #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem var(--gutter); background: rgba(10,10,10,0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border); }
    .nav-logo { display: flex; align-items: center; gap: 10px; }
    .logo-wordmark { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.1rem; color: #fff; letter-spacing: -0.02em; }
    .nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; }
    .nav-links a { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.65); padding: 0.4rem 0.9rem; transition: color .2s; }
    .nav-links a:hover { color: #fff; }
    /* .nav-links a (0,1,1) was beating .nav-pill (0,1,0), making the CTA
   white text on a white pill — invisible. Raised specificity. */
    .nav-links a.nav-pill, .nav-pill { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; border: none; border-radius: 100px; font-size: 0.82rem; font-weight: 600; color: #0A0A0A; cursor: pointer; background: #fff; transition: all .2s; }
    .nav-pill:hover { transform: translateY(-1px); background: #f0f0f0; }
    @media (max-width: 900px) { .nav-links { display: none; } }

    /* HERO */
    .hub-hero {
        position: relative;
        padding: 10rem var(--gutter) 4rem;
        text-align: center;
        overflow: hidden;
    }
    .hub-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 45%),
            radial-gradient(circle at 75% 65%, color-mix(in srgb, var(--secondary) 12%, transparent) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }
    .hub-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
    .hub-eyebrow {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.4rem 0.95rem; border-radius: 100px;
        background: color-mix(in srgb, var(--primary) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
        color: var(--secondary);
        font-family: 'DM Sans', sans-serif;
        font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
        margin-bottom: 1.6rem;
    }
    .hub-eyebrow-dot { width: 6px; height: 6px; border-radius: 100px; background: var(--secondary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--secondary) 20%, transparent); }
    .hub-title {
        font-size: clamp(2.8rem, 6vw, 5rem);
        margin: 0 auto 1.4rem;
        color: #fff;
        background: linear-gradient(180deg, #fff 0%, #B8B8C2 100%);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .hub-subtitle {
        font-size: clamp(1rem, 1.5vw, 1.2rem);
        color: rgba(255,255,255,0.55);
        max-width: 660px;
        margin: 0 auto;
        line-height: 1.6;
    }
    .hub-intro { max-width: 720px; margin: 2rem auto 0; font-size: 0.98rem; color: rgba(255,255,255,0.5); line-height: 1.75; }

    /* BENTO */
    .hub-bento { padding: 3.5rem var(--gutter) 6rem; }
    .hub-bento-inner { max-width: var(--max-w); margin: 0 auto; }
    .hub-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 160px;
        gap: 1rem;
    }

    .hub-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 22px;
        padding: 1.6rem;
        text-decoration: none;
        color: #fff;
        overflow: hidden;
        transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
        isolation: isolate; /* for ::before pseudo */
    }
    .hub-tile::before {
        /* per-card accent halo */
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, color-mix(in srgb, var(--card-accent, var(--primary)) 18%, transparent) 0%, transparent 55%);
        opacity: 0.6;
        pointer-events: none;
        z-index: -1;
        transition: opacity 0.3s ease;
    }
    .hub-tile:hover {
        border-color: color-mix(in srgb, var(--card-accent, var(--primary)) 60%, transparent);
        transform: translateY(-4px);
        box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--card-accent, var(--primary)) 25%, transparent);
    }
    .hub-tile:hover::before { opacity: 1; }

    /* Background variants */
    .hub-tile.bg-gradient {
        background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--primary)) 18%, var(--panel)) 0%, var(--panel) 70%);
    }
    .hub-tile.bg-mesh::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--card-accent, var(--primary)) 30%, transparent) 0%, transparent 40%),
            radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--card-accent, var(--primary)) 20%, transparent) 0%, transparent 45%);
        opacity: 0.55;
        pointer-events: none;
        z-index: -1;
    }
    .hub-tile.bg-solid {
        background: color-mix(in srgb, var(--card-accent, var(--primary)) 15%, var(--panel));
    }

    /* Sizes */
    .hub-tile.size-hero   { grid-column: span 4; grid-row: span 2; }
    .hub-tile.size-feature{ grid-column: span 3; grid-row: span 2; }
    .hub-tile.size-wide   { grid-column: span 3; grid-row: span 1; }
    .hub-tile.size-tall   { grid-column: span 2; grid-row: span 2; }
    .hub-tile.size-square { grid-column: span 2; grid-row: span 1; }
    .hub-tile.size-banner { grid-column: span 6; grid-row: span 1; }

    .hub-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
    .hub-tile-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--card-accent, var(--primary)) 20%, rgba(255,255,255,0.03));
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--primary)) 30%, var(--border));
        font-size: 1.35rem;
        line-height: 1;
    }
    .hub-tile.size-hero .hub-tile-icon, .hub-tile.size-feature .hub-tile-icon { width: 52px; height: 52px; font-size: 1.55rem; }

    .hub-tile-body {
        margin-top: auto;
        padding-top: 0.6rem;
    }
    .hub-tile-tagline {
        font-family: 'DM Sans', sans-serif;
        font-size: 0.7rem; font-weight: 600;
        letter-spacing: 0.14em; text-transform: uppercase;
        color: color-mix(in srgb, var(--card-accent, var(--primary)) 90%, white);
        margin-bottom: 0.5rem;
    }
    .hub-tile-name {
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: 1.15rem;
        color: #fff;
        letter-spacing: -0.025em;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }
    .hub-tile.size-hero .hub-tile-name { font-size: 1.85rem; }
    .hub-tile.size-feature .hub-tile-name { font-size: 1.6rem; }
    .hub-tile.size-banner .hub-tile-name { font-size: 1.45rem; }

    .hub-tile-desc {
        font-size: 0.88rem;
        color: rgba(255,255,255,0.55);
        line-height: 1.55;
        max-width: 36ch;
    }
    .hub-tile.size-hero .hub-tile-desc { font-size: 0.98rem; max-width: 48ch; }
    .hub-tile.size-feature .hub-tile-desc { font-size: 0.93rem; max-width: 42ch; }

    .hub-tile-arrow {
        position: absolute;
        top: 1.4rem; right: 1.4rem;
        width: 32px; height: 32px;
        border-radius: 100px;
        background: rgba(255,255,255,0.04);
        border: 1px solid var(--border);
        display: flex; align-items: center; justify-content: center;
        color: rgba(255,255,255,0.5);
        font-size: 0.95rem;
        transition: all 0.25s ease;
    }
    .hub-tile:hover .hub-tile-arrow {
        background: var(--card-accent, var(--primary));
        border-color: var(--card-accent, var(--primary));
        color: #fff;
        transform: rotate(-45deg);
    }

    .hub-tile-status {
        position: absolute;
        top: 1.4rem; right: 1.4rem;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.6rem; font-weight: 700;
        letter-spacing: 0.12em; text-transform: uppercase;
        padding: 0.25rem 0.55rem; border-radius: 100px;
        background: rgba(255,255,255,0.05);
        color: rgba(255,255,255,0.55);
        border: 1px solid var(--border);
    }
    .hub-tile-status.is-new  { color: #4ade80; background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.30); }
    .hub-tile-status.is-soon { color: #fbbf24; background: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.30); }
    .hub-tile-status.is-live { color: #4ade80; background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.30); }
    /* When card has status, hide the arrow */
    .hub-tile-has-status .hub-tile-arrow { display: none; }

    /* Responsive */
    @media (max-width: 1024px) {
        .hub-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
        .hub-tile.size-hero    { grid-column: span 4; grid-row: span 2; }
        .hub-tile.size-feature { grid-column: span 4; grid-row: span 2; }
        .hub-tile.size-wide    { grid-column: span 4; grid-row: span 1; }
        .hub-tile.size-tall    { grid-column: span 2; grid-row: span 2; }
        .hub-tile.size-square  { grid-column: span 2; grid-row: span 1; }
        .hub-tile.size-banner  { grid-column: span 4; grid-row: span 1; }
    }
    @media (max-width: 640px) {
        .hub-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
        .hub-tile { min-height: 220px; }
        .hub-tile.size-hero, .hub-tile.size-feature, .hub-tile.size-wide,
        .hub-tile.size-tall, .hub-tile.size-square, .hub-tile.size-banner {
            grid-column: span 1; grid-row: span 1;
        }
    }

    /* CTA */
    .hub-cta {
        padding: 6rem var(--gutter) 7rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        border-top: 1px solid var(--border);
    }
    .hub-cta::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 55%);
        pointer-events: none;
    }
    .hub-cta-inner { position: relative; max-width: 680px; margin: 0 auto; }
    .hub-cta-eyebrow {
        font-family: 'DM Sans', sans-serif;
        font-size: 0.7rem; font-weight: 700;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: var(--secondary);
        display: block;
        margin-bottom: 1.4rem;
    }
    .hub-cta h2 {
        font-size: clamp(2rem, 4vw, 3rem);
        margin-bottom: 1.2rem;
        color: #fff;
    }
    .hub-cta p { font-size: 1rem; color: rgba(255,255,255,0.55); margin: 0 auto 2.4rem; max-width: 540px; }
    .hub-cta-btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 16px 36px;
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        color: #fff; border: none; border-radius: 100px;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.95rem; font-weight: 700;
        cursor: pointer;
        transition: transform .2s, box-shadow .2s;
        box-shadow: 0 8px 30px color-mix(in srgb, var(--primary) 30%, transparent);
    }
    .hub-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px color-mix(in srgb, var(--primary) 50%, transparent); }

    /* FOOTER */
    .hub-foot { padding: 2.5rem var(--gutter); text-align: center; border-top: 1px solid var(--border); color: #555; font-size: 0.85rem; }
    .hub-foot a { color: rgba(255,255,255,0.5); margin: 0 0.5rem; }