/* ==========================================================================
   VIKSTECH — Front-end enterprise
   Foglio di stile principale — TEMA CHIARO (light) con accenti hi-tech
   --------------------------------------------------------------------------
   Indice:
   01. Design tokens (variabili CSS)
   02. Reset / base
   03. Tipografia & utility
   04. Bottoni & CTA
   05. Navbar / Header
   06. Hero
   07. Sezioni generiche
   08. Card (soluzioni, settori, servizi, case study)
   09. Processo di lavoro (timeline)
   10. Tabelle specifiche tecniche
   11. Form & lead generation
   12. Banner / blocchi CTA
   13. Footer
   14. Elementi flottanti (WhatsApp, scroll-top)
   15. Microanimazioni & reveal on scroll
   16. Responsive / media query
   --------------------------------------------------------------------------
   NOTA: tutti i contenuti testuali stanno nel markup HTML, mai nel CSS.
         Il markup non è stato modificato: il restyling agisce solo sui colori,
         sulle superfici e su pochi trattamenti dei componenti.
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Palette di base */
  --vk-black:        #05070d;
  --vk-navy:         #0a1733;   /* blu scuro (testi/accenti scuri) */
  --vk-navy-2:       #0b1f3a;
  --vk-anthracite:   #1c212b;   /* grigio antracite */
  --vk-white:        #ffffff;
  --vk-gray-50:      #f8fafd;
  --vk-gray-100:     #f3f6fc;   /* superfici alternate chiare */
  --vk-gray-200:     #e7ecf5;
  --vk-gray-300:     #d7deeb;
  --vk-gray-400:     #aeb7c8;
  --vk-gray-500:     #7b869a;

  /* Accent hi-tech */
  --vk-blue:         #1e6bff;   /* blu elettrico */
  --vk-blue-600:     #1659e0;
  --vk-cyan:         #0891b2;   /* cyan tecnologico leggibile su chiaro */
  --vk-cyan-bright:  #00d4ff;   /* cyan vivido per gradienti su superfici scure */

  /* Semantici (LIGHT) */
  --vk-bg:           #ffffff;
  --vk-bg-alt:       #f3f6fc;
  --vk-surface:      #ffffff;
  --vk-surface-2:    #f3f6fc;
  --vk-border:       rgba(10, 23, 51, 0.10);
  --vk-border-strong:rgba(10, 23, 51, 0.16);
  --vk-text:         #34405a;   /* corpo testo */
  --vk-text-muted:   #5d6880;
  --vk-heading:      #0a1733;

  /* Gradienti (endpoint vividi fissi: restano brillanti ovunque) */
  --vk-grad-accent:  linear-gradient(135deg, #1e6bff 0%, #00d4ff 100%);
  --vk-grad-dark:    linear-gradient(160deg, #0c1c3d 0%, #060b18 75%);   /* card hero / device mockup */
  --vk-grad-hero:    linear-gradient(180deg, #eef4ff 0%, #ffffff 72%);   /* sfondo hero chiaro */
  --vk-grad-glow:    radial-gradient(60% 60% at 50% 0%, rgba(30,107,255,.14) 0%, rgba(255,255,255,0) 70%);
  --vk-grad-soft:    radial-gradient(80% 100% at 100% 0%, rgba(30,107,255,.07), transparent 60%);

  /* Tipografia */
  --vk-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout */
  --vk-radius:    14px;
  --vk-radius-lg: 22px;
  --vk-shadow:    0 18px 44px rgba(10, 23, 51, .12);
  --vk-shadow-sm: 0 6px 18px rgba(10, 23, 51, .07);
  --vk-shadow-accent: 0 14px 34px rgba(30, 107, 255, .26);
  --vk-maxw:      1240px;

  /* Bootstrap override per coerenza con il tema */
  --bs-primary:   #1e6bff;
  --bs-body-font-family: var(--vk-font-sans);
}

/* ==========================================================================
   02. RESET / BASE
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--vk-font-sans);
  color: var(--vk-text);
  background-color: var(--vk-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vk-blue); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--vk-blue-600); }

::selection { background: var(--vk-blue); color: #fff; }

/* Scrollbar (sobria, chiara) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--vk-gray-100); }
::-webkit-scrollbar-thumb { background: var(--vk-gray-300); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--vk-gray-400); }

/* ==========================================================================
   03. TIPOGRAFIA & UTILITY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--vk-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
p { margin: 0 0 1rem; }

.vk-container { max-width: var(--vk-maxw); margin-inline: auto; padding-inline: 1.25rem; }

.vk-text-muted   { color: var(--vk-text-muted) !important; }
.vk-text-accent  { color: var(--vk-cyan) !important; }
.vk-text-gradient {
  background: var(--vk-grad-accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Eyebrow / kicker */
.vk-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vk-blue);
  margin-bottom: 1rem;
}
.vk-eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--vk-grad-accent); border-radius: 2px;
}

