/* ============================================

   VK COLLECTION LIST HERO v5 - LEFT LAYOUT

   Prefix: vkclh

   ============================================ */

.vkclh{

  --lime:#AAFF00;--cyan:#00e5ff;--amber:#ff6b35;

  --red:#ff4444;--crimson:#7A1C1C;

  --red06:rgba(255,68,68,0.06);--red08:rgba(255,68,68,0.08);

  --red10:rgba(255,68,68,0.10);--red12:rgba(255,68,68,0.12);

  --red15:rgba(255,68,68,0.15);--red20:rgba(255,68,68,0.20);

  --red25:rgba(255,68,68,0.25);--red40:rgba(255,68,68,0.40);

  --lime04:rgba(170,255,0,0.04);--lime06:rgba(170,255,0,0.06);

  --lime08:rgba(170,255,0,0.08);--lime10:rgba(170,255,0,0.10);

  --lime12:rgba(170,255,0,0.12);--lime15:rgba(170,255,0,0.15);

  --lime20:rgba(170,255,0,0.20);--lime25:rgba(170,255,0,0.25);

  --lime40:rgba(170,255,0,0.40);

  --bg:#000;--card:#0a0a0a;--bg3:#111;

  --b1:#161616;--b2:#1a1a1a;--b3:#222;

  --w100:#fff;--w85:rgba(255,255,255,0.85);

  --w06:rgba(255,255,255,0.06);--w04:rgba(255,255,255,0.04);

  --w03:rgba(255,255,255,0.03);--w02:rgba(255,255,255,0.02);

  --g1:#999;--g2:#777;--g3:#555;--g4:#444;--g5:#333;

  --r:10px;

  --ease:cubic-bezier(0.22,1,0.36,1);

  --easeBounce:cubic-bezier(0.25,0.46,0.45,0.94);

  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  -webkit-font-smoothing:antialiased;color:var(--w100);

  background:var(--bg);position:relative;overflow:hidden;

}

.vkclh *,.vkclh *::before,.vkclh *::after{box-sizing:border-box}



/* =======================================

   ANIMATED RAINBOW TOP LINE

   ======================================= */

.vkclh::before{

  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:20;

  background:linear-gradient(90deg,#AAFF00 0%,#ff4444 14%,#00e5ff 28%,#AAFF00 42%,#ff4444 56%,#AAFF00 70%,#00e5ff 84%,#AAFF00 100%);

  background-size:200% 100%;animation:vkclhLine 4s linear infinite;opacity:.8;

}

@keyframes vkclhLine{0%{background-position:0% 50%}100%{background-position:200% 50%}}



/* =======================================

   HERO SECTION

   ======================================= */

.vkclh__hero{position:relative;overflow:hidden;padding-top:2px}



/* -- Ambient orbs -- */

.vkclh__bg{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}

.vkclh__orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:0;will-change:transform,opacity}

.vkclh__orb--1{width:600px;height:600px;top:-250px;left:-150px;background:radial-gradient(circle,rgba(170,255,0,.10) 0%,transparent 70%);animation:vkclhO1 10s ease-in-out infinite}

.vkclh__orb--2{width:450px;height:450px;bottom:-180px;right:-80px;background:radial-gradient(circle,rgba(0,229,255,.07) 0%,transparent 70%);animation:vkclhO2 12s ease-in-out infinite 3s}

.vkclh__orb--3{width:300px;height:300px;top:35%;left:50%;background:radial-gradient(circle,rgba(170,255,0,.06) 0%,transparent 70%);animation:vkclhO3 14s ease-in-out infinite 6s}

.vkclh__orb--4{width:380px;height:380px;top:60%;right:-100px;background:radial-gradient(circle,rgba(255,68,68,.06) 0%,transparent 70%);animation:vkclhO4 16s ease-in-out infinite 4s}

@keyframes vkclhO1{0%,100%{opacity:0;transform:translate(0,0) scale(.8)}50%{opacity:1;transform:translate(30px,20px) scale(1.15)}}

@keyframes vkclhO2{0%,100%{opacity:0;transform:translate(0,0) scale(.85)}50%{opacity:1;transform:translate(-25px,-15px) scale(1.1)}}

