/*
 ██╗   ██╗███████╗██╗  ██╗████████╗ ██████╗ ██████╗
 ██║   ██║██╔════╝██║ ██╔╝╚══██╔══╝██╔═══██╗██╔══██╗
 ██║   ██║█████╗  █████╔╝    ██║   ██║   ██║██████╔╝
 ╚██╗ ██╔╝██╔══╝  ██╔═██╗    ██║   ██║   ██║██╔══██╗
  ╚████╔╝ ███████╗██║  ██╗   ██║   ╚██████╔╝██║  ██║
   ╚═══╝  ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝
  2026 Design System — Depth Palette + Motion Layer
*/

/* ═══════════════════════════════════════════════════
   DARK THEME — Deep layered blacks with accent depth
═══════════════════════════════════════════════════ */
:root {
  /* Background depth layers — true black to rich dark */
  --vk-void:    #000000;
  --vk-abyss:   #03040a;
  --vk-deep:    #070810;
  --vk-base:    #0a0b14;
  --vk-surface: #0f1020;
  --vk-raised:  #141628;
  --vk-float:   #191b2e;
  --vk-overlay: #1e2136;

  /* Accent colours — teal/cyan primary, warm amber secondary, violet tertiary */
  --vk-teal:    #00c9b1;
  --vk-teal2:   #00a896;
  --vk-teal-d:  rgba(0,201,177,0.12);
  --vk-teal-b:  rgba(0,201,177,0.28);
  --vk-cyan:    #38d9f5;
  --vk-cyan-d:  rgba(56,217,245,0.08);
  --vk-amber:   #f5a623;
  --vk-amber-d: rgba(245,166,35,0.10);
  --vk-amber-b: rgba(245,166,35,0.30);
  --vk-violet:  #a78bfa;
  --vk-violet-d:rgba(167,139,250,0.10);
  --vk-green:   #34d399;
  --vk-green-d: rgba(52,211,153,0.10);
  --vk-red:     #f87171;
  --vk-red-d:   rgba(248,113,113,0.10);

  /* Text hierarchy */
  --vk-t0: #ffffff;
  --vk-t1: rgba(240,242,255,0.92);
  --vk-t2: rgba(200,205,230,0.72);
  --vk-t3: rgba(160,168,200,0.52);
  --vk-t4: rgba(120,130,170,0.32);

  /* Borders */
  --vk-line:  rgba(255,255,255,0.06);
  --vk-line2: rgba(255,255,255,0.11);
  --vk-line3: rgba(255,255,255,0.20);
  --vk-teal-line: rgba(0,201,177,0.22);
  --vk-amber-line: rgba(245,166,35,0.22);

  /* Gradients */
  --vk-grad-hero: linear-gradient(135deg, #03040a 0%, #070810 40%, #0a0b14 100%);
  --vk-grad-teal: linear-gradient(135deg, rgba(0,201,177,0.15) 0%, rgba(56,217,245,0.05) 100%);
  --vk-grad-amber: linear-gradient(135deg, rgba(245,166,35,0.12) 0%, rgba(248,113,113,0.04) 100%);
  --vk-grad-card: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --vk-grad-section-alt: linear-gradient(180deg, #070810 0%, #0a0b14 100%);

  /* Animation timing */
  --vk-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vk-ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME — Layered warm whites with ink depth
═══════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Light background layers — pure white to warm deep */
  --vk-void:    #ffffff;
  --vk-abyss:   #faf9f6;
  --vk-deep:    #f5f3ee;
  --vk-base:    #efede6;
  --vk-surface: #e8e5dc;
  --vk-raised:  #e0ddd2;
  --vk-float:   #d6d2c6;
  --vk-overlay: #cac6b8;

  /* Light accents — deeper, ink-friendly versions */
  --vk-teal:    #0a7c6e;
  --vk-teal2:   #086358;
  --vk-teal-d:  rgba(10,124,110,0.08);
  --vk-teal-b:  rgba(10,124,110,0.22);
  --vk-cyan:    #0b6b7a;
  --vk-cyan-d:  rgba(11,107,122,0.07);
  --vk-amber:   #b45309;
  --vk-amber-d: rgba(180,83,9,0.08);
  --vk-amber-b: rgba(180,83,9,0.22);
  --vk-violet:  #7c3aed;
  --vk-violet-d:rgba(124,58,237,0.08);
  --vk-green:   #059669;
  --vk-green-d: rgba(5,150,105,0.08);
  --vk-red:     #dc2626;
  --vk-red-d:   rgba(220,38,38,0.08);

  /* Text hierarchy */
  --vk-t0: #0f0f0e;
  --vk-t1: rgba(20,19,16,0.92);
  --vk-t2: rgba(30,28,22,0.68);
  --vk-t3: rgba(40,36,28,0.48);
  --vk-t4: rgba(50,46,36,0.28);

  /* Borders */
  --vk-line:  rgba(0,0,0,0.06);
  --vk-line2: rgba(0,0,0,0.10);
  --vk-line3: rgba(0,0,0,0.18);
  --vk-teal-line: rgba(10,124,110,0.20);
  --vk-amber-line: rgba(180,83,9,0.20);

  /* Gradients */
  --vk-grad-hero: linear-gradient(135deg, #faf9f6 0%, #f5f3ee 40%, #efede6 100%);
  --vk-grad-teal: linear-gradient(135deg, rgba(10,124,110,0.08) 0%, rgba(11,107,122,0.03) 100%);
  --vk-grad-amber: linear-gradient(135deg, rgba(180,83,9,0.07) 0%, rgba(220,38,38,0.02) 100%);
  --vk-grad-card: linear-gradient(160deg, rgba(0,0,0,0.025) 0%, rgba(0,0,0,0.005) 100%);
  --vk-grad-section-alt: linear-gradient(180deg, #f5f3ee 0%, #efede6 100%);
}

/* ═══════════════════════════════════════════════════
   GLOBAL STRUCTURAL DEPTH — applies to all pages
═══════════════════════════════════════════════════ */

/* Section alternation — breaks mono-tone flow */
section:nth-child(even) {
  background: var(--vk-grad-section-alt);
}

/* ── ANIMATED GRID BACKGROUND ── */
.vk-grid-bg {
  position: relative;
  isolation: isolate;
}
.vk-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--vk-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vk-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
  animation: vk-grid-drift 20s linear infinite;
}
@keyframes vk-grid-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 48px 48px, 48px 48px; }
}

/* ── NOISE TEXTURE OVERLAY ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
[data-theme="light"] body::after { opacity: 0.025; }

/* ── ACCENT LINE DECORATION — horizontal ruled lines ── */
.vk-rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vk-teal-line), var(--vk-amber-line), transparent);
  margin: 0;
  animation: vk-rule-sweep 4s ease-in-out infinite alternate;
}
@keyframes vk-rule-sweep {
  0%   { opacity: 0.4; transform: scaleX(0.7); }
  100% { opacity: 1;   transform: scaleX(1); }
}

