/* ════════════════════════════════════════════

   VK COLLECTION SEO — ULTRA PREMIUM v4

   ════════════════════════════════════════════ */



.vk-cseo{

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

  --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);

  --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);

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

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

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

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

  --r:12px;--ease:cubic-bezier(0.22,1,0.36,1);--easeBounce:cubic-bezier(0.25,0.46,0.45,0.94);

}



.vk-cseo{

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

  padding:64px 0 72px;overflow:hidden;

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

  -webkit-font-smoothing:antialiased;color:#fff;

}

.vk-cseo *,.vk-cseo *::before,.vk-cseo *::after{box-sizing:border-box;}



/* ═══════════════════════════════════════════

   ANIMATED GRADIENT TOP LINE (lime + red + cyan)

   ═══════════════════════════════════════════ */

.vk-cseo__line{

  position:absolute;top:0;left:0;right:0;height:1px;z-index:10;

  background:linear-gradient(90deg,

    transparent 0%,#AAFF00 15%,#ff4444 30%,#00e5ff 45%,

    #AAFF00 60%,#ff4444 75%,#AAFF00 90%,transparent 100%);

  background-size:200% 100%;

  animation:vkCSgradLine 6s linear infinite;opacity:0.4;

}

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



/* Bottom separator */

.vk-cseo__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:0.2;

}



/* ═══════════════════════════════════════════

   AMBIENT — ORBS (lime + red)

   ═══════════════════════════════════════════ */

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

.vk-cseo__orb{position:absolute;border-radius:50%;filter:blur(100px);}

.vk-cseo__orb--1{

  width:400px;height:400px;bottom:-180px;right:-60px;

  background:radial-gradient(circle,rgba(170,255,0,0.07) 0%,transparent 70%);

  opacity:0;animation:vkCSorb1 12s ease-in-out infinite;

}

.vk-cseo__orb--2{

  width:320px;height:320px;top:-120px;left:-80px;

  background:radial-gradient(circle,rgba(255,68,68,0.05) 0%,transparent 70%);

  opacity:0;animation:vkCSorb2 14s ease-in-out infinite 4s;

}

@keyframes vkCSorb1{0%,100%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}

@keyframes vkCSorb2{0%,100%{opacity:0;transform:translate(0,0) scale(.75)}50%{opacity:.8;transform:translate(15px,10px) scale(1.1)}}



/* Spotlight */

.vk-cseo__spot{

  position:absolute;top:20%;right:10%;width:400px;height:200px;

  background:radial-gradient(ellipse,rgba(170,255,0,.04) 0%,transparent 70%);

  z-index:0;pointer-events:none;filter:blur(60px);

}



/* ═══════════════════════════════════════════

   GEOMETRIC GRID + NOISE + SCANS

   ═══════════════════════════════════════════ */

.vk-cseo__grid{

  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0.02;

  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 70% 50%,#000 0%,transparent 60%);

  -webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 0%,transparent 60%);

}

.vk-cseo__noise{

  position:absolute;inset:0;z-index:1;opacity:0.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;

}

.vk-cseo__scan{

  position:absolute;top:0;width:45%;height:100%;z-index:2;pointer-events:none;

  background:linear-gradient(90deg,transparent,rgba(170,255,0,0.015),rgba(170,255,0,0.035),rgba(170,255,0,0.015),transparent);

}

.vk-cseo__scan--1{animation:vkCSscan1 14s ease-in-out infinite;}

.vk-cseo__scan--2{

  background:linear-gradient(90deg,transparent,rgba(255,68,68,0.01),rgba(255,68,68,0.025),rgba(255,68,68,0.01),transparent);

  animation:vkCSscan2 18s ease-in-out infinite 7s;opacity:0.5;

}

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

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



/* Particles */

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

.vk-cseo__p{

  position:absolute;width:2px;height:2px;background:var(--lime);

  border-radius:50%;opacity:0;animation:vkCSpart 8s ease-in-out infinite;

}

.vk-cseo__p:nth-child(1){left:15%;top:25%;animation-delay:0s;animation-duration:10s;}

.vk-cseo__p:nth-child(2){left:55%;top:60%;animation-delay:3s;animation-duration:12s;}

.vk-cseo__p:nth-child(3){left:80%;top:30%;animation-delay:5s;animation-duration:9s;}

.vk-cseo__p:nth-child(4){left:35%;top:75%;animation-delay:2s;animation-duration:11s;background:var(--red);}