@keyframes vkclhO3{0%,100%{opacity:0;transform:scale(.7)}50%{opacity:.8;transform:scale(1.2)}}

@keyframes vkclhO4{0%,100%{opacity:0;transform:translate(0,0) scale(.75)}50%{opacity:.7;transform:translate(-20px,-10px) scale(1.1)}}



/* -- Spotlight -- */

.vkclh__spot{position:absolute;top:10%;left:5%;width:600px;height:350px;background:radial-gradient(ellipse,rgba(170,255,0,.05) 0%,transparent 70%);z-index:1;pointer-events:none;filter:blur(80px)}



/* -- Geometric grid -- */

.vkclh__grid-bg{

  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.025;

  background-image:linear-gradient(rgba(170,255,0,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(170,255,0,.3) 1px,transparent 1px);

  background-size:80px 80px;

  mask-image:radial-gradient(ellipse at 30% 40%,#000 0%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 0%,transparent 65%);

}



/* -- Noise grain -- */

.vkclh__noise{

  position:absolute;inset:0;z-index:2;opacity:.025;pointer-events:none;

  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");

  background-repeat:repeat;background-size:200px 200px;

}



/* -- Scan lines -- */

.vkclh__scan{position:absolute;top:0;width:45%;height:100%;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(170,255,0,.015),rgba(170,255,0,.04),rgba(170,255,0,.015),transparent)}

.vkclh__scan--1{animation:vkclhS1 10s ease-in-out infinite}

.vkclh__scan--2{animation:vkclhS2 14s ease-in-out infinite 5s;opacity:.6}

.vkclh__scan--3{

  background:linear-gradient(90deg,transparent,rgba(255,68,68,.01),rgba(255,68,68,.03),rgba(255,68,68,.01),transparent);

  animation:vkclhS2 18s ease-in-out infinite 9s;opacity:.5;

}

@keyframes vkclhS1{0%{left:-50%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:110%;opacity:0}}

@keyframes vkclhS2{0%{right:-50%;left:auto;opacity:0}15%{opacity:.7}85%{opacity:.7}100%{right:110%;left:auto;opacity:0}}



/* -- Particles -- */

.vkclh__particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}

.vkclh__p{position:absolute;width:2px;height:2px;background:var(--lime);border-radius:50%;opacity:0;animation:vkclhPF 8s ease-in-out infinite}

.vkclh__p:nth-child(1){left:10%;top:30%;animation-delay:0s;animation-duration:9s}

.vkclh__p:nth-child(2){left:25%;top:65%;animation-delay:2s;animation-duration:11s}

.vkclh__p:nth-child(3){left:50%;top:20%;animation-delay:4s;animation-duration:8s}

.vkclh__p:nth-child(4){left:72%;top:50%;animation-delay:1s;animation-duration:12s;background:var(--cyan)}

.vkclh__p:nth-child(5){left:88%;top:35%;animation-delay:3s;animation-duration:10s;background:var(--red)}

.vkclh__p:nth-child(6){left:40%;top:78%;animation-delay:5s;animation-duration:13s}

@keyframes vkclhPF{0%,100%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:.4}50%{opacity:.6;transform:translateY(-30px) scale(1)}80%{opacity:.3}}



/* -- Corner accents -- */

.vkclh__corner{position:absolute;z-index:5;pointer-events:none;width:40px;height:40px;opacity:.15}

.vkclh__corner--tl{top:16px;left:16px;border-top:1px solid var(--lime);border-left:1px solid var(--lime)}

.vkclh__corner--tr{top:16px;right:16px;border-top:1px solid var(--lime);border-right:1px solid var(--lime)}

.vkclh__corner--bl{bottom:16px;left:16px;border-bottom:1px solid var(--lime);border-left:1px solid var(--lime)}

.vkclh__corner--br{bottom:16px;right:16px;border-bottom:1px solid var(--red);border-right:1px solid var(--red);opacity:.12}



/* -- Bottom separator -- */