/* ── SECTION DIVIDER with gradient line ── */
.vk-divider {
  position: relative;
  height: 1px;
  background: var(--vk-line2);
  overflow: visible;
}
.vk-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vk-teal), transparent);
  animation: vk-shimmer 3s ease-in-out infinite;
}
@keyframes vk-shimmer {
  0%, 100% { opacity: 0.3; width: 20%; }
  50%       { opacity: 1;   width: 60%; }
}

/* ═══════════════════════════════════════════════════
   NAV DEPTH UPGRADE
═══════════════════════════════════════════════════ */
nav {
  border-bottom-color: var(--vk-line2) !important;
  background: linear-gradient(
    180deg,
    rgba(3,4,10,0.97) 0%,
    rgba(7,8,16,0.95) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
}
[data-theme="light"] nav {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.97) 0%,
    rgba(245,243,238,0.95) 100%
  ) !important;
  border-bottom-color: var(--vk-line2) !important;
}
/* Teal nav indicator line */
nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--vk-teal-line) 30%, var(--vk-amber-line) 70%, transparent 100%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   CARD DEPTH — rich shadows + hover lift
═══════════════════════════════════════════════════ */
.gcard, .doc-card, .int-card, .integration-card, .cpt, .pstep {
  background: var(--vk-grad-card), var(--vk-surface) !important;
  border-color: var(--vk-line2) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2) !important;
  transition: transform 0.25s var(--vk-ease), box-shadow 0.25s var(--vk-ease), border-color 0.2s !important;
}
.gcard:hover, .doc-card:hover, .int-card:hover, .integration-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--vk-teal-line) !important;
  border-color: var(--vk-teal-line) !important;
}
[data-theme="light"] .gcard,
[data-theme="light"] .doc-card,
[data-theme="light"] .int-card,
[data-theme="light"] .integration-card {
  background: linear-gradient(160deg, #ffffff 0%, #f5f3ee 100%) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .gcard:hover,
[data-theme="light"] .doc-card:hover,
[data-theme="light"] .int-card:hover,
[data-theme="light"] .integration-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px var(--vk-teal-line) !important;
}

/* ═══════════════════════════════════════════════════
   HERO DEPTH — layered gradients + animated accent
═══════════════════════════════════════════════════ */
.hero {
  background: var(--vk-grad-hero) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Ambient glow top-left */
.hero::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(0,201,177,0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: vk-glow-drift 8s ease-in-out infinite alternate;
}
@keyframes vk-glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4%, 6%) scale(1.1); }
}
[data-theme="light"] .hero::after {
  background: radial-gradient(ellipse, rgba(10,124,110,0.05) 0%, transparent 70%);
}