@keyframes vkCSpart{0%,100%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:.35}50%{opacity:.5;transform:translateY(-25px) scale(1)}80%{opacity:.25}}



/* ═══════════════════════════════════════════

   CORNER ACCENTS

   ═══════════════════════════════════════════ */

.vk-cseo__corner{

  position:absolute;z-index:5;pointer-events:none;

  width:32px;height:32px;opacity:0.12;

}

.vk-cseo__corner--tl{top:14px;left:14px;border-top:1px solid var(--lime);border-left:1px solid var(--lime);}

.vk-cseo__corner--tr{top:14px;right:14px;border-top:1px solid var(--lime);border-right:1px solid var(--lime);}

.vk-cseo__corner--bl{bottom:14px;left:14px;border-bottom:1px solid var(--lime);border-left:1px solid var(--lime);}

.vk-cseo__corner--br{bottom:14px;right:14px;border-bottom:1px solid var(--red);border-right:1px solid var(--red);opacity:0.10;}



/* ═══════════════════════════════════════════

   INNER CONTAINER

   ═══════════════════════════════════════════ */

.vk-cseo__inner{

  max-width:1200px;margin:0 auto;padding:0 24px;

  position:relative;z-index:3;

}



/* ═══════════════════════════════════════════

   HEADER ROW — LABEL + TITLE + UNDERLINE

   ═══════════════════════════════════════════ */

.vk-cseo__head{margin-bottom:28px;}



/* Label pill */

.vk-cseo__label{

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

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

  color:var(--lime);padding:5px 14px 5px 11px;margin-bottom:14px;

  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;

}

.vk-cseo__label::after{

  content:'';position:absolute;top:0;left:-60%;width:60%;height:100%;

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

  animation:vkCSshim 6s ease-in-out infinite;pointer-events:none;

}

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



.vk-cseo__label-dot{

  width:5px;height:5px;background:var(--lime);border-radius:50%;flex-shrink:0;

  box-shadow:0 0 6px rgba(170,255,0,.5);

  animation:vkCSdot 2s ease-in-out infinite;

}

@keyframes vkCSdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.6)}}



/* Title */

.vk-cseo__title{

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

  font-size:clamp(28px,4vw,44px);

  letter-spacing:.04em;line-height:.95;margin:0;

  display:inline-block;position:relative;

  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;

}

/* Title glow */

.vk-cseo__title::after{

  content:attr(data-text);position:absolute;inset:0;

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

  color:var(--lime);filter:blur(30px);opacity:.1;z-index:-1;pointer-events:none;

}



/* Animated underline */

.vk-cseo__uline{

  display:block;margin-top:8px;height:2px;position:relative;

  border-radius:2px;overflow:hidden;max-width:200px;

}

.vk-cseo__uline::before{

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

  background:linear-gradient(90deg,var(--lime),var(--cyan),var(--red),var(--lime));

  background-size:300% 100%;

  animation:vkCSuline 4s linear infinite;border-radius:2px;

}

.vk-cseo__uline::after{

  content:'';position:absolute;inset:-2px;

  background:linear-gradient(90deg,var(--lime),var(--cyan),var(--red),var(--lime));

  background-size:300% 100%;

  animation:vkCSuline 4s linear infinite;

  filter:blur(6px);opacity:.4;border-radius:2px;

}

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



/* ═══════════════════════════════════════════

   MAIN CARD — ROTATING GRADIENT BORDER

   ═══════════════════════════════════════════ */

.vk-cseo__card{

  padding:28px 32px;

  background:var(--card);

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

  position:relative;overflow:hidden;

  transition:all .35s var(--ease);

}

/* Rotating conic border on hover */

.vk-cseo__card::before{

  content:'';position:absolute;inset:-1px;border-radius:var(--r);

  background:conic-gradient(from var(--cs-angle,0deg),transparent 30%,var(--lime25) 45%,var(--red15) 55%,transparent 70%);

  opacity:0;transition:opacity .4s ease;z-index:-1;

}

/* Inner bg mask */

.vk-cseo__card-bg{

  position:absolute;inset:1px;border-radius:calc(var(--r) - 1px);

  background:var(--card);z-index:-1;

}

/* Shimmer */

.vk-cseo__card-shim{

  position:absolute;top:0;left:-100%;width:100%;height:100%;

  background:linear-gradient(90deg,transparent,rgba(170,255,0,.04),transparent);

  transition:left .8s ease;pointer-events:none;

}

