/* 3VG Portfolio styles */
:root{ --ink:#eaf1ff; --bg:#0b1321; --nav:#0a1331; --accent:#3AA4FF; }
.container{max-width:1160px;margin:0 auto;padding:0 18px}
#threevg-archive, #threevg-single{color:var(--ink);background:
  radial-gradient(1200px 600px at 10% -10%, #14306a 0, transparent 60%),
  radial-gradient(900px 500px at 110% 10%, #0f2a58 0, transparent 55%),
  #0b1321}
.hero{position:relative;overflow:hidden;padding:64px 0 42px;background:linear-gradient(180deg,#0a1331,#0d1a45)}
.hero .chip{display:inline-block;border:1px solid #ffffff29;background:#ffffff14;padding:6px 10px;border-radius:999px;font-weight:800}
.hero h1{margin:12px 0 4px;font-size:clamp(28px,5.2vw,44px);font-weight:900;color:#fff}
.hero .lead{margin:0;color:#cfd7f1;max-width:760px}
.bg-grid{position:absolute;inset:0;background:
   linear-gradient(transparent 23px,#ffffff14 24px) 0 0/100% 24px,
   linear-gradient(90deg,transparent 23px,#ffffff14 24px) 0 0/24px 100%;opacity:.15;pointer-events:none}
.bg-orb{position:absolute;filter:blur(40px);opacity:.35;pointer-events:none}
.orb-1{width:360px;height:360px;left:-80px;top:-40px;background:radial-gradient(#3AA4FF,#3AA4FF00)}
.orb-2{width:300px;height:300px;right:-60px;top:-30px;background:radial-gradient(#6ed0ff,#6ed0ff00)}

.threevg-filters{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff10;color:#eaf1ff;text-decoration:none;font-weight:800;cursor:pointer}
.chip.active{background:#3AA4FF;color:#04122b;border-color:#3AA4FF}

.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#59b3ff,#3aa4ff);color:#031129;border-radius:999px;padding:10px 14px;font-weight:900;text-decoration:none;border:0;cursor:pointer}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff20;border-radius:999px;padding:10px 14px;color:#eaf1ff;text-decoration:none;background:transparent}

.threevg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:12px 0 26px}
@media (max-width:980px){ .threevg-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .threevg-grid{grid-template-columns:1fr} }

.threevg-card{display:grid;grid-template-rows:auto 1fr;background:#0e1636;border:1px solid #ffffff12;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px #00000033;transform:translateY(8px);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}
.threevg-card.show{transform:translateY(0);opacity:1}
.threevg-card .thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.threevg-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.threevg-card .thumb:hover img{transform:scale(1.04)}
.badge{position:absolute;left:12px;top:12px;background:#ffffffe6;color:#031129;border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px}
.threevg-card .body{padding:14px 14px 16px}
.threevg-card .ttl{margin:0 0 6px;font-weight:900;color:#fff;font-size:20px}
.threevg-card .ttl a{color:inherit;text-decoration:none}
.threevg-card .excerpt{margin:0 0 10px;color:#d1dbff}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.meta-chip{display:inline-flex;background:#ffffff12;border:1px solid #ffffff1f;color:#d8e6ff;border-radius:999px;padding:4px 8px;font-size:12px}

.threevg-actions{text-align:center;margin-bottom:40px}

#threevg-single .content{display:grid;grid-template-columns:1.4fr .8fr;gap:18px;margin:18px 0 60px}
#threevg-single .content .media .featured{width:100%;height:auto;border-radius:12px;box-shadow:0 12px 40px #00000033}
#threevg-single .content .text{background:#0e1636;border:1px solid #ffffff12;border-radius:12px;padding:18px}
#threevg-single .content .meta{display:grid;gap:12px}
#threevg-single .content .meta .chip{display:inline-flex}
@media (max-width:980px){ #threevg-single .content{grid-template-columns:1fr} }


.hero{isolation:isolate}
.hero .container{position:relative;z-index:3}
.bg-grid,.bg-orb{z-index:1;pointer-events:none !important}
.threevg-card .cta{display:flex;flex-wrap:wrap;gap:10px}
.threevg-card .btn,.threevg-card .btn-ghost{position:relative;z-index:2}
.thumb-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,#10204a,#1b356f)}
.threevg-empty{grid-column:1/-1;padding:18px;border:1px solid #ffffff1a;border-radius:14px;background:#0e1636;color:#d8e6ff}