.vkclh__hero-sep{position:absolute;bottom:0;left:0;right:0;height:1px;z-index:10;background:linear-gradient(90deg,transparent 5%,var(--lime20) 30%,var(--lime) 50%,var(--lime20) 70%,transparent 95%);opacity:.3}

.vkclh__hero-sep::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:60%;height:6px;background:radial-gradient(ellipse,rgba(170,255,0,.12),transparent 70%);filter:blur(4px)}



/* -- Hero content layout -- */

.vkclh__hero-wrap{position:relative;z-index:4}

.vkclh__hero-inner{max-width:1340px;margin:0 auto;padding:56px 40px 64px}



/* =======================================

   2-COLUMN DESKTOP GRID

   ======================================= */

.vkclh__grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}

@media(min-width:1024px){

  .vkclh__grid{grid-template-columns:1fr 420px;gap:60px}

}

@media(min-width:1200px){

  .vkclh__grid{grid-template-columns:1fr 480px;gap:80px}

}



/* -- Left column (content) -- */

.vkclh__left{text-align:left}



/* -- Left accent bar (vertical) -- */

.vkclh__accent{

  position:absolute;left:0;top:0;bottom:0;width:3px;z-index:10;

  background:linear-gradient(180deg,transparent 0%,var(--lime) 20%,var(--cyan) 50%,var(--red) 80%,transparent 100%);

  opacity:.2;

}

.vkclh__accent::after{

  content:'';position:absolute;left:-3px;top:0;bottom:0;width:9px;

  background:linear-gradient(180deg,transparent 0%,rgba(170,255,0,.08) 20%,rgba(0,229,255,.06) 50%,rgba(255,68,68,.06) 80%,transparent 100%);

  filter:blur(4px);

}



/* =======================================

   RIGHT SIDE - SHOWCASE ORB

   ======================================= */

.vkclh__right{display:none;position:relative;justify-self:center}

@media(min-width:1024px){

  .vkclh__right{display:flex;align-items:center;justify-content:center}

}



.vkclh__showcase{position:relative;width:380px;height:380px;display:flex;align-items:center;justify-content:center}

@media(min-width:1200px){.vkclh__showcase{width:420px;height:420px}}



/* -- Orbiting rings -- */

.vkclh__ring{position:absolute;border-radius:50%;border:1px solid transparent;animation:vkclhSpin 20s linear infinite}

.vkclh__ring--1{inset:0;border-color:rgba(170,255,0,.06)}

.vkclh__ring--2{inset:30px;border-color:rgba(0,229,255,.05);animation-duration:25s;animation-direction:reverse}

.vkclh__ring--3{inset:60px;border-color:rgba(255,68,68,.04);animation-duration:30s}

@keyframes vkclhSpin{to{transform:rotate(360deg)}}



/* -- Ring dots (orbiting) -- */

.vkclh__ring-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(170,255,0,.5),0 0 20px rgba(170,255,0,.2)}

.vkclh__ring--1 .vkclh__ring-dot{top:-3px;left:50%;transform:translateX(-50%)}

.vkclh__ring--2 .vkclh__ring-dot{bottom:-3px;right:25%;background:var(--cyan);box-shadow:0 0 10px rgba(0,229,255,.5),0 0 20px rgba(0,229,255,.2)}

.vkclh__ring--3 .vkclh__ring-dot{top:50%;left:-3px;width:5px;height:5px;background:var(--red);box-shadow:0 0 10px rgba(255,68,68,.5),0 0 20px rgba(255,68,68,.2)}



/* -- Pulse rings -- */

.vkclh__pulse{position:absolute;border-radius:50%;border:1px solid rgba(170,255,0,.08);inset:80px;animation:vkclhPulse 4s ease-out infinite}

.vkclh__pulse--2{animation-delay:2s}

@keyframes vkclhPulse{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.3);opacity:0}}



/* -- Center VK monogram -- */

.vkclh__mono{

  position:relative;z-index:2;

  font-family:'Bebas Neue',sans-serif;font-size:120px;line-height:1;letter-spacing:.05em;

  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(170,255,0,.12) 50%,rgba(255,255,255,.04) 100%);

  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;

  user-select:none;

}