.vk-lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--vk-text-muted); max-width: 60ch; }

/* Section heading wrapper centrato */
.vk-section-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.vk-section-head .vk-eyebrow { justify-content: center; }

/* ==========================================================================
   04. BOTTONI & CTA
   ========================================================================== */
.btn { font-weight: 700; border-radius: 10px; padding: .8rem 1.5rem; transition: all .22s ease; }

.btn-vk-primary {
  background: var(--vk-grad-accent);
  color: #fff; border: none;
  box-shadow: var(--vk-shadow-accent);
}
.btn-vk-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 44px rgba(30,107,255,.42); }

/* Outline su tema chiaro: bordo blu, testo blu */
.btn-vk-outline {
  background: #fff; color: var(--vk-blue);
  border: 1px solid var(--vk-border-strong);
}
.btn-vk-outline:hover { background: rgba(30,107,255,.06); border-color: var(--vk-blue); color: var(--vk-blue-600); transform: translateY(-2px); }

.btn-vk-ghost { background: transparent; color: var(--vk-blue); border: none; padding-inline: .35rem; font-weight: 700; }
.btn-vk-ghost:hover { color: var(--vk-blue-600); }
.btn-vk-ghost .bi { transition: transform .2s ease; }
.btn-vk-ghost:hover .bi { transform: translateX(4px); }

.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }

/* ==========================================================================
   05. NAVBAR / HEADER
   ========================================================================== */
.vk-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--vk-border);
  transition: background .3s ease, box-shadow .3s ease;
}
.vk-header.vk-scrolled { background: rgba(255,255,255,.96); box-shadow: 0 8px 26px rgba(10,23,51,.10); }

.vk-navbar { padding-block: .85rem; }
.vk-brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.3rem; color: var(--vk-heading); letter-spacing: -.01em; }
.vk-brand:hover { color: var(--vk-heading); }
.vk-brand-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--vk-grad-accent); display: grid; place-items: center;
  box-shadow: var(--vk-shadow-accent); color: #fff; font-size: 1.15rem;
}
.vk-brand small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .22em; color: var(--vk-blue); text-transform: uppercase; }

.vk-header .navbar-nav .nav-link {
  color: var(--vk-text); font-weight: 600; padding-inline: .95rem; position: relative;
}
.vk-header .navbar-nav .nav-link:hover,
.vk-header .navbar-nav .nav-link.active { color: var(--vk-heading); }
.vk-header .navbar-nav .nav-link.active::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: 2px; height: 2px;
  background: var(--vk-grad-accent); border-radius: 2px;
}

.vk-header .dropdown-menu {
  background: #fff; border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius); box-shadow: var(--vk-shadow); padding: .5rem;
}
.vk-header .dropdown-item { color: var(--vk-text); border-radius: 8px; padding: .6rem .85rem; font-weight: 500; }
.vk-header .dropdown-item:hover { background: rgba(30,107,255,.10); color: var(--vk-heading); }
.vk-header .dropdown-item .bi { color: var(--vk-cyan); margin-right: .55rem; }

/* Toggler con icona scura (no variante navbar nel markup) */
.navbar-toggler { border-color: var(--vk-border-strong); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(30,107,255,.25); }
.vk-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2810,23,51,.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   06. HERO
   ========================================================================== */
