/* =========================================================
   Vinnigom Studio — Dark Theme (v2)
   Scoped entirely under .vg-dark so light pages are untouched.
   Home page adds .is-home for the interactive hero.
   ========================================================= */

.vg-dark{
  --bg:#08090C;
  --surface:#12141C;
  --surface-2:#171A24;
  --accent:#8B7BFF;
  --accent-2:#FF6B9D;
  --accent-3:#22D3EE;
  --accent-lt:rgba(139,123,255,.16);
  --text:#F4F5F8;
  --text-sub:#9AA0B2;
  --dim:#6C7186;
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.18);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
body.vg-dark{
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.vg-dark ::selection{background:rgba(139,123,255,.35);color:#fff}

/* ---------- Header / Nav ---------- */
.vg-dark header{
  background:rgba(8,9,12,.72);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .3s,border-color .3s;
}
.vg-dark header.scrolled{background:rgba(8,9,12,.86);border-bottom-color:var(--border)}
.vg-dark .nav-logo img{
  filter:brightness(0) invert(1);
  opacity:.95;transition:opacity .2s;
}
.vg-dark .nav-logo:hover img{opacity:1}
.vg-dark .nav-links a{color:var(--text-sub)}
.vg-dark .nav-links a:hover{color:var(--text)}
.vg-dark .nav-links a.active,
.vg-dark .footer-links a.active{color:var(--text)}
.vg-dark .lang-icon-btn{color:var(--text-sub);border-color:var(--border)}
.vg-dark .lang-icon-btn:hover{color:var(--accent);border-color:var(--accent)}
.vg-dark .lang-dropdown{background:var(--surface-2);border-color:var(--border);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.vg-dark .lang-option{color:var(--text)}
.vg-dark .lang-option:hover{background:rgba(255,255,255,.06)}
.vg-dark .nav-hamburger span{background:var(--text)}
@media (max-width:640px){
  .vg-dark .nav-links{background:#0E1016;border-color:var(--border);box-shadow:0 16px 40px rgba(0,0,0,.6)}
  .vg-dark .nav-links > li > a{color:var(--text)}
  .vg-dark .nav-links > li > a:hover{background:rgba(255,255,255,.06)}
  .vg-dark .nav-links .lang-dropdown{background:rgba(255,255,255,.05)}
  .vg-dark .nav-links .lang-option.active{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
}

/* ---------- Footer ---------- */
.vg-dark footer{border-top-color:var(--border);color:var(--text-sub)}
.vg-dark .footer-logo{color:var(--text)}
.vg-dark .company-info{border-top-color:var(--border);color:var(--text-sub)}
.vg-dark .company-info a,.vg-dark .contact-mail{color:#fff}

/* =========================================================
   Category pages (dev / games / books / contact)
   Existing markup, repainted for dark.
   ========================================================= */
.vg-dark .hero-label{
  background:var(--accent-lt);color:#C9BEFF;
  border:1px solid rgba(139,123,255,.25);
}
.vg-dark .app-card{background:var(--surface);border-color:var(--border);transition:transform .22s,border-color .22s,box-shadow .22s}
.vg-dark .app-card:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:0 20px 44px rgba(0,0,0,.45)}
.vg-dark .app-icon{background:var(--surface-2);border:1px solid var(--border)}
.vg-dark .badge{border-color:var(--border);color:var(--text-sub)}
.vg-dark .badge.platform{background:var(--surface-2)}

/* release badges → translucent tinted */
.vg-dark .release-badge.app{background:rgba(110,139,255,.16);color:#9DB0FF}
.vg-dark .release-badge.game{background:rgba(79,214,193,.16);color:#6FE3CF}
.vg-dark .release-badge.book{background:var(--accent-lt);color:#C9BEFF}
.vg-dark .release-badge.goods{background:rgba(255,171,110,.16);color:#FFC08A}
.vg-dark .release-status{color:var(--text-sub)}

/* books */
.vg-dark .surface-section{background:var(--surface)}
.vg-dark .book-feature{background:var(--surface);border-color:var(--border)}
.vg-dark .book-feature:hover{box-shadow:0 20px 44px rgba(0,0,0,.5)}
.vg-dark .book-detail-btn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.vg-dark .book-store-btn{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.vg-dark .book-store-btn:hover{box-shadow:0 10px 26px rgba(139,123,255,.35)}
.vg-dark .edition-card,.vg-dark .social-card,.vg-dark .related-card{background:var(--surface);border-color:var(--border)}
.vg-dark a.edition-card:hover{box-shadow:0 20px 44px rgba(0,0,0,.45)}
.vg-dark .edition-lang{background:var(--accent-lt);color:#C9BEFF}
.vg-dark .book-search input{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.vg-dark .book-search input::placeholder{color:var(--dim)}
.vg-dark .book-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,123,255,.2)}
.vg-dark .book-list-item[hidden]{display:none}

/* contact */
.vg-dark .contact-hero{background:transparent}
.vg-dark .contact-mail{background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 14px 34px rgba(139,123,255,.3)}

/* subtle top glow for interior pages */
.vg-dark:not(.is-home) .hero,
.vg-dark:not(.is-home) .books-latest,
.vg-dark:not(.is-home) .contact-hero{position:relative}
.vg-dark:not(.is-home) main::before,
.vg-dark:not(.is-home) body::before{}
.vg-dark:not(.is-home)::before{
  content:"";position:fixed;top:-25%;left:50%;transform:translateX(-50%);
  width:120vw;height:55vh;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(139,123,255,.14),transparent 62%),
             radial-gradient(ellipse at 65% 30%,rgba(255,107,157,.08),transparent 55%);
  filter:blur(14px);
}
.vg-dark:not(.is-home) header,
.vg-dark:not(.is-home) main,
.vg-dark:not(.is-home) footer{position:relative;z-index:1}

/* =========================================================
   HOME (.is-home) — interactive hero + scalable sections
   ========================================================= */
.vg-dark.is-home{overflow-x:hidden}

/* full-bleed interactive hero */
.vg-hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate;margin-top:-72px;padding-top:72px}
#flux{position:absolute;inset:0;z-index:-3;width:100%;height:100%}
.vg-dots{position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.4px);
  background-size:26px 26px;opacity:.13;
  -webkit-mask-image:radial-gradient(220px 220px at var(--mx,50%) var(--my,42%),#000 0%,rgba(0,0,0,.25) 45%,transparent 75%);
  mask-image:radial-gradient(220px 220px at var(--mx,50%) var(--my,42%),#000 0%,rgba(0,0,0,.25) 45%,transparent 75%)}
.vg-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% 122%,rgba(8,9,12,.92),transparent 60%),
            linear-gradient(180deg,rgba(8,9,12,.42),rgba(8,9,12,.3) 28%,rgba(8,9,12,.3) 72%,rgba(8,9,12,.92))}
.vg-hero-inner{padding:0 22px;transform:translate(var(--px,0),var(--py,0));transition:transform .3s ease-out;max-width:960px}
.vg-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.03);backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-sub);margin-bottom:30px;letter-spacing:.14em}
.vg-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 12px var(--accent-3)}
.vg-h1{font-size:clamp(46px,9vw,104px);line-height:1.0;letter-spacing:-.04em;font-weight:900;margin:0}
.vg-h1 .grad{background:linear-gradient(110deg,var(--accent-3),var(--accent) 46%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:900}
.vg-lead{margin:26px auto 0;font-size:clamp(15px,2.1vw,19px);color:var(--text-sub);max-width:44ch}
.vg-btns{display:flex;gap:13px;margin-top:38px;justify-content:center;flex-wrap:wrap}
.vg-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.vg-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 0 34px rgba(139,123,255,.4)}
.vg-btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 50px rgba(139,123,255,.65);text-decoration:none}
.vg-btn-ghost{color:var(--text);border:1px solid var(--border-2)}
.vg-btn-ghost:hover{transform:translateY(-3px);border-color:#fff;text-decoration:none}
.vg-scrollcue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em;display:flex;flex-direction:column;align-items:center;gap:8px}
.vg-scrollcue .l{width:1px;height:34px;background:linear-gradient(var(--dim),transparent);animation:vgcue 2s ease-in-out infinite}
@keyframes vgcue{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* sections */
.vg-section{padding:64px 0;position:relative;scroll-margin-top:90px}
.vg-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.vg-kicker{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent-3);letter-spacing:.08em}
.vg-sectitle{font-size:clamp(24px,3.4vw,36px);font-weight:900;letter-spacing:-.02em;margin-top:8px}
.vg-secsub{color:var(--text-sub);font-size:15px;max-width:34ch}

/* category tracks — Services / Games showcase */
.vg-track-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.vg-track{border:1px solid var(--border);border-radius:22px;padding:30px 28px;background:var(--surface);text-decoration:none;color:inherit;position:relative;overflow:hidden;display:block;transition:transform .3s,border-color .3s,background .3s}
.vg-track:hover{transform:translateY(-6px);border-color:var(--border-2);background:var(--surface-2)}
.vg-track-glow{position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(60px);opacity:.22;top:-60px;right:-40px;pointer-events:none}
.vg-track-head{display:flex;gap:16px;align-items:flex-start;position:relative}
.vg-track-head .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;border:1px solid var(--border);background:rgba(255,255,255,.03);flex:0 0 auto}
.vg-track-head h3{font-size:21px;font-weight:800}
.vg-track-head p{color:var(--text-sub);font-size:13.5px;margin-top:6px;line-height:1.55}
.vg-track-products{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;position:relative}
.vg-track-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:12.5px;font-weight:700}
.vg-track-chip img{width:22px;height:22px;border-radius:7px;object-fit:cover;display:block}
.vg-track-chip.ghost{border-style:dashed;color:var(--dim);background:transparent;font-weight:500;padding:6px 14px}
.vg-track .go{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--dim);transition:.25s;position:relative}
.vg-track:hover .go{color:var(--accent-3)}