.vk-cseo__card:hover{

  border-color:transparent;

  box-shadow:0 4px 24px rgba(170,255,0,.06),0 8px 32px rgba(0,0,0,.3);

}

.vk-cseo__card:hover::before{opacity:1;animation:vkCSborder 3s linear infinite;}

.vk-cseo__card:hover .vk-cseo__card-shim{left:100%;}

@keyframes vkCSborder{to{--cs-angle:360deg;}}

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



/* Top accent line (static fallback) */

.vk-cseo__card-accent{

  position:absolute;top:0;left:0;right:0;height:1px;

  background:linear-gradient(90deg,transparent,var(--lime25) 30%,var(--red15) 70%,transparent);

  opacity:0.5;

}



/* ═══════════════════════════════════════════

   TEXT CONTENT

   ═══════════════════════════════════════════ */

.vk-cseo__text{

  font-size:13px;color:var(--g3);line-height:1.85;

  letter-spacing:.005em;margin:0;max-width:800px;

}



/* ═══════════════════════════════════════════

   TRUST MICRO-BADGES

   ═══════════════════════════════════════════ */

.vk-cseo__badges{

  display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;

}

.vk-cseo__badge{

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

  padding:6px 14px 6px 10px;

  background:var(--w02);border:1px solid var(--b1);border-radius:100px;

  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;

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

  transition:all .3s ease;

}

.vk-cseo__badge:hover{

  border-color:rgba(170,255,0,.15);color:var(--g2);

  background:var(--lime06);

}

.vk-cseo__badge-ic{

  width:20px;height:20px;border-radius:5px;flex-shrink:0;

  display:flex;align-items:center;justify-content:center;

  background:radial-gradient(circle at 35% 35%,var(--lime08),rgba(170,255,0,.02) 70%);

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

  transition:all .3s ease;

}

.vk-cseo__badge:hover .vk-cseo__badge-ic{

  background:radial-gradient(circle at 35% 35%,var(--lime12),rgba(170,255,0,.04) 70%);

  border-color:var(--lime15);

  box-shadow:0 0 8px rgba(170,255,0,.08);

}

.vk-cseo__badge-ic svg{

  width:10px;height:10px;stroke:var(--lime);fill:none;

  filter:drop-shadow(0 0 2px rgba(170,255,0,.15));

  transition:filter .3s ease;

}

.vk-cseo__badge:hover .vk-cseo__badge-ic svg{

  filter:drop-shadow(0 0 4px rgba(170,255,0,.3));

}



/* ── Red badge variant (21+) ── */

.vk-cseo__badge--red{

  border-color:var(--red08);

}

.vk-cseo__badge--red:hover{

  border-color:var(--red20);color:var(--g2);

  background:var(--red06);

}

.vk-cseo__badge--red .vk-cseo__badge-ic{

  background:radial-gradient(circle at 35% 35%,var(--red08),rgba(255,68,68,.02) 70%);

  border-color:var(--red08);

}

.vk-cseo__badge--red:hover .vk-cseo__badge-ic{

  background:radial-gradient(circle at 35% 35%,var(--red12),rgba(255,68,68,.04) 70%);

  border-color:var(--red15);

  box-shadow:0 0 8px rgba(255,68,68,.1);

}

.vk-cseo__badge--red .vk-cseo__badge-ic svg{

  stroke:var(--red);

  filter:drop-shadow(0 0 2px rgba(255,68,68,.2));

}

.vk-cseo__badge--red:hover .vk-cseo__badge-ic svg{

  filter:drop-shadow(0 0 4px rgba(255,68,68,.35));

}



/* ── Signature badge variant (red accent) ── */

.vk-cseo__badge--warn{border-color:rgba(255,68,68,.06);}

.vk-cseo__badge--warn:hover{

  border-color:var(--red15);background:var(--red06);

}

.vk-cseo__badge--warn .vk-cseo__badge-ic{

  background:radial-gradient(circle at 35% 35%,var(--red06),rgba(255,68,68,.02) 70%);

  border-color:rgba(255,68,68,.06);

}

.vk-cseo__badge--warn:hover .vk-cseo__badge-ic{

  background:radial-gradient(circle at 35% 35%,var(--red10),rgba(255,68,68,.03) 70%);

  border-color:var(--red12);box-shadow:0 0 6px rgba(255,68,68,.08);

}

.vk-cseo__badge--warn .vk-cseo__badge-ic svg{

  stroke:var(--red);filter:drop-shadow(0 0 2px rgba(255,68,68,.15));

}