@media(min-width:1200px){.vkclh__mono{font-size:140px}}

.vkclh__mono::after{

  content:'VK';position:absolute;inset:0;

  font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;

  background:linear-gradient(135deg,rgba(170,255,0,.15),rgba(0,229,255,.08));

  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;

  filter:blur(30px);z-index:-1;

}



/* -- Floating badges around showcase -- */

.vkclh__badge{

  position:absolute;z-index:3;

  padding:6px 14px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;

  background:rgba(0,0,0,.6);border:1px solid rgba(170,255,0,.1);

  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);

  color:var(--g1);white-space:nowrap;

  animation:vkclhFloat 6s ease-in-out infinite;

}

.vkclh__badge--1{top:20px;right:-10px;animation-delay:0s}

.vkclh__badge--2{bottom:40px;left:-20px;animation-delay:2s;border-color:rgba(0,229,255,.1)}

.vkclh__badge--3{top:45%;right:-30px;animation-delay:4s;border-color:rgba(255,68,68,.1)}

.vkclh__badge-val{color:var(--lime);font-family:'Bebas Neue',sans-serif;font-size:16px;margin-right:5px}

.vkclh__badge--2 .vkclh__badge-val{color:var(--cyan)}

.vkclh__badge--3 .vkclh__badge-val{color:var(--red)}

@keyframes vkclhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}



/* -- Dashed circle -- */

.vkclh__dash{

  position:absolute;inset:90px;border-radius:50%;

  border:1px dashed rgba(170,255,0,.06);

  animation:vkclhSpin 40s linear infinite reverse;

}



/* =======================================

   BREADCRUMBS

   ======================================= */

.vkclh__bread{

  display:inline-flex;align-items:center;gap:0;margin-bottom:28px;padding:5px 5px;

  background:linear-gradient(145deg,rgba(170,255,0,.03),var(--w02));

  border:1px solid var(--b1);border-radius:10px;

  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);

  position:relative;overflow:hidden;

}

.vkclh__bread::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(170,255,0,.04),transparent);animation:vkclhBShim 8s ease-in-out infinite;pointer-events:none}

@keyframes vkclhBShim{0%,100%{left:-100%}50%{left:100%}}

.vkclh__bl,.vkclh__bc-item{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:7px;text-decoration:none;transition:all .25s ease;position:relative;z-index:1;white-space:nowrap}

.vkclh__bl{color:var(--g3)}

.vkclh__bl:hover{color:var(--lime);background:var(--lime08)}

.vkclh__bs{color:var(--g5);font-size:9px;padding:0 2px;user-select:none;position:relative;z-index:1}

.vkclh__bc-item{color:var(--w100);background:var(--w04);font-weight:700}



/* =======================================

   EYEBROW

   ======================================= */

.vkclh__eye{

  display:inline-flex;align-items:center;gap:10px;

  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;

  color:var(--lime);margin-bottom:18px;

  padding:6px 16px 6px 12px;

  background:linear-gradient(145deg,var(--lime12),var(--lime08));

  border:1px solid var(--lime15);border-radius:100px;

  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);

  position:relative;overflow:hidden;

}

.vkclh__eye::after{content:'';position:absolute;top:0;left:-60%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(170,255,0,.1),transparent);animation:vkclhEShim 5s ease-in-out infinite 1s;pointer-events:none}

@keyframes vkclhEShim{0%,100%{left:-60%}50%{left:100%}}

.vkclh__dot{width:6px;height:6px;background:var(--lime);border-radius:50%;flex-shrink:0;box-shadow:0 0 8px rgba(170,255,0,.6),0 0 16px rgba(170,255,0,.3);animation:vkclhDP 2s ease-in-out infinite}

@keyframes vkclhDP{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 8px rgba(170,255,0,.6),0 0 16px rgba(170,255,0,.3)}50%{opacity:.5;transform:scale(.6);box-shadow:0 0 4px rgba(170,255,0,.3)}}



/* =======================================

   TITLE

   ======================================= */

