/* ============================================
   VOXNIK DOWNLOADS — DESIGN TOKENS (Logo-matched theme)
   ============================================ */
:root{
  /* Backgrounds — clean white like the logo */
  --bg-void:#F5F7FC;
  --bg-surface:#FFFFFF;
  --bg-surface-2:#EEF2FB;
  --bg-surface-3:#E2E8F7;
  --glass:rgba(27,73,190,0.04);
  --glass-strong:rgba(27,73,190,0.08);
  --border-soft:rgba(27,73,190,0.10);
  --border-strong:rgba(27,73,190,0.22);

  /* Text — dark navy from logo wordmark */
  --text-primary:#0D1629;
  --text-secondary:#3D4F7A;
  --text-muted:#7A8BB5;

  /* Brand colours — extracted from logo */
  --blue:#1B49BE;        /* core logo blue */
  --blue-2:#0D6EFF;      /* bright logo highlight */
  --blue-light:#4A90D9;  /* lighter diagonal stroke */
  --teal:#0099CC;        /* accent — digital feel */
  --amber:#F59E0B;
  --rose:#E53E6A;

  /* Gradients matching logo V letterform */
  --grad-primary:linear-gradient(135deg,#1B49BE 0%,#0D6EFF 100%);
  --grad-logo:linear-gradient(150deg,#4A90D9 0%,#1B49BE 45%,#0D1629 100%);
  --grad-teal:linear-gradient(135deg,#0099CC 0%,#0077AA 100%);
  --grad-amber:linear-gradient(135deg,#FCD34D 0%,#F59E0B 100%);

  /* Shadows — softer on light bg */
  --shadow-card:0 4px 20px rgba(27,73,190,0.10);
  --shadow-card-hover:0 14px 40px rgba(27,73,190,0.18);
  --shadow-glow-teal:0 0 40px rgba(0,153,204,0.14);
  --shadow-btn:0 8px 24px rgba(13,110,255,0.32);

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;
  --radius-pill:999px;

  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

.vdl-downloads-root{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
.vdl-downloads-root *{margin:0;padding:0;box-sizing:border-box;}
.vdl-downloads-root img{max-width:100%;display:block;}
.vdl-downloads-root a{color:inherit;text-decoration:none;}
.vdl-downloads-root button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.vdl-downloads-root ul{list-style:none;}
.vdl-downloads-root :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}

.vdl-wrap{max-width:1240px;margin:0 auto;padding:0 24px;}
.vdl-eyebrow{
  font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:8px;
}
.vdl-section{padding:96px 0;position:relative;}
.vdl-section-head{max-width:640px;margin-bottom:48px;}
.vdl-section-head h2{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3vw,2.3rem);
  font-weight:700;letter-spacing:-.01em;margin-top:14px;
}
.vdl-section-head p{color:var(--text-secondary);margin-top:12px;font-size:1.02rem;}

/* background ambient glow */
.vdl-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.22;pointer-events:none;z-index:0;}

/* ============================================
   BUTTONS
   ============================================ */
.vdl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:14px 26px;border-radius:var(--radius-md);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.vdl-btn svg{width:18px;height:18px;flex-shrink:0;}
.vdl-btn-primary{
  background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-btn);
}
.vdl-btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(47,92,224,.5);}
.vdl-btn-secondary{
  background:var(--glass);border:1px solid var(--border-strong);color:var(--text-primary);
  backdrop-filter:blur(12px);
}
.vdl-btn-secondary:hover{background:var(--bg-surface-2);border-color:var(--blue);}
.vdl-btn-ghost{color:var(--blue);font-weight:600;padding:8px 0;}
.vdl-btn-ghost:hover{color:var(--blue-2);}
.vdl-btn-block{width:100%;}
.vdl-btn-sm{padding:9px 16px;font-size:.84rem;border-radius:var(--radius-sm);}

/* ============================================
   TOP ANNOUNCEMENT BAR
   ============================================ */
.vdl-announce{
  background:var(--grad-primary);color:#fff;text-align:center;
  padding:10px 20px;font-size:.84rem;font-weight:500;letter-spacing:.01em;
}
.vdl-announce a{color:#fff;text-decoration:underline;text-underline-offset:3px;opacity:.9;}

/* ============================================
   NAV — matches actual Voxnik website
   ============================================ */
.vdl-nav{
  position:sticky;top:0;z-index:200;
  background:#fff;
  border-bottom:1px solid rgba(27,73,190,0.10);
  box-shadow:0 2px 16px rgba(27,73,190,0.07);
}
.vdl-nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:70px;max-width:1240px;margin:0 auto;gap:32px;}

/* Logo — big bold blue "Voxnik" text like the real site */
.vdl-logo{
  display:flex;align-items:center;
  font-family:var(--font-display);font-weight:700;font-size:1.55rem;
  color:var(--blue);letter-spacing:-.01em;flex-shrink:0;
}
.vdl-logo img{height:38px;width:auto;}

/* Nav links — pill style, "Home" gets active pill */
.vdl-nav-links{display:flex;align-items:center;gap:6px;}
.vdl-nav-links a{
  font-size:.9rem;font-weight:500;color:var(--text-secondary);
  padding:7px 16px;border-radius:var(--radius-pill);
  transition:all .2s;
}
.vdl-nav-links a:hover{color:var(--blue);background:rgba(27,73,190,.06);}
.vdl-nav-links a.is-active{
  background:rgba(27,73,190,.10);color:var(--blue);font-weight:600;
  border:1px solid rgba(27,73,190,.20);
}

/* Right side: phone + CTA */
.vdl-nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.vdl-nav-phone{
  display:flex;align-items:center;gap:7px;
  font-size:.88rem;font-weight:500;color:var(--text-primary);
  padding:8px 16px;border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);
  transition:border-color .2s;white-space:nowrap;
}
.vdl-nav-phone:hover{border-color:var(--blue);}
.vdl-nav-phone svg{width:14px;height:14px;color:var(--blue);}
.vdl-nav-consult{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--grad-primary);color:#fff;font-weight:600;font-size:.9rem;
  padding:10px 22px;border-radius:var(--radius-pill);
  box-shadow:0 6px 20px rgba(27,73,190,.3);transition:transform .2s,box-shadow .2s;
  white-space:nowrap;
}
.vdl-nav-consult:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(27,73,190,.4);}