/* products auto-grid */
.vg-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.vg-prod{border:1px solid var(--border);border-radius:16px;padding:18px 16px;background:var(--surface);text-decoration:none;color:inherit;display:flex;gap:16px;align-items:center;transition:transform .22s,border-color .22s}
.vg-prod:hover{transform:translateY(-4px);border-color:var(--border-2)}
.vg-prod .pic{width:50px;height:50px;border-radius:13px;flex:0 0 auto;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border)}
.vg-prod .pic img{width:100%;height:100%;object-fit:cover;display:block}
.vg-prod .pinfo{display:flex;flex-direction:column;gap:9px;min-width:0}
.vg-prod .pn{font-weight:800;font-size:15px;line-height:1.3}
.vg-prod .pmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.vg-prod .ptag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-sub)}
.vg-prod .pstatus{font-family:var(--mono);font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em}
.vg-prod.ghost{border-style:dashed;justify-content:center;color:var(--dim);font-family:var(--mono);font-size:12.5px}
.vg-prod.ghost:hover{border-color:var(--accent);color:var(--accent-3)}

/* cta strip */
.vg-cta{border:1px solid var(--border-2);border-radius:18px;padding:48px 40px;text-align:center;position:relative;overflow:hidden;margin-top:12px;background:var(--surface)}
.vg-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -30%,rgba(139,123,255,.3),transparent 62%)}
.vg-cta h2{font-size:clamp(24px,3.4vw,34px);font-weight:900;letter-spacing:-.02em;position:relative}
.vg-cta p{color:var(--text-sub);margin-top:10px;position:relative}

/* reveal (shared) */
.vg-dark .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.vg-dark .reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  .vg-track-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .vg-dark *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .vg-dark .reveal{opacity:1;transform:none}
  #flux{display:none}
}