.vkclh__title{

  font-family:'Bebas Neue','Impact',sans-serif;

  font-size:clamp(52px,9vw,120px);line-height:.88;letter-spacing:.04em;

  text-transform:uppercase;margin:0;position:relative;display:inline-block;

  word-break:break-word;

}

.vkclh__tm{

  background:linear-gradient(135deg,#fff 0%,#f0f0f0 20%,#fff 45%,var(--lime) 80%,#CCFF44 100%);

  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:1;

}

.vkclh__ts{

  position:absolute;inset:0;

  background:linear-gradient(105deg,transparent 25%,rgba(170,255,0,.28) 46%,rgba(255,255,255,.2) 54%,transparent 75%);

  background-size:300% 100%;

  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;

  animation:vkclhTShim 5s ease-in-out infinite;z-index:2;pointer-events:none;

}

@keyframes vkclhTShim{0%,100%{background-position:300% center}50%{background-position:-100% center}}

.vkclh__title::after{content:attr(data-text);position:absolute;inset:0;font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--lime);filter:blur(40px);opacity:.14;z-index:0;pointer-events:none}



/* -- Animated underline bar -- */

.vkclh__uline{display:block;margin-top:12px;height:3px;position:relative;border-radius:3px;overflow:hidden;max-width:300px}

.vkclh__uline::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--lime),var(--cyan),var(--red),var(--lime));background-size:300% 100%;animation:vkclhULine 4s linear infinite;border-radius:3px}

.vkclh__uline::after{content:'';position:absolute;inset:-2px;background:linear-gradient(90deg,var(--lime),var(--cyan),var(--red),var(--lime));background-size:300% 100%;animation:vkclhULine 4s linear infinite;filter:blur(8px);opacity:.5;border-radius:3px}

@keyframes vkclhULine{0%{background-position:0% 50%}100%{background-position:300% 50%}}



/* =======================================

   META ROW

   ======================================= */

.vkclh__meta{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}

.vkclh__cnt{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;background:linear-gradient(145deg,var(--lime08),var(--w02));border:1px solid var(--lime15);border-radius:100px;font-size:12px;font-weight:700;color:var(--lime);letter-spacing:.03em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.vkclh__cnt-dot{width:5px;height:5px;background:var(--lime);border-radius:50%;box-shadow:0 0 6px rgba(170,255,0,.5);animation:vkclhDP 2.5s ease-in-out infinite .5s}

.vkclh__meta-sep{width:3px;height:3px;background:var(--g4);border-radius:50%;flex-shrink:0}

.vkclh__desc{font-size:14px;color:var(--g2);line-height:1.85;margin:0;max-width:520px;letter-spacing:.005em}



/* =======================================

   STAT CARDS

   ======================================= */

@property --vkclh-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

.vkclh__stats{display:flex;align-items:stretch;gap:10px;padding:26px 0 0;border-top:1px solid var(--b2);flex-wrap:wrap}

.vkclh__stat{

  display:flex;align-items:center;gap:12px;padding:12px 18px;flex:1 1 0;min-width:130px;

  background:var(--card);border:1px solid rgba(170,255,0,.07);border-radius:var(--r);

  transition:all .35s var(--easeBounce);position:relative;overflow:hidden;

}

.vkclh__stat::before{content:'';position:absolute;inset:-1px;border-radius:var(--r);background:conic-gradient(from var(--vkclh-angle,0deg),transparent 40%,var(--lime25) 50%,transparent 60%);opacity:0;transition:opacity .4s ease;z-index:-1}

.vkclh__stat::after{content:'';position:absolute;inset:1px;border-radius:calc(var(--r) - 1px);background:var(--card);z-index:-1}

.vkclh__stat:hover{border-color:transparent;transform:translateY(-3px);box-shadow:0 4px 24px rgba(170,255,0,.08),0 8px 32px rgba(0,0,0,.4)}

.vkclh__stat:hover::before{opacity:1;animation:vkclhStatBorder 3s linear infinite}

@keyframes vkclhStatBorder{to{--vkclh-angle:360deg}}

.vkclh__stat-shim{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(170,255,0,.06),transparent);pointer-events:none;transition:left .6s ease}

