/* AdnanThemes V2 — "Vibrance" layer (13 Nov 2026).
   Adds depth, colour and restrained motion on top of the C2 tokens. Loaded last.
   All motion is disabled under prefers-reduced-motion; contrast checked on the dark bands. */
:root{
  --vb-night:#0c0a26;
  --vb-night-2:#16124a;
  --vb-ink-on-dark:#ffffff;
  --vb-text-on-dark:#d6d2ff;      /* 12.9:1 on --vb-night */
  --vb-muted-on-dark:#aaa4e6;     /* 7.9:1 */
  --vb-link-on-dark:#c4b5ff;      /* 10.6:1 */
  --vb-glow:0 10px 40px -8px rgba(109,74,255,.55);
  --vb-grad:linear-gradient(135deg,#6d4aff 0%,#8b5cf6 45%,#c026d3 100%);
  --vb-grad-text:linear-gradient(90deg,#a78bfa 0%,#f0abfc 50%,#67e8f9 100%);
}

/* ---------- Dark hero bands ---------- */
.atv2-hero,
.atv2-scope > .atv2-crumbs,
.atv2-scope > .atv2-pagehero,
.atv2-cathero{
  position:relative;isolation:isolate;color:var(--vb-text-on-dark);
  background:var(--vb-night);
  box-shadow:0 0 0 100vmax var(--vb-night);clip-path:inset(0 -100vmax);
}
.atv2-hero{
  background:
    radial-gradient(900px 520px at 85% 10%,rgba(139,92,246,.45),transparent 60%),
    radial-gradient(700px 480px at 5% 90%,rgba(34,211,238,.18),transparent 60%),
    radial-gradient(600px 400px at 50% 120%,rgba(192,38,211,.25),transparent 60%),
    var(--vb-night);
  box-shadow:none;clip-path:none;overflow:hidden;
}
.atv2-hero::before{ /* fine grid */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 70% at 60% 40%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 40%,#000 30%,transparent 75%);
}
.atv2-hero::after{ /* slow drifting glow */
  content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-120px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.55),transparent 65%);filter:blur(10px);
  animation:vb-drift 14s ease-in-out infinite alternate;pointer-events:none;
}
@keyframes vb-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-120px,90px,0) scale(1.15)}}