.vdl-menu-btn{display:none;width:38px;height:38px;border-radius:8px;border:1px solid var(--border-soft);}
.vdl-menu-btn svg{width:20px;height:20px;}

/* Mobile nav drawer */
.vdl-mobile-nav{
  display:none;position:fixed;inset:0;z-index:199;
  background:rgba(13,22,41,.5);backdrop-filter:blur(4px);
}
.vdl-mobile-nav.is-open{display:block;}
.vdl-mobile-nav-panel{
  position:absolute;top:0;right:0;width:280px;height:100%;
  background:#fff;box-shadow:-4px 0 30px rgba(27,73,190,.15);
  padding:80px 28px 28px;display:flex;flex-direction:column;gap:8px;
}
.vdl-mobile-nav-panel a{
  padding:12px 16px;border-radius:var(--radius-md);font-weight:500;
  color:var(--text-primary);transition:background .2s;
}
.vdl-mobile-nav-panel a:hover{background:var(--bg-surface-2);}
.vdl-mobile-nav-close{
  position:absolute;top:20px;right:20px;width:36px;height:36px;
  border-radius:50%;background:var(--bg-surface-2);display:flex;align-items:center;justify-content:center;
}
.vdl-mobile-nav-close svg{width:18px;height:18px;}

@media(max-width:860px){
  .vdl-nav-links,.vdl-nav-phone{display:none;}
  .vdl-menu-btn{display:flex;align-items:center;justify-content:center;}
}

/* ============================================
   HERO
   ============================================ */