.vk-cseo__badge--warn:hover .vk-cseo__badge-ic svg{

  filter:drop-shadow(0 0 4px rgba(255,68,68,.3));

}



/* ═══════════════════════════════════════════

   REVEAL SYSTEM

   ═══════════════════════════════════════════ */

.vk-cseo__rv{

  opacity:0;transform:translateY(20px);

  transition:opacity .7s var(--ease),transform .7s var(--ease);

}

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

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

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

.vk-cseo__rv[data-d="3"]{transition-delay:.3s}



/* ═══════════════════════════════════════════

   TABLET — 1024

   ═══════════════════════════════════════════ */

@media(max-width:1024px){

  .vk-cseo__card{padding:24px 28px;}

  .vk-cseo__corner{width:26px;height:26px;}

}



/* ═══════════════════════════════════════════

   MOBILE — 749

   ═══════════════════════════════════════════ */

@media(max-width:749px){

  .vk-cseo{padding:48px 0 56px;}

  .vk-cseo__inner{padding:0 16px;}

  .vk-cseo__head{margin-bottom:22px;}

  .vk-cseo__label{font-size:9px;padding:4px 12px 4px 9px;margin-bottom:12px;letter-spacing:.16em;}

  .vk-cseo__title{font-size:clamp(24px,5vw,34px);}

  .vk-cseo__uline{max-width:140px;margin-top:6px;}

  .vk-cseo__card{padding:20px 18px;border-radius:10px;}

  .vk-cseo__text{font-size:12px;line-height:1.8;}

  .vk-cseo__badges{gap:6px;margin-top:18px;}

  .vk-cseo__badge{font-size:8px;padding:5px 11px 5px 8px;gap:6px;letter-spacing:.08em;}

  .vk-cseo__badge-ic{width:18px;height:18px;border-radius:4px;}

  .vk-cseo__badge-ic svg{width:9px;height:9px;}

  .vk-cseo__orb--1{width:280px;height:280px;}

  .vk-cseo__orb--2{width:220px;height:220px;}

  .vk-cseo__spot{width:250px;height:140px;}

  .vk-cseo__corner{width:20px;height:20px;opacity:.08;}

  .vk-cseo__corner--tl{top:10px;left:10px;}

  .vk-cseo__corner--tr{top:10px;right:10px;}

  .vk-cseo__corner--bl{bottom:10px;left:10px;}

  .vk-cseo__corner--br{bottom:10px;right:10px;}

}



/* ═══════════════════════════════════════════

   SMALL — 480

   ═══════════════════════════════════════════ */

@media(max-width:480px){

  .vk-cseo{padding:40px 0 48px;}

  .vk-cseo__inner{padding:0 14px;}

  .vk-cseo__label{font-size:8px;padding:4px 10px 4px 8px;letter-spacing:.15em;}

  .vk-cseo__title{font-size:clamp(22px,5vw,30px);}

  .vk-cseo__uline{max-width:100px;}

  .vk-cseo__card{padding:16px 14px;}

  .vk-cseo__text{font-size:11px;line-height:1.75;}

  .vk-cseo__badges{gap:5px;margin-top:14px;}

  .vk-cseo__badge{font-size:7.5px;padding:4px 9px 4px 7px;}

  .vk-cseo__badge-ic{width:16px;height:16px;}

  .vk-cseo__badge-ic svg{width:8px;height:8px;}

  .vk-cseo__corner{display:none;}

  .vk-cseo__particles{display:none;}

}



/* ═══════════════════════════════════════════

   TINY — 360

   ═══════════════════════════════════════════ */

@media(max-width:360px){

  .vk-cseo__inner{padding:0 12px;}

  .vk-cseo__card{padding:14px 12px;}

  .vk-cseo__text{font-size:10.5px;}

  .vk-cseo__badge{font-size:7px;padding:3px 8px 3px 6px;}

}



/* ═══════════════════════════════════════════

   REDUCED MOTION

   ═══════════════════════════════════════════ */

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

  .vk-cseo__orb--1,.vk-cseo__orb--2,.vk-cseo__scan,

  .vk-cseo__label::after,.vk-cseo__label-dot,

  .vk-cseo__p,.vk-cseo__uline::before,.vk-cseo__uline::after,

  .vk-cseo__line{animation:none!important;}

  .vk-cseo__rv{transition-duration:.01s!important;transition-delay:0s!important;}

}