.atv2-hero .atv2-hero__title,
.atv2-scope > .atv2-pagehero h1,
.atv2-cathero h1{color:var(--vb-ink-on-dark)}
.atv2-hero__lead,.atv2-scope > .atv2-pagehero .atv2-lead,.atv2-cathero p{color:var(--vb-text-on-dark)}
.atv2-hero .atv2-grad{background:var(--vb-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.atv2-hero .atv2-kicker{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--vb-text-on-dark);backdrop-filter:blur(6px)}
.atv2-hero__proof li,.atv2-hero__proof{color:var(--vb-muted-on-dark)}
.atv2-hero__proof .atv2-ico{color:#67e8f9}
.atv2-hero .atv2-btn--secondary,
.atv2-scope > .atv2-pagehero .atv2-btn--secondary,
.atv2-cathero .atv2-btn--secondary{background:rgba(255,255,255,.06)!important;color:#fff!important;border-color:rgba(255,255,255,.4)!important}
.atv2-hero .atv2-btn--secondary:hover,
.atv2-scope > .atv2-pagehero .atv2-btn--secondary:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* Product shots float with glow */
.atv2-hero__art .atv2-shot{box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);transition:transform .5s var(--at-ease),box-shadow .5s var(--at-ease)}
.atv2-hero__art .atv2-shot:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 40px 80px -20px rgba(109,74,255,.7),0 0 0 1px rgba(196,181,255,.5)}
.atv2-hero__art .atv2-shot--1{animation:vb-float 7s ease-in-out infinite}
.atv2-hero__art .atv2-shot--2{animation:vb-float 8s ease-in-out -2s infinite}
.atv2-hero__art .atv2-shot--3{animation:vb-float 9s ease-in-out -4s infinite}
@keyframes vb-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Breadcrumbs + page/catalogue hero on dark */
.atv2-scope > .atv2-crumbs{padding-top:var(--at-s6);margin-bottom:0}
.atv2-scope > .atv2-crumbs a,.atv2-scope > .atv2-crumbs span{color:var(--vb-muted-on-dark)}
.atv2-scope > .atv2-crumbs [aria-current]{color:#fff}
.atv2-scope > .atv2-pagehero{
  padding-bottom:var(--at-s12);margin-bottom:var(--at-s8);
  background:radial-gradient(520px 260px at 72% 10%,rgba(139,92,246,.38),transparent 70%),var(--vb-night);
}
.atv2-scope > .atv2-pagehero .atv2-eyebrow,.atv2-cathero .atv2-eyebrow{color:#67e8f9}
.atv2-cathero{padding-bottom:var(--at-s10);margin-bottom:var(--at-s8);
  background:radial-gradient(560px 280px at 72% 10%,rgba(139,92,246,.38),transparent 70%),var(--vb-night)}
.atv2-cathero a{color:var(--vb-link-on-dark)}
.atv2-cathero [class*="legend"],.atv2-cathero li{color:var(--vb-text-on-dark)}

/* ---------- Buttons ---------- */
.atv2-btn--primary{background:var(--vb-grad);background-size:160% 160%;border-color:transparent;box-shadow:var(--vb-glow);transition:background-position .4s var(--at-ease),transform .2s var(--at-ease),box-shadow .3s var(--at-ease)}
.atv2-btn--primary:hover{background-position:100% 50%;transform:translateY(-1px);box-shadow:0 16px 48px -8px rgba(139,92,246,.7)}
.atv2-btn:active{transform:translateY(0)}

/* ---------- Section rhythm ---------- */
.atv2-section:nth-of-type(even):not(.atv2-section--canvas){
  background:linear-gradient(180deg,#f7f4ff 0%,#fff 100%);
  box-shadow:0 0 0 100vmax #f7f4ff00;
}
.atv2-shead .atv2-eyebrow{background:var(--vb-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:.12em}
.atv2-h2{letter-spacing:-.02em}

/* ---------- Cards come alive ---------- */
.atv2-pcard,.atv2-card,.atv2-pack,.atv2-route,.atv2-acc__card,.atv2-acc__stats li{
  transition:transform .35s var(--at-ease),box-shadow .35s var(--at-ease),border-color .35s var(--at-ease);
}
.atv2-pcard:hover,.atv2-card:hover,.atv2-route:hover,.atv2-acc__stats li:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px -20px rgba(30,27,75,.35),0 0 0 1px rgba(139,92,246,.35);
  border-color:rgba(139,92,246,.45);
}
.atv2-pcard img,.atv2-spot__media img{transition:transform .8s var(--at-ease)}
.atv2-pcard:hover img,.atv2-spot__media:hover img{transform:scale(1.045)}
.atv2-pcard{overflow:hidden}
.atv2-pack.is-highlight{border:0;background:linear-gradient(#fff,#fff) padding-box,var(--vb-grad) border-box;border:2px solid transparent;box-shadow:0 30px 60px -28px rgba(109,74,255,.6)}

/* Spotlight + CTA bands */
.atv2-spot__media{border-radius:var(--at-r-xl);overflow:hidden;box-shadow:0 40px 80px -30px rgba(30,27,75,.45)}
.atv2-cta{
  background:
    radial-gradient(600px 300px at 15% 0%,rgba(103,232,249,.25),transparent 60%),
    radial-gradient(700px 360px at 90% 100%,rgba(192,38,211,.35),transparent 60%),
    linear-gradient(120deg,#1e1b4b,#3b2a9a 55%,#6d28d9);
  background-size:140% 140%;animation:vb-pan 18s ease-in-out infinite alternate;
}
@keyframes vb-pan{from{background-position:0% 0%}to{background-position:100% 100%}}

/* ---------- Plain content pages (e.g. SEO) ---------- */
.atv2-prose h2{position:relative;padding-top:var(--at-s2)}
.atv2-prose h2::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--vb-grad);margin-bottom:var(--at-s3)}
.atv2-prose ul li::marker{color:#8b5cf6}

/* ---------- Scroll reveal (JS adds .vb-js; no JS = everything visible) ---------- */
.vb-js .vb-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--at-ease),transform .7s var(--at-ease)}
.vb-js .vb-reveal.is-in{opacity:1;transform:none}

/* ---------- Focus stays obvious on dark ---------- */
.atv2-hero a:focus-visible,.atv2-hero button:focus-visible,
.atv2-scope > .atv2-pagehero a:focus-visible,.atv2-cathero a:focus-visible,.atv2-scope > .atv2-crumbs a:focus-visible{outline:3px solid #67e8f9;outline-offset:3px;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .atv2-hero::after,.atv2-hero__art .atv2-shot,.atv2-cta{animation:none!important}
  .atv2-pcard:hover,.atv2-card:hover,.atv2-route:hover,.atv2-acc__stats li:hover,.atv2-btn--primary:hover{transform:none}
  .atv2-pcard:hover img,.atv2-spot__media:hover img{transform:none}
  .vb-js .vb-reveal{opacity:1;transform:none;transition:none}
}
@media (forced-colors:active){.atv2-hero .atv2-grad,.atv2-shead .atv2-eyebrow{color:CanvasText;background:none}}

/* ======================= Vibrance — round 2 (deeper colour in the lower sections) ======================= */
:root{
  --rc-warn:linear-gradient(135deg,#f97316,#f59e0b);
  --rc-ok:linear-gradient(135deg,#10b981,#14b8a6);
  --rc-info:linear-gradient(135deg,#3b82f6,#06b6d4);
  --rc-brand:linear-gradient(135deg,#8b5cf6,#d946ef);
}
/* Purchase-route cards: coloured top bar, gradient icon tile, tinted hover */
.atv2-route{position:relative;overflow:hidden;--rc:var(--rc-brand)}
.atv2-route--warn{--rc:var(--rc-warn)}.atv2-route--ok{--rc:var(--rc-ok)}.atv2-route--info{--rc:var(--rc-info)}.atv2-route--brand{--rc:var(--rc-brand)}
.atv2-route::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--rc)}
.atv2-route::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--rc);opacity:0;transition:opacity .35s var(--at-ease)}
.atv2-route{isolation:isolate}
.atv2-route:hover::after{opacity:.06}
.atv2-route .atv2-route__icon{background:var(--rc)!important;color:#fff!important;box-shadow:0 10px 24px -10px rgba(30,27,75,.45);border-radius:14px}

/* Soft colour mesh behind light sections */
.atv2-routes,.atv2-section--canvas{position:relative;isolation:isolate}
.atv2-routes::before,.atv2-section--canvas::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 320px at 8% 12%,rgba(139,92,246,.10),transparent 70%),
    radial-gradient(520px 320px at 92% 30%,rgba(6,182,212,.10),transparent 70%),
    radial-gradient(620px 360px at 50% 110%,rgba(217,70,239,.08),transparent 70%);
}

/* Product cards: gradient category label, glowing ring on hover */
.atv2-pcard{position:relative;isolation:isolate;background:#fff}
.atv2-pcard__meta > :first-child{background:var(--vb-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.atv2-pcard::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--vb-grad);opacity:0;filter:blur(14px);transition:opacity .35s var(--at-ease)}
.atv2-pcard:hover::after{opacity:.35}
.atv2-pcard__price{font-weight:800;color:var(--at-ink)}

/* Spotlight: colour halo behind the product image */
.atv2-spot{position:relative;isolation:isolate}
.atv2-spot__media{position:relative}
.atv2-spot__media::before{content:"";position:absolute;inset:-40px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,92,246,.35),rgba(6,182,212,.15),transparent);filter:blur(20px)}

/* AI & SaaS dark section: glows, grid, glass cards with pointer spotlight */
.atv2-section--dark{position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(700px 400px at 0% 0%,rgba(6,182,212,.22),transparent 60%),
    radial-gradient(800px 460px at 100% 100%,rgba(217,70,239,.28),transparent 60%),
    linear-gradient(160deg,#0c0a26,#1b1460 60%,#2a1270)!important}
.atv2-section--dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;
  mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.atv2-section--dark .atv2-h2{color:#fff}
.atv2-section--dark .atv2-lead{color:var(--vb-text-on-dark)}
.atv2-section--dark .atv2-eyebrow{background:var(--vb-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.atv2-aicard{position:relative;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,-30%),rgba(167,139,250,.28),transparent 60%),rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.14)!important;backdrop-filter:blur(8px);
  transition:transform .35s var(--at-ease),border-color .35s var(--at-ease),box-shadow .35s var(--at-ease)}
.atv2-aicard:hover{transform:translateY(-6px);border-color:rgba(196,181,255,.6)!important;box-shadow:0 24px 60px -24px rgba(167,139,250,.6)}
.atv2-aicard__icon{background:var(--rc-brand)!important;color:#fff!important;border-radius:14px;box-shadow:0 10px 30px -10px rgba(217,70,239,.7)}
.atv2-aicard:nth-child(4n+2) .atv2-aicard__icon{background:var(--rc-info)!important}
.atv2-aicard:nth-child(4n+3) .atv2-aicard__icon{background:var(--rc-ok)!important}
.atv2-aicard:nth-child(4n+4) .atv2-aicard__icon{background:var(--rc-warn)!important}

/* Services: gradient icon tiles */
.atv2-svc{position:relative;overflow:hidden;isolation:isolate}
.atv2-svc .atv2-ico{color:#7c3aed}
.atv2-svc::before{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-60px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 70%);transition:transform .5s var(--at-ease)}
.atv2-svc:hover::before{transform:scale(1.6)}

/* How it works: gradient numbers on a connecting line */
.atv2-steps{position:relative}
.atv2-steps__n{background:var(--vb-grad)!important;color:#fff!important;border:0!important;box-shadow:0 0 0 6px #fff,0 10px 24px -6px rgba(109,74,255,.6);position:relative;z-index:1}
.atv2-steps li::before{top:18px;height:3px;border-radius:3px;background:linear-gradient(90deg,#8b5cf6,#d946ef,#06b6d4)}

/* FAQ: open item gets a gradient edge */
.atv2-faq__list details{position:relative;transition:box-shadow .3s var(--at-ease),border-color .3s var(--at-ease)}
.atv2-faq__list details[open]{border-color:rgba(139,92,246,.45);box-shadow:0 18px 40px -24px rgba(109,74,255,.45)}
.atv2-faq__list details[open]::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:4px;background:var(--vb-grad)}
.atv2-faq__list summary:hover{color:var(--at-brand-600)}

/* Footer trust strip: gradient hairline */
.atv2-footer__trust{position:relative}
.atv2-footer__trust::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,#8b5cf6,#d946ef,#06b6d4,transparent)}

/* Hero pointer spotlight (set by JS) */
.atv2-hero > .atv2-container{position:relative}
.atv2-hero > .atv2-container::before{content:"";position:absolute;inset:-200px;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(196,181,255,.16),transparent 60%)}

@media (prefers-reduced-motion:reduce){
  .atv2-aicard:hover{transform:none}
  .atv2-svc:hover::before{transform:none}
}