.vdl-hero{padding:84px 0 60px;position:relative;overflow:hidden;}
.vdl-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.vdl-hero h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.08;margin-top:18px;
}
.vdl-hero h1 span{
  background:linear-gradient(90deg,var(--blue),var(--blue-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.vdl-hero p.vdl-sub{color:var(--text-secondary);font-size:1.12rem;margin-top:20px;max-width:520px;}
.vdl-hero-ctas{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}
.vdl-hero-stats{display:flex;gap:30px;margin-top:48px;flex-wrap:wrap;}
.vdl-stat-chip{
  font-family:var(--font-mono);font-size:.82rem;color:var(--text-secondary);
  display:flex;align-items:center;gap:8px;
}
.vdl-stat-chip b{color:var(--text-primary);font-size:1.05rem;font-family:var(--font-display);font-weight:700;}
.vdl-stat-dot{width:6px;height:6px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 8px var(--blue-2);}

/* hero illustration */
.vdl-hero-art{position:relative;height:420px;display:flex;align-items:center;justify-content:center;}
.vdl-ring-wrap{position:relative;width:200px;height:200px;}
.vdl-ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.vdl-ring-bg{fill:none;stroke:var(--border-soft);stroke-width:6;}
.vdl-ring-fg{
  fill:none;stroke:url(#vdlRingGrad);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:565;stroke-dashoffset:565;
  animation:vdlRing 2.6s var(--ease) infinite;
}
@keyframes vdlRing{
  0%{stroke-dashoffset:565;}
  55%{stroke-dashoffset:90;}
  100%{stroke-dashoffset:565;}
}
.vdl-ring-center{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.vdl-ring-center svg{width:34px;height:34px;color:var(--blue-2);}
.vdl-ring-center span{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);letter-spacing:.05em;}

.vdl-tile{
  position:absolute;width:74px;height:74px;border-radius:18px;
  background:var(--glass-strong);border:1px solid var(--border-strong);
  backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-card);animation:vdlFloat 5s ease-in-out infinite;
}
.vdl-tile svg{width:30px;height:30px;}
.vdl-tile.t1{top:6%;left:4%;color:var(--blue);animation-delay:0s;}
.vdl-tile.t2{top:14%;right:0;color:var(--blue-2);animation-delay:.6s;}
.vdl-tile.t3{bottom:10%;left:0;color:var(--blue-light);animation-delay:1.2s;}
.vdl-tile.t4{bottom:0;right:8%;color:var(--teal);animation-delay:1.8s;}
@keyframes vdlFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

@media(max-width:900px){
  .vdl-hero-grid{grid-template-columns:1fr;}
  .vdl-hero-art{height:280px;order:-1;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ============================================
   SEARCH + FILTERS
   ============================================ */
.vdl-search-bar{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:16px 20px;box-shadow:var(--shadow-card);
}
.vdl-search-bar svg{width:20px;height:20px;color:var(--text-muted);flex-shrink:0;}
.vdl-search-bar input{
  flex:1;background:none;border:none;color:var(--text-primary);font-size:1rem;font-family:var(--font-body);
}
.vdl-search-bar input::placeholder{color:var(--text-muted);}
.vdl-filters{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.vdl-pill{
  font-size:.86rem;font-weight:500;padding:9px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--border-soft);color:var(--text-secondary);
  transition:all .2s var(--ease);background:var(--glass);
}
.vdl-pill:hover{border-color:var(--border-strong);color:var(--text-primary);}
.vdl-pill.is-active{background:var(--grad-primary);color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(27,73,190,.35);}
.vdl-no-results{display:none;text-align:center;padding:50px 0;color:var(--text-muted);}
.vdl-no-results.is-visible{display:block;}

/* ============================================
   PLUGIN GRID / CARDS
   ============================================ */
.vdl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;}
@media(max-width:1080px){.vdl-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.vdl-grid{grid-template-columns:1fr;}}

.vdl-card{
  background:var(--bg-surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.vdl-card.vdl-reveal{opacity:0;transform:translateY(16px);}
.vdl-card.vdl-revealed{opacity:1;transform:translateY(0);}
.vdl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong);}
.vdl-card-top{display:flex;align-items:flex-start;justify-content:space-between;}
.vdl-card-icon{
  width:54px;height:54px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;background:var(--bg-surface-2);
}
.vdl-card-icon svg{width:26px;height:26px;}
.vdl-badge{
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.04em;
  padding:5px 11px;border-radius:var(--radius-pill);text-transform:uppercase;
}
.vdl-badge-free{background:rgba(27,73,190,.10);color:var(--blue);border:1px solid rgba(27,73,190,.25);}
.vdl-badge-premium{background:var(--grad-amber);color:#3a2200;display:flex;align-items:center;gap:4px;}
.vdl-badge-premium svg{width:11px;height:11px;}
.vdl-card h3{font-family:var(--font-display);font-size:1.08rem;font-weight:700;}
.vdl-card-desc{color:var(--text-secondary);font-size:.88rem;flex-grow:1;}
.vdl-meta-row{
  display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);
  border-top:1px dashed var(--border-soft);border-bottom:1px dashed var(--border-soft);padding:10px 0;
}
.vdl-meta-row span{display:flex;align-items:center;gap:4px;}
.vdl-meta-row svg{width:12px;height:12px;}
.vdl-card-foot{display:flex;align-items:center;justify-content:space-between;}
.vdl-rating{display:flex;align-items:center;gap:6px;font-size:.84rem;}
.vdl-rating svg{width:14px;height:14px;color:var(--amber);}
.vdl-rating b{font-family:var(--font-display);}
.vdl-rating small{color:var(--text-muted);}
.vdl-card-actions{display:flex;gap:10px;}
.vdl-card-actions .vdl-btn{flex:1;padding:10px 14px;font-size:.84rem;}

/* ============================================
   FEATURES STRIP
   ============================================ */
.vdl-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:900px){.vdl-features-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.vdl-features-grid{grid-template-columns:1fr;}}
.vdl-feature{
  background:var(--glass);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:26px 22px;transition:border-color .3s,transform .3s var(--ease);
}
.vdl-feature:hover{border-color:var(--blue);transform:translateY(-4px);}
.vdl-feature-icon{
  width:46px;height:46px;border-radius:12px;background:var(--bg-surface-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--blue);
}
.vdl-feature-icon svg{width:22px;height:22px;}
.vdl-feature h4{font-size:1rem;font-weight:600;margin-bottom:6px;}
.vdl-feature p{color:var(--text-muted);font-size:.85rem;}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.vdl-faq-item{border-bottom:1px solid var(--border-soft);}
.vdl-faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:22px 4px;text-align:left;font-size:1rem;font-weight:600;
}
.vdl-faq-q svg{width:18px;height:18px;color:var(--text-muted);transition:transform .3s var(--ease);flex-shrink:0;margin-left:14px;}
.vdl-faq-item.is-open .vdl-faq-q svg{transform:rotate(180deg);color:var(--blue);}
.vdl-faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.vdl-faq-a p{color:var(--text-secondary);padding:0 4px 22px;font-size:.92rem;max-width:680px;}

/* ============================================
   NEWSLETTER
   ============================================ */
.vdl-newsletter{
  background:linear-gradient(135deg,#EEF4FF 0%,#DDEAFF 100%);
  border:1px solid rgba(27,73,190,0.18);border-radius:var(--radius-lg);
  padding:48px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.vdl-newsletter::before{
  content:'';position:absolute;width:300px;height:300px;border-radius:50%;
  background:var(--blue-2);opacity:.07;filter:blur(80px);top:-100px;right:-60px;
}
.vdl-newsletter h3{font-family:var(--font-display);font-size:1.5rem;margin-bottom:8px;}
.vdl-newsletter p{color:var(--text-secondary);max-width:380px;}
.vdl-newsletter-form{display:flex;gap:10px;z-index:1;}
.vdl-newsletter-form input{
  background:var(--bg-void);border:1px solid var(--border-strong);color:var(--text-primary);
  padding:13px 18px;border-radius:var(--radius-md);font-size:.92rem;min-width:240px;
}
.vdl-newsletter-msg{font-family:var(--font-mono);font-size:.78rem;color:var(--blue);margin-top:10px;display:none;}
.vdl-newsletter-msg.is-visible{display:block;}
@media(max-width:700px){.vdl-newsletter-form{flex-direction:column;width:100%;}.vdl-newsletter-form input{min-width:0;}}

/* ============================================
   FOOTER CTA
   ============================================ */
.vdl-footer-cta{
  text-align:center;background:var(--grad-primary);border-radius:var(--radius-lg);
  padding:60px 30px;position:relative;overflow:hidden;
}
.vdl-footer-cta h3{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);margin-top:10px;}
.vdl-footer-cta p{color:rgba(255,255,255,.85);margin-top:10px;max-width:460px;margin-inline:auto;}
.vdl-footer-cta .vdl-btn{margin-top:26px;background:#fff;color:var(--blue-2);box-shadow:0 10px 30px rgba(0,0,0,.3);}
.vdl-footer-cta .vdl-btn:hover{transform:translateY(-3px) scale(1.02);}

/* ============================================
   SITE FOOTER — dark navy like actual Voxnik site
   ============================================ */
.vdl-footer{
  background:#0D1629;color:rgba(255,255,255,.6);
  padding:64px 0 0;
}
.vdl-footer-grid{
  display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:48px;max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px;
}
@media(max-width:900px){.vdl-footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.vdl-footer-grid{grid-template-columns:1fr;}}

.vdl-footer-brand p{
  margin-top:16px;max-width:300px;font-size:.88rem;line-height:1.7;
  color:rgba(255,255,255,.5);
}
.vdl-footer-social{display:flex;gap:10px;margin-top:20px;}
.vdl-footer-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);transition:all .2s;
}
.vdl-footer-social a:hover{border-color:var(--blue-2);color:#fff;background:rgba(27,73,190,.3);}
.vdl-footer-social svg{width:16px;height:16px;}

.vdl-footer-col h5{
  color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:20px;
}
.vdl-footer-col ul{display:flex;flex-direction:column;gap:10px;}
.vdl-footer-col li a{font-size:.88rem;color:rgba(255,255,255,.55);transition:color .2s;}
.vdl-footer-col li a:hover{color:#fff;}
.vdl-footer-col li{font-size:.88rem;color:rgba(255,255,255,.55);}

.vdl-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:20px 24px;max-width:1240px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;color:rgba(255,255,255,.35);flex-wrap:wrap;gap:10px;
}
.vdl-footer-bottom a{color:rgba(255,255,255,.45);transition:color .2s;}
.vdl-footer-bottom a:hover{color:#fff;}
.vdl-footer-bottom-links{display:flex;gap:20px;}
.vdl-footer-wrap{max-width:1240px;margin:0 auto;padding:0 24px;}

/* ============================================
   DETAIL VIEW
   ============================================ */
.vdl-detail-view{display:none;}
.vdl-detail-view.is-active{display:block;}
#vdl-browse-view.is-hidden{display:none;}

.vdl-back{
  display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:.9rem;font-weight:500;
  padding:22px 0 0;
}
.vdl-back svg{width:16px;height:16px;}
.vdl-back:hover{color:var(--blue);}

.vdl-detail-header{
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:start;
  padding:36px 0 40px;border-bottom:1px solid var(--border-soft);margin-bottom:40px;
  max-width:100%;
}
.vdl-detail-icon{
  width:96px;height:96px;border-radius:var(--radius-md);background:var(--bg-surface-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.vdl-detail-icon svg{width:46px;height:46px;}
.vdl-detail-info{min-width:0;}
.vdl-detail-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;}
.vdl-detail-title-row h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);overflow-wrap:break-word;word-break:break-word;min-width:0;}
.vdl-detail-tagline{color:var(--text-secondary);margin-top:8px;font-size:1.02rem;overflow-wrap:break-word;}
.vdl-detail-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);}
.vdl-detail-meta span{display:flex;align-items:center;gap:6px;}
.vdl-detail-meta svg{width:13px;height:13px;flex-shrink:0;}
.vdl-detail-actions{display:flex;flex-direction:column;gap:10px;min-width:200px;flex-shrink:0;}

.vdl-detail-body{display:grid;grid-template-columns:1.6fr 1fr;gap:50px;min-width:0;max-width:100%;}
.vdl-detail-body > div{min-width:0;}
@media(max-width:900px){
  .vdl-detail-header{grid-template-columns:1fr;text-align:left;}
  .vdl-detail-actions{flex-direction:row;flex-wrap:wrap;min-width:0;width:100%;}
  .vdl-detail-actions .vdl-btn{flex:1 1 160px;}
  .vdl-detail-body{grid-template-columns:1fr;}
}
@media(max-width:540px){
  .vdl-detail-icon{width:64px;height:64px;}
  .vdl-detail-icon svg{width:32px;height:32px;}
  .vdl-detail-actions{flex-direction:column;}
  .vdl-detail-actions .vdl-btn{flex:1 1 auto;}
}

.vdl-detail-block{margin-bottom:44px;}
.vdl-detail-block h3{font-family:var(--font-display);font-size:1.25rem;margin-bottom:16px;}
.vdl-detail-block p{color:var(--text-secondary);margin-bottom:14px;font-size:.96rem;}
.vdl-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:560px){.vdl-check-grid{grid-template-columns:1fr;}}
.vdl-check-item{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--text-secondary);}
.vdl-check-item svg{width:18px;height:18px;color:var(--blue);flex-shrink:0;margin-top:1px;}

