@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.3/index.css');

:root{
  --background: 260 87% 3%;
  --foreground: 40 6% 95%;
  --hero-sub: 40 6% 82%;

  --font-body: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'General Sans', ui-sans-serif, system-ui, sans-serif;
}

*{box-sizing:border-box}

body.hero-page{
  margin:0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
}

.hero-page a{color:inherit;text-decoration:none}
.hero-page button{font-family:inherit;cursor:pointer}

.hp-container{max-width:1120px;margin:0 auto;padding:0 32px}

/* ===== Liquid glass ===== */
.liquid-glass{
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}

/* ===== Hero wrapper ===== */
.hero-wrapper{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.hero-bg-canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
}
.hero-blur-shape{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:984px;height:527px;opacity:0.9;background:#050508;filter:blur(82px);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:10;display:flex;flex-direction:column;min-height:100vh;overflow:visible}

/* ===== Navbar ===== */
.hero-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;max-width:1120px;margin:0 auto;box-sizing:border-box}
.hero-logo{display:flex;align-items:center;gap:8px}
.hero-logo img,.hero-logo .logo-fallback{height:32px}
.hero-logo .logo-fallback{
  height:32px;display:flex;align-items:center;font-family:var(--font-display);
  font-weight:600;font-size:18px;color:hsl(var(--foreground));
}
.hero-logo .logo-fallback span{background:linear-gradient(to left,#6366f1,#a855f7,#fcd34d);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-nav-center{display:flex;align-items:center;gap:8px}
.hero-nav-center button{
  display:flex;align-items:center;gap:5px;background:none;border:none;
  color:hsl(var(--foreground) / 0.9);font-size:14.5px;padding:8px 14px;border-radius:8px;
  transition:background .15s,color .15s;
}
.hero-nav-center button:hover{background:rgba(255,255,255,0.05);color:hsl(var(--foreground))}
.hero-nav-center svg{width:14px;height:14px}
.btn-hero-secondary{
  border-radius:999px;padding:8px 18px;font-size:14px;font-weight:500;
  color:hsl(var(--foreground));background:rgba(255,255,255,0.01);
}
.nav-k8x{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-0.02em}
.nav-k8x .k8x-k,.nav-k8x .k8x-x{color:hsl(var(--foreground) / 0.9)}
.nav-k8x .k8x-8{color:#2f8fff}
.hero-divider{height:1px;margin-top:3px;background:linear-gradient(to right, transparent, hsl(var(--foreground) / 0.2), transparent)}

/* ===== Hero content ===== */
.hero-content{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.hero-content > div{max-width:1120px;margin:0 auto}
.hero-headline{
  font-family:var(--font-display);font-weight:400;font-size:clamp(48px, 10vw, 168px);
  line-height:1.05;letter-spacing:-0.024em;color:hsl(var(--foreground));margin:0;
}
.hero-headline .gradient-text{
  background-image:linear-gradient(to left, #6366f1, #a855f7, #fcd34d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-subtitle{
  color:hsl(var(--hero-sub));font-size:18px;line-height:32px;max-width:460px;
  margin:9px auto 0;opacity:0.8;
}
.hero-cta{
  margin-top:25px;padding:24px 29px;font-size:15px;font-weight:500;
  display:inline-flex;align-items:center;gap:8px;
}

/* ===== Marquee ===== */
.hero-marquee{padding-bottom:40px}
.hero-marquee-inner{
  max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:48px;
  padding:0 32px;overflow:hidden;box-sizing:border-box;
}
.marquee-left{color:hsl(var(--foreground) / 0.5);font-size:13.5px;line-height:1.4;flex-shrink:0;white-space:nowrap}
.marquee-viewport{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:marquee-scroll 20s linear infinite}
@keyframes marquee-scroll{from{transform:translateX(0%)}to{transform:translateX(-50%)}}
.marquee-item{display:flex;align-items:center;gap:12px;flex-shrink:0}
.marquee-icon{
  min-width:24px;height:24px;padding:0 6px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:11px;font-weight:600;color:hsl(var(--foreground));white-space:nowrap;
}
.marquee-item .name{font-size:16px;font-weight:600;color:hsl(var(--foreground))}

html{scroll-behavior:smooth}
#vnish-firmware{scroll-margin-top:24px}

/* ===== Vnish Firmware: фильтры ===== */
.vf-filters{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.vf-filter{display:flex;flex-direction:column;gap:6px}
.vf-filter label{font-size:12px;color:hsl(var(--foreground) / 0.5)}
.vf-filter select{
  background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.12);
  color:hsl(var(--foreground));font-family:var(--font-body);font-size:14px;
  padding:10px 14px;border-radius:10px;min-width:180px;cursor:pointer;
}
.vf-filter select:focus{outline:none;border-color:#a855f7}
.vf-reset{
  background:none;border:none;color:hsl(var(--foreground) / 0.5);font-size:13px;
  padding:10px 6px;cursor:pointer;
}
.vf-reset:hover{color:hsl(var(--foreground))}

/* ===== Vnish Firmware: карточки ===== */
.vf-list{display:flex;flex-direction:column;gap:14px}
.vf-card{
  display:flex;gap:24px;padding:20px;border-radius:16px;
  background:rgba(255,255,255,0.015);border:0.5px solid rgba(255,255,255,0.08);
}
.vf-thumb{
  width:120px;height:120px;border-radius:12px;flex-shrink:0;overflow:hidden;
  background:radial-gradient(circle at center, #1a1030 0%, #0a0612 70%);
  display:flex;align-items:center;justify-content:center;
}
.vf-thumb svg{width:80%;height:80%}
.vf-body{display:flex;flex-direction:column;justify-content:center;gap:6px;flex:1}
.vf-eyebrow{font-size:13px;color:hsl(var(--foreground) / 0.55)}
.vf-name{
  font-family:var(--font-display);font-weight:500;font-size:22px;
  background-image:linear-gradient(to right, #a855f7, #fcd34d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.vf-specs{font-size:13px;color:hsl(var(--foreground) / 0.7);line-height:1.7;margin-top:4px}
.vf-specs b{color:hsl(var(--foreground) / 0.9);font-weight:600}
.vf-dl-btn{
  margin-top:10px;align-self:flex-start;background:hsl(var(--foreground));color:#0a0612;
  font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:999px;border:none;
}
.vf-empty{text-align:center;padding:40px 0;color:hsl(var(--foreground) / 0.4);font-size:13px}

@media(max-width:640px){
  .vf-card{flex-direction:column}
  .vf-thumb{width:100%;height:160px}
}

/* ===== File system browser ===== */
.fs-section{padding:64px 0;border-top:0.5px solid rgba(255,255,255,0.08)}
.fs-section .section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
.fs-title{font-family:var(--font-display);font-weight:600;font-size:24px}
.fs-sub{font-size:12.5px;color:hsl(var(--foreground) / 0.5)}
.fs-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:hsl(var(--foreground) / 0.6);margin-bottom:16px;flex-wrap:wrap}
.fs-breadcrumb button{background:none;border:none;color:inherit;font-size:13px;padding:2px 4px;border-radius:4px}
.fs-breadcrumb button:hover{color:hsl(var(--foreground));background:rgba(255,255,255,0.05)}
.fs-breadcrumb .sep{opacity:0.4}
.fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fs-item{
  border-radius:12px;padding:16px;cursor:pointer;transition:transform .15s;
}
.fs-item:hover{transform:translateY(-2px)}
.fs-item .fs-icon{
  width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:15px;margin-bottom:12px;
}
.fs-item.folder .fs-icon{background:linear-gradient(135deg,#6366f1,#a855f7)}
.fs-item.file .fs-icon{background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.1)}
.fs-item-name{font-size:14px;font-weight:500;color:hsl(var(--foreground))}
.fs-item-meta{font-size:11.5px;color:hsl(var(--foreground) / 0.45);margin-top:4px}
.fs-item.file .fs-dl{
  margin-top:10px;font-size:11.5px;color:#a855f7;display:inline-flex;align-items:center;gap:4px;
}
.fs-empty{grid-column:1/-1;text-align:center;padding:32px 0;color:hsl(var(--foreground) / 0.4);font-size:13px}

@media(max-width:768px){
  .hero-nav-center{display:none}
  .marquee-left{display:none}
}