.vk-hero {
  position: relative; overflow: hidden;
  background: var(--vk-grad-hero);
  border-bottom: 1px solid var(--vk-border);
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.vk-hero::before { content: ""; position: absolute; inset: 0; background: var(--vk-grad-glow); pointer-events: none; }
.vk-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: linear-gradient(rgba(30,107,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(30,107,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%);
}
.vk-hero > .vk-container, .vk-hero > .container { position: relative; z-index: 2; }

.vk-hero h1 { margin-bottom: 1.1rem; }
.vk-hero .vk-lead { margin-bottom: 2rem; color: var(--vk-text); }

/* Visual del hero (mockup totem) — resta scuro: è l'accento "device" hi-tech.
   Mantiene leggibili testo bianco e icone cyan presenti nel markup. */
.vk-hero-visual {
  position: relative; border-radius: var(--vk-radius-lg);
  background: var(--vk-grad-dark);
  border: 1px solid rgba(255,255,255,.06); box-shadow: var(--vk-shadow);
  aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden;
}
.vk-hero-visual::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 40% at 50% 20%, rgba(0,212,255,.20), transparent 70%);
}

/* Statistiche hero */
.vk-stats { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 2.5rem; }
.vk-stat .vk-stat-num { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; color: var(--vk-heading); line-height: 1; }
.vk-stat .vk-stat-num span { background: var(--vk-grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vk-stat .vk-stat-label { font-size: .85rem; color: var(--vk-text-muted); margin-top: .35rem; }

/* Strip loghi / trust */
.vk-trust { background: var(--vk-gray-50); border-top: 1px solid var(--vk-border); border-bottom: 1px solid var(--vk-border); }
.vk-trust .vk-trust-item { color: var(--vk-gray-500); font-weight: 700; letter-spacing: .05em; }

/* ==========================================================================
   07. SEZIONI GENERICHE
   ========================================================================== */
.vk-section { padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; }
.vk-section--alt { background: var(--vk-bg-alt); }
.vk-section--surface { background: var(--vk-gray-50); }
.vk-section--soft { background: var(--vk-grad-soft), var(--vk-bg); }

.vk-divider { height: 1px; background: var(--vk-border); border: 0; margin: 0; }

/* Breadcrumb (tema chiaro) */
.breadcrumb { --bs-breadcrumb-divider-color: var(--vk-gray-400); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--vk-gray-400); }
.breadcrumb-item a { color: var(--vk-text-muted); }
.breadcrumb-item a:hover { color: var(--vk-blue); }
.breadcrumb-item.active { color: var(--vk-text-muted) !important; }

/* ==========================================================================
   08. CARD
   ========================================================================== */
.vk-card {
  position: relative; height: 100%;
  background: var(--vk-surface);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius);
  padding: 1.9rem;
  box-shadow: var(--vk-shadow-sm);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.vk-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--vk-grad-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.vk-card:hover { transform: translateY(-6px); border-color: rgba(30,107,255,.35); box-shadow: var(--vk-shadow); }
.vk-card:hover::before { transform: scaleX(1); }

/* Card impilate nella stessa colonna (es. colonna contatti):
   non devono stirarsi all'altezza della colonna, ma adattarsi al contenuto.
   I grid con una card per colonna (only-child) mantengono l'altezza uniforme. */
.vk-card:not(:only-child) { height: auto; }

.vk-card-icon {
  width: 56px; height: 56px; border-radius: 13px; display: grid; place-items: center;
  font-size: 1.5rem; color: var(--vk-blue); margin-bottom: 1.2rem;
  background: rgba(30,107,255,.10); border: 1px solid rgba(30,107,255,.18);
}
.vk-card h3 { font-size: 1.25rem; }
.vk-card p { color: var(--vk-text-muted); margin-bottom: 1rem; }

/* Card soluzione con immagine/figura — figura scura come accento tech */
.vk-card--solution { padding: 0; }
.vk-card--solution .vk-card-figure {
  aspect-ratio: 16/10; background: var(--vk-grad-dark);
  display: grid; place-items: center; color: rgba(0,212,255,.75); font-size: 2.6rem;
  border-bottom: 1px solid var(--vk-border);
}
.vk-card--solution .vk-card-body { padding: 1.6rem 1.7rem 1.8rem; }

/* Card "perché sceglierci" minimale */
.vk-feature { display: flex; gap: 1rem; }
.vk-feature .vk-feature-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.25rem; color: var(--vk-blue); background: rgba(30,107,255,.10); border: 1px solid rgba(30,107,255,.18);
}
.vk-feature h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.vk-feature p { color: var(--vk-text-muted); margin: 0; font-size: .96rem; }

