/* media-hub.css — page-specific styles */

.body{color:var(--muted);font-size:1.05rem;max-width:58ch;margin-top:20px}
.note{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted);letter-spacing:.06em}
.card h3{font-size:1rem;font-weight:600;margin-bottom:8px}
.card p{color:var(--muted);font-size:.92rem}
.card .num{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--steel);letter-spacing:.2em;margin-bottom:12px}
.card .impl{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:.85rem;color:var(--text)}
.card .impl::before{content:'RAVEN FORESIGHT → ';font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.14em;color:var(--violet)}
.feat{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center;margin-top:30px;
    border:1px solid var(--line);border-radius:16px;background:rgba(13,20,31,.7);padding:22px;backdrop-filter:blur(8px)}
.feat-meta h3{font-family:'Krona One',sans-serif;font-size:1.18rem;line-height:1.3;margin-bottom:12px}
.feat-meta p{color:var(--muted);font-size:.95rem}
.badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
    color:#0B1220;background:var(--grad);border-radius:99px;padding:5px 13px;margin-bottom:14px;font-weight:600}
.guests{display:flex;align-items:center;gap:10px;margin-top:16px}
.guests img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid rgba(123,200,255,.4);margin-right:-14px;background:#0B1220}
.guests span{margin-left:22px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;color:var(--muted)}
.ratio{position:relative;width:100%;padding-top:56.25%;cursor:pointer;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.ratio img.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86;transition:opacity .25s,transform .5s var(--ease)}
.ratio:hover img.thumb{opacity:1;transform:scale(1.04)}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:50px;border-radius:14px;
    background:rgba(8,18,38,.75);border:1px solid rgba(123,200,255,.55);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;transition:background .2s,box-shadow .2s;pointer-events:none}
.playbtn::after{content:'';width:0;height:0;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #CFE6FF;margin-left:4px}
.ratio:hover .playbtn{background:rgba(94,139,255,.55);box-shadow:0 0 34px rgba(94,139,255,.45)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.filt{font-family:'IBM Plex Mono',monospace;font-size:.76rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#C6D8F5;
    background:rgba(94,139,255,.1);border:1px solid rgba(123,200,255,.4);border-radius:99px;padding:10px 19px;cursor:pointer;transition:all .2s}
.filt:hover{color:#CFE6FF;border-color:#7BC8FF}
.filt.on{color:#0B1220;background:var(--grad);border-color:transparent;font-weight:600}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:24px}
.item{border:1px solid var(--line);border-radius:14px;background:rgba(13,20,31,.78);backdrop-filter:blur(8px);overflow:hidden;
    display:flex;flex-direction:column;transition:border-color .25s,transform .25s var(--ease)}
.item:hover{border-color:rgba(123,200,255,.5);transform:translateY(-3px)}
.item.hide{display:none}
.item-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.kind{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#9DBBFF;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.kind .dot{width:6px;height:6px;border-radius:50%;background:var(--grad)}
.item h3{font-size:.98rem;font-weight:600;line-height:1.35;margin-bottom:7px}
.item p{color:var(--muted);font-size:.86rem;flex:1}
.go,.item .go{display:inline-block;margin-top:15px;font-family:'IBM Plex Mono',monospace;font-size:.74rem;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:#EAF2FF;background:rgba(94,139,255,.16);
    border:1px solid rgba(123,200,255,.5);border-radius:99px;padding:10px 18px;align-self:flex-start;transition:all .2s}
.go:hover,.item:hover .go{color:#0B1220;background:var(--grad);border-color:transparent;box-shadow:0 6px 20px rgba(110,123,255,.35)}
.item.soon{border-style:dashed;justify-content:center;min-height:200px;text-align:center}
.item.soon .item-body{align-items:center;justify-content:center}
.feed-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:26px;align-items:start}
.li-card{border:1px solid var(--line);border-radius:14px;background:rgba(13,20,31,.78);padding:18px}
.li-frame{border-radius:10px;overflow:hidden;background:#fff}
.li-frame iframe{display:block;width:100%;height:600px;border:0}
.li-more{display:flex;flex-direction:column;justify-content:center;text-align:center;min-height:200px}
.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.asset{background:#0A1220;display:flex;align-items:center;justify-content:center;padding:30px;border-radius:12px;border:1px solid var(--line)}
.asset img{mix-blend-mode:screen;max-height:110px;width:auto}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.socials a{font-family:'IBM Plex Mono',monospace;font-size:.76rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
    color:#EAF2FF;background:rgba(94,139,255,.18);border:1px solid rgba(123,200,255,.55);border-radius:99px;padding:11px 20px;
    transition:all .2s}
.socials a:hover{color:#0B1220;background:var(--grad);border-color:transparent;box-shadow:0 6px 22px rgba(110,123,255,.4);transform:translateY(-1px)}
@media (max-width:920px){
    .feat{grid-template-columns:1fr}
    .press-grid{grid-template-columns:1fr}
    .li-frame iframe{height:560px}
    .nav-links{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--raven);border-bottom:1px solid var(--line);padding:18px 32px;gap:16px}
    .nav-links.open{display:flex}
    .menu-toggle{display:block}.nav .btn{display:none}
    .grid2,.cards2,.cards3{grid-template-columns:1fr}
    .cards5{grid-template-columns:1fr 1fr}
    .hero{padding:130px 0 50px}
    section{padding:50px 0}
    
  }