.vdl-screens{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;}
.vdl-screen{
  flex:0 0 260px;height:160px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--bg-surface-2),var(--bg-surface-3));
  border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-family:var(--font-mono);font-size:.78rem;
}

/* sidebar widget cards within detail */
.vdl-side-card{
  background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:24px;margin-bottom:24px;max-width:100%;overflow:hidden;
}
.vdl-side-card h4{font-family:var(--font-display);font-size:1rem;margin-bottom:16px;}
.vdl-spec-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;font-size:.86rem;padding:8px 0;border-bottom:1px dashed var(--border-soft);}
.vdl-spec-row:last-child{border-bottom:none;}
.vdl-spec-row span:first-child{color:var(--text-muted);flex-shrink:0;}
.vdl-spec-row span:last-child{font-family:var(--font-mono);font-weight:500;text-align:right;overflow-wrap:break-word;min-width:0;}

/* installation steps */
.vdl-steps{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:10px 0 20px;}
.vdl-step{flex:1;min-width:160px;text-align:center;padding:0 14px;position:relative;}
.vdl-step-num{
  width:50px;height:50px;border-radius:50%;background:var(--grad-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;
  margin:0 auto 14px;box-shadow:0 8px 24px rgba(47,92,224,.35);position:relative;z-index:1;
}
.vdl-step p{font-size:.86rem;font-weight:600;}
.vdl-step small{display:block;color:var(--text-muted);font-size:.76rem;margin-top:4px;font-weight:400;}
.vdl-step-arrow{
  position:absolute;top:25px;left:-14px;width:28px;height:2px;background:var(--border-strong);
}
.vdl-step-arrow::after{
  content:'';position:absolute;right:0;top:-3px;width:8px;height:8px;border-right:2px solid var(--border-strong);
  border-top:2px solid var(--border-strong);transform:rotate(45deg);
}
.vdl-step:first-child .vdl-step-arrow{display:none;}
@media(max-width:760px){.vdl-steps{flex-direction:column;align-items:stretch;}.vdl-step-arrow{display:none;}.vdl-step{display:flex;align-items:center;gap:16px;text-align:left;padding:14px 0;}.vdl-step-num{margin:0;flex-shrink:0;}}

/* video */
.vdl-video-frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--bg-surface-2),var(--bg-void));border:1px solid var(--border-soft);
}
.vdl-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vdl-play-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  cursor:pointer;
}
.vdl-play-fallback .vdl-play-btn{
  width:74px;height:74px;border-radius:50%;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 40px rgba(47,92,224,.5);transition:transform .25s var(--ease);
}
.vdl-play-fallback:hover .vdl-play-btn{transform:scale(1.08);}
.vdl-play-fallback svg{width:26px;height:26px;color:#fff;margin-left:3px;}
.vdl-play-fallback span{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);}

/* related */
.vdl-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.vdl-related-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.vdl-related-grid{grid-template-columns:1fr;}}

/* sticky mobile download bar */
.vdl-mobile-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);border-top:1px solid var(--border-strong);
  padding:14px 18px;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -4px 20px rgba(27,73,190,0.12);
}
.vdl-mobile-bar strong{font-size:.86rem;}
.vdl-mobile-bar .vdl-meta-row{display:none;}
@media(max-width:860px){
  #vdl-detail-view.is-active ~ .vdl-mobile-bar,
  .vdl-mobile-bar.is-active{display:flex;}
}

/* utility reveal */
.vdl-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.vdl-reveal.vdl-revealed{opacity:1;transform:translateY(0);}

.vdl-mono-tag{font-family:var(--font-mono);}