/* Settori — pill/card compatte */
.vk-sector {
  display: flex; align-items: center; gap: .85rem; height: 100%;
  background: var(--vk-surface); border: 1px solid var(--vk-border); border-radius: 12px;
  padding: 1.05rem 1.15rem; font-weight: 700; color: var(--vk-heading);
  box-shadow: var(--vk-shadow-sm);
  transition: all .22s ease;
}
.vk-sector .bi { font-size: 1.4rem; color: var(--vk-blue); }
.vk-sector:hover { border-color: rgba(30,107,255,.40); transform: translateY(-3px); color: var(--vk-heading); background: var(--vk-gray-50); }

/* ==========================================================================
   09. PROCESSO DI LAVORO (timeline)
   ========================================================================== */
.vk-steps { counter-reset: step; }
.vk-step {
  position: relative; height: 100%;
  background: var(--vk-surface); border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius); padding: 2.4rem 1.6rem 1.7rem;
  box-shadow: var(--vk-shadow-sm);
}
.vk-step .vk-step-num {
  position: absolute; top: -22px; left: 1.6rem;
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: var(--vk-grad-accent); box-shadow: var(--vk-shadow-accent);
}
.vk-step h3 { font-size: 1.15rem; margin-top: .5rem; }
.vk-step p { color: var(--vk-text-muted); font-size: .95rem; margin: 0; }

/* ==========================================================================
   10. TABELLE SPECIFICHE TECNICHE
   ========================================================================== */
.vk-spec-table { width: 100%; border-collapse: collapse; border-radius: var(--vk-radius); overflow: hidden; border: 1px solid var(--vk-border); box-shadow: var(--vk-shadow-sm); }
.vk-spec-table th, .vk-spec-table td { padding: .95rem 1.2rem; text-align: left; border-bottom: 1px solid var(--vk-border); vertical-align: top; }
.vk-spec-table tr:last-child th, .vk-spec-table tr:last-child td { border-bottom: 0; }
.vk-spec-table th { width: 38%; background: var(--vk-gray-100); color: var(--vk-heading); font-weight: 700; }
.vk-spec-table td { background: var(--vk-surface); color: var(--vk-text-muted); }
.vk-spec-table tr:hover td { color: var(--vk-text); background: var(--vk-gray-50); }

/* ==========================================================================
   11. FORM & LEAD GENERATION
   ========================================================================== */