/* ═══════════════════════════════════════════════════
   SECTION COLOUR BANDS — alternating accent tints
═══════════════════════════════════════════════════ */

/* Teal-tinted sections */
.vk-band-teal {
  background: linear-gradient(180deg, var(--vk-deep) 0%, rgba(0,201,177,0.04) 50%, var(--vk-base) 100%) !important;
  border-top: 1px solid var(--vk-teal-line);
  border-bottom: 1px solid var(--vk-teal-line);
}
[data-theme="light"] .vk-band-teal {
  background: linear-gradient(180deg, #f5f3ee 0%, rgba(10,124,110,0.04) 50%, #efede6 100%) !important;
}

/* Amber-tinted sections */
.vk-band-amber {
  background: linear-gradient(180deg, var(--vk-deep) 0%, rgba(245,166,35,0.04) 50%, var(--vk-base) 100%) !important;
  border-top: 1px solid var(--vk-amber-line);
  border-bottom: 1px solid var(--vk-amber-line);
}
[data-theme="light"] .vk-band-amber {
  background: linear-gradient(180deg, #f5f3ee 0%, rgba(180,83,9,0.04) 50%, #efede6 100%) !important;
}

/* ═══════════════════════════════════════════════════
   TAG / PILL COLOUR DEPTH
═══════════════════════════════════════════════════ */
.sec-tag, .vk-tag, .badge {
  background: var(--vk-teal-d) !important;
  color: var(--vk-teal) !important;
  border: 1px solid var(--vk-teal-b) !important;
  letter-spacing: 0.14em;
}
.pill {
  background: var(--vk-surface) !important;
  border-color: var(--vk-line2) !important;
}

/* ═══════════════════════════════════════════════════
   BUTTON DEPTH
═══════════════════════════════════════════════════ */
.btn-solid {
  background: linear-gradient(135deg, var(--vk-teal) 0%, var(--vk-teal2) 100%) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 0 0 0 var(--vk-teal-b), 0 4px 16px rgba(0,201,177,0.25) !important;
  transition: box-shadow 0.3s var(--vk-ease), transform 0.2s var(--vk-ease), opacity 0.2s !important;
}
.btn-solid:hover {
  box-shadow: 0 0 0 4px var(--vk-teal-b), 0 8px 24px rgba(0,201,177,0.35) !important;
  transform: translateY(-2px) !important;
  opacity: 1 !important;
}
[data-theme="light"] .btn-solid {
  background: linear-gradient(135deg, var(--vk-teal) 0%, var(--vk-teal2) 100%) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════
   ANIMATED SCAN LINE — decorative horizontal sweep
═══════════════════════════════════════════════════ */
.vk-scan {
  position: relative;
  overflow: hidden;
}
.vk-scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vk-teal), transparent);
  opacity: 0;
  animation: vk-scan-line 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes vk-scan-line {
  0%   { top: 0%;   opacity: 0; }
  5%   { opacity: 0.6; }
  95%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* ═══════════════════════════════════════════════════
   FOOTER DEPTH
═══════════════════════════════════════════════════ */
footer {
  background: var(--vk-abyss) !important;
  border-top: 1px solid var(--vk-line2) !important;
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vk-teal-line), var(--vk-amber-line), transparent);
}
[data-theme="light"] footer {
  background: linear-gradient(180deg, #efede6 0%, #e8e5dc 100%) !important;
}

/* ═══════════════════════════════════════════════════
   CODE BLOCK DEPTH
═══════════════════════════════════════════════════ */
.cblock, .cw, .c {
  border-color: var(--vk-teal-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.3) !important;
}
[data-theme="light"] .cblock,
[data-theme="light"] .cw,
[data-theme="light"] .c {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* ═══════════════════════════════════════════════════
   HERO H1 GHOST TEXT — teal stroke instead of grey
═══════════════════════════════════════════════════ */
.hero h1 .ghost {
  -webkit-text-stroke: 1px var(--vk-teal-b) !important;
  color: transparent !important;
}
[data-theme="light"] .hero h1 .ghost {
  -webkit-text-stroke: 1px var(--vk-teal-b) !important;
}

/* ═══════════════════════════════════════════════════
   SCROLL-DRIVEN FADE-IN (2026 CSS @scroll-timeline)
═══════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()) {
  .gcard, .doc-card, .int-card, .cpt {
    animation: vk-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  @keyframes vk-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ═══════════════════════════════════════════════════
   ACCENT BORDER GLOW on focus/hover for inputs
═══════════════════════════════════════════════════ */
input:focus, textarea:focus, .vk-input:focus {
  box-shadow: 0 0 0 2px var(--vk-teal-b) !important;
  border-color: var(--vk-teal-line) !important;
}

/* ═══════════════════════════════════════════════════
   SELECTION COLOUR
═══════════════════════════════════════════════════ */
::selection {
  background: var(--vk-teal-d);
  color: var(--vk-teal);
}
[data-theme="light"] ::selection {
  background: rgba(10,124,110,0.15);
  color: var(--vk-teal);
}

/* ═══════════════════════════════════════════════════
   SCROLLBAR DEPTH
═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--vk-abyss); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--vk-teal2), var(--vk-surface));
  border-radius: 3px;
}
[data-theme="light"] ::-webkit-scrollbar-track { background: #efede6; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--vk-teal), #cac6b8); }

/* ═══════════════════════════════════════════════════
   LINK UNDERLINE ANIMATION
═══════════════════════════════════════════════════ */
a.vk-link {
  position: relative;
  text-decoration: none;
  color: var(--vk-teal);
}
a.vk-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--vk-teal);
  transition: width 0.3s var(--vk-ease);
}
a.vk-link:hover::after { width: 100%; }