.vkclh__stat:hover .vkclh__stat-shim{left:100%}

.vkclh__si{

  width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;

  background:linear-gradient(145deg,var(--lime10),rgba(170,255,0,.03));border:1px solid rgba(170,255,0,.08);

  transition:all .35s ease;position:relative;

}

.vkclh__si::after{content:'';position:absolute;inset:-4px;border-radius:14px;background:radial-gradient(circle,rgba(170,255,0,.08),transparent 70%);opacity:0;transition:opacity .35s ease}

.vkclh__stat:hover .vkclh__si{background:linear-gradient(145deg,rgba(170,255,0,.18),rgba(170,255,0,.06));border-color:var(--lime20)}

.vkclh__stat:hover .vkclh__si::after{opacity:1}

.vkclh__si svg{width:15px;height:15px;stroke:var(--lime);fill:none;filter:drop-shadow(0 0 3px rgba(170,255,0,.15));transition:filter .3s ease}

.vkclh__stat:hover .vkclh__si svg{filter:drop-shadow(0 0 8px rgba(170,255,0,.35))}

.vkclh__sd{display:flex;flex-direction:column;gap:2px;min-width:0}

.vkclh__sn{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--w100);line-height:1;letter-spacing:.02em;transition:all .3s ease;white-space:nowrap}

.vkclh__stat:hover .vkclh__sn{color:var(--lime);text-shadow:0 0 20px rgba(170,255,0,.15)}

.vkclh__sl{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(170,255,0,.45);transition:color .3s}

.vkclh__stat:hover .vkclh__sl{color:rgba(170,255,0,.7)}



/* -- RED VARIANT -- */

.vkclh__stat--red{border-color:var(--red10);background:linear-gradient(145deg,var(--red06),var(--card))}

.vkclh__stat--red::before{background:conic-gradient(from var(--vkclh-angle,0deg),transparent 40%,var(--red25) 50%,transparent 60%)}

.vkclh__stat--red::after{background:linear-gradient(145deg,rgba(255,68,68,.02),var(--card))}

.vkclh__stat--red:hover{box-shadow:0 4px 24px rgba(255,68,68,.1),0 8px 32px rgba(0,0,0,.4)}

.vkclh__stat--red .vkclh__si{background:linear-gradient(145deg,var(--red12),rgba(255,68,68,.03));border-color:var(--red10)}

.vkclh__stat--red:hover .vkclh__si{background:linear-gradient(145deg,rgba(255,68,68,.2),rgba(255,68,68,.06));border-color:var(--red20)}

.vkclh__stat--red .vkclh__si::after{background:radial-gradient(circle,rgba(255,68,68,.1),transparent 70%)}

.vkclh__stat--red .vkclh__si svg{stroke:var(--red);filter:drop-shadow(0 0 3px rgba(255,68,68,.2))}

.vkclh__stat--red:hover .vkclh__si svg{filter:drop-shadow(0 0 8px rgba(255,68,68,.4))}

.vkclh__stat--red .vkclh__sn{color:var(--red)}

.vkclh__stat--red:hover .vkclh__sn{color:#ff6666;text-shadow:0 0 20px rgba(255,68,68,.2)}

.vkclh__stat--red .vkclh__sl{color:rgba(255,68,68,.5)}

.vkclh__stat--red:hover .vkclh__sl{color:rgba(255,68,68,.75)}

.vkclh__stat--red .vkclh__stat-shim{background:linear-gradient(90deg,transparent,rgba(255,68,68,.06),transparent)}



/* =======================================

   SCROLL CTA (desktop only)

   ======================================= */

.vkclh__scroll{display:none;align-items:center;gap:10px;margin-top:28px;color:var(--g3);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

@media(min-width:1024px){.vkclh__scroll{display:flex}}

.vkclh__scroll-line{width:32px;height:1px;background:linear-gradient(90deg,var(--lime40),transparent);flex-shrink:0}

.vkclh__scroll-arrow{width:16px;height:16px;stroke:var(--lime);fill:none;animation:vkclhBounce 2s ease-in-out infinite;opacity:.5}

@keyframes vkclhBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}



/* =======================================

   REVEAL SYSTEM

   ======================================= */

.vkclh__rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}