.vk-form-card {
  background: var(--vk-surface); border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius-lg); padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--vk-shadow);
}
.vk-form-card .form-label { color: var(--vk-heading); font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.vk-form-card .form-control,
.vk-form-card .form-select {
  background: #fff; border: 1px solid var(--vk-border-strong); color: var(--vk-text);
  border-radius: 10px; padding: .75rem .9rem;
}
.vk-form-card .form-control::placeholder { color: var(--vk-gray-400); }
.vk-form-card .form-control:focus,
.vk-form-card .form-select:focus {
  background: #fff; color: var(--vk-heading); border-color: var(--vk-blue);
  box-shadow: 0 0 0 .2rem rgba(30,107,255,.18);
}
.vk-form-card .form-check-input { background-color: #fff; border-color: var(--vk-border-strong); }
.vk-form-card .form-check-input:checked { background-color: var(--vk-blue); border-color: var(--vk-blue); }

.vk-form-feedback { display: none; margin-top: 1rem; padding: .85rem 1rem; border-radius: 10px; font-weight: 600; }
.vk-form-feedback.is-ok    { display: block; background: rgba(8,145,178,.10); color: #0b7a96; border: 1px solid rgba(8,145,178,.28); }
.vk-form-feedback.is-error { display: block; background: rgba(220,53,69,.08); color: #c22a3a; border: 1px solid rgba(220,53,69,.28); }

/* Accordion FAQ (tema chiaro) */
.vk-accordion .accordion-item { background: var(--vk-surface); border: 1px solid var(--vk-border); border-radius: var(--vk-radius); margin-bottom: .8rem; overflow: hidden; box-shadow: var(--vk-shadow-sm); }
.vk-accordion .accordion-button {
  background: var(--vk-surface); color: var(--vk-heading); font-weight: 700; box-shadow: none;
}
.vk-accordion .accordion-button:not(.collapsed) { background: var(--vk-gray-100); color: var(--vk-heading); }
.vk-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(30,107,255,.18); }
.vk-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e6bff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.vk-accordion .accordion-body { color: var(--vk-text-muted); }

/* ==========================================================================
   12. BANNER / BLOCCHI CTA — versione chiara con bagliore tech
   ========================================================================== */
.vk-cta-banner {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, #eef3ff 0%, #ffffff 60%);
  border: 1px solid rgba(30,107,255,.22);
  border-radius: var(--vk-radius-lg); padding: clamp(2.5rem, 5vw, 4rem);
  box-shadow: var(--vk-shadow-sm);
}
.vk-cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(30,107,255,.12), transparent 70%);
}
.vk-cta-banner > * { position: relative; z-index: 2; }
.vk-cta-banner h2 { margin-bottom: 1rem; }

.vk-cta-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ==========================================================================
   13. FOOTER — chiaro
   ========================================================================== */
.vk-footer { background: var(--vk-gray-100); border-top: 1px solid var(--vk-border); padding-top: 4rem; }
.vk-footer h4 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vk-gray-500); margin-bottom: 1.2rem; }
.vk-footer a { color: var(--vk-text-muted); display: inline-block; padding: .25rem 0; }
.vk-footer a:hover { color: var(--vk-blue); }
.vk-footer .vk-footer-about { color: var(--vk-text-muted); max-width: 34ch; }
.vk-footer-bottom { border-top: 1px solid var(--vk-border); margin-top: 3rem; padding-block: 1.5rem; color: var(--vk-gray-500); font-size: .88rem; }
.vk-social { display: flex; gap: .6rem; }
.vk-social a {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--vk-border); color: var(--vk-text-muted);
}
.vk-social a:hover { color: var(--vk-blue); border-color: var(--vk-blue); background: rgba(30,107,255,.08); }

/* ==========================================================================
   14. ELEMENTI FLOTTANTI
   ========================================================================== */
.vk-float { position: fixed; right: 20px; z-index: 1040; }
.vk-whatsapp {
  bottom: 22px; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.7rem;
  box-shadow: 0 10px 30px rgba(37,211,102,.40); transition: transform .2s ease;
}
.vk-whatsapp:hover { transform: scale(1.08); color: #fff; }
.vk-scrolltop {
  bottom: 92px; width: 48px; height: 48px; border-radius: 12px;
  background: #fff; border: 1px solid var(--vk-border-strong); color: var(--vk-text);
  display: grid; place-items: center; font-size: 1.2rem; opacity: 0; pointer-events: none;
  box-shadow: var(--vk-shadow-sm);
  transition: opacity .25s ease, transform .2s ease;
}
.vk-scrolltop.is-visible { opacity: 1; pointer-events: auto; }
.vk-scrolltop:hover { color: var(--vk-blue); border-color: var(--vk-blue); transform: translateY(-3px); }

/* ==========================================================================
   15. MICROANIMAZIONI & REVEAL ON SCROLL
   ========================================================================== */
.vk-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.vk-reveal.is-visible { opacity: 1; transform: none; }
.vk-reveal[data-delay="1"] { transition-delay: .08s; }
.vk-reveal[data-delay="2"] { transition-delay: .16s; }
.vk-reveal[data-delay="3"] { transition-delay: .24s; }
.vk-reveal[data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vk-reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .vk-header .navbar-collapse {
    background: #fff; border: 1px solid var(--vk-border);
    border-radius: var(--vk-radius); margin-top: .8rem; padding: 1rem;
    box-shadow: var(--vk-shadow);
  }
  .vk-header .navbar-nav .nav-link.active::after { display: none; }
  .vk-header .dropdown-menu { background: transparent; border: 0; box-shadow: none; padding-left: 1rem; }
  .vk-hero-cta, .vk-cta-actions { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .vk-stats { gap: 1.4rem; }
  .vk-float.vk-whatsapp { width: 52px; height: 52px; font-size: 1.5rem; }
}