/* ═══════════════════════════════════════════════════
   LIGHT THEME SECTION DEPTH — layered cream/beige
   5-stop palette instead of flat beige
═══════════════════════════════════════════════════ */
[data-theme="light"] section {
  background: transparent;
}
[data-theme="light"] section:nth-child(odd) {
  background: linear-gradient(180deg, #faf9f6 0%, #f5f3ee 100%);
}
[data-theme="light"] section:nth-child(even) {
  background: linear-gradient(180deg, #efede6 0%, #e8e5dc 100%);
}
/* Light accent border between sections */
[data-theme="light"] section + section {
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE LINE WORK — decorative SVG-style borders
═══════════════════════════════════════════════════ */
[data-theme="light"] .hero {
  background: linear-gradient(135deg, #faf9f6 0%, #f5f3ee 50%, #efede6 100%) !important;
}
[data-theme="light"] nav::after {
  background: linear-gradient(90deg, transparent 0%, rgba(10,124,110,0.25) 30%, rgba(180,83,9,0.2) 70%, transparent 100%);
}
[data-theme="light"] footer::before {
  background: linear-gradient(90deg, transparent, rgba(10,124,110,0.2), rgba(180,83,9,0.15), transparent);
}

/* ═══════════════════════════════════════════════════
   FAQ SECTION DEPTH — 3-tone repeating cycle
   Sections 1,4,7,10 = lightest
   Sections 2,5,8    = mid tone
   Sections 3,6,9    = darkest of the three
═══════════════════════════════════════════════════ */

/* ── DARK THEME — 3 tones cycling deeper ── */
.faq-section:nth-child(3n+1) {
  background: linear-gradient(180deg, #0e0f18 0%, #0a0b14 100%);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 28px;
  margin-bottom: 8px !important;
}
.faq-section:nth-child(3n+2) {
  background: linear-gradient(180deg, #131525 0%, #0f1020 100%);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.07);
  padding: 28px;
  margin-bottom: 8px !important;
}
.faq-section:nth-child(3n+3) {
  background: linear-gradient(180deg, #181a30 0%, #141628 100%);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.09);
  padding: 28px;
  margin-bottom: 8px !important;
}

/* ── LIGHT THEME — 3 tones of warm cream cycling darker ── */
[data-theme="light"] .faq-section:nth-child(3n+1) {
  background: linear-gradient(180deg, #ffffff 0%, #fdfcfa 100%) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
[data-theme="light"] .faq-section:nth-child(3n+2) {
  background: linear-gradient(180deg, #fdfcfa 0%, #fbf9f6 100%) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
[data-theme="light"] .faq-section:nth-child(3n+3) {
  background: linear-gradient(180deg, #fbf9f6 0%, #f8f6f2 100%) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* Section header gets a matching left accent bar per tone */
.faq-section:nth-child(3n+1) .section-header { border-bottom-color: rgba(0,201,177,0.15); }
.faq-section:nth-child(3n+2) .section-header { border-bottom-color: rgba(0,201,177,0.20); }
.faq-section:nth-child(3n+3) .section-header { border-bottom-color: rgba(0,201,177,0.28); }

[data-theme="light"] .faq-section:nth-child(3n+1) .section-header { border-bottom-color: rgba(10,124,110,0.12) !important; }
[data-theme="light"] .faq-section:nth-child(3n+2) .section-header { border-bottom-color: rgba(10,124,110,0.18) !important; }
[data-theme="light"] .faq-section:nth-child(3n+3) .section-header { border-bottom-color: rgba(10,124,110,0.26) !important; }

/* FAQ items also step slightly within each section */
[data-theme="light"] .faq-section:nth-child(3n+1) .faq-item { background: rgba(255,255,255,0.4); }
[data-theme="light"] .faq-section:nth-child(3n+2) .faq-item { background: rgba(255,255,255,0.35); }
[data-theme="light"] .faq-section:nth-child(3n+3) .faq-item { background: rgba(255,255,255,0.35); }

/* Social icon colour standardisation */
.f-social a { color: var(--text); }
.f-social a:hover { color: var(--green) !important; opacity: 1 !important; }