.vkclh__rv.is-vis{opacity:1;transform:translateY(0)}

.vkclh__rv[data-d="1"]{transition-delay:.1s}

.vkclh__rv[data-d="2"]{transition-delay:.2s}

.vkclh__rv[data-d="3"]{transition-delay:.35s}

.vkclh__rv[data-d="4"]{transition-delay:.5s}

.vkclh__rv[data-d="5"]{transition-delay:.65s}

.vkclh__rv[data-d="6"]{transition-delay:.8s}

.vkclh__rv[data-d="7"]{transition-delay:.95s}



/* =======================================

   RESPONSIVE

   ======================================= */

@media(max-width:1100px){

  .vkclh__corner{width:30px;height:30px}

}

@media(max-width:1023px){

  .vkclh__hero-inner{padding:48px 24px 56px}

  .vkclh__left{text-align:left}

}

@media(max-width:768px){

  .vkclh__hero-inner{padding:40px 20px 44px}

  .vkclh__stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}

  .vkclh__stat{padding:10px 14px;gap:10px;flex:unset;min-width:0}

  .vkclh__stat:last-child:nth-child(odd){grid-column:1 / -1;max-width:220px;justify-self:center}

  .vkclh__stat:hover{transform:none;box-shadow:none}

  .vkclh__desc{font-size:13px}

  .vkclh__title{font-size:clamp(44px,8vw,80px)}

  .vkclh__orb--1{width:300px;height:300px;top:-150px;left:-80px}

  .vkclh__orb--2{width:250px;height:250px}

  .vkclh__orb--3{width:180px;height:180px}

  .vkclh__orb--4{width:200px;height:200px}

  .vkclh__spot{width:280px;height:160px}

  .vkclh__corner{width:24px;height:24px;opacity:.1}

  .vkclh__corner--tl{top:10px;left:10px}

  .vkclh__corner--tr{top:10px;right:10px}

  .vkclh__corner--bl{bottom:10px;left:10px}

  .vkclh__corner--br{bottom:10px;right:10px}

  .vkclh__si{width:28px;height:28px;border-radius:7px}

  .vkclh__si svg{width:13px;height:13px}

  .vkclh__sn{font-size:20px}

  .vkclh__sl{font-size:7.5px;letter-spacing:.1em}

}

@media(max-width:480px){

  .vkclh__hero-inner{padding:28px 16px 32px}

  .vkclh__title{font-size:clamp(40px,10vw,56px)}

  .vkclh__si{width:26px;height:26px;border-radius:6px}

  .vkclh__si svg{width:12px;height:12px}

  .vkclh__sn{font-size:18px}

  .vkclh__sl{font-size:7px;letter-spacing:.08em}

  .vkclh__stat{padding:10px 12px;gap:8px}

  .vkclh__bread{margin-bottom:20px;padding:3px}

  .vkclh__bl,.vkclh__bc-item{font-size:8px;padding:3px 7px;letter-spacing:.08em}

  .vkclh__uline{max-width:160px}

  .vkclh__corner{display:none}

  .vkclh__accent{display:none}

}

@media(max-width:360px){

  .vkclh__stats{grid-template-columns:1fr 1fr}

  .vkclh__particles{display:none}

}

@media(prefers-reduced-motion:reduce){

  .vkclh::before,.vkclh__orb,.vkclh__scan,.vkclh__p{animation:none !important;opacity:0 !important}

  .vkclh__eye::after,.vkclh__bread::after,.vkclh__ts,.vkclh__uline::before,.vkclh__uline::after{animation:none !important}

  .vkclh__dot,.vkclh__cnt-dot{animation:none !important}

  .vkclh__ring,.vkclh__dash,.vkclh__pulse,.vkclh__badge,.vkclh__scroll-arrow{animation:none !important}

  .vkclh__rv{opacity:1 !important;transform:none !important;transition-duration:.01s !important;transition-delay:0s !important}

  .vkclh__stat{transition:none !important}

}